/* ============================================================
   HARVARD MILL LLC - site stylesheet
   Palette sampled from the Krelvath Paint Catch artwork:
   deep purple #6d28d9, violet #8b5cf6, lavender #ecebfc,
   cyan #06b6d4, pink #ec4899, gold #f59e0b, ink #241b3a
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --hm-purple: #6d28d9;
    --hm-violet: #8b5cf6;
    --hm-cyan: #06b6d4;
    --hm-pink: #ec4899;
    --hm-gold: #f59e0b;
    --hm-ink: #241b3a;
    --hm-ink-soft: #5b5470;
    --hm-lav: #ecebfc;
    --hm-lav-deep: #dcd9f8;
    --hm-card: #ffffff;
    --hm-line: #e4e1f5;
    --hm-radius: 18px;
    --hm-shadow: 0 10px 30px rgba(76, 42, 165, .10);
    --hm-grad: linear-gradient(120deg, #06b6d4 0%, #6d28d9 55%, #ec4899 100%);
    --hm-grad-shop: linear-gradient(120deg, #f59e0b 0%, #ec4899 100%);
    --hm-font: 'Nunito', 'Segoe UI', Arial, sans-serif;
    --hm-display: 'Baloo 2', 'Nunito', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--hm-font);
    color: var(--hm-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(139, 92, 246, .12), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(6, 182, 212, .10), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(236, 72, 153, .08), transparent 40%),
        var(--hm-lav);
    line-height: 1.65;
    min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: var(--hm-purple); text-decoration: none; }
a:hover { color: var(--hm-pink); }

.hm-site { display: flex; flex-direction: column; min-height: 100vh; }
.hm-main { flex: 1; }
.hm-wrap { width: min(1140px, 92%); margin: 0 auto; }

.hm-ico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex: none; }

/* ---------------- header: floating pill, menu on the right ---------------- */

.hm-topbar {
    position: sticky;
    top: 14px;
    z-index: 60;
    margin-top: 14px;
}
.hm-topbar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--hm-line);
    border-radius: 999px;
    padding: 10px 14px 10px 20px;
    box-shadow: var(--hm-shadow);
}

.hm-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--hm-ink); }
.hm-brand:hover { color: var(--hm-ink); }
.hm-brand-logo { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(109, 40, 217, .25)); }
.hm-brand-words { display: flex; flex-direction: column; line-height: 1.15; }
.hm-brand-words strong { font-family: var(--hm-display); font-size: 17px; letter-spacing: .4px; }
.hm-brand-words small { color: var(--hm-ink-soft); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.hm-brand.small .hm-brand-logo { width: 38px; height: 38px; }

/* nav pushed to the right edge */
.hm-nav { margin-left: auto; }
.hm-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.hm-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--hm-ink-soft);
    font-weight: 700;
    font-size: 14.5px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hm-nav-link:hover { background: var(--hm-lav); color: var(--hm-purple); transform: translateY(-1px); }
.hm-nav-link.is-active { background: var(--hm-lav-deep); color: var(--hm-purple); }

/* the shop entry is deliberately loud */
.hm-nav-shop {
    background: var(--hm-grad-shop);
    color: #fff !important;
    padding: 10px 20px;
    box-shadow: 0 6px 16px rgba(236, 72, 153, .38);
    position: relative;
}
.hm-nav-shop:hover { transform: translateY(-2px) scale(1.03); background: var(--hm-grad-shop); }
.hm-nav-shop::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 2px solid rgba(236, 72, 153, .45);
    animation: hmPulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes hmPulse {
    0%   { transform: scale(.96); opacity: .9; }
    70%  { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}

/* the shop entry keeps its loud gradient look on every page,
   including the shop page itself (beat the .is-active override) */
.hm-nav-link.is-active.hm-nav-shop {
    background: var(--hm-grad-shop);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(236, 72, 153, .38);
}

.hm-burger {
    display: none;
    border: 0;
    background: var(--hm-lav);
    color: var(--hm-purple);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.hm-burger .hm-ico { width: 22px; height: 22px; }

/* ---------------- generic section furniture ---------------- */

.hm-section { padding: 64px 0; }
.hm-section.tight { padding: 44px 0; }

.hm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--hm-purple);
    margin-bottom: 12px;
}
.hm-kicker::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--hm-grad);
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(6, 182, 212, .35);
}
.hm-kicker.light { color: #fff; }
.hm-kicker.light::before { background: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.35); }

.hm-h1, .hm-h2 {
    font-family: var(--hm-display);
    line-height: 1.15;
    color: var(--hm-ink);
}
.hm-h1 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 18px; }
.hm-h2 { font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 14px; }
.hm-h1 .hm-grad-text, .hm-h2 .hm-grad-text {
    background: var(--hm-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hm-lead { font-size: 17px; color: var(--hm-ink-soft); max-width: 62ch; }
.hm-lead.center, .hm-center { text-align: center; }
.hm-center .hm-lead { margin-left: auto; margin-right: auto; }

/* ---------------- buttons ---------------- */

.hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hm-btn.solid {
    background: var(--hm-grad);
    color: #fff;
    box-shadow: 0 8px 20px rgba(109, 40, 217, .35);
}
.hm-btn.solid:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 12px 26px rgba(109, 40, 217, .45); }
.hm-btn.ghost {
    background: #fff;
    color: var(--hm-purple);
    border: 2px solid var(--hm-lav-deep);
}
.hm-btn.ghost:hover { border-color: var(--hm-violet); transform: translateY(-2px); }
.hm-btn.gold {
    background: var(--hm-grad-shop);
    color: #fff;
    box-shadow: 0 8px 20px rgba(245, 158, 11, .4);
}
.hm-btn.gold:hover { transform: translateY(-2px); color: #fff; }
.hm-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* image buttons (startgame / googleplay artwork) */
.hm-imgbtn { display: inline-block; transition: transform .2s ease, filter .2s ease; }
.hm-imgbtn img { height: 62px; width: auto; }
.hm-imgbtn:hover { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 10px 18px rgba(36, 27, 58, .25)); }

/* ---------------- cards & grids ---------------- */

.hm-cards { display: grid; gap: 22px; }
.hm-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.hm-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hm-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }

.hm-card {
    background: var(--hm-card);
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    padding: 26px;
    box-shadow: var(--hm-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hm-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(76, 42, 165, .16); }
.hm-card h3 { font-family: var(--hm-display); font-size: 20px; margin-bottom: 8px; }
.hm-card p { color: var(--hm-ink-soft); font-size: 15px; }

.hm-tile-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hm-grad);
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 8px 16px rgba(109, 40, 217, .3);
}
.hm-tile-ico .hm-ico { width: 26px; height: 26px; }
.hm-tile-ico.cyan { background: linear-gradient(135deg, #06b6d4, #22d3ee); box-shadow: 0 8px 16px rgba(6,182,212,.3); }
.hm-tile-ico.pink { background: linear-gradient(135deg, #ec4899, #f472b6); box-shadow: 0 8px 16px rgba(236,72,153,.3); }
.hm-tile-ico.gold { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 8px 16px rgba(245,158,11,.3); }

.hm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.hm-chip.dark {
    background: var(--hm-lav);
    border-color: var(--hm-line);
    color: var(--hm-purple);
}

/* ---------------- split layouts ---------------- */

.hm-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hm-split.flip { grid-template-columns: .95fr 1.05fr; }

.hm-frame-img {
    border-radius: var(--hm-radius);
    border: 6px solid #fff;
    box-shadow: var(--hm-shadow);
}
.hm-frame-img.small { max-width: 340px; margin: 0 auto; }

/* pixel-dot decoration */
.hm-pixelbox { position: relative; }
.hm-pixelbox::before,
.hm-pixelbox::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    z-index: 1;
}
.hm-pixelbox::before { background: var(--hm-cyan); top: -10px; right: 24px; box-shadow: 22px -14px 0 var(--hm-pink), -18px 12px 0 var(--hm-gold); }
.hm-pixelbox::after { background: var(--hm-violet); bottom: -8px; left: 30px; box-shadow: 20px 12px 0 var(--hm-cyan), -16px -12px 0 var(--hm-pink); }

/* ---------------- home spotlight (top fold) ---------------- */

.hm-spotlight { padding: 70px 0 54px; position: relative; overflow: hidden; }
.hm-spotlight-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hm-spotlight-art { position: relative; }
.hm-spotlight-art img { border-radius: 26px; border: 8px solid #fff; box-shadow: 0 24px 60px rgba(76, 42, 165, .25); }
.hm-spotlight-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 14px; }
.hm-note { font-size: 13.5px; color: var(--hm-ink-soft); display: flex; align-items: center; gap: 8px; }
.hm-note .hm-ico { color: var(--hm-cyan); }

/* screenshot strip */
.hm-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-shots img {
    border-radius: 14px;
    border: 4px solid #fff;
    box-shadow: var(--hm-shadow);
    transition: transform .25s ease;
}
.hm-shots img:hover { transform: scale(1.04) rotate(-1deg); }
.hm-shots.five { grid-template-columns: repeat(5, 1fr); }

/* steps (game page) */
.hm-steps { counter-reset: hmStep; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hm-step {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    padding: 26px;
    position: relative;
    box-shadow: var(--hm-shadow);
}
.hm-step::before {
    counter-increment: hmStep;
    content: counter(hmStep);
    position: absolute;
    top: -16px;
    left: 22px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--hm-grad);
    color: #fff;
    font-family: var(--hm-display);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(109, 40, 217, .35);
}
.hm-step h3 { font-family: var(--hm-display); margin: 10px 0 8px; font-size: 19px; }
.hm-step p { color: var(--hm-ink-soft); font-size: 14.5px; }

/* vision / mission banners */
.hm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hm-duo-card {
    border-radius: var(--hm-radius);
    padding: 30px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--hm-shadow);
}
.hm-duo-card.v1 { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.hm-duo-card.v2 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.hm-duo-card h3 { font-family: var(--hm-display); font-size: 22px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.hm-duo-card p { color: rgba(255, 255, 255, .92); font-size: 15px; }
.hm-duo-card::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .12);
    transform: rotate(18deg);
}

/* ---------------- contact ---------------- */

.hm-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hm-contact-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    padding: 22px;
    box-shadow: var(--hm-shadow);
    transition: transform .2s ease;
}
.hm-contact-card:hover { transform: translateY(-4px); }
.hm-contact-card h3 { font-family: var(--hm-display); font-size: 17px; margin-bottom: 4px; }
.hm-contact-card p, .hm-contact-card a { color: var(--hm-ink-soft); font-size: 15px; word-break: break-word; }
.hm-contact-card a:hover { color: var(--hm-pink); }

/* ---------------- shop ---------------- */

.hm-shop-layout { display: grid; grid-template-columns: 1.25fr .95fr; gap: 34px; align-items: start; }

.hm-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-height: 540px;
    overflow-y: scroll;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background: rgba(255, 255, 255, .55);
    scrollbar-width: thin;
    scrollbar-color: var(--hm-violet) var(--hm-lav);
}
.hm-pack-grid::-webkit-scrollbar { width: 8px; }
.hm-pack-grid::-webkit-scrollbar-track { background: var(--hm-lav); border-radius: 8px; }
.hm-pack-grid::-webkit-scrollbar-thumb { background: var(--hm-violet); border-radius: 8px; }
.hm-pack-grid::-webkit-scrollbar-thumb:hover { background: var(--hm-purple); }
.hm-pack {
    background: #fff;
    border: 2px solid var(--hm-line);
    border-radius: 16px;
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    position: relative;
}
.hm-pack:hover { transform: translateY(-3px); border-color: var(--hm-violet); }
.hm-pack.is-picked {
    border-color: var(--hm-purple);
    box-shadow: 0 0 0 4px rgba(109, 40, 217, .15), var(--hm-shadow);
    transform: translateY(-3px);
}
.hm-pack.is-picked::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hm-purple) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12.5 5 5L20 6.5"/></svg>') center/13px no-repeat;
}
.hm-pack img { width: 54px; height: 54px; object-fit: contain; margin: 0 auto 10px; }
.hm-pack-title { font-family: var(--hm-display); font-size: 16.5px; color: var(--hm-ink); }
.hm-pack-price { color: var(--hm-purple); font-weight: 800; font-size: 15px; margin-top: 2px; }

.hm-panel {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--hm-shadow);
    position: sticky;
    top: 96px;
}
.hm-panel h3 { font-family: var(--hm-display); font-size: 21px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }

.hm-field { margin-bottom: 16px; }
.hm-field label { display: block; font-weight: 800; font-size: 13.5px; margin-bottom: 6px; color: var(--hm-ink); }
.hm-field input[type="text"],
.hm-field input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--hm-line);
    border-radius: 12px;
    font-family: var(--hm-font);
    font-size: 15px;
    color: var(--hm-ink);
    background: #fbfaff;
    transition: border-color .2s ease, background .2s ease;
}
.hm-field input:focus { outline: none; border-color: var(--hm-violet); background: #fff; }
.hm-field input.is-bad { border-color: #ef4444; background: #fef2f2; }
.hm-field input[readonly] { background: var(--hm-lav); color: var(--hm-ink-soft); cursor: default; }
.hm-err { display: none; color: #dc2626; font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.hm-err.show { display: block; }

.hm-pays { display: grid; gap: 10px; }
.hm-pay {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--hm-line);
    border-radius: 12px;
    padding: 11px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14.5px;
    transition: border-color .2s ease, background .2s ease;
}
.hm-pay:hover { border-color: var(--hm-violet); }
.hm-pay.is-picked { border-color: var(--hm-purple); background: #f6f2ff; }
.hm-pay.is-off { opacity: .5; cursor: not-allowed; border-style: dashed; }
.hm-pay.is-off:hover { border-color: var(--hm-line); }
.hm-pay input { accent-color: var(--hm-purple); }
.hm-pay .hm-ico { color: var(--hm-purple); width: 20px; height: 20px; }
.hm-pay-tag { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--hm-ink-soft); text-transform: uppercase; }

.hm-curs { display: flex; gap: 10px; flex-wrap: wrap; }
.hm-cur {
    border: 2px solid var(--hm-line);
    background: #fbfaff;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    color: var(--hm-ink-soft);
    transition: all .2s ease;
}
.hm-cur.is-picked { background: var(--hm-purple); border-color: var(--hm-purple); color: #fff; }

.hm-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--hm-ink-soft); }
.hm-agree input { margin-top: 3px; accent-color: var(--hm-purple); }

.hm-order-sum {
    background: var(--hm-lav);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.hm-order-sum .sum-title { font-weight: 800; font-family: var(--hm-display); }
.hm-order-sum .sum-price { color: var(--hm-purple); font-weight: 900; font-size: 19px; }

.hm-alert {
    display: none;
    border-radius: 12px;
    padding: 13px 16px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
}
.hm-alert.show { display: flex; gap: 10px; align-items: flex-start; }
.hm-alert.bad { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.hm-alert.good { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.hm-skel {
    border-radius: 16px;
    min-height: 120px;
    background: linear-gradient(100deg, #efedfb 40%, #f8f7ff 50%, #efedfb 60%);
    background-size: 200% 100%;
    animation: hmSkel 1.4s infinite linear;
}
@keyframes hmSkel { to { background-position: -200% 0; } }

/* honeypot - must stay invisible to humans */
.hm-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------------- confirm / result pages ---------------- */

.hm-result { max-width: 720px; margin: 0 auto; }
.hm-result-card {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    box-shadow: var(--hm-shadow);
    padding: 40px;
    text-align: center;
}
.hm-result-ico {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.hm-result-ico .hm-ico { width: 42px; height: 42px; }
.hm-result-ico.ok { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 14px 30px rgba(16, 185, 129, .35); }
.hm-result-ico.wait { background: var(--hm-grad); box-shadow: 0 14px 30px rgba(109, 40, 217, .35); }
.hm-result-ico.bad { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 14px 30px rgba(239, 68, 68, .35); }

.hm-detail { text-align: left; margin: 24px 0; border: 1px solid var(--hm-line); border-radius: 16px; overflow: hidden; }
.hm-detail-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 18px; font-size: 14.5px; }
.hm-detail-row:nth-child(odd) { background: #fbfaff; }
.hm-detail-row dt { color: var(--hm-ink-soft); font-weight: 700; }
.hm-detail-row dd { font-weight: 800; color: var(--hm-ink); word-break: break-all; text-align: right; }

.hm-count { font-weight: 900; color: var(--hm-purple); }

/* ---------------- pre-footer band (per-page variants) ---------------- */

.hm-band { padding: 46px 0; color: #fff; }
.hm-band h2 { font-family: var(--hm-display); font-size: clamp(22px, 3vw, 32px); margin-bottom: 8px; }
.hm-band p { color: rgba(255, 255, 255, .9); }
.hm-band-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.hm-band-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hm-band-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hm-band-badges { display: flex; gap: 12px; flex-wrap: wrap; }

.hm-band-play { background: linear-gradient(120deg, #5b21b6, #7c3aed 55%, #a855f7); }
.hm-band-play.alt { background: linear-gradient(120deg, #0e7490, #06b6d4 60%, #67e8f9); }
.hm-band-culture { background: linear-gradient(120deg, #be185d, #ec4899 60%, #f472b6); }
.hm-band-contact { background: linear-gradient(120deg, #1e3a8a, #3b82f6 60%, #60a5fa); }
.hm-band-secure { background: linear-gradient(120deg, #92400e, #f59e0b 60%, #fbbf24); }
.hm-band-secure h2 .hm-ico { vertical-align: -0.1em; }

/* ---------------- footer ---------------- */

.hm-footer { background: #1c1333; color: #cfc9e8; margin-top: 0; }
.hm-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 34px;
    padding: 54px 0 34px;
}
.hm-footer .hm-brand-words strong { color: #fff; }
.hm-footer-brand p { font-size: 14px; color: #a79fc7; margin-top: 14px; max-width: 34ch; }
.hm-footer-col h4 {
    color: #fff;
    font-family: var(--hm-display);
    font-size: 15px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hm-footer-col ul { list-style: none; display: grid; gap: 9px; }
.hm-footer-col a, .hm-footer-plain {
    color: #cfc9e8;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hm-footer-col a:hover { color: #f0abfc; }
.hm-footer-col .hm-ico { color: #8b5cf6; }
.hm-footer-base { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; }
.hm-footer-base-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #a79fc7; }

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
    .hm-split, .hm-split.flip, .hm-spotlight-grid, .hm-shop-layout { grid-template-columns: 1fr; }
    .hm-cards.cols-3, .hm-cards.cols-4, .hm-steps { grid-template-columns: repeat(2, 1fr); }
    .hm-shots, .hm-shots.five { grid-template-columns: repeat(2, 1fr); }
    .hm-footer-grid { grid-template-columns: 1fr 1fr; }
    .hm-panel { position: static; }
    .hm-spotlight-art { order: -1; }
}

@media (max-width: 760px) {
    .hm-burger { display: inline-flex; margin-left: auto; }
    .hm-nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 4%;
        right: 4%;
        background: #fff;
        border: 1px solid var(--hm-line);
        border-radius: 20px;
        box-shadow: var(--hm-shadow);
        padding: 14px;
        display: none;
    }
    .hm-nav.open { display: block; }
    .hm-nav ul { flex-direction: column; align-items: stretch; gap: 6px; }
    .hm-nav-link { width: 100%; }
    .hm-nav-shop { justify-content: center; }
    .hm-topbar-row { position: relative; }
    .hm-brand-words small { display: none; }
    .hm-cards.cols-2, .hm-cards.cols-3, .hm-cards.cols-4, .hm-steps, .hm-duo, .hm-contact-grid, .hm-pack-grid { grid-template-columns: 1fr; }
    .hm-section { padding: 46px 0; }
    .hm-band-row { flex-direction: column; align-items: flex-start; }
    .hm-result-card { padding: 28px 20px; }
}