:root {
  --black: #120f18;
  --black-soft: #191420;
  --black-card: #21192b;
  --paper: #f4efe4;
  --paper-soft: #fcf8f0;
  --ink: #12120f;
  --gold: #caa85c;
  --gold-light: #e2c881;
  --gold-dark: #85672d;
  --white: #f8f5ed;
  --muted-dark: #c2bbaf;
  --muted-light: #655f56;
  --line-dark: rgba(248,245,237,.15);
  --line-light: rgba(18,18,15,.16);
  --ease: cubic-bezier(.2,.75,.2,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);
  --container: 1540px;
  --mx: 50%;
  --my: 50%;
  --dx: 0;
  --dy: 0;
  --header-split: 50%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: radial-gradient(circle at 15% 0%, rgba(202,168,92,.10), transparent 24%), radial-gradient(circle at 85% 12%, rgba(124,62,156,.12), transparent 18%), linear-gradient(180deg,#181222 0%,#120f18 42%,#0f0b16 100%); color: var(--white); font-family: "Manrope", sans-serif; font-style: normal; }
body.menu-open { overflow: hidden; }
body, button, input, textarea { font-style: normal; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--black); }

.intro { position: fixed; inset: 0; z-index: 999; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(202,168,92,.08), transparent 22%); animation: intro-out .9s 2.05s var(--ease) forwards; }
.intro__dark, .intro__light { position: absolute; inset-block: 0; width: 50%; }
.intro__dark { left: 0; background: linear-gradient(180deg, #171121 0%, #100b16 100%); animation: intro-left 1.05s 1.45s var(--ease) forwards; }
.intro__light { right: 0; background: linear-gradient(180deg, #f7f1e5 0%, #efe7d7 100%); animation: intro-right 1.05s 1.45s var(--ease) forwards; }
.intro__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: linear-gradient(180deg, transparent 0%, rgba(202,168,92,.95) 18%, rgba(202,168,92,.95) 82%, transparent 100%); transform: translateX(-50%); box-shadow: 0 0 30px rgba(202,168,92,.6); }
.intro__word { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-family: "Unbounded", sans-serif; font-size: clamp(30px,5vw,82px); font-weight: 700; letter-spacing: .12em; animation: intro-word 1s .28s var(--ease) both; text-shadow: 0 0 26px rgba(202,168,92,.18); }
@keyframes intro-word { from { opacity: 0; letter-spacing: .3em; filter: blur(8px); } to { opacity: 1; letter-spacing: .12em; filter: blur(0); } }
@keyframes intro-left { to { transform: translateX(-105%); } }
@keyframes intro-right { to { transform: translateX(105%); } }
@keyframes intro-out { to { visibility: hidden; } }
.intro__pulse { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--gold-light) 0%, var(--gold) 58%, rgba(202,168,92,.25) 100%); transform: translate(-50%,-50%); box-shadow: 0 0 0 0 rgba(202,168,92,.24); animation: intro-pulse 1.9s .2s ease-in-out infinite; }
.intro__rings { position: absolute; inset: 0; display: grid; place-items: center; }
.intro__rings span { position: absolute; border-radius: 50%; border: 1px solid rgba(202,168,92,.24); }
.intro__rings span:nth-child(1) { width: 140px; height: 140px; animation: intro-ring 1.8s .05s ease-out infinite; }
.intro__rings span:nth-child(2) { width: 280px; height: 280px; animation: intro-ring 1.8s .28s ease-out infinite; }
.intro__rings span:nth-child(3) { width: 440px; height: 440px; animation: intro-ring 1.8s .52s ease-out infinite; }
@keyframes intro-pulse { 50% { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 24px rgba(202,168,92,0), 0 0 34px rgba(202,168,92,.28); } }
@keyframes intro-ring { 0% { opacity: 0; transform: scale(.72); } 34% { opacity: .8; } 100% { opacity: 0; transform: scale(1.06); } }


.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 44px; height: 44px; pointer-events: none; opacity: 0; transform: translate(-50%,-50%); border: 1px solid rgba(202,168,92,.75); border-radius: 50%; mix-blend-mode: difference; transition: width .25s var(--ease), height .25s var(--ease), opacity .25s; }
.cursor span { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--gold); }
.cursor.is-active { width: 76px; height: 76px; }

.header { position: fixed; inset: 0 0 auto; z-index: 120; height: 88px; padding: 0 clamp(22px,4.2vw,82px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.14); transition: height .4s, color .4s, border-color .4s; isolation: isolate; }
.header::before, .header::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.header::before { right: calc(100% - var(--header-split)); background: linear-gradient(180deg, rgba(13,16,22,.9), rgba(13,16,22,.74)); }
.header::after { left: var(--header-split); background: linear-gradient(180deg, rgba(252,248,240,.96), rgba(244,239,228,.9)); border-left: 1px solid rgba(202,168,92,.26); }
.header.scrolled::before { backdrop-filter: blur(18px); background: linear-gradient(180deg, rgba(13,16,22,.92), rgba(13,16,22,.82)); }
.header.scrolled::after { backdrop-filter: blur(18px); background: linear-gradient(180deg, rgba(252,248,240,.96), rgba(244,239,228,.92)); }
.header > * { position: relative; z-index: 1; }
.logo { display: inline-flex; align-items: center; gap: 13px; width: max-content; font-family: "Unbounded", sans-serif; }
.logo__sign { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: 16px; box-shadow: 0 0 18px rgba(202,168,92,.18); }
.logo__name { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.logo__version { align-self: flex-start; margin-top: 25px; color: var(--gold); font-size: 7px; }
.nav { justify-self: center; display: flex; align-items: center; gap: clamp(16px,2.2vw,40px); padding: 12px 24px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); backdrop-filter: blur(8px); }
.nav a { position: relative; padding: 9px 0; }
.nav a:nth-child(-n+2) { color: var(--white); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.nav a:nth-child(n+3) { color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 1px; background: var(--gold); transition: right .4s var(--ease); }
.nav a:hover::after { right: 0; }
.header-contact { justify-self: end; min-width: 226px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 9px 9px 18px; border: 1px solid rgba(18,18,15,.18); color: var(--ink); background: rgba(255,255,255,.42); box-shadow: 0 12px 28px rgba(133,103,45,.08); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: transform .35s, background .35s, color .35s, border-color .35s; }
.header-contact b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 0; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--black); font-size: 16px; }
.header-contact:hover { background: linear-gradient(90deg, rgba(202,168,92,.12), rgba(255,255,255,.58)); border-color: rgba(202,168,92,.55); }
.menu-button { display: none; justify-self: end; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-button i { display: block; height: 1px; margin: 7px 0; background: currentColor; transition: transform .3s; }
.mobile-menu { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 100px 24px 40px; background: radial-gradient(circle at 20% 10%, rgba(202,168,92,.08), transparent 25%), var(--black); opacity: 0; visibility: hidden; transform: translateY(-15px); transition: .45s var(--ease); }
.mobile-menu nav { width: min(680px,100%); display: grid; }
.mobile-menu a { display: grid; grid-template-columns: 55px 1fr; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-family: "Unbounded", sans-serif; font-size: clamp(26px,7vw,58px); letter-spacing: -.04em; }
.mobile-menu a span { color: var(--gold); font: 700 9px "Manrope", sans-serif; letter-spacing: .15em; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
body.menu-open .menu-button i:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-open .menu-button i:last-child { transform: translateY(-4px) rotate(-45deg); }

.hero { position: relative; height: max(780px,100svh); min-height: 780px; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(202,168,92,.12), transparent 24%), radial-gradient(circle at 74% 60%, rgba(245,210,134,.08), transparent 28%), linear-gradient(180deg,#171221 0%,#100b16 52%,#0f0a14 100%); --split: 50; }
.hero-side { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.hero-side--dev { z-index: 1; color: var(--white); background: radial-gradient(circle at 18% 14%, rgba(202,168,92,.13), transparent 22%), radial-gradient(circle at 62% 56%, rgba(202,168,92,.08), transparent 30%), linear-gradient(180deg, #171221 0%, #140f1c 48%, #0c0910 100%); clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.hero-side--dev::before, .hero-side--dev::after { content: ""; position: absolute; inset: auto; pointer-events: none; }
.hero-side--dev::before { left: 8%; top: 17%; width: 44%; height: 44%; border-radius: 50%; border: 1px solid rgba(202,168,92,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); transform: translate(calc(var(--dx) * -18px), calc(var(--dy) * -10px)); }
.hero-side--dev::after { right: 12%; bottom: 8%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(202,168,92,.14), transparent 68%); filter: blur(30px); transform: translate(calc(var(--dx) * 12px), calc(var(--dy) * 10px)); }
.hero-side--growth { z-index: 0; color: var(--ink); background: linear-gradient(180deg, #fbf8f2 0%, #f5efe3 54%, #f8f4eb 100%); clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.hero-side--growth::before, .hero-side--growth::after { content: ""; position: absolute; pointer-events: none; }
.hero-side--growth::before { right: 10%; top: 14%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(202,168,92,.16), rgba(202,168,92,0) 72%); filter: blur(6px); transform: translate(calc(var(--dx) * -10px), calc(var(--dy) * -8px)); }
.hero-side--growth::after { left: 8%; bottom: 4%; width: 56%; height: 34%; border: 1px solid rgba(202,168,92,.08); border-radius: 60% 40% 50% 50%; transform: translate(calc(var(--dx) * 10px), calc(var(--dy) * 8px)); }
.hero-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.052) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right,#000 0 78%,transparent); }
.hero-grid::before, .hero-grid::after { content: ""; position: absolute; pointer-events: none; }
.hero-grid::before { left: 6%; top: 18%; width: 130px; height: 130px; border: 1px solid rgba(202,168,92,.16); box-shadow: 0 0 40px rgba(202,168,92,.08); transform: translate(calc(var(--dx) * -14px), calc(var(--dy) * -9px)); }
.hero-grid::after { right: 18%; top: 16%; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 12px rgba(202,168,92,.08), 84px 24px 0 -2px rgba(202,168,92,.48), 124px -10px 0 -4px rgba(202,168,92,.24), -36px 72px 0 -3px rgba(202,168,92,.32); transform: translate(calc(var(--dx) * 12px), calc(var(--dy) * 10px)); }
.paper-lines { position: absolute; inset: 0; opacity: .78; background: repeating-linear-gradient(0deg, transparent 0 70px, rgba(18,18,15,.05) 71px 72px), radial-gradient(circle at 86% 18%,rgba(202,168,92,.22),transparent 20%), radial-gradient(circle at 28% 84%,rgba(202,168,92,.1),transparent 18%); }
.paper-lines::before, .paper-lines::after { content: ""; position: absolute; pointer-events: none; }
.paper-lines::before { right: 8%; top: 12%; width: 280px; height: 200px; background: linear-gradient(90deg, rgba(202,168,92,.08), transparent 55%), linear-gradient(180deg, transparent 0 36%, rgba(202,168,92,.2) 36% 37%, transparent 37% 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.05)); transform: translate(calc(var(--dx) * -8px), calc(var(--dy) * -8px)); }
.paper-lines::after { left: 9%; bottom: 7%; width: 360px; height: 220px; border-radius: 50%; border: 1px solid rgba(202,168,92,.12); box-shadow: inset 0 0 0 1px rgba(202,168,92,.06); transform: translate(calc(var(--dx) * 10px), calc(var(--dy) * 9px)); }
.hero-content { position: absolute; z-index: 3; top: 50%; width: min(43vw,760px); transform: translateY(-48%); }
.hero-content--dev { left: clamp(30px,6vw,116px); }
.hero-content--growth { right: clamp(34px,6vw,116px); text-align: left; align-items: flex-start; }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 35px; color: var(--gold); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.hero-content--growth .hero-meta { justify-content: flex-start; color: var(--gold-dark); }
.hero-meta span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid currentColor; }
.hero-meta b { font-weight: 700; }
.hero h1, .hero h2 { margin: 0; font-family: "Unbounded", sans-serif; font-size: clamp(48px,5.15vw,103px); line-height: .91; letter-spacing: -.065em; font-weight: 600; }
.hero h1 span, .hero h2 span { color: var(--gold); }
.hero h2 span { color: var(--gold-dark); }
.hero-content p { max-width: 560px; margin: 32px 0 34px; color: var(--muted-dark); font-size: clamp(14px,1.05vw,18px); line-height: 1.75; text-wrap: balance; }
.hero-content--growth p { margin-left: 0; color: var(--muted-light); max-width: 520px; }
.hero-link { display: inline-flex; align-items: center; justify-content: space-between; min-width: 225px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.33); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: .35s; }
.hero-link b { color: var(--gold); font-size: 18px; }
.hero-link--light { border-color: rgba(202,168,92,.4); background: rgba(202,168,92,.08); box-shadow: 0 12px 24px rgba(202,168,92,.08); }
.hero-link--light b { color: var(--gold-dark); }
.hero-link:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.hero-link:hover b { color: var(--black); }
.dev-machine { position: absolute; z-index: 2; left: clamp(30px,8vw,150px); bottom: 8%; width: min(31vw,560px); aspect-ratio: 1.58; opacity: .45; border: 1px solid rgba(255,255,255,.16); background: rgba(18,18,16,.66); backdrop-filter: blur(8px); transform: perspective(1200px) rotateX(5deg) rotateY(13deg) translateX(-35%); transition: transform 1s var(--ease), opacity .8s; }
.hero-side--dev.is-active .dev-machine { opacity: .9; transform: perspective(1200px) rotateX(2deg) rotateY(5deg) translateX(22%); }
.machine-top { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.machine-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.machine-top span { margin-left: auto; color: rgba(255,255,255,.35); font-size: 7px; letter-spacing: .1em; }
.machine-canvas { position: relative; height: calc(100% - 34px); background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 28px 28px; }
.machine-line { position: absolute; left: 8%; height: 7px; background: rgba(255,255,255,.15); transform-origin: left; animation: machine-line 5s ease-in-out infinite; }
.machine-line.l1 { top: 12%; width: 24%; background: var(--gold); }
.machine-line.l2 { top: 20%; width: 55%; animation-delay: .5s; }
.machine-line.l3 { top: 28%; width: 43%; animation-delay: 1s; }
@keyframes machine-line { 0%,100% { transform: scaleX(.72); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }
.machine-card { position: absolute; bottom: 10%; width: 38%; height: 45%; padding: 14px; border: 1px solid rgba(255,255,255,.13); }
.machine-card.c1 { left: 8%; }
.machine-card.c2 { right: 8%; }
.machine-card b { color: var(--gold); font: 600 11px "Unbounded",sans-serif; }
.machine-card i { display: block; height: 5px; margin-top: 13px; background: rgba(255,255,255,.12); }
.machine-card i:last-child { width: 65%; }
.machine-cursor { position: absolute; left: 54%; top: 45%; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); animation: machine-cursor 6s var(--ease) infinite; }
@keyframes machine-cursor { 0%,100% { transform: translate(-70px,-28px); } 30% { transform: translate(25px,-10px); } 65% { transform: translate(50px,55px); } }
.growth-orbit { position: absolute; z-index: 2; right: clamp(40px,8vw,150px); bottom: 7%; width: min(33vw,610px); aspect-ratio: 1; opacity: .58; transform: translateX(34%) scale(.82); transition: transform 1s var(--ease), opacity .8s; }
.hero-side--growth.is-active .growth-orbit { opacity: 1; transform: translateX(-10%) scale(1); }
.orbit-ring { position: absolute; inset: 10%; border: 1px solid rgba(18,18,15,.2); border-radius: 50%; animation: orbit-spin 18s linear infinite; }
.orbit-ring::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-dark); }
.orbit-ring--2 { inset: 24%; animation-direction: reverse; animation-duration: 13s; }
.orbit-ring--3 { inset: 38%; animation-duration: 9s; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit-core { position: absolute; inset: 33%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--ink); color: var(--white); box-shadow: 0 25px 70px rgba(30,25,15,.22); }
.orbit-core small { color: var(--gold); font-size: 7px; letter-spacing: .18em; }
.orbit-core strong { margin-top: 8px; font: 600 clamp(22px,2vw,38px) "Unbounded",sans-serif; letter-spacing: -.06em; }
.orbit-dot { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(18,18,15,.22); background: rgba(250,247,239,.85); border-radius: 50%; }
.orbit-dot::after { content: "+"; color: var(--gold-dark); font: 600 18px "Unbounded",sans-serif; }
.orbit-dot.d1 { top: 9%; left: 22%; animation: float 4s ease-in-out infinite; }
.orbit-dot.d2 { right: 4%; top: 45%; animation: float 5s 1s ease-in-out infinite; }
.orbit-dot.d3 { left: 14%; bottom: 4%; animation: float 4.5s .5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px) rotate(12deg); } }
.hero-seam { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-seam path { fill: none; vector-effect: non-scaling-stroke; }
.hero-seam__shadow { stroke: rgba(202,168,92,.2); stroke-width: 26; filter: blur(10px); }
.hero-seam__gold { stroke: var(--gold); stroke-width: 2.5; }
.seam-control { position: absolute; z-index: 8; left: 50%; top: 50%; width: 74px; height: 74px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(202,168,92,.7); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #efd18a, var(--gold)); color: var(--black); box-shadow: 0 0 0 12px rgba(202,168,92,.06), 0 18px 38px rgba(202,168,92,.18); transform: translate(-50%,-50%); transition: transform .35s var(--ease), box-shadow .35s var(--ease); cursor: pointer; }
.seam-control span { font: 700 22px "Unbounded",sans-serif; }
.seam-control small { position: absolute; width: 170px; left: 50%; bottom: -31px; transform: translateX(-50%); color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .17em; }
.seam-control:hover { transform: translate(-50%,-50%) scale(1.06); box-shadow: 0 0 0 16px rgba(202,168,92,.08), 0 22px 46px rgba(202,168,92,.2); }
.hero-bottom { position: absolute; z-index: 9; left: clamp(28px,4vw,80px); right: clamp(28px,4vw,80px); bottom: 23px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; color: rgba(255,255,255,.5); mix-blend-mode: difference; font-size: 7px; font-weight: 700; letter-spacing: .2em; }
.hero-bottom i { height: 1px; background: rgba(255,255,255,.3); }

.section { position: relative; padding: clamp(110px,10vw,190px) clamp(24px,5vw,96px); }
.section-code { position: absolute; top: 45px; left: clamp(24px,5vw,96px); color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.statement { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 78% 22%, rgba(124,62,156,.14), transparent 18%), radial-gradient(circle at 22% 82%, rgba(202,168,92,.1), transparent 22%), var(--black-soft); overflow: hidden; --statement-x: 50%; --statement-y: 50%; }
.statement::before { content: ""; position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 90px 90px; }
.statement::after { content: ""; position: absolute; inset: -15%; background: radial-gradient(circle at var(--statement-x) var(--statement-y), rgba(202,168,92,.18), transparent 14%), radial-gradient(circle at calc(var(--statement-x) + 8%) calc(var(--statement-y) - 10%), rgba(124,62,156,.14), transparent 18%); filter: blur(6px); pointer-events: none; }
.statement-orbit { position: absolute; inset: 0; pointer-events: none; }
.statement-orbit i { position: absolute; border-radius: 50%; border: 1px solid rgba(202,168,92,.18); }
.statement-orbit i:nth-child(1) { width: 320px; height: 320px; right: 9%; top: 14%; transform: translate(calc((var(--statement-x) - 50%) * .06), calc((var(--statement-y) - 50%) * -.05)); box-shadow: 0 0 0 18px rgba(202,168,92,.03); }
.statement-orbit i:nth-child(2) { width: 18px; height: 18px; right: 17%; top: 25%; background: var(--gold); box-shadow: 0 0 0 8px rgba(202,168,92,.08); transform: translate(calc((var(--statement-x) - 50%) * .1), calc((var(--statement-y) - 50%) * .08)); }
.statement-orbit i:nth-child(3) { width: 220px; height: 220px; left: 8%; bottom: 10%; border-style: dashed; border-color: rgba(124,62,156,.18); transform: translate(calc((var(--statement-x) - 50%) * -.05), calc((var(--statement-y) - 50%) * .06)); }
.statement-line { position: relative; z-index: 1; max-width: var(--container); width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .18em; font-family: "Unbounded",sans-serif; font-size: clamp(34px,6.2vw,112px); line-height: 1.04; letter-spacing: -.06em; transition: transform .45s var(--ease), text-shadow .45s var(--ease); }
.statement-line--right { justify-content: flex-end; text-align: right; margin-top: 28px; transform: translateX(calc((var(--statement-x) - 50%) * -.035)); }
.statement-line:not(.statement-line--right) { transform: translateX(calc((var(--statement-x) - 50%) * .035)); }
.statement-line span { color: var(--white); text-shadow: 0 0 22px rgba(255,255,255,.02); }
.statement-line b { color: var(--gold); font-weight: 600; text-shadow: 0 0 24px rgba(202,168,92,.12); }
.core-mark { width: 82px; height: 82px; border: 1px solid rgba(202,168,92,.48); display: grid; place-items: center; color: var(--gold); font: 600 26px "Unbounded",sans-serif; box-shadow: 0 0 0 18px rgba(202,168,92,.03); }
.statement-core { position: relative; z-index: 1; max-width: 830px; margin: 95px auto 0; display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 25px; transition: transform .45s var(--ease); transform: translateY(calc((var(--statement-y) - 50%) * .04)); }
.statement-core p { margin: 0; color: var(--muted-dark); line-height: 1.7; }
.statement-core strong { color: var(--gold); font: 600 9px "Unbounded",sans-serif; letter-spacing: .1em; writing-mode: vertical-rl; }

.dual-lab { position: relative; height: min(920px,100svh); min-height: 760px; overflow: hidden; background: var(--black); --lens-x: 70%; --lens-y: 50%; }
.lab-layer { position: absolute; inset: 0; padding: clamp(85px,8vw,140px) clamp(24px,6vw,115px); }
.lab-layer--dev { color: var(--white); background: radial-gradient(circle at 70% 50%,rgba(202,168,92,.06),transparent 30%),var(--black); }
.lab-layer--marketing { color: var(--ink); background: var(--paper); clip-path: circle(170px at var(--lens-x) var(--lens-y)); transition: clip-path .45s cubic-bezier(.16,1,.3,1); }
.lab-head { max-width: var(--container); margin: auto; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 90px; }
.lab-head span { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .2em; }
.lab-layer--marketing .lab-head span { color: var(--gold-dark); }
.lab-head h2 { margin: 25px 0 0; font: 600 clamp(46px,5.2vw,94px)/.95 "Unbounded",sans-serif; letter-spacing: -.065em; }
.lab-head p { margin: 0 0 5px; color: var(--muted-dark); line-height: 1.75; }
.lab-layer--marketing .lab-head p { color: var(--muted-light); }
.lab-grid { max-width: var(--container); margin: 95px auto 0; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.lab-layer--marketing .lab-grid { border-color: var(--line-light); }
.lab-grid article { min-height: 300px; padding: 28px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.lab-layer--marketing article { border-color: var(--line-light); }
.lab-grid article > span { color: var(--gold); font-size: 8px; }
.lab-layer--marketing article > span { color: var(--gold-dark); }
.lab-grid h3 { margin: 125px 0 16px; font: 600 clamp(18px,1.5vw,26px) "Unbounded",sans-serif; letter-spacing: -.035em; }
.lab-grid p { margin: 0; color: var(--muted-dark); font-size: 13px; line-height: 1.7; }
.lab-layer--marketing .lab-grid p { color: var(--muted-light); }
.lab-lens { position: absolute; z-index: 5; left: var(--lens-x); top: var(--lens-y); width: 340px; height: 340px; border: 1px solid var(--gold); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(202,168,92,.2),0 0 90px rgba(202,168,92,.14); transition: width .35s,height .35s, left .22s var(--ease), top .22s var(--ease); }
.lab-lens::before, .lab-lens::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold); }
.lab-lens::before { width: 42px; height: 1px; transform: translate(-50%,-50%); }
.lab-lens::after { width: 1px; height: 42px; transform: translate(-50%,-50%); }
.lab-lens span { position: absolute; right: 8%; bottom: 16%; color: var(--gold); font: 600 8px "Unbounded",sans-serif; letter-spacing: .15em; }
.lab-toggle { display: none; }

.section-title { max-width: var(--container); margin: auto; display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 80px; }
.section-title > div > span, .mini-label, .fusion-head > span, .process-head > span, .faq-head > span { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.section-title h2, .fusion-head h2, .process-head h2, .faq-head h2 { margin: 24px 0 0; font: 600 clamp(44px,5vw,92px)/.98 "Unbounded",sans-serif; letter-spacing: -.065em; }
.section-title > p { max-width: 560px; margin: 0 0 5px; color: var(--muted-dark); line-height: 1.75; }
.development { background: var(--black); }
.dev-spectrum { max-width: var(--container); margin: 90px auto 0; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.spectrum-card { position: relative; min-height: 560px; padding: 34px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); transition: background .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease); }
.spectrum-card::before { content: attr(data-index); position: absolute; right: 25px; top: 22px; color: rgba(255,255,255,.1); font: 600 clamp(64px,8vw,130px) "Unbounded",sans-serif; letter-spacing: -.08em; }
.spectrum-card:hover { background: var(--black-card); transform: translateY(-10px); box-shadow: 0 28px 56px rgba(0,0,0,.16); }
.spectrum-card h3 { margin: 0 0 15px; font: 600 clamp(26px,2.4vw,43px) "Unbounded",sans-serif; letter-spacing: -.05em; }
.spectrum-card p { max-width: 540px; margin: 0 0 24px; color: var(--muted-dark); line-height: 1.7; }
.spectrum-card small { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.spectrum-visual { position: relative; width: min(440px,80%); height: 245px; margin: 60px auto 25px; border: 1px solid rgba(255,255,255,.14); background: #090909; transform: perspective(900px) rotateX(5deg) rotateY(-7deg); transition: transform .9s var(--ease), border-color .45s, box-shadow .45s; box-shadow: 0 0 0 1px rgba(202,168,92,.02), inset 0 0 0 1px rgba(255,255,255,.02); }
.spectrum-card:hover .spectrum-visual { border-color: var(--gold); transform: perspective(900px) rotateX(-1deg) rotateY(1deg) translateY(-11px) scale(1.02); box-shadow: 0 18px 42px rgba(0,0,0,.24), 0 0 0 1px rgba(202,168,92,.12); }
.spectrum-visual--landing span { position: absolute; left: 8%; right: 8%; top: 10%; height: 42%; background: linear-gradient(135deg,var(--gold),#755824); }
.spectrum-visual--landing i { position: absolute; left: 8%; bottom: 16%; height: 6px; background: rgba(255,255,255,.18); }
.spectrum-visual--landing i:nth-child(2) { width: 45%; }
.spectrum-visual--landing i:nth-child(3) { width: 68%; bottom: 10%; }
.spectrum-visual--landing i:nth-child(4) { right: 8%; left: auto; width: 21%; height: 13%; bottom: 9%; border: 1px solid var(--gold); background: transparent; }
.spectrum-visual--corporate span { position: absolute; top: 10%; bottom: 10%; width: 25%; border: 1px solid rgba(255,255,255,.12); }
.spectrum-visual--corporate span:nth-child(1) { left: 7%; background: var(--gold); }
.spectrum-visual--corporate span:nth-child(2) { left: 37%; }
.spectrum-visual--corporate span:nth-child(3) { right: 7%; }
.spectrum-visual--corporate b { position: absolute; left: 41%; top: 42%; width: 16%; height: 16%; border-radius: 50%; background: var(--gold); }
.spectrum-visual--commerce span { position: absolute; left: 10%; top: 15%; color: var(--gold); font: 600 65px "Unbounded",sans-serif; }
.spectrum-visual--commerce i { position: absolute; right: 10%; height: 22%; border: 1px solid rgba(255,255,255,.15); }
.spectrum-visual--commerce i:nth-child(2) { top: 14%; width: 48%; }
.spectrum-visual--commerce i:nth-child(3) { top: 43%; width: 36%; }
.spectrum-visual--commerce b { position: absolute; left: 10%; right: 10%; bottom: 11%; height: 18%; background: var(--gold); }
.spectrum-visual--system span { position: absolute; inset: 9% 69% 9% 7%; background: var(--gold); }
.spectrum-visual--system i { position: absolute; left: 35%; height: 23%; border: 1px solid rgba(255,255,255,.14); }
.spectrum-visual--system i:nth-child(2) { top: 9%; width: 25%; }
.spectrum-visual--system i:nth-child(3) { top: 9%; right: 7%; left: auto; width: 28%; }
.spectrum-visual--system i:nth-child(4) { left: 35%; right: 7%; bottom: 9%; height: 52%; }
.spectrum-visual--system b { position: absolute; left: 42%; bottom: 20%; width: 36%; height: 2px; background: var(--gold); box-shadow: 18px -22px 0 var(--gold),38px -8px 0 var(--gold),62px -42px 0 var(--gold); transform: rotate(-12deg); }

.marketing { color: var(--ink); background: radial-gradient(circle at 84% 16%, rgba(202,168,92,.16), transparent 16%), radial-gradient(circle at 16% 90%, rgba(202,168,92,.08), transparent 18%), var(--paper); overflow: hidden; }
.marketing::before { content: "GROW"; position: absolute; right: -2%; top: 3%; color: rgba(18,18,15,.035); font: 700 20vw/.8 "Unbounded",sans-serif; letter-spacing: -.1em; }
.marketing-layout { position: relative; z-index: 1; max-width: var(--container); margin: auto; min-height: 730px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 55px; }
.marketing-copy h2 { margin: 25px 0 30px; max-width: 9.2ch; font: 600 clamp(48px,5.5vw,100px)/.9 "Unbounded",sans-serif; letter-spacing: -.07em; text-wrap: balance; }
.marketing-copy > p { max-width: 560px; color: var(--muted-light); line-height: 1.75; }
.line-link { width: max-content; min-width: 250px; margin-top: 35px; padding: 15px 0; display: flex; justify-content: space-between; gap: 30px; border-bottom: 1px solid currentColor; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.line-link b { color: var(--gold-dark); font-size: 17px; }
.metric-universe { position: relative; width: min(680px,100%); aspect-ratio: 1; margin-left: auto; }
.metric-center { position: absolute; z-index: 4; inset: 34%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--ink); color: var(--white); box-shadow: 0 35px 90px rgba(50,40,20,.2); }
.metric-center small, .metric-center span { color: var(--gold); font-size: 6px; font-weight: 700; letter-spacing: .18em; }
.metric-center strong { margin: 9px 0; font: 600 clamp(19px,2vw,34px) "Unbounded",sans-serif; letter-spacing: -.05em; }
.metric-ring { position: absolute; display: grid; place-items: center; border: 1px solid rgba(18,18,15,.18); border-radius: 50%; animation: metric-spin 24s linear infinite; }
.metric-ring::after { content: ""; position: absolute; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-dark); }
.metric-ring span { position: absolute; top: 8%; padding: 0 10px; background: var(--paper); color: var(--gold-dark); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.metric-ring.ring-a { inset: 4%; }
.metric-ring.ring-b { inset: 18%; animation-direction: reverse; animation-duration: 17s; }
.metric-ring.ring-c { inset: 29%; animation-duration: 12s; }
@keyframes metric-spin { to { transform: rotate(360deg); } }
.metric-card { position: absolute; z-index: 5; min-width: 150px; padding: 16px; border: 1px solid rgba(18,18,15,.18); background: rgba(250,247,239,.82); backdrop-filter: blur(10px); box-shadow: 0 18px 45px rgba(30,25,15,.09); }
.metric-card small { display: block; color: var(--muted-light); font-size: 7px; letter-spacing: .14em; }
.metric-card b { display: block; margin: 6px 0; font: 600 24px "Unbounded",sans-serif; letter-spacing: -.05em; }
.metric-card span { color: var(--gold-dark); font-size: 9px; font-weight: 700; }
.metric-card--a { left: 0; top: 18%; animation: float 5s ease-in-out infinite; }
.metric-card--b { right: 0; top: 44%; animation: float 4.5s .7s ease-in-out infinite; }
.metric-card--c { left: 12%; bottom: 7%; animation: float 5.5s 1.1s ease-in-out infinite; }
.marketing-services { position: relative; z-index: 1; max-width: var(--container); margin: 40px auto 0; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.marketing-service { position: relative; min-height: 300px; padding: 27px; overflow: hidden; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.18)); transition: background .65s var(--ease), color .65s var(--ease), transform .65s var(--ease), box-shadow .65s var(--ease); }
.marketing-service > span { color: var(--gold-dark); font-size: 8px; }
.marketing-service h3 { margin: 105px 0 14px; font: 600 clamp(20px,1.8vw,31px) "Unbounded",sans-serif; letter-spacing: -.04em; }
.marketing-service p { color: var(--muted-light); font-size: 13px; line-height: 1.65; }
.marketing-service > b { position: absolute; right: 24px; top: 20px; color: var(--gold-dark); font-size: 18px; transition: transform .4s; }
.marketing-service:hover { color: var(--white); background: linear-gradient(180deg, #20172d, #130d1c); transform: translateY(-10px); box-shadow: 0 24px 48px rgba(65,34,88,.18); }
.marketing-service:hover p { color: var(--muted-dark); }
.marketing-service:hover > b { color: var(--gold); transform: rotate(45deg) scale(1.12); }

.fusion { background: var(--black-soft); overflow: hidden; }
.fusion::after { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: 110px; border: 1px solid rgba(202,168,92,.18); border-radius: 50%; box-shadow: 0 0 0 90px rgba(202,168,92,.035),0 0 0 180px rgba(202,168,92,.02); }
.fusion-head { position: relative; z-index: 1; max-width: var(--container); margin: auto; }
.fusion-switch { position: relative; z-index: 2; max-width: var(--container); margin: 75px auto 0; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line-dark); }
.fusion-switch button { padding: 22px 26px; display: flex; align-items: center; gap: 17px; border: 0; border-right: 1px solid var(--line-dark); background: transparent; color: var(--muted-dark); font: 600 12px "Unbounded",sans-serif; letter-spacing: .08em; cursor: pointer; transition: .35s; }
.fusion-switch button:last-child { border-right: 0; }
.fusion-switch button span { color: var(--gold); font: 700 8px "Manrope",sans-serif; }
.fusion-switch button.active { color: var(--black); background: var(--gold); }
.fusion-switch button.active span { color: var(--black); }
.fusion-stage { position: relative; z-index: 1; max-width: var(--container); min-height: 630px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-dark); border-top: 0; }
.fusion-stage__visual { position: relative; overflow: hidden; display: grid; place-content: center; border-right: 1px solid var(--line-dark); background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 54px 54px; }
.fusion-stage__visual > strong { position: relative; z-index: 3; color: var(--gold); font: 600 clamp(52px,7vw,120px) "Unbounded",sans-serif; letter-spacing: -.08em; transition: opacity .25s,transform .4s var(--ease); }
.fusion-stage__visual > small { position: relative; z-index: 3; text-align: center; color: var(--muted-dark); font-size: 7px; letter-spacing: .2em; transition: opacity .25s,transform .4s var(--ease); }
.fusion-signal { position: absolute; inset: 13%; border: 1px solid rgba(202,168,92,.2); border-radius: 50%; animation: fusion-rotate 18s linear infinite; }
.fusion-signal::before, .fusion-signal::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(202,168,92,.13); border-radius: 50%; }
.fusion-signal::after { inset: 29%; }
.fusion-signal span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 35px var(--gold); }
.fusion-signal span:nth-child(1) { left: 9%; top: 22%; }
.fusion-signal span:nth-child(2) { right: 13%; top: 28%; }
.fusion-signal span:nth-child(3) { left: 45%; bottom: -6px; }
.fusion-signal i { position: absolute; left: 50%; top: -17px; width: 34px; height: 34px; border: 1px solid var(--gold); transform: translateX(-50%) rotate(45deg); }
@keyframes fusion-rotate { to { transform: rotate(360deg); } }
.fusion-stage__content { position: relative; padding: clamp(42px,5vw,88px); display: flex; flex-direction: column; justify-content: center; }
.mode-number { color: var(--gold); font-size: 8px; letter-spacing: .2em; }
.fusion-stage__content h3 { max-width: 650px; margin: 40px 0 23px; font: 600 clamp(31px,3.3vw,58px)/1.05 "Unbounded",sans-serif; letter-spacing: -.055em; }
.fusion-stage__content > p { max-width: 610px; color: var(--muted-dark); line-height: 1.75; }
.fusion-stage__content ul { margin: 33px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2,1fr); gap: 13px 25px; }
.fusion-stage__content li { position: relative; padding-left: 19px; color: #d5d0c6; font-size: 12px; }
.fusion-stage__content li::before { content: "+"; position: absolute; left: 0; color: var(--gold); }
.fusion-stage.is-changing [data-mode-title], .fusion-stage.is-changing [data-mode-subtitle], .fusion-stage.is-changing .fusion-stage__content > * { opacity: 0; transform: translateY(12px); }

.cases { color: var(--ink); background: var(--paper-soft); }
.section-title--cases > p { color: var(--muted-light); }
.case-reel { max-width: var(--container); margin: 90px auto 0; display: grid; gap: 110px; }
.case { display: grid; grid-template-columns: 1.4fr .6fr; gap: 0; transform-style: preserve-3d; perspective: 1200px; }
.case:nth-child(even) { grid-template-columns: .6fr 1.4fr; }
.case:nth-child(even) .case-media { order: 2; }
.case-media { position: relative; min-height: 650px; overflow: hidden; display: grid; place-items: center; background: var(--black); transition: transform .25s ease; }
.case-glow { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,var(--gold),transparent 68%); opacity: .17; filter: blur(18px); animation: case-glow 6s ease-in-out infinite; }
@keyframes case-glow { 50% { transform: translate(18%,-12%) scale(1.2); } }
.case-tag { position: absolute; z-index: 4; left: 24px; top: 24px; color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.level-window { position: relative; z-index: 2; width: 66%; aspect-ratio: 1.15; padding: 7%; border: 1px solid rgba(255,255,255,.17); background: rgba(20,20,18,.78); box-shadow: 35px 45px 90px rgba(0,0,0,.45); transform: rotate(-5deg); }
.level-window small { color: var(--gold); font: 600 9px "Unbounded",sans-serif; letter-spacing: .14em; }
.level-window strong { display: block; margin-top: 19%; color: var(--white); font: 600 clamp(38px,4vw,70px)/.92 "Unbounded",sans-serif; letter-spacing: -.07em; }
.level-window i { position: absolute; bottom: 8%; width: 22%; height: 20%; border: 1px solid rgba(255,255,255,.15); }
.level-window i:nth-of-type(1) { left: 7%; background: var(--gold); }
.level-window i:nth-of-type(2) { left: 34%; }
.level-window i:nth-of-type(3) { left: 61%; }
.data-window { position: relative; z-index: 2; width: 75%; aspect-ratio: 1.5; display: grid; grid-template-columns: 19% 1fr; border: 1px solid rgba(255,255,255,.16); background: #11110f; box-shadow: -30px 40px 100px rgba(0,0,0,.48); transform: rotate(4deg); }
.data-window aside { border-right: 1px solid rgba(255,255,255,.12); background: linear-gradient(var(--gold) 0 11%,transparent 11%); }
.data-window main { position: relative; padding: 8%; }
.data-window main span { display: block; height: 7px; margin-bottom: 13px; background: rgba(255,255,255,.13); }
.data-window main span:first-child { width: 34%; background: var(--gold); }
.data-window main span:nth-child(2) { width: 65%; }
.data-window main span:nth-child(3) { width: 48%; }
.data-window main i { position: absolute; bottom: 10%; width: 25%; height: 44%; border: 1px solid rgba(255,255,255,.13); }
.data-window main i:nth-of-type(1) { left: 8%; }
.data-window main i:nth-of-type(2) { left: 37%; }
.data-window main i:nth-of-type(3) { left: 66%; }
.data-window main b { position: absolute; left: 14%; right: 13%; bottom: 19%; height: 2px; background: var(--gold); transform: rotate(-9deg); box-shadow: 28px -14px 0 var(--gold),55px -4px 0 var(--gold),82px -31px 0 var(--gold); }
.case-text { padding: 65px 0 65px clamp(35px,5vw,90px); display: flex; flex-direction: column; justify-content: flex-end; }
.case:nth-child(even) .case-text { padding: 65px clamp(35px,5vw,90px) 65px 0; }
.case-text > span { color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.case-text h3 { margin: 28px 0 20px; font: 600 clamp(28px,3vw,54px)/1.08 "Unbounded",sans-serif; letter-spacing: -.055em; }
.case-text p { color: var(--muted-light); line-height: 1.75; }
.case-text a { margin-top: 27px; color: var(--gold-dark); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.process { background: var(--black); overflow: hidden; }
.process-head { max-width: var(--container); margin: auto; }
.process-line { position: absolute; left: clamp(24px,5vw,96px); right: clamp(24px,5vw,96px); top: 57%; height: 1px; background: rgba(255,255,255,.1); }
.process-line i { display: block; width: 0; height: 100%; background: var(--gold); box-shadow: 0 0 18px var(--gold); transition: width 1.2s var(--ease); }
.process.is-progress .process-line i { width: 100%; }
.process-list { position: relative; z-index: 2; max-width: var(--container); margin: 110px auto 0; display: grid; grid-template-columns: repeat(4,1fr); }
.process-item { position: relative; min-height: 260px; padding: 28px; overflow: hidden; border: 1px solid var(--line-dark); margin: -1px 0 0 -1px; background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)); transition: transform .6s var(--ease), border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.process-item::before { content: ""; position: absolute; left: 26px; top: -8px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--gold); background: var(--black); transition: background .6s, transform .6s var(--ease), box-shadow .6s; z-index: 2; }
.process-item:hover { transform: translateY(-12px) rotate(-.35deg); border-color: var(--gold); background: linear-gradient(180deg, rgba(202,168,92,.06), rgba(124,62,156,.05)); box-shadow: 0 22px 48px rgba(0,0,0,.18); }
.process-item:hover::before { background: var(--gold); transform: scale(1.18); box-shadow: 0 0 0 10px rgba(202,168,92,.06); }
.process-item > span { color: var(--gold); font-size: 8px; }
.process-item h3 { margin: 95px 0 13px; font: 600 clamp(18px,1.6vw,27px) "Unbounded",sans-serif; letter-spacing: -.04em; }
.process-item p { margin: 0; color: var(--muted-dark); font-size: 12px; line-height: 1.65; }

.principles { position: relative; min-height: 820px; color: var(--ink); background: var(--gold); overflow: hidden; }
.principles-word { position: absolute; left: -2%; bottom: -4%; color: rgba(18,18,15,.08); font: 700 16vw/.8 "Unbounded",sans-serif; letter-spacing: -.12em; white-space: nowrap; }
.principles .section-code { color: var(--ink); }
.principles-grid { position: relative; z-index: 1; max-width: var(--container); margin: 90px auto 0; display: grid; grid-template-columns: repeat(2,1fr); }
.principles-grid article { min-height: 300px; padding: 35px; border: 1px solid rgba(18,18,15,.28); margin: -1px 0 0 -1px; }
.principles-grid span { font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.principles-grid h3 { margin: 110px 0 15px; font: 600 clamp(26px,2.7vw,48px) "Unbounded",sans-serif; letter-spacing: -.055em; }
.principles-grid p { max-width: 570px; color: rgba(18,18,15,.68); line-height: 1.7; }

.brief { display: grid; grid-template-columns: 1fr 1fr; min-height: 920px; background: var(--black-soft); }
.brief-art { position: relative; overflow: hidden; display: grid; place-content: center; border-right: 1px solid var(--line-dark); background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 72px 72px; }
.brief-art > strong { position: relative; z-index: 4; text-align: center; color: var(--white); font: 600 clamp(44px,5vw,88px)/.9 "Unbounded",sans-serif; letter-spacing: -.075em; }
.brief-art > small { position: relative; z-index: 4; margin-top: 24px; text-align: center; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.brief-sun { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(34vw,520px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--gold); transform: translate(-50%,-50%); box-shadow: 0 0 100px rgba(202,168,92,.2); }
.brief-sun span { color: rgba(18,18,15,.13); font: 700 clamp(130px,16vw,260px) "Unbounded",sans-serif; }
.brief-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(202,168,92,.3); border-radius: 50%; transform: translate(-50%,-50%); animation: orbit-pulse 8s ease-in-out infinite; }
.brief-orbit.o1 { width: 65%; aspect-ratio: 1; }
.brief-orbit.o2 { width: 83%; aspect-ratio: 1; animation-delay: 1s; }
.brief-orbit.o3 { width: 103%; aspect-ratio: 1; animation-delay: 2s; }
@keyframes orbit-pulse { 50% { transform: translate(-50%,-50%) scale(1.05); opacity: .45; } }
.brief-form-wrap { padding: clamp(70px,7vw,130px); display: flex; flex-direction: column; justify-content: center; }
.brief-form-wrap h2 { margin: 23px 0 52px; font: 600 clamp(48px,5vw,90px)/.92 "Unbounded",sans-serif; letter-spacing: -.07em; }
.brief fieldset { margin: 0; padding: 0; border: 0; }
.brief legend, .brief label > span { display: block; margin-bottom: 16px; color: var(--muted-dark); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.choices { display: flex; flex-wrap: wrap; gap: 9px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label span { margin: 0; padding: 10px 13px; border: 1px solid var(--line-dark); color: var(--muted-dark); cursor: pointer; transition: .3s; }
.choices input:checked + span { color: var(--black); background: var(--gold); border-color: var(--gold); }
.field-row { margin-top: 43px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.brief input, .brief textarea { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line-dark); outline: none; resize: none; background: transparent; color: var(--white); transition: border-color .3s; }
.brief input:focus, .brief textarea:focus { border-color: var(--gold); }
.brief input::placeholder, .brief textarea::placeholder { color: #706d65; }
.field { display: block; margin-top: 35px; }
.submit { width: 100%; margin-top: 45px; padding: 18px 20px; display: flex; justify-content: space-between; border: 1px solid var(--gold); background: var(--gold); color: var(--black); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.submit b { font-size: 18px; }
.privacy { color: #77736b; font-size: 8px; }

.faq { color: var(--ink); background: var(--paper-soft); }
.faq-head { max-width: var(--container); margin: auto; }
.faq-head > span { color: var(--gold-dark); }
.faq-list { max-width: var(--container); margin: 80px auto 0; border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary { min-height: 105px; display: grid; grid-template-columns: 65px 1fr 35px; align-items: center; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.faq summary b { font: 600 clamp(19px,2vw,31px) "Unbounded",sans-serif; letter-spacing: -.04em; }
.faq summary i { position: relative; width: 22px; height: 22px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--ink); transition: transform .3s; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { max-width: 820px; margin: -5px 0 35px 65px; color: var(--muted-light); line-height: 1.75; }

.footer { padding: 85px clamp(24px,5vw,96px) 28px; background: var(--black); }
.footer-top { max-width: var(--container); margin: auto; display: grid; grid-template-columns: 1.4fr .7fr .7fr 1fr; gap: 60px; }
.logo--footer { margin-bottom: 24px; }
.footer-top > div:first-child p { color: var(--muted-dark); line-height: 1.75; }
.footer-nav, .footer-contacts { display: grid; align-content: start; gap: 13px; }
.footer-nav > span, .footer-contacts > span { margin-bottom: 12px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.footer-nav a { color: var(--muted-dark); font-size: 12px; }
.footer-nav a:hover { color: var(--gold); }
.footer-contacts a { font: 500 clamp(19px,1.8vw,29px) "Unbounded",sans-serif; letter-spacing: -.04em; }
.footer-contacts a:last-child { margin-top: 15px; color: var(--gold); font: 700 8px "Manrope",sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.footer-bottom { max-width: var(--container); margin: 75px auto 0; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid var(--line-dark); color: #77736b; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.toast { position: fixed; z-index: 500; left: 50%; bottom: 25px; padding: 16px 22px; background: var(--gold); color: var(--black); transform: translate(-50%,130px); opacity: 0; transition: .45s var(--ease); font-size: 11px; font-weight: 700; }
.toast.visible { transform: translate(-50%,0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(38px); filter: blur(4px); transition: opacity .8s var(--ease),transform .8s var(--ease),filter .8s; }
.reveal.visible { opacity: 1; transform: none; filter: none; }

@media (max-width: 1220px) {
  .nav { display: none; }
  .header { grid-template-columns: 1fr auto auto; }
  .header::before, .header::after { display: none; }
  .menu-button { display: block; }
  .hero h1,.hero h2 { font-size: clamp(45px,5.7vw,75px); }
  .dev-machine,.growth-orbit { opacity: .3; }
  .lab-grid,.marketing-services { grid-template-columns: repeat(2,1fr); }
  .lab-grid article { min-height: 230px; }
  .lab-grid h3 { margin-top: 70px; }
  .process-list { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 920px) {
  .header { height: 70px; padding: 0 20px; }
  .header-contact { display: none; }
  .hero { height: auto; min-height: 0; display: grid; }
  .hero-side { position: relative; inset: auto; min-height: max(680px,100svh); clip-path: none !important; }
  .hero-side--dev { order: 1; }
  .hero-side--growth { order: 2; }
  .hero-content { top: 50%; width: auto; left: 24px; right: 24px; text-align: left; transform: translateY(-48%); }
  .hero-content--growth { align-items: initial; }
  .hero-side--growth::before, .hero-side--growth::after, .hero-side--dev::before, .hero-side--dev::after { display: none; }
  .hero-content--growth .hero-meta { justify-content: flex-start; }
  .hero-content--growth p { margin-left: 0; }
  .hero h1,.hero h2 { font-size: clamp(47px,11vw,82px); }
  .dev-machine,.growth-orbit { width: 65vw; left: auto; right: -23%; opacity: .24; transform: none; }
  .hero-side.is-active .dev-machine,.hero-side.is-active .growth-orbit { transform: none; }
  .hero-seam,.seam-control { display: none; }
  .hero-bottom { display: none; }
  .section { padding: 115px 24px; }
  .section-code { left: 24px; top: 35px; }
  .statement { min-height: 850px; }
  .statement-core { grid-template-columns: 62px 1fr; }
  .core-mark { width: 62px; height: 62px; }
  .statement-core strong { display: none; }
  .dual-lab { height: auto; min-height: 900px; }
  .lab-layer { position: relative; padding: 110px 24px 145px; }
  .lab-layer--marketing { position: absolute; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
  .dual-lab.show-marketing .lab-layer--marketing { clip-path: inset(0); }
  .lab-head,.section-title { grid-template-columns: 1fr; gap: 30px; }
  .lab-grid { margin-top: 55px; }
  .lab-lens { display: none; }
  .lab-toggle { position: absolute; z-index: 8; left: 24px; right: 24px; bottom: 35px; display: flex; justify-content: space-between; padding: 16px; border: 1px solid var(--gold); background: var(--gold); color: var(--black); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
  .dev-spectrum { grid-template-columns: 1fr; }
  .spectrum-card { min-height: 520px; }
  .marketing-layout { grid-template-columns: 1fr; gap: 45px; }
  .metric-universe { margin: auto; }
  .fusion-stage { grid-template-columns: 1fr; }
  .fusion-stage__visual { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .case,.case:nth-child(even) { grid-template-columns: 1fr; }
  .case:nth-child(even) .case-media { order: 0; }
  .case-text,.case:nth-child(even) .case-text { padding: 45px 0 0; }
  .brief { grid-template-columns: 1fr; }
  .brief-art { min-height: 680px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .brief-sun { width: 55vw; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .logo__version { display: none; }
  .hero-side { min-height: 720px; }
  .hero-content { left: 20px; right: 20px; }
  .hero h1,.hero h2 { font-size: clamp(43px,13.5vw,64px); }
  .hero-content p { margin: 24px 0; font-size: 14px; }
  .hero-link { min-width: 100%; }
  .dev-machine,.growth-orbit { display: none; }
  .statement-line { font-size: clamp(31px,10.5vw,53px); }
  .statement-core { margin-top: 65px; grid-template-columns: 1fr; }
  .lab-head h2,.section-title h2,.fusion-head h2,.process-head h2,.faq-head h2 { font-size: clamp(38px,11vw,57px); }
  .lab-grid,.marketing-services { grid-template-columns: 1fr; }
  .lab-grid article { min-height: 230px; }
  .spectrum-card { min-height: 490px; padding: 24px; }
  .spectrum-card::before { font-size: 80px; }
  .spectrum-visual { width: 100%; height: 210px; margin-top: 55px; }
  .marketing-copy h2 { font-size: clamp(43px,12vw,63px); }
  .metric-universe { width: 115%; margin-left: -7.5%; }
  .metric-card { min-width: 125px; padding: 12px; }
  .metric-card b { font-size: 19px; }
  .fusion-switch button { justify-content: center; padding: 17px 8px; font-size: 9px; }
  .fusion-switch button span { display: none; }
  .fusion-stage__visual { min-height: 390px; }
  .fusion-stage__content { padding: 35px 24px 50px; }
  .fusion-stage__content ul { grid-template-columns: 1fr; }
  .case-reel { gap: 75px; }
  .case-media { min-height: 410px; }
  .level-window,.data-window { width: 82%; }
  .process-list { grid-template-columns: 1fr; }
  .process-line { display: none; }
  .process-item { min-height: 230px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid article { min-height: 260px; padding: 26px; }
  .principles-grid h3 { margin-top: 75px; }
  .brief-art { min-height: 520px; }
  .brief-sun { width: 72vw; }
  .brief-form-wrap { padding: 80px 24px; }
  .field-row { grid-template-columns: 1fr; }
  .faq summary { grid-template-columns: 42px 1fr 24px; min-height: 90px; }
  .faq summary b { font-size: 18px; }
  .faq details p { margin-left: 42px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-wrap: wrap; gap: 17px; }
}

@media (pointer: coarse) {
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .intro { display: none; }
  .reveal,.reveal-words > * { opacity: 1; transform: none; filter: none; }
}


/* v3.1 premium hero and case showcase */
.logo__version { min-width: 28px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-badges span { padding: 9px 12px; border: 1px solid rgba(202,168,92,.22); background: rgba(255,255,255,.03); color: var(--white); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(8px); }
.hero-growth-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; width: min(470px,100%); margin-top: 24px; }
.hero-growth-strip article { padding: 16px 18px; border: 1px solid rgba(202,168,92,.22); background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.38)); box-shadow: 0 16px 36px rgba(133,103,45,.08); }
.hero-growth-strip small { display: block; color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-growth-strip strong { display: block; margin: 10px 0 6px; font: 600 clamp(20px,1.8vw,30px) "Unbounded",sans-serif; letter-spacing: -.05em; }
.hero-growth-strip span { color: var(--muted-light); font-size: 12px; line-height: 1.55; }
.hero-stage-panels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.stage-panel { position: absolute; bottom: 100px; width: min(290px,22vw); padding: 20px 20px 18px; border: 1px solid rgba(202,168,92,.18); backdrop-filter: blur(8px); }
.stage-panel small { display: block; margin-bottom: 12px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.stage-panel strong { display: block; font: 600 clamp(18px,1.3vw,24px)/1.15 "Unbounded",sans-serif; letter-spacing: -.04em; }
.stage-panel--dev { left: clamp(32px,6vw,110px); background: linear-gradient(180deg, rgba(17,22,31,.78), rgba(11,14,20,.66)); color: var(--white); }
.stage-panel--dev span { display: block; height: 6px; margin-top: 12px; background: rgba(255,255,255,.12); }
.stage-panel--dev span:nth-child(3) { width: 78%; background: rgba(202,168,92,.4); }
.stage-panel--dev span:nth-child(4) { width: 55%; }
.stage-panel--dev span:nth-child(5) { width: 68%; }
.stage-panel--growth { right: clamp(32px,6vw,110px); background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46)); color: var(--ink); box-shadow: 0 16px 32px rgba(133,103,45,.09); }
.stage-panel--growth i { position: relative; display: inline-block; width: 22%; height: 44px; margin-top: 16px; margin-right: 6%; border: 1px solid rgba(202,168,92,.2); background: linear-gradient(180deg, rgba(202,168,92,.08), rgba(202,168,92,.28)); vertical-align: bottom; }
.stage-panel--growth i:nth-of-type(1) { height: 34px; }
.stage-panel--growth i:nth-of-type(2) { height: 52px; }
.stage-panel--growth i:nth-of-type(3) { height: 68px; margin-right: 0; }
.stage-panel--growth b { position: absolute; left: 18px; right: 18px; bottom: 28px; height: 2px; background: linear-gradient(90deg, transparent 0, var(--gold) 12%, var(--gold) 24%, transparent 24%), linear-gradient(135deg, transparent 0 40%, var(--gold) 40% 42%, transparent 42% 100%); opacity: .65; }
.cases { background: radial-gradient(circle at 82% 14%, rgba(202,168,92,.16), transparent 16%), radial-gradient(circle at 18% 88%, rgba(202,168,92,.08), transparent 18%), var(--paper-soft); }
.case-reel { gap: 80px; }
.case { align-items: stretch; gap: 26px; }
.case--premium { grid-template-columns: 1.1fr .9fr; padding: 24px; border: 1px solid rgba(202,168,92,.12); background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.2)); box-shadow: 0 20px 55px rgba(133,103,45,.07); }
.case--premium.case--analytics { grid-template-columns: .95fr 1.05fr; }
.case--premium .case-media { min-height: 620px; border: 1px solid rgba(255,255,255,.06); }
.case-media--level { background: radial-gradient(circle at 18% 20%, rgba(202,168,92,.2), transparent 24%), linear-gradient(180deg,#171221 0%, #0f0a14 100%); }
.case-media--data { background: radial-gradient(circle at 82% 18%, rgba(202,168,92,.12), transparent 20%), linear-gradient(180deg,#1a1323 0%, #100b16 100%); }
.showcase-browser { position: relative; z-index: 2; width: 78%; aspect-ratio: 1.06; border: 1px solid rgba(255,255,255,.14); background: rgba(20,22,27,.78); box-shadow: 0 28px 70px rgba(0,0,0,.42); transform: rotate(-5deg); overflow: hidden; }
.showcase-browser header { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.showcase-browser header i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.showcase-browser header b { margin-left: auto; font-weight: 700; }
.showcase-browser__hero { padding: 34px; }
.showcase-browser__hero small { color: var(--gold); font: 600 9px "Unbounded",sans-serif; letter-spacing: .14em; }
.showcase-browser__hero strong { display: block; margin-top: 26px; color: var(--white); font: 600 clamp(34px,3vw,60px)/.92 "Unbounded",sans-serif; letter-spacing: -.07em; }
.showcase-browser__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding: 0 34px 34px; }
.showcase-browser__grid span { height: 110px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(202,168,92,.16), rgba(255,255,255,.04)); }
.showcase-phone { position: absolute; right: 9%; bottom: 9%; z-index: 3; width: 180px; aspect-ratio: .58; padding: 16px; border: 1px solid rgba(202,168,92,.28); background: linear-gradient(180deg, rgba(248,245,237,.92), rgba(231,222,203,.82)); box-shadow: 0 18px 40px rgba(0,0,0,.25); color: var(--ink); }
.showcase-phone small { color: var(--gold-dark); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.showcase-phone strong { display: block; margin: 14px 0 18px; font: 600 26px/1 "Unbounded",sans-serif; }
.showcase-phone span { display: block; height: 8px; margin-top: 10px; background: rgba(18,18,15,.12); }
.showcase-phone span:nth-of-type(1) { width: 68%; background: rgba(202,168,92,.4); }
.showcase-phone span:nth-of-type(2) { width: 84%; }
.showcase-phone i { position: absolute; left: 16px; right: 16px; bottom: 18px; height: 90px; border: 1px solid rgba(18,18,15,.09); background: linear-gradient(180deg, rgba(202,168,92,.16), rgba(202,168,92,.04)); }
.dashboard-frame { position: relative; z-index: 2; width: 82%; aspect-ratio: 1.18; display: grid; grid-template-columns: 18% 1fr; border: 1px solid rgba(255,255,255,.12); background: rgba(15,18,25,.9); box-shadow: 0 28px 75px rgba(0,0,0,.42); transform: rotate(4deg); overflow: hidden; }
.dashboard-frame aside { padding: 18px 14px; border-right: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(202,168,92,.22), rgba(202,168,92,.04)); }
.dashboard-frame aside span { display: block; height: 10px; margin-bottom: 14px; background: rgba(255,255,255,.12); }
.dashboard-frame aside span:first-child { width: 100%; background: rgba(255,255,255,.26); }
.dashboard-frame main { position: relative; padding: 22px; }
.dashboard-frame main header { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.dashboard-frame main header b { height: 56px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(202,168,92,.16), rgba(255,255,255,.02)); }
.dashboard-frame .bars { margin-top: 16px; }
.dashboard-frame .bars span { display: block; height: 8px; margin-top: 10px; background: rgba(255,255,255,.12); }
.dashboard-frame .bars span:first-child { width: 38%; background: rgba(202,168,92,.48); }
.dashboard-frame .bars span:nth-child(2) { width: 74%; }
.dashboard-frame .bars span:nth-child(3) { width: 56%; }
.dashboard-frame .widgets { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.dashboard-frame .widgets i { height: 130px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.dashboard-frame .graph-line { position: absolute; left: 30px; right: 30px; bottom: 72px; height: 2px; background: linear-gradient(90deg, rgba(202,168,92,0) 0 5%, var(--gold) 5% 10%, transparent 10% 16%, var(--gold) 16% 23%, transparent 23% 32%, var(--gold) 32% 42%, transparent 42% 54%, var(--gold) 54% 66%, transparent 66% 78%, var(--gold) 78% 100%); transform: rotate(-8deg); box-shadow: 0 0 12px rgba(202,168,92,.18); }
.result-card { position: absolute; right: 8%; bottom: 8%; z-index: 4; width: 190px; padding: 18px; border: 1px solid rgba(202,168,92,.24); background: linear-gradient(180deg, rgba(248,245,237,.9), rgba(231,222,203,.8)); box-shadow: 0 18px 40px rgba(0,0,0,.22); color: var(--ink); }
.result-card small { color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.result-card strong { display: block; margin: 10px 0 6px; font: 600 34px/1 "Unbounded",sans-serif; }
.result-card span { color: var(--muted-light); font-size: 12px; line-height: 1.5; }
.case-text { padding: 28px 14px 28px clamp(18px,3vw,38px); justify-content: center; }
.case:nth-child(even) .case-text, .case--analytics .case-text { padding: 28px clamp(18px,3vw,38px) 28px 14px; }
.case-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 28px 0 24px; }
.case-results article { padding: 16px 14px; border: 1px solid rgba(202,168,92,.16); background: rgba(255,255,255,.34); }
.case-results small { display: block; color: var(--gold-dark); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.case-results strong { display: block; margin-top: 10px; font: 600 clamp(18px,1.6vw,28px)/1 "Unbounded",sans-serif; letter-spacing: -.04em; }
.case-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.case-points li { position: relative; padding-left: 22px; color: var(--muted-light); line-height: 1.7; }
.case-points li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 10px; border: 1px solid var(--gold); transform: rotate(45deg); }
@media (max-width: 1220px) {
  .stage-panel { width: min(260px,24vw); }
  .hero-growth-strip { width: min(430px,100%); }
  .case--premium, .case--premium.case--analytics { grid-template-columns: 1fr; }
  .case--analytics .case-text, .case--premium .case-text { padding: 30px 0 0; }
}
@media (max-width: 920px) {
  .hero-badges { gap: 8px; }
  .hero-growth-strip { grid-template-columns: 1fr; width: 100%; }
  .hero-stage-panels { display: none; }
  .case--premium { padding: 18px; }
  .case--premium .case-media { min-height: 480px; }
  .showcase-browser, .dashboard-frame { width: 90%; }
  .showcase-phone, .result-card { width: 150px; }
}
@media (max-width: 640px) {
  .hero-badges span { font-size: 7px; }
  .case-results { grid-template-columns: 1fr; }
  .showcase-browser__hero { padding: 24px; }
  .showcase-browser__grid { padding: 0 24px 24px; }
  .showcase-phone { right: 6%; bottom: 6%; width: 132px; padding: 12px; }
  .showcase-phone strong { font-size: 22px; }
  .dashboard-frame { width: 92%; }
  .result-card { right: 6%; bottom: 6%; width: 150px; padding: 14px; }
  .result-card strong { font-size: 28px; }
}


/* v3.2 smoothing and portfolio expansion */
.dual-lab { --lens-size: 190px; }
.lab-layer--marketing {
  clip-path: circle(var(--lens-size) at var(--lens-x) var(--lens-y));
  transition: clip-path .22s linear;
}
.lab-lens {
  width: calc(var(--lens-size) * 2);
  height: calc(var(--lens-size) * 2);
  transition: width .35s,height .35s, left .08s linear, top .08s linear;
  will-change: left, top;
}
.lab-lens::before, .lab-lens::after { background: rgba(39,49,108,.7); }
.lab-lens > i {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(39,49,108,.65); transform: translate(-50%,-50%);
}
.lab-layer--marketing .lab-head p, .lab-layer--marketing article p { color: #76684f; }
.lab-layer--marketing article { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(202,168,92,.06)); }
.lab-layer--marketing article:hover { background: linear-gradient(180deg, rgba(202,168,92,.16), rgba(255,255,255,.52)); }

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.work-card {
  border: 1px solid rgba(202,168,92,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.18));
  box-shadow: 0 18px 40px rgba(133,103,45,.06);
  overflow: hidden;
}
.work-card__visual {
  position: relative;
  min-height: 250px;
  padding: 24px;
  background: linear-gradient(180deg, #1a1323 0%, #100b16 100%);
  color: var(--white);
}
.work-card__visual small {
  position: relative; z-index: 1; display: inline-block;
  color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.work-card__visual b {
  position: relative; z-index: 1; display: block; margin-top: 18px;
  font: 600 clamp(30px, 2.4vw, 42px)/.92 "Unbounded", sans-serif; letter-spacing: -.06em;
}
.work-card__body { padding: 24px; color: var(--ink); }
.work-card__body strong { display: block; font: 600 24px/1.08 "Unbounded", sans-serif; letter-spacing: -.04em; }
.work-card__body p { margin: 14px 0 18px; color: var(--muted-light); line-height: 1.7; }
.work-card__body div { display: flex; flex-wrap: wrap; gap: 10px; }
.work-card__body div span {
  padding: 8px 10px; border: 1px solid rgba(202,168,92,.18); color: var(--gold-dark);
  font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.34);
}
.work-card__visual--afp::before {
  content: ""; position: absolute; right: 26px; top: 26px; width: 94px; height: 94px; border-radius: 50%;
  border: 1px solid rgba(202,168,92,.28); box-shadow: 0 0 0 24px rgba(202,168,92,.04);
}
.work-card__visual--afp span {
  position: absolute; left: 24px; right: 24px; height: 7px; background: rgba(255,255,255,.12);
}
.work-card__visual--afp span:nth-of-type(1) { bottom: 78px; width: 58%; background: rgba(202,168,92,.42); }
.work-card__visual--afp span:nth-of-type(2) { bottom: 58px; width: 74%; }
.work-card__visual--afp span:nth-of-type(3) { bottom: 38px; width: 44%; }
.work-card__visual--fm i {
  position: absolute; bottom: 26px; width: 22%; height: 92px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.work-card__visual--fm i:nth-of-type(1) { left: 24px; background: linear-gradient(180deg, rgba(202,168,92,.3), rgba(202,168,92,.08)); }
.work-card__visual--fm i:nth-of-type(2) { left: calc(24px + 26%); }
.work-card__visual--fm i:nth-of-type(3) { left: calc(24px + 52%); }
.work-card__visual--landing em {
  position: absolute; left: 24px; right: 24px; bottom: 26px; height: 120px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(202,168,92,.52), rgba(202,168,92,.06));
}
.work-card__visual--landing em::before, .work-card__visual--landing em::after {
  content: ""; position: absolute; left: 16px; right: 16px; height: 6px; background: rgba(255,255,255,.28);
}
.work-card__visual--landing em::before { top: 20px; width: 46%; }
.work-card__visual--landing em::after { top: 40px; width: 68%; }

@media (max-width: 1220px) {
  .works-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .lab-layer--marketing { transition: clip-path .45s var(--ease); }
  .works-grid { margin-top: 28px; }
  .work-card__visual { min-height: 210px; }
  .work-card__body strong { font-size: 22px; }
}

/* v3.3 — smooth reveal lens and real portfolio theatre */
.lab-layer--marketing { transition: none; }
.lab-lens { transition: width .35s, height .35s; }

.portfolio-archive {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(circle at 10% 10%, rgba(202,168,92,.12), transparent 22%),
    radial-gradient(circle at 92% 58%, rgba(202,168,92,.08), transparent 20%),
    linear-gradient(180deg, #11151d 0%, #100b16 58%, #0d1016 100%);
  overflow: visible;
}
.portfolio-archive::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.portfolio-head {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: auto;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 90px;
}
.portfolio-head > div:first-child > span {
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.portfolio-head h2 {
  margin: 26px 0 0;
  font: 600 clamp(48px,5.7vw,104px)/.9 "Unbounded",sans-serif;
  letter-spacing: -.07em;
}
.portfolio-head__note {
  padding: 26px 0 5px 28px;
  border-left: 1px solid rgba(202,168,92,.34);
}
.portfolio-head__note b {
  color: var(--gold);
  font: 600 13px "Unbounded",sans-serif;
  letter-spacing: .04em;
}
.portfolio-head__note p {
  margin: 18px 0 0;
  color: var(--muted-dark);
  line-height: 1.75;
}
.portfolio-theatre {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 100px auto 0;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(420px,.75fr);
  gap: clamp(28px,4vw,70px);
  align-items: start;
}
.portfolio-stage-wrap { min-width: 0; }
.portfolio-stage {
  position: sticky;
  top: 94px;
  min-width: 0;
}
.portfolio-browser {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(202,168,92,.28);
  background: #0f0a14;
  box-shadow: 0 38px 110px rgba(0,0,0,.42);
}
.portfolio-browser::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 40px 0 auto;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,13,18,.48), transparent);
}
.portfolio-browser__bar {
  position: relative;
  z-index: 7;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #151922, #10141b);
}
.portfolio-browser__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .85;
}
.portfolio-browser__bar span {
  margin-left: 12px;
  color: rgba(255,255,255,.55);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.portfolio-browser__bar b {
  margin-left: auto;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .14em;
}
.portfolio-shot {
  --shot-y: 0px;
  position: relative;
  height: clamp(520px,63vh,690px);
  overflow: hidden;
  background: #eae6dc;
  cursor: ns-resize;
}
.portfolio-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(10,13,18,.18);
}
.portfolio-shot img {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translate3d(0,var(--shot-y),0);
  will-change: transform;
}
.portfolio-shot.is-changing img {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0,20px,0);
}
.portfolio-shot img { transition: opacity .42s var(--ease), filter .42s var(--ease); }
.portfolio-shot__hint {
  position: absolute;
  z-index: 4;
  right: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(202,168,92,.36);
  background: rgba(13,16,22,.74);
  backdrop-filter: blur(10px);
  color: var(--gold-light);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
}
.portfolio-shot__hint i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: portfolio-pulse 1.8s ease-in-out infinite;
}
@keyframes portfolio-pulse { 50% { box-shadow: 0 0 0 8px rgba(202,168,92,0); transform: scale(1.25); } }
.portfolio-open {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 18px;
  min-width: 215px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 15px;
  border: 1px solid rgba(202,168,92,.64);
  background: rgba(13,16,22,.88);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(14px);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.portfolio-open b { color: var(--gold); font-size: 16px; }
.portfolio-open:hover { background: var(--gold); color: var(--black); }
.portfolio-open:hover b { color: var(--black); }
.portfolio-stage-meta {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  column-gap: 30px;
  padding: 28px 2px 0;
}
.portfolio-stage-meta > span {
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.portfolio-stage-meta h3 {
  grid-column: 1;
  margin: 14px 0 0;
  font: 600 clamp(30px,3.1vw,54px)/.95 "Unbounded",sans-serif;
  letter-spacing: -.055em;
}
.portfolio-stage-meta > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--muted-dark);
  line-height: 1.75;
}
.portfolio-stage-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.portfolio-stage-tags span {
  padding: 8px 10px;
  border: 1px solid rgba(202,168,92,.22);
  color: var(--gold-light);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.portfolio-index {
  display: grid;
  border-top: 1px solid rgba(255,255,255,.12);
}
.portfolio-project {
  position: relative;
  display: grid;
  grid-template-columns: 42px 132px 1fr 28px;
  align-items: center;
  gap: 18px;
  min-height: 188px;
  padding: 20px 8px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: background .42s var(--ease), padding .42s var(--ease), color .42s;
}
.portfolio-project::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .42s var(--ease);
}
.portfolio-project:hover,
.portfolio-project.active {
  padding-left: 20px;
  background: linear-gradient(90deg, rgba(202,168,92,.13), rgba(202,168,92,.02));
}
.portfolio-project.active::before { transform: scaleY(1); }
.portfolio-project__num {
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}
.portfolio-project__thumb {
  position: relative;
  height: 126px;
  overflow: hidden;
  border: 1px solid rgba(202,168,92,.16);
  background: #f1ede5;
}
.portfolio-project__thumb img {
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 4.5s linear, filter .4s, opacity .4s;
  filter: saturate(.7) contrast(.92);
  opacity: .78;
}
.portfolio-project:hover .portfolio-project__thumb img,
.portfolio-project.active .portfolio-project__thumb img {
  transform: translateY(calc(-100% + 126px));
  filter: none;
  opacity: 1;
}
.portfolio-project small {
  color: var(--gold);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.portfolio-project strong {
  display: block;
  margin-top: 10px;
  font: 600 clamp(18px,1.5vw,25px)/1.05 "Unbounded",sans-serif;
  letter-spacing: -.04em;
}
.portfolio-project p {
  margin: 8px 0 0;
  color: var(--muted-dark);
  font-size: 12px;
}
.portfolio-project > b {
  color: var(--gold);
  font-size: 17px;
  transition: transform .35s var(--ease);
}
.portfolio-project:hover > b,
.portfolio-project.active > b { transform: rotate(45deg); }

.portfolio-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(8,10,14,.97);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
}
.portfolio-modal.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
body.portfolio-opened { overflow: hidden; }
.portfolio-modal__top {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(20px,4vw,70px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg,#11151d,rgba(202,168,92,.08));
}
.portfolio-modal__top div { display: flex; align-items: center; gap: 24px; }
.portfolio-modal__top span {
  color: var(--gold);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .16em;
}
.portfolio-modal__top strong {
  font: 600 clamp(18px,2vw,30px) "Unbounded",sans-serif;
  letter-spacing: -.04em;
}
.portfolio-modal__close {
  min-width: 135px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(202,168,92,.38);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.portfolio-modal__close b { color: var(--gold); font-size: 20px; }
.portfolio-modal__viewport {
  overflow: auto;
  padding: 30px max(20px,calc((100vw - 1100px)/2));
  scrollbar-color: var(--gold) #171b23;
}
.portfolio-modal__viewport img {
  width: 100%;
  height: auto;
  background: var(--paper);
  box-shadow: 0 30px 100px rgba(0,0,0,.48);
}

@media (max-width: 1220px) {
  .portfolio-theatre { grid-template-columns: minmax(0,1fr) minmax(360px,.72fr); }
  .portfolio-project { grid-template-columns: 34px 100px 1fr 24px; gap: 13px; }
  .portfolio-project__thumb { height: 106px; }
  .portfolio-project:hover .portfolio-project__thumb img,
  .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 106px)); }
}
@media (max-width: 920px) {
  .lab-layer--marketing { transition: clip-path .45s var(--ease); }
  .portfolio-head { grid-template-columns: 1fr; gap: 35px; }
  .portfolio-head__note { max-width: 620px; }
  .portfolio-theatre { grid-template-columns: 1fr; margin-top: 65px; }
  .portfolio-stage { position: relative; top: auto; }
  .portfolio-shot { height: min(68vh,620px); }
  .portfolio-index { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 55px; border: 0; }
  .portfolio-project {
    grid-template-columns: 32px 1fr 24px;
    align-items: start;
    min-height: 330px;
    padding: 0 0 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.025);
  }
  .portfolio-project:hover,
  .portfolio-project.active { padding-left: 0; }
  .portfolio-project__thumb { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 205px; }
  .portfolio-project__num { grid-column: 1; grid-row: 2; padding-left: 14px; }
  .portfolio-project > div:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .portfolio-project > b { grid-column: 3; grid-row: 2; }
  .portfolio-project:hover .portfolio-project__thumb img,
  .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 205px)); }
  .portfolio-project::before { display: none; }
}
@media (max-width: 640px) {
  .portfolio-head h2 { font-size: clamp(39px,11vw,56px); }
  .portfolio-head__note { padding-left: 18px; }
  .portfolio-shot { height: 470px; }
  .portfolio-browser__bar span { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .portfolio-open { left: 14px; right: 14px; bottom: 14px; min-width: 0; }
  .portfolio-stage-meta { grid-template-columns: 1fr; }
  .portfolio-stage-meta > p { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .portfolio-index { grid-template-columns: 1fr; }
  .portfolio-project { min-height: 350px; }
  .portfolio-project__thumb { height: 225px; }
  .portfolio-project:hover .portfolio-project__thumb img,
  .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 225px)); }
  .portfolio-modal__top div > span { display: none; }
  .portfolio-modal__close { min-width: 48px; width: 48px; }
  .portfolio-modal__close span { display: none; }
  .portfolio-modal__viewport { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-shot img,
  .portfolio-project__thumb img { transition: none !important; }
}

/* v3.4 — responsive hardening */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-width: 0; }
main, section, header, footer { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
.header, .intro, .mobile-menu, .portfolio-modal { width: 100%; max-width: 100vw; }

/* Accessible hidden checkboxes must not enlarge the viewport */
.choices label { position: relative; display: inline-flex; max-width: 100%; }
.choices input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.choices label span { max-width: 100%; overflow-wrap: anywhere; }

/* Decorative systems stay inside their sections */
.marketing, .fusion, .principles, .brief-art, .portfolio-archive { overflow: hidden; }
.metric-universe, .fusion-stage, .brief, .portfolio-theatre, .portfolio-project { min-width: 0; }
.toast { max-width: calc(100vw - 32px); text-align: center; }

@media (max-width: 920px) {
  .header { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .header .nav, .header-contact { display: none; }
  .menu-button { grid-column: 2; }
  .logo { min-width: 0; }
  .logo__name { overflow: hidden; text-overflow: ellipsis; }

  .hero { display: grid; height: auto; min-height: 0; }
  .hero-side {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    min-height: max(720px,100svh);
    height: auto;
    padding: 105px 24px 64px;
    clip-path: none !important;
  }
  .hero-content {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 760px;
    transform: none;
  }
  .hero-content--growth { margin-left: 0; }
  .hero-content p { max-width: 100%; }
  .hero-growth-strip { width: min(100%,520px); }
  .hero-badges { max-width: 100%; }

  .dual-lab { min-height: 0; }
  .lab-layer { min-width: 0; }
  .lab-head > *, .section-title > *, .portfolio-head > * { min-width: 0; }
  .lab-grid article, .marketing-service, .process-item, .principles-grid article { min-width: 0; }

  .metric-universe { width: min(100%,560px); margin-inline: auto; }
  .metric-card { min-width: 0; width: clamp(116px,32vw,150px); }

  .fusion-stage__visual, .fusion-stage__content { width: 100%; min-width: 0; }
  .fusion-stage__content { overflow-wrap: anywhere; }

  .portfolio-stage-wrap, .portfolio-index, .portfolio-project > div { min-width: 0; }
  .portfolio-project strong, .portfolio-project p { overflow-wrap: anywhere; }
  .portfolio-modal__top { min-width: 0; }
  .portfolio-modal__top div { min-width: 0; }
  .portfolio-modal__top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 640px) {
  .intro { display: none !important; }
  .header { height: 68px; padding-inline: 16px; }
  .logo { gap: 9px; }
  .logo__sign { width: 32px; height: 32px; }
  .logo__name { font-size: 11px; }
  .menu-button { width: 42px; height: 42px; padding: 9px; }

  .hero-side { min-height: auto; padding: 108px 20px 64px; }
  .hero h1, .hero h2 { font-size: clamp(39px,12.4vw,58px); line-height: .94; letter-spacing: -.06em; overflow-wrap: anywhere; }
  .hero-meta { margin-bottom: 26px; }
  .hero-content p { font-size: 14px; line-height: 1.65; }
  .hero-link { width: 100%; min-width: 0; }
  .hero-badges { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .hero-badges span { padding: 8px 7px; text-align: center; letter-spacing: .09em; }
  .hero-badges span:last-child { grid-column: 1 / -1; }
  .hero-growth-strip { grid-template-columns: 1fr; }
  .hero-growth-strip article { min-width: 0; }

  .section { padding-inline: 20px; }
  .section-code { left: 20px; }
  .statement { min-height: 0; }
  .statement-line { overflow-wrap: anywhere; }
  .statement-core p { overflow-wrap: anywhere; }

  .lab-layer { padding-inline: 20px; }
  .lab-toggle { left: 20px; right: 20px; }
  .lab-head h2, .section-title h2, .fusion-head h2, .process-head h2, .faq-head h2, .portfolio-head h2 {
    font-size: clamp(36px,10.8vw,53px);
    overflow-wrap: anywhere;
  }

  .metric-universe { width: 100%; margin: 10px 0 0; transform: none; }
  .metric-card { width: 118px; padding: 11px; }
  .metric-card b { font-size: 17px; }
  .metric-ring.ring-a { inset: 7%; }

  .line-link { width: 100%; min-width: 0; }
  .fusion-switch { grid-template-columns: 1fr; }
  .fusion-switch button { border-right: 0; border-bottom: 1px solid var(--line-dark); justify-content: space-between; }
  .fusion-switch button:last-child { border-bottom: 0; }
  .fusion-switch button span { display: inline; }
  .fusion-stage__visual { min-height: 330px; }
  .fusion-signal { inset: 17%; }

  .choices { display: grid; grid-template-columns: 1fr 1fr; }
  .choices label, .choices label span { width: 100%; }
  .choices label span { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; padding: 9px 7px; }

  .faq summary { column-gap: 8px; }
  .faq summary b { overflow-wrap: anywhere; }
  .faq details p { margin-right: 0; }

  .footer { padding-inline: 20px; }
  .footer-contacts a { font-size: clamp(18px,6.2vw,26px); overflow-wrap: anywhere; }
  .footer-bottom { display: grid; grid-template-columns: 1fr; }

  .portfolio-archive { padding-inline: 20px; }
  .portfolio-theatre { margin-top: 48px; }
  .portfolio-shot { height: clamp(360px,72vh,520px); }
  .portfolio-shot__hint { display: none; }
  .portfolio-browser__bar { padding-inline: 12px; }
  .portfolio-browser__bar span { max-width: calc(100vw - 170px); }
  .portfolio-project { min-height: 0; }
  .portfolio-project__thumb { height: 210px; }
  .portfolio-project:hover .portfolio-project__thumb img,
  .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 210px)); }
  .portfolio-project > div:nth-of-type(2) { padding-right: 4px; }
  .portfolio-project strong { font-size: 20px; }
  .portfolio-modal__top { min-height: 68px; padding: 10px 14px; }
  .portfolio-modal__top strong { max-width: calc(100vw - 95px); font-size: 17px; }
  .portfolio-modal__viewport { padding: 10px; }
}

@media (max-width: 380px) {
  .section { padding-inline: 16px; }
  .section-code { left: 16px; }
  .hero-side { padding-inline: 16px; }
  .hero h1, .hero h2 { font-size: clamp(36px,12vw,46px); }
  .choices { grid-template-columns: 1fr; }
  .portfolio-archive { padding-inline: 16px; }
  .portfolio-shot { height: 390px; }
  .portfolio-open { left: 10px; right: 10px; bottom: 10px; padding: 12px; }
  .portfolio-browser__bar b { display: none; }
}


/* v3.5 statement interaction, portfolio deck and purple dark mode */
.portfolio-archive {
  background:
    radial-gradient(circle at 84% 10%, rgba(124,62,156,.16), transparent 18%),
    radial-gradient(circle at 16% 85%, rgba(202,168,92,.08), transparent 16%),
    linear-gradient(180deg, #171121 0%, #100b16 100%);
}
.portfolio-head h2 { max-width: 9ch; }
.portfolio-head__note { border-color: rgba(202,168,92,.24); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.portfolio-theatre { grid-template-columns: 1fr; gap: 34px; align-items: start; }
.portfolio-stage-wrap { position: relative; }
.portfolio-stage {
  position: sticky; top: 110px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  gap: 24px; padding: 24px; border: 1px solid rgba(202,168,92,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: 0 24px 56px rgba(0,0,0,.18);
}
.portfolio-browser { border-color: rgba(202,168,92,.2); background: linear-gradient(180deg, rgba(22,16,31,.96), rgba(16,11,22,.98)); }
.portfolio-browser::before { background: radial-gradient(circle at 50% 0%, rgba(202,168,92,.14), transparent 56%); }
.portfolio-shot { border-color: rgba(202,168,92,.14); }
.portfolio-open { background: rgba(16,11,22,.78); }
.portfolio-stage-meta { align-content: center; padding-right: 6px; }
.portfolio-stage-meta h3 { font-size: clamp(44px,4vw,72px); }
.portfolio-index {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; border: 0;
}
.portfolio-project {
  position: relative; min-height: 0; padding: 16px; display: grid;
  grid-template-columns: 42px 1fr auto; grid-template-rows: auto auto; gap: 14px;
  align-items: start; border: 1px solid rgba(202,168,92,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.portfolio-project::before {
  content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(202,168,92,.12), rgba(124,62,156,.08));
  opacity:0; transform:none; transition:opacity .45s var(--ease); pointer-events:none;
}
.portfolio-project:hover, .portfolio-project.active {
  transform: translateY(-8px) rotate(-1.2deg);
  border-color: rgba(202,168,92,.4);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.portfolio-project:hover::before, .portfolio-project.active::before { opacity:1; }
.portfolio-project__num { grid-column: 1; grid-row: 1; padding-top: 6px; }
.portfolio-project__thumb {
  grid-column: 1 / -1; grid-row: 2; width: 100%; height: 230px; border: 1px solid rgba(202,168,92,.14); overflow: hidden;
}
.portfolio-project > div:nth-of-type(2) { grid-column: 2; grid-row: 1; min-width:0; }
.portfolio-project > b { grid-column: 3; grid-row: 1; align-self: start; }
.portfolio-project small { color: var(--gold); }
.portfolio-project strong { font-size: 34px; line-height: .96; }
.portfolio-project p { margin-top: 10px; font-size: 14px; }
.portfolio-project:hover .portfolio-project__thumb img, .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 230px)); }
.portfolio-project:nth-child(2n) { transform: rotate(1deg); }
.portfolio-project:nth-child(3n) { transform: rotate(-1deg); }
.portfolio-project:nth-child(4n) { transform: rotate(.8deg); }
.portfolio-project:hover:nth-child(n), .portfolio-project.active:nth-child(n) { transform: translateY(-8px) rotate(0); }

.principles { position: relative; min-height: 820px; color: var(--ink); background: linear-gradient(180deg, #c9a75d 0%, #c6a155 100%); overflow: hidden; }
.principles::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 16%), radial-gradient(circle at 82% 72%, rgba(255,255,255,.08), transparent 18%); pointer-events: none; }
.principles-word {
  position: absolute; left: 50%; bottom: 1.2%; width: calc(100% - 60px); text-align: center; font: 700 clamp(118px, 10.2vw, 238px) / .82 "Unbounded", sans-serif; letter-spacing: -.12em; white-space: nowrap; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(21,25,34,.88) 0%, rgba(21,25,34,.98) 18%, #f1d894 38%, #bd8f2f 50%, #f3dd9e 61%, rgba(21,25,34,.98) 82%, rgba(21,25,34,.88) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: creativoGoldWave 10s linear infinite;
  filter: drop-shadow(0 18px 32px rgba(21,25,34,.16)); opacity: .98;
}
.principles-word::after {
  content: "CREATIVO"; position: absolute; inset: 0; z-index: -1; color: rgba(255,255,255,.08); filter: blur(24px); transform: translateY(14px) scale(1.02);
}
@keyframes creativoGoldWave { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }

@media (max-width: 1400px) {
  .portfolio-index { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1220px) {
  .portfolio-stage { grid-template-columns: 1fr; }
  .portfolio-stage-meta { padding-top: 6px; }
  .portfolio-index { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 920px) {
  .portfolio-stage { position: relative; top: auto; padding: 18px; }
  .portfolio-index { grid-template-columns: 1fr; gap: 14px; }
  .portfolio-project, .portfolio-project:nth-child(n) { transform: none !important; }
  .portfolio-project__thumb { height: 220px; }
  .portfolio-project:hover .portfolio-project__thumb img, .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 220px)); }
  .statement-orbit { display:none; }
}
@media (max-width: 680px) {
  .principles-word { font-size: 22vw; bottom: 1%; }
}

.spectrum-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(202,168,92,.10) 48%, transparent 58%); background-size: 220% 100%; opacity: .5; }
.spectrum-card:hover .spectrum-visual::before { animation: spectrumSweep 1.25s var(--ease); }
.spectrum-visual::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; right: 22px; top: 22px; background: var(--gold); box-shadow: 0 0 0 10px rgba(202,168,92,.06); animation: spectrumDot 4.4s ease-in-out infinite; }
.spectrum-visual--landing span { animation: landingBanner 5.2s ease-in-out infinite; transform-origin: left center; }
.spectrum-visual--landing i:nth-child(2), .spectrum-visual--landing i:nth-child(3) { animation: lineBlink 3.8s ease-in-out infinite; }
.spectrum-visual--landing i:nth-child(4) { transition: transform .45s var(--ease), background .45s var(--ease); }
.spectrum-card:hover .spectrum-visual--landing i:nth-child(4) { transform: translateY(-4px); background: rgba(202,168,92,.08); }
.spectrum-visual--corporate span { transition: transform .6s var(--ease), background .45s var(--ease); }
.spectrum-card:hover .spectrum-visual--corporate span:nth-child(1) { transform: translateY(-8px); }
.spectrum-card:hover .spectrum-visual--corporate span:nth-child(2) { transform: translateY(6px); }
.spectrum-card:hover .spectrum-visual--corporate span:nth-child(3) { transform: translateY(-10px); }
.spectrum-visual--corporate b { animation: pulseSoft 3.8s ease-in-out infinite; }
.spectrum-visual--commerce b { animation: cartBar 4.6s ease-in-out infinite; }
.spectrum-card:hover .spectrum-visual--commerce i:nth-child(2) { transform: translateX(-10px); }
.spectrum-card:hover .spectrum-visual--commerce i:nth-child(3) { transform: translateX(-18px); }
.spectrum-visual--system b { transform-origin: left center; animation: systemChart 4.5s ease-in-out infinite; }
.spectrum-card:hover .spectrum-visual--system i:nth-child(4) { box-shadow: inset 0 0 0 1px rgba(202,168,92,.18); }
@keyframes spectrumSweep { from { background-position: 130% 0; } to { background-position: -40% 0; } }
@keyframes spectrumDot { 50% { transform: translate(-6px, 10px) scale(1.18); box-shadow: 0 0 0 16px rgba(202,168,92,0); } }
@keyframes landingBanner { 50% { transform: scaleX(.94) translateY(-4px); } }
@keyframes lineBlink { 50% { opacity: .5; width: 55%; } }
@keyframes pulseSoft { 50% { transform: scale(1.1); box-shadow: 0 0 0 12px rgba(202,168,92,0); } }
@keyframes cartBar { 50% { transform: scaleX(.94); filter: brightness(1.08); } }
@keyframes systemChart { 50% { transform: rotate(-8deg) scaleX(1.04); } }

.marketing-service::before { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(202,168,92,.28), rgba(202,168,92,0)); opacity: 0; transform: scale(.8); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.marketing-service::after { content: ""; position: absolute; left: 27px; right: 27px; bottom: 22px; height: 1px; background: linear-gradient(90deg, var(--gold-dark), transparent); transform: scaleX(.22); transform-origin: left center; transition: transform .7s var(--ease); }
.marketing-service:hover::before { opacity: 1; transform: scale(1.12); }
.marketing-service:hover::after { transform: scaleX(1); }
.marketing-service h3, .marketing-service p { position: relative; z-index: 1; }
.marketing-service:hover h3 { transform: translateY(-3px); }
.marketing-service h3 { transition: transform .55s var(--ease), color .55s var(--ease); }
.marketing-service p { transition: color .55s var(--ease), transform .55s var(--ease); }
.marketing-service:hover p { transform: translateY(-1px); }

.portfolio-stage-tags { margin-bottom: 18px; }
.portfolio-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 26px; }
.portfolio-nav { min-width: 110px; padding: 14px 16px; border: 1px solid rgba(202,168,92,.2); background: rgba(255,255,255,.03); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--white); font: 700 8px "Unbounded",sans-serif; letter-spacing: .16em; text-transform: uppercase; transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.portfolio-nav b { color: var(--gold); font-size: 18px; line-height: 1; }
.portfolio-nav:hover { transform: translateY(-4px); border-color: rgba(202,168,92,.48); background: rgba(202,168,92,.08); }
.portfolio-progress { min-width: 0; padding: 10px 14px; border: 1px solid rgba(202,168,92,.12); background: rgba(255,255,255,.02); }
.portfolio-progress span { display: block; font: 600 22px/1 "Unbounded",sans-serif; letter-spacing: -.05em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portfolio-progress small { display: block; margin-top: 7px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.portfolio-index { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.portfolio-index::-webkit-scrollbar { height: 8px; }
.portfolio-index::-webkit-scrollbar-thumb { background: rgba(202,168,92,.26); }
.portfolio-project { flex: 0 0 360px; scroll-snap-align: start; }
.portfolio-project:hover .portfolio-project__thumb img, .portfolio-project.active .portfolio-project__thumb img { transform: translateY(calc(-100% + 230px)) scale(1.01); }

.process-item::after { content: ""; position: absolute; inset: auto -25% 28px 28px; height: 1px; background: linear-gradient(90deg, rgba(202,168,92,.75), transparent); transform: scaleX(.22); transform-origin: left center; transition: transform .7s var(--ease); }
.process-item h3, .process-item p, .process-item > span { position: relative; z-index: 1; transition: transform .55s var(--ease), color .55s var(--ease); }
.process-item:hover::after { transform: scaleX(1.2); }
.process-item:hover h3 { transform: translateX(8px); }
.process-item:hover p { transform: translateX(4px); }
.process-item:hover > span { color: var(--gold-light); }

@media (max-width: 1180px) {
  .portfolio-project { flex-basis: 320px; }
}
@media (max-width: 920px) {
  .marketing-copy h2 { max-width: 8.8ch; }
  .portfolio-controls { grid-template-columns: 1fr 1fr; }
  .portfolio-progress { grid-column: 1 / -1; order: 3; }
  .portfolio-project { flex-basis: 290px; }
}
@media (max-width: 680px) {
  .marketing-copy h2 { font-size: clamp(34px, 10vw, 50px); max-width: 8.3ch; }
  .portfolio-nav { min-width: 0; }
  .portfolio-project { flex-basis: calc(100vw - 42px); }
  .principles-word { width: calc(100% - 24px);
        font-size: clamp(58px, 14vw, 164px);
        bottom: 0.8%; }
}


/* v3.7 fixes: process line, calmer portfolio, better principles hover */
.process-item::after {
  left: 28px;
  right: auto;
  bottom: 28px;
  width: 96px;
  inset: auto auto 28px 28px;
  transform: scaleX(1);
}
.process-item:hover::after {
  width: 170px;
  transform: scaleX(1);
}

.portfolio-shot {
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.portfolio-shot.is-changing {
  opacity: 1;
}
.portfolio-stage,
.portfolio-stage * {
  backface-visibility: hidden;
}
.portfolio-project {
  transition: transform .38s var(--ease), border-color .38s var(--ease), background .38s var(--ease), box-shadow .38s var(--ease);
}
.portfolio-project::before {
  transition: opacity .38s var(--ease);
}
.portfolio-project__thumb {
  position: relative;
  overflow: hidden;
}
.portfolio-project__thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(16,11,22,0), rgba(16,11,22,.42));
  pointer-events: none;
}
.portfolio-project__thumb img {
  transition: transform .7s var(--ease), filter .45s var(--ease);
  will-change: transform;
}
.portfolio-project:hover,
.portfolio-project.active {
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}
.portfolio-project:hover .portfolio-project__thumb img,
.portfolio-project.active .portfolio-project__thumb img {
  transform: translateY(-8px) scale(1.012);
  filter: saturate(1.03);
}
.portfolio-controls {
  margin-top: 22px;
}
.portfolio-progress {
  min-height: 56px;
}

.principles-grid article {
  position: relative;
  overflow: hidden;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.principles-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(202,168,92,.14));
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.principles-grid article::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  right: 22px;
  bottom: 22px;
  border-radius: 50%;
  border: 1px solid rgba(18,18,15,.22);
  box-shadow: inset 0 0 0 0 rgba(18,18,15,.12);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .55s var(--ease), box-shadow .55s var(--ease);
}
.principles-grid article:hover {
  transform: translateY(-10px);
  border-color: rgba(18,18,15,.38);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 22px 44px rgba(18,18,15,.12);
}
.principles-grid article:hover::before {
  opacity: 1;
  transform: scale(1);
}
.principles-grid article:hover::after {
  opacity: 1;
  transform: translateY(0);
  box-shadow: inset 0 0 0 12px rgba(18,18,15,.06);
}
.principles-grid article > * {
  position: relative;
  z-index: 1;
}
.principles-grid article h3,
.principles-grid article p {
  transition: transform .55s var(--ease), color .55s var(--ease);
}
.principles-grid article:hover h3 {
  transform: translateY(-4px);
}
.principles-grid article:hover p {
  transform: translateY(-2px);
  color: rgba(18,18,15,.82);
}


/* v3.9: cleaner process and 3-column works grid */
.process-line { display: none !important; }
.process-item::after { display: none !important; }

.portfolio-head__note b { display:block; margin-bottom:12px; }
.portfolio-grid {
  max-width: var(--container);
  margin: 88px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.portfolio-tile {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(202,168,92,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow: hidden;
  text-align: left;
  transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
.portfolio-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(202,168,92,.12), rgba(124,62,156,.06));
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.portfolio-tile:hover {
  transform: translateY(-12px);
  border-color: rgba(202,168,92,.42);
  box-shadow: 0 28px 54px rgba(0,0,0,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.portfolio-tile:hover::before { opacity: 1; }
.portfolio-tile > * { position: relative; z-index: 1; }
.portfolio-tile__num {
  position: absolute;
  left: 18px;
  top: 16px;
  color: var(--gold);
  font: 700 8px "Unbounded", sans-serif;
  letter-spacing: .18em;
}
.portfolio-tile__arrow {
  position: absolute;
  right: 18px;
  top: 14px;
  color: var(--gold);
  font-size: 18px;
  transition: transform .55s var(--ease), color .55s var(--ease);
}
.portfolio-tile:hover .portfolio-tile__arrow { transform: translate(4px, -4px) scale(1.08); }
.portfolio-tile__media {
  height: 280px;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid rgba(202,168,92,.14);
  background: rgba(255,255,255,.03);
}
.portfolio-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: scale(1.01);
  transition: transform .85s var(--ease), filter .55s var(--ease);
}
.portfolio-tile:hover .portfolio-tile__media img {
  transform: scale(1.06) translateY(-6px);
  filter: saturate(1.05) contrast(1.02);
}
.portfolio-tile__meta { padding: 18px 4px 2px; }
.portfolio-tile__meta small {
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font: 700 8px "Unbounded", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.portfolio-tile__meta strong {
  display: block;
  font: 600 clamp(22px,2.2vw,38px)/.96 "Unbounded", sans-serif;
  letter-spacing: -.05em;
  color: var(--white);
  transition: transform .55s var(--ease), color .55s var(--ease);
}
.portfolio-tile__meta p {
  margin: 12px 0 0;
  color: var(--muted-dark);
  line-height: 1.55;
  transition: transform .55s var(--ease), color .55s var(--ease);
}
.portfolio-tile:hover .portfolio-tile__meta strong {
  transform: translateY(-4px);
}
.portfolio-tile:hover .portfolio-tile__meta p {
  transform: translateY(-2px);
  color: rgba(235,232,224,.92);
}
@media (max-width: 1180px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 18px; }
  .portfolio-tile__media { height: 240px; }
}

/* v3.9 SEO content refinements */
.hero-content p { max-width: 620px; }
.hero-growth-strip article { min-height: 142px; }
.hero-growth-strip strong { overflow-wrap: anywhere; }
.lab-grid article { min-height: 330px; }
.lab-grid p { font-size: 13px; }
.spectrum-card { min-height: 600px; }
.spectrum-card p { max-width: 600px; }
.marketing-service { min-height: 330px; }
.metric-card { min-width: 170px; }
.metric-card span { display: block; max-width: 150px; line-height: 1.4; }
.fusion-stage__content > p { max-width: 670px; }
.process-item { min-height: 290px; }
.process-item p { font-size: 13px; }
.principles-grid article { min-height: 330px; }
.privacy a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-top > div:first-child p { max-width: 320px; }
.portfolio-tile__meta p { min-height: 48px; }
.portfolio-tile__media img { object-position: top center; }
@media (max-width: 920px) {
  .lab-grid article, .marketing-service, .process-item, .principles-grid article { min-height: auto; }
  .spectrum-card { min-height: 520px; }
  .portfolio-tile__meta p { min-height: 0; }
}


/* v3.10 interactive visuals + safer text wrapping */
.spectrum-card h3,
.marketing-service h3,
.metric-card b,
.metric-center strong {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
.spectrum-card h3 {
  max-width: 10ch;
  line-height: .96;
}
.spectrum-card p {
  max-width: 34ch;
  text-wrap: pretty;
}
.marketing-service {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.marketing-service h3 {
  margin: 18px 0 12px;
  max-width: 9ch;
  font: 600 clamp(18px,1.45vw,26px) / .98 "Unbounded",sans-serif;
}
.marketing-service p {
  max-width: 22ch;
  text-wrap: pretty;
}
.marketing-service > span {
  position: relative;
  z-index: 2;
}
.marketing-service > b {
  z-index: 2;
}

.spectrum-visual {
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(202,168,92,.12), transparent 12%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    #090909;
}
.spectrum-visual::before {
  opacity: .9;
  background:
    linear-gradient(120deg, transparent 0%, rgba(202,168,92,.16) 44%, transparent 56%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 36px);
  background-size: 220% 100%, 100% 100%, 100% 100%;
}
.spectrum-card:hover .spectrum-visual::before { animation: spectrumSweep 1.4s var(--ease); }
.spectrum-visual--landing span,
.spectrum-visual--corporate span:nth-child(1),
.spectrum-visual--system span,
.spectrum-visual--commerce b {
  box-shadow: 0 0 0 1px rgba(202,168,92,.1), 0 16px 36px rgba(202,168,92,.12);
}
.spectrum-visual--landing span::after {
  content: "CTA";
  position: absolute;
  right: 16px;
  bottom: 12px;
  color: rgba(19,16,12,.68);
  font: 700 8px "Unbounded",sans-serif;
  letter-spacing: .2em;
}
.spectrum-visual--landing i:nth-child(2),
.spectrum-visual--landing i:nth-child(3) { border-radius: 999px; }
.spectrum-visual--landing i:nth-child(2)::after,
.spectrum-visual--landing i:nth-child(3)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(202,168,92,.42);
  transform: translateY(-50%);
}
.spectrum-card:hover .spectrum-visual--landing span { transform: translateY(-4px) scaleX(.985); }
.spectrum-card:hover .spectrum-visual--landing i:nth-child(2) { width: 52%; }
.spectrum-card:hover .spectrum-visual--landing i:nth-child(3) { width: 76%; }

.spectrum-visual--corporate span { background: rgba(255,255,255,.015); }
.spectrum-visual--corporate span::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12%;
  height: 1px;
  background: rgba(202,168,92,.22);
  box-shadow: 0 -28px 0 rgba(255,255,255,.05), 0 -56px 0 rgba(255,255,255,.05);
}
.spectrum-visual--corporate b { box-shadow: 0 0 0 10px rgba(202,168,92,.08); }
.spectrum-card:hover .spectrum-visual--corporate b { transform: scale(1.08); }

.spectrum-visual--commerce span { text-shadow: 0 0 18px rgba(202,168,92,.1); }
.spectrum-visual--commerce i { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); }
.spectrum-visual--commerce i::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 1px;
  background: rgba(202,168,92,.22);
  box-shadow: 0 -20px 0 rgba(255,255,255,.05), 0 -40px 0 rgba(255,255,255,.05);
}
.spectrum-card:hover .spectrum-visual--commerce b { transform: scaleX(.97); }

.spectrum-visual--system i { background: rgba(255,255,255,.01); }
.spectrum-visual--system i:nth-child(4)::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(202,168,92,.14);
}
.spectrum-visual--system b { width: 40%; }

.marketing-visual {
  position: relative;
  width: 100%;
  height: 92px;
  margin: 20px 0 0;
  border: 1px solid rgba(202,168,92,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(255,255,255,.03);
  overflow: hidden;
  transition: transform .65s var(--ease), border-color .65s var(--ease), box-shadow .65s var(--ease), background .65s var(--ease);
}
.marketing-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(202,168,92,.15), transparent 12%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 26px);
  opacity: .85;
}
.marketing-visual i {
  position: absolute;
  display: block;
  z-index: 1;
  transition: transform .75s var(--ease), opacity .75s var(--ease), box-shadow .75s var(--ease), width .75s var(--ease), height .75s var(--ease);
}
.marketing-service:hover .marketing-visual {
  transform: translateY(-4px);
  border-color: rgba(202,168,92,.34);
  box-shadow: 0 18px 34px rgba(0,0,0,.1);
}
.marketing-service:hover .marketing-visual::before {
  background-position: 0 0, 0 0, 8px 0;
}
.marketing-visual--strategy i:nth-child(1) {
  left: 12%; right: 14%; top: 20%; height: 18px; background: linear-gradient(90deg, rgba(202,168,92,.24), rgba(202,168,92,.78));
}
.marketing-visual--strategy i:nth-child(2) {
  left: 12%; width: 46%; bottom: 22%; height: 3px; background: rgba(202,168,92,.58); box-shadow: 0 -12px 0 rgba(202,168,92,.22), 82px 18px 0 rgba(202,168,92,.34);
}
.marketing-visual--strategy i:nth-child(3) {
  right: 12%; top: 18%; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 10px rgba(202,168,92,.08);
}
.marketing-service:hover .marketing-visual--strategy i:nth-child(1) { right: 10%; }
.marketing-service:hover .marketing-visual--strategy i:nth-child(3) { transform: translate(-4px, 6px) scale(1.08); }

.marketing-visual--seo i:nth-child(1) {
  left: 12%; top: 20%; width: 34%; height: 44px; border: 1px solid rgba(202,168,92,.24); background: rgba(255,255,255,.02);
}
.marketing-visual--seo i:nth-child(2) {
  left: 52%; bottom: 22%; width: 30%; height: 3px; background: var(--gold); box-shadow: -38px -10px 0 rgba(202,168,92,.52), -74px 8px 0 rgba(202,168,92,.28);
  transform: rotate(-10deg);
}
.marketing-visual--seo i:nth-child(3) {
  right: 12%; top: 18%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold);
}
.marketing-visual--seo i:nth-child(3)::after {
  content: "";
  position: absolute;
  width: 10px; height: 2px; background: var(--gold); right: -6px; bottom: -4px; transform: rotate(40deg);
}
.marketing-service:hover .marketing-visual--seo i:nth-child(2) { width: 34%; transform: rotate(-8deg) translateX(4px); }

.marketing-visual--ads i:nth-child(1),
.marketing-visual--ads i:nth-child(2),
.marketing-visual--ads i:nth-child(3) {
  bottom: 18%; width: 16%; background: linear-gradient(180deg, rgba(202,168,92,.18), rgba(202,168,92,.64));
}
.marketing-visual--ads i:nth-child(1) { left: 14%; height: 22px; }
.marketing-visual--ads i:nth-child(2) { left: 40%; height: 40px; }
.marketing-visual--ads i:nth-child(3) { left: 66%; height: 58px; }
.marketing-service:hover .marketing-visual--ads i:nth-child(1) { height: 28px; }
.marketing-service:hover .marketing-visual--ads i:nth-child(2) { height: 48px; }
.marketing-service:hover .marketing-visual--ads i:nth-child(3) { height: 70px; }

.marketing-visual--analytics i:nth-child(1) {
  left: 12%; top: 22%; width: 44px; height: 44px; border-radius: 50%; border: 8px solid rgba(202,168,92,.28); border-top-color: var(--gold);
}
.marketing-visual--analytics i:nth-child(2) {
  left: 38%; right: 14%; top: 50%; height: 3px; background: var(--gold); box-shadow: 34px -12px 0 rgba(202,168,92,.44), 68px 6px 0 rgba(202,168,92,.3);
  transform: rotate(-10deg);
}
.marketing-visual--analytics i:nth-child(3) {
  right: 12%; top: 18%; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 10px rgba(202,168,92,.08);
}
.marketing-service:hover .marketing-visual--analytics i:nth-child(1) { transform: rotate(28deg); }
.marketing-service:hover .marketing-visual--analytics i:nth-child(2) { transform: rotate(-6deg) translateX(6px); }
.marketing-service:hover .marketing-visual--analytics i:nth-child(3) { transform: translate(-2px, 6px) scale(1.08); }

@media (max-width: 1024px) {
  .marketing-service { min-height: 330px; }
  .marketing-service h3 { max-width: 11ch; font-size: clamp(18px, 2vw, 24px); }
}
@media (max-width: 760px) {
  .marketing-service h3 { max-width: none; }
  .marketing-visual { height: 84px; }
  .spectrum-card h3 { max-width: none; }
}


/* v3.12 — signature hero motion system */
.hero {
  --scan-x: 50%;
  --scan-y: 50%;
  --hero-scroll: 0;
  --machine-x: 0px;
  --machine-y: 0px;
  --growth-x: 0px;
  --growth-y: 0px;
  --seam-opacity: 1;
  --scanner-opacity: .92;
  --hero-side-scale: 1;
  --hero-side-opacity: 1;
  --hero-content-opacity: 1;
  --hero-dev-shift: 0px;
  --hero-growth-shift: 0px;
  --hero-up-shift: 0px;
  --hero-visual-opacity: .92;
  --hero-visual-filter: 1;
  --transition-scale: 0;
  --transition-opacity: 0;
  --machine-c1-x: 0px; --machine-c1-y: 0px;
  --machine-c2-x: 0px; --machine-c2-y: 0px;
  --machine-line-a: 0px; --machine-line-b: 0px;
  --machine-cursor-x: 0px; --machine-cursor-y: 0px;
  --growth-core-x: 0px; --growth-core-y: 0px;
  --growth-d1-x: 0px; --growth-d1-y: 0px;
  --growth-d2-x: 0px; --growth-d2-y: 0px;
  --growth-d3-x: 0px; --growth-d3-y: 0px;
  isolation: isolate;
}

/* Loader → central seam handoff */
.intro { animation: intro-out-v312 .62s 2.32s var(--ease) forwards; }
.intro__dark { animation: intro-left-v312 .95s 1.48s var(--ease) forwards; }
.intro__light { animation: intro-right-v312 .95s 1.48s var(--ease) forwards; }
.intro__line {
  transform-origin: center;
  transform: translateX(-50%) scaleY(0);
  animation: intro-line-v312 1.25s .55s var(--ease-spring) forwards,
             intro-line-glow-v312 .8s 1.55s ease-in-out forwards;
}
.intro__word { animation: intro-word-v312 1.45s .18s var(--ease) both; }
.intro__pulse { animation: intro-pulse-v312 1.38s .15s var(--ease) both; }
.intro__rings { animation: intro-rings-v312 1.45s .1s ease-out both; }
@keyframes intro-word-v312 {
  0% { opacity:0; letter-spacing:.32em; filter:blur(9px); transform:scale(.96); }
  42%,72% { opacity:1; letter-spacing:.12em; filter:blur(0); transform:scale(1); }
  100% { opacity:0; letter-spacing:.16em; filter:blur(5px); transform:scale(1.025); }
}
@keyframes intro-line-v312 {
  0% { transform:translateX(-50%) scaleY(0); opacity:.1; }
  70% { transform:translateX(-50%) scaleY(1.03); opacity:1; }
  100% { transform:translateX(-50%) scaleY(1); opacity:1; }
}
@keyframes intro-line-glow-v312 {
  0% { width:2px; box-shadow:0 0 20px rgba(202,168,92,.45); }
  55% { width:4px; box-shadow:0 0 54px rgba(202,168,92,.9); }
  100% { width:2px; box-shadow:0 0 28px rgba(202,168,92,.62); }
}
@keyframes intro-pulse-v312 {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  28% { opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(202,168,92,.25); }
  72% { opacity:1; transform:translate(-50%,-50%) scale(.72); box-shadow:0 0 0 32px rgba(202,168,92,0); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.15,2.4); }
}
@keyframes intro-rings-v312 {
  0%,15% { opacity:0; transform:scale(.82); }
  45% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.12); }
}
@keyframes intro-left-v312 { to { transform:translateX(-101%); } }
@keyframes intro-right-v312 { to { transform:translateX(101%); } }
@keyframes intro-out-v312 { to { opacity:0; visibility:hidden; } }

/* Hero becomes visible exactly when loader line becomes the seam */
.motion-ready .hero-seam,
.motion-ready .seam-control,
.motion-ready .hero-scanner { opacity:0; }
.motion-ready.intro-complete .hero-seam,
.motion-ready.intro-complete .seam-control { opacity:var(--seam-opacity); }
.motion-ready.intro-complete .hero-scanner { opacity:0; }
.motion-ready.intro-complete .hero.scanner-active .hero-scanner { opacity:var(--scanner-opacity); }
.hero-seam,
.seam-control,
.hero-scanner { transition:opacity .7s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }

/* Masked title choreography */
.hero-title-line {
  display:block;
  overflow:hidden;
  color:inherit !important;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.hero-title-text {
  display:block;
  color:inherit !important;
  font-style:normal;
  transform:translateY(118%) rotate(1.4deg);
  transform-origin:left bottom;
  opacity:0;
  will-change:transform,opacity;
  transition:transform .92s var(--ease-spring), opacity .62s ease;
}
.hero-title-line--gold .hero-title-text { color:var(--gold) !important; }
.hero-content--growth .hero-title-line--gold .hero-title-text { color:var(--gold-dark) !important; }
.motion-ready .hero-meta,
.motion-ready .hero-content > p,
.motion-ready .hero-link,
.motion-ready .hero-badges,
.motion-ready .hero-growth-strip {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .72s ease, transform .82s var(--ease-spring);
}
.motion-ready.intro-complete .hero-title-line:nth-child(1) .hero-title-text { transition-delay:.05s; }
.motion-ready.intro-complete .hero-title-line:nth-child(2) .hero-title-text { transition-delay:.18s; }
.motion-ready.intro-complete .hero-title-line:nth-child(3) .hero-title-text { transition-delay:.31s; }
.motion-ready.intro-complete .hero-content--growth .hero-title-line:nth-child(1) .hero-title-text { transition-delay:.12s; }
.motion-ready.intro-complete .hero-content--growth .hero-title-line:nth-child(2) .hero-title-text { transition-delay:.25s; }
.motion-ready.intro-complete .hero-content--growth .hero-title-line:nth-child(3) .hero-title-text { transition-delay:.38s; }
.motion-ready.intro-complete .hero-title-text { transform:translateY(0) rotate(0); opacity:1; }
.motion-ready.intro-complete .hero-meta { opacity:1; transform:translateY(0); transition-delay:.03s; }
.motion-ready.intro-complete .hero-content > p { opacity:1; transform:translateY(0); transition-delay:.54s; }
.motion-ready.intro-complete .hero-link { opacity:1; transform:translateY(0); transition-delay:.66s; }
.motion-ready.intro-complete .hero-badges,
.motion-ready.intro-complete .hero-growth-strip { opacity:1; transform:translateY(0); transition-delay:.77s; }

/* Smooth scroll-exit choreography */
.hero-side {
  transform:scale(var(--hero-side-scale));
  opacity:var(--hero-side-opacity);
  transform-origin:center bottom;
}
.hero-content--dev {
  transform:translateY(calc(-48% - var(--hero-up-shift))) translateX(var(--hero-dev-shift));
  opacity:var(--hero-content-opacity);
}
.hero-content--growth {
  transform:translateY(calc(-48% - var(--hero-up-shift))) translateX(var(--hero-growth-shift));
  opacity:var(--hero-content-opacity);
}
.hero-stage-panels,
.dev-machine,
.growth-orbit { opacity:var(--hero-visual-opacity); }
.hero-transition-line {
  position:absolute;
  z-index:10;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  transform:scaleX(var(--transition-scale));
  transform-origin:center;
  opacity:var(--transition-opacity);
  box-shadow:0 0 24px rgba(202,168,92,.45);
  pointer-events:none;
}

/* Gold scanner that reveals hidden technical information */
.hero-scanner {
  position:absolute;
  z-index:7;
  left:var(--scan-x);
  top:var(--scan-y);
  width:220px;
  height:220px;
  border-radius:50%;
  border:1px solid rgba(202,168,92,.64);
  transform:translate(-50%,-50%);
  pointer-events:none;
  box-shadow:0 0 0 14px rgba(202,168,92,.025), 0 0 70px rgba(202,168,92,.14), inset 0 0 40px rgba(202,168,92,.04);
}
.hero-scanner::before,
.hero-scanner::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(202,168,92,.55);
  transform:translate(-50%,-50%);
}
.hero-scanner::before { width:42px; height:1px; }
.hero-scanner::after { width:1px; height:42px; }
.hero-scanner > i:nth-child(1) {
  position:absolute;
  inset:16px;
  border-radius:50%;
  border:1px dashed rgba(202,168,92,.25);
  animation:scanner-spin 12s linear infinite;
}
.hero-scanner > i:nth-child(2) {
  position:absolute;
  left:50%;
  top:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 8px rgba(202,168,92,.08);
  animation:scanner-pulse 2.4s ease-in-out infinite;
}
.hero-scanner span {
  position:absolute;
  left:50%;
  bottom:-28px;
  width:max-content;
  transform:translateX(-50%);
  color:var(--gold);
  font:700 7px "Unbounded",sans-serif;
  letter-spacing:.18em;
}
@keyframes scanner-spin { to { transform:rotate(360deg); } }
@keyframes scanner-pulse { 50% { transform:scale(1.25); box-shadow:0 0 0 14px rgba(202,168,92,0); } }

.hero-reveal-layer {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  clip-path:circle(0 at var(--scan-x) var(--scan-y));
  opacity:0;
  transition:opacity .45s ease;
  will-change:clip-path;
}
.hero.scanner-active .hero-reveal-layer {
  clip-path:circle(108px at var(--scan-x) var(--scan-y));
  opacity:1;
}
.hero-reveal-layer--dev {
  background:
    repeating-linear-gradient(0deg, rgba(202,168,92,.08) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(202,168,92,.07) 0 1px, transparent 1px 31px),
    radial-gradient(circle at var(--scan-x) var(--scan-y), rgba(202,168,92,.11), transparent 112px);
}
.hero-reveal-layer--growth {
  background:
    repeating-linear-gradient(0deg, rgba(133,103,45,.08) 0 1px, transparent 1px 30px),
    radial-gradient(circle at var(--scan-x) var(--scan-y), rgba(202,168,92,.13), transparent 112px);
}
.scan-code {
  position:absolute;
  color:var(--gold);
  font:700 7px "Unbounded",sans-serif;
  letter-spacing:.17em;
}
.hero-reveal-layer--growth .scan-code { color:var(--gold-dark); }
.scan-code--a { left:19%; top:22%; }
.scan-code--b { right:15%; bottom:19%; }
.scan-node,
.growth-point {
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 7px rgba(202,168,92,.07);
  animation:scan-node-pulse 2.6s ease-in-out infinite;
}
.scan-node.n1 { left:24%; top:36%; }
.scan-node.n2 { left:37%; top:49%; animation-delay:.35s; }
.scan-node.n3 { left:29%; top:66%; animation-delay:.7s; }
.scan-node.n4 { left:44%; top:73%; animation-delay:1.05s; }
.scan-connector,
.growth-path {
  position:absolute;
  height:1px;
  background:linear-gradient(90deg, rgba(202,168,92,.18), var(--gold), rgba(202,168,92,.12));
  transform-origin:left;
  animation:scan-connect 2.8s ease-in-out infinite;
}
.scan-connector.c1 { left:24.5%; top:37%; width:18%; transform:rotate(27deg); }
.scan-connector.c2 { left:29.5%; top:66.5%; width:17%; transform:rotate(23deg); animation-delay:.4s; }
.scan-connector.c3 { left:37.5%; top:49.5%; width:25%; transform:rotate(-12deg); animation-delay:.8s; }
.growth-point { background:var(--gold-dark); }
.growth-point.p1 { left:58%; top:69%; }
.growth-point.p2 { left:68%; top:57%; animation-delay:.3s; }
.growth-point.p3 { left:78%; top:42%; animation-delay:.6s; }
.growth-point.p4 { left:87%; top:27%; animation-delay:.9s; }
.growth-path { background:linear-gradient(90deg, rgba(133,103,45,.18), var(--gold-dark)); }
.growth-path.gp1 { left:58.5%; top:69.5%; width:14%; transform:rotate(-28deg); }
.growth-path.gp2 { left:68.5%; top:57.5%; width:15%; transform:rotate(-34deg); animation-delay:.35s; }
.growth-path.gp3 { left:78.5%; top:42.5%; width:14%; transform:rotate(-38deg); animation-delay:.7s; }
@keyframes scan-node-pulse { 50% { transform:scale(1.2); box-shadow:0 0 0 13px rgba(202,168,92,0); } }
@keyframes scan-connect { 0%,100% { opacity:.25; filter:brightness(.8); } 50% { opacity:1; filter:brightness(1.35); } }

/* Independent depth on both worlds */
.machine-card.c1 { translate:var(--machine-c1-x) var(--machine-c1-y); }
.machine-card.c2 { translate:var(--machine-c2-x) var(--machine-c2-y); }
.machine-line.l1 { translate:var(--machine-line-a) 0; }
.machine-line.l2 { translate:var(--machine-line-b) 0; }
.machine-line.l3 { translate:var(--machine-line-a) 0; }
.machine-cursor { translate:var(--machine-cursor-x) var(--machine-cursor-y); }
.orbit-core { translate:var(--growth-core-x) var(--growth-core-y); }
.orbit-dot.d1 { translate:var(--growth-d1-x) var(--growth-d1-y); }
.orbit-dot.d2 { translate:var(--growth-d2-x) var(--growth-d2-y); }
.orbit-dot.d3 { translate:var(--growth-d3-x) var(--growth-d3-y); }
.hero-side--growth.is-active .orbit-ring { border-color:rgba(133,103,45,.3); }
.hero-side--growth.is-active .orbit-core { box-shadow:0 28px 78px rgba(30,25,15,.28), 0 0 0 14px rgba(202,168,92,.035); }

/* Seam wave on click */
.hero-seam__pulse {
  stroke:var(--gold-light);
  stroke-width:5;
  stroke-linecap:round;
  opacity:0;
  stroke-dasharray:.12 .88;
  stroke-dashoffset:1;
  filter:drop-shadow(0 0 8px rgba(226,200,129,.9));
}
.hero.seam-wave .hero-seam__pulse { animation:seam-wave-v312 .9s ease-out; }
@keyframes seam-wave-v312 {
  0% { opacity:0; stroke-dashoffset:1; }
  18% { opacity:1; }
  100% { opacity:0; stroke-dashoffset:0; }
}

/* Premium CTA movement and click ripple */
.hero-link {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  --btn-x:50%;
  --btn-y:50%;
}
.hero-link > * { position:relative; z-index:2; }
.hero-link::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg, var(--gold-light), var(--gold));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease-spring);
}
.hero-link::after {
  content:"";
  position:absolute;
  z-index:1;
  left:var(--btn-x);
  top:var(--btn-y);
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}
.hero-link:hover { background:transparent; color:var(--black); border-color:var(--gold); }
.hero-link:hover::before { transform:scaleX(1); }
.hero-link.is-rippling::after { animation:hero-link-ripple .65s ease-out; }
@keyframes hero-link-ripple {
  0% { opacity:.8; transform:translate(-50%,-50%) scale(.2); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(12); }
}

@media (pointer:coarse), (max-width:920px) {
  .hero-scanner,
  .hero-reveal-layer { display:none; }
  .motion-ready .hero-seam,
  .motion-ready .seam-control { opacity:1; }
  .hero-side { transform:none; opacity:1; }
  .hero-content--dev,
  .hero-content--growth { opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  .intro { display:none !important; }
  .motion-ready .hero-seam,
  .motion-ready .seam-control { opacity:1 !important; }
  .motion-ready .hero-title-text,
  .motion-ready .hero-meta,
  .motion-ready .hero-content > p,
  .motion-ready .hero-link,
  .motion-ready .hero-badges,
  .motion-ready .hero-growth-strip {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .hero-scanner,
  .hero-reveal-layer { display:none !important; }
  .machine-line,
  .machine-cursor,
  .orbit-ring,
  .orbit-dot,
  .scan-node,
  .growth-point,
  .scan-connector,
  .growth-path { animation:none !important; }
}


/* v3.12 rendering corrections */
.hero-stage-panels,
.dev-machine,
.growth-orbit { filter:opacity(var(--hero-visual-filter)); }
.dev-machine { opacity:.45; }
.hero-side--dev.is-active .dev-machine { opacity:.9; }
.growth-orbit { opacity:.58; }
.hero-side--growth.is-active .growth-orbit { opacity:1; }
.hero-stage-panels { opacity:1; }


/* v3.13 readability fixes */
.stage-panel {
  overflow: hidden;
  padding-bottom: 28px;
}
.stage-panel strong {
  position: relative;
  z-index: 2;
  max-width: 78%;
  font: 600 clamp(16px,1.15vw,21px)/1.12 "Unbounded",sans-serif;
  letter-spacing: -.045em;
}
.stage-panel small { position: relative; z-index: 2; }
.stage-panel--dev span {
  position: relative;
  z-index: 1;
}
.stage-panel--dev span:nth-child(3) { width: 72%; }
.stage-panel--dev span:nth-child(4) { width: 54%; }
.stage-panel--dev span:nth-child(5) { width: 46%; opacity: .72; }
.stage-panel--dev::after {
  content: "↗";
  position: absolute;
  right: 18px;
  top: 44px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(202,168,92,.3);
  background: rgba(255,255,255,.04);
  color: var(--gold);
  font: 700 14px/1 "Unbounded", sans-serif;
  z-index: 3;
}
.hero-growth-strip article {
  min-height: 146px;
}
.hero-growth-strip strong {
  font: 600 clamp(18px,1.55vw,25px)/.98 "Unbounded",sans-serif;
  letter-spacing: -.045em;
  overflow-wrap: normal !important;
  word-break: normal;
  white-space: nowrap;
  hyphens: none;
}
.hero-growth-strip span {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.spectrum-card h3 {
  font: 600 clamp(24px,2.1vw,38px)/.98 "Unbounded",sans-serif;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.spectrum-card p,
.marketing-service p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}
.marketing-service h3 {
  font: 600 clamp(18px,1.55vw,24px)/1.02 "Unbounded",sans-serif;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
.metric-card b,
.metric-center strong {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (max-width: 900px) {
  .hero-growth-strip strong { white-space: normal; }
  .stage-panel strong { max-width: 72%; }
}
@media (max-width: 640px) {
  .hero h1, .hero h2 { font-size: clamp(37px,11.4vw,54px); }
  .hero-growth-strip strong {
    font-size: clamp(17px, 6.8vw, 23px);
    white-space: nowrap;
  }
  .marketing-service h3 { font-size: clamp(18px, 6.5vw, 23px); }
  .spectrum-card h3 { font-size: clamp(23px, 7.6vw, 34px); }
}
@media (max-width: 390px) {
  .hero-growth-strip strong { font-size: 15px; }
  .hero-growth-strip span { font-size: 11px; }
}


/* v3.14 new development + marketing sections */
.dev-console {
  position: relative;
  padding-block: clamp(88px, 9vw, 136px);
  background:
    radial-gradient(circle at 15% 0%, rgba(202,168,92,.10), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(124,62,156,.10), transparent 24%),
    linear-gradient(180deg, rgba(14,10,20,.98), rgba(12,9,18,.98));
  overflow: clip;
}
.dev-console::before,
.dev-console::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dev-console::before {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 96%);
}
.dev-console::after {
  background: radial-gradient(circle at var(--devmx,50%) var(--devmy,30%), rgba(202,168,92,.12), transparent 22%);
  transition: background .2s linear;
}
.dev-console .section-code,
.growth-map .section-code { margin-inline: auto; max-width: var(--container); padding-inline: clamp(24px,4vw,86px); }
.dev-console__head,
.growth-map__top,
.growth-map__layout,
.growth-channels {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(24px,4vw,86px);
}
.dev-console__head {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
  margin-bottom: clamp(30px, 3.6vw, 46px);
}
.dev-console__head span,
.growth-map__label span { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.dev-console__head span::before { content: "•"; font-size: 22px; line-height: 1; }
.dev-console__head h2 {
  margin: 16px 0 0;
  max-width: 10ch;
  font: 500 clamp(34px, 4.3vw, 68px) / 1.08 "Manrope", sans-serif;
  letter-spacing: -.04em;
}
.dev-console__head h2 b { color: var(--gold); font-weight: 500; }
.dev-console__head p {
  margin: 10px 0 0;
  color: rgba(248,245,237,.72);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.65;
  max-width: 39ch;
}
.dev-console__features,
.dev-console__grid {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(24px,4vw,86px);
}
.dev-console__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.dev-feature,
.dev-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(29,22,40,.96), rgba(17,13,24,.96));
  border: 1px solid rgba(202,168,92,.18);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 54px rgba(0,0,0,.32);
}
.dev-feature::before,
.dev-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(202,168,92,.14), transparent 30%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.dev-feature:hover::before,
.dev-panel:hover::before { opacity: 1; }
.dev-feature {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items: center;
  min-height: 168px;
  padding: 24px 26px;
}
.dev-feature__icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(202,168,92,.35);
  color: var(--gold-light);
  font-size: 29px;
  box-shadow: 0 0 28px rgba(202,168,92,.12), inset 0 0 22px rgba(202,168,92,.06);
  animation: devIconPulse 4.4s ease-in-out infinite;
}
.dev-feature h3 { margin: 0 0 12px; font: 600 clamp(20px,1.5vw,30px)/1.08 "Unbounded", sans-serif; letter-spacing: -.03em; }
.dev-feature p { margin: 0; color: rgba(248,245,237,.7); line-height: 1.55; max-width: 28ch; }
.dev-feature small { align-self: end; color: rgba(202,168,92,.45); font: 600 clamp(22px,1.8vw,34px)/1 "Unbounded", sans-serif; }
.dev-console__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 24px; }
.dev-panel { padding: 26px 28px 24px; }
.panel-status { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.panel-status span,
.online-dot i { width: 10px; height: 10px; border-radius: 50%; background: #9fe18a; box-shadow: 0 0 0 6px rgba(159,225,138,.08), 0 0 16px rgba(159,225,138,.45); animation: statusBlink 1.9s ease-in-out infinite; }
.dev-panel__body { display: grid; grid-template-columns: minmax(220px,.52fr) minmax(0,.48fr); gap: 24px; margin-top: 24px; }
.dev-panel__lead h3 { margin: 0; font-size: 18px; font-weight: 500; }
.dev-panel__lead strong { display: block; margin-top: 24px; font: 600 clamp(54px,5vw,92px)/.92 "Manrope", sans-serif; letter-spacing: -.05em; }
.dev-panel__lead p { margin: 14px 0 0; color: rgba(248,245,237,.7); }
.panel-badge { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.04); color: #b7f8a0; font-size: 14px; font-weight: 700; }
.panel-badge span { color: rgba(248,245,237,.58); font-weight: 500; }
.dev-chart { position: relative; min-height: 320px; border-radius: 24px; padding: 16px 56px 40px 24px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); overflow: hidden; }
.dev-chart__grid { position: absolute; inset: 18px 56px 48px 24px; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 100% 25%, 16.666% 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
.dev-chart__line { position: absolute; inset: 18px 56px 48px 24px; }
.dev-chart__line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(202,168,92,.22), rgba(202,168,92,0) 72%);
  clip-path: polygon(0% 84%, 6% 80%, 12% 70%, 18% 72%, 24% 66%, 30% 60%, 36% 64%, 42% 54%, 48% 58%, 54% 48%, 60% 46%, 66% 40%, 72% 44%, 78% 36%, 84% 28%, 90% 33%, 96% 19%, 100% 10%, 100% 100%, 0 100%);
  animation: chartGlow 5.2s ease-in-out infinite alternate;
}
.dev-chart__line i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(202,168,92,0) 0%, rgba(202,168,92,.96) 11%, rgba(247,229,181,.96) 100%);
  clip-path: polygon(0% 84%, 6% 80%, 12% 70%, 18% 72%, 24% 66%, 30% 60%, 36% 64%, 42% 54%, 48% 58%, 54% 48%, 60% 46%, 66% 40%, 72% 44%, 78% 36%, 84% 28%, 90% 33%, 96% 19%, 100% 10%, 100% 15%, 96% 24%, 90% 38%, 84% 33%, 78% 41%, 72% 49%, 66% 45%, 60% 51%, 54% 53%, 48% 63%, 42% 59%, 36% 69%, 30% 65%, 24% 71%, 18% 77%, 12% 75%, 6% 85%, 0 89%);
  filter: drop-shadow(0 0 14px rgba(202,168,92,.44));
  transform-origin: left center;
  animation: drawLine 2.4s var(--ease-spring) .2s both, chartFloat 5.8s ease-in-out 2.6s infinite;
}
.dev-chart__line::after { content:""; position:absolute; right:-5px; top:calc(10% - 5px); width:14px; height:14px; border-radius:50%; background: var(--gold-light); box-shadow: 0 0 18px rgba(202,168,92,.85); animation: dotBlink 2.4s ease-in-out infinite; }
.dev-chart__labels { position: absolute; top: 12px; right: 14px; bottom: 44px; display: flex; flex-direction: column; justify-content: space-between; color: rgba(248,245,237,.68); font-size: 13px; }
.dev-chart__dates { position: absolute; left: 24px; right: 56px; bottom: 10px; display:flex; justify-content: space-between; color: rgba(248,245,237,.55); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.dev-mini-stats { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.dev-mini-stats div { padding: 18px 16px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.dev-mini-stats small { display:block; margin-bottom: 8px; color: rgba(248,245,237,.55); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.dev-mini-stats b { font-size: clamp(18px,1.4vw,24px); }
.dev-tabs { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.dev-tabs button { padding: 10px 14px; border-radius: 14px; border: 1px solid transparent; background: none; color: rgba(248,245,237,.7); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.dev-tabs button.active { border-color: rgba(202,168,92,.34); color: var(--gold-light); background: rgba(255,255,255,.03); }
.online-dot { margin-left: auto; display:inline-flex; align-items:center; gap: 10px; color: rgba(248,245,237,.76); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dev-code-layout { display:grid; grid-template-columns: minmax(0, .58fr) minmax(250px,.42fr); gap: 10px; align-items: center; margin-top: 20px; }
.dev-code { display:grid; gap: 10px; }
.dev-code div { display:grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: baseline; color: rgba(248,245,237,.76); font-family: "IBM Plex Mono", monospace; font-size: clamp(14px,1vw,18px); }
.dev-code span { color: rgba(248,245,237,.38); }
.dev-code code { white-space: nowrap; overflow-wrap: normal; }
.dev-code div:nth-child(1) code,
.dev-code div:nth-child(10) code { color: var(--gold); }
.dev-code div:nth-child(n+3):nth-child(-n+8) code { color: #f5e5b5; }
.dev-stack { position: relative; min-height: 330px; display:grid; place-items:center; }
.stack-layer { position:absolute; width: 160px; height: 56px; border: 1px solid rgba(202,168,92,.55); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); box-shadow: 0 0 24px rgba(202,168,92,.12); transform-style: preserve-3d; animation: stackFloat 5.4s ease-in-out infinite; }
.stack-layer.l1 { transform: translateY(74px) scale(.96); animation-delay: .2s; }
.stack-layer.l2 { transform: translateY(24px) scale(.99); animation-delay: .45s; }
.stack-layer.l3 { transform: translateY(-26px) scale(1.02); animation-delay: .7s; }
.stack-layer.l4 { transform: translateY(-76px) scale(1.06); animation-delay: .95s; }
.stack-layer::after { content:""; position:absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(202,168,92,.18), transparent 68%); }
.stack-glow { position:absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--gold-light), var(--gold) 58%, rgba(202,168,92,0) 72%); box-shadow: 0 0 28px rgba(202,168,92,.55); animation: stackGlow 4.6s ease-in-out infinite; }
.dev-panel__footer { margin-top: 16px; display:flex; justify-content: space-between; gap: 20px; align-items:center; color: rgba(248,245,237,.6); }
.line-button { display:inline-flex; align-items:center; gap: 14px; padding: 13px 16px 13px 18px; border: 1px solid rgba(202,168,92,.3); border-radius: 16px; background: rgba(255,255,255,.03); color: var(--gold-light); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; transition: transform .35s, background .35s, border-color .35s; }
.line-button b { font-size: 16px; }
.line-button:hover { background: rgba(202,168,92,.08); border-color: rgba(202,168,92,.6); }

.growth-map {
  position: relative;
  padding-block: clamp(88px, 9vw, 136px);
  background: linear-gradient(180deg, var(--paper-soft), var(--paper));
  color: var(--ink);
  overflow: clip;
}
.growth-map::before,
.growth-map::after { content:""; position:absolute; inset: 0; pointer-events:none; }
.growth-map::before {
  background-image: linear-gradient(rgba(18,18,15,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,15,.06) 1px, transparent 1px);
  background-size: 112px 112px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 96%);
}
.growth-map::after { background: radial-gradient(circle at var(--mmx,72%) var(--mmy,35%), rgba(202,168,92,.14), transparent 24%); transition: background .2s linear; }
.growth-map__label { display:flex; align-items:center; gap: 16px; color: var(--muted-light); margin-bottom: 28px; }
.growth-map__label b { font-size: clamp(18px,1.4vw,24px); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-light); }
.growth-map__layout { position: relative; z-index:1; display:grid; grid-template-columns: minmax(0,.92fr) minmax(360px,1.08fr); gap: clamp(30px, 4vw, 54px); align-items: center; }
.growth-cards { display:grid; gap: 18px; }
.growth-card {
  position: relative;
  display:grid;
  grid-template-columns: 98px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 30px;
  border-radius: 28px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(18,18,15,.08);
  box-shadow: 0 24px 48px rgba(133,103,45,.09);
  overflow: hidden;
  transition: transform .45s var(--ease-spring), box-shadow .45s, border-color .45s;
}
.growth-card::before { content:""; position:absolute; inset: 0; background: linear-gradient(90deg, rgba(202,168,92,.10), rgba(202,168,92,0)); opacity: 0; transition: opacity .35s var(--ease); }
.growth-card:hover { transform: translateY(-8px); border-color: rgba(202,168,92,.38); box-shadow: 0 28px 52px rgba(133,103,45,.13); }
.growth-card:hover::before { opacity: 1; }
.growth-card__icon { width: 74px; height: 74px; border-radius: 22px; display:grid; place-items:center; font-size: 30px; color: var(--gold-dark); border:1px solid rgba(202,168,92,.24); background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.growth-card small { display:block; margin-bottom: 10px; color: #b6811c; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.growth-card h3 { margin: 0 0 10px; font: 500 clamp(24px,2vw,40px)/1.08 "Manrope", sans-serif; letter-spacing: -.04em; overflow-wrap: normal; word-break: normal; hyphens: none; }
.growth-card p { margin: 0; max-width: 28ch; color: rgba(18,18,15,.62); line-height: 1.55; }
.growth-card b { color: #c18d25; font-size: 26px; font-weight: 500; transition: transform .35s var(--ease); }
.growth-card:hover b { transform: translateX(4px); }
.growth-orbit-ui { position: relative; min-height: 720px; display:grid; place-items:center; }
.growth-orbit-ui__grid { position:absolute; inset: 0; background-image: linear-gradient(rgba(18,18,15,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,15,.06) 1px, transparent 1px); background-size: 92px 92px; opacity: .45; }
.growth-orbit-ui__ring { position:absolute; border-radius: 50%; border: 1px solid rgba(202,168,92,.42); animation: orbitRotate linear infinite; }
.growth-orbit-ui__ring.ring1 { width: 210px; height: 210px; animation-duration: 20s; }
.growth-orbit-ui__ring.ring2 { width: 340px; height: 340px; animation-duration: 28s; animation-direction: reverse; }
.growth-orbit-ui__ring.ring3 { width: 490px; height: 490px; border-style: solid dotted; animation-duration: 36s; }
.growth-orbit-ui__ring.ring4 { width: 620px; height: 620px; border-color: rgba(202,168,92,.22); animation-duration: 44s; animation-direction: reverse; }
.growth-orbit-ui__core { position:absolute; width: 176px; height: 176px; border-radius: 50%; display:grid; place-items:center; background: radial-gradient(circle at 35% 30%, #f4dda0, var(--gold) 58%, #b78625 100%); box-shadow: inset 0 0 0 10px rgba(255,255,255,.42), 0 0 0 22px rgba(255,255,255,.32), 0 0 60px rgba(202,168,92,.32); animation: corePulse 5s ease-in-out infinite; }
.growth-orbit-ui__core span { color: var(--white); font-size: 68px; line-height: 1; transform: translateY(-2px); }
.orbit-node { position:absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fffaf1, #e9d39b 62%, var(--gold)); box-shadow: 0 0 18px rgba(202,168,92,.42); animation: orbitBob 4.5s ease-in-out infinite; }
.orbit-node.n1 { top: 12%; left: 55%; }
.orbit-node.n2 { top: 22%; left: 72%; width: 14px; height: 14px; animation-delay: .4s; }
.orbit-node.n3 { top: 57%; left: 26%; width: 16px; height: 16px; animation-delay: .9s; }
.orbit-node.n4 { top: 70%; right: 18%; animation-delay: 1.2s; }
.orbit-node.n5 { bottom: 18%; left: 38%; width: 12px; height: 12px; animation-delay: .65s; }
.orbit-node.n6 { bottom: 28%; right: 23%; width: 10px; height: 10px; animation-delay: 1.5s; }
.growth-audience { position:absolute; right: 1%; top: 41%; transform: translateY(-50%); padding: 26px 30px; border-radius: 24px; background: rgba(255,255,255,.72); border:1px solid rgba(18,18,15,.08); box-shadow: 0 20px 42px rgba(133,103,45,.1); font-size: clamp(22px, 1.7vw, 34px); font-weight: 500; line-height: 1.15; color: var(--muted-light); }
.growth-channels { position:relative; z-index:1; display:grid; grid-template-columns: 260px 1fr; gap: 0; margin-top: 30px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(18,18,15,.08); background: rgba(255,255,255,.52); box-shadow: 0 18px 38px rgba(133,103,45,.08); }
.growth-channels__title { padding: 28px 30px; color: #b6811c; font: 600 clamp(18px,1.4vw,24px)/1.15 "Unbounded", sans-serif; text-transform: uppercase; letter-spacing: -.03em; }
.growth-channels__list { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.growth-channels__list span { display:flex; align-items:center; justify-content:center; min-height: 104px; padding: 12px 16px; border-left: 1px solid rgba(18,18,15,.08); text-align:center; color: var(--muted-light); font-size: clamp(16px,1.05vw,18px); transition: background .35s, color .35s, transform .35s; }
.growth-channels__list span:hover { background: linear-gradient(180deg, rgba(202,168,92,.10), rgba(255,255,255,.45)); color: var(--ink); transform: translateY(-4px); }

@keyframes devIconPulse { 50% { box-shadow: 0 0 36px rgba(202,168,92,.18), inset 0 0 26px rgba(202,168,92,.09); transform: scale(1.03); } }
@keyframes statusBlink { 50% { box-shadow: 0 0 0 8px rgba(159,225,138,.03), 0 0 22px rgba(159,225,138,.6); } }
@keyframes drawLine { from { transform: scaleX(.02); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes chartGlow { 0% { filter: saturate(1); } 100% { filter: saturate(1.2); } }
@keyframes chartFloat { 50% { transform: translateY(-4px); } }
@keyframes dotBlink { 50% { transform: scale(1.16); box-shadow: 0 0 26px rgba(202,168,92,.95); } }
@keyframes stackFloat { 50% { transform: translateY(calc(var(--offset,0px) - 8px)) scale(var(--scale,1)); } }
.stack-layer.l1 { --offset: 74px; --scale: .96; }
.stack-layer.l2 { --offset: 24px; --scale: .99; }
.stack-layer.l3 { --offset: -26px; --scale: 1.02; }
.stack-layer.l4 { --offset: -76px; --scale: 1.06; }
@keyframes stackGlow { 50% { transform: translateY(-34px) scale(1.28); box-shadow: 0 0 38px rgba(202,168,92,.85); } }
@keyframes orbitRotate { to { transform: rotate(1turn); } }
@keyframes corePulse { 50% { transform: scale(1.03); box-shadow: inset 0 0 0 10px rgba(255,255,255,.42), 0 0 0 28px rgba(255,255,255,.2), 0 0 72px rgba(202,168,92,.38); } }
@keyframes orbitBob { 50% { transform: translateY(-6px) scale(1.06); } }

@media (max-width: 1200px) {
  .dev-console__head,
  .growth-map__layout,
  .dev-console__grid { grid-template-columns: 1fr; }
  .dev-console__head h2 { max-width: 14ch; }
  .growth-orbit-ui { min-height: 620px; }
  .growth-audience { right: 3%; }
}
@media (max-width: 960px) {
  .dev-console__features,
  .dev-mini-stats,
  .growth-channels__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dev-feature { grid-template-columns: 84px 1fr; }
  .dev-feature small { display: none; }
  .dev-panel__body,
  .dev-code-layout { grid-template-columns: 1fr; }
  .growth-channels { grid-template-columns: 1fr; }
  .growth-map__label { flex-direction: column; align-items: flex-start; }
  .growth-audience { position: absolute; right: 8%; top: auto; bottom: 14%; transform: none; font-size: 20px; }
}
@media (max-width: 720px) {
  .dev-console__features,
  .dev-mini-stats,
  .growth-channels__list { grid-template-columns: 1fr; }
  .growth-card { grid-template-columns: 76px 1fr; }
  .growth-card b { display: none; }
  .growth-orbit-ui { min-height: 520px; }
  .growth-orbit-ui__ring.ring4 { width: 460px; height: 460px; }
  .growth-orbit-ui__ring.ring3 { width: 360px; height: 360px; }
  .growth-orbit-ui__ring.ring2 { width: 250px; height: 250px; }
  .growth-orbit-ui__ring.ring1 { width: 160px; height: 160px; }
  .growth-orbit-ui__core { width: 132px; height: 132px; }
  .growth-orbit-ui__core span { font-size: 52px; }
  .growth-audience { right: 6%; bottom: 9%; padding: 16px 18px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-feature__icon,
  .panel-status span,
  .online-dot i,
  .dev-chart__line i,
  .dev-chart__line::before,
  .dev-chart__line::after,
  .stack-layer,
  .stack-glow,
  .growth-orbit-ui__ring,
  .growth-orbit-ui__core,
  .orbit-node { animation: none !important; }
}

/* v3.15 premium motion, typography and mobile adaptation */
.dev-console__head h2,
.growth-card h3,
.growth-map__label b,
.dev-panel__lead h3,
.dev-panel__lead strong,
.growth-audience {
  font-family: "Unbounded", sans-serif;
}
.dev-console__head h2 {
  max-width: 12ch;
  font-size: clamp(32px, 3.85vw, 62px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.dev-console__head h2 b { font-weight: 600; }
.growth-map__label b {
  font-size: clamp(17px,1.25vw,22px);
  font-weight: 500;
  letter-spacing: .1em;
}
.growth-card h3 {
  max-width: 19ch;
  font-size: clamp(21px,1.7vw,32px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.dev-panel__lead h3 {
  font-size: clamp(16px,1.1vw,20px);
  font-weight: 500;
  line-height: 1.2;
}
.dev-panel__lead strong {
  font-size: clamp(46px,4.4vw,80px);
  font-weight: 600;
  letter-spacing: -.06em;
}

.dev-feature,
.dev-panel,
.growth-card,
.growth-channels {
  isolation: isolate;
}
.dev-feature::after,
.dev-panel::after,
.growth-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.dev-feature::after {
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,218,150,.85), transparent);
  transform: scaleX(.18);
  opacity: .35;
  transition: transform .65s var(--ease-spring), opacity .65s;
}
.dev-feature:hover::after { transform: scaleX(1); opacity: 1; }
.dev-feature > *,
.dev-panel > *,
.growth-card > * { position: relative; z-index: 2; }
.dev-feature {
  transition: border-color .55s var(--ease-spring), box-shadow .55s var(--ease-spring), background .55s var(--ease-spring);
}
.dev-feature:hover {
  border-color: rgba(226,200,129,.52);
  background: linear-gradient(145deg, rgba(37,27,50,.98), rgba(17,13,24,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 66px rgba(0,0,0,.42), 0 0 0 1px rgba(202,168,92,.08);
}
.dev-feature__icon {
  position: relative;
  transition: color .55s, border-color .55s, background .55s, box-shadow .55s;
}
.dev-feature__icon::before,
.dev-feature__icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.dev-feature__icon::before {
  inset: -10px;
  border: 1px dashed rgba(202,168,92,.20);
  animation: devRingRotate 14s linear infinite;
}
.dev-feature__icon::after {
  width: 7px;
  height: 7px;
  top: -4px;
  right: 8px;
  background: var(--gold-light);
  box-shadow: 0 0 14px rgba(226,200,129,.72);
  animation: featureNode 4.8s ease-in-out infinite;
}
.dev-feature:hover .dev-feature__icon {
  color: #f2d98e;
  border-color: rgba(226,200,129,.72);
  background: radial-gradient(circle, rgba(202,168,92,.13), transparent 72%);
  box-shadow: 0 0 42px rgba(202,168,92,.22), inset 0 0 28px rgba(202,168,92,.10);
}
.dev-feature h3,
.dev-feature p,
.dev-feature small {
  transition: transform .5s var(--ease-spring), color .5s, opacity .5s;
}
.dev-feature:hover h3 { transform: translateX(5px); color: #fffaf0; }
.dev-feature:hover p { transform: translateX(3px); color: rgba(248,245,237,.84); }
.dev-feature:hover small { transform: translate(-4px,-4px); color: rgba(226,200,129,.72); }

.dev-panel {
  transition: border-color .55s var(--ease-spring), box-shadow .55s var(--ease-spring), background .55s var(--ease-spring);
}
.dev-panel::after {
  inset: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.035) 38%, rgba(202,168,92,.08) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease-spring);
}
.dev-panel:hover::after { transform: translateX(120%); }
.dev-panel:hover {
  border-color: rgba(202,168,92,.38);
  background: linear-gradient(160deg, rgba(34,25,46,.98), rgba(14,11,21,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 34px 80px rgba(0,0,0,.46);
}
.dev-chart__grid {
  animation: chartGridDrift 16s linear infinite;
}
.dev-panel:hover .dev-chart__line i { filter: drop-shadow(0 0 20px rgba(226,200,129,.72)); }
.dev-panel:hover .dev-chart__line::after { transform: scale(1.25); }
.dev-mini-stats div {
  transition: transform .45s var(--ease-spring), border-color .45s, background .45s, box-shadow .45s;
}
.dev-mini-stats div:hover {
  transform: translateY(-6px);
  border-color: rgba(202,168,92,.24);
  background: rgba(202,168,92,.065);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.dev-code div {
  opacity: .64;
  transform: translateX(-6px);
  transition: opacity .35s, transform .35s, color .35s;
}
.dev-panel.visible .dev-code div,
.dev-panel:hover .dev-code div {
  animation: codeLineIn .5s var(--ease-spring) both;
}
.dev-code div:nth-child(1) { animation-delay: .03s !important; }
.dev-code div:nth-child(2) { animation-delay: .07s !important; }
.dev-code div:nth-child(3) { animation-delay: .11s !important; }
.dev-code div:nth-child(4) { animation-delay: .15s !important; }
.dev-code div:nth-child(5) { animation-delay: .19s !important; }
.dev-code div:nth-child(6) { animation-delay: .23s !important; }
.dev-code div:nth-child(7) { animation-delay: .27s !important; }
.dev-code div:nth-child(8) { animation-delay: .31s !important; }
.dev-code div:nth-child(9) { animation-delay: .35s !important; }
.dev-code div:nth-child(10) { animation-delay: .39s !important; }
.dev-panel--code:hover .stack-layer.l1 { transform: translateY(92px) scale(.92) rotateX(62deg) rotateZ(-3deg); }
.dev-panel--code:hover .stack-layer.l2 { transform: translateY(34px) scale(.98) rotateX(62deg) rotateZ(2deg); }
.dev-panel--code:hover .stack-layer.l3 { transform: translateY(-34px) scale(1.04) rotateX(62deg) rotateZ(-2deg); }
.dev-panel--code:hover .stack-layer.l4 { transform: translateY(-94px) scale(1.1) rotateX(62deg) rotateZ(3deg); }
.stack-layer { transition: transform .9s var(--ease-spring), border-color .5s, box-shadow .5s; }
.dev-panel--code:hover .stack-layer {
  border-color: rgba(226,200,129,.82);
  box-shadow: 0 0 32px rgba(202,168,92,.18);
}
.dev-tabs button { cursor: pointer; transition: color .35s, border-color .35s, background .35s, transform .35s; }
.dev-tabs button:hover { color: var(--gold-light); transform: translateY(-2px); }
.dev-tabs button.active { box-shadow: 0 8px 20px rgba(202,168,92,.08); }

.growth-card {
  --card-x: 50%;
  --card-y: 50%;
  transition: transform .55s var(--ease-spring), box-shadow .55s var(--ease-spring), border-color .55s, background .55s;
}
.growth-card::before {
  background:
    radial-gradient(circle at var(--card-x) var(--card-y), rgba(255,255,255,.72), transparent 30%),
    linear-gradient(90deg, rgba(202,168,92,.11), rgba(202,168,92,0));
  opacity: 0;
  transition: opacity .5s;
}
.growth-card::after {
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(.12);
  opacity: .35;
  transition: transform .7s var(--ease-spring), opacity .7s;
}
.growth-card:hover {
  transform: translateY(-10px) scale(1.012);
  border-color: rgba(202,168,92,.48);
  background: rgba(255,255,255,.72);
  box-shadow: 0 34px 70px rgba(133,103,45,.16);
}
.growth-card:hover::before { opacity: 1; }
.growth-card:hover::after { transform: scaleX(1); opacity: 1; }
.growth-card__icon {
  position: relative;
  transition: transform .55s var(--ease-spring), color .55s, border-color .55s, box-shadow .55s, background .55s;
}
.growth-card__icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 28px;
  border: 1px dashed rgba(202,168,92,.22);
  opacity: 0;
  transform: rotate(-16deg) scale(.92);
  transition: opacity .5s, transform .7s var(--ease-spring);
}
.growth-card:hover .growth-card__icon {
  transform: translateY(-4px) rotate(-3deg);
  color: #a66f0a;
  border-color: rgba(202,168,92,.5);
  background: rgba(255,250,238,.9);
  box-shadow: 0 16px 28px rgba(133,103,45,.12);
}
.growth-card:hover .growth-card__icon::after { opacity: 1; transform: rotate(10deg) scale(1); }
.growth-card h3,
.growth-card p,
.growth-card > b { transition: transform .5s var(--ease-spring), color .5s; }
.growth-card:hover h3 { transform: translateX(6px); }
.growth-card:hover p { transform: translateX(4px); color: rgba(18,18,15,.74); }
.growth-card:hover > b { transform: translate(6px,-4px) scale(1.08); }

.growth-orbit-ui {
  perspective: 1200px;
}
.growth-orbit-ui__ring {
  box-shadow: inset 0 0 34px rgba(202,168,92,.035);
  transition: border-color .5s, box-shadow .5s, filter .5s;
}
.growth-orbit-ui:hover .growth-orbit-ui__ring {
  border-color: rgba(202,168,92,.62);
  box-shadow: inset 0 0 42px rgba(202,168,92,.055), 0 0 34px rgba(202,168,92,.08);
}
.growth-orbit-ui__ring::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  top: -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(202,168,92,.62);
}
.growth-orbit-ui__ring.ring2::before { width: 8px; height: 8px; top: auto; bottom: -4px; }
.growth-orbit-ui__ring.ring3::before { left: 8%; top: 30%; }
.growth-orbit-ui__ring.ring4::before { left: auto; right: 12%; top: 66%; }
.growth-orbit-ui__core {
  cursor: pointer;
  transition: box-shadow .6s var(--ease-spring), filter .6s, transform .35s;
}
.growth-orbit-ui:hover .growth-orbit-ui__core {
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.48), 0 0 0 30px rgba(255,255,255,.22), 0 0 84px rgba(202,168,92,.5);
  filter: saturate(1.12);
}
.growth-orbit-ui__core::after {
  content: "";
  position: absolute;
  inset: -38px;
  border-radius: 50%;
  border: 1px solid rgba(202,168,92,.22);
  animation: coreRadar 3s ease-out infinite;
}
.growth-audience {
  animation: audienceFloat 5.2s ease-in-out infinite;
  transition: transform .5s var(--ease-spring), box-shadow .5s, border-color .5s;
}
.growth-orbit-ui:hover .growth-audience {
  transform: translateY(calc(-50% - 6px));
  border-color: rgba(202,168,92,.28);
  box-shadow: 0 28px 54px rgba(133,103,45,.16);
}
.growth-channels__list span {
  position: relative;
  overflow: hidden;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(12px,.86vw,15px);
  letter-spacing: -.02em;
  transition: background .5s var(--ease-spring), color .5s, transform .5s var(--ease-spring), box-shadow .5s;
}
.growth-channels__list span::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 50%;
  top: 18px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transform: translate(-50%,-8px);
  transition: opacity .45s, transform .55s var(--ease-spring);
}
.growth-channels__list span:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 -2px 0 rgba(202,168,92,.6), 0 12px 26px rgba(133,103,45,.08);
}
.growth-channels__list span:hover::before { opacity: 1; transform: translate(-50%,0); }

@keyframes devRingRotate { to { transform: rotate(360deg); } }
@keyframes featureNode { 50% { transform: translate(-12px, 12px) scale(1.25); opacity: .65; } }
@keyframes chartGridDrift { to { background-position: 0 100%, 100% 0; } }
@keyframes codeLineIn { from { opacity: .28; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes coreRadar { 0% { opacity: .55; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.24); } }
@keyframes audienceFloat { 50% { margin-top: -8px; } }

/* Mobile layouts are redesigned rather than scaled down */
@media (max-width: 1200px) {
  .dev-console__head h2 { max-width: 15ch; }
  .dev-console__features { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dev-feature:last-child { grid-column: 1 / -1; }
  .dev-console__grid { grid-template-columns: 1fr; }
  .dev-panel__body { grid-template-columns: minmax(220px,.42fr) minmax(0,.58fr); }
  .growth-map__layout { grid-template-columns: minmax(0,.95fr) minmax(420px,1.05fr); }
  .growth-orbit-ui { min-height: 590px; }
  .growth-orbit-ui__ring.ring4 { width: 540px; height: 540px; }
}
@media (max-width: 960px) {
  .dev-console,
  .growth-map { padding-block: 86px; }
  .dev-console__head { grid-template-columns: 1fr; }
  .dev-console__head h2 { max-width: 12ch; font-size: clamp(30px,6vw,52px); }
  .dev-console__head p { max-width: 48ch; }
  .dev-console__features { grid-template-columns: 1fr; }
  .dev-feature:last-child { grid-column: auto; }
  .dev-feature { min-height: 148px; grid-template-columns: 82px 1fr auto; padding: 22px; }
  .dev-feature__icon { width: 64px; height: 64px; }
  .dev-panel { padding: 22px; }
  .dev-panel__body { grid-template-columns: 1fr; }
  .dev-chart { min-height: 280px; }
  .dev-mini-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dev-code-layout { grid-template-columns: 1fr; }
  .dev-stack { min-height: 280px; }
  .growth-map__layout { grid-template-columns: 1fr; }
  .growth-cards { max-width: none; }
  .growth-orbit-ui { min-height: 560px; order: -1; }
  .growth-map__label { margin-bottom: 18px; }
  .growth-channels { grid-template-columns: 1fr; }
  .growth-channels__title { padding: 22px 24px; }
  .growth-channels__list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .growth-channels__list span { min-height: 82px; border-top: 1px solid rgba(18,18,15,.08); }
}
@media (max-width: 640px) {
  .dev-console,
  .growth-map { padding-block: 70px; }
  .dev-console .section-code,
  .growth-map .section-code,
  .dev-console__head,
  .dev-console__features,
  .dev-console__grid,
  .growth-map__top,
  .growth-map__layout,
  .growth-channels { padding-inline: 18px; }
  .dev-console__head { margin-bottom: 26px; }
  .dev-console__head span,
  .growth-map__label span { font-size: 10px; letter-spacing: .13em; }
  .dev-console__head h2 { max-width: 10.5ch; font-size: clamp(28px,9vw,42px); line-height: 1.08; }
  .dev-console__head p { font-size: 15px; line-height: 1.65; }
  .dev-feature { grid-template-columns: 62px 1fr; gap: 16px; min-height: auto; border-radius: 22px; padding: 18px; }
  .dev-feature__icon { width: 54px; height: 54px; font-size: 22px; }
  .dev-feature h3 { font-size: 18px; margin-bottom: 8px; }
  .dev-feature p { font-size: 14px; }
  .dev-feature small { display: none; }
  .dev-panel { padding: 18px; border-radius: 22px; }
  .dev-panel__lead strong { font-size: clamp(42px,14vw,62px); }
  .panel-badge { display: flex; flex-wrap: wrap; font-size: 12px; }
  .dev-chart { min-height: 230px; padding: 12px 36px 38px 14px; }
  .dev-chart__grid,
  .dev-chart__line { inset: 14px 38px 44px 14px; }
  .dev-chart__labels { right: 5px; font-size: 10px; }
  .dev-chart__dates { left: 14px; right: 38px; font-size: 8px; letter-spacing: .03em; }
  .dev-mini-stats { gap: 10px; }
  .dev-mini-stats div { padding: 14px 12px; }
  .dev-mini-stats b { font-size: 16px; }
  .dev-tabs { gap: 6px; }
  .dev-tabs button { padding: 8px 10px; font-size: 9px; }
  .online-dot { width: 100%; margin: 4px 0 0; }
  .dev-code { overflow-x: auto; padding-bottom: 8px; }
  .dev-code div { min-width: 410px; font-size: 12px; grid-template-columns: 30px 1fr; }
  .dev-stack { min-height: 230px; transform: scale(.86); }
  .dev-panel__footer { flex-direction: column; align-items: stretch; }
  .line-button { justify-content: center; }
  .growth-map__label { flex-direction: column; align-items:flex-start; gap: 8px; }
  .growth-map__label b { font-size: 16px; }
  .growth-orbit-ui { min-height: 430px; overflow: hidden; }
  .growth-orbit-ui__ring.ring4 { width: 390px; height: 390px; }
  .growth-orbit-ui__ring.ring3 { width: 310px; height: 310px; }
  .growth-orbit-ui__ring.ring2 { width: 230px; height: 230px; }
  .growth-orbit-ui__ring.ring1 { width: 150px; height: 150px; }
  .growth-orbit-ui__core { width: 118px; height: 118px; }
  .growth-orbit-ui__core span { font-size: 44px; }
  .growth-audience { right: 8px; bottom: 18px; top: auto; transform: none; padding: 14px 16px; font-size: 14px; line-height: 1.2; }
  .growth-orbit-ui:hover .growth-audience { transform: translateY(-4px); }
  .growth-card { grid-template-columns: 54px 1fr; gap: 14px; padding: 18px; border-radius: 22px; }
  .growth-card__icon { width: 48px; height: 48px; border-radius: 16px; font-size: 21px; }
  .growth-card small { font-size: 9px; margin-bottom: 8px; }
  .growth-card h3 { max-width: none; font-size: 18px; line-height: 1.12; }
  .growth-card p { font-size: 14px; }
  .growth-card > b { display: none; }
  .growth-channels { border-radius: 20px; }
  .growth-channels__title { font-size: 17px; padding: 18px; }
  .growth-channels__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .growth-channels__list span { min-height: 70px; padding: 14px 8px; font-size: 11px; }
}
@media (max-width: 390px) {
  .dev-console__head h2 { font-size: 27px; }
  .growth-orbit-ui { min-height: 390px; }
  .growth-orbit-ui__ring.ring4 { width: 340px; height: 340px; }
  .growth-orbit-ui__ring.ring3 { width: 270px; height: 270px; }
  .growth-orbit-ui__ring.ring2 { width: 205px; height: 205px; }
  .growth-orbit-ui__ring.ring1 { width: 135px; height: 135px; }
  .growth-orbit-ui__core { width: 102px; height: 102px; }
  .growth-card { grid-template-columns: 1fr; }
  .growth-card__icon { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-feature__icon::before,
  .dev-feature__icon::after,
  .growth-orbit-ui__core::after,
  .growth-audience,
  .dev-chart__grid { animation: none !important; }
}

/* v3.15 JS-driven motion variables */
.growth-orbit-ui__core { translate: var(--orbit-x, 0px) var(--orbit-y, 0px); }
.orbit-node { translate: var(--node-x, 0px) var(--node-y, 0px); }
.dev-code { transition: opacity .22s, filter .22s, transform .22s; }
.dev-panel--code.is-code-changing .dev-code { opacity: .25; filter: blur(4px); transform: translateY(5px); }
.dev-panel--code:hover .stack-layer { animation-play-state: paused; }

/* v3.16 — light portfolio palette and direct messenger contacts */
.portfolio-archive {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(202,168,92,.18), transparent 22%),
    radial-gradient(circle at 88% 72%, rgba(202,168,92,.11), transparent 24%),
    linear-gradient(180deg, #fbf7ee 0%, #f5efe3 56%, #f9f4eb 100%);
}
.portfolio-archive::before {
  opacity: .58;
  background-image:
    linear-gradient(rgba(133,103,45,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,103,45,.07) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 68%, transparent 100%);
}
.portfolio-archive::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.8), transparent 18%),
    radial-gradient(circle at 22% 88%, rgba(202,168,92,.08), transparent 20%);
}
.portfolio-archive > * { position: relative; z-index: 1; }
.portfolio-archive .section-code { color: var(--gold-dark); }
.portfolio-head > div:first-child > span { color: #b47f1f; }
.portfolio-head h2 {
  color: transparent;
  background: linear-gradient(100deg, #8a6323 0%, #c99d42 26%, #efd589 50%, #b57c19 74%, #d6b565 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: portfolioGoldShift 9s ease-in-out infinite;
  filter: drop-shadow(0 10px 28px rgba(133,103,45,.08));
}
.portfolio-head__note {
  padding: 26px 28px;
  border: 1px solid rgba(133,103,45,.16);
  border-left: 3px solid rgba(202,168,92,.62);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 20px 42px rgba(133,103,45,.08);
  backdrop-filter: blur(12px);
}
.portfolio-head__note b { color: #a87317; }
.portfolio-head__note p { color: #625b51; }
.portfolio-tile {
  color: var(--ink);
  border-color: rgba(133,103,45,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(249,245,236,.72));
  box-shadow: 0 18px 36px rgba(133,103,45,.07);
}
.portfolio-tile::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(202,168,92,.18), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(202,168,92,.08));
}
.portfolio-tile::after {
  content: "";
  position: absolute;
  left: -35%;
  top: -30%;
  width: 42%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: rotate(18deg) translateX(-180%);
  transition: transform .85s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.portfolio-tile:hover {
  border-color: rgba(202,168,92,.52);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,240,226,.9));
  box-shadow: 0 30px 58px rgba(133,103,45,.14);
}
.portfolio-tile:hover::after { transform: rotate(18deg) translateX(430%); }
.portfolio-tile__num,
.portfolio-tile__arrow,
.portfolio-tile__meta small { color: #ad7719; }
.portfolio-tile__media {
  border-color: rgba(133,103,45,.18);
  background: #f1eadc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
}
.portfolio-tile__meta strong { color: #18140e; }
.portfolio-tile__meta p { color: #6a6258; }
.portfolio-tile:hover .portfolio-tile__meta p { color: #403a32; }

.messenger-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.messenger-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 14px 16px 14px 44px;
  border: 1px solid rgba(202,168,92,.22);
  background: rgba(255,255,255,.025);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.messenger-link::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.025);
}
.messenger-link--whatsapp::before { background: #58b875; }
.messenger-link--viber::before { background: #9a78c8; }
.messenger-link b { color: var(--gold); font-size: 15px; }
.messenger-link:hover {
  transform: translateY(-3px);
  border-color: rgba(202,168,92,.48);
  background: rgba(202,168,92,.07);
}

@keyframes portfolioGoldShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 680px) {
  .portfolio-head__note { padding: 22px 20px; }
  .messenger-links { grid-template-columns: 1fr; }
}


/* v3.17 richer principles block */
.principles-grid {
  gap: 0;
}
.principles-grid .principle-card {
  position: relative;
  min-height: 368px;
  padding: 34px 34px 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  backdrop-filter: blur(3px);
  border: 1px solid rgba(18,18,15,.26);
  overflow: hidden;
  isolation: isolate;
}
.principles-grid .principle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--px,82%) var(--py,20%), rgba(255,255,255,.2), transparent 20%),
    linear-gradient(140deg, rgba(18,18,15,.06), rgba(18,18,15,0) 42%);
  opacity: .72;
  transition: opacity .5s var(--ease), transform .65s var(--ease-spring);
}
.principles-grid .principle-card::after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -52px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(18,18,15,.16);
  box-shadow: inset 0 0 0 18px rgba(255,255,255,.05);
  opacity: .9;
  transition: transform .7s var(--ease-spring), opacity .45s var(--ease);
}
.principles-grid .principle-card > * {
  position: relative;
  z-index: 1;
}
.principle-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.principle-card__top span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  color: rgba(18,18,15,.78);
}
.principle-card__top small {
  color: rgba(18,18,15,.45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.principle-card__icon {
  width: 76px;
  height: 76px;
  margin-top: 44px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font: 600 28px/1 "Unbounded", sans-serif;
  color: rgba(18,18,15,.78);
  border: 1px solid rgba(18,18,15,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 14px 28px rgba(18,18,15,.08);
  transition: transform .65s var(--ease-spring), box-shadow .65s var(--ease), border-color .45s var(--ease);
}
.principles-grid .principle-card h3 {
  margin: 28px 0 16px;
  max-width: 12ch;
  font: 600 clamp(28px, 2.8vw, 52px)/.98 "Unbounded", sans-serif;
  letter-spacing: -.06em;
  transition: transform .55s var(--ease-spring), color .45s var(--ease);
}
.principles-grid .principle-card p {
  max-width: 42ch;
  color: rgba(18,18,15,.7);
  line-height: 1.68;
  transition: transform .55s var(--ease-spring), color .45s var(--ease);
}
.principle-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.principle-card__meta b {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,15,.14);
  background: rgba(255,255,255,.18);
  color: rgba(18,18,15,.66);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .45s var(--ease-spring), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.principle-card__arrow {
  position: absolute;
  right: 26px;
  top: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18,18,15,.18);
  background: rgba(255,255,255,.12);
  color: rgba(18,18,15,.78);
  font: 600 20px/1 "Unbounded", sans-serif;
  box-shadow: 0 10px 24px rgba(18,18,15,.08);
  transition: transform .65s var(--ease-spring), background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.principles-grid .principle-card:hover {
  transform: translateY(-12px);
  border-color: rgba(18,18,15,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    radial-gradient(circle at 10% 14%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow: 0 28px 54px rgba(18,18,15,.12);
}
.principles-grid .principle-card:hover::before {
  opacity: 1;
  transform: scale(1.03);
}
.principles-grid .principle-card:hover::after {
  transform: scale(1.08) translate(-6px, -6px);
  opacity: 1;
}
.principles-grid .principle-card:hover .principle-card__icon {
  transform: translateY(-4px) rotate(-6deg) scale(1.04);
  border-color: rgba(18,18,15,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 18px 34px rgba(18,18,15,.12);
}
.principles-grid .principle-card:hover h3 {
  transform: translateY(-4px);
}
.principles-grid .principle-card:hover p {
  transform: translateY(-2px);
  color: rgba(18,18,15,.82);
}
.principles-grid .principle-card:hover .principle-card__meta b {
  transform: translateY(-3px);
  background: rgba(255,255,255,.32);
  border-color: rgba(18,18,15,.18);
  color: rgba(18,18,15,.8);
}
.principles-grid .principle-card:hover .principle-card__arrow {
  transform: translateY(-4px) scale(1.06);
  background: rgba(255,255,255,.22);
  border-color: rgba(18,18,15,.3);
  box-shadow: 0 16px 32px rgba(18,18,15,.12);
}
.principle-card--team .principle-card__icon,
.principle-card--support .principle-card__icon {
  border-radius: 50%;
}
.principle-card--custom h3,
.principle-card--support h3 {
  max-width: 11ch;
}
@media (max-width: 920px) {
  .principles-grid .principle-card {
    min-height: auto;
    padding: 26px 24px 28px;
  }
  .principle-card__icon {
    width: 64px;
    height: 64px;
    margin-top: 30px;
    font-size: 24px;
  }
  .principles-grid .principle-card h3 {
    margin-top: 22px;
    max-width: none;
    font-size: clamp(28px, 8vw, 42px);
  }
  .principle-card__arrow {
    width: 46px;
    height: 46px;
    right: 18px;
    top: 20px;
    font-size: 18px;
  }
}
@media (max-width: 640px) {
  .principles-grid .principle-card::after {
    width: 132px;
    height: 132px;
    right: -42px;
    bottom: -42px;
  }
  .principle-card__top {
    gap: 8px;
  }
  .principle-card__top small {
    font-size: 10px;
    letter-spacing: .14em;
  }
  .principle-card__meta {
    gap: 8px;
  }
  .principle-card__meta b {
    min-height: 30px;
    padding: 0 11px;
    font-size: 10px;
  }
}

/* v3.18 — final responsive pass, smaller headings and rendering optimizations */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
main,
section,
footer,
.header,
.mobile-menu {
  min-width: 0;
}
section > *,
main > *,
.footer > *,
[class*="grid"] > *,
[class*="layout"] > * {
  min-width: 0;
}
img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Slightly smaller typography across all major headings */
.hero h1,
.hero h2 {
  font-size: clamp(44px, 4.7vw, 94px);
}
.statement-line {
  font-size: clamp(32px, 5.65vw, 100px);
}
.dev-console__head h2 {
  font-size: clamp(30px, 3.45vw, 56px);
}
.section-title h2,
.fusion-head h2,
.process-head h2,
.faq-head h2 {
  font-size: clamp(40px, 4.45vw, 82px);
}
.portfolio-head h2 {
  font-size: clamp(44px, 5.05vw, 92px);
}
.brief-form-wrap h2 {
  font-size: clamp(43px, 4.45vw, 80px);
}
.fusion-stage__content h3 {
  font-size: clamp(28px, 2.85vw, 50px);
}
.dev-feature h3 {
  font-size: clamp(18px, 1.35vw, 27px);
}
.growth-card h3 {
  font-size: clamp(19px, 1.5vw, 29px);
}
.process-item h3 {
  font-size: clamp(17px, 1.45vw, 25px);
}
.principles-grid .principle-card h3 {
  font-size: clamp(26px, 2.45vw, 46px);
}
.portfolio-tile__meta strong {
  font-size: clamp(21px, 2vw, 34px);
}
.faq summary b {
  font-size: clamp(16px, 1.45vw, 23px);
}

/* Keep long words and headings inside their containers */
h1,
h2,
h3,
.faq summary b,
.portfolio-tile__meta strong,
.footer-contacts a {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Defer rendering for heavy below-the-fold sections without changing quality */
.fusion,
.portfolio-archive,
.process,
.principles,
.brief,
.faq,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.portfolio-archive { contain-intrinsic-size: auto 2200px; }

/* Pause decorative motion outside the viewport */
.is-motion-paused *,
.is-motion-paused::before,
.is-motion-paused::after {
  animation-play-state: paused !important;
}

/* Intermediate desktop and tablet fixes */
@media (max-width: 1220px) {
  .section {
    padding-inline: clamp(22px, 3.4vw, 42px);
  }
  .statement-line,
  .statement-core,
  .portfolio-head,
  .portfolio-grid,
  .process-head,
  .process-list,
  .principles-grid,
  .faq-head,
  .faq-list,
  .footer-top,
  .footer-bottom {
    max-width: 100%;
  }
  .portfolio-head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 40px;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .principles-grid .principle-card h3 {
    max-width: 14ch;
  }
}

@media (max-width: 920px) {
  .header {
    width: 100%;
  }
  .hero-side {
    min-height: max(620px, 100svh);
  }
  .hero-content {
    left: 20px;
    right: 20px;
    max-width: calc(100% - 40px);
  }
  .hero h1,
  .hero h2 {
    font-size: clamp(40px, 9vw, 64px);
    line-height: .95;
  }
  .hero-content p {
    max-width: 46ch;
  }
  .section {
    padding: 96px 20px;
  }
  .section-code {
    left: 20px;
    top: 30px;
  }
  .statement {
    min-height: auto;
  }
  .statement-line {
    font-size: clamp(29px, 7.4vw, 48px);
    line-height: 1.08;
  }
  .statement-core {
    margin-top: 60px;
  }
  .dev-console,
  .growth-map {
    padding-block: 78px;
  }
  .dev-console__head h2 {
    max-width: 14ch;
    font-size: clamp(28px, 5.6vw, 46px);
  }
  .dev-panel__body,
  .dev-code-layout {
    min-width: 0;
  }
  .dev-code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dev-code div {
    width: max-content;
    min-width: min(410px, 100%);
  }
  .growth-orbit-ui {
    max-width: 100%;
  }
  .portfolio-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 26px;
  }
  .portfolio-head h2 {
    max-width: 10ch;
    font-size: clamp(38px, 8vw, 58px);
  }
  .portfolio-head__note {
    max-width: 620px;
  }
  .portfolio-tile__media {
    height: 250px;
  }
  .principles-grid {
    grid-template-columns: 1fr;
  }
  .principles-grid .principle-card h3 {
    max-width: none;
  }
  .brief-form-wrap h2 {
    font-size: clamp(38px, 8vw, 58px);
  }
  .faq-head h2,
  .process-head h2,
  .fusion-head h2,
  .section-title h2 {
    font-size: clamp(36px, 7.8vw, 56px);
  }
  .footer-contacts a {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .header {
    padding-inline: 16px;
  }
  .logo__name {
    font-size: 10px;
  }
  .hero-side {
    min-height: 650px;
  }
  .hero-content {
    left: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
  }
  .hero h1,
  .hero h2 {
    font-size: clamp(35px, 10.6vw, 48px);
    letter-spacing: -.055em;
  }
  .hero-content p {
    font-size: 13.5px;
    line-height: 1.68;
  }
  .hero-meta,
  .hero-badges,
  .hero-growth-strip {
    max-width: 100%;
  }
  .hero-badges {
    gap: 6px;
  }
  .hero-badges span {
    max-width: 100%;
    white-space: normal;
  }
  .hero-growth-strip {
    grid-template-columns: 1fr;
  }
  .hero-growth-strip strong {
    white-space: normal;
  }
  .section {
    padding: 82px 16px;
  }
  .section-code {
    left: 16px;
  }
  .statement-line {
    font-size: clamp(27px, 9.4vw, 41px);
    gap: .12em;
  }
  .statement-core {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dev-console .section-code,
  .growth-map .section-code,
  .dev-console__head,
  .dev-console__features,
  .dev-console__grid,
  .growth-map__top,
  .growth-map__layout,
  .growth-channels {
    padding-inline: 16px;
  }
  .dev-console__head h2 {
    max-width: 12ch;
    font-size: clamp(26px, 8.2vw, 37px);
  }
  .dev-console__head p {
    font-size: 14px;
  }
  .dev-feature {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    padding: 16px;
  }
  .dev-feature__icon {
    width: 48px;
    height: 48px;
  }
  .dev-feature h3 {
    font-size: 16px;
  }
  .dev-panel {
    padding: 16px;
  }
  .dev-panel__lead strong {
    font-size: clamp(38px, 13vw, 54px);
  }
  .dev-chart {
    min-height: 210px;
  }
  .dev-mini-stats {
    grid-template-columns: 1fr 1fr;
  }
  .dev-code div {
    min-width: 360px;
  }
  .growth-orbit-ui {
    width: 100%;
    min-height: 370px;
    overflow: hidden;
  }
  .growth-orbit-ui__ring.ring4 {
    width: min(340px, 92vw);
    height: min(340px, 92vw);
  }
  .growth-orbit-ui__ring.ring3 {
    width: min(270px, 74vw);
    height: min(270px, 74vw);
  }
  .growth-orbit-ui__ring.ring2 {
    width: min(205px, 57vw);
    height: min(205px, 57vw);
  }
  .growth-orbit-ui__ring.ring1 {
    width: min(135px, 38vw);
    height: min(135px, 38vw);
  }
  .growth-orbit-ui__core {
    width: 98px;
    height: 98px;
  }
  .growth-audience {
    max-width: 145px;
    right: 8px;
    bottom: 8px;
    padding: 12px 14px;
  }
  .growth-card {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 16px;
  }
  .growth-card h3 {
    font-size: 17px;
  }
  .growth-channels__list {
    grid-template-columns: 1fr 1fr;
  }
  .growth-channels__list span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .portfolio-head h2 {
    font-size: clamp(34px, 9.5vw, 46px);
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 54px;
  }
  .portfolio-tile {
    padding: 15px;
  }
  .portfolio-tile__media {
    height: 220px;
  }
  .portfolio-tile__meta strong {
    font-size: clamp(22px, 7vw, 30px);
  }
  .fusion-stage__content h3 {
    font-size: clamp(26px, 8vw, 38px);
  }
  .process-item {
    min-height: 210px;
    padding: 22px;
  }
  .process-item h3 {
    margin-top: 70px;
    font-size: 19px;
  }
  .principles-grid .principle-card {
    padding: 23px 20px 26px;
  }
  .principles-grid .principle-card h3 {
    font-size: clamp(25px, 8vw, 36px);
  }
  .principle-card__arrow {
    width: 42px;
    height: 42px;
  }
  .brief-art {
    min-height: 470px;
  }
  .brief-form-wrap {
    padding: 68px 18px;
  }
  .brief-form-wrap h2 {
    margin-bottom: 38px;
    font-size: clamp(34px, 10vw, 48px);
  }
  .choices {
    grid-template-columns: 1fr;
  }
  .messenger-links {
    grid-template-columns: 1fr;
  }
  .faq summary {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    gap: 10px;
    min-height: 82px;
  }
  .faq summary b {
    font-size: 16px;
    line-height: 1.35;
  }
  .faq details p {
    margin: 0 0 28px 44px;
    font-size: 14px;
  }
  .footer {
    padding-inline: 16px;
  }
  .footer-contacts a {
    font-size: clamp(16px, 5.5vw, 22px);
  }
  .footer-contacts a:nth-last-child(-n+3) {
    font-size: 10px;
    line-height: 1.55;
  }
  .footer-bottom {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .hero h1,
  .hero h2 {
    font-size: clamp(33px, 10vw, 41px);
  }
  .hero-side {
    min-height: 620px;
  }
  .statement-line {
    font-size: clamp(25px, 9vw, 34px);
  }
  .dev-console__head h2 {
    font-size: 25px;
  }
  .dev-mini-stats {
    grid-template-columns: 1fr;
  }
  .dev-code div {
    min-width: 330px;
  }
  .growth-orbit-ui {
    min-height: 340px;
  }
  .growth-audience {
    max-width: 128px;
    font-size: 12px;
  }
  .portfolio-tile__media {
    height: 195px;
  }
  .principle-card__top small {
    max-width: 110px;
    text-align: right;
  }
  .toast {
    left: 12px;
    right: 12px;
    width: auto;
    text-align: center;
    transform: translateY(130px);
  }
  .toast.visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.visible {
    filter: none;
  }
}


/* v3.19 mobile hero first screen fix */
@media (max-width: 920px) {
  .hero-side {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: auto;
  }
  .hero-side--dev {
    padding-top: 132px;
  }
  .hero-side--growth {
    padding-top: 92px;
  }
  .hero-content--dev {
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .hero-side--dev {
    padding-top: 136px;
    padding-bottom: 56px;
  }
  .hero-side--growth {
    padding-top: 72px;
    padding-bottom: 56px;
  }
  .hero-content--dev .hero-meta {
    margin-top: 0;
  }
  .hero h1, .hero h2 {
    font-size: clamp(36px, 11.6vw, 54px);
    line-height: .96;
  }
}
@media (max-width: 420px) {
  .hero-side--dev {
    padding-top: 142px;
    padding-inline: 18px;
  }
  .hero-side--growth {
    padding-top: 68px;
    padding-inline: 18px;
  }
  .hero-meta {
    gap: 12px;
    margin-bottom: 22px;
  }
  .hero h1, .hero h2 {
    font-size: clamp(34px, 10.9vw, 50px);
  }
}


/* v3.20 thorough mobile hero repair */
@media (max-width: 920px) {
  .hero { overflow: hidden; }
  .hero-side,
  .hero-side--dev,
  .hero-side--growth {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .hero-side--dev {
    padding: 132px 24px 52px !important;
  }
  .hero-side--growth {
    padding: 72px 24px 46px !important;
  }
  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-title-line {
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .hero-title-text,
  .motion-ready .hero-title-text,
  .motion-ready .hero-meta,
  .motion-ready .hero-content > p,
  .motion-ready .hero-link,
  .motion-ready .hero-badges,
  .motion-ready .hero-growth-strip,
  .motion-ready.intro-complete .hero-title-text,
  .motion-ready.intro-complete .hero-meta,
  .motion-ready.intro-complete .hero-content > p,
  .motion-ready.intro-complete .hero-link,
  .motion-ready.intro-complete .hero-badges,
  .motion-ready.intro-complete .hero-growth-strip {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero h1,
  .hero h2 {
    font-size: clamp(38px, 8.8vw, 62px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
  }
  .hero-content p {
    margin: 22px 0 24px !important;
  }
  .hero-growth-strip {
    width: 100% !important;
    max-width: 520px !important;
  }
  .paper-lines::before {
    right: 4%;
    top: 6%;
    width: 180px;
    height: 120px;
    opacity: .42;
  }
  .paper-lines::after {
    left: 50%;
    bottom: 12px;
    width: min(78vw, 360px);
    height: min(40vw, 170px);
    transform: translateX(-50%);
    opacity: .42;
  }
}

@media (max-width: 640px) {
  .hero-side--dev {
    padding: calc(92px + env(safe-area-inset-top, 0px)) 20px 42px !important;
  }
  .hero-side--growth {
    padding: 40px 20px 34px !important;
  }
  .hero .hero-meta {
    margin-bottom: 18px !important;
    gap: 10px !important;
  }
  .hero .hero-meta span {
    width: 28px;
    height: 28px;
  }
  .hero h1,
  .hero h2 {
    font-size: clamp(32px, 10.2vw, 48px) !important;
    line-height: .98 !important;
  }
  .hero-content p {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }
  .hero-link {
    min-height: 56px;
  }
  .hero-badges {
    margin-top: 18px !important;
    gap: 6px !important;
  }
  .hero-badges span {
    font-size: 7px !important;
    padding: 8px 6px !important;
  }
  .hero-growth-strip article {
    padding: 14px 16px !important;
  }
  .hero-growth-strip strong {
    margin-top: 8px !important;
    font-size: clamp(18px, 6.3vw, 24px) !important;
    line-height: 1.02 !important;
  }
  .hero-growth-strip span {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .paper-lines {
    opacity: .56 !important;
  }
  .paper-lines::before {
    display: none !important;
  }
  .paper-lines::after {
    bottom: 8px !important;
    width: 84vw !important;
    height: 34vw !important;
    max-height: 150px;
    opacity: .28 !important;
  }
  .hero-grid::before,
  .hero-grid::after,
  .hero-scanner,
  .hero-transition-line {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .hero-side--dev {
    padding: calc(96px + env(safe-area-inset-top, 0px)) 16px 38px !important;
  }
  .hero-side--growth {
    padding: 34px 16px 28px !important;
  }
  .hero h1,
  .hero h2 {
    font-size: clamp(30px, 9.8vw, 42px) !important;
  }
  .hero-link {
    padding: 14px 15px !important;
  }
  .hero-badges {
    grid-template-columns: 1fr !important;
  }
  .hero-badges span:last-child {
    grid-column: auto !important;
  }
}


/* v3.22 mobile logo + marketing animation refinement */
.hero-growth-strip em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--gold-dark);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-growth-strip em::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
@media (max-width: 640px) {
  .logo__sign {
    display: none !important;
  }
  .logo {
    gap: 0 !important;
  }
  .hero-growth-strip {
    gap: 14px !important;
  }
  .hero-growth-strip article {
    position: relative;
    overflow: hidden;
    min-height: 168px;
    padding: 18px 18px 20px !important;
    border: 1px solid rgba(202,168,92,.22);
    background:
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.62)),
      radial-gradient(circle at 100% 0%, rgba(202,168,92,.14), transparent 34%);
    box-shadow: 0 16px 34px rgba(133,103,45,.08);
    animation: marketingCardFloat 5.8s ease-in-out infinite;
    transition: transform .5s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
  }
  .hero-growth-strip article:nth-child(2) {
    animation-delay: .55s;
  }
  .hero-growth-strip article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.72) 42%, transparent 62%);
    transform: translateX(-130%);
    animation: marketingCardSweep 4.8s ease-in-out infinite;
    pointer-events: none;
  }
  .hero-growth-strip article::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -26px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(202,168,92,.16);
    box-shadow: inset 0 0 0 10px rgba(202,168,92,.05);
    opacity: .9;
  }
  .hero-growth-strip article:active {
    transform: scale(.985);
  }
  .hero-growth-strip small {
    font-size: 8px;
    letter-spacing: .18em;
  }
  .hero-growth-strip strong {
    position: relative;
    z-index: 1;
    margin: 10px 0 8px;
    font-size: clamp(18px, 7.1vw, 25px) !important;
    white-space: normal !important;
  }
  .hero-growth-strip span {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: rgba(67,61,52,.84);
  }
  .hero-growth-strip em {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    font-size: 9px;
    letter-spacing: .14em;
  }
}
@keyframes marketingCardFloat {
  0%, 100% { transform: translateY(0); box-shadow: 0 16px 34px rgba(133,103,45,.08); }
  50% { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(133,103,45,.13); }
}
@keyframes marketingCardSweep {
  0%, 18% { transform: translateX(-135%); opacity: 0; }
  26% { opacity: .75; }
  42% { transform: translateX(135%); opacity: .2; }
  100% { transform: translateX(135%); opacity: 0; }
}


/* v3.23 definitive mobile hero + logo fix */
.logo__sign { display: none !important; }
.logo { gap: 8px !important; }
.logo__name { overflow: visible !important; text-overflow: clip !important; }

@media (max-width: 920px) {
  .hero {
    --hero-up-shift: 0px !important;
    --hero-dev-shift: 0px !important;
    --hero-growth-shift: 0px !important;
    --hero-content-opacity: 1 !important;
    --hero-side-scale: 1 !important;
    --hero-side-opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }
  .hero-side,
  .hero-side--dev,
  .hero-side--growth {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-content,
  .hero-content--dev,
  .hero-content--growth {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero-side--dev {
    padding: calc(94px + env(safe-area-inset-top, 0px)) 24px 42px !important;
  }
  .hero-side--growth {
    padding: 34px 24px 34px !important;
  }
  .hero-title-line {
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-title-text,
  .motion-ready .hero-title-text,
  .motion-ready.intro-complete .hero-title-text {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .motion-ready .hero-meta,
  .motion-ready .hero-content > p,
  .motion-ready .hero-link,
  .motion-ready .hero-badges,
  .motion-ready .hero-growth-strip,
  .motion-ready.intro-complete .hero-meta,
  .motion-ready.intro-complete .hero-content > p,
  .motion-ready.intro-complete .hero-link,
  .motion-ready.intro-complete .hero-badges,
  .motion-ready.intro-complete .hero-growth-strip {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .hero h1,
  .hero h2 {
    max-width: 7.1ch !important;
    font-size: clamp(38px, 9vw, 58px) !important;
    line-height: .95 !important;
    letter-spacing: -.055em !important;
  }
  .hero-content p,
  .hero-content--growth p {
    max-width: none !important;
    text-wrap: initial !important;
  }
  .dev-machine,
  .growth-orbit,
  .hero-seam,
  .seam-control,
  .hero-scanner,
  .hero-transition-line,
  .hero-bottom {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .header {
    height: 68px !important;
    padding-inline: 16px !important;
  }
  .logo {
    gap: 7px !important;
  }
  .logo__name {
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }
  .hero-side--dev {
    padding: calc(88px + env(safe-area-inset-top, 0px)) 16px 34px !important;
  }
  .hero-side--growth {
    padding: 26px 16px 28px !important;
  }
  .hero .hero-meta {
    margin-bottom: 16px !important;
  }
  .hero h1,
  .hero h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 10vw, 42px) !important;
    line-height: .98 !important;
  }
  .hero-content p {
    margin: 18px 0 20px !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
  }
  .hero-link {
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero-badges {
    width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        grid-auto-flow: column;
  }
  .hero-badges span,
  .hero-badges span:last-child {
    grid-column: auto !important;
  }
  .hero-growth-strip {
    width: 100% !important;
    max-width: none !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 390px) {
  .hero-side--dev {
    padding-top: calc(84px + env(safe-area-inset-top, 0px)) !important;
  }
  .hero h1,
  .hero h2 {
    font-size: clamp(28px, 9.4vw, 38px) !important;
  }
}

/* legacy mobile inversion lens removed in v3.26 */
.mobile-invert-lens {
  --lens-x: 50vw;
  --lens-y: 34vh;
  position: fixed;
  z-index: 96;
  left: var(--lens-x);
  top: var(--lens-y);
  width: 98px;
  height: 98px;
  display: none;
  place-items: center;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transform-origin: center;
  border: 1px solid rgba(202,168,92,.82);
  background: rgba(255,255,255,.025);
  -webkit-backdrop-filter: invert(1) contrast(1.06) saturate(.92);
  backdrop-filter: invert(1) contrast(1.06) saturate(.92);
  box-shadow:
    0 0 0 10px rgba(202,168,92,.045),
    0 0 34px rgba(202,168,92,.28),
    inset 0 0 22px rgba(255,255,255,.08);
  transition:
    width .58s cubic-bezier(.16,1,.3,1),
    height .58s cubic-bezier(.16,1,.3,1),
    border-radius .58s cubic-bezier(.16,1,.3,1),
    opacity .35s ease,
    transform .48s cubic-bezier(.16,1,.3,1),
    background .45s ease,
    box-shadow .45s ease;
  will-change: left, top, width, height, transform, opacity;
}
.mobile-invert-lens::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: inherit;
  border: 1px solid rgba(202,168,92,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02);
  animation: mobileLensOrbit 5.2s linear infinite;
}
.mobile-invert-lens::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(202,168,92,.7), rgba(202,168,92,0));
  transform: translateX(-50%);
  opacity: .72;
  filter: drop-shadow(0 0 7px rgba(202,168,92,.35));
  transition: opacity .35s ease, height .45s ease;
}
.mobile-invert-lens.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.mobile-invert-lens.is-growth {
  border-color: rgba(173,126,36,.88);
  box-shadow:
    0 0 0 10px rgba(202,168,92,.05),
    0 0 38px rgba(180,132,39,.26),
    inset 0 0 22px rgba(255,255,255,.12);
}
.mobile-invert-lens.is-transition {
  width: min(84vw, 340px);
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold) 16%, var(--gold-light) 50%, var(--gold) 84%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 24px rgba(202,168,92,.62), 0 0 0 1px rgba(202,168,92,.12);
}
.mobile-invert-lens.is-transition::before {
  inset: -9px 0;
  border-radius: 999px;
  border-color: rgba(202,168,92,.12);
  animation: none;
}
.mobile-invert-lens.is-transition::after {
  height: 0;
  opacity: 0;
}
.mobile-invert-lens.is-transition .mobile-invert-lens__label,
.mobile-invert-lens.is-transition .mobile-invert-lens__cross,
.mobile-invert-lens.is-transition .mobile-invert-lens__trail {
  opacity: 0;
}
.mobile-invert-lens.is-pulse {
  animation: mobileLensPulse .65s cubic-bezier(.16,1,.3,1);
}
.mobile-invert-lens__label {
  position: relative;
  z-index: 2;
  color: var(--gold-light);
  font: 700 8px/1 "Unbounded", sans-serif;
  letter-spacing: .2em;
  text-indent: .2em;
  text-shadow: 0 0 12px rgba(202,168,92,.36);
  transition: opacity .28s ease, color .35s ease;
}
.mobile-invert-lens.is-growth .mobile-invert-lens__label {
  color: #2d2519;
  text-shadow: none;
}
.mobile-invert-lens__cross {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(202,168,92,.36);
  transform: translate(-50%, -50%);
  opacity: .78;
  transition: opacity .28s ease;
}
.mobile-invert-lens__cross::before,
.mobile-invert-lens__cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(202,168,92,.62);
  transform: translate(-50%, -50%);
}
.mobile-invert-lens__cross::before { width: 42px; height: 1px; }
.mobile-invert-lens__cross::after { width: 1px; height: 42px; }
.mobile-invert-lens__trail {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(202,168,92,.72), transparent);
  transform: translateX(-50%);
  opacity: .72;
  transition: opacity .28s ease;
}
.mobile-invert-lens.lens-fallback {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fff;
  mix-blend-mode: difference;
}
body.menu-open .mobile-invert-lens,
body.portfolio-opened .mobile-invert-lens {
  opacity: 0 !important;
}
@keyframes mobileLensOrbit {
  to { transform: rotate(1turn); }
}
@keyframes mobileLensPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.16); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 920px) {
  .mobile-invert-lens { display: grid; }
}
@media (max-width: 640px) {
  .mobile-invert-lens {
    width: 88px;
    height: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-invert-lens { display: none !important; }
}
@media (min-width: 921px), print {
  .mobile-invert-lens { display: none !important; }
}


/* v3.26 mobile hero orbit system */
.hero-mobile-orb { display:none; }

@media (max-width: 920px) {
  .hero {
    background: none;
  }
  .hero-side {
    isolation: isolate;
    min-height: 100svh;
    padding-top: calc(98px + env(safe-area-inset-top, 0px));
    padding-bottom: 42px;
    overflow: hidden;
  }
  .hero-side--dev {
    background:
      radial-gradient(circle at 85% 18%, rgba(202,168,92,.14), transparent 24%),
      radial-gradient(circle at 12% 8%, rgba(124,62,156,.12), transparent 28%),
      linear-gradient(180deg, #16111f 0%, #120d19 45%, #0c0911 100%);
  }
  .hero-side--growth {
    background:
      radial-gradient(circle at 78% 24%, rgba(202,168,92,.18), transparent 26%),
      radial-gradient(circle at 12% 92%, rgba(255,255,255,.45), transparent 24%),
      linear-gradient(180deg, #faf6ee 0%, #f3ebde 53%, #f7f1e7 100%);
  }
  .hero-content {
    max-width: calc(100% - 88px);
    margin-right: auto;
    z-index: 4;
  }
  .hero-content--growth {
    max-width: calc(100% - 92px);
  }
  .hero-badges,
  .hero-growth-strip {
    position: relative;
    z-index: 4;
  }
  .hero-mobile-orb {
    --orb-shift: 0px;
    --orb-drift: 0px;
    --orb-scale: 1;
    --orb-rotate: 0deg;
    display: block;
    position: absolute;
    right: clamp(10px, 3vw, 22px);
    top: 50%;
    width: clamp(78px, 22vw, 96px);
    aspect-ratio: 1;
    z-index: 3;
    pointer-events: none;
    opacity: .96;
    transform: translate3d(var(--orb-drift), calc(-50% + var(--orb-shift)), 0) scale(var(--orb-scale));
    transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  .hero-mobile-orb__rail {
    position: absolute;
    left: 50%;
    top: -46vh;
    width: 1px;
    height: 92vh;
    background: linear-gradient(180deg, rgba(202,168,92,0), rgba(202,168,92,.5) 22%, rgba(202,168,92,.2) 52%, rgba(202,168,92,0));
    transform: translateX(-50%);
    opacity: .64;
  }
  .hero-mobile-orb--grow .hero-mobile-orb__rail {
    background: linear-gradient(180deg, rgba(202,168,92,0), rgba(202,168,92,.58) 18%, rgba(202,168,92,.2) 55%, rgba(202,168,92,0));
  }
  .hero-mobile-orb__halo,
  .hero-mobile-orb__ring,
  .hero-mobile-orb__core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }
  .hero-mobile-orb__halo {
    inset: -14px;
    background: radial-gradient(circle, rgba(202,168,92,.16), rgba(202,168,92,0) 70%);
    filter: blur(2px);
    animation: mobile-orb-halo 6.6s ease-in-out infinite;
  }
  .hero-mobile-orb__ring {
    border: 1px solid rgba(202,168,92,.38);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .hero-mobile-orb__ring--outer {
    inset: -8px;
    opacity: .72;
    animation: mobile-orb-rotate 10s linear infinite;
  }
  .hero-mobile-orb__ring--mid {
    inset: 8px;
    opacity: .48;
    animation: mobile-orb-rotate-reverse 7.8s linear infinite;
  }
  .hero-mobile-orb__core {
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(202,168,92,.88);
    box-shadow:
      0 10px 28px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 0 24px rgba(202,168,92,.12);
  }
  .hero-mobile-orb__core small {
    display: block;
    margin-bottom: 5px;
    color: rgba(202,168,92,.82);
    font: 700 7px/1 "Manrope", sans-serif;
    letter-spacing: .22em;
    text-indent: .22em;
  }
  .hero-mobile-orb__core strong {
    display: block;
    font: 700 10px/1 "Unbounded", sans-serif;
    letter-spacing: .22em;
    text-indent: .22em;
  }
  .hero-mobile-orb--build .hero-mobile-orb__core {
    background: linear-gradient(180deg, rgba(16,11,22,.96), rgba(8,6,13,.98));
    color: var(--gold-light);
  }
  .hero-mobile-orb--grow .hero-mobile-orb__core {
    background: linear-gradient(180deg, rgba(255,250,242,.96), rgba(247,237,221,.98));
    color: #342918;
    box-shadow:
      0 10px 28px rgba(133,103,45,.14),
      inset 0 1px 0 rgba(255,255,255,.8),
      inset 0 0 24px rgba(202,168,92,.12);
  }
  .hero-mobile-orb__spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,210,.95), rgba(202,168,92,.82));
    box-shadow: 0 0 0 7px rgba(202,168,92,.08), 0 0 18px rgba(202,168,92,.32);
    animation: mobile-orb-spark 5.6s ease-in-out infinite;
  }
  .hero-mobile-orb__spark.s1 { right: 3px; top: 9px; animation-delay: 0s; }
  .hero-mobile-orb__spark.s2 { left: 5px; bottom: 18px; width: 6px; height: 6px; animation-delay: 1.4s; }
  .hero-mobile-orb__spark.s3 { right: 16px; bottom: -6px; width: 5px; height: 5px; animation-delay: .8s; }
  .hero-mobile-orb--grow .hero-mobile-orb__spark.s1 { top: 16px; right: -1px; }
  .hero-mobile-orb--grow .hero-mobile-orb__spark.s2 { left: 0px; bottom: 14px; }
  .hero-mobile-orb--grow .hero-mobile-orb__spark.s3 { right: 24px; bottom: -5px; }
  .hero-side.is-current .hero-mobile-orb {
    --orb-scale: 1.03;
  }
}

@media (max-width: 640px) {
  .hero-side {
    min-height: 100svh;
    padding-top: calc(92px + env(safe-area-inset-top, 0px));
    padding-bottom: 34px;
  }
  .hero-content {
    max-width: calc(100% - 92px);
  }
  .hero-content--growth {
    max-width: calc(100% - 96px);
  }
  .hero-mobile-orb {
    right: 8px;
    width: clamp(74px, 24vw, 88px);
  }
  .hero-mobile-orb__rail {
    top: -42vh;
    height: 84vh;
    opacity: .56;
  }
}

@media (max-width: 390px) {
  .hero-content,
  .hero-content--growth {
    max-width: calc(100% - 86px);
  }
  .hero-mobile-orb {
    right: 6px;
    width: 70px;
  }
  .hero-mobile-orb__ring--outer { inset: -6px; }
  .hero-mobile-orb__core small { margin-bottom: 4px; font-size: 6px; }
  .hero-mobile-orb__core strong { font-size: 9px; }
}

@keyframes mobile-orb-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes mobile-orb-rotate-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes mobile-orb-halo {
  50% { transform: scale(1.08); opacity: .9; }
}
@keyframes mobile-orb-spark {
  0%,100% { transform: translate3d(0,0,0) scale(.9); opacity: .5; }
  50% { transform: translate3d(0,-7px,0) scale(1.14); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mobile-orb,
  .hero-mobile-orb__halo,
  .hero-mobile-orb__ring,
  .hero-mobile-orb__spark {
    animation: none !important;
  }
}
@media (min-width: 921px), print {
  .hero-mobile-orb { display:none !important; }
}

/* fully disable old mobile inversion lens in v3.26 */
.mobile-invert-lens { display:none !important; }


/* v3.27 mobile orbit refinement */
@media (max-width: 920px) {
  .hero-side {
    min-height: 100svh;
    padding-right: 18px;
  }
  .hero-content,
  .hero-content--growth {
    max-width: calc(100% - 112px);
  }
  .hero-mobile-orb {
    width: 78px;
    right: 16px;
    top: 34%;
    z-index: 2;
    opacity: .95;
    transform: translate3d(var(--orb-drift), calc(-50% + var(--orb-shift)), 0) scale(var(--orb-scale)) rotate(var(--orb-rotate));
  }
  .hero-mobile-orb--grow {
    top: 72%;
  }
  .hero-mobile-orb__rail {
    display: none !important;
  }
  .hero-mobile-orb__halo {
    inset: -11px;
    background: radial-gradient(circle, rgba(202,168,92,.16), rgba(202,168,92,0) 68%);
    filter: blur(1px);
  }
  .hero-mobile-orb__ring {
    border-color: rgba(202,168,92,.42);
  }
  .hero-mobile-orb__ring--outer {
    inset: -7px;
  }
  .hero-mobile-orb__ring--mid {
    inset: 7px;
  }
  .hero-mobile-orb__core {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
  .hero-mobile-orb__core small {
    margin-bottom: 4px;
    font-size: 6px;
  }
  .hero-mobile-orb__core strong {
    font-size: 10px;
  }
  .hero-side.is-current .hero-mobile-orb {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .hero-side {
    padding-right: 16px;
  }
  .hero-content,
  .hero-content--growth {
    max-width: calc(100% - 104px);
  }
  .hero-mobile-orb {
    width: 74px;
    right: 14px;
    top: 36%;
  }
  .hero-mobile-orb--grow {
    top: 74%;
  }
  .hero-mobile-orb__halo {
    inset: -9px;
  }
}

@media (max-width: 390px) {
  .hero-content,
  .hero-content--growth {
    max-width: calc(100% - 96px);
  }
  .hero-mobile-orb {
    width: 68px;
    right: 12px;
  }
  .hero-mobile-orb__core strong {
    font-size: 9px;
  }
}


/* v3.28 align GROW orb like BUILD in mobile hero */
@media (max-width: 920px) {
  .hero-mobile-orb--grow {
    top: 34%;
    right: 16px;
  }
}

@media (max-width: 640px) {
  .hero-mobile-orb--grow {
    top: 36%;
    right: 14px;
  }
}

@media (max-width: 390px) {
  .hero-mobile-orb--grow {
    top: 36%;
    right: 12px;
  }
}


/* v3.29 move GROW orb up near headings */
@media (max-width: 920px) {
  .hero-mobile-orb--grow {
    top: 29%;
    right: 16px;
  }
}

@media (max-width: 640px) {
  .hero-mobile-orb--grow {
    top: 31%;
    right: 14px;
  }
}

@media (max-width: 390px) {
  .hero-mobile-orb--grow {
    top: 32%;
    right: 12px;
  }
}


/* v3.30 place GROW near headings like BUILD */
@media (max-width: 920px) {
  .hero-side--growth .hero-content {
    max-width: calc(100% - 124px);
  }
  .hero-mobile-orb--grow {
    top: 23%;
    right: 16px;
  }
}

@media (max-width: 640px) {
  .hero-side--growth .hero-content {
    max-width: calc(100% - 118px);
  }
  .hero-mobile-orb--grow {
    top: 24%;
    right: 14px;
  }
}

@media (max-width: 390px) {
  .hero-side--growth .hero-content {
    max-width: calc(100% - 110px);
  }
  .hero-mobile-orb--grow {
    top: 25%;
    right: 12px;
  }
}


/* v3.31 move GROW orb slightly further right to match BUILD */
@media (max-width: 920px) {
  .hero-mobile-orb--grow {
    right: 8px;
  }
}

@media (max-width: 640px) {
  .hero-mobile-orb--grow {
    right: 6px;
  }
}

@media (max-width: 390px) {
  .hero-mobile-orb--grow {
    right: 4px;
  }
}


/* v3.32 — corrected GROW horizontal anchor.
   GROW keeps its own flight drift, but its base right offset compensates
   the positive translateX so the visual position matches the approved screenshot. */
@media (max-width: 920px) {
  .hero-mobile-orb--grow {
    right: 46px;
  }
}

@media (max-width: 640px) {
  .hero-mobile-orb--grow {
    right: 42px;
  }
}

@media (max-width: 390px) {
  .hero-mobile-orb--grow {
    right: 38px;
  }
}