/* Portada (page-templates/home.php), desde la maqueta Propuestas/home.html. Solo se carga en la portada.
   El header inverso sobre el hero está en main.css (body.has-dark-hero). */
.dp-led{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(107,163,0,.18)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.has-dark-hero{--paper:#fbfbfe;--night:#03031f;--glow:rgba(155,226,0,.55);background:var(--paper)}

/* aparición al hacer scroll, solo CSS (sin soporte: visible) */
@supports (animation-timeline:view()){
	@media (prefers-reduced-motion:no-preference){
		.h-rv{animation:h-rv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
	}
}
@keyframes h-rv{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.h-ey{display:flex;align-items:center;gap:10px;margin-bottom:18px;font:500 13.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.h-dark .h-ey{color:var(--lime)}
.h-dark .dp-led{background:var(--lime);box-shadow:0 0 0 3px rgba(155,226,0,.22)}

/* ======================= 1. PORTADA: hero y cifras sobre un mismo fondo ======================= */
.h-top{--mx:72%;--my:38svh;position:relative;isolation:isolate;overflow:clip;background-color:var(--night);background-image:linear-gradient(var(--night) 0,var(--night) 50%,var(--navy-d) 100%);color:var(--on-d)}
/* luz que sigue al puntero (por toda la portada), halo del núcleo y brillo lima, que se apaga solo */
.h-top::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;background:
	radial-gradient(560px 460px at var(--mx) var(--my),rgba(0,0,197,.5),transparent 70%),
	radial-gradient(min(980px,95vw) 760px at 76% 48svh,rgba(0,0,130,.88),transparent 70%),
	radial-gradient(820px 700px at -6% 96svh,rgba(155,226,0,.12),transparent 70%)}
/* suelo en perspectiva: nace en el horizonte del hero y sigue bajo las cifras */
.h-floor{position:absolute;left:0;right:0;top:54%;bottom:0;z-index:-2;pointer-events:none;-webkit-mask:linear-gradient(transparent,#000 40%,#000 82%,transparent);mask:linear-gradient(transparent,#000 40%,#000 82%,transparent)}
.h-floor svg{width:100%;height:100%}
.h-floor path{fill:none;stroke:rgba(155,226,0,.24);stroke-width:1;vector-effect:non-scaling-stroke}
.h-floor .v{stroke:rgba(212,214,245,.17)}
@media (min-width:1000px){.h-floor{top:74svh}}

.h-hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:calc(var(--header-h) + 40px) 0 8px}
.h-hero__in{display:grid;gap:28px;align-items:center}
.h-hero h1{font-size:clamp(42px,9.6vw,80px);font-weight:700;line-height:.98;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.h-hero h1 .ac{display:block;background:linear-gradient(100deg,var(--lime) 0%,#d8ff7a 40%,var(--lime) 60%,#c2f53c 100%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
/* Fuera del EN el titular es más largo: más chico y con el resalte seguido, para que no pase de 4 líneas */
:is(:lang(es),:lang(pt),:lang(fr),:lang(de),:lang(it),:lang(zh),:lang(th)) .h-hero h1{font-size:clamp(38px,8.6vw,68px)}
:is(:lang(es),:lang(pt),:lang(fr),:lang(de),:lang(it),:lang(zh),:lang(th)) .h-hero h1 .ac{display:inline}
.h-hero .lead{margin-top:26px;max-width:30em;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--on-d)}
.h-br{display:none}
/* los cinco verbos: se encienden uno tras otro, como el recorrido del documento */
.h-verbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.h-verbs li{position:relative;padding:7px 14px 7px 12px;border-radius:999px;font:500 13px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(212,214,245,.16)}
.h-verbs li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px;opacity:.6}
.h-all{display:inline-flex;align-items:center;gap:12px;margin-top:18px;font-size:clamp(19px,1.8vw,23px);font-weight:600;color:#fff}
.h-all::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--lime)}
.h-hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.h-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--lime);color:var(--deep);font-weight:600;font-size:17px;text-decoration:none;box-shadow:0 0 0 0 var(--glow),0 14px 40px -12px rgba(155,226,0,.6);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.h-btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.h-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(155,226,0,.18),0 18px 44px -12px rgba(155,226,0,.75)}
.h-btn:hover svg{transform:translateX(4px)}
.h-btn:focus-visible{outline-color:#fff}

/* el dibujo */
.h-vis{width:100%;max-width:620px;margin:0 auto;perspective:1200px}
.h-net{width:100%;height:auto;overflow:visible;transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .7s var(--ease)}
.h-net .tr{fill:none;stroke:rgba(212,214,245,.34);stroke-width:1.5;stroke-dasharray:2 6}
.h-net .pk{fill:none;stroke:var(--lime);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:7 300;stroke-dashoffset:7;filter:drop-shadow(0 0 5px var(--lime))}
.h-net .pk.in{stroke:#fff;filter:drop-shadow(0 0 4px #8f8fff)}
.h-net .nd{fill:#0a0a3a;stroke:rgba(212,214,245,.35);stroke-width:1.5}
.h-net .ic{color:var(--on-d)}
.h-net .ch .ic{color:#fff}
.h-net .ring{fill:none;stroke:var(--lime);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.h-net .lbl{display:none;font:500 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--dim)}
.h-net .orbit text{font:600 12px var(--mono);letter-spacing:.2em;fill:var(--lime)}
/* Espaciado para que los verbos den la vuelta justa (1096 de 1106) con una monoespaciada de 0,6 em: EN 113 letras, ES 115, PT 111. */
.h-net .orbit text{letter-spacing:2.47px}
:lang(es) .h-net .orbit text{letter-spacing:2.3px}
:lang(pt) .h-net .orbit text{letter-spacing:2.65px}
:lang(fr) .h-net .orbit text{letter-spacing:2.76px}
:lang(de) .h-net .orbit text{letter-spacing:1.36px}
:lang(it) .h-net .orbit text{letter-spacing:2.85px}
/* ZH y TH no son monoespaciados: medido en el navegador */
:lang(zh) .h-net .orbit text{letter-spacing:1.92px}
:lang(th) .h-net .orbit text{letter-spacing:2.28px}
.h-net .spin,.h-net .orbit{transform-box:view-box;transform-origin:350px 318px}
.h-net .core path{fill:none;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* sin el aire de arriba del marco del dibujo (la etiqueta de arriba empieza en y=18 de 700 de ancho) */
.h-net{margin-top:-2.6%}
/* en móvil, sin etiquetas: los nodos van de x=54 a 646 y de y=46 a 592; se agranda y se centra, sin el aire de arriba y abajo */
@media (max-width:699px){.h-net{width:112%;max-width:none;margin:-7.4% 0 -7% -6%}}
@media (min-width:700px){.h-net .lbl{display:block}}
@media (min-width:1000px){
	.h-hero{padding:calc(var(--header-h) + 24px) 0 48px}
	.h-hero__in{grid-template-columns:1.12fr .88fr;gap:24px;align-items:center}
	/* dibujo vertical: 12 % más grande que su columna (se sale un poco por la izquierda, como el horizontal) y centrado en alto con el texto, en todos los idiomas */
	.h-net{width:112%;max-width:none;margin:0 0 0 -6.5%}
	.h-hero .lead{max-width:none}
	.h-br{display:inline}
	/* centrado con el texto y 30 px más arriba (pedido el 2026-11-11) */
	.h-vis{position:relative;top:-30px;width:auto;max-width:none;margin:0 calc(-1 * clamp(0px, (100vw - var(--wrap)) / 2, 120px)) 0 -56px}
}
@keyframes h-pk{to{stroke-dashoffset:-300}}
@keyframes h-ring{0%,82%{opacity:0;transform:scale(.7)}90%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes h-spin{to{transform:rotate(360deg)}}
@keyframes h-shine{to{background-position:-220% 0}}
@keyframes h-verb{0%,14%{color:var(--deep);background:var(--lime);box-shadow:inset 0 0 0 1px var(--lime),0 0 24px -4px var(--lime)}22%,100%{color:var(--dim);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(212,214,245,.16)}}
@keyframes h-breathe{50%{opacity:.55}}
@media (prefers-reduced-motion:no-preference){
	.h-hero h1 .ac{animation:h-shine 7s linear infinite}
	.h-verbs li{animation:h-verb 7.5s linear infinite}
	.h-verbs li:nth-child(2){animation-delay:1.5s}.h-verbs li:nth-child(3){animation-delay:3s}.h-verbs li:nth-child(4){animation-delay:4.5s}.h-verbs li:nth-child(5){animation-delay:6s}
	.h-net .pk{animation:h-pk 3s linear infinite;animation-delay:var(--d,0s)}
	.h-net .ring{animation:h-ring 3s linear infinite;animation-delay:var(--d,0s)}
	.h-net .spin{animation:h-spin 40s linear infinite}
	.h-net .orbit{animation:h-spin 60s linear infinite}
	.h-net .halo{animation:h-breathe 3s ease-in-out infinite}
	.is-off *,.is-off{animation-play-state:paused!important}
}

/* cifras: el número gigante en contorno, sobre el mismo suelo */
.h-stats{position:relative;padding:16px 0 96px}
.h-stats h2{max-width:14em;font-size:clamp(32px,4.4vw,54px);font-weight:600;line-height:1.05;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.h-nums{display:grid;gap:8px;margin:48px 0 0;padding:0;list-style:none}
.h-num{cursor:default;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:6px 20px;padding:18px 0 22px;border-top:1px solid rgba(212,214,245,.16)}
.h-num b{grid-row:span 2;display:flex;align-items:flex-start;font-size:clamp(96px,15vw,200px);font-weight:800;line-height:.82;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--lime);font-variant-numeric:tabular-nums;transition:color .8s var(--ease)}
/* ancho fijo según los dígitos, para que la cifra no empuje nada mientras cuenta */
.h-num [data-n]{display:inline-block;width:calc(var(--d) * (1ch - .06em));text-align:left}
.h-num b i{font-style:normal;font-size:.42em;line-height:1;margin:.08em .04em 0 0;color:var(--lime);-webkit-text-stroke:0}
.h-num.done b{color:rgba(155,226,0,.12)}
.h-num:hover b{color:var(--lime)}
.h-num > span{align-self:end;font:500 13.5px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff}
@media (min-width:1000px){
	.h-stats{padding:56px 0 144px}
	.h-nums{grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px}
	.h-num{grid-template-columns:1fr;padding:28px 28px 0 0;border-top:0}
	.h-num+.h-num{padding-left:32px}
	.h-num b{grid-row:auto}
}

/* ================================ 3. DESAFÍOS: el índice ==================================== */
.h-intro{position:relative;padding:96px 0 72px;background:var(--paper)}
.h-intro h2{max-width:15em;font-size:clamp(34px,5vw,64px);font-weight:700;line-height:1.02;letter-spacing:-.04em;color:var(--deep);text-wrap:balance}
.h-intro .lede{max-width:40em;margin-top:22px;font-size:clamp(18px,1.6vw,21px);line-height:1.55}
.h-toc{display:grid;gap:12px;margin:48px 0 0;padding:0;list-style:none}
.h-toc a{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:12px 20px 12px 12px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 16px 40px -28px rgba(0,0,130,.45);color:var(--ink);font-size:18px;font-weight:600;line-height:1.3;text-decoration:none;overflow:clip;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s}
/* en alemán una palabra larga no cabe en la tarjeta a 320 px: se corta con guion */
:lang(de) .h-toc a > span:not(.h-ico){min-width:0;hyphens:auto}
.h-toc a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);transform:translateY(101%);transition:transform .45s var(--ease)}
.h-toc a > svg{width:22px;height:22px;color:var(--navy);transition:transform .35s var(--ease),color .35s}
.h-toc a:hover,.h-toc a:focus-visible{color:#fff;transform:translateY(-3px)}
.h-toc a:hover::before,.h-toc a:focus-visible::before{transform:none}
.h-toc a:hover > svg,.h-toc a:focus-visible > svg{color:var(--lime);transform:translateY(3px)}
/* el icono vivo de cada desafío, sobre su baldosa clara (también cuando la tarjeta se pone navy) */
.h-ico{display:block;width:84px;height:68px;border-radius:16px;background:radial-gradient(80% 90% at 30% 20%,#fff,var(--lav-3));box-shadow:inset 0 0 0 1px var(--lav-d);transition:box-shadow .35s}
.h-ico svg{width:100%;height:100%;overflow:visible}
.h-toc a:hover .h-ico,.h-toc a:focus-visible .h-ico{box-shadow:inset 0 0 0 1px var(--lav-d),0 0 0 3px var(--lime)}
.m-ln{fill:none;stroke:var(--lav-d);stroke-width:4;stroke-linecap:round}
.m-nv{fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.m-tr{fill:none;stroke:rgba(0,0,130,.3);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6}
.m-pk{fill:none;stroke:var(--lime);stroke-width:4;stroke-linecap:round;stroke-dasharray:6 200;stroke-dashoffset:6}
.m-bob,.m-bar,.m-pop,.m-lens,.m-hit,.m-dot{transform-box:fill-box;transform-origin:center}
.m-bar{transform-origin:bottom}
@keyframes m-bob{to{transform:translateY(-4px)}}
@keyframes m-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes m-pop{0%,55%{transform:scale(0)}70%{transform:scale(1.15)}80%,100%{transform:scale(1)}}
@keyframes m-pk{0%{stroke-dashoffset:6}60%,100%{stroke-dashoffset:-112}}
@keyframes m-lens{0%,100%{transform:translate(0,0)}35%{transform:translate(22px,14px)}70%{transform:translate(4px,28px)}}
@keyframes m-hit{0%,60%{opacity:0}70%,92%{opacity:1}100%{opacity:0}}
@keyframes m-ring{from{stroke-dashoffset:126}to{stroke-dashoffset:0}}
@keyframes m-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:no-preference){
	.m-bob{animation:m-bob 2.6s ease-in-out infinite alternate}
	.m-bar{animation:m-bar 2.4s ease-in-out infinite}
	.m-bar:nth-of-type(2){animation-delay:-.6s;animation-duration:2.8s}.m-bar:nth-of-type(3){animation-delay:-1.2s;animation-duration:2.2s}.m-bar:nth-of-type(4){animation-delay:-1.8s;animation-duration:3s}
	.m-pop{animation:m-pop 3s var(--ease) infinite}
	.m-pk{animation:m-pk 3s linear infinite}
	.m-lens{animation:m-lens 4.5s var(--ease) infinite}
	.m-hit{animation:m-hit 4.5s linear infinite}
	.m-ring{animation:m-ring 5s linear infinite}
	.m-dot{animation:m-dot 1.6s ease-in-out infinite}
}
@media (min-width:760px){.h-toc{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){
	.h-intro{padding:128px 0 88px}
	.h-toc{grid-template-columns:repeat(4,1fr);gap:16px}
	.h-toc a{grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-content:space-between;gap:20px;min-height:260px;padding:14px 22px 22px 14px}
	.h-ico{grid-column:1/-1;width:100%;height:150px;border-radius:16px}
	.h-toc a > span:not(.h-ico){align-self:end;padding-left:8px}
	.h-toc a > svg{align-self:end}
}

/* ================================ 4. CAPÍTULOS ============================================ */
.h-chap{position:relative;padding:72px 0;background:var(--paper)}
.h-chap.alt{background:linear-gradient(var(--lav-3),var(--paper))}
.h-chap__in{display:grid;gap:44px;align-items:start}
/* número y escenario, como en el home actual */
.h-chap__top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.h-chap__num{display:inline-grid;place-items:center;flex:none;min-width:34px;height:24px;padding:0 7px;border-radius:6px;background:var(--navy);color:var(--lime);font:600 13.5px/1 var(--mono)}
.h-chap__scen{font:500 13px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.h-chap h3{max-width:20em;font-size:clamp(25px,2.8vw,34px);font-weight:600;line-height:1.22;letter-spacing:-.02em;color:var(--deep);text-wrap:pretty}
/* recorrido del home actual: un tramo por paso, de punto a punto, que se llena al bajar */
.h-steps{position:relative;isolation:isolate;margin:30px 0 0;padding:0 0 0 44px;list-style:none}
.h-st{position:relative}
.h-st+.h-st{margin-top:22px}
.h-st:not(:last-child)::before,.h-st:not(:last-child)::after{content:"";position:absolute;left:-31px;top:15px;bottom:-37px;width:3px;border-radius:3px;background:var(--lav-d)}
.h-st:not(:last-child)::after{background:var(--navy);transform:scaleY(var(--p,1));transform-origin:top}
.h-st--solve:not(:last-child)::after{background:linear-gradient(var(--navy),var(--lime))}
.h-st__l{display:block;margin-bottom:4px;font:500 13px/29px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-st__l::before{content:"";position:absolute;left:-44px;top:0;z-index:1;width:29px;height:29px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--lav-d)}
.h-st--solve .h-st__l{color:var(--navy)}
.h-st--solve .h-st__l::before{background:var(--navy);box-shadow:0 0 0 5px rgba(0,0,130,.1)}
.h-st--out .h-st__l{color:#3f6100}
.h-st--out .h-st__l::before{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000082' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 5px rgba(155,226,0,.22)}
.h-st p{font-size:17px;line-height:1.6}
.h-st--out p{font-weight:600;color:var(--ink)}
@supports (animation-timeline:view()){
	@media (prefers-reduced-motion:no-preference){
		.h-st::after{animation:h-fill linear both;animation-timeline:view(block 60% 40%);animation-range:cover}
	}
}
@keyframes h-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* botón al Path: el nombre subrayado con el resaltador de About us ("over 20 countries") */
.h-prod{display:inline-flex;align-items:center;gap:14px;margin-top:32px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--deep);color:#fff;text-decoration:none;font-weight:600;transition:background .3s}
.h-prod i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--deep);transition:transform .3s var(--ease)}
.h-prod i svg{width:18px;height:18px}
.h-prod:hover{background:var(--navy)}
.h-prod:hover i{transform:rotate(-45deg)}
.h-mark{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-skip-ink:none}
/* la foto: marco con sombra rayada y la tarjeta de interfaz flotando */
.h-ph{position:relative;margin:0 14px 14px 0}
.h-ph::before{content:"";position:absolute;inset:16px -14px -14px 16px;border-radius:28px;background:repeating-linear-gradient(-45deg,var(--lav-d) 0 1px,transparent 1px 9px)}
.h-ph__f{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:4/3;background:var(--lav)}
.h-ph__f img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.h-ph:hover img{transform:scale(1.04)}
.h-uic{position:absolute;left:-10px;bottom:22px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 22px 50px -18px rgba(0,0,60,.5),inset 0 0 0 1px rgba(255,255,255,.7)}
.h-uic > i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--navy);color:var(--lime)}
.h-uic > i svg{width:22px;height:22px}
.h-uic b{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.h-uic small{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.h-uic small .dp-led{width:7px;height:7px}
.h-uic .chip{padding:4px 10px;border-radius:999px;background:var(--lime);color:var(--deep);font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
@keyframes h-float{to{transform:translateY(-8px)}}
@media (prefers-reduced-motion:no-preference){.h-uic{animation:h-float 3.4s ease-in-out infinite alternate}.h-uic .dp-led{animation:h-breathe 1.6s ease-in-out infinite}}
@media (min-width:1000px){
	.h-chap{padding:120px 0}
	.h-chap__in{grid-template-columns:1.05fr .95fr;gap:72px}
	.h-chap.alt .h-chap__in > :first-child{order:2}
	.h-ph{position:sticky;top:calc(var(--header-h) + 48px)}
	.h-uic{left:-36px}
	.h-chap.alt .h-uic{left:auto;right:-36px}
}

/* ==================================== 5. CTA FINAL ======================================== */
.h-cta{padding:24px 0 96px;background:var(--paper)}
.h-cta__box{position:relative;isolation:isolate;overflow:clip;display:grid;gap:32px;padding:56px 26px;border-radius:32px;background:radial-gradient(90% 120% at 15% 20%,var(--navy) 0%,var(--night) 70%);color:var(--on-d)}
.h-cta__box::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.6px) 0 0/24px 24px;-webkit-mask:radial-gradient(60% 80% at 80% 50%,#000,transparent);mask:radial-gradient(60% 80% at 80% 50%,#000,transparent)}
.h-cta__lines{position:absolute;right:-60px;top:50%;z-index:-1;width:640px;max-width:none;transform:translateY(-50%);opacity:.9;pointer-events:none}
.h-cta__lines path{fill:none;stroke:rgba(212,214,245,.16);stroke-width:1.5}
.h-cta__lines .pk{stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 300;stroke-dashoffset:8;filter:drop-shadow(0 0 5px var(--lime))}
@media (prefers-reduced-motion:no-preference){.h-cta__lines .pk{animation:h-pk 4s linear infinite;animation-delay:var(--d,0s)}}
.h-cta h2{max-width:12em;font-size:clamp(36px,5.6vw,72px);font-weight:700;line-height:1;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.h-cta h2 em{font-style:normal;color:var(--lime)}
.h-cta p{max-width:34em;margin-top:22px;font-size:clamp(17px,1.5vw,20px);line-height:1.55}
@media (min-width:1000px){
	.h-cta{padding:40px 0 140px}
	.h-cta__box{grid-template-columns:1fr auto;align-items:end;gap:56px;padding:96px 88px}
}