:root{
  --bg:#060914;
  --bg-soft:#0d1320;
  --panel:#0f1726;
  --line:rgba(255,255,255,.08);
  --text:#edf2ff;
  --muted:#98a7c4;
  --blue:#5fa3ff;
  --gold:#c7a14a;
  --white:#ffffff;
  --shadow:0 18px 55px rgba(0,0,0,.34);
  --radius:22px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.page-shell{overflow:hidden}

.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(6,9,20,.30);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  min-height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{display:flex; align-items:center; gap:16px}
.brand img{height:44px; width:auto; object-fit:contain}
.brand-word{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.nav-toggle{
  display:none;
  background:transparent; border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:12px;
}
.nav-links{display:flex; align-items:center; gap:24px; color:#c5d0e8;}
.nav-links a{font-size:14px; color:#bcc8e2;}
.nav-links a:hover{color:var(--white)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:14px; padding:14px 20px; font-weight:700; font-size:14px;
  border:1px solid transparent; transition:.25s ease;
}
.btn-primary{
  background:linear-gradient(180deg, #dfba65, #c7a14a);
  color:#0a0d12;
  box-shadow:0 10px 28px rgba(199,161,74,.28);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
  color:var(--text);
}
.btn-secondary:hover{background:rgba(255,255,255,.06)}

.hero{
  position:relative;
  min-height:calc(100vh - 78px);
  display:flex;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/bg-clean-hero.jpg') center center/cover no-repeat fixed;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 22%, rgba(199,161,74,.08), transparent 16%),
    radial-gradient(circle at 20% 74%, rgba(95,163,255,.07), transparent 20%),
    linear-gradient(90deg, rgba(6,9,20,.30), rgba(6,9,20,.30) 42%, rgba(6,9,20,.30));
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(95,163,255,.03) 50%, transparent 60%);
  animation:sweep 10s linear infinite;
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:42px; align-items:center;
  position:relative; z-index:2;
  padding:72px 0 56px;
}
.eyebrow{
  display:inline-block; padding:8px 12px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); color:#d9e3f7; border-radius:999px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.hero h1{
  margin:18px 0 18px; font-size: clamp(42px, 6vw, 72px);
  line-height:.98; letter-spacing:-.04em; max-width: 760px;
}
.hero p.lead{margin:0 0 26px; font-size:18px; line-height:1.65; max-width:760px; color:var(--muted);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{margin-top:18px; font-size:13px; color:#9db1d3;}

.metrics-board{
  position:relative; padding:24px; border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); overflow:hidden;
}
.metrics-board::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(95,163,255,.12), transparent 35%, rgba(199,161,74,.1) 80%, transparent);
  pointer-events:none;
}
.metrics-board-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.metrics-board h3{margin:0; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:#dce5f8}
.signal-badge{display:inline-flex; align-items:center; gap:8px; color:#dbe6f9; font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.signal-badge .dot{width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 8px rgba(199,161,74,.09);}
.metric-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px;}
.metric{
  padding:18px; border-radius:18px; background:rgba(6,9,20,.30);
  border:1px solid rgba(255,255,255,.06);
}
.metric .kicker{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9db1d3; margin-bottom:10px;}
.metric .value{font-size:34px; font-weight:800; letter-spacing:-.04em;}
.metric .sub{margin-top:8px; color:var(--muted); font-size:13px;}
.live-bar{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.live-pill{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07); border-radius:999px; padding:10px 14px;
  color:#dce7fb; font-size:13px;
}
.pulse{
  width:9px; height:9px; border-radius:50%; background:#5fa3ff;
  box-shadow:0 0 0 0 rgba(95,163,255,.6); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,163,255,.48)}
  70%{box-shadow:0 0 0 14px rgba(95,163,255,0)}
  100%{box-shadow:0 0 0 0 rgba(95,163,255,0)}
}

.section{position:relative; padding:86px 0;}
.section.bg-alt{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/bg-section.svg') center/cover no-repeat fixed;
  position:relative;
}
.section.bg-alt::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 18%, rgba(95,163,255,.03), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(199,161,74,.03), transparent 20%);
  pointer-events:none;
}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:22px; margin-bottom:28px;}
.section-head h2{margin:0; font-size: clamp(30px, 4vw, 52px); line-height:1; letter-spacing:-.04em;}
.section-head p{margin:0; max-width:720px; color:var(--muted);}

.panel-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:20px;}
.panel{
  position:relative; padding:24px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); overflow:hidden;
}
.panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent);
  transform:translateX(-100%); transition:1s ease;
}
.panel:hover::after{transform:translateX(100%)}
.panel h3{margin:0 0 12px; font-size:24px; letter-spacing:-.03em;}
.panel p{margin:0; color:var(--muted)}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-7{grid-column:span 7}
.span-6{grid-column:span 6}
.span-5{grid-column:span 5}
.span-4{grid-column:span 4}
.panel-tag{
  display:inline-flex; margin-bottom:14px; padding:7px 10px; border-radius:999px;
  font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#d9e3f7;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.feature-list{margin:16px 0 0; padding:0; list-style:none}
.feature-list li{
  display:flex; gap:12px; align-items:flex-start; padding:10px 0;
  border-top:1px solid rgba(255,255,255,.06); color:#dce6fb;
}
.feature-list li:first-child{border-top:none; padding-top:0}
.feature-list li .tick{
  flex:0 0 10px; height:10px; margin-top:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 7px rgba(199,161,74,.08);
}
.small{font-size:14px}
.muted{color:var(--muted)}
.how-steps{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; margin-top:10px;}
.step{
  padding:20px; border-radius:20px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.step-num{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(95,163,255,.25), rgba(95,163,255,.08));
  border:1px solid rgba(95,163,255,.35); margin-bottom:12px; font-weight:800;
}
.step h4{margin:0 0 10px; font-size:18px}
.step p{margin:0; color:var(--muted)}

.hud{position:relative; min-height:340px; display:grid; place-items:center;}
.hud-rings{position:relative; width:320px; height:320px;}
.ring, .ring-2, .ring-3, .gear{position:absolute; inset:0; border-radius:50%;}
.ring{border:1px solid rgba(95,163,255,.22); animation:spin 34s linear infinite}
.ring-2{inset:28px; border:2px dashed rgba(199,161,74,.48); animation:spin-rev 22s linear infinite;}
.ring-3{inset:68px; border:1px solid rgba(255,255,255,.14); animation:spin 16s linear infinite;}
.gear{
  inset:112px;
  background:
    radial-gradient(circle at center, rgba(199,161,74,.16), transparent 48%),
    repeating-conic-gradient(from 0deg, rgba(95,163,255,.28) 0 8deg, transparent 8deg 18deg);
  mask: radial-gradient(circle at center, transparent 0 39%, black 40%);
  -webkit-mask: radial-gradient(circle at center, transparent 0 39%, black 40%);
  animation:spin-rev 12s linear infinite;
}
.hud-center{
  position:absolute; inset:106px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.08); background:rgba(6,9,20,.30); text-align:center;
}
.hud-center strong{display:block; font-size:38px; letter-spacing:-.04em}
.hud-center span{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:#a9bad8}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}

.dials{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:18px;}
.dial{
  position:relative; padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); cursor:pointer;
}
.dial:hover{border-color:rgba(199,161,74,.38)}
.dial .dial-label{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:#abc0e1;}
.dial .dial-value{margin-top:10px; font-size:32px; font-weight:800; letter-spacing:-.03em;}
.dial::after{
  content:""; position:absolute; right:14px; top:14px; width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(199,161,74,.55); border-top-color:transparent; animation:spin 6s linear infinite;
}
.dial-pulse{box-shadow:0 0 0 1px rgba(199,161,74,.35), 0 0 35px rgba(199,161,74,.16);}
.exec-card{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px;}
.exec-box{
  padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(6,9,20,.30);
}
.exec-box h4{margin:0 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.1em; color:#dce5fb}
.exec-box p{margin:0; color:#b9c9e5}
.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.badge{
  padding:8px 10px; border-radius:999px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
}
.badge-danger{color:#ffb4b4; border-color:rgba(255,102,102,.24); background:rgba(130,22,22,.18);}
.badge-warn{color:#ffd99f; border-color:rgba(199,161,74,.28); background:rgba(71,53,17,.2);}
.badge-ok{color:#c3e6ff; border-color:rgba(95,163,255,.28); background:rgba(12,38,71,.22);}

.contact-strip{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; margin-top:28px;
  padding:16px 18px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
}
.contact-strip .phone{font-size:24px; font-weight:800; letter-spacing:-.03em;}
.form-card{
  padding:26px; border-radius:24px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); box-shadow:var(--shadow);
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#abc0e1;}
.field input,.field textarea,.field select{
  width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.1);
  background:rgba(6,9,20,.30); color:var(--text); padding:14px 14px; font:inherit;
}
.field textarea{min-height:140px; resize:vertical}
.field.full{grid-column:1 / -1}
.footer{padding:28px 0 42px; border-top:1px solid rgba(255,255,255,.06); color:#9cb0d2;}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:22px; align-items:start;}
.footer small{display:block; margin-top:10px; color:#7d91b2}
.footer-brand{font-size:22px; font-weight:800; letter-spacing:-.03em;}
.portal-wrap{
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/bg-portal.svg') center/cover no-repeat fixed;
  display:grid; place-items:center;
}
.portal-card{
  width:min(760px, calc(100% - 40px)); padding:32px; border-radius:28px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
}
.portal-card img{height:86px; margin:0 auto 18px; width:auto; object-fit:contain}
.portal-card h1{margin:0 0 14px; font-size:42px; letter-spacing:-.04em;}
.portal-card p{margin:0 auto 24px; color:var(--muted); max-width:560px;}

@media (max-width: 1080px){
  .hero-grid{grid-template-columns:1fr}
  .how-steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 12}
  .dials,.exec-card,.form-grid,.metric-grid{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{
    position:absolute; left:20px; right:20px; top:78px;
    flex-direction:column; align-items:flex-start;
    background:rgba(8,12,22,.95); border:1px solid rgba(255,255,255,.08);
    border-radius:18px; padding:16px; display:none;
  }
  .nav-links.open{display:flex}
}


@keyframes sweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}


.panel{
  backdrop-filter: blur(6px);
}
.panel:hover{
  box-shadow:
    0 0 0 1px rgba(199,161,74,.24),
    0 18px 55px rgba(0,0,0,.34),
    0 0 34px rgba(199,161,74,.10);
}


.hero .container,
.section .container{
  position:relative;
  z-index:2;
}

.hero h1{
  text-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.hero p.lead,
.section-head p,
.panel p,
.metric .sub{
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.metrics-board{
  background:linear-gradient(180deg, rgba(9,14,26,.82), rgba(9,14,26,.68));
  backdrop-filter: blur(10px);
}

.panel{
  background:linear-gradient(180deg, rgba(14,22,38,.86), rgba(14,22,38,.72));
}

.brand img{
  height:48px !important;
  width:auto;
  object-fit:contain;
}

@media (max-width: 900px){
  .hero{
    background:
      linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
      url('../assets/bg-custom-hero.png') center top/cover no-repeat scroll;
  }
}


.hero .container,
.section .container{
  position:relative;
  z-index:2;
}

.hero h1,
.hero p.lead,
.section-head h2,
.section-head p,
.panel h3,
.panel p,
.metric .value,
.metric .sub{
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
}

.metrics-board{
  background:linear-gradient(180deg, rgba(9,14,26,.84), rgba(9,14,26,.72));
  backdrop-filter: blur(12px);
}

.panel{
  background:linear-gradient(180deg, rgba(14,22,38,.88), rgba(14,22,38,.76));
}

.brand img{
  height:54px !important;
  width:auto;
  object-fit:contain;
}

.portal-card img{
  height:120px !important;
  width:auto;
  object-fit:contain;
}

@media (max-width: 900px){
  .hero{
    background:
      linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
      url('../assets/bg-clean-hero.jpg') center top/cover no-repeat scroll;
  }
}


.brand {
  display:flex;
  align-items:center;
}

.brand img{
  height:48px;
  width:auto;
  object-fit:contain;
}

.header-inner{
  justify-content:space-between;
}


/* Bigger header logo */
.brand img{
  height:96px !important; /* 2x taller */
  width:auto;
  transform: scaleX(1.5); /* wider look */
  transform-origin: left center;
}


/* Half width logo adjustment */
.brand img{
  height:96px;
  width:auto;
  max-width:300px;
}


/* Page-specific selected parallax backgrounds */
.hero.home-hero{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/home-bg.jpg') center center/cover no-repeat fixed !important;
}
.hero.platform-hero{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/platform-bg.jpg') center center/cover no-repeat fixed !important;
}
.hero.features-hero{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/features-bg.jpg') center center/cover no-repeat fixed !important;
}
.hero.intelligence-hero{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/intelligence-bg.jpg') center center/cover no-repeat fixed !important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6,9,20,.30), rgba(6,9,20,.30) 42%, rgba(6,9,20,.30));
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, transparent 40%, rgba(95,163,255,.035) 50%, transparent 60%);
  animation:sweep 10s linear infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}



/* Additional page-specific backgrounds for remaining pages */
.hero.company-hero{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/home-bg.jpg') center center/cover no-repeat fixed !important;
}
.hero.demo-hero{
  background:
    linear-gradient(180deg, rgba(6,9,20,.30), rgba(6,9,20,.30)),
    url('../assets/platform-bg.jpg') center center/cover no-repeat fixed !important;
}
@media (max-width: 900px){
  .hero.home-hero,
  .hero.platform-hero,
  .hero.features-hero,
  .hero.intelligence-hero,
  .hero.company-hero,
  .hero.demo-hero{
    background-attachment: scroll !important;
  }
}

/* reduce logo width by 25% */
.brand img{
  max-width: 75%;
}



/* Mobile optimization pass */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

.container{
  width:min(var(--max), calc(100% - 28px));
}

@media (max-width: 1200px){
  .header-inner{
    gap:14px;
  }
  .brand img{
    max-width:220px !important;
    height:auto !important;
  }
}

@media (max-width: 900px){
  .site-header{
    position:sticky;
  }

  .header-inner{
    min-height:72px;
    align-items:center;
  }

  .brand{
    min-width:0;
    flex:1;
  }

  .brand img{
    max-width:180px !important;
    height:auto !important;
  }

  .btn{
    padding:12px 16px;
    font-size:13px;
  }

  .hero{
    min-height:auto;
    padding:24px 0 36px;
  }

  .hero-grid{
    gap:22px;
    padding:32px 0 20px;
  }

  .hero h1{
    font-size:clamp(32px, 9vw, 48px);
    line-height:1.02;
    margin:14px 0 14px;
  }

  .hero p.lead{
    font-size:15px;
    line-height:1.55;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn{
    width:100%;
  }

  .metrics-board{
    padding:16px;
    border-radius:18px;
  }

  .metric .value{
    font-size:28px;
  }

  .section{
    padding:54px 0;
  }

  .section-head{
    gap:12px;
    margin-bottom:20px;
  }

  .section-head h2{
    font-size:clamp(26px, 8vw, 36px);
  }

  .section-head p{
    font-size:14px;
    line-height:1.55;
  }

  .panel{
    padding:18px;
    border-radius:18px;
  }

  .panel h3{
    font-size:20px;
  }

  .how-steps{
    grid-template-columns:1fr;
    gap:14px;
  }

  .step{
    padding:16px;
  }

  .dials{
    grid-template-columns:1fr;
  }

  .dial{
    padding:16px;
  }

  .contact-strip{
    padding:14px;
  }

  .contact-strip .phone{
    font-size:20px;
  }

  .footer{
    padding:20px 0 28px;
  }

  .footer-grid{
    gap:18px;
  }

  .portal-card{
    padding:24px 18px;
    border-radius:22px;
  }

  .portal-card h1{
    font-size:34px;
  }

  .portal-card img{
    max-width:220px;
    height:auto !important;
  }
}

@media (max-width: 640px){
  .container{
    width:calc(100% - 22px);
  }

  .header-inner{
    min-height:68px;
  }

  .brand img{
    max-width:150px !important;
  }

  .nav-toggle{
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
  }

  .nav-links{
    left:11px;
    right:11px;
    top:68px;
    padding:14px;
    gap:12px;
  }

  .hero{
    background-position:center top !important;
  }

  .hero-grid{
    padding:22px 0 16px;
  }

  .eyebrow{
    font-size:10px;
    padding:7px 10px;
  }

  .hero h1{
    font-size:clamp(28px, 10vw, 40px);
  }

  .hero p.lead{
    font-size:14px;
  }

  .metrics-board-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .metric-grid{
    grid-template-columns:1fr;
  }

  .live-bar{
    gap:8px;
  }

  .live-pill{
    width:100%;
    justify-content:flex-start;
    padding:9px 12px;
    font-size:12px;
  }

  .section{
    padding:46px 0;
  }

  .panel-grid{
    gap:14px;
  }

  .panel{
    padding:16px;
  }

  .panel-tag{
    font-size:10px;
  }

  .panel h3{
    font-size:18px;
  }

  .feature-list li{
    gap:10px;
    font-size:14px;
  }

  .exec-card{
    grid-template-columns:1fr;
    gap:12px;
  }

  .exec-box{
    padding:14px;
  }

  .form-card{
    padding:18px 14px;
    border-radius:18px;
  }

  .field input,
  .field textarea,
  .field select{
    padding:12px;
    font-size:16px; /* avoids iOS zoom */
  }

  .btn{
    width:100%;
  }

  .contact-strip .btn{
    width:100%;
  }

  .footer-brand{
    font-size:20px;
  }
}


/* Dedicated mobile version overrides */
body{
  background:#060914;
}
.site-header{
  position:sticky;
}
.container{
  width:calc(100% - 22px);
}
.header-inner{
  min-height:68px;
  gap:12px;
}
.brand img{
  max-width:150px !important;
  height:auto !important;
}
.nav-toggle{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}
.nav-links{
  position:absolute;
  left:11px;
  right:11px;
  top:68px;
  flex-direction:column;
  align-items:flex-start;
  background:rgba(8,12,22,.97);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  gap:12px;
  display:none;
}
.nav-links.open{display:flex}
.hero{
  min-height:auto !important;
  padding:18px 0 30px !important;
  background-position:center top !important;
  background-attachment:scroll !important;
}
.hero-grid{
  grid-template-columns:1fr !important;
  gap:22px !important;
  padding:22px 0 16px !important;
}
.eyebrow{
  font-size:10px;
  padding:7px 10px;
}
.hero h1{
  font-size:clamp(28px, 10vw, 40px) !important;
  line-height:1.02 !important;
  margin:14px 0 14px !important;
}
.hero p.lead{
  font-size:14px !important;
  line-height:1.55 !important;
}
.hero-actions{
  flex-direction:column !important;
  align-items:stretch !important;
}
.hero-actions .btn,
.btn{
  width:100%;
}
.metrics-board{
  padding:16px !important;
  border-radius:18px !important;
}
.metrics-board-top{
  flex-direction:column;
  align-items:flex-start;
}
.metric-grid{
  grid-template-columns:1fr !important;
}
.metric .value{
  font-size:28px !important;
}
.live-bar{
  gap:8px !important;
}
.live-pill{
  width:100%;
  justify-content:flex-start;
  padding:9px 12px;
  font-size:12px;
}
.section{
  padding:46px 0 !important;
}
.section-head{
  gap:12px !important;
  margin-bottom:20px !important;
}
.section-head h2{
  font-size:clamp(26px, 8vw, 36px) !important;
}
.section-head p{
  font-size:14px !important;
  line-height:1.55 !important;
}
.panel-grid{
  grid-template-columns:1fr !important;
  gap:14px !important;
}
.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{
  grid-column:span 1 !important;
}
.panel{
  padding:16px !important;
  border-radius:18px !important;
}
.panel h3{
  font-size:18px !important;
}
.how-steps,
.dials,
.exec-card,
.form-grid{
  grid-template-columns:1fr !important;
  gap:12px !important;
}
.step,
.exec-box{
  padding:14px !important;
}
.contact-strip{
  grid-template-columns:1fr !important;
  padding:14px !important;
}
.contact-strip .phone{
  font-size:20px !important;
}
.field input,
.field textarea,
.field select{
  padding:12px !important;
  font-size:16px !important;
}
.footer{
  padding:20px 0 28px !important;
}
.footer-grid{
  grid-template-columns:1fr !important;
  gap:18px !important;
}
.footer-brand{
  font-size:20px !important;
}
.portal-card{
  width:min(760px, calc(100% - 22px));
  padding:24px 18px !important;
  border-radius:22px !important;
}
.portal-card h1{
  font-size:34px !important;
}
.portal-card img{
  max-width:220px;
  height:auto !important;
}


/* Mobile-only header and hero cleanup */
.site-header{
  background: rgba(6,9,20,.88) !important;
}

.header-inner{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas:
    "brand login"
    "menu menu" !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:10px !important;
  min-height:auto !important;
  padding:10px 0 !important;
}

.brand{
  grid-area: brand !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.brand img{
  max-width:130px !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
}

.header-inner > .btn,
.header-inner > a.btn{
  grid-area: login !important;
  width:auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  padding:10px 12px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  justify-self:end !important;
}

.nav-toggle{
  grid-area: menu !important;
  width:100% !important;
  display:block !important;
  margin:0 !important;
}

.nav-links{
  top:120px !important;
}

@media (max-width: 640px){
  .header-inner{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .brand img{
    max-width:115px !important;
  }
  .header-inner > .btn,
  .header-inner > a.btn{
    padding:9px 10px !important;
    font-size:11px !important;
  }
  .nav-links{
    top:112px !important;
  }
}

/* Cleaner mobile hero background */
.hero{
  background-position:center 20% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  position:relative !important;
}

.hero::before{
  background:
    linear-gradient(180deg, rgba(6,9,20,.56), rgba(6,9,20,.70)) !important;
}

.hero::after{
  opacity:.35 !important;
}

.metrics-board{
  background:linear-gradient(180deg, rgba(9,14,26,.88), rgba(9,14,26,.78)) !important;
}

.panel{
  background:linear-gradient(180deg, rgba(14,22,38,.92), rgba(14,22,38,.84)) !important;
}


/* Precise centering for schedule demo */
.schedule-head-center{
  text-align:center;
  align-items:center;
  justify-content:center;
}

.schedule-head-center h2{
  text-align:center;
  margin:0 auto 10px;
}

.schedule-head-center p{
  text-align:center;
  margin:0 auto 20px;
  max-width:600px;
}

.schedule-grid-center{
  justify-content:center !important;
  display:flex !important;
}

.schedule-grid-center .panel{
  max-width:700px;
  width:100%;
  margin:0 auto;
}


/* Final stack + center fix */
.schedule-text-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  margin-bottom:20px;
}

.schedule-text-stack h2{
  margin:0;
}

.schedule-text-stack p{
  margin:0;
  max-width:600px;
}


/* Live decision console upgrade */
.console-upgrade{
  background:
    radial-gradient(circle at 20% 20%, rgba(95,163,255,.12), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(199,161,74,.12), transparent 26%),
    linear-gradient(180deg, rgba(9,14,26,.86), rgba(9,14,26,.72));
  backdrop-filter: blur(12px);
}

.console-topline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.console-chip{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#dce7fb;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.console-bottom{
  margin-top:18px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:stretch;
}

.needle-card,
.signal-stack{
  border-radius:18px;
  background:rgba(6,9,20,.42);
  border:1px solid rgba(255,255,255,.06);
  padding:18px;
}

.needle-kicker{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9db1d3;
  margin-bottom:8px;
}

.gauge-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 0 2px;
}

.gauge{
  position:relative;
  width:220px;
  height:128px;
  overflow:hidden;
}

.gauge-arc{
  position:absolute;
  left:10px;
  right:10px;
  top:20px;
  height:200px;
  border-radius:50%;
  border:14px solid rgba(255,255,255,.07);
  border-bottom:none;
  background: conic-gradient(
    from -90deg,
    rgba(95,163,255,0) 0deg,
    rgba(95,163,255,0.12) 18deg,
    rgba(185,225,255,0.35) 28deg,
    rgba(255,255,255,0.55) 34deg,
    rgba(95,163,255,0.10) 42deg,
    transparent 62deg
  );
  -webkit-mask:
    radial-gradient(circle at 50% 100%, transparent 0 56px, black 57px);
          mask:
    radial-gradient(circle at 50% 100%, transparent 0 56px, black 57px);
}

.gauge-ticks{
  position:absolute;
  inset:0;
  background:
    repeating-conic-gradient(from 180deg,
      transparent 0deg 11deg,
      rgba(255,255,255,.15) 11deg 12deg);
  -webkit-mask:
    radial-gradient(circle at 50% 100%, transparent 0 72px, black 73px),
    linear-gradient(#000 0 0);
          mask:
    radial-gradient(circle at 50% 100%, transparent 0 72px, black 73px),
    linear-gradient(#000 0 0);
  opacity:.55;
}

.gauge-needle{
  position:absolute;
  left:50%;
  bottom:18px;
  width:4px;
  height:86px;
  background:linear-gradient(180deg, #dfba65, #c7a14a);
  transform-origin:center bottom;
  transform:translateX(-50%) rotate(34deg);
  border-radius:4px;
  box-shadow:0 0 16px rgba(199,161,74,.35);
}

.gauge-center{
  position:absolute;
  left:50%;
  bottom:10px;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#c7a14a;
  box-shadow:0 0 0 6px rgba(199,161,74,.12);
}

.gauge-value{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.04em;
}

.gauge-label-row{
  display:flex;
  justify-content:space-between;
  color:#9db1d3;
  font-size:12px;
  margin-top:6px;
}

.signal-stack{
  display:grid;
  gap:12px;
}

.signal-row{
  display:grid;
  grid-template-columns: 120px 1fr 36px;
  gap:12px;
  align-items:center;
}

.signal-name{
  font-size:13px;
  color:#dce6fb;
}

.signal-bar{
  position:relative;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.signal-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #5fa3ff, #dfba65);
  box-shadow:0 0 18px rgba(95,163,255,.18);
}

.signal-score{
  text-align:right;
  font-weight:800;
  color:#dfba65;
}

.counter-live{
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px){
  .console-bottom{
    grid-template-columns:1fr;
  }
  .needle-card, .signal-stack{
    padding:16px;
  }
  .signal-row{
    grid-template-columns: 100px 1fr 32px;
    gap:10px;
  }
}




/* Replaced premium gauge */
.console-upgrade{
  background:
    radial-gradient(circle at 20% 20%, rgba(95,163,255,.10), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(199,161,74,.08), transparent 26%),
    linear-gradient(180deg, rgba(9,14,26,.86), rgba(9,14,26,.72));
  backdrop-filter: blur(12px);
}

.console-topline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.console-chip{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#dce7fb;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.console-bottom{
  margin-top:18px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:stretch;
}
.needle-card,.signal-stack{
  border-radius:18px;
  background:rgba(6,9,20,.42);
  border:1px solid rgba(255,255,255,.06);
  padding:18px;
}
.needle-kicker{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9db1d3;
  margin-bottom:10px;
}
.premium-gauge{
  position:relative;
  width:240px;
  height:140px;
  margin:0 auto;
  overflow:hidden;
}
.gauge-segment{
  position:absolute;
  left:20px;
  right:20px;
  top:22px;
  height:200px;
  border-radius:50%;
  border:16px solid transparent;
  border-bottom:none;
}
.gauge-red{
  border-top-color:#db4d4d;
  border-left-color:#db4d4d;
  transform:rotate(-45deg);
}
.gauge-yellow{
  border-top-color:#d8a530;
  transform:rotate(0deg);
}
.gauge-green{
  border-top-color:#36b36b;
  border-right-color:#36b36b;
  transform:rotate(45deg);
}
.gauge-inner-mask{
  position:absolute;
  left:40px;
  right:40px;
  top:42px;
  height:160px;
  border-radius:50%;
  background:rgba(9,14,26,.96);
  border-bottom:none;
}
.premium-ticks{
  position:absolute;
  inset:0;
  background:
    repeating-conic-gradient(from 180deg,
      transparent 0deg 10deg,
      rgba(255,255,255,.16) 10deg 11deg,
      transparent 11deg 18deg);
  -webkit-mask:
    radial-gradient(circle at 50% 100%, transparent 0 82px, black 83px),
    linear-gradient(#000 0 0);
          mask:
    radial-gradient(circle at 50% 100%, transparent 0 82px, black 83px),
    linear-gradient(#000 0 0);
  opacity:.7;
}
.premium-needle{
  position:absolute;
  left:50%;
  bottom:22px;
  width:5px;
  height:92px;
  background:linear-gradient(180deg, #f0f3f7, #b9c2ce);
  transform-origin:center bottom;
  transform:translateX(-50%) rotate(-78deg);
  border-radius:999px;
  box-shadow:0 0 12px rgba(255,255,255,.18);
}
.premium-needle::after{
  content:"";
  position:absolute;
  top:-5px; left:50%;
  transform:translateX(-50%);
  width:11px; height:11px;
  border-radius:50%;
  background:#f3f7fb;
  box-shadow:0 0 10px rgba(255,255,255,.22);
}
.premium-center{
  position:absolute;
  left:50%;
  bottom:12px;
  width:20px; height:20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff, #bcc6d2 60%, #717d8b 100%);
  box-shadow:0 0 0 6px rgba(255,255,255,.08);
}
.premium-value{
  position:absolute;
  left:50%;
  bottom:44px;
  transform:translateX(-50%);
  font-size:30px;
  font-weight:900;
  letter-spacing:-.04em;
}
.premium-label-row{
  display:flex;
  justify-content:space-between;
  color:#9db1d3;
  font-size:12px;
  margin-top:4px;
}
.signal-stack{
  display:grid;
  gap:12px;
}
.signal-row{
  display:grid;
  grid-template-columns: 120px 1fr 36px;
  gap:12px;
  align-items:center;
}
.signal-name{font-size:13px;color:#dce6fb;}
.signal-bar{
  position:relative;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.signal-bar span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #5fa3ff, #dfba65);
  box-shadow:0 0 18px rgba(95,163,255,.18);
}
.signal-score{
  text-align:right;
  font-weight:800;
  color:#dfba65;
}
.counter-live,.counter-live-small{
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px){
  .console-bottom{grid-template-columns:1fr;}
  .needle-card,.signal-stack{padding:16px;}
  .signal-row{grid-template-columns:100px 1fr 32px; gap:10px;}
  .premium-gauge{width:220px;height:132px;}
  .gauge-segment{left:16px; right:16px; top:18px; height:188px;}
  .gauge-inner-mask{left:34px; right:34px; top:36px; height:150px;}
  .premium-needle{height:84px;}
}


/* Full live decision console restore */
.console-topline{
  display:flex !important;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.console-chip{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#dce7fb;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.console-bottom{
  grid-template-columns:1fr !important;
}
.signal-stack{
  margin-top:16px;
}




/* Command module refinement with no category spinners */
.command-module-panel{
  background:
    radial-gradient(circle at 50% 16%, rgba(95,163,255,.12), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(199,161,74,.10), transparent 24%),
    linear-gradient(180deg, rgba(14,22,38,.92), rgba(14,22,38,.80));
}
.command-copy{
  margin-bottom:18px !important;
}

.command-shell{
  display:grid;
  gap:18px;
}

.command-hud{
  position:relative;
  width:100%;
  min-height:300px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 50% 50%, rgba(95,163,255,.08), transparent 40%),
    linear-gradient(180deg, rgba(6,9,20,.72), rgba(6,9,20,.46));
}

.cmd-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.45;
  mask-image: radial-gradient(circle at center, black 40%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 82%);
}

.cmd-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(95,163,255,.24);
  box-shadow: inset 0 0 26px rgba(95,163,255,.05);
}
.cmd-ring-1{
  width:250px; height:250px;
  animation: cmdPulseSlow 4.8s ease-in-out infinite;
}
.cmd-ring-2{
  width:190px; height:190px;
  border:2px solid rgba(199,161,74,.34);
  border-style:dashed;
  animation: cmdPulseSlow 5.4s ease-in-out infinite;
}
.cmd-ring-3{
  width:132px; height:132px;
  border-color: rgba(255,255,255,.16);
  animation: cmdPulseSlow 3.2s ease-in-out infinite;
}

.cmd-scan{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background: linear-gradient(180deg, transparent 44%, rgba(95,163,255,.16) 50%, transparent 56%);
  filter: blur(2px);
  animation: cmdSweep 4.6s ease-in-out infinite;
  opacity:.75;
}

.cmd-core{
  position:relative;
  z-index:3;
  width:104px;
  height:104px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg, rgba(199,161,74,.18), rgba(95,163,255,.14)),
    rgba(8,12,22,.95);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 0 0 10px rgba(199,161,74,.05),
    0 0 36px rgba(95,163,255,.12);
}

.cmd-core-label{
  font-size:34px;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;
}
.cmd-core-sub{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9db1d3;
  margin-top:2px;
}

.cmd-node{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 0 18px currentColor;
}
.cmd-node-a{
  top:48px; left:50%;
  transform:translateX(-50%);
  background:#5fa3ff; color:#5fa3ff;
}
.cmd-node-b{
  bottom:54px; right:76px;
  background:#c7a14a; color:#c7a14a;
}
.cmd-node-c{
  top:50%; left:72px;
  transform:translateY(-50%);
  background:#dfe7f5; color:#dfe7f5;
}

.command-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cmd-stat{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.cmd-stat-label{
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9db1d3;
  margin-bottom:6px;
}
.cmd-stat-value{
  font-size:26px;
  line-height:1;
  letter-spacing:-.03em;
}

.command-dials{
  margin-top:0;
}
.clean-dial{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.clean-dial::after{
  display:none !important;
}
.clean-dial .dial-label{
  color:#abc0e1;
}
.clean-dial .dial-value{
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}

@keyframes cmdPulseSlow{
  0%,100%{transform:scale(1); opacity:.82}
  50%{transform:scale(1.03); opacity:1}
}
@keyframes cmdSweep{
  0%,100%{transform:rotate(0deg) scale(1); opacity:.45}
  50%{transform:rotate(180deg) scale(1.04); opacity:.9}
}

@media (max-width: 900px){
  .command-hud{
    min-height:260px;
  }
  .cmd-ring-1{width:220px;height:220px;}
  .cmd-ring-2{width:168px;height:168px;}
  .cmd-ring-3{width:116px;height:116px;}
  .cmd-scan{width:240px;height:240px;}
  .command-status-grid{
    grid-template-columns:1fr;
  }
  .cmd-node-b{right:56px;}
  .cmd-node-c{left:56px;}
}

/* Radar Recon Engine */
.radar-hud{
  position:relative;
  min-height:300px;
  border-radius:20px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center, rgba(95,163,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(6,9,20,.8), rgba(6,9,20,.5));
}

.radar-ring{
  position:absolute;
  border:1px solid rgba(95,163,255,.25);
  border-radius:50%;
}
.r1{width:260px;height:260px;}
.r2{width:180px;height:180px;}
.r3{width:100px;height:100px;}


.radar-sweep{
  position:absolute;
  width:280px;height:280px;
  border-radius:50%;
  background: conic-gradient(from 0deg, rgba(95,163,255,.25), transparent 40%);
  animation: sweep 6s linear infinite;
}


@keyframes sweep{
  to{transform:rotate(360deg)}
}

.radar-center{
  position:absolute;
  width:80px;height:80px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(8,12,22,.9);
  border:1px solid rgba(255,255,255,.1);
}

.radar-label{
  font-size:12px;
  letter-spacing:.2em;
}

.radar-blip{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#5fa3ff;
  box-shadow:0 0 10px #5fa3ff;
  opacity:0;
  transform:scale(.1);
}
.radar-blip span{
  position:absolute;
  top:-18px;
  left:10px;
  font-size:10px;
  color:#9db1d3;
}

.b1{top:40px;left:140px;}
.b2{bottom:60px;right:80px;}
.b3{top:120px;left:60px;}


/* Reactive radar effects */
.radar-blip{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#5fa3ff;
  box-shadow:0 0 10px #5fa3ff;
  opacity:0;
  transform:scale(.1);
}
.radar-blip.active{
  opacity:1;
  transform: scale(1.35);
  box-shadow: 0 0 0 10px rgba(95,163,255,.08), 0 0 18px #5fa3ff;
  animation: radarPing 1.1s ease-out forwards;
}
.radar-blip.active span{
  color:#e4eefc;
}
@keyframes radarPing{
  0%{opacity:1; transform:scale(1); filter:brightness(1)}
  30%{opacity:1; transform:scale(1.55); filter:brightness(1.2)}
  100%{opacity:.22; transform:scale(.92); filter:brightness(.95)}
}
.reactive-stat, .reactive-dial{
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}
.value.flash, .reactive-stat.flash, .reactive-dial.flash{
  color:#f3d891 !important;
  text-shadow:0 0 16px rgba(199,161,74,.28);
  transform:translateY(-1px);
}

/* Slower radar sweep */

.radar-sweep{
  position:absolute;
  width:280px;height:280px;
  border-radius:50%;
  background: conic-gradient(from 0deg, rgba(95,163,255,.25), transparent 40%);
  animation: sweep 6s linear infinite;
}







/* Better spacing */
.b1{ top:34px !important; left:156px !important; }
.b2{ bottom:70px !important; right:62px !important; }
.b3{ top:146px !important; left:52px !important; }

.radar-blip.hit{ animation: radarPingBeam 1.6s ease-out forwards;
}
@keyframes radarHitRespawn{
  0%{opacity:0; transform:scale(.45)}
  12%{opacity:1; transform:scale(1)}
  35%{opacity:1; transform:scale(1.65)}
  68%{opacity:0; transform:scale(.35)}
  100%{opacity:0; transform:scale(.35)}
}

@media (max-width: 900px){
  .b1{ top:30px !important; left:132px !important; }
  .b2{ bottom:58px !important; right:52px !important; }
  .b3{ top:126px !important; left:42px !important; }
}






/* Beam-aligned radar behavior */
.radar-hud{
  position:relative;
}


.radar-sweep{
  position:absolute;
  width:280px;height:280px;
  border-radius:50%;
  background: conic-gradient(from 0deg, rgba(95,163,255,.25), transparent 40%);
  animation: sweep 6s linear infinite;
}


.radar-sweep::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at center,
      rgba(95,163,255,0.18) 0 8%,
      rgba(95,163,255,0.08) 8% 20%,
      transparent 20% 100%);
  opacity:.35;
}

.radar-blip{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#5fa3ff;
  box-shadow:0 0 10px #5fa3ff;
  opacity:0;
  transform:scale(.1);
}
.radar-blip span{
  position:absolute;
  top:-18px;
  left:12px;
  font-size:10px;
  color:#9db1d3;
  white-space:nowrap;
  opacity:0;
  transition:opacity .12s linear;
}
.radar-blip.hit{ animation: radarPingBeam 1.6s ease-out forwards;
}
.radar-blip.hit span{
  opacity:1;
}



@keyframes radarPingBeam{
  0%{opacity:0; transform:scale(.1)}
  20%{opacity:1; transform:scale(1)}
  65%{opacity:1; transform:scale(1.5)}
  100%{opacity:0; transform:scale(.1)}
}

  25%{opacity:1; transform:scale(1)}
  60%{opacity:1; transform:scale(1.6)}
  100%{opacity:0; transform:scale(.1)}
}

  20%{opacity:1; transform:scale(1)}
  60%{opacity:1; transform:scale(1.6)}
  100%{opacity:0; transform:scale(.2)}
}

  18%{opacity:1; transform:scale(1)}
  42%{opacity:1; transform:scale(1.75)}
  100%{opacity:0; transform:scale(.22)}
}

/* keep spacing */
.b1{ top:36px !important; left:154px !important; }
.b2{ bottom:68px !important; right:66px !important; }
.b3{ top:144px !important; left:54px !important; }

@media (max-width: 900px){
  .b1{ top:30px !important; left:132px !important; }
  .b2{ bottom:58px !important; right:54px !important; }
  .b3{ top:124px !important; left:44px !important; }
}