/* Colorful hero redesign (old hero mock kept in HTML, hidden) */
.hero.hh{position:relative;isolation:isolate;border-radius:0 0 36px 36px;padding-top:clamp(96px,12vw,130px)}
.hero.hh::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-2;background:linear-gradient(135deg,#4C1D95 0%,#6D28D9 30%,#3B5BDB 65%,#0A9D74 110%)}
.hero.hh::after{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
 background:radial-gradient(420px 320px at 12% 20%,rgba(236,72,153,.35),transparent 70%),radial-gradient(480px 360px at 88% 30%,rgba(34,197,94,.38),transparent 70%),radial-gradient(520px 380px at 50% 100%,rgba(56,189,248,.30),transparent 70%);filter:blur(10px)}
.hero.hh h1,.hero.hh .hero-sub{color:#fff}
.hero.hh .hero-sub{opacity:.9}
.hero.hh .grad-txt{background:linear-gradient(90deg,#86EFAC,#5EEAD4,#FDE68A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.hh .hero-badge,.hh-badges span,.hero.hh .fact{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hh-badges{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px}
.hh-badges span{padding:7px 13px;border-radius:999px;font-weight:700;font-size:.85rem;box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}
.hero.hh .fact i{color:#86EFAC}
.hero.hh .btn-primary{background:linear-gradient(135deg,#22C55E,#0A9D74);color:#fff;border:0;font-weight:800;box-shadow:0 12px 28px -10px rgba(34,197,94,.7)}
.hero.hh .btn-ghost{background:linear-gradient(135deg,#fff,#EDE9FE);color:#5B21B6;border:0;font-weight:800;box-shadow:0 12px 28px -12px rgba(0,0,0,.45)}
.hero.hh .btn-primary:hover,.hero.hh .btn-ghost:hover{transform:translateY(-2px);filter:brightness(1.06)}
.hero.hh .hero-vis>:not(.hh-pic){display:none!important}
.hero.hh .hero-vis{display:flex;align-items:center;justify-content:center;min-height:0;height:auto}
.hh-pic img{display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 30px 60px -25px rgba(15,23,42,.6);animation:hhFloat 6s ease-in-out infinite}
@keyframes hhFloat{50%{transform:translateY(-10px)}}
.hero.hh .vstrip{background:rgba(255,255,255,.95);border-radius:22px;margin-bottom:28px}
@media(max-width:760px){
 .hero.hh .hero-grid{display:flex;flex-direction:column}
 .hero.hh .hero-grid>div:first-child{display:contents}
 .hero.hh .hero-badge{order:1;align-self:flex-start}.hero.hh h1{order:2}
 .hero.hh .hero-vis{order:3;margin:6px 0 18px}
 .hero.hh .hero-sub{order:4}.hh-badges{order:5}.hero.hh .hero-btns{order:6}.hero.hh .hero-facts{order:7}
 .hh-pic img{border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.hh-pic img{animation:none}}
.hero.hh h1{color:#fff!important;-webkit-text-fill-color:#fff}
.hero.hh h1 .grad-txt{-webkit-text-fill-color:transparent}
.hero.hh .hero-badge{color:#fff!important}
@media(max-width:760px){.hero.hh .hero-grid{gap:14px}.hero.hh .hero-grid>div:first-child>*{margin-top:0;margin-bottom:0}}
.hero.hh .hero-badge{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.35)!important}

/* ===== v4 premium polish ===== */
.hero.hh #heroWa{display:none!important}
.hero.hh::before{background:radial-gradient(1200px 700px at 20% 0%,#5B21B6 0%,transparent 60%),linear-gradient(140deg,#2E1065 0%,#5B21B6 35%,#3730A3 65%,#0F766E 115%)}
.hero.hh .hero-grid{position:relative}
.hero.hh .hero-grid::before{content:"";position:absolute;inset:-8%;z-index:-1;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero.hh h1{font-size:clamp(2.3rem,5.6vw,4rem);letter-spacing:-.04em;line-height:1.02;margin-bottom:18px;text-shadow:0 10px 40px rgba(15,10,50,.35)}
.hero.hh .grad-txt{background:linear-gradient(90deg,#86EFAC 0%,#67E8F9 45%,#C4B5FD 100%);-webkit-background-clip:text;background-clip:text}
.hero.hh .hero-sub{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.65;max-width:34em;color:rgba(255,255,255,.82)!important;margin-bottom:22px}
.hero.hh .hero-badge{font-weight:700;letter-spacing:.02em;padding:7px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.hh-badges{gap:10px;margin:0 0 26px}
.hh-badges span,.hero.hh .fact{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06))!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -14px rgba(0,0,0,.6);font-weight:600}
.hero.hh .hero-facts{margin-top:22px;gap:10px;opacity:.92}
/* premium CTA */
.hero.hh .btn-primary{position:relative;overflow:hidden;isolation:isolate;padding:18px 34px;font-size:1.08rem;border-radius:16px;letter-spacing:.01em;
 background:linear-gradient(135deg,#34D399 0%,#10B981 40%,#0EA5E9 100%);color:#fff;
 box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 14px 34px -10px rgba(16,185,129,.75),0 0 40px -8px rgba(103,232,249,.55);transition:transform .2s,box-shadow .2s,filter .2s}
.hero.hh .btn-primary::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:hhShine 3.2s ease-in-out infinite}
.hero.hh .btn-primary::after{content:"→";margin-left:10px;font-weight:900;display:inline-block;transition:transform .2s}
.hero.hh .btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 20px 44px -10px rgba(16,185,129,.9),0 0 60px -6px rgba(103,232,249,.7)}
.hero.hh .btn-primary:hover::after{transform:translateX(5px)}
.hero.hh .btn-primary:active{transform:translateY(0) scale(.97);filter:brightness(.95)}
.hero.hh .btn-primary:focus-visible{outline:3px solid #FDE68A;outline-offset:3px}
@keyframes hhShine{0%,60%{left:-60%}100%{left:130%}}
/* picture depth */
.hero.hh .hero-vis{position:relative}
.hero.hh .hero-vis::before{content:"";position:absolute;inset:-6%;border-radius:40px;z-index:0;background:conic-gradient(from 200deg,rgba(134,239,172,.55),rgba(103,232,249,.4),rgba(196,181,253,.6),rgba(134,239,172,.55));filter:blur(38px);opacity:.55}
.hh-pic{position:relative;z-index:1;padding:10px;border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 40px 80px -30px rgba(10,5,40,.7)}
.hh-pic img{border-radius:24px;box-shadow:none}
/* entrance */
@keyframes hhIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero.hh .hero-badge,.hero.hh h1,.hero.hh .hero-sub,.hh-badges,.hero.hh .hero-btns,.hero.hh .hero-facts,.hh-pic{animation:hhIn .8s cubic-bezier(.2,.7,.2,1) both}
.hero.hh h1{animation-delay:.08s}.hero.hh .hero-sub{animation-delay:.16s}.hh-badges{animation-delay:.24s}.hero.hh .hero-btns{animation-delay:.32s}.hero.hh .hero-facts{animation-delay:.4s}
.hh-pic{animation:hhIn .9s .2s cubic-bezier(.2,.7,.2,1) both}
.hh-pic img{animation:hhFloat 6s 1.2s ease-in-out infinite}
@media(max-width:760px){.hero.hh .btn-primary{width:100%;justify-content:center;padding:17px 24px}.hero.hh .hero-btns{width:100%}.hh-pic{padding:7px;border-radius:24px}.hh-pic img{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.hero.hh *,.hero.hh .btn-primary::before{animation:none!important}}
.hero.hh .btn-primary{background:linear-gradient(135deg,#34D399 0%,#10B981 40%,#0EA5E9 100%)!important;color:#fff!important}
.hero.hh .vstrip.reveal{opacity:1;transform:none}
/* v6: intro video in hero frame */
.hero.hh .hero-vis>.hh-vwrap{display:block!important}
.hero.hh .hero-vis>.hh-vwrap[hidden]{display:none!important}
.hh-vwrap{position:relative;z-index:1;width:100%;padding:10px;border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);box-shadow:0 40px 80px -30px rgba(10,5,40,.7);box-sizing:border-box;animation:hhIn .6s both}
.hh-vid{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:24px;background:#1e1b4b}
.hh-vbadge{position:absolute;left:22px;top:22px;padding:5px 11px;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff;background:rgba(20,10,60,.55);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.hero.hh.hh-hasvid .hh-pic{display:none!important}
@media(max-width:760px){.hh-vwrap{padding:7px;border-radius:24px}.hh-vid{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.hh-vwrap{display:none!important}.hero.hh.hh-hasvid .hh-pic{display:block!important}}
/* v7: sound toggle */
.hh-sound{position:absolute;right:22px;bottom:22px;z-index:3;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.85rem;color:#fff;padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#4F46E5 55%,#0EA5E9);box-shadow:0 10px 24px -8px rgba(124,58,237,.9),0 0 0 1px rgba(255,255,255,.3) inset;transition:transform .2s}
.hh-sound:hover{transform:translateY(-2px)}.hh-sound:active{transform:scale(.96)}
.hh-sound[aria-pressed="true"]{background:rgba(20,10,60,.7)}
@media(max-width:760px){.hh-sound{right:14px;bottom:14px;padding:8px 12px;font-size:.78rem}}
/* v8: smooth video — overrides only (old rules kept) */
.hh-vwrap{animation:none;contain:layout paint;aspect-ratio:auto}
.hh-vid{opacity:0;transition:opacity .5s ease;transform:translateZ(0);object-fit:cover}
.hh-vwrap.hh-on .hh-vid{opacity:1}
.hh-vbadge{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(20,10,60,.72)}
.hero.hh.hh-hasvid .hero-vis::before{filter:none;opacity:.35;background:radial-gradient(closest-side,rgba(134,239,172,.45),rgba(103,232,249,.25),transparent)}
.hh-sound{backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.hh-vid{transition:none}}
/* reduced-motion / data-saver manual video (overrides line 83, additive) */
@media(prefers-reduced-motion:reduce){.hero.hh .hero-vis>.hh-vwrap.hh-manual:not([hidden]){display:block!important}.hero.hh.hh-hasvid .hh-pic{display:none!important}}
.hh-vwrap.hh-manual .hh-vid{opacity:1!important}
.hh-mplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:14px 22px;border:0;border-radius:999px;background:rgba(10,5,40,.78);color:#fff;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.hh-mplay:hover{background:rgba(10,5,40,.92)}
/* FORCE: video always visible on every width and motion preference (additive override) */
.hero.hh .hero-vis>.hh-vwrap.hh-force,.hh-vwrap.hh-force{display:block!important;visibility:visible!important}
.hh-vwrap.hh-force .hh-vid{opacity:1!important;display:block!important}
.hero.hh.hh-hasvid .hh-pic{display:none!important}
@media(prefers-reduced-motion:reduce){.hero.hh .hero-vis>.hh-vwrap.hh-force,.hh-vwrap.hh-force{display:block!important}.hero.hh.hh-hasvid .hh-pic{display:none!important}}
@media(min-width:761px){.hero.hh .hero-vis>.hh-vwrap.hh-force{display:block!important}}