:root{
      --bg:#06080d;
      --panel:#0b1018;
      --panel-2:#101826;
      --panel-3:#0d1320;
      --text:#eef3ff;
      --muted:#9aa7c2;
      --soft:#6c7690;
      --line:rgba(166,193,255,.12);
      --cyan:#47e7ff;
      --red:#ff4166;
      --violet:#8c77ff;
      --max:1200px;
      --shadow:0 22px 70px rgba(0,0,0,.35);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 15%, rgba(71,231,255,.08), transparent 22rem),
        radial-gradient(circle at 85% 12%, rgba(140,119,255,.08), transparent 28rem),
        radial-gradient(circle at 50% 100%, rgba(255,65,102,.06), transparent 26rem),
        linear-gradient(180deg, #07101a 0%, #06080d 18%, #05070b 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x:hidden;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.15;
      z-index:999;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:24px 24px;
      mask-image:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.15));
    }

    a{text-decoration:none;color:inherit}
    .wrap{width:min(calc(100% - 40px), var(--max));margin:0 auto}

    .nav{
      position:sticky; top:0; z-index:100;
      border-bottom:1px solid var(--line);
      background:rgba(5,8,13,.72);
      backdrop-filter:blur(18px);
    }
    .nav-inner{
      min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:.9rem;
    }
    .brand-logo{
      width:38px;
      height:38px;
      object-fit:contain;
      flex:0 0 auto;
      filter:drop-shadow(0 0 10px rgba(255,65,102,.12));
    }
    .mark{
      width:30px;height:30px;position:relative;
      border:1px solid rgba(255,255,255,.18);
      background:linear-gradient(135deg, rgba(71,231,255,.15), rgba(140,119,255,.06));
      box-shadow: inset 0 0 18px rgba(71,231,255,.12);
      overflow:hidden;
    }
    .mark::before,.mark::after{
      content:""; position:absolute; background:linear-gradient(90deg, var(--cyan), var(--violet));
    }
    .mark::before{width:70%;height:3px;left:15%;top:8px}
    .mark::after{width:3px;height:70%;top:15%;left:8px}

    .nav-links{display:flex;align-items:center;gap:26px;color:#c5d1e8;font-size:.92rem}
    .nav-links a{transition:.2s ease}
    .nav-links a:hover{color:white}
    .nav-cta{
      padding:10px 15px;
      border:1px solid rgba(71,231,255,.28);
      background:rgba(71,231,255,.08);
      color:#dbfbff;
      box-shadow: inset 0 0 18px rgba(71,231,255,.08);
    }

    .hero{
      position:relative;
      min-height:calc(100vh - 74px);
      display:grid;
      align-items:center;
      padding:84px 0 72px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:64px;
      align-items:center;
    }
    .eyebrow{
      display:inline-flex; align-items:center; gap:10px;
      color:#c6d7f1; font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; margin-bottom:20px;
    }
    .blip{
      width:8px;height:8px;border-radius:999px;background:var(--cyan);
      box-shadow:0 0 0 0 rgba(71,231,255,.5);
      animation:ping 2s infinite;
    }
    @keyframes ping{
      0%{box-shadow:0 0 0 0 rgba(71,231,255,.4)}
      70%{box-shadow:0 0 0 10px rgba(71,231,255,0)}
      100%{box-shadow:0 0 0 0 rgba(71,231,255,0)}
    }

    h1{
      margin:0;
      font-size:clamp(3.4rem, 8vw, 7.5rem);
      line-height:.9; letter-spacing:-.065em; text-transform:uppercase; font-weight:950;
      max-width:860px;
    }
    h1 .stroke{display:block;color:transparent;-webkit-text-stroke:1.2px rgba(230,243,255,.6)}
    h1 .glow{color:var(--cyan);text-shadow:0 0 24px rgba(71,231,255,.22)}

    .hero-copy{
      max-width:680px;
      margin:26px 0 34px;
      color:#b3c1da;
      font-size:clamp(1.02rem, 1.55vw, 1.16rem);
      line-height:1.72;
    }

    .actions{display:flex;flex-wrap:wrap;gap:12px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:50px;padding:0 20px;font-size:.92rem;font-weight:800;
      border:1px solid rgba(255,255,255,.14);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      color:#061018;
      border-color:rgba(71,231,255,.38);
      background:linear-gradient(135deg, var(--cyan), #8af1ff);
      box-shadow:0 12px 34px rgba(71,231,255,.16);
    }
    .btn-ghost{background:rgba(255,255,255,.03);color:#e8f5ff}
    .btn-ghost:hover{border-color:rgba(71,231,255,.28)}

    .hero-panel{
      position:relative; min-height:560px; border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        linear-gradient(140deg, rgba(71,231,255,.07), rgba(140,119,255,.05) 54%, rgba(255,65,102,.05));
      box-shadow:var(--shadow); overflow:hidden;
    }
    .hero-panel::before{
      content:""; position:absolute; inset:0;
      background:
        radial-gradient(circle at 72% 20%, rgba(71,231,255,.24), transparent 22rem),
        radial-gradient(circle at 10% 100%, rgba(140,119,255,.18), transparent 18rem);
      pointer-events:none;
    }
    .panel-top{
      height:44px;padding:0 16px;border-bottom:1px solid var(--line);
      display:flex;align-items:center;gap:8px;color:#7f92b4;
      font:700 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing:.13em;text-transform:uppercase;
    }
    .dot{width:7px;height:7px;border-radius:50%;background:#33425a}
    .dot.hot{background:var(--cyan)}
    .panel-body{padding:28px;height:calc(100% - 44px);display:flex;flex-direction:column;gap:22px}
    .code-block{
      border:1px solid var(--line);
      background:rgba(5,10,16,.58);
      padding:16px 18px;
      font:700 .76rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace;
      color:#8fd7e1;
      white-space:pre-line;
    }

    .sim-card{
      display:grid; grid-template-columns:1fr 1fr; gap:1px;
      background:var(--line); border:1px solid var(--line);
    }
    .sim-box{
      min-height:150px; background:rgba(6,12,20,.9); padding:20px;
      display:flex; flex-direction:column; justify-content:space-between; gap:14px;
    }
    .sim-title{color:#f0f6ff;font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
    .sim-desc{color:#9db1cf;line-height:1.55;font-size:.9rem}
    .sim-tag{
      width:max-content;padding:8px 10px;
      font:800 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-transform:uppercase;letter-spacing:.12em;
      background:rgba(71,231,255,.12);color:#dffcff;border:1px solid rgba(71,231,255,.18);
    }

    .stat-strip{
      display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
      background:var(--line); border:1px solid var(--line);
    }
    .stat{background:rgba(6,12,20,.95);padding:18px}
    .stat strong{display:block;font-size:1.7rem;line-height:1;margin-bottom:8px;color:var(--cyan)}
    .stat span{color:#a4b7d4;font-size:.86rem;line-height:1.45}

    section{padding:106px 0}
    .section-line{border-top:1px solid var(--line)}
    .section-head{
      display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px;
    }
    .kicker{
      color:var(--cyan);
      font:800 .73rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-transform:uppercase;letter-spacing:.16em;margin-bottom:14px;
    }
    h2{
      margin:0;font-size:clamp(2.2rem, 4.3vw, 4.4rem);line-height:.96;letter-spacing:-.045em;text-transform:uppercase;
    }
    .section-note{max-width:430px;color:var(--muted);line-height:1.7;font-size:.98rem}

    .cards{
      display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
      background:var(--line); border:1px solid var(--line);
    }
    .card{
      background:var(--panel); min-height:320px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:18px;
    }
    .card:hover{background:var(--panel-2)}
    .card-num{
      color:#68809e;
      font:700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-transform:uppercase; letter-spacing:.12em;
    }
    .card-icon{font-size:2.8rem;line-height:1;color:var(--cyan);text-shadow:0 0 20px rgba(71,231,255,.2)}
    .card h3{margin:18px 0 10px;font-size:1.35rem;text-transform:uppercase;letter-spacing:-.02em}
    .card p{margin:0;color:#98abc7;line-height:1.7;font-size:.95rem}

    .split{
      display:grid; grid-template-columns:.95fr 1.05fr; gap:1px; background:var(--line); border:1px solid var(--line);
    }
    .split-copy,.split-visual{background:var(--panel)}
    .split-copy{padding:clamp(30px, 4.6vw, 58px); display:flex; flex-direction:column; justify-content:space-between; gap:40px}
    .lead{color:#aab7cf;line-height:1.75;max-width:560px}

    .points{display:grid;gap:14px}
    .point{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
    .point-badge{
      width:34px;height:34px;display:grid;place-items:center;
      border:1px solid rgba(71,231,255,.2);
      background:rgba(71,231,255,.08);color:#dcfbff;
      font:800 .74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .point strong{display:block;font-size:1rem;text-transform:uppercase;margin-bottom:4px}
    .point span{color:#97aac6;line-height:1.65;font-size:.94rem}

    .visual{
      position:relative; min-height:560px; overflow:hidden;
      background:
        radial-gradient(circle at 50% 50%, rgba(71,231,255,.11), transparent 18rem),
        linear-gradient(145deg, #0a1320, #0a1018 45%, #090c12 100%);
    }
    .visual::before,.visual::after{content:"";position:absolute;border:1px solid rgba(71,231,255,.13)}
    .visual::before{inset:13%;transform:rotate(8deg);box-shadow:0 0 70px rgba(71,231,255,.05)}
    .visual::after{inset:22%;transform:rotate(-11deg);border-color:rgba(140,119,255,.16)}
    .radar{
      position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%);
      width:min(74%, 430px); aspect-ratio:1/1; border-radius:50%;
      border:1px solid rgba(71,231,255,.16);
      box-shadow:0 0 0 36px rgba(71,231,255,.03), 0 0 0 72px rgba(71,231,255,.02);
    }
    .radar::before,.radar::after{
      content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      border-radius:50%; border:1px solid rgba(71,231,255,.15);
    }
    .radar::before{width:58%;height:58%}
    .radar::after{width:24%;height:24%}
    .sweep{
      position:absolute; left:50%; top:50%; width:48%; height:2px;
      background:linear-gradient(90deg, rgba(71,231,255,0), rgba(71,231,255,.9));
      transform-origin:left center; animation:spin 6s linear infinite;
      box-shadow:0 0 18px rgba(71,231,255,.42);
    }
    @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    .visual-label{
      position:absolute; padding:10px 12px; border:1px solid rgba(71,231,255,.18);
      background:rgba(7,18,29,.78); color:#dffbff;
      font:800 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-transform:uppercase; letter-spacing:.12em; backdrop-filter:blur(8px);
    }
    .visual-label.one{left:28px;top:28px}
    .visual-label.two{right:28px;top:110px}
    .visual-label.three{left:70px;bottom:70px}
    .visual-label.four{right:40px;bottom:34px}

    .audiences{
      display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
      background:var(--line); border:1px solid var(--line);
    }
    .audience{background:var(--panel-3); padding:28px; min-height:270px}
    .audience small{
      display:block;color:var(--cyan);
      font:800 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px;
    }
    .audience h3{margin:0 0 12px;font-size:1.35rem;text-transform:uppercase}
    .audience p{margin:0;color:#9cb0cc;line-height:1.72;font-size:.95rem}

    .team-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:start}
    .team-panel{
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--panel);
      padding:32px; box-shadow:var(--shadow);
    }
    .team-panel p{color:#9db0cc;line-height:1.8;margin:0 0 18px}
    .mini-cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
    .mini{background:var(--panel);padding:22px}
    .mini strong{display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
    .mini span{color:#98abc7;line-height:1.65;font-size:.94rem}

    .contact{text-align:center;padding:130px 0;position:relative}
    .contact h2{font-size:clamp(2.8rem, 7vw, 6.5rem);max-width:920px;margin:0 auto 20px}
    .contact p{max-width:680px;margin:0 auto 34px;color:#a6b5cf;line-height:1.8}

    .footer{border-top:1px solid var(--line);padding:24px 0 34px;color:#71809a;font-size:.82rem}
    .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
    .mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;letter-spacing:.08em}

    

    @media (max-width: 980px){
      .hero-grid,.split,.team-grid{grid-template-columns:1fr}
      .cards,.audiences{grid-template-columns:1fr}
      .stat-strip{grid-template-columns:1fr}
      .sim-card{grid-template-columns:1fr}
      .section-head{flex-direction:column;align-items:start}
      .hero{min-height:auto}
    }

    @media (max-width: 700px){
      .wrap{width:min(calc(100% - 28px), var(--max))}
      .nav-inner{min-height:66px}
      .nav-links a:not(.nav-cta){display:none}
      section{padding:82px 0}
      .hero{padding:70px 0 52px}
      .hero-panel{min-height:auto}
      .panel-body{padding:18px}
      .sim-box{min-height:unset}
      .visual{min-height:440px}
      .footer-inner{flex-direction:column;align-items:flex-start}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
      }
    }

/* CSP-safe replacements for former inline styles */
.panel-logo{
  width:24px;
  height:24px;
  object-fit:contain;
  margin-right:4px;
}

.experience-note{
  margin-top:20px;
  max-width:500px;
}

.experience-mini-cards{
  margin-top:20px;
}

.actions-center{
  justify-content:center;
}

/*
  Progressive enhancement:
  Content remains visible if JavaScript is blocked or fails.
  script.js adds .js only when it successfully executes.
*/
.reveal{
  opacity:1;
  transform:none;
}

.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}

.js .reveal.visible{
  opacity:1;
  transform:none;
}