/* ===== Cinematic split editorial hero ===== */

.v2hero.hero-split{
  min-height:100vh;
  min-height:100svh;
  height:auto;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
  padding-top:clamp(96px,9vw,128px);
  padding-bottom:clamp(72px,7vw,112px);
  text-align:left;
  border-bottom:none;
  background:radial-gradient(130% 105% at 68% -10%,#173a55 0%,#0d2135 42%,var(--bg) 78%);
}

/* ---------- atmospheric layers ---------- */

/* drifting haze for depth */
.cine-haze{
  position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:
    radial-gradient(closest-side at 25% 40%,rgba(42,151,120,.10),transparent 70%),
    radial-gradient(closest-side at 72% 62%,rgba(34,58,91,.5),transparent 72%);
  filter:blur(50px);
  opacity:.9;
}
.js .cine-haze{animation:haze-drift 26s ease-in-out infinite alternate}
@keyframes haze-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2.5%,-2%,0) scale(1.08)}
}

/* soft key light sweeping from upper right */
.cine-beam{
  position:absolute;top:-40%;right:-10%;
  width:70%;height:150%;z-index:1;pointer-events:none;
  background:linear-gradient(198deg,rgba(140,190,220,.10) 0%,rgba(42,151,120,.06) 38%,transparent 68%);
  transform:rotate(-6deg);
  filter:blur(28px);
  opacity:0;
}
.js .cine-beam{animation:beam-in 2.6s ease-out .25s forwards}
@keyframes beam-in{to{opacity:1}}

/* cinematic vignette — subtle, edges only */
.cine-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 95% 80% at 50% 45%,transparent 42%,rgba(6,16,26,.5) 100%),
    linear-gradient(180deg,rgba(6,16,26,.45) 0%,transparent 22%,transparent 74%,rgba(6,16,26,.6) 100%);
}

/* fine grain for filmic texture */
.cine-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.js .cine-grain{animation:grain-shift 640ms steps(3) infinite}
@keyframes grain-shift{
  0%{transform:translate(0,0)}
  33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)}
  100%{transform:translate(0,0)}
}

.circuit-canvas{opacity:.62}
.v2hero-glow{opacity:.7}

/* whole composition eases in with a slow push — the "camera move" */
.hero-split-inner{
  position:relative;z-index:4;
  display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(48px,7vw,100px);
  align-items:start;
  width:100%;
}
/* console aligns to the headline block, not the whole column */
.hero-console{margin-top:clamp(6px,1.6vw,22px)}
.js .hero-split-inner{animation:cine-push 2.8s cubic-bezier(.16,1,.3,1) both}
@keyframes cine-push{
  0%{transform:scale(1.035);filter:blur(3px)}
  100%{transform:scale(1);filter:blur(0)}
}

/* ---------- left editorial ---------- */
.hero-split .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--accent);letter-spacing:.24em;font-size:.67rem;margin-bottom:30px;
}
.eb-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.js .eb-dot{animation:eb-pulse 2.8s ease-in-out infinite}
@keyframes eb-pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

.hero-head{
  margin:0 0 clamp(28px,3vw,38px);
  font-size:clamp(2.3rem,3.95vw,4.15rem);
  line-height:1.05;letter-spacing:-.032em;font-weight:800;
  max-width:22ch;
}
.hero-head .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-head .w{
  display:inline-block;
  transform:translateY(112%);
  opacity:0;
  will-change:transform,opacity;
}
/* slower, weightier rise — cinematic rather than snappy */
.js .hero-head .w{
  animation:word-rise 1.35s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay:calc(.5s + var(--i) * .1s);
}
@keyframes word-rise{
  0%{transform:translateY(112%);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
/* accent line carries a faint emerald bloom */
.hero-head .accent-word{
  color:var(--accent);
  text-shadow:0 0 34px rgba(42,151,120,.32);
}

.hero-split .lede{
  max-width:50ch;margin:0 0 clamp(34px,3.6vw,44px);
  font-size:clamp(1rem,1.2vw,1.12rem);
  color:#b8cad9;line-height:1.75;
}
.hero-split .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-split .btn{transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,box-shadow .3s ease}
.hero-split .btn:hover{transform:translateY(-3px)}

/* ---------- sequenced elements ---------- */
.hero-el{opacity:0;transform:translateY(20px)}
.js .hero-el{animation:hero-in 1.15s cubic-bezier(.19,1,.22,1) forwards}
.js .hero-el[data-step="1"]{animation-delay:.28s}
.js .hero-el[data-step="2"]{animation-delay:1.32s}
.js .hero-el[data-step="3"]{animation-delay:1.5s}
.js .hero-el[data-step="4"]{animation-delay:1.44s}
@keyframes hero-in{to{opacity:1;transform:translateY(0)}}

/* ---------- right: single-metric readout ---------- */
.hero-console{
  position:relative;
  padding-left:clamp(26px,3vw,40px);
  background:none;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;
}
/* the hairline draws itself downward */
.hero-console::before{
  content:"";position:absolute;left:0;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(30,58,82,.95) 12%,rgba(30,58,82,.95) 88%,transparent);
  transform:scaleY(0);transform-origin:top;
}
.js .hero-console::before{animation:rule-draw 1.4s cubic-bezier(.19,1,.22,1) 1.5s forwards}
@keyframes rule-draw{to{transform:scaleY(1)}}
@keyframes rule-draw-x{to{transform:scaleX(1)}}

.cb-value{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.cb-value b{
  font-family:var(--font-h);font-weight:800;
  font-size:clamp(3.1rem,5.2vw,4.6rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.cb-value small{font-family:var(--font-h);font-weight:700;font-size:1.15rem;color:var(--accent)}
.cb-label{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;
}

/* ---------- vertical voltage rail ---------- */
.volt-vert{display:flex;align-items:stretch;gap:16px;height:clamp(150px,20vh,215px);margin-bottom:26px}
.vv-rail{position:relative;width:2px;border-radius:99px;background:rgba(30,58,82,.75);flex:0 0 auto}
.vv-fill{
  position:absolute;left:0;right:0;bottom:0;height:0;border-radius:99px;
  background:linear-gradient(0deg,rgba(34,58,91,.35) 0%,rgba(42,151,120,.55) 45%,#3fc79a 100%);
  box-shadow:0 0 12px -2px rgba(42,151,120,.55);
}
.js .vv-fill{animation:vv-charge 2s cubic-bezier(.19,1,.22,1) forwards;animation-delay:1.7s}
@keyframes vv-charge{to{height:100%}}
.vv-spark{position:absolute;left:50%;bottom:0;width:2px;height:34px;transform:translate(-50%,100%);background:linear-gradient(0deg,transparent,#7fe7c4);filter:drop-shadow(0 0 8px rgba(127,231,196,.9));opacity:0;border-radius:99px}
.js .vv-spark{animation:vv-spark-up 2s cubic-bezier(.19,1,.22,1) forwards;animation-delay:1.7s}
@keyframes vv-spark-up{0%{bottom:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{bottom:100%;opacity:0}}
.vv-marks{display:flex;flex-direction:column;justify-content:space-between;padding:0}
.vv-marks span{
  font-family:var(--font-h);font-weight:600;font-size:.66rem;letter-spacing:.13em;
  color:var(--muted);opacity:0;line-height:1;
}
.js .vv-marks span{animation:hero-in .6s ease forwards}
.js .vv-marks span:nth-child(4){animation-delay:1.95s}
.js .vv-marks span:nth-child(3){animation-delay:2.3s}
.js .vv-marks span:nth-child(2){animation-delay:2.65s}
.js .vv-marks span:nth-child(1){animation-delay:3s}
.vv-marks span.is-peak{color:var(--accent)}
.console-foot{padding-top:2px}
.console-foot .cb-value{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.console-foot .cb-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:0}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .v2hero.hero-split{height:auto;min-height:100svh}
  .hero-split-inner{grid-template-columns:1fr;gap:40px}
  .hero-console{margin-top:0}
  .hero-console{padding-left:0;padding-top:32px;max-width:400px}
  .hero-console::before{left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(30,58,82,.95),transparent);transform:scaleX(0);transform-origin:left}
  .js .hero-console::before{animation:rule-draw-x 1.4s cubic-bezier(.19,1,.22,1) 1.5s forwards}
  .hero-head{max-width:18ch}
}
@media(max-width:900px){
  .v2hero.hero-split{min-height:100svh;height:auto;padding-top:100px;padding-bottom:56px;justify-content:center!important}
  .hero-head{font-size:clamp(2rem,8vw,2.85rem);max-width:15ch}
  .hero-split .hero-cta{flex-direction:column;width:100%;max-width:340px}
  .hero-split .hero-cta .btn{width:100%;text-align:center}
  .cine-grain{opacity:.035}
}
@media(max-width:600px){
  .volt-vert{height:140px}
  .vv-marks span{font-size:.6rem}
  .hero-split .eyebrow{font-size:.6rem;letter-spacing:.2em}
  .hero-split .lede{font-size:.98rem}
  .cb-value b{font-size:2.7rem}
}

@media(prefers-reduced-motion:reduce){
  .hero-head .w,.hero-el{opacity:1!important;transform:none!important;animation:none!important}
  .js .hero-split-inner,.js .cine-haze,.js .cine-grain,.js .eb-dot,.js .cine-beam{animation:none}
  .cine-beam{opacity:1}
  .vv-fill{height:100%;animation:none}
  .vv-spark{display:none}
  .vv-marks span{opacity:1;animation:none}
  .hero-console::before{transform:none;animation:none}
}

/* base override + alignment polish */
.v2hero.hero-split{justify-content:center!important;padding-left:0;padding-right:0}
.v2hero.hero-split .wrap{width:100%}
.v2hero.hero-split{border-bottom:0}
.hero-editorial{display:flex;flex-direction:column;align-items:flex-start}
.hero-head,.hero-split .lede,.hero-split .hero-cta,.hero-split .eyebrow{margin-left:0}
.hero-split .lede{max-width:46ch}
.hero-console{align-self:start}
@media(min-width:1025px){.hero-console{padding-top:6px}}

@media(max-height:640px) and (min-width:901px){
  .v2hero.hero-split{height:auto;min-height:auto;padding-top:130px;padding-bottom:70px}
}

/* console left-align tune */
@media(min-width:1025px){
  .hero-split-inner{grid-template-columns:1.25fr .75fr;gap:clamp(32px,4vw,60px)}
  .hero-console{padding-left:0}
  .hero-console::before{left:-28px}
  .hero-console>*{max-width:300px}
}

/* console anchored bottom-right */
@media(min-width:1025px){
  .hero-split-inner.is-single{grid-template-columns:1fr;gap:0}
  .hero-editorial{max-width:62%}
  .v2hero.hero-split .hero-console{
    position:absolute;z-index:5;
    right:clamp(24px,4vw,64px);
    bottom:clamp(48px,7vw,88px);
    left:auto;top:auto;margin:0;padding:0;
    width:min(240px,26vw);
    align-self:auto;
  }
  .v2hero.hero-split .hero-console::before{left:-26px;top:0;height:100%;width:1px;transform:scaleY(0);transform-origin:top}
  .js .v2hero.hero-split .hero-console::before{animation:rule-draw 1.4s cubic-bezier(.19,1,.22,1) 1.5s forwards}
  .v2hero.hero-split .hero-console>*{max-width:none}
  .volt-vert{height:clamp(120px,15vh,165px)}
  .console-foot .cb-value b{font-size:clamp(2.6rem,4vw,3.6rem)}
}
@media(max-width:1024px){
  .v2hero.hero-split .hero-console{position:static;width:auto;max-width:360px;margin-top:34px}
}