:root{
  /* tokens mirror NewayTheme.swift (app design system) */
  --accent:#3b9bff; --accent-press:#2e86e6; --accent-soft:rgba(59,155,255,.14); --accent-rim:rgba(59,155,255,.42); --accent-text:#8fc4ff;
  --bg:#1a1a1c; --card:#1c1c1e; --field:#2a2a2c; --tile:#2c2c2e;
  --line:rgba(255,255,255,.10); --rim:rgba(255,255,255,.16);
  --fg:#fcfcfe; --muted:rgba(235,235,245,.66); --faint:rgba(235,235,245,.34);
  --ok:#34e27a; --warn:#ffb23e; --err:#ff5a52;
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:24px;
  --sans:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.32,.72,0,1);   /* CSS analog of the app's spring(.32/.86) */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:linear-gradient(180deg,#161618 0%,#1a1a1c 46%,#0e0e10 100%) fixed;
  color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}
@media(max-width:600px){.wrap{padding:0 20px;}}
.lab{font:590 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.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;}

/* nav — dark-glass bar: blur + hairline + top specular rim */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px) saturate(140%);background:rgba(20,20,22,.72);border-bottom:0.5px solid var(--line);box-shadow:inset 0 1px 0 var(--rim);}
nav .row{display:flex;align-items:center;gap:14px;height:62px;}
nav .logo{display:flex;align-items:center;gap:11px;font:600 17px/1 var(--sans);letter-spacing:-.01em;}
nav .logo img{width:28px;height:28px;border-radius:8px;}
nav .links{display:flex;gap:26px;margin-left:30px;}
nav .links a{font-size:14px;color:var(--muted);font-weight:500;transition:color .2s var(--spring);}
nav .links a:hover{color:var(--fg);}
nav .sp{flex:1;}

/* buttons — accent fill, navy text, top rim; hover is subtle (no glow bloom) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:590 14px/1 var(--sans);padding:11px 18px;border-radius:var(--r-m);background:var(--accent);color:#08131f;border:0;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px rgba(59,155,255,.28);transition:transform .18s var(--spring),background .18s var(--spring);}
.btn:hover{transform:translateY(-1px);background:var(--accent-press);}
.btn:active{transform:translateY(0);}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--fg);border:0.5px solid var(--line);box-shadow:inset 0 1px 0 var(--rim);}
.btn.ghost:hover{background:rgba(255,255,255,.1);}

.hero{padding:88px 0 30px;text-align:center;position:relative;background:radial-gradient(680px 360px at 50% -60px, rgba(59,155,255,.08), transparent 62%);}
h1{font:600 clamp(40px,6vw,72px)/1.04 var(--sans);letter-spacing:-.02em;text-wrap:balance;}
.hero p.sub{font:400 clamp(17px,2vw,20px)/1.5 var(--sans);color:var(--muted);max-width:34ch;margin:22px auto 0;text-wrap:balance;}
.hero .cta{margin-top:34px;}
.capture{display:flex;gap:10px;max-width:480px;margin:0 auto;}
.capture input{flex:1;min-width:0;height:54px;padding:0 18px;border-radius:var(--r-m);background:var(--field);border:0.5px solid var(--line);color:var(--fg);font:400 15px/1 var(--sans);outline:none;transition:border-color .2s var(--spring),box-shadow .2s var(--spring);}
.capture input::placeholder{color:var(--faint);}
.capture input:focus{border-color:var(--accent-rim);box-shadow:0 0 0 3px var(--accent-soft);}
.capture input:invalid:not(:placeholder-shown){border-color:var(--err);}
.capture .btn{height:54px;padding:0 24px;}
@media(max-width:520px){.capture{flex-direction:column;}.capture .btn{height:52px;}}
.trust{margin-top:12px;font-size:12.5px;color:var(--faint);}
.winline{margin-top:12px;font-size:13.5px;color:var(--faint);}
.winline a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.winline a:hover{color:var(--fg);}
.capdone{max-width:480px;margin:0 auto;display:none;align-items:center;gap:11px;justify-content:center;height:54px;padding:0 20px;border-radius:var(--r-m);background:rgba(52,226,122,.12);border:0.5px solid rgba(52,226,122,.34);font:590 15px/1 var(--sans);}
.capdone .ck{width:24px;height:24px;border-radius:50%;background:var(--ok);color:#06210f;display:flex;align-items:center;justify-content:center;font-weight:700;}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.04);border:0.5px solid var(--line);box-shadow:inset 0 1px 0 var(--rim);padding:7px 14px;border-radius:999px;margin-bottom:30px;}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:breathe 3s var(--spring) infinite;}
@keyframes breathe{0%,100%{opacity:.5;}50%{opacity:1;}}

/* ── product stage: cool dark-glass, single accent ── */
.stage{margin:52px auto 0;max-width:1000px;border-radius:var(--r-xl);background:linear-gradient(180deg,#1a1d24,#0d0f14);border:0.5px solid var(--line);box-shadow:inset 0 1px 0 var(--rim),0 50px 120px -30px rgba(0,0,0,.85);overflow:hidden;}
.topbar{height:32px;display:flex;align-items:center;gap:8px;padding:0 14px;background:rgba(0,0,0,.4);border-bottom:0.5px solid var(--line);}
.topbar i{width:11px;height:11px;border-radius:50%;}   /* native macOS traffic-lights keep their own colors */
.topbar .mb{flex:1;display:flex;justify-content:flex-end;gap:16px;font:500 11px/1 var(--sans);color:var(--muted);}
.desk{position:relative;min-height:474px;background:radial-gradient(680px 300px at 50% -24px, rgba(59,155,255,.06), transparent 62%),#0e0e10;padding:0 20px 28px;display:flex;justify-content:center;align-items:flex-start;}

/* the notch — a DETACHED floating pill (matches the live app), + the signature waveform lens */
.notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:150px;height:30px;background:#000;border-radius:15px;z-index:6;display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 22px rgba(59,155,255,.14);}
.notch i{width:3px;border-radius:2px;background:linear-gradient(180deg,#afd6ff,var(--accent));box-shadow:0 0 5px var(--accent-rim);transform-origin:center;animation:wave 1.15s var(--spring) infinite alternate;}
.notch i:nth-child(1){height:6px;animation-delay:0s}
.notch i:nth-child(2){height:13px;animation-delay:.12s}
.notch i:nth-child(3){height:9px;animation-delay:.24s}
.notch i:nth-child(4){height:13px;animation-delay:.36s}
.notch i:nth-child(5){height:6px;animation-delay:.48s}
@keyframes wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

/* the hub — TWO free-floating cards with a gap (live app), not one joined container */
.hub{margin-top:66px;background:transparent;display:flex;align-items:stretch;gap:14px;overflow:visible;z-index:4;}
.list{width:296px;padding:6px 2px 8px;display:flex;flex-direction:column;background:rgba(11,11,13,.72);backdrop-filter:blur(24px) saturate(140%);border:0.5px solid var(--line);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 var(--rim),0 24px 60px -20px rgba(0,0,0,.72);}
.composer{margin:0 8px 2px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-s);background:rgba(255,255,255,.05);border:0.5px solid var(--line);}
.composer .ph{font-size:13px;color:var(--faint);}
.ico{width:14px;height:14px;flex:0 0 14px;}
.sec{font:590 9px/1 var(--sans);letter-spacing:.12em;color:var(--faint);padding:10px 14px 4px;}
.rows{padding:0 8px;}
.rowi{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-s);}
.rowi.hover{background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -6px rgba(0,0,0,.5);}
.rowi .st{width:13px;height:13px;flex:0 0 13px;}
.rowi .tt{flex:1;min-width:0;}
.rowi .t1{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rowi .t2{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.rowi .chev{width:9px;height:9px;color:var(--faint);}
.dotring{width:13px;height:13px;border:1.6px dotted var(--accent);border-radius:50%;flex:0 0 13px;box-shadow:0 0 10px rgba(59,155,255,.35);}
.detail{width:330px;padding:16px;border-radius:var(--r-l);background:#141416;border:0.5px solid rgba(255,255,255,.06);box-shadow:0 24px 60px -20px rgba(0,0,0,.72);display:flex;flex-direction:column;gap:8px;}
.dhead{display:flex;align-items:flex-start;gap:8px;}
.dhead .dt{font:590 14px/1.25 var(--sans);color:var(--fg);flex:1;}
.badge{font:590 10px/1 var(--sans);padding:3px 8px;border-radius:20px;white-space:nowrap;}
/* detail = finished-task result (live app): green status pill, Steps row, RESULT, primary open button, follow-up field */
.badge.done{color:#0c321a;background:linear-gradient(180deg,#72d691,#49ac6a);border:0;box-shadow:0 0 6px rgba(95,205,130,.26);}
.dsteps{display:flex;align-items:center;justify-content:space-between;font:590 11px/1 var(--sans);color:var(--muted);padding:9px 0;border-top:0.5px solid var(--line);border-bottom:0.5px solid var(--line);}
.dsteps .chev2{width:12px;height:12px;color:var(--faint);}
.reslabel{display:flex;align-items:center;gap:7px;font:590 9.5px/1 var(--sans);letter-spacing:.12em;color:var(--muted);margin-top:8px;}
.gdot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(52,226,122,.5);}
.restext{font:400 12px/1.5 var(--sans);color:var(--muted);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
.openbtn{display:flex;align-items:center;gap:9px;font:590 12.5px/1 var(--sans);color:#eaf4ff;background:var(--accent);border-radius:var(--r-m);padding:11px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(59,155,255,.28);}
.openbtn svg{width:15px;height:15px;flex:0 0 15px;}
.dfoot{display:flex;align-items:center;gap:8px;margin-top:auto;padding:9px 12px;border-radius:var(--r-s);background:rgba(255,255,255,.05);border:0.5px solid var(--line);}
.dfoot .ph{flex:1;font-size:12px;color:var(--faint);}
.dfoot svg{width:14px;height:14px;color:var(--faint);flex:0 0 14px;}

section{padding:84px 0;position:relative;}
h2{font:600 clamp(28px,4vw,44px)/1.08 var(--sans);letter-spacing:-.018em;text-wrap:balance;}

/* say — two modes, differentiated by label not hue (both dots accent) */
.says{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:44px;}
@media(max-width:760px){.says{grid-template-columns:1fr;gap:24px;}}
.saycol h4{font:590 15px/1 var(--sans);display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--fg);}
.saycol h4 .d{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.phr{display:flex;flex-direction:column;gap:9px;}
.phr div{font:400 15px/1.4 var(--sans);color:var(--fg);background:var(--card);border:0.5px solid var(--line);box-shadow:inset 0 1px 0 var(--rim);border-radius:var(--r-m);padding:13px 15px;}
.phr div::before{content:"\201C";color:var(--faint);margin-right:1px;}
.phr div::after{content:"\201D";color:var(--faint);margin-left:1px;}
.phr .ag::before{content:"⌥ агент · ";color:var(--accent-text);font:590 11px/1 var(--mono);letter-spacing:.03em;}
.phr .ag::after{content:"";}
html[lang="en"] .phr .ag::before{content:"⌥ agent · ";}
html[lang="es"] .phr .ag::before{content:"⌥ agente · ";}

/* feature + after-install cards */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;}
@media(max-width:760px){.steps{grid-template-columns:1fr;}}
.step{background:var(--card);border:0.5px solid var(--line);box-shadow:inset 0 1px 0 var(--rim);border-radius:var(--r-l);padding:24px 22px;}
.step .n{font:590 18px/1 var(--sans);color:var(--accent);}
.step h4{font:590 19px/1.1 var(--sans);margin:12px 0 8px;letter-spacing:-.01em;color:var(--fg);}
.step p{font:400 14.5px/1.55 var(--sans);color:var(--muted);}
.step p b{color:var(--fg);font-weight:590;}

.final{text-align:center;padding:86px 0 26px;}
.final h2{font-size:clamp(32px,5vw,56px);}
footer{border-top:0.5px solid var(--line);padding:30px 0;margin-top:56px;}
footer .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
footer .logo{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);}
footer .muted{color:var(--faint);font-size:13px;}

/* language switcher */
.langsw{display:flex;align-items:center;gap:6px;font:590 13px/1 var(--sans);}
.langsw a{color:var(--faint);transition:color .2s var(--spring);}
.langsw a:hover{color:var(--fg);}
.langsw a.on{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;}
.langsw .sep{color:rgba(255,255,255,.2);}
@media(max-width:600px){nav .links{display:none;}}

/* scroll-reveal on the house curve */
.rise{opacity:0;transform:translateY(18px);transition:opacity .5s var(--spring),transform .5s var(--spring);}
.rise.in{opacity:1;transform:none;}

/* accessibility floor */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.capture input:focus-visible{outline:none;}

/* reduced-motion: a designed resting state, not a hard freeze — the wave settles mid-amplitude */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .rise{opacity:1;transform:none;}
  .notch i{animation:none;transform:scaleY(.7);}
  .pill .dot{opacity:.8;}
}