:root{
    --ink:#0B1220;
    --navy:#0F1F4D;
    --navy-2:#16307A;
    --blue:#2F6FF0;
    --amber:#F5852E;
    --paper:#F6F7FA;
    --paper-2:#EEF1F6;
    --line:#22335E;
    --line-lt:#DDE2EC;
    --text:#12151C;
    --text-soft:#4A5268;
    --text-inv:#EDEFF7;
    --text-inv-soft:#AEB7D6;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'IBM Plex Serif', serif;
    font-weight:600;
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  @media (max-width:700px){ .wrap{padding:0 20px;} }

  /* Badge motif — echoes the officer/team colour-coded initials in the product */
  .badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:12px;
    color:#fff; flex-shrink:0;
  }
  .b-blue{background:#2F6FF0;}
  .b-amber{background:#F5852E;}
  .b-teal{background:#16A394;}
  .b-violet{background:#6D5DD3;}
  .b-rose{background:#E0457B;}
  .b-green{background:#1FA971;}

  /* HERO */
  .hero{
    position:relative;
    background: linear-gradient(160deg, #0A1638 0%, #123168 55%, #1B49A6 100%);
    color:var(--text-inv);
    padding:64px 0 0;
    overflow:hidden;
  }
  /* Radar sweep — subtle rotating scan behind the hero, echoes a patrol map */
  .hero::before{
    content:"";
    position:absolute; top:-30%; right:-10%;
    width:900px; height:900px;
    background: conic-gradient(from 0deg, rgba(143,178,255,0.16), rgba(143,178,255,0) 26%, rgba(143,178,255,0) 100%);
    border-radius:50%;
    animation: radar-sweep 9s linear infinite;
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; top:-30%; right:-10%;
    width:900px; height:900px;
    border-radius:50%;
    border:1px solid rgba(143,178,255,0.14);
    box-shadow:0 0 0 90px rgba(143,178,255,0.03) inset, 0 0 0 180px rgba(143,178,255,0.02) inset;
    pointer-events:none;
  }
  @keyframes radar-sweep{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

  /* Live beacon — pulsing ping used next to "active" style stats */
  .beacon{
    position:relative; display:inline-block; width:8px; height:8px;
    border-radius:50%; background:var(--amber); margin-right:8px; flex-shrink:0;
  }
  .beacon::after{
    content:""; position:absolute; inset:-6px; border-radius:50%;
    border:1px solid var(--amber); opacity:0.7;
    animation: beacon-ping 1.8s ease-out infinite;
  }
  @keyframes beacon-ping{
    0%{ transform:scale(0.5); opacity:0.7; }
    100%{ transform:scale(2.1); opacity:0; }
  }

  /* Patrol line — a route being traced down the process timeline */
  .patrol-track{ position:relative; }
  .patrol-line{
    position:absolute; left:16px; top:0; width:4px; height:100%;
    overflow:visible; pointer-events:none;
  }
  .patrol-line path{
    fill:none; stroke:var(--amber); stroke-width:2;
    stroke-dasharray:8 8; stroke-linecap:round;
    animation: patrol-dash 22s linear infinite;
    opacity:0.55;
  }
  @keyframes patrol-dash{ to{ stroke-dashoffset:-400; } }

  /* Geofence trace — dashed border draws in on hover, like drawing a geofence */
  .feat-shot{ position:relative; }
  .feat-shot::after{
    content:""; position:absolute; inset:0; border-radius:var(--radius);
    border:2px dashed var(--amber); opacity:0; transition:opacity .35s ease;
    pointer-events:none;
  }
  .feat-shot:hover::after{ opacity:0.85; }

  @media (prefers-reduced-motion: reduce){
    .hero::before{ animation:none; }
    .beacon::after{ animation:none; opacity:0; }
    .patrol-line path{ animation:none; }
  }
  .hero-top{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:56px;
  }
  .hero-mark{
    display:flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.08em;
    color:var(--text-inv-soft);
  }
  .hero-mark span.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;}
  .hero-cta{
    border:1px solid rgba(237,239,247,0.35);
    padding:10px 18px; border-radius:999px; color:var(--text-inv);
    font-size:13px; text-decoration:none; font-family:'IBM Plex Mono', monospace;
    transition:border-color .2s ease, background .2s ease;
  }
  .hero-cta:hover{border-color:#fff; background:rgba(255,255,255,0.08);}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em;
    color:var(--amber); margin-bottom:18px; display:flex; gap:10px; align-items:center;
  }
  .eyebrow .sep{color:var(--text-inv-soft);}
  .hero h1{
    font-size:56px; line-height:1.08; max-width:820px; color:#fff;
  }
  @media (max-width:700px){ .hero h1{font-size:34px;} }
  .hero p.lede{
    max-width:620px; margin-top:22px; font-size:18px; color:var(--text-inv-soft); line-height:1.6;
  }
  .hero-shot{
    margin-top:56px; border-radius:16px 16px 0 0; overflow:hidden;
    box-shadow:0 -30px 80px rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.12); border-bottom:none;
  }
  .hero-shot img{display:block; width:100%; height:auto;}

  /* META STRIP */
  .meta{
    background:var(--ink); color:var(--text-inv);
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .meta-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
    padding:34px 0;
  }
  @media (max-width:900px){ .meta-grid{grid-template-columns:repeat(2,1fr);} }
  .meta-item .label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em;
    color:var(--text-inv-soft); margin-bottom:8px;
  }
  .meta-item .value{font-size:16px; font-weight:600; color:#fff;}
  .meta-item .sub{font-size:13px; color:var(--text-inv-soft); margin-top:3px;}

  section{padding:96px 0;}
  @media (max-width:700px){ section{padding:64px 0;} }

  .section-head{max-width:680px; margin-bottom:48px;}
  .section-head .eyebrow-lt{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em;
    color:var(--blue); margin-bottom:14px; display:inline-block;
    background:#E9F0FF; padding:5px 12px; border-radius:6px;
  }
  .section-head h2{font-size:34px; color:var(--text); margin-bottom:16px;}
  .section-head p{color:var(--text-soft); font-size:17px; max-width:600px;}

  /* CONTEXT */
  .context{background:#fff;}
  .context-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
  }
  @media (max-width:860px){ .context-grid{grid-template-columns:1fr;} }
  .context-copy p{color:var(--text-soft); font-size:16.5px; margin:0 0 18px;}
  .context-copy strong{color:var(--text);}
  .context-photo{border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(15,31,77,0.15);}
  .context-photo img{display:block; width:100%; height:auto;}

  /* OVERVIEW GRID */
  .overview{background:var(--paper-2);}
  .ov-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-lt); border:1px solid var(--line-lt); border-radius:var(--radius); overflow:hidden;}
  @media (max-width:800px){ .ov-grid{grid-template-columns:repeat(2,1fr);} }
  .ov-cell{background:#fff; padding:28px 24px;}
  .ov-cell .label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--text-soft); margin-bottom:10px;}
  .ov-cell .val{font-size:15.5px; font-weight:600;}

  /* PROCESS */
  .process{background:var(--ink); color:var(--text-inv);}
  .process .section-head h2{color:#fff;}
  .process .section-head p{color:var(--text-inv-soft);}
  .process .section-head .eyebrow-lt{background:rgba(47,111,240,0.18); color:#8FB2FF;}
  .proc-list{border-top:1px solid rgba(255,255,255,0.12);}
  .proc-row{
    display:grid; grid-template-columns:56px 1fr; gap:24px;
    padding:28px 0; border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .proc-row h3{font-size:20px; color:#fff; margin-bottom:8px; font-family:'IBM Plex Sans',sans-serif; font-weight:600;}
  .proc-row p{color:var(--text-inv-soft); margin:0; max-width:640px; font-size:15.5px;}

  /* PRINCIPLES */
  .principles{background:#fff;}
  .prin-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px;
  }
  .prin-card{
    position:relative; overflow:hidden;
    border:1px solid var(--line-lt); border-radius:var(--radius);
    padding:30px 26px 26px; background:#fff;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .prin-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--blue);
  }
  .prin-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 44px rgba(15,31,77,0.14);
    border-color:transparent;
  }
  .prin-icon{
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--blue); color:#fff;
    margin-bottom:18px;
  }
  .prin-icon svg{width:22px; height:22px; display:block;}
  .prin-num{
    position:absolute; top:26px; right:24px;
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-soft); opacity:0.5;
  }
  .prin-card h3{font-size:18.5px; margin-bottom:10px;}
  .prin-card p{color:var(--text-soft); margin:0 0 18px; font-size:15px; line-height:1.55;}
  .prin-tag{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--blue);
    border:1px solid #C9DAFF; background:#F1F6FF; border-radius:999px;
    padding:6px 12px; display:inline-block;
  }

  /* FEATURES */
  .feature{background:var(--paper-2);}
  .feature.alt{background:#fff;}
  .feat-grid{display:grid; grid-template-columns:0.72fr 1.28fr; gap:44px; align-items:center;}
  .feat-grid.rev{grid-template-columns:1.28fr 0.72fr;}
  @media (max-width:900px){ .feat-grid, .feat-grid.rev{grid-template-columns:1fr;} }
  .feat-grid.rev .feat-copy{order:2;}
  .feat-grid.rev .feat-shot{order:1;}
  .feat-copy .eyebrow-lt{margin-bottom:14px;}
  .feat-copy h2{font-size:28px; margin-bottom:14px;}
  .feat-copy p.desc{color:var(--text-soft); font-size:16px; margin-bottom:26px;}
  .feat-points{border-top:1px solid var(--line-lt);}
  .feat-point{padding:16px 0; border-bottom:1px solid var(--line-lt); display:flex; gap:14px;}
  .feat-point .badge{width:26px;height:26px;font-size:10px; margin-top:2px;}
  .feat-point .txt strong{display:block; font-size:15px; margin-bottom:3px;}
  .feat-point .txt span{color:var(--text-soft); font-size:14.5px;}
  .feat-shot{border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px rgba(15,31,77,0.16); border:1px solid var(--line-lt);}
  .feat-shot img{display:block; width:100%; height:auto;}
  .feat-shot-stack{display:flex; flex-direction:column; gap:16px;}
  .feat-shot-stack .feat-shot{margin:0;}

  /* OUTCOMES */
  .outcomes{background:var(--ink); color:var(--text-inv);}
  .out-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; color:var(--amber); margin-bottom:20px;}
  .outcomes h2{font-size:44px; color:#fff; max-width:600px; margin-bottom:44px;}
  .quote-block{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; margin-bottom:60px;}
  @media (max-width:900px){ .quote-block{grid-template-columns:1fr;} }
  .quote-block blockquote{
    font-family:'IBM Plex Serif', serif; font-style:italic; font-size:27px;
    line-height:1.45; color:#fff; margin:0 0 20px; font-weight:400;
  }
  .quote-block cite{
    font-family:'IBM Plex Mono', monospace; font-style:normal; font-size:13px;
    color:var(--text-inv-soft); letter-spacing:0.06em;
  }
  .quote-photo{border-radius:var(--radius); overflow:hidden;}
  .quote-photo img{display:block; width:100%; height:auto;}
  .stat-strip{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); overflow:hidden;
    margin-bottom:56px;
  }
  @media (max-width:800px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }
  .stat-cell{background:rgba(255,255,255,0.03); padding:26px 22px;}
  .stat-cell .slabel{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--text-inv-soft); margin-bottom:10px;}
  .stat-cell .snum{font-family:'IBM Plex Serif', serif; font-size:34px; color:#fff;}
  .stat-cell .snum small{font-family:'IBM Plex Mono', monospace; font-size:15px; color:var(--text-inv-soft); font-style:normal;}
  .stat-cell .sdesc{font-size:13.5px; color:var(--text-inv-soft); margin-top:6px;}
  .out-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:800px){ .out-cards{grid-template-columns:1fr;} }
  .out-card{border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); padding:26px;}
  .out-card .num{font-family:'IBM Plex Serif', serif; font-style:italic; font-size:26px; color:#8FB2FF; margin-bottom:14px; display:block;}
  .out-card h3{font-size:17px; color:#fff; margin-bottom:8px; font-family:'IBM Plex Sans'; font-weight:600;}
  .out-card p{color:var(--text-inv-soft); font-size:14.5px; margin:0;}

  /* DESIGN SYSTEM SHOWCASE */
  .ds-section{background:var(--ink); color:var(--text-inv);}
  .ds-section .eyebrow-lt{background:rgba(47,111,240,0.18); color:#8FB2FF;}
  .ds-head{max-width:720px; margin-bottom:36px;}
  .ds-head h2{color:#fff; font-size:32px; margin-bottom:14px;}
  .ds-head p{color:var(--text-inv-soft); font-size:16.5px;}
  .ds-shot{
    border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 30px 70px rgba(0,0,0,0.4); position:relative;
  }
  .ds-shot::after{
    content:""; position:absolute; inset:0; border-radius:var(--radius);
    border:2px dashed var(--amber); opacity:0; transition:opacity .35s ease; pointer-events:none;
  }
  .ds-shot:hover::after{opacity:0.85;}
  .ds-shot img{display:block; width:100%; height:auto;}
  .ds-reuse{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;
  }
  @media (max-width:800px){ .ds-reuse{grid-template-columns:1fr;} }
  .ds-card{
    border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:22px 20px;
    background:rgba(255,255,255,0.03);
  }
  .ds-card .badge{width:30px; height:30px; font-size:11px; margin-bottom:12px;}
  .ds-card h3{font-size:16px; color:#fff; margin-bottom:6px; font-family:'IBM Plex Sans'; font-weight:600;}
  .ds-card p{color:var(--text-inv-soft); font-size:14px; margin:0;}
  .ds-stats{
    display:flex; gap:28px; flex-wrap:wrap; margin-top:28px;
    font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--text-inv-soft);
  }
  .ds-stats strong{color:#fff; font-size:15px;}

  /* CLOSING */
  .closing{background:#fff; text-align:center;}
  .closing h2{font-size:32px; margin-bottom:14px;}
  .closing p{color:var(--text-soft); font-size:16px; max-width:520px; margin:0 auto 30px;}
  .closing-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
  .btn{
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.04em;
    padding:13px 26px; border-radius:999px; text-decoration:none;
  }
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-ghost{border:1px solid var(--line-lt); color:var(--text);}

  footer{padding:32px 0; text-align:center; color:var(--text-soft); font-size:13px; font-family:'IBM Plex Mono', monospace;}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }