:root{
      --bg:#05010a;
      --bg2:#090212;

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

      --accent:#d946ef;   /* pink */
      --accent2:#7c3aed;  /* violet */

      --line: rgba(255,255,255,.09);
      --shadow: 0 18px 70px rgba(0,0,0,.45);

      --green:#22c55e;
      --blue:#3b82f6;
      --purple:#a855f7;
      --pink:#ec4899;

      --amber1:#f59e0b;
      --amber2:#f97316;

      --radius: 18px;
      --radius2: 26px;
      --max: 1180px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; width:100%; overflow-x:hidden; }
    body{ overflow-x:hidden; }

    /* Background (matches screenshot vibe) */
    html{
      background:
        radial-gradient(900px 460px at 18% 10%, rgba(217,70,239,.22), transparent 55%),
        radial-gradient(740px 420px at 85% 16%, rgba(124,58,237,.22), transparent 58%),
        radial-gradient(920px 560px at 78% 78%, rgba(217,70,239,.12), transparent 60%),
        linear-gradient(180deg, var(--bg2), var(--bg) 30%, #030007 100%);
    }

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background: transparent;
      font-size: 16.5px;
    }

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

    /* Soft Orbs (fixed -> no horizontal scroll) */
    .orb{ position:fixed; filter: blur(70px); opacity:.32; z-index:0; pointer-events:none; border-radius:50%; }
    .orb.one{ width:420px; height:420px; left:-140px; top:70px; background:rgba(217,70,239,.55); }
    .orb.two{ width:420px; height:420px; right:-180px; top:240px; background:rgba(124,58,237,.45); }
    .orb.three{ width:520px; height:520px; left:50%; transform:translateX(-50%); bottom:-270px; background:rgba(217,70,239,.25); }

    /* Navbar */
    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);
    }
    .navWrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; width:100%; }
    .navbar-collapse{ flex-basis:100%; }

    .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:900; letter-spacing:.10em; font-size:13px; margin:0; line-height:1.1; }
    .brandSub{ color: rgba(255,255,255,.68); margin:0; font-size:12px; line-height:1.1; }

    .nav-link{
      color: rgba(255,255,255,.72) !important;
      font-weight:700;
      padding: .85rem .9rem !important;
      border-radius: 14px;
      transition: .18s ease;
    }
    .nav-link:hover{ color: rgba(255,255,255,.95) !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: 0 0 0 1px rgba(255,255,255,.06), 0 0 28px rgba(217,70,239,.30) !important; border-color: rgba(217,70,239,.35) !important; }
    .navbar-toggler-icon{ filter: invert(1) opacity(.9); }

    /* Buttons */
    .xbtn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border-radius: 16px;
      padding: 12px 18px;
      font-weight: 800;
      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;
      white-space:nowrap;
    }
    .xbtn:hover{ transform: translateY(-1px); border-color: rgba(217,70,239,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 28px rgba(217,70,239,.30); }
    .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.orange{
      background: linear-gradient(90deg, var(--amber1), var(--amber2));
      border-color: rgba(245,158,11,.45);
      box-shadow: 0 18px 60px rgba(245,158,11,.16);
      color: rgba(255,255,255,.95);
    }

    /* Main */
    main{ position:relative; z-index:1; padding: 34px 0 72px; }
    main::before{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background:
        radial-gradient(900px 520px at 12% 52%, rgba(217,70,239,.10), transparent 60%),
        radial-gradient(900px 520px at 88% 46%, rgba(124,58,237,.08), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.20));
      z-index:0;
    }
    main > .wrap{ position:relative; z-index:1; }

    .pageTitle{
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 900;
      letter-spacing: -.02em;
      margin: 6px 0 6px;
      color: rgba(196, 140, 255, .95);
      text-shadow: 0 0 30px rgba(168,85,247,.22);
    }
    .pageSub{ margin:0; color: var(--muted); font-size: 15.5px; line-height: 1.75; }

    /* Card shell */
    .cardX{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,6,16,.55);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      backdrop-filter: blur(10px);
    }
    .cardX::before{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
    }
    .cardX > *{ position:relative; z-index:1; }

    .cardHead{
      padding: 18px 18px 10px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .cardHead h3{ margin:0; font-weight: 900; font-size: 18px; }
    .cardHead p{ margin:6px 0 0; color: var(--muted2); font-weight: 700; font-size: 13px; }

    /* Rank Banner */
    .rankBanner{
      margin: 14px 18px 12px;
      border-radius: 16px;
      border: 1px solid rgba(245,158,11,.28);
      background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(0,0,0,.25) 65%);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .rankLeft{ display:flex; align-items:center; gap:12px; }
    .badgeIcon{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(245,158,11,.20);
      border: 1px solid rgba(245,158,11,.35);
      box-shadow: 0 0 26px rgba(245,158,11,.14);
      flex: 0 0 auto;
    }
    .rankMeta small{ display:block; color: rgba(255,255,255,.58); font-weight: 800; font-size: 11px; }
    .rankMeta strong{ display:block; margin-top:2px; font-size: 12.5px; font-weight: 900; color: rgba(245,158,11,.95); }
    .rankRight{ text-align:right; }
    .rankRight small{ display:block; color: rgba(255,255,255,.60); font-weight: 800; font-size: 11px; }
    .rankRight strong{ display:block; margin-top:2px; font-size: 18px; font-weight: 900; color: rgba(255,255,255,.92); }

    /* Stat cards */
    .statGrid{ padding: 0 18px 14px; }
    .stat{
      border-radius: 16px;
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.08);
      padding: 14px 14px;
      height:100%;
      position:relative;
      overflow:hidden;
    }
    .stat small{
      color: rgba(255,255,255,.55);
      font-weight: 900;
      font-size: 11px;
      letter-spacing:.08em;
      text-transform:uppercase;
      display:block;
    }
    .stat .val{ margin-top:8px; font-weight: 900; font-size: 22px; line-height:1; }
    .stat .unit{ color: rgba(255,255,255,.55); font-weight: 900; font-size: 11px; margin-left: 6px; }

    .stat::after{
      content:"";
      position:absolute;
      right:12px; bottom:12px;
      width:46px; height:46px;
      border-radius:16px;
      opacity:.35;
      border:1px solid rgba(255,255,255,.14);
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%);
      pointer-events:none;
    }

    .stat--green{ border-color: rgba(34,197,94,.28); }
    .stat--green::after{ border-color: rgba(34,197,94,.35); background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.35), transparent 60%); }
    .stat--blue{ border-color: rgba(59,130,246,.28); }
    .stat--blue::after{ border-color: rgba(59,130,246,.35); background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.35), transparent 60%); }
    .stat--purple{ border-color: rgba(168,85,247,.28); }
    .stat--purple::after{ border-color: rgba(168,85,247,.35); background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.35), transparent 60%); }
    .stat--pink{ border-color: rgba(236,72,153,.28); }
    .stat--pink::after{ border-color: rgba(236,72,153,.35); background: radial-gradient(circle at 30% 30%, rgba(236,72,153,.35), transparent 60%); }

    /* Progress box */
    .progressBox{
      margin: 0 18px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.06);
      padding: 16px;
    }
    .progressTitle{
      font-weight: 900;
      font-size: 14px;
      margin-bottom: 12px;
      color: rgba(255,255,255,.88);
    }
    .pRow{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top: 10px; }
    .pRow .lbl{ color: rgba(255,255,255,.60); font-weight: 800; font-size: 12px; }
    .pRow .num{ color: rgba(255,255,255,.86); font-weight: 900; font-size: 12px; }

    .bar{
      height: 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.06);
      overflow:hidden;
      margin-top: 8px;
    }
    .bar > span{
      display:block;
      height:100%;
      width: 0%;
      border-radius:999px;
    }
    .bar--purple > span{ background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 18px rgba(217,70,239,.22); }
    .bar--green  > span{ background: linear-gradient(90deg, #22c55e, #16a34a); box-shadow: 0 0 18px rgba(34,197,94,.18); }

    .percent{
      margin-top:6px;
      text-align:right;
      font-weight: 900;
      font-size: 12px;
    }
    .percent--purple{ color: rgba(217,70,239,.85); }
    .percent--green{ color: rgba(34,197,94,.85); }

    .ctaRow{ padding: 0 18px 18px; }
    .ctaFull{ width:100%; }

    /* Section headings */
    .secHead{ text-align:center; margin: 30px 0 16px; }
    .secHead h2{
      margin:0;
      font-size: clamp(20px, 2.6vw, 30px);
      font-weight: 900;
      letter-spacing: -.02em;
      color: rgba(217,70,239,.92);
    }
    .secHead p{
      margin:8px auto 0;
      color: var(--muted);
      max-width: 820px;
      font-size: 13.8px;
      line-height:1.8;
    }

    /* Table */
    .tableShell{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,6,16,.52);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .table{ --bs-table-bg: transparent; --bs-table-color: rgba(255,255,255,.85); margin:0; }
    .table thead th{
      color: rgba(217,70,239,.95);
      font-weight: 900;
      font-size: 12px;
      letter-spacing:.06em;
      text-transform: uppercase;
      background: rgba(217,70,239,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: 14px 16px;
      white-space:nowrap;
    }
    .table tbody td{
      color: rgba(255,255,255,.84);
      font-weight: 700;
      font-size: 13.5px;
      padding: 16px;
      border-top: 1px solid rgba(255,255,255,.06);
      white-space:nowrap;
    }
    .emptyState{
      padding: 42px 16px;
      text-align:center;
      color: rgba(255,255,255,.60);
      font-weight: 700;
    }
    .emptyState svg{ opacity:.85; margin-bottom: 10px; }

    .rankPill{
      display:inline-flex; align-items:center; gap:10px;
      font-weight: 900;
      font-size: 12.5px;
      color: rgba(255,255,255,.90);
    }
    .rankDot{
      width: 18px; height: 18px; border-radius: 6px;
      display:grid; place-items:center;
      border: 1px solid rgba(255,255,255,.14);
      flex:0 0 auto;
    }

    /* Differential block */
    .infoBox{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,6,16,.55);
      box-shadow: var(--shadow);
      overflow:hidden;
      padding: 18px;
    }
    .howHead{
      display:flex; gap:12px; align-items:flex-start;
      margin-bottom: 12px;
    }
    .howIcon{
      width: 40px; height: 40px; border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(59,130,246,.18);
      border: 1px solid rgba(59,130,246,.30);
      flex:0 0 auto;
    }
    .howHead h3{ margin:0; font-weight: 900; font-size: 14px; }
    .howHead p{ margin:4px 0 0; color: rgba(255,255,255,.66); font-weight: 700; font-size: 13px; line-height: 1.6; }

    .exampleBox{
      margin-top: 14px;
      border-radius: 18px;
      border: 1px solid rgba(217,70,239,.18);
      background: rgba(0,0,0,.25);
      padding: 14px;
    }
    .exampleTitle{ color: rgba(217,70,239,.92); font-weight: 900; font-size: 12px; letter-spacing:.05em; text-transform: uppercase; margin-bottom: 10px; }
    .lineRow{
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding: 12px 12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-top: 10px;
    }
    .lineRow .k{ color: rgba(255,255,255,.60); font-weight: 900; font-size: 12px; }
    .lineRow .v{ color: rgba(255,255,255,.92); font-weight: 900; font-size: 12px; }

    .income{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid rgba(34,197,94,.22);
      background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(0,0,0,.18));
      padding: 14px;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:10px;
    }
    .income small{ color: rgba(255,255,255,.60); font-weight: 900; font-size: 11px; display:block; }
    .income strong{ color: rgba(34,197,94,.95); font-weight: 900; font-size: 18px; display:block; }

    .miniCard{
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.30);
      padding: 14px;
      height:100%;
    }
    .miniCard .top{
      display:flex; align-items:center; gap:10px; margin-bottom: 10px;
      font-weight: 900;
      font-size: 13px;
      color: rgba(255,255,255,.88);
    }
    .miniIcon{
      width: 34px; height: 34px; border-radius: 12px;
      display:grid; place-items:center;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      flex:0 0 auto;
    }
    .miniCard p{ margin:0; color: rgba(255,255,255,.62); font-weight: 700; font-size: 12.5px; line-height: 1.6; }
    .miniCard.red{ border-color: rgba(239,68,68,.18); background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(0,0,0,.30)); }
    .miniCard.blue{ border-color: rgba(59,130,246,.18); background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(0,0,0,.30)); }
    .miniCard.purple{ border-color: rgba(217,70,239,.18); background: linear-gradient(135deg, rgba(217,70,239,.08), rgba(0,0,0,.30)); }
    .miniCard.green{ border-color: rgba(34,197,94,.18); background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(0,0,0,.30)); }

    .keyPoints{
      margin-top: 14px;
      border-radius: 18px;
      border: 1px solid rgba(245,158,11,.22);
      background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(0,0,0,.30));
      padding: 16px;
    }
    .keyPoints h4{ margin:0 0 10px; font-weight: 900; font-size: 13px; color: rgba(255,255,255,.88); }
    .keyPoints ul{ margin:0; padding-left: 18px; color: rgba(255,255,255,.68); font-weight: 700; font-size: 12.8px; line-height: 1.85; }

    /* Footer */
    footer{
      position:relative; z-index:1;
      padding: 44px 0 24px;
      border-top: 1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.22));
    }
    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: 0 0 0 1px rgba(255,255,255,.06), 0 0 28px rgba(217,70,239,.30); }
    .copyright{ margin-top: 18px; text-align:center; color: rgba(255,255,255,.42); font-size: 13px; }

    /* Mobile collapse */
    @media (max-width: 991.98px){
      .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%; }
    }
    @media (max-width: 575.98px){
      .wrap{ width: calc(100% - 26px); }
      main{ padding-top: 26px; }
    }