/* ============================================
   Horizon-Aero — Radii, shadows, borders, motion
   Signature look: very round (44px pills & cards),
   gradient-border cards, soft drop shadows.
   ============================================ */
:root {
    /* --- Corner radii --- */
    --radius: 44px;        /* pills, hero video, large cards */
    --radius-md: 30px;     /* component cards, mobile modals */
    --radius-sm: 24px;     /* mobile cards */
    --radius-xs: 20px;     /* small mobile media */
    --radius-pill: 999px;
    --radius-full: 50%;    /* arrow circles, dots */

    /* --- Shadows --- */
    --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);       /* product / cert cards */
    --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.06);    /* sticky header */
    --shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.25);     /* dialogs */
    --shadow-ring-white: 0 0 0 5px var(--ha-white);     /* arrow circle halo */

    /* --- Borders --- */
    --border-gradient-width: 3px;   /* gradient-border cards @kind other */

    /* --- Backdrop --- */
    --blur-header: blur(12px);   /* @kind other */
    --blur-modal: blur(6px);     /* @kind other */
    --overlay-scrim: rgba(0, 0, 0, 0.45);

    /* --- Motion --- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
    --dur-fast: 0.2s;  /* @kind other */
    --dur: 0.3s;       /* @kind other */
    --dur-slow: 0.5s;  /* @kind other */
    /* Reveal-on-scroll: fade up 40px over 0.7s */
    --reveal-shift: 40px;  /* @kind other */
    --dur-reveal: 0.7s;    /* @kind other */
    /* Hover convention: opacity 0.9 + translateY(-2px); press: scale down */
    --hover-lift: translateY(-2px);  /* @kind other */
}