:root{
    --bg:#f7f7fb;
    --ink:#111827;
    --muted: rgba(17,24,39,.68);
    --faint: rgba(17,24,39,.48);
  
    --card:#ffffff;
    --card2:#fbfbff;
    --line: rgba(17,24,39,.12);
  
    --brand:#3b82f6;
    --brand2:#8b5cf6;
    --good:#16a34a;
  
    --shadow: 0 18px 60px rgba(17,24,39,.10);
    --shadow2: 0 10px 30px rgba(17,24,39,.08);
  
    --radius: 18px;
    --radius2: 24px;
    --container: 1140px;
  
    --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: var(--font);
    color: var(--ink);
    background:
      radial-gradient(1200px 680px at 15% -10%, rgba(59,130,246,.10), transparent 60%),
      radial-gradient(900px 620px at 85% 0%, rgba(139,92,246,.10), transparent 60%),
      linear-gradient(180deg, #ffffff, var(--bg));
  }
  
  a{ color: inherit; text-decoration:none; }
  button, input{ font: inherit; }
  
  .container{
    width: min(100% - 32px, var(--container));
    margin: 0 auto;
  }
  
  .skip{
    position:absolute;
    left:-999px;
    top:10px;
    padding:10px 12px;
    border-radius:12px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow2);
  }
  .skip:focus{ left: 12px; z-index: 9999; }
  
  /* Top */
  .top{
    position: sticky;
    top:0;
    z-index: 50;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .top__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    padding: 14px 0;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 220px;
  }
  .brand__mark{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 14px 34px rgba(59,130,246,.18);
  }
  .brand__text{ display:flex; flex-direction:column; line-height: 1.1; }
  .brand__name{ font-weight: 900; letter-spacing: -.01em; }
  .brand__tag{ font-size: 12px; color: var(--muted); margin-top: 2px; }
  
  .nav{
    display:flex;
    gap: 18px;
  }
  .nav__link{
    font-weight: 800;
    font-size: 14px;
    color: var(--muted);
    padding: 10px 12px;
    border-radius: 999px;
  }
  .nav__link:hover{
    color: var(--ink);
    background: rgba(17,24,39,.05);
  }
  
  .top__actions{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  
  .pillbtn{
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow2);
    padding: 0 12px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    cursor:pointer;
  }
  .pillbtn:hover{ background: #fff; }
  .pillbtn__icon{
    font-weight: 900;
    font-size: 12px;
    color: rgba(17,24,39,.70);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px 6px;
    background: #fff;
  }
  .pillbtn__text{ font-weight: 900; color: rgba(17,24,39,.82); }
  
  .btn{
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 900;
    font-size: 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: transform .12s ease, filter .12s ease;
  }
  .btn:active{ transform: translateY(1px); }
  
  .btn--primary{
    color:#fff;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 16px 36px rgba(139,92,246,.16);
  }
  .btn--primary:hover{ filter: brightness(1.03); }
  
  .btn--ghost{
    color: var(--ink);
    background: rgba(255,255,255,.85);
    border-color: var(--line);
    box-shadow: var(--shadow2);
  }
  .btn--ghost:hover{ filter: brightness(1.02); }
  
  .btn--sm{ height: 38px; padding: 0 12px; }
  
  .hamburger{
    display:none;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow2);
    cursor:pointer;
  }
  .hamburger span{
    display:block;
    height: 2px;
    width: 18px;
    margin: 4px auto;
    background: rgba(17,24,39,.76);
    border-radius: 2px;
  }
  
  .mobile{
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.9);
  }
  .mobile__inner{
    padding: 12px 0 16px 0;
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .mobile__link{
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 900;
    color: rgba(17,24,39,.75);
  }
  .mobile__cta{ display:inline-flex; justify-content:center; }
  
  /* Hero */
  .hero{ padding: 44px 0 24px 0; }
  .hero__grid{
    display:grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 26px;
    align-items:start;
  }
  
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow2);
    font-weight: 800;
    font-size: 13px;
    color: rgba(17,24,39,.72);
  }
  .eyebrow__dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
  }
  
  .hero__title{
    margin: 16px 0 10px 0;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }
  .u{
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-decoration-color: rgba(59,130,246,.18);
    text-underline-offset: 10px;
  }
  
  .hero__sub{
    margin: 0 0 18px 0;
    max-width: 60ch;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.7;
    font-size: 16px;
  }
  
  .hero__cta{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
  
  .hero__chips{ display:flex; gap: 10px; flex-wrap: wrap; }
  .chip{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.88);
    box-shadow: var(--shadow2);
    font-weight: 900;
    font-size: 13px;
    color: rgba(17,24,39,.74);
  }
  .chip:hover{ background:#fff; }
  
  /* Scorecard module (distinct look) */
  .scorecard{
    border-radius: var(--radius2);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, var(--card2));
    box-shadow: var(--shadow);
    padding: 16px;
  }
  .scorecard__head{
    display:flex;
    justify-content:space-between;
    gap: 12px;
  }
  .kicker{
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(17,24,39,.55);
  }
  .scorecard__title{
    margin: 6px 0 0 0;
    font-size: 22px;
    letter-spacing: -0.02em;
  }
  .scorecard__sub{
    margin: 6px 0 0 0;
    color: var(--muted);
    line-height: 1.6;
    font-weight: 600;
    font-size: 14px;
  }
  .stamp{
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(22,163,74,.25);
    background: rgba(22,163,74,.08);
    color: rgba(22,163,74,.92);
    display:inline-flex;
    align-items:center;
    font-weight: 900;
    font-size: 12px;
  }
  
  .metrics{
    margin-top: 14px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .metric{
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 12px;
  }
  .metric__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 10px;
    font-weight: 900;
    font-size: 13px;
  }
  .metric__top span{ color: rgba(17,24,39,.64); }
  .rail{
    height: 10px;
    border-radius: 999px;
    background: rgba(17,24,39,.06);
    border: 1px solid rgba(17,24,39,.08);
    overflow:hidden;
  }
  .rail i{
    display:block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
  }
  
  .scorecard__foot{
    margin-top: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .note{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: rgba(17,24,39,.72);
    font-weight: 700;
  }
  .note__dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--good);
  }
  .scorecard__cta{ display:flex; gap: 10px; }
  
  /* Sections */
  .section{ padding: 34px 0; }
  .section--alt{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.55);
  }
  .section--soft{
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  }
  .section__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 16px;
    margin-bottom: 16px;
  }
  .section__title{
    margin:0;
    font-size: 24px;
    letter-spacing: -0.02em;
  }
  .section__sub{
    margin: 8px 0 0 0;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.6;
  }
  
  /* Compare filters */
  .filters{
    display:flex;
    align-items:center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .seg{
    display:inline-flex;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow2);
    gap: 6px;
  }
  .seg__btn{
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-weight: 900;
    color: rgba(17,24,39,.68);
    cursor:pointer;
  }
  .seg__btn.is-on{
    background: #fff;
    border-color: rgba(17,24,39,.10);
    color: var(--ink);
    box-shadow: 0 10px 22px rgba(17,24,39,.06);
  }
  .miniSearch input{
    height: 42px;
    width: min(280px, 62vw);
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow2);
    padding: 0 14px;
    outline: none;
  }
  .miniSearch input:focus{
    box-shadow: 0 0 0 4px rgba(59,130,246,.15);
    border-color: rgba(59,130,246,.35);
  }
  
  /* Table */
  .tablewrap{
    border-radius: var(--radius2);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    overflow:auto;
  }
  .table{
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
  }
  .table th, .table td{
    padding: 14px 14px;
    border-bottom: 1px solid rgba(17,24,39,.10);
    text-align:left;
    vertical-align: middle;
  }
  .table thead th{
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(17,24,39,.55);
    font-weight: 900;
    background: rgba(17,24,39,.02);
  }
  .table tbody tr{
    cursor:pointer;
  }
  .table tbody tr:hover{
    background: rgba(59,130,246,.06);
  }
  .pill{
    display:inline-flex;
    align-items:center;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.10);
    background: rgba(17,24,39,.02);
    font-weight: 900;
    font-size: 12px;
    color: rgba(17,24,39,.70);
  }
  .pill--good{
    border-color: rgba(22,163,74,.22);
    background: rgba(22,163,74,.08);
    color: rgba(22,163,74,.92);
  }
  .pill--warn{
    border-color: rgba(245,158,11,.22);
    background: rgba(245,158,11,.12);
    color: rgba(180,83,9,.92);
  }
  
  /* Cards */
  .cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .card{
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .card__top{
    display:flex;
    justify-content:space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 900;
    color: rgba(17,24,39,.56);
    letter-spacing: .10em;
    text-transform: uppercase;
  }
  .card__title{
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.02em;
  }
  .card__text{
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 600;
    font-size: 14px;
  }
  .card__meta{
    margin-top:auto;
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .card__link{
    margin-top: 6px;
    font-weight: 900;
    color: rgba(59,130,246,.92);
  }
  .card__link:hover{ text-decoration: underline; text-underline-offset: 4px; }
  
  /* Timeline */
  .timeline{
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .item{
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    padding: 14px;
    display:flex;
    justify-content:space-between;
    gap: 12px;
    align-items:flex-start;
  }
  .item__left{
    max-width: 80ch;
  }
  .item__title{
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
  }
  .item__text{
    margin: 6px 0 0 0;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 600;
  }
  .item__date{
    color: rgba(17,24,39,.52);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
  }
  
  /* Newsletter */
  .newsletter{
    border-radius: var(--radius2);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow);
    padding: 18px;
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    align-items:center;
  }
  .newsletter__title{ margin: 0; font-size: 24px; letter-spacing: -0.02em; }
  .newsletter__sub{ margin: 8px 0 0 0; color: var(--muted); line-height: 1.7; font-weight: 600; }
  .newsletter__meta{ margin-top: 10px; color: rgba(17,24,39,.55); font-weight: 700; font-size: 12px; }
  
  .newsletter__form{
    border-radius: 18px;
    border: 1px solid rgba(17,24,39,.10);
    background: rgba(17,24,39,.02);
    padding: 14px;
  }
  .label{
    display:block;
    font-weight: 900;
    font-size: 12px;
    color: rgba(17,24,39,.62);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .row{ display:flex; gap: 10px; }
  .row input{
    flex: 1;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    padding: 0 14px;
    outline: none;
  }
  .row input:focus{
    box-shadow: 0 0 0 4px rgba(59,130,246,.15);
    border-color: rgba(59,130,246,.35);
  }
  .toast{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(17,24,39,.10);
    background: #fff;
    color: rgba(17,24,39,.72);
    font-weight: 700;
    font-size: 13px;
  }
  
  /* Modal */
  .modal{ position: fixed; inset: 0; z-index: 80; }
  .modal__backdrop{
    position:absolute; inset:0;
    background: rgba(17,24,39,.35);
  }
  .modal__panel{
    position: relative;
    width: min(720px, calc(100% - 32px));
    margin: 10vh auto 0 auto;
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.6);
    background: #fff;
    box-shadow: var(--shadow);
    padding: 16px;
  }
  .modal__top{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    align-items:flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(17,24,39,.10);
  }
  .modal__title{
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.02em;
    margin-top: 6px;
  }
  .modal__body{
    padding: 12px 0;
    color: rgba(17,24,39,.74);
    font-weight: 600;
    line-height: 1.7;
  }
  .modal__foot{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(17,24,39,.10);
  }
  .x{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.12);
    background: #fff;
    cursor:pointer;
    font-weight: 900;
  }
  
  /* Footer */
  .footer{
    padding: 26px 0 32px 0;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.70);
  }
  .footer__inner{
    display:flex;
    justify-content:space-between;
    gap: 16px;
    align-items:flex-start;
  }
  .footer__brand{ font-weight: 900; }
  .footer__muted{ margin-top: 6px; color: var(--muted); font-weight: 600; }
  .footer__links{ display:flex; gap: 12px; flex-wrap: wrap; justify-content:flex-end; }
  .footer__links a{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 900;
    color: rgba(17,24,39,.70);
  }
  .footer__links a:hover{ background: rgba(17,24,39,.03); color: var(--ink); }
  .footer__bottom{
    margin-top: 14px;
    display:flex;
    gap: 10px;
    align-items:center;
    color: rgba(17,24,39,.60);
    font-weight: 700;
    font-size: 13px;
  }
  .sep{ opacity: .5; }
  .muted{ color: rgba(17,24,39,.60); }
  
  /* Misc */
  .hint{
    margin-top: 10px;
    color: rgba(17,24,39,.58);
    font-weight: 600;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .nav{ display:none; }
    .hamburger{ display:inline-block; }
    .hero__grid{ grid-template-columns: 1fr; }
    .metrics{ grid-template-columns: 1fr; }
    .cards{ grid-template-columns: repeat(2, 1fr); }
    .newsletter{ grid-template-columns: 1fr; }
  }
  @media (max-width: 640px){
    .cards{ grid-template-columns: 1fr; }
    .pillbtn{ display:none; }
    .brand__tag{ display:none; }
    .item{ flex-direction:column; }
  }