/* ============================================================
   ClickSambo — Homepage hero (Pages/Shared/_HomeHero.cshtml)
   Base composition: Claude Artifact 8E2qFBVzfEHhZPuVPnPGLN, board
   "D · Tüm hizmet gamı: Google Ads, Meta Ads, Circuit Breaker, Shield".
   On top of it: ambient light, headline light sweep, entrance sequence, the hub → service
   links that show the four products as one system, and layered interactive cards.
   Every rule is scoped to section.hh and every class carries the hh prefix.

   Motion hierarchy
     primary   entrance sequence (once), headline light sweep (every 11s), hub → card data pulses
     feedback  card tilt / spotlight / border light (desktop pointer only), CTA gleam + arrow
     ambient   slow light orbs, eyebrow + hub ping
   Only transform / opacity animate continuously; the headline sweep repaints one text run for
   ~2s per cycle. Animations pause while the hero is off-screen (.hhOff, set by home-hero.js) and
   are switched off with prefers-reduced-motion.
   ============================================================ */

/* layout.css sets `*{box-sizing:border-box; font-family:Mulish; outline:0}`, `body{line-height:1.5}`
   and `b{font-weight:700}`; the design uses the browser defaults, so restore them inside the hero. */
.hh, .hh *, .hh *::before, .hh *::after { box-sizing: content-box; font-family: inherit; }
.hh :focus-visible { outline: 2px solid #F94C10; outline-offset: 3px; }

.hh {
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --pulse-start: 2.2s;   /* first hub → card pulse, right after the entrance */
    --pulse-step: .75s;    /* one card after the other ... */
    --pulse-cycle: 3s;     /* ... so each card gets a pulse (and a new live event) every 3s */
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 800px;
    margin: -44px 0 0; /* sit directly under the fixed 100px header (body has padding-top:144px) */
    /* 96px gutters around a 1248px column at 1440; keep the column 1248px wide while it fits with
       80px gutters, so a classic 15–17px scrollbar at 1440px doesn't wrap the card titles */
    padding: 40px max(80px, calc((100% - 1248px) / 2)) 40px;
    overflow-x: clip;
    background: linear-gradient(to bottom, #FDF1EA, #FFF1E9 160px);
    color: #1C2841;
    font-family: Nunito, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

/* ============ ambient background ============ */
.hh .hhBg {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    /* fade in under the header and out into the next section, so the hero has no hard edges */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 40px, rgba(0,0,0,.45) 100px, rgba(0,0,0,.82) 160px, #000 210px, #000 72%, transparent);
            mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 40px, rgba(0,0,0,.45) 100px, rgba(0,0,0,.82) 160px, #000 210px, #000 72%, transparent);
    animation: hhFade 1.4s ease-out backwards;
}
/* soft "stage light" behind the headline */
.hh .hhBg::before {
    content: ""; position: absolute; left: 50%; top: 0; width: 1100px; height: 460px; margin-left: -550px;
    background: radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,0));
}
.hh .hhBgGrid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(28,40,65,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(28,40,65,.055) 1px, transparent 1px);
    background-size: 64px 64px; background-position: center -1px;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 36%, #000, rgba(0,0,0,.35) 55%, transparent 78%);
            mask-image: radial-gradient(ellipse 62% 58% at 50% 36%, #000, rgba(0,0,0,.35) 55%, transparent 78%);
}
.hh .hhOrb { position: absolute; border-radius: 50%; will-change: transform; }
.hh .hhOrbA { left: 50%; top: -170px; width: 960px; height: 640px; margin-left: -480px; background: radial-gradient(closest-side, rgba(249,76,16,.22), rgba(249,76,16,.07) 55%, rgba(249,76,16,0)); animation: hhOrbA 18s ease-in-out infinite alternate; }
.hh .hhOrbB { left: -220px; top: 260px; width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(255,160,110,.32), rgba(255,160,110,0)); animation: hhOrbB 24s ease-in-out infinite alternate; }
.hh .hhOrbC { right: -200px; top: 380px; width: 720px; height: 560px; background: radial-gradient(closest-side, rgba(86,110,205,.12), rgba(86,110,205,0)); animation: hhOrbC 28s ease-in-out infinite alternate; }
.hh .hhBgNoise {
    position: absolute; inset: 0; opacity: .22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .16 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ eyebrow, heading, lead ============ */
.hh .hhEyebrow {
    display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 15px;
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(23,150,100,.22); border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 14px rgba(52,199,135,.08), 0 6px 20px -10px rgba(23,150,100,.45);
    font-size: 14px; font-weight: 800; color: #0E7451;
    animation: hhIn .8s var(--ease-out) .05s backwards;
}
.hh .hhEyebrowDot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 8px rgba(31,169,113,.55); }
.hh .hhEyebrowDot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1FA971; animation: hhPing 2.8s ease-out 1.2s infinite; }

.hh .hhTitle { max-width: 1000px; margin: 0; font-weight: 800; font-size: 58px; line-height: 1.05; letter-spacing: -0.015em; color: #1C2841; text-wrap: balance; }
.hh .hhTitleLead { display: inline-block; animation: hhIn .9s var(--ease-out) .14s backwards; }
/* accent line: warm gradient text + soft glow; a slow band of light crosses it once after the
   entrance and then every 11s. The padding/negative margin keeps ascenders and the "y"
   descender inside the painted (background-clipped) box. */
.hh .hhAccent {
    display: inline-block; padding: .08em .05em .14em; margin: -.08em -.05em -.14em;
    color: #F94C10;
    background: linear-gradient(100deg, #F94C10 0%, #F7531A 35%, #FF8452 43%, #FFBE9C 50%, #FF8452 57%, #F7531A 65%, #EE470E 100%);
    background-size: 260% 100%; background-position: 0% 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 26px rgba(249,76,16,.2));
    animation: hhInAccent .9s var(--ease-out) .26s backwards, hhSweep 11s cubic-bezier(.45,0,.25,1) 1.3s infinite;
}
.hh .hhLead { max-width: 760px; margin: 0; font-size: 20px; line-height: 1.5; color: #3B4863; text-wrap: pretty; animation: hhIn .9s var(--ease-out) .38s backwards; }

/* ============ CTAs + rating ============ */
.hh .hhActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 36px; animation: hhIn .9s var(--ease-out) .48s backwards; }
.hh .hhCtas { display: flex; gap: 14px; }
.hh .hhBtn { display: inline-flex; align-items: center; justify-content: center; height: 56px; border-radius: 12px; font-size: 18px; font-weight: 800; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, color .2s, border-color .2s; }
.hh .hhBtnPrimary {
    position: relative; isolation: isolate; overflow: hidden; gap: 10px; padding: 0 24px 0 28px;
    background: #F94C10; color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(140,36,0,.16), 0 12px 26px -12px rgba(249,76,16,.8), 0 2px 6px -2px rgba(194,54,10,.35);
}
/* slow living gradient (moved with transform, so it never repaints) */
.hh .hhBtnPrimary::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; z-index: -2;
    background: linear-gradient(100deg, #FF6A2A 0%, #F94C10 30%, #E9440C 50%, #F94C10 70%, #FF6A2A 100%);
    animation: hhCtaFlow 9s ease-in-out infinite alternate;
}
/* reflection: crosses once after the entrance, and on hover */
.hh .hhBtnPrimary::after {
    content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; z-index: -1;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34) 50%, rgba(255,255,255,0));
    transform: translateX(-140%) skewX(-18deg);
    animation: hhGleam 1.1s cubic-bezier(.4,0,.2,1) 1.5s backwards;
}
.hh .hhBtnArrow { flex: none; transition: transform .3s var(--ease-out); }
.hh .hhBtnGhost { padding: 0 26px; border: 2px solid #1C2841; color: #1C2841; background: rgba(255,255,255,.35); }
@media (hover: hover) {
    .hh .hhBtnPrimary:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(140,36,0,.16), 0 18px 34px -14px rgba(249,76,16,.9), 0 3px 8px -2px rgba(194,54,10,.35); }
    .hh .hhBtnPrimary:hover::after { transform: translateX(330%) skewX(-18deg); transition: transform .8s cubic-bezier(.4,0,.2,1); }
    .hh .hhBtnPrimary:hover .hhBtnArrow { transform: translateX(4px); }
    .hh .hhBtnGhost:hover { background: #1C2841; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(28,40,65,.8); }
}
.hh .hhBtn:active { transform: translateY(0) scale(.985); }

.hh .hhRating { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; gap: 6px; align-self: center; }
.hh .hhRatingRow { display: flex; align-items: center; gap: 10px; }
.hh .hhStars { display: inline-flex; gap: 2px; line-height: 0; }
.hh .hhRatingText { font-size: 15px; color: #51607A; }
.hh .hhRatingText b { font-weight: 800; color: #1C2841; }
.hh .hhPlatforms { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.hh .hhPlatforms li { display: flex; }
.hh .hhPlatform { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; border-radius: 50%; }
.hh .hhPlatformMark { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid #E8DED6; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px -3px rgba(28,40,65,.12); transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s; }
.hh .hhPlatformMark img { display: block; width: 18px; height: 18px; object-fit: contain; }
@media (hover: hover) {
    .hh .hhPlatform:hover .hhPlatformMark { transform: translateY(-2px); border-color: #D9C5B6; box-shadow: 0 8px 16px -8px rgba(28,40,65,.3); }
}

/* ============ trust row ============ */
.hh .hhTrust { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; animation: hhIn .9s var(--ease-out) .58s backwards; }
.hh .hhChecks { display: flex; gap: 28px; font-size: 17px; font-weight: 600; color: #1C2841; }
.hh .hhCheck { display: inline-flex; align-items: center; gap: 6px; }
.hh .hhBadges { display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-left: 8px; }
.hh .hhApproved { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: #51607A; outline-offset: 4px; }
.hh .hhApproved b { font-weight: 800; color: #1C2841; }
.hh .hhApprovedLogo { flex: none; width: 28px; height: 28px; }
.hh .hhQ { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid #9AA3B5; border-radius: 50%; color: #9AA3B5; font-size: 13px; font-weight: 800; }
.hh .hhCertified { display: inline-flex; align-items: stretch; background: #FFFFFF; border: 1px solid #E8DED6; border-radius: 6px; color: #1C2841; text-decoration: none; box-shadow: 0 6px 16px -12px rgba(28,40,65,.35); }
.hh .hhCertLogo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 12px; }
.hh .hhCertLogo img { flex: none; width: 24px; height: 24px; }
.hh .hhCertCaption { font-size: 10px; color: #3B4863; }
.hh .hhCertDivider { width: 1px; background: #E8DED6; }
.hh .hhCertText { display: flex; flex-direction: column; justify-content: center; padding: 7px 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; }

/* tooltips (Google API approved, Google certified) */
.hh .hhTip { position: relative; }
.hh .hhTipBox { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 20; visibility: hidden; opacity: 0; width: 270px; max-width: calc(100vw - 48px); padding: 10px 12px; transform: translateX(-50%); background: #1C2841; color: #FFFFFF; border-radius: 10px; box-shadow: 0 10px 30px rgba(28,40,65,.25); font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: normal; text-align: left; white-space: normal; pointer-events: none; transition: opacity .15s; }
.hh .hhTip:hover .hhTipBox, .hh .hhTip:focus .hhTipBox, .hh .hhTip:focus-within .hhTipBox { visibility: visible; opacity: 1; }

/* ============ service system: hub → links → cards ============ */
.hh .hhSystem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; margin-top: 0; }
.hh .hhHub {
    position: relative; z-index: 2; display: inline-flex; align-items: center; padding: 8px 16px;
    background: rgba(255,255,255,.78); border: 1px solid rgba(249,76,16,.2); border-radius: 999px;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 26px -14px rgba(249,76,16,.7), 0 2px 6px -3px rgba(28,40,65,.15);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: hhInScale .8s var(--ease-out) .7s backwards;
}
.hh .hhHubLogo { display: block; width: auto; height: 21px; aspect-ratio: 475 / 98; }
.hh .hhHub::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid rgba(249,76,16,.45); pointer-events: none; animation: hhRing 2.4s ease-out var(--pulse-start) infinite; }

/* links (≥1200px): drawn by home-hero.js from the real card positions */
.hh .hhLinks { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hh .hhLinkBase { fill: none; stroke: rgba(249,76,16,.3); stroke-width: 1.25; stroke-dasharray: 100; stroke-dashoffset: 0; animation: hhDraw 1.1s var(--ease-out) .9s backwards; }
/* the travelling light: animated by home-hero.js with a length-based speed, so short links run faster */
.hh .hhLinkGlow, .hh .hhLinkPulse { fill: none; stroke-linecap: round; stroke-dasharray: 7 200; stroke-dashoffset: 7; }
.hh .hhLinkGlow { stroke: rgba(249,76,16,.22); stroke-width: 7; }
.hh .hhLinkPulse { stroke: #F94C10; stroke-width: 2; }
.hh .hhSocket { fill: #FFFFFF; stroke: rgba(249,76,16,.55); stroke-width: 1.5; animation: hhFade .6s ease-out 1.6s backwards; }
/* spine (<1200px): the same idea for stacked layouts, a vertical line with a travelling light */
.hh .hhSpine { display: none; position: absolute; left: 50%; top: 18px; bottom: 28px; z-index: 0; width: 1px; overflow: hidden; background: linear-gradient(to bottom, rgba(249,76,16,.45), rgba(249,76,16,.08)); animation: hhFade .8s ease-out .9s backwards; }
.hh .hhSpine::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(to bottom, rgba(249,76,16,0), #F94C10 7%, rgba(249,76,16,0) 14%); transform: translateY(-15%); animation: hhSpineFlow var(--pulse-cycle) linear var(--pulse-start) infinite; }

/* ============ product cards ============ */
.hh .hhCards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 0; padding: 0; list-style: none; }
.hh .hhTone-google  { --tone: 66,133,244;  --tone-ink: #2563C9; }
.hh .hhTone-meta    { --tone: 99,91,239;   --tone-ink: #4B3FD1; }
.hh .hhTone-breaker { --tone: 245,150,20;  --tone-ink: #B45309; }
.hh .hhTone-shield  { --tone: 34,181,115;  --tone-ink: #17835A; }
.hh .hhCard {
    --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --mx: 50%; --my: 0%; --lift: 0px;
    --arrive: calc(var(--pulse-start) + var(--i, 0) * var(--pulse-step));
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 22px;
    border: 1px solid transparent; border-radius: 20px; text-align: left;
    /* gradient border: tone at the top-left, warm neutral elsewhere */
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FFFCFA 100%) padding-box,
        linear-gradient(155deg, rgba(var(--tone),.5) 0%, rgba(240,226,216,.95) 30%, rgba(240,226,216,.75) 70%, rgba(var(--tone),.28) 100%) border-box;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(28,40,65,.04), 0 16px 36px -16px rgba(28,40,65,.16), 0 36px 60px -44px rgba(var(--tone),.6);
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0);
    transition: transform .7s var(--ease-out), box-shadow .45s var(--ease-out);
    animation: hhIn 1s var(--ease-out) calc(.78s + var(--i, 0) * .09s) backwards;
}
/* layer 1: ambient tone light in the corner + fine grain */
.hh .hhCard::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(130% 80% at 0% 0%, rgba(var(--tone),.11), rgba(var(--tone),0) 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .16 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* layer 2: border light that follows the cursor (masked to the 1px border ring) */
.hh .hhCard::after {
    content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(200px circle at var(--mx) var(--my), rgba(var(--tone),.95), rgba(var(--tone),0) 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .4s;
}
/* layer 3: spotlight inside the card */
.hh .hhCardLight { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(var(--tone),.12), rgba(var(--tone),0) 65%); opacity: 0; transition: opacity .45s; }

.hh .hhCardHead { display: flex; align-items: center; gap: 12px; }
.hh .hhCardIcon {
    position: relative; box-sizing: border-box; display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px;
    color: var(--tone-ink);
    background: linear-gradient(145deg, rgba(var(--tone),.16), rgba(var(--tone),.05)), #FFFFFF;
    border: 1px solid rgba(var(--tone),.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -8px rgba(var(--tone),.6);
    transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * 5px), 0);
    transition: transform .7s var(--ease-out), box-shadow .45s;
}
/* the tile "receives" the hub pulse: a soft tone halo (opacity only, composited) */
.hh .hhCardIcon::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 5px rgba(var(--tone),.14), 0 6px 20px -4px rgba(var(--tone),.75); opacity: 0; pointer-events: none; animation: hhArrive var(--pulse-cycle) ease-out var(--arrive) infinite; }
.hh .hhCardLogo { position: relative; z-index: 1; display: block; width: 24px; height: 24px; }
.hh .hhTone-meta .hhCardLogo { width: 30px; height: 30px; } /* the Meta mark has built-in padding */
.hh .hhCardTitle { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; color: #1C2841; transform: translate3d(calc(var(--px) * 2px), calc(var(--py) * 2px), 0); transition: transform .7s var(--ease-out); }
.hh .hhCardLink { color: inherit; text-decoration: none; outline: 0; transition: color .25s; }
.hh .hhCardLink::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 20px; }
.hh .hhCardLink:focus-visible::after { outline: 2px solid #F94C10; outline-offset: 3px; }
.hh .hhAddOn { padding: 3px 8px; border-radius: 6px; background: rgba(249,76,16,.1); box-shadow: inset 0 0 0 1px rgba(249,76,16,.14); color: #B3380A; font-size: 12px; font-weight: 800; }
.hh .hhCardDesc { flex-grow: 1; margin: 0; font-size: 15px; line-height: 1.45; color: #3B4863; }
/* footer = an inset "live event" well */
.hh .hhCardFoot {
    box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px -10px 0; padding: 8px 10px;
    background: linear-gradient(180deg, rgba(255,241,233,.75), rgba(255,248,244,.6));
    border: 1px solid rgba(28,40,65,.06); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(28,40,65,.05);
    font-size: 14px; color: #51607A;
}
.hh .hhCardRow { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the status pill "receives" the hub pulse: a soft ring in its own colour (status indicator) */
.hh .hhStatus { position: relative; flex: none; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.hh .hhStatus::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 4px var(--beat, transparent); opacity: 0; pointer-events: none; animation: hhArrive var(--pulse-cycle) ease-out calc(var(--arrive) + .12s) infinite; }
.hh .hhStatusRed { background: rgba(240,69,58,.12); color: #B8231A; --beat: rgba(240,69,58,.22); }
.hh .hhStatusAmber { background: #FFF0D6; color: #8A4B00; --beat: rgba(245,158,11,.3); }
.hh .hhStatusGreen { background: rgba(34,181,115,.14); color: #17835A; --beat: rgba(34,181,115,.26); }
.hh .hhStatusBlue { background: rgba(66,133,244,.12); color: #1F57C3; --beat: rgba(66,133,244,.24); }
/* live event feed: home-hero.js swaps the row + status each time the hub pulse reaches the card */
.hh .hhCardFoot.isOut .hhCardRow, .hh .hhCardFoot.isOut .hhStatus { animation: hhEventOut .26s ease-in forwards; }
.hh .hhCardFoot.isIn .hhCardRow { animation: hhEventIn .5s var(--ease-out) backwards; }
.hh .hhCardFoot.isIn .hhStatus { animation: hhEventIn .5s var(--ease-out) .07s backwards, hhStatusPop .6s var(--ease-out) .07s; }
.hh .hhCardGo { position: absolute; top: 12px; right: 12px; z-index: 1; color: var(--tone-ink); opacity: 0; transform: translate3d(-4px, 4px, 0); transition: opacity .3s, transform .4s var(--ease-out); }

@media (hover: hover) {
    .hh .hhCard:hover {
        --lift: -4px;
        box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(28,40,65,.04), 0 26px 50px -22px rgba(28,40,65,.26), 0 40px 70px -40px rgba(var(--tone),.75);
    }
    .hh .hhCard:hover::after, .hh .hhCard:hover .hhCardLight { opacity: 1; }
    .hh .hhCard:hover .hhCardIcon { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 4px rgba(var(--tone),.1), 0 10px 22px -8px rgba(var(--tone),.75); }
    .hh .hhCard:hover .hhCardLink { color: var(--tone-ink); }
    .hh .hhCard:hover .hhCardGo { opacity: 1; transform: none; }
}
/* while the pointer moves over a card, follow it closely; on leave the longer transition eases back */
.hh .hhCard.isTilt { transition: transform .18s ease-out, box-shadow .45s var(--ease-out); will-change: transform; }
.hh .hhCard.isTilt .hhCardIcon, .hh .hhCard.isTilt .hhCardTitle { transition: transform .18s ease-out, box-shadow .45s; }

/* ============ keyframes ============ */
@keyframes hhIn { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hhInAccent { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px) drop-shadow(0 10px 26px rgba(249,76,16,.2)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 10px 26px rgba(249,76,16,.2)); } }
@keyframes hhInScale { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes hhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hhSweep { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0% 0; } }
@keyframes hhPing { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes hhRing { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.14, 1.4); opacity: 0; } }
@keyframes hhOrbA { from { transform: translate3d(-50px, 0, 0) scale(1); } to { transform: translate3d(50px, 36px, 0) scale(1.08); } }
@keyframes hhOrbB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(90px, -50px, 0) scale(1.1); } }
@keyframes hhOrbC { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-80px, -40px, 0) scale(1.06); } }
@keyframes hhCtaFlow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes hhGleam { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@keyframes hhDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hhEventOut { to { opacity: 0; transform: translate3d(0, -9px, 0); filter: blur(3px); } }
@keyframes hhEventIn { from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hhStatusPop { 0% { transform: scale(.86); } 60% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes hhArrive { 0%, 20% { opacity: 0; } 27% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hhSpineFlow { 0% { transform: translateY(-15%); } 70%, 100% { transform: translateY(100%); } }

/* pause everything while the hero is off-screen */
.hh.hhOff, .hh.hhOff *, .hh.hhOff *::before, .hh.hhOff *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .hh *, .hh *::before, .hh *::after { animation: none !important; }
    .hh .hhCard, .hh .hhBtn, .hh .hhPlatformMark, .hh .hhCardIcon, .hh .hhCardTitle, .hh .hhBtnArrow { transition: none !important; }
    .hh .hhCard:hover, .hh .hhBtn:hover, .hh .hhPlatform:hover .hhPlatformMark { --lift: 0px; transform: none; }
}

/* ============ responsive ============ */
@media (max-width: 1365px) {
    /* narrower 4-up cards: let the sample row wrap instead of cutting it off with an ellipsis */
    .hh .hhCardRow { white-space: normal; }
}

@media (max-width: 1199px) {
    .hh { min-height: 0; padding: 48px 48px 56px; }
    .hh .hhCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hh .hhBadges { margin-left: 0; }
    .hh .hhSystem { gap: 28px; }
    .hh .hhLinks { display: none; }
    .hh .hhSpine { display: block; }
    .hh .hhCardGo { display: none; }
}

@media (max-width: 991px) {
    .hh { padding: 40px 32px 48px; }
    .hh .hhTitle { font-size: 48px; }
    .hh .hhLead { font-size: 18px; }
    .hh .hhActions { flex-direction: column; gap: 20px; }
    .hh .hhTrust { gap: 16px 32px; }
    .hh .hhOrbA { width: 760px; margin-left: -380px; }
}

@media (max-width: 767px) {
    .hh { gap: 18px; padding: 32px 16px 40px; }
    .hh .hhBg::before { width: 640px; margin-left: -320px; height: 420px; }
    .hh .hhBgGrid { background-size: 48px 48px; }
    .hh .hhOrbA { top: -200px; width: 620px; height: 560px; margin-left: -310px; }
    .hh .hhOrbB { left: -320px; top: 420px; }
    .hh .hhOrbC { right: -380px; top: 760px; }
    .hh .hhEyebrow { gap: 8px; padding: 6px 14px 6px 13px; font-size: 13px; }
    .hh .hhTitle { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; }
    .hh .hhLead { font-size: 17px; }
    .hh .hhActions { width: 100%; }
    .hh .hhCtas { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; gap: 12px; }
    .hh .hhBtn { box-sizing: border-box; height: 54px; font-size: 17px; }
    .hh .hhRatingRow { flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
    .hh .hhPlatforms { justify-content: center; gap: 6px 8px; }
    .hh .hhChecks { gap: 20px; font-size: 16px; }
    .hh .hhBadges { position: relative; gap: 14px; }
    /* badges wrap onto several rows here, so open the tooltips above the centred badge group
       instead of above each badge, which could push them off-screen */
    .hh .hhTip { position: static; }
    .hh .hhTipBox { max-width: calc(100vw - 32px); }
    .hh .hhSystem { gap: 22px; margin-top: 6px; }
    .hh .hhCards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hh .hhCard { padding: 20px; }
}

@media (max-width: 420px) {
    .hh .hhPlatforms { gap: 6px; }
    .hh .hhPlatform { min-height: 32px; }
    .hh .hhPlatformMark { width: 30px; height: 30px; }
    .hh .hhPlatformMark img { width: 16px; height: 16px; }
    .hh .hhChecks { gap: 16px; font-size: 15px; }
}