/* ============================================================
   Home hero v2 — premium animated "AI + Cloud learning" hero
   Self-contained: everything is scoped to .hero2 / .hv.
   Animation uses only transform + opacity (+ one stroke-dashoffset).
   ============================================================ */

.hero2 {
    --h-navy: #0b1b3a;
    --h-text: #3b4a63;
    --h-azure: #0078d4;
    --h-green: #16a34a;
    --h-gold: #f7b700;
    --h-gold-soft: rgba(247, 183, 0, .55);
    --h-card: rgba(255, 255, 255, .72);
    --h-card-border: rgba(255, 255, 255, .9);
    --h-shadow: 0 18px 40px -12px rgba(18, 63, 130, .28), 0 4px 10px rgba(18, 63, 130, .06);
    --h-ease: cubic-bezier(.22, .8, .26, 1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
}

.dark .hero2 {
    --h-navy: #f1f5ff;
    --h-text: #b4c0d6;
    --h-card: rgba(30, 41, 70, .72);
    --h-card-border: rgba(120, 160, 255, .25);
    --h-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
    background: #111a2e;
}

/* ---------- background: soft blurred blobs + waves ---------- */
.hero2-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 50% at 82% 18%, rgba(72, 149, 239, .20), transparent 70%),
        radial-gradient(35% 45% at 62% 55%, rgba(0, 120, 212, .10), transparent 70%),
        radial-gradient(40% 40% at 78% 95%, rgba(34, 197, 94, .13), transparent 70%),
        radial-gradient(30% 35% at 8% 100%, rgba(247, 183, 0, .12), transparent 70%);
    animation: hero2-fade 1s ease-out both;
}

.dark .hero2-bg { opacity: .55; }

.hero2-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    z-index: -1;
    opacity: .5;
    pointer-events: none;
}

.dark .hero2-wave { opacity: .12; }

/* ---------- layout ---------- */
.hero2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 0 3rem;
}

@media (min-width: 1024px) {
    .hero2-grid {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        gap: 1rem;
        min-height: 700px;
        padding: 2rem 0 3.5rem;
    }
}

/* ---------- left content ---------- */
.hero2-rise { animation: hero2-rise .8s var(--h-ease) both; animation-delay: var(--a, 0s); }

.hero2-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--h-gold-soft);
    background: rgba(255, 255, 255, .8);
    color: var(--h-navy);
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.dark .hero2-pill { background: rgba(255, 255, 255, .06); }
.hero2-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(247, 183, 0, .55); border-color: var(--h-gold); }
.hero2-pill i { transition: transform .3s ease; }
.hero2-pill:hover i { transform: translateX(3px); }

.hero2-title {
    margin: 0 0 1.5rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--h-navy);
    font-size: clamp(1.65rem, .6rem + 2.7vw, 3.75rem);
}

.hero2-title .line { display: block; }

.hero2-desc {
    margin: 0 0 1.75rem;
    max-width: 34rem;
    color: var(--h-text);
    font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
    line-height: 1.6;
}

.hero2-desc .c-blue { color: #0a6ed1; font-weight: 600; }
.hero2-desc .c-orange { color: #e07b00; font-weight: 600; }
.hero2-desc .c-green { color: #12923f; font-weight: 600; }
.dark .hero2-desc .c-blue { color: #6db4ff; }
.dark .hero2-desc .c-orange { color: #ffb347; }
.dark .hero2-desc .c-green { color: #4ade80; }

.hero2-chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }

.hero2-chip {
    padding: .5rem 1.1rem;
    border-radius: 9999px;
    border: 1.5px solid var(--h-gold-soft);
    background: rgba(255, 255, 255, .75);
    color: var(--h-navy);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.dark .hero2-chip { background: rgba(255, 255, 255, .05); }
.hero2-chip:hover, .hero2-chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--h-gold);
    box-shadow: 0 6px 16px -6px rgba(247, 183, 0, .55);
}

.hero2-search {
    position: relative;
    max-width: 38rem;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    background: #fff;
    border: 1.5px solid rgba(247, 183, 0, .4);
    box-shadow: 0 14px 34px -14px rgba(18, 63, 130, .25);
    display: flex;
    align-items: center;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}

.hero2-search:hover { box-shadow: 0 16px 38px -12px rgba(18, 63, 130, .32); }
.hero2-search:focus-within {
    border-color: var(--h-azure);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, .18), 0 16px 38px -12px rgba(18, 63, 130, .32);
}

.hero2-search > svg { flex: none; margin-left: 1.1rem; color: #6b7a92; }

.hero2-search input {
    flex: 1;
    min-width: 0;
    padding: 1.1rem .9rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1a2740;
    font-size: 1.05rem;
}

.hero2-search button {
    margin: .4rem;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: .75rem;
    background: #1d5fe6;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.hero2-search button:hover { background: #1650c4; box-shadow: 0 8px 18px -6px rgba(29, 95, 230, .6); }
.hero2-search button:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 2px; }
.hero2-search button svg { width: 22px; height: 22px; transition: transform .25s ease; }
.hero2-search button:hover svg { transform: translateX(3px); }

.hero2-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero2-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.5rem;
    border-radius: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.hero2-btn svg { width: 20px; height: 20px; transition: transform .25s ease; }
.hero2-btn:focus-visible { outline: 3px solid var(--h-azure); outline-offset: 3px; }

.hero2-btn--primary { background: var(--h-gold); color: #1a1400; box-shadow: 0 10px 24px -10px rgba(247, 183, 0, .9); }
.hero2-btn--primary:hover { transform: translateY(-2px); background: #ffc61a; box-shadow: 0 14px 28px -10px rgba(247, 183, 0, .95); }
.hero2-btn--primary:hover .arr { transform: translateX(4px); }

.hero2-btn--ghost { background: rgba(255, 255, 255, .6); color: var(--h-navy); border: 1.5px solid rgba(11, 27, 58, .22); }
.dark .hero2-btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); }
.hero2-btn--ghost:hover { transform: translateY(-2px); border-color: var(--h-green); box-shadow: 0 10px 22px -12px rgba(18, 63, 130, .4); }

/* ============================================================
   Visual
   ============================================================ */
.hv {
    container-type: inline-size;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

.hv-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1.05 / 1;
    font-size: clamp(7.5px, 1.65cqw, 14px);
    --px: 0;
    --py: 0;
    user-select: none;
}

/* parallax layer: pointer offset * per-layer depth (px) */
.hv-layer {
    position: absolute;
    inset: 0;
    transform: translate3d(calc(var(--px) * var(--d) * 1px), calc(var(--py) * var(--d) * 1px), 0);
    will-change: transform;
}

.hv-pos { position: absolute; }
.hv-enter { animation: hv-enter .9s var(--h-ease) both; animation-delay: var(--e, 0s); }

/* independent organic float */
.hv-float { animation: hv-float var(--dur, 6s) ease-in-out infinite; animation-delay: var(--del, 0s); }
.hv-float--dash { animation-name: hv-float-soft; }
.hv-drift { animation: hv-drift 11s ease-in-out infinite; }
.hv-drift--alt { animation-duration: 9s; animation-delay: -3s; }

.hv-body {
    transform: rotate(var(--tilt, 0deg));
    transition: transform .35s var(--h-ease), box-shadow .35s ease, border-color .35s ease;
}

/* glass look shared by cards */
.hv-cert, .hv-progress, .hv-practice {
    background: var(--h-card);
    border: 1px solid var(--h-card-border);
    border-radius: 1.4em;
    box-shadow: var(--h-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--h-navy);
}

.hv-cert:hover, .hv-progress:hover, .hv-practice:hover {
    transform: translateY(-5px) scale(1.02) rotate(var(--tilt, 0deg));
    box-shadow: 0 26px 48px -14px rgba(18, 63, 130, .38), 0 6px 14px rgba(18, 63, 130, .08);
    border-color: #fff;
}

.hv-tick { width: 1.5em; height: 1.5em; flex: none; }

/* cert cards */
.hv-cert { position: relative; width: 13.5em; padding: 1.1em 1.2em 1.1em; display: grid; gap: .1em; }
.hv-cert .hv-tick { position: absolute; top: .9em; right: .9em; }
.hv-cert .hv-ico { width: 2.6em; height: 2.6em; margin-bottom: .3em; }
.hv-cert b { font-size: 1.45em; line-height: 1.1; letter-spacing: -.01em; }
.hv-cert small { font-size: .95em; color: #5b6b86; }
.dark .hv-cert small { color: #9fb0cc; }

.hv-pos--az900 { left: 6%; top: 8%; }
.hv-pos--ai901 { left: 34%; top: 1%; }
.hv-pos--copilot { left: 71%; top: 11%; }
.hv-pos--ai103 { left: -1%; top: 60%; }
.hv-pos--az104 { left: 73%; top: 54%; }
.hv-pos--progress { left: 14%; top: 78%; }
.hv-pos--practice { left: 47%; top: 80%; }
.hv-pos--chip { left: 86%; top: 79%; }
.hv-pos--dash { left: 17%; top: 27%; width: 58%; perspective: 1400px; }

/* dashboard */
.hv-dash {
    --tilt: 0deg;
    padding: 1.1em 1.3em 1.3em;
    border-radius: 1.6em;
    color: #fff;
    background:
        radial-gradient(70% 60% at 85% 20%, rgba(150, 225, 255, .55), transparent 70%),
        linear-gradient(145deg, #4aa8ff 0%, #2a7de1 45%, #1c58c9 100%);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 30px 60px -20px rgba(24, 82, 190, .55), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5em rgba(255, 255, 255, .12);
    transform: rotateX(7deg) rotateY(-9deg) rotateZ(-2.5deg);
    transform-origin: center;
}

.hv-dash:hover {
    transform: rotateX(6deg) rotateY(-8deg) rotateZ(-2deg) translateY(-3px);
    box-shadow: 0 36px 70px -20px rgba(24, 82, 190, .65), 0 0 40px rgba(110, 190, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5em rgba(255, 255, 255, .12);
}

.hv-dash-top { display: flex; align-items: center; gap: .4em; font-size: .95em; opacity: .95; }
.hv-dash-top i { width: .6em; height: .6em; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.hv-dash-top span { margin-left: .6em; font-weight: 500; letter-spacing: .01em; }

.hv-dash-main { display: flex; justify-content: space-between; align-items: center; gap: .5em; margin: .9em 0 .7em; }
.hv-dash h3 { margin: 0; font-size: 1.9em; line-height: 1.12; font-weight: 700; letter-spacing: -.01em; color: #fff; }

.hv-ai { position: relative; width: 8.5em; flex: none; }
.hv-ai-svg { width: 100%; display: block; animation: hv-ai-float 5s ease-in-out infinite; }
.hv-ai-halo {
    position: absolute;
    inset: 10% 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 235, 255, .85), transparent 70%);
    animation: hv-pulse 4.500s ease-in-out infinite;
    z-index: -1;
}

.hv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.hv-steps li {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .55em .8em;
    border-radius: .8em;
    background: rgba(255, 255, 255, .92);
    color: #12294f;
    font-size: 1.05em;
    font-weight: 500;
    box-shadow: 0 6px 14px -8px rgba(10, 40, 110, .5);
}

.hv-steps li .hv-tick { margin-left: auto; width: 1.3em; height: 1.3em; }
.hv-step-ico { width: 1.5em; height: 1.5em; flex: none; }

/* progress card */
.hv-progress { display: flex; align-items: center; gap: .9em; width: 18em; padding: .9em 1.1em; }
.hv-progress > div { flex: 1; min-width: 0; }
.hv-progress b { font-size: 1em; line-height: 1.2; display: block; margin-bottom: .55em; }
.hv-ring-svg { width: 5.2em; height: 5.2em; flex: none; }
.hv-pct { font-size: 15px; font-weight: 700; fill: var(--h-navy); }
.hv-ring { stroke-dasharray: 100; stroke-dashoffset: 28; }
.hv-js .hv-ring { stroke-dashoffset: 100; }
.hv-js.hv-live .hv-ring { stroke-dashoffset: 28; transition: stroke-dashoffset 1.8s cubic-bezier(.3, .7, .2, 1) .2s; }
.hv-bar { display: block; height: .45em; width: 100%; border-radius: 9em; background: #dfe8f4; margin-bottom: .45em; overflow: hidden; }
.hv-bar i { display: block; height: 100%; width: 70%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #16a34a); }
.hv-bar--s { width: 75%; }
.hv-bar--s i { width: 40%; background: linear-gradient(90deg, #4fc3ff, #1d6fe0); }

/* practice test card */
.hv-practice { display: flex; align-items: center; gap: 1em; width: 20em; padding: .9em 1em; }
.hv-practice b { font-size: 1.1em; display: block; margin-bottom: .25em; }
.hv-practice small { display: block; font-size: .9em; line-height: 1.35; color: #5b6b86; }
.dark .hv-practice small { color: #9fb0cc; }
.hv-practice-ico { flex: none; width: 3.2em; height: 3.2em; display: grid; place-items: center; border-radius: 1em; background: #dcfce7; }
.hv-practice-ico svg { width: 1.9em; height: 1.9em; }
.hv-go { margin-left: auto; flex: none; width: 2.1em; height: 2.1em; padding: .45em; border-radius: 50%; border: 1px solid #bbe7c9; color: var(--h-green); background: #fff; transition: transform .3s var(--h-ease); }
.hv-practice:hover .hv-go { transform: translateX(5px); }

/* AI chip */
.hv-chip {
    width: 6.4em;
    height: 6.4em;
    display: grid;
    place-items: center;
    border-radius: 1.2em;
    background: linear-gradient(145deg, #55b4ff, #1d63d8);
    box-shadow: 0 0 0 .35em rgba(79, 195, 255, .25), 0 0 0 .7em rgba(79, 195, 255, .12), 0 18px 34px -10px rgba(24, 82, 190, .6);
    transform: rotate(14deg);
}
.hv-chip span { font-size: 2.2em; font-weight: 800; color: #fff; letter-spacing: -.02em; }

/* cloud / gem */
.hv-cloud { width: 100%; display: block; filter: drop-shadow(0 14px 18px rgba(30, 110, 220, .35)); }

/* ambient glow + particles */
.hv-glow {
    position: absolute;
    inset: 18% 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(94, 178, 255, .28), rgba(94, 178, 255, 0));
    animation: hv-pulse 8s ease-in-out infinite;
}

.hv-dot {
    position: absolute;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    opacity: 0;
    animation: hv-particle var(--t) ease-in-out infinite;
    animation-delay: var(--w);
}
.hv-dot--blue { background: #4fa8ff; box-shadow: 0 0 10px rgba(79, 168, 255, .7); }
.hv-dot--green { background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.hv-dot--gold { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, .7); }

/* orbit rings: slow linear rotation; nodes ride the ring */
.hv-orbit { position: absolute; border-radius: 50%; animation: hv-spin 32s linear infinite; }
.hv-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv-orbit--outer { inset: 4% 2% 6% 2%; transform: rotate(-12deg); }
.hv-orbit--inner { inset: 12% 10% 14% 10%; animation-duration: 24s; animation-direction: reverse; }
.hv-node { position: absolute; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; border-radius: 50%; }
.hv-node--blue { background: #4fa8ff; box-shadow: 0 0 0 .3em rgba(79, 168, 255, .22); }
.hv-node--green { background: #34d399; box-shadow: 0 0 0 .3em rgba(52, 211, 153, .22); }
.hv-node--gold { background: #fbbf24; box-shadow: 0 0 0 .3em rgba(251, 191, 36, .25); }

/* ---------- hover: lift + brand-yellow fill (all cards) ---------- */
/* layers span the whole stage, so let the pointer fall through to the cards underneath */
.hv-layer { pointer-events: none; }
.hv-body, .hv-chip, .hv-cloud { pointer-events: auto; }

.hv-cert, .hv-progress, .hv-practice, .hv-dash { position: relative; }

/* yellow wash fades in via opacity (cheap), content sits above it */
.hv-cert::before, .hv-progress::before, .hv-practice::before, .hv-dash::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, #fff1b3 0%, #ffdd57 55%, #f7b700 100%);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 0;
    pointer-events: none;
}

.hv-cert > *:not(.hv-tick), .hv-progress > *, .hv-practice > *, .hv-dash > * { position: relative; z-index: 1; }

.hv-cert:hover::before, .hv-progress:hover::before, .hv-practice:hover::before, .hv-dash:hover::before { opacity: 1; }

.hv-cert:hover, .hv-progress:hover, .hv-practice:hover { border-color: rgba(247, 183, 0, .9); box-shadow: 0 26px 48px -14px rgba(247, 183, 0, .55), 0 6px 14px rgba(120, 90, 0, .12); }

/* text stays readable on yellow, including dark mode */
.hv-cert, .hv-progress, .hv-practice { transition: transform .35s var(--h-ease), box-shadow .35s ease, border-color .35s ease; }
.hv-cert:hover, .hv-progress:hover, .hv-practice:hover { color: #1a1400; }
.hv-cert:hover small, .hv-practice:hover small { color: #4a3c00; }
.hv-progress:hover .hv-pct { fill: #1a1400; }
.hv-progress:hover .hv-bar { background: rgba(255, 255, 255, .6); }

/* dashboard: same treatment, navy text on yellow */
.hv-dash:hover { box-shadow: 0 36px 70px -20px rgba(247, 183, 0, .6), 0 0 40px rgba(255, 221, 87, .45), inset 0 1px 0 rgba(255, 255, 255, .7); border-color: rgba(247, 183, 0, .9); }
.hv-dash h3, .hv-dash-top, .hv-dash-top span { transition: color .35s ease; }
.hv-dash:hover h3, .hv-dash:hover .hv-dash-top { color: #1a1400; }
.hv-dash:hover .hv-dash-top i { background: rgba(26, 20, 0, .35); }
.hv-dash-top i { transition: background .35s ease; }
.hv-dash:hover .hv-ai-svg { filter: brightness(.55) saturate(1.4); }
.hv-ai-svg { transition: filter .35s ease; }

/* AI chip, cloud, gem: lift and warm up */
.hv-chip { position: relative; transition: transform .35s var(--h-ease), box-shadow .35s ease, background .35s ease; }
.hv-chip:hover { transform: translateY(-5px) scale(1.04) rotate(14deg); background: linear-gradient(145deg, #fff1b3, #f7b700); box-shadow: 0 0 0 .35em rgba(247, 183, 0, .28), 0 0 0 .7em rgba(247, 183, 0, .14), 0 22px 36px -10px rgba(247, 183, 0, .7); }
.hv-chip span { transition: color .35s ease; }
.hv-chip:hover span { color: #1a1400; }
.hv-cloud { transition: transform .35s var(--h-ease), filter .35s ease; }
.hv-cloud:hover { transform: translateY(-5px) scale(1.04); filter: sepia(1) saturate(4) hue-rotate(-10deg) brightness(1.1) drop-shadow(0 14px 18px rgba(247, 183, 0, .5)); }

/* ---------- keyframes ---------- */
@keyframes hero2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero2-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes hv-enter { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hv-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes hv-float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes hv-drift {
    0%, 100% { transform: translate(-5px, 0); }
    50% { transform: translate(5px, -5px); }
}
@keyframes hv-spin { to { transform: rotate(calc(var(--r0, 0deg) + 360deg)); } }
@keyframes hv-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes hv-ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hv-particle {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    30%, 70% { opacity: .85; }
    50% { transform: translate(8px, -14px); }
}

/* the outer ring has a base tilt, keep it while spinning */
.hv-orbit--outer { --r0: -12deg; }
.hv-orbit--inner { --r0: 0deg; }

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

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
    .hv { max-width: 600px; }
    .hv-stage { font-size: clamp(7.5px, 1.75cqw, 12px); }
}

@media (max-width: 639px) {
    .hv-m-hide { display: none !important; }
    .hv-stage { aspect-ratio: 1 / 1.32; font-size: 3.1cqw; }
    .hv-cert { width: 12.5em; padding: .9em 1em; }
    .hv-cert .hv-ico { width: 2.2em; height: 2.2em; }
    .hv-pos--az900 { left: 0%; top: 2%; }
    .hv-pos--ai901 { left: 56%; top: 0%; }
    .hv-pos--copilot { left: 60%; top: 78%; }
    .hv-pos--dash { left: 6%; top: 21%; width: 88%; }
    .hv-pos--progress { left: 0%; top: 79%; }
    .hv-progress { width: 17em; }
    .hv-dash h3 { font-size: 1.6em; }
    .hv-ai { width: 6.5em; }
    .hero2-grid { padding-top: 1.5rem; }
    .hero2-search input { font-size: .95rem; padding-inline: .6rem; }
    .hv-progress { width: 16em; }
    .hero2-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- reduced motion: keep a static, attractive visual ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero2-bg, .hero2-rise, .hv-enter, .hv-float, .hv-drift, .hv-orbit, .hv-glow,
    .hv-ai-svg, .hv-ai-halo { animation: none !important; }
    .hv-dot { animation: none !important; opacity: .6; }
    .hv-layer { transform: none !important; will-change: auto; }
    .hv-ring, .hv-js .hv-ring, .hv-js.hv-live .hv-ring { stroke-dashoffset: 28; transition: none; }
    .hero2-pill, .hero2-chip, .hero2-btn, .hv-body, .hv-go, .hv-chip, .hv-cloud { transition: none; }
    .hv-cert:hover, .hv-progress:hover, .hv-practice:hover, .hv-chip:hover, .hv-cloud:hover { transform: rotate(var(--tilt, 0deg)); }
}

/* announcement pill status dot */
.hero2-pill .pill-dot { width: 8px; height: 8px; border-radius: 9999px; background: #22c55e; animation: pill-dot-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero2-pill .pill-dot { animation: none; } }