/* ============================================================
   VPNFP components.css
   Cross-page components: hero device, tabs, faq, plan cards,
   tables, platform cards, post cards, callout, promo block,
   badges, preview-only demo classes
   ============================================================ */

/* ============================================================
   Hero — ink manuscript on dark paper (approved first screen)
   Entrance choreography is owned by motion.js (GSAP);
   CSS keeps only the ambient loops (halo breathe, spark travel).
   ============================================================ */
.hero{
  position:relative;
  min-height:calc(100svh - 65px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
/* ruled-paper lines + faint cyan glow across the device band */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(640px 240px at 50% 66%, var(--accent-glow-soft), transparent 72%),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--line-faint) 31px 32px);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:36px 40px 26px;
  text-align:center;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:6px 16px;
  background:var(--bg-panel);
}
.hero-badge::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  flex:none;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:64px;
  line-height:1.16;
  letter-spacing:.01em;
  margin:22px 0 24px;
}
.hero h1 .kw{
  color:var(--accent);
  text-shadow:0 0 26px var(--accent-glow);
}
.cta-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
}
.hero-desc{
  font-size:16px;
  color:var(--text-muted);
  margin-bottom:20px;
}
.hero-desc strong{color:var(--text);font-weight:600}
/* fact capsules — outlined mono badges */
.fact-caps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.cap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:var(--r-s);
  background:var(--bg-panel);
  padding:6px 13px;
  max-width:100%;
}
.cap::before{
  content:"";
  width:5px;height:5px;
  border-radius:1px;
  background:var(--accent-dark);
  flex:none;
}

/* ---- pen-manuscript device (route-map) ---- */
.device{
  position:relative;
  width:1160px;
  max-width:100%;
  height:230px;
  margin:26px auto 6px;
}
.device svg{display:block;width:100%;height:100%}
.ink-glow{
  stroke:var(--accent);
  stroke-width:7;
  fill:none;
  opacity:.32;
  filter:url(#inkblur);
  stroke-linecap:round;
  stroke-dasharray:1;
}
.ink-main{
  stroke:var(--accent);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:1;
}
.ink-thick{
  stroke:var(--accent);
  stroke-width:4;
  fill:none;
  stroke-linecap:round;
}
.blob{fill:var(--accent)}
.node .dot{
  fill:var(--bg);
  stroke:var(--accent);
  stroke-width:1.6;
}
.node .halo{
  fill:none;
  stroke:var(--accent);
  stroke-width:1;
  opacity:.1;
  animation:breathe 3.4s ease-in-out infinite;
}
.node .city{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  fill:var(--text-muted);
}
.n1 .halo{animation-delay:.2s}
.n2 .halo{animation-delay:.8s}
.n3 .halo{animation-delay:1.4s}
.n4 .halo{animation-delay:2s}
.n5 .halo{animation-delay:2.6s}
.n6 .halo{animation-delay:3.2s}
@keyframes breathe{0%,100%{opacity:.08}50%{opacity:.42}}
.nib{
  stroke:var(--text);
  stroke-width:1.4;
  fill:none;
  stroke-linejoin:round;
  stroke-linecap:round;
  opacity:.85;
}
/* two sparks patrol the ink line (ambient loop) */
.spark{
  position:absolute;
  left:0;top:0;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent),0 0 24px var(--accent-glow);
  offset-path:path("M30 156C45 152 62 150 80 148C140 141 210 122 270 116C330 110 400 143 460 150C520 157 590 124 650 118C710 112 770 136 830 140C890 144 950 118 1010 112C1040 109 1070 114 1096 119");
  opacity:0;
  animation:travel 11s linear 3s infinite;
}
.spark.s2{width:5px;height:5px;animation-delay:8.5s}
@keyframes travel{
  0%{offset-distance:0%;opacity:0}
  4%{opacity:1}
  94%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* ---- platform row + hot-route flag row ---- */
.strip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
.strip-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
}
.strip-cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--text-muted);
  opacity:.7;
  margin-right:4px;
}
.p-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
  transition:color .15s ease;
}
.p-item:hover{color:var(--text)}
.p-item svg{flex:none}
.f-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
}
.f-item svg{flex:none;border-radius:3px;box-shadow:0 0 0 1px var(--border)}
.f-red{fill:var(--flag-red)}
.f-blue{fill:var(--flag-blue)}
.f-white{fill:var(--flag-white)}
.f-red-s{stroke:var(--flag-red)}
.f-white-s{stroke:var(--flag-white)}

/* ---- first-section lower edge band ---- */
.sec-peek{
  background:var(--bg-panel);
  border-top:1px solid var(--border);
  padding-top:52px;
  padding-bottom:72px;
  text-align:center;
}

/* hero responsive */
@media (max-width:960px){
  .hero h1{font-size:38px}
  .hero h1 .no-break{white-space:normal}
  .hero-inner{padding:28px 20px 20px}
  .device{height:auto}
  .device svg{height:auto}
  .spark{display:none}
  .lbl-opt{display:none}
}

/* ============================================================
   Generic badges & tags
   ============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:6px 16px;
  background:var(--bg-panel);
}
.badge::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  flex:none;
}
.tag{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--accent);
  border:1px solid var(--accent-dark);
  border-radius:var(--r-s);
  padding:3px 9px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tag-muted{
  color:var(--text-muted);
  border-color:var(--border);
}

/* ============================================================
   Tabs (logic in tabs.js)
   ============================================================ */
.tab-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 20px;
  font-size:14px;
  font-weight:600;
  color:var(--text-muted);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.tab:hover{color:var(--text)}
.tab.is-active{
  color:var(--ink-on-accent);
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 18px var(--accent-glow);
}
.tab-panel{display:none}
.tab-panel.is-active{display:block}

/* ============================================================
   FAQ (native details/summary)
   ============================================================ */
.faq-item{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  margin-bottom:10px;
}
.faq-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  font-weight:600;
  font-size:15.5px;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--accent);
  flex:none;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body{
  padding:0 20px 18px;
  color:var(--text-muted);
  font-size:14.5px;
  line-height:1.75;
}

/* ============================================================
   Plan cards
   ============================================================ */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:28px 26px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.plan-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dark);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.plan-card.is-featured{
  border-color:var(--accent-dark);
  background:var(--bg-panel2);
  box-shadow:0 0 30px var(--accent-glow-soft);
}
.plan-badge{
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 24px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-on-accent);
  background:var(--accent);
  border-radius:var(--r-pill);
  padding:4px 12px;
}
.plan-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
}
.plan-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:14px 0 4px;
}
.plan-price .num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:40px;
  letter-spacing:-.01em;
  line-height:1;
}
.plan-price .unit{font-size:13px;color:var(--text-muted)}
.plan-note{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-muted);
}
.plan-feats{
  list-style:none;
  margin:18px 0 22px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.plan-feats li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:14px;
  color:var(--text-muted);
}
.plan-feats li::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--accent-dark);
  margin-top:7px;
}
.plan-card .btn{margin-top:auto;width:100%}

/* ============================================================
   Data tables (route list, plan comparison)
   ============================================================ */
.table-wrap{
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-m);
  background:var(--bg-panel);
}
.data-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:14px;
}
.data-table th{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--text);
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  background:var(--bg-panel2);
}
.data-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line-faint);
  color:var(--text-muted);
  white-space:nowrap;
}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--bg-panel2)}
.data-table .td-strong{color:var(--text);font-weight:600}
.data-table .row-group td{
  background:var(--bg-panel2);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--accent);
  padding:9px 14px;
}

/* ============================================================
   Platform cards (download entries)
   ============================================================ */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
.plat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:22px 14px;
  transition:transform .15s ease,border-color .15s ease;
}
.plat-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dark);
}
.plat-card svg{flex:none;color:var(--text)}
.plat-name{font-size:14px;font-weight:600}
.plat-card .btn{width:100%;margin-top:auto}
.plat-note{
  margin-top:16px;
  font-size:13px;
  color:var(--text-muted);
  text-align:center;
}

/* ============================================================
   Blog post cards
   ============================================================ */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:22px 24px;
  transition:transform .15s ease,border-color .15s ease;
}
.post-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-dark);
}
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.post-date{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
}
.post-card h3{
  font-size:17px;
  line-height:1.45;
  margin-bottom:10px;
}
.post-card h3 a{color:var(--text);transition:color .15s ease}
.post-card h3 a:hover{color:var(--accent)}
.post-sum{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.7;
  margin-bottom:14px;
}
.post-more{
  margin-top:auto;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}

/* ============================================================
   Callout
   ============================================================ */
.callout{
  border-left:3px solid var(--accent);
  background:var(--bg-panel);
  border-radius:0 var(--r-m) var(--r-m) 0;
  padding:16px 20px;
  margin:20px 0;
  font-size:14.5px;
  color:var(--text-muted);
  line-height:1.75;
}
.callout strong{color:var(--text)}

/* ============================================================
   End-of-article promo block
   ============================================================ */
.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:26px 30px;
  margin-top:40px;
}
.promo-info{flex:1 1 16rem;min-width:16rem}
.promo-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  margin-bottom:6px;
}
.promo-sub{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.7;
  max-width:56ch;
}
.promo-cta{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ============================================================
   Preview-only demo helpers (design-preview.html)
   ============================================================ */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.pv-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--text-muted);
  margin-bottom:14px;
}
.pv-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
}
.swatch{
  border:1px solid var(--border);
  border-radius:var(--r-m);
  overflow:hidden;
  background:var(--bg-panel);
}
.swatch .sw-color{height:64px;border-bottom:1px solid var(--border)}
.swatch .sw-meta{padding:10px 12px}
.swatch .sw-name{font-size:12.5px;font-weight:600;margin-bottom:3px}
.swatch .sw-var{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.03em;
  color:var(--text-muted);
}
.sw-bg{background:var(--bg)}
.sw-panel{background:var(--bg-panel)}
.sw-panel2{background:var(--bg-panel2)}
.sw-border{background:var(--border)}
.sw-accent{background:var(--accent)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-text{background:var(--text)}
.sw-muted{background:var(--text-muted)}
.sw-success{background:var(--success)}
.sw-warn{background:var(--warn)}
.sw-error{background:var(--error)}
.sw-ink{background:var(--ink-on-accent)}

@media (max-width:960px){
  .plan-grid{grid-template-columns:1fr}
}