/* ═══════════════ LIVELY HERO (homepage only) ═══════════════ */
.hero-live { padding-top: 190px; max-height: none; min-height: 100vh; }
.hero-live .hero-text { margin-top: 0; position: relative; }
@media (min-width: 901px) { .hero-live .hero-text { margin-top: 10rem; } }
.hero-live .hero-inner { padding-bottom: 4.5rem; }
@media (max-width: 900px) { .hero-live { padding-top: 110px; min-height: auto; } }

/* ── Background: drifting glow blobs + dot grid ── */
.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(60px);
    pointer-events: none; z-index: 0; will-change: transform;
}
.blob-1 { width: 380px; height: 380px; top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(255,122,0,.45), transparent 70%);
    animation: blobDrift 14s ease-in-out infinite; }
.blob-2 { width: 300px; height: 300px; bottom: -90px; left: 28%;
    background: radial-gradient(circle, rgba(37,211,102,.22), transparent 70%);
    animation: blobDrift 18s ease-in-out infinite reverse; }
.blob-3 { width: 440px; height: 440px; top: 15%; right: 4%; z-index: 1;
    background: radial-gradient(circle, rgba(255,140,40,.40), transparent 70%);
    animation: blobDrift 16s ease-in-out -4s infinite; }
@keyframes blobDrift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-30px) scale(1.08); }
    66%     { transform: translate(-30px,25px) scale(.95); }
}
.hero-grid-dots {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(10,37,64,.13) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}

/* ── Staggered entrance ── */
.hl-in { opacity: 0; transform: translateY(24px);
    animation: heroIn .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ── Eyebrow pulsing dot ── */
.hero-live .hero-eyebrow::before { animation: dotPulse 1.8s ease-out infinite; }
@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,122,0,.65); }
    100% { box-shadow: 0 0 0 9px rgba(255,122,0,0); }
}

/* ── Hand-drawn underline on "right?" ── */
.hero-mark { position: relative; white-space: nowrap; display: inline-block; }
.hero-mark svg { position: absolute; left: -2%; bottom: -.28em; width: 104%; height: .45em; overflow: visible; }
.hero-mark path { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 230; stroke-dashoffset: 230; animation: drawLine .9s ease-out 1.1s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* ── Typing pill ── */
.hero-type {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
    padding: .55rem 1.1rem; border-radius: 50px; margin-bottom: 1rem; min-width: 250px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--navy);
}
.hero-type .type-word { color: var(--orange); }
.type-caret { width: 2px; height: 1.15em; background: var(--navy); margin-left: -2px;
    animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* ── "Let Andy do it." write-on reveal ── */
.hero-live .hero-hook .hook-text { display: inline-block; clip-path: inset(0 100% 0 0);
    animation: hookWrite 1.2s cubic-bezier(.6,.1,.3,1) .8s forwards; }
@keyframes hookWrite { to { clip-path: inset(0 -10% 0 0); } }
.hero-live .hero-hook::after { color: var(--orange); opacity: .8; display: inline-block;
    animation: sparkle 4s linear infinite; }
@keyframes sparkle { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.4); } 100% { transform: rotate(360deg) scale(1); } }

/* ── Buttons: shine sweep ── */
.hero-live .hero-ctas .btn { position: relative; overflow: hidden; }
.hero-live .hero-ctas .btn::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); animation: btnShine 4.5s ease-in-out 2.2s infinite; pointer-events: none;
}
.hero-live .hero-ctas .btn-wa::after { animation-delay: 3.1s; }
@keyframes btnShine { 0% { left: -80%; } 22%, 100% { left: 140%; } }

/* ── Visual: glow ring, float, parallax ── */
.hero-live .hero-img-wrap { overflow: visible; }
.hero-ring {
    position: absolute; width: 76%; aspect-ratio: 1; top: 17%; left: 12%; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, var(--orange), #ffc58a 25%, transparent 45%, transparent 55%, var(--orange) 80%, var(--orange));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: spin 10s linear infinite;
    translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 10px);
}
.hero-glow {
    position: absolute; width: 70%; aspect-ratio: 1; top: 20%; left: 15%; border-radius: 50%; z-index: 0;
    background: radial-gradient(circle, rgba(255,122,0,.35), rgba(255,122,0,0) 68%);
    animation: glowPulse 4s ease-in-out infinite;
}
.hero-orbit {
    position: absolute; width: 90%; aspect-ratio: 1; top: 10%; left: 5%; border-radius: 50%; z-index: 0;
    border: 2px dashed rgba(255,255,255,.18); animation: spin 40s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glowPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }

.hero-live .hero-placeholder { position: relative; z-index: 1;
    translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -8px); transition: translate .4s ease-out; }
.hero-live .hero-placeholder img { animation: heroFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-live .floating-badge { z-index: 3; }

/* ── Floating service chips ── */
.hero-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 16px); transition: translate .4s ease-out; }
.chip {
    position: absolute; width: 50px; height: 50px; border-radius: 50%;
    display: grid; place-items: center; pointer-events: auto; cursor: default;
    background: #fff; color: var(--orange); box-shadow: 0 8px 24px rgba(10,37,64,.22);
    opacity: 0; animation: chipIn .6s cubic-bezier(.3,1.6,.5,1) forwards, chipBob 5s ease-in-out infinite;
    animation-delay: var(--d), calc(var(--d) + .6s);
    transition: transform .25s;
}
.chip svg { width: 22px; height: 22px; }
.chip::after {
    content: attr(data-label); position: absolute; top: 115%; left: 50%; translate: -50% 4px;
    white-space: nowrap; font: 600 .7rem 'Poppins', sans-serif; color: #fff; background: var(--navy);
    padding: .25rem .6rem; border-radius: 50px; opacity: 0; transition: opacity .2s, translate .2s; pointer-events: none;
}
.chip:hover { transform: scale(1.18); }
.chip:hover::after { opacity: 1; translate: -50% 0; }
.chip-1 { top: 13%; left: 10%;  --d: 1.0s; }
.chip-2 { top: 9%;  left: 47%;  --d: 1.15s; }
.chip-3 { top: 35%; right: 2%;  --d: 1.3s; }
.chip-4 { top: 31%; left: 1%;   --d: 1.45s; }
.chip-5 { top: 55%; right: 6%;  --d: 1.6s; }
.chip-6 { top: 50%; left: 9%;   --d: 1.75s; }
@keyframes chipIn { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes chipBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.chip:nth-child(even) { animation-duration: .6s, 6.5s; }

/* ── Bottom ribbon marquee ── */
.hero-marquee {
    position: absolute; left: -2%; right: -2%; bottom: 0; z-index: 4; overflow: hidden;
    background: var(--orange); color: #fff; padding: .7rem 0;
    transform: rotate(-1.2deg) translateY(6px); box-shadow: 0 -6px 24px rgba(255,122,0,.25);
}
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.hero-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font: 700 .85rem 'Poppins', sans-serif; letter-spacing: 2px; text-transform: uppercase;
    padding: 0 1.4rem; white-space: nowrap; }
.marquee-track i { font-style: normal; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Responsive ── */
@media (max-width: 900px) {
    .blob-3 { display: none; }
    .blob-1 { width: 280px; height: 280px; }
    .hero-grid-dots { -webkit-mask-image: none; mask-image: none; opacity: .6; }
}
@media (max-width: 760px) {
    .hero-type { font-size: .92rem; }
    .marquee-track span { font-size: .75rem; padding: 0 1rem; }
}

/* ── Respect reduced-motion settings ── */
@media (prefers-reduced-motion: reduce) {
    .hero-live *, .hero-live *::before, .hero-live *::after { animation: none !important; transition: none !important; }
    .hl-in, .chip { opacity: 1; transform: none; }
    .hero-live .hero-hook .hook-text { clip-path: none; }
    .hero-mark path { stroke-dashoffset: 0; }
}

/* Keep the hero photo's natural proportions (width/height attributes are for load-time layout only) */
.hero-live .hero-placeholder img { height: auto; max-width: 100%; }