@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
  --bg:#0c1020;--bg-2:#121829;
  --surface:rgba(255,255,255,.035);--surface-2:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --ink:#eef1f8;--muted:#a6aec5;--faint:#7a83a0;
  --mint:#aef0d2;--peri:#b9c0ff;--blush:#ffc8b8;
  --grad:linear-gradient(100deg,var(--mint),var(--peri) 55%,var(--blush));
  --grad-loop:linear-gradient(100deg,var(--mint),var(--peri) 25%,var(--blush) 50%,var(--peri) 75%,var(--mint));
  --dark-ink:#0f1528;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(174,240,210,.28)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:12px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:500}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.08em;padding-right:.06em}
em,.grad-text{background:var(--grad-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 12s linear infinite}
.skip{position:absolute;top:-80px;left:16px;z-index:50;background:var(--mint);color:var(--dark-ink);padding:12px 18px;border-radius:0 0 14px 14px}
.skip:focus{top:0}

/* ---------- Ambient background ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;width:64vmax;aspect-ratio:1;border-radius:50%;will-change:transform}
.b1{top:-26vmax;left:-18vmax;background:radial-gradient(circle,rgba(110,210,175,.30),transparent 62%);animation:drift1 30s ease-in-out infinite alternate}
.b2{top:8vh;right:-28vmax;background:radial-gradient(circle,rgba(130,140,255,.28),transparent 62%);animation:drift2 36s ease-in-out infinite alternate}
.b3{bottom:-34vmax;left:14vw;background:radial-gradient(circle,rgba(255,168,150,.16),transparent 62%);animation:drift3 42s ease-in-out infinite alternate}
.b4{width:40vmax;top:40vh;left:-12vmax;background:radial-gradient(circle,rgba(200,170,255,.16),transparent 62%);animation:drift2 48s ease-in-out infinite alternate-reverse}
.grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);transform-origin:left;transform:scaleX(0);z-index:40}

/* ---------- Header ---------- */
header{position:sticky;top:14px;z-index:30;width:min(1260px,calc(100% - 32px));height:66px;margin:14px auto 0;padding:0 9px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:999px;background:rgba(17,23,42,.42);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);transition:background .5s,box-shadow .5s,border-color .5s;animation:drop 1s var(--ease) both}
header.scrolled{background:rgba(14,19,36,.78);border-color:var(--line-2);box-shadow:0 16px 48px -12px rgba(0,0,0,.5)}
.brand{font:600 22px var(--sans);letter-spacing:-.045em;display:flex;align-items:center;gap:8px}
.brand span{font-weight:400;margin-left:-5px;color:#b9c1d8}
.brand svg{width:28px;height:28px;margin-right:4px;fill:none;stroke:url(#brandGrad);stroke-width:1.8;stroke-linejoin:round;overflow:visible}
.brand svg path{transition:transform .6s var(--ease)}
.brand:hover svg path:nth-of-type(1){transform:translateY(-3px)}
.brand:hover svg path:nth-of-type(3){transform:translateY(2.5px)}
nav{display:flex;gap:4px;font-size:14px}
nav a{padding:9px 16px;border-radius:999px;color:#bcc3d8;transition:background .35s,color .35s}
nav a:hover,nav a.is-current{background:var(--surface-2);color:var(--ink)}
.small-cta{border:0;padding:12px 22px;border-radius:999px;background:var(--grad);color:var(--dark-ink);font-size:14px;font-weight:600;box-shadow:0 8px 24px -10px rgba(174,240,210,.6);transition:translate .35s var(--ease),box-shadow .35s}
.small-cta:hover{box-shadow:0 10px 30px -8px rgba(185,192,255,.7)}

/* ---------- Buttons & links ---------- */
.button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 28px;border-radius:999px;border:0;font-size:15px;font-weight:600;transition:transform .5s var(--ease),translate .35s var(--ease),box-shadow .5s}
.button:hover{transform:translateY(-3px)}
.button::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s var(--ease)}
.button:hover::after{transform:translateX(130%)}
.primary{background:var(--grad);color:var(--dark-ink);box-shadow:0 12px 34px -10px rgba(174,240,210,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.primary:hover{box-shadow:0 18px 44px -10px rgba(185,192,255,.65),inset 0 1px 0 rgba(255,255,255,.55)}
.arrow{display:inline-block;transition:transform .4s var(--ease)}
.button:hover .arrow{transform:translateX(4px)}
.outline{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.text-link{border:0;background:transparent;padding:8px 0;font-size:15px;display:inline-flex;align-items:center;gap:14px}
.plus{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);color:var(--mint);transition:transform .6s var(--ease),background .35s}
.plus svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.text-link:hover .plus{transform:rotate(90deg);background:rgba(174,240,210,.14)}

/* ---------- Eyebrows ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:ping 2.6s var(--ease) infinite}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;max-width:1400px;margin:auto;min-height:min(860px,calc(100svh - 80px));display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:64px 5% 56px}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--hx,72%) var(--hy,42%),rgba(185,192,255,.10),transparent 60%)}
.hero .eyebrow{padding:8px 16px 8px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.14em}
h1{font-size:clamp(52px,6.2vw,98px);line-height:1.02;letter-spacing:-.045em;margin:0 0 30px}
h1 .line{display:block}
.w{display:inline-block}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:1;padding:0 .08em .16em 0;margin-bottom:-.16em}
.intro{font-size:19px;line-height:1.75;color:var(--muted);max-width:500px;margin:0 0 38px}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-note{margin-top:60px;display:flex;flex-wrap:wrap;gap:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hero-note b{color:#3f4764;font-weight:400}
.anim{animation:rise 1.2s var(--ease) both;animation-delay:calc(var(--i,0)*95ms + 150ms)}
.hero .grad-text.anim{animation:rise 1.2s var(--ease) both,shimmer 12s linear infinite;animation-delay:calc(var(--i,0)*95ms + 150ms),0s}
.system.anim{animation-name:bloom;animation-duration:1.6s}

/* Diagram */
.system{position:relative;width:100%;aspect-ratio:1.08;min-width:0}
.system-label,.system-foot{position:absolute;left:6%;right:4%;display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.system-label{top:1%}
.system-foot{bottom:0;text-transform:none;letter-spacing:.01em;font-size:13px}
.counter b{display:inline-block;color:var(--mint);font-weight:600}
.counter b.tick{animation:tick .6s var(--ease)}
.spark{display:inline-block;font-size:22px;color:var(--blush);animation:twinkle 3.2s ease-in-out infinite}
.network{position:absolute;inset:0;width:100%;height:100%;overflow:visible;translate:calc(var(--px,0)*-6px) calc(var(--py,0)*-6px);transition:translate .9s var(--ease)}
.ring{fill:none;stroke:rgba(200,210,255,.14);stroke-width:1}
.ring-dash{stroke:rgba(174,240,210,.32);stroke-dasharray:2 8;stroke-linecap:round}
.spin,.spin-rev{transform-origin:300px 267px;animation:turn 70s linear infinite}
.spin-rev{animation-duration:90s;animation-direction:reverse}
.route{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.route-flow{fill:none;stroke:url(#routeGrad);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 10;opacity:.35;animation:flow 1.4s linear infinite;transition:opacity .6s,stroke-width .6s}
.route-flow.is-active{opacity:1;stroke-width:2.4}
.hub{position:absolute;left:50%;top:50.4%;width:150px;height:150px;margin:-75px 0 0 -75px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 22%,rgba(185,192,255,.28),rgba(20,27,50,.92) 68%);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 90px rgba(174,240,210,.16),inset 0 1px 0 rgba(255,255,255,.16);translate:calc(var(--px,0)*6px) calc(var(--py,0)*6px);transition:translate .9s var(--ease)}
.hub::before,.hub::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(174,240,210,.45);animation:pulse 4s var(--ease) infinite;pointer-events:none}
.hub::after{animation-delay:2s;border-color:rgba(185,192,255,.45)}
.hub-icon{width:38px;height:38px;margin-bottom:10px;animation:turn 24s linear infinite,breathe-s 4s ease-in-out infinite}
.hub strong{font-weight:500;font-size:16px}
.hub small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a3b4c9;margin-top:2px}
.node{position:absolute;display:flex;gap:10px;align-items:center;white-space:nowrap;padding:9px 16px 9px 9px;border-radius:999px;background:rgba(20,27,48,.62);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px -12px rgba(0,0,0,.55);font-size:13px;animation:float 7s ease-in-out infinite;translate:calc(var(--px,0)*16px) calc(var(--py,0)*16px);transition:translate .7s var(--ease),scale .6s var(--ease),background .5s,border-color .5s,box-shadow .5s}
.node span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);font-size:12px;font-weight:600;color:var(--mint);transition:background .5s,color .5s}
.node.is-active{scale:1.07;background:rgba(30,44,62,.8);border-color:rgba(174,240,210,.45);box-shadow:0 0 0 6px rgba(174,240,210,.06),0 18px 44px -12px rgba(174,240,210,.4)}
.node.is-active span{background:var(--grad);color:var(--dark-ink)}
.n1{left:0;top:25%}.n2{right:0;top:27%;animation-delay:-2s}.n3{left:3%;bottom:20%;animation-delay:-4s}.n4{right:0;bottom:22%;animation-delay:-1s}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;padding:30px 0;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;flex-shrink:0;align-items:center}
.marquee span{padding:0 30px;font:italic 400 clamp(20px,2.2vw,28px)/1.2 var(--serif);color:#c9cfe3;white-space:nowrap}
.marquee i{font-style:normal;font-size:14px;color:var(--mint);opacity:.7}
.marquee i:nth-of-type(3n+2){color:var(--peri)}
.marquee i:nth-of-type(3n){color:var(--blush)}

/* ---------- Sections ---------- */
.section{padding:130px 5%;max-width:1400px;margin:auto}
.section-heading{display:grid;grid-template-columns:1.4fr 1fr;column-gap:10%;align-items:end;margin-bottom:56px}
.section-heading .eyebrow{grid-column:1/-1;margin-bottom:22px;justify-self:start}
h2{font-size:clamp(34px,3.8vw,58px);line-height:1.1;letter-spacing:-.04em;margin:0}
.muted{color:var(--faint)}
.section-heading>p:last-child{font-size:17px;color:var(--muted);max-width:380px;margin-bottom:6px}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service{--d:0;position:relative;isolation:isolate;padding:32px 30px 14px;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.015));border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity 1s var(--ease) calc(var(--d)*110ms),translate 1s var(--ease) calc(var(--d)*110ms),filter 1s var(--ease) calc(var(--d)*110ms),transform .6s var(--ease),border-color .5s}
.service::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(174,240,210,.11),transparent 55%);opacity:0;transition:opacity .6s}
.service::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(280px circle at var(--mx,50%) var(--my,-20%),rgba(185,192,255,.75),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .6s}
.service:hover::before,.service:hover::after{opacity:1}
.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px;color:var(--faint);font-size:12px;letter-spacing:.14em}
.icon-blob{display:grid;place-items:center;width:60px;height:60px;border-radius:42% 58% 63% 37%/45% 42% 58% 55%;background:linear-gradient(135deg,rgba(174,240,210,.24),rgba(185,192,255,.14));animation:morph 11s ease-in-out infinite;transition:transform .7s var(--ease)}
.service:nth-child(2) .icon-blob{background:linear-gradient(135deg,rgba(185,192,255,.26),rgba(255,200,184,.12));animation-delay:-4s}
.service:nth-child(3) .icon-blob{background:linear-gradient(135deg,rgba(255,200,184,.22),rgba(174,240,210,.14));animation-delay:-8s}
.service:hover .icon-blob{transform:rotate(-10deg) scale(1.08)}
.icon-blob svg{width:26px;height:26px;fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service:nth-child(2) .icon-blob svg{stroke:var(--peri)}
.service:nth-child(3) .icon-blob svg{stroke:var(--blush)}
.service h3{font-size:26px;letter-spacing:-.03em;margin:0 0 14px}
.service>p{font-size:16px;line-height:1.75;color:var(--muted);min-height:112px;margin:0}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 18px}
.tags span{padding:6px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:#c7cde0}

/* Details (shared) */
details{border-top:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary .plus{width:30px;height:30px}
details[open]:not(.closing) summary .plus{transform:rotate(45deg);background:rgba(174,240,210,.16)}
.details-body{overflow:hidden}
.details-body p{margin:0 0 20px;font-size:15px;line-height:1.75;color:var(--muted)}

/* Workflow demo */
.possibilities{padding-top:40px}
.demo{position:relative;isolation:isolate;overflow:hidden;border-radius:34px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.demo::before{content:'';position:absolute;z-index:-1;width:560px;height:560px;right:-170px;bottom:-260px;background:radial-gradient(circle,rgba(174,240,210,.18),transparent 65%);animation:breathe 9s ease-in-out infinite;pointer-events:none}
.demo::after{content:'';position:absolute;z-index:-1;width:420px;height:420px;left:30%;top:-240px;background:radial-gradient(circle,rgba(185,192,255,.12),transparent 65%);animation:breathe 11s ease-in-out -4s infinite;pointer-events:none}
.tabs{position:relative;display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:calc(100% - 36px);margin:18px 18px 0;padding:6px;border-radius:26px;background:rgba(0,0,0,.2);border:1px solid var(--line)}
.tabs button{position:relative;z-index:1;border:0;background:none;padding:10px 20px;border-radius:999px;font-size:14px;color:var(--muted);white-space:nowrap;transition:color .4s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--dark-ink)}
.tabs:not(.has-pill) button[aria-selected=true]{background:var(--grad)}
.tab-pill{position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;background:var(--grad);box-shadow:0 8px 24px -8px rgba(174,240,210,.55)}
.tab-pill.ready{transition:transform .6s var(--ease),width .6s var(--ease),height .6s var(--ease)}
#workflow-panel{padding:50px 54px 58px;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;transition:opacity .35s var(--ease),filter .35s var(--ease),translate .35s var(--ease)}
#workflow-panel.swapping{opacity:0;filter:blur(8px);translate:0 10px}
.demo-copy .eyebrow{color:var(--faint);margin-bottom:18px}
.demo-copy h3{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:0 0 18px;white-space:pre-line}
.demo-copy>p{font-size:16px;color:var(--muted);margin-bottom:22px}
.human{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:999px;background:rgba(174,240,210,.08);border:1px solid rgba(174,240,210,.2);font-size:13px;color:#cdeede}
.check,.done{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint)}
.check svg,.done svg{width:14px;height:14px;fill:none;stroke:var(--dark-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow{position:relative}
.step{position:relative;overflow:hidden;display:grid;grid-template-columns:46px 1fr;column-gap:14px;align-items:center;padding:15px 56px 15px 15px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid var(--line);transition:background .6s,border-color .6s,box-shadow .6s,transform .7s var(--ease)}
.step-icon{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--surface-2);font-size:12px;font-weight:600;color:var(--faint);transition:background .6s,color .6s,border-radius .6s var(--ease)}
.step p{margin:0;font-size:15px;font-weight:500}
.step small{grid-column:2;font-size:13px;color:var(--faint);transition:color .6s}
.step.lit{transform:translateX(8px);background:rgba(174,240,210,.07);border-color:rgba(174,240,210,.32);box-shadow:0 16px 40px -20px rgba(174,240,210,.6)}
.step.lit .step-icon{background:var(--grad);color:var(--dark-ink);border-radius:50%}
.step.lit small{color:#b6c3d4}
.step.ai.lit::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);background-size:250% 100%;animation:sheen 1.8s linear infinite;pointer-events:none}
.done{position:absolute;right:18px;top:50%;margin-top:-12px;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.step.lit .done{transform:scale(1)}
.connector{position:relative;display:block;width:2px;height:28px;margin-left:37px;border-radius:2px;background:var(--line-2);overflow:hidden}
.connector b{position:absolute;inset:0;background:linear-gradient(var(--mint),var(--peri));transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.connector.lit b{transform:scaleY(1)}

/* Approach */
.approach{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid var(--line)}
.approach-title{position:sticky;top:130px;align-self:start}
.approach-title>p:not(.eyebrow){font-size:17px;color:var(--muted);max-width:430px;margin:28px 0 18px}
.timeline{position:relative}
.timeline::before,.timeline-fill{content:'';position:absolute;left:21px;top:48px;bottom:48px;width:2px;border-radius:2px;background:var(--line)}
.timeline-fill{background:linear-gradient(var(--mint),var(--peri),var(--blush));transform-origin:top;transform:scaleY(0)}
.timeline article{--d:0;position:relative;display:grid;grid-template-columns:44px 1fr;gap:26px;padding:26px 0}
.num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--faint);transition:background .6s,color .6s,border-color .6s,box-shadow .6s,transform .6s var(--ease)}
.timeline article.reached .num{background:var(--grad);color:var(--dark-ink);border-color:transparent;box-shadow:0 0 0 7px rgba(174,240,210,.08);transform:scale(1.06)}
.timeline h3{font-size:23px;letter-spacing:-.02em;margin:8px 0 8px}
.timeline p{margin:0;font-size:16px;color:var(--muted)}

/* Statement */
.statement{position:relative;isolation:isolate;padding:150px 5%;text-align:center;overflow:hidden}
.statement::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(960px,150vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,rgba(185,192,255,.14),rgba(174,240,210,.05) 40%,transparent 65%);animation:breathe 10s ease-in-out infinite}
.statement .eyebrow{justify-content:center}
.statement h2{font-size:clamp(36px,5.2vw,80px);line-height:1.08;max-width:1040px;margin:0 auto}
.statement>p:last-child{max-width:540px;margin:34px auto 0;font-size:17px;color:var(--muted)}
.words .sw{transition:opacity .5s ease,filter .5s ease}
.words .sw:not(.on){opacity:.16;filter:blur(1.5px)}
.words em{background:none;animation:none;padding:0}
.words em .sw{background:var(--grad-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 12s linear infinite;padding-right:.06em}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%}
.faq h2{font-size:clamp(34px,3.2vw,46px)}
.faq-list{display:grid;gap:12px;align-content:start}
.faq details{--d:0;border:1px solid var(--line);border-radius:24px;padding:0 24px;background:rgba(255,255,255,.03);transition:opacity 1s var(--ease) calc(var(--d)*110ms),translate 1s var(--ease) calc(var(--d)*110ms),filter 1s var(--ease) calc(var(--d)*110ms),background .5s,border-color .5s}
.faq details:hover{background:rgba(255,255,255,.05)}
.faq details[open]{background:rgba(255,255,255,.06);border-color:var(--line-2)}
.faq summary{font-size:17px;padding:22px 0}

/* Contact */
.contact{position:relative;isolation:isolate;overflow:hidden;max-width:1300px;margin:40px 5% 90px;padding:76px 66px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;border-radius:42px;border:1px solid transparent;background:linear-gradient(135deg,#17213b,#111729 55%,#1b1a33) padding-box,conic-gradient(from var(--angle),rgba(255,255,255,.08) 0%,var(--mint) 10%,var(--peri) 20%,rgba(255,255,255,.08) 32%,rgba(255,255,255,.08) 58%,var(--blush) 70%,rgba(255,255,255,.08) 82%) border-box;animation:spin-angle 9s linear infinite}
.orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.orb1{width:560px;height:560px;left:-160px;top:-260px;background:radial-gradient(circle,rgba(174,240,210,.22),transparent 65%);animation:orbit1 16s ease-in-out infinite alternate}
.orb2{width:520px;height:520px;right:-140px;bottom:-280px;background:radial-gradient(circle,rgba(185,192,255,.22),transparent 65%);animation:orbit2 19s ease-in-out infinite alternate}
.contact>.eyebrow{grid-column:1/-1;margin-bottom:0}
.contact h2{font-size:clamp(48px,6.4vw,96px);line-height:1}
.contact>div{padding-left:10%;align-self:center}
.contact p:not(.eyebrow){font-size:19px;color:#c3cadc;margin-bottom:28px}
.contact small{display:block;margin-top:16px;font-size:13px;color:var(--faint)}

footer{max-width:1400px;margin:auto;padding:32px 5% 50px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
footer p{margin:0}
footer .brand{font-size:20px}

/* ---------- Reveal on scroll (plays once) ---------- */
:where(.reveal){transition:opacity 1s var(--ease),translate 1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.js-motion .reveal:not(.visible){opacity:0;translate:0 36px;filter:blur(8px)}

/* ---------- Dialog ---------- */
dialog{width:min(580px,calc(100% - 32px));max-height:90dvh;padding:40px;border-radius:32px;border:1px solid var(--line-2);background:linear-gradient(160deg,#18213a,#10162a);color:var(--ink);box-shadow:0 40px 120px rgba(0,0,0,.6)}
dialog[open]{animation:pop .55s var(--ease)}
dialog::backdrop{background:rgba(6,9,20,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
dialog[open]::backdrop{animation:fade .5s ease}
dialog h2{font-size:42px;margin-bottom:18px}
dialog p{font-size:14px;color:var(--muted)}
.close{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);font-size:22px;line-height:1;transition:transform .5s var(--ease),background .3s}
.close:hover{transform:rotate(90deg);background:rgba(255,255,255,.1)}
label{display:block;margin:20px 0 8px;font-size:14px}
select,textarea{width:100%;padding:13px 15px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink);font:15px/1.6 var(--sans);transition:border-color .3s,box-shadow .3s,background .3s}
select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23aef0d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
select option{background:#141b30;color:var(--ink)}
select:focus,textarea:focus{outline:none;border-color:rgba(174,240,210,.6);background-color:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(174,240,210,.14)}
textarea{resize:vertical}
textarea::placeholder{color:var(--faint)}
form>.button{margin-top:26px}
.privacy{font-size:12px!important;margin-top:14px}
#brief-result{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);animation:rise .7s var(--ease)}
#brief-result h3{font-size:19px}
pre{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(0,0,0,.2);font:13px/1.7 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;color:#c6d3de}

/* ---------- Keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(.45em);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes bloom{from{opacity:0;transform:scale(.9);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes drop{from{opacity:0;transform:translateY(-24px)}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes drift1{to{transform:translate(20vw,16vh) scale(1.18)}}
@keyframes drift2{to{transform:translate(-18vw,22vh) scale(.88)}}
@keyframes drift3{to{transform:translate(16vw,-20vh) scale(1.12)}}
@keyframes orbit1{to{transform:translate(160px,120px) scale(1.1)}}
@keyframes orbit2{to{transform:translate(-180px,-90px) scale(.9)}}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.14);opacity:.75}}
@keyframes breathe-s{50%{scale:.86}}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(174,240,210,.55)}70%,100%{box-shadow:0 0 0 10px rgba(174,240,210,0)}}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes tick{from{opacity:0;transform:translateY(10px)}}
@keyframes twinkle{50%{opacity:.45;transform:scale(.75) rotate(45deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37%/45% 42% 58% 55%}33%{border-radius:63% 37% 44% 56%/55% 60% 40% 45%}66%{border-radius:37% 63% 52% 48%/38% 45% 55% 62%}}
@keyframes sheen{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes spin-angle{to{--angle:360deg}}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.95)}}
@keyframes fade{from{opacity:0}}

/* ---------- Responsive ---------- */
@media(min-width:1520px){.contact{margin-inline:auto}}
@media(max-width:1080px){
  nav a{padding:8px 12px}
  .hero{gap:10px;padding-inline:4%}
  .hub{width:120px;height:120px;margin:-60px 0 0 -60px}
  .hub-icon{width:30px;height:30px;margin-bottom:6px}
  .hub strong{font-size:14px}
  .node{font-size:12px;padding:7px 12px 7px 7px}
  .node span{width:24px;height:24px}
  #workflow-panel{padding:36px;gap:36px}
  .approach{gap:7%}
}
@media(max-width:900px){
  .services{grid-template-columns:1fr;gap:16px}
  .service>p{min-height:0}
  .service-top{margin-bottom:26px}
  #workflow-panel{grid-template-columns:1fr}
}
@media(max-width:760px){
  html{scroll-padding-top:90px}
  header{top:10px;height:60px;margin-top:10px;width:calc(100% - 24px);padding:0 7px 0 18px}
  nav{display:none}
  .brand{font-size:20px}
  .small-cta{padding:10px 18px;font-size:13px}
  .hero{grid-template-columns:1fr;min-height:0;gap:44px;padding:52px 6% 34px}
  .hero .eyebrow{letter-spacing:.1em;border-radius:20px;line-height:1.5}
  .dot{flex:none}
  .hero-note{gap:10px;letter-spacing:.1em}
  h1{font-size:clamp(46px,13.5vw,66px)}
  .intro{font-size:17px}
  .hero-actions{gap:18px}
  .hero-note{margin-top:34px}
  .system{max-width:480px;margin:auto}
  .hub{width:104px;height:104px;margin:-52px 0 0 -52px}
  .hub-icon{width:24px;height:24px;margin-bottom:4px}
  .hub strong{font-size:13px}
  .hub small{letter-spacing:.04em}
  .n1{left:0;top:17%}.n2{top:21%}.n3{left:0;bottom:12%}.n4{bottom:16%}
  .hub small{font-size:12px;letter-spacing:.08em}
  .marquee{padding:22px 0}
  .section{padding:84px 6%}
  .possibilities{padding-top:20px}
  .section-heading{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
  .section-heading .eyebrow{margin-bottom:0}
  h2{font-size:clamp(34px,9.5vw,44px)}
  .service{padding:28px 24px 12px;border-radius:26px}
  .demo{border-radius:28px}
  .tabs{margin:12px 12px 0;max-width:calc(100% - 24px)}
  .tabs button{padding:9px 14px;font-size:13px}
  #workflow-panel{padding:28px 20px 30px;gap:30px}
  .demo-copy h3{font-size:27px}
  .step{padding-right:48px}
  .done{right:14px}
  .approach{grid-template-columns:1fr;gap:26px}
  .approach-title{position:static}
  .statement{padding:100px 6%}
  .faq{grid-template-columns:1fr;gap:28px}
  .faq details{padding:0 20px}
  .faq summary{font-size:16px}
  .contact{margin:20px 4% 56px;padding:44px 26px;grid-template-columns:1fr;border-radius:30px}
  .contact h2{font-size:clamp(46px,14vw,66px)}
  .contact>div{padding-left:0}
  .contact p:not(.eyebrow){font-size:17px}
  footer{flex-wrap:wrap;padding-inline:6%}
  footer p{order:3;flex-basis:100%}
  dialog{padding:32px 22px;border-radius:26px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .signal{display:none}
}