/* demo-home: hero — hero section and trust strip */

/* ---------- hero ---------- */
.hero-section{padding:150px 0 96px;position:relative;overflow:hidden}
.hero-section::before{content:"";position:absolute;top:-200px;right:-150px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,255,.22), rgba(47,99,246,.12) 45%, transparent 70%);pointer-events:none}
.hero-section::after{content:"";position:absolute;bottom:-220px;left:-160px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(47,99,246,.20), rgba(124,92,255,.10) 45%, transparent 70%);pointer-events:none}
.hero-section__grid{position:relative;--bs-gutter-x:56px;--bs-gutter-y:34px}
.rating-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.rating-badge{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-decoration:none;transition:opacity .15s}
.rating-badge:hover{opacity:.75}
.rating-badge .rating-badge__logo{display:flex;align-items:center;gap:6px;height:16px}
.rating-badge .rating-badge__logo img{height:100%;width:auto;display:block}
.rating-badge .rating-badge__logo--gf{height:32px}
.rating-badge .rating-badge__stars{display:block}
.rating-badge.rating-badge--gf{justify-content:center;align-self:center}
.hero-section h1{font-size:clamp(30px,3.9vw,48px);letter-spacing:-1.3px;line-height:1.1;text-wrap:balance}

/* hero headline accents */
.hl-google{white-space:nowrap}

.hero-section .cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px}
.hero-section .cta-note{font-size:14px;color:var(--ink-3);margin-top:14px;max-width:none}

/* ---- hero split layout (variant B) ---- */
.hero-section__grid h1{font-size:clamp(38px,4.6vw,62px);letter-spacing:-1.6px;line-height:1.02}
.hero-section__subtitle{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:460px;margin-top:22px}
.hero-section__grid .hero-section__cta{width:fit-content;max-width:100%}
.hero-section__grid .hero-section__cta .cta-note{text-align:center}

/* ---- interactive channel cards ---- */
.channel-list{display:flex;flex-direction:column;gap:14px;justify-content:space-between;height:100%}
.channel-card{position:relative;display:flex;align-items:center;gap:18px;text-align:left;width:100%;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  box-shadow:var(--shadow-sm);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
  font-family:inherit}
.channel-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--accent);
  transform:scaleY(.35);transform-origin:center;opacity:.5;transition:transform .3s,opacity .3s}
.channel-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(20,28,60,.5)}
/* touch devices keep :hover stuck on the last tapped card — don't leave it lifted */
@media(hover:none){.channel-card:hover{transform:none}}
.channel-card.is-active{border-color:var(--accent);box-shadow:0 26px 55px -28px color-mix(in srgb,var(--accent) 55%,transparent)}
.channel-card.is-active::before{transform:scaleY(1);opacity:1}
.channel-card.is-active{background:linear-gradient(100deg,var(--accent-soft),#fff 62%)}
/* per-channel accent palette */
.channel-card[data-chan="ai"]{--accent:#10a37f;--accent-soft:rgba(16,163,127,.1)}
.channel-card[data-chan="google"]{--accent:#4285F4;--accent-soft:rgba(66,133,244,.1)}
.channel-card[data-chan="brand"]{--accent:#f2851a;--accent-soft:rgba(242,133,26,.12)}

.channel-card__icon{flex:none;width:52px;height:52px;border-radius:14px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -10px var(--accent);transition:transform .3s}
.channel-card.is-active .channel-card__icon{transform:scale(1.06)}
.channel-card__icon img{height:24px;filter:brightness(0) invert(1)}
.channel-card__icon--google{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.channel-card__icon--google svg{display:block}
.channel-card__main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.channel-card__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.5px;color:var(--ink)}
.channel-card__desc{font-size:13.5px;line-height:1.4;color:var(--ink-3)}

.channel-card__viz{flex:none;display:flex;align-items:center;justify-content:flex-start;width:104px;color:var(--accent)}
/* AI typing effect */
.channel-card__viz--ai .typ{display:inline-flex;align-items:center;justify-content:flex-start;min-width:100px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;color:var(--accent);white-space:nowrap}
.channel-card__viz--ai .typ-caret{width:2px;height:14px;background:currentColor;margin-left:2px;display:inline-block}
.channel-card.is-active .channel-card__viz--ai .typ-caret{animation:caretBlink 1s step-end infinite}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
/* Google rank pill */
.channel-card__viz--google .rank{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--accent);letter-spacing:-1px;
  display:inline-flex;align-items:baseline}
.channel-card.is-active .channel-card__viz--google .rank-num{animation:rankPop .5s ease}
@keyframes rankPop{0%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:1}}
/* Brand buzz sparkline */
.channel-card__viz--brand .spark{color:var(--accent);overflow:visible}
.channel-card__viz--brand .spark-line{stroke-dasharray:130;stroke-dashoffset:130}
.channel-card.is-active .channel-card__viz--brand .spark-line{animation:sparkDraw 1.5s ease forwards}
.channel-card__viz--brand .spark-dot{opacity:0;transform-origin:50px 4px}
.channel-card.is-active .channel-card__viz--brand .spark-dot{animation:sparkDot 1.5s ease forwards, sparkPulse 1.6s 1.5s ease-in-out infinite}
@keyframes sparkDraw{to{stroke-dashoffset:0}}
@keyframes sparkDot{0%,72%{opacity:0}100%{opacity:1}}
@keyframes sparkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){
  .channel-card__viz--brand .spark-line{stroke-dashoffset:0!important;animation:none!important}
  .channel-card__viz--brand .spark-dot{opacity:1!important;animation:none!important}
  .channel-card__viz--ai .typ-caret{animation:none!important}
}

/* ---------- trust logo grid (merged seamlessly into hero) ---------- */
.trust-section{margin-top: 170px;padding-top:36px;position:relative}
.trust-section::before{content:"";position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:120%;height:280px;
  background:radial-gradient(60% 70% at 50% 40%, rgba(124,92,255,.10), rgba(47,99,246,.06) 45%, transparent 72%);
  pointer-events:none;z-index:-1}
.trust-section__caption{text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink-3);letter-spacing:.2px;margin-bottom:30px}
.trust-section__caption b{color:var(--ink-2)}
.trust-section__logos{max-width:1080px;margin:0 auto}
.trust-section__track{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:36px 60px}
.trust-section__logo{height:42px;width:auto;max-width:190px;object-fit:contain;flex:none;transition:transform .2s ease,opacity .2s ease}
.trust-section__logo:hover{transform:translateY(-3px)}
/* white-origin logos (designed for dark bg): render as clean dark wordmark so they read on light */
.trust-section__logo.dk{filter:brightness(0);opacity:.82}
.trust-section__logo.dk:hover{opacity:1}
/* the duplicated track only exists for the mobile marquee loop */
.trust-section__marquee>[aria-hidden="true"]{display:none}

/* ---------- < lg: single-line auto-scrolling logo marquee ---------- */
@media(max-width:991.98px){
  .trust-section__logos.is-marquee{overflow:hidden;max-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  /* duration is recomputed by JS from data-marquee-speed (px/s); this is the fallback */
  .is-marquee .trust-section__marquee{display:flex;width:max-content;animation:trust-marquee 80s linear infinite}
  .is-marquee:hover .trust-section__marquee,
  .is-marquee .trust-section__marquee.is-paused{animation-play-state:paused}
  .is-marquee .trust-section__marquee>[aria-hidden="true"]{display:flex}
  .is-marquee .trust-section__track{flex-wrap:nowrap;justify-content:flex-start;gap:0 44px;padding-right:44px}
  .is-marquee .trust-section__logo{height:34px;max-width:150px}
  .is-marquee .trust-section__logo:hover{transform:none}
}
@keyframes trust-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .is-marquee .trust-section__marquee{animation:none}
  .trust-section__logos.is-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:767.98px){.trust-section__track{gap:28px 40px}.trust-section__logo{height:34px;max-width:150px}}