:root{
      --blue:#1f6bff;
      --blue2:#0b3dff;
      --gold:#d8b15a;
      --ink:#0b1220;
      --muted:#5b6475;
      --card:#ffffff;
      --bg:#f7f9ff;
      --stroke: rgba(11,18,32,.10);
      --shadow: 0 18px 55px rgba(11,18,32,.12);
      --shadow2: 0 10px 28px rgba(11,18,32,.10);
      --r: 22px;
    }
    *{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;}
    body{background:var(--bg); color:var(--ink); overflow-x:hidden;}
    a{text-decoration:none}
    .navbar{backdrop-filter: blur(10px);}
    .brand-dot{color:var(--gold)}
    .btn-primary{
      background: linear-gradient(135deg, var(--blue), var(--blue2));
      border:0;
      box-shadow: 0 12px 28px rgba(31,107,255,.28);
    }
    .btn-outline-dark{border-color: rgba(11,18,32,.20);}
    .pill{
      display:inline-flex; gap:.55rem; align-items:center;
      padding:.55rem .85rem;
      border-radius:999px;
      background: rgba(31,107,255,.08);
      border: 1px solid rgba(31,107,255,.18);
      color: var(--ink);
      font-size: .92rem;
    }
    .hero{
      position:relative;
      padding: 96px 0 46px;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:-20%;
      background:
        radial-gradient(600px 420px at 20% 18%, rgba(31,107,255,.22), transparent 60%),
        radial-gradient(520px 360px at 72% 26%, rgba(216,177,90,.20), transparent 62%),
        radial-gradient(700px 420px at 55% 80%, rgba(31,107,255,.14), transparent 60%);
      z-index:0;
      transform: rotate(-6deg);
    }
    .hero-inner{position:relative; z-index:1;}
    .hero-card{
      background: rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.45);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow:hidden;
      transform-style:preserve-3d;
    }
    .hero-card .glass{
      position:absolute; inset:0;
      background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.35));
      pointer-events:none;
    }
    .hero-title{
      font-size: clamp(2rem, 4.2vw, 3.35rem);
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .lead{color:var(--muted);}
    .chip{
      border:1px solid rgba(11,18,32,.10);
      background: rgba(255,255,255,.78);
      border-radius:999px;
      padding: .4rem .75rem;
      font-size:.85rem;
      color: var(--muted);
      display:inline-flex; gap:.45rem; align-items:center;
      box-shadow: 0 10px 20px rgba(11,18,32,.06);
    }
    .section{padding: 70px 0;}
    .section-title{
      font-size: clamp(1.6rem, 2.7vw, 2.1rem);
      letter-spacing:-.02em;
    }
    .muted{color:var(--muted);}
    .cardx{
      background: var(--card);
      border: 1px solid rgba(11,18,32,.10);
      border-radius: var(--r);
      box-shadow: var(--shadow2);
      height:100%;
      overflow:hidden;
    }
    .icon{
      width:48px; height:48px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(31,107,255,.15), rgba(216,177,90,.12));
      border: 1px solid rgba(31,107,255,.18);
    }
    .kpi{
      border:1px solid rgba(11,18,32,.10);
      border-radius: var(--r);
      background: rgba(255,255,255,.75);
      box-shadow: var(--shadow2);
    }
    .kpi .num{font-size: 2.0rem; font-weight:700; letter-spacing:-.03em;}
    .badge-soft{
      background: rgba(216,177,90,.14);
      color: #7a5a1a;
      border: 1px solid rgba(216,177,90,.25);
      border-radius: 999px;
      padding:.35rem .65rem;
      font-weight:600;
      font-size:.8rem;
    }
    .timeline{
      position:relative;
      padding-left: 26px;
    }
    .timeline::before{
      content:"";
      position:absolute; left:10px; top:0; bottom:0;
      width:2px; background: rgba(11,18,32,.10);
    }
    .step{
      position:relative;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(11,18,32,.10);
      box-shadow: 0 10px 22px rgba(11,18,32,.06);
      margin-bottom: 14px;
    }
    .step::before{
      content:"";
      position:absolute; left:-22px; top:18px;
      width:14px; height:14px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--blue), var(--gold));
      box-shadow: 0 10px 18px rgba(31,107,255,.18);
    }
    .faq .accordion-button{
      border-radius: 14px !important;
      box-shadow:none !important;
    }
    .faq .accordion-item{
      border: 1px solid rgba(11,18,32,.10);
      border-radius: 16px;
      overflow:hidden;
      background: rgba(255,255,255,.82);
    }
    footer{
      padding: 28px 0;
      border-top: 1px solid rgba(11,18,32,.08);
      color: var(--muted);
    }

    /* floating icons */
    .float-wrap{position:relative; min-height: 420px;}
    .floaty{
      position:absolute;
      width: 110px; height: 110px;
      border-radius: 26px;
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(11,18,32,.10);
      box-shadow: var(--shadow2);
      display:grid; place-items:center;
      backdrop-filter: blur(10px);
      transform-style:preserve-3d;
      user-select:none;
    }
    .floaty svg{width:54px; height:54px;}
    .f1{left: 6%; top: 10%;}
    .f2{right: 8%; top: 6%;}
    .f3{left: 14%; bottom: 10%;}
    .f4{right: 12%; bottom: 10%;}

    /* Progress bar */
    .progress-wrap{
      background: rgba(31,107,255,.08);
      border: 1px solid rgba(31,107,255,.18);
      border-radius: 999px;
      padding: 6px;
    }
    .progress-barx{
      height: 10px;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--blue), var(--gold));
    }

    /* reveal helper */
    .reveal{opacity:0; transform: translateY(14px);}