/* Hero — editorial, premium and integrated */
.hero {
  width: min(1320px, calc(100% - 40px));
  min-height: 700px;
  grid-template-columns: 1.05fr .85fr;
  gap: 34px;
  margin-top: 24px;
  padding: 64px 66px 0;
  color: white;
  background:
    radial-gradient(circle at 82% 32%, rgba(104, 73, 255, .28), transparent 25%),
    linear-gradient(135deg, #0a0811 0%, #100a25 62%, #0a0811 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 38px;
  overflow: hidden;
  isolation: isolate;
}

.hero-copy { align-self: center; padding-bottom: 64px; position: relative; z-index: 4; }
.hero-mobile-lockup { display: contents; }
.hero-mobile-portrait { display: none; }
.hero .eyebrow { color: #c7bfff; }
.hero .eyebrow span { background: var(--yellow); }
.hero h1 em { color: var(--yellow); }
.hero .lead { color: #c7c1d5; }
.hero .text-link { color: white; border-color: rgba(255, 255, 255, .45); }
.hero .proof-row { border-color: rgba(255, 255, 255, .14); }
.hero .proof-row strong { color: white; }
.hero .proof-row span { color: #a9a2ba; }

.hero-visual { position: relative; align-self: stretch; min-height: 635px; }
.hero-glow { position: absolute; z-index: 0; inset: 3% -8% 0; border-radius: 50%; background: radial-gradient(circle at 52% 44%, rgba(84, 50, 255, .42), rgba(63, 33, 218, .1) 44%, transparent 69%); filter: blur(28px); }
.hero-monogram { position: absolute; z-index: -1; right: -1%; top: 6%; color: rgba(255, 255, 255, .035); font: 800 500px/.8 Manrope; letter-spacing: -.15em; }
.hero-cutout {
  position: absolute;
  z-index: 1;
  inset: 0 50% 0 auto;
  width: 138%;
  height: 100%;
  max-width: none;
  transform: translateX(50%);
  object-fit: cover;
  object-position: center 28%;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  filter: none;
}

.floating-tag { position: absolute; z-index: 3; background: rgba(15, 10, 35, .58); border-color: rgba(255, 255, 255, .24); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.tag-one { top: 15%; left: -2%; }
.tag-two { top: 36%; right: -3%; }
.tag-three { top: 56%; left: 0; }
.hero-signature { position: absolute; z-index: 4; right: 0; bottom: 30px; display: flex; flex-direction: column; padding: 12px 16px; color: white; text-align: right; border-right: 2px solid var(--yellow); background: linear-gradient(90deg, transparent, rgba(10, 8, 17, .68)); }
.hero-signature span { font: 800 22px/1.1 Manrope; letter-spacing: -.04em; }
.hero-signature small { margin-top: 5px; color: #d5cfec; font: 700 10px/1.5 Manrope; letter-spacing: .14em; text-transform: uppercase; }

/* Motion system */
.marquee { transform: rotate(-1.5deg); }
.marquee-track { display: flex; width: max-content; padding: 0 !important; animation: marquee-loop 24s linear infinite; will-change: transform; }
.marquee-track span { flex: none; padding: 14px 9px; font: 800 13px Manrope; letter-spacing: .09em; word-spacing: 18px; }
@keyframes marquee-loop { to { transform: translateX(-50%); } }

.hero-monogram { transform: translate3d(var(--pointer-back-x, 0px), var(--pointer-back-y, 0px), 0); transition: transform .35s ease-out; }
.floating-tag { transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0); transition: transform .35s ease-out, border-color .25s, background .25s; }
.strategy-steps article, .result-case, .chat-bubble, .product-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }

.motion-enabled .reveal-item { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.motion-enabled .reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .strategy-steps article:hover { transform: translateX(8px); }
  .result-case:hover, .chat-bubble:hover, .product-card:hover { transform: translateY(-7px); box-shadow: 0 24px 52px rgba(30, 20, 70, .13); }
  .floating-tag:hover { border-color: rgba(255, 216, 74, .8); background: rgba(63, 33, 218, .72); }
}

/* Method */
.strategy { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; padding-top: 50px; }
.strategy-intro { position: sticky; top: 40px; }
.strategy h2 { font-size: clamp(38px, 4.8vw, 58px); }
.strategy-intro > p:last-child { max-width: 570px; margin-top: 24px; color: var(--muted); font-size: 18px; }
.strategy-steps { border-top: 1px solid var(--line); }
.strategy-steps article { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.strategy-steps article > span { color: var(--purple); font: 800 13px Manrope; letter-spacing: .1em; }
.strategy-steps h3 { margin: 0 0 10px; font: 800 28px/1.15 Manrope; letter-spacing: -.03em; }
.strategy-steps p { max-width: 570px; margin: 0; color: var(--muted); }

/* Services */
.services-grid-two { grid-template-columns: repeat(2, 1fr); }
.services-grid-two .service { min-height: 430px; }
.service h3 small { display: block; margin-top: 6px; color: inherit; font: 600 12px Manrope; letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.service .ideal { margin-top: 0; padding: 15px 17px; border: 1px solid rgba(21, 18, 29, .12); border-radius: 13px; font-size: 14px; font-style: italic; }
.featured .ideal { color: #ece8ff; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }
.services-grid-two .featured > p:not(.ideal) { color: #fff; opacity: .96; }
.service-dark { color: white; border-color: #191426; background: var(--bg); }
.service-dark .number, .service-dark p { color: #bfb9cb; }
.service-dark .icon { color: var(--yellow); }
.service-dark .ideal { color: #e8e4ef; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.service-dark a { color: white; }

/* Portfolio cases */
.case-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.result-case { padding: 28px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 45px rgba(30, 20, 70, .05); }
.result-case h3 { margin: 0; font: 800 30px/1.1 Manrope; letter-spacing: -.04em; }
.case-niche { margin: 7px 0 22px !important; color: var(--purple) !important; font-weight: 700; }
.result-case-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font: 800 12px Manrope; letter-spacing: .11em; text-transform: uppercase; }
.result-case-head span { color: var(--purple); }
.result-case-head strong { padding: 7px 10px; color: #786d2b; background: #fff7cf; border-radius: 999px; font-size: 10px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.before-after small { display: block; margin-bottom: 7px; color: var(--muted); font: 700 10px Manrope; letter-spacing: .12em; }
.case-shot { display: block; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid #d8d4e0; border-radius: 16px; background: #0a0811; }
.case-shot img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.case-shot:hover img { transform: scale(1.025); }
.alex-case .before-after { grid-template-columns: .82fr 1.18fr; align-items: end; }
.alex-case .after-panel { position: relative; z-index: 1; margin: -10px -10px -10px 0; padding: 11px; background: linear-gradient(145deg, rgba(63,33,218,.12), rgba(255,210,58,.22)); border: 1px solid rgba(63,33,218,.22); border-radius: 20px; box-shadow: 0 18px 35px rgba(63,33,218,.16); }
.alex-case .after-panel small { color: var(--purple); }
.alex-case .case-shot.after { border: 2px solid var(--purple); box-shadow: 0 0 0 4px rgba(63,33,218,.08); }
.profile-placeholder { min-height: 210px; display: grid; place-items: center; color: #8d8797; background: linear-gradient(145deg, #eeecf3, #f9f8fb); border: 1px dashed #c9c4d1; border-radius: 16px; font-size: 13px; }
.profile-placeholder.after { color: #b8afff; background: linear-gradient(145deg, #171128, #0a0811); border-color: #403469; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.metric-grid div { padding: 15px 10px; background: #f5f3f8; border-radius: 12px; }
.metric-grid strong { display: block; color: var(--purple); font: 800 25px Manrope; }
.metric-grid span { color: var(--muted); font-size: 11px; }
.result-case > p { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.evidence-strip { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
.evidence-strip a { flex: 0 0 31%; color: var(--ink); text-decoration: none; }
.evidence-strip img { width: 100%; aspect-ratio: 9 / 13; display: block; object-fit: cover; object-position: top; border-radius: 12px; }
.evidence-strip span { display: block; margin-top: 6px; font: 700 11px Manrope; }
.evidence-strip.evidence-two a { flex-basis: calc(50% - 5px); }
.evidence-strip.evidence-two img { aspect-ratio: 9 / 15; }
.portfolio-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 24px; padding: 34px; color: white; background: linear-gradient(125deg, #100a25, #3f21da); border-radius: 24px; }
.portfolio-cta .eyebrow { color: var(--yellow); }
.portfolio-cta h3 { max-width: 650px; margin: 0 0 8px; font: 800 30px/1.15 Manrope; }
.portfolio-cta p { margin: 0; color: #d7d0f5; }
.portfolio-pending { flex: 0 0 auto; color: #0a0811; background: var(--yellow); cursor: default; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
/* Testimonials */
.testimonials { margin-block: 70px; background: var(--bg); color: white; }
.testimonials .eyebrow { color: var(--yellow); }
.testimonials .section-heading h2 { color: #fff; }
.testimonials .section-heading { padding-top: 6px; }
.testimonials .section-heading.split > p { color: #f0edf6; }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.chat-bubble { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 26px; background: #161121; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px 24px 24px 5px; }
.avatar-placeholder { width: 46px; height: 46px; display: grid; place-items: center; color: white; background: var(--purple); border-radius: 50%; font: 800 12px Manrope; }
.chat-bubble h3 { margin: 2px 0 4px; font: 800 20px Manrope; }
.chat-bubble strong { color: var(--yellow); font-size: 13px; }
.chat-bubble p:last-child { color: #bfb9cb; }
.chat-meta { margin: 0; color: #c7bfd5; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* About portrait — loose editorial composition */
.about {
  position: relative;
  min-height: 650px;
  grid-template-columns: 1.05fr .85fr;
  grid-template-areas:
    "statement photo"
    "copy photo";
  gap: 34px 46px;
  padding: 68px 58px;
  overflow: hidden;
  background: linear-gradient(100deg, #fff 0%, #fff 48%, #ededf4 57%, #3a395d 78%, #363558 100%);
}
.about-statement { grid-area: statement; max-width: 620px; align-self: end; }
.about-statement h2 { font-size: clamp(35px, 3.6vw, 49px); }
.about-copy { grid-area: copy; max-width: 560px; align-self: start; }
.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 24px; }
.about-facts div { padding: 13px 10px; background: rgba(255,255,255,.82); border: 1px solid rgba(21,18,29,.1); border-radius: 13px; }
.about-facts strong { display: block; color: var(--purple); font: 800 17px Manrope; }
.about-facts span { display: block; color: var(--muted); font-size: 10px; line-height: 1.3; }
.about-heading-row { display: contents; }
.about-mobile-avatar { display: none; }
.about-photo {
  grid-area: photo;
  position: relative;
  align-self: stretch;
  height: auto;
  margin: -68px -58px -68px -34px;
  overflow: visible;
  border-radius: 0;
  background: radial-gradient(circle at 58% 44%, rgba(95, 68, 255, .3), transparent 52%);
  box-shadow: none;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 19%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 19%, #000 100%);
  filter: none;
}
.about-photo:after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(transparent, rgba(54, 53, 88, .68)); pointer-events: none; }
.about-photo figcaption { display: none; }

/* FAQ */
.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 85px; align-items: start; }
.faq h2 { font-size: clamp(38px, 4.8vw, 58px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font: 700 18px/1.35 Manrope; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--purple); font-size: 26px; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 690px; margin: -4px 0 24px; color: var(--muted); }
.social-contact { display: grid; grid-template-columns: .58fr 1.42fr; gap: 48px; align-items: center; padding-block: 46px 54px; }
.social-contact h2 { margin: 0 0 10px; font: 800 clamp(30px, 4vw, 44px)/1 Manrope; letter-spacing: -.05em; }
.social-contact p { margin: 0; color: var(--muted); }
.social-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.social-links a { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; min-height: 82px; padding: 15px 16px; color: var(--ink); text-decoration: none; background: white; border: 1px solid var(--line); border-radius: 17px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.social-links a:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(30,20,70,.09); }
.social-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--purple); background: #f0edff; border-radius: 13px; }
.social-icon svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; }
.social-icon svg rect, .social-icon svg circle:not(.icon-fill) { fill: none; }
.social-copy { min-width: 0; }
.social-copy small { display: block; margin-bottom: 3px; color: var(--muted); font: 700 10px Manrope; letter-spacing: .09em; text-transform: uppercase; }
.social-copy strong { display: block; overflow: hidden; font: 800 15px Manrope; text-overflow: ellipsis; white-space: nowrap; }
.social-arrow { color: var(--muted); font-size: 15px; }
.social-links .social-primary { color: white; background: var(--purple); border-color: var(--purple); }
.social-links .social-primary .social-icon { color: white; background: rgba(255,255,255,.14); }
.social-links .social-primary .social-copy small, .social-links .social-primary .social-arrow { color: #d9d2ff; }
.site-footer { display: block; padding-block: 30px 34px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: auto 1fr auto; gap: 42px; align-items: center; padding-bottom: 24px; }
.footer-top > p { max-width: 520px; margin: 0; color: var(--muted); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.dialog-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dialog-actions .text-link { border: 0; background: none; cursor: pointer; }

@media (max-width: 1050px) {
  .hero { padding-inline: 46px; }
  .hero h1 { font-size: 58px; }
  .hero-cutout { width: 128%; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 54px 44px 0; }
  .hero-copy { padding-bottom: 0; }
  .hero-visual { min-height: 620px; max-width: 570px; width: 100%; margin-inline: auto; }
  .hero-cutout { width: 138%; object-position: center 28%; }
  .strategy, .faq { grid-template-columns: 1fr; gap: 40px; }
  .strategy-intro { position: static; }
  .case-results-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .social-contact { grid-template-columns: 1fr; gap: 28px; }
  .about { min-height: 0; grid-template-columns: 1fr; grid-template-areas: "statement" "copy" "photo"; background: linear-gradient(180deg, #fff 0%, #fff 55%, #3a395d 78%, #363558 100%); }
  .about-statement { grid-column: auto; }
  .about-photo { height: 610px; margin: 8px -42px -42px; }
  .about-photo img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%); object-position: center top; }
}

@media (max-width: 600px) {
  .hero { width: calc(100% - 20px); min-height: auto; margin-top: 10px; padding: 34px 22px 32px; border-radius: 25px; }
  .hero-copy { padding-bottom: 0; }
  .hero-mobile-lockup { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 12px; align-items: center; }
  .hero h1 { font-size: clamp(31px, 9vw, 38px); }
  .hero-mobile-portrait { position: relative; display: block; width: 118px; height: 118px; margin: 0; overflow: hidden; border: 2px solid rgba(255, 216, 74, .86); border-radius: 50%; background: #171128; box-shadow: 0 0 0 7px rgba(104, 73, 255, .16), 0 18px 35px rgba(0, 0, 0, .3); }
  .hero-mobile-portrait:before { content: ""; position: absolute; inset: -18px; background: radial-gradient(circle, rgba(104, 73, 255, .42), transparent 67%); }
  .hero-mobile-portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: none; transform: scale(1.28) translateY(-7%); transform-origin: 50% 50%; }
  .hero .lead { margin: 22px 0; font-size: 16px; line-height: 1.55; }
  .hero-actions { flex-direction: row; align-items: center; gap: 16px; }
  .hero-actions .button { padding: 14px 16px; font-size: 13px; }
  .hero-actions .text-link { font-size: 13px; }
  .hero .proof-row { grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 28px; padding-top: 20px; }
  .hero .proof-row div:last-child { grid-column: auto; }
  .hero .proof-row strong { font-size: 11px; }
  .hero .proof-row span { font-size: 10px; line-height: 1.3; }
  .hero-visual { display: none; }
  .strategy { gap: 22px; padding-top: 35px; }
  .strategy-intro > p:last-child { font-size: 16px; }
  .strategy-steps article { grid-template-columns: 38px 1fr; gap: 12px; padding: 24px 0; }
  .strategy-steps h3 { font-size: 23px; }
  .services-grid-two { grid-template-columns: 1fr; }
  .services-grid-two .service { min-height: 390px; }
  .before-after { gap: 8px; }.profile-placeholder { min-height: 165px; }
  .alex-case .before-after { grid-template-columns: .78fr 1.22fr; gap: 7px; }
  .alex-case .after-panel { margin: -7px -7px -7px 0; padding: 8px; border-radius: 16px; }
  .result-case { padding: 20px; }
  .result-case h3 { font-size: 26px; }
  .portfolio-cta { align-items: flex-start; flex-direction: column; padding: 24px; }
  .portfolio-pending { width: 100%; padding-inline: 12px; font-size: 12px; }
  .metric-grid { grid-template-columns: 1fr; }.metric-grid div { display: flex; align-items: center; justify-content: space-between; }
  .testimonials { margin-block: 35px; }
  .chat-bubble { grid-template-columns: 38px 1fr; padding: 20px; }.avatar-placeholder { width: 38px; height: 38px; }
  .faq { gap: 25px; }
  .about { display: grid; grid-template-columns: 1fr; grid-template-areas: "statement" "copy"; gap: 30px; padding: 36px 24px; background: #fff; }
  .about-statement { grid-column: auto; }
  .about-statement h2 { font-size: clamp(30px, 9.2vw, 39px); }
  .about-copy { width: 100%; }
  .about-copy .eyebrow { margin-bottom: 12px; }
  .about-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; align-items: center; margin-bottom: 18px; }
  .about-heading-row h3 { margin: 0; font-size: 27px; line-height: 1.08; }
  .about-mobile-avatar { display: block; width: 104px; height: 104px; margin: 0; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #363558; box-shadow: 0 0 0 2px var(--purple), 0 15px 30px rgba(46, 34, 102, .22); }
  .about-mobile-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: none; }
  .about-copy p { font-size: 16px; }
  .about-facts { grid-template-columns: 1fr; }
  .about-facts div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .about-facts span { max-width: 145px; text-align: right; }
  .about-photo { display: none; }
  .social-contact { padding-block: 32px 55px; }
  .social-links { grid-template-columns: 1fr; }
  .social-links a { min-height: 82px; }
  .about-facts span { max-width: 190px; font-size: 11px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 18px; }
  .footer-top > p { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
  .motion-enabled .reveal-item { opacity: 1; transform: none; transition: none; }
  .hero-monogram, .floating-tag, .strategy-steps article, .result-case, .chat-bubble, .product-card { transition: none; }
}