:root{
      /* Light / airy */
      --bg0:#F7F8FF;
      --bg1:#FFFFFF;
      --card:#FFFFFF;
      --card2:#FCFCFF;
      --border:rgba(10,12,20,.10);
      --text:#0B1220;
      --muted:rgba(11,18,32,.72);
      --muted2:rgba(11,18,32,.55);

      --accent:#7C3AED;   /* purple */
      --accent2:#06B6D4;  /* cyan */
      --good:#10B981;
      --warn:#F59E0B;

      --shadow: 0 18px 45px rgba(15,23,42,.10);
      --shadow2: 0 10px 30px rgba(15,23,42,.08);
      --radius: 18px;
      --radius2: 26px;
      --max: 1180px;

      --glass: rgba(255,255,255,.70);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:
        radial-gradient(900px 480px at 12% -10%, rgba(124,58,237,.16), transparent 55%),
        radial-gradient(820px 420px at 92% 0%, rgba(6,182,212,.12), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #FFFFFF);
      line-height:1.45;
    }

    a{color:inherit;text-decoration:none}
    a:hover{opacity:.92}

    /* Top bar */
    .topbar{
      position:sticky; top:0; z-index:30;
      backdrop-filter: blur(12px);
      background: var(--glass);
      border-bottom: 1px solid var(--border);
    }
    .topbar-inner{
      max-width:var(--max); margin:0 auto;
      padding: 14px 18px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }

    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900; letter-spacing:.2px;
    }
    .logo-dot{
      width:14px;height:14px;border-radius:99px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 0 0 7px rgba(124,58,237,.12), 0 0 0 13px rgba(6,182,212,.06);
    }
    .brand small{
      display:block;
      font-weight:800;
      color:var(--muted2);
      letter-spacing:.35px;
      margin-top:1px;
    }

    .navlinks{
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      color:var(--muted);
      font-weight:800;
    }

    .pill{
      border: 1px solid var(--border);
      background: rgba(255,255,255,.8);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      white-space:nowrap;
      box-shadow: var(--shadow2);
    }

    .cta{
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.80));
      color:#fff;
      border:0;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight:900;
      font-size: 13px;
      box-shadow: 0 12px 30px rgba(124,58,237,.18);
    }

    .wrap{max-width:var(--max); margin:0 auto; padding: 26px 18px 60px;}

    /* Cards */
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
      border: 1px solid var(--border);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .hero{
      display:grid;
      grid-template-columns: 1.25fr .85fr;
      gap:16px;
      align-items:stretch;
      margin-top: 16px;
    }

    .hero-main{padding: 22px 22px 18px;}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding: 7px 11px;
      border-radius: 999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.9);
      color: var(--muted);
      font-weight:900;
      font-size: 13px;
      box-shadow: var(--shadow2);
    }
    .kicker .tag{
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(6,182,212,.12);
      border: 1px solid rgba(6,182,212,.22);
      color: rgba(11,18,32,.92);
      font-weight:900;
      font-size: 12px;
    }

    h1{
      margin: 14px 0 6px;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height:1.1;
      letter-spacing:-.02em;
    }
    .sub{
      color:var(--muted);
      font-size: 15px;
      margin-bottom: 14px;
    }

    .statbar{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
      margin-top: 12px;
    }
    .stat{
      padding: 12px 12px;
      border-radius: 16px;
      background: rgba(11,18,32,.03);
      border: 1px solid rgba(10,12,20,.08);
      min-height: 64px;
    }
    .stat .label{
      color:var(--muted2);
      font-weight:900;
      font-size:12px;
      margin-bottom: 3px;
    }
    .stat .value{
      font-weight:950;
      font-size: 15px;
      letter-spacing:.1px;
    }

    /* Right side */
    .hero-side{display:flex; flex-direction:column;}
    .hero-side .side-top{
      padding: 18px 18px 12px;
      border-bottom: 1px solid var(--border);
      background:
        radial-gradient(420px 240px at 15% 0%, rgba(124,58,237,.14), transparent 60%),
        radial-gradient(360px 210px at 92% 15%, rgba(6,182,212,.10), transparent 60%);
    }

    .h2{
      font-size: 16px;
      letter-spacing:.2px;
      margin: 0 0 10px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      font-weight:950;
    }
    .h2 span{color:var(--muted2); font-weight:900; font-size:12px}
    .p{margin:0; color:var(--muted); font-size: 14px;}

    .scoregrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    .score{
      padding: 12px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(10,12,20,.08);
      box-shadow: var(--shadow2);
    }
    .score .t{
      font-weight:950; font-size: 13px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom: 6px;
    }
    .badge{
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      border:1px solid rgba(10,12,20,.10);
      background: rgba(11,18,32,.03);
      color: rgba(11,18,32,.85);
      white-space:nowrap;
      font-weight:900;
    }
    .meter{
      height: 10px;
      background: rgba(11,18,32,.06);
      border-radius: 999px;
      overflow:hidden;
    }
    .meter > i{
      display:block; height:100%;
      width: 72%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
    }
    .meter.warn > i{ width: 48%; background: linear-gradient(90deg, var(--warn), rgba(245,158,11,.25)); }
    .meter.good > i{ width: 80%; background: linear-gradient(90deg, var(--good), rgba(6,182,212,.25)); }

    .side-actions{
      display:flex; gap:10px; flex-wrap:wrap;
      padding: 14px 18px 18px;
      margin-top:auto;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      padding: 11px 12px;
      border-radius: 16px;
      font-weight:950;
      font-size: 13px;
      border: 1px solid rgba(10,12,20,.10);
      background: rgba(255,255,255,.88);
      color:var(--text);
      box-shadow: var(--shadow2);
      flex: 1;
      min-width: 160px;
    }
    .btn.primary{
      border:0;
      color:#fff;
      background: linear-gradient(135deg, rgba(124,58,237,.96), rgba(6,182,212,.80));
      box-shadow: 0 14px 32px rgba(124,58,237,.18);
    }

    /* Main grid */
    .grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:16px;
      margin-top: 16px;
    }
    .section{padding: 18px 18px;}

    .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px;}
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(10,12,20,.10);
      background: rgba(255,255,255,.92);
      font-size: 13px;
      font-weight:950;
      color: rgba(11,18,32,.90);
      box-shadow: var(--shadow2);
    }
    .dot{
      width:8px;height:8px;border-radius:99px;
      background: rgba(6,182,212,.9);
      box-shadow: 0 0 0 4px rgba(6,182,212,.12);
    }
    .dot.purple{background: rgba(124,58,237,.92); box-shadow: 0 0 0 4px rgba(124,58,237,.12);}
    .dot.warn{background: rgba(245,158,11,.95); box-shadow: 0 0 0 4px rgba(245,158,11,.14);}
    .dot.good{background: rgba(16,185,129,.95); box-shadow: 0 0 0 4px rgba(16,185,129,.12);}

    .imgwrap{
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid rgba(10,12,20,.10);
      background: rgba(11,18,32,.02);
      box-shadow: var(--shadow2);
    }
    .img{
      width:100%;
      height:auto;
      display:block;
      background: rgba(11,18,32,.03);
    }
    .imgcap{
      padding: 10px 12px;
      font-size: 12px;
      color: var(--muted2);
      border-top: 1px solid rgba(10,12,20,.08);
      background: rgba(255,255,255,.88);
      font-weight:850;
    }

    table{
      width:100%;
      border-collapse:collapse;
      font-size: 13px;
      color: rgba(11,18,32,.92);
      margin-top: 10px;
      overflow:hidden;
      border-radius: 16px;
      border: 1px solid rgba(10,12,20,.10);
      box-shadow: var(--shadow2);
      background: rgba(255,255,255,.95);
    }
    th,td{padding: 10px 10px; border-bottom: 1px solid rgba(10,12,20,.08); vertical-align:top;}
    th{
      text-align:left;
      font-size: 12px;
      color: var(--muted2);
      font-weight:950;
      letter-spacing:.2px;
      background: rgba(11,18,32,.02);
    }
    tr:last-child td{border-bottom:0}
    td small{color:var(--muted2); font-weight:850; display:block; margin-top:3px}

    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      margin-top: 12px;
    }

    .footer{
      margin-top: 18px;
      padding: 18px;
      color: rgba(11,18,32,.62);
      font-size: 12px;
      border-top: 1px solid rgba(10,12,20,.10);
      text-align:center;
    }

    @media (max-width: 980px){
      .hero{grid-template-columns: 1fr;}
      .grid{grid-template-columns: 1fr;}
      .statbar{grid-template-columns: 1fr 1fr;}
    }
    @media (max-width: 540px){
      .statbar{grid-template-columns: 1fr;}
      .two-col{grid-template-columns: 1fr;}
      .navlinks{display:none;}
      .btn{min-width: 0;}
    }