/* ============================================================
   LimboVPN — landing. Тёплый, но строгий: нейтральная тёплая
   бумага (не «крем»), чистые поверхности, serif только в герое,
   остальное — Inter. Монохром, без цветных акцентов.
   Авто light/dark + ручной переключатель.
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#f5f4ef; --bg-soft:#edebe3; --elev:#ffffff;
  --ink:#1c1b17; --ink-2:#5d5a51; --ink-3:#8d897e;
  --line:#e7e4da; --line-2:#d9d5c9;
  --contrast-bg:#1c1b17; --contrast-fg:#f5f4ef;
  --ring:rgba(28,27,23,.22);
  --sh-1:0 1px 2px rgba(40,36,24,.04), 0 4px 14px rgba(40,36,24,.05);
  --sh-2:0 2px 6px rgba(40,36,24,.06), 0 18px 40px rgba(40,36,24,.09);
  --maxw:1080px; --r:14px; --r-lg:20px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme: dark;
  --bg:#181712; --bg-soft:#201e17; --elev:#211f18;
  --ink:#f1efe6; --ink-2:#a9a392; --ink-3:#7a7565;
  --line:#2e2b22; --line-2:#3a362b;
  --contrast-bg:#f1efe6; --contrast-fg:#181712;
  --ring:rgba(241,239,230,.26);
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.5), 0 22px 48px rgba(0,0,0,.55);
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#181712; --bg-soft:#201e17; --elev:#211f18;
  --ink:#f1efe6; --ink-2:#a9a392; --ink-3:#7a7565;
  --line:#2e2b22; --line-2:#3a362b;
  --contrast-bg:#f1efe6; --contrast-fg:#181712;
  --ring:rgba(241,239,230,.26);
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.5), 0 22px 48px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font-family:inherit}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:10px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap--narrow{max-width:760px}
em{font-style:italic}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  line-height:1;cursor:pointer;padding:12px 20px;border-radius:11px;border:1.5px solid transparent;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s,border-color .18s,color .18s}
.btn--lg{font-size:16px;padding:15px 26px}
.btn--ink{background:var(--ink);color:var(--bg);box-shadow:var(--sh-1)}
.btn--ink:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--line:hover{border-color:var(--ink)}
.btn--contrast{background:var(--contrast-fg);color:var(--contrast-bg)}
.btn--contrast:hover{transform:translateY(-1px);opacity:.92}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav__in{max-width:1160px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:22px;position:relative}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand__logo{width:24px;height:24px;background:var(--ink);
  -webkit-mask:url(assets/logo.svg?v=10) center/contain no-repeat;mask:url(assets/logo.svg?v=10) center/contain no-repeat}
.brand__name span{color:var(--ink-3)}
.nav__links{display:flex;gap:28px;margin-left:14px}
.nav__links a{color:var(--ink-2);font-weight:500;font-size:15px;transition:color .15s}
.nav__links a:hover{color:var(--ink)}
.nav__act{margin-left:auto;display:flex;align-items:center;gap:10px}
.icbtn,.lang{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line-2);
  background:transparent;color:var(--ink);cursor:pointer;border-radius:999px;transition:border-color .15s}
.icbtn{width:37px;height:37px}.icbtn:hover,.lang:hover{border-color:var(--ink)}
.lang{height:37px;padding:0 13px;font-weight:600;font-size:13px}
.icbtn .ic-moon{display:none}
:root[data-theme="dark"] .icbtn .ic-sun{display:none}
:root[data-theme="dark"] .icbtn .ic-moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .icbtn .ic-sun{display:none}
  :root:not([data-theme="light"]) .icbtn .ic-moon{display:block}}
.nav__cab{padding:10px 17px;font-size:14px}
.nav__links-cab,.nav__links-tg{display:none}
.burger{display:none;flex-direction:column;gap:5px;width:39px;height:37px;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--line-2);border-radius:999px;cursor:pointer}
.burger span{width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:.25s}
.nav.open .burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* hero */
.hero{padding:clamp(72px,12vh,140px) 22px clamp(56px,8vh,96px);text-align:center}
.hero__in{max-width:820px;margin:0 auto}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:var(--elev);border:1px solid var(--line);padding:7px 15px;border-radius:999px;box-shadow:var(--sh-1)}
.tag:hover{border-color:var(--line-2);color:var(--ink)}
.tag__d{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.hero__h{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(40px,7vw,76px);
  line-height:1.04;letter-spacing:-.02em;margin:26px auto 0;max-width:16ch}
.hero__h em{font-style:italic;color:var(--ink-2)}
.hero__p{color:var(--ink-2);font-size:clamp(16.5px,2vw,20px);line-height:1.55;margin:22px auto 0;max-width:560px}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero__meta{margin-top:22px;color:var(--ink-3);font-size:13.5px;font-weight:500}

/* points */
.points{padding:clamp(20px,4vh,40px) 0 clamp(64px,9vh,110px)}
.points__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,44px)}
.pt__i{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--elev);border-radius:13px;margin-bottom:18px}
.pt__i svg{width:23px;height:23px;color:var(--ink)}
.pt h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.pt p{color:var(--ink-2);font-size:15px;line-height:1.6}

/* sections shell */
.head{max-width:680px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.head h2{font-size:clamp(28px,4.4vw,42px);font-weight:700;letter-spacing:-.022em;line-height:1.1}
.head p{margin:14px auto 0;color:var(--ink-2);font-size:clamp(15.5px,1.8vw,18px);max-width:520px}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}

/* pricing */
.pricing{padding:clamp(64px,9vh,120px) 0;background:var(--bg-soft)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pl{position:relative;background:var(--elev);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 22px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--sh-1);
  transition:transform .2s,box-shadow .2s}
.pl:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.pl__tag{position:absolute;top:20px;right:20px;font-size:12px;font-weight:700;color:var(--ink-2);
  background:var(--bg-soft);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.pl__n{font-size:15px;font-weight:600;color:var(--ink-2)}
.pl__p{font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1;margin:12px 0 3px;display:flex;align-items:baseline;gap:3px}
.pl__p span{font-size:20px;font-weight:600;color:var(--ink-3)}
.pl__per{font-size:13.5px;color:var(--ink-3)}
.pl .btn{width:100%;margin-top:22px}
.pl--best{border:2px solid var(--ink);transform:scale(1.035);box-shadow:var(--sh-2)}
.pl--best:hover{transform:scale(1.035) translateY(-4px)}
.pl__tag--b{background:var(--ink);color:var(--bg);border-color:transparent}
.pricing__note{text-align:center;color:var(--ink-3);font-size:14px;margin-top:32px}

/* faq */
.faq{padding:clamp(64px,9vh,120px) 0}
.faq__list{display:flex;flex-direction:column;gap:10px}
.faq__list details{background:var(--elev);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.faq__list details[open]{border-color:var(--line-2)}
.faq__list summary{list-style:none;cursor:pointer;padding:19px 22px;font-weight:600;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"";width:10px;height:10px;flex:0 0 auto;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .25s;margin-top:-3px}
.faq__list details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq__list details p{padding:0 22px 20px;color:var(--ink-2);font-size:15px;line-height:1.6}

/* cta band */
.cta{padding:clamp(20px,4vh,40px) 22px clamp(64px,9vh,110px)}
.cta__in{max-width:var(--maxw);margin:0 auto;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:24px;padding:clamp(56px,8vw,96px) 28px;text-align:center}
.cta__h{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(30px,5vw,52px);
  line-height:1.06;letter-spacing:-.02em;margin-bottom:30px}
.cta__tg{display:block;margin-top:18px;color:var(--ink-2);font-weight:500;font-size:15px}
.cta__tg:hover{color:var(--ink)}

/* footer */
.footer{border-top:1px solid var(--line);padding:36px 22px}
.footer__in{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.footer__links{display:flex;gap:24px;flex-wrap:wrap}
.footer__links a{color:var(--ink-2);font-size:14.5px;transition:color .15s}.footer__links a:hover{color:var(--ink)}
.footer__bot{max-width:var(--maxw);margin:26px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3);font-size:13.5px}

/* responsive */
@media (max-width:880px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav.open .nav__links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:4px;
    padding:14px 22px 18px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--sh-2)}
  .nav.open .nav__links a{padding:9px 0;font-size:16px}
  .nav.open .nav__links .nav__links-tg{display:block;color:var(--ink-2)}
  .nav.open .nav__links .nav__links-cab{display:inline-flex;align-items:center;justify-content:center;
    background:var(--ink);color:var(--bg);border-radius:11px;padding:13px;margin-top:8px;font-weight:600;font-size:15px}
  .points__grid{grid-template-columns:1fr;gap:30px;max-width:420px;margin:0 auto}
  .plans{grid-template-columns:1fr 1fr}
  .pl--best{transform:none}.pl--best:hover{transform:translateY(-4px)}
  .footer__in{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:520px){
  .nav__cab{display:none}
  .hero__cta{flex-direction:column}.hero__cta .btn{width:100%}
  .plans{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){*{transition-duration:.001ms!important;scroll-behavior:auto!important}}