:root{
      --bg:#0a0c12; --panel:#0f1420; --soft:#0b111c; --border:#1a243a;
      --text:#eaf2ff; --muted:#9fb2cd; --glass:rgba(15,22,38,.7);
      --a1:#00e5a8; --a2:#6ca8ff; --a3:#ff6ec7; --red:#ff5a7a;
    }
    *{box-sizing:border-box; margin:0}
    html,body{background:var(--bg); color:var(--text); font-family:Inter, system-ui, sans-serif; line-height:1.6; overflow-x:hidden}
    .container{max-width:1160px; margin:0 auto; padding:0 20px}
    a{color:#cfe5ff; text-decoration:none}

    /* BG */
    .bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
    .orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.48; mix-blend-mode:screen; animation:float 14s ease-in-out infinite}
    .orb--a{width:760px; height:760px; background:radial-gradient(circle at 40% 40%, rgba(0,229,168,.55), transparent 60%); left:-180px; top:-240px}
    .orb--b{width:880px; height:880px; background:radial-gradient(circle at 60% 60%, rgba(108,168,255,.55), transparent 60%); right:-220px; bottom:-260px}
    .gridbg{position:absolute; inset:0; background:
      radial-gradient(800px 400px at 20% -10%, rgba(108,168,255,.12), transparent 60%),
      radial-gradient(800px 400px at 80% 110%, rgba(0,229,168,.12), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
    }
    @keyframes float{50%{transform:translateY(-12px) scale(1.02)}}

    /* Header */
    .site{position:sticky; top:0; background:rgba(10,12,18,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06); z-index:40}
    .site__row{display:flex; align-items:center; justify-content:space-between; min-height:72px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.5rem}
    .logo{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, var(--a2), var(--a1)); color:#05251b; box-shadow:0 0 18px rgba(0,229,168,.5); font-weight:900}
    .nav{display:flex; gap:14px}
    .nav a{padding:8px 16px; border-radius:999px; border:1px solid transparent; position:relative; overflow:hidden}
    .nav a:hover{background:rgba(255,255,255,.06); border-color:#223049; transform:translateY(-2px)}
    .nav__cta{background:linear-gradient(135deg,#0e1c16,#143a28); border:1px solid #1e4631; color:#b6f3d2; box-shadow:0 0 15px rgba(0,229,168,.3)}

    /* Hero */
    .hero{padding:110px 0 60px}
    .hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:34px; align-items:center}
    .h1{font:900 58px/1.06 Inter; margin:8px 0 14px; background:linear-gradient(135deg,#eaf2ff,#9fb2cd); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 20px rgba(108,168,255,.3)}
    .lead{color:#b7c7e2; font-size:18px}
    .lead.big{font-size:20px}
    .value{margin:18px 0 0; padding:0}
    .value li{list-style:none; margin:10px 0; padding-left:28px; position:relative}
    .value li:before{content:"✓"; position:absolute; left:0; color:var(--a1); font-weight:900}
    .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
    .pill{display:inline-flex; align-items:center; gap:8px; border:1px solid #1e4631; background:linear-gradient(135deg, rgba(0,229,168,.12), rgba(108,168,255,.10)); color:#bff5de; padding:10px 14px; border-radius:12px; font-size:14px; font-weight:700; box-shadow:0 0 20px rgba(0,229,168,.15)}
    .pill i{font-style:normal; font-weight:900}

    /* Hero Visu */
    .hero__visu .panel{background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.4); padding:14px; position:relative; overflow:hidden}
    .chart-svg{width:100%; height:320px; display:block}
    .legend{display:flex; justify-content:space-between; gap:10px; margin-top:12px}
    .legend .tag{font-weight:700; padding:8px 12px; border-radius:999px; border:1px solid transparent; font-size:13px}
    .tag--pos{background:rgba(14,28,22,.7); border-color:#1e4631; color:#b6f3d2; box-shadow:0 0 20px rgba(0,229,168,.25)}
    .tag--neg{background:rgba(29,13,20,.7); border-color:#4b1e2a; color:#ffb3bf; box-shadow:0 0 20px rgba(255,90,122,.2)}

    /* Sections */
    .section{padding:84px 0; position:relative}
    .section.alt{background:#0a0f19; border-top:1px solid #141c22; border-bottom:1px solid #141c22}
    .h2{font:900 42px/1.08 Inter; margin:0 0 18px; text-align:center; background:linear-gradient(135deg,#eaf2ff,#9fb2cd); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
    .muted{color:#9fb2cd; text-align:center; max-width:820px; margin:0 auto 32px}

    /* Cards & green outline variant */
    .grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
    .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
    .card{background:var(--glass); border:1px solid var(--border); border-radius:16px; padding:24px; backdrop-filter:blur(8px); transition:.3s all; position:relative; overflow:hidden}
    .card:hover{transform:translateY(-5px); box-shadow:0 0 30px 4px rgba(108,168,255,.25)}
    .card--green{border-color:#1e4631; box-shadow:0 0 0 1px rgba(0,229,168,.18) inset, 0 0 24px rgba(0,229,168,.08)}
    .card--green:before{content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; background:linear-gradient(135deg, rgba(0,229,168,.35), rgba(108,168,255,.25)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude}

    .eyebrow{font:800 13px/1 Inter; letter-spacing:.08em; text-transform:uppercase; color:#86a8ff; margin-bottom:10px}
    .h3{font:800 22px/1.2 Inter; margin:0 0 10px}
    .list{margin:8px 0 0; padding:0}
    .list li{list-style:none; margin:10px 0; padding-left:0; position:relative}
    .list li:before{content:"•"; color:var(--a2); font-weight:900; display:inline-block; width:1em; margin-left:-1em; text-shadow:0 0 8px var(--a2)}

    /* Chips & Stars */
    .status-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
    .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); font-weight:700}
    .chip--enter{background:linear-gradient(135deg, rgba(0,229,168,.12), rgba(108,168,255,.12)); border-color:#1e4631; color:#b6f3d2; box-shadow:0 0 12px rgba(0,229,168,.2)}
    .chip--watch{background:rgba(255,255,255,.05); color:#cfe5ff}
    .chip--risky{background:rgba(255,140,0,.08); border-color:#5a3e15; color:#ffd6a1}
    .chip--spec{background:rgba(108,168,255,.08); border-color:#213257; color:#cfe3ff}
    .chip--nogo{background:rgba(255,90,122,.12); border-color:#4b1e2a; color:#ffb3bf}
    .stars{display:inline-flex; gap:4px}
    .stars i{width:14px; height:14px; border-radius:3px; background:linear-gradient(135deg, var(--a2), var(--a1)); box-shadow:0 0 12px rgba(108,168,255,.4); opacity:.28}
    .stars i.on{opacity:1}

    /* Value-justify band */
    .value-justify{background:var(--glass); border:1px solid var(--border); border-radius:16px; padding:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .vj-col{border:1px dashed #203c30; border-radius:12px; padding:18px; background:linear-gradient(180deg, rgba(0,229,168,.06), rgba(108,168,255,.04))}
    .vj-col h4{margin-bottom:6px; font-weight:900}
    .vj-col p{color:var(--muted)}
    .vj-col ul{margin:10px 0 0; padding-left:18px}
    .vj-col li{margin:6px 0}

    /* Preview */
    .preview-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center}
    .preview-img{background:#fff; border-radius:12px; overflow:hidden; min-height:280px; border:1px solid var(--border); box-shadow:0 8px 26px rgba(0,0,0,.35)}
    .preview-img img{width:100%; height:100%; object-fit:cover}
    .preview-tag{display:inline-block; background:linear-gradient(135deg,var(--a2),var(--a1)); color:#04131b; padding:6px 10px; border-radius:6px; font-weight:800; font-size:13px; margin-bottom:10px}
    .ticklist{list-style:none; padding:0; margin-top:10px}
    .ticklist li{position:relative; padding-left:26px; margin:8px 0}
    .ticklist li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--a1); font-weight:900}

    /* Pricing — refined */
    .pricing{background:linear-gradient(180deg,#0a0f19,#0c1322)}
    .price__wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:30px; align-items:start}
    .pricecard{background:linear-gradient(180deg, rgba(15,22,38,.92), rgba(11,18,32,.96)); border:1px solid #213257; border-radius:20px; padding:36px; text-align:center; box-shadow:0 15px 40px rgba(0,0,0,.4), 0 0 40px rgba(108,168,255,.18); position:relative; overflow:hidden}
    .pricecard:before{content:""; position:absolute; top:-50%; left:-50%; width:80%; height:200%; transform:rotate(45deg); background:linear-gradient(90deg, rgba(108,168,255,.08), rgba(0,229,168,.08)); animation:shine 5s linear infinite}
    @keyframes shine{0%{left:-60%} 100%{left:140%}}
    .pricecard .tag{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#0e1c16,#143a28); border:1px solid #1e4631; color:#b6f3d2; border-radius:999px; padding:10px 18px; font-weight:900; margin-bottom:14px; font-size:14px; box-shadow:0 0 15px rgba(0,229,168,.3)}
    .price{font:900 60px/1 Inter; margin:10px 0; background:linear-gradient(135deg,#eaf2ff,#9fb2cd); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 20px rgba(108,168,255,.3)}
    .price-sub{color:#9fb2cd; margin-bottom:24px}
    .bullets{list-style:none; margin:20px 0 30px; padding:0; color:#cfe5ff; text-align:left}
    .bullets li{margin:16px 0; padding-left:36px; position:relative; font-size:16px}
    .bullets li:before{content:"✓"; position:absolute; left:0; color:var(--a1); font-weight:900; width:22px; height:22px; background:rgba(0,229,168,.14); border-radius:50%; display:flex; align-items:center; justify-content:center}
    .trust{color:#b0c3e0; margin-top:14px; font-size:14px}
    .sidecard{background:var(--glass); border:1px solid var(--border); border-radius:16px; padding:26px}
    .sidecard h4{margin-bottom:10px}
    .kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px}
    .kpi{background:rgba(255,255,255,.04); border:1px solid #223049; border-radius:10px; padding:10px; text-align:center}
    .kpi b{display:block; font-size:22px}

    .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #263042; border-radius:14px; padding:16px 24px; font-weight:900; letter-spacing:.02em; box-shadow:0 8px 30px rgba(0,0,0,.25); position:relative; overflow:hidden; cursor:pointer}
    .btn--primary{background:linear-gradient(135deg,#1f2937,#0f172a); color:#e8f0ff}
    .btn--primary:hover{transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 20px rgba(0,229,168,.3)}
    .btn--xl{padding:18px 32px; font-size:18px}
    .btn--xxl{padding:22px 40px; font-size:20px; width:100%; margin-top:8px}

    /* Footer */
    .footer{border-top:1px solid #141c22; background:#0a0f19; padding:36px 0}
    .footer__row{display:flex; align-items:center; justify-content:space-between; gap:20px}
    .links{display:flex; gap:16px}
    .copy{color:#9fb2cd; font-size:14px}

    /* Responsive */
    @media (max-width:1100px){ .hero__grid{grid-template-columns:1fr} .grid2,.grid3,.preview-grid{grid-template-columns:1fr 1fr} .price__wrap{grid-template-columns:1fr} }
    @media (max-width:768px){ .h1{font-size:42px} .h2{font-size:32px} .nav{display:none} .grid2,.grid3,.preview-grid{grid-template-columns:1fr} .footer__row{flex-direction:column; text-align:center} }