/* ============ CSS VARIABLES ============ */
    :root{
      --bg: #0b0f14;
      --bg-alt: #0d131c;
      --panel: #0c121a;
      --steel: #0f1822;
      --grid: #132031;
      --line: #1e2d44;
      --text: #e6f1ff;
      --muted: #8aa0b6;
      --accent: #00ffc6;   /* neon aqua */
      --accent-2:#00e5ff;  /* neon cyan */
      --success:#39ff88;   /* neon green */
      --caution:#ff7b00;   /* neon orange */
      --warning:#ff3b3b;   /* neon red */
      --shadow: rgba(0,0,0,.45);

      --glow-accent: 0 0 6px var(--accent), 0 0 12px rgba(0,255,198,.45), 0 0 24px rgba(0,255,198,.25);
      --glow-green: 0 0 8px var(--success), 0 0 16px rgba(57,255,136,.45);
      --glow-red:   0 0 8px var(--warning), 0 0 16px rgba(255,59,59,.45);
      --br: 14px;    /* base radius for panels */
      --hud: 1px solid #20485f;
    }

    /* RESET / BASE  */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(0,229,255,.06), transparent 70%),
        radial-gradient(1000px 400px at 10% 20%, rgba(0,255,198,.05), transparent 70%),
        #0a0f14;
      color:var(--text);
      font-family:"Share Tech Mono", system-ui, monospace;
      line-height:1.6;
      overflow-x:hidden;
      scroll-behavior:smooth;
    }

    /* Subtle radar grid across page background */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(0,255,198,.065) 45px, transparent 46px),
        repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(0,229,255,.055) 45px, transparent 46px);
      opacity: 0.25;
      z-index:0;
    }

    /* Light scanlines overlay */
    body::after{
      content:"";
      position:fixed; inset:0; pointer-events:none;
      background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.14) 50%);
      background-size:100% 3px;
      mix-blend-mode:soft-light;
      opacity:.25;
      z-index:0;
    }

    a{color:var(--accent)}
    img{max-width:100%; height:auto; display:block}
    ::selection{background:rgba(0,255,198,.25); color:#fff}

    /* UTILITIES */
    .container{width:min(1200px, 96%); margin-inline: auto;}
    .hud-border{
      border:var(--hud);
      background:linear-gradient(180deg, rgba(0,255,198,.05), rgba(0,229,255,.02)) padding-box,
                 linear-gradient(180deg, rgba(0,255,198,.35), rgba(0,229,255,.15)) border-box;
      box-shadow:0 12px 30px var(--shadow), inset 0 0 24px rgba(0,255,198,.05);
      border-radius:calc(var(--br) + 4px);
      position:relative;
      overflow:hidden;
    }
    .hud-corners::before,
    .hud-corners::after{
      content:"";
      position:absolute;
      width:14px; height:14px;
      border:2px solid var(--accent);
      filter:drop-shadow(0 0 4px rgba(0,255,198,.6));
    }
    .hud-corners::before{top:10px; left:10px; border-right:none; border-bottom:none}
    .hud-corners::after{bottom:10px; right:10px; border-left:none; border-top:none}

    .tag{
      font-family:"Orbitron", system-ui, sans-serif;
      letter-spacing:1px;
      color: #cfe8ff;
      font-size:.85rem;
      text-transform:uppercase;
      margin-left: 10px;
    }

    /* NAV (CONTROL PANEL) */
    .nav{
      position:fixed; top:0; left:0; right:0; z-index:1000;
      backdrop-filter: blur(6px);
      background:linear-gradient(180deg, rgba(10,16,22,.86), rgba(10,16,22,.65));
      border-bottom:1px solid #173245;
      box-shadow:0 8px 24px rgba(0,0,0,.5);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:12px 0;
    }

    .brand{
      display:flex; align-items:center; gap:12px; text-decoration:none;
    }
    .brand-logo{
      width:40px; height:40px; position:relative; flex:0 0 auto;
      border:1px solid #1a4254; border-radius:10px;
      box-shadow:inset 0 0 14px rgba(0,255,198,.12), 0 0 10px rgba(0,0,0,.4);
      background:
        radial-gradient(10px 10px at 50% 50%, rgba(0,255,198,.4), transparent 70%),
        linear-gradient(45deg, rgba(0,229,255,.15), rgba(0,255,198,.05));
    }
    .brand-logo::after{
      /* HUD crosshair */
      content:"";
      position:absolute; inset:8px;
      border:1px dashed rgba(0,255,198,.55);
      border-radius:6px;
      box-shadow:0 0 10px rgba(0,255,198,.35);
    }
    .brand-name{
      font-family:"Stardos Stencil", system-ui, sans-serif;
      font-weight:700; letter-spacing:2px; color:#dff;
      text-shadow:0 0 6px rgba(0,255,198,.35);
      font-size:1.15rem;
    }

    /* HUD toggle (mobile) */
    #nav-toggle{display:none}
    .hud-toggle{
      display:none; cursor:pointer; padding:10px 12px; border-radius:10px;
      border:1px solid #173245; color:#9cd; position:relative;
      background:linear-gradient(180deg, #0b131b, #0a1119);
      box-shadow:inset 0 0 10px rgba(0,255,198,.08);
    }
    .hud-toggle .bar, .hud-toggle .bar::before, .hud-toggle .bar::after{
      display:block; width:26px; height:2px; background:var(--accent);
      box-shadow:0 0 10px rgba(0,255,198,.8);
      position:relative; transition:transform .3s ease, opacity .3s ease;
      border-radius:2px;
    }
    .hud-toggle .bar::before, .hud-toggle .bar::after{content:""; position:absolute; left:0}
    .hud-toggle .bar::before{top:-8px}
    .hud-toggle .bar::after{top:8px}

    nav ul{
      display:flex; align-items:center; gap:8px 18px; list-style:none; margin:0; padding:0;
    }
    nav a{
      position:relative; text-decoration:none; color:#cfe8ff;
      font-family:"Orbitron", system-ui, sans-serif; letter-spacing:1px; font-size:.92rem;
      text-transform:uppercase; padding:8px 12px; border-radius:10px;
      border:1px solid #173245;
      background:linear-gradient(180deg, rgba(0,255,198,.06), rgba(0,229,255,.02));
    }
    nav a::after{
      content:""; position:absolute; inset:0; border-radius:10px;
      box-shadow:0 0 0 rgba(0,255,198,0); transition:box-shadow .25s ease, transform .25s ease;
    }
    nav a:hover{
      color:#fff; text-shadow:0 0 8px rgba(0,255,198,.75);
    }
    nav a:hover::after{box-shadow:0 0 14px rgba(0,255,198,.55), inset 0 0 18px rgba(0,255,198,.15)}

    /* Responsive nav */
    @media (max-width:900px){
      .hud-toggle{display:block}
      nav ul{
        position:fixed; top:64px; right:12px; left:12px;
        flex-direction:column; gap:10px; padding:14px; z-index:999;
        transform:translateY(-20px); opacity:0; pointer-events:none; transition:.25s ease;
        background:linear-gradient(180deg, rgba(7,12,18,.98), rgba(7,12,18,.9));
        border:1px solid #173245; border-radius:14px;
        box-shadow:0 18px 42px rgba(0,0,0,.6), inset 0 0 18px rgba(0,255,198,.05);
      }
      #nav-toggle:checked ~ nav ul{transform:translateY(0); opacity:1; pointer-events:auto}
      #nav-toggle:checked + label .bar{transform:rotate(45deg)}
      #nav-toggle:checked + label .bar::before{transform:rotate(90deg) translateX(0); top:0}
      #nav-toggle:checked + label .bar::after{opacity:0}
    }

    /* HERO (MISSION LAUNCH)  */
    .hero{
      position:relative; padding-top:96px; 
      min-height:100vh; display:grid; place-items:center;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45)),
        linear-gradient(120deg, #061018, #081723 45%, #0a1e2e 75%, #071521);
      border-bottom:1px solid #173245;
    }
    /* Moving sky gradient and parallax clouds */
    .sky{
      position:absolute; inset:0; overflow:hidden; z-index:0;
    }
    .clouds{
      position: absolute; inset: 0% 0% 0 -0%;
      background:
        radial-gradient(350px 120px at 20% 30%, rgba(255,255,255,.06), transparent 70%),
        radial-gradient(450px 180px at 70% 25%, rgba(255,255,255,.05), transparent 70%),
        radial-gradient(380px 150px at 30% 70%, rgba(255,255,255,.05), transparent 70%);
      filter: blur(8px) saturate(110%);
      opacity:.35;
    }
    @keyframes drift{
      0%{transform:translateX(-8%)}
      100%{transform:translateX(8%)}
    }

    /* Jet silhouette crossing */
    .jet{
      position:absolute; top:20%; left:-15%; width:min(48vw, 520px); opacity:.55;
      filter: drop-shadow(0 0 12px rgba(0,255,198,.25));
      animation: flyby 28s linear infinite;
    }
    @keyframes flyby{
      0%{transform:translateX(0) translateY(0) rotate(2deg)}
      50%{transform:translateX(125vw) translateY(-10vh) rotate(1deg)}
      51%{transform:translateX(-25vw) translateY(8vh) rotate(-4deg)}
      100%{transform:translateX(15vw) translateY(0) rotate(-2deg)}
    }

    /* Runway lights */
    .runway{
      position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
      width:120vw; height:180px; pointer-events:none; opacity:.35;
      background:
        repeating-radial-gradient(circle at center,
          rgba(0,255,198,.55) 0 3px, transparent 4px 30px),
        radial-gradient(60vw 180px at 50% 110%, rgba(0,229,255,.3), transparent 70%);
      mask:linear-gradient(to top, black 40%, transparent 95%);
      animation: runway 3.5s linear infinite;
      filter: blur(1px);
    }
    @keyframes runway{
      from{background-position:0 0, 0 0}
      to{background-position:600px 0, 0 0}
    }

    .hero-content{
      z-index:1; text-align:center; padding:60px 0 100px;
    }
    .hero h1{
      font-family:"Stardos Stencil", system-ui, sans-serif;
      font-size:clamp(2.1rem, 5vw, 4.4rem);
      line-height:1.1; margin:0 0 14px;
      text-transform:uppercase; letter-spacing:3px;
      text-shadow:0 0 18px rgba(0,255,198,.25), 0 0 6px rgba(0,229,255,.35);
    }
    .hero p{
      color:var(--muted); max-width:760px; margin:0 auto 26px;
      font-size:clamp(.95rem, 2.2vw, 1.05rem);
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px; padding:14px 22px; border-radius:14px; text-decoration:none;
      font-family:"Orbitron", system-ui, sans-serif;
      letter-spacing:1.5px; text-transform:uppercase; position:relative;
      border:1px solid #1a4254; color:#002b25; overflow:hidden;
      background: linear-gradient(180deg, #7ffff1, #3efed3);
      box-shadow: 0 0 18px rgba(0,255,198,.45), inset 0 0 16px rgba(255,255,255,.25);
      transition: transform .15s ease, box-shadow .25s ease;
    }
    .btn:hover{transform:translateY(-2px); box-shadow:0 0 26px rgba(0,255,198,.65), inset 0 0 20px rgba(255,255,255,.35)}
    .btn:active{transform:translateY(0)}
    .btn-launch{
      font-weight:800; font-size:1rem;
      text-shadow:0 0 8px rgba(255,255,255,.65);
      animation:pulse 2s ease-in-out infinite;
    }
    @keyframes pulse{
      0%,100%{filter:drop-shadow(0 0 8px rgba(0,255,198,.45))}
      50%{filter:drop-shadow(0 0 18px rgba(0,255,198,.85))}
    }

    /* SECTION WRAPPER TITLES  */
    .section{
      position:relative; padding:80px 0;
      background:linear-gradient(180deg, rgba(0,229,255,.03), rgba(0,255,198,.02));
    }
    .section-title{
      display:flex; align-items:center; gap:10px; margin-bottom:22px;
      font-family:"Orbitron"; letter-spacing:2px; color:#d1faff;
      text-transform:uppercase; font-weight:800;
    }
    .section-title .dot{
      width:10px; height:10px; border-radius:50%;
      background:var(--success); box-shadow:var(--glow-green);
      animation: blink 1.7s steps(1) infinite;
    }
    @keyframes blink{
      50%{opacity:.45}
    }

    /* COURSES (tutorials)  */
    .courses{
      background:
        linear-gradient(180deg, rgba(0,255,198,.02), rgba(0,229,255,.015)),
        radial-gradient(900px 400px at 10% 5%, rgba(0,229,255,.06), transparent 70%),
        #0a1017;
      border-top:1px solid #173245; border-bottom:1px solid #173245;
    }
    .grid{
      display:grid; gap:18px;
      grid-template-columns: repeat(12, 1fr);
    }
    .col-4{grid-column: span 4}
    @media (max-width:1000px){ .col-4{grid-column: span 6} }
    @media (max-width:620px){ .col-4{grid-column: span 12} }

    .card{
      min-height:220px; padding:18px; display:flex; flex-direction:column; justify-content:space-between;
      background:linear-gradient(180deg, rgba(17,28,40,.9), rgba(10,16,24,.9));
      border:1px solid #16374a; border-radius:16px; position:relative; overflow:hidden;
      transform: perspective(900px) rotateX(0) rotateY(0) translateZ(0);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 24px rgba(0,255,198,.05);
    }
    .card:hover{
      transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateZ(6px);
      border-color:rgba(0,255,198,.45);
      box-shadow:0 24px 60px rgba(0,255,198,.15), inset 0 0 30px rgba(0,255,198,.08);
    }
    .card::before{
      /* radar grid inside card */
      content:""; position:absolute; inset:0; opacity:.25; pointer-events:none;
      background:
        repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(0,255,198,.15) 23px, transparent 24px),
        repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(0,229,255,.12) 23px, transparent 24px);
    }
    .card::after{
      /* scanning beam */
      content:""; position:absolute; inset:-40% -40%; transform:rotate(15deg);
      background:linear-gradient(90deg, transparent 30%, rgba(0,255,198,.12) 48%, rgba(0,255,198,.2) 50%, rgba(0,255,198,.12) 52%, transparent 70%);
      animation: scan 5.5s linear infinite;
      pointer-events:none;
    }
    @keyframes scan{
      0%{transform:translateX(-40%) rotate(15deg)}
      100%{transform:translateX(40%) rotate(15deg)}
    }

    .card h3{
      font-family:"Orbitron"; margin:6px 0 6px; font-size:1.05rem; letter-spacing:1px;
      text-transform:uppercase; color:#e9feff;
    }
    .card p{color:#9dc0d5; font-size:.95rem; margin:0 0 12px}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      color:#a9f7ff; font-size:.8rem; letter-spacing:1px;
      border:1px dashed rgba(0,255,198,.4);
      padding:4px 8px; border-radius:8px; background:rgba(0,255,198,.05);
    }
    .deploy{
      align-self:flex-start; margin-top:6px;
      display:inline-flex; align-items:center; gap:10px; text-decoration:none;
      color:#032a25; font-weight:800; font-family:"Orbitron"; text-transform:uppercase;
      letter-spacing:1px; font-size:.9rem;
      padding:10px 14px; border-radius:12px; border:1px solid #1a4254;
      background:linear-gradient(180deg, #9bffe9, #55ffd8);
      box-shadow: var(--glow-accent);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .deploy:hover{transform:translateY(-2px); box-shadow:0 0 20px rgba(0,255,198,.65)}
    .deploy::before{
      content:"►"; color:#065; text-shadow:0 0 6px #0fa;
    }

    /* ABOUT */
    .about{
      background:
        linear-gradient(180deg, rgba(0,255,198,.02), rgba(0,229,255,.015)),
        radial-gradient(900px 400px at 10% 5%, rgba(0,229,255,.06), transparent 70%),
        #0a1017;
      border-top:1px solid #173245; border-bottom:1px solid #173245;
    }
    .brief{
      display:grid; gap:16px;
      grid-template-columns: 1.2fr 1fr;
      margin-bottom: 50px;
    }
    @media (max-width:900px){ .brief{grid-template-columns:1fr} }
    .brief .doc{
      padding:22px; border-radius:16px; position:relative;
      background:linear-gradient(180deg, rgba(12,20,30,.85), rgba(10,16,24,.85));
      border:1px solid #173245;
      box-shadow: inset 0 0 18px rgba(0,255,198,.05);
    }
    .doc h3{
      font-family:"Orbitron"; margin:0 0 10px; color:#d9fbff; letter-spacing:1px; text-transform:uppercase;
    }
    .doc p{color:#a5c7da}
    .doc .objective{
      color:#eafff7; font-weight:700; letter-spacing:1px;
      text-shadow:0 0 8px rgba(0,255,198,.3);
    }

    /* TUTOR INTRODUCTION */
    .tutor-section{
      margin-top: 40px;
    }
    .tutor-title{
      font-family:"Orbitron", system-ui, sans-serif;
      font-size: clamp(1.4rem, 3vw, 1.8rem);
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      text-align: center;
      margin-bottom: 30px;
      text-shadow: 0 0 12px rgba(0,255,198,.4);
      border-bottom: 2px solid #173245;
      padding-bottom: 12px;
    }

    .tutor-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    @media (max-width:900px){
      .tutor-grid{
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    .tutor-card{
      position: relative;
      background: linear-gradient(180deg, rgba(17,28,40,.9), rgba(10,16,24,.9));
      border: 1px solid #16374a;
      border-radius: 16px;
      padding: clamp(18px, 3vw, 28px) clamp(16px, 2.5vw, 24px);
      box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 24px rgba(0,255,198,.05);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      overflow: hidden;
    }

    .tutor-card::before{
      /* HUD stripe pattern at top */
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, 
        var(--accent) 0%, 
        var(--accent-2) 50%, 
        var(--accent) 100%
      );
      box-shadow: 0 0 10px rgba(0,255,198,.5);
    }

    .tutor-card::after{
      /* Scanning beam effect */
      content: "";
      position: absolute;
      inset: -40% -40%;
      transform: rotate(15deg);
      background: linear-gradient(90deg, 
        transparent 30%, 
        rgba(0,255,198,.12) 48%, 
        rgba(0,255,198,.2) 50%, 
        rgba(0,255,198,.12) 52%, 
        transparent 70%
      );
      animation: scan 5.5s linear infinite;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s ease;
    }

    .tutor-card:hover{
      transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateZ(6px);
      border-color: rgba(0,255,198,.45);
      box-shadow: 0 24px 60px rgba(0,255,198,.15), inset 0 0 30px rgba(0,255,198,.08);
    }

    .tutor-card:hover::after{
      opacity: 1;
    }

    /* HUD badge */
    .military-badge{
      position: absolute;
      top: 18px;
      right: 18px;
      width: clamp(40px, 6vw, 50px);
      height: clamp(40px, 6vw, 50px);
      background: radial-gradient(circle at center, rgba(0,255,198,.3), rgba(0,229,255,.15));
      border: 2px solid var(--accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Stardos Stencil", system-ui, sans-serif;
      font-size: clamp(1.1rem, 2.5vw, 1.4rem);
      font-weight: 700;
      color: var(--accent);
      box-shadow: 
        0 4px 12px rgba(0,0,0,.5),
        inset 0 0 10px rgba(0,255,198,.3),
        0 0 20px rgba(0,255,198,.3);
      z-index: 10;
    }

    .military-badge::before{
      content: "";
      position: absolute;
      inset: 3px;
      border: 1px dashed rgba(0,255,198,.55);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(0,255,198,.35);
    }

    .tutor-content{
      margin-left: 0;
      padding-top: 10px;
      position: relative;
      z-index: 5;
    }

    .tutor-name{
      font-family: "Stardos Stencil", system-ui, sans-serif;
      font-size: clamp(1.3rem, 3.5vw, 1.6rem);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 8px 0;
      text-shadow: 0 0 10px rgba(0,255,198,.5);
    }

    .tutor-title-text{
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: clamp(.85rem, 2vw, 1rem);
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #8aa0b6;
      margin: 0 0 20px 0;
    }

    .tutor-achievements{
      list-style: none;
      padding: 0;
      margin: 20px 0;
    }

    .tutor-achievements li{
      position: relative;
      padding: clamp(8px, 1.5vw, 10px) 0 clamp(8px, 1.5vw, 10px) clamp(28px, 4vw, 35px);
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: clamp(.82rem, 1.8vw, .92rem);
      font-weight: 600;
      letter-spacing: .5px;
      color: #a5c7da;
      border-left: 2px solid #173245;
      margin-bottom: 8px;
    }

    .tutor-achievements li::before{
      /* Neon star icon */
      content: "★";
      position: absolute;
      left: clamp(6px, 1.2vw, 8px);
      top: 50%;
      transform: translateY(-50%);
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      color: var(--accent);
      text-shadow: 0 0 8px rgba(0,255,198,.8);
    }

    .tutor-tagline{
      margin-top: 20px;
      padding: clamp(12px, 2vw, 16px);
      background: rgba(0,0,0,.3);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      font-family: "Share Tech Mono", monospace;
      font-size: clamp(.8rem, 1.6vw, .88rem);
      line-height: 1.6;
      color: #8aa0b6;
      font-style: italic;
      box-shadow: inset 0 0 12px rgba(0,0,0,.4);
    }

    @media (max-width:620px){
      .tutor-achievements li{
        padding-left: 28px;
        font-size: .85rem;
      }
      .tutor-achievements li::before{
        left: 6px;
        font-size: 1rem;
      }
      .military-badge{
        top: 12px;
        right: 12px;
      }
    }

    /* CONTACT (TRANSMISSION) */
    .contact{
      background:
        linear-gradient(180deg, rgba(0,255,198,.03), rgba(0,229,255,.03)),
        #0a1017;
      border-top:1px solid #173245; border-bottom:1px solid #173245;
    }
    form{
      display:grid; gap:14px;
      grid-template-columns: repeat(12, 1fr);
    }
    .field{grid-column: span 6}
    .field-full{grid-column: span 12}
    @media (max-width:800px){ .field{grid-column: span 12} }

    .input{
      width:100%; padding:12px 14px; color:#dff; font-size:.98rem;
      background:linear-gradient(180deg, rgba(12,20,30,.8), rgba(10,16,24,.8));
      border:1px solid #173245; border-radius:12px; outline:none;
      transition:border-color .2s ease, box-shadow .2s ease;
      box-shadow: inset 0 0 14px rgba(0,255,198,.05);
    }
    .input:focus{
      border-color:rgba(57,255,136,.8);
      box-shadow: var(--glow-green), inset 0 0 14px rgba(0,255,198,.08);
    }
    .input:focus:invalid{
      border-color: rgba(255,59,59,.9);
      box-shadow: var(--glow-red), inset 0 0 14px rgba(255,59,59,.08);
    }
    textarea.input{min-height:140px; resize:vertical}

    .send{
      justify-self:start;
      display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
      color:#032a25; font-weight:800; font-family:"Orbitron"; text-transform:uppercase;
      letter-spacing:1.4px; font-size:.95rem; padding:12px 18px; border-radius:12px;
      border:1px solid #1a4254; background:linear-gradient(180deg, #9bffe9, #55ffd8);
      box-shadow: var(--glow-accent);
      position:relative; overflow:hidden;
    }
    .send::before{
      /* radar pulse */
      content:""; position:absolute; inset:-40% -20%;
      background:radial-gradient(circle at center, rgba(0,255,198,.3), transparent 60%);
      animation:pulse2 2.2s ease-out infinite;
      pointer-events:none;
    }
    @keyframes pulse2{
      0%{transform:scale(.6); opacity:.65}
      100%{transform:scale(1.6); opacity:0}
    }

    /* FOOTER */
    .footer{
      position:relative; overflow:hidden;
      background:#070d13; border-top:1px solid #173245; padding:28px 0 38px;
    }
    .radar{
      position:absolute; left:50%; transform:translateX(-50%); bottom:-90px;
      width:340px; aspect-ratio:1/1; opacity:.3; pointer-events:none;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(0,255,198,.25) 2px, transparent 3px),
        radial-gradient(circle at 50% 50%, rgba(0,255,198,.08), transparent 60%),
        repeating-radial-gradient(circle at 50% 50%, rgba(0,255,198,.08), rgba(0,255,198,.08) 1px, transparent 2px 8px);
      box-shadow: inset 0 0 40px rgba(0,255,198,.15);
    }
    .radar::after{
      content:""; position:absolute; inset:0; border-radius:50%;
      background: conic-gradient(from 0deg, rgba(0,255,198,.3) 0 20deg, transparent 20deg 360deg);
      animation: sweep 6s linear infinite;
    }
    @keyframes sweep{to{transform:rotate(360deg)}}

    .footer-row{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
    }
    @media (max-width:740px){ .footer-row{flex-direction:column; text-align:center} }
    .social{
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .hud-icon{
      display:inline-flex; align-items:center; gap:8px; text-decoration:none;
      color:#bdefff; font-family:"Orbitron"; font-size:.85rem; letter-spacing:1px;
      padding:8px 12px; border-radius:10px; border:1px solid #173245;
      background:linear-gradient(180deg, rgba(0,255,198,.06), rgba(0,229,255,.02));
      box-shadow:inset 0 0 10px rgba(0,255,198,.06);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .hud-icon .dot{
      width:8px; height:8px; border-radius:50%; background:var(--accent);
      box-shadow:0 0 8px rgba(0,255,198,.9);
    }
    .hud-icon:hover{transform:translateY(-2px); box-shadow:0 0 16px rgba(0,255,198,.35), inset 0 0 12px rgba(0,255,198,.12)}

    .copy{
      color:#90a9bd; font-family:"Stardos Stencil"; letter-spacing:2px; font-size:.9rem;
    }

    /* MISC / ACCESSIBILITY */
    .warning-lights{
      position:fixed; top:10px; left:10px; display:flex; gap:6px; z-index:1200; pointer-events:none;
    }
    .led{width:8px; height:8px; border-radius:50%}
    .led.red{background:var(--warning); box-shadow:0 0 10px rgba(255,59,59,.8)}
    .led.orange{background:var(--caution); box-shadow:0 0 10px rgba(255,123,0,.9)}
    .led.green{background:var(--success); box-shadow:0 0 10px rgba(57,255,136,.9)}
    .led.red{animation:ledblink 1.2s steps(1) infinite}
    .led.orange{animation:ledblink 2.1s steps(1) infinite}
    .led.green{animation:ledblink 3.2s steps(1) infinite}
    @keyframes ledblink{50%{opacity:.2}}

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

    /* SPACING */
    .mt-10{margin-top:10px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}
    .mb-0{margin-bottom:0}.mb-10{margin-bottom:10px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}