:root{
      --bg:#0a0f1a; --panel:#0d1324; --ink:#eaf2ff; --muted:#b6c4e0;
      --brand:#2a6bff; --brand-ink:#eaf2ff; --ok:#20b26c; --warn:#f59e0b;
      --ring: rgba(42,107,255,.35); --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
    }
    *{box-sizing:border-box}
    body{margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";  color:#0b1326; line-height:1.55}
    a{color:var(--brand)}
    .wrap{max-width:1100px; margin:auto; padding:32px 20px}
    .hero{display:grid; gap:18px; text-align:center; padding:40px 0 24px}
    .title{font-size:clamp(28px,3.2vw,44px); font-weight:800; letter-spacing:.2px}
    .subtitle{font-size:clamp(16px,2vw,20px); color:var(--muted)}
    .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px}
    .btn{appearance:none; border:none; border-radius:999px; padding:14px 22px; font-weight:700; cursor:pointer; box-shadow:var(--shadow)}
    .btn.primary{background:var(--brand); color:var(--brand-ink)}
    .btn.ghost{background:transparent; color:var(--ink); outline:1px solid rgba(234,242,255,.18)}
    .panel{background:linear-gradient(180deg,#0f1730,#0b1326); border:1px solid rgba(234,242,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)}
    .stack{display:grid; gap:22px}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    @media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} }
    @media (max-width:640px){ .grid-3,.grid-2{grid-template-columns:1fr} }
    .section{margin:28px 0; max-width:100%;}
    .section h2{margin:0 0 12px; font-size:clamp(20px,2.2vw,28px)}
    .lead{color:var(--muted)}
    .kpis{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}
    .badge{background:#081226; border:1px solid rgba(234,242,255,.12); color:var(--ink); padding:10px 16px; border-radius:999px; font-weight:700}
    .features li{padding:12px 14px; background:#0c152b; border:1px solid rgba(234,242,255,.08); border-radius:12px}
    .howto-step{padding:16px; border-radius:12px; background:#0c152b; border:1px solid rgba(234,242,255,.08); display:grid; gap:10px}
    .howto-step strong{font-size:17px}
    .audience li{padding:10px 12px; background:#0c152b; border:1px solid rgba(234,242,255,.08); border-radius:12px}
    table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px}
    th,td{padding:12px 14px; border-bottom:1px solid rgba(234,242,255,.08)}
    th{background:#0f1730}
    tr:last-child td{border-bottom:none}
    .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    @media (max-width:900px){ .gallery{grid-template-columns:1fr 1fr} }
    @media (max-width:560px){ .gallery{grid-template-columns:1fr} }
    figure{margin:0; background:#0c152b; border:1px solid rgba(234,242,255,.08); border-radius:12px; overflow:hidden}
    figure img{display:block; width:100%; height:auto}
    figcaption{padding:10px 12px; font-size:14px; color:var(--muted); border-top:1px solid rgba(234,242,255,.06)}
    .faq details{background:#0c152b; border:1px solid rgba(234,242,255,.08); border-radius:12px; padding:12px 14px}
    .faq summary{cursor:pointer; font-weight:700}
    .cta-bar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; padding:22px}
    .note{font-size:14px; color:var(--muted)}
    .ring:focus{outline:3px solid var(--ring); outline-offset:2px}
    @media (max-width:900px){ .cmptbl{font-size:60%;} }
    @media (max-width:640px){ .cmptbl{font-size:60%;} }
    @media (max-width:560px){ .cmptbl{font-size:60%;} }