@font-face{font-family:"Moodern";src:url(/fonts/moodern.woff) format("woff"),url(/fonts/moodern.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
html,body{margin:0}
/* SYNQ landing · four full screens over one fixed particle field; gold accent from the core. */
:root{
  color-scheme: dark;
  --bg:#000;
  --fg:#f2f2f2;
  --dim:#9a9a9a;
  --faint:#5e5e5e;
  --line:rgba(255,255,255,.14);
  --gold:#ffbf5a;
  --ok:#7fd88f;
  --sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--disp:"Moodern","Space Grotesk",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gx:max(16px, 2.8vw, env(safe-area-inset-left,0px));
  --gxr:max(16px, 2.8vw, env(safe-area-inset-right,0px));
  --col:57%;
}
html{scroll-snap-type:y proximity}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px;border-radius:4px}

#field{position:fixed;inset:0;display:block;z-index:0}
main{position:relative;z-index:2}
.screen{position:relative;height:100vh;height:100svh;scroll-snap-align:start}

/* header */
header{position:fixed;left:0;right:0;top:0;z-index:6;padding:calc(env(safe-area-inset-top,0px) + clamp(18px,3.4vh,34px)) var(--gxr) 0 var(--gx);display:flex;align-items:center}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:400;font-size:clamp(22px,1.8vw,30px);letter-spacing:.02em}
.logo svg{width:clamp(22px,1.8vw,30px);height:auto;overflow:visible}
nav{position:absolute;left:var(--col);right:calc(var(--gxr) + 60px);display:flex;gap:clamp(28px,5vw,90px);font-size:clamp(13px,1vw,16px)}
nav a{display:inline-flex;align-items:center;gap:6px;transition:opacity .3s}
nav a:not(.on){opacity:.55}
nav a.on::after{content:"";width:14px;height:1.5px;background:currentColor}
.go{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:clamp(12px,.9vw,14px)}
.go span{width:clamp(24px,1.8vw,30px);aspect-ratio:1;border:1.4px solid var(--fg);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s}
.go:hover span{background:var(--fg);color:var(--bg)}
.go svg{width:52%}

/* 01 hero */
.intro{position:absolute;left:var(--col);top:31%;z-index:4;width:min(34vw,580px)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);margin-bottom:22px}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}
.intro h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(34px,3.6vw,62px);line-height:1.04;letter-spacing:0;text-wrap:pretty}
.intro u,.foot u{text-decoration-thickness:1px;text-underline-offset:.18em}
.intro .sub{margin:18px 0 0;max-width:30em;font-size:clamp(12px,.95vw,15px);line-height:1.55;color:var(--dim)}
.intro > :nth-child(4){animation-delay:.65s}
.cta{display:flex;align-items:center;justify-content:space-between;margin-top:clamp(28px,5vh,52px);max-width:min(27vw,440px)}
.cta a{font-size:clamp(11px,.8vw,13px);text-decoration:underline;text-underline-offset:3px;display:inline-flex;gap:6px;align-items:center}
.cta a::after{content:"";width:10px;height:1px;background:currentColor}
.dots{display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--fg)}

.log{position:absolute;left:var(--gx);right:var(--gxr);bottom:clamp(96px,15vh,140px);z-index:4;display:grid;grid-template-columns:22% 1fr auto;align-items:baseline;gap:16px;font-family:var(--mono);font-size:clamp(10px,.72vw,12px)}
.log .who{color:var(--gold)}
.log .line{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.log .line::after{content:"▍";margin-left:2px;animation:blink 1s steps(1) infinite;color:var(--dim)}
.log .ms{color:var(--dim);font-variant-numeric:tabular-nums}
.foot{position:absolute;left:var(--gx);right:var(--gxr);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(18px,3.4vh,34px));z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.foot p{margin:0;max-width:34em;font-size:clamp(9.5px,.66vw,11px);line-height:1.5;color:var(--dim)}
.foot .role{text-align:right;font-size:clamp(8.5px,.6vw,10px);letter-spacing:.04em;text-transform:uppercase;line-height:1.5;color:var(--dim)}

/* glass badge */
.badge{position:fixed;z-index:3;width:clamp(64px,5.6vw,96px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(60% 60% at 40% 35%,rgba(255,255,255,.22),rgba(255,255,255,.06) 60%,rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -8px 16px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);pointer-events:none}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge svg text{font:600 6.4px var(--sans);letter-spacing:.12em;fill:rgba(255,255,255,.85);text-transform:uppercase}
.badge::after{content:"";position:absolute;left:50%;top:50%;width:18%;height:18%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff4d6,#ffbf5a 55%,rgba(255,170,60,0) 72%)}
@keyframes spin{to{transform:rotate(360deg)}}

/* progress */
.progress{position:fixed;z-index:5;right:var(--gxr);top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.progress i{display:block;width:90px;height:1px;background:var(--line);position:relative}
.progress b{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}

/* 02-04 blocks */
.block{position:absolute;top:50%;transform:translateY(-50%);width:min(40vw,620px)}
.capabilities .block{left:var(--gx)}
.loop .block{left:var(--col);width:min(36vw,560px)}
.eyebrow{display:block;font-size:clamp(12px,.9vw,15px);color:var(--dim);margin-bottom:18px}
.block h2{margin:0 0 clamp(24px,4vh,44px);font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.2vw,54px);line-height:1.05;letter-spacing:0;text-wrap:balance}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.list span{grid-row:span 2;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:3px;font-family:var(--mono)}
.list b{font-family:var(--disp);font-weight:400;font-size:clamp(20px,1.5vw,26px)}
.list em{font-style:normal;color:var(--dim);font-size:clamp(12px,.85vw,14px);margin-top:4px;line-height:1.5}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps div{background:#000;padding:18px 18px 20px;min-width:0}
.steps span{font-family:var(--mono);font-size:11px;color:var(--gold)}
.steps b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(22px,1.6vw,28px);margin:10px 0 6px}
.steps em{font-style:normal;color:var(--dim);font-size:13px;line-height:1.5}
.loop .cta,.capabilities .cta{max-width:none}
.block > *{transition:opacity .8s, transform 1s cubic-bezier(.2,.7,.2,1)}
.screen:not(.in) .block > *{opacity:0;transform:translateY(24px)}
.block > :nth-child(2){transition-delay:.08s}.block > :nth-child(3){transition-delay:.16s}.block > :nth-child(4){transition-delay:.24s}

/* 04 try it */
.try .block{left:var(--col);width:min(38vw,600px)}
.chat{border:1px solid var(--line);border-radius:18px;background:rgba(10,10,10,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;height:min(52vh,460px)}
.chat-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim)}
.chat-top b{font-weight:500;color:var(--fg);display:inline-flex;align-items:center;gap:8px}
.chat-top b i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.feed{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55;min-height:0;overscroll-behavior:contain}
.msg{max-width:88%}
.msg.me{align-self:flex-end;background:#1b1b1b;border:1px solid var(--line);padding:9px 13px;border-radius:14px 14px 4px 14px}
.msg.ai{align-self:flex-start}
.step{font-family:var(--mono);font-size:12px;color:var(--dim);display:flex;gap:8px;align-items:center}
.step::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.step.done::before{background:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.chips button{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--dim);transition:color .3s,border-color .3s}
.chips button:hover{color:var(--fg);border-color:rgba(255,255,255,.4)}
.ask{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ask input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:8px 6px;font-size:14px}
.ask input::placeholder{color:var(--faint)}
.ask button{width:36px;height:36px;border-radius:50%;background:var(--fg);color:#000;display:grid;place-items:center;flex:none;transition:opacity .3s}
.ask button:disabled{opacity:.35;cursor:default}
.ask button svg{width:15px}
.note{margin-top:12px;font-size:11px;color:var(--faint)}

/* load-in */
.intro > *,.log,.foot,header{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
header{animation-delay:.1s}.intro > :nth-child(1){animation-delay:.25s}.intro > :nth-child(2){animation-delay:.35s}.intro > :nth-child(3){animation-delay:.55s}.log{animation-delay:.7s}.foot{animation-delay:.8s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

@media (max-width:900px){
  :root{--col:var(--gx)}
  nav,.go em{display:none}
  .intro{left:var(--gx);right:var(--gxr);width:auto;top:46%}
  .intro h1{font-size:clamp(26px,5.4vw,36px)}
  .tag{margin-bottom:14px}
  .cta{max-width:none}
  .log{grid-template-columns:auto 1fr;bottom:clamp(110px,17vh,150px)}
  .log .ms{display:none}
  .foot{flex-direction:column;align-items:stretch;gap:10px}
  .block,.capabilities .block,.loop .block,.try .block{left:var(--gx);right:var(--gxr);width:auto;top:auto;bottom:clamp(30px,5vh,60px);transform:none}
  .progress{display:none}
  .steps{grid-template-columns:1fr 1fr}
  .steps div{padding:12px}
  .steps em{display:none}
  .chat{height:min(56vh,440px)}
  .try .block h2{display:none}
}
@media (max-width:520px){
  .intro{top:43%}
  .intro h1{font-size:clamp(24px,7vw,30px)}
  .log{bottom:150px}
  .list li{padding:11px 0}
  .list em{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}html{scroll-snap-type:none}}

/* mobile fit for the display face: shape in the top third, copy below it, nothing under the header */
@media (max-width:900px){
  .block,.capabilities .block,.loop .block,.try .block{top:auto;bottom:clamp(22px,4vh,48px);max-height:calc(100svh - 300px);overflow:auto;transform:none;overscroll-behavior:contain}
  .block h2{font-size:clamp(24px,5.8vw,30px);line-height:1.06;margin-bottom:14px}
  .eyebrow{margin-bottom:8px}
  .list li{padding:9px 0}.list b{font-size:18px}.list em{display:none}
  .steps b{font-size:19px;margin:5px 0 0}.steps em{display:none}.steps div{padding:10px 12px}
  .try .block h2{display:none}
  .chat{height:min(46vh,400px)}
  .intro{top:44%}
}
@media (max-height:700px) and (max-width:900px){.block h2{font-size:22px}.list li{padding:7px 0}.chat{height:40vh}}