:root{
      --bg-1:#0b1b34; /* deep space */
      --bg-2:#0f2748; /* darker */
      --accent:#4da3ff; /* nasa blue */
      --accent-2:#7cc4ff; /* lighter */
      --ok:#43d17a;
      --card:#0f1f3b;
      --text:#e8eef7;
      --muted:#9fb3cf;
      --border:rgba(255,255,255,.08);
      --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px var(--border);
      --radius:16px;
      --danger:#ff6b6b;
    }

    /* Reset + base */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
      color:var(--text); background: radial-gradient(1200px 800px at 80% -10%, #12325f 0%, transparent 60%),
                 radial-gradient(900px 700px at -10% 20%, #102847 0%, transparent 55%),
                 linear-gradient(180deg, var(--bg-2), var(--bg-1));
      line-height:1.6;
    }

    .stars{position:fixed; inset:0; pointer-events:none; z-index:-1;
      background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.85) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 75% 25%, rgba(255,255,255,.7) 40%, transparent 41%),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.6) 40%, transparent 41%),
        radial-gradient(2px 2px at 10% 80%, rgba(255,255,255,.8) 40%, transparent 41%),
        radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.6) 40%, transparent 41%);
      opacity:.6;
    }

    .container{max-width:1100px; margin-inline:auto; padding:24px;}

    header{position:sticky; top:0; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(12,26,50,.85), rgba(12,26,50,.55)); border-bottom:1px solid var(--border); z-index:10}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
    .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
    .brand svg{filter: drop-shadow(0 2px 8px rgba(77,163,255,.45));}
    .brand strong{font-weight:700; letter-spacing:.3px}

    nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
    nav a{color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:10px}
    nav a:hover, nav a:focus{color:var(--text); background:rgba(77,163,255,.08); outline:none}

    .menu-btn{display:none; background:none; border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:10px}

    .grid{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; align-items:center;}
    .hero{padding:48px 0 28px}
    .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(77,163,255,.12); color:var(--accent-2); font-weight:600; letter-spacing:.2px; font-size:.9rem}
    .title{font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.15; margin:12px 0 8px; font-weight:800}
    .lede{color:var(--muted); margin:0 0 22px; font-size:1.05rem}

    .cta{display:flex; gap:14px; flex-wrap:wrap}
    .btn{appearance:none; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px; padding:14px 18px; border-radius:12px; transition:.2s transform ease, .2s box-shadow ease, .2s background ease}
    .btn.primary{background: linear-gradient(180deg, var(--accent), #2c7bd8); color:#071629; box-shadow:0 10px 25px rgba(77,163,255,.35), inset 0 0 0 1px rgba(255,255,255,.28)}
    .btn.primary:hover{transform:translateY(-1px)}

    .panel{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
    .cert{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center}

    .features{margin:34px 0 18px}
    .cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
    .card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; border:1px solid var(--border)}
    .card h3{margin:4px 0 6px}
    .card p{margin:0; color:var(--muted)}

    footer{margin-top:40px; border-top:1px solid var(--border); color:var(--muted)}

    @media (max-width: 920px){ .grid{grid-template-columns:1fr} }
    @media (max-width: 640px){ nav ul{display:none} .menu-btn{display:inline-flex} .cards{grid-template-columns:1fr} }

    /* Modal base */
    .modal-backdrop{position:fixed; inset:0; background:rgba(2,10,22,.65); backdrop-filter: blur(2px); display:none; align-items:center; justify-content:center; z-index:50}
    .modal{width:min(820px, 92vw); max-height:80vh; background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); display:flex; flex-direction:column}
    .modal header{position:sticky; top:0; background:linear-gradient(180deg, rgba(16,33,66,.95), rgba(16,33,66,.85)); border-bottom:1px solid var(--border); border-top-left-radius:18px; border-top-right-radius:18px}
    .modal .modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px}
    .modal .title{font-size:1.3rem; margin:0}
    .modal .close{background:none; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:6px 10px; cursor:pointer}
    .modal .body{padding:18px; overflow:auto}

    /* Accordion FAQ */
    .accordion{display:grid; gap:10px}
    .accordion .item{border:1px solid var(--border); background:var(--card); border-radius:12px; overflow:hidden}
    .accordion button{all:unset; display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 16px; cursor:pointer}
    .accordion .q{font-weight:700}
    .accordion .chev{transition:transform .2s ease}
    .accordion .panel{padding:0 16px 14px; color:var(--muted); display:none}
    .accordion .item[aria-expanded="true"] .panel{display:block}
    .accordion .item[aria-expanded="true"] .chev{transform:rotate(180deg)}

    /* Contact form */
    form{display:grid; gap:12px}
    .field{display:grid; gap:6px}
    label{color:var(--muted); font-weight:600}
    input, select, textarea{background:#0c1d39; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:12px 12px}
    textarea{min-height:120px; resize:vertical}
    .actions{display:flex; gap:12px; align-items:center}
    .help{font-size:.9rem; color:var(--muted)}
  
    .brand { display:flex; align-items:center; gap:12px; text-decoration:none }
.brand-name { font-weight:800; font-size:1.1rem; color:#e8eef7 }