:root{
      --bg:#0b1220; --text:#eaf0ff; --muted:#a8b3d6;
      --brand:#6d5efc; --brand2:#24d6a3;
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius: 18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica;
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(109,94,252,.35), transparent 55%),
        radial-gradient(900px 500px at 90% 20%, rgba(36,214,163,.25), transparent 52%),
        linear-gradient(180deg, #070d18 0%, var(--bg) 55%, #070d18 100%);
      color:var(--text); line-height:1.4; overflow-x:hidden;
    }
    a{color:inherit}
    .container{width:min(1100px, 92vw); margin:0 auto;}

    header{
      position:sticky; top:0;
      backdrop-filter: blur(10px);
      background: rgba(7,13,24,.55);
      border-bottom: 1px solid rgba(255,255,255,.06);
      z-index:10;
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0; gap:14px;
    }
    .logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;}
    .logo-badge{
      width:34px; height:34px; border-radius:12px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: 0 10px 30px rgba(109,94,252,.35);
    }
	.color-text{color:#000;}
    nav ul{list-style:none; padding:0; margin:0; display:flex; gap:18px}
    nav a{
      text-decoration:none; color:var(--muted);
      font-weight:600; font-size:14px;
      padding:8px 10px; border-radius:12px;
      transition: .2s ease;
    }
    nav a:hover{color:var(--text); background: rgba(255,255,255,.06);}

    .cta{display:flex; gap:10px; align-items:center; justify-content:flex-end;}
    .btn{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:var(--text);
      padding:10px 14px; border-radius:14px;
      font-weight:800; cursor:pointer;
      transition:.2s ease; text-decoration:none;
      display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.24);}
    .btn-primary{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      border-color: transparent;
      box-shadow: 0 18px 50px rgba(109,94,252,.22);
    }
    .btn-primary:hover{filter: brightness(1.05);}

    .hero{padding:54px 0 28px;}
    .hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:center;}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      padding:10px 12px; border-radius:999px;
      color:var(--muted); font-weight:700; font-size:13px;
    }
    .dot{width:10px; height:10px; border-radius:50%; background: var(--brand2); box-shadow: 0 0 0 6px rgba(36,214,163,.18);}
    h1{
      margin:14px 0 12px;
      font-size: clamp(30px, 4.2vw, 52px);
      line-height:1.05; letter-spacing:-.8px;
    }
    .sub{color:var(--muted); font-size:16px; margin:0 0 18px; max-width:54ch;}
    .hero-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px;}
    .stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}
    .stat{
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      padding:12px 14px; min-width:150px;
    }
    .stat b{display:block; font-size:18px}
    .stat span{color:var(--muted); font-weight:650; font-size:13px}

    .panel{
      background: rgba(17,26,46,.72);
      border:1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:18px; position:relative; overflow:hidden;
    }
    .panel:before{
      content:""; position:absolute; inset:-2px;
      background:
        radial-gradient(600px 220px at 20% 0%, rgba(109,94,252,.35), transparent 50%),
        radial-gradient(500px 240px at 90% 10%, rgba(36,214,163,.25), transparent 55%);
      pointer-events:none; opacity:.9;
    }
    .panel > *{position:relative; z-index:1}
    .panel h3{margin:0 0 6px; font-size:18px}
    .panel p{margin:0 0 14px; color:var(--muted); font-weight:650; font-size:13px}

    .form{display:grid; gap:10px;}
    .row2{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
    label{display:grid; gap:6px; font-size:13px; color:var(--muted); font-weight:700;}
    input, select, textarea{
      width:100%; padding:12px 12px; border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06); color:var(--text); outline:none;
      font-weight:700;
    }
    input::placeholder, textarea::placeholder{color: rgba(168,179,214,.75)}
    input:focus, select:focus, textarea:focus{
      border-color: rgba(109,94,252,.55);
      box-shadow: 0 0 0 4px rgba(109,94,252,.16);
    }
    .help{font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; margin-top:4px;}
    .help .i{
      width:18px; height:18px; border-radius:6px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      display:grid; place-items:center;
      color: var(--muted); flex:0 0 auto;
      font-weight:900; font-size:12px;
    }
    .form-actions{display:flex; gap:10px; align-items:center; margin-top:4px; flex-wrap:wrap;}
    .small{color:var(--muted); font-size:12px; font-weight:650}

    .error{
      color:#ffd0d0; background: rgba(255, 80, 80, .12);
      border:1px solid rgba(255, 80, 80, .28);
      padding:10px 12px; border-radius:14px;
      display:none; font-weight:800; font-size:13px;
    }
    .success{
      color:#c9ffe9; background: rgba(36,214,163,.14);
      border:1px solid rgba(36,214,163,.30);
      padding:10px 12px; border-radius:14px;
      display:none; font-weight:900; font-size:13px;
    }

    .section{padding:26px 0}
    .section-title{
      display:flex; align-items:baseline; justify-content:space-between; gap:12px;
      margin-bottom:12px;
    }
    .section-title h2{margin:0; font-size:22px; letter-spacing:-.3px;}
    .section-title span{color:var(--muted); font-weight:700; font-size:13px}
    .cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
    .card{
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      padding:16px; min-height: 150px;
    }
    .card .icon{
      width:38px; height:38px; border-radius:14px;
      display:grid; place-items:center;
      background: rgba(109,94,252,.16);
      border:1px solid rgba(109,94,252,.25);
      margin-bottom:10px;
    }
    .card h4{margin:0 0 6px; font-size:16px}
    .card p{margin:0; color:var(--muted); font-weight:650; font-size:13px}

    footer{padding:26px 0 42px; color:var(--muted); font-weight:700; font-size:13px;}
    .footer-grid{
      display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
      border-top: 1px solid rgba(255,255,255,.08); padding-top:18px;
    }

    .modal-backdrop{
      position:fixed; inset:0; background: rgba(0,0,0,.55);
      display:none; align-items:center; justify-content:center; padding:18px; z-index:50;
    }
    .modal{
      width:min(680px, 92vw);
      background: rgba(17,26,46,.92);
      border:1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:18px; position:relative; overflow:hidden;
    }
    .modal:before{
      content:""; position:absolute; inset:-2px;
      background:
        radial-gradient(520px 240px at 0% 0%, rgba(109,94,252,.35), transparent 55%),
        radial-gradient(420px 240px at 90% 20%, rgba(36,214,163,.25), transparent 55%);
      pointer-events:none;
    }
    .modal > *{position:relative; z-index:1}
    .modal-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;}
    .modal h3{margin:0; font-size:18px}
    .x{
      width:40px; height:40px; border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:var(--text); cursor:pointer; font-size:18px; font-weight:900;
    }
    .modal p{margin:6px 0 14px; color:var(--muted); font-weight:650}
    .modal ul{margin:0; padding-left:18px; color:var(--muted); font-weight:650}
    .modal li{margin:6px 0}
    .modal-actions{margin-top:14px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

    @media (max-width: 900px){
      .hero-grid{grid-template-columns: 1fr;}
      .cards{grid-template-columns: 1fr;}
      nav ul{display:none}
      .row2{grid-template-columns: 1fr}
    }