:root{
      --bg:#0b0f17;
      --panel:#10192a;
      --panel2:#0f1625;
      --text:#e8eefc;
      --muted:#a9b7d6;
      --line:#22314f;
      --accent:#d72638; /* red */
      --accent2:#2b5bd7; /* blue */
      --ok:#2bd76d;

      --brand-font: "OCR A Extended", "OCR A Std", "OCR A", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --body-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

      --radius:16px;
      --shadow: 0 14px 40px rgba(0,0,0,.35);
      --max: 1120px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(43,91,215,.25), transparent 60%),
        radial-gradient(900px 500px at 95% 10%, rgba(215,38,56,.18), transparent 55%),
        radial-gradient(900px 600px at 30% 110%, rgba(43,215,109,.10), transparent 55%),
        var(--bg);
      color:var(--text);
      font-family: var(--body-font);
      line-height:1.45;
    }

    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px;}
    .topbar{
      position:sticky; top:0;
      backdrop-filter: blur(10px);
      background: rgba(11,15,23,.75);
      border-bottom: 1px solid rgba(34,49,79,.65);
      z-index: 50;
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px; min-width:240px;
      text-decoration:none;
    }
.logoImg{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(34,49,79,.7);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  object-fit:contain;
  background: white ; /*rgba(11,15,23,.25) in case png has transparency */
  padding:4px; /* remove if you want it tighter */
}

    
    .brandText{
      display:flex; flex-direction:column;
      font-family: var(--brand-font);
      letter-spacing: .06em;
    }
    .brandText .name{font-size:16px}
    .brandText .tag{font-size:12px; color:var(--muted); letter-spacing:.08em}

    .navlinks{
      display:flex; gap:18px; flex-wrap:wrap;
      align-items:center; justify-content:flex-end;
      font-size:14px;
      color:var(--muted);
    }
    .navlinks a{ text-decoration:none; padding:8px 10px; border-radius:10px;}
    .navlinks a:hover{ background: rgba(34,49,79,.35); color:var(--text);}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:12px;
      border:1px solid rgba(34,49,79,.9);
      background: rgba(16,25,42,.85);
      color:var(--text);
      text-decoration:none;
      box-shadow: 0 10px 28px rgba(0,0,0,.25);
      font-weight:600;
    }
    
    .btn{ will-change: transform; }

    .btn.primary{
      border-color: rgba(215,38,56,.9);
      background: linear-gradient(145deg, rgba(215,38,56,.95), rgba(43,91,215,.55));
    }
    .btn:hover{transform: translateY(-1px)}
    .btn:active{transform: translateY(0px)}
    .hero{
      padding:58px 0 26px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .card{
      background: linear-gradient(180deg, rgba(16,25,42,.95), rgba(15,22,37,.92));
      border:1px solid rgba(34,49,79,.8);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:22px;
    }
    .hero h1{
      margin:0 0 10px;
      font-family: var(--brand-font);
      letter-spacing:.04em;
      line-height:1.1;
      font-size:38px;
    }
    .hero p{
      margin:0 0 16px;
      color:var(--muted);
      font-size:16px;
      max-width: 62ch;
    }
    .pillRow{
      display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px;
    }
    .pill{
      border:1px solid rgba(34,49,79,.9);
      background: rgba(11,15,23,.45);
      color: var(--text);
      padding:8px 10px;
      border-radius:999px;
      font-size:13px;
      white-space:nowrap;
    }
    .pill strong{color:var(--ok)}
    .ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
    .mini{
      font-size:12px; color:var(--muted);
      margin-top:14px;
      border-top:1px dashed rgba(34,49,79,.7);
      padding-top:12px;
    }
    .mini b{color:var(--text)}
    .callout h3{
      margin:0 0 8px;
      font-family: var(--brand-font);
      letter-spacing:.06em;
      font-size:16px;
    }
    .callout p{margin:0; color:var(--muted); font-size:14px}
    .callout ul{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:14px}
    .callout li{margin:6px 0}

    section{padding:26px 0}
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
      margin-bottom:14px;
    }
    .sectionHead h2{
      margin:0;
      font-family: var(--brand-font);
      letter-spacing:.06em;
      font-size:22px;
    }
    .sectionHead .sub{
      color:var(--muted);
      font-size:14px;
      max-width: 70ch;
    }

    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .pkg{
      display:flex; flex-direction:column; gap:12px;
    }
    .pkg .title{
      display:flex; flex-direction:column; gap:6px;
    }
    .pkg .title .name{
      font-family: var(--brand-font);
      letter-spacing:.06em;
      font-size:16px;
    }
    .pkg .title .nick{
      color:var(--muted);
      font-size:13px;
    }
    .price{
      display:flex; flex-direction:column; gap:6px;
      padding:12px;
      background: rgba(11,15,23,.40);
      border:1px solid rgba(34,49,79,.8);
      border-radius:14px;
    }
    .price .big{
      font-family: var(--brand-font);
      letter-spacing:.05em;
      font-size:16px;
    }
    .price .small{color:var(--muted); font-size:12px}
    .split{
      display:grid; grid-template-columns:1fr; gap:10px;
    }
    .list{
      margin:0; padding-left:18px; color:var(--muted); font-size:13px;
    }
    .list li{margin:6px 0}
    .fine{
      color:var(--muted);
      font-size:12px;
      border-top:1px dashed rgba(34,49,79,.7);
      padding-top:10px;
    }
    .badgeRow{display:flex; flex-wrap:wrap; gap:8px}
    .badge{
      font-size:12px;
      padding:6px 8px;
      border-radius:999px;
      border:1px solid rgba(34,49,79,.9);
      background: rgba(16,25,42,.55);
      color: var(--text);
    }
    .badge.red{border-color: rgba(215,38,56,.8)}
    .badge.blue{border-color: rgba(43,91,215,.8)}
    .badge.green{border-color: rgba(43,215,109,.55)}
    .hrTable{
      width:100%;
      border-collapse: collapse;
      font-size:13px;
      color:var(--muted);
      overflow:hidden;
      border-radius:14px;
      border:1px solid rgba(34,49,79,.8);
    }
    .hrTable th, .hrTable td{
      padding:10px 10px;
      border-bottom:1px solid rgba(34,49,79,.55);
      text-align:left;
      background: rgba(11,15,23,.25);
    }
    .hrTable th{
      color:var(--text);
      background: rgba(16,25,42,.65);
      font-family: var(--brand-font);
      letter-spacing:.05em;
      font-weight:600;
    }
    .hrTable tr:last-child td{border-bottom:none}

    .twoCol{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
    }

    .kicker{
      display:flex; gap:12px; flex-wrap:wrap;
      margin-top:10px;
      color:var(--muted);
      font-size:13px;
    }

    .form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    .field{display:flex; flex-direction:column; gap:6px;}
    label{font-size:12px; color:var(--muted)}
    input, textarea, select{
      border-radius:12px;
      border:1px solid rgba(34,49,79,.85);
      background: rgba(11,15,23,.40);
      color:var(--text);
      padding:12px;
      outline:none;
      font-family: var(--body-font);
    }
    textarea{min-height:120px; grid-column: 1 / -1}
    .form .actions{grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
    .smallprint{font-size:12px; color:var(--muted)}
    footer{
      padding:26px 0 34px;
      border-top:1px solid rgba(34,49,79,.65);
      color:var(--muted);
      font-size:13px;
    }
    footer .ft{
      display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
    }
    footer b{color:var(--text)}
    .mono{font-family: var(--brand-font); letter-spacing:.05em}

    @media (max-width: 980px){
      .heroGrid{grid-template-columns:1fr}
      .grid3{grid-template-columns:1fr}
      .twoCol{grid-template-columns:1fr}
      .form{grid-template-columns:1fr}
      .navlinks{display:none}
      .hero h1{font-size:32px}
    }
    
    .pkgDisclaimerBox {
  margin-top: 40px;
  padding: 24px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,25,45,.85), rgba(10,15,30,.9));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.6;
}

.pkgDisclaimerTitle {
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
  letter-spacing: .02em;
}

.pkgDisclaimerBox ul {
  margin: 10px 0 14px 18px;
}

.pkgDisclaimerBox li {
  margin: 6px 0;
  color: #cbd5e1;
}

.pkgDisclaimerNote {
  color: #93c5fd;
  font-style: italic;
}