:root{
    --bg:#0b1421;          
    --ink:#0d1b2a;         
    --muted:#6b778b;
    --line:#e6eef6;
    --white:#ffffff;
    --brand:#2a84ff;
    --mint:#16c6b3;
    --good:#10b981;
    --danger:#ef4444;
    --r:12px; --r2:16px;
    --shadow:0 12px 28px rgba(25,80,140,.16);
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:"Plus Jakarta Sans",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.6; color:var(--ink); background:#f7fbff}
  
  /* ===== Containers ===== */
  .container{max-width:1200px; margin:0 auto; padding:0 18px}
  
  /* ===== Nav ===== */
  .nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800}
  .dot{width:28px; height:28px; border-radius:10px; background:conic-gradient(from 200deg,var(--brand),var(--mint),#8ad6ff,var(--brand)); box-shadow:0 0 12px rgba(42,132,255,.3)}
  .nav-actions .btn{margin-left:8px}
  
  /* ===== Buttons & Inputs ===== */
  .btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-weight:700; transition:box-shadow .2s, transform .05s}
  .btn:active{transform:translateY(1px)}
  .btn.primary{border:0; color:#fff; background:linear-gradient(135deg,var(--brand),var(--mint)); box-shadow:0 8px 20px rgba(42,132,255,.25)}
  .input{width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fbfdff; font-size:1rem}
  .input:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(42,132,255,.22)}
  .pw{position:relative}
  .pw .eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); height:32px; width:32px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer}
  
  /* ===== Hero ===== */
  .hero{background:linear-gradient(180deg,#0b1320,#0d2034 60%, #0b1b2a); color:#eaf3ff; padding:64px 0 72px}
  .hero h1{font-size:clamp(28px,5vw,52px); line-height:1.08; margin:.2em 0}
  .hero h2{font-weight:600; opacity:.9; margin:.2em 0 8px}
  .hero .sub{opacity:.8; margin-bottom:18px}
  .hero-media{margin-top:18px; border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:14px; text-align:center; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  
  /* ===== Features ===== */
  .features{padding:70px 0}
  .features h2{margin:0 0 14px}
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
  .card h3{margin:0 0 6px}
  
  /* ===== Footer ===== */
  .footer{padding:40px 0 64px; color:var(--muted); border-top:1px solid var(--line); text-align:center}
  
  /* ===== Modals ===== */
  .modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.46); display:none; align-items:center; justify-content:center; padding:18px}
  .modal-backdrop.open{display:flex}
  .modal{width:min(520px,100%); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 80px rgba(10,30,60,.28); padding:0; overflow:hidden}
  .modal header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,#eef6ff,#f5fffb)}
  .modal .close{all:unset; cursor:pointer; font-size:20px; line-height:1; padding:4px 8px; border-radius:8px}
  .form{padding:16px}
  .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px}
  .alert{display:none; margin-bottom:10px; padding:10px 12px; border-radius:10px; font-weight:600}
  .alert.success{display:block; background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46}
  .alert.error{display:block; background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d}
  
  /* ===== Responsive ===== */
  @media(max-width:900px){ .grid{grid-template-columns:1fr} }