:root{
      --bg:#070a12;
      --panel:#0c1222;
      --panel2:#0b1020;
      --text:#e9eefc;
      --muted:#b7c0da;
      --yellow:#f5c400;
      --yellow2:#ffd54a;
      --border:rgba(255,255,255,.10);
      --shadow: 0 12px 40px rgba(0,0,0,.45);
      --radius:18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 500px at 15% 20%, rgba(245,196,0,.14), transparent 60%),
        radial-gradient(800px 450px at 80% 15%, rgba(120,140,255,.10), transparent 55%),
        linear-gradient(180deg, #050711 0%, #070a12 100%);
      min-height:100vh;
    }
    a{color:inherit}
    .wrap{max-width:1100px; margin:0 auto; padding:28px 16px 60px}
    header{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 0 22px;
    }
	 .brand {
	  display: flex;
	  align-items: center;
	  text-decoration: none;
	}

	/* Logo image */
	.logoImg {
	  width: 260px;        /* Desktop default */
	  max-width: 100%;
	  height: auto;        /* Keep aspect ratio */
	  display: block;
	}

	/* Tablet */
	@media (max-width: 1024px) {
	  .logoImg {
		width: 220px;
	  }
	}

	/* Mobile */
	@media (max-width: 600px) {
	  .logoImg {
		width: 170px;
	  }
	}

	/* Very small phones */
	@media (max-width: 380px) {
	  .logoImg {
		width: 140px;
	  }
	}
    .topCtas{display:flex; gap:10px; flex-wrap:wrap}
    .btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:var(--text);
      padding:10px 14px;
      border-radius:999px;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:transform .12s ease, background .12s ease, border-color .12s ease;
      box-shadow:0 10px 25px rgba(0,0,0,.25);
      font-weight:600;
      font-size:14px;
    }
    .btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
    .btnPrimary{
      background:linear-gradient(180deg, var(--yellow2), var(--yellow));
      color:#111;
      border-color:rgba(245,196,0,.5);
    }
    .btnPrimary:hover{background:linear-gradient(180deg, #ffe27d, var(--yellow2))}
    .hero{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:stretch;
    }
    @media (max-width: 900px){
      .hero{grid-template-columns:1fr}
    }
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .cardPad{padding:18px}
    h1{
      margin:0 0 8px; font-size:34px; letter-spacing:-.4px;
    }
    .sub{
      margin:0 0 16px;
      color:var(--muted);
      font-size:15px;
      line-height:1.45;
      max-width:52ch;
    }
    .badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
    .badge{
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      padding:8px 10px;
      border-radius:999px;
      font-size:13px;
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background:var(--yellow);
      box-shadow:0 0 0 4px rgba(245,196,0,.15);
    }
    .prices{
      display:grid; gap:10px;
      padding:14px;
      background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.05));
      border-top:1px solid var(--border);
    }
    .priceRow{
      display:grid;
      grid-template-columns: 1fr 90px 90px;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      background:rgba(10,16,32,.45);
    }
    .priceRow b{font-size:15px}
    .priceRow span{color:var(--muted); font-size:13px}
    .colHead{
      display:grid;
      grid-template-columns: 1fr 90px 90px;
      gap:10px;
      padding:0 4px;
      color:var(--muted);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.12em;
    }

    form{display:grid; gap:12px}
    .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    @media (max-width: 520px){ .grid2{grid-template-columns:1fr} }

    label{font-size:13px; color:var(--muted); display:block; margin:0 0 6px}
    input, select, textarea{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:var(--text);
      outline:none;
    }
    input:focus, select:focus, textarea:focus{
      border-color:rgba(245,196,0,.55);
      box-shadow:0 0 0 4px rgba(245,196,0,.12);
    }
    textarea{min-height:92px; resize:vertical}
    .summary{
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
      border:1px solid rgba(245,196,0,.25);
      background:rgba(245,196,0,.08);
      padding:12px 14px;
      border-radius:14px;
    }
    .summary small{color:var(--muted)}
    .summary strong{font-size:20px}
    .help{color:var(--muted); font-size:12px; line-height:1.35}
    .footerNote{margin-top:10px; font-size:12px; color:var(--muted)}
    .hidden{display:none}
    .mini{font-size:12px; color:var(--muted)}
    .splitActions{display:flex; gap:10px; flex-wrap:wrap}
	
	.hidden { display: none !important; }

	.modal{
	  position: fixed;
	  inset: 0;
	  background: rgba(0,0,0,.6);
	  display: grid;
	  place-items: center;
	  padding: 16px;
	  z-index: 9999;
	}

	.modalCard{
	  max-width: 520px;
	  width: 100%;
	  background: #0c1222;
	  border: 1px solid rgba(255,255,255,.12);
	  border-radius: 18px;
	  padding: 18px;
	  box-shadow: 0 12px 40px rgba(0,0,0,.45);
	}