/* ============================================================
   TOKENS
============================================================ */
:root {
    --brand:       #6f3df5;
    --brand-2:     #8b6dff;
    --brand-3:     #a78bfa;
    --brand-deep:  #5a2dd6;
    --brand-soft:  #f1ecff;
    --brand-bg:    #f9f6ff;
    --brand-glow:  rgba(111,61,245,.35);
  
    --bg:          #ffffff;
    --bg-cream:    #fdfcff;
    --bg-tint:     #f6f3fc;
  
    --ink:         #1c1538;
    --ink-2:       #3d3361;
    --ink-mute:    #6c6489;
    --ink-dim:     #9893ad;
  
    --rule:        #ece8f5;
    --rule-soft:   #f3f0fa;
  
    --pink:        #ec4899;
    --pink-soft:   #fce7f3;
    --teal:        #14b8a6;
    --teal-soft:   #d1fae8;
    --orange:      #f97316;
    --orange-soft: #fed7aa;
    --emerald:     #10b981;
    --amber:       #f59e0b;
    --amber-soft:  #fef3c7;
  
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;
    --r-2xl: 40px;
    --r-pill:999px;
  
    --sh-sm:  0 2px 8px rgba(28,21,56,.06);
    --sh-md:  0 8px 30px rgba(111,61,245,.10);
    --sh-lg:  0 20px 56px rgba(111,61,245,.16);
    --sh-glow:0 0 60px rgba(111,61,245,.22);
  }
  
  /* ============================================================
     RESET / BASE
  ============================================================ */
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    background:var(--bg);color:var(--ink);
    line-height:1.6;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}


  .hero-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 8px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    font-size: 12.5px; color: var(--ink-2); font-weight: 500;
    margin-bottom: 28px;
  }
  .hero-pill .chip {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
    color: #fff;
    padding: 3px 10px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  }
  .hero-pill .chip.green { background: linear-gradient(135deg, #10b981, #0d9488);-webkit-text-fill-color: inherit; }


  .hero-trust {
    display: flex; gap: 20px; align-items: center;
    margin-top: 32px;
    font-size: 13px; color: var(--ink-mute);
  }
  .hero-trust .avatars { display: flex; }
  .hero-trust .avatars span {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid #fff; margin-left: -10px;
    box-shadow: 0 3px 10px rgba(28,21,56,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
  }
  .hero-trust .avatars span:hover {
    transform: translateY(-3px) scale(1.08);
    z-index: 2;
    box-shadow: 0 6px 16px rgba(28,21,56,0.28);
  }
  .hero-trust  span{color: #ffff;font-size: 18px;}
  .hero-trust .avatars span svg { width: 15px; height: 15px; }
  .hero-trust .avatars span:nth-child(1) { background: linear-gradient(135deg, #fb923c, #ec4899); margin-left: 0; }
  .hero-trust .avatars span:nth-child(2) { background: linear-gradient(135deg, var(--brand), var(--brand-3)); }
  .hero-trust .avatars span:nth-child(3) { background: linear-gradient(135deg, #10b981, #14b8a6); }
  .hero-trust .avatars span:nth-child(4) { background: linear-gradient(135deg, #ec4899, #6f3df5); }
  .hero-trust strong { color: #ffff; font-weight: 700; }

  .nvidia-a100-gpu-server .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.nvidia-a100-gpu-server .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(117, 84, 247, 1) 0%, rgba(117, 84, 247, 1) 62%, rgba(147, 94, 223, 1) 95%);
    color: white;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 24px rgba(168, 85, 247, 0.4);
}
.nvidia-a100-gpu-server .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.5);
}
.nvidia-a100-gpu-server .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 20px;
    transition: color 0.2s;
    border: 1px solid #fff;
    border-radius: 10px;
}
.nvidia-a100-gpu-server .btn-ghost:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}
  
  /* ============================================================
     SHARED TYPOGRAPHY
  ============================================================ */
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 16px;
    background:var(--brand-soft);color:var(--brand);
    border-radius:var(--r-pill);border:1px solid rgba(111,61,245,.15);
    font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  }
  .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0}
  
  
  .section-head-center{text-align:center;margin-bottom:0px}
  
  /* section decoration blobs */
  .section-blob{
    position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;
  }
  
  /* ============================================================
     DIVIDER RIBBON
  ============================================================ */
  .ribbon{
    height:4px;
    background:linear-gradient(90deg,var(--brand-deep),var(--brand),var(--brand-3),var(--teal),var(--pink));
    background-size:200% 100%;
    animation:ribbonSlide 4s linear infinite;
  }
  @keyframes ribbonSlide{0%{background-position:0 0}100%{background-position:200% 0}}
  .inner-main{margin-top: 0;}
  /* ============================================================
     SECTION WRAPPERS
  ============================================================ */
  .sec-features{
    background:linear-gradient(170deg,#fdfcff 0%,var(--brand-bg) 40%,#fff 100%);
    position:relative;overflow:hidden;
  }
  .sec-how{
    padding:100px 0 110px;
    background:#fff;
    position:relative;overflow:hidden;
  }
  .sec-usecases{
    background:linear-gradient(160deg,var(--bg-cream) 0%,var(--bg-tint) 100%);
    position:relative;overflow:hidden;
  }
  .sec-pricing{
    background:#fff;
    position:relative;overflow:hidden;
  }
  .sec-stats{
    background:linear-gradient(170deg,var(--brand-bg) 0%,#f0ebff 40%,#fff 100%);
    position:relative;overflow:hidden;
  }
  
  /* ============================================================
     BENTO GRID
  ============================================================ */
  .bento-grid{
    display:grid;
    grid-template-columns:1.45fr 1fr 1fr;
    grid-template-rows:auto auto;
    gap:18px;
  }
  @media(max-width:1024px){.bento-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:640px) {.bento-grid{grid-template-columns:1fr}}
  
  .bento-card{
    background:#fff;border:1px solid var(--rule);
    border-radius:var(--r-2xl);
    padding:38px 34px;
    position:relative;overflow:hidden;
    transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
  }
  .bento-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
  .bento-card.span-row{grid-row:span 2}
  .bento-card::before{
    content:'';position:absolute;top:-40%;right:-30%;
    width:300px;height:300px;border-radius:50%;
    filter:blur(55px);opacity:.22;z-index:0;
  }
  .bento-card>*{position:relative;z-index:1}
  
  /* card variants */
  .bc-h100{
    background:linear-gradient(150deg,#140f2e 0%,#1e1548 50%,#2d1a63 100%);
    color:#fff;border-color:#3d2680;
    box-shadow:0 24px 64px rgba(111,61,245,.32);
  }
  .bc-h100::before{background:var(--brand-3);opacity:.28}
  .bc-h100::after{
    content:'';position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse 75% 65% at 75% 30%,#000,transparent 80%);
    z-index:0;
  }
  .bc-h100:hover{border-color:var(--brand-3);box-shadow:0 32px 80px rgba(111,61,245,.4)}
  .bc-a100::before{background:var(--brand)}
  .bc-a100:hover{border-color:var(--brand-3);box-shadow:var(--sh-lg)}
  .bc-l40s::before{background:var(--orange)}
  .bc-l40s:hover{border-color:var(--orange);box-shadow:0 20px 50px rgba(249,115,22,.15)}
  .bc-v100::before{background:var(--teal)}
  .bc-v100:hover{border-color:var(--teal);box-shadow:0 20px 50px rgba(20,184,166,.15)}
  .bc-h200{border-style:dashed;border-width:2px}
  .bc-h200::before{background:var(--pink)}
  .bc-h200:hover{border-color:var(--pink);box-shadow:0 20px 50px rgba(236,72,153,.12)}
  
  .bc-tag{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:var(--r-pill);
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    margin-bottom:18px;
  }
  .bc-tag::before{content:'';width:5px;height:5px;border-radius:50%}
  .bc-h100 .bc-tag{background:rgba(167,139,250,.2);color:var(--brand-3)}
  .bc-h100 .bc-tag::before{background:var(--brand-3)}
  .bc-a100 .bc-tag{background:var(--brand-soft);color:var(--brand)}
  .bc-a100 .bc-tag::before{background:var(--brand)}
  .bc-l40s .bc-tag{background:var(--orange-soft);color:var(--orange)}
  .bc-l40s .bc-tag::before{background:var(--orange)}
  .bc-v100 .bc-tag{background:var(--teal-soft);color:var(--teal)}
  .bc-v100 .bc-tag::before{background:var(--teal)}
  .bc-h200 .bc-tag{background:var(--pink-soft);color:var(--pink)}
  .bc-h200 .bc-tag::before{background:var(--pink)}
  
  .bc-name{font-size:34px;font-weight:800;letter-spacing:-.04em;margin-bottom:6px}
  .bc-h100 .bc-name{background:linear-gradient(135deg,var(--brand-3) 0%,#e8e0ff 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .bc-a100 .bc-name{background:linear-gradient(135deg,var(--brand-deep),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .bc-l40s .bc-name{background:linear-gradient(135deg,#c2410c,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
  .bc-v100 .bc-name{background:linear-gradient(135deg,#0f766e,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
  .bc-h200 .bc-name{background:linear-gradient(135deg,var(--pink),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
  
  .bc-arch{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;color:var(--ink-mute);margin-bottom:24px;letter-spacing:.01em;line-height:1.5}
  .bc-h100 .bc-arch{color:rgba(255,255,255,.5)}
  
  .bc-specs{list-style:none;padding:0;display:flex;flex-direction:column;gap:0;margin-bottom:28px;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
  .bc-h100 .bc-specs{border-color:rgba(255,255,255,.08)}
  .bc-specs li{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:10px 14px;background:#fff}
  .bc-specs li:nth-child(even){background:var(--bg-tint)}
  .bc-specs li:last-child{border-bottom:none}
  .bc-h100 .bc-specs li{background:rgba(255,255,255,.04)}
  .bc-h100 .bc-specs li:nth-child(even){background:rgba(255,255,255,.07)}
  .bc-specs .sp-lbl{color:var(--ink-mute);font-weight:500}
  .bc-h100 .bc-specs .sp-lbl{color:rgba(255,255,255,.5)}
  .bc-specs .sp-val{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--ink)}
  .bc-h100 .bc-specs .sp-val{color:#fff}
  
  .bc-price-row{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
  .bc-price-row .amt{font-size:36px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
  .bc-h100 .bc-price-row .amt{color:#fff}
  
  .bc-inr{font-size:12px;color:var(--ink-dim);margin-bottom:22px;font-family:'JetBrains Mono',monospace;font-weight:500}
  .bc-h100 .bc-inr{color:rgba(255,255,255,.38)}
  
  .bc-btn{
    display:block;width:100%;padding:13px 20px;text-align:center;
    border-radius:var(--r-pill);font-weight:700;font-size:13.5px;
    transition:all .22s;letter-spacing:.01em;
  }
  .bc-h100 .bc-btn{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 24px var(--brand-glow)}
  .bc-h100 .bc-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px var(--brand-glow)}
  .bc-a100 .bc-btn{background:var(--brand-soft);color:var(--brand);border:1px solid rgba(111,61,245,.15)}
  .bc-a100 .bc-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
  .bc-l40s .bc-btn{background:var(--orange-soft);color:var(--orange);border:1px solid rgba(249,115,22,.15)}
  .bc-l40s .bc-btn:hover{background:var(--orange);color:#fff}
  .bc-v100 .bc-btn{background:var(--teal-soft);color:var(--teal);border:1px solid rgba(20,184,166,.15)}
  .bc-v100 .bc-btn:hover{background:var(--teal);color:#fff}
  .bc-h200 .bc-btn{background:var(--pink-soft);color:var(--pink);border:1px solid rgba(236,72,153,.15)}
  .bc-h200 .bc-btn:hover{background:var(--pink);color:#fff}
  
  .bc-extras{margin-top:30px;padding-top:26px;border-top:1px dashed rgba(255,255,255,.12)}
  .bc-extras-title{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px}
  .bc-uselist{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
  .bc-uselist li{display:flex;align-items:flex-start;gap:12px}
  .bc-use-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--brand-3);margin-top:5px;box-shadow:0 0 10px var(--brand-3)}
  .bc-use-name{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
  .bc-use-desc{font-size:11.5px;color:rgba(255,255,255,.52);margin-top:2px}
  .bc-related{margin-top:20px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.1)}
  .bc-related-title{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px}
  .bc-related-links{display:flex;flex-direction:column;gap:8px}
  .bc-related-links a{font-size:12.5px;font-weight:600;color:var(--brand-3);transition:color .2s,transform .2s;display:inline-block}
  .bc-related-links a:hover{color:#fff;transform:translateX(5px)}
  .bc-soon-badge{position:absolute;top:20px;right:20px;background:var(--ink);color:#fff;padding:5px 12px;border-radius:var(--r-pill);font-size:10px;font-weight:700;letter-spacing:.08em;z-index:2}
  
  /* ============================================================
     HOW IT WORKS — STEP CARDS
  ============================================================ */
  .step-row{
    display:grid;grid-template-columns:1fr 1fr;
    gap:72px;align-items:center;
    margin-bottom:50px;padding-bottom:100px;
    border-bottom:1px solid var(--rule-soft);
  }
  .step-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
  .step-row.reverse{direction:rtl}
  .step-row.reverse>*{direction:ltr}
  @media(max-width:880px){
    .step-row,.step-row.reverse{grid-template-columns:1fr;gap:36px;direction:ltr}
  }
  
  .step-visual{
    position:relative;
    border-radius:var(--r-2xl);
    overflow:hidden;
    box-shadow:var(--sh-lg);
  }
  .step-visual::after{
    content:'';position:absolute;inset:0;border-radius:var(--r-2xl);
    box-shadow:inset 0 0 0 1.5px rgba(111,61,245,.12);pointer-events:none;
  }
  .step-visual svg{display:block;width:100%;height:auto}
  
  .step-visual.sv-default{background:linear-gradient(135deg,var(--brand-soft) 0%,#e8e0ff 100%)}
  .step-visual.sv-warm   {background:linear-gradient(135deg,var(--orange-soft) 0%,#fff5eb 100%)}
  .step-visual.sv-cool   {background:linear-gradient(135deg,var(--teal-soft) 0%,#f0fdfb 100%)}
  .step-visual.sv-amber  {background:linear-gradient(135deg,var(--amber-soft) 0%,#fffbf0 100%)}
  
  .step-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,var(--brand-2),var(--brand));
    color:#fff;font-size:14px;font-weight:800;
    box-shadow:0 6px 18px var(--brand-glow);
    margin-bottom:18px;flex-shrink:0;
  }
  .step-num.warm {background:linear-gradient(135deg,#fb923c,var(--orange))}
  .step-num.cool {background:linear-gradient(135deg,#2dd4bf,var(--teal))}
  .step-num.amber{background:linear-gradient(135deg,#fbbf24,var(--amber))}
  
  .step-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 14px;background:#fff;
    border-radius:var(--r-pill);border:1px solid var(--rule);
    font-size:11px;font-weight:700;color:var(--brand);
    letter-spacing:.05em;text-transform:uppercase;
    box-shadow:var(--sh-sm);margin-bottom:18px;
  }
  .step-chip.warm {color:var(--orange)}
  .step-chip.cool {color:var(--teal)}
  .step-chip.amber{color:var(--amber)}
  .step-chip-num{
    width:20px;height:20px;border-radius:50%;
    background:var(--brand);color:#fff;
    display:grid;place-items:center;font-size:10px;font-weight:800;
  }
  .step-chip.warm  .step-chip-num{background:var(--orange)}
  .step-chip.cool  .step-chip-num{background:var(--teal)}
  .step-chip.amber .step-chip-num{background:var(--amber)}
  
  .step-content h3{font-size:clamp(22px,2.5vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}
  .step-content p{font-size:15px;color:var(--ink-mute);line-height:1.75;margin-bottom:24px}
  
  .cap-pills{display:flex;gap:8px;flex-wrap:wrap}
  .cap-pill{
    padding:6px 14px;
    background:var(--bg-tint);border:1px solid var(--rule);
    border-radius:var(--r-pill);font-size:12px;font-weight:600;
    color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;
    transition:background .2s,border-color .2s,color .2s;
  }
  .cap-pill::before{content:'✓';color:var(--brand);font-weight:800;font-size:11px}
  .cap-pill:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
  
  /* ============================================================
     USE CASES TABLE
  ============================================================ */
  .compare-table-wrap{
    overflow-x:auto;
    border-radius:var(--r-xl);
    border:1px solid var(--rule);
    box-shadow:var(--sh-lg);
  }
  .compare-table{width:100%;border-collapse:collapse;background:#fff;min-width:600px}
  .compare-table thead tr{border-bottom:2px solid var(--rule)}
  .compare-table th{
    padding:22px 22px;font-size:13px;font-weight:700;
    text-align:left;background:var(--bg-tint);
  }
  .compare-table th:first-child{color:var(--ink-mute);font-weight:600;min-width:160px}
  .compare-table th .gpu-th-name{font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1;display:block;margin-bottom:4px}
  .compare-table th .gpu-th-arch{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--ink-mute)}
  .th-h100 .gpu-th-name{background:linear-gradient(135deg,var(--brand-deep),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .th-a100 .gpu-th-name{background:linear-gradient(135deg,var(--brand),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent}
  .th-l40s .gpu-th-name{background:linear-gradient(135deg,#c2410c,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
  .th-v100 .gpu-th-name{background:linear-gradient(135deg,#0f766e,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
  
  .compare-table tbody tr{border-bottom:1px solid var(--rule-soft);transition:background .18s}
  .compare-table tbody tr:last-child{border-bottom:none}
  .compare-table tbody tr:hover{background:var(--bg-tint)}
  .compare-table td{padding:14px 22px;font-size:13.5px}
  .compare-table td:first-child{color:var(--ink-mute);font-weight:600;font-size:13px}
  .compare-table .val{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink);font-size:13px}
  .compare-table .val.best {color:var(--brand)}
  .compare-table .val.price{color:var(--emerald);font-size:14px}
  
  /* ============================================================
     PRICING
  ============================================================ */
  /* ============================================================
     PRICING — pure CSS toggle
  ============================================================ */
  .pricing-shell{
    background:linear-gradient(160deg,var(--bg-tint) 0%,#fff 60%,var(--brand-soft) 100%);
    border-radius:var(--r-2xl);
    padding:72px 48px;
    position:relative;overflow:hidden;
    border:1px solid var(--rule);
    box-shadow:var(--sh-lg);
  }
  .pricing-shell::before{
    content:'';position:absolute;top:-120px;right:-120px;
    width:380px;height:380px;border-radius:50%;
    background:radial-gradient(circle,rgba(167,139,250,.18) 0%,transparent 65%);
    filter:blur(50px);
  }
  .pricing-shell::after{
    content:'';position:absolute;bottom:-80px;left:-80px;
    width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(20,184,166,.1) 0%,transparent 65%);
    filter:blur(50px);
  }
  
  /* hide radio inputs */
  .pricing-radio{display:none}
  
  /* toggle labels */
  .pricing-tabs {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    padding: 5px;
    box-shadow: var(--shadow-sm);
    position: relative; z-index: 1;
  }
  .pricing-tab {
    padding: 9px 22px; border-radius: var(--r-pill);
    font-size: 13.5px; font-weight: 600;
    color: var(--ink-mute);
    transition: all .25s;
  }
  .pricing-tab.active {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
    color: #fff;
    box-shadow: 0 4px 12px var(--brand-glow);
  }
  .pricing-tab .save {
    margin-left: 6px;
    background: var(--emerald);
    color: #fff;
    padding: 2px 7px; border-radius: var(--r-pill);
    font-size: 10px; font-weight: 700;
  }
  .pricing-tab.active .save { background: rgba(255,255,255,0.25); }

  /* GPU selector pills */
  .gpu-selector {
    display: inline-flex; gap: 8px; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .gpu-sel-btn {
    padding: 9px 18px; border-radius: var(--r-pill);
    background: #fff; border: 1.5px solid var(--rule);
    font-size: 13px; font-weight: 600; color: var(--ink-mute);
    transition: all .2s; cursor: pointer;
  }
  .gpu-sel-btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

  .pricing-cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative; z-index: 1;
  }
  @media (max-width: 880px) { .pricing-cards { grid-template-columns: 1fr; } }

  .price-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 30px 28px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
  }
  .price-card:hover { transform: translateY(-4px); border-color: var(--brand-3); box-shadow: var(--shadow-lg); }
  .price-card.featured {
    background: linear-gradient(160deg, var(--ink) 0%, #2a1d5e 100%);
    color: #fff; border-color: var(--ink);
    box-shadow: var(--shadow-glow);
  }
  .price-card.featured::before {
    content: 'Most Popular';
    position: absolute; top: -12px; right: 22px;
    background: linear-gradient(135deg, var(--pink) 0%, var(--brand) 100%);
    color: #fff; padding: 5px 14px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
  }
  .price-card .tier-name { font-size: 15px; font-weight: 700; color: var(--brand); margin-bottom: 6px; }
  .price-card.featured .tier-name { color: var(--brand-3); }
  .price-card .tier-desc { font-size: 13px; color: var(--ink-mute); margin-bottom: 22px; }
  .price-card.featured .tier-desc { color: rgba(255,255,255,0.65); }
  .price-card .price-num { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
  .price-card .price-num .sym { font-size: 22px; font-weight: 700; color: var(--ink-mute); margin-right: 2px; }
  .price-card.featured .price-num .sym { color: rgba(255,255,255,0.7); }
  .price-card .price-num .amt { font-size: 48px; font-weight: 800; color: var(--ink); letter-spacing: -0.035em; line-height: 1; }
  .price-card.featured .price-num .amt { color: #fff; }
  .price-card .price-num .per { font-size: 14px; color: var(--ink-mute); font-weight: 500; margin-left: 4px; }
  .price-card.featured .price-num .per { color: rgba(255,255,255,0.65); }
  .price-card .price-inr { font-size: 12.5px; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; margin-bottom: 22px; }
  .price-card.featured .price-inr { color: rgba(255,255,255,0.4); }
  .price-card .feat-list { list-style: none; margin-bottom: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .price-card.featured .feat-list { border-top-color: rgba(255,255,255,0.12); }
  .price-card .feat-list li {
    font-size: 13.5px; color: var(--ink-2);
    padding: 8px 0 8px 26px; position: relative; line-height: 1.5;
  }
  .price-card.featured .feat-list li { color: rgba(255,255,255,0.85); }
  .price-card .feat-list li::before {
    content: '';
    position: absolute; left: 0; top: 11px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--brand-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f3df5' stroke-width='2.5' stroke-linecap='round'><path d='M4 8.5l2.5 2.5L12 5.5'/></svg>");
    background-repeat: no-repeat; background-position: center;
  }
  .price-card.featured .feat-list li::before {
    background-color: rgba(255,255,255,0.1);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round'><path d='M4 8.5l2.5 2.5L12 5.5'/></svg>");
  }
  .price-card .btn-pick {
    display: block; width: 100%; padding: 12px 18px;
    background: var(--bg-tint); color: var(--brand);
    border-radius: var(--r-pill); font-weight: 700; font-size: 13.5px;
    text-align: center; transition: background .2s, color .2s;
  }
  .price-card .btn-pick:hover { background: var(--brand); color: #fff; }
  .price-card.featured .btn-pick {
    background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
    color: #fff; box-shadow: 0 8px 22px var(--brand-glow);
  }
  .pricing-controls {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 24px 0 36px;
    justify-content: center;
    align-items: center;
}


  
  .cards-monthly,.cards-annual{display:contents}
  
  #tab-monthly:checked ~ .pricing-shell .cards-annual .price-card{display:none}
  #tab-annual:checked  ~ .pricing-shell .cards-monthly .price-card{display:none}
  
  .price-card{
    background:#fff;border:1.5px solid var(--rule);
    border-radius:var(--r-xl);padding:32px 26px;
    transition:transform .26s,box-shadow .26s,border-color .26s;
    position:relative;display:flex;flex-direction:column;
  }
  .price-card:hover{transform:translateY(-5px);border-color:var(--brand-3);box-shadow:var(--sh-lg)}
  .price-card.featured{
    background:linear-gradient(165deg,#140f2e 0%,#1e1548 50%,#2d1a63 100%);
    color:#fff;border-color:rgba(111,61,245,.5);
    box-shadow:var(--sh-glow);
  }
  .price-card.featured::before{
    content:'Most Popular';position:absolute;top:-13px;right:24px;
    background:linear-gradient(135deg,var(--pink) 0%,var(--brand) 100%);
    color:#fff;padding:5px 14px;border-radius:var(--r-pill);
    font-size:10.5px;font-weight:700;letter-spacing:.05em;
    box-shadow:var(--sh-sm);
  }
  .price-card .tier-name{font-size:14px;font-weight:700;color:var(--brand);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
  .price-card.featured .tier-name{color:var(--brand-3)}
  .price-card .tier-desc{font-size:12.5px;color:var(--ink-mute);margin-bottom:24px;line-height:1.5}
  .price-card.featured .tier-desc{color:rgba(255,255,255,.6)}
  .price-card .price-num{display:flex;align-items:baseline;gap:3px;margin-bottom:3px}
  .price-card .price-num .sym{font-size:20px;font-weight:700;color:var(--ink-mute);margin-right:1px}
  .price-card.featured .price-num .sym{color:rgba(255,255,255,.65)}
  .price-card .price-num .amt{font-size:48px;font-weight:800;color:var(--ink);letter-spacing:-.035em;line-height:1}
  .price-card.featured .price-num .amt{color:#fff}
  .price-card .price-num .per{font-size:13px;color:var(--ink-mute);font-weight:500;margin-left:3px}
  .price-card.featured .price-num .per{color:rgba(255,255,255,.6)}
  .price-card .price-inr{font-size:11.5px;color:var(--ink-dim);font-family:'JetBrains Mono',monospace;margin-bottom:24px}
  .price-card.featured .price-inr{color:rgba(255,255,255,.35)}
  .price-card .feat-list{list-style:none;padding:0;margin-bottom:24px;flex:1;padding-top:18px;border-top:1px solid var(--rule)}
  .price-card.featured .feat-list{border-top-color:rgba(255,255,255,.1)}
  .price-card .feat-list li{font-size:13px;color:var(--ink-2);padding:8px 0 8px 26px;position:relative;line-height:1.5}
  .price-card.featured .feat-list li{color:rgba(255,255,255,.85)}
  .price-card .feat-list li::before{
    content:'';position:absolute;left:0;top:11px;
    width:16px;height:16px;border-radius:50%;
    background:var(--brand-soft);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f3df5' stroke-width='2.5' stroke-linecap='round'><path d='M4 8.5l2.5 2.5L12 5.5'/></svg>");
    background-repeat:no-repeat;background-position:center;
  }
  .price-card.featured .feat-list li::before{
    background-color:rgba(255,255,255,.1);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round'><path d='M4 8.5l2.5 2.5L12 5.5'/></svg>");
  }
  .btn-pick{
    display:block;width:100%;padding:13px 18px;
    background:var(--bg-tint);color:var(--brand);
    border:1.5px solid var(--rule);
    border-radius:var(--r-pill);font-weight:700;font-size:13.5px;
    text-align:center;transition:all .22s;
  }
  .btn-pick:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
  .price-card.featured .btn-pick{
    background:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);
    color:#fff;border:none;box-shadow:0 8px 24px var(--brand-glow);
  }
  .price-card.featured .btn-pick:hover{transform:translateY(-2px);box-shadow:0 14px 30px var(--brand-glow)}
  
  /* ============================================================
     STAT MOSAIC
  ============================================================ */
  .mosaic-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  @media(max-width:880px){.mosaic-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.mosaic-grid{grid-template-columns:1fr}}
  
  .mosaic-tile{
    background:#fff;border:1.5px solid var(--rule);
    border-radius:var(--r-xl);padding:28px 26px;
    transition:transform .26s,box-shadow .26s,border-color .26s;
    position:relative;overflow:hidden;
  }
  .mosaic-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-3)}
  .mosaic-tile.accent{
    background:linear-gradient(145deg,var(--brand) 0%,var(--brand-deep) 100%);
    color:#fff;border-color:var(--brand);
    box-shadow:0 12px 36px var(--brand-glow);
  }
  .mosaic-tile.accent:hover{box-shadow:0 20px 50px var(--brand-glow)}
  .mosaic-tile::before{
    content:'';position:absolute;bottom:-30px;right:-30px;
    width:100px;height:100px;border-radius:50%;
    background:radial-gradient(circle,rgba(111,61,245,.06) 0%,transparent 70%);
    filter:blur(20px);
  }
  .icon-blob{
    width:48px;height:48px;border-radius:16px;
    background:var(--brand-soft);
    display:grid;place-items:center;color:var(--brand);
    margin-bottom:20px;box-shadow:0 4px 12px rgba(111,61,245,.12);
  }
  .mosaic-tile.accent .icon-blob{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
  .mosaic-tile .big{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:8px}
  .mosaic-tile.accent .big{color:#fff}
  .mosaic-tile .big small{font-size:15px;color:var(--ink-mute);font-weight:600;margin-left:2px}
  .mosaic-tile.accent .big small{color:rgba(255,255,255,.7)}
  .mosaic-tile .descr{font-size:13px;color:var(--ink-mute);line-height:1.55}
  .mosaic-tile.accent .descr{color:rgba(255,255,255,.78)}
  
  /* ============================================================
     REVEAL ANIMATIONS
  ============================================================ */
  .reveal{opacity:1;transform:none}
  .reveal-left{opacity:1;transform:none}
  .reveal-right{opacity:1;transform:none}