/* ---------- base ---------- */
:root{
    --bg: #070a14;
    --bg2:#0b1020;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.10);
    --text:#e8eefc;
    --muted: rgba(232,238,252,.72);
    --muted2: rgba(232,238,252,.55);
    --border: rgba(232,238,252,.12);
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --radius: 18px;
  
    --accent1:#7c5cff;
    --accent2:#28d7ff;
    --accent3:#22ff88;
  
    --max: 1120px;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
      radial-gradient(900px 500px at 80% 0%, rgba(40,215,255,.18), transparent 55%),
      radial-gradient(900px 700px at 60% 120%, rgba(34,255,136,.10), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg2));
  }
  
  a{ color:inherit; text-decoration:none; }
  a:hover{ text-decoration:underline; text-underline-offset: 3px; }
  
  .container{
    width:min(var(--max), calc(100% - 40px));
    margin:0 auto;
  }
  
  .skip-link{
    position:absolute; left:-999px; top:auto;
    width:1px; height:1px; overflow:hidden;
  }
  .skip-link:focus{
    left:12px; top:12px; width:auto; height:auto;
    background:var(--bg2);
    border:1px solid var(--border);
    padding:10px 12px;
    border-radius:12px;
    z-index: 9999;
  }
  
  /* ---------- header ---------- */
  .site-header{
    position: sticky;
    top:0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: rgba(7,10,20,.55);
    border-bottom:1px solid var(--border);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
  }
  .brand{
    display:flex; gap:10px; align-items:center;
    font-weight: 700;
    letter-spacing:.2px;
  }
  .brand-mark{
    width:32px; height:32px;
    display:grid; place-items:center;
    border-radius:12px;
    background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(40,215,255,.25));
    border:1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .brand-text{ font-size: 16px; }
  
  .nav{ display:flex; align-items:center; gap:14px; }
  .nav-links{ display:flex; align-items:center; gap:18px; }
  .nav-links a{
    color: var(--muted);
    font-weight:600;
    font-size: 14px;
  }
  .nav-links a:hover{ color: var(--text); text-decoration:none; }
  .nav-toggle{
    display:none;
    background:transparent;
    border:1px solid var(--border);
    border-radius:12px;
    width:44px; height:44px;
    color:var(--text);
  }
  .hamburger{
    display:block;
    width:18px; height:2px;
    background: var(--text);
    margin:0 auto;
    position:relative;
  }
  .hamburger::before, .hamburger::after{
    content:"";
    position:absolute; left:0;
    width:18px; height:2px;
    background: var(--text);
  }
  .hamburger::before{ top:-6px; }
  .hamburger::after{ top:6px; }
  
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }
  
  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 16px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(40,215,255,.85));
    color:#091024;
    font-weight: 800;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    text-decoration:none !important;
  }
  .btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
  .btn:active{ transform: translateY(0px); }
  .btn-small{ padding:10px 12px; border-radius: 12px; font-size: 14px; }
  
  .btn-ghost{
    background: transparent;
    color: var(--text);
    border:1px solid var(--border);
    box-shadow: none;
  }
  .btn-ghost:hover{ background: rgba(255,255,255,.05); }
  
  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding: 70px 0 42px;
  }
  .hero-inner{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 34px;
    align-items: start;
  }
  .pill{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding: 8px 12px;
    border-radius: 999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-weight: 650;
    font-size: 13px;
  }
  h1{
    margin: 14px 0 10px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.8px;
  }
  .grad-text{
    background: linear-gradient(90deg, var(--accent2), var(--accent1), var(--accent3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .lead{
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
    margin: 12px 0 20px;
  }
  .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
  
  .hero-metrics{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
  }
  .metric{
    border:1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    padding: 12px 12px;
  }
  .metric-big{
    font-weight: 800;
    font-size: 14px;
  }
  .metric-small{
    color: var(--muted2);
    font-size: 12px;
    margin-top: 4px;
  }
  
  .hero-card .card{
    border-radius: var(--radius);
    border:1px solid var(--border);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .glass{
    backdrop-filter: blur(14px);
  }
  .card-top{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 12px 14px;
    border-bottom:1px solid var(--border);
    background: rgba(255,255,255,.03);
  }
  .dot{
    width:10px; height:10px;
    border-radius: 999px;
    opacity:.9;
  }
  .dot-r{ background: #ff5c7a; }
  .dot-y{ background: #ffcc33; }
  .dot-g{ background: #23f7a6; }
  .card-title{
    margin-left: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
  }
  .card-body{ padding: 14px; }
  .heatmap{
    width:100%;
    height: 220px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(120px 120px at 30% 40%, rgba(40,215,255,.45), transparent 65%),
      radial-gradient(160px 160px at 65% 55%, rgba(124,92,255,.55), transparent 70%),
      radial-gradient(120px 120px at 60% 25%, rgba(34,255,136,.28), transparent 70%),
      linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    position:relative;
    overflow:hidden;
  }
  .heatmap::after{
    content:"";
    position:absolute; inset:-40%;
    background: conic-gradient(from 180deg, rgba(40,215,255,.0), rgba(40,215,255,.12), rgba(124,92,255,.10), rgba(34,255,136,.06), rgba(40,215,255,.0));
    animation: spin 12s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  
  .card-caption{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .tag{
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
  }
  .note{
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    border:1px solid var(--border);
    border-radius: 16px;
    padding: 12px 12px;
    background: rgba(255,255,255,.03);
  }
  
  .hero-bg{
    position:absolute;
    inset:auto 0 -140px 0;
    height: 220px;
    background: radial-gradient(700px 160px at 50% 0%, rgba(124,92,255,.20), transparent 70%);
    pointer-events:none;
  }
  
  /* ---------- sections ---------- */
  .section{
    padding: 64px 0;
  }
  .section.alt{
    background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .section-head{
    max-width: 760px;
    margin-bottom: 26px;
  }
  .section-head h2{
    margin:0 0 10px;
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -.5px;
  }
  .section-head p{
    margin:0;
    color: var(--muted);
    line-height: 1.6;
  }
  
  /* grids */
  .grid-3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .grid-2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  
  .feature, .panel{
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    padding: 18px;
  }
  .feature h3, .panel h3{
    margin: 0 0 8px;
    font-size: 16px;
    letter-spacing: -.2px;
  }
  .feature p, .panel p{
    margin:0;
    color: var(--muted);
    line-height: 1.6;
  }
  
  .bullets{
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--muted);
  }
  .bullets li{ margin: 6px 0; }
  
  /* steps */
  .steps{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap: 12px;
  }
  .step{
    display:flex;
    gap: 14px;
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    padding: 18px;
  }
  .step-num{
    width:38px; height:38px;
    border-radius: 14px;
    display:grid; place-items:center;
    font-weight: 900;
    color:#091024;
    background: linear-gradient(135deg, rgba(40,215,255,.90), rgba(124,92,255,.90));
    border:1px solid rgba(255,255,255,.14);
  }
  .step-body h3{ margin:0 0 6px; }
  .step-body p{ margin:0; color: var(--muted); line-height: 1.6; }
  
  /* CTA box */
  .cta-box{
    margin-top: 20px;
    border:1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 14px;
    background:
      radial-gradient(400px 220px at 20% 0%, rgba(40,215,255,.18), transparent 60%),
      radial-gradient(360px 220px at 90% 30%, rgba(124,92,255,.22), transparent 60%),
      rgba(255,255,255,.03);
  }
  .cta-box p{ margin:6px 0 0; color: var(--muted); }
  
  /* strip */
  .strip{
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
  }
  .strip-text{
    margin:0;
    color: var(--muted);
    font-weight: 650;
    font-size: 14px;
  }
  
  /* contact */
  .contact-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 14px;
    align-items:start;
  }
  .form{
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    padding: 18px;
  }
  label{
    display:block;
    margin: 0 0 12px;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
  }
  input, textarea{
    width:100%;
    margin-top: 6px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(7,10,20,.35);
    color: var(--text);
    padding: 12px 12px;
    outline:none;
  }
  input:focus, textarea:focus{
    border-color: rgba(40,215,255,.45);
    box-shadow: 0 0 0 3px rgba(40,215,255,.12);
  }
  .form-hint{
    margin: 10px 0 0;
    color: var(--muted2);
    font-size: 12px;
    line-height: 1.5;
  }
  .form-status{
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 700;
    min-height: 1.2em;
  }
  
  .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
  .muted{ color: var(--muted2); }
  
  /* footer */
  .footer{
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    color: var(--muted2);
    font-size: 13px;
  }
  .footer-left{ display:flex; align-items:center; gap:10px; }
  
  /* ---------- reveal animation ---------- */
  .reveal{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ---------- responsive ---------- */
  @media (max-width: 920px){
    .hero-inner{ grid-template-columns: 1fr; }
    .hero{ padding-top: 56px; }
    .contact-grid{ grid-template-columns: 1fr; }
    .grid-3{ grid-template-columns: 1fr; }
    .grid-2{ grid-template-columns: 1fr; }
    .hero-metrics{ grid-template-columns: 1fr; }
    .cta-box{ flex-direction: column; align-items: stretch; }
  }
  
  @media (max-width: 720px){
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
    .nav-links{
      position:absolute;
      right: 20px;
      top: 66px;
      width: min(320px, calc(100vw - 40px));
      display:none;
      flex-direction:column;
      align-items:stretch;
      gap: 10px;
      padding: 12px;
      border-radius: 18px;
      border:1px solid var(--border);
      background: rgba(7,10,20,.92);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
    }
    .nav-links a{ padding: 10px 10px; border-radius: 14px; }
    .nav-links a:hover{ background: rgba(255,255,255,.05); }
    .nav-links.open{ display:flex; }
  }