:root {
  --violet: #c9a2ff;
  --electric: #9075ff;
  --deep: #6f50d8;
  --ink: #21252b;
  --shade: #16181b;
  --surface: #292d35;
  --paper: #f4f1ea;
  --lavender: #c9a2ff;
  --white: #f7f5fb;
  --muted: #aaa3b5;
  --dark-muted: #67606e;
  --line: rgba(255,255,255,.14);
  --dark-line: rgba(13,9,18,.17);
  --radius: 30px;
  --container: min(1320px, calc(100vw - 128px));
  --header-h: 78px;
  --rx: 0deg;
  --ry: 0deg;
  --scroll-y: 0px;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: rgba(255,255,255,.92); background: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
main { position: relative; padding-top: 88px; }
body.menu-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { text-wrap: balance; }
::selection { color: white; background: var(--electric); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 16px; padding: 10px 16px; color: var(--ink); border-radius: 99px; background: white; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid #dfc4ff; outline-offset: 4px; }

.site-header { position: fixed; z-index: 100; top: 0; left: 50%; width: var(--container); height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 19px 0 0; color: rgba(255,255,255,.92); border: 0; background: transparent; transform: translateX(-50%); transition: transform .35s ease; }
.site-header.scrolled { transform: translateX(-50%); }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 0 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(33,37,43,.9); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark { position: relative; width: 30px; height: 30px; display: inline-block; flex: 0 0 30px; }
.brand-mark i, .brand-mark b, .brand-mark em { position: absolute; display: block; width: 10px; height: 28px; border-radius: 7px; background: linear-gradient(155deg, #cf7cff, #7c3aed); box-shadow: 0 0 16px rgba(168,85,247,.35); }
.brand-mark i { left: 1px; top: 1px; }
.brand-mark b { left: 14px; top: -3px; transform: rotate(45deg) scaleY(.72); }
.brand-mark em { left: 14px; top: 9px; transform: rotate(-45deg) scaleY(.72); background: linear-gradient(155deg, #7c3aed, #c56cff); }
.brand-name { font-family: Inter, Arial, sans-serif !important; font-size: 1.05rem; font-style: normal; font-weight: 800; font-variation-settings: normal; font-feature-settings: normal; line-height: 1; letter-spacing: -.045em; text-transform: none; }
.brand-name span { color: var(--violet); }
.nav-pill { min-height: 44px; display: flex; align-items: center; gap: 0; padding: 3px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(33,37,43,.9); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.nav-pill a { min-height: 36px; display: grid; place-items: center; padding: 0 13px; border-radius: 99px; color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 650; transition: color .2s ease, background .2s ease; }
.nav-pill a:hover, .nav-pill a:focus-visible, .nav-pill a.active { color: white; background: rgba(255,255,255,.09); }
.lang-switcher { position: relative; z-index: 5; justify-self: end; }
.lang-pill { min-width: 62px; min-height: 44px; display: flex; place-content: center; align-items: center; gap: 7px; padding: 0 13px; color: #17191c; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: linear-gradient(135deg,var(--lavender),var(--electric)); box-shadow: 0 10px 24px rgba(0,0,0,.08); font-size: .75rem; font-weight: 800; cursor: pointer; transform: translate(var(--mx,0), var(--my,0)); transition: transform .18s ease, filter .18s ease; }
.lang-pill:hover { filter: brightness(1.08); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 72px; display: grid; gap: 3px; padding: 6px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(20,21,27,.96); box-shadow: 0 18px 46px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(-7px) scale(.97); transform-origin: top right; transition: opacity .18s ease, visibility .18s ease, transform .18s ease; backdrop-filter: blur(18px); }
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button { min-height: 36px; padding: 0 12px; color: rgba(255,255,255,.72); border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.lang-menu button:hover,.lang-menu button.active { color: white; background: rgba(255,255,255,.1); }
.menu-toggle { display: none; }

.page-index { position: fixed; z-index: 99; top: 84px; left: 0; width: 100%; height: 4px; display: flex; gap: 2px; transform: none; pointer-events: none; }
.page-index button { flex: 1; min-width: 0; display: block; padding: 0; color: white; border: 0; background: transparent; opacity: .58; pointer-events: auto; cursor: pointer; transition: opacity .2s; }
.page-index button.active, .page-index button:hover { opacity: 1; }
.page-index i { height: 3px; display: block; overflow: hidden; background: rgba(255,255,255,.1); }
.page-index i span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--lavender)); box-shadow: 0 0 8px var(--violet); transform: scaleX(var(--fill,0)); transform-origin: left; }
.page-index b { display: none; }

.cursor-aura { position: fixed; z-index: 80; top: 0; left: 0; width: 400px; height: 400px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(144,117,255,.13) 0%, rgba(144,117,255,.055) 30%, rgba(144,117,255,.018) 49%, transparent 68%); pointer-events: none; opacity: .78; will-change: transform; }

.hero, .poster-head { position: relative; overflow: hidden; isolation: isolate; background: #16181b; }
.hero { width: 100%; min-height: calc(100svh - 130px); margin: 0; border: 0; border-radius: 0; background: radial-gradient(ellipse at 88% 29%,rgba(144,117,255,.38) 0,rgba(93,67,170,.2) 22%,transparent 48%),radial-gradient(ellipse at 72% 72%,rgba(94,63,164,.22),transparent 45%),linear-gradient(135deg,#171922,#1f2229 62%,#16181b); }
.poster-head { width: var(--container); min-height: calc(100svh - 106px); margin: 18px auto 0; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: radial-gradient(ellipse at 86% 28%,rgba(86,91,116,.24),transparent 44%),linear-gradient(135deg,#16181b,#1d2026); }
.hero::before, .poster-head::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 76% 38%,rgba(201,162,255,.05),transparent 34%); }
.hero::after, .poster-head::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(22,24,27,.58),transparent 57%),linear-gradient(0deg,rgba(22,24,27,.18),transparent 45%); }
#heroField { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.hero-inner, .poster-inner { position: relative; z-index: 2; min-height: inherit; display: grid; gap: 40px; align-items: center; }
.hero-inner { width: var(--container); grid-template-columns: 1fr; align-items: start; margin: 0 auto; padding: 128px 0 96px; }
.poster-inner { width: 100%; grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr); padding: 82px 46px 54px; }
.hero-copy { max-width: 780px; }
.hero .kicker { display: none; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 25px; color: #cfc8d8; font-size: .69rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.kicker::before { content: ""; width: 30px; height: 1px; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(3.25rem,4.6vw,5rem); font-weight: 600; line-height: 1.16; letter-spacing: -.045em; }
.poster-head h1 { margin: 0; max-width: 760px; font-size: clamp(4.2rem,7.5vw,6.2rem); font-weight: 650; line-height: .97; letter-spacing: -.065em; }
.hero h1 em, .poster-head h1 em, .display-title em { display: block; color: var(--lavender); font-style: normal; font-weight: inherit; text-shadow: 0 0 50px rgba(168,85,247,.22); }
.hero-copy > p:not(.kicker) { max-width: 460px; margin: 32px 0 0; color: rgba(255,255,255,.67); font-size: 1.0625rem; line-height: 1.8; }
.poster-copy > p:not(.kicker) { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 21px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; font-size: .9rem; font-weight: 750; transform: translate(var(--mx,0), var(--my,0)); transition: transform .2s ease, background .2s ease, color .2s ease; }
.button.primary { color: #16181b; border-color: transparent; background: linear-gradient(135deg,var(--lavender),var(--electric)); box-shadow: 0 13px 34px rgba(144,117,255,.17); }
.button.primary:hover { filter: brightness(1.08); }
.button.ghost:hover { background: rgba(255,255,255,.1); }
.button.dark { color: white; border-color: var(--ink); background: var(--ink); }
.button.dark:hover { background: var(--deep); }
.hero-foot { display: none; }
.hero .hero-object { display: none; }

.hero-object { position: relative; width: min(44vw,560px); aspect-ratio: 1; justify-self: end; transform: translate3d(var(--scene-x,0),var(--scene-y,0),0) perspective(900px) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg)); transition: transform .1s linear; }
.orbital { position: absolute; inset: 12%; border: 1px solid rgba(202,162,255,.36); border-radius: 50%; box-shadow: inset 0 0 42px rgba(124,58,237,.1), 0 0 55px rgba(124,58,237,.12); animation: orbit 16s linear infinite; }
.orbital.o2 { inset: 21%; border-color: rgba(255,255,255,.24); transform: rotateX(67deg); animation-duration: 11s; animation-direction: reverse; }
.orbital.o3 { inset: 4% 26%; border-color: rgba(168,85,247,.36); transform: rotateY(68deg); animation-duration: 21s; }
.orbital::before, .orbital::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 18px var(--violet); }
.orbital::before { top: 13%; left: 8%; }
.orbital::after { right: 8%; bottom: 13%; }
.core-orb { position: absolute; inset: 28%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 41% 59% 55% 45% / 44% 41% 59% 56%; background: radial-gradient(circle at 34% 27%, #d4a7ff, #7c3aed 36%, #260a49 74%); box-shadow: inset -22px -26px 40px rgba(0,0,0,.32), 0 0 70px rgba(124,58,237,.4); animation: morph 9s ease-in-out infinite; }
.core-orb::after { content: ""; width: 38%; height: 38%; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; box-shadow: inset 0 0 22px rgba(255,255,255,.16); }
.float-card { position: absolute; width: 38%; aspect-ratio: 1.5; display: grid; align-content: space-between; padding: 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: linear-gradient(145deg, rgba(52,46,62,.96), rgba(23,20,29,.94)); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.float-card span { font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; }
.float-card b { font-size: 1.2rem; letter-spacing: -.05em; }
.float-card.c1 { top: 8%; left: -2%; transform: rotate(-8deg); animation: float 6s ease-in-out infinite; }
.float-card.c2 { right: -4%; bottom: 9%; transform: rotate(8deg); animation: float 7s -2s ease-in-out infinite; }
@keyframes orbit { to { transform: rotateZ(360deg) rotateX(20deg); } }
@keyframes morph { 50% { border-radius: 63% 37% 32% 68% / 55% 64% 36% 45%; transform: rotate(20deg) scale(1.05); } }
@keyframes float { 50% { translate: 0 -14px; } }

.ticker { overflow: hidden; margin-top: 42px; color: rgba(255,255,255,.78); border-block: 0; background: var(--ink); }
.ticker-track { width: max-content; display: flex; align-items: center; gap: 24px; padding: 14px 0; font-size: clamp(.95rem,1.6vw,1.25rem); font-weight: 700; letter-spacing: -.035em; white-space: nowrap; animation: ticker 26s linear infinite; transform: skewX(calc(var(--scroll-velocity) * -.08deg)); }
.ticker i { color: var(--violet); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.paper { color: #17191c; background: var(--paper); }
.dark { color: white; background: var(--ink); }
.section { position: relative; padding: 120px max(64px,calc((100vw - 1152px)/2)); }
.section-head { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.55fr); gap: 55px; align-items: end; margin-bottom: 65px; }
.section-head .kicker { grid-column: 1/-1; margin-bottom: -12px; color: var(--dark-muted); }
.dark .section-head .kicker { color: #c6becd; }
.display-title { margin: 0; font-size: clamp(2.9rem,4.65vw,5.2rem); font-weight: 620; line-height: 1.02; letter-spacing: -.055em; }
.section-head > p { margin: 0 0 7px; color: var(--dark-muted); font-size: 1.02rem; }
.dark .section-head > p { color: var(--muted); }

.stack { display: grid; gap: 18px; }
.story-card { position: sticky; top: calc(110px + var(--stack,0) * 12px); min-height: min(72svh,720px); display: grid; grid-template-columns: .84fr 1.16fr; gap: 42px; overflow: hidden; padding: clamp(28px,4.5vw,66px); border: 1px solid var(--dark-line); border-radius: var(--radius); background: #e9e5df; box-shadow: 0 30px 70px rgba(25,15,35,.12); transform: translateY(var(--scroll-y)); }
.story-card:nth-child(2) { --stack: 1; color: white; border-color: rgba(255,255,255,.15); background: #15121a; }
.story-card:nth-child(3) { --stack: 2; color: #150e1c; background: var(--lavender); }
.story-copy { display: flex; flex-direction: column; }
.story-no { font-size: .7rem; letter-spacing: .15em; opacity: .6; }
.story-card h3 { max-width: 560px; margin: auto 0 22px; font-size: clamp(2.5rem,4.15vw,4.65rem); line-height: .98; letter-spacing: -.06em; }
.story-card p { max-width: 520px; margin: 0; opacity: .68; }
.text-link { width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding-bottom: 4px; border-bottom: 1px solid; font-weight: 750; }
.story-visual { position: relative; min-height: 420px; display: grid; place-items: center; perspective: 1000px; }
.browser-mock { width: min(96%,640px); overflow: hidden; padding: 11px; border: 1px solid rgba(255,255,255,.34); border-radius: 21px; background: #100c17; box-shadow: 0 55px 90px rgba(17,7,30,.3); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease; }
.browser-mock { position: relative; }
.browser-bar { display: flex; gap: 6px; padding: 4px 3px 12px; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.38); }
.mock-content { min-height: 330px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: .7fr 1fr; gap: 8px; }
.mock-content > * { display: block; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: linear-gradient(145deg, rgba(201,162,255,.22), rgba(255,255,255,.03)); }
.mock-content > :first-child { grid-column: 1/-1; background: radial-gradient(circle at 70% 30%, #7c3aed, #1b1128 48%, #0f0c14); }
.mock-content > :first-child { animation: mock-breathe 7s ease-in-out infinite; }
.mock-content > :nth-child(2) { animation: mock-rise 6s ease-in-out infinite; }
.mock-content > :nth-child(3) { animation: mock-rise 6s -2.4s ease-in-out infinite; }
.browser-sheen { position: absolute; z-index: 3; inset: -40% auto -40% -35%; width: 22%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); transform: skewX(-16deg); pointer-events: none; animation: sheen-pass 7.5s ease-in-out infinite; }
.brand-deck { position: relative; width: min(92%,620px); aspect-ratio: 1.3; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease; }
.brand-sheet { position: absolute; inset: 10%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: linear-gradient(135deg,#111019,#28113e); box-shadow: 0 35px 70px rgba(0,0,0,.28); }
.brand-sheet:nth-child(1) { transform: translate3d(-11%,-8%,-45px) rotate(-7deg); opacity: .55; }
.brand-sheet:nth-child(2) { transform: translate3d(10%,8%,-20px) rotate(8deg); background: #f0ece7; }
.brand-sheet:nth-child(3) { transform: scale(.98); }
.brand-sheet:nth-child(1) { animation: sheet-one 9s ease-in-out infinite; }
.brand-sheet:nth-child(2) { animation: sheet-two 10s ease-in-out infinite; }
.brand-sheet:nth-child(3) { animation: sheet-main 8s ease-in-out infinite; }
.deck-orbit { position: absolute; z-index: 4; inset: 3% 1%; border: 1px solid rgba(124,58,237,.28); border-radius: 50%; transform: rotateX(68deg); animation: orbit-flat 12s linear infinite; pointer-events: none; }
.deck-node { position: absolute; z-index: 5; width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 20px rgba(168,85,247,.72); animation: deck-node 7s ease-in-out infinite; }
.deck-node.dn1 { top: 11%; left: 12%; }
.deck-node.dn2 { right: 8%; bottom: 15%; animation-delay: -3.5s; }
.mini-logo { display: flex; align-items: center; gap: 14px; font-size: clamp(1.6rem,3vw,3rem); font-weight: 850; letter-spacing: -.06em; }
.mini-logo i { width: 42px; height: 42px; border-radius: 50% 20%; background: linear-gradient(135deg,var(--lavender),var(--electric)); box-shadow: 0 0 35px rgba(168,85,247,.5); transform: rotate(45deg); }
.ai-shell { position: relative; width: min(90%,560px); aspect-ratio: 1.15; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease; }
.ai-orb { position: absolute; z-index: 3; inset: 20%; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: radial-gradient(circle at 34% 28%,#e2c6ff 0,#a566ff 18%,#7137c1 42%,#170b25 76%); box-shadow: inset -25px -25px 45px rgba(0,0,0,.36),0 0 70px rgba(124,58,237,.37); animation: morph 8s ease-in-out infinite; }
.ai-orb::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.25); border-radius: 44% 56% 62% 38% / 51% 38% 62% 49%; animation: inner-orb 10s linear infinite; }
.ai-orb::after { content: ""; position: absolute; width: 70%; height: 24%; top: 20%; left: -18%; border-top: 1px solid rgba(255,255,255,.42); border-radius: 50%; transform: rotate(-28deg); animation: orb-scan 6s ease-in-out infinite; }
.ai-ring { position: absolute; z-index: 1; border: 1px solid rgba(201,162,255,.34); border-radius: 50%; pointer-events: none; }
.ai-ring.ar1 { inset: 10%; animation: ai-ring-one 15s linear infinite; }
.ai-ring.ar2 { inset: 15% 4%; transform: rotateX(68deg); animation: ai-ring-two 11s linear infinite reverse; }
.ai-ring.ar3 { inset: 5% 30%; transform: rotateY(68deg); animation: ai-ring-three 18s linear infinite; }
.ai-node { position: absolute; z-index: 4; width: 9px; height: 9px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 18px rgba(201,162,255,.8); animation: node-float 6s ease-in-out infinite; }
.ai-node.an1 { top: 12%; left: 22%; }
.ai-node.an2 { top: 41%; right: 2%; animation-delay: -2s; }
.ai-node.an3 { left: 31%; bottom: 4%; animation-delay: -4s; }
.chat-chip { position: absolute; z-index: 6; max-width: 230px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(15,11,21,.96); box-shadow: 0 20px 45px rgba(0,0,0,.2); font-size: .78rem; animation: chip-float 6s ease-in-out infinite; }
.chat-chip.one { top: 6%; right: 0; }
.chat-chip.two { bottom: 5%; left: 0; color: #1a1023; background: var(--lavender); animation-delay: -3s; }

.work-teaser { padding-bottom: 150px; }
.teaser-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.teaser-card { position: relative; min-height: 620px; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #141119; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .2s ease; }
.teaser-card.small { min-height: 620px; background: radial-gradient(circle at 50% 40%,#421b6b,#111018 68%); }
.teaser-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transform: scale(1.05) translateY(var(--scroll-y)); }
.teaser-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(8,7,12,.92),transparent 60%); }
.teaser-info { position: absolute; z-index: 2; right: 28px; bottom: 27px; left: 28px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.teaser-info h3 { margin: 0; font-size: 2rem; letter-spacing: -.055em; }
.teaser-info p { margin: 6px 0 0; color: #aaa3b4; }

.process-grid, .feature-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--dark-line); background: var(--dark-line); gap: 1px; }
.process-grid article, .feature-grid article { min-height: 228px; display: flex; flex-direction: column; padding: 24px; color: #17191c; background: var(--paper); }
.process-grid span, .feature-grid span { color: var(--electric); font-size: .7rem; letter-spacing: .12em; }
.process-grid h3, .feature-grid h3 { margin: 42px 0 8px; font-size: 1.75rem; line-height: 1.08; letter-spacing: -.055em; }
.process-grid p, .feature-grid p { margin: 0; color: var(--dark-muted); font-size: .92rem; }

.cta { position: relative; min-height: 78svh; display: grid; place-content: center; justify-items: center; overflow: hidden; padding: 130px 24px; color: rgba(255,255,255,.92); text-align: center; background: #09070e; isolation: isolate; }
.cta::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.32) .7px,transparent .7px); background-size: 28px 28px; mask-image: radial-gradient(circle,black,transparent 72%); }
.cta::after { content: ""; position: absolute; z-index: -1; width: min(75vw,850px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(124,58,237,.3),rgba(124,58,237,.12) 35%,transparent 69%); }
.cta h2 { position: relative; margin: 0; font-size: clamp(3.4rem,6vw,7rem); font-weight: 620; line-height: .94; letter-spacing: -.065em; }
.cta h2 em { display: block; color: var(--lavender); font-style: normal; }
.cta > p { position: relative; max-width: 600px; margin: 30px 0; color: var(--muted); }
.cta .button { position: relative; }

.poster-head { min-height: calc(100svh - 106px); }
.poster-art { position: relative; min-height: 470px; display: grid; place-items: center; perspective: 1000px; }
.wire-object { position: relative; width: min(38vw,460px); aspect-ratio: 1; transform: translate3d(var(--scene-x,0),var(--scene-y,0),0) perspective(900px) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg)); transition: transform .12s linear; }
.wire-cube { position: absolute; z-index: 3; inset: 22%; border: 1px solid rgba(201,162,255,.78); background: radial-gradient(circle at 50% 50%,rgba(144,117,255,.08),transparent 67%); box-shadow: inset 0 0 28px rgba(124,58,237,.07),0 0 30px rgba(124,58,237,.14); transform-style: preserve-3d; animation: wire-spin 18s linear infinite; }
.wire-cube::before, .wire-cube::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(255,255,255,.34); transform: translateZ(80px); }
.wire-cube::after { transform: translateZ(-80px); }
.wire-cube.small { z-index: 4; inset: 34%; transform: rotateX(55deg) rotateZ(45deg); animation-direction: reverse; animation-duration: 12s; }
.wire-object .ring { position: absolute; z-index: 2; inset: 9%; border: 1px solid rgba(168,85,247,.4); border-radius: 50%; transform: rotateX(64deg); animation: ring-precess 13s linear infinite; }
.wire-halo { position: absolute; z-index: 1; border: 1px solid rgba(201,162,255,.2); border-radius: 50%; pointer-events: none; }
.wire-halo.h1 { inset: 3% 13%; animation: halo-one 16s linear infinite; }
.wire-halo.h2 { inset: 13% 3%; animation: halo-two 21s linear infinite reverse; }
.wire-axis { position: absolute; z-index: 1; top: 8%; bottom: 8%; left: 50%; width: 1px; background: linear-gradient(transparent,rgba(201,162,255,.46),transparent); transform-origin: center; }
.wire-axis.ax1 { animation: axis-one 12s ease-in-out infinite; }
.wire-axis.ax2 { animation: axis-two 15s ease-in-out infinite; }
.wire-core { position: absolute; z-index: 6; top: 50%; left: 50%; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.5); border-radius: 38% 62% 57% 43% / 43% 38% 62% 57%; background: radial-gradient(circle at 35% 28%,#eadcff,#9b59ef 32%,#32134f 72%); box-shadow: inset -12px -14px 22px rgba(0,0,0,.3),0 0 36px rgba(144,117,255,.42); transform: translate(-50%,-50%); animation: wire-core 7s ease-in-out infinite; }
.wire-node { position: absolute; z-index: 7; width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 16px rgba(201,162,255,.88); animation: wire-node 7s ease-in-out infinite; }
.wire-node.n1 { top: 13%; left: 29%; }
.wire-node.n2 { top: 52%; right: 7%; animation-delay: -2.3s; }
.wire-node.n3 { left: 37%; bottom: 8%; animation-delay: -4.6s; }
@keyframes wire-spin { to { transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg); } }
.laptop { width: min(44vw,600px); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--px,0),var(--scroll-y),0); transition: transform .18s ease; animation: laptop-float 8s ease-in-out infinite; }
.laptop-screen { position: relative; aspect-ratio: 1.56; padding: 11px; border: 1px solid rgba(142,127,155,.48); border-radius: 20px; background: #0e0b13; box-shadow: 0 0 60px rgba(124,58,237,.12); }
.laptop-ui { position: relative; height: 100%; overflow: hidden; display: block; border-radius: 10px; background: radial-gradient(circle at 68% 27%,rgba(113,49,193,.42),rgba(23,16,32,.9) 48%,#0c0a0f); opacity: .94; }
.screen-grid { position: absolute; inset: 0; display: block; opacity: .28; background-image: linear-gradient(rgba(201,162,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,255,.15) 1px,transparent 1px); background-size: 34px 34px; animation: grid-drift 12s linear infinite; }
.screen-title { position: absolute; z-index: 4; top: 17%; left: 10%; display: block !important; color: white; font-size: clamp(1.2rem,2.5vw,2.5rem); font-weight: 750; line-height: 1; letter-spacing: -.06em; }
.screen-orb { position: absolute; z-index: 2; right: 10%; bottom: 14%; width: 34%; aspect-ratio: 1; display: block; border: 1px solid rgba(255,255,255,.28); border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; background: radial-gradient(circle at 35% 28%,#d7b7ff,#7132b8 42%,#160d21 75%); box-shadow: 0 0 32px rgba(124,58,237,.35); animation: screen-orb 8s ease-in-out infinite; }
.screen-line { position: absolute; z-index: 3; left: 10%; height: 5px; display: block; border-radius: 99px; background: rgba(255,255,255,.2); transform-origin: left; animation: line-pulse 5s ease-in-out infinite; }
.screen-line.sl1 { top: 57%; width: 32%; }
.screen-line.sl2 { top: 64%; width: 24%; animation-delay: -.9s; }
.screen-line.sl3 { top: 71%; width: 28%; animation-delay: -1.8s; }
.screen-chip { position: absolute; z-index: 4; top: 10%; right: 8%; display: block !important; color: var(--lavender); font-size: .58rem; letter-spacing: .16em; }
.laptop-base { width: 116%; height: 13px; margin-left: -8%; border-radius: 3px 3px 15px 15px; background: linear-gradient(#877b91,#2b2630); transform: rotateX(58deg); transform-origin: top; }
.palette-scene { position: relative; width: min(44vw,590px); aspect-ratio: 1; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.palette-card { position: absolute; z-index: 3; width: 48%; aspect-ratio: .78; padding: 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.palette-card:nth-of-type(1) { top: 4%; left: 1%; background: var(--lavender); transform: rotate(-11deg); animation: palette-one 8s ease-in-out infinite; }
.palette-card:nth-of-type(2) { top: 18%; right: 2%; background: #f1eee8; transform: rotate(8deg); animation: palette-two 9s ease-in-out infinite; }
.palette-card:nth-of-type(3) { bottom: 1%; left: 23%; color: white; background: #21142f; transform: rotate(-2deg); animation: palette-three 7s ease-in-out infinite; }
.palette-card b { display: block; margin-top: 70%; font-size: 1.4rem; letter-spacing: -.05em; }
.palette-orbit { position: absolute; z-index: 1; border: 1px solid rgba(201,162,255,.28); border-radius: 50%; pointer-events: none; }
.palette-orbit.po1 { inset: 7%; animation: palette-orbit 16s linear infinite; }
.palette-orbit.po2 { inset: 17% 2%; animation: palette-orbit 21s linear infinite reverse; }
.palette-dot { position: absolute; z-index: 5; width: 9px; height: 9px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 18px rgba(201,162,255,.8); animation: node-float 6s ease-in-out infinite; }
.palette-dot.pd1 { top: 8%; right: 17%; }
.palette-dot.pd2 { left: 8%; bottom: 17%; animation-delay: -3s; }

@keyframes mock-breathe { 50% { background-position: 18px -12px; transform: scale(.985); } }
@keyframes mock-rise { 50% { transform: translateY(-7px); border-color: rgba(201,162,255,.35); } }
@keyframes sheen-pass { 0%,18% { left: -35%; } 62%,100% { left: 125%; } }
@keyframes sheet-one { 50% { transform: translate(-15%,-11%) rotate(-10deg) scale(.97); } }
@keyframes sheet-two { 50% { transform: translate(14%,11%) rotate(11deg) scale(1.02); } }
@keyframes sheet-main { 50% { transform: translateY(-9px) rotate(.8deg) scale(1); } }
@keyframes orbit-flat { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes deck-node { 50% { transform: translate(13px,-16px) scale(1.45); opacity: .6; } }
@keyframes inner-orb { to { transform: rotate(360deg); } }
@keyframes orb-scan { 50% { top: 61%; left: 34%; transform: rotate(-28deg) scaleX(.7); opacity: .35; } }
@keyframes ai-ring-one { to { transform: rotate(360deg) scale(.98); } }
@keyframes ai-ring-two { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes ai-ring-three { to { transform: rotateY(68deg) rotateZ(-360deg); } }
@keyframes node-float { 50% { transform: translate(12px,-18px) scale(1.5); opacity: .55; } }
@keyframes chip-float { 50% { translate: 0 -11px; rotate: -1deg; } }
@keyframes ring-precess { to { transform: rotateX(64deg) rotateZ(360deg); } }
@keyframes halo-one { to { transform: rotateX(66deg) rotateZ(360deg); } }
@keyframes halo-two { to { transform: rotateY(67deg) rotateZ(360deg); } }
@keyframes axis-one { 0%,100% { transform: rotate(38deg) scaleY(.72); opacity: .38; } 50% { transform: rotate(218deg) scaleY(1); opacity: .75; } }
@keyframes axis-two { 0%,100% { transform: rotate(-52deg) scaleY(.86); opacity: .28; } 50% { transform: rotate(128deg) scaleY(.64); opacity: .72; } }
@keyframes wire-core { 0%,100% { transform: translate(-50%,-50%) rotate(0) scale(.92); } 50% { transform: translate(-50%,-50%) rotate(180deg) scale(1.08); border-radius: 61% 39% 35% 65% / 56% 62% 38% 44%; } }
@keyframes wire-node { 50% { transform: translate(16px,-13px) scale(1.5); opacity: .56; } }
@keyframes laptop-float { 50% { translate: 0 -9px; } }
@keyframes grid-drift { to { background-position: 34px 34px; } }
@keyframes screen-orb { 50% { transform: translate(-8px,-10px) rotate(18deg) scale(1.05); border-radius: 61% 39% 37% 63% / 57% 64% 36% 43%; } }
@keyframes line-pulse { 50% { transform: scaleX(.66); background: rgba(201,162,255,.42); } }
@keyframes palette-one { 50% { transform: translate(-8px,-12px) rotate(-14deg); } }
@keyframes palette-two { 50% { transform: translate(11px,-7px) rotate(11deg); } }
@keyframes palette-three { 50% { transform: translate(2px,12px) rotate(-.5deg); } }
@keyframes palette-orbit { to { transform: rotate(360deg) scale(.98); } }

.intro-split { display: grid; grid-template-columns: .75fr 1.25fr; gap: 10vw; }
.intro-split .sticky-copy { position: sticky; top: 140px; align-self: start; }
.intro-split h2 { margin: 0; font-size: clamp(2.8rem,5.7vw,6.2rem); line-height: .92; letter-spacing: -.075em; }
.prose { padding-top: 55px; }
.prose > p:first-child { color: inherit; font-size: clamp(1.4rem,2.3vw,2.15rem); line-height: 1.35; letter-spacing: -.035em; }
.prose p { color: var(--muted); }
.paper .prose p { color: var(--dark-muted); }
.rule-list { margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.rule-list li { display: grid; grid-template-columns: 42px 1fr minmax(180px,.8fr); gap: 22px; padding: 20px 0; border-bottom: 1px solid currentColor; }
.rule-list span { color: var(--violet); font-size: .72rem; }
.rule-list h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.04em; }
.rule-list p { margin: 0; opacity: .65; }

.work-page { color: #18131d; background: var(--paper); }
.work-page .poster-head { color: white; }
.work-list { padding: 18px max(12px,calc((100vw - 1320px)/2)) 140px; }
.case { position: sticky; top: calc(102px + var(--case-index,0) * 12px); min-height: 78svh; display: grid; grid-template-columns: .62fr 1.38fr; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--dark-line); border-radius: var(--radius); background: #e9e5df; box-shadow: 0 24px 65px rgba(26,16,34,.13); }
.case.darkcase { color: white; border-color: rgba(255,255,255,.15); background: #151219; }
.case.violetcase { color: #160f1d; background: var(--lavender); }
.case-copy { display: flex; flex-direction: column; padding: 42px; }
.case-copy small { letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.case-copy h2 { margin: auto 0 20px; font-size: clamp(3rem,5vw,6rem); line-height: .88; letter-spacing: -.08em; }
.case-copy p { max-width: 460px; margin: 0; opacity: .66; }
.booklet { position: relative; min-height: 640px; overflow: hidden; margin: 12px; border-radius: 22px; background: #0c0911; }
.booklet-pages, .booklet-page { position: absolute; inset: 0; }
.booklet-page { display: grid; place-items: center; opacity: 0; transform: scale(1.035); transition: opacity .45s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.booklet-page.active { opacity: 1; transform: scale(1); }
.booklet-page img { width: 100%; height: 100%; object-fit: cover; }
.book-ui { width: 76%; min-height: 64%; display: grid; grid-template-columns: .7fr 1.3fr; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; background: rgba(12,9,17,.78); box-shadow: 0 45px 90px rgba(0,0,0,.35); transform: perspective(900px) rotateY(-7deg) rotateX(3deg); animation: book-float 8s ease-in-out infinite; }
.book-ui > * { border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: linear-gradient(145deg,rgba(201,162,255,.2),rgba(255,255,255,.03)); }
.book-ui .wide { grid-column: 1/-1; background: radial-gradient(circle at 65% 30%,#7133bc,#15101e 55%); animation: book-wide 7s ease-in-out infinite; }
.book-ui > b { animation: book-cell 6s ease-in-out infinite; }
.book-ui > i { animation: book-cell 6s -2.5s ease-in-out infinite; }
@keyframes book-float { 50% { translate: 0 -9px; rotate: .5deg; } }
@keyframes book-wide { 50% { background-position: 24px -16px; transform: scale(.985); } }
@keyframes book-cell { 50% { transform: translateY(-6px); border-color: rgba(201,162,255,.34); } }
.booklet-controls { position: absolute; z-index: 4; right: 20px; bottom: 18px; left: 20px; display: flex; align-items: center; justify-content: space-between; color: white; }
.booklet-controls button { width: 44px; height: 44px; color: white; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(9,7,15,.65); cursor: pointer; }
.booklet-dots { display: flex; gap: 6px; }
.booklet-dots button { width: 36px; height: 3px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.25); }
.booklet-dots button.active { background: var(--lavender); }

.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9vw; }
.faq-list { border-top: 1px solid currentColor; }
.faq-item { border-bottom: 1px solid currentColor; }
.faq-item h3 { margin: 0; }
.faq-item button { width: 100%; min-height: 84px; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 20px 0; color: inherit; border: 0; background: transparent; text-align: left; font-weight: 700; cursor: pointer; }
.faq-item button i { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; }
.faq-item button i::before, .faq-item button i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%,-50%); transition: transform .25s; }
.faq-item button i::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.open button i::after { transform: translate(-50%,-50%); }
.answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.answer p { min-height: 0; overflow: hidden; margin: 0; opacity: .68; }
.faq-item.open .answer { grid-template-rows: 1fr; }
.faq-item.open .answer p { padding: 0 55px 28px 0; }

.contact-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8vw; }
.contact-aside { position: sticky; top: 135px; align-self: start; }
.contact-aside h2 { margin: 0; font-size: clamp(2.5rem,4.8vw,5rem); line-height: .92; letter-spacing: -.07em; }
.contact-aside p { color: var(--dark-muted); }
.brief-form { display: grid; gap: 45px; }
.form-section { padding-bottom: 38px; border-bottom: 1px solid var(--dark-line); }
.form-section > label, .form-section > legend { display: block; margin-bottom: 15px; font-size: 1.15rem; font-weight: 750; }
.form-section fieldset { padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { min-height: 45px; display: inline-flex; align-items: center; padding: 0 15px; border: 1px solid #aba3ae; border-radius: 99px; cursor: pointer; transition: color .2s,background .2s,border-color .2s; }
.chips input:checked + label { color: white; border-color: var(--electric); background: var(--electric); }
.chips input:focus-visible + label { outline: 2px solid var(--electric); outline-offset: 3px; }
.text-field { width: 100%; min-height: 54px; padding: 10px 0; color: #17121d; border: 0; border-bottom: 1px solid #938a98; border-radius: 0; background: transparent; }
textarea.text-field { min-height: 130px; resize: vertical; }
.text-field::placeholder { color: #918995; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form-status { min-height: 24px; color: var(--deep); }

.footer { position: relative; width: calc(100% - 52px); display: grid; grid-template-columns: 1fr .95fr 1.2fr auto; align-items: start; gap: clamp(30px,4vw,64px); margin: 20px auto 12px; padding: 58px 56px 42px; color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: #282d35; isolation: isolate; }
.footer::before { content: ""; position: absolute; z-index: -1; top: -27px; bottom: -13px; left: 50%; width: 100vw; background: var(--ink); transform: translateX(-50%); }
.footer p { color: rgba(255,255,255,.55); }
.footer nav { display: grid; gap: 5px; align-content: start; }
.footer nav a { width: fit-content; line-height: 1.45; }
.footer nav a:hover { color: var(--lavender); }
.footer h2 { margin: 0 0 14px; color: rgba(255,255,255,.58); font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.footer-contact { display: grid; align-content: start; text-align: left; }
.footer-contact a { width: fit-content; font-weight: 750; line-height: 1.45; }
.footer-note p { max-width: 320px; margin: 0 0 14px; line-height: 1.55; }
.footer-note p:last-child { margin-bottom: 0; }
.footer-brand { min-height: 0; padding: 0; color: rgba(255,255,255,.92); border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.footer-lead { display: grid; justify-items: end; align-content: start; justify-self: end; text-align: right; }
.footer-lead .footer-brand { margin-left: auto; }
.footer-lead > p { max-width: 260px; font-size: .72rem; line-height: 1.55; letter-spacing: .12em; text-transform: uppercase; }

/* One continuous canvas per page, with softly blended color regions. */
body:not(.work-page) main {
  background-color: #1a1d22;
  background-image:
    radial-gradient(rgba(255,255,255,.07) .65px,transparent .75px),
    radial-gradient(ellipse 70% 18% at 88% 7%,rgba(111,80,216,.2),transparent 72%),
    radial-gradient(ellipse 68% 20% at 8% 34%,rgba(144,117,255,.12),transparent 74%),
    radial-gradient(ellipse 72% 19% at 90% 63%,rgba(111,80,216,.15),transparent 74%),
    radial-gradient(ellipse 70% 17% at 10% 88%,rgba(144,117,255,.1),transparent 76%),
    linear-gradient(180deg,#17191e 0%,#22252c 18%,#191b20 35%,#211e2c 52%,#191b21 70%,#24212e 86%,#181a1f 100%);
  background-size: 34px 34px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
body:not(.work-page) .hero,
body:not(.work-page) .poster-head { border-color: transparent; background: transparent; }
body:not(.work-page) .hero::after,
body:not(.work-page) .poster-head::after { background: transparent; }
body:not(.work-page) .ticker { background: transparent; }
body:not(.work-page) .section.paper,
body:not(.work-page) .section.dark { color: rgba(255,255,255,.92); background: transparent; }
body:not(.work-page) .section { border-top: 0; }
body:not(.work-page) .section-head .kicker { color: #c6becd; }
body:not(.work-page) .section-head > p,
body:not(.work-page) .paper .prose p,
body:not(.work-page) .contact-aside p { color: var(--muted); }
body:not(.work-page) .cta { background: transparent; }
body:not(.work-page) .button.dark { color: #17191c; border-color: var(--lavender); background: linear-gradient(135deg,var(--lavender),var(--electric)); }
body:not(.work-page) .button.dark:hover { filter: brightness(1.08); }
body:not(.work-page) .process-grid,
body:not(.work-page) .feature-grid { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.12); }
body:not(.work-page) .form-section { border-color: rgba(255,255,255,.16); }
body:not(.work-page) .chips label { border-color: rgba(255,255,255,.28); }
body:not(.work-page) .text-field { color: rgba(255,255,255,.92); border-bottom-color: rgba(255,255,255,.32); }
body:not(.work-page) .text-field::placeholder { color: rgba(255,255,255,.42); }
body:not(.work-page) select.text-field option { color: white; background: var(--surface); }
body:not(.work-page) .form-status { color: var(--lavender); }

.work-page .site-header { color: #17191c; }
.work-page .site-header > .brand,
.work-page .nav-pill { color: #17191c; border-color: rgba(23,25,28,.16); background: rgba(244,241,234,.9); }
.work-page .nav-pill a { color: rgba(23,25,28,.72); }
.work-page .nav-pill a:hover,
.work-page .nav-pill a:focus-visible,
.work-page .nav-pill a.active { color: #17191c; background: rgba(144,117,255,.16); }
.work-page .page-index i { background: rgba(23,25,28,.1); }
.work-page .cta { color: #17191c; background: var(--lavender); }
.work-page .cta::before { opacity: .16; background-image: radial-gradient(rgba(23,25,28,.3) .7px,transparent .7px); }
.work-page .cta::after { background: radial-gradient(circle,rgba(124,58,237,.24),rgba(124,58,237,.08) 38%,transparent 70%); }
.work-page .cta h2 em { color: #4f2cad; }
.work-page .cta > p { color: rgba(23,25,28,.66); }

/* Slow, layered motion: ambient first, interaction second. */
.hero::before,
.poster-head::before { animation: hero-aurora-drift 51s ease-in-out infinite alternate; }
.wire-cube { animation-duration: 34s; }
.wire-cube.small { animation-duration: 27s; }
.wire-object .ring { animation-duration: 31s; }
.wire-halo.h1 { animation-duration: 38s; }
.wire-halo.h2 { animation-duration: 43s; }
.wire-axis.ax1 { animation-duration: 22s; }
.wire-axis.ax2 { animation-duration: 27s; }
.wire-core { animation-duration: 12s; }
.palette-card:nth-of-type(1) { animation-duration: 13s; }
.palette-card:nth-of-type(2) { animation-duration: 15s; }
.palette-card:nth-of-type(3) { animation-duration: 12s; }
.palette-orbit.po1 { animation-duration: 31s; }
.palette-orbit.po2 { animation-duration: 39s; }
.ai-ring.ar1 { animation-duration: 32s; }
.ai-ring.ar2 { animation-duration: 27s; }
.ai-ring.ar3 { animation-duration: 41s; }
.ai-orb { animation-duration: 13s; }
.ai-orb::before { animation-duration: 24s; }
.ai-orb::after { animation-duration: 11s; }
.chat-chip { animation-duration: 9s; }
.deck-orbit { animation-duration: 29s; }
.brand-sheet:nth-child(1) { animation-duration: 14s; }
.brand-sheet:nth-child(2) { animation-duration: 16s; }
.brand-sheet:nth-child(3) { animation-duration: 13s; }
.browser-sheen { animation-duration: 10s; }

.laptop { animation: laptop-enter 1.18s cubic-bezier(.2,.8,.2,1) both, laptop-float 10s 1.18s ease-in-out infinite; }
.laptop-screen { transform-origin: 50% 100%; animation: laptop-lid-open 1.18s cubic-bezier(.16,.84,.24,1) both; }
.laptop-base { animation: laptop-base-enter .62s .18s ease-out both; }
.screen-grid { animation: screen-grid-enter .52s .58s ease-out both, grid-drift 24s 1.1s linear infinite; }
.screen-title { animation: screen-type 1.68s .72s steps(18,end) both; white-space: nowrap; overflow: hidden; }
.screen-chip { animation: screen-copy-enter .48s 1.08s ease-out both; }
.screen-orb { animation: screen-orb-enter .82s .72s cubic-bezier(.2,.8,.2,1) both, screen-orb 13s 1.54s ease-in-out infinite; }
.screen-line { animation: screen-line-enter .48s calc(.94s + var(--line-delay,0s)) ease-out both, line-pulse 7s 1.7s ease-in-out infinite; }
.screen-line.sl2 { --line-delay: .12s; }
.screen-line.sl3 { --line-delay: .24s; }

@keyframes page-aurora-drift {
  0% { background-position: 0 0,0 0,0 0,0 0,0 0; }
  100% { background-position: 5vw -3vh,-4vw 5vh,-6vw -3vh,4vw -5vh,17px 17px; }
}
@keyframes hero-aurora-drift {
  0% { transform: translate3d(-2%,-1%,0) scale(1); opacity: .68; }
  100% { transform: translate3d(5%,4%,0) scale(1.12); opacity: 1; }
}
@keyframes laptop-enter {
  from { opacity: 0; translate: 0 34px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes laptop-lid-open {
  from { opacity: .2; transform: perspective(900px) rotateX(-72deg) scale(.94); }
  to { opacity: 1; transform: perspective(900px) rotateX(0) scale(1); }
}
@keyframes laptop-base-enter {
  from { opacity: 0; transform: rotateX(58deg) scaleX(.72); }
  to { opacity: 1; transform: rotateX(58deg) scaleX(1); }
}
@keyframes screen-grid-enter { from { opacity: 0; transform: scale(1.08); } to { opacity: .28; transform: scale(1); } }
@keyframes screen-type { from { width: 0; opacity: 0; } to { width: 82%; opacity: 1; } }
@keyframes screen-copy-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes screen-orb-enter { from { opacity: 0; transform: translate(22px,22px) scale(.72); } to { opacity: 1; transform: none; } }
@keyframes screen-line-enter { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

[data-depth] { --lx: 50%; --ly: 50%; position: relative; }
[data-depth]::before { display: none; }
.reveal { opacity: 0; transform: translate(calc(var(--reveal-side,-1) * 7vw),18px) rotate(calc(var(--reveal-side,-1) * 1.1deg)); transition: opacity .62s ease, transform .88s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  :root { --container: min(100% - 28px,900px); }
  .site-header { grid-template-columns: 1fr auto; }
  .lang-switcher { position: absolute; top: 19px; right: 60px; }
  .menu-toggle { position: relative; z-index: 3; width: 48px; height: 48px; display: grid; place-content: center; gap: 5px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); }
  .menu-toggle > span:not(.sr-only) { width: 19px; height: 1px; display: block; background: white; transition: transform .25s,opacity .25s; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-pill { position: fixed; top: -8px; left: -1px; width: calc(100% + 2px); height: calc(100svh + 9px); display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 100px 28px 30px; border: 1px solid var(--line); border-radius: 30px; background: rgba(9,7,15,.98); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s,visibility .25s,transform .25s; }
  .nav-pill.open { opacity: 1; visibility: visible; transform: none; }
  .nav-pill a { font-size: clamp(1.9rem,6vw,3.5rem); }
  .page-index { top: 84px; width: 100%; }
  .page-index b { display: none; }
  .hero-inner, .poster-inner { grid-template-columns: 1fr; align-content: center; }
  .hero-copy, .poster-copy { position: relative; z-index: 3; }
  .hero-object, .poster-art { position: absolute; right: -8%; bottom: -4%; width: 58vw; opacity: .62; }
  .poster-art > .hero-object { position: relative; right: auto; bottom: auto; width: 100%; opacity: 1; }
  .section-head { grid-template-columns: 1fr; gap: 22px; }
  .section-head .kicker { grid-column: auto; }
  .story-card { grid-template-columns: 1fr; min-height: 830px; }
  .story-card h3 { margin-top: 75px; }
  .story-visual { min-height: 390px; }
  .process-grid,.feature-grid { grid-template-columns: 1fr 1fr; }
  .footer { grid-template-columns: 1fr 1fr; gap: 38px 52px; padding: 52px 46px 38px; }
  .footer-lead { grid-column: 2; }
  .case { grid-template-columns: 1fr; }
  .case-copy { min-height: 390px; }
  .booklet { min-height: 560px; }
  .work-page .nav-pill.open { color: #17191c; border-color: rgba(23,25,28,.14); background: rgba(244,241,234,.985); }
  .work-page .menu-toggle { background: rgba(23,25,28,.08); }
  .work-page .menu-toggle > span:not(.sr-only) { background: #17191c; }
}

@media (max-width: 680px) {
  :root { --container: calc(100vw - 20px); --radius: 23px; }
  main { padding-top: 76px; }
  .site-header { top: 0; height: 76px; min-height: 58px; padding: 8px 0 0; }
  .site-header .brand { min-height: 48px; padding-inline: 13px; }
  .lang-switcher { top: 10px; right: 58px; }
  .lang-pill { min-width: 54px; min-height: 46px; padding-inline: 10px; }
  .brand-name { font-size: 1rem; }
  .page-index { top: 74px; width: 100%; }
  .hero { min-height: calc(100svh - 76px); margin: 0; border-radius: 0; }
  .poster-head { min-height: calc(100svh - 90px); margin-top: 10px; border-radius: 22px; }
  .hero-inner { padding: 112px 0 72px; align-items: start; }
  .poster-inner { padding: 98px 22px 62px; align-items: start; }
  .hero h1 { font-size: clamp(3.15rem,13.6vw,4.25rem); line-height: 1.01; }
  .poster-head h1 { font-size: clamp(3.35rem,15vw,4.8rem); line-height: .98; }
  .hero-copy > p:not(.kicker),.poster-copy > p:not(.kicker) { font-size: .98rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .poster-art { width: 92vw; right: -18%; bottom: -8%; opacity: .58; }
  .poster-head .chat-chip { display: none; }
  .hero-foot { left: 22px; right: auto; gap: 14px; }
  .section { padding: 90px 12px; }
  .display-title { font-size: clamp(3rem,14vw,4.8rem); }
  .section-head { margin-bottom: 44px; }
  .story-card { top: calc(84px + var(--stack,0) * 8px); min-height: 760px; padding: 25px; }
  .story-card h3 { margin-top: 52px; font-size: 3.05rem; }
  .story-visual { min-height: 330px; }
  .float-card { display: none; }
  .teaser-grid { grid-template-columns: 1fr; }
  .teaser-card,.teaser-card.small { min-height: 520px; }
  .process-grid,.feature-grid { grid-template-columns: 1fr; }
  .process-grid article,.feature-grid article { min-height: 190px; }
  .process-grid h3,.feature-grid h3 { margin-top: 32px; }
  .intro-split,.faq,.contact-layout { grid-template-columns: 1fr; gap: 55px; }
  .intro-split .sticky-copy,.contact-aside { position: static; }
  .rule-list li { grid-template-columns: 34px 1fr; }
  .rule-list li p { grid-column: 2; }
  .case { top: calc(80px + var(--case-index,0) * 8px); }
  .case-copy { min-height: 350px; padding: 26px; }
  .case-copy h2 { font-size: 3.4rem; }
  .booklet { min-height: 470px; }
  .book-ui { width: 88%; min-height: 56%; }
  .booklet-count { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .footer { width: calc(100% - 20px); grid-template-columns: 1.05fr .95fr; gap: 24px 20px; margin-top: 10px; padding: 38px 24px 28px; }
  .footer nav { grid-column: 1; grid-row: 1 / span 2; }
  .footer-contact { grid-column: 2; grid-row: 1; }
  .footer-note { grid-column: 1/-1; grid-row: 3; display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: end; }
  .footer-note h2 { grid-column: 1/-1; }
  .footer-note p { margin: 0; }
  .footer-note p:last-child { white-space: nowrap; }
  .footer-contact { text-align: left; }
  .footer-lead { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .story-card,.teaser-card,.laptop,[data-depth],.hero-object,.wire-object { transform: none !important; }
  .cursor-aura { display: none; }
}

/* Contextual portfolio scenes */
.story-card:first-child { color: #17191c; }
.story-card:first-child .story-no,.story-card:first-child p { color: #5f5964; opacity: 1; }
.scene-tilt { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease; }
.scene-brand { color: rgba(255,255,255,.94); }
.scene-brand.large { gap: 15px; transform: scale(1.32); transform-origin: center; }

.site-demo { position: relative; width: min(98%,680px); aspect-ratio: 1.42; overflow: hidden; padding: 10px; color: white; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; background: #0a080e; box-shadow: 0 40px 90px rgba(20,11,30,.32); }
.site-chrome { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 5px; color: rgba(255,255,255,.48); font-size: .58rem; letter-spacing: .09em; }
.site-chrome i,.console-bar i,.code-head i,.contact-head i { width: 7px; height: 7px; display: block; border-radius: 50%; background: rgba(255,255,255,.28); }
.site-chrome span,.console-bar span,.code-head span,.contact-head span { margin-left: auto; }
.site-screen { position: relative; height: calc(100% - 30px); overflow: hidden; border-radius: 13px; background: radial-gradient(circle at 76% 42%,rgba(144,117,255,.42),transparent 28%),linear-gradient(145deg,#171922,#101116); }
.site-screen::before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(201,162,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,255,.2) 1px,transparent 1px); background-size:30px 30px; animation:site-grid 12s linear infinite; }
.site-nav { position:relative; z-index:4; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-nav .scene-brand { transform:scale(.78); transform-origin:left center; }
.site-nav small { color:#c9a2ff; font-size:.52rem; letter-spacing:.14em; }
.site-hero { position:relative; z-index:3; width:64%; display:grid; gap:9px; padding:42px 0 0 28px; }
.site-hero small { color:#c9a2ff; font-size:.55rem; letter-spacing:.18em; }
.site-hero strong { max-width:340px; font-size:clamp(1.65rem,3.2vw,3rem); line-height:.95; letter-spacing:-.065em; }
.site-hero strong em { display:block; color:#c9a2ff; font-style:normal; }
.site-hero > span { color:rgba(255,255,255,.55); font-size:.66rem; }
.site-orb { position:absolute; z-index:2; right:8%; bottom:10%; width:29%; aspect-ratio:1; border:1px solid rgba(255,255,255,.3); border-radius:44% 56% 62% 38%; background:radial-gradient(circle at 32% 28%,#e8d7ff,#8f4ce8 34%,#251033 74%); box-shadow:0 0 50px rgba(124,58,237,.45); animation:site-orb 8s ease-in-out infinite; }
.site-code { position:absolute; z-index:4; right:7%; bottom:7%; display:flex; gap:12px; color:rgba(255,255,255,.54); font-size:.48rem; letter-spacing:.12em; writing-mode:vertical-rl; }
.site-demo.compact { width:min(86%,620px); }

.identity-stage { position:relative; width:min(96%,650px); aspect-ratio:1.25; transform-style:preserve-3d; }
.identity-grid { position:absolute; inset:7%; opacity:.2; border-radius:24px; background-image:linear-gradient(rgba(201,162,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,255,.22) 1px,transparent 1px); background-size:34px 34px; transform:rotateX(64deg) rotateZ(-12deg); animation:identity-grid 11s ease-in-out infinite; }
.identity-ring { position:absolute; border:1px solid rgba(201,162,255,.34); border-radius:50%; }
.identity-ring.r1 { inset:4% 15%; transform:rotateX(65deg); animation:identity-ring 15s linear infinite; }
.identity-ring.r2 { inset:14% 5%; transform:rotateY(66deg); animation:identity-ring-two 18s linear infinite reverse; }
.identity-card { position:absolute; display:grid; place-items:center; align-content:center; gap:20px; border:1px solid rgba(255,255,255,.22); border-radius:25px; box-shadow:0 35px 80px rgba(0,0,0,.34); backface-visibility:hidden; }
.identity-card.back { inset:16% 30% 12% 5%; color:white; background:linear-gradient(145deg,#241332,#0f0d13); transform:translateZ(-40px) rotate(-8deg); animation:identity-back 9s ease-in-out infinite; }
.identity-card.back > span { color:#b15aff; font-size:6rem; font-weight:900; line-height:1; text-shadow:0 0 35px rgba(168,85,247,.7); }
.identity-card.front { inset:10% 4% 18% 27%; color:white; text-align:center; background:radial-gradient(circle at 25% 15%,rgba(168,85,247,.32),transparent 35%),#111018; transform:translateZ(35px) rotate(6deg); animation:identity-front 8s ease-in-out infinite; }
.identity-card small { color:rgba(255,255,255,.48); font-size:.5rem; letter-spacing:.17em; }
.teaser-scene { position:absolute; inset:4% 1% 14%; width:auto; }

.ai-console { position:relative; width:min(98%,650px); aspect-ratio:1.18; overflow:hidden; color:white; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:radial-gradient(circle at 58% 35%,rgba(111,57,183,.34),transparent 31%),linear-gradient(145deg,#19151f,#0d0b10); box-shadow:0 45px 90px rgba(0,0,0,.32); }
.console-bar { height:40px; display:flex; align-items:center; gap:6px; padding:0 14px; color:rgba(255,255,255,.44); border-bottom:1px solid rgba(255,255,255,.1); font-size:.56rem; letter-spacing:.1em; }
.neural-stage { position:absolute; top:13%; right:5%; width:48%; aspect-ratio:1; }
.neural-ring { position:absolute; border:1px solid rgba(201,162,255,.35); border-radius:50%; }
.neural-ring.nr1 { inset:5%; animation:neural-spin 13s linear infinite; }
.neural-ring.nr2 { inset:15% 0; transform:rotateX(67deg); animation:neural-spin-flat 9s linear infinite reverse; }
.neural-core { position:absolute; inset:27%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.36); border-radius:39% 61% 57% 43%; color:white; background:radial-gradient(circle at 33% 25%,#e0c4ff,#8e4ae0 37%,#1e0f2d 73%); box-shadow:0 0 45px rgba(144,117,255,.45); font-size:1.3rem; font-weight:850; animation:neural-morph 7s ease-in-out infinite; }
.neural-stage > i { position:absolute; width:8px; height:8px; border-radius:50%; background:#c9a2ff; box-shadow:0 0 18px #a855f7; animation:neural-node 5s ease-in-out infinite; }
.neural-stage .nn1 { top:7%; left:33%; }.neural-stage .nn2 { right:2%; top:52%; animation-delay:-1.7s }.neural-stage .nn3 { left:18%; bottom:5%; animation-delay:-3.3s }
.conversation { position:absolute; z-index:5; left:6%; bottom:7%; width:55%; display:grid; gap:9px; }
.message { width:fit-content; max-width:100%; padding:11px 14px; border:1px solid rgba(255,255,255,.13); border-radius:14px 14px 14px 4px; background:rgba(32,27,39,.9); box-shadow:0 13px 30px rgba(0,0,0,.2); font-size:.7rem; line-height:1.45; animation:message-float 6s ease-in-out infinite; }
.message small { display:block; margin-bottom:2px; color:#c9a2ff; font-size:.45rem; letter-spacing:.13em; }
.message.assistant { margin-left:12%; color:#1a1220; border-radius:14px 14px 4px 14px; background:#c9a2ff; animation-delay:-3s; }
.message.assistant small { color:#5d2aa1; }
.code-pulse { position:absolute; left:6%; top:18%; width:27%; display:grid; gap:8px; }
.code-pulse span { height:4px; border-radius:99px; background:linear-gradient(90deg,#9075ff,rgba(255,255,255,.12)); transform-origin:left; animation:code-pulse 3.4s ease-in-out infinite; }
.code-pulse span:nth-child(2){width:72%;animation-delay:-1.1s}.code-pulse span:nth-child(3){width:88%;animation-delay:-2.2s}
.ai-console.compact { position:absolute; inset:7% 5% 17%; width:auto; aspect-ratio:auto; }
.ai-console.compact .neural-stage { width:47%; }.ai-console.compact .conversation { width:61%; }

.code-design-scene { position:relative; width:min(43vw,560px); aspect-ratio:1; transform-style:preserve-3d; }
.code-window,.design-plane { position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:22px; box-shadow:0 35px 75px rgba(0,0,0,.3); }
.code-window { z-index:3; inset:9% 20% 23% 1%; overflow:hidden; background:#0f0d13; transform:rotateY(12deg) rotateZ(-5deg); animation:code-window-float 8s ease-in-out infinite; }
.code-head { height:38px; display:flex; align-items:center; gap:6px; padding:0 13px; color:rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.1); font-size:.55rem; }
.code-body { display:grid; gap:14px; padding:25px; color:#c9a2ff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; }
.code-body b { margin-left:18px; color:rgba(255,255,255,.55); font-weight:400; animation:code-line 4s ease-in-out infinite; }
.code-body b:nth-child(3){animation-delay:-1.3s}.code-body b:nth-child(4){animation-delay:-2.6s}
.design-plane { z-index:4; top:25%; right:1%; width:45%; height:58%; display:grid; grid-template-columns:1fr 1fr; align-content:end; gap:8px; padding:18px; color:#17131b; background:#c9a2ff; transform:translateZ(50px) rotateY(-10deg) rotateZ(8deg); animation:design-plane-float 7s ease-in-out infinite; }
.design-plane i { grid-column:1/-1; align-self:start; font-size:.58rem; font-style:normal; letter-spacing:.12em; }.design-plane strong{grid-column:1/-1;font-size:4rem;line-height:1}.design-plane span{height:28px;border-radius:7px;background:#17131b}.design-plane span:last-child{background:#f4f1ea}
.scene-cursor { position:absolute; z-index:6; right:29%; bottom:14%; width:42px; height:42px; display:grid; place-items:center; color:#17131b; border-radius:50%; background:white; box-shadow:0 0 28px rgba(255,255,255,.25); animation:cursor-tour 6s ease-in-out infinite; }

.brand-showcase { position:relative; width:min(44vw,590px); aspect-ratio:1; transform-style:preserve-3d; }
.premium-brand { position:absolute; width:53%; aspect-ratio:.78; display:flex; flex-direction:column; justify-content:space-between; padding:22px; border:1px solid rgba(255,255,255,.2); border-radius:22px; box-shadow:0 35px 70px rgba(0,0,0,.3); }
.premium-brand small { font-size:.48rem; letter-spacing:.16em; }.premium-brand > b { font-size:.85rem; line-height:1.35; letter-spacing:-.03em; }
.premium-brand.ks-card { z-index:4; top:3%; left:2%; color:white; background:radial-gradient(circle at 20% 10%,rgba(168,85,247,.4),transparent 38%),#111018; transform:rotate(-9deg); animation:brand-card-one 9s ease-in-out infinite; }
.premium-brand.ks-card .scene-brand { transform:scale(1.12); transform-origin:left center; }
.premium-brand.kp-card,.premium-brand.light-card { z-index:3; top:19%; right:1%; color:#17191c; background:#f3efe8; transform:rotate(8deg); animation:brand-card-two 8s ease-in-out infinite; }
.premium-brand.kp-card strong { position:absolute; top:17%; right:18px; font-size:1.9rem; letter-spacing:-.07em; }.premium-brand.kp-card strong span{color:#9075ff}
.premium-brand.kp-card > b { position:absolute; right:18px; bottom:16px; text-align:right; }
.premium-brand.nova-card,.premium-brand.type-card { z-index:5; bottom:0; left:25%; color:#f1e9da; background:linear-gradient(145deg,#271e18,#0f0d0c); transform:rotate(-2deg); animation:brand-card-three 7s ease-in-out infinite; }
.premium-brand.nova-card strong { font-family:Georgia,serif; font-size:2.6rem; letter-spacing:.08em; }
.brand-orbit { position:absolute; inset:5%; border:1px solid rgba(201,162,255,.25); border-radius:50%; transform:rotateX(64deg); animation:neural-spin-flat 17s linear infinite; }
.brand-showcase.compact { width:min(88%,670px); aspect-ratio:1.55; }
.brand-showcase.compact .premium-brand { width:38%; aspect-ratio:.8; padding:18px; }.brand-showcase.compact .ks-card{left:3%}.brand-showcase.compact .light-card{top:8%;right:3%}.brand-showcase.compact .type-card{left:32%;bottom:0}.premium-brand.light-card strong,.premium-brand.type-card strong{font-size:1.7rem}

.team-network-scene,.contact-flow-scene { position:relative; width:min(42vw,540px); aspect-ratio:1; }
.team-core { position:absolute; z-index:5; inset:31% 21%; display:grid; place-items:center; align-content:center; gap:14px; border:1px solid rgba(255,255,255,.25); border-radius:28px; background:radial-gradient(circle at 30% 20%,rgba(168,85,247,.35),transparent 45%),#111018; box-shadow:0 0 55px rgba(124,58,237,.25); animation:team-core 8s ease-in-out infinite; }
.team-core small { color:rgba(255,255,255,.45); font-size:.47rem; letter-spacing:.14em; }
.team-node { position:absolute; z-index:6; padding:9px 12px; color:white; border:1px solid rgba(255,255,255,.19); border-radius:12px; background:rgba(25,22,30,.93); box-shadow:0 18px 35px rgba(0,0,0,.25); font-size:.53rem; letter-spacing:.12em; animation:team-node 6s ease-in-out infinite; }
.team-node.strategy{top:8%;left:28%}.team-node.design{top:38%;right:1%;animation-delay:-1.5s}.team-node.code{bottom:8%;right:25%;animation-delay:-3s}.team-node.ai{top:50%;left:1%;animation-delay:-4.5s}
.team-orbit { position:absolute; border:1px solid rgba(201,162,255,.3); border-radius:50%; }.team-orbit.o1{inset:10%;animation:neural-spin 16s linear infinite}.team-orbit.o2{inset:20% 3%;transform:rotateX(66deg);animation:neural-spin-flat 11s linear infinite reverse}

.contact-window { position:absolute; z-index:4; inset:15% 2% 18% 9%; overflow:hidden; color:white; border:1px solid rgba(255,255,255,.22); border-radius:24px; background:linear-gradient(145deg,#1c1821,#0d0b10); box-shadow:0 40px 85px rgba(0,0,0,.32); transform:rotate(-4deg); animation:contact-window 8s ease-in-out infinite; }
.contact-head { height:42px; display:flex; align-items:center; gap:6px; padding:0 14px; color:rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.1); font-size:.54rem; }
.contact-mail { display:grid; gap:7px; padding:36px 28px; }.contact-mail small,.contact-reply small{color:#c9a2ff;font-size:.48rem;letter-spacing:.14em}.contact-mail strong{font-size:clamp(1.2rem,2.3vw,2rem);letter-spacing:-.05em}.contact-mail span{color:rgba(255,255,255,.45);font-size:.65rem}
.contact-reply { position:absolute; right:24px; bottom:24px; display:flex; align-items:center; gap:12px; padding:12px 16px; color:#17131b; border-radius:14px; background:#c9a2ff; box-shadow:0 18px 35px rgba(0,0,0,.24); animation:message-float 6s ease-in-out infinite; }.contact-reply > i{width:9px;height:9px;border-radius:50%;background:#5f2ca7;box-shadow:0 0 15px #7c3aed}.contact-reply b{display:block;font-size:.7rem}.contact-reply small{color:#6330a7}
.contact-orbit { position:absolute; inset:4%; border:1px solid rgba(201,162,255,.28); border-radius:50%; transform:rotateX(66deg); animation:neural-spin-flat 14s linear infinite; }.contact-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#c9a2ff;box-shadow:0 0 20px #a855f7;animation:neural-node 5s ease-in-out infinite}.contact-dot.d1{top:8%;right:23%}.contact-dot.d2{left:5%;bottom:21%;animation-delay:-2.5s}

.keypoint-page,.keypoint-browser,.keypoint-screen { background:#eee9df; }
.keypoint-stage { position:relative; width:88%; height:78%; overflow:hidden; color:#17191c; border:1px solid rgba(23,25,28,.16); border-radius:21px; background:#f4f1ea; box-shadow:0 35px 75px rgba(0,0,0,.18); transform:perspective(900px) rotateY(-7deg); animation:keypoint-float 8s ease-in-out infinite; }
.kp-header,.kp-nav { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid rgba(23,25,28,.12); }.kp-header strong,.kp-nav strong,.keypoint-ui strong{font-size:1.25rem;letter-spacing:-.06em}.kp-header strong span,.kp-nav strong span,.keypoint-ui strong span{color:#9075ff}.kp-header small,.kp-nav small{font-size:.47rem;letter-spacing:.13em}
.kp-hero { position:relative; z-index:3; width:61%; display:grid; gap:14px; padding:55px 0 0 32px; }.kp-hero small{color:#7c3aed;font-size:.5rem;letter-spacing:.15em}.kp-hero b{font-size:clamp(2rem,3.6vw,3.8rem);line-height:.94;letter-spacing:-.065em}.kp-hero span{width:fit-content;padding:9px 13px;color:white;border-radius:99px;background:#17191c;font-size:.58rem}
.kp-building { position:absolute; right:4%; bottom:0; width:38%; height:78%; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:12px; background:linear-gradient(155deg,#c9a2ff,#6b49c4); clip-path:polygon(20% 0,100% 13%,100% 100%,0 100%,0 20%); }.kp-building i{align-self:end;height:65%;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.11)}.kp-building i:nth-child(2n){height:84%}
.kp-list { position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:28px 22px; }.kp-list div{min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:white;border-radius:13px;background:linear-gradient(0deg,rgba(12,9,15,.8),transparent),linear-gradient(135deg,#6840a7,#19151f)}.kp-list div:nth-child(2){background:linear-gradient(0deg,rgba(12,9,15,.8),transparent),linear-gradient(135deg,#89775c,#211c18)}.kp-list div:nth-child(3){background:linear-gradient(0deg,rgba(12,9,15,.8),transparent),linear-gradient(135deg,#9b9ca7,#25262b)}.kp-list small{font-size:.45rem;letter-spacing:.14em}.kp-list b{font-size:.65rem}
.keypoint-ui { position:relative; height:100%; display:grid; align-content:start; gap:7px; padding:24px; color:#17191c; background:#f4f1ea; }.keypoint-ui small{color:#6d6671}.property-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:15px}.property-grid i{height:100px;border-radius:9px;background:linear-gradient(155deg,#c9a2ff,#322047)}.property-grid i:nth-child(2){background:linear-gradient(155deg,#c9b692,#33291e)}.property-grid i:nth-child(3){background:linear-gradient(155deg,#d4d6df,#3a3b42)}

.identity-page{background:radial-gradient(circle at 70% 25%,#422064,#111018 58%,#09070d)}.brand-page{background:#e9e5df}.site-page{background:#141119}.ai-page{background:radial-gradient(circle at 62% 34%,#48216d,#0c0a0f 67%)}.ai-flow-page{background:#16131b}
.ai-flow { position:relative; width:88%; height:70%; display:flex; align-items:center; justify-content:space-between; }
.flow-node { position:relative; z-index:3; width:26%; min-height:140px; display:grid; place-content:center; gap:8px; padding:18px; color:white; text-align:center; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:#211b28; font-size:.7rem; font-weight:800; letter-spacing:.08em; box-shadow:0 25px 55px rgba(0,0,0,.28); animation:flow-node 7s ease-in-out infinite; }.flow-node.brain{color:#17131b;background:#c9a2ff;animation-delay:-2.3s}.flow-node.result{animation-delay:-4.6s}.flow-node small{font-size:.48rem;font-weight:500;letter-spacing:.06em;opacity:.65}.flow-line{position:absolute;top:50%;height:1px;background:linear-gradient(90deg,#9075ff,#c9a2ff);box-shadow:0 0 12px #9075ff;animation:flow-pulse 3s ease-in-out infinite}.flow-line.l1{left:24%;width:27%}.flow-line.l2{left:49%;width:27%;animation-delay:-1.5s}

@keyframes site-grid{to{background-position:30px 30px}}@keyframes site-orb{50%{transform:rotate(18deg) scale(1.06);border-radius:63% 37% 34% 66%}}@keyframes identity-grid{50%{transform:rotateX(64deg) rotateZ(6deg) translateY(-8px)}}@keyframes identity-ring{to{transform:rotateX(65deg) rotateZ(360deg)}}@keyframes identity-ring-two{to{transform:rotateY(66deg) rotateZ(360deg)}}@keyframes identity-back{50%{transform:translate3d(-8px,-8px,-40px) rotate(-11deg)}}@keyframes identity-front{50%{transform:translate3d(8px,-12px,35px) rotate(3deg)}}
@keyframes neural-spin{to{transform:rotate(360deg)}}@keyframes neural-spin-flat{to{transform:rotateX(67deg) rotateZ(360deg)}}@keyframes neural-morph{50%{transform:rotate(18deg) scale(1.06);border-radius:62% 38% 35% 65%}}@keyframes neural-node{50%{transform:translate(12px,-15px) scale(1.45);opacity:.55}}@keyframes message-float{50%{transform:translateY(-7px)}}@keyframes code-pulse{50%{transform:scaleX(.45);opacity:.45}}
@keyframes code-window-float{50%{transform:rotateY(5deg) rotateZ(-2deg) translateY(-12px)}}@keyframes design-plane-float{50%{transform:translate3d(9px,-13px,50px) rotateY(-4deg) rotateZ(4deg)}}@keyframes code-line{50%{transform:translateX(10px);color:#c9a2ff}}@keyframes cursor-tour{0%,100%{transform:translate(0,0)}50%{transform:translate(-105px,-120px) rotate(20deg)}}
@keyframes brand-card-one{50%{transform:translate(-8px,-10px) rotate(-12deg)}}@keyframes brand-card-two{50%{transform:translate(9px,-8px) rotate(11deg)}}@keyframes brand-card-three{50%{transform:translateY(-13px) rotate(1deg)}}@keyframes team-core{50%{transform:rotate(2deg) scale(1.03)}}@keyframes team-node{50%{transform:translateY(-10px);border-color:rgba(201,162,255,.48)}}@keyframes contact-window{50%{transform:translateY(-10px) rotate(-1deg)}}@keyframes keypoint-float{50%{transform:perspective(900px) rotateY(1deg) translateY(-8px)}}@keyframes flow-node{50%{transform:translateY(-10px)}}@keyframes flow-pulse{0%,100%{transform:scaleX(.25);opacity:.3}50%{transform:scaleX(1);opacity:1}}

@media (max-width:1080px){
  .code-design-scene,.brand-showcase,.team-network-scene,.contact-flow-scene{width:min(58vw,540px)}
  .site-demo{width:min(90%,650px)}
}
@media (max-width:680px){
  .site-demo{width:100%;border-radius:17px}.site-hero{width:72%;padding:28px 0 0 18px}.site-hero strong{font-size:1.65rem}.site-nav{height:48px;padding:0 13px}.site-nav small{display:none}.site-orb{right:3%;width:31%}
  .identity-stage{width:112%;margin-left:-6%}.identity-card.front{inset:12% 1% 19% 24%}.identity-card.back{inset:17% 28% 12% 1%}.identity-card.back>span{font-size:4.3rem}.scene-brand.large{transform:scale(1)}
  .ai-console{width:108%;margin-left:-4%;aspect-ratio:1}.neural-stage{top:12%;right:1%;width:48%}.conversation{left:4%;bottom:5%;width:70%}.message{font-size:.61rem}.code-pulse{left:4%}
  .code-design-scene,.brand-showcase,.team-network-scene,.contact-flow-scene{width:90vw}.poster-art .brand-showcase{width:86vw}.premium-brand{padding:15px}.premium-brand.ks-card .scene-brand{transform:scale(.9);transform-origin:left center}.premium-brand.kp-card strong{font-size:1.35rem}.premium-brand.nova-card strong{font-size:1.9rem}
  .code-window{inset:9% 18% 24% 1%}.design-plane{width:43%;padding:12px}.design-plane strong{font-size:3rem}.team-core{inset:33% 18%}.contact-mail{padding:25px 20px}.contact-reply{right:15px;bottom:15px}
  .brand-showcase.compact{width:96%;aspect-ratio:1.15}.brand-showcase.compact .premium-brand{width:48%;padding:12px}.brand-showcase.compact .type-card{left:28%}.kp-hero{padding:35px 0 0 18px}.kp-hero b{font-size:2rem}.kp-header small,.kp-nav small{display:none}.kp-list{padding:18px 12px}.kp-list div{min-height:130px;padding:9px}.ai-flow{width:94%}.flow-node{width:29%;min-height:115px;padding:10px;font-size:.55rem}
}
@media (prefers-reduced-motion:reduce){.scene-tilt,.site-orb,.identity-stage *,.ai-console *,.code-design-scene *,.brand-showcase *,.team-network-scene *,.contact-flow-scene *,.keypoint-stage,.ai-flow *{animation:none!important;transform:none!important}}

/* Decision support and exact Keypoint case study */
.decision-section { color:#f5f2f8; background:radial-gradient(circle at 74% 22%,rgba(126,77,193,.2),transparent 34%),#191b20; }
.decision-section .section-head .kicker,.decision-section .section-head>p { color:#b6afbf; }
.decision-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(255,255,255,.14); }
.decision-grid article { min-height:340px; display:flex; flex-direction:column; padding:34px; background:rgba(23,24,29,.96); transition:background .25s ease,transform .25s ease; }
.decision-grid article:hover { background:#25232c; }
.decision-grid span { color:#c9a2ff; font-size:.65rem; letter-spacing:.15em; }
.decision-grid h3 { margin:54px 0 14px; font-size:clamp(1.65rem,2.4vw,2.4rem); line-height:1.05; letter-spacing:-.055em; }
.decision-grid p { margin:0; color:#aaa3b5; font-size:.92rem; }
.decision-grid a { width:fit-content; display:flex; gap:10px; margin-top:auto; padding-top:28px; color:#fff; border-bottom:1px solid rgba(255,255,255,.45); font-size:.82rem; font-weight:700; }
.decision-grid a b { color:#c9a2ff; }

.kp-live-site,.kp-real-projects,.kp-real-finder { width:92%; height:82%; overflow:hidden; color:#3a4552; border-radius:20px; background:linear-gradient(120deg,#dcebfb 0%,#f7fafd 55%); box-shadow:0 30px 70px rgba(8,28,56,.22); font-family:Inter,sans-serif; }
.kp-live-site { position:relative; }
.kp-live-nav { height:54px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:0 23px; border-bottom:1px solid rgba(58,69,82,.13); background:rgba(255,255,255,.82); font-size:.52rem; }
.kp-live-logo { display:flex; align-items:center; gap:7px; font-family:"Playfair Display",Georgia,serif; font-size:.82rem; font-weight:600; }
.kp-live-logo i { position:relative; width:18px; height:8px; display:block; border:2px solid #3e6ba8; border-radius:50%; }
.kp-live-logo i::before,.kp-live-logo i::after { content:""; position:absolute; top:2px; width:7px; height:2px; background:#3e6ba8; }.kp-live-logo i::before{left:14px}.kp-live-logo i::after{left:18px;transform:rotate(90deg)}
.kp-live-nav>span:nth-child(2) { color:#636d79; }.kp-live-nav>b { justify-self:end; padding:8px 12px; color:white; border-radius:7px; background:#3e6ba8; }
.kp-live-brand { position:absolute; top:67px; right:14%; display:grid; justify-items:center; line-height:1; }.kp-live-brand strong{font-family:"Playfair Display",Georgia,serif;font-size:2.65rem;font-weight:500;letter-spacing:-.045em}.kp-live-brand strong::first-letter{color:#3a4552}.kp-live-brand small{margin-top:8px;font-size:.48rem;letter-spacing:.28em}
.kp-live-hero { width:67%; display:grid; gap:13px; padding:92px 0 0 34px; }.kp-live-hero>small{color:#9b8058;font-size:.47rem;letter-spacing:.16em}.kp-live-hero h3{margin:0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.45rem,2.5vw,2.7rem);font-weight:500;line-height:1.02;letter-spacing:-.035em}.kp-live-hero h3 em{color:#b8935a;font-style:italic;font-weight:500}.kp-live-hero p{margin:0;color:#5c6671;font-size:.62rem;line-height:1.55}.kp-live-hero>div{display:flex;gap:8px}.kp-live-hero>div b{padding:8px 11px;color:white;border-radius:7px;background:#3e6ba8;font-size:.5rem}
.kp-live-badge { position:absolute; right:8%; bottom:7%; min-width:43%; padding:11px 20px; text-align:center; border:1px solid rgba(62,107,168,.3); border-radius:40px; background:linear-gradient(135deg,rgba(62,107,168,.12),rgba(143,179,224,.22)); box-shadow:0 10px 30px rgba(62,107,168,.16); font-size:.65rem;font-weight:700; }
.keypoint-projects,.keypoint-finder { background:#edf4fb; }
.kp-real-projects { height:84%; padding:28px; background:#f7fafd; }
.kp-real-projects header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }.kp-real-projects header small,.kp-real-finder>small{color:#b8935a;font-size:.5rem;letter-spacing:.16em}.kp-real-projects h3,.kp-real-finder h3{margin:5px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:2rem;font-weight:500;letter-spacing:-.045em}.kp-real-projects header p{margin:0;color:#6b7480;font-size:.58rem;line-height:1.5}
.kp-real-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.kp-real-grid article{position:relative;min-width:0;overflow:hidden;border-radius:13px;background:white;box-shadow:0 10px 28px rgba(44,64,88,.12)}.kp-real-grid img{width:100%;height:125px;object-fit:cover}.kp-real-grid small,.kp-real-grid b,.kp-real-grid span{display:block;padding-inline:12px}.kp-real-grid small{margin-top:10px;color:#8c754f;font-size:.42rem;letter-spacing:.1em}.kp-real-grid b{margin-top:3px;font-family:"Playfair Display",Georgia,serif;font-size:.9rem}.kp-real-grid span{padding-bottom:12px;color:#3e6ba8;font-size:.56rem;font-weight:700}
.kp-real-finder { height:78%; display:grid; align-content:center; padding:38px; background:linear-gradient(135deg,#f8fbfe,#dceafb); }.kp-real-finder h3{max-width:520px;font-size:2.45rem}.kp-real-finder p{max-width:500px;margin:8px 0 22px;color:#64707d;font-size:.72rem}.kp-real-finder>b{font-size:.5rem;letter-spacing:.14em}.kp-real-finder h4{margin:10px 0 13px;font-size:1rem}.kp-real-finder>div{display:flex;flex-wrap:wrap;gap:8px}.kp-real-finder span{padding:9px 13px;border:1px solid rgba(62,107,168,.3);border-radius:99px;background:white;font-size:.6rem;font-weight:650}

.premium-brand.kp-card { color:white; background:linear-gradient(145deg,#3e6ba8,#2c496f); }
.premium-brand.kp-card strong { color:#fff; text-shadow:0 8px 24px rgba(14,37,67,.25); }.premium-brand.kp-card strong span{color:#dcebfb}.premium-brand.kp-card>small,.premium-brand.kp-card>b{color:#e6f0fb}

.web-code-scene { position:relative; width:min(45vw,590px); aspect-ratio:1.03; transform-style:preserve-3d; }
.web-code-editor,.web-preview { position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:22px; box-shadow:0 34px 80px rgba(0,0,0,.32); }
.web-code-editor { z-index:3; inset:11% 23% 20% 0; background:#0d0b11; transform:rotateY(11deg) rotateZ(-4deg); animation:code-window-float 8s ease-in-out infinite; }
.web-code-editor>div { height:40px; display:flex; align-items:center; gap:6px; padding:0 13px; color:#756e7d; border-bottom:1px solid rgba(255,255,255,.1); font-size:.54rem; }.web-code-editor>div i{width:7px;height:7px;border-radius:50%;background:#39343f}.web-code-editor>div span{margin-left:auto}
.web-code-editor code { display:grid; gap:7px; padding:24px; color:#c7c1cd; font:500 .72rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }.web-code-editor code b{color:#c9a2ff}.web-code-editor code em{color:#8fb3e0;font-style:normal}.web-code-editor>small{position:absolute;left:24px;bottom:18px;color:#78c89a;font-size:.48rem;letter-spacing:.12em}
.web-preview { z-index:4; top:26%; right:0; width:47%; height:57%; display:grid; align-content:center; gap:13px; padding:22px; color:#17191c; background:#f4f1ea; transform:translateZ(55px) rotateY(-9deg) rotateZ(7deg); animation:design-plane-float 7s ease-in-out infinite; }.web-preview>span{color:#7c3aed;font-size:.48rem;letter-spacing:.15em}.web-preview strong{font-size:1.55rem;line-height:1;letter-spacing:-.06em}.web-preview strong em{color:#7c3aed;font-style:normal}.web-preview>i{width:62px;height:5px;border-radius:99px;background:#17191c}

.handover-scene { position:relative; width:min(43vw,550px); aspect-ratio:1; transform-style:preserve-3d; }
.handover-tree,.handover-access { position:absolute; z-index:3; display:grid; border:1px solid rgba(255,255,255,.2); border-radius:22px; box-shadow:0 32px 70px rgba(0,0,0,.3); }
.handover-tree { inset:10% 31% 15% 1%; align-content:start; gap:11px; padding:24px; color:#bdb5c5; background:#100d14; transform:rotateY(12deg) rotateZ(-5deg); animation:code-window-float 8s ease-in-out infinite; font:500 .7rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; }.handover-tree small{margin-bottom:13px;color:#c9a2ff;font-size:.5rem;letter-spacing:.14em}.handover-tree span:nth-of-type(1),.handover-tree span:nth-of-type(5){color:#fff}
.handover-access { z-index:4; top:25%; right:1%; width:43%; height:55%; align-content:center; gap:9px; padding:22px; color:#17191c; background:#c9a2ff; transform:translateZ(55px) rotateY(-8deg) rotateZ(7deg); animation:design-plane-float 7s ease-in-out infinite; }.handover-access small{font-size:.5rem;letter-spacing:.15em}.handover-access b{font-size:3.2rem;line-height:1;letter-spacing:-.08em}.handover-access span{padding-top:7px;border-top:1px solid rgba(23,25,28,.18);font-size:.58rem;font-weight:700}.handover-line{position:absolute;z-index:5;left:41%;top:48%;width:29%;height:2px;background:linear-gradient(90deg,#c9a2ff,#fff);box-shadow:0 0 18px #9075ff;animation:flow-pulse 3s ease-in-out infinite}

@media(min-width:1081px){.web-code-scene{width:min(41vw,530px);margin-right:2vw}}
@media(max-width:1080px){.decision-grid{grid-template-columns:1fr}.decision-grid article{min-height:260px}.web-code-scene,.handover-scene{width:min(58vw,550px)}}
@media(max-width:680px){.decision-grid article{min-height:250px;padding:27px}.decision-grid h3{margin-top:38px}.kp-live-site,.kp-real-projects,.kp-real-finder{width:96%;height:83%}.kp-live-nav{grid-template-columns:1fr auto;padding:0 12px}.kp-live-nav>span:nth-child(2){display:none}.kp-live-brand{top:61px;right:7%}.kp-live-brand strong{font-size:1.65rem}.kp-live-hero{width:78%;padding:76px 0 0 18px}.kp-live-hero h3{font-size:1.45rem}.kp-live-hero p{font-size:.52rem}.kp-live-badge{right:6%;bottom:5%;font-size:.52rem}.kp-real-projects{padding:18px 12px}.kp-real-projects h3{font-size:1.45rem}.kp-real-projects header p{display:none}.kp-real-grid{gap:6px}.kp-real-grid img{height:105px}.kp-real-grid small{font-size:.34rem;padding-inline:7px}.kp-real-grid b{font-size:.65rem;padding-inline:7px}.kp-real-grid span{font-size:.43rem;padding:0 7px 8px}.kp-real-finder{padding:24px}.kp-real-finder h3{font-size:1.75rem}.web-code-scene,.handover-scene{width:90vw}.web-code-editor{inset:11% 18% 22% 0}.web-preview{width:44%;padding:14px}.web-preview strong{font-size:1.15rem}.handover-tree{inset:10% 27% 15% 1%;padding:18px}.handover-access{width:45%;padding:15px}.handover-access b{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.web-code-scene *,.handover-scene *{animation:none!important;transform:none!important}}

/* Complete brand cards in the work case study */
.work-brand-showcase { width:min(88%,700px); aspect-ratio:1.42; }
.work-brand-showcase .premium-brand { width:42%; aspect-ratio:.84; }
.work-brand-showcase .ks-card { top:5%; left:3%; }
.work-brand-showcase .kp-card { top:12%; right:3%; }
.work-brand-showcase .nova-card { bottom:3%; left:30%; }

/* Coding-led AI scene shared by the AI page and homepage */
.ai-code-scene { position:relative; width:min(44vw,590px); aspect-ratio:1; transform-style:preserve-3d; }
.ai-code-window,.ai-code-stack,.ai-code-chat { position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:0 34px 78px rgba(0,0,0,.34); }
.ai-code-window { z-index:3; inset:8% 18% 19% 0; color:#c9c3d0; border-radius:23px; background:linear-gradient(145deg,#0d0e14,#15111c); transform:rotateY(10deg) rotateZ(-4deg); animation:ai-code-window-float 8s ease-in-out infinite; }
.ai-code-head { height:42px; display:flex; align-items:center; gap:6px; padding:0 14px; color:#716a7a; border-bottom:1px solid rgba(255,255,255,.09); font:600 .52rem/1 Inter,sans-serif; letter-spacing:.06em; }
.ai-code-head i { width:7px; height:7px; border-radius:50%; background:#38333f; }
.ai-code-head span { margin-left:6px; }
.ai-code-head b { margin-left:auto; color:#6fce98; font-size:.45rem; letter-spacing:.14em; }
.ai-code-body { display:grid; gap:9px; padding:27px 25px; color:#aca5b4; font:500 .68rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ai-code-body span { width:fit-content; animation:ai-code-line 5.2s ease-in-out infinite; }
.ai-code-body span:nth-child(2){animation-delay:-.8s}.ai-code-body span:nth-child(3){animation-delay:-1.6s}.ai-code-body span:nth-child(4){animation-delay:-2.4s}.ai-code-body span:nth-child(5){animation-delay:-3.2s}.ai-code-body span:nth-child(6){animation-delay:-4s}
.ai-code-body b { color:#c9a2ff; font-weight:700; }.ai-code-body em{color:#77c797;font-style:normal}
.ai-code-window>small { position:absolute; left:25px; bottom:18px; color:#6fce98; font-size:.45rem; letter-spacing:.14em; }
.ai-code-stack { z-index:5; top:18%; right:0; width:42%; display:grid; gap:9px; padding:18px; color:white; border-radius:20px; background:linear-gradient(150deg,#5f36a1,#21162f 72%); transform:translateZ(55px) rotateY(-8deg) rotateZ(6deg); animation:ai-code-stack-float 7s ease-in-out infinite; }
.ai-code-stack>small { margin-bottom:2px; color:#decaff; font-size:.45rem; letter-spacing:.16em; }
.ai-code-stack span { display:grid; grid-template-columns:27px 1fr; column-gap:8px; padding:10px 0; border-top:1px solid rgba(255,255,255,.14); }
.ai-code-stack span i { grid-row:1/3; color:#bca2e8; font-size:.48rem; font-style:normal; }.ai-code-stack span b{font-size:.59rem;letter-spacing:.08em}.ai-code-stack span em{margin-top:3px;color:rgba(255,255,255,.55);font-size:.48rem;font-style:normal}
.ai-code-chat { z-index:6; right:9%; bottom:5%; width:58%; padding:14px 17px; color:#17131b; border-color:rgba(255,255,255,.42); border-radius:16px 16px 5px 16px; background:#f0e8fa; transform:translateZ(80px) rotateZ(-2deg); animation:ai-code-chat-float 6s ease-in-out infinite; }
.ai-code-chat small { color:#7544b9; font-size:.43rem; font-weight:800; letter-spacing:.14em; }.ai-code-chat p{margin:6px 0 9px;font-size:.66rem;line-height:1.35;font-weight:650}.ai-code-chat b{color:#6d6571;font-size:.43rem;letter-spacing:.08em}
.ai-code-beam { position:absolute; z-index:4; top:50%; left:46%; width:35%; height:2px; background:linear-gradient(90deg,transparent,#c9a2ff,#fff); box-shadow:0 0 18px #a855f7; transform-origin:left; animation:ai-code-beam 3.2s ease-in-out infinite; }
.ai-code-scene.compact { width:min(92%,650px); aspect-ratio:1.18; }
.ai-code-scene.compact .ai-code-window { inset:7% 19% 16% 0; }.ai-code-scene.compact .ai-code-stack{top:15%;width:39%}.ai-code-scene.compact .ai-code-chat{right:8%;bottom:2%;width:57%}
@keyframes ai-code-window-float{50%{transform:rotateY(5deg) rotateZ(-1.5deg) translateY(-11px)}}
@keyframes ai-code-stack-float{50%{transform:translate3d(9px,-13px,55px) rotateY(-3deg) rotateZ(3deg)}}
@keyframes ai-code-chat-float{50%{transform:translate3d(-6px,-8px,80px) rotateZ(1deg)}}
@keyframes ai-code-line{50%{transform:translateX(7px);color:#e4d4f8}}
@keyframes ai-code-beam{0%,100%{transform:scaleX(.18);opacity:.25}50%{transform:scaleX(1);opacity:1}}
@media(max-width:1080px){.ai-code-scene{width:min(58vw,550px)}}
@media(max-width:680px){.work-brand-showcase{width:98%;aspect-ratio:1.05}.work-brand-showcase .premium-brand{width:49%;padding:12px}.work-brand-showcase .ks-card{left:1%}.work-brand-showcase .kp-card{right:1%}.work-brand-showcase .nova-card{left:26%}.ai-code-scene,.ai-code-scene.compact{width:94vw;aspect-ratio:1}.ai-code-window{inset:9% 17% 18% 0}.ai-code-body{gap:7px;padding:20px 17px;font-size:.55rem}.ai-code-window>small{left:17px}.ai-code-stack{top:18%;width:43%;padding:12px}.ai-code-stack span{grid-template-columns:22px 1fr;padding:7px 0}.ai-code-chat{right:3%;bottom:5%;width:66%;padding:11px 13px}.ai-code-chat p{font-size:.57rem}.ai-code-scene.compact .ai-code-window{inset:8% 17% 18% 0}.ai-code-scene.compact .ai-code-stack{width:43%}.ai-code-scene.compact .ai-code-chat{right:3%;bottom:5%;width:66%}}
@media(prefers-reduced-motion:reduce){.ai-code-scene *{animation:none!important;transform:none!important}}