/* prmta marketing homepage — matches app/auth palette, self-hosted fonts only. */

@font-face {
    font-family: 'Dana';
    src: url('/fonts/fonts/Dana-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/fonts/fonts/Dana-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/fonts/fonts/Dana-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('/fonts/fonts/Dana-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Aligned with Flutter AppPalette.light + site --fy-* tokens */
    --hm-font: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif;
    --hm-font-fa: 'Dana', Tahoma, sans-serif;
    --hm-ink: #1e1b28;
    --hm-muted: #6e6a78;
    --hm-paper: #f8f8fa;
    --hm-paper-top: #f3f2f6;
    --hm-paper-bottom: #ffffff;
    --hm-mist: #efeaf8;
    --hm-line: #e8e6ed;
    --hm-brand: #6654c4;
    --hm-brand-deep: #5243a8;
    --hm-brand-soft: #7d6fd4;
    --hm-accent-glow: #c8c0e8;
    --hm-primary-soft: rgba(123, 92, 243, 0.12);
    --hm-white: #ffffff;
    --hm-success: #2e9468;
    --hm-card: #ffffff;
    --hm-card-soft: rgba(255, 255, 255, 0.92);
    --hm-card-glass: rgba(255, 255, 255, 0.78);
    --hm-nav-bg: rgba(243, 242, 246, 0.72);
    --hm-nav-bg-solid: rgba(243, 242, 246, 0.92);
    --hm-sheet: #f8f8fa;
    --hm-overlay: rgba(20, 18, 28, 0.45);
    --hm-chip: rgba(255, 255, 255, 0.78);
    --hm-icon-well: linear-gradient(160deg, #f4f1ff, #ebe6fb);
    --hm-brand-pose: #c45b8a;
    --hm-brand-pose-alt: #b07cc6;
    --hm-on-brand: #ffffff;
    --hm-hero-wash:
        radial-gradient(ellipse 90% 70% at 78% 18%, rgba(186, 198, 236, 0.34), transparent 58%),
        radial-gradient(ellipse 70% 60% at 8% 78%, rgba(186, 220, 206, 0.28), transparent 55%),
        radial-gradient(ellipse 55% 45% at 48% 48%, rgba(232, 226, 246, 0.45), transparent 62%),
        linear-gradient(168deg, #eef1f7 0%, #f5f4f8 38%, #faf9fc 72%, #ffffff 100%);
    --hm-aurora-blend: multiply;
    --hm-section-band: linear-gradient(180deg, var(--hm-paper-bottom), var(--hm-paper));
    --hm-fade-edge: rgba(246, 245, 251, 0.98);
    --hm-radius: 1.45rem;
    --hm-radius-sm: 12px;
    --hm-max: 1140px;
    --hm-nav-h: 68px;
    --hm-dock-h: 0px;
    --hm-safe-top: env(safe-area-inset-top, 0px);
    --hm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --hm-safe-left: env(safe-area-inset-left, 0px);
    --hm-safe-right: env(safe-area-inset-right, 0px);
    --hm-shadow: 0 20px 42px rgba(125, 94, 245, 0.1);
    --hm-shadow-soft: 0 18px 45px rgba(137, 112, 211, 0.12);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Aligned with Flutter AppPalette.dark */
        --hm-ink: #eeecf3;
        --hm-muted: #9a97a6;
        --hm-paper: #1a1920;
        --hm-paper-top: #141318;
        --hm-paper-bottom: #121116;
        --hm-mist: #23222a;
        --hm-line: #2f2d38;
        --hm-brand: #8b7ce8;
        --hm-brand-deep: #6e5fc4;
        --hm-brand-soft: #a395ee;
        --hm-accent-glow: #5c5380;
        --hm-primary-soft: rgba(139, 124, 232, 0.18);
        --hm-white: #ffffff;
        --hm-success: #4cb88a;
        --hm-card: #23222a;
        --hm-card-soft: rgba(38, 37, 46, 0.94);
        --hm-card-glass: rgba(38, 37, 46, 0.82);
        --hm-nav-bg: rgba(20, 19, 24, 0.78);
        --hm-nav-bg-solid: rgba(20, 19, 24, 0.94);
        --hm-sheet: #1a1920;
        --hm-overlay: rgba(0, 0, 0, 0.62);
        --hm-chip: rgba(38, 37, 46, 0.88);
        --hm-icon-well: linear-gradient(160deg, #2a2836, #23222c);
        --hm-brand-pose: #e08aaa;
        --hm-brand-pose-alt: #c4a0ee;
        --hm-on-brand: #ffffff;
        --hm-hero-wash:
            radial-gradient(ellipse 70% 55% at 30% 20%, rgba(139, 124, 232, 0.22), transparent 60%),
            radial-gradient(ellipse 55% 45% at 78% 30%, rgba(196, 110, 150, 0.14), transparent 55%),
            radial-gradient(ellipse 50% 40% at 50% 70%, rgba(80, 70, 120, 0.18), transparent 62%),
            linear-gradient(168deg, #141318 0%, #1a1920 42%, #121116 100%);
        --hm-aurora-blend: soft-light;
        --hm-section-band: linear-gradient(180deg, var(--hm-paper-top), var(--hm-paper) 55%, var(--hm-paper-bottom));
        --hm-fade-edge: rgba(20, 19, 24, 0.98);
        --hm-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
        --hm-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
        color-scheme: dark;
    }
}

/* Mirror tokens when boot script marks dark (keeps CSS in sync with OS) */
html[data-hm-theme='dark'] {
    color-scheme: dark;
    --hm-ink: #eeecf3;
    --hm-muted: #9a97a6;
    --hm-paper: #1a1920;
    --hm-paper-top: #141318;
    --hm-paper-bottom: #121116;
    --hm-mist: #23222a;
    --hm-line: #2f2d38;
    --hm-brand: #8b7ce8;
    --hm-brand-deep: #6e5fc4;
    --hm-brand-soft: #a395ee;
    --hm-accent-glow: #5c5380;
    --hm-primary-soft: rgba(139, 124, 232, 0.18);
    --hm-white: #ffffff;
    --hm-success: #4cb88a;
    --hm-card: #23222a;
    --hm-card-soft: rgba(38, 37, 46, 0.94);
    --hm-card-glass: rgba(38, 37, 46, 0.82);
    --hm-nav-bg: rgba(20, 19, 24, 0.78);
    --hm-nav-bg-solid: rgba(20, 19, 24, 0.94);
    --hm-sheet: #1a1920;
    --hm-overlay: rgba(0, 0, 0, 0.62);
    --hm-chip: rgba(38, 37, 46, 0.88);
    --hm-icon-well: linear-gradient(160deg, #2a2836, #23222c);
    --hm-brand-pose: #e08aaa;
    --hm-brand-pose-alt: #c4a0ee;
    --hm-on-brand: #ffffff;
    --hm-hero-wash:
        radial-gradient(ellipse 70% 55% at 30% 20%, rgba(139, 124, 232, 0.22), transparent 60%),
        radial-gradient(ellipse 55% 45% at 78% 30%, rgba(196, 110, 150, 0.14), transparent 55%),
        radial-gradient(ellipse 50% 40% at 50% 70%, rgba(80, 70, 120, 0.18), transparent 62%),
        linear-gradient(168deg, #141318 0%, #1a1920 42%, #121116 100%);
    --hm-aurora-blend: soft-light;
    --hm-section-band: linear-gradient(180deg, var(--hm-paper-top), var(--hm-paper) 55%, var(--hm-paper-bottom));
    --hm-fade-edge: rgba(20, 19, 24, 0.98);
    --hm-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
    --hm-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 84, 196, 0.45) rgba(232, 230, 237, 0.65);
    background-color: var(--hm-paper-top);
}

html::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #efeaf8 0%, #f3f2f6 50%, #ebe8f3 100%);
    border-left: 1px solid rgba(196, 180, 234, 0.35);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b7ad4 0%, #6654c4 55%, #5243a8 100%);
    border-radius: 999px;
    border: 2px solid rgba(243, 242, 246, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9a8adc 0%, #7d6fd4 50%, #6654c4 100%);
}

html::-webkit-scrollbar-corner {
    background: transparent;
}

.hm-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--hm-font);
    color: var(--hm-ink);
    background:
        linear-gradient(180deg, var(--hm-paper-top) 0%, var(--hm-paper) 38%, var(--hm-paper-bottom) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    padding-bottom: calc(var(--hm-dock-h) + var(--hm-safe-bottom));
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html[lang='fa'] .hm-body { font-family: var(--hm-font-fa); }

.hm-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--hm-ink);
    color: var(--hm-paper-top);
    padding: 0.6rem 1rem;
    border-radius: 10px;
}

.hm-skip:focus { left: 0.75rem; top: 0.75rem; }

/* ——— Nav ——— */
.hm-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: calc(var(--hm-nav-h) + var(--hm-safe-top));
    padding-top: var(--hm-safe-top);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--hm-nav-bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.hm-nav.is-solid {
    border-bottom-color: var(--hm-line);
    background: var(--hm-nav-bg-solid);
    box-shadow: var(--hm-shadow-soft);
}

.hm-nav.is-open {
    background: var(--hm-nav-bg-solid);
}

.hm-nav__inner {
    max-width: var(--hm-max);
    margin: 0 auto;
    padding: 0 max(1.25rem, var(--hm-safe-right)) 0 max(1.25rem, var(--hm-safe-left));
    height: var(--hm-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hm-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
}

.hm-brand__logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(102, 84, 196, 0.16);
}

.hm-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hm-brand__name {
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.hm-brand__tag {
    font-size: 0.72rem;
    color: var(--hm-muted);
    font-weight: 500;
}

.hm-nav__links {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hm-nav__link,
.hm-nav__signin {
    text-decoration: none;
    color: var(--hm-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
}

.hm-nav__link:hover,
.hm-nav__signin:hover {
    color: var(--hm-brand);
    background: var(--hm-primary-soft);
}

.hm-nav__cta {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--hm-on-brand);
    background: linear-gradient(135deg, var(--hm-brand-soft), var(--hm-brand-deep));
    padding: 0.58rem 1rem;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(102, 84, 196, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hm-nav__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(102, 84, 196, 0.28);
}

.hm-nav__mobile-actions {
    display: none;
    align-items: center;
    gap: 0.55rem;
}

.hm-nav__cta--compact {
    padding: 0.55rem 0.85rem;
    font-size: 0.84rem;
    min-height: 42px;
}

.hm-nav__burger {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(102, 84, 196, 0.18);
    border-radius: 14px;
    background: var(--hm-card-glass);
    display: inline-grid;
    place-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 8px 18px rgba(102, 84, 196, 0.08);
}

.hm-nav__burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--hm-brand-deep);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hm-nav.is-open .hm-nav__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hm-nav.is-open .hm-nav__burger span:nth-child(2) { opacity: 0; }
.hm-nav.is-open .hm-nav__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hm-nav__sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
}

.hm-nav__sheet[hidden] { display: none !important; }

.hm-nav__sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--hm-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.hm-nav__sheet-panel {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: min(88vw, 360px);
    height: 100%;
    height: 100dvh;
    padding:
        calc(1rem + var(--hm-safe-top))
        max(1.15rem, var(--hm-safe-right))
        calc(1.35rem + var(--hm-safe-bottom))
        1.15rem;
    background: var(--hm-sheet);
    box-shadow: -18px 0 40px rgba(30, 27, 40, 0.18);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1.1rem;
    transform: translateX(104%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    overflow: hidden;
}

html[dir='rtl'] .hm-nav__sheet-panel {
    transform: translateX(-104%);
}

.hm-nav.is-open ~ .hm-nav__sheet .hm-nav__sheet-panel,
body.is-hm-menu-open .hm-nav__sheet-panel {
    transform: none;
}

.hm-nav__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 750;
    letter-spacing: -0.02em;
    flex: 0 0 auto;
}

.hm-nav__sheet-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(102, 84, 196, 0.16);
    border-radius: 12px;
    background: var(--hm-card);
    color: var(--hm-brand-deep);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.hm-nav__sheet-links {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding-bottom: 0.35rem;
}

.hm-nav__sheet-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.75rem 0.95rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--hm-ink);
    font-weight: 650;
    background: var(--hm-card);
    border: 1px solid rgba(196, 180, 234, 0.35);
    box-shadow: var(--hm-shadow-soft);
}

.hm-nav__sheet-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    text-decoration: none;
    font-weight: 750;
    color: #fff;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hm-brand-soft), var(--hm-brand-deep));
    box-shadow: 0 14px 28px rgba(102, 84, 196, 0.28);
    flex: 0 0 auto;
}

/* Bottom dock removed — keep spacer token at 0 */
.hm-dock {
    display: none !important;
}

/* ——— Buttons ——— */
.hm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    overflow: hidden;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 14px;
    padding: 0.9rem 1.35rem;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.hm-btn__ico {
    display: inline-flex;
    flex: 0 0 auto;
    opacity: 0.95;
}

.hm-btn:hover { transform: translateY(-2px); }
.hm-btn:active { transform: translateY(0); }

.hm-btn--primary {
    color: var(--hm-on-brand);
    background: linear-gradient(135deg, #7d6fd4 0%, #6654c4 48%, #5243a8 100%);
    box-shadow: 0 16px 34px rgba(102, 84, 196, 0.28);
}

.hm-btn--primary:hover {
    box-shadow: 0 20px 40px rgba(82, 67, 168, 0.34);
}

.hm-btn__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: hm-shine 4.8s ease-in-out infinite;
}

.hm-btn--ghost {
    color: var(--hm-ink);
    background: var(--hm-card-glass);
    border: 1px solid rgba(182, 167, 231, 0.4);
    backdrop-filter: blur(12px);
}

.hm-btn--ghost:hover {
    border-color: rgba(102, 84, 196, 0.35);
    background: var(--hm-card-soft);
}

.hm-btn--wide { min-width: min(100%, 300px); }

@keyframes hm-shine {
    0%, 55%, 100% { transform: translateX(-120%); }
    70% { transform: translateX(120%); }
}

/* ——— Hero ——— */
.hm-hero {
    position: relative;
    min-height: calc(100svh - var(--hm-nav-h));
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hm-hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hm-hero__wash {
    position: absolute;
    inset: 0;
    background: var(--hm-hero-wash);
}

.hm-hero__aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    will-change: transform, opacity;
    mix-blend-mode: var(--hm-aurora-blend);
}

.hm-hero__aurora--a {
    width: min(78vw, 620px);
    height: min(78vw, 620px);
    right: -16%;
    top: -18%;
    background: radial-gradient(circle at 40% 45%,
        rgba(168, 176, 232, 0.55) 0%,
        rgba(140, 156, 220, 0.22) 42%,
        transparent 72%);
    animation: hmAuroraA 22s ease-in-out infinite;
}

.hm-hero__aurora--b {
    width: min(64vw, 520px);
    height: min(64vw, 520px);
    left: -18%;
    bottom: -22%;
    background: radial-gradient(circle at 55% 40%,
        rgba(168, 214, 198, 0.42) 0%,
        rgba(190, 210, 230, 0.18) 48%,
        transparent 74%);
    animation: hmAuroraB 28s ease-in-out infinite;
}

.hm-hero__aurora--c {
    width: min(46vw, 360px);
    height: min(46vw, 360px);
    left: 38%;
    top: 42%;
    background: radial-gradient(circle,
        rgba(196, 184, 232, 0.32) 0%,
        rgba(210, 200, 236, 0.1) 50%,
        transparent 72%);
    animation: hmAuroraC 18s ease-in-out infinite;
    mix-blend-mode: soft-light;
}

.hm-hero__horizon {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 8%;
    height: 42%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.35) 40%, rgba(236, 242, 246, 0.5) 100%);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: 0.7;
    animation: hmHorizonBreath 16s ease-in-out infinite;
}

.hm-hero__breath {
    position: absolute;
    left: 62%;
    top: 46%;
    border-radius: 50%;
    border: 1px solid rgba(140, 160, 210, 0.22);
    box-shadow: inset 0 0 40px rgba(180, 200, 230, 0.08);
    animation: hmBreath 9s ease-in-out infinite;
}

.hm-hero__breath--outer {
    width: min(58vw, 460px);
    height: min(58vw, 460px);
    margin-left: calc(min(58vw, 460px) * -0.5);
    margin-top: calc(min(58vw, 460px) * -0.5);
    animation-duration: 11s;
}

.hm-hero__breath--mid {
    width: min(42vw, 330px);
    height: min(42vw, 330px);
    margin-left: calc(min(42vw, 330px) * -0.5);
    margin-top: calc(min(42vw, 330px) * -0.5);
    border-color: rgba(150, 190, 180, 0.2);
    animation-duration: 9s;
    animation-delay: -2.2s;
}

.hm-hero__breath--inner {
    width: min(26vw, 200px);
    height: min(26vw, 200px);
    margin-left: calc(min(26vw, 200px) * -0.5);
    margin-top: calc(min(26vw, 200px) * -0.5);
    border-color: rgba(160, 150, 210, 0.18);
    animation-duration: 7.5s;
    animation-delay: -4s;
}

.hm-hero__orbit {
    position: absolute;
    left: 62%;
    top: 46%;
    width: min(52vw, 400px);
    height: min(52vw, 400px);
    margin-left: calc(min(52vw, 400px) * -0.5);
    margin-top: calc(min(52vw, 400px) * -0.5);
    border-radius: 50%;
    border: 1px dashed rgba(130, 150, 200, 0.16);
    animation: hmOrbitSpin 48s linear infinite;
}

.hm-hero__orbit::before,
.hm-hero__orbit::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(120, 150, 210, 0.55);
    box-shadow: 0 0 12px rgba(140, 170, 230, 0.45);
}

.hm-hero__orbit::before {
    top: 8%;
    left: 48%;
}

.hm-hero__orbit::after {
    bottom: 14%;
    right: 18%;
    width: 5px;
    height: 5px;
    background: rgba(110, 180, 150, 0.55);
}

.hm-hero__motes {
    position: absolute;
    inset: 0;
}

.hm-hero__motes i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(130, 150, 200, 0.45);
    box-shadow: 0 0 10px rgba(150, 170, 220, 0.35);
    animation: hmMoteDrift 14s ease-in-out infinite;
    opacity: 0;
}

.hm-hero__motes i:nth-child(1) { left: 12%; top: 28%; animation-delay: 0s; animation-duration: 16s; }
.hm-hero__motes i:nth-child(2) { left: 22%; top: 62%; animation-delay: -3s; animation-duration: 18s; width: 2px; height: 2px; }
.hm-hero__motes i:nth-child(3) { left: 38%; top: 18%; animation-delay: -6s; animation-duration: 15s; }
.hm-hero__motes i:nth-child(4) { left: 48%; top: 72%; animation-delay: -2s; animation-duration: 20s; width: 2px; height: 2px; }
.hm-hero__motes i:nth-child(5) { left: 68%; top: 24%; animation-delay: -8s; animation-duration: 17s; background: rgba(120, 180, 160, 0.5); }
.hm-hero__motes i:nth-child(6) { left: 78%; top: 58%; animation-delay: -4s; animation-duration: 19s; }
.hm-hero__motes i:nth-child(7) { left: 86%; top: 36%; animation-delay: -10s; animation-duration: 14s; width: 2px; height: 2px; }
.hm-hero__motes i:nth-child(8) { left: 30%; top: 44%; animation-delay: -5s; animation-duration: 21s; background: rgba(170, 160, 220, 0.45); }

.hm-hero__sheen {
    position: absolute;
    inset: -20% -30%;
    background: linear-gradient(
        105deg,
        transparent 36%,
        rgba(255, 255, 255, 0.22) 48%,
        rgba(220, 230, 245, 0.12) 52%,
        transparent 64%
    );
    animation: hmSheen 26s ease-in-out infinite;
    opacity: 0.55;
}

.hm-hero__grain {
    position: absolute;
    inset: 0;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes hmAuroraA {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    40% { transform: translate(-4%, 5%) scale(1.06); opacity: 1; }
    70% { transform: translate(-1%, 2%) scale(1.02); opacity: 0.85; }
}

@keyframes hmAuroraB {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    50% { transform: translate(5%, -4%) scale(1.08); opacity: 1; }
}

@keyframes hmAuroraC {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate(-3%, -5%) scale(1.1); opacity: 0.95; }
}

@keyframes hmHorizonBreath {
    0%, 100% { opacity: 0.55; transform: translateY(0) scaleY(1); }
    50% { opacity: 0.82; transform: translateY(-1.5%) scaleY(1.04); }
}

@keyframes hmBreath {
    0%, 100% { transform: scale(0.96); opacity: 0.28; }
    50% { transform: scale(1.04); opacity: 0.55; }
}

@keyframes hmOrbitSpin {
    to { transform: rotate(360deg); }
}

@keyframes hmMoteDrift {
    0% { opacity: 0; transform: translateY(12px); }
    15% { opacity: 0.7; }
    50% { opacity: 0.45; transform: translateY(-28px); }
    85% { opacity: 0.65; }
    100% { opacity: 0; transform: translateY(-48px); }
}

@keyframes hmSheen {
    0%, 100% { transform: translateX(-8%) rotate(0.5deg); }
    50% { transform: translateX(10%) rotate(-0.5deg); }
}

.hm-hero__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--hm-max);
    margin: 0 auto;
    padding: 2.75rem 1.25rem 3.75rem;
    display: grid;
    gap: 2.75rem;
    align-items: center;
}

.hm-hero__brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.7rem;
    isolation: isolate;
}

.hm-hero__brand-aura {
    position: absolute;
    inset: -28% -18% -34% -12%;
    z-index: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.hm-hero__brand-wave {
    position: absolute;
    width: min(100%, 11.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(214, 140, 168, 0.28);
    background:
        radial-gradient(circle at 50% 45%, rgba(232, 168, 188, 0.22), transparent 62%);
    opacity: 0.55;
    animation: hmBrandBreath 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.hm-hero__brand-wave--a {
    width: min(92%, 10.2rem);
    animation-delay: 0s;
}

.hm-hero__brand-wave--b {
    width: min(112%, 12.4rem);
    border-color: rgba(196, 150, 210, 0.24);
    background:
        radial-gradient(circle at 50% 48%, rgba(210, 170, 230, 0.16), transparent 64%);
    animation-delay: -1.8s;
    animation-duration: 6.4s;
}

.hm-hero__brand-wave--c {
    width: min(128%, 14rem);
    border-color: rgba(232, 184, 150, 0.22);
    background:
        radial-gradient(circle at 50% 50%, rgba(240, 200, 170, 0.1), transparent 68%);
    animation-delay: -3.4s;
    animation-duration: 7.2s;
}

.hm-hero__brand-pose {
    position: relative;
    z-index: 1;
    width: clamp(2.6rem, 7vw, 3.6rem);
    height: auto;
    opacity: 0.42;
    transform: translateY(2%);
    filter: drop-shadow(0 8px 18px rgba(196, 110, 150, 0.22));
    animation: hmBrandPose 7.2s ease-in-out infinite;
}

.hm-hero__brand-pose-body {
    fill: none;
    stroke: var(--hm-brand-pose);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: hmBrandDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards,
        hmBrandBodyGlow 5.6s ease-in-out 2.4s infinite;
}

.hm-hero__brand-pose-flow {
    fill: none;
    stroke: rgba(232, 168, 188, 0.85);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 4 8;
    opacity: 0;
    animation: hmBrandFlow 2.8s ease-in-out 1.6s infinite;
}

.hm-hero__brand-pose-core {
    fill: rgba(214, 130, 170, 0.7);
    opacity: 0;
    animation: hmBrandCore 5.6s ease-in-out 1.4s infinite;
}

.hm-hero__brand-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    font-size: clamp(2.55rem, 9vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.92;
    color: transparent;
    transform-origin: 30% 60%;
    animation: hmBrandMarkBreath 5.6s ease-in-out 1.15s infinite;
}

.hm-hero__brand-letter {
    display: inline-block;
    background: linear-gradient(
        120deg,
        #2a1824 0%,
        #7a3d62 18%,
        #c45b8a 36%,
        #d9a0c0 48%,
        #b07cc6 60%,
        #e8b4a0 74%,
        #8b4a78 88%,
        #2a1824 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    transform: translateY(0.42em) scale(0.96);
    animation:
        hmBrandLetterIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) calc(0.08s + var(--i) * 0.07s) forwards,
        hmBrandInkFlow 8.5s linear calc(1.2s + var(--i) * 0.12s) infinite;
}

.hm-hero__brand-sheen {
    position: absolute;
    inset: -8% -6%;
    border-radius: 999px;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 236, 245, 0.55) 48%,
        rgba(255, 248, 240, 0.45) 52%,
        transparent 60%,
        transparent 100%
    );
    background-size: 220% 100%;
    mix-blend-mode: soft-light;
    pointer-events: none;
    opacity: 0;
    animation: hmBrandSheen 4.8s ease-in-out 1.6s infinite;
}

@keyframes hmBrandBreath {
    0%, 100% { transform: scale(0.92); opacity: 0.28; }
    50% { transform: scale(1.08); opacity: 0.62; }
}

@keyframes hmBrandPose {
    0%, 100% { transform: translateY(2%) scale(1); opacity: 0.36; }
    50% { transform: translateY(-2%) scale(1.04); opacity: 0.55; }
}

@keyframes hmBrandDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes hmBrandBodyGlow {
    0%, 100% { stroke: var(--hm-brand-pose); opacity: 0.88; }
    50% { stroke: var(--hm-brand-pose-alt); opacity: 1; }
}

@keyframes hmBrandFlow {
    0%, 100% { opacity: 0; transform: translateY(4px); }
    40% { opacity: 0.85; }
    70% { opacity: 0.4; transform: translateY(-6px); }
}

@keyframes hmBrandCore {
    0%, 100% { opacity: 0.15; transform: scale(0.85); }
    50% { opacity: 0.85; transform: scale(1.25); }
}

@keyframes hmBrandLetterIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hmBrandMarkBreath {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.015) translateY(-0.02em); }
}

@keyframes hmBrandInkFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

@keyframes hmBrandSheen {
    0%, 18% { opacity: 0; background-position: 120% 0; }
    35% { opacity: 0.7; }
    55%, 100% { opacity: 0; background-position: -20% 0; }
}

.hm-hero__title {
    margin: 0 0 0.9rem;
    font-size: clamp(1.35rem, 3.8vw, 2.05rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: var(--hm-ink);
    max-width: 22ch;
}

.hm-hero__support {
    margin: 0 0 1.7rem;
    font-size: clamp(0.98rem, 2.1vw, 1.08rem);
    line-height: 1.65;
    color: var(--hm-muted);
    max-width: 46ch;
}

.hm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.hm-hero__visual {
    display: flex;
    justify-content: center;
    min-height: 420px;
}

/* Product visual — portrait card + metric strip */
.hm-product {
    position: relative;
    width: min(100%, 380px);
    display: grid;
    gap: 0.95rem;
    place-items: stretch;
}

.hm-product__frame {
    position: relative;
    width: min(100%, 320px);
    margin-inline: auto;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    border-radius: 1.85rem;
    background: var(--hm-card-soft);
    box-shadow:
        0 28px 56px rgba(90, 70, 150, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    overflow: visible;
}

.hm-product__glow {
    position: absolute;
    inset: 10%;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1) 45%),
        linear-gradient(135deg, rgba(136, 101, 251, 0.16), rgba(193, 169, 255, 0.36));
    filter: blur(12px);
    opacity: 0.75;
    animation: hm-pulse 5.2s ease-in-out infinite;
    pointer-events: none;
}

/* Live chips on portrait — only secure + AI */
.hm-chip {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.78rem 0.42rem 0.42rem;
    border-radius: 999px;
    background: var(--hm-chip);
    border: 1px solid rgba(182, 167, 231, 0.36);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hm-product.is-live .hm-chip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hm-chip__icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #2f8f6b;
    background: var(--hm-icon-well);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hm-chip__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hm-brand-deep);
    white-space: nowrap;
    line-height: 1;
}

.hm-chip--secure {
    top: 4.5%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
}

.hm-chip--secure .hm-chip__icon {
    color: #2f8f6b;
    background: var(--hm-icon-well);
}

.hm-chip--ai {
    top: auto;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--hm-chip);
    border-color: rgba(220, 180, 150, 0.35);
}

.hm-chip--ai .hm-chip__icon {
    color: var(--hm-brand-deep);
    background: var(--hm-icon-well);
}

.hm-product.is-live .hm-chip--secure {
    transition-delay: 0.08s;
    animation: hmChipBob 5.5s ease-in-out 0.6s infinite;
}

.hm-product.is-live .hm-chip--ai {
    transition-delay: 0.18s;
    animation: hmChipBob 5.8s ease-in-out 0.9s infinite;
}

@keyframes hmChipBob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

/* Metric strip under portrait */
.hm-product__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    width: 100%;
}

.hm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    min-height: 6.6rem;
    padding: 0.85rem 0.45rem 0.8rem;
    border-radius: 1.15rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(182, 167, 231, 0.3);
    box-shadow: var(--hm-shadow-soft);
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hm-product.is-live .hm-stat {
    opacity: 1;
    transform: none;
}

.hm-product.is-live .hm-stat--balance { transition-delay: 0.22s; }
.hm-product.is-live .hm-stat--skin { transition-delay: 0.3s; }
.hm-product.is-live .hm-stat--plan { transition-delay: 0.38s; }

.hm-stat__icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #6654c4;
    background: var(--hm-icon-well);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hm-stat--balance .hm-stat__icon { color: #6654c4; }
.hm-stat--skin .hm-stat__icon {
    color: #5b6fd4;
}
.hm-stat--plan .hm-stat__icon {
    color: #7b5cf3;
}

.hm-stat__value {
    display: block;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--hm-brand);
}

.hm-stat__label {
    display: block;
    margin: 0;
    max-width: 9ch;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(58, 49, 83, 0.68);
}

.hm-portrait {
    position: relative;
    z-index: 2;
    margin: 0;
    width: min(88%, 268px);
    aspect-ratio: 4 / 5;
    border-radius: 1.45rem;
    overflow: hidden;
    background: #efeaf8;
    box-shadow: 0 18px 40px rgba(90, 70, 150, 0.16);
}

.hm-portrait__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    transform: scale(1.02);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-product.is-live .hm-portrait__img {
    transform: scale(1);
}

.hm-portrait__ring {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: soft-light;
}

.hm-portrait__ring--outer {
    inset: 7%;
    animation: hm-spin 28s linear infinite;
}

.hm-portrait__ring--mid {
    inset: 16%;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.35);
    animation: hm-pulse 4.8s ease-in-out infinite;
}

.hm-portrait__beam {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 2px;
    top: 18%;
    z-index: 2;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    animation: hm-beam 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hm-spin { to { transform: rotate(360deg); } }

@keyframes hm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.035); opacity: 0.82; }
}

@keyframes hm-beam {
    0%, 100% { top: 18%; opacity: 0.35; }
    50% { top: 78%; opacity: 0.9; }
}

/* ——— Sections ——— */
.hm-section {
    padding: 4.75rem 1.25rem;
    position: relative;
}

.hm-practice {
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-scan-section {
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-section__inner {
    max-width: var(--hm-max);
    margin: 0 auto;
    display: grid;
    gap: 1.85rem;
    width: 100%;
    min-width: 0;
}

.hm-section__inner--split { align-items: center; }

.hm-section__title {
    margin: 0 0 0.8rem;
    font-size: clamp(1.5rem, 3.5vw, 2.05rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
    max-width: 18ch;
}

.hm-section__support {
    margin: 0;
    color: var(--hm-muted);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 44ch;
}

.hm-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.hm-points li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border-radius: var(--hm-radius);
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.35);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hm-section__inner.is-in .hm-points li,
.hm-points li.is-in {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-points li:nth-child(1) { transition-delay: 0.08s; }
.hm-section__inner.is-in .hm-points li:nth-child(2) { transition-delay: 0.16s; }
.hm-section__inner.is-in .hm-points li:nth-child(3) { transition-delay: 0.24s; }

.hm-points li:hover {
    border-color: rgba(102, 84, 196, 0.28);
    box-shadow: 0 16px 34px rgba(102, 84, 196, 0.1);
}

.hm-points__index {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hm-brand);
    background: var(--hm-primary-soft);
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
}

.hm-points__text {
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.4;
}

.hm-section__copy--wide .hm-section__title {
    max-width: 28ch;
}

.hm-section__copy--wide .hm-section__support {
    max-width: 62ch;
}

.hm-how {
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 900px) {
    .hm-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

.hm-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    padding: 1.15rem 1.2rem;
    border-radius: var(--hm-radius);
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.35);
    box-shadow: var(--hm-shadow-soft);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hm-section__inner.is-in .hm-steps li {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-steps li:nth-child(1) { transition-delay: 0.06s; }
.hm-section__inner.is-in .hm-steps li:nth-child(2) { transition-delay: 0.12s; }
.hm-section__inner.is-in .hm-steps li:nth-child(3) { transition-delay: 0.18s; }
.hm-section__inner.is-in .hm-steps li:nth-child(4) { transition-delay: 0.24s; }

.hm-steps__num {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hm-brand);
    background: var(--hm-primary-soft);
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    height: fit-content;
}

.hm-steps__title {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
}

.hm-steps__body {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.hm-coach {
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-section__eyebrow {
    margin: 0 0 0.55rem;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
}

.hm-section__eyebrow--brand {
    color: var(--hm-brand-deep);
    background: rgba(102, 84, 196, 0.1);
    border: 1px solid rgba(102, 84, 196, 0.18);
}

.hm-icon-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.9rem;
}

@media (min-width: 800px) {
    .hm-icon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hm-icon-stack {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.hm-icon-card {
    position: relative;
    display: grid;
    gap: 0.7rem;
    padding: 1.3rem 1.2rem 1.25rem;
    border-radius: 1.3rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(182, 167, 231, 0.36);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(14px);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hm-icon-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(102, 84, 196, 0.55), rgba(126, 214, 186, 0.45));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hm-section__inner.is-in .hm-icon-card {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-icon-card:nth-child(1) { transition-delay: 0.06s; }
.hm-section__inner.is-in .hm-icon-card:nth-child(2) { transition-delay: 0.12s; }
.hm-section__inner.is-in .hm-icon-card:nth-child(3) { transition-delay: 0.18s; }

.hm-icon-card:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 84, 196, 0.32);
    box-shadow: 0 22px 42px rgba(102, 84, 196, 0.14);
}

.hm-section__inner.is-in .hm-icon-card:hover {
    transform: translateY(-5px);
}

.hm-icon-card:hover::before { opacity: 1; }

.hm-icon-card--row {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.9rem;
    padding: 1.05rem 1.1rem;
}

.hm-icon-card__mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--hm-brand);
    background: var(--hm-icon-well);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 16px rgba(102, 84, 196, 0.08);
    animation: hmIconFloat 3.8s ease-in-out infinite;
}

.hm-icon-card:nth-child(2) .hm-icon-card__mark { animation-delay: 0.4s; }
.hm-icon-card:nth-child(3) .hm-icon-card__mark { animation-delay: 0.8s; }

@keyframes hmIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.hm-icon-card--chat .hm-icon-card__mark { color: #6654c4; }
.hm-icon-card--voice .hm-icon-card__mark { color: #3b6fd4; }
.hm-icon-card--video .hm-icon-card__mark { color: #2e77bc; }
.hm-icon-card--clock .hm-icon-card__mark { color: #6654c4; }
.hm-icon-card--bell .hm-icon-card__mark { color: #2f8f6b; }
.hm-icon-card--calendar .hm-icon-card__mark { color: #7b5cf3; }
.hm-icon-card--secure .hm-icon-card__mark { color: #2f8f6b; }
.hm-icon-card--library .hm-icon-card__mark { color: #3b6fd4; }
.hm-icon-card--calm .hm-icon-card__mark { color: #9a6b0a; }

.hm-icon-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.hm-icon-card__body {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.hm-feature-grid {
    display: none;
}

.hm-remind {
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-more {
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-faq {
    position: relative;
    overflow: hidden;
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-faq__glow {
    position: absolute;
    inset: auto 10% -20% 10%;
    height: 40%;
    background: radial-gradient(ellipse at center, rgba(136, 120, 220, 0.08), transparent 70%);
    pointer-events: none;
}

.hm-faq__inner {
    position: relative;
    z-index: 1;
}

.hm-faq__intro {
    margin-bottom: 1.65rem;
}

.hm-faq__eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hm-brand);
}

.hm-faq__list {
    display: grid;
    gap: 0.75rem;
    max-width: 52rem;
}

.hm-faq__item {
    border-radius: 1.2rem;
    border: 1px solid rgba(196, 180, 234, 0.34);
    background: var(--hm-card-soft);
    box-shadow: 0 10px 28px rgba(90, 70, 150, 0.05);
    overflow: hidden;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.hm-faq__item:hover {
    border-color: rgba(102, 84, 196, 0.32);
    box-shadow: 0 14px 32px rgba(102, 84, 196, 0.08);
}

.hm-faq__item[open] {
    border-color: rgba(102, 84, 196, 0.38);
    background: var(--hm-card-soft);
    box-shadow:
        0 16px 36px rgba(102, 84, 196, 0.1),
        inset 3px 0 0 var(--hm-brand);
}

.hm-faq__item summary {
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 1.15rem;
    letter-spacing: -0.015em;
}

.hm-faq__item summary::-webkit-details-marker { display: none; }

.hm-faq__index {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.7rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: var(--hm-brand);
    background: linear-gradient(160deg, #f3f0ff, #ebe6fb);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.hm-faq__item[open] .hm-faq__index {
    color: #fff;
    background: linear-gradient(145deg, #7a68d4, #6654c4);
    box-shadow: 0 8px 16px rgba(102, 84, 196, 0.22);
}

.hm-faq__question {
    font-weight: 700;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.35;
    color: var(--hm-ink);
}

.hm-faq__toggle {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: var(--hm-brand);
    background: rgba(102, 84, 196, 0.08);
    transition: transform 0.28s ease, background 0.25s ease, color 0.25s ease;
}

.hm-faq__item[open] .hm-faq__toggle {
    transform: rotate(180deg);
    color: #fff;
    background: var(--hm-brand);
}

.hm-faq__body {
    padding: 0 1.15rem 1.15rem 4.1rem;
}

.hm-faq__body p {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.22);
    color: var(--hm-muted);
    line-height: 1.65;
    font-size: 0.95rem;
}

.hm-points--compact { margin-top: 1.35rem; }

.hm-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.hm-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(196, 180, 234, 0.35);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 14px 30px rgba(125, 94, 245, 0.08);
    aspect-ratio: 1;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.25s ease;
}

.hm-section__inner.is-in .hm-gallery__item {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-gallery__item:nth-child(1) { transition-delay: 0.06s; }
.hm-section__inner.is-in .hm-gallery__item:nth-child(2) { transition-delay: 0.14s; }
.hm-section__inner.is-in .hm-gallery__item:nth-child(3) { transition-delay: 0.22s; }

.hm-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform 0.55s ease;
}

.hm-gallery__item:hover img {
    transform: scale(1.04);
}

.hm-meter {
    display: grid;
    gap: 1.05rem;
    padding: 1.35rem 1.25rem 1.4rem;
    border-radius: 1.6rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.4);
    box-shadow: var(--hm-shadow);
    backdrop-filter: blur(18px);
}

.hm-meter__header {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hm-brand);
}

.hm-meter__pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--hm-brand-soft);
    box-shadow: 0 0 0 5px rgba(125, 111, 212, 0.15);
    animation: hm-dot 1.8s ease-in-out infinite;
}

.hm-meter__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    align-items: center;
}

.hm-meter__label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--hm-muted);
}

.hm-meter__value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hm-brand);
}

.hm-meter__bar {
    grid-column: 1 / -1;
    height: 9px;
    border-radius: 999px;
    background: rgba(102, 84, 196, 0.1);
    overflow: hidden;
}

.hm-meter__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #7d6fd4, #6654c4 60%, #5243a8);
    transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-meter.is-on .hm-meter__bar i { width: var(--hm-w); }

/* ——— CTA ——— */
.hm-cta {
    padding: 2.5rem 1.25rem 4.5rem;
    background: var(--hm-section-band);
}

.hm-cta__shell {
    position: relative;
    max-width: var(--hm-max);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid rgba(182, 167, 231, 0.38);
    background: var(--hm-card-soft);
    box-shadow: var(--hm-shadow-soft);
}

.hm-cta__glow {
    position: absolute;
    width: 280px;
    height: 280px;
    right: -60px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 192, 232, 0.55), transparent 70%);
    pointer-events: none;
}

.hm-cta__inner {
    position: relative;
    z-index: 1;
    padding: 3rem 1.5rem;
    text-align: center;
}

.hm-cta__title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    letter-spacing: -0.03em;
}

.hm-cta__support {
    margin: 0 0 1.55rem;
    color: var(--hm-muted);
    line-height: 1.55;
}

/* ——— Footer ——— */
.hm-footer {
    border-top: 1px solid var(--hm-line);
    background: var(--hm-paper-top);
    padding: 1.75rem 1.25rem 2.35rem;
}

.hm-footer__inner {
    max-width: var(--hm-max);
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
}

.hm-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--hm-ink);
    font-weight: 700;
}

.hm-footer__brand img { border-radius: 9px; }

.hm-footer__note {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.88rem;
}

.hm-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.15rem;
}

.hm-footer__legal a {
    color: var(--hm-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.hm-footer__legal a:hover { color: var(--hm-brand); }

/* ——— Food scan ——— */
.hm-food {
    position: relative;
    overflow: hidden;
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-food__glow {
    position: absolute;
    inset: 18% 20% auto;
    height: 180px;
    background: radial-gradient(circle, rgba(74, 168, 130, 0.12), transparent 70%);
    filter: blur(28px);
    pointer-events: none;
}

.hm-food__inner { position: relative; z-index: 1; }

.hm-food__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.hm-food__eyebrow {
    margin: 0 0 0.55rem;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2f8f6b;
    background: rgba(74, 168, 130, 0.12);
    border: 1px solid rgba(74, 168, 130, 0.22);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
}

.hm-food__blocks {
    margin-top: 1.35rem;
    display: grid;
    gap: 1.15rem;
}

.hm-food__block {
    padding: 1.1rem 1.15rem;
    border-radius: 1.2rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(170, 210, 190, 0.4);
    box-shadow: 0 14px 30px rgba(70, 120, 95, 0.06);
}

.hm-food__block-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--hm-ink);
}

.hm-food__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.hm-food__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #3a3648;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.hm-section__inner.is-in .hm-food__list li {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-food__list li:nth-child(1) { transition-delay: 0.05s; }
.hm-section__inner.is-in .hm-food__list li:nth-child(2) { transition-delay: 0.1s; }
.hm-section__inner.is-in .hm-food__list li:nth-child(3) { transition-delay: 0.15s; }
.hm-section__inner.is-in .hm-food__list li:nth-child(4) { transition-delay: 0.2s; }
.hm-section__inner.is-in .hm-food__list li:nth-child(5) { transition-delay: 0.25s; }
.hm-section__inner.is-in .hm-food__list li:nth-child(6) { transition-delay: 0.3s; }

.hm-food__dot {
    width: 8px;
    height: 8px;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4aa882, #2f8f6b);
    box-shadow: 0 0 0 4px rgba(74, 168, 130, 0.14);
}

.hm-food__use-num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #2f8f6b;
    margin-top: 0.15rem;
}

.hm-food__stage { display: grid; place-items: center; }

.hm-food-card {
    position: relative;
    width: min(100%, 360px);
    min-height: 380px;
    padding: 1.5rem;
}

.hm-food-card__plate {
    position: relative;
    width: min(100%, 260px);
    aspect-ratio: 1;
    margin: 0.5rem auto 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.98) 0%, transparent 40%),
        radial-gradient(circle at 60% 70%, rgba(126, 214, 186, 0.16) 0%, transparent 48%),
        linear-gradient(165deg, #f8fbf9 0%, #eef5f0 48%, #e2eee7 100%);
    box-shadow:
        0 0 0 1px rgba(126, 180, 150, 0.22),
        0 0 0 10px rgba(255, 255, 255, 0.55),
        0 22px 48px rgba(70, 120, 95, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.hm-food-card__glow {
    position: absolute;
    inset: 22% 18% 28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(158, 214, 180, 0.35), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.hm-food-card__ring {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1.5px dashed rgba(74, 168, 130, 0.28);
    opacity: 0.85;
    animation: hmFoodSpin 28s linear infinite;
}

.hm-food-card__beam {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 16%;
    top: 14%;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(126, 214, 186, 0.16) 35%,
        rgba(126, 214, 186, 0.38) 50%,
        rgba(126, 214, 186, 0.16) 65%,
        transparent 100%
    );
    animation: hmFoodBeam 3.6s ease-in-out infinite;
    filter: blur(0.5px);
    pointer-events: none;
}

.hm-food-card__meal {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.hm-food-card__dish {
    width: 68%;
    height: auto;
    margin-top: 4%;
    overflow: visible;
    filter: drop-shadow(0 12px 18px rgba(80, 110, 90, 0.12));
}

.hm-food-card__greens path {
    transform-origin: center;
    transform-box: fill-box;
}

.hm-food-card__greens path:nth-child(1) {
    animation: hmFoodLeaf 5s ease-in-out infinite;
}

.hm-food-card__greens path:nth-child(2) {
    animation: hmFoodLeaf 5.5s ease-in-out infinite reverse;
}

.hm-food-card__greens path:nth-child(3) {
    animation: hmFoodLeaf 4.8s ease-in-out infinite;
    animation-delay: 0.4s;
}

.hm-food-card__bits {
    animation: hmFoodBits 6s ease-in-out infinite;
    transform-origin: 80px 74px;
}

.hm-food-card__steam path {
    animation: hmFoodSteam 3.2s ease-in-out infinite;
}

.hm-food-card__steam path:nth-child(2) { animation-delay: 0.35s; }
.hm-food-card__steam path:nth-child(3) { animation-delay: 0.7s; }

.hm-food-card__chip {
    position: absolute;
    display: grid;
    gap: 0.12rem;
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(170, 210, 190, 0.45);
    box-shadow: 0 14px 28px rgba(70, 120, 95, 0.12);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hm-food-card.is-live .hm-food-card__chip {
    opacity: 1;
    transform: none;
}

.hm-food-card__chip strong {
    font-size: 0.88rem;
    font-weight: 750;
    color: var(--hm-ink);
}

.hm-food-card__chip span {
    font-size: 0.72rem;
    color: var(--hm-muted);
    font-weight: 600;
}

.hm-food-card__chip--ok {
    top: 6%;
    inset-inline-start: 0;
    transition-delay: 0.15s;
}

.hm-food-card__chip--ok strong { color: #2f8f6b; }

.hm-food-card__chip--macros {
    top: 28%;
    inset-inline-end: 0;
    min-width: 132px;
    transition-delay: 0.3s;
}

.hm-food-card__bars {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.25rem;
}

.hm-food-card__bars i {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: rgba(200, 210, 205, 0.7);
    position: relative;
    overflow: hidden;
}

.hm-food-card__bars i::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-food-card__bars i:nth-child(1)::after { background: #6fbf9a; }
.hm-food-card__bars i:nth-child(2)::after { background: #4a9a6e; }
.hm-food-card__bars i:nth-child(3)::after { background: #e0b35a; }

.hm-food-card.is-live .hm-food-card__bars i::after { width: var(--w); }

.hm-food-card__chip--score {
    bottom: 18%;
    inset-inline-start: 2%;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.45rem;
    transition-delay: 0.45s;
}

.hm-food-card__chip--score strong {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #4aa882, #2f8f6b);
    font-size: 0.95rem;
}

.hm-food-card__chip--skin {
    bottom: 6%;
    inset-inline-end: 4%;
    transition-delay: 0.55s;
}

@keyframes hmFoodSpin { to { transform: rotate(360deg); } }

@keyframes hmFoodBeam {
    0%, 100% { top: 14%; opacity: 0.3; }
    50% { top: 62%; opacity: 0.9; }
}

@keyframes hmFoodLeaf {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 0 -2px; rotate: 1.5deg; }
}

@keyframes hmFoodBits {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -1.5px; }
}

@keyframes hmFoodSteam {
    0%, 100% { opacity: 0.25; translate: 0 2px; }
    50% { opacity: 0.7; translate: 0 -4px; }
}

@media (min-width: 900px) {
    .hm-food__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        gap: 2.5rem;
    }

    .hm-food__blocks {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

@media (max-width: 720px) {
    .hm-food-card {
        min-height: 340px;
        width: min(100%, 320px);
    }
}

/* ——— Journey path (live scan) ——— */
.hm-journey {
    position: relative;
    overflow: hidden;
    background: var(--hm-section-band);
}

.hm-journey__glow {
    position: absolute;
    inset: 12% 8% auto;
    height: 240px;
    background: radial-gradient(circle, rgba(102, 84, 196, 0.12), transparent 70%);
    filter: blur(34px);
    pointer-events: none;
}

.hm-journey__inner {
    position: relative;
    z-index: 1;
    gap: 1.75rem;
    width: 100%;
    min-width: 0;
}

.hm-journey__eyebrow {
    margin: 0 0 0.55rem;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hm-brand-deep);
    background: rgba(102, 84, 196, 0.1);
    border: 1px solid rgba(102, 84, 196, 0.18);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
}

.hm-journey__theater {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    margin: 0.25rem 0 0.35rem;
}

.hm-journey__scan {
    position: relative;
    width: min(100%, 280px);
    aspect-ratio: 1;
    border-radius: 32px;
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.95) 0%, transparent 42%),
        radial-gradient(circle at 62% 70%, rgba(232, 180, 200, 0.22) 0%, transparent 48%),
        linear-gradient(165deg, #f7f4fb 0%, #efe8f7 48%, #e8e0f4 100%);
    box-shadow:
        0 0 0 1px rgba(182, 167, 231, 0.28),
        0 22px 48px rgba(102, 84, 196, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow: hidden;
}

.hm-journey__scan-glow {
    position: absolute;
    inset: 18% 16% 28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 168, 232, 0.35), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.hm-journey__scan-ring {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(139, 124, 232, 0.28);
    opacity: 0;
    pointer-events: none;
}

.hm-journey__scan-ring--soft {
    inset: 8%;
    border-color: rgba(196, 140, 180, 0.22);
}

.hm-journey__inner.is-scanning .hm-journey__scan-ring {
    animation: hmJourneyRingPulse 2.8s ease-out infinite;
}

.hm-journey__inner.is-scanning .hm-journey__scan-ring--soft {
    animation-delay: 0.9s;
}

.hm-journey__scan-frame {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1.5px solid rgba(139, 124, 232, 0.2);
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.35), transparent 68%);
    box-shadow: inset 0 0 36px rgba(125, 111, 212, 0.06);
}

.hm-journey__inner.is-scanning .hm-journey__scan-frame {
    animation: hmJourneyFrameGlow 2.8s ease-in-out infinite;
}

.hm-journey__scan-corners {
    position: absolute;
    inset: 11%;
    pointer-events: none;
}

.hm-journey__scan-corners i {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(139, 124, 232, 0.55);
    opacity: 0.85;
}

.hm-journey__scan-corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.hm-journey__scan-corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.hm-journey__scan-corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.hm-journey__scan-corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

.hm-journey__inner.is-scanning .hm-journey__scan-corners i {
    animation: hmJourneyCornerBlink 2.2s ease-in-out infinite;
}

.hm-journey__scan-face {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 58%;
    height: auto;
    translate: -50% -50%;
    overflow: visible;
    filter: drop-shadow(0 10px 18px rgba(120, 90, 70, 0.12));
}

.hm-journey__scan-head {
    stroke: rgba(196, 154, 136, 0.35);
    stroke-width: 1;
}

.hm-journey__scan-marks circle {
    fill: rgba(139, 124, 232, 0.55);
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.8;
}

.hm-journey__inner.is-scanning .hm-journey__scan-marks circle {
    animation: hmJourneyMarkSoft 2.4s ease-in-out infinite;
}

.hm-journey__inner.is-scanning .hm-journey__scan-marks circle:nth-child(2n) {
    animation-delay: 0.35s;
}

.hm-journey__inner.is-scanning .hm-journey__scan-marks circle:nth-child(3n) {
    animation-delay: 0.7s;
}

.hm-journey__scan-beam {
    position: absolute;
    left: 16%;
    right: 16%;
    height: 18%;
    top: 16%;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(180, 210, 255, 0.18) 30%,
        rgba(196, 168, 255, 0.42) 50%,
        rgba(180, 210, 255, 0.18) 70%,
        transparent 100%
    );
    box-shadow: 0 0 24px rgba(160, 180, 255, 0.25);
    mix-blend-mode: soft-light;
    animation: hmJourneyScanBeam 3.2s ease-in-out infinite;
    opacity: 0;
    pointer-events: none;
}

.hm-journey__inner.is-scanning .hm-journey__scan-beam { opacity: 1; }

.hm-journey__scan-label {
    position: absolute;
    left: 50%;
    bottom: 9%;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--hm-ink);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(182, 167, 231, 0.42);
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(102, 84, 196, 0.12);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.hm-journey__scan-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4aa882;
    box-shadow: 0 0 0 3px rgba(74, 168, 130, 0.2);
    animation: hmJourneyStatusPulse 1.5s ease-in-out infinite;
}

.hm-journey__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(100%, 34rem);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(182, 167, 231, 0.4);
    box-shadow: 0 10px 24px rgba(102, 84, 196, 0.08);
    backdrop-filter: blur(10px);
}

.hm-journey__status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4aa882;
    box-shadow: 0 0 0 4px rgba(74, 168, 130, 0.18);
    animation: hmJourneyStatusPulse 1.4s ease-in-out infinite;
}

.hm-journey__status-text {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--hm-ink);
    line-height: 1.35;
    white-space: nowrap;
}

.hm-journey__status-text.is-swap {
    animation: hmJourneyStatusSwap 0.45s ease both;
}

.hm-journey__rail {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    justify-items: stretch;
    overflow: visible;
}

.hm-journey__step {
    position: relative;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
    padding: 1.25rem 1rem 1.2rem;
    border-radius: 1.35rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.34);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(14px);
    opacity: 0.38;
    transform: translateY(18px) scale(0.97);
    filter: saturate(0.7) grayscale(0.15);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        filter 0.4s ease,
        background 0.3s ease;
}

.hm-journey__step.is-on {
    opacity: 1;
    transform: none;
    filter: none;
    border-color: rgba(102, 84, 196, 0.34);
    box-shadow: 0 20px 42px rgba(102, 84, 196, 0.14);
    background: rgba(255, 255, 255, 0.92);
}

.hm-journey__step.is-active {
    border-color: rgba(102, 84, 196, 0.55);
    box-shadow:
        0 26px 52px rgba(102, 84, 196, 0.2),
        0 0 0 2px rgba(102, 84, 196, 0.12);
    transform: translateY(-4px);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(243, 240, 252, 0.94));
}

.hm-journey__step.is-vip.is-on {
    border-color: rgba(184, 134, 11, 0.4);
    background: linear-gradient(165deg, rgba(255, 252, 245, 0.96), rgba(255, 255, 255, 0.9));
    box-shadow: 0 20px 42px rgba(184, 134, 11, 0.14);
}

.hm-journey__step.is-vip.is-active {
    border-color: rgba(184, 134, 11, 0.55);
    box-shadow:
        0 26px 52px rgba(184, 134, 11, 0.2),
        0 0 0 2px rgba(184, 134, 11, 0.14);
}

.hm-journey__vip {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    background: linear-gradient(135deg, #d4a017, #9a6b0a);
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(154, 107, 10, 0.28);
}

.hm-journey__node {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
}

.hm-journey__node-ring {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    border: 2px solid rgba(102, 84, 196, 0.18);
    opacity: 0.5;
}

.hm-journey__step.is-active .hm-journey__node-ring {
    animation: hmJourneyNodePulse 1.8s ease-out infinite;
    border-color: rgba(102, 84, 196, 0.45);
    opacity: 1;
}

.hm-journey__node-core {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--hm-brand);
    background: var(--hm-icon-well);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 22px rgba(102, 84, 196, 0.12);
}

.hm-journey__step--upload .hm-journey__node-core { color: #6654c4; }
.hm-journey__step--scan .hm-journey__node-core { color: #3b6fd4; }
.hm-journey__step--report .hm-journey__node-core { color: #2f8f6b; }
.hm-journey__step--practice .hm-journey__node-core { color: #7b5cf3; }
.hm-journey__step--coach .hm-journey__node-core { color: #2e77bc; }
.hm-journey__step--vip .hm-journey__node-core { color: #9a6b0a; }

.hm-journey-svg { display: block; }

.hm-journey__index {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--hm-brand-soft);
}

.hm-journey__step.is-vip .hm-journey__index { color: #b8860b; }

.hm-journey__name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 780;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.hm-journey__body {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.hm-journey__bridge {
    display: none;
}

@media (min-width: 1101px) {
    .hm-journey__bridge {
        display: block;
        position: absolute;
        top: 2.85rem;
        inset-inline-end: -0.65rem;
        width: 0.65rem;
        height: 3px;
        border-radius: 999px;
        background: rgba(182, 167, 231, 0.45);
        overflow: hidden;
        z-index: 2;
    }

    .hm-journey__bridge i {
        display: block;
        height: 100%;
        width: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, #7d6fd4, #4aa882);
        transition: width 0.55s ease;
    }

    .hm-journey__step.is-on .hm-journey__bridge i {
        width: 100%;
    }
}

@keyframes hmJourneyScanBeam {
    0% { top: 14%; opacity: 0.35; }
    45% { top: 58%; opacity: 0.95; }
    100% { top: 14%; opacity: 0.35; }
}

@keyframes hmJourneyStatusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.7; }
}

@keyframes hmJourneyNodePulse {
    0% { transform: scale(1); opacity: 0.9; }
    70% { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
}

@keyframes hmJourneyStatusSwap {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: none; }
}

@keyframes hmJourneyFrameGlow {
    0%, 100% {
        box-shadow: inset 0 0 36px rgba(125, 111, 212, 0.06);
        border-color: rgba(139, 124, 232, 0.2);
    }
    50% {
        box-shadow: inset 0 0 42px rgba(125, 111, 212, 0.16);
        border-color: rgba(139, 124, 232, 0.42);
    }
}

@keyframes hmJourneyCornerBlink {
    0%, 100% { border-color: rgba(139, 124, 232, 0.4); opacity: 0.7; }
    50% { border-color: rgba(139, 124, 232, 0.9); opacity: 1; }
}

@keyframes hmJourneyRingPulse {
    0% { transform: scale(0.92); opacity: 0.55; }
    70% { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}

@keyframes hmJourneyMarkSoft {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.35); }
}

@media (max-width: 1100px) {
    .hm-journey__rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.8rem;
    }
}

@media (max-width: 720px) {
    .hm-journey__rail {
        display: flex;
        grid-template-columns: none;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .hm-journey__scan {
        width: min(100%, 240px);
    }

    .hm-journey__status-text {
        white-space: normal;
    }

    .hm-journey__node,
    .hm-journey__node-core {
        width: 60px;
        height: 60px;
    }

    .hm-journey-svg {
        width: 34px;
        height: 34px;
    }
}

/* ——— Payment methods (footer band) ——— */
.hm-pay {
    position: relative;
    border-top: 1px solid var(--hm-line);
    background: var(--hm-section-band);
    padding: 2.5rem 1.25rem 2.1rem;
}

.hm-pay__inner {
    max-width: var(--hm-max);
    margin: 0 auto;
    display: grid;
    gap: 1.35rem;
    justify-items: center;
    text-align: center;
}

.hm-pay__eyebrow {
    margin: 0 0 0.45rem;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2f8f6b;
    background: rgba(74, 168, 130, 0.12);
    border: 1px solid rgba(74, 168, 130, 0.2);
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
}

.hm-pay__title {
    margin: 0 0 0.45rem;
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--hm-ink);
}

.hm-pay__support {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--hm-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.hm-pay__brands {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.hm-pay__brand {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    min-width: 104px;
    padding: 0.7rem 0.75rem 0.65rem;
    border-radius: 1rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.32);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hm-pay__inner.is-in .hm-pay__brand {
    opacity: 1;
    transform: none;
}

.hm-pay__inner.is-in .hm-pay__brand:nth-child(1) { transition-delay: 0.04s; }
.hm-pay__inner.is-in .hm-pay__brand:nth-child(2) { transition-delay: 0.08s; }
.hm-pay__inner.is-in .hm-pay__brand:nth-child(3) { transition-delay: 0.12s; }
.hm-pay__inner.is-in .hm-pay__brand:nth-child(4) { transition-delay: 0.16s; }
.hm-pay__inner.is-in .hm-pay__brand:nth-child(5) { transition-delay: 0.2s; }
.hm-pay__inner.is-in .hm-pay__brand:nth-child(6) { transition-delay: 0.24s; }

.hm-pay__brand:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 84, 196, 0.28);
    box-shadow: 0 18px 34px rgba(102, 84, 196, 0.12);
}

.hm-pay__inner.is-in .hm-pay__brand:hover {
    transform: translateY(-4px);
}

.hm-pay__mark {
    display: grid;
    place-items: center;
    animation: hmPayFloat 3.8s ease-in-out infinite;
}

.hm-pay__brand:nth-child(2) .hm-pay__mark { animation-delay: 0.4s; }
.hm-pay__brand:nth-child(3) .hm-pay__mark { animation-delay: 0.8s; }
.hm-pay__brand:nth-child(4) .hm-pay__mark { animation-delay: 1.2s; }

@keyframes hmPayFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.hm-pay-svg {
    display: block;
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(20, 20, 40, 0.08);
}

.hm-pay__label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--hm-muted);
    letter-spacing: 0.01em;
}

.hm-pay__note {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.82rem;
    max-width: 52ch;
}

/* ——— Download stores ——— */
.hm-download {
    position: relative;
    overflow: hidden;
    background: var(--hm-section-band);
    border-top: 1px solid var(--hm-line);
}

.hm-download__glow {
    position: absolute;
    inset: 12% 18% auto;
    height: 180px;
    background: radial-gradient(circle, rgba(102, 84, 196, 0.12), transparent 70%);
    filter: blur(28px);
    pointer-events: none;
}

.hm-download__inner { position: relative; z-index: 1; gap: 1.75rem; }

.hm-download__eyebrow {
    margin: 0 0 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2f8f6b;
    background: rgba(74, 168, 130, 0.12);
    border: 1px solid rgba(74, 168, 130, 0.22);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
}

.hm-stores {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
}

.hm-stores__item {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-section__inner.is-in .hm-stores__item {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-stores__item:nth-child(1) { transition-delay: 0.06s; }
.hm-section__inner.is-in .hm-stores__item:nth-child(2) { transition-delay: 0.12s; }
.hm-section__inner.is-in .hm-stores__item:nth-child(3) { transition-delay: 0.18s; }
.hm-section__inner.is-in .hm-stores__item:nth-child(4) { transition-delay: 0.24s; }
.hm-section__inner.is-in .hm-stores__item:nth-child(5) { transition-delay: 0.3s; }

.hm-store {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.9rem;
    align-items: center;
    min-height: 118px;
    padding: 1.05rem 1.1rem 1rem;
    text-decoration: none;
    color: var(--hm-ink);
    border-radius: 1.25rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(186, 210, 198, 0.55);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(16px);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.hm-store:hover {
    transform: translateY(-6px);
    border-color: rgba(102, 84, 196, 0.28);
    box-shadow: 0 22px 40px rgba(102, 84, 196, 0.14);
}

.hm-store__icon {
    grid-row: 1 / span 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--hm-icon-well);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 18px rgba(80, 120, 100, 0.08);
    animation: hmStoreIconFloat 3.6s ease-in-out infinite;
}

.hm-stores__item:nth-child(2) .hm-store__icon { animation-delay: 0.35s; }
.hm-stores__item:nth-child(3) .hm-store__icon { animation-delay: 0.7s; }
.hm-stores__item:nth-child(4) .hm-store__icon { animation-delay: 1.05s; }
.hm-stores__item:nth-child(5) .hm-store__icon { animation-delay: 1.4s; }

@keyframes hmStoreIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.hm-store__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.hm-store__label {
    font-weight: 750;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.hm-store__hint {
    color: var(--hm-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.hm-store__action {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2f8f6b;
}

.hm-store__arrow {
    transition: transform 0.25s ease;
}

.hm-store:hover .hm-store__arrow {
    transform: translateX(3px);
}

.hm-store__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
    transform: translateX(-120%);
    pointer-events: none;
}

.hm-store:hover .hm-store__shine {
    animation: hmStoreShine 0.85s ease;
}

@keyframes hmStoreShine {
    to { transform: translateX(120%); }
}

.hm-store--play { border-color: rgba(52, 168, 83, 0.28); }
.hm-store--play:hover { box-shadow: 0 22px 40px rgba(52, 168, 83, 0.16); }
.hm-store--play .hm-store__action { color: #2d8a4e; }

.hm-store--apple { border-color: rgba(29, 29, 31, 0.14); }
.hm-store--apple .hm-store__action { color: #3a3a3c; }

.hm-store--galaxy { border-color: rgba(20, 40, 160, 0.2); }
.hm-store--galaxy .hm-store__action { color: #1428a0; }

.hm-store--windows { border-color: rgba(0, 120, 212, 0.22); }
.hm-store--windows .hm-store__action { color: #0078d4; }

.hm-store--apk { border-color: rgba(43, 182, 115, 0.3); }
.hm-store--apk .hm-store__action { color: #1f9a62; }

/* ——— Pricing plans (from DB) ——— */
.hm-pricing {
    position: relative;
    overflow: hidden;
    background: var(--hm-section-band);
}

.hm-pricing__glow {
    position: absolute;
    inset: auto 18% 6%;
    height: 180px;
    background: radial-gradient(circle, rgba(102, 84, 196, 0.12), transparent 70%);
    filter: blur(28px);
    pointer-events: none;
}

.hm-pricing__inner {
    position: relative;
    z-index: 1;
    gap: 1.75rem;
    width: 100%;
    min-width: 0;
}

.hm-pricing__eyebrow {
    margin: 0 0 0.55rem;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hm-brand-deep);
    background: rgba(102, 84, 196, 0.1);
    border: 1px solid rgba(102, 84, 196, 0.18);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
}

.hm-plans-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    gap: 0.95rem;
}

.hm-plans-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hm-plans-slider__hint {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.hm-plans-slider__nav {
    display: inline-flex;
    gap: 0.45rem;
}

.hm-plans-slider__btn {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(102, 84, 196, 0.22);
    border-radius: 14px;
    background: var(--hm-card);
    color: var(--hm-brand-deep);
    cursor: pointer;
    box-shadow: var(--hm-shadow-soft);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.hm-plans-slider__btn:hover:not(:disabled) {
    background: rgba(102, 84, 196, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(102, 84, 196, 0.16);
}

.hm-plans-slider__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.hm-plans-slider__viewport {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.hm-plans-slider.is-scrollable .hm-plans-slider__viewport::before,
.hm-plans-slider.is-scrollable .hm-plans-slider__viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0.85rem;
    width: 2.4rem;
    z-index: 2;
    pointer-events: none;
}

.hm-plans-slider.is-scrollable .hm-plans-slider__viewport::before {
    inset-inline-start: 0;
    background: linear-gradient(90deg, var(--hm-fade-edge), transparent);
}

.hm-plans-slider.is-scrollable .hm-plans-slider__viewport::after {
    inset-inline-end: 0;
    background: linear-gradient(270deg, var(--hm-fade-edge), transparent);
}

.hm-plans {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.05rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 0.25rem;
    padding: 0.5rem 0.2rem 1.1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 84, 196, 0.55) rgba(232, 230, 237, 0.7);
}

.hm-plans.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
}

.hm-plans:not(.is-dragging) {
    cursor: grab;
}

.hm-plans::-webkit-scrollbar {
    height: 8px;
}

.hm-plans::-webkit-scrollbar-track {
    background: rgba(232, 230, 237, 0.7);
    border-radius: 999px;
}

.hm-plans::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #8b7ad4, #6654c4);
    border-radius: 999px;
}

.hm-plan {
    position: relative;
    flex: 0 0 clamp(250px, 72vw, 292px);
    width: clamp(250px, 72vw, 292px);
    max-width: 292px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.45rem 1.25rem 1.3rem;
    border-radius: 1.45rem;
    background: var(--hm-card-soft);
    border: 1px solid rgba(196, 180, 234, 0.4);
    box-shadow: var(--hm-shadow-soft);
    backdrop-filter: blur(16px);
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.hm-plan__scan {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(167, 154, 232, 0.16) 48%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(167, 154, 232, 0.14) 52%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: 120% 0;
    opacity: 0;
}

.hm-section__inner.is-in .hm-plan {
    opacity: 1;
    transform: none;
}

.hm-section__inner.is-in .hm-plan .hm-plan__scan {
    opacity: 1;
    animation: hmPlanScan 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hm-section__inner.is-in .hm-plan:nth-child(1) { transition-delay: 0.04s; }
.hm-section__inner.is-in .hm-plan:nth-child(2) { transition-delay: 0.1s; }
.hm-section__inner.is-in .hm-plan:nth-child(3) { transition-delay: 0.16s; }
.hm-section__inner.is-in .hm-plan:nth-child(4) { transition-delay: 0.22s; }
.hm-section__inner.is-in .hm-plan:nth-child(5) { transition-delay: 0.28s; }
.hm-section__inner.is-in .hm-plan:nth-child(6) { transition-delay: 0.34s; }

.hm-section__inner.is-in .hm-plan:nth-child(1) .hm-plan__scan { animation-delay: 0.12s; }
.hm-section__inner.is-in .hm-plan:nth-child(2) .hm-plan__scan { animation-delay: 0.22s; }
.hm-section__inner.is-in .hm-plan:nth-child(3) .hm-plan__scan { animation-delay: 0.32s; }
.hm-section__inner.is-in .hm-plan:nth-child(4) .hm-plan__scan { animation-delay: 0.42s; }
.hm-section__inner.is-in .hm-plan:nth-child(5) .hm-plan__scan { animation-delay: 0.52s; }
.hm-section__inner.is-in .hm-plan:nth-child(6) .hm-plan__scan { animation-delay: 0.62s; }

@keyframes hmPlanScan {
    0% { background-position: 120% 0; opacity: 0; }
    18% { opacity: 1; }
    100% { background-position: -40% 0; opacity: 0; }
}

.hm-plan > *:not(.hm-plan__scan):not(.hm-plan__badge) {
    position: relative;
    z-index: 1;
}

.hm-plan:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 48px rgba(102, 84, 196, 0.16);
    border-color: rgba(102, 84, 196, 0.34);
}

.hm-section__inner.is-in .hm-plan:hover {
    transform: translateY(-6px);
}

.hm-plan.is-featured {
    border-color: rgba(102, 84, 196, 0.48);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(241, 237, 252, 0.95));
    box-shadow:
        0 26px 52px rgba(102, 84, 196, 0.18),
        0 0 0 1px rgba(102, 84, 196, 0.08);
}

.hm-section__inner.is-in .hm-plan.is-featured {
    transform: none;
}

.hm-section__inner.is-in .hm-plan.is-featured:hover {
    transform: translateY(-6px);
}

.hm-plan__badge {
    position: absolute;
    top: 0.9rem;
    inset-inline-end: 0.9rem;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--hm-brand-soft), var(--hm-brand-deep));
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(102, 84, 196, 0.3);
}

.hm-plan__icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--hm-brand);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 232, 250, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 12px 24px rgba(102, 84, 196, 0.12);
}

.hm-plan__icon-ring {
    position: absolute;
    inset: -5px;
    border-radius: 24px;
    border: 1.5px solid rgba(102, 84, 196, 0.18);
    opacity: 0.7;
    pointer-events: none;
    animation: hmPlanIconPulse 2.8s ease-in-out infinite;
}

.hm-section__inner.is-in .hm-plan:nth-child(1) .hm-plan__icon-ring { animation-delay: 0s; }
.hm-section__inner.is-in .hm-plan:nth-child(2) .hm-plan__icon-ring { animation-delay: 0.15s; }
.hm-section__inner.is-in .hm-plan:nth-child(3) .hm-plan__icon-ring { animation-delay: 0.3s; }
.hm-section__inner.is-in .hm-plan:nth-child(4) .hm-plan__icon-ring { animation-delay: 0.45s; }
.hm-section__inner.is-in .hm-plan:nth-child(5) .hm-plan__icon-ring { animation-delay: 0.6s; }

@keyframes hmPlanIconPulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.06); opacity: 0.9; }
}

.hm-plan__svg {
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 1;
}

.hm-plan--free .hm-plan__icon { color: #2f8f6b; background: linear-gradient(145deg, #fff, #e8f7f0); }
.hm-plan--free .hm-plan__icon-ring { border-color: rgba(47, 143, 107, 0.28); }
.hm-plan--basic .hm-plan__icon { color: #3b6fd4; background: linear-gradient(145deg, #fff, #eaf0fb); }
.hm-plan--basic .hm-plan__icon-ring { border-color: rgba(59, 111, 212, 0.28); }
.hm-plan--pro .hm-plan__icon { color: var(--hm-brand); }
.hm-plan--premium .hm-plan__icon { color: #b8860b; background: linear-gradient(145deg, #fff, #fbf4e4); }
.hm-plan--premium .hm-plan__icon-ring { border-color: rgba(184, 134, 11, 0.3); }
.hm-plan--ultimate .hm-plan__icon { color: #5b4db8; background: linear-gradient(145deg, #fff, #efeafc); }
.hm-plan--ultimate .hm-plan__icon-ring { border-color: rgba(91, 77, 184, 0.3); }

.hm-plan__head { display: grid; gap: 0.3rem; }

.hm-plan__name {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.hm-plan__tagline {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.hm-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.25rem;
    padding: 0.45rem 0 0.2rem;
    border-top: 1px solid rgba(196, 180, 234, 0.3);
}

.hm-plan__currency {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hm-brand-deep);
}

.hm-plan__amount {
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--hm-ink);
    line-height: 1;
}

.hm-plan__period {
    font-size: 0.86rem;
    color: var(--hm-muted);
    font-weight: 600;
}

.hm-plan__features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
    flex: 1;
}

.hm-plan__features li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    align-items: start;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #3a3648;
}

.hm-plan__check {
    margin-top: 0.1rem;
    color: #2f8f6b;
    display: inline-flex;
}

.hm-plan__cta {
    margin-top: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--hm-brand-deep);
    background: rgba(102, 84, 196, 0.08);
    border: 1px solid rgba(102, 84, 196, 0.18);
    padding: 0.82rem 1rem;
    border-radius: 13px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hm-plan__cta:hover {
    background: rgba(102, 84, 196, 0.14);
    transform: translateY(-1px);
}

.hm-plan__cta--featured {
    color: #fff;
    background: linear-gradient(135deg, var(--hm-brand-soft), var(--hm-brand-deep));
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(102, 84, 196, 0.3);
}

.hm-plan__cta--featured:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--hm-brand), var(--hm-brand-deep));
    box-shadow: 0 18px 34px rgba(102, 84, 196, 0.36);
}

.hm-plan-trust {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 1.25rem;
}

.hm-plan-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hm-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.hm-plan-trust__icon {
    display: inline-flex;
    color: #2f8f6b;
}

.hm-plan-trust__svg { width: 18px; height: 18px; }

.hm-pricing__note {
    margin: 0.25rem 0 0;
    text-align: center;
    color: var(--hm-muted);
    font-size: 0.84rem;
}

/* ——— Reveal motion ——— */
[data-hm-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-hm-reveal].is-in {
    opacity: 1;
    transform: none;
}

[data-hm-reveal-delay='1'] { transition-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hm-hero__aurora--a,
    .hm-hero__aurora--b,
    .hm-hero__aurora--c,
    .hm-hero__horizon,
    .hm-hero__breath,
    .hm-hero__orbit,
    .hm-hero__motes i,
    .hm-hero__sheen,
    .hm-hero__brand-wave,
    .hm-hero__brand-pose,
    .hm-hero__brand-pose-body,
    .hm-hero__brand-pose-flow,
    .hm-hero__brand-pose-core,
    .hm-hero__brand-letter,
    .hm-hero__brand-sheen,
    .hm-scan__ring--outer,
    .hm-scan__ring--mid,
    .hm-scan__beam,
    .hm-portrait__ring--outer,
    .hm-portrait__ring--mid,
    .hm-portrait__beam,
    .hm-product__glow,
    .hm-btn__shine,
    .hm-float__dot,
    .hm-meter__pulse,
    .hm-store__icon,
    .hm-store__shine,
    .hm-icon-card__mark,
    .hm-pay__mark,
    .hm-journey__pulse,
    .hm-journey__flow::after,
    .hm-journey__scan-beam,
    .hm-journey__status-dot,
    .hm-journey__node-ring,
    .hm-journey__status-text.is-swap,
    .hm-journey__scan-frame,
    .hm-journey__scan-corners i,
    .hm-journey__scan-ring,
    .hm-journey__scan-marks circle,
    .hm-journey__scan-live,
    .hm-food-card__ring,
    .hm-food-card__beam,
    .hm-food-card__greens path,
    .hm-food-card__bits,
    .hm-food-card__steam path,
    .hm-plan__scan,
    .hm-plan__icon-ring,
    .hm-product.is-live .hm-chip { animation: none !important; }
    [data-hm-reveal],
    .hm-points li,
    .hm-stores__item,
    .hm-plan,
    .hm-pay__brand,
    .hm-journey__step,
    .hm-icon-card,
    .hm-food__list li,
    .hm-food-card__chip,
    .hm-chip,
    .hm-stat,
    .hm-float {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }

    .hm-chip--secure,
    .hm-chip--ai,
    .hm-product.is-live .hm-chip--secure,
    .hm-product.is-live .hm-chip--ai {
        transform: translateX(-50%) !important;
    }
    .hm-btn:hover,
    .hm-store:hover,
    .hm-plan:hover,
    .hm-plan.is-featured,
    .hm-pay__brand:hover,
    .hm-journey__step:hover,
    .hm-icon-card:hover {
        transform: none !important;
    }
    .hm-nav__cta:hover { transform: none; }

    .hm-hero__brand-letter {
        opacity: 1 !important;
        transform: none !important;
        background-position: 40% 50%;
    }

    .hm-hero__brand-pose-body {
        stroke-dashoffset: 0 !important;
        opacity: 0.85;
    }

    .hm-hero__brand-pose-core {
        opacity: 0.55;
    }

    .hm-hero__brand-wave,
    .hm-hero__brand-pose {
        opacity: 0.35;
        transform: none !important;
    }
}

/* ——— Responsive ——— */
@media (max-width: 1024px) {
    .hm-section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 720px;
    }

    .hm-hero {
        content-visibility: visible;
    }
}

@media (max-width: 900px) {
    .hm-hero__motes,
    .hm-hero__sheen,
    .hm-hero__grain {
        display: none;
    }

    .hm-hero__aurora {
        filter: blur(28px);
        opacity: 0.7;
        animation-duration: 28s;
    }

    .hm-hero__orbit {
        opacity: 0.45;
    }

    .hm-btn__shine {
        animation: none;
    }
}

@media (max-width: 860px) {
    .hm-nav__links--desktop {
        display: none;
    }

    .hm-nav__mobile-actions {
        display: inline-flex;
    }

    .hm-brand__tag { display: none; }
}

@media (max-width: 720px) {
    :root {
        --hm-nav-h: 60px;
        --hm-dock-h: 0px;
    }

    .hm-hero {
        min-height: calc(100svh - var(--hm-nav-h) - var(--hm-safe-top));
        min-height: calc(100dvh - var(--hm-nav-h) - var(--hm-safe-top));
    }

    .hm-hero__stage {
        padding-top: 1.35rem;
        padding-bottom: 1.75rem;
        gap: 1.45rem;
        padding-inline: max(1rem, var(--hm-safe-left)) max(1rem, var(--hm-safe-right));
    }

    .hm-hero__brand-mark {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .hm-hero__brand-aura {
        inset: -22% -10% -28% -6%;
    }

    .hm-hero__brand-pose {
        width: 2.35rem;
        opacity: 0.3;
        animation-duration: 8s;
    }

    .hm-hero__brand-wave--c {
        display: none;
    }

    .hm-hero__brand-letter {
        animation-duration: 0.75s, 10s;
    }

    .hm-hero__brand-sheen {
        animation-duration: 5.6s;
    }

    .hm-hero__brand-mark {
        animation-duration: 6.8s;
    }

    .hm-hero__title {
        max-width: none;
        font-size: clamp(1.28rem, 5.4vw, 1.7rem);
    }

    .hm-hero__support {
        margin-bottom: 1.25rem;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .hm-hero__actions {
        display: grid;
        width: 100%;
        gap: 0.7rem;
    }

    .hm-hero__actions .hm-btn {
        width: 100%;
        min-height: 52px;
        border-radius: 16px;
        font-size: 0.95rem;
    }

    .hm-hero__actions .hm-btn--ghost {
        background: var(--hm-card-glass);
        border-color: rgba(102, 84, 196, 0.18);
        box-shadow: var(--hm-shadow-soft);
        color: var(--hm-brand-deep);
        font-weight: 700;
    }

    .hm-hero__visual {
        min-height: 0;
        width: min(100%, 360px);
        margin-inline: auto;
        overflow: visible;
    }

    .hm-product {
        width: 100%;
        gap: 0.75rem;
        place-items: stretch;
    }

    .hm-product__frame {
        width: min(100%, 280px);
        aspect-ratio: 4 / 5;
    }

    .hm-product__glow {
        inset: 10%;
        opacity: 0.55;
        filter: blur(14px);
    }

    .hm-portrait {
        width: min(88%, 236px);
        border-radius: 1.35rem;
    }

    .hm-portrait__ring--outer,
    .hm-portrait__ring--mid {
        opacity: 0.55;
    }

    .hm-chip {
        padding: 0.38rem 0.7rem 0.38rem 0.38rem;
    }

    .hm-chip__icon {
        width: 24px;
        height: 24px;
    }

    .hm-chip__label {
        font-size: 0.72rem;
    }

    .hm-chip--secure { top: 3.8%; }
    .hm-chip--ai { bottom: 4.2%; }

    .hm-product.is-live .hm-chip--secure,
    .hm-product.is-live .hm-chip--ai {
        animation: none;
    }

    .hm-product__stats {
        gap: 0.5rem;
    }

    .hm-stat {
        min-height: 6.1rem;
        padding: 0.75rem 0.35rem 0.7rem;
        border-radius: 1rem;
        gap: 0.35rem;
    }

    .hm-stat__icon {
        width: 30px;
        height: 30px;
    }

    .hm-stat__value {
        font-size: 1.05rem;
    }

    .hm-stat__label {
        font-size: 0.66rem;
        max-width: 10ch;
    }

    .hm-section {
        padding: 2.75rem max(1rem, var(--hm-safe-left)) 2.75rem max(1rem, var(--hm-safe-right));
    }

    .hm-section__title {
        max-width: none;
        font-size: clamp(1.35rem, 5.8vw, 1.75rem);
    }

    .hm-section__support {
        max-width: none;
        font-size: 0.98rem;
    }

    .hm-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .hm-gallery__item { border-radius: 1rem; }

    .hm-stores { grid-template-columns: 1fr; }

    .hm-journey__rail {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        grid-template-columns: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.75rem;
        padding: 0.55rem 0.15rem 0.35rem;
        margin: 0;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.5rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hm-journey__rail::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .hm-journey__step {
        flex: 0 0 min(82vw, 300px);
        width: min(82vw, 300px);
        max-width: min(82vw, 300px);
        min-height: 0;
        scroll-snap-align: center;
        align-content: start;
    }

    .hm-journey__step.is-active {
        transform: none;
    }

    .hm-journey__status-text {
        white-space: normal;
    }

    .hm-plans-slider__hint {
        font-size: 0.8rem;
    }

    .hm-plans-slider__nav {
        display: none;
    }

    .hm-plans {
        gap: 0.75rem;
        padding: 0.35rem 4vw 0.55rem;
        scroll-padding-inline: 4vw;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: default;
    }

    .hm-plans::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .hm-plans:not(.is-dragging) {
        cursor: default;
    }

    .hm-plan {
        flex: 0 0 min(86vw, 320px);
        width: min(86vw, 320px);
        max-width: min(86vw, 320px);
        min-height: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: none;
        opacity: 1;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: none;
        box-shadow: 0 12px 28px rgba(90, 80, 140, 0.08);
    }

    .hm-section__inner.is-in .hm-plan,
    .hm-section__inner.is-in .hm-plan:hover,
    .hm-section__inner.is-in .hm-plan.is-featured,
    .hm-section__inner.is-in .hm-plan.is-featured:hover {
        transform: none;
        box-shadow: 0 12px 28px rgba(90, 80, 140, 0.08);
    }

    .hm-plan__icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .hm-plan__svg { width: 28px; height: 28px; }

    .hm-plan__icon-ring {
        animation: none;
    }

    .hm-plan__scan {
        display: none;
    }

    .hm-plans-slider.is-scrollable .hm-plans-slider__viewport::before,
    .hm-plans-slider.is-scrollable .hm-plans-slider__viewport::after {
        width: 1.5rem;
        bottom: 0.35rem;
    }

    .hm-plan-trust {
        gap: 0.55rem 0.9rem;
    }

    .hm-cta {
        padding: 1.35rem max(1rem, var(--hm-safe-left)) 1.75rem max(1rem, var(--hm-safe-right));
    }

    .hm-cta__inner { padding: 1.85rem 1.1rem; }

    .hm-pay,
    .hm-footer {
        padding-inline: max(1rem, var(--hm-safe-left)) max(1rem, var(--hm-safe-right));
    }

    .hm-faq__item summary {
        min-height: 48px;
        padding: 0.9rem 0.95rem;
        gap: 0.65rem;
    }

    .hm-faq__index {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.68rem;
        border-radius: 0.6rem;
    }

    .hm-faq__question {
        font-size: 0.92rem;
    }

    .hm-faq__toggle {
        width: 1.75rem;
        height: 1.75rem;
    }

    .hm-faq__body {
        padding: 0 0.95rem 1rem 0.95rem;
    }

    .hm-faq__body p {
        padding: 0.8rem 0.85rem;
        font-size: 0.9rem;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .hm-hero__stage {
        gap: 2rem;
        padding-top: 2.25rem;
        padding-bottom: 2.75rem;
    }

    .hm-product { width: min(100%, 340px); }

    .hm-journey__rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hm-section { padding: 3.4rem 1.35rem; }

    .hm-stores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .hm-hero__stage {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2.5rem;
        padding-top: 3.25rem;
        padding-bottom: 4.25rem;
    }

    .hm-hero__visual { justify-content: end; }

    .hm-section__inner--split {
        grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
        gap: 3rem;
    }

    .hm-footer__inner {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .hm-footer__note {
        justify-self: center;
        text-align: center;
    }
}

html[dir='rtl'] .hm-hero__aurora--a {
    right: auto;
    left: -16%;
}

html[dir='rtl'] .hm-hero__aurora--b {
    left: auto;
    right: -18%;
}

html[dir='rtl'] .hm-hero__breath,
html[dir='rtl'] .hm-hero__orbit {
    left: 38%;
}

@media (min-width: 900px) {
    html[dir='rtl'] .hm-hero__visual { justify-content: start; }
}

@media (min-width: 1100px) {
    .hm-nav__inner,
    .hm-hero__stage,
    .hm-section__inner,
    .hm-footer__inner,
    .hm-cta__shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hm-cta__shell { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-data: reduce) {
    .hm-hero__atmosphere > *:not(.hm-hero__wash) { display: none; }
}

/* ——— System dark mode — mirrors Flutter AppPalette.dark ——— */
@media (prefers-color-scheme: dark) {
    html {
        scrollbar-color: rgba(139, 124, 232, 0.55) rgba(35, 34, 42, 0.9);
        background-color: var(--hm-paper-top);
    }

    html::-webkit-scrollbar-track {
        background: linear-gradient(180deg, #1a1920 0%, #141318 50%, #1a1920 100%);
        border-left-color: rgba(80, 72, 110, 0.35);
    }

    html::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #a395ee 0%, #8b7ce8 55%, #6e5fc4 100%);
    }
}

@media (prefers-color-scheme: dark) {
    .hm-brand__name { color: var(--hm-ink); }
    .hm-brand__tag { color: var(--hm-muted); }
    .hm-nav__link,
    .hm-nav__signin { color: var(--hm-muted); }
    .hm-nav__link:hover,
    .hm-nav__signin:hover { color: var(--hm-brand); }

    .hm-nav__burger {
        border-color: rgba(139, 124, 232, 0.28);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }

    .hm-nav__sheet-panel {
        box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
        border-inline-start: 1px solid var(--hm-line);
    }

    .hm-product__frame {
        background: linear-gradient(165deg, rgba(38, 37, 46, 0.98), rgba(30, 29, 38, 0.94));
        box-shadow:
            0 28px 56px rgba(0, 0, 0, 0.4),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .hm-portrait {
        background: #23222a;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    }

    .hm-faq__item {
        background: var(--hm-card-soft);
        border-color: rgba(139, 124, 232, 0.24);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    }

    .hm-faq__item[open] {
        background: linear-gradient(165deg, rgba(42, 40, 54, 0.98), rgba(32, 30, 42, 0.95));
        border-color: rgba(139, 124, 232, 0.4);
        box-shadow:
            0 16px 36px rgba(0, 0, 0, 0.3),
            inset 3px 0 0 var(--hm-brand);
    }

    .hm-faq__body p {
        background: rgba(26, 25, 32, 0.72);
        border-color: rgba(139, 124, 232, 0.16);
        color: var(--hm-muted);
    }

    .hm-faq__index {
        background: var(--hm-icon-well);
        color: var(--hm-brand-soft);
    }

    .hm-faq__item[open] .hm-faq__index {
        color: #fff;
        background: linear-gradient(145deg, #a395ee, #6e5fc4);
    }

    .hm-plan.is-featured {
        border-color: rgba(139, 124, 232, 0.5);
        box-shadow: 0 22px 48px rgba(90, 70, 180, 0.22);
        background: linear-gradient(165deg, rgba(42, 40, 58, 0.98), rgba(32, 30, 44, 0.94));
    }

    .hm-plan__name,
    .hm-plan__amount,
    .hm-plan__currency { color: var(--hm-ink); }

    .hm-plan__tagline,
    .hm-plan__period,
    .hm-plan__features li { color: var(--hm-muted); }

    .hm-plan__cta {
        background: rgba(46, 44, 58, 0.95);
        color: var(--hm-ink);
        border-color: rgba(139, 124, 232, 0.28);
    }

    .hm-plan__cta--featured,
    .hm-plan__cta.hm-plan__cta--featured {
        background: linear-gradient(135deg, var(--hm-brand-soft), var(--hm-brand-deep));
        color: #fff;
        border-color: transparent;
    }

    .hm-plan__icon {
        background: var(--hm-icon-well);
    }

    .hm-food-card__plate {
        background:
            radial-gradient(circle at 38% 30%, rgba(55, 60, 58, 0.95) 0%, transparent 40%),
            radial-gradient(circle at 60% 70%, rgba(74, 168, 130, 0.12) 0%, transparent 48%),
            linear-gradient(165deg, #2a2f2c 0%, #23222a 48%, #1a1920 100%);
        box-shadow:
            0 0 0 1px rgba(74, 168, 130, 0.18),
            0 0 0 10px rgba(38, 37, 46, 0.65),
            0 22px 48px rgba(0, 0, 0, 0.35);
    }

    .hm-food-card__chip,
    .hm-journey__status,
    .hm-journey__scan {
        background:
            radial-gradient(circle at 38% 28%, rgba(55, 52, 68, 0.9) 0%, transparent 42%),
            radial-gradient(circle at 62% 70%, rgba(196, 140, 180, 0.12) 0%, transparent 48%),
            linear-gradient(165deg, #23222a 0%, #1c1b22 48%, #18171e 100%);
        box-shadow:
            0 0 0 1px rgba(139, 124, 232, 0.22),
            0 22px 48px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .hm-journey__scan-frame {
        background: radial-gradient(circle at 50% 42%, rgba(139, 124, 232, 0.12), transparent 68%);
        border-color: rgba(139, 124, 232, 0.24);
        color: var(--hm-ink);
    }

    .hm-journey__scan-label {
        background: rgba(35, 34, 42, 0.92);
        border-color: rgba(139, 124, 232, 0.28);
        color: var(--hm-ink);
    }

    .hm-journey__scan-head {
        fill: url(#hmScanSkin);
    }

    .hm-store__icon {
        background: var(--hm-icon-well);
    }

    .hm-store--apple .hm-store__action { color: #d0d0d4; }

    .hm-hero__brand-letter {
        background: linear-gradient(
            120deg,
            #f3eef6 0%,
            #d4849a 22%,
            #c45b8a 38%,
            #d9a0c0 50%,
            #b07cc6 64%,
            #e8b4a0 78%,
            #f3eef6 100%
        );
        background-size: 240% 100%;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .hm-hero__brand-wave {
        border-color: rgba(214, 140, 168, 0.22);
        background: radial-gradient(circle at 50% 45%, rgba(196, 110, 150, 0.16), transparent 62%);
    }

    .hm-section__title,
    .hm-hero__title,
    .hm-cta__title,
    .hm-steps__title,
    .hm-icon-card__title,
    .hm-stat__value { color: var(--hm-ink); }

    .hm-section__support,
    .hm-hero__support,
    .hm-pricing__note,
    .hm-plans-slider__hint,
    .hm-cta__support,
    .hm-chip__label,
    .hm-stat__label { color: var(--hm-muted); }

    .hm-hero__actions .hm-btn--ghost {
        background: var(--hm-card-glass);
        border-color: rgba(139, 124, 232, 0.28);
        color: var(--hm-ink);
    }

    .hm-gallery__item {
        background: var(--hm-card);
        border-color: var(--hm-line);
    }

    .hm-plan-trust li { color: var(--hm-muted); }
}

/* Same surface fixes when boot script marks dark (keeps sync with OS) */
html[data-hm-theme="dark"] .hm-product__frame {
    background: linear-gradient(165deg, rgba(38, 37, 46, 0.98), rgba(30, 29, 38, 0.94));
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

html[data-hm-theme="dark"] .hm-faq__item {
    background: var(--hm-card-soft);
    border-color: rgba(139, 124, 232, 0.24);
}

html[data-hm-theme="dark"] .hm-plan__cta:not(.hm-plan__cta--featured) {
    background: rgba(46, 44, 58, 0.95);
    color: var(--hm-ink);
}

html[data-hm-theme="dark"] .hm-food-card__plate {
    background:
        radial-gradient(circle at 38% 30%, rgba(55, 60, 58, 0.95) 0%, transparent 40%),
        radial-gradient(circle at 60% 70%, rgba(74, 168, 130, 0.12) 0%, transparent 48%),
        linear-gradient(165deg, #2a2f2c 0%, #23222a 48%, #1a1920 100%);
    box-shadow:
        0 0 0 1px rgba(74, 168, 130, 0.18),
        0 0 0 10px rgba(38, 37, 46, 0.65),
        0 22px 48px rgba(0, 0, 0, 0.35);
}

html[data-hm-theme="dark"] .hm-hero__actions .hm-btn--ghost {
    background: var(--hm-card-glass);
    border-color: rgba(139, 124, 232, 0.28);
    color: var(--hm-ink);
}