<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Deflected.ai — Defend the Business. Secure the AI Layer.</title>
  <meta name="description" content="Deflected protects organizations from AI-driven threats — real-time threat detection, security posture management, and AI governance built for the enterprise." />
  <meta property="og:title" content="Deflected.ai — Secure the AI Layer" />
  <meta property="og:description" content="AI-native cybersecurity for the modern enterprise." />
  <meta property="og:type" content="website" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --red:#e8202a;--red-bright:#ff2d38;--red-glow:rgba(232,32,42,0.35);
      --bg:#060608;--bg2:#0d0d10;--surface:#14141a;--surface2:#1a1a22;
      --border:rgba(255,255,255,0.10);
      --text:#ffffff;--text-dim:#dfe1f0;--text-faint:#b0b2c8;
      --font:'Inter',sans-serif;--font-head:'Space Grotesk',sans-serif;
    }
    html{scroll-behavior:smooth}
    body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
    #canvas-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.35}

    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:68px;background:rgba(6,6,8,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
    .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
    .nav-logo svg{width:32px;height:32px;filter:drop-shadow(0 0 8px var(--red))}
    .nav-logo span{font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:-0.3px;color:#fff}
    .nav-logo span em{font-style:normal;color:var(--red)}
    .nav-links{display:flex;align-items:center;gap:32px;list-style:none}
    .nav-links a{text-decoration:none;color:var(--text-dim);font-size:14px;font-weight:500;transition:color .2s}
    .nav-links a:hover{color:#fff}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;border:none;font-family:var(--font)}
    .btn-ghost{background:linear-gradient(135deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.12) 100%);color:#fff;border:1px solid rgba(255,255,255,0.32);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15)}
    .btn-ghost:hover{background:linear-gradient(135deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.10) 50%,rgba(255,255,255,0.18) 100%);border-color:rgba(255,255,255,0.5)}
    .btn-red{background:var(--red);color:#fff;box-shadow:0 0 20px var(--red-glow)}
    .btn-red:hover{background:var(--red-bright);box-shadow:0 0 32px rgba(232,32,42,0.55);transform:translateY(-1px)}
    .btn-red-outline{background:transparent;color:var(--red);border:1px solid var(--red)}
    .btn-red-outline:hover{background:rgba(232,32,42,0.08);box-shadow:0 0 16px var(--red-glow)}
    .btn-lg{padding:14px 28px;font-size:15px;border-radius:8px}

    /* HERO */
    #hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 40px 80px;overflow:hidden}
    .hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:100%}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;background:rgba(232,32,42,0.1);border:1px solid rgba(232,32,42,0.3);border-radius:40px;font-size:12px;font-weight:600;color:var(--red);margin-bottom:28px;letter-spacing:.5px;text-transform:uppercase}
    .hero-badge-dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse-dot 1.5s infinite}
    @keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
    .hero-h1{font-family:var(--font-head);font-size:clamp(38px,5vw,64px);font-weight:800;line-height:1.1;letter-spacing:-1.5px;margin-bottom:24px;color:#fff}
    .hero-h1 .accent{color:var(--red)}
    .hero-sub{font-size:17px;color:var(--text-dim);line-height:1.75;max-width:480px;margin-bottom:36px}
    .hero-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:40px}

    /* Hero quick-feature icons — matches original design */
    .hero-features{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(13,13,16,0.7);backdrop-filter:blur(10px)}
    .hfeat{display:flex;align-items:center;gap:9px;padding:12px 18px;font-size:13px;font-weight:500;color:var(--text-dim);border-right:1px solid var(--border);transition:background .2s,color .2s;cursor:default}
    .hfeat:last-child{border-right:none}
    .hfeat:hover{background:rgba(232,32,42,0.06);color:#fff}
    .hfeat svg{width:16px;height:16px;color:var(--red);flex-shrink:0}

    /* Hero visual / globe */
    .hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
    .shield-container{position:relative;width:420px;height:420px}
    .radar-ring{position:absolute;border-radius:50%;border:1px solid rgba(232,32,42,0.18);top:50%;left:50%;transform:translate(-50%,-50%);animation:radar-pulse 3s ease-out infinite}
    .radar-ring:nth-child(1){width:180px;height:180px;animation-delay:0s}
    .radar-ring:nth-child(2){width:280px;height:280px;animation-delay:.8s}
    .radar-ring:nth-child(3){width:380px;height:380px;animation-delay:1.6s}
    @keyframes radar-pulse{0%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
    .globe-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;height:320px}
    .shield-svg-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 0 40px rgba(232,32,42,0.6)) drop-shadow(0 0 80px rgba(232,32,42,0.3));animation:float 4s ease-in-out infinite}
    @keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-12px)}}
    .threat-cards{position:absolute;inset:0}
    .threat-card{position:absolute;background:rgba(14,14,20,0.92);border:1px solid rgba(232,32,42,0.25);border-radius:10px;padding:10px 14px;font-size:12px;backdrop-filter:blur(10px);animation:card-float 6s ease-in-out infinite;white-space:nowrap}
    .threat-card:nth-child(1){top:10%;right:-20px;animation-delay:0s}
    .threat-card:nth-child(2){bottom:20%;left:-30px;animation-delay:1s}
    .threat-card:nth-child(3){top:55%;right:-40px;animation-delay:2s}
    @keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    .threat-label{color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px}
    .threat-value{color:var(--red);font-weight:700;font-size:13px}
    .threat-blocked{color:#22c55e}

    /* Globe mini data bar */
    .globe-data-bar{position:absolute;top:14%;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:3px;height:36px}
    .gdb-bar{width:5px;background:var(--red);border-radius:2px;opacity:.7;animation:bar-grow 2s ease-in-out infinite alternate}
    @keyframes bar-grow{0%{opacity:.3;transform:scaleY(.4)}100%{opacity:.85;transform:scaleY(1)}}

    /* TRUST BAR */
    .trust-bar{position:relative;z-index:2;padding:28px 40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(13,13,16,0.8)}
    .trust-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
    .trust-label{font-size:12px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
    .trust-logos{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
    .trust-logos span{font-size:15px;font-weight:700;background:linear-gradient(160deg,#fff 0%,#c8ccde 55%,#edf0ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-head);transition:filter .2s}
    .trust-logos span:hover{filter:brightness(1.2)}

    /* SECTION DEFAULTS */
    section{position:relative;z-index:2}
    .section-inner{max-width:1280px;margin:0 auto;padding:100px 40px}
    .section-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:16px}
    .section-tag::before{content:'';display:block;width:16px;height:1px;background:var(--red)}
    .section-h2{font-family:var(--font-head);font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:20px;color:#fff}
    .section-sub{font-size:17px;color:var(--text-dim);max-width:600px;line-height:1.75}

    /* ENTERPRISE 6-COLUMN GRID — matches original */
    #enterprise{background:var(--bg2)}
    .ent-intro{margin-bottom:56px}
    .enterprise-6grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
    .ent6-card{background:var(--bg2);padding:28px 22px;transition:background .25s;cursor:default}
    .ent6-card:hover{background:var(--surface)}
    .ent6-icon{width:40px;height:40px;background:rgba(232,32,42,0.1);border:1px solid rgba(232,32,42,0.2);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
    .ent6-icon svg{width:18px;height:18px;color:var(--red)}
    .ent6-card h4{font-family:var(--font-head);font-size:13px;font-weight:700;margin-bottom:8px;color:#fff;line-height:1.3}
    .ent6-card p{font-size:12px;color:var(--text-dim);line-height:1.6}

    /* THREAT MONITOR below enterprise grid */
    .threat-monitor{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px 32px;position:relative;overflow:hidden}
    .threat-monitor::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(232,32,42,0.12) 0%,transparent 70%);border-radius:50%}
    .tm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .tm-title{font-family:var(--font-head);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#fff}
    .tm-status{display:flex;align-items:center;gap:6px;font-size:12px;color:#22c55e;font-weight:600}
    .tm-dot{width:6px;height:6px;background:#22c55e;border-radius:50%;animation:pulse-dot 1.5s infinite}
    .threat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .threat-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-size:13px}
    .threat-name{color:var(--text-dim)}
    .threat-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px}
    .badge-blocked{background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.2)}
    .badge-critical{background:rgba(232,32,42,0.1);color:var(--red);border:1px solid rgba(232,32,42,0.2)}
    .badge-monitoring{background:rgba(234,179,8,0.1);color:#eab308;border:1px solid rgba(234,179,8,0.2)}

    /* STATS — world map layout */
    #stats{background:var(--bg)}
    .stats-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
    .stats-left h2{font-family:var(--font-head);font-size:clamp(28px,3.5vw,42px);font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:16px;color:#fff}
    .stats-left .lead{font-size:16px;color:var(--text-dim);line-height:1.75;margin-bottom:32px}
    .stats-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
    .snum{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
    .snum-val{font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--red);letter-spacing:-1.5px;line-height:1}
    .snum-label{font-size:12px;color:var(--text-dim);margin-top:4px;font-weight:500}
    .stats-bullets{display:flex;flex-direction:column;gap:10px}
    .stats-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-dim);line-height:1.6}
    .stats-bullet::before{content:'';flex-shrink:0;margin-top:7px;width:5px;height:5px;background:var(--red);border-radius:50%}
    /* World map canvas */
    .stats-right{position:relative}
    #world-map-canvas{width:100%;max-width:580px;height:320px;display:block;border-radius:12px;border:1px solid var(--border);background:var(--bg2)}
    .map-overlay-stats{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:6px}
    .map-stat-chip{display:flex;align-items:center;gap:8px;background:rgba(14,14,20,0.9);border:1px solid var(--border);border-radius:8px;padding:7px 12px;backdrop-filter:blur(8px);font-size:12px;color:var(--text-dim)}
    .map-stat-chip strong{color:var(--red);font-size:14px;font-weight:700}

    /* PRICING */
    #pricing{background:var(--bg2)}
    .pricing-header{text-align:center;margin-bottom:56px}
    .pricing-header .section-tag{justify-content:center}
    .pricing-header .section-tag::before{display:none}
    .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
    .price-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 32px;position:relative;transition:border-color .3s,transform .3s}
    .price-card:hover{border-color:rgba(232,32,42,0.35);transform:translateY(-4px)}
    .price-card.featured{background:var(--surface2);border-color:rgba(232,32,42,0.4);box-shadow:0 0 40px rgba(232,32,42,0.12)}
    .price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
    .price-tier{font-size:12px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
    .price-amount{font-family:var(--font-head);font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1;margin-bottom:4px;color:#fff}
    .price-period{font-size:14px;color:var(--text-faint);margin-bottom:24px}
    .price-desc{font-size:14px;color:var(--text-dim);line-height:1.65;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border)}
    .price-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
    .price-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-dim)}
    .price-features li svg{flex-shrink:0;width:16px;height:16px;color:#22c55e;margin-top:2px}

    /* CTA */
    #cta{background:var(--bg)}
    .cta-inner{max-width:1280px;margin:0 auto;padding:100px 40px}
    .cta-box{background:var(--surface);border:1px solid rgba(232,32,42,0.25);border-radius:20px;padding:80px 60px;position:relative;overflow:hidden;text-align:center}
    .cta-box::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:500px;height:300px;background:radial-gradient(ellipse,rgba(232,32,42,0.18) 0%,transparent 70%)}
    .cta-box .section-tag{justify-content:center}
    .cta-box .section-tag::before{display:none}
    .cta-box h2{font-family:var(--font-head);font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-1.5px;margin-bottom:16px;line-height:1.1;color:#fff}
    .cta-box p{font-size:17px;color:var(--text-dim);max-width:520px;margin:0 auto 40px;line-height:1.75}
    .cta-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

    /* FOOTER */
    footer{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--border);padding:64px 40px 40px}
    .footer-inner{max-width:1280px;margin:0 auto}
    .footer-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px;padding-bottom:48px;border-bottom:1px solid var(--border);margin-bottom:40px}
    .footer-brand .nav-logo{margin-bottom:16px}
    .footer-brand p{font-size:14px;color:var(--text-faint);line-height:1.65;max-width:260px}
    .footer-col h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:16px}
    .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
    .footer-col a{font-size:14px;color:var(--text-faint);text-decoration:none;transition:color .2s}
    .footer-col a:hover{color:#fff}
    .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
    .footer-bottom p{font-size:13px;color:var(--text-faint)}
    .footer-bottom a{color:var(--text-faint);text-decoration:none}
    .footer-bottom a:hover{color:var(--text-dim)}
    .footer-social{display:flex;gap:16px}
    .social-link{width:34px;height:34px;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);text-decoration:none;transition:all .2s}
    .social-link:hover{border-color:rgba(232,32,42,0.3);color:var(--red)}
    .social-link svg{width:15px;height:15px}

    /* REVEAL */
    .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
    .reveal.visible{opacity:1;transform:none}

    /* MOBILE */
    @media(max-width:900px){
      nav{padding:0 20px}.nav-links{display:none}
      #hero{padding:100px 24px 60px}
      .hero-inner{grid-template-columns:1fr;gap:40px}
      .hero-visual{display:none}
      .hero-features{flex-wrap:wrap}
      .hfeat{flex:1 1 45%}
      .section-inner{padding:64px 24px}
      .enterprise-6grid{grid-template-columns:repeat(3,1fr)}
      .threat-list{grid-template-columns:1fr}
      .stats-layout{grid-template-columns:1fr}
      .stats-nums{grid-template-columns:repeat(2,1fr)}
      .pricing-grid{grid-template-columns:1fr}
      .footer-top{grid-template-columns:1fr 1fr}
      .cta-box{padding:48px 24px}
    }
    @media(max-width:560px){
      .enterprise-6grid{grid-template-columns:repeat(2,1fr)}
      .footer-top{grid-template-columns:1fr}
    }
  </style>
</head>
<body>
<canvas id="canvas-bg"></canvas>

<!-- NAV -->
<nav>
  <a href="#" class="nav-logo">
    <svg viewBox="0 0 32 32" fill="none"><path d="M16 2L4 7v10c0 7 5.4 13.5 12 15 6.6-1.5 12-8 12-15V7L16 2z" fill="#e8202a" opacity=".15"/><path d="M16 2L4 7v10c0 7 5.4 13.5 12 15 6.6-1.5 12-8 12-15V7L16 2z" stroke="#e8202a" stroke-width="1.5" stroke-linejoin="round"/><path d="M11 16l3.5 3.5L21.5 12" stroke="#e8202a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <span>Deflected<em>.ai</em></span>
  </a>
  <ul class="nav-links">
    <li><a href="#enterprise">Products</a></li>
    <li><a href="#enterprise">Solutions</a></li>
    <li><a href="#stats">Why Deflected</a></li>
    <li><a href="#pricing">Pricing</a></li>
    <li><a href="#cta">Contact</a></li>
  </ul>
  <div class="nav-actions">
    <a href="#" class="btn btn-ghost">Sign In</a>
    <a href="#cta" class="btn btn-red">Request a Demo</a>
  </div>
</nav>

<!-- HERO -->
<section id="hero">
  <div class="hero-inner">
    <div class="hero-content">
      <div class="hero-badge"><div class="hero-badge-dot"></div>AI-Native Cybersecurity Platform</div>
      <h1 class="hero-h1">Defend the Business.<br/>Secure the <span class="accent">AI Layer.</span></h1>
      <p class="hero-sub">Deflected protects organizations from AI-driven threats — from tools in-flight to data in motion. Built for enterprises that need to deploy before they face what’s already coming.</p>
      <div class="hero-ctas">
        <a href="#cta" class="btn btn-red btn-lg">Request a Review &rarr;</a>
        <a href="#enterprise" class="btn btn-ghost btn-lg">Explore Services</a>
      </div>
      <!-- 4 quick-feature bar — matches original design -->
      <div class="hero-features">
        <div class="hfeat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          AI Security
        </div>
        <div class="hfeat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
          Prompt Defense
        </div>
        <div class="hfeat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
          Content Platform
        </div>
        <div class="hfeat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          Email Defense
        </div>
      </div>
    </div>
    <div class="hero-visual">
      <div class="shield-container">
        <div class="radar-ring"></div>
        <div class="radar-ring"></div>
        <div class="radar-ring"></div>
        <!-- Animated globe grid -->
        <svg class="globe-grid" viewBox="0 0 320 320" fill="none">
          <!-- horizontal lat lines -->
          <ellipse cx="160" cy="160" rx="140" ry="30" stroke="rgba(232,32,42,0.12)" stroke-width="1"/>
          <ellipse cx="160" cy="160" rx="140" ry="70" stroke="rgba(232,32,42,0.09)" stroke-width="1"/>
          <ellipse cx="160" cy="160" rx="140" ry="110" stroke="rgba(232,32,42,0.07)" stroke-width="1"/>
          <!-- vertical lon lines -->
          <ellipse cx="160" cy="160" rx="30" ry="140" stroke="rgba(232,32,42,0.1)" stroke-width="1"/>
          <ellipse cx="160" cy="160" rx="70" ry="140" stroke="rgba(232,32,42,0.08)" stroke-width="1"/>
          <ellipse cx="160" cy="160" rx="110" ry="140" stroke="rgba(232,32,42,0.06)" stroke-width="1"/>
          <!-- outer circle -->
          <circle cx="160" cy="160" r="140" stroke="rgba(232,32,42,0.15)" stroke-width="1"/>
          <!-- threat dots on globe -->
          <circle cx="100" cy="130" r="3" fill="#e8202a" opacity=".8"><animate attributeName="opacity" values=".8;.2;.8" dur="2s" repeatCount="indefinite"/></circle>
          <circle cx="200" cy="110" r="3" fill="#e8202a" opacity=".8"><animate attributeName="opacity" values=".8;.2;.8" dur="2.5s" repeatCount="indefinite"/></circle>
          <circle cx="240" cy="160" r="3" fill="#e8202a" opacity=".8"><animate attributeName="opacity" values=".8;.2;.8" dur="1.8s" repeatCount="indefinite"/></circle>
          <circle cx="150" cy="200" r="3" fill="#22c55e" opacity=".8"><animate attributeName="opacity" values=".8;.3;.8" dur="3s" repeatCount="indefinite"/></circle>
          <circle cx="80" cy="175" r="3" fill="#22c55e" opacity=".8"><animate attributeName="opacity" values=".8;.3;.8" dur="2.2s" repeatCount="indefinite"/></circle>
          <!-- connection lines -->
          <line x1="100" y1="130" x2="200" y2="110" stroke="rgba(232,32,42,0.3)" stroke-width="1" stroke-dasharray="4 4"><animate attributeName="opacity" values="0;.6;0" dur="3s" repeatCount="indefinite"/></line>
          <line x1="200" y1="110" x2="240" y2="160" stroke="rgba(232,32,42,0.3)" stroke-width="1" stroke-dasharray="4 4"><animate attributeName="opacity" values="0;.6;0" dur="2.5s" begin=".5s" repeatCount="indefinite"/></line>
        </svg>
        <div class="shield-svg-wrap">
          <svg width="130" height="130" viewBox="0 0 140 140" fill="none">
            <defs><radialGradient id="sg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#e8202a" stop-opacity=".25"/><stop offset="100%" stop-color="#e8202a" stop-opacity="0"/></radialGradient></defs>
            <ellipse cx="70" cy="70" rx="65" ry="65" fill="url(#sg)"/>
            <path d="M70 8L14 30v42c0 30.9 23.7 59.4 56 66 32.3-6.6 56-35.1 56-66V30L70 8z" fill="#e8202a" fill-opacity=".08" stroke="#e8202a" stroke-width="2" stroke-linejoin="round"/>
            <path d="M49 71l14 14 30-30" stroke="#e8202a" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="70" cy="70" r="30" stroke="#e8202a" stroke-width="1" stroke-opacity=".3" stroke-dasharray="4 4"/>
          </svg>
        </div>
        <!-- Data bar pulse -->
        <div class="globe-data-bar">
          <div class="gdb-bar" style="height:18px;animation-delay:.0s"></div>
          <div class="gdb-bar" style="height:28px;animation-delay:.1s"></div>
          <div class="gdb-bar" style="height:22px;animation-delay:.2s"></div>
          <div class="gdb-bar" style="height:36px;animation-delay:.3s"></div>
          <div class="gdb-bar" style="height:24px;animation-delay:.4s"></div>
          <div class="gdb-bar" style="height:30px;animation-delay:.5s"></div>
          <div class="gdb-bar" style="height:20px;animation-delay:.6s"></div>
          <div class="gdb-bar" style="height:26px;animation-delay:.7s"></div>
        </div>
        <div class="threat-cards">
          <div class="threat-card"><div class="threat-label">Threat Blocked</div><div class="threat-value threat-blocked">&#10003; Prompt Injection</div></div>
          <div class="threat-card"><div class="threat-label">AI Activity</div><div class="threat-value">15m 24s MTTD</div></div>
          <div class="threat-card"><div class="threat-label">Active Shields</div><div class="threat-value threat-blocked">126 Systems</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TRUST BAR -->
<div class="trust-bar">
  <div class="trust-inner">
    <span class="trust-label">Trusted by enterprise teams at</span>
    <div class="trust-logos">
      <span>Nexus Corp</span><span>Vantara AI</span><span>OmniSec</span><span>PrismTech</span><span>Axiom Labs</span>
    </div>
  </div>
</div>

<!-- ENTERPRISE — 6 column grid matching original -->
<section id="enterprise">
  <div class="section-inner">
    <div class="ent-intro reveal">
      <div class="section-tag">End-to-End Protection</div>
      <h2 class="section-h2">End-to-End Protection for the AI-Driven Enterprise</h2>
      <p class="section-sub">Deflected is purpose-built for organizations deploying AI at scale — from threat detection to governance, covering the full lifecycle.</p>
    </div>
    <div class="enterprise-6grid reveal">
      <div class="ent6-card">
        <div class="ent6-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
        <h4>AI Security Posture</h4>
        <p>Continuous assessment of your AI stack against evolving threat frameworks.</p>
      </div>
      <div class="ent6-card">
        <div class="ent6-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
        <h4>Cyber Hardening</h4>
        <p>Proactive hardening with tailored playbooks and automated remediation.</p>
      </div>
      <div class="ent6-card">
        <div class="ent6-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
        <h4>Incident Response</h4>
        <p>Pre-built AI incident playbooks to minimize dwell time and blast radius.</p>
      </div>
      <div class="ent6-card">
        <div class="ent6-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <h4>Security Velocity</h4>
        <p>Continuous purple-team exercises that keep your defenses ahead of attackers.</p>
      </div>
      <div class="ent6-card">
        <div class="ent6-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div>
        <h4>Executive Risk Reviews</h4>
        <p>Board-ready reporting with risk narrative and investment prioritization.</p>
      </div>
      <div class="ent6-card">
        <div class="ent6-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div>
        <h4>AI Governance</h4>
        <p>Policy frameworks built for NIST AI RMF, EU AI Act, and SOC 2.</p>
      </div>
    </div>
    <!-- Live threat monitor below the 6-grid -->
    <div class="threat-monitor reveal">
      <div class="tm-header">
        <div class="tm-title">Live Threat Monitor</div>
        <div class="tm-status"><div class="tm-dot"></div> Actively Scanning</div>
      </div>
      <div class="threat-list">
        <div class="threat-row"><span class="threat-name">Prompt Injection — GPT-4o Pipeline</span><span class="threat-badge badge-blocked">BLOCKED</span></div>
        <div class="threat-row"><span class="threat-name">Data Exfiltration via LLM Output</span><span class="threat-badge badge-blocked">BLOCKED</span></div>
        <div class="threat-row"><span class="threat-name">Model Poisoning Attempt Detected</span><span class="threat-badge badge-critical">CRITICAL</span></div>
        <div class="threat-row"><span class="threat-name">Adversarial Embedding — RAG Store</span><span class="threat-badge badge-blocked">BLOCKED</span></div>
        <div class="threat-row"><span class="threat-name">Shadow AI API — Internal Call</span><span class="threat-badge badge-monitoring">MONITORING</span></div>
        <div class="threat-row"><span class="threat-name">Jailbreak Attempt — Internal Agent</span><span class="threat-badge badge-blocked">BLOCKED</span></div>
        <div class="threat-row"><span class="threat-name">BEC via AI-Cloned Voice</span><span class="threat-badge badge-blocked">BLOCKED</span></div>
        <div class="threat-row"><span class="threat-name">Supply Chain LLM Compromise</span><span class="threat-badge badge-critical">CRITICAL</span></div>
      </div>
    </div>
  </div>
</section>

<!-- STATS — world map layout -->
<section id="stats">
  <div class="section-inner">
    <div class="stats-layout">
      <div class="stats-left reveal">
        <div class="section-tag">Performance</div>
        <h2>Always On. Always Learning.<br/>Always Deflecting.</h2>
        <p class="lead">Our AI security platform operates around the clock with zero-tolerance for blind spots. The numbers speak for themselves.</p>
        <div class="stats-nums">
          <div class="snum"><div class="snum-val" data-target="2348">0</div><div class="snum-label">Threats Blocked / Month</div></div>
          <div class="snum"><div class="snum-val" data-target="1127">0</div><div class="snum-label">AI Incidents Investigated</div></div>
          <div class="snum"><div class="snum-val" style="font-size:24px">15m 24s</div><div class="snum-label">Mean Time to Detect</div></div>
          <div class="snum"><div class="snum-val" data-target="126">0</div><div class="snum-label">Enterprise Systems Protected</div></div>
        </div>
        <div class="stats-bullets">
          <div class="stats-bullet">AI-native detection trained on real adversarial attack patterns, continuously updated.</div>
          <div class="stats-bullet">Zero-configuration deployment with native SIEM integrations out of the box.</div>
          <div class="stats-bullet">Human-in-the-loop review for every critical finding — automated speed, expert judgment.</div>
          <div class="stats-bullet">99.97% platform uptime SLA with multi-region availability across all tiers.</div>
        </div>
      </div>
      <div class="stats-right reveal">
        <canvas id="world-map-canvas" width="580" height="320"></canvas>
      </div>
    </div>
  </div>
</section>

<!-- PRICING -->
<section id="pricing">
  <div class="section-inner">
    <div class="pricing-header reveal">
      <div class="section-tag">Pricing</div>
      <h2 class="section-h2">Simple. Transparent. Built for Every Stage.</h2>
      <p class="section-sub" style="margin:0 auto">No hidden fees. No long discovery cycles. Start protecting your AI layer in days.</p>
    </div>
    <div class="pricing-grid reveal">
      <div class="price-card">
        <div class="price-tier">Essentials</div>
        <div class="price-amount">$8,500</div>
        <div class="price-period">/month</div>
        <div class="price-desc">For growing companies deploying AI for the first time and needing foundational security guardrails fast.</div>
        <ul class="price-features">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>AI Threat Monitoring (up to 5 models)</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Prompt Injection Defense</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Monthly Security Report</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Email Defense Suite</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Standard SLA (48h response)</li>
        </ul>
        <a href="#cta" class="btn btn-red-outline" style="width:100%;justify-content:center">Get Started</a>
      </div>
      <div class="price-card featured">
        <div class="price-badge">Most Popular</div>
        <div class="price-tier">Growth</div>
        <div class="price-amount">$24,500</div>
        <div class="price-period">/month</div>
        <div class="price-desc">For scaling teams with production AI systems needing continuous coverage and hands-on expert support.</div>
        <ul class="price-features">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Everything in Essentials</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>AI Security Posture Management</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Incident Response Playbooks</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Dedicated Security Engineer</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Quarterly Executive Review</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Priority SLA (4h response)</li>
        </ul>
        <a href="#cta" class="btn btn-red btn-lg" style="width:100%;justify-content:center">Go Growth &rarr;</a>
      </div>
      <div class="price-card">
        <div class="price-tier">Enterprise</div>
        <div class="price-amount">$65,000+</div>
        <div class="price-period">/month — tailored to your scale</div>
        <div class="price-desc">For large enterprises with complex AI deployments needing full-spectrum protection and white-glove delivery.</div>
        <ul class="price-features">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Everything in Growth</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>AI Governance Framework</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Cyber Hardening Assessments</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Purple Team Exercises</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Compliance (NIST, SOC 2, EU AI Act)</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>1-hour SLA &amp; 24/7 escalation</li>
        </ul>
        <a href="#cta" class="btn btn-ghost" style="width:100%;justify-content:center">Talk to Sales</a>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section id="cta">
  <div class="cta-inner">
    <div class="cta-box reveal">
      <div class="section-tag" style="justify-content:center">Get Protected</div>
      <h2>Let’s Deflect What Matters.</h2>
      <p>Schedule a free 30-minute security review with a Deflected engineer and walk away with a clear picture of your AI risk exposure.</p>
      <div class="cta-actions">
        <a href="mailto:hello@deflected.ai" class="btn btn-red btn-lg">Request Your Review &rarr;</a>
        <a href="mailto:hello@deflected.ai" class="btn btn-ghost btn-lg">Talk to Sales</a>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="footer-inner">
    <div class="footer-top">
      <div class="footer-brand">
        <a href="#" class="nav-logo">
          <svg viewBox="0 0 32 32" fill="none"><path d="M16 2L4 7v10c0 7 5.4 13.5 12 15 6.6-1.5 12-8 12-15V7L16 2z" fill="#e8202a" opacity=".15"/><path d="M16 2L4 7v10c0 7 5.4 13.5 12 15 6.6-1.5 12-8 12-15V7L16 2z" stroke="#e8202a" stroke-width="1.5" stroke-linejoin="round"/><path d="M11 16l3.5 3.5L21.5 12" stroke="#e8202a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Deflected<em>.ai</em></span>
        </a>
        <p>AI-native cybersecurity for the modern enterprise. Always on. Always learning. Always deflecting.</p>
      </div>
      <div class="footer-col"><h5>Platform</h5><ul><li><a href="#">AI Security Posture</a></li><li><a href="#">Prompt Defense</a></li><li><a href="#">Email Security</a></li><li><a href="#">Content Monitor</a></li><li><a href="#">AI Governance</a></li></ul></div>
      <div class="footer-col"><h5>Solutions</h5><ul><li><a href="#">Financial Services</a></li><li><a href="#">Healthcare</a></li><li><a href="#">SaaS Companies</a></li><li><a href="#">Government</a></li><li><a href="#">Legal &amp; Compliance</a></li></ul></div>
      <div class="footer-col"><h5>Company</h5><ul><li><a href="#">About</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div>
      <div class="footer-col"><h5>Legal</h5><ul><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Security</a></li><li><a href="#">Compliance</a></li></ul></div>
    </div>
    <div class="footer-bottom">
      <p>&copy; 2026 Deflected.ai — All rights reserved. <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
      <div class="footer-social">
        <a href="#" class="social-link" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
        <a href="#" class="social-link" aria-label="Twitter"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
        <a href="#" class="social-link" aria-label="GitHub"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg></a>
      </div>
    </div>
  </div>
</footer>

<script>
/* ---- Particle background ---- */
(function(){
  const canvas=document.getElementById('canvas-bg'),ctx=canvas.getContext('2d');
  let W,H,particles=[];
  function resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;}
  function Particle(){this.reset();}
  Particle.prototype.reset=function(){this.x=Math.random()*W;this.y=Math.random()*H;this.r=Math.random()*1.2+0.3;this.vx=(Math.random()-.5)*.3;this.vy=(Math.random()-.5)*.3;this.alpha=Math.random()*.5+.1;};
  function init(){resize();particles=[];const n=Math.min(120,Math.floor(W*H/12000));for(let i=0;i<n;i++)particles.push(new Particle());}
  function draw(){ctx.clearRect(0,0,W,H);for(let i=0;i<particles.length;i++){for(let j=i+1;j<particles.length;j++){const dx=particles[i].x-particles[j].x,dy=particles[i].y-particles[j].y,d=Math.sqrt(dx*dx+dy*dy);if(d<120){ctx.beginPath();ctx.moveTo(particles[i].x,particles[i].y);ctx.lineTo(particles[j].x,particles[j].y);ctx.strokeStyle=`rgba(232,32,42,${.07*(1-d/120)})`;ctx.lineWidth=.5;ctx.stroke();}}}
  particles.forEach(p=>{ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fillStyle=`rgba(232,32,42,${p.alpha})`;ctx.fill();p.x+=p.vx;p.y+=p.vy;if(p.x<0||p.x>W||p.y<0||p.y>H)p.reset();});requestAnimationFrame(draw);}
  window.addEventListener('resize',init);init();draw();
})();

/* ---- World map canvas ---- */
(function(){
  const canvas=document.getElementById('world-map-canvas');
  if(!canvas)return;
  const ctx=canvas.getContext('2d');
  const W=canvas.width,H=canvas.height;

  // Simplified continent polygons [x,y] for 580x320 canvas (Mercator approx)
  const continents=[
    // North America
    [[72,20],[130,14],[168,36],[172,82],[158,120],[138,142],[110,150],[80,136],[62,98],[54,58]],
    // Greenland
    [[148,5],[182,2],[192,16],[174,32],[148,28],[138,16]],
    // Central America / Caribbean (simplified)
    [[138,148],[155,155],[158,170],[145,178],[132,165]],
    // South America
    [[122,162],[155,156],[172,188],[170,230],[155,270],[128,276],[108,256],[105,212]],
    // Western Europe
    [[262,18],[302,14],[320,26],[326,48],[316,72],[294,84],[270,80],[256,62],[254,38]],
    // Scandinavia
    [[278,8],[300,5],[308,14],[302,26],[284,22]],
    // UK
    [[252,30],[262,26],[266,38],[256,42]],
    // Africa
    [[266,96],[326,88],[348,108],[356,156],[342,210],[312,240],[288,242],[264,214],[254,160],[256,108]],
    // Russia & Central Asia (simplified)
    [[326,15],[465,10],[510,34],[522,80],[508,120],[470,148],[440,158],[400,138],[372,112],[346,76],[330,42]],
    // Middle East
    [[328,90],[368,86],[382,105],[375,130],[348,138],[326,120]],
    // Indian subcontinent
    [[398,138],[428,134],[440,168],[412,170]],
    // SE Asia
    [[448,145],[488,142],[496,162],[474,170],[450,162]],
    // Japan
    [[488,58],[504,50],[510,66],[500,78],[486,72]],
    // Australia
    [[440,178],[518,172],[536,194],[532,226],[502,242],[450,234],[434,210]],
    // New Zealand
    [[532,230],[544,224],[546,242],[536,248],[528,240]],
  ];

  // Threat locations [x, y, isActive]
  const threats=[
    [135,72,true],[276,48,true],[334,40,true],[366,108,false],
    [408,148,true],[480,162,true],[500,64,true],[496,210,false],
    [148,226,true],[300,218,false],[466,72,true],[74,84,false],
    [128,62,true],[284,52,true],[182,100,false],[320,155,true],
  ];

  // Connection pairs (indices into threats)
  const connections=[[0,1],[1,2],[2,5],[4,5],[5,6],[0,12],[1,13],[3,7],[8,3],[10,6],[9,7]];

  let time=0;

  function isInPolygon(px,py,poly){
    let inside=false;
    for(let i=0,j=poly.length-1;i<poly.length;j=i++){
      const xi=poly[i][0],yi=poly[i][1],xj=poly[j][0],yj=poly[j][1];
      if(((yi>py)!==(yj>py))&&(px<(xj-xi)*(py-yi)/(yj-yi)+xi))inside=!inside;
    }
    return inside;
  }

  function isLand(px,py){
    return continents.some(c=>isInPolygon(px,py,c));
  }

  // Pre-compute dot grid
  const STEP=8,dots=[];
  for(let x=4;x<W;x+=STEP){
    for(let y=4;y<H;y+=STEP){
      if(isLand(x,y))dots.push([x,y]);
    }
  }

  function draw(){
    ctx.clearRect(0,0,W,H);

    // Background
    ctx.fillStyle='#0d0d10';
    ctx.fillRect(0,0,W,H);

    // Subtle grid lines
    ctx.strokeStyle='rgba(255,255,255,0.03)';
    ctx.lineWidth=1;
    for(let x=0;x<W;x+=STEP*4){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
    for(let y=0;y<H;y+=STEP*4){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}

    // Land dots
    dots.forEach(([x,y])=>{
      ctx.beginPath();
      ctx.arc(x,y,1.5,0,Math.PI*2);
      ctx.fillStyle='rgba(192,196,220,0.35)';
      ctx.fill();
    });

    // Connection lines between threats
    connections.forEach(([a,b])=>{
      const ta=threats[a],tb=threats[b];
      const pulse=(Math.sin(time*.04+(a+b)*.3)+1)*.5;
      ctx.beginPath();
      ctx.moveTo(ta[0],ta[1]);
      ctx.lineTo(tb[0],tb[1]);
      ctx.strokeStyle=`rgba(232,32,42,${.08+pulse*.18})`;
      ctx.lineWidth=1;
      ctx.setLineDash([4,4]);
      ctx.lineDashOffset=-time*.5;
      ctx.stroke();
      ctx.setLineDash([]);
    });

    // Threat dots
    threats.forEach(([x,y,active],i)=>{
      const pulse=(Math.sin(time*.05+i*.7)+1)*.5;
      // Outer glow ring
      const ringR=8+pulse*6;
      const grad=ctx.createRadialGradient(x,y,0,x,y,ringR);
      grad.addColorStop(0,active?`rgba(232,32,42,${.5+pulse*.3})`:'rgba(234,179,8,0.4)');
      grad.addColorStop(1,'rgba(232,32,42,0)');
      ctx.beginPath();
      ctx.arc(x,y,ringR,0,Math.PI*2);
      ctx.fillStyle=grad;
      ctx.fill();
      // Core dot
      ctx.beginPath();
      ctx.arc(x,y,3,0,Math.PI*2);
      ctx.fillStyle=active?'#e8202a':'#eab308';
      ctx.fill();
    });

    time++;
    requestAnimationFrame(draw);
  }

  draw();
})();

/* ---- Scroll reveal ---- */
(function(){
  const els=document.querySelectorAll('.reveal');
  const obs=new IntersectionObserver(entries=>{
    entries.forEach((e,i)=>{if(e.isIntersecting){setTimeout(()=>e.target.classList.add('visible'),i*80);obs.unobserve(e.target);}});
  },{threshold:.08});
  els.forEach(el=>obs.observe(el));
})();

/* ---- Counter animation ---- */
(function(){
  const counters=document.querySelectorAll('[data-target]');
  const obs=new IntersectionObserver(entries=>{
    entries.forEach(e=>{
      if(!e.isIntersecting)return;
      const el=e.target,target=parseInt(el.dataset.target),dur=1800,start=performance.now();
      function update(now){const p=Math.min((now-start)/dur,1);el.textContent=Math.floor((1-Math.pow(1-p,3))*target).toLocaleString();if(p<1)requestAnimationFrame(update);}
      requestAnimationFrame(update);obs.unobserve(el);
    });
  },{threshold:.5});
  counters.forEach(c=>obs.observe(c));
})();

/* ---- Nav scroll ---- */
(function(){
  const nav=document.querySelector('nav');
  window.addEventListener('scroll',()=>{nav.style.background=window.scrollY>40?'rgba(6,6,8,0.97)':'rgba(6,6,8,0.88)';});
})();
</script>
</body>
</html>
