/* ===== FONTS ===== */
@font-face {
  font-family: 'Malik';
  src: url('fonts/Malik-Bold.woff2') format('woff2'),
       url('fonts/Malik-Bold.woff') format('woff');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Malik';
  src: url('fonts/MalikTrial-Regular.woff2') format('woff2'),
       url('fonts/MalikTrial-Regular.woff') format('woff');
  font-weight: 400; font-display: swap;
}

/* ===== TOKENS — бренд NeOrbit (коралл-оранж + янтарь) на бумаге ===== */
:root {
  --paper:    #ECE4D2;   /* фон-бумага */
  --paper-2:  #E3D9C2;   /* панель потемнее */
  --paper-hi: #FBF7EC;   /* светлые чипы / текст на чернилах */
  --ink:      #171310;   /* почти-чёрный, тёплый — текст, брусья, текст на бренд-заливке */
  --ink-70:   rgba(23,19,16,.70);
  --ink-45:   rgba(23,19,16,.42);
  --brand:    #F0603C;   /* NeOrbit коралл-оранж — заливки */
  --brand-dk: #D44A28;
  --brand-2:  #F0B040;   /* NeOrbit янтарь — вторичные акценты */
  --brand-ink:#BE3C18;   /* тёмный коралл — акцентный ТЕКСТ/ссылки на бумаге */
  --display: 'Malik', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --body:    system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gut:     clamp(1rem, 4vw, 2rem);
}

/* ===== RESET ===== */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--brand-ink); }
::selection { background: var(--brand); color: var(--ink); }

/* ===== LAYOUT ===== */
.wrap {
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 0 var(--gut) 5rem;
}

/* ===== DISPLAY TYPE ===== */
h1, h2, h3, .blk, .mast-brand, .mast-mid, .mast-status, .sec-no,
.step-n, .foot-brand, .vpn-eyebrow, .cred-copy, .stamp-k {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
}

/* ===== MASTHEAD ===== */
.mast {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 0 1rem;
  border-bottom: 4px solid var(--ink);
  font-size: .72rem; letter-spacing: .14em;
}
.mast-lock { display: inline-flex; align-items: center; gap: .55rem; }
.mast-logo { height: 30px; width: 30px; display: block; }
.mast-brand { color: var(--brand-ink); font-size: 1rem; letter-spacing: .04em; }
.mast-mid   { color: var(--ink-70); }
.mast-status { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); }
.mast-status i { width: 9px; height: 9px; background: var(--brand); display: inline-block; }

/* ===== HERO ===== */
.hero {
  display: grid; grid-template-columns: minmax(0,1fr) clamp(160px, 23vw, 260px);
  gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero h1 {
  font-size: clamp(2.7rem, 7.2vw, 4.8rem);
  line-height: .9; letter-spacing: -.005em;
}
.hero h1 .red-ink {
  background: var(--brand); color: var(--ink);
  padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lede {
  max-width: 30rem; margin: 1.6rem 0 2rem;
  font-size: 1.02rem; color: var(--ink-70); line-height: 1.55;
}

/* ===== BLOCKS / BUTTONS ===== */
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.blk {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 1.5rem;
  font-size: .9rem; letter-spacing: .06em;
  text-decoration: none; border: 3px solid var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.blk-red   { background: var(--brand); color: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.blk-red:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); }
.blk-red:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.blk-line  { background: transparent; color: var(--ink); }
.blk-line:hover { background: var(--ink); color: var(--paper); }
.blk-line.copy-ok { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.blk-ink   { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.blk-ink:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.blk-paper { background: var(--paper-hi); color: var(--brand-ink); border-color: var(--paper-hi); box-shadow: 6px 6px 0 var(--ink); }
.blk-paper:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); color: var(--brand-ink); }

/* ===== STAMP (узел) ===== */
.stamp {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.6rem; padding: .5rem .8rem;
  border: 2px solid var(--ink); background: var(--paper-2);
}
.stamp-k { font-size: .66rem; letter-spacing: .18em; color: var(--brand-ink); }
.stamp code { font-family: var(--body); font-size: .86rem; font-weight: 600; color: var(--ink); }
.stamp-live { width: 8px; height: 8px; background: var(--brand-2); border-radius: 50%; }

.hero-note {
  display: inline-block; margin-top: 1.6rem;
  font-family: var(--display); text-transform: uppercase;
  font-size: .76rem; letter-spacing: .08em;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--brand); padding-bottom: 2px;
}
.hero-note:hover { color: var(--brand-ink); }

/* ===== HERO ART ===== */
.hero-art { justify-self: center; width: 100%; max-width: 260px; }
.hero-art img { display: block; width: 100%; height: auto; }
.qr-cap { display: block; text-align: center; margin-top: .6rem;
  font-family: var(--display); text-transform: uppercase;
  font-size: .64rem; letter-spacing: .1em; color: var(--brand-ink); }

/* ===== RULES ===== */
.rule { height: 2px; background: var(--ink); margin: 0; }
.rule-heavy { height: 6px; }

/* ===== SECTION ===== */
.block { padding: clamp(2.2rem,5vw,3.2rem) 0; }
.sec-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.sec-no {
  font-size: 1.1rem; color: var(--ink); background: var(--brand);
  padding: .1rem .5rem; letter-spacing: .02em; flex-shrink: 0;
}
.sec-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1; letter-spacing: -.01em; }
.sec-lead { max-width: 36rem; color: var(--ink-70); margin-bottom: 1.6rem; font-size: .98rem; }

/* ===== CRED ===== */
.cred { border: 3px solid var(--ink); }
.cred-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem; border-bottom: 2px solid var(--ink);
}
.cred-row:last-child { border-bottom: none; }
.cred-k { font-size: .62rem; letter-spacing: .18em; color: var(--brand-ink); width: 54px; flex-shrink: 0; }
.cred-row code {
  flex: 1; min-width: 0; font-family: var(--body); font-weight: 600; font-size: .92rem;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cred-copy {
  flex-shrink: 0; border: 2px solid var(--ink); background: var(--paper);
  color: var(--ink); font-size: .66rem; letter-spacing: .1em;
  padding: .4rem .6rem; cursor: pointer; transition: background .12s, color .12s;
}
.cred-copy:hover { background: var(--ink); color: var(--paper); }
.cred-copy.copy-ok { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.web-open { margin-top: 1.2rem; width: 100%; }

/* ===== STEPS ===== */
.step-list { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 3px solid var(--ink); }
.step-list li { padding: 1.4rem 1.25rem 1.6rem; border-right: 2px solid var(--ink); }
.step-list li:last-child { border-right: none; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; background: var(--ink); color: var(--paper);
  font-size: 1.4rem; margin-bottom: .9rem;
}
.step-list li:nth-child(2) .step-n { background: var(--brand); color: var(--ink); }
.step-list h3 { font-size: 1.12rem; letter-spacing: 0; margin-bottom: .5rem; }
.step-list p { font-size: .9rem; color: var(--ink-70); line-height: 1.5; }

/* ===== COMPARE TABLE ===== */
.cmp { width: 100%; border-collapse: collapse; border: 3px solid var(--ink); }
.cmp th, .cmp td { border: 2px solid var(--ink); padding: .8rem 1rem; }
.cmp thead th {
  font-size: .72rem; letter-spacing: .12em; background: var(--ink); color: var(--paper);
}
.cmp .cmp-vpn { background: var(--brand); color: var(--ink); }
.cmp-feat { text-align: left; font-family: var(--body); font-weight: 600; font-size: .9rem; }
.cmp thead .cmp-feat { font-family: var(--display); font-weight: 700; }
.cmp-c { text-align: center; width: 90px; font-size: 1.1rem; font-weight: 700; }
.cmp tbody .yes { color: var(--brand-ink); }
.cmp tbody .cmp-vpn.yes { color: var(--ink); }
.cmp tbody .no { color: var(--ink-45); }
.cmp tbody .part { font-family: var(--display); text-transform: uppercase; font-size: .62rem; letter-spacing: .08em; color: var(--ink-70); }

/* ===== NEORBIT PANEL ===== */
.vpn { background: var(--brand); color: var(--ink); margin: clamp(2.2rem,5vw,3.2rem) 0; }
.vpn-inner { padding: clamp(2rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem); }
.vpn-eyebrow { font-size: .72rem; letter-spacing: .2em; color: var(--ink); background: var(--paper-hi); padding: .18rem .55rem; display: inline-block; }
.vpn h2 { font-size: clamp(2.4rem,8vw,4.4rem); line-height: .92; margin: 1rem 0 .9rem; color: var(--ink); letter-spacing: -.01em; }
.vpn p { max-width: 38rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.vpn-list { list-style: none; margin: 1.4rem 0 1.8rem; display: grid; gap: .55rem; }
.vpn-list li { position: relative; padding-left: 1.6rem; font-size: .96rem; font-weight: 700; }
.vpn-list li::before { content: '→'; position: absolute; left: 0; color: var(--ink); font-weight: 700; }

/* ===== FAQ ===== */
.faq-list { border-top: 2px solid var(--ink); }
.fq { border-bottom: 2px solid var(--ink); }
.fq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); text-transform: uppercase; font-size: .98rem; letter-spacing: .02em;
}
.fq summary::-webkit-details-marker { display: none; }
.fq-sign { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.fq-sign::before, .fq-sign::after { content: ''; position: absolute; background: var(--brand-ink); transition: transform .2s; }
.fq-sign::before { left: 0; top: 8px; width: 18px; height: 3px; }
.fq-sign::after  { left: 8px; top: 0; width: 3px; height: 18px; }
.fq[open] .fq-sign::after { transform: scaleY(0); }
.fq p { padding: 0 0 1.1rem; color: var(--ink-70); font-size: .94rem; line-height: 1.6; max-width: 44rem; }
.fq p a { color: var(--brand-ink); font-weight: 600; }

/* ===== FOOTER ===== */
.foot {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem; padding-top: 1.2rem; border-top: 4px solid var(--ink);
  font-size: .72rem; letter-spacing: .12em;
}
.foot-brand { color: var(--brand-ink); }
.foot-mid { color: var(--ink-45); }
.foot a { margin-left: auto; color: var(--ink); text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; }
.foot a:hover { color: var(--brand-ink); }

/* ===== REVEAL ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { grid-row: 1; max-width: 240px; margin-bottom: .5rem; }
  .step-list { grid-template-columns: 1fr; }
  .step-list li { border-right: none; border-bottom: 2px solid var(--ink); }
  .step-list li:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; }
  .blk { width: 100%; }
  .mast-mid { display: none; }
  .cmp th, .cmp td { padding: .7rem .6rem; }
  .cmp-c { width: 56px; font-size: 1rem; }
  .cmp-feat { font-size: .82rem; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}