/* hero.css */
#hero{
  min-height:100vh;display:flex;align-items:center;padding:calc(var(--header-h) + 60px) 0 80px;
  position:relative;overflow:hidden;background:var(--navy-950);
  background-image:radial-gradient(circle at 15% 8%, rgba(0,55,126,.35), transparent 40%),
                    radial-gradient(circle at 85% 0%, rgba(0,45,103,.3), transparent 35%);
}
#hero .blueprint{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(220,230,242,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(220,230,242,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0.15));
}
#three-canvas{position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none;}
.hero-container{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%;max-width:var(--container-max);margin:0 auto;padding:0 24px;}
.hero-container img.favicon-mark{width:46px;margin-bottom:18px;}
#hero h1{font-size:clamp(38px,5.2vw,64px);font-weight:700;line-height:1.08;letter-spacing:-.02em;}
#hero h1 .accent{color:var(--yellow);}
#hero h2{margin-top:18px;font-size:17px;color:var(--text-dim);font-weight:400;max-width:520px;font-family:var(--font-body);}
#hero .d-flex{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap;}
.btn-get-started{background:var(--yellow);color:var(--navy-950);padding:13px 26px;border-radius:9px;font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:transform var(--dur-fast) var(--ease);}
.btn-get-started:hover{transform:translateY(-2px);}
.btn-watch-video{display:flex;align-items:center;gap:10px;font-family:var(--font-label);font-weight:700;font-size:13px;color:var(--white);}
.btn-watch-video i{font-size:34px;color:var(--yellow);}

/* live readout — signature element */
.readout{position:relative;padding:26px 24px 22px;border-radius:14px;background:linear-gradient(180deg, rgba(0,45,103,.45), rgba(0,25,59,.55));border:1px solid rgba(255,213,79,.18);backdrop-filter:blur(14px);}
.readout::before, .readout::after{content:"";position:absolute;width:16px;height:16px;border-color:var(--yellow);border-style:solid;}
.readout::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-top-left-radius:6px;}
.readout::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-bottom-right-radius:6px;}
.readout-label{font-family:var(--font-label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,200,83,.6);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,200,83,.55);}70%{box-shadow:0 0 0 8px rgba(0,200,83,0);}100%{box-shadow:0 0 0 0 rgba(0,200,83,0);}}
.readout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;}
.readout-grid div{text-align:center;}
.readout-grid .num{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(20px,2.4vw,26px);color:var(--white);}
.readout-grid .unit{display:block;font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:4px;}
.readout-foot{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(220,230,242,.15);display:flex;justify-content:space-between;font-family:var(--font-label);font-size:10px;color:var(--text-dim);letter-spacing:.03em;}
.readout-foot strong{color:var(--white);font-weight:700;}

.scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);z-index:1;}
.scroll-cue .mouse{width:22px;height:34px;border:2px solid rgba(220,230,242,.35);border-radius:12px;position:relative;}
.scroll-cue .mouse::before{content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;background:var(--yellow);border-radius:2px;transform:translateX(-50%);animation:scrolldot 1.6s infinite;}
@keyframes scrolldot{0%{opacity:1;top:6px;}70%{opacity:0;top:16px;}100%{opacity:0;top:6px;}}
.scroll-cue span{font-family:var(--font-label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;}

@media (max-width:991px){
  .hero-container{grid-template-columns:1fr;text-align:left;gap:44px;}
}