/* ===== POSTIK.PRO — SEO landing system (Night Glass) ===== */
:root{
  color-scheme:dark;
  --canvas:#050505; --canvas-raised:#090909;
  --surface:#101010; --surface-hover:#171717; --surface-active:#202020;
  --ink:#F5F5F5; --ink-2:#C7C7C7; --ink-3:#8E8E8E; --ink-4:#5E5E5E;
  --border:#2A2A2A; --border-strong:#3A3A3A;
  --success:#43D17A; --warning:#F2B84B; --danger:#FF5A66; --like:#FF3040; --info:#8AA7FF;
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --fd:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ft:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --shell:1120px;
  --e-out:cubic-bezier(.25,.1,.25,1);
  --spring:cubic-bezier(.34,1.4,.4,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--ft); font-size:16px; line-height:1.55; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
svg{display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:4px}
::selection{background:#333; color:#fff}
.num{font-variant-numeric:tabular-nums}
.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic16{width:16px;height:16px}

h1,h2,h3,h4{font-family:var(--fd); margin:0; text-wrap:balance; letter-spacing:-.035em; line-height:1.05}
h1{font-size:clamp(38px,6.4vw,74px); font-weight:650; letter-spacing:-.05em; line-height:.98}
h2{font-size:clamp(28px,4vw,44px); font-weight:650}
h3{font-size:clamp(19px,2.4vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.2}
p{margin:0}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.lede{font-size:clamp(16px,2vw,19px); line-height:1.55; color:var(--ink-2)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono); font-size:12px; color:var(--ink-3)}

/* ===== Nav ===== */
.nav{position:sticky; top:0; z-index:50; background:rgba(9,9,9,.72); -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); border-bottom:1px solid rgba(255,255,255,.07)}
.nav-in{max-width:var(--shell); margin:0 auto; padding:0 24px; height:62px; display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:10px; min-height:44px; font-family:var(--fd); font-weight:650; font-size:18px; letter-spacing:-.02em}
.brand .logo{width:26px; height:26px}
.nav-links{display:flex; gap:6px; margin-left:auto}
.nav-links a{color:var(--ink-3); font-size:14px; padding:8px 12px; border-radius:var(--r-sm); transition:color .15s, background-color .15s}
.nav-links a:hover{color:var(--ink); background:rgba(255,255,255,.06)}
.nav-cta{margin-left:6px}
@media(max-width:820px){ .nav-links{display:none} .nav-cta{margin-left:auto} }

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 22px; border-radius:var(--r-md); border:1px solid transparent; font-family:var(--ft); font-size:15px; font-weight:600; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition:background-color .15s, color .15s, border-color .15s, transform .34s var(--spring)}
.btn:active{transform:scale(.96); transition-duration:.06s}
.btn-pri{background:var(--ink); color:var(--canvas)}
.btn-pri:hover{background:#fff}
.btn-sec{background:var(--surface-hover); color:var(--ink); border-color:var(--border)}
.btn-sec:hover{background:var(--surface-active)}
.btn-lg{height:56px; padding:0 28px; font-size:16px}

/* ===== Layout blocks ===== */
section{padding:clamp(56px,9vw,110px) 0}
:target,[id]{scroll-margin-top:24px}
.section-head{max-width:720px; margin:0 auto clamp(32px,5vw,56px); text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center}
.section-head.left{text-align:left; align-items:flex-start; margin-left:0}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .g3,.g4{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; transition:background-color .2s, border-color .2s, transform .3s var(--e-out)}
.card:hover{background:var(--surface-hover); border-color:var(--border-strong)}
.card .ic{color:var(--ink); margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-3); font-size:15px}

/* ===== Hero ===== */
.hero{position:relative; padding-top:clamp(56px,9vw,90px); overflow:hidden}
.hero .orbs{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero .orbs::before,.hero .orbs::after{content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.hero .orbs::before{width:520px; height:520px; left:-140px; top:-120px; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%)}
.hero .orbs::after{width:460px; height:460px; right:-120px; top:80px; background:radial-gradient(circle,rgba(138,167,255,.10),transparent 68%)}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
@media(max-width:900px){ .hero-in{grid-template-columns:1fr; gap:36px} }
.hero h1{max-width:15ch}
.hero .lede{margin-top:22px; max-width:52ch}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.hero-trust{display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; color:var(--ink-3); font-size:13px}
.hero-trust b{color:var(--ink); font-family:var(--fd); font-size:22px; font-weight:650; letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums}

/* ===== Threads post mock (recurring visual) ===== */
.post{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; display:flex; gap:12px; max-width:420px}
.post .av{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#333,#181818); border:1px solid var(--border-strong); flex:none; display:grid; place-items:center; font-weight:600; color:var(--ink-2); font-size:15px}
.post .body{display:flex; flex-direction:column; gap:9px; min-width:0}
.post .top{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600}
.post .top .ver{color:var(--ink-2)}
.post .top time{margin-left:auto; color:var(--ink-3); font-weight:400; font-size:12px}
.post p{font-size:14.5px; line-height:1.5}
.post .react{display:flex; gap:16px; color:var(--ink-3); font-size:13px; margin-top:2px}
.post .react span{display:inline-flex; align-items:center; gap:5px}
.post .react .liked{color:var(--like)}
.post .react .liked .ic16{fill:var(--like); stroke:var(--like)}
.post-stack{position:relative}
.post-stack .post:nth-child(2){position:absolute; top:22px; left:26px; z-index:-1; opacity:.5; transform:scale(.97)}
.post-stack .post:nth-child(3){position:absolute; top:44px; left:52px; z-index:-2; opacity:.25; transform:scale(.94)}

/* ===== Steps / how it works ===== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:s}
@media(max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; position:relative}
.step .n{font-family:var(--mono); font-size:12px; color:var(--ink-4)}
.step h3{font-size:17px; margin:12px 0 6px}
.step p{font-size:13.5px; color:var(--ink-3); line-height:1.45}

/* ===== Stat band ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center}
@media(max-width:760px){ .stats{grid-template-columns:1fr 1fr} }
.stat b{display:block; font-family:var(--fd); font-size:clamp(30px,4.5vw,46px); font-weight:650; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.stat span{font-size:13px; color:var(--ink-3)}

/* ===== Compare (native vs banner) ===== */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){ .compare{grid-template-columns:1fr} }
.compare .col{border-radius:var(--r-lg); padding:26px; border:1px solid var(--border)}
.compare .bad{background:var(--surface); }
.compare .good{background:var(--surface-hover); border-color:var(--border-strong)}
.compare h3{margin-bottom:16px; display:flex; align-items:center; gap:8px}
.compare ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.compare li{display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); line-height:1.45}
.compare li .ic16{margin-top:2px}
.compare .bad li .ic16{stroke:var(--danger)}
.compare .good li .ic16{stroke:var(--success)}

/* ===== Cases ===== */
.case{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column}
.case .head{padding:20px 22px 0; display:flex; align-items:center; gap:12px}
.case .head .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#333,#181818);border:1px solid var(--border-strong);display:grid;place-items:center;font-weight:600;color:var(--ink-2)}
.case .head b{font-size:15px; font-weight:600; display:block}
.case .head span{font-size:12px; color:var(--ink-3)}
.case .body{padding:16px 22px 22px; display:flex; flex-direction:column; gap:14px; flex:1}
.case .quote{font-size:15px; color:var(--ink); line-height:1.5}
.case .metrics{display:flex; gap:20px; margin-top:auto; padding-top:8px; border-top:1px solid var(--border)}
.case .metrics div b{font-family:var(--fd); font-size:22px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block}
.case .metrics div span{font-size:11px; color:var(--ink-3)}
.case .tag{font-size:11px; color:var(--ink-3); font-family:var(--mono)}

/* ===== FAQ ===== */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:0}
.faq details{border-bottom:1px solid var(--border); padding:6px 0}
.faq summary{cursor:pointer; list-style:none; padding:18px 4px; font-size:17px; font-weight:600; font-family:var(--fd); letter-spacing:-.02em; display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{transition:transform .25s var(--e-out); color:var(--ink-3)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .a{padding:0 4px 20px; color:var(--ink-3); font-size:15px; line-height:1.6; max-width:64ch}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(180deg,var(--surface),var(--canvas-raised)); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(36px,6vw,64px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px}
.cta-band h2{max-width:18ch}
.cta-band .lede{max-width:48ch}

/* ===== Pills / chips ===== */
.pill{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px; border-radius:var(--r-full); background:var(--surface); border:1px solid var(--border); color:var(--ink-2); font-size:13px; font-weight:500}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.pill-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* ===== Footer ===== */
footer{border-top:1px solid var(--border); padding:44px 0}
.foot-in{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; color:var(--ink-3); font-size:13px}
.foot-links{display:flex; gap:4px 18px; flex-wrap:wrap}
.foot-links a{display:inline-flex; align-items:center; min-height:44px}
.foot-links a:hover{color:var(--ink)}
.foot-legal{max-width:60ch; font-size:11px; color:#828282; line-height:1.5; margin-top:18px}

/* ===== Reveal / motion ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--e-out), transform .6s var(--e-out)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ===== Article (blog / SEO guides) ===== */
.article-hero{padding:clamp(48px,7vw,80px) 0 0}
.article-hero .shell{max-width:820px}
.breadcrumb{font-size:13px; color:var(--ink-3); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap}
.breadcrumb a:hover{color:var(--ink)}
.article-meta{display:flex; gap:14px; flex-wrap:wrap; color:var(--ink-3); font-size:13px; margin-top:18px}
.article-meta .pill{height:28px}
.article-body{max-width:720px; margin:0 auto; padding:clamp(36px,5vw,56px) 0}
.article-body h2{font-size:clamp(24px,3.2vw,34px); margin:44px 0 14px; letter-spacing:-.03em}
.article-body h3{font-size:20px; margin:28px 0 10px}
.article-body p{color:var(--ink-2); font-size:17px; line-height:1.65; margin:0 0 16px}
.article-body ul,.article-body ol{color:var(--ink-2); font-size:17px; line-height:1.6; padding-left:22px; margin:0 0 18px}
.article-body li{margin-bottom:9px}
.article-body li::marker{color:var(--ink-4)}
.article-body strong{color:var(--ink); font-weight:600}
.article-body a.inline{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong)}
.article-body a.inline:hover{text-decoration-color:var(--ink)}
.article-body .lede{font-size:20px; line-height:1.6; color:var(--ink); margin-bottom:28px}
.toc{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 24px; margin:0 0 32px}
.toc b{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:12px}
.toc ol{margin:0; padding-left:20px; font-size:15px}
.toc li{margin-bottom:7px}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--ink)}
.callout{background:linear-gradient(180deg,var(--surface-hover),var(--surface)); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:26px; margin:34px 0; display:flex; flex-direction:column; gap:14px}
.callout .eyebrow{color:var(--ink-3)}
.callout h3{margin:0; font-size:21px}
.callout p{margin:0; font-size:16px}
.callout .btn{align-self:flex-start; margin-top:4px}
.pull{border-left:2px solid var(--border-strong); padding:6px 0 6px 20px; margin:26px 0; font-family:var(--fd); font-size:22px; line-height:1.35; letter-spacing:-.02em; color:var(--ink)}
.related{max-width:820px; margin:0 auto; padding-top:8px}
.related .grid{margin-top:16px}
.related .card h3{font-size:17px}