:root {
  --navy-950:#061831; --navy-900:#082247; --ink:#0b2243; --muted:#617086;
  --paper:#fff; --mist:#f2f6f9; --warm:#faf8f2;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#fff;color:var(--ink);font-family:Inter,"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%} a{color:inherit}.site-container{width:min(1180px,calc(100% - 48px));margin-inline:auto}

/* HERO */
.hero{position:relative;min-height:790px;overflow:hidden;color:#fff;background:radial-gradient(circle at 79% 42%,rgba(68,153,225,.27),transparent 33%),radial-gradient(circle at 90% 10%,rgba(118,74,166,.14),transparent 30%),radial-gradient(circle at 27% 110%,rgba(38,117,184,.13),transparent 34%),linear-gradient(116deg,#04142d 0%,#072145 43%,#0c315f 68%,#123f70 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(121,199,255,.32),transparent)}
.hero-grid{position:absolute;inset:0;opacity:.055;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:78px 78px;-webkit-mask-image:radial-gradient(circle at 78% 44%,#000 0,transparent 70%);mask-image:radial-gradient(circle at 78% 44%,#000 0,transparent 70%)}
.hero-ambient{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}.hero-ambient-a{width:500px;height:500px;right:-80px;top:100px;background:rgba(42,131,211,.18)}.hero-ambient-b{width:350px;height:350px;left:36%;bottom:-160px;background:rgba(105,77,164,.12)}
.hero-inner{position:relative;z-index:2}.hero-header{height:166px;display:flex;align-items:center;padding-top:8px}.hero-logo{width:408px;height:auto;filter:drop-shadow(0 8px 26px rgba(0,0,0,.2))}.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1fr);align-items:center;gap:20px;min-height:600px;padding:8px 0 82px}.hero-copy{max-width:650px;z-index:3}.eyebrow-row{display:flex;align-items:center;gap:18px;margin-bottom:26px}.spectrum-line{width:72px;height:3px;border-radius:999px;background:linear-gradient(90deg,#ef2323,#f38b24,#ffe24c,#94c652,#3985c4,#3d5fab,#674296);box-shadow:0 0 15px rgba(92,156,225,.4)}.eyebrow{margin:0;color:#b8cee7;font-size:12px;font-weight:700;letter-spacing:.22em}.hero h1{margin:0;max-width:680px;font-size:clamp(40px,4vw,60px);font-weight:420;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}.hero-subtitle{max-width:610px;margin:28px 0 0;color:#c4d5e8;font-size:clamp(16px,1.5vw,21px);line-height:1.55}.hero-world-wrap{position:relative;margin-right:-72px;display:grid;place-items:center}.hero-world-halo{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.42) 0%,rgba(166,220,255,.20) 15%,rgba(77,162,226,.08) 34%,transparent 67%);filter:blur(24px);transform:translate(8%,-3%) scale(1.06)}.hero-world{position:relative;z-index:2;width:min(650px,100%);filter:drop-shadow(0 24px 44px rgba(0,0,0,.18))}.hero-world-overlay{position:absolute;z-index:3;inset:4% 0 0 0;width:100%;height:92%;pointer-events:none}.hero-route-lines path{stroke:#81c8ff;stroke-opacity:.25;stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900}.hero-route-pulses circle{fill:#fff;opacity:0;filter:drop-shadow(0 0 14px #8ed4ff)}
.hero-ready .hero-route-lines path{animation:routeDraw 2.6s cubic-bezier(.2,.65,.24,1) forwards}.hero-ready .hero-route-lines path:nth-child(2){animation-delay:.18s}.hero-ready .hero-route-lines path:nth-child(3){animation-delay:.36s}.hero-ready .hero-route-pulses circle{animation:pulseIn 1.1s ease forwards 1.2s}.hero-ready .hero-route-pulses circle:nth-child(2){animation-delay:1.35s}.hero-ready .hero-route-pulses circle:nth-child(3){animation-delay:1.5s}.hero-ready .hero-route-pulses circle:nth-child(4){animation-delay:1.65s}.hero-ready .hero-route-pulses circle:nth-child(5){animation-delay:1.8s}
.hero-load{opacity:0;transform:translateY(22px)}.hero-ready .hero-load-1{animation:heroRise .8s cubic-bezier(.18,.74,.2,1) forwards}.hero-ready .hero-load-2{animation:heroRise .95s cubic-bezier(.18,.74,.2,1) .08s forwards}.hero-ready .hero-load-3{animation:heroWorld 1.15s cubic-bezier(.18,.74,.2,1) .18s forwards}

/* COMMON SECTIONS */
.section{position:relative;padding:104px 0}.section-heading h2,.mobility-data h2,.agro-copy h2{margin:0;color:var(--ink);font-size:clamp(36px,3.9vw,54px);font-weight:560;line-height:1.12;letter-spacing:-.04em}.section-heading>p:not(.source){max-width:810px;margin:22px auto 0;color:var(--muted);font-size:clamp(17px,1.7vw,22px);line-height:1.5}.centered{text-align:center}.source{margin:28px 0 0;color:#8190a2;font-size:12px;line-height:1.5;letter-spacing:.02em}
.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .82s ease,transform .82s cubic-bezier(.22,.72,.22,1)}.js .reveal.is-visible{opacity:1;transform:translateY(0)}

/* MYPE BARS */
.section-mype{background:radial-gradient(circle at 18% 8%,rgba(57,133,196,.05),transparent 28%),#fff}.bar-chart{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3.8vw,58px);width:min(980px,100%);margin:44px auto 0;padding:0 12px;outline:none}.chart-baseline{position:absolute;left:0;right:0;bottom:97px;height:1px;background:#cbd5df}.metric{position:relative;text-align:center;outline:none}.bar-stage{position:relative;height:315px}.bar-lift{position:absolute;inset:0;transition:transform .38s cubic-bezier(.22,.72,.22,1)}.bar-percent{position:absolute;left:50%;bottom:calc(var(--h) + 12px);transform:translateX(-50%);white-space:nowrap;color:var(--ink);font-size:clamp(25px,2.6vw,37px);font-weight:700;letter-spacing:-.045em;text-shadow:0 0 14px rgba(255,255,255,.96);opacity:0}.bar-core{position:absolute;left:50%;bottom:0;width:min(104px,70%);height:var(--h);transform:translateX(-50%) scaleY(0);transform-origin:center bottom;background:linear-gradient(180deg,var(--top),var(--front));border-radius:4px 4px 0 0;box-shadow:0 18px 38px rgba(16,41,73,.18);transition:transform .9s cubic-bezier(.2,.8,.22,1),filter .38s ease,box-shadow .38s ease}.bar-core::before{content:"";position:absolute;left:0;top:-9px;width:100%;height:9px;background:var(--top);transform:skewX(-35deg);transform-origin:left bottom;border-radius:4px 3px 1px 1px;box-shadow:inset 0 1px rgba(255,255,255,.35)}.bar-core::after{content:"";position:absolute;top:-4px;right:-8px;width:8px;height:calc(100% + 4px);background:var(--side);transform:skewY(-45deg);transform-origin:left top;border-radius:0 3px 2px 0}.metric-name{margin:17px 0 0;color:#4e5e72;font-size:12px;font-weight:800;letter-spacing:.1em}.metric-value{margin:8px 0 0;color:var(--ink);font-size:14px;font-weight:700;line-height:1.25;opacity:0}.metric-note{margin:3px 0 0;color:#738196;font-size:12px;line-height:1.25;opacity:0}.bar-chart.is-visible .bar-core{transform:translateX(-50%) scaleY(1)}.bar-chart.is-visible .bar-percent{animation:fadeUp .45s ease forwards .82s}.bar-chart.is-visible .metric-value{animation:fadeUp .45s ease forwards 1s}.bar-chart.is-visible .metric-note{animation:fadeUp .45s ease forwards 1.12s}.metric:hover .bar-lift,.metric:focus .bar-lift{transform:translateY(-11px)}.metric:hover .bar-core,.metric:focus .bar-core{filter:saturate(1.08) brightness(1.035);box-shadow:0 34px 64px rgba(13,39,72,.30),0 12px 28px rgba(13,39,72,.22)}

/* INFORMALIDAD */
.section-informal{background:var(--mist)}.split-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(56px,8vw,116px)}.donut-panel{display:grid;justify-items:center;outline:none}.donut-wrap{display:grid;justify-items:center}.donut{position:relative;width:min(374px,76vw);aspect-ratio:1;border-radius:50%;box-shadow:0 30px 66px rgba(17,55,76,.18),0 10px 26px rgba(17,55,76,.12);transition:transform .45s ease,box-shadow .45s ease}.donut-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.donut-bg-ring,.donut-main-ring{fill:none;stroke-width:24}.donut-bg-ring{stroke:#d8c7aa}.donut-main-ring{stroke:#19546c;stroke-linecap:butt;stroke-dasharray:86.8 100;stroke-dashoffset:86.8;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.22,1)}.donut-panel.is-visible .donut-main-ring{stroke-dashoffset:0}.donut::before{content:"";position:absolute;inset:25%;border-radius:50%;background:var(--mist);box-shadow:0 0 0 1px rgba(17,55,76,.06)}.donut::after{content:"";position:absolute;left:19%;right:19%;bottom:-27px;height:24px;background:radial-gradient(ellipse,rgba(17,55,76,.24),rgba(17,55,76,0) 70%);filter:blur(1px)}.donut-center{position:absolute;z-index:2;inset:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.donut-center strong{font-size:clamp(38px,5vw,58px);font-weight:700;letter-spacing:-.055em;color:var(--ink)}.donut-center span{margin-top:8px;color:#647488;font-size:13px;line-height:1.35}.donut-formal-label{position:absolute;z-index:3;top:8.5%;left:22%;transform:translateX(-50%);display:grid;place-items:center;min-width:72px;height:36px;padding:0 12px;border-radius:999px;background:#fff;color:#705f46;font-size:13px;font-weight:800;box-shadow:0 10px 24px rgba(17,55,76,.14);opacity:0}.donut-panel.is-visible .donut-formal-label{animation:fadeUp .45s ease forwards 1s}.legend{display:flex;gap:26px;margin-top:30px;color:#526275;font-size:13px}.legend span{display:flex;align-items:center;gap:9px}.legend i{width:10px;height:10px;border-radius:50%}.legend-informal{background:#19546c}.legend-formal{background:#d8c7aa}.method-note{max-width:520px;margin:24px auto 0;color:#6f7f91;font-size:12px;line-height:1.55;text-align:center;opacity:0}.donut-panel.is-visible .method-note{animation:fadeUp .5s ease forwards 1.1s}.donut-panel:hover .donut,.donut-panel:focus .donut{transform:translateY(-7px) scale(1.012);box-shadow:0 42px 84px rgba(17,55,76,.24),0 15px 34px rgba(17,55,76,.16)}

/* MOBILITY */
.section-mobility{background:#fff;overflow:hidden}.mobility-grid{display:grid;grid-template-columns:.82fr 1.18fr;grid-template-areas:"data visual" "copy visual";align-items:center;gap:34px 66px}.mobility-data{grid-area:data}.mobility-visual{grid-area:visual;margin:0;position:relative;padding:10px;border-radius:26px;background:linear-gradient(145deg,#fff,#edf3f8);box-shadow:0 30px 68px rgba(12,45,81,.15);outline:none;transition:transform .45s ease,box-shadow .45s ease;overflow:hidden}.mobility-visual::after{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(102,132,160,.12);pointer-events:none}.mobility-visual img{width:100%;border-radius:20px;clip-path:inset(0 100% 0 0);transform:scale(1.012);transition:clip-path 1.05s cubic-bezier(.2,.8,.22,1),transform 1.05s cubic-bezier(.2,.8,.22,1)}.mobility-visual.is-visible img{clip-path:inset(0 0 0 0);transform:scale(1)}.mobility-visual:hover,.mobility-visual:focus{transform:translateY(-8px);box-shadow:0 42px 88px rgba(12,45,81,.22)}.mobility-data h2,.agro-copy h2{font-size:19px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}.descriptor{margin:18px 0 0;color:#536579;font-size:18px;line-height:1.45}.impact-number{margin:34px 0 0;color:var(--ink);font-size:clamp(64px,8vw,102px);font-weight:700;line-height:.9;letter-spacing:-.075em}.impact-number span{display:block;margin-top:14px;font-size:18px;font-weight:650;letter-spacing:0}.impact-equivalent{margin:34px 0 0;color:#235887;font-size:clamp(22px,2vw,29px);font-weight:650;line-height:1.25;letter-spacing:-.025em}.impact-detail{margin:8px 0 0;color:#6b7c8d;font-size:14px}.mobility-copy{grid-area:copy;max-width:470px;border-left:2px solid #b8c8d8;padding-left:24px}.mobility-copy p{margin:0;color:#40546a;font-size:17px;line-height:1.6}.mobility-copy p+p{margin-top:16px}

/* AGRO */
.section-agro{background:var(--warm)}.agro-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:clamp(58px,9vw,132px)}.agro-visual{outline:none}.agro-visual svg{filter:drop-shadow(0 30px 58px rgba(52,83,43,.16));transition:transform .45s ease,filter .45s ease}.agro-visual:hover svg,.agro-visual:focus svg{transform:translateY(-8px) scale(1.015);filter:drop-shadow(0 42px 72px rgba(52,83,43,.22))}.agro-dots circle{fill:#7ca54b;transform-origin:center;opacity:.25}.agro-visual.is-visible .agro-dots circle{animation:dotIn .55s ease forwards}.agro-visual.is-visible .agro-dots circle:nth-child(3n){fill:#a8c879;animation-delay:.1s}.agro-visual.is-visible .agro-dots circle:nth-child(4n){fill:#497d42;animation-delay:.18s}.agro-visual.is-visible .agro-dots circle:nth-child(5n){fill:#d0a94a;animation-delay:.26s}.leaf{fill:rgba(101,147,70,.1);stroke:#7aa253;stroke-width:2}.agro-number{margin:26px 0 0;color:#477c3f;font-size:clamp(78px,9vw,124px);font-weight:690;line-height:.9;letter-spacing:-.08em}.agro-description{margin:28px 0 0;color:#3f5240;font-size:clamp(22px,2.2vw,31px);line-height:1.34;letter-spacing:-.02em}.agro-statement{max-width:560px;margin:38px 0 0;color:#5e6858;font-size:18px;line-height:1.58}

/* FOOTER */
.footer{position:relative;overflow:hidden;background:var(--navy-950);color:#fff}.footer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 48%,rgba(52,129,195,.12),transparent 30%)}.footer-inner{position:relative;padding:48px 0 26px}.footer-module{width:max-content;max-width:100%;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:28px}.footer-brand{display:flex;align-items:center;justify-content:center}.brand-device{width:138px;height:auto}.footer-divider{width:1px;height:72px;background:rgba(255,255,255,.22)}.footer-copy{text-align:center;min-width:420px}.footer-copy p{margin:0;font-size:clamp(22px,2.45vw,32px);font-weight:450;line-height:1.18;letter-spacing:-.025em}.footer-copy a{display:inline-block;margin-top:16px;color:#9cb6d5;font-size:14px;text-decoration:none}.footer-copy a:hover,.footer-copy a:focus{color:#fff}.footer-legal-row{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);text-align:center}.footer-legal-row small{color:rgba(255,255,255,.56);font-size:12px;line-height:1.45}

@keyframes heroRise{to{opacity:1;transform:translateY(0)}}@keyframes heroWorld{0%{opacity:0;transform:translateY(20px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes routeDraw{to{stroke-dashoffset:0}}@keyframes pulseIn{0%{opacity:0;transform:scale(.7)}50%{opacity:1;transform:scale(1.4)}100%{opacity:.78;transform:scale(1)}}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes dotIn{from{opacity:.18;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

@media(max-width:1080px){.hero{min-height:720px}.hero-layout{grid-template-columns:1fr;min-height:520px;padding-bottom:90px}.hero-world-wrap{position:absolute;right:-20%;bottom:-12%;width:70%;opacity:.38;margin:0}.hero-copy{max-width:720px}.split-layout,.agro-grid{gap:64px}.mobility-grid{grid-template-columns:1fr;grid-template-areas:"data" "visual" "copy"}.mobility-data{max-width:640px}.mobility-copy{max-width:720px}.footer-copy{min-width:360px}}
@media(max-width:760px){.site-container{width:min(100% - 34px,620px)}.hero-header{height:118px}.hero-logo{width:286px}.hero-layout{padding:48px 0 100px;min-height:560px}.hero h1{font-size:clamp(36px,9.6vw,48px);line-height:1.08}.hero-subtitle{font-size:16px}.hero-world-wrap{right:-42%;bottom:-7%;width:104%;opacity:.2}.section{padding:82px 0}.section-heading h2{font-size:35px}.section-heading>p:not(.source){font-size:17px}.bar-chart{gap:8px;margin-top:36px;padding-inline:0}.bar-stage{height:255px}.bar-core{width:min(72px,72%)}.bar-percent{font-size:22px;bottom:calc(var(--h) + 9px)}.metric-name{font-size:9px;letter-spacing:.075em}.metric-value{font-size:10px;line-height:1.2}.metric-note{font-size:9px}.chart-baseline{bottom:82px}.split-layout,.agro-grid{grid-template-columns:1fr;gap:52px}.section-informal .section-heading{text-align:center}.donut{width:min(320px,84vw)}.method-note{max-width:420px}.mobility-visual{padding:7px;border-radius:22px}.mobility-visual img{border-radius:17px}.mobility-copy{padding-left:18px}.agro-visual{width:min(380px,90vw);margin-inline:auto}.agro-copy{text-align:center}.agro-copy .source,.agro-statement{margin-inline:auto}.footer-inner{padding:44px 0 26px}.footer-module{flex-direction:column;gap:18px}.brand-device{width:126px}.footer-divider{width:120px;height:1px}.footer-copy{min-width:0;width:100%;}.footer-copy p{font-size:27px}.footer-legal-row{margin-top:26px}}
@media(max-width:430px){.site-container{width:calc(100% - 28px)}.hero-header{height:104px}.hero-logo{width:254px}.eyebrow{font-size:10px}.spectrum-line{width:50px}.hero h1{font-size:35px}.section{padding:72px 0}.section-heading h2{font-size:31px}.bar-stage{height:228px}.bar-core{width:min(63px,75%)}.bar-percent{font-size:19px}.metric-name{font-size:8.5px}.metric-value{font-size:9.5px}.metric-note{font-size:8.5px}.donut-center strong{font-size:40px}.impact-number{font-size:70px}.mobility-data h2,.agro-copy h2{font-size:16px}.agro-number{font-size:82px}.agro-description{font-size:21px}.footer-copy p{font-size:24px}}
@media(prefers-reduced-motion:reduce) and (min-width:701px){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* =======================================================================
   v1.1 — FINAL CONSOLIDATED OVERRIDES
   ======================================================================= */

/* HERO — premium network globe based on the approved reference direction */
.hero-network-wrap{
  position:relative;
  width:min(620px,100%);
  height:548px;
  margin:0 -76px 0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:48% 52% 51% 49% / 50% 47% 53% 50%;
  isolation:isolate;
  filter:drop-shadow(0 30px 58px rgba(0,0,0,.24));
}
.hero-network-wrap::after{
  content:"";
  position:absolute;
  inset:4% 2% 4% 3%;
  z-index:4;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 26%,rgba(255,255,255,.18),transparent 8%),
    linear-gradient(135deg,rgba(255,255,255,.05),transparent 28%,transparent 72%,rgba(54,154,235,.06));
  mix-blend-mode:screen;
}
.hero-network-halo{
  position:absolute;
  z-index:0;
  width:82%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.34) 0%,rgba(133,205,255,.18) 14%,rgba(71,157,224,.09) 35%,transparent 68%);
  filter:blur(32px);
  transform:translate(7%,-2%) scale(1.13);
}
.hero-network-globe{
  position:relative;
  z-index:2;
  width:610px;
  max-width:none;
  height:auto;
  transform:scale(1.08) translateX(2.2%);
  transform-origin:center;
  -webkit-mask-image:radial-gradient(ellipse at 51% 50%,#000 0 62%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.55) 82%,transparent 98%);
  mask-image:radial-gradient(ellipse at 51% 50%,#000 0 62%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.55) 82%,transparent 98%);
  filter:saturate(.94) brightness(1.08) contrast(1.04);
}

/* MYPE — restore breathing room while retaining a useful single-screen composition */
.section-mype{padding-top:108px;padding-bottom:96px}
.section-mype .section-heading>p:not(.source){margin-top:28px}
.bar-chart{
  margin-top:64px;
  gap:clamp(22px,4vw,60px);
}
.bar-stage{height:330px}
.chart-baseline{
  top:346px;
  bottom:auto;
}
.bar-core{bottom:16px}
.bar-percent{bottom:calc(var(--h) + 24px)}
.metric-name{margin-top:26px}
.metric:hover .bar-lift,.metric:focus-visible .bar-lift{transform:translateY(-11px)}
.metric:hover .bar-core,.metric:focus-visible .bar-core{
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 42px 74px rgba(13,39,72,.34),0 17px 36px rgba(13,39,72,.24);
}

/* DONUT — place the 13.2% directly over the cream segment */
.donut-formal-label{
  top:16%;
  left:23%;
}
.method-note{max-width:500px;font-size:11.5px;line-height:1.52}

/* MOBILITY — final photographic traffic visual + non-sticky hover */
.mobility-visual{
  padding:0;
  border-radius:28px;
  background:#fff;
  box-shadow:0 28px 62px rgba(12,45,81,.16);
  overflow:hidden;
}
.mobility-visual::after{
  inset:0;
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(103,132,160,.14);
}
.mobility-visual img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:28px;
}
.mobility-speed-badge{
  position:absolute;
  z-index:3;
  left:24px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:0;
  padding:10px 14px 10px 13px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(5,24,49,.88);
  color:#fff;
  box-shadow:0 10px 28px rgba(1,15,34,.30);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.mobility-speed-badge strong{
  font-size:22px;
  line-height:1;
  letter-spacing:-.035em;
}
.mobility-speed-badge span{
  max-width:112px;
  color:rgba(255,255,255,.72);
  font-size:9px;
  line-height:1.18;
  text-transform:uppercase;
  letter-spacing:.055em;
}
/* neutral state is always restored immediately once the pointer leaves */
.mobility-visual:hover{transform:none;box-shadow:0 28px 62px rgba(12,45,81,.16)}
@media (hover:hover) and (pointer:fine){
  .mobility-visual:hover{
    transform:translateY(-8px);
    box-shadow:0 42px 88px rgba(12,45,81,.22);
  }
}

/* AGRO — stronger heading hierarchy */
.agro-copy h2{font-size:22px;letter-spacing:.18em}

/* FOOTER — text block stays geometrically centered on the full footer width */
.footer-module{
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  display:grid;
  grid-template-columns:160px 1px minmax(420px,520px) 161px;
  align-items:center;
  gap:0;
}
.footer-brand{justify-content:center;padding-right:24px}
.brand-device{width:117px}
.footer-divider{height:72px}
.footer-copy{min-width:0;padding-inline:28px;text-align:center}
.footer-balance{width:160px;height:1px}

@media(max-width:1080px){
  .hero-network-wrap{
    position:absolute;
    right:-14%;
    bottom:-12%;
    width:68%;
    height:auto;
    aspect-ratio:1.06;
    margin:0;
    opacity:.36;
  }
  .hero-network-globe{width:108%;}
  .bar-chart{margin-top:58px}
}

@media(max-width:760px){
  .hero-network-wrap{
    right:-44%;
    bottom:-8%;
    width:106%;
    opacity:.17;
  }
  .section-mype{padding-top:86px;padding-bottom:80px}
  .section-mype .section-heading>p:not(.source){margin-top:22px}
  .bar-chart{margin-top:48px;gap:9px}
  .bar-stage{height:258px}
  .chart-baseline{top:270px}
  .bar-core{bottom:10px}
  .bar-percent{bottom:calc(var(--h) + 17px)}
  .metric-name{margin-top:21px}
  .mobility-speed-badge{left:14px;bottom:13px;padding:8px 10px;border-radius:11px;gap:8px}
  .mobility-speed-badge strong{font-size:17px}
  .mobility-speed-badge span{max-width:90px;font-size:7.5px}
  .footer-module{display:flex;flex-direction:column;gap:18px;width:100%}
  .footer-brand{padding-right:0}
  .brand-device{width:100px}
  .footer-divider{width:120px;height:1px}
  .footer-copy{width:100%;padding-inline:0}
  .footer-balance{display:none}
}

@media(max-width:430px){
  .bar-chart{margin-top:42px}
  .bar-stage{height:230px}
  .chart-baseline{top:241px}
  .bar-core{bottom:8px}
  .bar-percent{bottom:calc(var(--h) + 14px)}
  .metric-name{margin-top:18px}
  .agro-copy h2{font-size:17px}
}

/* =======================================================================
   v1.2 — FINAL POLISH CONSOLIDATION
   ======================================================================= */

/* HERO — replace globe treatment with a premium strategy-room visual */
.hero-network-wrap{
  position:relative;
  width:min(610px,100%);
  height:460px;
  margin:0 0 0 auto;
  display:block;
  overflow:hidden;
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(173,214,255,.16);
  box-shadow:0 30px 74px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  filter:none;
  isolation:isolate;
}
.hero-network-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg,rgba(6,24,49,.08) 0%,rgba(6,24,49,0) 28%,rgba(6,24,49,.10) 100%),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.18),transparent 22%),
    linear-gradient(90deg,rgba(6,24,49,.22) 0%,rgba(6,24,49,.03) 26%,rgba(6,24,49,0) 50%);
  pointer-events:none;
}
.hero-network-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:34px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 38%,transparent 65%,rgba(101,190,255,.06));
  mix-blend-mode:screen;
}
.hero-network-halo{
  position:absolute;
  z-index:0;
  width:110%;
  height:110%;
  inset:auto -8% -12% auto;
  border-radius:40px;
  background:radial-gradient(circle at 72% 40%,rgba(135,203,255,.24),rgba(70,151,221,.10) 34%,transparent 62%);
  filter:blur(34px);
  transform:none;
}
.hero-network-globe{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.02);
  filter:saturate(.98) contrast(1.02) brightness(.98);
  mask:none;
  -webkit-mask-image:none;
}

/* MYPE — more vertical breathing room and smaller percentages */
.section-mype{padding-top:112px;padding-bottom:100px}
.section-mype .section-heading>p:not(.source){margin-top:28px}
.bar-chart{
  margin-top:82px;
  gap:clamp(24px,4vw,62px);
}
.bar-stage{height:356px}
.chart-baseline{
  top:388px;
  bottom:auto;
}
.bar-core{bottom:22px}
.bar-percent{
  font-size:clamp(18px,1.85vw,26px);
  bottom:calc(var(--h) + 32px);
}
.metric-name{margin-top:24px}
.metric-value{margin-top:10px}
.metric-note{margin-top:4px}

/* MOBILITY — keep hover responsive and reversible */
.mobility-visual{
  transition:transform .30s ease, box-shadow .30s ease;
}
@media (hover:hover) and (pointer:fine){
  .mobility-visual:hover,
  .mobility-visual:focus-visible{
    transform:translateY(-8px);
    box-shadow:0 42px 88px rgba(12,45,81,.22);
  }
}

@media(max-width:1080px){
  .hero-network-wrap{
    position:relative;
    right:auto;
    bottom:auto;
    width:min(720px,100%);
    height:auto;
    aspect-ratio:4 / 3;
    margin:28px auto 0;
    opacity:1;
  }
  .hero-network-globe{width:100%;height:100%}
  .bar-chart{margin-top:74px}
}

@media(max-width:760px){
  .hero-network-wrap{
    width:100%;
    aspect-ratio:4 / 3;
    margin-top:22px;
    border-radius:26px;
  }
  .hero-network-wrap::after{border-radius:26px}
  .section-mype{padding-top:88px;padding-bottom:82px}
  .section-mype .section-heading>p:not(.source){margin-top:22px}
  .bar-chart{margin-top:56px;gap:10px}
  .bar-stage{height:272px}
  .chart-baseline{top:294px}
  .bar-core{bottom:14px}
  .bar-percent{font-size:clamp(14px,3.2vw,18px);bottom:calc(var(--h) + 20px)}
  .metric-name{margin-top:19px}
}

@media(max-width:430px){
  .bar-chart{margin-top:50px}
  .bar-stage{height:240px}
  .chart-baseline{top:260px}
  .bar-core{bottom:11px}
  .bar-percent{font-size:13px;bottom:calc(var(--h) + 16px)}
}


/* =======================================================================
   v1.3 — CONSOLIDATED FINAL ADJUSTMENTS
   ======================================================================= */

/* HERO — revert to premium network-world treatment (approved direction) */
.hero-layout{
  grid-template-columns:minmax(0,1fr) minmax(500px,1fr);
  gap:28px;
}
.hero-network-wrap{
  position:relative;
  width:min(620px,100%);
  aspect-ratio:1;
  height:auto;
  margin:0 -34px 0 auto;
  display:grid;
  place-items:center;
  overflow:visible;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  filter:none;
  isolation:isolate;
}
.hero-network-wrap::before{
  content:"";
  position:absolute;
  z-index:0;
  width:84%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(171,223,255,.22) 15%, rgba(84,159,227,.12) 34%, transparent 68%);
  filter:blur(30px);
  transform:translate(10%,-2%) scale(1.14);
}
.hero-network-wrap::after{
  content:"";
  position:absolute;
  z-index:1;
  width:86%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 70% 28%, rgba(255,255,255,.15), transparent 10%), linear-gradient(135deg, rgba(255,255,255,.05), transparent 34%, transparent 66%, rgba(79,168,233,.07));
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero-network-halo{
  position:absolute;
  z-index:0;
  width:98%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 72% 44%, rgba(255,255,255,.30) 0%, rgba(152,219,255,.18) 16%, rgba(61,146,219,.10) 38%, transparent 70%);
  filter:blur(28px);
  transform:translate(8%,-2%) scale(1.09);
}
.hero-network-globe{
  position:relative;
  z-index:2;
  width:100%;
  max-width:620px;
  height:auto;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.04) translateX(4%);
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 52% 50%, #000 0 62%, rgba(0,0,0,.98) 73%, rgba(0,0,0,.70) 84%, transparent 100%);
  mask-image:radial-gradient(circle at 52% 50%, #000 0 62%, rgba(0,0,0,.98) 73%, rgba(0,0,0,.70) 84%, transparent 100%);
  filter:brightness(1.06) saturate(.94) contrast(1.04) drop-shadow(0 34px 54px rgba(0,0,0,.28));
}

/* MYPE — add more breathing room and reduce percentage size */
.section-mype{
  padding-top:114px;
  padding-bottom:100px;
}
.section-mype .section-heading > p:not(.source){
  margin-top:28px;
}
.bar-chart{
  margin-top:104px;
  gap:clamp(24px,4vw,64px);
}
.bar-stage{
  height:360px;
}
.chart-baseline{
  top:392px;
  bottom:auto;
}
.bar-core{
  bottom:20px;
}
.bar-percent{
  font-size:clamp(16px,1.55vw,22px);
  bottom:calc(var(--h) + 34px);
  text-shadow:0 0 12px rgba(255,255,255,.95);
}
.metric-name{
  margin-top:24px;
}
.metric-value{
  margin-top:10px;
}
.metric-note{
  margin-top:4px;
}

/* MOBILITY — use cleaned image and match hover/lift behaviour of other visuals */
.mobility-visual{
  position:relative;
  padding:0;
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  cursor:default;
  will-change:transform, box-shadow;
  transition:transform .32s cubic-bezier(.22,.72,.22,1), box-shadow .32s ease;
  box-shadow:0 28px 62px rgba(12,45,81,.16);
}
.mobility-visual::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(103,132,160,.14);
}
.mobility-visual img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:28px;
}
.mobility-visual:hover,
.mobility-visual:focus-visible,
.mobility-visual:focus-within{
  transform:translateY(-8px);
  box-shadow:0 42px 88px rgba(12,45,81,.22);
}
.mobility-visual:not(:hover):not(:focus-visible):not(:focus-within){
  transform:translateY(0);
  box-shadow:0 28px 62px rgba(12,45,81,.16);
}

@media(max-width:1080px){
  .hero-layout{
    grid-template-columns:1fr;
    gap:12px;
  }
  .hero-network-wrap{
    width:min(620px,100%);
    margin:26px auto 0;
  }
  .bar-chart{
    margin-top:92px;
  }
}

@media(max-width:760px){
  .hero-network-wrap{
    width:100%;
    margin-top:20px;
  }
  .bar-chart{
    margin-top:64px;
    gap:10px;
  }
  .bar-stage{
    height:276px;
  }
  .chart-baseline{
    top:298px;
  }
  .bar-core{
    bottom:14px;
  }
  .bar-percent{
    font-size:clamp(13px,3vw,17px);
    bottom:calc(var(--h) + 18px);
  }
}

@media(max-width:430px){
  .bar-chart{
    margin-top:56px;
  }
  .bar-stage{
    height:242px;
  }
  .chart-baseline{
    top:262px;
  }
  .bar-core{
    bottom:10px;
  }
  .bar-percent{
    font-size:12px;
    bottom:calc(var(--h) + 14px);
  }
}


/* =======================================================================
   v1.4.2 — HERO AS FULL-BLEED BACKGROUND
   ======================================================================= */

/* HERO — the approved earth artwork now replaces the entire hero background */
.hero{
  background:
    radial-gradient(circle at 82% 28%, rgba(79,152,229,.25), transparent 30%),
    radial-gradient(circle at 28% 110%, rgba(47,106,186,.15), transparent 34%),
    linear-gradient(90deg, rgba(4,20,45,.98) 0%, rgba(5,24,52,.96) 33%, rgba(8,33,67,.78) 52%, rgba(9,40,76,.28) 66%, rgba(9,40,76,.06) 76%),
    linear-gradient(116deg,#031226 0%,#072042 43%,#0b315d 70%,#144577 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url('/assets/hero-network-final.png') no-repeat right -185px center;
  background-size:auto 108%;
  pointer-events:none;
}
.hero-grid,
.hero-ambient{z-index:1}
.hero-layout{
  display:block;
  min-height:620px;
  padding:24px 0 92px;
}
.hero-copy{
  position:relative;
  z-index:3;
  max-width:600px;
  padding-top:72px;
}
.hero-network-wrap{display:none !important}

@media(max-width:1280px){
  .hero::before{
    background-position:right -220px center;
    background-size:auto 104%;
  }
  .hero-copy{max-width:590px}
}

@media(max-width:1080px){
  .hero-layout{min-height:560px;padding:20px 0 84px}
  .hero-copy{max-width:680px;padding-top:54px}
  .hero::before{
    background-position:right -300px center;
    background-size:auto 100%;
    opacity:.9;
  }
}

@media(max-width:760px){
  .hero-layout{padding:34px 0 92px}
  .hero-copy{max-width:100%;padding-top:26px}
  .hero::before{
    background-position:right -340px center;
    background-size:auto 86%;
    opacity:.46;
  }
}

@media(max-width:430px){
  .hero::before{
    background-position:right -320px center;
    background-size:auto 80%;
    opacity:.36;
  }
}

/* =======================================================================
   v1.5 — HERO FINAL REFINEMENT
   ======================================================================= */

.hero{
  background:
    linear-gradient(90deg, rgba(4,18,38,.84) 0%, rgba(4,18,38,.58) 18%, rgba(4,18,38,.34) 32%, rgba(4,18,38,.14) 50%, rgba(4,18,38,.06) 64%, rgba(4,18,38,.04) 100%),
    linear-gradient(180deg, rgba(4,18,38,.16) 0%, rgba(4,18,38,.10) 100%),
    #04142d;
}
.hero::before{
  inset:0;
  background:url('/assets/hero-network-final.png') no-repeat center center;
  background-size:cover;
  opacity:1;
}
.hero-grid,
.hero-ambient,
.hero-network-wrap{
  display:none !important;
}
.hero-inner{
  position:relative;
  z-index:2;
}
.hero-header{
  height:auto;
  min-height:160px;
  justify-content:center;
  padding-top:28px;
}
.hero-brand-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.hero-logo{
  width:min(490px,42vw);
  max-width:100%;
}
.hero-network-label{
  margin:0;
  font-size:clamp(18px,1.45vw,24px);
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(214,220,229,.72);
  font-weight:500;
}
.hero-layout{
  display:block;
  min-height:580px;
  padding:10px 0 92px;
}
.hero-copy{
  max-width:560px;
  padding-top:50px;
}
.hero h1{
  max-width:560px;
  font-size:clamp(32px,3.25vw,48px);
  line-height:1.08;
}
.hero-subtitle{
  max-width:560px;
  margin-top:26px;
  color:#d0d9e6;
  font-size:clamp(16px,1.38vw,20px);
  line-height:1.56;
}

@media (max-width: 1280px){
  .hero-logo{width:min(468px,45vw)}
  .hero-copy{max-width:540px}
  .hero h1{font-size:clamp(31px,3.1vw,44px)}
}

@media (max-width: 1080px){
  .hero-header{
    min-height:138px;
    padding-top:22px;
  }
  .hero-logo{width:min(430px,56vw)}
  .hero-network-label{font-size:18px;letter-spacing:.28em}
  .hero-layout{min-height:520px;padding:10px 0 86px}
  .hero-copy{max-width:620px;padding-top:26px}
  .hero h1{max-width:620px;font-size:clamp(31px,5.4vw,42px)}
  .hero-subtitle{max-width:620px}
}

@media (max-width: 760px){
  .hero{
    background:
      linear-gradient(180deg, rgba(4,18,38,.60) 0%, rgba(4,18,38,.42) 36%, rgba(4,18,38,.34) 100%),
      #04142d;
  }
  .hero-header{
    min-height:118px;
    padding-top:18px;
  }
  .hero-logo{width:min(360px,72vw)}
  .hero-network-label{font-size:15px;letter-spacing:.24em}
  .hero-layout{padding:16px 0 92px;min-height:520px}
  .hero-copy{padding-top:24px;max-width:100%}
  .hero h1{font-size:clamp(30px,8.5vw,40px);max-width:100%}
  .hero-subtitle{font-size:16px;max-width:100%}
}

@media (max-width: 430px){
  .hero-header{min-height:100px;padding-top:16px}
  .hero-logo{width:min(306px,76vw)}
  .hero-network-label{font-size:13px;letter-spacing:.22em}
  .hero h1{font-size:clamp(28px,8.8vw,35px)}
}

/* =======================================================================
   v1.6 — HERO BALANCE + BRAND ALIGNMENT REFINEMENT
   ======================================================================= */

.site-container.hero-inner{
  width:min(1260px, calc(100% - 36px));
}

.hero{
  background:
    linear-gradient(90deg, rgba(4,18,38,.90) 0%, rgba(4,18,38,.74) 16%, rgba(4,18,38,.44) 34%, rgba(4,18,38,.20) 52%, rgba(4,18,38,.08) 68%, rgba(4,18,38,.04) 100%),
    linear-gradient(180deg, rgba(4,18,38,.20) 0%, rgba(4,18,38,.12) 100%),
    #04142d;
}

.hero::before{
  background:url('/assets/hero-network-final.png') no-repeat right -220px bottom -82px;
  background-size:auto 118%;
  opacity:.96;
  filter:brightness(.88) saturate(.96);
}

.hero-header{
  min-height:154px;
  padding-top:24px;
}

.hero-brand-stack{
  width:min(540px, 48vw);
  margin-inline:auto;
  gap:0;
}

.hero-logo{
  width:100%;
  max-width:100%;
}

.hero-network-label{
  align-self:flex-end;
  width:72%;
  text-align:right;
  margin-top:-2px;
  padding-right:10px;
  line-height:1;
}

.hero-layout{
  min-height:590px;
  padding:8px 0 92px;
}

.hero-copy{
  max-width:560px;
  padding-top:42px;
}

.eyebrow-row{
  margin-bottom:22px;
}

.hero h1{
  max-width:560px;
  font-size:clamp(30px, 3.05vw, 44px);
}

.hero-subtitle{
  max-width:540px;
  margin-top:24px;
}

@media (max-width: 1280px){
  .site-container.hero-inner{width:min(1236px, calc(100% - 32px));}
  .hero::before{
    background-position:right -260px bottom -72px;
    background-size:auto 120%;
  }
  .hero-brand-stack{width:min(500px, 50vw);}
  .hero-copy{max-width:548px;}
}

@media (max-width: 1080px){
  .hero-header{min-height:138px;padding-top:22px;}
  .hero::before{
    background-position:right -340px bottom -48px;
    background-size:auto 116%;
    opacity:.84;
  }
  .hero-brand-stack{width:min(440px, 58vw);}
  .hero-network-label{width:72%;padding-right:8px;}
  .hero-layout{min-height:540px;padding:10px 0 84px;}
  .hero-copy{max-width:620px;padding-top:22px;}
}

@media (max-width: 760px){
  .site-container.hero-inner{width:min(100% - 28px, 680px);}
  .hero::before{
    background-position:right -360px bottom -24px;
    background-size:auto 118%;
    opacity:.48;
    filter:brightness(.76) saturate(.92);
  }
  .hero-header{min-height:118px;padding-top:18px;}
  .hero-brand-stack{width:min(360px, 76vw);}
  .hero-network-label{width:72%;padding-right:6px;margin-top:0;}
  .hero-layout{padding:16px 0 92px;min-height:520px;}
  .hero-copy{padding-top:18px;max-width:100%;}
}

@media (max-width: 430px){
  .site-container.hero-inner{width:calc(100% - 24px);}
  .hero::before{
    background-position:right -352px bottom -18px;
    background-size:auto 112%;
    opacity:.40;
  }
  .hero-brand-stack{width:min(306px, 78vw);}
  .hero-network-label{padding-right:4px;}
}

/* =======================================================================
   v1.7 — HERO ONLY: FINAL PROPORTION / GLOW / LOCKUP / LEFT ALIGNMENT
   ======================================================================= */

/* 1) Bring the left-aligned copy closer to the viewport edge, while keeping a premium safety margin. */
.site-container.hero-inner{
  width:100%;
  max-width:none;
  padding-left:64px;
  padding-right:36px;
  margin-inline:0;
}

/* 2) Reduce globe dominance: smaller, lower, farther right, and dimmer. */
.hero::before{
  background:url('/assets/hero-network-final.png') no-repeat right -315px bottom -138px;
  background-size:auto 92%;
  opacity:.84;
  filter:brightness(.80) saturate(.90) contrast(.98);
}

/* A subtle dark veil further softens the globe rim without changing the approved artwork. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  height:auto;
  background:
    linear-gradient(90deg,
      rgba(2,14,31,.34) 0%,
      rgba(2,14,31,.18) 34%,
      rgba(2,14,31,.05) 58%,
      rgba(2,14,31,.08) 78%,
      rgba(2,14,31,.12) 100%),
    linear-gradient(180deg,
      rgba(2,14,31,.06) 0%,
      rgba(2,14,31,.02) 60%,
      rgba(2,14,31,.16) 100%);
  pointer-events:none;
}

.hero-inner{z-index:2}

/* 3) Make NETWORK read as one lockup with QHAPAQ. */
.hero-brand-stack{
  position:relative;
  width:min(540px,48vw);
  margin-inline:auto;
  gap:0;
}
.hero-network-label{
  align-self:flex-end;
  width:auto;
  margin:-36px 3.8% 0 0;
  padding:0;
  text-align:right;
  line-height:1;
}

/* Preserve the already approved logo size and text hierarchy. */
.hero-header{
  min-height:150px;
  padding-top:20px;
}
.hero-layout{
  min-height:592px;
  padding:6px 0 90px;
}
.hero-copy{
  max-width:560px;
  padding-top:38px;
}

@media (max-width:1280px){
  .site-container.hero-inner{padding-left:52px;padding-right:28px;}
  .hero::before{
    background-position:right -335px bottom -118px;
    background-size:auto 94%;
  }
  .hero-network-label{margin-top:-33px;}
}

@media (max-width:1080px){
  .site-container.hero-inner{padding-left:40px;padding-right:24px;}
  .hero::before{
    background-position:right -360px bottom -88px;
    background-size:auto 92%;
    opacity:.70;
  }
  .hero-network-label{margin-top:-30px;}
  .hero-copy{padding-top:26px;}
}

@media (max-width:760px){
  .site-container.hero-inner{padding-left:24px;padding-right:18px;}
  .hero::before{
    background-position:right -350px bottom -45px;
    background-size:auto 86%;
    opacity:.38;
    filter:brightness(.70) saturate(.86);
  }
  .hero::after{
    background:linear-gradient(180deg,rgba(2,14,31,.22),rgba(2,14,31,.38));
  }
  .hero-network-label{margin-top:-22px;margin-right:3.8%;}
}

@media (max-width:430px){
  .site-container.hero-inner{padding-left:18px;padding-right:14px;}
  .hero::before{
    background-position:right -330px bottom -32px;
    background-size:auto 82%;
    opacity:.30;
  }
  .hero-network-label{margin-top:-19px;}
}


/* =======================================================================
   v1.7.1 — HERO BACKGROUND SCALE / GLOBE CROP / NETWORK PROXIMITY FIX
   ======================================================================= */

/* Keep only HERO refinements. Everything else remains untouched. */
.hero{
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(3,16,34,.90) 0%,
      rgba(3,16,34,.74) 16%,
      rgba(3,16,34,.48) 30%,
      rgba(3,16,34,.24) 44%,
      rgba(3,16,34,.10) 60%,
      rgba(3,16,34,.04) 100%),
    #04142d;
}

/* Enlarge the approved hero artwork so it covers the whole HERO area,
   while shifting it rightward to reveal less globe and preserve only a premium slice. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('/assets/hero-network-final.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:78% 54%;
  opacity:1;
  filter:brightness(.88) saturate(.94);
  pointer-events:none;
}

/* Clean left readability veil only — no boxed patch effect. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(3,16,34,.70) 0%,
      rgba(3,16,34,.52) 20%,
      rgba(3,16,34,.28) 36%,
      rgba(3,16,34,.12) 50%,
      rgba(3,16,34,.04) 66%,
      rgba(3,16,34,0) 100%);
  pointer-events:none;
}

.hero-grid,
.hero-ambient,
.hero-network-wrap{
  display:none !important;
}

.hero-inner{position:relative;z-index:2;}

/* Keep the lockup centered and pull NETWORK closer to the wordmark. */
.hero-header{
  min-height:148px;
  padding-top:18px;
  justify-content:center;
}
.hero-brand-stack{
  width:min(540px,48vw);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.hero-logo{
  width:100%;
  max-width:100%;
}
.hero-network-label{
  align-self:flex-end;
  width:auto;
  margin:-52px 2.4% 0 0;
  padding:0;
  text-align:right;
  font-size:clamp(18px,1.45vw,24px);
  line-height:1;
  letter-spacing:.34em;
  color:rgba(214,220,229,.72);
}

/* Preserve the already-approved left text alignment and scale. */
.site-container.hero-inner{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-left:64px;
  padding-right:36px;
}
.hero-layout{
  display:block;
  min-height:592px;
  padding:6px 0 90px;
}
.hero-copy{
  position:relative;
  z-index:3;
  max-width:560px;
  padding-top:38px;
}
.hero h1{
  max-width:560px;
  font-size:clamp(30px,3.05vw,44px);
  line-height:1.08;
}
.hero-subtitle{
  max-width:540px;
  margin-top:24px;
  color:#d0d9e6;
  font-size:clamp(16px,1.38vw,20px);
  line-height:1.56;
}

@media (max-width:1280px){
  .site-container.hero-inner{padding-left:52px;padding-right:28px;}
  .hero::before{background-position:80% 56%;}
  .hero-network-label{margin-top:-48px;}
}

@media (max-width:1080px){
  .site-container.hero-inner{padding-left:40px;padding-right:24px;}
  .hero-header{min-height:136px;padding-top:18px;}
  .hero-brand-stack{width:min(440px,58vw);}
  .hero::before{background-position:84% 58%;filter:brightness(.84) saturate(.92);}
  .hero-layout{min-height:540px;padding:10px 0 84px;}
  .hero-copy{max-width:620px;padding-top:24px;}
  .hero h1{max-width:620px;font-size:clamp(31px,5.2vw,42px);}
  .hero-network-label{margin-top:-42px;margin-right:2.4%;font-size:18px;letter-spacing:.28em;}
}

@media (max-width:760px){
  .site-container.hero-inner{width:min(100% - 28px, 680px);padding-left:0;padding-right:0;margin-inline:auto;}
  .hero{background:linear-gradient(180deg, rgba(4,18,38,.74) 0%, rgba(4,18,38,.46) 36%, rgba(4,18,38,.28) 100%),#04142d;}
  .hero::before{background-position:76% 54%;filter:brightness(.72) saturate(.88);}
  .hero::after{background:linear-gradient(180deg,rgba(2,14,31,.28),rgba(2,14,31,.42));}
  .hero-header{min-height:118px;padding-top:18px;}
  .hero-brand-stack{width:min(360px,76vw);}
  .hero-network-label{margin-top:-28px;margin-right:2%;font-size:15px;letter-spacing:.24em;}
  .hero-layout{padding:16px 0 92px;min-height:520px;}
  .hero-copy{padding-top:18px;max-width:100%;}
  .hero h1{font-size:clamp(30px,8.5vw,40px);max-width:100%;}
  .hero-subtitle{font-size:16px;max-width:100%;}
}

@media (max-width:430px){
  .site-container.hero-inner{width:calc(100% - 24px);}
  .hero-brand-stack{width:min(306px,78vw);}
  .hero-network-label{margin-top:-22px;font-size:13px;letter-spacing:.22em;}
  .hero h1{font-size:clamp(28px,8.8vw,35px);}
}

/* =======================================================================
   v1.8 — HERO / MYPE / DONUT / MOBILITY FINAL REFINEMENTS
   ======================================================================= */

/* HERO — keep the approved full-bleed artwork, but reduce the globe dominance,
   soften the rim glow, center the brand lockup between left edge and globe,
   and lower the content block to use the empty lower-left area. */
.hero{
  min-height:820px;
  background:
    radial-gradient(circle at 82% 28%, rgba(79,152,229,.16), transparent 32%),
    radial-gradient(circle at 26% 108%, rgba(47,106,186,.10), transparent 34%),
    linear-gradient(90deg, rgba(4,20,45,.96) 0%, rgba(5,24,52,.90) 28%, rgba(7,29,57,.62) 46%, rgba(7,29,57,.24) 64%, rgba(7,29,57,.06) 76%),
    #04142d;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('/assets/hero-network-final.png');
  background-repeat:no-repeat;
  background-size:146% auto;
  background-position:right -175px center;
  opacity:.94;
  filter:brightness(.70) saturate(.88) contrast(.98);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(3,16,34,.74) 0%,
      rgba(3,16,34,.56) 18%,
      rgba(3,16,34,.32) 34%,
      rgba(3,16,34,.14) 48%,
      rgba(3,16,34,.05) 62%,
      rgba(3,16,34,0) 100%);
  pointer-events:none;
}
.hero-grid,.hero-ambient,.hero-network-wrap{display:none !important;}
.hero-inner{position:relative;z-index:2;}
.site-container.hero-inner{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-left:64px;
  padding-right:40px;
}
.hero-header{
  min-height:128px;
  padding-top:22px;
  display:flex;
  justify-content:flex-start;
}
.hero-brand-stack{
  width:min(500px,40vw);
  margin-left:clamp(140px, 18vw, 300px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.hero-logo{
  width:100%;
  max-width:none;
}
.hero-network-label{
  align-self:flex-end;
  margin:-34px .8% 0 0;
  padding:0;
  text-align:right;
  line-height:1;
  font-size:clamp(17px,1.35vw,22px);
  letter-spacing:.32em;
  color:rgba(214,220,229,.68);
}
.hero-layout{
  display:block;
  min-height:640px;
  padding:78px 0 94px;
}
.hero-copy{
  max-width:560px;
  padding-top:104px;
}
.eyebrow-row{margin-bottom:20px;}
.hero h1{
  max-width:560px;
  font-size:clamp(42px,4.2vw,62px);
  line-height:1.04;
}
.hero-subtitle{
  max-width:530px;
  margin-top:24px;
  color:#d0d9e6;
  font-size:clamp(18px,1.45vw,21px);
  line-height:1.56;
}

/* BARS — restore comfortable spacing, slightly larger labels, and keep bars above the X axis. */
.section-mype{padding-top:110px;padding-bottom:98px;}
.section-mype .section-heading > p:not(.source){margin-top:32px;}
.bar-chart{
  margin-top:92px;
  gap:clamp(24px,4vw,62px);
}
.bar-stage{height:356px;}
.chart-baseline{top:392px;bottom:auto;}
.bar-core{bottom:18px;}
.bar-percent{
  font-size:clamp(19px,1.9vw,27px);
  bottom:calc(var(--h) + 28px);
}
.metric-name{margin-top:26px;font-size:12px;}
.metric-value{margin-top:10px;font-size:14px;}
.metric-note{margin-top:4px;font-size:12px;}

/* DONUT — recover scale and reduce empty surrounding space. */
.split-layout{gap:clamp(46px,6vw,90px);}
.donut-wrap{transform:scale(1.08);transform-origin:center center;}
.donut{width:min(398px,80vw);}
.donut-formal-label{top:13.5%;left:26%;}
.method-note{max-width:520px;margin-top:18px;font-size:12px;line-height:1.5;}

/* MOBILITY — approved copy and slightly larger supporting text. */
.mobility-copy{max-width:500px;padding-left:26px;}
.mobility-copy p{font-size:18px;line-height:1.62;}

@media (max-width:1280px){
  .site-container.hero-inner{padding-left:52px;padding-right:30px;}
  .hero::before{background-size:154% auto;background-position:right -205px center;}
  .hero-brand-stack{width:min(450px,42vw);margin-left:clamp(110px,15vw,230px);}
  .hero-network-label{margin-top:-30px;}
  .hero-layout{padding-top:66px;}
  .hero-copy{padding-top:92px;}
}
@media (max-width:1080px){
  .hero{min-height:760px;}
  .site-container.hero-inner{padding-left:38px;padding-right:24px;}
  .hero::before{background-size:168% auto;background-position:right -240px center;filter:brightness(.68) saturate(.86) contrast(.98);}
  .hero-header{min-height:118px;padding-top:20px;}
  .hero-brand-stack{width:min(400px,52vw);margin-left:clamp(56px,10vw,120px);}
  .hero-network-label{margin-top:-26px;font-size:17px;}
  .hero-layout{min-height:580px;padding:56px 0 84px;}
  .hero-copy{padding-top:82px;max-width:520px;}
  .hero h1{font-size:clamp(38px,5.2vw,54px);max-width:520px;}
  .hero-subtitle{font-size:18px;max-width:500px;}
  .bar-chart{margin-top:84px;}
  .split-layout{gap:48px;}
  .donut-wrap{transform:scale(1.03);}
}
@media (max-width:760px){
  .hero{min-height:680px;background:linear-gradient(180deg, rgba(4,18,38,.82) 0%, rgba(4,18,38,.48) 40%, rgba(4,18,38,.26) 100%), #04142d;}
  .site-container.hero-inner{width:min(100% - 28px,680px);padding-left:0;padding-right:0;margin-inline:auto;}
  .hero::before{background-size:auto 96%;background-position:right -210px top 24px;filter:brightness(.60) saturate(.82);opacity:.62;}
  .hero::after{background:linear-gradient(180deg,rgba(2,14,31,.36),rgba(2,14,31,.54));}
  .hero-header{min-height:104px;padding-top:18px;justify-content:flex-start;}
  .hero-brand-stack{width:min(316px,80vw);margin-left:0;}
  .hero-network-label{margin-top:-20px;margin-right:1.2%;font-size:13px;letter-spacing:.24em;}
  .hero-layout{min-height:520px;padding:30px 0 76px;}
  .hero-copy{padding-top:48px;max-width:100%;}
  .hero h1{font-size:clamp(34px,8.8vw,44px);max-width:100%;}
  .hero-subtitle{font-size:16px;max-width:100%;}
  .section-mype .section-heading > p:not(.source){margin-top:24px;}
  .bar-chart{margin-top:62px;gap:10px;}
  .bar-stage{height:276px;}
  .chart-baseline{top:304px;}
  .bar-core{bottom:12px;}
  .bar-percent{font-size:clamp(14px,3.1vw,18px);bottom:calc(var(--h) + 18px);}
  .metric-name{margin-top:20px;font-size:9px;}
  .metric-value{font-size:10px;}
  .metric-note{font-size:9px;}
  .split-layout{gap:54px;}
  .donut-wrap{transform:none;}
  .donut{width:min(344px,84vw);}
  .donut-formal-label{top:12%;left:26%;}
  .method-note{margin-top:16px;font-size:11.5px;}
  .mobility-copy{padding-left:20px;max-width:100%;}
  .mobility-copy p{font-size:17px;}
}
@media (max-width:430px){
  .site-container.hero-inner{width:calc(100% - 24px);}
  .hero::before{background-size:auto 92%;background-position:right -220px top 38px;opacity:.56;}
  .hero-brand-stack{width:min(286px,82vw);}
  .hero-network-label{margin-top:-17px;font-size:12px;letter-spacing:.2em;}
  .hero-copy{padding-top:42px;}
  .hero h1{font-size:clamp(32px,8.9vw,38px);}
  .bar-chart{margin-top:54px;}
  .bar-stage{height:242px;}
  .chart-baseline{top:266px;}
  .bar-core{bottom:10px;}
  .bar-percent{font-size:13px;bottom:calc(var(--h) + 14px);}
  .donut{width:min(320px,86vw);}
}

/* =======================================================================
   v1.9 — HERO PRECISION FIXES + SECTION POLISH
   ======================================================================= */

/* HERO: keep the approved artwork scale stable, only soften the rim glow,
   restore the approved NETWORK alignment, center the lockup between the left
   screen edge and the globe, and keep the copy inside a single-screen focus. */
.hero{
  min-height:790px;
  background:
    radial-gradient(circle at 80% 24%, rgba(79,152,229,.14), transparent 32%),
    radial-gradient(circle at 26% 108%, rgba(47,106,186,.09), transparent 34%),
    linear-gradient(90deg, rgba(4,20,45,.96) 0%, rgba(5,24,52,.90) 26%, rgba(7,29,57,.62) 44%, rgba(7,29,57,.22) 62%, rgba(7,29,57,.05) 76%),
    #04142d;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('/assets/hero-network-final.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right -90px center;
  opacity:.97;
  filter:brightness(.80) saturate(.90) contrast(.98);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(3,16,34,.72) 0%,
      rgba(3,16,34,.54) 18%,
      rgba(3,16,34,.30) 36%,
      rgba(3,16,34,.12) 52%,
      rgba(3,16,34,.04) 66%,
      rgba(3,16,34,0) 100%);
  pointer-events:none;
}
.hero-grid,.hero-ambient,.hero-network-wrap{display:none !important;}
.hero-inner{position:relative;z-index:2;}
.site-container.hero-inner{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-left:64px;
  padding-right:36px;
}
.hero-header{
  min-height:124px;
  padding-top:22px;
  display:flex;
  justify-content:center;
  width:min(56vw, 780px);
}
.hero-brand-stack{
  width:min(468px, 35vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.hero-logo{
  width:100%;
  max-width:none;
}
.hero-network-label{
  align-self:flex-end;
  width:62%;
  margin:-18px 0 0 0;
  padding:0;
  text-align:right;
  line-height:1;
  font-size:clamp(17px,1.22vw,21px);
  letter-spacing:.30em;
  color:rgba(214,220,229,.68);
}
.hero-layout{
  display:block;
  min-height:592px;
  padding:26px 0 84px;
}
.hero-copy{
  max-width:560px;
  padding-top:34px;
}
.eyebrow-row{margin-bottom:20px;}
.hero h1{
  max-width:540px;
  font-size:clamp(34px,3.25vw,50px);
  line-height:1.05;
}
.hero-subtitle{
  max-width:530px;
  margin-top:22px;
  color:#d0d9e6;
  font-size:clamp(18px,1.35vw,20px);
  line-height:1.56;
}

/* MYPE bar chart: keep clear whitespace under the subtitle and ensure the
   bars sit slightly above the X axis without overlap. */
.section-mype{padding-top:108px;padding-bottom:100px;}
.section-mype .section-heading > p:not(.source){margin-top:28px;}
.bar-chart{
  margin-top:82px;
  gap:clamp(24px,4vw,62px);
}
.bar-stage{height:346px;}
.chart-baseline{top:auto;bottom:86px;height:1px;}
.bar-core{bottom:14px;}
.bar-percent{
  font-size:clamp(19px,1.85vw,27px);
  bottom:calc(var(--h) + 24px);
}
.metric-name{margin-top:24px;font-size:12px;}
.metric-value{margin-top:10px;font-size:14px;}
.metric-note{margin-top:4px;font-size:12px;}

/* Donut: restore a stronger presence and reduce perceived empty space. */
.split-layout{gap:clamp(46px,5.8vw,88px);}
.donut-wrap{transform:scale(1.12);transform-origin:center center;}
.donut{width:min(412px,82vw);}
.donut-formal-label{top:12.8%;left:26%;}
.method-note{max-width:540px;margin-top:18px;font-size:12px;line-height:1.52;}

/* Mobility: preserve approved copy and slightly enlarge the text block. */
.mobility-copy{max-width:500px;padding-left:26px;}
.mobility-copy p{font-size:19px;line-height:1.64;}

@media (max-width: 1280px){
  .site-container.hero-inner{padding-left:52px;padding-right:28px;}
  .hero::before{background-position:right -118px center;}
  .hero-header{width:min(58vw, 720px);}
  .hero-brand-stack{width:min(438px, 38vw);}
  .hero-network-label{margin-top:-16px;}
  .hero-copy{max-width:548px;padding-top:32px;}
}

@media (max-width: 1080px){
  .hero{min-height:740px;}
  .site-container.hero-inner{padding-left:38px;padding-right:24px;}
  .hero::before{
    background-position:right -148px center;
    filter:brightness(.78) saturate(.88) contrast(.98);
  }
  .hero-header{width:min(62vw, 620px);min-height:114px;padding-top:20px;}
  .hero-brand-stack{width:min(400px, 46vw);}
  .hero-network-label{width:62%;margin-top:-14px;font-size:16px;}
  .hero-layout{min-height:556px;padding:22px 0 82px;}
  .hero-copy{max-width:520px;padding-top:28px;}
  .hero h1{max-width:520px;font-size:clamp(32px,4.7vw,44px);}
  .hero-subtitle{max-width:500px;font-size:18px;}
  .bar-chart{margin-top:76px;}
  .donut-wrap{transform:scale(1.06);}
}

@media (max-width: 760px){
  .hero{min-height:676px;background:linear-gradient(180deg, rgba(4,18,38,.82) 0%, rgba(4,18,38,.50) 40%, rgba(4,18,38,.28) 100%), #04142d;}
  .site-container.hero-inner{width:min(100% - 28px,680px);padding-left:0;padding-right:0;margin-inline:auto;}
  .hero::before{
    background-size:auto 100%;
    background-position:right -160px top 22px;
    opacity:.68;
    filter:brightness(.62) saturate(.84);
  }
  .hero::after{background:linear-gradient(180deg,rgba(2,14,31,.38),rgba(2,14,31,.54));}
  .hero-header{width:auto;min-height:104px;padding-top:18px;justify-content:flex-start;}
  .hero-brand-stack{width:min(316px,80vw);margin-left:0;}
  .hero-network-label{width:62%;margin-top:-12px;font-size:13px;letter-spacing:.24em;}
  .hero-layout{min-height:520px;padding:14px 0 74px;}
  .hero-copy{padding-top:28px;max-width:100%;}
  .hero h1{font-size:clamp(32px,8.4vw,40px);max-width:100%;}
  .hero-subtitle{font-size:16px;max-width:100%;}
  .section-mype .section-heading > p:not(.source){margin-top:24px;}
  .bar-chart{margin-top:58px;gap:10px;}
  .bar-stage{height:272px;}
  .chart-baseline{bottom:78px;}
  .bar-core{bottom:10px;}
  .bar-percent{font-size:clamp(14px,3.1vw,18px);bottom:calc(var(--h) + 16px);}
  .metric-name{margin-top:18px;font-size:9px;}
  .metric-value{font-size:10px;}
  .metric-note{font-size:9px;}
  .split-layout{gap:52px;}
  .donut-wrap{transform:none;}
  .donut{width:min(352px,86vw);}
  .method-note{margin-top:16px;font-size:11.5px;}
  .mobility-copy{padding-left:20px;max-width:100%;}
  .mobility-copy p{font-size:18px;}
}

@media (max-width: 430px){
  .site-container.hero-inner{width:calc(100% - 24px);}
  .hero::before{background-size:auto 96%;background-position:right -170px top 34px;opacity:.60;}
  .hero-brand-stack{width:min(286px,82vw);}
  .hero-network-label{margin-top:-10px;font-size:12px;letter-spacing:.21em;}
  .hero-copy{padding-top:24px;}
  .hero h1{font-size:clamp(30px,8.7vw,36px);}
  .bar-chart{margin-top:52px;}
  .bar-stage{height:238px;}
  .chart-baseline{bottom:74px;}
  .bar-core{bottom:8px;}
  .bar-percent{font-size:13px;bottom:calc(var(--h) + 12px);}
  .donut{width:min(326px,88vw);}
}

/* =======================================================================
   v2.0 — HERO FINAL / SPACE-TECH EDITORIAL DIRECTION
   Only HERO is changed. Remaining landing sections stay untouched.
   ======================================================================= */

.hero.hero-v2{
  position:relative;
  min-height:100vh;
  height:900px;
  max-height:980px;
  overflow:hidden;
  color:#fff;
  background:#020a14 url('/assets/hero-background-qhapaq-final.png') center center / cover no-repeat;
}

.hero.hero-v2::before,
.hero.hero-v2::after{
  content:none !important;
  display:none !important;
}

.hero.hero-v2 .hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  padding:0 clamp(40px,4.6vw,72px);
}

.hero.hero-v2 .hero-header{
  position:absolute;
  top:28px;
  left:0;
  width:100%;
  min-height:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.hero.hero-v2 .hero-brand-stack{
  width:clamp(270px,22vw,330px);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}

.hero.hero-v2 .hero-logo{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

.hero.hero-v2 .hero-network-label{
  align-self:flex-end;
  margin:-5px 0 0 0;
  padding:0;
  width:auto;
  text-align:right;
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(12px,.95vw,15px);
  font-weight:400;
  line-height:1;
  letter-spacing:.34em;
  color:rgba(203,211,223,.66);
  text-transform:uppercase;
}

.hero.hero-v2 .hero-layout{
  position:absolute;
  inset:0;
  min-height:0;
  padding:0;
  display:block;
}

.hero.hero-v2 .hero-copy{
  position:absolute;
  left:clamp(40px,4.6vw,72px);
  top:35%;
  transform:translateY(-2%);
  width:min(48vw,690px);
  max-width:690px;
  padding:0;
}

.hero.hero-v2 .eyebrow-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 52px 0;
}

.hero.hero-v2 .spectrum-line{
  width:88px;
  height:3px;
  border-radius:999px;
}

.hero.hero-v2 .eyebrow{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(12px,.95vw,15px);
  font-weight:400;
  line-height:1;
  letter-spacing:.04em;
  color:rgba(212,218,228,.76);
}

.hero.hero-v2 h1{
  margin:0;
  max-width:none;
  font-family:"D-DIN", "DIN Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size:clamp(42px,4.1vw,66px);
  font-stretch:condensed;
  font-weight:700;
  line-height:.98;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:#fff;
}

.hero.hero-v2 .hero-subtitle{
  margin:24px 0 0 0;
  max-width:465px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(14px,1.08vw,17px);
  font-weight:400;
  line-height:1.45;
  letter-spacing:-.005em;
  color:rgba(255,255,255,.92);
}

@media (max-width:1200px){
  .hero.hero-v2{height:820px;min-height:760px;background-position:center center;}
  .hero.hero-v2 .hero-brand-stack{width:clamp(250px,25vw,300px);}
  .hero.hero-v2 .hero-copy{top:37%;width:min(52vw,620px);}
  .hero.hero-v2 h1{font-size:clamp(40px,4.6vw,58px);}
  .hero.hero-v2 .eyebrow-row{margin-bottom:42px;}
}

@media (max-width:900px){
  .hero.hero-v2{
    min-height:760px;
    height:820px;
    max-height:none;
    background-position:62% center;
  }
  .hero.hero-v2 .hero-inner{padding:0 30px;}
  .hero.hero-v2 .hero-header{top:24px;}
  .hero.hero-v2 .hero-brand-stack{width:260px;}
  .hero.hero-v2 .hero-copy{
    left:30px;
    top:39%;
    width:min(70vw,590px);
  }
  .hero.hero-v2 h1{font-size:clamp(38px,6vw,54px);}
  .hero.hero-v2 .hero-subtitle{max-width:430px;font-size:15px;}
}

@media (max-width:700px){
  .hero.hero-v2{
    min-height:720px;
    height:100svh;
    max-height:840px;
    background-position:69% center;
  }
  .hero.hero-v2 .hero-inner{padding:0 22px;}
  .hero.hero-v2 .hero-header{top:18px;}
  .hero.hero-v2 .hero-brand-stack{width:min(240px,66vw);}
  .hero.hero-v2 .hero-network-label{font-size:11px;letter-spacing:.28em;margin-top:-3px;}
  .hero.hero-v2 .hero-copy{
    left:22px;
    top:36%;
    width:calc(100% - 44px);
    max-width:520px;
  }
  .hero.hero-v2 .eyebrow-row{margin-bottom:36px;gap:10px;}
  .hero.hero-v2 .spectrum-line{width:64px;height:2px;}
  .hero.hero-v2 h1{
    font-size:clamp(34px,9vw,48px);
    line-height:1.0;
    letter-spacing:-.02em;
  }
  .hero.hero-v2 .hero-subtitle{
    max-width:360px;
    font-size:14px;
    line-height:1.5;
    color:rgba(255,255,255,.9);
  }
  .hero.hero-v2 .desktop-break{display:none;}
}

@media (max-width:430px){
  .hero.hero-v2{min-height:690px;background-position:72% center;}
  .hero.hero-v2 .hero-brand-stack{width:min(220px,68vw);}
  .hero.hero-v2 .hero-copy{top:35%;}
  .hero.hero-v2 h1{font-size:clamp(31px,9vw,40px);}
  .hero.hero-v2 .hero-subtitle{max-width:330px;font-size:13.5px;}
}

/* =======================================================================
   v2.1 — MICRO-REFINEMENTS ONLY (approved landing look & feel preserved)
   1) NETWORK lockup placement
   2) Hero headline tracking
   3) Mobile subtitle legibility
   4) Donut methodology spacing
   5) MYPE X-axis label scale + capitalization
   ======================================================================= */

/* NETWORK: align its right edge with the visible end of the QHAPAQ wordmark
   and pull it closer vertically, accounting for transparent padding in logo PNG. */
.hero.hero-v2 .hero-network-label{
  margin:-13px 3.8% 0 0;
}

/* Hero headline: keep approved size; add breathing room between characters. */
.hero.hero-v2 h1{
  letter-spacing:.012em;
}

/* Donut methodology: create intentional separation below the scaled donut/legend. */
.section-informal .method-note{
  margin-top:58px;
}

/* MYPE series labels: +70% from 12px desktop baseline. */
.section-mype .metric-name{
  font-size:20.4px;
  line-height:1.1;
}

@media (max-width:1200px){
  .hero.hero-v2 .hero-network-label{
    margin-top:-12px;
    margin-right:3.8%;
  }
  .section-mype .metric-name{font-size:18px;}
}

@media (max-width:900px){
  .hero.hero-v2 .hero-network-label{
    margin-top:-11px;
    margin-right:3.8%;
  }
  .section-mype .metric-name{font-size:16px;}
}

@media (max-width:700px){
  .hero.hero-v2 .hero-network-label{
    margin-top:-10px;
    margin-right:3.8%;
  }
  .hero.hero-v2 .hero-subtitle{
    font-size:16px;
  }
  .section-informal .method-note{
    margin-top:46px;
  }
  .section-mype .metric-name{
    font-size:15px;
    letter-spacing:.055em;
  }
}

@media (max-width:430px){
  .hero.hero-v2 .hero-network-label{
    margin-top:-9px;
    margin-right:3.8%;
  }
  .hero.hero-v2 .hero-subtitle{
    font-size:15.5px;
  }
  .section-mype .metric-name{
    font-size:13.5px;
    letter-spacing:.035em;
  }
}

/* =======================================================================
   v2.2 — FINAL MICRO-ADJUSTMENTS
   1) NETWORK vertical lockup placement per approved reference
   2) Footer redundant slogan removed
   3) Subtle asynchronous living-network animation on hero globe
   ======================================================================= */

.hero.hero-v2 .hero-header,
.hero.hero-v2 .hero-copy{
  position:relative;
  z-index:3;
}

/* NETWORK — same right alignment, visibly closer to the wordmark like the reference. */
.hero.hero-v2 .hero-network-label{
  width:62%;
  margin:-23px 1.7% 0 0;
}

/* Hero animated living network */
.hero.hero-v2 .hero-live-network{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:.92;
}
.hero.hero-v2 .hero-live-network svg{
  display:block;
  width:100%;
  height:100%;
}
.hero.hero-v2 .pulse-line,
.hero.hero-v2 .pulse-node{
  transform-box:fill-box;
  transform-origin:center;
  will-change:opacity, transform;
}
.hero.hero-v2 .pulse-line{
  fill:none;
  stroke:rgba(255,255,255,.72);
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.055;
  mix-blend-mode:screen;
  animation:pulseLine var(--pulse-duration,7.2s) ease-in-out infinite;
  animation-delay:var(--pulse-delay,-1s);
}
.hero.hero-v2 .pulse-line.long{stroke-width:1.05;opacity:.045}
.hero.hero-v2 .pulse-node{
  fill:#fff;
  opacity:.12;
  mix-blend-mode:screen;
  animation:pulseNode var(--pulse-duration,6.4s) ease-in-out infinite;
  animation-delay:var(--pulse-delay,-1.4s);
}

@keyframes pulseLine{
  0%,100%{opacity:.035;stroke-width:1.0}
  40%{opacity:.08}
  58%{opacity:.2;stroke-width:1.2}
  74%{opacity:.09}
}
@keyframes pulseNode{
  0%,100%{opacity:.1;transform:scale(1)}
  38%{opacity:.16}
  56%{opacity:.42;transform:scale(1.14)}
  72%{opacity:.18}
}

/* Footer copy — keep centered composition while avoiding slogan redundancy. */
.footer-contact-label{
  margin:0;
  font-size:clamp(24px,2.15vw,30px);
  font-weight:450;
  line-height:1.16;
  letter-spacing:-.018em;
  color:#fff;
}
.footer-copy a{
  margin-top:14px;
}

@media (max-width:1200px){
  .hero.hero-v2 .hero-network-label{
    margin-top:-21px;
    margin-right:1.7%;
  }
}

@media (max-width:900px){
  .hero.hero-v2 .hero-network-label{
    width:62%;
    margin-top:-18px;
    margin-right:1.5%;
  }
}

@media (max-width:700px){
  .hero.hero-v2 .hero-network-label{
    width:62%;
    margin-top:-14px;
    margin-right:1.3%;
    font-size:11px;
    letter-spacing:.28em;
  }
  .hero.hero-v2 .hero-live-network{opacity:.82}
  .footer-contact-label{font-size:24px}
}

@media (max-width:430px){
  .hero.hero-v2 .hero-network-label{
    width:62%;
    margin-top:-12px;
    margin-right:1.1%;
    font-size:12px;
    letter-spacing:.21em;
  }
  .hero.hero-v2 .pulse-line{stroke-width:1.0}
  .footer-contact-label{font-size:22px}
}

@media(prefers-reduced-motion:reduce) and (min-width:701px){
  .hero.hero-v2 .pulse-line,
  .hero.hero-v2 .pulse-node{
    animation:none !important;
    opacity:.12;
    transform:none;
  }
}


/* =======================================================================
   v2.3 — FINAL RESPONSIVE AND FOOTER CLEANUP
   1) NETWORK raised slightly to sit closer to the wordmark
   2) Footer brand device + divider + text treated as one centered block
   3) Hero subtitle mobile flow fixed without changing approved copy/look
   4) MYPE X-axis series labels reduced for responsive and no bold
   ======================================================================= */

/* NETWORK — pull slightly upward so it converses with the logo instead of floating. */
.hero.hero-v2 .hero-network-label{
  width:62%;
  margin:-28px 1.7% 0 0;
}

/* Footer — centered single visual block, not left-biased elements. */
.footer-module{
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:0;
  flex:0 0 auto;
}
.footer-divider{
  flex:0 0 auto;
}
.footer-copy{
  min-width:0;
  width:auto;
  padding-inline:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.footer-balance{display:none !important;}

/* Hero subtitle — keep intended paragraph structure and prevent word collisions on mobile. */
.hero.hero-v2 .hero-subtitle{
  word-spacing:normal;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}

/* MYPE series labels — lighter weight and reduced responsive scale for cleaner separation. */
.section-mype .metric-name{
  font-weight:500;
}

@media (max-width:1200px){
  .hero.hero-v2 .hero-network-label{
    margin-top:-26px;
    margin-right:1.7%;
  }
}

@media (max-width:900px){
  .hero.hero-v2 .hero-network-label{
    width:62%;
    margin-top:-22px;
    margin-right:1.5%;
  }
  .section-mype .metric-name{
    font-size:13.6px;
    font-weight:500;
    letter-spacing:.045em;
  }
}

@media (max-width:700px){
  .hero.hero-v2 .hero-network-label{
    width:62%;
    margin-top:-18px;
    margin-right:1.3%;
    font-size:11px;
    letter-spacing:.28em;
  }
  .hero.hero-v2 .hero-subtitle{
    max-width:330px;
    font-size:16px;
    line-height:1.58;
    letter-spacing:0;
  }
  .section-mype .metric-name{
    font-size:12.75px;
    font-weight:500;
    letter-spacing:.03em;
  }
  .footer-module{
    flex-direction:column;
    gap:16px;
    width:100%;
  }
  .footer-brand,.footer-copy{
    text-align:center;
  }
  .footer-copy{
    align-items:center;
  }
}

@media (max-width:430px){
  .hero.hero-v2 .hero-network-label{
    width:62%;
    margin-top:-15px;
    margin-right:1.1%;
    font-size:12px;
    letter-spacing:.21em;
  }
  .hero.hero-v2 .hero-subtitle{
    max-width:312px;
    font-size:15.5px;
    line-height:1.6;
  }
  .section-mype .metric-name{
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.02em;
  }
}


/* =======================================================================
   v2.4 — FINAL NON-DESIGN FIXES ONLY
   1) Preserve desktop subtitle line breaks on mobile
   2) Social/SEO slogan metadata updated in HTML
   ======================================================================= */
@media (max-width:700px){
  .hero.hero-v2 .desktop-break{display:inline;}
}

/* =======================================================================
   v2.6 — PREMIUM VIEWPORT MOTION ONLY
   v2.4 visual design is frozen. No layout, typography, color, asset or
   final-state styling changes. This block only changes reveal behavior.
   ======================================================================= */

/* Replace transition-based reveal with an explicit keyframe sequence.
   This makes intermediate frames perceptible on Safari/iPhone as well as desktop. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{
    opacity:0;
    transform:translate3d(0,30px,0) scale(.988);
    transition:none !important;
    will-change:opacity,transform;
  }

  .js .reveal.is-visible{
    animation:qhapaqPremiumReveal 1.38s cubic-bezier(.16,.72,.18,1) both;
  }

  @keyframes qhapaqPremiumReveal{
    0%{
      opacity:0;
      transform:translate3d(0,30px,0) scale(.988);
    }
    18%{
      opacity:.08;
    }
    48%{
      opacity:.46;
      transform:translate3d(0,15px,0) scale(.994);
    }
    76%{
      opacity:.84;
      transform:translate3d(0,5px,0) scale(.998);
    }
    100%{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
    }
  }

  /* Internal visual effects begin after the containing block has visibly entered. */
  .bar-chart.is-visible .bar-core{
    transition-delay:.30s;
    transition-duration:1.18s;
  }
  .bar-chart.is-visible .bar-percent{
    animation-delay:1.05s;
  }
  .bar-chart.is-visible .metric-value{
    animation-delay:1.20s;
  }
  .bar-chart.is-visible .metric-note{
    animation-delay:1.32s;
  }

  .donut-main-ring{
    transition-delay:.28s;
    transition-duration:1.30s;
  }
  .donut-panel.is-visible .donut-formal-label{
    animation-delay:1.08s;
  }
  .donut-panel.is-visible .method-note{
    animation-delay:1.20s;
  }

  .mobility-visual img{
    transition-delay:.26s;
    transition-duration:1.28s;
  }

  .agro-visual.is-visible .agro-dots circle{
    animation-duration:.72s;
    animation-delay:.38s;
  }
  .agro-visual.is-visible .agro-dots circle:nth-child(3n){animation-delay:.48s}
  .agro-visual.is-visible .agro-dots circle:nth-child(4n){animation-delay:.58s}
  .agro-visual.is-visible .agro-dots circle:nth-child(5n){animation-delay:.68s}
}

/* Mobile gets the same premium behavior, but with a slightly longer travel time. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .js .reveal{
    transform:translate3d(0,34px,0) scale(.986);
  }
  .js .reveal.is-visible{
    animation-duration:1.48s;
  }
  .bar-chart.is-visible .bar-core{
    transition-delay:.34s;
    transition-duration:1.24s;
  }
  .donut-main-ring{
    transition-delay:.32s;
    transition-duration:1.36s;
  }
  .mobility-visual img{
    transition-delay:.30s;
    transition-duration:1.34s;
  }
}

/* =======================================================================
   v2.7 — FINAL MOBILE-ONLY REVEAL SAFEGUARD
   Surgical change: phones no longer animate/fade the outer .reveal container.
   Internal chart/image animations still run when .is-visible is triggered.
   Desktop and tablet behavior remains exactly as in v2.6.
   ======================================================================= */
@media (max-width:700px){
  .js .reveal,
  .js .reveal.is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }
}


/* =======================================================================
   v2.8 — OBJECT-LEVEL PREMIUM MOTION
   Based on the public reveal behavior inspected on Fyranova:
   - each object is observed independently
   - threshold 0
   - opacity 0 -> 1
   - translateY(20%) -> 0
   - 650 ms ease + 100 ms default delay
   - image-containing objects wait until their image has settled
   Visual layout, typography, sizing, colors and approved composition remain unchanged.
   ======================================================================= */

/* Retire the old parent-level reveal system. v2.8 uses .qh-motion only. */
.js .reveal,
.js .reveal.is-visible{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  will-change:auto !important;
}

/* Retire the old Hero parent animation; Hero children now enter independently. */
.hero.hero-v2 .hero-load,
.hero-ready .hero-load-1,
.hero-ready .hero-load-2,
.hero-ready .hero-load-3{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

@media (prefers-reduced-motion:no-preference){
  .js .qh-motion{
    opacity:0;
    transform:translateY(20%);
    transition-property:transform,opacity;
    transition-duration:.65s;
    transition-timing-function:ease;
    transition-delay:var(--qh-motion-delay,100ms);
    will-change:transform,opacity;
  }

  .js .qh-motion.qh-motion-visible{
    opacity:1;
    transform:translateY(0);
  }
}

/* Restore the approved internal effects to their original cadence.
   The outer object reveal and the internal chart/image effect remain distinct. */
.bar-chart.is-visible .bar-core{
  transition-delay:.12s;
  transition-duration:.90s;
}
.bar-chart.is-visible .bar-percent{animation-delay:.82s;}
.bar-chart.is-visible .metric-value{animation-delay:1s;}
.bar-chart.is-visible .metric-note{animation-delay:1.12s;}

.donut-main-ring{
  transition-delay:.12s;
  transition-duration:1.10s;
}
.donut-panel.is-visible .donut-formal-label{animation-delay:1s;}
.donut-panel.is-visible .method-note{animation-delay:1.1s;}

.mobility-visual img{
  transition-delay:.12s;
  transition-duration:1.05s;
}

.agro-visual.is-visible .agro-dots circle{
  animation-duration:.55s;
  animation-delay:0s;
}
.agro-visual.is-visible .agro-dots circle:nth-child(3n){animation-delay:.10s;}
.agro-visual.is-visible .agro-dots circle:nth-child(4n){animation-delay:.18s;}
.agro-visual.is-visible .agro-dots circle:nth-child(5n){animation-delay:.26s;}

/* Footer legal copy: desktop remains on one line when space allows.
   On phones the complete closing phrase moves together to a clean second line. */
.footer-rights{display:inline;}

@media (max-width:700px){
  .footer-rights{
    display:block;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:701px){
  .js .qh-motion,
  .js .qh-motion.qh-motion-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }
}

/* =======================================================================
   v2.9 — MOBILE PAINT SYNC + TOUCH INTERACTION CLEANUP
   Surgical mobile-only correction on top of v2.8:
   - JS now lets iOS/WebKit paint the hidden motion state before observation
   - touch-only focus/hover lift effects are neutralized on phone screens
   - desktop and tablet motion remain exactly as v2.8
   ======================================================================= */

@media (max-width:700px) and (hover:none) and (pointer:coarse){
  /* Bar metrics: tapping must not create a short hard lift/shadow. */
  .metric:hover .bar-lift,
  .metric:focus .bar-lift,
  .metric:focus-visible .bar-lift{
    transform:none !important;
  }
  .metric:hover .bar-core,
  .metric:focus .bar-core,
  .metric:focus-visible .bar-core{
    filter:none !important;
    box-shadow:0 18px 38px rgba(16,41,73,.18) !important;
  }

  /* Donut: preserve the approved resting state on touch. */
  .donut-panel:hover .donut,
  .donut-panel:focus .donut,
  .donut-panel:focus-visible .donut,
  .donut-panel:focus-within .donut{
    transform:none !important;
    box-shadow:0 30px 66px rgba(17,55,76,.18),0 10px 26px rgba(17,55,76,.12) !important;
  }

  /* Mobility image: no tap-induced jump; viewport reveal remains independent. */
  .mobility-visual:hover,
  .mobility-visual:focus,
  .mobility-visual:focus-visible,
  .mobility-visual:focus-within,
  .mobility-visual:not(:hover):not(:focus-visible):not(:focus-within){
    transform:none !important;
    box-shadow:0 28px 62px rgba(12,45,81,.16) !important;
  }

  /* Agro visual: remove touch focus lift while keeping dot animation intact. */
  .agro-visual:hover svg,
  .agro-visual:focus svg,
  .agro-visual:focus-visible svg,
  .agro-visual:focus-within svg{
    transform:none !important;
    filter:drop-shadow(0 30px 58px rgba(52,83,43,.16)) !important;
  }
}

/* =======================================================================
   v2.12 — MOBILE KEYFRAME MOTION
   iPhone/iOS-specific motion engine correction based on the effects that
   already render reliably on-device in this landing.

   Desktop/tablet remain unchanged. On phones (<=700px), object reveals and
   the internal bar/donut/mobility effects use CSS @keyframes instead of
   transitions. Layout, typography, dimensions, colors and final states are
   unchanged.
   ======================================================================= */

@keyframes qhMobileReveal{
  from{
    opacity:0;
    transform:translateY(20%);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes qhMobileBarGrow{
  from{transform:translateX(-50%) scaleY(0);}
  to{transform:translateX(-50%) scaleY(1);}
}

@keyframes qhMobileDonutDraw{
  from{stroke-dashoffset:86.8;}
  to{stroke-dashoffset:0;}
}

@keyframes qhMobileImageReveal{
  from{
    clip-path:inset(0 100% 0 0);
    transform:scale(1.012);
  }
  to{
    clip-path:inset(0 0 0 0);
    transform:scale(1);
  }
}

@media (max-width:700px){
  /* Object-level reveal: use keyframes on iOS, including when Reduce Motion is enabled. */
  .js .qh-motion{
    opacity:0;
    transform:translateY(20%);
    transition:none !important;
    animation:none;
    will-change:opacity,transform;
  }

  .js .qh-motion.qh-motion-visible{
    opacity:0;
    transform:translateY(20%);
    transition:none !important;
    animation:qhMobileReveal .65s ease var(--qh-motion-delay,100ms) both;
  }

  /* MYPE bars: preserve final geometry, replace scale transition with keyframes. */
  .bar-core{
    transition-property:filter,box-shadow !important;
    transition-duration:.38s !important;
    transition-delay:0s !important;
  }
  .bar-chart.is-visible .bar-core{
    transform:translateX(-50%) scaleY(0);
    animation:qhMobileBarGrow .90s cubic-bezier(.2,.8,.22,1) .12s both;
  }

  /* Donut arc: same 86.8% end state, now drawn with keyframes. */
  .donut-main-ring{
    transition:none !important;
    stroke-dashoffset:86.8;
  }
  .donut-panel.is-visible .donut-main-ring{
    animation:qhMobileDonutDraw 1.10s cubic-bezier(.2,.8,.22,1) .12s both;
  }

  /* Mobility photograph: replace clip-path/scale transition with keyframes. */
  .mobility-visual img{
    clip-path:inset(0 100% 0 0);
    transform:scale(1.012);
    transition:none !important;
  }
  .mobility-visual.is-visible img{
    clip-path:inset(0 100% 0 0);
    transform:scale(1.012);
    animation:qhMobileImageReveal 1.05s cubic-bezier(.2,.8,.22,1) .12s both;
  }

  /* Agro dots already use working keyframes; explicitly keep their cadence. */
  .agro-visual.is-visible .agro-dots circle{
    animation-name:dotIn;
    animation-duration:.55s;
    animation-timing-function:ease;
    animation-fill-mode:forwards;
  }
}


/* =======================================================================
   v2.13 — MOBILE MOTION FINAL + SEQUENCING
   - Phone reveal remains active even when iOS Reduce Motion is enabled.
   - Hero text reveals bottom-to-top; logo/NETWORK keeps its approved behavior.
   - MYPE sequence follows visual hierarchy, with bars before percentages.
   - MYPE source participates in reveal.
   - Mobile percentages float higher and are centered over the bar cap.
   ======================================================================= */

/* MYPE internal reveal order: bars -> percentages -> series -> values -> notes.
   The chart heading remains its own earlier qh-motion object; the source remains
   its own later qh-motion object, so the block reads naturally top-to-bottom. */
@media (prefers-reduced-motion:no-preference){
  .section-mype .metric-name{opacity:0;}
  .bar-chart.is-visible .bar-core{
    transition-delay:.12s;
    transition-duration:.90s;
  }
  .bar-chart.is-visible .bar-percent{
    animation:fadeUp .45s ease forwards .88s;
  }
  .bar-chart.is-visible .metric-name{
    animation:fadeUp .42s ease forwards 1.03s;
  }
  .bar-chart.is-visible .metric-value{
    animation:fadeUp .45s ease forwards 1.16s;
  }
  .bar-chart.is-visible .metric-note{
    animation:fadeUp .45s ease forwards 1.29s;
  }
}

/* Phones use the same sequence even when the OS requests reduced motion,
   because this landing intentionally preserves only this restrained reveal. */
@media (max-width:700px){
  .section-mype .metric-name{opacity:0;}

  .bar-chart.is-visible .bar-core{
    transform:translateX(-50%) scaleY(0);
    animation:qhMobileBarGrow .90s cubic-bezier(.2,.8,.22,1) .12s both;
  }
  .bar-chart.is-visible .bar-percent{
    animation:fadeUp .45s ease forwards .88s;
  }
  .bar-chart.is-visible .metric-name{
    animation:fadeUp .42s ease forwards 1.03s;
  }
  .bar-chart.is-visible .metric-value{
    animation:fadeUp .45s ease forwards 1.16s;
  }
  .bar-chart.is-visible .metric-note{
    animation:fadeUp .45s ease forwards 1.29s;
  }

  /* Percentage labels: float clear of the 3D cap and align to its center. */
  .section-mype .bar-percent{
    left:calc(50% - 2px);
    width:min(72px,72%);
    text-align:center;
    bottom:calc(var(--h) + 22px);
  }
}

@media (max-width:430px){
  .section-mype .bar-percent{
    width:min(63px,75%);
    bottom:calc(var(--h) + 20px);
  }
}

/* v2.15 — scoped statistical blocks; independent of legacy chart motion. */
.stats215 .source{color:#657488;font-size:12px;line-height:1.65}
.stats215 .source a{text-underline-offset:3px;text-decoration-color:#bac4cf}
.stats215 .source a:hover{color:var(--ink)}
.mype215-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:52px auto 0;max-width:1080px}
.mype215-card{position:relative;min-width:0;padding:32px 22px 30px;text-align:center;border:1px solid #e5eaf0;border-radius:18px;background:linear-gradient(145deg,#fff,var(--tint));box-shadow:0 14px 34px #10294909;border-top:4px solid var(--accent)}
.mype215-card h3{margin:0 0 22px;font-size:14px;letter-spacing:.16em;font-weight:750;color:#526275}
.mype215-card>strong{display:block;color:var(--ink);font-size:clamp(46px,4.6vw,66px);line-height:1.1;letter-spacing:-.055em;white-space:nowrap}
.mype215-card strong small{font-size:16px;letter-spacing:0;font-weight:500;display:block;line-height:1.5}
.mype215-card>strong{min-height:100px}
.mype215-card p{margin:8px 0 0;font-size:15px;color:#627084;line-height:1.45}
.mype215-card p.mype215-detail{font-size:20px;font-weight:650;color:var(--ink);margin-top:14px}
.mype215-card>span{display:block;margin-top:6px;font-size:12px;color:#657488;line-height:1.5}
.stats215 .split-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px)}
.inf215-panel{min-width:0;display:grid;justify-items:center}
.inf215-donut{width:min(340px,100%);position:relative;aspect-ratio:1}
.inf215-donut svg{width:100%;height:100%;filter:drop-shadow(0 14px 12px #17394a14)}
.inf215-center{position:absolute;inset:24%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.inf215-center strong{font-size:clamp(36px,4.2vw,52px);letter-spacing:-.05em;line-height:1.1}
.inf215-center span{font-size:14px;color:#526275;line-height:1.4;margin-top:10px}
.inf215-legend{width:min(340px,100%);display:grid;gap:0;margin-top:24px}
.inf215-legend p{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:12px;margin:0;padding:12px 4px;border-bottom:1px solid #dce3e9;font-size:15px;color:#526275}
.inf215-legend i,.ag215-row i{width:10px;height:10px;border-radius:50%;display:block}
.inf215-legend strong{color:var(--ink);font-variant-numeric:tabular-nums}
.inf215-note{margin:22px 0 0;max-width:380px;text-align:center;font-size:12px;line-height:1.65;color:#657488}
.ag215-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"chart copy" "key copy" "source source";align-items:center;gap:20px clamp(36px,7vw,100px)}
.ag215-copy{grid-area:copy;min-width:0}
.ag215-copy h2{font-size:18px;letter-spacing:.16em;line-height:1.5;margin:0;font-weight:750}
.ag215-number{font-size:clamp(76px,8.5vw,116px);line-height:1.05;letter-spacing:-.07em;color:#477c3f;font-weight:690;margin:24px 0 0}
.ag215-description{font-size:clamp(23px,2.3vw,30px);line-height:1.4;color:#3f5240;letter-spacing:-.02em;margin:20px 0 0}
.ag215-statement{font-size:18px;line-height:1.65;color:#5e6858;margin:28px 0 0}
.ag215-chart{grid-area:chart;min-width:0;width:min(400px,100%);margin:auto}
.ag215-chart svg{width:100%;height:auto;filter:drop-shadow(0 14px 20px #34532b12)}
.ag215-key{grid-area:key;min-width:0;width:100%;max-width:430px;margin:auto}
.ag215-key-title{font-size:11px;font-weight:700;letter-spacing:.08em;color:#68735e;line-height:1.5;margin:0 0 10px}
.ag215-key ul{padding:0;margin:0;list-style:none}
.ag215-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:11px 10px;border:0;border-bottom:1px solid #e5e6da;background:transparent;border-radius:5px;color:#43523e;font:inherit;font-size:14px;text-align:left;cursor:pointer;min-height:44px;transition:background .2s}
.ag215-row strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}
.ag215-row:hover,.ag215-row.is-active{background:#e9eddf}
.ag215-row:focus-visible{outline:2px solid #477c3f;outline-offset:2px}
.ag215-segment{transition:opacity .25s,filter .25s;cursor:pointer}
.ag215-chart.has-selection .ag215-segment:not(.is-active){opacity:.4}
.ag215-segment.is-active{filter:brightness(1.08)}
.ag215-source{grid-area:source;max-width:900px;margin:16px auto 0;text-align:center}
.stats215 .graphic215-inview svg{animation:graphic215-settle .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes graphic215-settle{from{transform:translateY(9px) scale(.98)}to{transform:translateY(0) scale(1)}}
@media(max-width:800px){
 .stats215 .split-layout{grid-template-columns:1fr;gap:36px}
 .stats215 .split-layout>.section-heading{text-align:center;max-width:620px;margin:auto}
 .stats215 .split-layout>.section-heading h2{font-size:clamp(28px,5vw,40px)}
 .ag215-grid{grid-template-columns:1fr;grid-template-areas:"copy" "chart" "key" "source";gap:26px}
 .ag215-copy{text-align:center;max-width:610px;margin:auto}
 .ag215-chart{width:min(340px,100%)}
 .ag215-number{font-size:88px}
 .ag215-statement{font-size:17px}
 .ag215-source{text-align:center}
 .mype215-grid{gap:14px}
 .mype215-card{padding:26px 12px}
 .mype215-card p.mype215-detail{font-size:17px}
 .mype215-card>strong{font-size:44px;min-height:88px}
}
@media(max-width:600px){
 .stats215.section{padding:64px 0}
 .stats215 .site-container{width:calc(100% - 40px)}
 .stats215 .section-heading h2{font-size:30px;line-height:1.17}
 .stats215 .section-heading>p:not(.source){font-size:17px;line-height:1.55;margin-top:20px}
 .mype215-grid{grid-template-columns:1fr;gap:18px;margin-top:30px}
 .mype215-card{padding:24px 20px}
 .mype215-card h3{margin-bottom:14px;font-size:13px}
 .mype215-card>strong{font-size:52px;min-height:0}
 .mype215-card strong small{display:inline;font-size:18px;margin-left:5px}
 .mype215-card p.mype215-detail{font-size:19px;margin-top:12px}
 .inf215-donut{width:min(300px,100%)}
 .inf215-center strong{font-size:42px}
 .inf215-center span{font-size:13px}
 .inf215-legend{margin-top:15px}
 .ag215-copy h2{font-size:14px;letter-spacing:.12em}
 .ag215-number{font-size:80px;margin-top:18px}
 .ag215-description{font-size:24px;margin-top:16px}
 .ag215-description br{display:none}
 .ag215-chart{width:min(310px,100%)}
 .ag215-row{font-size:14px;padding:12px 6px;gap:10px}
 .ag215-source{font-size:11px}
}
@media (min-width:701px) and (prefers-reduced-motion:reduce){.stats215 .graphic215-inview svg{animation:none}.stats215 *{transition:none!important}}

/* v2.16: original scroll reveals, richer MYPE surfaces and selectable donut. */
.mype216-reveal{min-width:0;height:100%}
.mype216-reveal .mype215-card{height:100%;cursor:pointer;background:var(--tint);background:linear-gradient(140deg,color-mix(in srgb,var(--tint) 48%,white),var(--tint));transition:transform .35s cubic-bezier(.2,.8,.22,1),box-shadow .35s ease,filter .35s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mype216-reveal .mype215-card.is-selected{transform:translateY(-6px);box-shadow:0 22px 42px #10294926,0 7px 14px #10294912;filter:saturate(1.25)}
@media(hover:hover) and (pointer:fine){
 .mype216-reveal .mype215-card:hover{transform:translateY(-7px);box-shadow:0 24px 44px #10294926,0 7px 14px #10294912;filter:saturate(1.25)}
}
.mype216-reveal .mype215-card:focus-visible{outline:2px solid var(--accent);outline-offset:5px;box-shadow:0 22px 42px #10294926}
.inf215-legend .inf216-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:13px 8px;border:0;border-bottom:1px solid #dce3e9;border-radius:5px;font:inherit;font-size:15px;color:#526275;background:transparent;width:100%;text-align:left;cursor:pointer;min-height:46px;transition:background .25s ease}
.inf215-legend .inf216-row.is-active{background:#dfe9ee}
.inf215-legend .inf216-row:focus-visible{outline:2px solid #19546c;outline-offset:2px}
.inf216-segment{cursor:pointer;pointer-events:stroke;transition:opacity .25s ease,filter .25s ease}
.inf215-donut.has-selection .inf216-segment:not(.is-active){opacity:.35}
.inf216-segment.is-active{filter:brightness(1.14)}
/* Animation transforms are on wrappers; the arc draw animates only its stroke. */
.js .inf216-main{stroke-dashoffset:86.8}
.js .inf215-donut.qh-motion-visible .inf216-main{animation:inf216-draw 1.1s cubic-bezier(.2,.8,.22,1) .12s both}
@keyframes inf216-draw{from{stroke-dashoffset:86.8}to{stroke-dashoffset:0}}
/* v2.17: retain desktop/tablet reduced-motion behavior; phones use the
   approved v2.14 keyframe reveal engine, including with Reduce Motion enabled. */
@media (min-width:701px) and (prefers-reduced-motion:reduce){
 .js .stats215 .qh-motion,.js .stats215 .qh-motion.qh-motion-visible{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
 .js .stats215 .inf216-main{stroke-dashoffset:0!important;animation:none!important}
 .mype216-reveal .mype215-card{transform:none!important}
}