:root{
  --ink:#08090b; --ink2:#0f1216; --panel:#14181d; --panel2:#1a1f26; --line:#262c34;
  --gold:#c9a24c; --gold2:#e0be6e; --vfd:#7ef2f7; --paper:#eceef1; --mut:#8b9199; --faint:#5a616b;
  --ok:#6fae6a; --warn:#d0a24a; --stop:#c76a5a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1000px;
}
:root[data-theme="light"]{
  --ink:#f2f3f5; --ink2:#eceef1; --panel:#ffffff; --panel2:#f7f8fa; --line:#e2e5ea;
  --gold:#9a7724; --gold2:#c9a24c; --vfd:#0e6f78; --paper:#14181d; --mut:#565d66; --faint:#878e97;
}
@media(prefers-color-scheme:light){
  :root{
    --ink:#f2f3f5; --ink2:#eceef1; --panel:#ffffff; --panel2:#f7f8fa; --line:#e2e5ea;
    --gold:#9a7724; --gold2:#c9a24c; --vfd:#0e6f78; --paper:#14181d; --mut:#565d66; --faint:#878e97;
  }
}
:root[data-theme="dark"]{
  --ink:#08090b; --ink2:#0f1216; --panel:#14181d; --panel2:#1a1f26; --line:#262c34;
  --gold:#c9a24c; --gold2:#e0be6e; --vfd:#7ef2f7; --paper:#eceef1; --mut:#8b9199; --faint:#5a616b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
:root[data-theme="light"] body,@media(prefers-color-scheme:light){}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.serif{font-family:var(--serif)}
.gold{color:var(--gold)}
.kick{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance;letter-spacing:-.01em}
p{max-width:64ch}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) header{background:rgba(244,241,234,.9)}}
:root[data-theme="light"] header{background:rgba(244,241,234,.9)}
:root[data-theme="dark"] header{background:rgba(0,0,0,.9)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:12px}
header{background:#0a0b0d!important;border-bottom:1px solid #1e222a}
header .navlinks a{color:#8b9199}header .navlinks a:hover{color:#eceef1}
header .langs button{color:#6a7078}header .langs button:hover{color:#eceef1}
header .themeBtn{border-color:#23282f;color:#8b9199}
.brand .wm{height:30px;width:auto;display:block;filter:drop-shadow(0 0 2px rgba(126,242,247,.9)) drop-shadow(0 0 6px rgba(126,242,247,.45))}
.brand .wm g{fill:#7ef2f7}

.vfdbox{--vfd:#7ef2f7;display:inline-block;background:linear-gradient(#05090b,#03060a);border:1px solid #16202a;border-radius:12px;padding:20px 26px;margin:6px 0 10px;box-shadow:inset 0 0 30px rgba(0,0,0,.95)}
.vfdbox svg{display:block;filter:drop-shadow(0 0 3px rgba(126,242,247,.9)) drop-shadow(0 0 11px rgba(126,242,247,.45))}

.brand .wm{height:29px;width:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand .mark{filter:drop-shadow(0 0 2px rgba(201,162,76,.45))}
.brand .wm{filter:drop-shadow(0 0 3px rgba(126,242,247,.9)) drop-shadow(0 0 10px rgba(126,242,247,.5))}

:root[data-theme="light"] .brand .mark,:root[data-theme="light"] .brand .wm{filter:none}

.brand .mark{width:30px;height:30px}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.28rem;letter-spacing:.02em}
.brand b span{color:var(--gold)}
.tools{display:flex;align-items:center;gap:20px}
.langs{display:flex;gap:2px;font-size:.8rem;font-weight:600;letter-spacing:.04em}
.langs button{background:none;border:0;color:var(--faint);cursor:pointer;padding:5px 7px;font:inherit;border-radius:6px;text-transform:uppercase}
.langs button:hover{color:var(--paper)}
.langs button.on{color:var(--gold)}
.themeBtn{background:none;border:1px solid var(--line);color:var(--mut);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:.95rem}
.themeBtn:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:640px){.brand b{font-size:1.1rem}.tools{gap:12px}}

/* hero */
.hero{position:relative;padding:104px 0 78px;overflow:hidden}
.dial{position:absolute;right:-160px;top:-40px;width:520px;height:520px;opacity:.5;pointer-events:none}
@media(max-width:820px){.dial{right:-240px;top:60px;width:420px;opacity:.28}}
.hero .kick{margin-bottom:22px;display:block}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.02;font-weight:500;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{margin-top:26px;font-size:1.24rem;color:var(--mut);max-width:52ch;line-height:1.6}
.hero .cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:.98rem;
  border-radius:11px;padding:14px 26px;cursor:pointer;border:1px solid transparent;transition:all .16s;letter-spacing:.01em}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1408;box-shadow:0 8px 30px -12px rgba(201,162,76,.6)}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.line{background:transparent;border-color:var(--line);color:var(--paper)}
.btn.line:hover{border-color:var(--gold);color:var(--gold)}

/* generic section */
section{padding:76px 0;border-top:1px solid var(--line)}
.head{max-width:60ch}
.head h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 10px;font-weight:500}
.head p{color:var(--mut);font-size:1.08rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.stp{background:var(--panel);padding:30px 28px}
.stp .n{font-family:var(--serif);font-size:1.5rem;color:var(--gold);border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline}
.stp .n small{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.stp h3{font-size:1.2rem;margin-bottom:8px;font-weight:500}
.stp p{color:var(--mut);font-size:.96rem}

/* dns address plate */
.plate{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--gold);border-radius:16px;
  padding:26px 30px;position:relative}
.plate::before{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 0 40px -20px var(--gold)}
.plate .lab{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.plate .iprow{display:flex;align-items:center;gap:16px;margin-top:6px}
.plate .ip{font-family:var(--mono);font-size:2rem;font-weight:600;color:var(--gold2);letter-spacing:1px}
.copybtn{background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:9px 15px;
  cursor:pointer;font:inherit;font-size:.85rem}
.copybtn:hover{border-color:var(--gold);color:var(--gold)}
.copybtn.done{color:var(--ok);border-color:var(--ok)}

/* checker */
.search{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--paper);border-radius:12px;
  padding:16px 18px;font:inherit;font-size:1.02rem;margin-top:30px}
.search:focus{outline:none;border-color:var(--gold)}
.chkmsg{margin-top:14px;font-size:.95rem;min-height:1.4em}
.chkmsg.good{color:var(--ok)}.chkmsg.none{color:var(--warn)}
.brandcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:12px}
.brandcard h4{font-family:var(--sans);font-size:1rem;font-weight:700;margin-bottom:10px;display:flex;gap:10px;align-items:center}
.tagpill{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.tagpill.works{background:rgba(111,174,106,.16);color:var(--ok)}
.tagpill.test{background:rgba(208,162,74,.16);color:var(--warn)}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchip{font-family:var(--mono);font-size:.76rem;background:var(--ink2);border:1px solid var(--line);
  border-radius:7px;padding:4px 9px;color:var(--mut)}
.note{border-radius:13px;padding:16px 20px;margin-top:16px;font-size:.95rem;border:1px solid}
.note.stop{background:rgba(199,106,90,.08);border-color:rgba(199,106,90,.4)}
.note.stop b{color:var(--stop)}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:.95rem;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tbl td{padding:15px 18px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:first-child td{border-top:0}
.tbl td:first-child{font-weight:700;white-space:nowrap;color:var(--gold);width:1%;font-size:.9rem}
.tbl b{color:var(--paper)}
.hint{background:rgba(201,162,76,.07);border:1px solid rgba(201,162,76,.3);border-radius:12px;
  padding:14px 18px;margin-top:16px;font-size:.92rem;color:var(--mut)}
.hint b{color:var(--gold)}

/* advanced */
details{border:1px solid var(--line);border-radius:13px;background:var(--panel);margin-top:14px;overflow:hidden}
summary{cursor:pointer;padding:18px 22px;font-weight:600;font-family:var(--sans);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
.dbody{padding:4px 22px 22px}
.codecard{margin-top:14px}
.codecard .ct{font-size:.86rem;color:var(--mut);margin-bottom:6px}
.codecard .ct b{color:var(--paper);font-family:var(--mono);font-size:.82rem}
.prewrap{position:relative}
pre{background:#08090c;border:1px solid var(--line);border-radius:10px;padding:15px 16px;overflow-x:auto;
  font-family:var(--mono);font-size:.8rem;line-height:1.65;color:#d7dde5}
:root[data-theme="light"] pre,@media(prefers-color-scheme:light){pre{background:#1a1a1e;color:#e6e8eb}}
.pcopy{position:absolute;top:9px;right:9px;background:#20232a;border:1px solid #333;color:#cbd3dd;border-radius:7px;
  padding:5px 11px;font:inherit;font-size:.76rem;cursor:pointer}
.pcopy:hover{background:#2b2f38}.pcopy.done{color:var(--ok);border-color:var(--ok)}

/* verify + pricing */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px}
.plan.pro{border-color:var(--gold);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.plan .pt{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.plan .amt{font-family:var(--serif);font-size:2.6rem;margin:6px 0 4px;color:var(--paper)}
.plan.pro .amt{color:var(--gold)}
.plan ul{list-style:none;margin-top:16px}
.plan li{padding:6px 0 6px 26px;position:relative;color:var(--mut);font-size:.96rem}
.plan li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:2px;background:var(--gold)}

/* activate */
.codeform{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.codeform input{background:var(--ink2);border:1px solid var(--line);color:var(--paper);border-radius:12px;
  padding:15px 20px;font-family:var(--mono);font-size:1.35rem;letter-spacing:8px;text-transform:uppercase;
  width:220px;text-align:center}
.codeform input:focus{outline:none;border-color:var(--gold)}
.statusbox{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:540px}
.badge{display:inline-block;padding:4px 13px;border-radius:999px;font-weight:700;font-size:.78rem;letter-spacing:.04em}
.badge.trial{background:rgba(208,162,74,.18);color:var(--warn)}
.badge.ok{background:rgba(111,174,106,.18);color:var(--ok)}
.badge.blocked{background:rgba(199,106,90,.18);color:var(--stop)}

/* faq */
.faq details summary{font-family:var(--serif);font-weight:500;font-size:1.1rem}
.faq .dbody{color:var(--mut);padding-top:0}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 46px;color:var(--mut)}
.frow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.disc{margin-top:26px;font-size:.83rem;color:var(--faint);max-width:80ch;line-height:1.7}
.disc a{color:var(--gold)}
::selection{background:var(--gold);color:#1a1408}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
.navlinks{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-left:auto;margin-right:20px}.navlinks a{color:var(--mut);font-size:.9rem;font-weight:500;text-decoration:none}.navlinks a:hover{color:var(--gold)}
/* --- общая шапка --- */
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--mut);font-size:.95rem;font-weight:500;text-decoration:none}
.navlinks a:hover{color:var(--paper)}
.nav>.navlinks{margin-left:auto}.nav>.tools{margin-left:auto}
.brand .wm{height:30px;width:auto;display:block}


/* ============ мобильная адаптация ============ */
html,body{max-width:100%;overflow-x:hidden}
img,svg,table{max-width:100%}

@media(max-width:820px){
  .wrap{padding:0 18px}

  /* шапка в две строки: 1) лого + языки/тема, 2) навигация во всю ширину */
  .nav{height:auto;min-height:54px;flex-wrap:wrap;row-gap:6px;padding-top:9px;padding-bottom:9px;justify-content:flex-start}
  .brand .wm{height:21px}
  .nav>.tools{order:2;margin-left:auto}
  .nav>.navlinks{display:flex;order:3;width:100%;margin-left:0;gap:18px;font-size:.86rem}
  .langs{gap:0}
  .langs button{padding:4px 5px;font-size:.75rem;letter-spacing:0}
  .themeBtn{width:30px;height:30px;font-size:.8rem}

  /* герой и секции компактнее */
  .hero{padding:44px 0 28px}
  section{padding:44px 0}
  .lead{font-size:1.05rem}

  /* плашка с адресом — в столбик, чтобы кнопка не выпадала */
  .plate{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .plate .ip{font-size:1.5rem}

  /* таблица шагов — карточками, а не двумя колонками */
  .tbl td{display:block;white-space:normal;width:auto}
  .tbl td:first-child{padding-bottom:2px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
  .tbl td+td{padding-top:0;border-top:0}

  /* кнопки на всю ширину, не слипаются */
  .cta{width:100%}
  .cta .btn{flex:1 1 46%;justify-content:center;text-align:center}
  .codeform{width:100%}
  .codeform input{width:100%;max-width:100%}

  /* декоративная шкала не должна давать прокрутку */
  .dial{right:-38%;width:min(420px,110vw)}
}

@media(max-width:380px){
  .langs button{padding:3px 4px;font-size:.7rem}
  .nav>.navlinks{gap:14px;font-size:.82rem}
}

/* --- доступность (a11y) --- */
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--gold);color:#1a1408;
  padding:10px 16px;border-radius:0 0 10px 10px;font:600 .9rem/1 var(--sans);text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.langs button[aria-current="true"]{color:var(--gold)}
main:focus{outline:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}