:root {
  --navy-950:#030a12;
  --navy-900:#061525;
  --navy-850:#081a2c;
  --navy-800:#0a2036;
  --blue:#1678ff;
  --blue-2:#58b4ff;
  --cyan:#74c8ff;
  --ink:#0c1730;
  --muted:#5f6f85;
  --line:rgba(93,184,255,.22);
  --white:#fff;
  --off:#f5f8fc;
  --shell:1220px;
  --radius:22px;
  --shadow:0 26px 80px rgba(0,0,0,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy-950)}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#fff;background:var(--navy-900);line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
button{cursor:pointer}
::selection{background:#1678ff;color:white}
.shell{width:min(calc(100% - 48px),var(--shell));margin:0 auto}
.skip-link{position:fixed;left:16px;top:-60px;z-index:999;background:white;color:#0b1b31;padding:12px 16px;border-radius:10px;transition:.2s}
.skip-link:focus{top:16px}
.section-kicker{margin:0 0 13px;color:#5ab7ff;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.section-kicker.blue{color:var(--blue)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.035em}
h2{font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.03;margin-bottom:0}
h3{font-size:1.15rem;line-height:1.2}
.section-dark{background:linear-gradient(180deg,#071a2d 0%,#061423 100%)}
.section-deep{background:#04101d}
.section-light{background:#f7f9fc;color:var(--ink)}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s,backdrop-filter .35s}
.site-header.scrolled{background:rgba(3,10,18,.88);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.header-inner{height:82px;display:grid;grid-template-columns:190px 1fr 160px;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;width:170px}
.brand img{width:100%;height:auto}
.site-nav{display:flex;justify-content:center;gap:30px;font-size:.92rem;color:rgba(255,255,255,.8)}
.site-nav a{position:relative;padding:10px 0;transition:color .2s}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:var(--blue-2);transition:right .25s}
.site-nav a:hover{color:white}.site-nav a:hover:after{right:0}
.header-cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:999px;background:var(--blue);font-weight:700;font-size:.9rem;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.3s}
.header-cta.visible{opacity:1;transform:none;pointer-events:auto}
.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{width:22px;height:2px;background:white;border-radius:2px}

/* Hero */
.hero{min-height:780px;height:min(920px,100vh);position:relative;display:flex;align-items:center;overflow:hidden;background:#02070d}
/*
.hero-media{
  position:absolute;
  inset:0;
  background-image:url('images/hero.webp');
  background-size:cover;
  background-position:center center;
  transform:scale(1.025);
  animation:heroIn 1.6s cubic-bezier(.2,.75,.2,1) both
}
*/
.hero-media{
  position:absolute;
  inset:0;
  background-image:url('images/hero.webp');
  background-size:cover;
  background-position:center top;
  transform:none;
  animation:none;
}

/*
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(1,7,13,.94) 0%,rgba(2,10,18,.82) 31%,rgba(4,12,20,.22) 64%,rgba(2,7,12,.18) 100%),
    linear-gradient(180deg,rgba(1,7,13,.3),rgba(1,7,13,.25) 60%,rgba(1,7,13,.72))
}
*/
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(1,7,13,.78) 0%,rgba(2,10,18,.60) 31%,rgba(4,12,20,.14) 64%,rgba(2,7,12,.10) 100%),
    linear-gradient(180deg,rgba(1,7,13,.12),rgba(1,7,13,.10) 60%,rgba(1,7,13,.38))
}

/*.hero-container-logo{
  position:absolute;
  z-index:1;
  width:170px;
  left:500px;
  top:145px;
  opacity:1;
  pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
}*/

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,760px) 1fr;align-items:end;width:min(calc(100% - 48px),var(--shell));margin:0 auto;padding-top:70px}
.hero-copy{
  grid-column:1;
  justify-self:start;
  width:100%;
  max-width:760px;
  margin:0
}
.hero h1{
  font-size:clamp(3.5rem,6.6vw,7.2rem);
  line-height:.96;
  margin:0 0 34px;
  max-width:760px
}
.hero h1 span{
  color:#1680ff;
  display:inline-block;
  margin-top:.10em;
}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:10px;font-weight:750;border:0;transition:transform .2s,box-shadow .2s,background .2s}
.button-primary{background:linear-gradient(135deg,#0e67f3,#1689ff);color:white;box-shadow:0 12px 36px rgba(22,120,255,.28)}
.button-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(22,120,255,.4)}
.hero-side-note{
  grid-column:1;
  justify-self:start;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.72rem;
  font-weight:800;
  color:#fff;
  line-height:1.45;
  text-align:left;
  margin:24px 0 0;
}
.hero-side-note span{display:inline}
.scroll-cue{position:absolute;z-index:2;bottom:22px;left:50%;width:28px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:20px;transform:translateX(-50%)}
.scroll-cue span{position:absolute;width:4px;height:8px;background:#7fcfff;border-radius:4px;left:50%;top:8px;transform:translateX(-50%);animation:scrollDot 1.8s infinite}

/* Mission + recognition */
.mission{position:relative;overflow:hidden;padding:94px 0 0;border-top:1px solid rgba(76,174,255,.35)}
.mission-orbit{position:absolute;right:-6vw;top:-170px;width:62vw;height:62vw;max-width:1000px;max-height:1000px;border-radius:50%;border:1px solid rgba(83,183,255,.18);box-shadow:inset 0 0 120px rgba(22,120,255,.12),0 0 160px rgba(22,120,255,.08);background:radial-gradient(circle at 32% 32%,rgba(74,176,255,.2),rgba(7,26,45,.05) 48%,rgba(3,10,18,.01) 68%);pointer-events:none}
.mission-orbit:before,.mission-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(83,183,255,.12);inset:10%}.mission-orbit:after{inset:23%}
.mission-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;padding-bottom:80px}
.mission-grid h2{max-width:780px}
.mission-note{justify-self:end;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;display:flex;flex-direction:column;line-height:1.45;color:#88d2ff}.mission-note strong{font-size:1.3rem;color:white;letter-spacing:.02em}
.recognition-wrap{position:relative;z-index:2;padding-bottom:0}
.recognition{transform:translateY(1px);display:grid;grid-template-columns:72px 260px 1fr auto;gap:22px;align-items:center;padding:22px 24px;border:1px solid rgba(88,180,255,.6);border-radius:16px 16px 0 0;background:linear-gradient(110deg,rgba(6,24,43,.98),rgba(6,31,56,.95));box-shadow:0 18px 50px rgba(0,0,0,.22);transition:border-color .25s,transform .25s}
.recognition:hover{border-color:#71c6ff;transform:translateY(-3px)}
.recognition-icon{font-size:2.5rem;text-align:center}
.recognition-title{display:flex;flex-direction:column;line-height:1.2}.recognition-title strong{font-size:1.35rem;color:#ffd36a}.recognition-title span{color:white;margin-top:4px}
.recognition-copy{color:#b9c7d6;font-size:.92rem;max-width:430px}
.recognition-link{border:1px solid rgba(100,195,255,.55);padding:11px 15px;border-radius:9px;font-weight:700;white-space:nowrap}

/* Problem */
.problem{padding:100px 0 105px}
.problem-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:46px}
.problem-heading h2{font-size:clamp(2.4rem,4.2vw,4.45rem);max-width:760px}.problem-intro{font-size:1.12rem;color:#51627a;max-width:550px;margin-bottom:7px}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.problem-card{background:#fff;border:1px solid #dfe8f3;border-radius:16px;padding:24px 26px;display:grid;grid-template-columns:76px 1fr;gap:20px;align-items:center;box-shadow:0 14px 38px rgba(22,42,73,.06);transition:transform .25s,box-shadow .25s}
.problem-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(22,42,73,.1)}
.problem-card h3{margin:0 0 8px;color:#0b1830}
.problem-card p{color:#66758a;font-size:.94rem;margin:0}
.problem-icon{display:block;width:72px;height:72px;object-fit:contain;object-position:center;justify-self:center;align-self:center}

/* Platform */
.platform{
  padding:105px 0 0;
  position:relative;
  overflow:clip;
  background:
    radial-gradient(circle at 55% 38%,rgba(22,120,255,.14),transparent 38%),
    linear-gradient(180deg,#061525 0%,#03101d 100%);
}
.platform:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(70,153,223,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,153,223,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 90%,transparent);
  pointer-events:none;
}
.section-heading-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr .75fr;
  gap:80px;
  align-items:end;
  margin-bottom:48px
}
.section-heading-row h2{max-width:760px}
.section-heading-row>p{color:#a7bacd;margin:0 0 4px;font-size:1.03rem}
.section-heading-row.compact{margin-bottom:36px}

.platform-scroll{
  position:relative;
  z-index:1;
  height:285vh;
  min-height:1900px;
}
.platform-sticky{
  position:sticky;
  top:92px;
  height:calc(100vh - 112px);
  min-height:610px;
  display:flex;
  align-items:center;
}
.platform-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1232 / 693;
  max-height:calc(100vh - 140px);
  border:1px solid rgba(88,180,255,.19);
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 54% 50%,rgba(18,91,158,.26),transparent 57%),
    linear-gradient(145deg,rgba(5,22,38,.97),rgba(2,9,17,.99));
  box-shadow:
    0 34px 95px rgba(0,0,0,.34),
    inset 0 0 80px rgba(42,142,255,.035);
}
.platform-image-wrap:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(86,165,231,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(86,165,231,.032) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at center,black,transparent 80%);
  pointer-events:none;
}
.platform-system-image{
  position:absolute;
  z-index:2;
  left:4.5%;
  top:8%;
  width:91%;
  height:84%;
  object-fit:contain;
  opacity:1;
  transform:scale(1);
  filter:
    drop-shadow(0 28px 38px rgba(0,0,0,.46))
    drop-shadow(0 0 18px rgba(78,169,255,.055));
  transition:
    opacity .8s ease,
    transform 1s cubic-bezier(.2,.75,.2,1),
    filter .8s ease;
}

.platform-detail-image{
  position:absolute;
  z-index:3;
  left:4%;
  top:5%;
  width:92%;
  height:90%;
  object-fit:contain;
  opacity:0;
  transform:scale(.94);
  filter:
    drop-shadow(0 30px 44px rgba(0,0,0,.48))
    drop-shadow(0 0 24px rgba(255,110,50,.07));
  transition:
    opacity .8s ease,
    transform 1s cubic-bezier(.2,.75,.2,1),
    filter .8s ease;
  pointer-events:none;
}

.platform-image-wrap.detail-active .platform-system-image{
  opacity:0;
  transform:scale(.965);
  filter:
    blur(5px)
    drop-shadow(0 20px 34px rgba(0,0,0,.3));
}

.platform-image-wrap.detail-active .platform-detail-image{
  opacity:1;
  transform:scale(1);
}

/* Hide ALL overview leader lines during the immersion-module close-up.
   The detail image itself is now the visual reference for callout 06. */
.platform-image-wrap.detail-active .platform-leader{
  opacity:0!important;
  visibility:hidden;
}

/* Once we move into the immersion-module close-up, clear the old system
   callouts so the detailed module remains easy to read. */
.platform-image-wrap.detail-active .platform-callout:not(.callout-immersion){
  opacity:0;
  transform:translateY(6px) scale(.985);
}

/* Callout 06 uses the detail transition itself as the visual reference,
   so it does not need a leader line. */
.platform-leader[data-platform-leader="3"],
.platform-leader[data-platform-leader="6"]{
  display:none;
}
.platform-glow{
  position:absolute;
  z-index:1;
  inset:7%;
  background:
    radial-gradient(circle at 55% 48%,rgba(22,120,255,.18),transparent 62%);
  filter:blur(34px);
  pointer-events:none;
}

/* Callouts live directly over the platform image */
.platform-callout{
  position:absolute;
  z-index:5;
  display:grid;
  grid-template-columns:31px 1fr;
  gap:10px;
  width:clamp(190px,18vw,255px);
  padding:13px 14px;
  border:1px solid rgba(101,193,255,.38);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(5,24,42,.94),rgba(3,15,27,.92));
  box-shadow:
    0 16px 42px rgba(0,0,0,.32),
    0 0 0 1px rgba(26,119,214,.06) inset;
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(10px) scale(.985);
  pointer-events:none;
  transition:
    opacity .42s ease,
    transform .48s cubic-bezier(.2,.75,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}
.platform-callout.is-visible{
  opacity:1;
  transform:none;
}
.platform-callout.is-visible:hover{
  border-color:rgba(113,198,255,.7);
  box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 28px rgba(23,126,255,.10);
}
.callout-number{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid rgba(101,193,255,.5);
  border-radius:50%;
  color:#75cbff;
  background:rgba(15,70,114,.28);
  font-size:.62rem;
  font-weight:800;
}
.platform-callout h3{
  margin:1px 0 4px;
  color:#fff;
  font-size:.88rem;
  line-height:1.15;
  letter-spacing:-.015em;
}
.platform-callout p{
  margin:0;
  color:#a9bed1;
  font-size:.69rem;
  line-height:1.38;
}

/* Placement relative to the fixed platform composition */
.callout-power{left:2.0%;top:3%}
.callout-service{left:24%;top:3%}
.callout-cooling{right:3%;top:3%}
.callout-robot{right:20%;bottom:4%}
.callout-distribution{
  left:16%;
  bottom:4%;
  width:340px;
}
.callout-immersion{right:5%;bottom:3.5%}

/* Animated leader lines */
.platform-leaders{
  position:absolute;
  z-index:4;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.platform-leader{
  fill:none;
  stroke:#57baff;
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-dasharray:4 5;
  opacity:0;
  transition:opacity .4s ease;
  filter:drop-shadow(0 0 5px rgba(69,175,255,.45));
}
.platform-leader.is-visible{opacity:.8}

.platform-progress{
  position:absolute;
  z-index:7;
  left:18px;
  right:18px;
  bottom:12px;
  height:2px;
  border-radius:2px;
  overflow:hidden;
  background:rgba(121,195,255,.12);
}
.platform-progress-fill{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#1678ff,#74c8ff);
  box-shadow:0 0 12px rgba(61,165,255,.5);
  transition:transform .08s linear;
}

/* Robotics */
.robotics{
  padding:82px 0;
  border-top:1px solid rgba(88,180,255,.22);
  border-bottom:1px solid rgba(88,180,255,.18);
}

.robotics-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:48px;
  align-items:center;
}

.robotics-copy h2{
  font-size:clamp(2.5rem,4.4vw,4.5rem);
  margin-bottom:20px;
}

.lead{
  font-size:1.05rem;
  color:#a9bacb;
  max-width:570px;
}

.feature-list{
  padding:0;
  margin:34px 0 0;
  list-style:none;
  display:grid;
  gap:13px;
}

.feature-list li{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:13px;
  align-items:center;
  color:#dbe8f3;
}

.feature-list li span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(88,180,255,.45);
  color:#64bfff;
  font-size:.72rem;
  font-weight:800;
}

.robotics-visual{
  margin:0;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(88,180,255,.28);
  box-shadow:var(--shadow);
  background:#020a12;
  max-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.robotics-visual img{
  width:100%;
  height:auto;
  max-height:520px;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
}

.robotics-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 65%,rgba(2,9,16,.72));
  pointer-events:none;
}

.robotics-visual figcaption{
  position:absolute;
  z-index:2;
  right:22px;
  bottom:18px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:#75caff;
  font-weight:800;
}

/* How it works */
.how{
  padding:92px 0 0;
  background:linear-gradient(180deg,#07192a,#061525);
  overflow:clip;
}

/* Keep both heading lines on one line on normal laptop/desktop widths. */
.how .section-heading-row{
  grid-template-columns:auto max-content;
  gap:34px;
  align-items:end;
  margin-bottom:24px;
}

.how .section-heading-row h2{
  max-width:none;
  white-space:nowrap;
  font-size:clamp(2.45rem,3.1vw,3.15rem);
}

.how .section-heading-row>p{
  max-width:none;
  white-space:nowrap;
  font-size:.94rem;
  margin-bottom:5px;
}

/* Long scroll region. Each sixth of the scroll activates one step. */
.how-scroll{
  position:relative;
  height:420vh;
  min-height:2850px;
}

.how-sticky{
  position:sticky;
  top:92px;
  height:calc(100vh - 112px);
  min-height:590px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* One large step occupies the stage at a time. */
.steps{
  position:relative;
  display:block;
  width:100%;
  height:min(610px,calc(100vh - 180px));
  min-height:470px;
}

.step-card{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-width:0;
  padding:25px 28px 24px;
  border:1px solid rgba(88,180,255,.25);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 42%,rgba(22,120,255,.08),transparent 48%),
    rgba(4,16,29,.86);
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(16px) scale(.988);
  pointer-events:none;
  transition:
    opacity .5s ease,
    transform .65s cubic-bezier(.2,.75,.2,1),
    border-color .3s ease;
}

.step-card.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.step-number{
  position:absolute;
  top:22px;
  left:22px;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1678ff;
  color:#fff;
  font-size:.88rem;
  font-weight:800;
  box-shadow:0 7px 24px rgba(22,120,255,.34);
}

.step-visual{
  min-height:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 30px 14px;
  background:transparent;
  border-radius:14px;
  overflow:visible;
  margin-bottom:18px;
}

.step-visual img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}

.step-card h3{
  font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.2;
  margin:0;
  padding-left:54px;
  text-align:left;
  color:#fff;
}

.how-progress{
  position:relative;
  width:100%;
  height:2px;
  margin-top:16px;
  overflow:hidden;
  border-radius:2px;
  background:rgba(121,195,255,.13);
}

.how-progress-fill{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#1678ff,#74c8ff);
  box-shadow:0 0 12px rgba(61,165,255,.5);
  transition:transform .08s linear;
}

/* Benefits */
.benefits{
  --benefit-card-bottom-space:18px; /* smaller = upper-card text moves down; larger = moves up */
  --price-content-y:70px; /* positive = $3M/MW panel content moves down; negative = moves up */
  position:relative;
  overflow:hidden;
  padding:88px 0 84px;
  color:#081633;
  background:
    linear-gradient(rgba(250,252,255,.90),rgba(244,248,253,.92)),
    url("images/benefits-bg.webp") center / cover no-repeat;
  border-top:1px solid rgba(181,204,232,.42);
  border-bottom:1px solid rgba(181,204,232,.42);
}

.benefits:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 80%,rgba(197,224,255,.17),transparent 20%),
    radial-gradient(circle at 84% 12%,rgba(197,224,255,.18),transparent 18%),
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(236,245,255,.12));
  pointer-events:none;
}

.benefits:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.22) 0%,transparent 18%),
    linear-gradient(0deg,rgba(255,255,255,.08),rgba(255,255,255,.08));
  pointer-events:none;
}

.benefits .shell{position:relative;z-index:1}
.benefits-frame{position:relative}

.benefits-heading{
  text-align:center;
  margin-bottom:44px;
}

.benefits-heading h2{
  margin:0;
  font-size:clamp(3.5rem,5.8vw,6.35rem);
  line-height:.96;
  letter-spacing:-.065em;
  color:#06153a;
}

.benefits-heading h2 span{color:#2a78f6}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

/* All four benefit cards use the same internal row geometry so text baselines align. */
.metric{
  position:relative;
  min-height:256px;
  padding:30px 28px 24px;
  display:grid;
  grid-template-rows:92px 1fr 34px var(--benefit-card-bottom-space);
  row-gap:10px;
  border:1px solid #d9e6f5;
  border-radius:22px;
  background:
    url("images/benefit-card-bg-v2.png") center / 100% 100% no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(252,253,255,.95));
  box-shadow:0 8px 24px rgba(42,82,140,.04);
  overflow:hidden;
}

.metric:before{display:none}

.metric-icon{
  position:relative;
  z-index:1;
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8f0fb;
  color:#1f74f3;
  margin:0;
  align-self:start;
}

.metric-icon svg,
.metric-icon img{
  width:46px;
  height:46px;
  display:block;
  object-fit:contain;
}

.metric strong{
  position:relative;
  z-index:1;
  margin:0;
  width:100%;
  color:#06153a;
  font-size:clamp(1.42rem,1.60vw,1.82rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.055em;
  white-space:nowrap;
  align-self:end;
}

.metric span{
  position:relative;
  z-index:1;
  display:block;
  margin:0;
  width:100%;
  max-width:none;
  color:#66758f;
  font-size:1rem;
  line-height:1.28;
  align-self:start;
}

.metric-price{
  grid-column:1 / -1;
  min-height:286px;
  padding:34px 44px;
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 190px;
  align-items:center;
  gap:30px;
  background:
    linear-gradient(90deg,rgba(245,248,252,.95) 0%,rgba(243,247,252,.88) 47%,rgba(238,246,255,.50) 100%),
    url("images/benefits-cost-bg.png") right center / cover no-repeat;
  border:1px solid #9fd2ff;
  border-radius:24px;
  box-shadow:0 12px 28px rgba(40,88,152,.04);
}

.metric-price:before,.metric-price:after{display:none}
.metric-price-icon,.metric-price-copy,.metric-price-sidecopy{
  position:relative;
  z-index:1;
  transform:translateY(var(--price-content-y));
}

.metric-price-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:146px;
  border-right:1px solid rgba(173,203,234,.9);
}

.metric-price-icon img{
  display:block;
  width:178px;
  height:auto;
  object-fit:contain;
}

.metric-price-copy{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.metric-price strong{
  color:#2270f2;
  font-weight:800;
  font-size:clamp(4.15rem,6.0vw,6.4rem);
  line-height:.88;
  letter-spacing:-.072em;
  white-space:nowrap;
}

.metric-price .metric-price-label{
  max-width:760px;
  color:#6f7f98;
  font-size:1.03rem;
  line-height:1.28;
}

.metric-price-sidecopy{
  justify-self:end;
  text-align:left;
  color:#7f98bf;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.23em;
  line-height:1.65;
  text-transform:uppercase;
}

.benefits-bottomline{margin-top:24px}

.disclaimer{
  margin:0;
  color:#77859b;
  font-size:.86rem;
  line-height:1.55;
}

@media (max-width:1180px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-price{grid-column:1/-1;grid-template-columns:220px 1fr}
  .metric-price-sidecopy{display:none}
}

@media (max-width:840px){
  .benefits{padding:76px 0 70px}
  .benefits-heading{margin-bottom:30px}
  .benefits-heading h2{font-size:clamp(2.6rem,11vw,4rem)}
  .metric-grid{grid-template-columns:1fr;gap:18px}
  .metric{
    min-height:220px;
    padding:28px 24px 24px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:10px;
  }
  .metric-icon{margin-bottom:auto}
  .metric strong{white-space:normal;font-size:clamp(1.9rem,8vw,2.2rem)}
  .metric-price{grid-template-columns:1fr;gap:22px;padding:28px 24px;min-height:auto;background:linear-gradient(90deg,rgba(242,247,252,.98),rgba(237,246,255,.92)), url("images/benefits-cost-bg.png") right center / cover no-repeat}
  .metric-price-icon{border-right:0;border-bottom:1px solid rgba(190,211,236,.9);padding-bottom:18px;min-height:auto}
  .metric-price-icon img{width:128px}
  .metric-price-icon,.metric-price-copy,.metric-price-sidecopy{transform:none}
  .metric-price-copy{text-align:center;align-items:center}
  .metric-price strong{font-size:clamp(3.25rem,13vw,5rem)}
  .disclaimer{text-align:center}
}

/* Traction */
.traction{padding:95px 0}.traction-grid{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:18px;align-items:stretch}.traction-heading{padding:16px 16px 16px 0}.traction-heading h2{font-size:clamp(2.15rem,3.3vw,3.8rem)}.traction-card{display:grid;grid-template-columns:105px 1fr;gap:20px;align-items:center;border:1px solid rgba(88,180,255,.3);border-radius:16px;background:#071a2c;padding:25px;transition:.25s}.traction-card:hover{transform:translateY(-4px);border-color:#4cafff}.its-logo{width:94px;height:auto}.card-label{margin:0 0 3px;color:#51b8ff;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.traction-card h3{font-size:1.35rem;margin:0 0 8px}.traction-card p:last-child{color:#aebdca;font-size:.9rem;margin:0}.handshake{font-size:3rem;color:#41aaff;text-align:center}
.traction-card.traction-card-validation{grid-template-columns:1fr}

/* Shared vertical geometry for BOTH traction-card text blocks.
   One set of parameters controls their horizontal alignment. */
.traction-card-copy{
  width:100%;
  min-width:0;
  min-height:116px;
  align-self:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.traction-card-copy h3{max-width:none}
.traction-card-copy p:last-child{max-width:none}

@media (max-width:840px){
  .traction-card-copy{min-height:auto}
}

/* Follow */
.follow{
  position:relative;
  overflow:hidden;
  padding:72px 0;
  background:#071525}

.follow-bg{
  position:absolute;
  inset:0;
  background-color:#071525;
  background-image:linear-gradient(90deg,rgba(3,11,20,.94),rgba(3,11,20,.78) 52%,rgba(3,11,20,.48)),
    url('images/scale-site.webp');
  background-size:100% 100%,50% auto;
  background-repeat:no-repeat,no-repeat;
  background-position:center center,center 45%;
  filter:saturate(.85)}

.follow-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto .65fr;gap:50px;align-items:center}
.follow h2{font-size:clamp(2.3rem,3.8vw,4rem);margin-bottom:12px}
.follow p{color:#c4d0dc;max-width:550px}

.linkedin-button{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(88,180,255,.45);
  background:rgba(7,31,54,.72);
  padding:14px 18px;
  border-radius:11px;
  font-weight:750;
  white-space:nowrap;
  backdrop-filter:blur(8px);transition:.25s}

.linkedin-button:hover{background:rgba(16,70,116,.8);transform:translateY(-2px)}
.linkedin-mark{display:grid;place-items:center;width:30px;height:30px;background:#0a66c2;border-radius:5px;font-size:.92rem}
.follow-tagline{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem!important;justify-self:end;line-height:1.55!important;color:#a8d9ff!important}

/* Contact */
.contact{padding:105px 0}.contact-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;align-items:start}.contact-copy h2{font-size:clamp(2.5rem,4vw,4.3rem);margin-bottom:20px}.contact-copy>p:last-child{font-size:1.05rem;color:#617089;max-width:430px}.contact-form{background:#fff;border:1px solid #dfe7f1;border-radius:18px;padding:28px;box-shadow:0 24px 65px rgba(18,40,72,.08)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:7px}.field-message{grid-column:2;grid-row:1 / span 3}.field label{font-size:.84rem;font-weight:750;color:#12213a}.field label span{color:#0e6de7}.field input,.field textarea{width:100%;border:1px solid #d8e3ef;border-radius:10px;background:#fbfdff;padding:13px 14px;color:#12213a;outline:0;transition:border-color .2s,box-shadow .2s}.field textarea{resize:vertical;min-height:117px}
.field-message textarea{flex:1;height:100%;min-height:190px}.field input:focus,.field textarea:focus{border-color:#2e8dff;box-shadow:0 0 0 3px rgba(22,120,255,.1)}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.form-footer p{font-size:.75rem;color:#7a899b;margin:0}.form-footer .button{min-height:44px;padding:0 18px;border-radius:9px}
.form-footer .button:disabled{opacity:.68;cursor:wait;transform:none;box-shadow:none}
.form-status{min-height:20px;margin:10px 0 0;color:#b42318;font-size:.82rem;line-height:1.4}
.form-status:empty{display:none}
.form-success{display:none;min-height:255px;padding:30px;text-align:center;align-items:center;justify-content:center;flex-direction:column}
.form-success-icon{width:54px;height:54px;display:grid;place-items:center;margin-bottom:18px;border-radius:50%;background:#eaf3ff;color:#1678ff;font-size:1.65rem;font-weight:800}
.form-success h3{margin:0 0 9px;color:#12213a;font-size:1.7rem}
.form-success p{max-width:430px;margin:0;color:#617089;font-size:1rem}
.contact-form.is-success .form-grid,
.contact-form.is-success .form-footer,
.contact-form.is-success .form-status{display:none}
.contact-form.is-success .form-success{display:flex}


/* Footer */
.site-footer{background:#020a12;border-top:1px solid rgba(255,255,255,.08);padding:38px 0 25px}.footer-main{display:grid;grid-template-columns:185px 1fr auto;align-items:center;gap:32px}.footer-brand{width:150px}.footer-main>p{font-size:.82rem;color:#8192a5;margin:0}.footer-main nav{display:flex;gap:24px;color:#9daebe;font-size:.82rem}.footer-main nav a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.07);margin-top:26px;padding-top:17px;color:#718397;font-size:.75rem;text-align:right}

/* Scroll reveal */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .75s cubic-bezier(.2,.75,.2,1)}
.js [data-reveal].revealed{opacity:1;transform:none}
.problem-card:nth-child(2),.step-card:nth-child(2),.metric:nth-child(2){transition-delay:.05s}.problem-card:nth-child(3),.step-card:nth-child(3),.metric:nth-child(3){transition-delay:.1s}.step-card:nth-child(4),.metric:nth-child(4){transition-delay:.15s}.step-card:nth-child(5),.metric:nth-child(5){transition-delay:.2s}.step-card:nth-child(6){transition-delay:.25s}

@keyframes heroIn{from{opacity:.65;transform:scale(1.06)}to{opacity:1;transform:scale(1.025)}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-50%,15px)}}

@media (max-width:1080px){
  .header-inner{grid-template-columns:160px 1fr 145px}.brand{width:150px}.site-nav{gap:20px}

  .how .section-heading-row{
    grid-template-columns:1fr;
    gap:14px;
  }
  .how .section-heading-row h2,
  .how .section-heading-row>p{
    white-space:normal;
  }
  .traction-grid{grid-template-columns:1fr 1fr}
  .traction-heading{grid-column:1/-1}
  .follow-inner{grid-template-columns:1fr auto}
  .follow-tagline{display:none}
}

@media (max-width:1080px){
}

@media (max-width:840px){
}

@media (max-width:840px){
  .shell{width:min(calc(100% - 32px),var(--shell))}
  .site-header.scrolled{background:rgba(3,10,18,.96)}
  .header-inner{height:72px;grid-template-columns:150px 1fr auto}
  .brand{width:140px}
  .menu-toggle{display:flex;justify-self:end}
  .site-nav{
    position:fixed;
    top:72px;
    left:16px;
    right:16px;
    display:none;
    flex-direction:column;
    gap:4px;
    padding:15px;
    background:rgba(3,13,23,.97);
    border:1px solid rgba(88,180,255,.24);
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.35)
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px}
  .header-cta{display:none}

  .hero{height:auto;min-height:760px}
  .hero-inner{
    grid-template-columns:1fr;
    align-items:center;
    width:min(calc(100% - 32px),var(--shell))
  }
  .hero-side-note{display:none}
  .hero-media{background-position:62% top}

  .mission-grid,
  .problem-heading,
  .section-heading-row,
  .robotics-grid,
  .contact-grid{
    grid-template-columns:1fr;
    gap:34px
  }

  .mission-note{justify-self:start}
  .recognition{grid-template-columns:60px 1fr}
  .recognition-copy{grid-column:1/-1}
  .recognition-link{grid-column:1/-1;text-align:center}
  .problem-grid{grid-template-columns:1fr}

  /* Mobile platform story:
     show the full system clearly first, then reveal ONE callout below it. */
  .platform{padding:85px 0 0}

  .platform-scroll{
    height:360vh;
    min-height:2350px;
  }

  .platform-sticky{
    top:76px;
    height:calc(100svh - 88px);
    min-height:540px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Keep the platform wide and fully visible on a phone.
     The extra bottom margin creates a dedicated callout area BELOW the image. */
  .platform-image-wrap{
    width:calc(100% + 12px);
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:1232 / 693;
    margin-left:-6px;
    margin-bottom:145px;
    border-radius:18px;
    overflow:visible;
  }

  /* The image itself now fills the available width instead of being
     constrained to roughly half of a tall container. */
  .platform-system-image{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }

  .platform-detail-image{
    left:2%;
    top:2%;
    width:96%;
    height:96%;
    object-fit:contain;
  }

  .platform-glow{
    inset:5%;
  }

  /* Leader lines are intentionally removed on mobile. */
  .platform-leaders{display:none}

  /* Mobile callouts no longer cover the product.
     They occupy one shared slot directly BELOW the image. */
  .platform-callout{
    display:none;
    left:0!important;
    right:0!important;
    top:calc(100% + 14px)!important;
    bottom:auto!important;
    width:100%;
    max-width:none;
    grid-template-columns:31px 1fr;
    gap:10px;
    padding:11px 13px;
    border-radius:12px;
    opacity:0;
    transform:translateY(8px);
    backdrop-filter:blur(14px);
    background:linear-gradient(
      145deg,
      rgba(5,24,42,.97),
      rgba(3,15,27,.96)
    );
    overflow:visible;
  }

  .platform-callout.is-visible{
    display:grid;
    opacity:1;
    transform:none;
  }

  /* On phones, each callout gets its own dashed pointer line that
     reaches up into the image to indicate the referenced component. */
  .platform-callout::before{
    content:"";
    position:absolute;
    z-index:7;
    left:calc(var(--pin-x,50%) - 1px);
    top:calc(var(--pin-line,84px) * -1);
    width:2px;
    height:var(--pin-line,84px);
    border-left:0;
    background:repeating-linear-gradient(
      to bottom,
      rgba(103,196,255,.9) 0 6px,
      transparent 6px 12px
    );
    opacity:0;
    pointer-events:none;
    filter:drop-shadow(0 0 6px rgba(89,190,255,.28));
  }

  .platform-callout::after{
    content:"";
    position:absolute;
    z-index:8;
    left:calc(var(--pin-x,50%) - 4px);
    top:calc(var(--pin-line,84px) * -1 - 4px);
    width:8px;
    height:8px;
    border-radius:50%;
    background:#79d0ff;
    box-shadow:0 0 0 3px rgba(19,90,151,.32),0 0 10px rgba(84,190,255,.5);
    opacity:0;
    pointer-events:none;
  }

  .platform-callout.is-visible::before,
  .platform-callout.is-visible::after{
    opacity:1;
  }

  .callout-power{--pin-x:12.5%;--pin-line:120px}
  .callout-service{--pin-x:35%;--pin-line:104px}
  .callout-cooling{--pin-x:79%;--pin-line:118px}
  .callout-robot{--pin-x:68.5%;--pin-line:82px}
  .callout-distribution{--pin-x:51%;--pin-line:74px}
  .callout-immersion{--pin-x:62%;--pin-line:70px}

  .callout-immersion::before,
  .callout-immersion::after{
    display:none!important;
  }

  .callout-power::after{
    box-shadow:
      0 0 0 3px rgba(19,90,151,.32),
      0 0 10px rgba(84,190,255,.5),
      0 42px 0 0 #79d0ff,
      0 42px 0 3px rgba(19,90,151,.32),
      0 42px 10px 0 rgba(84,190,255,.45);
  }

  .platform-callout h3{
    font-size:.88rem;
    line-height:1.16;
    margin-bottom:4px;
  }

  .platform-callout p{
    font-size:.70rem;
    line-height:1.38;
  }

  .callout-number{
    width:29px;
    height:29px;
    font-size:.62rem;
  }

  .platform-progress{
    left:12px;
    right:12px;
    bottom:9px;
  }

  .robotics{padding:85px 0}

  /* On phones/tablets, use a normal card grid instead of a sticky scroll story. */
  .how{
    padding:85px 0;
  }

  .how-scroll{
    height:auto;
    min-height:0;
  }

  .how-sticky{
    position:static;
    top:auto;
    height:auto;
    min-height:0;
    display:block;
  }

  .steps{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    height:auto;
    min-height:0;
  }

  .step-card,
  .step-card.is-active{
    position:relative;
    inset:auto;
    display:block;
    padding:14px 12px 18px;
    opacity:1;
    transform:none;
    pointer-events:auto;
    border-radius:15px;
    box-shadow:none;
  }

  .step-number{
    top:10px;
    left:10px;
    width:28px;
    height:28px;
    font-size:.8rem;
  }

  .step-visual{
    height:145px;
    min-height:0;
    padding:0;
    background:transparent;
    border-radius:10px;
    overflow:visible;
    margin-bottom:15px;
  }

  .step-visual img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }

  .step-card h3{
    font-size:.91rem;
    line-height:1.24;
    margin:0;
    padding-left:0;
    text-align:center;
  }

  .how-progress{
    display:none;
  }
  .traction-grid{grid-template-columns:1fr}
  .follow-inner{grid-template-columns:1fr;justify-items:start}
  .form-grid{grid-template-columns:1fr}
  .field-message{grid-column:auto;grid-row:auto}
  .footer-main{grid-template-columns:1fr}
  .footer-main nav{flex-wrap:wrap}
  .footer-bottom{text-align:left}

  /* Mobile-only tagline visibility. Both taglines already exist in the HTML;
     desktop/tablet behavior remains unchanged. */
  .hero-side-note{
    display:block;
    justify-self:start;
    width:100%;
    max-width:300px;
    margin:28px 0 0;
    text-align:left;
    font-size:.70rem;
    line-height:1.45;
  }

  .hero-side-note span{
    display:block;
  }

  .hero-side-note span + span{
    margin-left:0;
  }

  .follow-tagline{
    display:block;
    justify-self:start;
    margin:8px 0 0;
    max-width:320px;
    text-align:left;
  }

  /* On mobile the desktop 50% background image becomes too small.
     Fill the Follow section instead, while leaving laptop/desktop untouched. */
  .follow-bg{
    background-size:100% 100%,88% auto;
    background-position:center center,center center;
  }
}

@media (max-width:540px){
  h2{font-size:2.25rem}

  .hero{min-height:700px}
  .hero h1{font-size:3.55rem}
  .hero-media{background-position:65% top}

  .mission{padding-top:75px}
  .mission-grid{padding-bottom:60px}
  .recognition{padding:18px;gap:14px}
  .recognition-title strong{font-size:1.16rem}
  .problem{padding:78px 0}
  .problem-card{grid-template-columns:66px 1fr;gap:16px;padding:22px}
  .problem-icon{width:62px;height:62px}

  /* iPhone / narrow-phone platform tuning */
  .platform-scroll{
    height:375vh;
    min-height:2450px;
  }

  .platform-sticky{
    top:70px;
    height:calc(100svh - 80px);
    min-height:500px;
  }

  /* Nearly edge-to-edge product view. */
  .platform-image-wrap{
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-bottom:138px;
    aspect-ratio:1232 / 693;
    border-radius:15px;
  }

  .platform-system-image{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    max-height:none;
  }

  .platform-detail-image{
    left:1%;
    top:1%;
    width:98%;
    height:98%;
  }

  /* Compact card below the image, never over it. */
  .platform-callout{
    left:4px!important;
    right:4px!important;
    top:calc(100% + 12px)!important;
    bottom:auto!important;
    padding:10px 11px;
    grid-template-columns:29px 1fr;
  }

  .callout-power{--pin-x:11.5%;--pin-line:126px}
  .callout-service{--pin-x:38%;--pin-line:60px}
  .callout-cooling{--pin-x:79%;--pin-line:112px}
  .callout-robot{--pin-x:69%;--pin-line:62px}
  .callout-distribution{--pin-x:53%;--pin-line:40px}
  .callout-immersion{--pin-x:61%;--pin-line:66px}

  .callout-immersion::before,
  .callout-immersion::after{
    display:none!important;
  }

  /* Callout 01 references both transformer and cabinet.
     Add a second dot lower on the same guide line. */
  .callout-power::after{
    box-shadow:
      0 0 0 3px rgba(19,90,151,.32),
      0 0 10px rgba(84,190,255,.5),
      0 48px 0 0 #79d0ff,
      0 48px 0 3px rgba(19,90,151,.32),
      0 48px 10px 0 rgba(84,190,255,.45);
  }

  .platform-callout h3{font-size:.84rem}
  .platform-callout p{font-size:.67rem;line-height:1.36}
  .callout-number{width:27px;height:27px;font-size:.60rem}

  .platform-progress{
    left:10px;
    right:10px;
    bottom:7px;
  }

  .steps{grid-template-columns:1fr}
  .step-visual{height:155px}
  .traction-card{grid-template-columns:72px 1fr;padding:20px}
  .its-logo{width:70px}
  .follow{padding:58px 0}
  .follow-bg{
    background-size:100% 100%,88% auto;
    background-position:center center,58% center;
  }
  .contact{padding:78px 0}
  .contact-form{padding:19px}
  .form-footer{
    align-items:flex-start;
    flex-direction:column
  }
  .form-footer .button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero-media{transform:none}
  .platform-callout,.platform-leader,
  .platform-system-image,.platform-detail-image,
  .step-card,.how-progress-fill{transition:none}}

/* Accessibility, active navigation and legal pages */
main section[id]{scroll-margin-top:82px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #72c6ff;outline-offset:4px}
.site-nav a[aria-current="page"]{color:#fff}.site-nav a[aria-current="page"]:after{right:0}
.recognition-icon{display:grid;place-items:center}.recognition-icon svg{width:48px;height:48px;fill:none;stroke:#ffd36a;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

.legal-body{background:#f5f8fc;color:var(--ink)}
.legal-header{position:sticky;top:0;z-index:20;background:rgba(3,10,18,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.legal-header .header-inner{height:76px;grid-template-columns:180px 1fr auto}
.legal-header .legal-back{justify-self:end;color:#d8e7f5;font-size:.9rem;font-weight:700;padding:10px 0}.legal-header .legal-back:hover{color:#fff}
.legal-main{padding:110px 0 100px;background:linear-gradient(180deg,#eef5fc 0,#fff 220px)}
.legal-hero{max-width:850px;margin-bottom:54px}.legal-hero h1{font-size:clamp(3rem,6vw,5.5rem);line-height:.96;margin:0 0 20px;color:#0b1830}.legal-hero p{color:#5b6b80;font-size:1.05rem}.legal-card{max-width:900px;background:#fff;border:1px solid #dfe8f3;border-radius:20px;box-shadow:0 18px 60px rgba(20,42,76,.08);padding:42px}.legal-card section+section{border-top:1px solid #e8eef5;margin-top:30px;padding-top:30px}.legal-card h2{font-size:1.55rem;line-height:1.2;color:#0b1830;margin:0 0 12px}.legal-card p,.legal-card li{color:#53647a}.legal-card p{margin:0 0 12px}.legal-card ul{margin:12px 0 0;padding-left:22px}.legal-card a{color:#0e6de7;text-decoration:underline;text-underline-offset:3px}.legal-note{font-size:.86rem;color:#78889b!important}
@media(max-width:700px){.legal-main{padding:85px 0 70px}.legal-card{padding:25px}.legal-header .header-inner{grid-template-columns:145px 1fr auto}.legal-header .brand{width:135px}}