:root{
    --bg-deep: #050b1e;
    --bg-navy: #0a1230;
    --bg-navy-2: #0d1840;
    --bg-navy-3: #101f52;
    --panel: rgba(255,255,255,0.045);
    --panel-border: rgba(255,255,255,0.09);
    --cyan: #21e6ff;
    --cyan-soft: #7cf3ff;
    --blue: #3d6bff;
    --text-hi: #eef4ff;
    --text-mid: #aab8e0;
    --text-low: #6f7dab;
    --bs-body-bg: var(--bg-deep);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', sans-serif;
    background:var(--bg-deep);
    color:var(--text-hi);
    overflow-x:hidden;
  }
  h1,h2,h3,h4,h5{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }
  a{ text-decoration:none; }
  img{ max-width:100%; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before, .eyebrow::after{ content:""; width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--cyan)); }
  .eyebrow::after{ background:linear-gradient(90deg, var(--cyan), transparent); }
  .eyebrow.center{ justify-content:center; }
  .section-head{ max-width:640px; }
  .section-head.mx-auto{ text-align:center; }
  .section-head h2{ font-size:clamp(28px, 3.6vw, 40px); }
  .section-head p{ color:var(--text-mid); margin-top:14px; font-size:16px; }

  .scan-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(33,230,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(33,230,255,0.05) 1px, transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, black 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, black 10%, transparent 75%);
    pointer-events:none;
  }

  /* ---------- buttons ---------- */
  .btn-cyan{
    background:linear-gradient(135deg, var(--cyan), var(--blue));
    color:#031120; font-weight:600; border:none; border-radius:100px;
    padding:12px 26px; box-shadow:0 8px 24px -8px rgba(33,230,255,0.5);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-cyan:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(33,230,255,.65); color:#031120; }
  .btn-outline-cyan{
    background:transparent; color:var(--text-hi); border:1px solid var(--panel-border);
    border-radius:100px; padding:12px 26px; font-weight:600; transition:background .2s;
  }
  .btn-outline-cyan:hover{ background:rgba(255,255,255,0.06); color:var(--text-hi); }

  /* ---------- navbar ---------- */
  .navbar{
    background:rgba(5,11,30,0.75);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding-top:16px; padding-bottom:16px;
  }
  .navbar-brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:20px; color:var(--text-hi); }
  .navbar-brand span{ color:var(--cyan); }
  .navbar-nav .nav-link{ color:var(--text-mid) !important; font-weight:500; font-size:14.5px; margin:0 14px; }
  .navbar-nav .nav-link:hover{ color:var(--text-hi) !important; }
  .navbar-toggler{ border-color:var(--panel-border); }
  .navbar-toggler-icon{ filter:invert(1); }

  /* ---------- hero ---------- */
  .hero{
    position:relative; padding:110px 0 100px; overflow:hidden;
    background:
      radial-gradient(ellipse 60% 50% at 85% -5%, rgba(61,107,255,0.35), transparent 60%),
      radial-gradient(ellipse 50% 40% at 0% 10%, rgba(33,230,255,0.12), transparent 60%),
      linear-gradient(180deg, var(--bg-deep), var(--bg-navy) 60%, var(--bg-navy-2));
  }
  .badge-live{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono'; font-size:12px; letter-spacing:0.08em;
    color:var(--cyan-soft); background:rgba(33,230,255,0.08);
    border:1px solid rgba(33,230,255,0.25); padding:6px 14px; border-radius:100px;
    margin-bottom:22px;
  }
  .badge-live .dot{ width:7px; height:7px; border-radius:50%; background:#3dffb0; box-shadow:0 0 8px #3dffb0; animation:pulse-dot 1.8s infinite; }
  @keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
  .hero h1{ font-size:clamp(34px, 4.6vw, 54px); line-height:1.08; }
  .hero h1 em{ font-style:normal; background:linear-gradient(120deg, var(--cyan), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lead{ color:var(--text-mid); font-size:17px; max-width:480px; }
  .hero-stats strong{ display:block; font-family:'Space Grotesk'; font-size:22px; color:var(--text-hi); }
  .hero-stats span{ font-size:12px; color:var(--text-low); text-transform:uppercase; letter-spacing:.05em; }

  .radar-wrap{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; }
  .radar{ position:absolute; width:420px; height:420px; border-radius:50%; border:1px solid rgba(33,230,255,0.15); max-width:90%; aspect-ratio:1/1;}
  .radar::before, .radar::after{ content:""; position:absolute; inset:60px; border-radius:50%; border:1px solid rgba(33,230,255,0.12); }
  .radar::after{ inset:130px; }
  .radar-sweep{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 0deg, rgba(33,230,255,0.35), transparent 30%);
    animation:spin 4.5s linear infinite;
    -webkit-mask-image: radial-gradient(circle, transparent 0, black 1px);
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .device-card{
    position:relative; z-index:2; width:300px; max-width:80vw;
    background:linear-gradient(160deg, rgba(15,26,64,0.9), rgba(9,16,42,0.9));
    border:1px solid var(--panel-border); border-radius:20px; padding:26px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);
  }
  .device-card h4{ font-size:17px; margin-bottom:6px; }
  .device-card p{ font-size:13px; color:var(--text-low); margin-bottom:18px; }
  .scan-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid rgba(255,255,255,0.06); font-size:12.5px; color:var(--text-mid); }
  .scan-row:first-of-type{ border-top:none; }
  .tag{ font-family:'JetBrains Mono'; font-size:10.5px; padding:3px 8px; border-radius:6px; }
  .tag.clean{ background:rgba(61,255,176,0.12); color:#3dffb0; }
  .tag.blocked{ background:rgba(255,90,90,0.12); color:#ff8080; }
  .float-chip{
    position:absolute; display:flex; align-items:center; gap:8px;
    background:rgba(10,18,48,0.9); border:1px solid var(--panel-border);
    padding:10px 14px; border-radius:12px; font-size:12.5px; font-weight:600;
    box-shadow:0 14px 28px -12px rgba(0,0,0,0.6);
    animation:float 5s ease-in-out infinite;
  }
  .float-chip.a{ top:6%; left:0%; animation-delay:0s; }
  .float-chip.b{ bottom:10%; right:0%; animation-delay:1.2s; }
  .float-chip svg{ width:16px; height:16px; }
  @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

  /* ---------- benefits (formerly partners) ---------- */
  .benefits-section{ padding:64px 0; background:var(--bg-navy-2); border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); }
  .benefit-tile{
    height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; padding:24px 14px;
    transition:border-color .2s, color .2s, background .2s;
  }
  .benefit-tile:hover{ border-color:rgba(33,230,255,0.4); background:rgba(33,230,255,0.05); }
  .benefit-tile svg{ width:26px; height:26px; color:var(--cyan-soft); }
  .benefit-tile span{ font-size:13px; line-height:1.35; color:var(--text-mid); font-weight:600; }

  /* ---------- about ---------- */
  .about{ padding:110px 0; position:relative; }
  .about-copy p{ color:var(--text-mid); }
  .check-list{ list-style:none; padding:0; margin:0 0 30px; display:grid; gap:16px; }
  .check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; }
  .check-list .tick{
    width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-top:2px;
    background:linear-gradient(135deg, var(--cyan), var(--blue));
    display:flex; align-items:center; justify-content:center;
  }
  .check-list .tick svg{ width:12px; height:12px; }
  .check-list .sub{ display:block; color:var(--text-low); font-size:13.5px; font-weight:400; margin-top:2px; }
  .about-img{ border-radius:24px; border:1px solid var(--panel-border); box-shadow:0 30px 60px -30px rgba(0,0,0,0.7); }

  /* ---------- features ---------- */
  .features{ position:relative; padding:110px 0 0; background:linear-gradient(180deg, var(--bg-navy-2), var(--bg-navy-3) 55%, var(--bg-deep)); }
  .feature-card{
    height:100%; background:var(--panel); border:1px solid var(--panel-border); border-radius:18px;
    padding:30px 26px; transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .feature-card:hover{ transform:translateY(-6px); border-color:rgba(33,230,255,0.35); background:rgba(33,230,255,0.05); }
  .feature-icon{
    width:52px; height:52px; border-radius:14px; margin-bottom:20px;
    background:linear-gradient(135deg, rgba(33,230,255,0.18), rgba(61,107,255,0.18));
    border:1px solid rgba(33,230,255,0.25);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-icon svg{ width:26px; height:26px; color:var(--cyan-soft); }
  .feature-card h4{ font-size:17.5px; margin-bottom:10px; }
  .feature-card p{ font-size:14px; color:var(--text-low); margin:0; }

  .stat-strip{ margin-top:80px; background: #050b1e; border-top:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(255,255,255,0.07); padding:48px 0; }
  .stat-strip strong{ display:block; font-family:'Space Grotesk'; font-size:clamp(22px, 2.6vw, 30px); background:linear-gradient(120deg, var(--cyan), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat-strip span{ font-size:12.5px; color:var(--text-low); text-transform:uppercase; letter-spacing:.06em; }

  .cta-banner{ padding:90px 0; text-align:center; }
  .cta-inner{
    max-width:760px; margin:0 auto; background:linear-gradient(160deg, var(--bg-navy-3), var(--bg-navy));
    border:1px solid var(--panel-border); border-radius:28px; padding:56px 40px; position:relative; overflow:hidden;
  }
  .cta-inner::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:220px; background:radial-gradient(ellipse at center, rgba(33,230,255,0.25), transparent 70%); }
  .cta-inner h2{ position:relative; font-size:clamp(24px, 3vw, 32px); margin-bottom:14px; }
  .cta-inner p{ position:relative; color:var(--text-mid); margin-bottom:30px; }

  /* ---------- FAQ ---------- */
  .faq{ padding:110px 0; }
  .faq-img{ border-radius:24px; border:1px solid var(--panel-border); box-shadow:0 30px 60px -30px rgba(0,0,0,0.7); }
  .accordion-item{ background:var(--panel); border:1px solid var(--panel-border); border-radius:14px !important; overflow:hidden; margin-bottom:14px; }
  .accordion-button{
    background:transparent; color:var(--text-hi); font-family:'Space Grotesk'; font-weight:600; font-size:16px;
    box-shadow:none !important; padding:20px 24px;
  }
  .accordion-button:not(.collapsed){ background:rgba(33,230,255,0.06); color:var(--text-hi); }
  .accordion-button::after{ filter:invert(1) brightness(1.6); }
  .accordion-body{ color:var(--text-mid); font-size:14.5px; padding:0 24px 22px; }

  /* ---------- footer ---------- */
  footer{ background:var(--bg-navy); border-top:1px solid rgba(255,255,255,0.06); padding:70px 0 28px; }
  .footer-brand p{ color:var(--text-low); font-size:14px; max-width:280px; }
  .footer-socials a{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--panel-border);
    display:flex; align-items:center; justify-content:center; color:var(--text-mid);
    transition:border-color .2s, color .2s;
  }
  .footer-socials a:hover{ border-color:var(--cyan); color:var(--cyan-soft); }
  .footer-socials svg{ width:15px; height:15px; }
  footer h5{ font-size:14.5px; margin-bottom:18px; }
  footer ul{ list-style:none; padding:0; display:grid; gap:12px; }
  footer ul a{ color:var(--text-low); font-size:14px; transition:color .2s; }
  footer ul a:hover{ color:var(--cyan-soft); }
  .footer-bottom{ padding-top:26px; border-top:1px solid rgba(255,255,255,0.06); font-size:13px; color:var(--text-low); }
  .footer-bottom a{ color:var(--text-low); }
  .footer-bottom a:hover{ color:var(--cyan-soft); }

  @media (prefers-reduced-motion: reduce){
    .radar-sweep, .float-chip, .badge-live .dot{ animation:none !important; }
  }
  @media (max-width: 767px){
    .float-chip{ display:none; }
  }