/* Homepage hero (light) and category tiles. Builds on tos.css; home-hero.js drives the video dialog and the search bar. */
.hh{position:relative;isolation:isolate;overflow-x:clip;padding:26px 0 54px;background:radial-gradient(760px 460px at 92% 0,rgba(164,61,240,.14),transparent 62%),radial-gradient(640px 420px at 0 100%,rgba(106,53,232,.1),transparent 65%),linear-gradient(180deg,#fbfaff,#f3efff)}
.hh-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(2px);animation:tos-drift 16s ease-in-out infinite alternate}
.hh-orb--1{left:-6%;top:6%;width:420px;height:420px;background:radial-gradient(circle,rgba(124,61,255,.16),transparent 68%)}
.hh-orb--2{right:-4%;bottom:-14%;width:520px;height:460px;background:radial-gradient(circle,rgba(224,79,240,.16),transparent 68%);animation-direction:alternate-reverse}
.hh-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:40px;align-items:center}
.hh-copy{align-self:center}
.hh-promo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:100%;max-width:460px;margin:0 0 22px;padding:10px 14px;border:1px solid #e3d9fb;border-radius:20px;background:#fff;color:#4d476a;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;box-shadow:0 8px 22px rgba(75,33,181,.1);transition:transform .25s,box-shadow .25s,border-color .25s}
.hh-promo:hover{transform:translateY(-2px);border-color:#c7b3f7;box-shadow:0 14px 30px rgba(75,33,181,.18)}
.hh-promo>span:not(.hh-promo-ic){order:3;flex:1 1 100%;min-width:0;line-height:1.4}
.hh-promo-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#5b2dd4,#a43df0)}
.hh-promo-ic .i{width:15px;height:15px}
.hh-promo-badge{flex:none;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#5b2dd4,#7c3dff);color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.hh-promo strong{color:var(--deep);font-weight:800}
.hh-promo small{order:2;margin-left:auto;padding:3px 10px;border-radius:999px;background:#f3efff;color:#5b2dd4;font-size:12px;font-weight:700;white-space:nowrap}
.hh h1{margin:0 0 16px;max-width:15em;color:var(--ink);font-size:clamp(32px,3.7vw,54px);font-weight:800;line-height:1.1;letter-spacing:-.028em}
.hh h1 .tos-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hh h1 .tos-w>span{display:inline-block;animation:tos-word .95s cubic-bezier(.2,.8,.2,1) calc(var(--w,0) * 70ms + .1s) both}
.hh h1 .tos-w>.tos-rot{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hh-grad{background:linear-gradient(90deg,#5b2dd4,#c026d3,#5b2dd4);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:tos-shimmer 5s linear 1.8s infinite;white-space:nowrap}
.hh-lead{margin:0 0 26px;color:#4d476a;font-size:clamp(16px,1.5vw,19px);font-weight:600}


/* Badges */
.hh-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;margin:34px auto 0;padding-top:0;padding-bottom:0;list-style:none}
.hh-badges li{display:flex;align-items:center;gap:10px}
.hh-bic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:#fff;color:var(--brand);box-shadow:0 6px 16px rgba(75,33,181,.12)}
.hh-bic .i{width:18px;height:18px}
.hh-bic.is-star{color:#f59e0b}
.hh-bic.is-star .i{fill:currentColor;stroke:none}
.hh-badges b{display:block;color:var(--ink);font-size:13.5px;font-weight:800;line-height:1.25}
.hh-badges small{display:block;color:var(--muted);font-size:12px;line-height:1.3}

/* Video */
.hh-media{position:relative;display:flex;align-items:center}
.hh-glow{position:absolute;inset:8% -6% -6% 10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(164,61,240,.28),transparent 72%);animation:tos-pulse 6s ease-in-out infinite}
.hh-video{position:relative;display:block;width:100%;overflow:hidden;border:6px solid #fff;border-radius:30px;background:#2b1760;box-shadow:0 34px 80px rgba(75,33,181,.28);flex:none;aspect-ratio:16/10;align-self:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.hh-video:not(.is-playing):hover{transform:translateY(-6px);box-shadow:0 44px 90px rgba(75,33,181,.36)}
.hh-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.hh-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hh-video:hover .hh-poster img{transform:scale(1.06)}
.hh-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,6,41,0) 55%,rgba(14,6,41,.45))}
.hh-play{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;color:var(--deep);background:#fff;box-shadow:0 14px 40px rgba(14,6,41,.4);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.hh-play .i{width:30px;height:30px;margin-left:3px}
.hh-video:hover .hh-play{transform:scale(1.12)}
.hh-ring{position:absolute;inset:-10px;border:2px solid rgba(255,255,255,.7);border-radius:50%;animation:tos-ring 2.2s ease-out infinite}
.hh-vlabel{position:absolute;left:50%;bottom:20px;z-index:2;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:13.5px;font-weight:800;white-space:nowrap;transform:translateX(-50%);box-shadow:0 8px 22px rgba(14,6,41,.3)}
.hh-video iframe{position:absolute;left:50%;top:50%;z-index:1;width:auto;height:calc(100% + 170px);aspect-ratio:16/9;border:0;opacity:0;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .6s}
.hh-video iframe.is-live{opacity:1}
.hh-poster{z-index:2;transition:opacity .6s}
.hh-video.is-live .hh-poster{opacity:0;pointer-events:none}
.hh-video.is-live.is-paused .hh-poster{opacity:1}
.hh-video.is-live.is-paused .hh-play,.hh-video.is-live.is-paused .hh-vlabel{display:none}
.hh-video.is-live{cursor:pointer}
.hh-pause{position:absolute;left:14px;bottom:14px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:var(--deep);cursor:pointer;box-shadow:0 10px 24px rgba(14,6,41,.35);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.hh-pause[hidden]{display:none}
.hh-pause:hover{transform:scale(1.1)}
.hh-pause .i{width:22px;height:22px}
.hh-pause .hh-pplay{display:none;margin-left:2px}
.hh-pause.is-paused .hh-ppause{display:none}
.hh-pause.is-paused .hh-pplay{display:block}
.hh-sound{position:absolute;right:14px;bottom:14px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:var(--deep);cursor:pointer;box-shadow:0 10px 24px rgba(14,6,41,.35);transition:transform .25s cubic-bezier(.3,1.4,.5,1),background-color .2s,color .2s}
.hh-sound[hidden]{display:none}
.hh-sound:hover{transform:scale(1.1)}
.hh-sound .i{width:22px;height:22px}
.hh-sound .hh-son{display:none}
.hh-sound.is-on .hh-son{display:block}
.hh-sound.is-on .hh-soff{display:none}
.hh-sound.is-on{background:var(--brand);color:#fff}

/* Category tiles */
.hc{position:relative;z-index:3;margin-top:-34px;padding-bottom:10px}
.hc-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:0;padding:0;list-style:none}
.hc-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;padding:22px 12px 20px;overflow:hidden;border:1px solid #ece6ff;border-radius:22px;background:#fff;color:inherit;text-align:center;text-decoration:none;box-shadow:0 12px 30px rgba(75,33,181,.1);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.hc-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(124,61,255,.09),rgba(224,79,240,.07));opacity:0;transition:opacity .4s}
.hc-tile:hover{transform:translateY(-8px);border-color:#d6c8ff;box-shadow:0 28px 54px rgba(75,33,181,.22)}
.hc-tile:hover::before{opacity:1}
.hc-img{position:relative;display:block;width:68px;height:68px;overflow:hidden;border-radius:50%;background:#f1eefb;box-shadow:0 10px 22px rgba(106,53,232,.28);transition:transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .4s}
.hc-img img{display:block;width:100%;height:100%;object-fit:cover}
.hc-tile:hover .hc-img{transform:scale(1.12) rotate(-6deg);box-shadow:0 16px 30px rgba(106,53,232,.4)}
.hc-name{position:relative;color:var(--ink);font-size:14px;font-weight:800;line-height:1.25}
.hc-go{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.hc-go .i{width:13px;height:13px}
.hc-tile:hover .hc-go{opacity:1;transform:none}

@media (max-width:1100px){
  .hh-grid{gap:30px}
}
@media (max-width:900px){
  .hh-grid{grid-template-columns:1fr;gap:34px}
  .hh h1{max-width:none}
  .hh-media{max-width:620px}
  .hc-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .hh{padding:30px 0 56px}
  .hh-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .hh-promo{max-width:none;font-size:13px}
  .hc{margin-top:-22px}
}
@media (max-width:480px){.hc-row{grid-template-columns:repeat(2,1fr);gap:10px}.hh-badges{gap:12px 14px}.hh-badges small{font-size:11px}}
@media (prefers-reduced-motion:reduce){.hh-orb,.hh-glow,.hh-ring,.hh-grad{animation:none}}
@media (max-width:380px){.hh-promo{padding:9px 12px;font-size:12px}.hh-promo small{font-size:11px}}
.hh-grid>*{min-width:0}

/* Badges: one line from 760px up, two per row on phones */
@media (max-width:1100px) and (min-width:761px){.hh-badges{gap:12px 14px}.hh-bic{width:32px;height:32px}.hh-bic .i{width:16px;height:16px}.hh-badges b{font-size:12.5px}.hh-badges small{font-size:11.5px}}
@media (max-width:760px){.hh-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}.hh-badges li:last-child:nth-child(odd){grid-column:1/-1}}