:root{
      --bg: #0f172a;          /* slate-900 */
      --panel: #111827;       /* gray-900 */
      --muted: #94a3b8;       /* slate-400 */
      --text: #e5e7eb;        /* gray-200 */
      --brand: #22d3ee;       /* cyan-400 */
      --brand-2: #38bdf8;     /* sky-400 */
      --ok: #22c55e;          /* green-500 */
      --warn: #f97316;        /* orange-500 */
      --danger: #ef4444;      /* red-500 */
      --ring: rgba(56, 189, 248, .45);
      --shadow: 0 10px 25px rgba(0,0,0,.35);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 80% -20%, rgba(56,189,248,.15), transparent),
                  radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,.12), transparent),
                  var(--bg);
      color:var(--text);
    }

    /* Header */
    header{
      position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.6));
      border-bottom: 1px solid rgba(148,163,184,.15);
    }
    .container{max-width:1100px; margin:0 auto; padding:0 16px}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
    .brand .logo{width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow)}
    .brand .name{font-size:18px}
    nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
    nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600; opacity:.9}
    nav a:hover{background:rgba(148,163,184,.12)}
    .menu-btn{display:none; background:transparent; border:1px solid rgba(148,163,184,.25); color:var(--text); border-radius:10px; padding:8px 10px}

    /* Hero */
    .hero{padding:72px 0 40px}
    .hero .wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:center}
    .headline{font-size:38px; line-height:1.1; font-weight:900; margin:0 0 12px}
    .sub{color:var(--muted); margin:0 0 24px}
    .cta{display:flex; gap:12px; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;
      padding:12px 16px; border-radius:12px; font-weight:700; letter-spacing:.2px;
      color:#071520; background:linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: 0 6px 18px rgba(56,189,248,.35);
    }
    .btn.secondary{background:#0b1222; color:var(--text); border:1px solid rgba(148,163,184,.2)}
    .hero-card{
      background:linear-gradient(180deg, rgba(148,163,184,.09), rgba(148,163,184,.04));
      border:1px solid rgba(148,163,184,.12); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
    }
    .metrics{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:14px}
    .metric{background:rgba(2,6,23,.6); border:1px solid rgba(148,163,184,.12); border-radius:14px; padding:12px; text-align:center}
    .metric .kpi{font-size:22px; font-weight:900; color:var(--brand)}

    /* Sections */
    section{padding:56px 0}
    h2{font-size:28px; margin:0 0 18px}
    p.lead{color:var(--muted)}

    .grid{display:grid; gap:16px}
    .grid.cols-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
    .grid.cols-2{grid-template-columns: repeat(2, minmax(0, 1fr))}

    .card{background:rgba(2,6,23,.6); border:1px solid rgba(148,163,184,.12); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .card h3{margin:0 0 8px}
    .badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; color:#0b1222; background:linear-gradient(135deg, var(--brand), var(--brand-2)); font-weight:800}
    .muted{color:var(--muted)}

    /* Contact */
    form{display:grid; gap:12px}
    .field{display:grid; gap:6px}
    .field label{font-size:14px; color:var(--muted)}
    .input, textarea{background:#0b1222; border:1px solid rgba(148,163,184,.25); color:var(--text); border-radius:12px; padding:12px}
    .input:focus, textarea:focus{outline:none; border-color:var(--brand-2); box-shadow:0 0 0 4px var(--ring)}
    textarea{min-height:110px}

    /* Footer */
    footer{padding:28px 0; color:var(--muted); border-top:1px solid rgba(148,163,184,.12)}
    .social{display:flex; gap:12px}
    .social a{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; border:1px solid rgba(148,163,184,.2); color:var(--text); text-decoration:none}
    .social a:hover{border-color:var(--brand-2)}

    /* Utilities */
    .row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
    .hint{font-size:12px; color:var(--muted)}

    /* Responsive */
    @media (max-width: 900px){
      .hero .wrap{grid-template-columns: 1fr}
    }
    @media (max-width: 720px){
      .grid.cols-3{grid-template-columns:1fr}
      .grid.cols-2{grid-template-columns:1fr}
      nav ul{display:none}
      .menu-btn{display:inline-flex}
      nav.open ul{display:flex; flex-direction:column; background:#0b1222; position:absolute; left:16px; right:16px; top:56px; padding:12px; border:1px solid rgba(148,163,184,.2); border-radius:12px}
    }