:root{
      --bg: #06010a;
      --bg2:#0a0211;

      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --muted2: rgba(255,255,255,.55);

      --accent: #d946ef;     /* fuchsia */
      --accent2:#7c3aed;     /* violet */
      --good:#22c55e;

      --shadow: 0 20px 80px rgba(0,0,0,.55);
      --glow: 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(217,70,239,.30);
      --radius: 18px;
      --radius2: 26px;
      --max: 1120px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; width:100%; min-width:100%; overflow-x:clip; }
html{
  /* FIX: prevent white area on right in some mobile/DevTools by painting background on root too */
  background:
    radial-gradient(900px 420px at 18% 9%, rgba(217,70,239,.26), transparent 55%),
    radial-gradient(700px 360px at 85% 18%, rgba(124,58,237,.22), transparent 58%),
    radial-gradient(900px 520px at 75% 70%, rgba(217,70,239,.12), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 30%, #040007 100%);
}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 420px at 18% 9%, rgba(217,70,239,.26), transparent 55%),
        radial-gradient(700px 360px at 85% 18%, rgba(124,58,237,.22), transparent 58%),
        radial-gradient(900px 520px at 75% 70%, rgba(217,70,239,.12), transparent 60%),
        linear-gradient(180deg, var(--bg2), var(--bg) 30%, #040007 100%);
      overflow-x:hidden;
      width:100%;
      min-width:100vw;
      font-size: 16.5px; /* bigger base text */
    }

    /* Decorative blur orbs */
    .orb{ position:fixed;
      filter: blur(70px);
      opacity:.55;
      z-index:0;
      pointer-events:none;
    }
    .orb.one{ width:420px; height:420px; left:-120px; top:80px; background:rgba(217,70,239,.55); border-radius:50%; }
    .orb.two{ width:420px; height:420px; right:-180px; top:240px; background:rgba(124,58,237,.45); border-radius:50%; }
    .orb.three{ width:520px; height:520px; left:50%; transform:translateX(-50%); bottom:-260px; background:rgba(217,70,239,.25); border-radius:50%; }

    /* Container width like design */
    .wrap{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }

    /* Navbar */
    .navWrap{
      display:flex;
      flex-wrap:wrap;            /* FIX: allow collapse to go below brand/toggler */
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      width: 100%;
    }
    /* Ensure bootstrap expects this behavior */
    .navbar-collapse{ flex-basis: 100%; }
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(6,1,10,.88), rgba(6,1,10,.58));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none;
    }
    .logo{
      width:30px; height:30px; border-radius:11px;
      background: linear-gradient(135deg, rgba(217,70,239,1), rgba(124,58,237,1));
      box-shadow: 0 14px 40px rgba(217,70,239,.22);
      position:relative;
      flex: 0 0 auto;
    }
    .logo:after{
      content:""; position:absolute; inset:7px;
      border-radius:8px; background: rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.18);
    }
    .brandTitle{
      color: rgba(255,255,255,.92);
      font-weight:800;
      letter-spacing:.10em;
      font-size: 13px;
      margin:0;
      line-height:1.1;
    }
    .brandSub{
      margin:0;
      font-size: 12px;
      color: var(--muted);
      line-height:1.1;
    }

    .nav-link{
      color: rgba(255,255,255,.70) !important;
      font-weight:600;
      padding: .8rem .85rem !important;
      border-radius: 14px;
      transition: .18s ease;
    }
    .nav-link:hover{
      color: rgba(255,255,255,.92) !important;
      background: rgba(255,255,255,.04);
    }
    .nav-link.active{
      color: rgba(255,255,255,.95) !important;
      position:relative;
    }
    .nav-link.active:after{
      content:"";
      position:absolute;
      left: 18%;
      right: 18%;
      bottom: 7px;
      height: 2px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 0 20px rgba(217,70,239,.35);
    }

    .navbar-toggler{
      border: 1px solid rgba(255,255,255,.18) !important;
      box-shadow: none !important;
      padding: .55rem .7rem;
      border-radius: 14px;
      background: rgba(255,255,255,.03);
    }
    .navbar-toggler:focus{ box-shadow: var(--glow) !important; border-color: rgba(217,70,239,.35) !important; }
    .navbar-toggler-icon{
      filter: invert(1) opacity(.9);
    }

    /* Buttons (custom, bootstrap layout) */
    .xbtn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border-radius: 16px;
      padding: 12px 18px;
      font-weight: 700;
      font-size: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--text);
      text-decoration:none;
      transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
      user-select:none;
    }
    .xbtn:hover{ transform: translateY(-1px); border-color: rgba(217,70,239,.35); box-shadow: var(--glow); }
    .xbtn:active{ transform: translateY(0px); }
    .xbtn.primary{
      border-color: rgba(217,70,239,.55);
      background: linear-gradient(135deg, rgba(217,70,239,1), rgba(124,58,237,1));
      box-shadow: 0 16px 50px rgba(217,70,239,.18);
    }
    .xbtn.primary:hover{ box-shadow: 0 18px 62px rgba(217,70,239,.25); }
    .xbtn.ghost{
      background: transparent;
      border-color: rgba(217,70,239,.35);
    }
    .xbtn.small{
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 700;
    }

    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }
    .pill .dot{
      width:10px; height:10px; border-radius:999px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 0 18px rgba(217,70,239,.55);
    }

    /* Sections + headings (bigger like your images) */
    main{ position:relative; z-index:1; }
    section{ padding: 64px 0; }
    .hero{ padding: 74px 0 44px; text-align:center; }
    .hero h1{
      margin: 18px 0 12px;
      font-size: clamp(40px, 5vw, 70px);
      line-height: 1.02;
      letter-spacing: -.02em;
      font-weight: 900;
    }
    .grad{
      background: linear-gradient(135deg, rgba(217,70,239,1), rgba(255,255,255,.95));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .hero p{
      margin: 0 auto 22px;
      max-width: 820px;
      color: var(--muted);
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.7;
    }

    .secHead{ text-align:center; margin-bottom: 26px; }
    .secHead h2{
      margin:0 0 10px;
      font-size: clamp(30px, 3.2vw, 44px);
      letter-spacing: -.02em;
      font-weight: 900;
    }
    .secHead h2 span{ color: var(--accent); }
    .secHead p{
      margin:0 auto;
      max-width: 860px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }

    /* Card base */
    .cardX{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    /* Hero stat */
    .statCard{
      margin: 26px auto 0;
      max-width: 620px;
      border-radius: var(--radius2);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      padding: 18px 18px;
      position:relative;
      overflow:hidden;
      text-align:left;
    }
    .statCard:before{
      content:"";
      position:absolute; right:-28px; top:-40px;
      width:190px; height:190px; border-radius:50%;
      background: radial-gradient(circle at 35% 35%, rgba(217,70,239,.28), transparent 62%);
      filter: blur(2px);
    }
    .statCard small{
      display:block;
      color: var(--muted2);
      font-weight:800;
      letter-spacing:.10em;
      font-size:12px;
      text-transform:uppercase;
      margin-bottom: 6px;
    }
    .statCard strong{
      font-size: 30px;
      letter-spacing:-.02em;
      font-weight: 900;
    }

    /* Tables */
    .tableX{
      width:100%;
      border-collapse:collapse;
      font-size: 15px;
      min-width: 980px; /* enables horizontal scroll on mobile */
    }
    .tableX th, .tableX td{
      padding: 18px 18px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      text-align:left;
      vertical-align:middle;
    }
    .tableX th{
      color: var(--muted2);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .tableX tr:last-child td{ border-bottom:0; }
    .slab{
      display:flex; align-items:center; gap:12px;
    }
    .badgeNum{
      width:40px; height:40px;
      border-radius:999px;
      display:grid; place-items:center;
      font-size: 16px;
      font-weight: 900;
      background: rgba(217,70,239,.22);
      border:1px solid rgba(217,70,239,.42);
      box-shadow: 0 0 22px rgba(217,70,239,.22);
    }
    .tag{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      padding: 8px 12px;
      border-radius: 999px;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
      background: linear-gradient(135deg, rgba(217,70,239,1), rgba(124,58,237,1));
      box-shadow: 0 10px 28px rgba(217,70,239,.16);
    }
    .green{ color: var(--good); font-weight:900; }
    .violet{ color: rgba(167,139,250,.95); font-weight:900; }
    .rowPopular{
      background: linear-gradient(90deg, rgba(217,70,239,.12), rgba(124,58,237,.05), transparent 72%);
    }

    /* Step/benefit cards */
    .tile{
      position:relative;
      border-radius: 18px;
      padding: 22px 20px 18px;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 14px 55px rgba(0,0,0,.35);
      overflow:hidden;
      height: 100%;
    }
    .tile:hover{ border-color: rgba(217,70,239,.28); box-shadow: var(--glow); }
    .tile .corner{
      position:absolute;
      right: 14px;
      top: -16px; /* outside like image */
      width: 46px;
      height: 46px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      font-weight: 900;
      font-size: 16px;
      color: rgba(255,255,255,.95);
      background: linear-gradient(135deg, rgba(217,70,239,.55), rgba(124,58,237,.35));
      border:1px solid rgba(217,70,239,.50);
      box-shadow: 0 0 28px rgba(217,70,239,.35);
    }
    .iconBubble{
      width: 54px; height: 54px;
      border-radius: 18px;
      display:grid; place-items:center;
      background: rgba(217,70,239,.18);
      border:1px solid rgba(217,70,239,.34);
      box-shadow: 0 0 28px rgba(217,70,239,.25);
      margin: 4px auto 14px;
    }
    .tile h3{
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 900;
      text-align:center;
    }
    .tile p{
      margin:0;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.7;
      text-align:center;
    }

    /* CTA bar */
    .cta{
      margin-top: 26px;
      border-radius: 22px;
      padding: 22px 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .cta h3{ margin:0; font-size: 20px; font-weight: 900; }
    .cta p{ margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 760px; }

    /* Deposits scroll */
    .scrollArea{ max-height: 280px; overflow:auto; }
    .scrollArea::-webkit-scrollbar{ width:10px; }
    .scrollArea::-webkit-scrollbar-thumb{
      background: rgba(217,70,239,.30);
      border-radius: 999px;
      border: 3px solid rgba(0,0,0,.35);
    }
    .scrollArea::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
    .tx{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      color: rgba(255,255,255,.70);
      font-size: 13px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width: 340px;
      display:inline-block;
      vertical-align:bottom;
    }

    /* Audit */
    .audit{
      width:min(620px, 100%);
      border-radius: 18px;
      padding: 18px;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 12px 50px rgba(0,0,0,.35);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin: 0 auto;
    }
    .audit .left{ display:flex; align-items:center; gap:12px; }
    .audit .name{ font-weight: 900; font-size: 16px; }
    .audit small{ display:block; color:var(--muted); margin-top:4px; font-size: 13.5px; }
    .check{
      width:32px; height:32px; border-radius:999px;
      display:grid; place-items:center;
      background: rgba(34,197,94,.12);
      border: 1px solid rgba(34,197,94,.35);
      color: var(--good);
    }

    
    /* Safety: prevent accidental horizontal overflow */
    main, header, footer, section, .wrap{ max-width:100vw; overflow-x:clip; }
    
    /* Footer */
    footer{
      position:relative; z-index:1;
      padding: 62px 0 28px;
      border-top: 1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
    }
    footer h4{
      margin:0 0 12px;
      font-size: 13px;
      letter-spacing:.10em;
      text-transform:uppercase;
      color: rgba(255,255,255,.78);
      font-weight: 900;
    }
    .footText{ color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
    .links a{
      display:block;
      color: var(--muted);
      font-size: 14px;
      padding: 7px 0;
      text-decoration:none;
    }
    .links a:hover{ color: var(--text); }
    .chip{
      border-radius: 14px;
      padding: 10px 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      font-size: 14px;
      text-decoration:none;
      display:inline-block;
      margin: 6px 8px 0 0;
    }
    .chip:hover{ color:var(--text); border-color: rgba(217,70,239,.28); box-shadow: var(--glow); }

    .disclaimer{
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color: rgba(255,255,255,.60);
      font-size: 13.5px;
      line-height: 1.7;
    }
    .copyright{
      margin-top: 18px;
      text-align:center;
      color: rgba(255,255,255,.42);
      font-size: 13px;
    }

    
    /* Bootstrap fallback (works even if CDN blocked) */
    .table-responsive{
      width:100%;
      max-width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .table-responsive > table{ margin-bottom:0; }
    
    /* Responsive tuning */
    @media (max-width: 991.98px){
      /* collapse panel should look like dropdown panel */
      .navbar-collapse{
        margin-top: 12px;
        padding: 14px 14px 16px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.08);
        background: rgba(0,0,0,.16);
        box-shadow: 0 16px 60px rgba(0,0,0,.45);
        backdrop-filter: blur(10px);
      }
      .navbar-nav{ align-items: stretch !important; }
      .nav-link{ text-align:center; }
      .nav-link.active:after{ left: 30%; right: 30%; } /* nicer underline on mobile */
    }

    @media (max-width: 991.98px){
      .cta{ flex-direction:column; align-items:flex-start; }
      .statCard{ text-align:center; }
      .statCard:before{ opacity:.65; }
    }
    @media (max-width: 575.98px){
      body{ font-size: 16px; }
      .wrap{ width: calc(100% - 26px); }
      .hero{ padding-top: 56px; }
      .tile{ padding: 20px 18px 16px; }
      .tile .corner{ right: 10px; }
      .tableX{ min-width: 980px; } /* keep */
      .tx{ max-width: 180px; }
    }