/* SEPVPN — site.css
   One dark theme. Light is the accent. Order: fonts → tokens → base → brand → header → buttons →
   chapters (hero, path, privacy, devices, access) → footer → floating CTA → motion → reduced → 404 */

@font-face{font-family:"Vazirmatn";src:url("/assets/fonts/Vazirmatn[wght].4e3fa217d3.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-latin[wght].3100e775e8.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0a0c10;--bg-2:#0f1217;--bg-3:#151921;
  --ink:#ece9e1;--ink-2:rgba(236,233,225,.66);--ink-3:rgba(236,233,225,.42);--ink-4:rgba(236,233,225,.2);
  --line:rgba(236,233,225,.11);--line-2:rgba(236,233,225,.2);
  --light:#f5f1e8;--on-light:#0a0c10;--live:#8fd3a8;
  --gutter:clamp(1.25rem,5vw,3rem);--wrap:68rem;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --dir:1;--p:0;--q:0;--dx:0px;--dy:0px;--s:1;--lw:0px;
}
[dir="rtl"]{--dir:-1}
:root[lang="fa"]{
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --h1:clamp(2.1rem,4.4vw + 1rem,5.2rem);--h1-lh:1.3;--h1-w:500;
  --h2:clamp(1.75rem,2.6vw + .9rem,3.6rem);--h2-lh:1.35;--h2-w:500;
  --ls:0;--body:1.0625rem;--body-lh:1.9;
}
:root[lang="en"]{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h1:clamp(2.4rem,5vw + 1rem,5.8rem);--h1-lh:1.04;--h1-w:600;
  --h2:clamp(1.9rem,2.8vw + 1rem,4rem);--h2-lh:1.1;--h2-w:600;
  --ls:-.03em;--body:1rem;--body-lh:1.6;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--body);line-height:var(--body-lh);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--light);outline-offset:4px;border-radius:999px}
::selection{background:var(--light);color:var(--on-light)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.icon{width:1.1em;height:1.1em;flex:none}
[dir="rtl"] .icon-dir{transform:scaleX(-1)}
.skip-link{position:absolute;top:-100%;inset-inline-start:1rem;z-index:100;padding:.6rem 1rem;border-radius:999px;background:var(--light);color:var(--on-light);font-weight:600}
.skip-link:focus{top:1rem}
h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:var(--h1-w);letter-spacing:var(--ls);text-wrap:balance;max-width:14ch;margin-inline:auto}
h2{font-size:var(--h2);line-height:var(--h2-lh);font-weight:var(--h2-w);letter-spacing:var(--ls);text-wrap:balance}
.sub{color:var(--ink-2);font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);text-wrap:pretty}

/* ---------- brand ---------- */
.wm{width:100%;height:auto;color:var(--ink)}
.mark{width:100%;height:auto;color:var(--ink)}
.mark-dot,.wm-dot{color:var(--light)}
.wm-dot{filter:drop-shadow(0 0 6px rgba(245,241,232,.9))}
html.reduce .wm-dot{display:none}

/* ---------- header ---------- */
.top{position:fixed;inset-inline:0;top:0;z-index:40;padding-top:env(safe-area-inset-top);transition:background .4s,border-color .4s}
.top::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .4s}
html.is-docked .top{background:color-mix(in srgb,var(--bg) 74%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.is-docked .top::after{opacity:1}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem;padding-inline:var(--gutter);max-width:none}
.top-logo{display:flex;align-items:center;gap:.7rem;height:100%}
.top-logo .mark{width:1.65rem;opacity:0;transform:scale(.6);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
html.is-docked .top-logo .mark,html.reduce .top-logo .mark,html:not(.js) .top-logo .mark,.page-404 .top-logo .mark{opacity:1;transform:none}
.top-wordmark{display:block;width:6.9rem}
html.js:not(.is-docked):not(.reduce) .top-wordmark:not(.is-static){visibility:hidden}
.top-actions{display:flex;align-items:center;gap:.75rem}
.lang{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line-2);border-radius:999px;font-family:"Inter",var(--font);direction:ltr}
.lang a,.lang span{display:inline-flex;align-items:center;justify-content:center;min-width:2.9rem;min-height:2.5rem;padding:0 .6rem;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.08em;line-height:1.4;text-align:center;color:var(--ink-3);transition:color .3s,background .3s}
.lang a:hover{color:var(--ink)}
.lang [aria-current]{background:var(--ink);color:var(--on-light)}
@media (max-width:767.98px){.top-actions .top-cta{display:none}.top-wordmark{width:6.1rem}}

/* ---------- chapter index (desktop) ---------- */
.chapters{position:fixed;inset-inline-end:1.4rem;top:50%;z-index:30;display:none;flex-direction:column;gap:.85rem;transform:translateY(-50%)}
@media (min-width:1100px){.chapters{display:flex}}
.chapters a{font-family:"Inter",var(--font);font-size:.68rem;letter-spacing:.14em;color:var(--ink-4);font-variant-numeric:tabular-nums;transition:color .4s;padding:.2rem}
.chapters a.is-cur{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border-radius:999px;font-weight:600;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn-light{background:var(--light);color:var(--on-light)}
.btn-light:hover{box-shadow:0 0 0 7px rgba(245,241,232,.08),0 12px 40px -12px rgba(245,241,232,.45)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn-lg{height:3.5rem;padding:0 2rem;font-size:1.05rem}
.btn-sm{height:2.5rem;padding:0 1.15rem;font-size:.9rem}

/* ---------- 01 hero (pinned: the wordmark docks into the header) ---------- */
.hero{position:relative;height:200vh;height:200svh}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(4rem + env(safe-area-inset-top)) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom))}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 42% at 50% 36%,rgba(245,241,232,.11),transparent 72%);opacity:calc(1 - var(--p))}
.hero-brand{position:relative;z-index:41;width:min(80vw,34rem);margin-top:clamp(2.5rem,14vh,9rem);transform-origin:50% 50%;will-change:transform;transform:translate(calc(var(--dx) * var(--p)),calc(var(--dy) * var(--p))) scale(calc(1 + (var(--s) - 1) * var(--p)))}
html.is-docked .hero-brand{visibility:hidden}
.hero-copy{position:relative;width:100%;max-width:46rem;margin-top:clamp(1.75rem,6vh,4rem);opacity:calc(1 - var(--p) * 1.8);transform:translateY(calc(var(--p) * -60px))}
.hero-sub{margin-top:1.1rem;color:var(--ink-2);font-size:clamp(1rem,.9rem + .4vw,1.2rem)}
.hero-actions{position:relative;margin-top:2.25rem;opacity:calc(1 - var(--p) * 1.8);transform:translateY(calc(var(--p) * -40px))}
.hero-hint{position:absolute;bottom:calc(1.4rem + env(safe-area-inset-bottom));inset-inline:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.12em;color:var(--ink-4);opacity:calc(1 - var(--p) * 3)}
.hint-line{width:1px;height:2.4rem;background:linear-gradient(var(--ink-4),transparent);transform-origin:top;animation:hint 2.2s var(--ease-io) infinite}
@keyframes hint{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(1.2rem);opacity:0}}
@media (max-width:767.98px){
  .hero-stage{justify-content:flex-start}
  .hero-brand{margin-top:clamp(3rem,16vh,10rem)}
  .hero-actions{margin-top:auto;margin-bottom:4.5rem;width:100%}
  .hero-actions .btn{width:100%}
}
@media (min-width:768px){
  .hero-stage{justify-content:center}
  .hero-brand{margin-top:0}
}
/* wordmark draws on at load */
html.js .wm-hero path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease-out) forwards}
.wm-hero path:nth-child(2){animation-delay:.08s}.wm-hero path:nth-child(3){animation-delay:.16s}
.wm-hero path:nth-child(4){animation-delay:.24s}.wm-hero path:nth-child(5){animation-delay:.32s}.wm-hero path:nth-child(6){animation-delay:.4s}
@keyframes draw{to{stroke-dashoffset:0}}
html.js .hero-copy,html.js .hero-actions,html.js .hero-hint{animation:rise 1s var(--ease-out) both}
html.js .hero-copy{animation-delay:.7s}html.js .hero-actions{animation-delay:.9s}html.js .hero-hint{animation-delay:1.4s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* once scrolling starts the scroll-linked values must win over the entry animation */
html.is-scrolled .hero-copy,html.is-scrolled .hero-actions,html.is-scrolled .hero-hint{animation:none}

/* ---------- 02 path (pinned: a line fills, light passes three waypoints) ---------- */
.path{position:relative;height:280vh;height:280svh}
.path-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(4rem + env(safe-area-inset-top)) var(--gutter) 2rem;max-width:var(--wrap);margin-inline:auto;overflow:hidden}
.path h2{max-width:18ch}
.line{position:relative;height:2px;margin-top:clamp(3.5rem,9vh,7rem);margin-inline:.5rem}
.line-track{position:absolute;inset:0;background:var(--line)}
.line-fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--q));transform-origin:0 50%;will-change:transform}
[dir="rtl"] .line-fill{transform-origin:100% 50%}
.line-dot{position:absolute;top:50%;inset-inline-start:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--light);box-shadow:0 0 0 5px rgba(245,241,232,.14),0 0 30px 8px rgba(245,241,232,.4);transform:translateX(calc(var(--q) * var(--lw) * var(--dir)));will-change:transform}
[dir="rtl"] .line-dot{margin:-6px -6px 0 0}
.waypoints{position:absolute;inset-inline:0;top:0}
.wp{position:absolute;top:0;inset-inline-start:var(--x);transform:translateX(calc(-50% * var(--dir)));display:flex;flex-direction:column;align-items:center;text-align:center;min-width:4.5rem}
.wp:nth-child(1){--x:4%}.wp:nth-child(2){--x:50%}.wp:nth-child(3){--x:96%}
.wp-dot{width:10px;height:10px;margin-top:-4px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink-4);transition:background .5s,border-color .5s,transform .5s var(--ease-out)}
.wp.is-on .wp-dot{background:var(--ink);border-color:var(--ink);transform:scale(1.15)}
.wp-k{margin-top:1.1rem;font-family:"Inter",var(--font);font-size:.68rem;letter-spacing:.14em;color:var(--ink-4);transition:color .5s}
.wp-t{font-size:clamp(1rem,.9rem + .5vw,1.25rem);color:var(--ink-4);transition:color .5s;line-height:1.5}
.wp.is-on .wp-k{color:var(--ink-3)}.wp.is-on .wp-t{color:var(--ink)}
.captions{position:relative;margin-top:clamp(5.5rem,13vh,8rem);min-height:5.6em;max-width:34ch}
.caption{position:absolute;inset-inline:0;top:0;color:var(--ink-2);font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);pointer-events:none}
.caption.is-on{opacity:1;transform:none}

/* ---------- 03 privacy (typographic statement, masked reveal) ---------- */
.privacy{position:relative;padding:clamp(7rem,20vh,13rem) 0;background:var(--bg-2);border-block:1px solid var(--line);overflow:hidden}
.privacy-glow{position:absolute;inset-inline:0;top:-20%;height:60%;pointer-events:none;background:radial-gradient(45% 55% at 50% 0%,rgba(245,241,232,.08),transparent 70%)}
.statement{font-size:clamp(2.2rem,4.6vw + .8rem,5rem);line-height:var(--h1-lh);font-weight:var(--h1-w);max-width:16ch}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--ease-out)}
.in .w>span{transform:none}
.w:nth-child(2)>span{transition-delay:.06s}.w:nth-child(3)>span{transition-delay:.12s}.w:nth-child(4)>span{transition-delay:.18s}
.w:nth-child(5)>span{transition-delay:.24s}.w:nth-child(6)>span{transition-delay:.3s}.w:nth-child(7)>span{transition-delay:.36s}
.lines{display:grid;margin-top:clamp(3rem,7vh,5rem);max-width:30rem;border-top:1px solid var(--line)}
.lines li{padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:clamp(1.1rem,1rem + .5vw,1.4rem);display:flex;align-items:center;gap:1rem}
.lines li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.honest{margin-top:2rem;max-width:36ch;color:var(--ink-3);font-size:var(--body)}

/* ---------- 04 devices (chips + app concept) ---------- */
.devices{padding:clamp(6rem,16vh,11rem) 0 clamp(4rem,10vh,7rem)}
.devices .sub{margin-top:1rem;max-width:30ch}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.chips li{padding:.55rem 1.05rem;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);font-family:"Inter",var(--font);font-size:.92rem;font-weight:500;letter-spacing:.01em}
.app{position:relative;width:min(100% - 2 * var(--gutter),24rem);margin:clamp(3rem,8vh,5rem) auto 0;padding:3rem 2rem 2.25rem;border:1px solid var(--line);border-radius:2rem;background:var(--bg-2);display:flex;flex-direction:column;align-items:center;gap:1.6rem;overflow:hidden;transition:border-color .6s,background .6s}
.app::before{content:"";position:absolute;inset:-40% -20% auto;height:90%;background:radial-gradient(50% 50% at 50% 50%,rgba(245,241,232,.14),transparent 70%);opacity:0;transition:opacity .8s var(--ease-out);pointer-events:none}
.app.is-on::before{opacity:1}
.app.is-on{border-color:var(--line-2)}
.app-mark{width:5.5rem;color:var(--ink-3);transition:color .6s,transform .8s var(--ease-out)}
.app.is-on .app-mark{color:var(--ink);transform:scale(1.06)}
.toggle{position:relative;width:5.4rem;height:3rem;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);transition:background .5s,border-color .5s,transform .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.toggle:active{transform:scale(.95)}
.knob{position:absolute;top:4px;inset-inline-start:4px;width:calc(3rem - 10px);height:calc(3rem - 10px);border-radius:50%;background:var(--ink-2);transition:transform .6s var(--ease-out),background .5s,box-shadow .5s}
.app.is-on .toggle{background:var(--bg-3);border-color:var(--live)}
.app.is-on .knob{background:var(--light);box-shadow:0 0 0 6px rgba(245,241,232,.08),0 0 24px rgba(245,241,232,.35);transform:translateX(calc(2.4rem * var(--dir)))}
.app-state{font-size:1.25rem;font-weight:600;color:var(--ink-3);transition:color .5s;line-height:1.3}
.app.is-on .app-state{color:var(--live)}
.app-hint{margin-top:-1rem;font-size:.78rem;letter-spacing:.06em;color:var(--ink-4);transition:opacity .4s}
.app.is-on .app-hint{opacity:0}
@media (max-width:767.98px){.app{width:100%;border-radius:0;border-inline:0;padding-block:3.5rem 3rem}}

/* ---------- 05 access ---------- */
.access{padding:clamp(6rem,16vh,11rem) 0 clamp(4rem,8vh,6rem);border-top:1px solid var(--line)}
.access .sub{margin-top:1rem}
.channels{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.soon{display:inline-flex;align-items:center;gap:.7rem;padding:.9rem 1.3rem;border:1px dashed var(--line-2);border-radius:999px;color:var(--ink-2);font-size:.95rem}
.soon-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:breathe 2.6s var(--ease-io) infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
.referral{margin-top:1.5rem;max-width:36ch;color:var(--ink-3)}
.faq{margin-top:clamp(3.5rem,8vh,6rem);max-width:34rem}
.faq h3{font-size:.78rem;letter-spacing:.12em;font-weight:500;color:var(--ink-4);margin-bottom:.5rem}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 0;cursor:pointer;font-size:1.05rem;color:var(--ink);-webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{color:var(--ink-4);transition:transform .4s var(--ease-out)}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-item p{padding:0 0 1.1rem;color:var(--ink-2);max-width:40ch}

/* ---------- footer ---------- */
.foot{padding:2.5rem 0 calc(2rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--ink-3);font-size:.85rem}
.foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.foot-logo{display:block;width:5.4rem;padding:.75rem 0;color:var(--ink-3)}
.foot-logo .wm{color:inherit}
@media (max-width:767.98px){.foot{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}}

/* ---------- floating CTA (mobile, after the hero docks) ---------- */
.fab{position:fixed;z-index:35;inset-inline:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));height:3.5rem;font-size:1.05rem;display:none;box-shadow:0 18px 50px -12px rgba(0,0,0,.7),0 0 0 1px rgba(245,241,232,.08)}
@media (max-width:767.98px){html.js.is-docked:not(.is-end) .fab{display:flex;animation:fab .6s var(--ease-out)}}
@keyframes fab{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- reveals ---------- */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
.lines .rv:nth-child(2){transition-delay:.1s}.lines .rv:nth-child(3){transition-delay:.2s}

/* ---------- reduced motion: static end states, nothing pinned, nothing travelling ---------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.reduce *,html.reduce *::before,html.reduce *::after{animation:none!important;transition:none!important}
html.reduce .hero{height:auto}
html.reduce .hero-stage{position:static;height:auto;min-height:100svh}
html.reduce .hero-brand{transform:none}
html.reduce .hero-copy,html.reduce .hero-actions,html.reduce .hero-glow{opacity:1;transform:none}
html.reduce .hero-hint{display:none}
html.reduce .wm-hero path{stroke-dashoffset:0}
html.reduce .path{height:auto}
html.reduce .path-stage{position:static;height:auto;padding-block:clamp(5rem,14vh,9rem)}
html.reduce .line-fill{transform:scaleX(1)}
html.reduce .line-dot{display:none}
html.reduce .wp .wp-dot{background:var(--ink);border-color:var(--ink)}
html.reduce .wp .wp-t{color:var(--ink)}
html.reduce .captions{min-height:0;display:grid;gap:.5rem}
html.reduce .caption{position:static;opacity:1;transform:none}
html.reduce .rv,html.reduce .w>span{opacity:1;transform:none}
html.reduce .top-logo .mark{opacity:1;transform:none}
html.reduce .mark-dot{opacity:0}

/* ---------- 404 ---------- */
.notfound{display:flex;flex-direction:column;gap:3rem;min-height:100svh;padding-block:2rem 3rem}
.notfound .top-logo .mark{opacity:1;transform:none}
.notfound-grid{display:grid;gap:3rem;margin-block:auto}
@media (min-width:900px){.notfound-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.notfound .k{font-family:"Inter",var(--font);font-size:.72rem;letter-spacing:.14em;color:var(--ink-4);margin-bottom:.75rem}
.notfound h1{font-size:var(--h2);margin-bottom:.75rem}
.notfound .btn{margin-top:1.5rem;height:3rem;padding:0 1.5rem}
.notfound [lang="en"]{font-family:"Inter",system-ui,sans-serif;--h1-lh:1.1;--h2-lh:1.1;--ls:-.02em}