:root{--bg:#0b0f17;--bg2:#111827;--card:rgba(255,255,255,.035);--line:rgba(255,255,255,.08);--tx:#e2e8f0;--mut:#8b95a7;--acc:#0ea5e9;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--font:'Inter',system-ui,sans-serif;--mono:'Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(1200px 500px at 70% -10%,rgba(14,165,233,.12),transparent),var(--bg);color:var(--tx);font-family:var(--font);min-height:100vh}
a{color:var(--acc);text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
/* Anchor links scrolled the section heading underneath the sticky header, so
   every nav jump landed on text the header was covering. The header is 69px on
   desktop and 86px on mobile; the extra ~18px keeps the eyebrow clear of it. */
section[id]{scroll-margin-top:88px}
@media(max-width:720px){section[id]{scroll-margin-top:104px}}
.top{position:sticky;top:0;z-index:50;background:rgba(11,15,23,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:22px;padding:13px 0}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--acc),#6366f1);box-shadow:0 0 14px rgba(14,165,233,.6)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:7px 13px;border-radius:9px;font-size:13px;color:var(--mut);font-weight:600}
.nav a:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.nav a.cta{background:var(--acc);color:#fff}
.nav a.cta:hover{background:#38bdf8}
.hero{padding:56px 0 34px;text-align:center}
.hero h1{font-size:clamp(26px,4.5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.5px}
.hero h1 span{background:linear-gradient(90deg,var(--acc),#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);margin:14px auto 22px;max-width:640px;font-size:15.5px;line-height:1.6}
.hero .base{display:inline-block;font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;padding:8px 14px;color:#c7d2fe}
/* Hero steps: concrete "how it works" beats abstract marketing copy. Each step
   states the literal action and its literal cost, not a benefit adjective. */
.hero-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;margin:22px auto 0;max-width:820px;text-align:left}
.hstep{display:flex;gap:11px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.hstep b{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--acc);
  background:rgba(14,165,233,.14);border-radius:7px;padding:3px 8px;flex:0 0 auto;line-height:1.3}
.hstep strong{display:block;font-size:13px;color:var(--tx);margin-bottom:3px}
.hstep span{font-size:11.5px;color:var(--mut);line-height:1.5}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.dot-live{width:6px;height:6px;border-radius:50%;background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pulse-dot 2.4s ease-out infinite}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
/* The stats strip is a SIBLING of .hero, not a child -- `.hero .stats` never
   matched it, so this had no display rule at all and the three stats stacked as
   blocks on desktop too. Scoped to .stats itself, not .hero .stats. */
.stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 18px;text-align:center}
.stat b{display:block;font-size:20px;font-family:var(--mono);color:#fff}
.stat span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.banner{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);border-radius:12px;padding:12px 16px;margin:18px 0;font-size:13.5px;display:flex;gap:10px;align-items:center}
.banner .ic{font-size:18px}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:26px 0 14px}
.search{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--tx);font-size:13.5px;outline:none}
.search:focus{border-color:var(--acc)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--mut);font-size:12px;cursor:pointer;font-weight:600}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;transition:.2s}
.card:hover{border-color:rgba(14,165,233,.45);transform:translateY(-2px)}
.card .name{font-family:var(--mono);font-size:13px;font-weight:700;word-break:break-all}
.card .fam{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;background:rgba(14,165,233,.14);color:#7dd3fc;border-radius:5px;padding:2px 7px;margin-top:6px}
.card .price{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:12px;color:var(--mut)}
.card .price b{color:#fff;font-family:var(--mono);font-size:12.5px}
.card .copy{margin-top:12px;width:100%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--tx);padding:7px;border-radius:8px;font-size:11.5px;cursor:pointer;font-weight:600}
.card .copy:hover{border-color:var(--acc);color:#7dd3fc}
.section{margin:40px 0 14px;font-size:19px;font-weight:800}
.pkg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.pkg-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;position:relative}
.pkg-card.pop{border-color:rgba(245,158,11,.5);box-shadow:0 0 20px rgba(245,158,11,.12)}
.pkg-card .badge{position:absolute;top:-9px;right:12px;background:var(--warn);color:#0b0f17;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.5px}
.pkg-card h4{font-size:15px}
.pkg-card .tok{font-family:var(--mono);font-size:20px;font-weight:800;margin:8px 0;color:#c7d2fe}
.pkg-card .pr{font-size:13px;color:var(--mut)}
.pkg-card .meta{font-family:var(--mono);font-size:11.5px;color:var(--mut);opacity:.85;margin-top:4px}
.pkg-card.soldout{opacity:.55}
.pkg-card .stock{font-family:var(--mono);font-size:11.5px;font-weight:700;margin-top:8px}
.pkg-card .stock.out{color:var(--err)}
.pkg-card .stock.low{color:var(--warn)}
.pkg-card .btn:disabled{opacity:.45;cursor:not-allowed}
/* Value-forward package card. The price leads and the per-million-token rate
   sits right under it, because "10jt token" alone does not tell a buyer that
   the 200jt tier is 62% cheaper per token. */
.pkg-card .pr-big{font-family:var(--mono);font-size:26px;font-weight:800;margin:10px 0 2px;
  letter-spacing:-.5px;background:linear-gradient(135deg,#e0f2fe,#7dd3fc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pkg-card .tok{font-size:13px;color:var(--mut);font-family:inherit;margin:0 0 10px}
.pkg-card .rate{font-family:var(--mono);font-size:12.5px;color:#a7f3d0;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.22);
  border-radius:8px;padding:5px 9px;display:inline-block}
.pkg-card .rate small{opacity:.7;margin-left:4px;font-size:10.5px}
.pkg-card .save{font-size:11.5px;color:#34d399;margin-top:8px;font-weight:600}
.pkg-card .feats{list-style:none;display:grid;gap:5px;margin:12px 0 0;padding-top:12px;
  border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.pkg-card .feats b{color:var(--tx);font-family:var(--mono)}
/* Best-value tier gets emphasis, not the old amber "POPULER" which read as a
   warning. Amber stays for genuine scarcity (low stock). */
.pkg-card.best{border-color:rgba(16,185,129,.45);box-shadow:0 0 22px rgba(16,185,129,.1)}
.pkg-card .badge.best{background:var(--ok);color:#04231a}
.pkg-card .btn.primary{background:linear-gradient(135deg,var(--acc),#6366f1);
  border:0;color:#fff;font-weight:700}
.pkg-card .btn.primary:hover{filter:brightness(1.1)}
.footer{border-top:1px solid var(--line);margin-top:60px;padding:26px 0;color:var(--mut);font-size:12.5px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.footer a{color:var(--mut)}
.footer a:hover{color:var(--tx)}
.hidden{display:none!important}
.alert{border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.08);border-radius:10px;padding:12px;font-size:13px;color:#fca5a5;margin:12px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--tx)}
.eyebrow{font-size:11px;letter-spacing:1.4px;color:#7dd3fc;font-weight:800;margin-bottom:8px}
.lede{color:var(--mut);max-width:640px;line-height:1.55;margin:8px 0 18px}
.hero-offer{display:inline-block;margin:8px 0 16px;padding:8px 12px;border-radius:10px;background:rgba(14,165,233,.12);color:#e0f2fe;font-weight:700}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.stats-row{padding:8px 0 10px}
.model-table{display:flex;flex-direction:column;gap:6px}
.mrow{display:grid;grid-template-columns:1.4fr .5fr 1.4fr;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px}
.mrow code{font-family:var(--mono);color:#e0f2fe;word-break:break-all}
.mrow span{color:var(--mut)}
/* Multiplier is the price signal, so it gets to be loud: a badge, not muted
   filler. Tiers let a buyer compare cost across the list at a glance. */
.mrow .mult{display:inline-flex;align-items:center;gap:5px;justify-self:start;
  font-family:var(--mono);font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:20px;cursor:help;
  background:rgba(148,163,184,.14);color:#cbd5e1;border:1px solid var(--line)}
.mrow .mult em{font-style:normal;opacity:.62;font-size:10.5px;letter-spacing:.3px}
.mrow .mult.lo{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
.mrow .mult.mid{background:rgba(14,165,233,.15);color:#7dd3fc;border-color:rgba(14,165,233,.3)}
.mrow .mult.hi{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.mrow .mult.top{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3)}
/* Column header. The multiplier is meaningless without a label saying it is a
   cost multiplier, so the header carries the word the badge itself cannot. */
.mrow-head{background:none;border:0;padding:0 12px 2px;font-size:10.5px;
  letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.mrow-head em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}

/* ===== MARQUEE =====
   Model names drift sideways under the header, the way Octalabs does it. The
   track is rendered twice in JS and shifted by -50% of its own width, so the
   moment it wraps the duplicate is already in the exact spot the original
   started from -- that is what hides the seam.

   One row, not two: two counter-scrolling bands read as visual noise and the
   eye has no anchor. Speed is deliberately slow (180s for a full pass) -- at
   60s across 26 items the text was genuinely hard to read. */
.marquee-strip{border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);
  overflow:hidden;padding:7px 0}
.marquee{display:flex;width:max-content;gap:8px;animation:mq-scroll 180s linear infinite}
.marquee-strip:hover .marquee{animation-play-state:paused}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03);
  font-size:11.5px;white-space:nowrap}
.mq-item code{font-family:var(--mono);color:#cbd5e1}
.mq-item .mult{font-family:var(--mono);font-size:10.5px;font-weight:700}
.mq-item .tier{font-style:normal;font-size:9.5px;letter-spacing:.4px;
  text-transform:uppercase;opacity:.75}
/* Respect a stated OS preference: constant sideways motion is a known
   vestibular trigger and CSS animations are switchable exactly for this. */
@media(prefers-reduced-motion:reduce){
  .marquee{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-strip{overflow-x:auto}
}

/* ===== TIER BADGES ===== */
.tier{display:inline-flex;padding:2px 7px;border-radius:20px;font-size:9.5px;
  font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.tier.lo{background:rgba(16,185,129,.15);color:#34d399}
.tier.mid{background:rgba(14,165,233,.15);color:#7dd3fc}
.tier.hi{background:rgba(245,158,11,.15);color:#fbbf24}
.tier.top{background:rgba(239,68,68,.15);color:#fca5a5}

/* ===== COST CALCULATOR ===== */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:18px}
.calc-form{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px}
.calc-form label{display:grid;gap:5px;font-size:11.5px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--mut)}
.calc-form input,.calc-form select{background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:9px;color:#fff;padding:10px 11px;font-size:14px;font-family:inherit;width:100%}
.calc-form select:focus,.calc-form input:focus{outline:none;border-color:var(--acc)}
/* Slider row: the live value sits on the label line so the number and the
   handle move together instead of the value hiding below the track. */
.calc-form label.slide{grid-template-columns:1fr auto;align-items:baseline;
  gap:6px 10px;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--mut)}
.calc-form label.slide output{font-family:var(--mono);font-size:14px;font-weight:700;
  color:var(--tx);text-align:right;white-space:nowrap}
.calc-form label.slide input[type=range]{grid-column:1/-1;-webkit-appearance:none;
  appearance:none;width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.12);
  outline:none;cursor:pointer;padding:0}
.calc-form label.slide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;background:var(--acc);border:2px solid #0b0f17;
  box-shadow:0 0 0 3px rgba(14,165,233,.22);cursor:pointer}
.calc-form label.slide input[type=range]::-moz-range-thumb{width:16px;height:16px;
  border-radius:50%;background:var(--acc);border:2px solid #0b0f17;
  box-shadow:0 0 0 3px rgba(14,165,233,.22);cursor:pointer}
.calc-form label.slide input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(14,165,233,.35)}
.calc-out{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;display:grid;gap:10px;align-content:start}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--mut)}
.calc-row b{font-family:var(--mono);color:var(--tx);font-size:14px}
.calc-row.big{padding-top:10px;border-top:1px solid var(--line)}
.calc-row.big span{color:var(--tx);font-size:13.5px}
.calc-row.big b{font-size:24px;font-weight:800;
  background:linear-gradient(135deg,#e0f2fe,#7dd3fc);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.calc-note{font-size:11.5px;color:var(--mut);line-height:1.6;padding-top:8px;
  border-top:1px solid var(--line)}
@media(max-width:720px){
  .calc{grid-template-columns:1fr}
}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0}
.steps li{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.steps b{color:#7dd3fc;font-family:var(--mono)}
.setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.setup div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:12px}
.setup small{display:block;color:var(--mut);font-size:10px;letter-spacing:.8px}
.setup strong{font-size:13px;word-break:break-all}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:var(--mut);margin-top:6px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:18px;z-index:80}
.modal-overlay[hidden]{display:none}
.modal{background:#111827;border:1px solid var(--line);border-radius:16px;padding:22px;width:min(440px,100%);position:relative}
.modal .x{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.modal label{display:block;font-size:12px;color:var(--mut);margin:10px 0}
.modal input{width:100%;margin-top:4px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;color:#fff;padding:9px 10px}
.fine{font-size:12.5px;color:#a7f3d0;min-height:1.2em;margin-top:10px}
.pkg-card .btn{width:100%;margin-top:12px}
.count-line{color:var(--mut);font-size:12px;margin-bottom:8px}
/* ===== RESPONSIVE =====
   There used to be exactly one media query here, and it did the wrong thing:
   `.mrow span:last-child{display:none}` HID the multiplier on phones, so the
   price signal vanished for anyone checking on mobile -- while the header had
   no responsive rules at all, so the nav wrapped to two rows and the brand dot
   got clipped. Both are fixed below. */
@media(max-width:900px){
  .container{padding:0 16px}
  .hero h1{font-size:29px}
  .stats{gap:10px}
}
@media(max-width:720px){
  /* Header: shrink the chrome, and let the nav scroll sideways instead of
     wrapping. Wrapping is what pushed "FAQ" onto its own row and pushed the
     brand dot off the left edge. */
  .top-in{gap:12px;padding:10px 0}
  .brand{font-size:15px;gap:7px;flex:0 0 auto;white-space:nowrap}
  .brand .dot{width:9px;height:9px;flex:0 0 auto}
  .nav{gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
       -webkit-overflow-scrolling:touch;flex-wrap:nowrap;min-width:0}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 10px;font-size:12px;white-space:nowrap;flex:0 0 auto}
  /* The nav scrolls sideways on a phone, which pushed the primary CTA off
     screen entirely. Sticking it to the right edge keeps "Cek Biaya" reachable
     no matter how far the links are scrolled. */
  .nav a.cta{position:sticky;right:0;margin-left:auto;
    box-shadow:-8px 0 12px -6px rgba(11,15,23,.95)}
  .hero{padding:34px 0}
  .hero h1{font-size:25px}
  .hero p{font-size:14.5px}
  .stats{flex-direction:column;gap:8px}
  .stat{display:flex;align-items:baseline;justify-content:space-between;
        padding:9px 14px;text-align:left}
  .stat b{font-size:18px}
  .model-table{gap:7px}
  .mrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:11px 12px}
  .mrow code{flex:1 0 100%;font-size:12px;word-break:break-all}
  .mrow>span:not(.mult){font-size:11.5px}
  /* the multiplier stays -- it is the price signal, hiding it on mobile was
     exactly the regression that made phones look like the info was missing */
  .mrow .mult{margin-left:auto;flex:0 0 auto}
  .mrow-head{display:none}
  .search{width:100%}
}
@media(max-width:420px){
  .hero h1{font-size:22px}
  .btn{padding:11px 15px;font-size:13.5px}
  .pkg-grid{grid-template-columns:1fr}
  .modal .modal-actions{flex-direction:column}
  .modal .modal-actions .btn{width:100%}
}


/* ---- keunggulan: perbandingan vs reseller lain ---- */
.vs {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.vs-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.vs-row:first-child { border-top: 0; }
.vs-head {
  background: rgba(255, 255, 255, .03);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.vs-head .vs-us { color: var(--accent); }
.vs-k { color: var(--muted); font-size: 14.5px; }
.vs-row .ok { color: var(--text); font-weight: 600; font-size: 14.5px; }
.vs-row .ok::before { content: "\2713\00a0"; color: var(--accent); font-weight: 700; }
.vs-row .no { color: var(--muted); font-size: 14px; opacity: .78; }
.vs-row .no::before { content: "\2715\00a0"; opacity: .6; }

/* ---- footer: blok telegram ---- */
.tg-block { margin-bottom: 26px; }
.tg-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.tg-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.tg-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s, transform .18s, background .18s;
}
.tg-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tg-ic {
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #2AABEE, #229ED9);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.tg-card b { font-size: 15px; line-height: 1.3; }
.tg-card small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.foot-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.foot-row a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-row a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .vs-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
  }
  .vs-head { display: none; }
  .vs-k {
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .vs-row .no { font-size: 13.5px; }
}