@charset "UTF-8";
/* ════════════════════════════════════════════════════════
   Nivelva — NAT VPS page styles  (prefix: nat / natX)
   Reuses global tokens from styles.css
   ════════════════════════════════════════════════════════ */

.nat-what, .nat-feat, .nat-ports, .nat-uses, .nat-pricing, .nat-net, .nat-testi, .nat-faq { overflow: hidden; }

/* shared helpers used on this page */
.btn--ghostLight { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); box-shadow: none; }
.btn--ghostLight:hover { background: rgba(255,255,255,0.1); box-shadow: none; border-color: #fff; }
.tag--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }

/* ───────────────  HERO  ─────────────── */
.natHero {
  position: relative;
  padding: 56px 0 72px;
  background:
    radial-gradient(1100px 520px at 78% 8%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.natHero__grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 48px;
  align-items: center;
}
.natHero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 22px;
}
.natHero__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); animation: natPulse 2s infinite; }
@keyframes natPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.natHero__copy h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 0.98; letter-spacing: -0.025em;
  margin: 0 0 22px; text-wrap: balance;
}
.natHero__copy h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.natHero__sub { font-size: 18.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 28px; max-width: 36em; }
.natHero__sub b { color: var(--ink); font-weight: 700; }
.natHero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.natHero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.natChip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-2);
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg); border: 1.5px solid color-mix(in oklab, var(--line) 16%, transparent);
}
.natChip b { font-family: var(--mono); font-size: 13px; color: var(--ink); font-weight: 700; }

/* ───────────────  NAT DIAGRAM (SVG)  ─────────────── */
.natDiagram {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 18px 12px;
}
.natDiagram__svg { display: block; }
.natD__kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; fill: var(--ink-3); text-transform: uppercase; font-weight: 600; }
.natD__ip { font-family: "JetBrains Mono", monospace; font-size: 19px; font-weight: 700; fill: var(--ink); letter-spacing: -0.01em; }
.natD__gateK { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; fill: #F1B62D; font-weight: 700; }
.natD__gateV { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; fill: rgba(255,255,255,0.62); }
.natD__pub { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; text-anchor: middle; }
.natD__vps { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 800; fill: #fff; letter-spacing: 0.02em; }
.natD__led { animation: natPulse2 1.5s infinite; }
.natD__role { font-family: var(--sans); font-size: 12.5px; font-weight: 800; fill: var(--ink); letter-spacing: -0.01em; }
.natD__pubPort { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 800; }
.natD__map { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; fill: var(--ink-3); }
.natDiagram__cap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 0 4px; border-top: 1px dashed color-mix(in oklab, var(--line) 18%, transparent); margin-top: 4px;
}
.natDiagram__pulse { width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; animation: natPulse2 1.6s infinite; }
@keyframes natPulse2 { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ───────────────  APA ITU NAT  ─────────────── */
.natWhat__grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: start; }
.natWhat__h { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -0.02em; margin: 18px 0 20px; }
.natWhat__h em { font-style: italic; color: var(--accent); font-weight: 500; }
.natWhat__p { font-size: 17px; line-height: 1.66; color: var(--ink-2); margin: 0 0 16px; max-width: 40em; }
.natWhat__p b { color: var(--ink); font-weight: 700; }
.natWhat__note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 22px; padding: 16px 18px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.natWhat__note svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.natWhat__note b { color: var(--ink); }

.natWhat__cmp { display: grid; gap: 16px; }
.cmpCard { position: relative; border: 2px solid var(--line); border-radius: 16px; padding: 22px 22px 20px; background: var(--bg); }
.cmpCard--nat { box-shadow: var(--shadow); }
.cmpCard--ded { background: color-mix(in oklab, var(--ink) 4%, var(--bg)); opacity: 0.94; }
.cmpCard__flag {
  position: absolute; top: -12px; right: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 700;
  background: var(--accent); color: #fff; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--line);
}
.cmpCard__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1.5px dashed color-mix(in oklab, var(--line) 18%, transparent); }
.cmpCard__lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; font-weight: 700; color: var(--ink); }
.cmpCard__price { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); }
.cmpCard__price small { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.cmpCard__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.cmpCard__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.cmpCard__list li i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; position: relative; }
.cmpCard__list li.ok i { background: color-mix(in oklab, #1F9D55 18%, transparent); }
.cmpCard__list li.ok i::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 3px; border-left: 2px solid #1F9D55; border-bottom: 2px solid #1F9D55; transform: rotate(-45deg); }
.cmpCard__list li.no i { background: color-mix(in oklab, #D9480F 16%, transparent); }
.cmpCard__list li.no i::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 2px; background: #D9480F; }
.cmpCard__for { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-3); border-top: 1.5px dashed color-mix(in oklab, var(--line) 16%, transparent); padding-top: 12px; }

/* ───────────────  IPv6 STRIP  ─────────────── */
.natV6 { background: var(--ink); color: var(--bg); }
.natV6__row { display: flex; align-items: center; justify-content: center; gap: 40px; padding-block: 28px; }
.natV6__main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.natV6__badge {
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  background: linear-gradient(135deg, #EC652A, #F1B62D); color: #fff;
  padding: 10px 14px; border-radius: 10px; flex-shrink: 0;
}
.natV6__h { font-family: var(--serif); font-size: clamp(18px, 2.1vw, 25px); font-weight: 500; line-height: 1.2; }
.natV6__h b { color: #F1B62D; font-style: italic; }
.natV6__s { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 5px; line-height: 1.4; }
.natV6__code {
  font-family: var(--mono); font-size: 14px; color: #F1B62D;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  padding: 12px 18px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}

/* ───────────────  FITUR  ─────────────── */
/* ───────────────  FITUR (bento)  ─────────────── */
.natFeat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.natFeat {
  position: relative; overflow: hidden;
  grid-column: span 1;
  background: var(--bg); border: 2px solid var(--line); border-radius: 18px;
  padding: 24px 22px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.natFeat:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: color-mix(in oklab, var(--fc) 55%, var(--line)); }
.natFeat__ic {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
  color: #fff; background: var(--fc); margin-bottom: 16px;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--fc) 40%, transparent);
}
.natFeat__txt { position: relative; z-index: 1; }
.natFeat h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin: 0 0 7px; letter-spacing: -0.01em; }
.natFeat p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.natFeat__wm {
  position: absolute; right: -28px; bottom: -34px; z-index: 0;
  color: var(--fc); opacity: 0.10; pointer-events: none;
  transition: transform .35s ease, opacity .25s ease;
}
.natFeat:hover .natFeat__wm { transform: rotate(-8deg) scale(1.06); opacity: 0.16; }
.natFeat--wide { grid-column: span 2; display: flex; align-items: flex-start; gap: 18px; padding: 26px 26px; }
.natFeat--wide .natFeat__ic { margin-bottom: 0; flex-shrink: 0; width: 54px; height: 54px; }
.natFeat--wide h3 { font-size: 19px; margin-bottom: 8px; }
.natFeat--wide p { font-size: 14.5px; max-width: 42ch; }
.natFeat--wide .natFeat__wm { right: -22px; bottom: -40px; }
.natFeat__txt { min-width: 0; }
.natFeat__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
.natFeat__list li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.natFeat__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 4px; background: color-mix(in oklab, var(--fc) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--fc); }
.natFeat--wide:has(.natFeat__list) p { max-width: none; }
@media (max-width: 560px) { .natFeat__list { grid-template-columns: 1fr; } }
.natFeat--spot { background: var(--fc); border-color: var(--fc); color: #fff; box-shadow: 0 14px 32px color-mix(in oklab, var(--fc) 36%, transparent); }
.natFeat--spot .natFeat__ic { background: rgba(255,255,255,0.18); box-shadow: none; }
.natFeat--spot h3 { color: #fff; }
.natFeat--spot p { color: rgba(255,255,255,0.88); }
.natFeat--spot .natFeat__wm { color: #fff; opacity: 0.16; }
.natFeat--spot:hover { border-color: var(--fc); box-shadow: 0 18px 40px color-mix(in oklab, var(--fc) 44%, transparent); }
.natFeat--spot:hover .natFeat__wm { opacity: 0.22; }

/* ───────────────  PORT CONSOLE  ─────────────── */
.natPorts__wrap { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
.natPorts__tabs { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 24px; }
.natPorts__tab {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 16px 18px; border-radius: 12px; cursor: pointer;
  background: var(--bg); border: 2px solid color-mix(in oklab, var(--line) 14%, transparent);
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink-2);
  transition: border-color .15s, background .15s, transform .15s;
}
.natPorts__tab:hover { transform: translateX(3px); }
.natPorts__tabDot { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in oklab, var(--tc) 40%, var(--bg)); border: 2px solid var(--tc); flex-shrink: 0; transition: background .15s; }
.natPorts__tab.on { border-color: var(--tc); color: var(--ink); background: color-mix(in oklab, var(--tc) 8%, var(--bg)); }
.natPorts__tab.on .natPorts__tabDot { background: var(--tc); }

.natPorts__console {
  background: #14110C; border: 2px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
}
.natPorts__bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: #1C170F; border-bottom: 1px solid rgba(255,255,255,0.08); }
.natPorts__dots { display: flex; gap: 6px; }
.natPorts__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.natPorts__dots i:first-child { background: #EC652A; }
.natPorts__title { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.62); letter-spacing: 0.03em; }
.natPorts__ip { margin-left: auto; font-family: var(--mono); font-size: 12px; color: #F1B62D; background: rgba(241,182,45,0.12); padding: 4px 10px; border-radius: 6px; }
.natPorts__head, .natPorts__row {
  display: grid; grid-template-columns: 1.1fr 0.7fr 1.1fr 1.4fr; gap: 10px; align-items: center;
  padding: 12px 20px;
}
.natPorts__head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.07); }
.natPorts__rows { display: block; }
.natPorts__row { border-bottom: 1px solid rgba(255,255,255,0.05); animation: natRowIn .4s ease both; }
@keyframes natRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.natPorts__pub { font-family: var(--mono); font-size: 14.5px; font-weight: 700; color: var(--tc); }
.natPorts__pub em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 500; }
.natPorts__proto { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07); padding: 3px 8px; border-radius: 5px; justify-self: start; }
.natPorts__proto.muted { background: transparent; color: rgba(255,255,255,0.3); }
.natPorts__int { font-family: var(--mono); font-size: 14px; color: rgba(255,255,255,0.92); }
.natPorts__svc { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,0.7); }
.natPorts__foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; background: #1C170F; }
.natPorts__hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.natPorts__pulse { width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; animation: natPulse2 1.6s infinite; }
.natPorts__add { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #F1B62D; cursor: pointer; padding: 6px 14px; border: 1.5px solid rgba(241,182,45,0.4); border-radius: 999px; transition: background .15s; }
.natPorts__add:hover { background: rgba(241,182,45,0.12); }

/* ───────────────  USE CASES (tinted cards + watermark)  ─────────────── */
.natUses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.natUse {
  position: relative; overflow: hidden; display: block;
  background: color-mix(in oklab, var(--uc) 6%, var(--bg));
  border: 2px solid color-mix(in oklab, var(--uc) 22%, var(--line));
  border-radius: 18px; padding: 24px 22px 22px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.natUse:hover { transform: translateY(-4px); box-shadow: 0 16px 34px color-mix(in oklab, var(--uc) 22%, transparent); border-color: var(--uc); }
.natUse__wm {
  position: absolute; right: -22px; top: -26px; z-index: 0;
  color: var(--uc); opacity: 0.10; pointer-events: none;
  transition: transform .35s ease, opacity .25s ease;
}
.natUse:hover .natUse__wm { transform: rotate(8deg) scale(1.06); opacity: 0.16; }
.natUse__ic {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; margin-bottom: 16px;
  color: #fff; background: var(--uc);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--uc) 40%, transparent);
}
.natUse__body { position: relative; z-index: 1; }
.natUse__body h3 { font-family: var(--sans); font-size: 17.5px; font-weight: 700; margin: 0 0 7px; letter-spacing: -0.01em; }
.natUse__body p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 32ch; }
.natUse__go {
  position: absolute; right: 18px; bottom: 18px; z-index: 1;
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--uc); background: var(--bg); border: 2px solid color-mix(in oklab, var(--uc) 30%, var(--line));
  transform: translateX(-2px); opacity: 0; transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.natUse:hover .natUse__go { opacity: 1; transform: translateX(0); background: var(--uc); color: #fff; border-color: var(--uc); }

/* ───────────────  PRICING  ─────────────── */
.natPrice__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.natPrice__top .section__title { margin: 12px 0 0; font-size: clamp(34px, 4vw, 56px); }
.natPrice__toggle { display: inline-flex; padding: 5px; background: var(--bg-2); border: 2px solid var(--line); border-radius: 999px; }
.natPrice__toggle button {
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink-2);
  padding: 9px 20px; border: none; background: transparent; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s;
}
.natPrice__toggle button span { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #1F9D55; background: color-mix(in oklab, #1F9D55 15%, transparent); padding: 2px 7px; border-radius: 999px; }
.natPrice__toggle button.on { background: var(--ink); color: var(--bg); }
.natPrice__toggle button.on span { color: #fff; background: rgba(255,255,255,0.2); }

.natPrice__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.natPlan {
  position: relative; background: var(--bg); border: 2px solid var(--line); border-radius: 16px;
  padding: 26px 22px 24px; display: flex; flex-direction: column;
}
.natPlan--pop { box-shadow: var(--shadow); border-color: var(--accent); }
.natPlan__flag {
  position: absolute; top: -13px; left: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 700;
  background: var(--accent); color: #fff; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--line);
}
.natPlan__name { font-family: var(--sans); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }
.natPlan__price { display: flex; align-items: baseline; gap: 4px; }
.natPlan__price b { font-family: var(--serif); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.natPlan__price span { font-size: 14px; color: var(--ink-3); }
.natPlan__annual { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 6px 0 18px; }
.natPlan__spec { list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1.5px dashed color-mix(in oklab, var(--line) 18%, transparent); display: grid; gap: 11px; }
.natPlan__spec li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); font-family: var(--mono); }
.natPlan__spec li i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--line) 30%, transparent); flex-shrink: 0; }
.natPlan__spec li.hl { color: var(--ink); font-weight: 700; }
.natPlan__spec li.hl i { background: var(--accent); }
.natPlan .btn { margin-top: auto; justify-content: center; }
.natPrice__foot { text-align: center; font-size: 14px; color: var(--ink-3); margin: 28px auto 0; max-width: 60em; line-height: 1.55; }
.natPrice__foot a { color: var(--accent); font-weight: 700; text-decoration: none; }
.natPrice__foot a:hover { text-decoration: underline; }

/* ───────────────  NETWORK (dark)  ─────────────── */
.nat-net { background: var(--ink); color: var(--bg); border-top: none; }
.natNet__grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: center; }
.natNet__h { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -0.02em; margin: 18px 0 18px; }
.natNet__h em { font-style: italic; color: #F1B62D; font-weight: 500; }
.natNet__p { font-size: 17px; line-height: 1.62; color: rgba(255,255,255,0.7); margin: 0 0 28px; max-width: 38em; }
.natNet__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.natNet__stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px 14px; }
.natNet__stat b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.natNet__stat span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

.natNet__card { background: #0E0B07; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px 24px; }
.natNet__cardHead { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); margin-bottom: 18px; text-transform: uppercase; }
.natNet__pulse { width: 9px; height: 9px; border-radius: 50%; background: #1F9D55; animation: natPulse2 1.6s infinite; }
.natNet__pings { display: grid; gap: 13px; }
.natPing { display: grid; grid-template-columns: 116px 1fr 56px; align-items: center; gap: 14px; }
.natPing__city { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,0.85); }
.natPing__bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.natPing__bar i { display: block; height: 100%; background: linear-gradient(90deg, #1F9D55, #6EE7A8); border-radius: 999px; animation: natBar 1.1s ease both; }
@keyframes natBar { from { width: 0 !important; } }
.natPing__ms { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #6EE7A8; text-align: right; }
.natNet__trace { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 3px; }
.natNet__traceK { font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,0.6); }
.natNet__traceV { font-family: var(--mono); font-size: 12.5px; color: #6EE7A8; }

/* ───────────────  TESTIMONI (marquee)  ─────────────── */
.natTesti__head { margin-bottom: 8px; }
.natTesti__track { overflow: hidden; padding: 28px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.natTesti__rail { display: flex; gap: 18px; width: max-content; animation: natMarquee 48s linear infinite; }
.natTesti__track:hover .natTesti__rail { animation-play-state: paused; }
@keyframes natMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.natT {
  width: 360px; flex-shrink: 0; margin: 0;
  background: var(--bg); border: 2px solid var(--line); border-radius: 16px;
  padding: 24px 24px 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}
.natT blockquote { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.46; color: var(--ink); letter-spacing: -0.01em; }
.natT figcaption { display: flex; align-items: center; gap: 12px; }
.natT__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 18px; color: #fff; background: var(--accent); border: 2px solid var(--line); flex-shrink: 0; }
.natT figcaption b { font-family: var(--sans); font-size: 14.5px; font-weight: 700; display: block; }
.natT figcaption small { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ───────────────  FAQ  ─────────────── */
.natFaq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-items: start; }
.natFaq__item { border: 2px solid var(--line); border-radius: 14px; background: var(--bg); overflow: hidden; transition: box-shadow .15s; }
.natFaq__item.open { box-shadow: var(--shadow); }
.natFaq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.natFaq__sign { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.natFaq__sign::before, .natFaq__sign::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .25s ease; }
.natFaq__sign::before { left: 0; top: 8px; width: 18px; height: 3px; }
.natFaq__sign::after { left: 8px; top: 0; width: 3px; height: 18px; }
.natFaq__item.open .natFaq__sign::after { transform: rotate(90deg); opacity: 0; }
.natFaq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.natFaq__item.open .natFaq__a { max-height: 320px; }
.natFaq__a p { margin: 0; padding: 0 22px 22px; font-size: 15px; line-height: 1.62; color: var(--ink-2); }

/* ───────────────  CTA  ─────────────── */
.natCta { padding: 18px 0 80px; }
.natCta__inner {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--bg);
  border: 2px solid var(--line); border-radius: 24px;
  padding: 64px 48px; text-align: center;
}
.natCta__glow { position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 70%); pointer-events: none; }
.natCta__inner h2 { position: relative; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; }
.natCta__inner h2 em { font-style: italic; color: #F1B62D; font-weight: 500; }
.natCta__inner p { position: relative; font-size: 17.5px; line-height: 1.55; color: rgba(255,255,255,0.74); margin: 0 auto 30px; max-width: 44em; }
.natCta__btns { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ───────────────  RESPONSIVE  ─────────────── */
@media (max-width: 1080px) {
  .natFeat__grid { grid-template-columns: repeat(2, 1fr); }
  .natFeat--wide { grid-column: span 2; }
  .natUses__grid { grid-template-columns: repeat(2, 1fr); }
  .natPrice__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}
@media (max-width: 920px) {
  .natHero__grid { grid-template-columns: 1fr; gap: 36px; }
  .natDiagram { max-width: 480px; }
  .natWhat__grid { grid-template-columns: 1fr; gap: 36px; }
  .natNet__grid { grid-template-columns: 1fr; gap: 36px; }
  .natPorts__wrap { grid-template-columns: 1fr; }
  .natPorts__tabs { position: static; flex-direction: row; flex-wrap: wrap; }
  .natPorts__tab { flex: 1 1 calc(50% - 5px); font-size: 14px; padding: 13px 14px; }
  .natFaq__list { grid-template-columns: 1fr; }
  .natV6__row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .natV6__code { align-self: stretch; text-align: center; }
  .natV6__row { align-items: stretch; }
}
@media (max-width: 620px) {
  .natHero { padding: 36px 0 52px; }
  .natFeat__grid, .natUses__grid, .natPrice__grid { grid-template-columns: 1fr; }
  .natFeat--wide { grid-column: span 1; flex-direction: column; gap: 14px; }
  .natFeat--wide .natFeat__ic { width: 48px; height: 48px; }
  .natNet__stats { grid-template-columns: repeat(2, 1fr); }
  .natPorts__head { display: none; }
  .natPorts__row { grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 14px 18px; }
  .natPorts__svc { grid-column: 1 / -1; color: rgba(255,255,255,0.5); font-size: 12.5px; }
  .natPorts__tab { flex: 1 1 100%; }
  .natCta__inner { padding: 44px 24px; }
  .natT { width: 300px; }
  .natHero__cta .btn, .natCta__btns .btn { flex: 1 1 100%; justify-content: center; }
}


/* === NATCFG-REDESIGN === */
/* why-NAT facts */
.natWhat__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 4px; }
.natFact { background: var(--bg-2); border: 2px solid var(--line); border-radius: 12px; padding: 14px 14px; }
.natFact b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.natFact span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); }

/* port forwarding configurator */
.natCfg__layout { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.natCfg__side { display: grid; gap: 0; position: sticky; top: 24px; align-content: start; }
.natCfg__sideItem { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 0 0 26px; }
.natCfg__sideItem:last-child { padding-bottom: 0; }
.natCfg__sideItem:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 10%, transparent)); border-radius: 2px; }
.natCfg__sideIc { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; color: #fff; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 14%, transparent), 0 6px 14px color-mix(in oklab, var(--accent) 35%, transparent); }
.natCfg__sideItem b { display: block; font-family: var(--sans); font-size: 16px; font-weight: 700; margin: 2px 0 4px; }
.natCfg__sideItem p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }

.natCfg__console { background: #14110C; border: 2px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.natCfg__bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: #1C170F; border-bottom: 1px solid rgba(255,255,255,0.08); }
.natCfg__dots { display: flex; gap: 6px; }
.natCfg__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.natCfg__dots i:first-child { background: #EC652A; }
.natCfg__title { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.62); letter-spacing: 0.03em; }
.natCfg__ip { margin-left: auto; font-family: var(--mono); font-size: 12px; color: #F1B62D; background: rgba(241,182,45,0.12); padding: 4px 10px; border-radius: 6px; }

.natCfg__head, .natCfg__row { display: grid; grid-template-columns: 1.05fr 0.62fr 1fr 1.25fr 40px; gap: 10px; align-items: center; padding: 12px 18px; }
.natCfg__head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.07); }
.natCfg__row { border-bottom: 1px solid rgba(255,255,255,0.05); animation: natRowIn .35s ease both; }
.natCfg__row.locked { background: rgba(255,255,255,0.02); }
.natCfg__pub { font-family: var(--mono); font-size: 14.5px; font-weight: 700; color: #F1B62D; display: flex; align-items: center; gap: 7px; }
.natCfg__pub em { font-style: normal; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 5px; }
.natCfg__proto { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.07); padding: 3px 8px; border-radius: 5px; justify-self: start; }
.natCfg__int { font-family: var(--mono); font-size: 14px; color: rgba(255,255,255,0.92); }
.natCfg__svc { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.natCfg__act { display: flex; justify-content: flex-end; }
.natCfg__del { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.14); background: transparent; color: rgba(255,255,255,0.55); cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s, color .15s; }
.natCfg__del:hover { background: rgba(236,101,42,0.18); border-color: #EC652A; color: #EC652A; }
.natCfg__lock { color: rgba(255,255,255,0.3); display: grid; place-items: center; }

.natCfg__add { display: grid; grid-template-columns: auto 1fr 1.3fr auto; gap: 10px; padding: 14px 18px; background: #100D08; border-top: 1px solid rgba(255,255,255,0.08); }
.natCfg__sel, .natCfg__inp { font-family: var(--mono); font-size: 13px; background: #221B12; border: 1.5px solid rgba(255,255,255,0.12); color: #fff; border-radius: 8px; padding: 9px 11px; outline: none; transition: border-color .15s; min-width: 0; }
.natCfg__sel { cursor: pointer; }
.natCfg__inp::placeholder { color: rgba(255,255,255,0.34); }
.natCfg__inp:focus, .natCfg__sel:focus { border-color: #F1B62D; }
.natCfg__inp--label { font-family: var(--sans); }
.natCfg__btn { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #14110C; background: #F1B62D; border: none; border-radius: 8px; padding: 9px 18px; cursor: pointer; white-space: nowrap; transition: opacity .15s, transform .15s; }
.natCfg__btn:hover:not(:disabled) { transform: translateY(-1px); }
.natCfg__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.natCfg__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: #1C170F; }
.natCfg__hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); }
.natCfg__hint b { color: #fff; }
.natCfg__pulse { width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; animation: natPulse2 1.6s infinite; flex-shrink: 0; }
.natCfg__note { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.4); text-align: right; }

.natNet__p b { color: #fff; font-weight: 700; }

@media (max-width: 860px) {
  .natCfg__layout { grid-template-columns: 1fr; }
  .natCfg__side { position: static; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .natCfg__side .natCfg__sideItem { padding-bottom: 0; }
  .natCfg__side .natCfg__sideItem::after { display: none; }
}
@media (max-width: 620px) {
  .natWhat__facts { grid-template-columns: 1fr; }
  .natCfg__side { grid-template-columns: 1fr; gap: 0; }
  .natCfg__side .natCfg__sideItem { padding-bottom: 22px; }
  .natCfg__side .natCfg__sideItem:last-child { padding-bottom: 0; }
  .natCfg__side .natCfg__sideItem:not(:last-child)::after { display: block; }
  .natCfg__head { display: none; }
  .natCfg__row { grid-template-columns: 1fr 1fr 34px; gap: 4px 10px; padding: 12px 14px; }
  .natCfg__pub { grid-column: 1; grid-row: 1; }
  .natCfg__svc { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .natCfg__proto { grid-column: 1; grid-row: 2; justify-self: start; }
  .natCfg__int { grid-column: 2; grid-row: 2; justify-self: end; }
  .natCfg__act { grid-column: 3; grid-row: 1 / span 2; align-items: center; }
  .natCfg__add { grid-template-columns: auto 1fr; }
  .natCfg__inp--label { grid-column: 1 / -1; }
  .natCfg__btn { grid-column: 1 / -1; }
}


/* === CMPCHIP === */
.cmpCard__chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; color: var(--ink-3); background: color-mix(in oklab, var(--line) 14%, transparent); border: 1.5px solid color-mix(in oklab, var(--line) 24%, transparent); padding: 4px 10px; border-radius: 999px; align-self: center; white-space: nowrap; }

@media (max-width:720px){.natCfg__btn{min-height:42px}.natCfg__note{font-size:12px}}

/* pricing v2 */
.natPrice__grid{align-items:stretch}
.natPk{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:24px 22px 22px;box-shadow:5px 5px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.natPk:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--ink)}
.natPk__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
.natPk__name{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.natPk__flag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:#EC652A;padding:4px 10px 4px 8px;border-radius:999px;white-space:nowrap}
.natPk__price{display:flex;align-items:baseline;gap:4px;margin-top:18px;color:var(--ink)}
.natPk__rp{font-family:var(--sans);font-size:16px;font-weight:700;align-self:flex-start;margin-top:8px}
.natPk__price b{font-family:var(--serif);font-size:clamp(36px,3.4vw,46px);font-weight:500;line-height:1;letter-spacing:-.02em}
.natPk__per{font-size:14px;color:var(--ink-3);font-weight:600}
.natPk__bill{font-size:13px;color:var(--ink-3);margin-top:8px}
.natPk__ports{margin:20px 0 16px;padding:14px;border-radius:14px;background:color-mix(in oklab,#EC652A 8%,#fff)}
.natPk__portsTop{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2);font-weight:600}
.natPk__portsTop b{font-family:var(--mono);font-size:14px;color:#C2410C}
.natPk__meter{height:8px;border-radius:99px;background:color-mix(in oklab,#EC652A 18%,#fff);margin-top:9px;overflow:hidden}
.natPk__meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F1B62D,#EC652A)}
.natPk__spec{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:0 0 16px}
.natPk__spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.natPk__spec dd{margin:3px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.natPk__inc{list-style:none;margin:0 0 20px;padding:14px 0 0;border-top:1.5px dashed var(--line);display:grid;gap:7px}
.natPk__inc li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink-2)}
.natPk__inc li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;background:#1F9D55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat}
.natPk__btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;transition:background .15s,color .15s}
.natPk__btn span{transition:transform .15s}
.natPk__btn:hover{background:var(--ink);color:#fff}
.natPk__btn:hover span{transform:translateX(3px)}
.natPk--pop{background:#1C1A17;border-color:#1C1A17;box-shadow:5px 5px 0 #EC652A}
.natPk--pop:hover{box-shadow:8px 9px 0 #EC652A}
.natPk--pop .natPk__name{color:#F1B62D}
.natPk--pop .natPk__price,.natPk--pop .natPk__spec dd{color:#fff}
.natPk--pop .natPk__per,.natPk--pop .natPk__bill,.natPk--pop .natPk__spec dt{color:rgba(255,255,255,.62)}
.natPk--pop .natPk__ports{background:rgba(255,255,255,.07)}
.natPk--pop .natPk__portsTop{color:rgba(255,255,255,.8)}
.natPk--pop .natPk__portsTop b{color:#F1B62D}
.natPk--pop .natPk__meter{background:rgba(255,255,255,.12)}
.natPk--pop .natPk__inc{border-color:rgba(255,255,255,.18)}
.natPk--pop .natPk__inc li{color:rgba(255,255,255,.82)}
.natPk__btn--pop{background:#EC652A;border-color:#EC652A;color:#fff}
.natPk__btn--pop:hover{background:#fff;border-color:#fff;color:var(--ink)}
@media (max-width:560px){.natPk{padding:22px 18px 18px}}

/* reviews v2 */
.natRv{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:stretch}
.natRv__stage{position:relative;margin:0;background:#1C1A17;color:#fff;border-radius:24px;padding:40px 42px 30px;overflow:hidden;display:flex;flex-direction:column;min-height:380px;box-shadow:6px 6px 0 var(--rc);animation:natRvIn .45s ease both}
.natRv__stage::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--rc) 45%,transparent),transparent 70%);opacity:.55;pointer-events:none}
@keyframes natRvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.natRv__mark{width:46px;height:34px;color:var(--rc);position:relative}
.natRv__stars{margin-top:18px;color:#F1B62D;letter-spacing:3px;font-size:16px}
.natRv__q{position:relative;margin:12px 0 28px;font-family:var(--serif);font-size:clamp(21px,2.1vw,28px);line-height:1.4;font-weight:500;text-wrap:pretty}
.natRv__who{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:14px;position:relative}
.natRv__av{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--rc);color:#fff;flex-shrink:0}
.natRv__id b{display:block;font-size:16px}
.natRv__id small{font-size:13px;color:rgba(255,255,255,.65)}
.natRv__tags{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.natRv__tags span{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.natRv__tags span:first-child{background:var(--rc);border-color:var(--rc);color:#fff;font-weight:700}
.natRv__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.natRv__bar i{display:block;height:100%;width:0;background:var(--rc);animation:natRvBar 5.5s linear forwards}
@keyframes natRvBar{to{width:100%}}
.natRv__list{display:grid;gap:10px;align-content:start}
.natRv__it{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 16px;background:#fff;border:2px solid var(--line);border-radius:16px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.natRv__it:hover{border-color:var(--rc);transform:translateX(3px)}
.natRv__it.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--rc);transform:translateX(4px)}
.natRv__itAv{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;flex-shrink:0;color:var(--rc);background:color-mix(in oklab,var(--rc) 13%,#fff)}
.natRv__it.on .natRv__itAv{background:var(--rc);color:#fff}
.natRv__itTx b{display:block;font-size:15px}
.natRv__itTx small{font-size:13px;color:var(--ink-3)}
@media (max-width:900px){.natRv{grid-template-columns:1fr}.natRv__list{grid-template-columns:repeat(2,minmax(0,1fr))}.natRv__stage{min-height:0;padding:30px 24px 26px}.natRv__tags{margin-left:0;width:100%}}
@media (max-width:520px){.natRv__list{grid-template-columns:1fr}.natRv__it{padding:11px 13px}.natRv__q{font-size:19px}}
@media (prefers-reduced-motion:reduce){.natRv__stage{animation:none}}

/* faq v2 */
.natFq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
.natFq__list{display:grid;gap:8px}
.natFq__q{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;background:#fff;border:2px solid var(--line);border-radius:14px;font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.natFq__q:hover{border-color:var(--ink)}
.natFq__it.on .natFq__q{border-color:var(--ink);box-shadow:4px 4px 0 #EC652A;transform:translate(-2px,-2px)}
.natFq__n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-3);flex-shrink:0}
.natFq__it.on .natFq__n{color:#EC652A}
.natFq__t{flex:1;font-size:16px;font-weight:600;line-height:1.35}
.natFq__chev{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex-shrink:0;color:var(--ink-3);background:var(--bg-2);transition:background .15s,color .15s,transform .2s}
.natFq__it.on .natFq__chev{background:#EC652A;color:#fff}
.natFq__inl{display:none}
.natFq__panel{position:sticky;top:96px;background:#1C1A17;color:#fff;border-radius:22px;padding:34px 34px 28px;box-shadow:6px 6px 0 #EC652A;animation:natRvIn .35s ease both}
.natFq__pk{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#F1B62D}
.natFq__ph{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);font-weight:500;line-height:1.25;margin:12px 0 16px;text-wrap:pretty}
.natFq__pa{font-size:17px;line-height:1.7;color:rgba(255,255,255,.85);margin:0}
.natFq__help{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.65)}
.natFq__help a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;background:#EC652A;color:#fff;font-weight:700;text-decoration:none}
.natFq__help a:hover{background:#fff;color:var(--ink)}
@media (max-width:860px){
.natFq{grid-template-columns:1fr}
.natFq__panel{display:none}
.natFq__it.on .natFq__q{transform:none;box-shadow:none;border-radius:14px 14px 0 0;background:#1C1A17;color:#fff;border-color:#1C1A17}
.natFq__it.on .natFq__chev{transform:rotate(90deg)}
.natFq__it.on .natFq__inl{display:block;background:#1C1A17;color:rgba(255,255,255,.85);border-radius:0 0 14px 14px;padding:0 18px 18px 18px;margin-top:-2px}
.natFq__inl p{margin:0;font-size:15px;line-height:1.65;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.natFq__t{font-size:15px}
}
.natRv__av{font-family:var(--serif);font-size:20px;font-weight:600}
.natRv__it{padding:14px 18px;border-left:5px solid var(--rc)}
.natRv__itTx b{font-size:16px}

/* reviews compact */
.natRv{gap:18px}
.natRv__stage{min-height:0;padding:28px 30px 24px}
.natRv__mark{width:34px;height:26px}
.natRv__stars{margin-top:12px;font-size:14px}
.natRv__q{margin:8px 0 20px;font-size:clamp(19px,1.8vw,23px)}
.natRv__av{width:42px;height:42px;font-size:17px}
.natRv__list{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.natRv__it{padding:10px 14px;border-radius:12px}
.natRv__it.on{transform:translate(-2px,-2px)}
.natRv__it:hover{transform:translateY(-2px)}
.natRv__itTx b{font-size:15px}
.natRv__itTx small{font-size:12.5px}
@media (max-width:900px){.natRv__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.natRv__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* billing toggle polish */
.natPrice__toggle{position:relative;padding:5px;gap:4px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink)}
.natPrice__toggle button{padding:11px 20px;border-radius:11px;font-size:15px;color:var(--ink-2)}
.natPrice__toggle button:hover:not(.on){background:var(--bg-2);color:var(--ink)}
.natPrice__toggle button.on{background:#EC652A;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.natPrice__toggle button span{font-size:11px;padding:3px 8px;border-radius:6px;background:#1F9D55;color:#fff}
.natPrice__toggle button.on span{background:#fff;color:#C2410C}
.natRv__itTx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.natRv__itTx{min-width:0}
.natRv__list{align-content:stretch}