:root{
      --bg:#0f172a;          /* deep slate background */
      --panel:#0b1220;       /* darker card background */
      --ink:#e5e7eb;         /* light text */
      --muted:#9ca3af;       /* muted text */
      --accent:#3b82f6;      /* primary blue */
      --accent2:#60a5fa;     /* lighter blue */
      --ok:#10b981;          /* green */
      --border:#1f2937;      /* neutral border */
      --radius:16px;
      --shadow:0 12px 30px rgba(0,0,0,.35);
      --maxw:1100px;
      --card:#111827;        /* card base */
      --chip:#111b2d;        /* small chips */
      --step:#1e293b;        /* step number */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
      color:var(--ink);
      background:
        radial-gradient(1200px 600px at 10% -20%, #1e293b55, transparent 60%),
        radial-gradient(900px 500px at 120% 10%, #1d4ed855, transparent 60%),
        var(--bg);
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}

    /* Top bar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(8px);
      background: #0b1220cc;
      border-bottom:1px solid var(--border);
    }
    .bar{
      max-width:var(--maxw);
      margin-inline:auto;
      padding:14px 18px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:800; letter-spacing:.2px;
    }
    .brand img{height:40px;width:auto;border-radius:50%; box-shadow:0 2px 8px #0006}
    .brand span{color:#fff; font-size:18px}
    .nav{
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:10px 14px; border-radius:12px; border:1px solid var(--border);
      background:linear-gradient(180deg,#0f172a,#0b1220); color:var(--ink);
      font-weight:700; cursor:pointer; transition:.2s; box-shadow: 0 2px 6px #0004;
    }
    .btn:hover{transform:translateY(-1px); opacity:.96}
    .primary{
      border-color:#1d4ed8;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      color:#fff;
      box-shadow:0 8px 24px #1d4ed84d;
    }

    /* Hero */
    .hero{
      max-width:var(--maxw); margin-inline:auto;
      padding:48px 18px 16px;
      text-align:center;
    }
    h1{
      margin:0 0 8px;
      font-size: clamp(28px, 4.8vw, 44px);
      letter-spacing:.3px;
    }
    .lead{
      max-width:780px; margin:0 auto 22px;
      color:var(--muted); font-size: clamp(15px, 1.8vw, 18px);
    }
    .cta-row{
      display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px;
    }

    /* Steps */
    .grid{
      max-width:var(--maxw); margin:28px auto; padding:0 18px;
      display:grid; gap:16px;
      grid-template-columns:1fr;
    }
    @media (min-width: 900px){
      .grid{ grid-template-columns: 1fr 1fr; }
    }
    .card{
      background: linear-gradient(180deg, var(--card), #0d1423);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:22px;
    }
    .step-head{
      display:flex; align-items:center; gap:14px; margin-bottom:10px;
    }
    .step-num{
      height:36px; width:36px; border-radius:10px;
      background:linear-gradient(180deg,#22314a,#152239);
      color:#c7d2fe; font-weight:800; display:grid; place-items:center;
      font-size:16px; box-shadow: inset 0 0 0 1px #2b3b56, 0 6px 12px #0007;
    }
    h2{margin:0; font-size:20px}
    p{margin:.35rem 0 .75rem}
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      background: var(--chip); border:1px solid #172033; color:#c7d2fe;
      padding:8px 10px; border-radius:12px; font-size:13px; font-weight:700;
    }
    .pic{
      margin-top:12px; min-height:180px; border-radius:12px; border:1px dashed #20304c;
      background: linear-gradient(180deg,#0e1626,#0b1220);
      display:grid; place-items:center; color:#789; font-size:14px;
    }

    /* Tips & FAQ */
    .section{max-width:var(--maxw); margin:26px auto; padding:0 18px}
    .tips{
      display:grid; gap:14px; grid-template-columns:1fr;
    }
    @media (min-width: 900px){
      .tips{ grid-template-columns: 1fr 1fr 1fr; }
    }
    .tip{
      background:linear-gradient(180deg,#0f192a,#0c1220);
      border:1px solid var(--border);
      border-radius:14px; padding:16px 18px;
    }
    .tip h3{margin:0 0 6px; font-size:18px; color:#c7d2fe}
    .tip p{color:#aab1bf; margin:0}

    /* Footer */
    footer{
      max-width:var(--maxw); margin:36px auto 24px; padding:0 18px;
      color:#93a1b3; font-size:13px; text-align:center;
    }
    .links{margin-top:6px}
    .links a{color:#93c5fd}
  body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}