:root{
      --bg0:#040513;
      --bg1:#070826;
      --bg2:#090a1b;
      --panel:#0b0d2a99;
      --panelSolid:#0b0d2af0;

      --text:#eef2ff;
      --muted:#aab3ff;

      --c1:#ff2bd6; /* magenta */
      --c2:#7c4dff; /* violet  */
      --c3:#00e5ff; /* cyan    */
      --c4:#2dff9b; /* green   */
      --c5:#ffcc66; /* amber   */

      --shadow: 0 18px 80px rgba(0,0,0,.55);
      --radius: 18px;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--text);
      font-family:var(--sans);
      background:
        radial-gradient(1100px 700px at 12% 8%, rgba(255,43,214,.30), transparent 62%),
        radial-gradient(900px 600px at 92% 14%, rgba(0,229,255,.22), transparent 60%),
        radial-gradient(900px 600px at 70% 110%, rgba(45,255,155,.18), transparent 62%),
        radial-gradient(800px 600px at 40% 40%, rgba(124,77,255,.18), transparent 62%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
      overflow-x:hidden;
    }

    /* neon grid + scanlines */
    .fx-grid{
      position:fixed; inset:0; pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 40% 20%, black 0%, transparent 70%);
    }
    .fx-scan{
      position:fixed; inset:0; pointer-events:none;
      opacity:.08;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.25),
        rgba(255,255,255,.25) 1px,
        transparent 1px,
        transparent 6px
      );
      mix-blend-mode: overlay;
    }

    a{ color:inherit; text-decoration:none; }
    .wrap{ width:min(1120px, 92vw); margin:0 auto; }

    /* header */
    header{
      position:sticky;
      top:0;
      z-index:30;
      border-bottom:1px solid rgba(35,40,96,.65);
      background:
        radial-gradient(1000px 180px at 20% 0%, rgba(255,43,214,.22), transparent 65%),
        radial-gradient(1000px 180px at 80% 0%, rgba(0,229,255,.18), transparent 65%),
        linear-gradient(180deg, rgba(11,13,42,.92), rgba(11,13,42,.62));
      backdrop-filter: blur(12px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:14px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-family:var(--mono);
    }

    .logo{
      width:38px; height:38px;
      border-radius:14px;
      position:relative;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,43,214,.95), rgba(255,43,214,0) 58%),
        radial-gradient(circle at 70% 70%, rgba(0,229,255,.95), rgba(0,229,255,0) 60%),
        radial-gradient(circle at 65% 25%, rgba(124,77,255,.95), rgba(124,77,255,0) 55%),
        #070a22;
      border:1px solid rgba(170,179,255,.22);
      box-shadow:
        0 0 0 5px rgba(255,43,214,.10),
        0 0 0 9px rgba(0,229,255,.06);
    }
    .brand .title{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brand b{ letter-spacing:.2px; }
    .brand small{ color:rgba(170,179,255,.9); font-size:12px; }

    /* nav as "tabs" */
    nav{
      display:flex;
      gap:10px;
      align-items:center;
      padding:6px;
      border-radius:999px;
      border:1px solid rgba(170,179,255,.16);
      background: rgba(7,8,38,.55);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    nav a{
      font-family:var(--mono);
      font-size:12.5px;
      padding:10px 12px;
      border-radius:999px;
      color: rgba(170,179,255,.92);
      border:1px solid transparent;
      transition:.18s ease;
      display:inline-flex;
      gap:8px;
      align-items:center;
    }
    nav a:hover{
      color:var(--text);
      background: rgba(124,77,255,.12);
      border-color: rgba(124,77,255,.35);
    }
    nav a .slash{
      color: rgba(0,229,255,.9);
      opacity:.9;
    }

    .cta{
      display:flex;
      gap:10px;
      align-items:center;
      font-family: var(--mono);
      font-size:12.5px;
    }

    .btn{
      cursor:pointer;
      user-select:none;
      border-radius:14px;
      padding:10px 12px;
      border:1px solid rgba(170,179,255,.20);
      background: rgba(7,8,38,.55);
      color:var(--text);
      transition:.18s ease;
      box-shadow: 0 0 0 0 rgba(124,77,255,0);
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(0,229,255,.35);
      box-shadow: 0 0 0 7px rgba(0,229,255,.12);
    }
    .btn.primary{
      border-color: rgba(255,43,214,.30);
      background:
        radial-gradient(140px 70px at 30% 30%, rgba(255,43,214,.22), transparent 70%),
        radial-gradient(140px 70px at 70% 60%, rgba(0,229,255,.18), transparent 70%),
        linear-gradient(180deg, rgba(124,77,255,.22), rgba(7,8,38,.35));
    }
    .btn[disabled]{
      opacity:.65;
      cursor:not-allowed;
      transform:none !important;
      box-shadow:none !important;
    }

    main{ padding:44px 0 86px; }

    /* hero */
    .hero{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:22px;
      align-items:start;
    }
    @media (max-width: 980px){
      .topbar{ flex-wrap:wrap; justify-content:center; }
      nav{ order:3; width:100%; justify-content:center; flex-wrap:wrap; border-radius:18px; }
      .cta{ order:2; }
    }
    @media (max-width: 900px){
      .hero{ grid-template-columns:1fr; }
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(170,179,255,.18);
      background:
        radial-gradient(120px 50px at 25% 50%, rgba(255,43,214,.16), transparent 70%),
        radial-gradient(120px 50px at 75% 50%, rgba(0,229,255,.12), transparent 70%),
        rgba(7,8,38,.55);
      font-family:var(--mono);
      font-size:12px;
      color: rgba(170,179,255,.95);
      width:fit-content;
    }
    .pulse{
      width:9px; height:9px; border-radius:50%;
      background: var(--c4);
      box-shadow: 0 0 0 6px rgba(45,255,155,.12);
      position:relative;
    }
    .pulse::after{
      content:"";
      position:absolute; inset:-7px;
      border-radius:999px;
      border:1px solid rgba(45,255,155,.35);
      animation:pulse 1.7s infinite ease-out;
      opacity:.7;
    }
    @keyframes pulse{
      0%{ transform:scale(.75); opacity:.7; }
      100%{ transform:scale(1.25); opacity:0; }
    }

    h1{
      margin:16px 0 10px;
      font-size: clamp(36px, 3.8vw, 54px);
      line-height:1.03;
      letter-spacing:-.9px;
    }
    .grad{
      background: linear-gradient(90deg, var(--c3), var(--c1), var(--c2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .lead{
      margin:0 0 18px;
      color: rgba(170,179,255,.93);
      font-size:16px;
      line-height:1.65;
      max-width: 62ch;
    }

    /* tester */
    .tester{
      border-radius: 22px;
      border:1px solid rgba(170,179,255,.18);
      background:
        radial-gradient(400px 140px at 10% 0%, rgba(255,43,214,.18), transparent 60%),
        radial-gradient(400px 140px at 90% 0%, rgba(0,229,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(11,13,42,.76), rgba(7,8,38,.55));
      box-shadow: var(--shadow);
      padding:16px;
      margin-top:16px;
      position:relative;
      overflow:hidden;
    }
    .tester::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        conic-gradient(from 200deg, rgba(0,229,255,.0), rgba(0,229,255,.25), rgba(255,43,214,.25), rgba(124,77,255,.0));
      filter: blur(18px);
      opacity:.35;
      pointer-events:none;
    }
    .tester > *{ position:relative; }
    .tester h3{
      margin:0 0 6px;
      font-family:var(--mono);
      font-size:14px;
      letter-spacing:.2px;
    }
    .tester p{
      margin:0 0 12px;
      color: rgba(170,179,255,.92);
      font-size:13px;
      line-height:1.6;
    }

    .formrow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    @media (max-width: 520px){
      .formrow{ flex-direction:column; align-items:stretch; }
    }

    .input{
      flex:1;
      display:flex;
      align-items:center;
      gap:10px;
      border-radius:16px;
      border:1px solid rgba(170,179,255,.22);
      background: rgba(4,5,19,.45);
      padding:12px 12px;
      font-family:var(--mono);
      min-width: 240px;
    }
    .input span{
      color: rgba(0,229,255,.95);
      font-size:12px;
      opacity:.95;
    }
    .input input{
      border:none; outline:none;
      background:transparent;
      width:100%;
      color:var(--text);
      font-family:var(--mono);
      font-size:13px;
    }

    .btn.go{
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,43,214,.30);
      background:
        radial-gradient(160px 70px at 30% 30%, rgba(255,43,214,.22), transparent 70%),
        radial-gradient(160px 70px at 70% 60%, rgba(0,229,255,.18), transparent 70%),
        linear-gradient(180deg, rgba(124,77,255,.28), rgba(7,8,38,.35));
      box-shadow: 0 0 0 0 rgba(255,43,214,0);
    }
    .btn.go:hover{
      border-color: rgba(0,229,255,.45);
      box-shadow: 0 0 0 8px rgba(255,43,214,.10);
    }

    .hint{
      margin-top:10px;
      font-family:var(--mono);
      font-size:12px;
      color: rgba(170,179,255,.92);
    }
    .hint code{
      padding:2px 6px;
      border-radius:9px;
      border:1px solid rgba(170,179,255,.18);
      background: rgba(4,5,19,.35);
      color: rgba(238,242,255,.95);
    }

    /* right panel (code window) */
    .codewin{
      border-radius: 22px;
      border:1px solid rgba(170,179,255,.18);
      background:
        radial-gradient(520px 220px at 0% 10%, rgba(0,229,255,.15), transparent 55%),
        radial-gradient(520px 220px at 100% 30%, rgba(255,43,214,.14), transparent 55%),
        linear-gradient(180deg, rgba(11,13,42,.74), rgba(7,8,38,.55));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .winbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:12px 14px;
      border-bottom:1px solid rgba(35,40,96,.7);
      font-family:var(--mono);
      color: rgba(170,179,255,.95);
      font-size:12px;
    }
    .dots{ display:flex; gap:8px; align-items:center; }
    .d{ width:10px; height:10px; border-radius:50%; opacity:.95; }
    .d.r{ background: var(--c1); }
    .d.y{ background: var(--c5); }
    .d.g{ background: var(--c4); }

    pre{
      margin:0;
      padding:14px;
      font-family:var(--mono);
      font-size:12.5px;
      line-height:1.6;
      color: rgba(238,242,255,.95);
    
      white-space: pre-wrap;     /* allow wrapping */
      overflow-x: auto;
    
      word-break: normal;        /* DO NOT break inside words */
      overflow-wrap: break-word; /* only if absolutely necessary */
    }

    .cm{ color: rgba(170,179,255,.72); }
    .kw{ color: var(--c3); }
    .hl{ color: var(--c1); }
    .fn{ color: var(--c4); }
    .val{ color: var(--c5); }

    /* sections */
    section{ margin-top:56px; }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:14px;
      margin-bottom:14px;
    }
    .section-head h2{
      margin:0;
      font-size:22px;
      letter-spacing:-.2px;
    }
    .section-head p{
      margin:0;
      max-width: 64ch;
      color: rgba(170,179,255,.92);
      font-size:14px;
      line-height:1.6;
    }

    /* cards */
    .card{
      border-radius: 22px;
      border:1px solid rgba(170,179,255,.16);
      background:
        radial-gradient(420px 160px at 10% 0%, rgba(124,77,255,.12), transparent 65%),
        radial-gradient(420px 160px at 90% 0%, rgba(0,229,255,.10), transparent 65%),
        linear-gradient(180deg, rgba(11,13,42,.68), rgba(7,8,38,.50));
      box-shadow: 0 16px 55px rgba(0,0,0,.22);
      padding:16px;
    }

    .features{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    @media (max-width: 900px){
      .features{ grid-template-columns:1fr; }
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:var(--mono);
      font-size:12px;
      color: rgba(238,242,255,.92);
      margin-bottom:10px;
    }
    .tag i{
      width:10px; height:10px; border-radius:4px;
      background: linear-gradient(180deg, rgba(0,229,255,.9), rgba(255,43,214,.85));
      box-shadow: 0 0 0 6px rgba(0,229,255,.10);
      display:inline-block;
    }
    .card h4{
      margin:0 0 6px;
      font-family:var(--mono);
      font-size:14px;
    }
    .card p{
      margin:0;
      color: rgba(170,179,255,.92);
      font-size:13px;
      line-height:1.65;
    }

    /* pricing */
    .pricing{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    @media (max-width: 900px){
      .pricing{ grid-template-columns:1fr; }
    }
    .plan{ position:relative; overflow:hidden; }
.plan .top{
  align-items: center;              /* was flex-start */
}
.plan .price{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-align: right;
  white-space: nowrap;             /* stop ugly wrapping */
}
    .price small{ font-size:12px; color: rgba(170,179,255,.88); }
    .desc{
      margin:8px 0 12px;
      color: rgba(170,179,255,.92);
      font-size:13px;
      line-height:1.6;
    }
    .plan ul{
      list-style:none;
      padding:0;
      margin:0 0 12px;
      display:grid;
      gap:8px;
      font-family:var(--mono);
      font-size:12.5px;
      color: rgba(238,242,255,.92);
    }
    .plan li{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .check{
      width:16px; height:16px;
      border-radius:6px;
      border:1px solid rgba(170,179,255,.22);
      background: rgba(4,5,19,.35);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-top:2px;
      flex:0 0 auto;
    }
    .check::after{
      content:"✓";
      font-size:12px;
      color: var(--c4);
      line-height:1;
    }
    .actions{ display:flex; gap:10px; flex-wrap:wrap; }

    .featured{
      border-color: rgba(0,229,255,.30);
      background:
        radial-gradient(520px 180px at 20% 0%, rgba(0,229,255,.16), transparent 60%),
        radial-gradient(520px 180px at 80% 0%, rgba(255,43,214,.15), transparent 60%),
        linear-gradient(180deg, rgba(11,13,42,.74), rgba(7,8,38,.52));
    }
    .plan .top{
  position: relative;
  z-index: 2;
}

    .ribbon{
      position:absolute;
      top:14px;
      right:14px;
      transform:none;
    
      font-family:var(--mono);
      font-size:11px;
      letter-spacing:.2px;
    
      padding:6px 10px;
      border-radius:999px;
    
      color:#081026;
      background: linear-gradient(90deg, rgba(0,229,255,.95), rgba(255,43,214,.95));
      border:1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 35px rgba(0,0,0,.25);
      pointer-events:none;
    }


    footer{
      margin-top:68px;
      padding:28px 0 42px;
      border-top:1px solid rgba(35,40,96,.7);
      color: rgba(170,179,255,.9);
      font-family:var(--mono);
      font-size:12px;
    }
    .foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }

    /* tiny glow separator */
    .glowline{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(0,229,255,.4), rgba(255,43,214,.35), transparent);
      opacity:.6;
      margin:18px 0 0;
    }

    /* ===== Modal ===== */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      z-index:999;
    }
    .modal.open{ display:block; }

    .modal-backdrop{
      position:absolute; inset:0;
      background: rgba(0,0,0,.58);
      backdrop-filter: blur(6px);
    }
    .modal-panel{
      position:relative;
      width:min(980px, 92vw);
      margin: min(9vh, 80px) auto;
      border-radius: 22px;
      border:1px solid rgba(170,179,255,.18);
      background:
        radial-gradient(700px 220px at 10% 0%, rgba(255,43,214,.18), transparent 60%),
        radial-gradient(700px 220px at 90% 0%, rgba(0,229,255,.14), transparent 60%),
        linear-gradient(180deg, rgba(11,13,42,.84), rgba(7,8,38,.70));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .modal-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-bottom:1px solid rgba(35,40,96,.7);
      font-family:var(--mono);
      color: rgba(170,179,255,.95);
      font-size:12px;
    }
    .modal-head .left{
      display:flex; gap:10px; align-items:center;
      min-width: 0;
    }
    .modal-head .left strong{
      color: var(--text);
      font-weight:700;
    }
    .modal-head .req{
      opacity:.9;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: min(560px, 56vw);
    }
    .modal-body{
      padding:14px;
      display:grid;
      gap:12px;
    }
    .modal-imgwrap{
      border-radius: 18px;
      border:1px solid rgba(170,179,255,.16);
      background: rgba(4,5,19,.35);
      overflow:hidden;
      position:relative;
      min-height: 220px;
    }
    .modal-img{
      width:100%;
      height:auto;
      display:none;
    }
    .spinner{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-family:var(--mono);
      color: rgba(170,179,255,.95);
      background: rgba(4,5,19,.35);
    }
    .spinDot{
      width:9px; height:9px; border-radius:50%;
      background: var(--c3);
      box-shadow: 0 0 0 6px rgba(0,229,255,.10);
      animation: bounce 1s infinite ease-in-out;
    }
    .spinDot:nth-child(2){ animation-delay:.12s; background: var(--c1); box-shadow: 0 0 0 6px rgba(255,43,214,.10);}
    .spinDot:nth-child(3){ animation-delay:.24s; background: var(--c4); box-shadow: 0 0 0 6px rgba(45,255,155,.10);}
    @keyframes bounce{
      0%,100%{ transform: translateY(0); opacity:.8; }
      50%{ transform: translateY(-7px); opacity:1; }
    }

    .err{
      font-family: var(--mono);
      font-size:12.5px;
      color: rgba(255,204,102,.95);
      border:1px solid rgba(255,204,102,.22);
      background: rgba(255,204,102,.08);
      padding:10px 12px;
      border-radius: 14px;
      display:none;
      white-space:pre-wrap;
    }
    .err.show{ display:block; }
    .meta{
      margin-top: 6px;
    }
    
    .badge-featured{
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .3px;
      text-transform: uppercase;
    
      padding: 4px 9px;
      border-radius: 999px;
    
      color: #081026;
      background: linear-gradient(90deg, var(--c3), var(--c1));
      border: 1px solid rgba(255,255,255,.2);
    
      opacity: .9;
    }

    /* When screen is narrow, allow wrapping and move badge above price cleanly */
    @media (max-width: 520px){
      .plan .price{
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
      }
    }
    .plan.featured .price{
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .foot{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:18px;
      flex-wrap:wrap;
    }
    
    .foot-left,
    .foot-right{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    
    .foot-links{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      font-size:12px;
    }
    
    .foot-links a{
      color: rgba(170,179,255,.9);
    }
    
    .foot-links a:hover{
      color: var(--text);
      text-decoration: underline;
    }
    
    .foot-meta{
      font-size:12px;
      color: rgba(170,179,255,.9);
      max-width: 360px;
      text-align:right;
    }
    
    .foot-status{
      font-family: var(--mono);
      font-size:12px;
      color: rgba(170,179,255,.9);
      text-align:right;
    }
    
    .foot-status .ok{
      color: var(--c4);
    }
    
    .foot-status .region{
      color: var(--c3);
    }
    
    @media (max-width: 700px){
      .foot-meta,
      .foot-status{
        text-align:left;
      }
    }

  /* Paste the full neon stylesheet you provided earlier here.
   This project assumes the same class names (wrap, topbar, brand, card, etc.).
   Replace this file with your full CSS for the exact look. */