/* =========================================================
   NAYBRZ DXB — Marketing Site
   Redesigned with a redis.agency-inspired aesthetic:
   high-contrast cream/black, oversized Fraunces serif display,
   pill buttons, rounded image cards, generous whitespace.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
    /* Palette — aligned with the NAYBRZ DXB app (dashboard_view.dart / app_colors.dart):
       Brand brown #2F0E0B, cream/dialog #E9DCCA + #FFE4C3,
       Gold gradient #C9A063 → #A67B3F → #7C5A2E, accent gold #D8BE9B,
       Live/verified green #34C759. */
    --cream: #F2EBDC;
    --cream-2: #E9DCCA;
    --cream-3: #FFE4C3;
    --ink: #2F0E0B;
    --ink-2: #3A1410;
    --ink-soft: #5A352B;
    --muted: #7A5B4E;
    --line: rgba(47, 14, 11, 0.10);
    --line-strong: rgba(47, 14, 11, 0.22);

    /* Accents — only the dashboard gold spectrum + status green */
    --gold: #C9A063;
    --gold-2: #A67B3F;
    --gold-3: #D8BE9B;
    --gold-deep: #7C5A2E;
    /* Legacy "coral" tokens now alias to gold so any remaining usages remain on-palette. */
    --coral: #A67B3F;
    --coral-2: #7C5A2E;
    --leaf: #34C759;

    /* Type */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-grotesk: 'Bricolage Grotesque', 'Inter', sans-serif;
    --font-serif: 'Fraunces', 'Times New Roman', serif;

    /* Layout */
    --container: 1240px;
    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 32px;
    --radius-xl: 44px;
    --shadow-soft: 0 30px 60px -30px rgba(14, 12, 10, 0.25);
    --shadow-card: 0 22px 48px -28px rgba(14, 12, 10, 0.35);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

::selection {
    background: var(--ink);
    color: var(--cream);
}

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

@media (max-width: 640px) {
    .container {
        padding: 0 20px;
    }
}

/* ---------- Reveal animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2, .7, .1, 1),
        transform .8s cubic-bezier(.2, .7, .1, 1);
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* ---------- Background ambient ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100;
    background: transparent;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--coral));
    transition: width .12s linear;
}

.bg-orbs {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.bg-orbs .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
}

.orb-1 {
    width: 520px;
    height: 520px;
    top: -120px;
    left: -120px;
    background: radial-gradient(closest-side, #E8C892, transparent 70%);
}

.orb-2 {
    width: 620px;
    height: 620px;
    bottom: -180px;
    right: -160px;
    background: radial-gradient(closest-side, var(--gold-3), transparent 70%);
    opacity: .45;
}

.orb-3 {
    width: 380px;
    height: 380px;
    top: 40%;
    left: 60%;
    background: radial-gradient(closest-side, #C49A5D, transparent 70%);
    opacity: .25;
}

.grid-overlay,
.grain {
    position: absolute;
    inset: 0;
}

.grid-overlay {
    background-image:
        linear-gradient(rgba(14, 12, 10, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 12, 10, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
    opacity: .55;
}

.grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: .05;
    mix-blend-mode: multiply;
}

/* ---------- Navigation ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 0;
    transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
    border-bottom: 1px solid transparent;
}

.nav.scrolled {
    background: rgba(242, 235, 220, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.brand-text em {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 600;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a {
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: background .2s ease, color .2s ease;
}

.nav-links a:hover {
    background: rgba(14, 12, 10, .06);
    color: var(--ink);
}

.nav-links .nav-cta {
    margin-left: 10px;
    color: #FFFFFF;
}

.nav-links .nav-cta:hover {
    color: #FFFFFF;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
}

.nav-toggle span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease, top .25s ease;
}

.nav-toggle span:nth-child(1) {
    top: 15px;
}

.nav-toggle span:nth-child(2) {
    top: 21px;
}

.nav-toggle span:nth-child(3) {
    top: 27px;
}

.nav-toggle.open span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

@media (max-width: 920px) {
    .nav-toggle {
        display: inline-block;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        background: var(--cream);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        box-shadow: var(--shadow-soft);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s, transform .25s;
    }

    .nav-links.open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-links a {
        padding: 14px 16px;
        font-size: 16px;
    }

    .nav-links .nav-cta {
        margin: 6px 0 0;
        text-align: center;
    }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: 0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    white-space: nowrap;
}

.btn svg {
    transition: transform .25s ease;
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn-primary {
    background: var(--ink);
    color: var(--cream);
}

.btn-primary:hover {
    background: var(--ink-2);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -18px rgba(14, 12, 10, .55);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-ghost:hover {
    background: rgba(14, 12, 10, .06);
    border-color: var(--ink);
    transform: translateY(-2px);
}

.btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 22px;
}

/* ---------- Type ---------- */
.eyebrow,
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(14, 12, 10, .06);
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 6px rgba(166, 123, 63, .18);
}

.display {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(48px, 9vw, 132px);
    line-height: .94;
    letter-spacing: -0.035em;
    margin: 18px 0 22px;
    color: var(--ink);
}

.display em {
    font-style: italic;
    font-weight: 500;
    color: var(--gold-2);
}

.display.sm {
    font-size: clamp(40px, 6.5vw, 84px);
}

.grad-text {
    background: linear-gradient(120deg, var(--gold-2) 0%, var(--coral) 60%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.underline-stroke {
    position: relative;
    white-space: nowrap;
}

.underline-stroke::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 0.06em;
    height: 0.14em;
    background: var(--coral);
    border-radius: 999px;
    transform-origin: left;
    transform: scaleX(.92);
    opacity: .85;
}

.h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(34px, 5.5vw, 72px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 14px 0 18px;
    color: var(--ink);
}

.h2 em {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 500;
}

.lead {
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 0 30px;
}

.body-lg {
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.muted {
    color: var(--muted);
}

/* ---------- Sections ---------- */
.section {
    padding: 120px 0;
    position: relative;
}

@media (max-width: 720px) {
    .section {
        padding: 80px 0;
    }
}

.section-head {
    max-width: 820px;
    margin: 0 auto 64px;
    text-align: center;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 80px;
    align-items: start;
}

@media (max-width: 880px) {
    .two-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 40px 0 140px;
    overflow: hidden;
}

.hero-wordmark {
    position: absolute;
    inset: auto 0 -2vw 0;
    text-align: center;
    pointer-events: none;
    z-index: 0;
    line-height: .8;
}

.hero-wordmark span {
    display: inline-block;
    font-family: var(--font-serif);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(180px, 28vw, 460px);
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(14, 12, 10, .14);
    text-stroke: 1.5px rgba(14, 12, 10, .14);
    background: linear-gradient(180deg, rgba(14, 12, 10, .045), transparent 70%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    padding-top: 32px;
}

@media (max-width: 980px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-copy .lead,
    .hero-copy .cta-row {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-copy .cta-row {
        justify-content: center;
    }

    .stats {
        justify-content: center;
    }
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 44px;
}

.stats {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat b {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -.02em;
}

.stat span {
    font-size: 13.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
}

/* ---------- Hero phone ---------- */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    transition: transform .35s ease-out;
}

.phone-halo,
.phone-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.phone-halo {
    width: 520px;
    height: 520px;
    background: radial-gradient(closest-side, rgba(166, 123, 63, .35), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(20px);
}

.phone-ring {
    width: 440px;
    height: 440px;
    border: 1px dashed rgba(14, 12, 10, .22);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 40s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.phone {
    position: relative;
    width: min(320px, 78vw);
    aspect-ratio: 9/19.5;
    background: var(--ink);
    border-radius: 46px;
    padding: 12px;
    box-shadow:
        0 30px 80px -30px rgba(14, 12, 10, .55),
        inset 0 0 0 1.5px rgba(255, 255, 255, .04);
    transform: rotate(-3deg);
}

.phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 22px;
    background: #000;
    border-radius: 999px;
    z-index: 2;
}

.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: var(--cream-2);
    position: relative;
}

.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phone-screen #phoneImg.ps-in {
    animation: psSwap .55s ease both;
}

@keyframes psSwap {
    0% {
        opacity: 0;
        transform: scale(1.04);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255, 252, 244, .9);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-card);
    font-size: 13px;
    z-index: 3;
}

.float-card b {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.float-card small {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
}

.fi {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--cream);
}

.fi-green {
    background: var(--leaf);
}

.fi-gold {
    background: var(--gold-2);
}

.fi-purple {
    background: #6B5B95;
}

.fc-1 {
    top: 8%;
    left: -6%;
    animation: float 6s ease-in-out infinite;
}

.fc-2 {
    top: 38%;
    right: -10%;
    animation: float 7s ease-in-out infinite reverse;
}

.fc-3 {
    bottom: 10%;
    left: -10%;
    animation: float 5.5s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 980px) {

    .fc-1 {
        left: 0;
    }

    .fc-2 {
        right: 0;
    }

    .fc-3 {
        left: 0;
    }
}

/* ---------- Scroll hint & marquee ---------- */
.scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 80px auto 0;
    padding: 0 28px;
    color: var(--muted);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.sh-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, var(--ink), transparent);
    position: relative;
    overflow: hidden;
}

.sh-line::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 30%;
    background: var(--coral);
    animation: slide 2.2s ease-in-out infinite;
}

@keyframes slide {

    0%,
    100% {
        transform: translateX(-30%);
    }

    50% {
        transform: translateX(180%);
    }
}

.marquee {
    margin-top: 90px;
    padding: 22px 0;
    border-block: 1px solid var(--line);
    background: var(--cream-2);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.marquee-track {
    display: flex;
    gap: 40px;
    align-items: center;
    width: max-content;
    animation: marquee 38s linear infinite;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 30px);
    color: var(--ink);
    white-space: nowrap;
    font-weight: 500;
}

.marquee-track .mq-star {
    color: var(--coral);
    font-style: normal;
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- Hood strip ---------- */
.hood-strip {
    padding: 70px 0;
    background: var(--ink);
    color: var(--cream);
}

.hood-lead {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.3;
    max-width: 760px;
    margin: 0 0 36px;
    color: var(--cream);
    font-weight: 500;
}

.hood-lead em {
    font-style: italic;
    color: var(--gold-3);
}

.hood-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.hood-grid span {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(242, 235, 220, .2);
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--cream-2);
    transition: background .2s, color .2s, border-color .2s;
}

.hood-grid span:hover {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
}

/* ---------- Features (mirrors plan card style) ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 980px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.2px solid rgba(47, 14, 11, 0.10);
    border-radius: 22px;
    padding: 24px 22px 22px;
    box-shadow: 0 4px 14px rgba(47, 14, 11, 0.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 160, 99, 0.45);
    box-shadow: 0 18px 38px -18px rgba(47, 14, 11, 0.22);
}

.fc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(201, 160, 99, 0.18);
    border: 1px solid rgba(201, 160, 99, 0.6);
    color: var(--ink);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    transition: background .25s ease, border-color .25s ease;
}

.feature-card:hover .fc-icon {
    background: rgba(201, 160, 99, 0.28);
    border-color: rgba(201, 160, 99, 0.85);
}

.fc-icon svg {
    width: 22px;
    height: 22px;
}

.feature-card h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -.015em;
    color: var(--ink);
}

.feature-card p {
    margin: 0;
    color: rgba(47, 14, 11, 0.65);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
}

/* ---------- Meetups (map) section ---------- */
.meetups-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(115% 80% at 12% -10%, rgba(201, 160, 99, .17), transparent 55%),
        radial-gradient(100% 75% at 92% 110%, rgba(166, 123, 63, .16), transparent 55%),
        linear-gradient(180deg, #19110A 0%, #0E0A07 52%, #160E08 100%);
    color: var(--cream);
}

.meetups-section .container {
    position: relative;
    z-index: 1;
}

.meetups-section .kicker {
    background: rgba(242, 235, 220, .08);
    color: var(--cream-2);
    border-color: rgba(242, 235, 220, .12);
}

.meetups-section .h2 {
    color: var(--cream);
}

.meetups-section .muted {
    color: rgba(242, 235, 220, .65);
}

.meetups-map-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(232, 200, 146, .2);
    background: #14110E;
    box-shadow:
        0 50px 110px -50px rgba(0, 0, 0, .85),
        0 30px 90px -55px rgba(201, 160, 99, .5),
        inset 0 0 0 1px rgba(232, 200, 146, .05);
}

@media (max-width: 960px) {
    .meetups-map-wrap {
        grid-template-columns: 1fr;
    }
}

.meetups-map {
    width: 100%;
    height: 720px;
    background: #1a1714;
}

@media (max-width: 720px) {
    .meetups-map {
        height: 480px;
    }
}

.meetup-panel {
    padding: 26px;
    color: var(--cream);
    overflow-y: auto;
    max-height: 720px;
}

@media (max-width: 960px) {
    .meetup-panel {
        max-height: none;
    }
}

.mp-empty {
    text-align: center;
    padding: 40px 12px;
    color: rgba(242, 235, 220, .7);
}

.mp-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(166, 123, 63, .15);
    color: var(--coral);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
}

.mp-empty h3 {
    color: var(--cream);
    font-family: var(--font-serif);
    font-size: 22px;
    margin: 6px 0 8px;
    font-weight: 600;
}

.mp-empty p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

/* Leaflet pin/popups */
.meetup-pin {
    background: transparent !important;
    border: 0 !important;
}

.mp-pin-img {
    width: 44px;
    height: 54px;
    object-fit: contain;
    cursor: pointer;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4));
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s ease;
}

.mp-pin-img:hover {
    transform: translateY(-3px) scale(1.08);
}

.meetup-pin.is-active .mp-pin-img {
    transform: translateY(-4px) scale(1.12);
    filter: drop-shadow(0 12px 18px rgba(166, 123, 63, .55));
}

/* Modern meetup detail card (side panel) */
.mp-card {
    position: relative;
    background: #1A1714;
    border: 1px solid rgba(232, 200, 146, .14);
    border-radius: 22px;
    overflow: hidden;
    color: var(--cream);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

.mp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(242, 235, 220, .18);
    background: rgba(14, 12, 10, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--cream);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.mp-close:hover {
    background: rgba(166, 123, 63, .85);
    border-color: transparent;
    transform: scale(1.06);
}

.mp-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0E0C0A;
    overflow: hidden;
}

.mp-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 1.2s ease;
}

.mp-card:hover .mp-cover img {
    transform: scale(1.08);
}

.mp-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 12, 10, 0) 35%, rgba(14, 12, 10, .85) 100%);
    pointer-events: none;
}

.mp-cat {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(135deg, var(--gold-3), var(--gold));
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 8px 18px -8px rgba(196, 154, 93, .8);
}

.mp-body {
    padding: 18px 20px 20px;
}

.mp-title {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--cream);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mp-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 8px;
}

.mp-meta li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(242, 235, 220, .82);
}

.mp-meta li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gold-3);
}

.mp-notes {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(242, 235, 220, .7);
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(242, 235, 220, .04);
    border: 1px solid rgba(242, 235, 220, .08);
    border-radius: 12px;
}

.mp-host {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-bottom: 14px;
    border-top: 1px solid rgba(242, 235, 220, .08);
}

.mp-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: visible;
    background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
    color: var(--ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    flex-shrink: 0;
}

.mp-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(242, 235, 220, .15);
}

.mp-verified {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--leaf);
    color: var(--cream);
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid #1A1714;
}

.mp-host-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mp-host-text small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(242, 235, 220, .55);
    margin-bottom: 3px;
}

.mp-host-text b {
    font-size: 14px;
    color: var(--cream);
    font-weight: 600;
}

.mp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--coral) 0%, var(--gold-2) 100%);
    color: var(--cream);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 12px 28px -12px rgba(166, 123, 63, .65);
}

.mp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgba(166, 123, 63, .8);
}

/* Leaflet attribution/controls — softer for dark theme */
.leaflet-control-attribution {
    background: rgba(14, 12, 10, .55) !important;
    color: rgba(242, 235, 220, .55) !important;
    font-size: 10px !important;
}

.leaflet-control-attribution a {
    color: rgba(232, 200, 146, .85) !important;
}

.leaflet-control-zoom a {
    background: rgba(14, 12, 10, .85) !important;
    color: var(--cream) !important;
    border-color: rgba(232, 200, 146, .18) !important;
}

.leaflet-control-zoom a:hover {
    background: rgba(196, 154, 93, .9) !important;
    color: var(--ink) !important;
}

.meetup-card {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 18px;
    color: var(--ink);
    border: 1px solid var(--line);
}

.meetup-card h4 {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 20px;
}

.meetup-card .meta {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.meetups-foot {
    margin-top: 40px;
    text-align: center;
}

/* ---------- How it works ---------- */
.how {
    background: var(--cream-2);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 880px) {
    .steps {
        grid-template-columns: 1fr;
    }
}

.step {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.2px solid rgba(47, 14, 11, 0.10);
    border-radius: 22px;
    padding: 26px 24px 24px;
    box-shadow: 0 4px 14px rgba(47, 14, 11, 0.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.step:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 160, 99, 0.45);
    box-shadow: 0 18px 38px -18px rgba(47, 14, 11, 0.22);
}

.step-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gold-2);
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: 14px;
}

.step h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 8px;
    letter-spacing: -.015em;
    color: var(--ink);
}

.step p {
    margin: 0;
    color: rgba(47, 14, 11, 0.65);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
}

/* ---------- Plans (mirrors app _GoldPlanCard) ---------- */
.plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 1080px) {
    .plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .plans {
        grid-template-columns: 1fr;
    }
}

.plan {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.2px solid rgba(47, 14, 11, 0.10);
    border-radius: 22px;
    padding: 22px 22px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(47, 14, 11, 0.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -18px rgba(47, 14, 11, 0.22);
}

.plan.popular {
    border-color: rgba(201, 160, 99, 0.55);
    box-shadow:
        0 0 0 1px rgba(201, 160, 99, 0.25) inset,
        0 18px 38px -16px rgba(166, 123, 63, 0.35);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(216, 190, 155, 0.22) 0%, transparent 60%),
        rgba(255, 252, 243, 0.78);
}

.plan.soon {
    opacity: 0.92;
}

/* Badges (top-right cluster) */
.plan-badges {
    position: absolute;
    top: -14px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.plan-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -4px rgba(201, 160, 99, 0.55);
}

.ribbon {
    background: var(--gold);
    color: var(--ink);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px -8px rgba(201, 160, 99, 0.7);
    white-space: nowrap;
}

.ribbon-soon {
    background: var(--ink);
    color: var(--cream);
    box-shadow: 0 8px 18px -10px rgba(47, 14, 11, 0.6);
}

/* Header (title block + price block) */
.plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.plan-head-l {
    min-width: 0;
}

.plan-head-r {
    text-align: right;
    flex-shrink: 0;
}

.plan-tag {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(47, 14, 11, 0.07);
    color: var(--ink);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.plan-head h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -.015em;
}

.plan-head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(47, 14, 11, 0.65);
    font-weight: 600;
}

.plan-price {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.plan-price .cur {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(47, 14, 11, 0.55);
    text-transform: uppercase;
}

.plan-price-tba {
    font-size: 22px;
    color: rgba(47, 14, 11, 0.55);
}

.plan-period {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(47, 14, 11, 0.55);
}

.plan-divider {
    height: 1px;
    background: rgba(47, 14, 11, 0.08);
    margin: 14px 0;
}

/* Perks list with circular gold check chips */
.plan-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.plan-perks li {
    position: relative;
    padding-left: 28px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(47, 14, 11, 0.85);
    font-weight: 500;
}

.plan-perks li b {
    color: var(--ink);
    font-weight: 700;
}

.plan-perks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(201, 160, 99, 0.18);
    border: 1px solid rgba(201, 160, 99, 0.6);
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Optional perk callout (matches app's perkText box) */
.plan-perk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 14px;
    background: rgba(201, 160, 99, 0.18);
    border: 1px solid rgba(201, 160, 99, 0.5);
    border-radius: 12px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.plan-perk svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* CTA — full-width pill, gold-tinted glass like app */
.plan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    background: rgba(47, 14, 11, 0.06);
    color: var(--ink);
    border: 1px solid rgba(47, 14, 11, 0.10);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.plan-cta:hover {
    background: rgba(47, 14, 11, 0.10);
    transform: translateY(-1px);
}

.plan-cta[aria-disabled="true"] {
    opacity: 0.7;
    cursor: not-allowed;
}

.plan-cta-primary {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
    color: var(--ink);
    border-color: transparent;
    box-shadow: 0 12px 24px -12px rgba(166, 123, 63, 0.75);
}

.plan-cta-primary:hover {
    background: linear-gradient(180deg, var(--gold-3) 0%, var(--gold) 100%);
    box-shadow: 0 16px 30px -12px rgba(166, 123, 63, 0.85);
}

/* ---------- Trust ---------- */
.trust-card {
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--radius-xl);
    padding: 60px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.trust-card::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(166, 123, 63, .35), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

@media (max-width: 880px) {
    .trust-card {
        grid-template-columns: 1fr;
        padding: 44px 28px;
        gap: 32px;
    }
}

.trust-card .kicker {
    background: rgba(242, 235, 220, .08);
    color: var(--cream);
    border-color: rgba(242, 235, 220, .12);
}

.trust-card .h2 {
    color: var(--cream);
}

.trust-card .muted {
    color: rgba(242, 235, 220, .7);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.trust-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(242, 235, 220, .07);
    border: 1px solid rgba(242, 235, 220, .14);
    border-radius: 999px;
    padding: 14px 18px;
    color: var(--cream);
    font-weight: 500;
    transition: background .25s, transform .25s;
}

.trust-pill:hover {
    background: rgba(242, 235, 220, .14);
    transform: translateX(4px);
}

.trust-pill b {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    font-size: 15px;
}

/* ---------- Testimonials ---------- */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 880px) {
    .testimonials {
        grid-template-columns: 1fr;
    }
}

.t-card {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.2px solid rgba(47, 14, 11, 0.10);
    border-radius: 22px;
    padding: 24px 22px;
    box-shadow: 0 4px 14px rgba(47, 14, 11, 0.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.t-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 160, 99, 0.45);
    box-shadow: 0 18px 38px -18px rgba(47, 14, 11, 0.22);
}

.t-card blockquote {
    margin: 0 0 18px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -.01em;
}

.t-card figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
}

.t-card figcaption b {
    display: block;
    font-weight: 600;
}

.t-card figcaption small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.t-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-3);
    flex-shrink: 0;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), transparent 50%),
        linear-gradient(135deg, var(--gold-3), var(--gold));
}

.t-a2 {
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), transparent 50%),
        linear-gradient(135deg, var(--gold), var(--gold-2));
}

.t-a3 {
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), transparent 50%),
        linear-gradient(135deg, var(--gold-3), var(--gold-deep));
}

/* ---------- FAQ ---------- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 820px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-item {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.2px solid rgba(47, 14, 11, 0.10);
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: 0 4px 14px rgba(47, 14, 11, 0.05);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.faq-item[open] {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(201, 160, 99, 0.55);
    box-shadow: 0 12px 28px -16px rgba(47, 14, 11, 0.18);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -.01em;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    color: var(--gold-2);
    transition: transform .25s;
    line-height: 1;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    margin: 12px 0 0;
    color: rgba(47, 14, 11, 0.65);
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 500;
}

/* ---------- CTA ---------- */
.cta-section {
    padding-bottom: 120px;
}

.cta {
    position: relative;
    text-align: center;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--radius-xl);
    padding: 80px 40px;
    overflow: hidden;
    isolation: isolate;
}

.cta::after {
    content: "naybrz";
    position: absolute;
    bottom: -8vw;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(180px, 24vw, 380px);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(242, 235, 220, .12);
    pointer-events: none;
    z-index: -1;
}

.cta-glow {
    position: absolute;
    inset: -20% -20% auto auto;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(166, 123, 63, .35), transparent 70%);
    filter: blur(20px);
    z-index: -1;
}

.cta .kicker {
    background: rgba(242, 235, 220, .08);
    color: var(--cream);
    border-color: rgba(242, 235, 220, .14);
}

.cta .display,
.cta .h2 {
    color: var(--cream);
    margin-top: 20px;
}

.cta .muted {
    color: rgba(242, 235, 220, .75);
    max-width: 560px;
    margin: 12px auto 32px;
}

.store-row {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: var(--cream);
    color: var(--ink);
    border-radius: 999px;
    transition: transform .2s, background .2s;
}

.store-btn:hover {
    transform: translateY(-2px);
    background: #fff;
}

.store-btn small {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
}

.store-btn b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- Footer ---------- */
.footer {
    background: var(--cream-2);
    border-top: 1px solid var(--line);
    padding-top: 70px;
    padding-bottom: 30px;
    position: relative;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 880px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .foot-brand {
        grid-column: 1 / -1;
    }
}

.foot-brand .brand {
    margin-bottom: 14px;
}

.foot-brand p {
    max-width: 36ch;
    margin: 8px 0 18px;
}

.foot-social {
    display: flex;
    gap: 8px;
}

.foot-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.foot-social a:hover {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
    transform: translateY(-2px);
}

.foot-col h5 {
    margin: 0 0 16px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink);
}

.foot-col a {
    display: block;
    padding: 6px 0;
    font-size: 14.5px;
    color: var(--ink-soft);
    transition: color .2s;
}

.foot-col a:hover {
    color: var(--coral);
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 22px;
    color: var(--muted);
    font-size: 13px;
}

/* ---------- Sticky CTA pill ---------- */
.sticky-cta {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 999px;
    box-shadow: 0 22px 50px -18px rgba(14, 12, 10, .55);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .01em;
    transition: transform .25s ease, background .25s ease;
}

.sticky-cta:hover {
    background: var(--coral);
    transform: translateY(-2px);
}

.sticky-cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(196, 154, 93, .25);
    animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(196, 154, 93, .25);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(196, 154, 93, 0);
    }
}

@media (max-width: 540px) {
    .sticky-cta {
        bottom: 14px;
        right: 14px;
        padding: 12px 18px;
        font-size: 13.5px;
    }
}

/* ---------- Glass helper kept for compatibility ---------- */
.glass {
    background: rgba(255, 252, 244, .65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line);
}

/* =========================================================
   FUTURISTIC HERO LAYER
   Aurora gradients, 3D perspective grid, light beams,
   twinkling stars, neon phone rings, orbital chips,
   live-status pill, animated kinetic typography.
   ========================================================= */

.hero {
    perspective: 1800px;
    transform-style: preserve-3d;
}

/* Hide default page bg behind hero FX so the futuristic layer pops */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 200, 146, .35), transparent 65%),
        radial-gradient(ellipse 90% 70% at 50% 110%, rgba(14, 12, 10, .14), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hero-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* --- Aurora drifting blobs --- */
.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    opacity: .85;
    will-change: transform;
}

.aurora.a1 {
    width: 60vw;
    height: 60vw;
    top: -20vw;
    left: -10vw;
    background: radial-gradient(closest-side,
            rgba(232, 200, 146, .85), rgba(232, 200, 146, 0) 70%);
    animation: aurora1 22s ease-in-out infinite;
}

.aurora.a2 {
    width: 55vw;
    height: 55vw;
    top: 10vw;
    right: -15vw;
    background: radial-gradient(closest-side,
            rgba(166, 123, 63, .55), rgba(166, 123, 63, 0) 70%);
    animation: aurora2 26s ease-in-out infinite;
}

.aurora.a3 {
    width: 70vw;
    height: 70vw;
    bottom: -30vw;
    left: 20vw;
    background:
        conic-gradient(from 120deg at 50% 50%,
            rgba(196, 154, 93, .55),
            rgba(166, 123, 63, .35),
            rgba(107, 91, 149, .35),
            rgba(196, 154, 93, .55));
    filter: blur(90px);
    opacity: .55;
    animation: aurora3 32s linear infinite;
}

@keyframes aurora1 {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(8vw, 4vw, 0) scale(1.08);
    }
}

@keyframes aurora2 {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-6vw, 5vw, 0) scale(1.1);
    }
}

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

/* --- 3D perspective grid floor (vaporwave/cyber) --- */
.hero-grid3d {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -10%;
    height: 55%;
    background-image:
        linear-gradient(rgba(14, 12, 10, .35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 12, 10, .35) 1px, transparent 1px);
    background-size: 70px 70px;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(180deg, transparent, black 35%, black 75%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, black 35%, black 75%, transparent);
    opacity: .35;
    animation: gridScroll 9s linear infinite;
}

@keyframes gridScroll {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 70px, 70px 0;
    }
}

/* --- Diagonal light beams --- */
.hero-beams {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-beams i {
    position: absolute;
    top: -20%;
    width: 220px;
    height: 140%;
    background: linear-gradient(180deg,
            transparent,
            rgba(232, 200, 146, .22),
            rgba(166, 123, 63, .18),
            transparent);
    filter: blur(40px);
    transform: rotate(18deg) translateX(-100%);
    animation: beam 9s ease-in-out infinite;
}

.hero-beams i:nth-child(2) {
    left: 35%;
    animation-delay: 3s;
    background: linear-gradient(180deg,
            transparent,
            rgba(196, 154, 93, .28),
            transparent);
}

.hero-beams i:nth-child(3) {
    left: 70%;
    animation-delay: 6s;
    width: 140px;
    background: linear-gradient(180deg,
            transparent,
            rgba(166, 123, 63, .26),
            transparent);
}

@keyframes beam {

    0%,
    100% {
        transform: rotate(18deg) translateX(-100%);
        opacity: 0;
    }

    30%,
    70% {
        opacity: 1;
    }

    50% {
        transform: rotate(18deg) translateX(220%);
    }
}

/* --- Twinkling stars / particles --- */
.hero-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 12% 22%, rgba(14, 12, 10, .65) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 28% 70%, rgba(166, 123, 63, .8) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 48% 18%, rgba(14, 12, 10, .55) 50%, transparent 51%),
        radial-gradient(2px 2px at 62% 56%, rgba(196, 154, 93, .9) 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 28%, rgba(14, 12, 10, .55) 50%, transparent 51%),
        radial-gradient(2px 2px at 88% 78%, rgba(166, 123, 63, .75) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 18% 88%, rgba(196, 154, 93, .85) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 92% 40%, rgba(14, 12, 10, .55) 50%, transparent 51%),
        radial-gradient(1px 1px at 36% 40%, rgba(14, 12, 10, .55) 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 84%, rgba(196, 154, 93, .8) 50%, transparent 51%);
    animation: twinkle 4.2s ease-in-out infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

.hero-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .07;
    mix-blend-mode: multiply;
}

/* Keep page-level grid lower in the hero so 3d grid dominates */
.hero .grid-overlay {
    opacity: 0;
}

/* --- Animated kinetic display gradient --- */
.hero .display .grad-text {
    background: linear-gradient(120deg,
            var(--gold-2) 0%,
            var(--coral) 30%,
            var(--gold-3) 55%,
            var(--coral) 80%,
            var(--gold-2) 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shineFlow 6s ease-in-out infinite;
}

@keyframes shineFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.hero .underline-stroke::after {
    bottom: -0.18em;
    background: linear-gradient(90deg, var(--coral), var(--gold-2));
    height: 0.18em;
    box-shadow: 0 6px 18px -4px rgba(166, 123, 63, .55);
    animation: ulPulse 3.5s ease-in-out infinite;
}

@keyframes ulPulse {

    0%,
    100% {
        transform: scaleX(.92);
        opacity: .9;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* --- Live now pill --- */
.live-now {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(14, 12, 10, .85);
    color: var(--cream);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .02em;
    border: 1px solid rgba(232, 200, 146, .2);
    box-shadow:
        0 12px 30px -14px rgba(14, 12, 10, .65),
        inset 0 0 0 1px rgba(255, 255, 255, .04);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.live-now b {
    color: var(--gold-3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.live-now .ln-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38d97a;
    box-shadow: 0 0 0 0 rgba(56, 217, 122, .7);
    animation: lnPulse 1.6s ease-out infinite;
}

@keyframes lnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 217, 122, .7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(56, 217, 122, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(56, 217, 122, 0);
    }
}

.live-now .ln-spark {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(232, 200, 146, .35) 50%,
            transparent 70%);
    transform: translateX(-100%);
    animation: spark 3.6s ease-in-out infinite;
}

@keyframes spark {

    0%,
    100% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(120%);
    }
}

/* --- Enhanced primary button: glow + animated gradient border --- */
.hero .btn-primary {
    position: relative;
    background: linear-gradient(135deg, #15110d, #1d1813);
    box-shadow:
        0 18px 40px -16px rgba(14, 12, 10, .7),
        0 0 0 1px rgba(232, 200, 146, .1) inset;
    isolation: isolate;
    overflow: hidden;
}

.hero .btn-primary::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 0deg,
            var(--gold-2), var(--coral), var(--gold-3), var(--gold-2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .65;
    animation: btnSpin 6s linear infinite;
}

.hero .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg,
            transparent 35%,
            rgba(255, 255, 255, .22) 50%,
            transparent 65%);
    transform: translateX(-100%);
    transition: transform .6s ease;
    pointer-events: none;
}

.hero .btn-primary:hover::after {
    transform: translateX(100%);
}

.hero .btn-primary:hover {
    box-shadow:
        0 22px 50px -16px rgba(166, 123, 63, .55),
        0 0 0 1px rgba(232, 200, 146, .25) inset;
}

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

.hero .btn-ghost {
    backdrop-filter: blur(10px);
    background: rgba(255, 252, 244, .35);
}

/* --- Stats: tabular figures + accent bar --- */
.hero .stats {
    position: relative;
}

.hero .stat {
    position: relative;
    padding-left: 14px;
}

.hero .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--coral), transparent);
    opacity: .8;
}

.hero .stat b {
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--ink), #4a3f33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- 3D phone stage --- */
.phone-stage {
    transform-style: preserve-3d;
    perspective: 1400px;
}

.hero .phone {
    transform: none;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    box-shadow:
        0 50px 120px -40px rgba(14, 12, 10, .75),
        0 0 0 1.5px rgba(232, 200, 146, .14) inset,
        0 0 80px -10px rgba(166, 123, 63, .35);
    animation: phoneIdle 8s ease-in-out infinite;
}

@keyframes phoneIdle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.hero .phone:hover {
    transform: translateY(-6px);
}

/* Brighter conic halo behind phone */
.phone-conic {
    position: absolute;
    width: 560px;
    height: 560px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(166, 123, 63, .0),
            rgba(166, 123, 63, .35),
            rgba(196, 154, 93, .35),
            rgba(232, 200, 146, .25),
            rgba(166, 123, 63, .0));
    filter: blur(30px);
    opacity: .8;
    animation: spin 16s linear infinite;
    z-index: 0;
}

.hero .phone-halo {
    width: 580px;
    height: 580px;
    background: radial-gradient(closest-side, rgba(166, 123, 63, .45), transparent 70%);
    filter: blur(30px);
    animation: haloBreathe 5s ease-in-out infinite;
}

@keyframes haloBreathe {

    0%,
    100% {
        opacity: .8;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.hero .phone-ring {
    width: 460px;
    height: 460px;
    border: 1px dashed rgba(232, 200, 146, .45);
    box-shadow: 0 0 40px -10px rgba(166, 123, 63, .25) inset;
}

.phone-ring-2 {
    width: 360px !important;
    height: 360px !important;
    border: 1px solid rgba(166, 123, 63, .25) !important;
    animation: spin 28s linear infinite reverse !important;
}

/* --- Orbital chips around phone --- */
.orbit-chips {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.orbit-chips .oc {
    position: absolute;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(14, 12, 10, .85);
    color: var(--cream);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    border: 1px solid rgba(232, 200, 146, .2);
    box-shadow: 0 14px 30px -14px rgba(14, 12, 10, .7);
    backdrop-filter: blur(8px);
}

.oc-1 {
    top: 14%;
    right: 6%;
    animation: ocFloat 7s ease-in-out infinite;
}

.oc-2 {
    bottom: 22%;
    right: -4%;
    animation: ocFloat 9s ease-in-out infinite reverse;
}

.oc-3 {
    bottom: 6%;
    left: 18%;
    background: var(--coral);
    border-color: rgba(255, 255, 255, .2);
    animation: ocFloat 6s ease-in-out infinite;
}

@keyframes ocFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

/* Float cards: depth + neon edge on hover */
.hero .float-card {
    background: rgba(255, 252, 244, .82);
    box-shadow:
        var(--shadow-card),
        0 0 0 1px rgba(232, 200, 146, .15);
    transition: transform .35s ease, box-shadow .35s ease;
    transform: translateZ(40px);
}

.hero .float-card:hover {
    transform: translateZ(60px) scale(1.04);
    box-shadow:
        0 30px 60px -24px rgba(14, 12, 10, .55),
        0 0 0 1px rgba(166, 123, 63, .45);
}

/* --- Hero wordmark: gradient sweep --- */
.hero-wordmark span {
    background: linear-gradient(180deg,
            rgba(14, 12, 10, .12),
            rgba(166, 123, 63, .14) 40%,
            rgba(196, 154, 93, .08) 70%,
            transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1.5px rgba(14, 12, 10, .18);
    animation: wmDrift 14s ease-in-out infinite;
}

@keyframes wmDrift {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Reduce motion for hero specifics */
@media (prefers-reduced-motion: reduce) {

    .aurora,
    .hero-grid3d,
    .hero-beams i,
    .hero-stars,
    .phone-conic,
    .hero .phone,
    .hero-wordmark span,
    .hero .phone-halo,
    .orbit-chips .oc,
    .hero .display .grad-text,
    .hero .underline-stroke::after,
    .live-now .ln-dot,
    .live-now .ln-spark,
    .hero .btn-primary::before {
        animation: none !important;
    }
}

/* Mobile: scale hero FX gracefully */
@media (max-width: 980px) {
    .orbit-chips .oc {
        font-size: 11px;
    }

    .oc-1 {
        top: 4%;
        right: 4%;
    }

    .oc-2 {
        bottom: 30%;
        right: 2%;
    }

    .oc-3 {
        bottom: -2%;
        left: 8%;
    }

    .hero .phone {
        transform: none;
        animation: none;
    }

    .phone-conic,
    .hero .phone-halo {
        width: 380px;
        height: 380px;
    }

    .hero .phone-ring {
        width: 320px;
        height: 320px;
    }

    .phone-ring-2 {
        width: 240px !important;
        height: 240px !important;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .marquee-track {
        animation: none;
    }
}

/* =========================================================
   HERO H1 — kinetic typography
   Smaller, two-line, word-rise entrance + cycling rotator.
   ========================================================= */

.hero-h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(38px, 5.4vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 14px 0 22px;
    color: var(--ink);
}

.hero-h1 .line {
    display: block;
    overflow: hidden;
    padding: 0.08em 0;
    line-height: 1.05;
}

.hero-h1 .word {
    display: inline-block;
    transform: translateY(110%) rotate(6deg);
    opacity: 0;
    animation: wordRise .9s cubic-bezier(.2, .8, .2, 1) forwards;
    margin-right: 0.18em;
}

.hero-h1 .word:last-child {
    margin-right: 0;
}

/* Word stagger across the headline */
.hero-h1 .line:nth-child(1) .word:nth-child(1) {
    animation-delay: .05s;
}

.hero-h1 .line:nth-child(1) .word:nth-child(2) {
    animation-delay: .18s;
}

.hero-h1 .line:nth-child(1) .word:nth-child(3) {
    animation-delay: .31s;
}

.hero-h1 .line:nth-child(2) .word:nth-child(1) {
    animation-delay: .48s;
}

.hero-h1 .line:nth-child(2) .word:nth-child(2) {
    animation-delay: .59s;
}

.hero-h1 .line:nth-child(2) .word:nth-child(3) {
    animation-delay: .70s;
}

.hero-h1 .line:nth-child(2) .word:nth-child(4) {
    animation-delay: .81s;
}

.hero-h1 .line:nth-child(2) .word:nth-child(5) {
    animation-delay: .92s;
}

@keyframes wordRise {
    0% {
        transform: translateY(110%) rotate(6deg);
        opacity: 0;
        filter: blur(6px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(0) rotate(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* Shimmering italic gold accent word */
.shine-word {
    font-style: italic;
    font-weight: 600;
    background: linear-gradient(110deg,
            var(--gold-2) 0%,
            var(--coral) 25%,
            var(--gold-3) 45%,
            #fff7e3 50%,
            var(--gold-3) 55%,
            var(--coral) 75%,
            var(--gold-2) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shineSweep 4.5s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(166, 123, 63, .12);
}

@keyframes shineSweep {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Tighten lead + stats spacing for new smaller hero */
.hero .lead {
    font-size: clamp(16px, 1.35vw, 18px);
    margin-bottom: 26px;
}

.hero .cta-row {
    margin-bottom: 36px;
}

.hero .stat b {
    font-size: clamp(28px, 3vw, 42px);
}

@media (max-width: 540px) {
    .hero-h1 {
        font-size: clamp(34px, 9vw, 48px);
    }
}

/* =========================================================
   HERO BACKGROUND VIDEO — real naybrz enjoying meetups
   Subtle, warm-graded film texture behind the existing FX.
   ========================================================= */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* warm backer so there's never a hard flash before the clip loads */
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 200, 146, .28), transparent 62%),
        var(--cream);
}

.hero-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .24;
    /* grade the footage into the cream / gold palette */
    filter: saturate(1.05) contrast(1.02) sepia(.30) brightness(1.04);
    transform: scale(1.06);
    transform-origin: 60% 40%;
    /* feather the edges so it melts into the page */
    -webkit-mask-image: radial-gradient(ellipse 105% 92% at 52% 42%, #000 52%, transparent 92%);
    mask-image: radial-gradient(ellipse 105% 92% at 52% 42%, #000 52%, transparent 92%);
    animation: heroVidDrift 34s ease-in-out infinite alternate;
}

@keyframes heroVidDrift {
    from {
        transform: scale(1.06) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.13) translate3d(-2%, -1.2%, 0);
    }
}

/* cream scrim — weighted to the left where the headline + lead sit */
.hero-video-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg, rgba(242, 235, 220, .9) 0%, rgba(242, 235, 220, .6) 40%, rgba(242, 235, 220, .2) 68%, rgba(242, 235, 220, .5) 100%),
        linear-gradient(180deg, rgba(242, 235, 220, .55) 0%, transparent 24%, transparent 64%, rgba(242, 235, 220, .9) 100%);
}

/* =========================================================
   REEL — cinematic real-meetup footage band
   ========================================================= */
.reel {
    position: relative;
    min-height: clamp(560px, 84vh, 800px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--cream);
    isolation: isolate;
}

.reel-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #1a0a07;
}

.reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.3s ease;
    filter: saturate(1.08) contrast(1.04);
    will-change: opacity;
}

.reel-video.is-active {
    opacity: 1;
    animation: reelKen 10s ease-out forwards;
}

@keyframes reelKen {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.13);
    }
}

.reel-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg, rgba(20, 8, 5, .94) 0%, rgba(20, 8, 5, .74) 36%, rgba(20, 8, 5, .3) 66%, rgba(47, 14, 11, .55) 100%),
        linear-gradient(180deg, rgba(20, 8, 5, .55) 0%, transparent 28%, transparent 52%, rgba(20, 8, 5, .82) 100%),
        radial-gradient(130% 90% at 82% 50%, rgba(201, 160, 99, .2), transparent 58%);
}

.reel-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: .07;
    mix-blend-mode: overlay;
}

.reel-inner {
    position: relative;
    z-index: 1;
    padding-top: 64px;
    padding-bottom: 64px;
}

.reel-kicker {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: var(--cream);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.reel-title {
    color: #fff;
    max-width: 18ch;
    margin: 18px 0 16px;
    text-shadow: 0 2px 34px rgba(0, 0, 0, .45);
}

.reel-title .grad-text {
    background: linear-gradient(120deg, var(--gold-3) 0%, var(--gold) 48%, var(--gold-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reel-lead {
    max-width: 54ch;
    font-size: clamp(16px, 1.55vw, 20px);
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
    margin: 0 0 28px;
    text-shadow: 0 1px 22px rgba(0, 0, 0, .4);
}

.reel-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-bottom: 30px;
}

.reel .btn-primary {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
    color: var(--ink);
}

.reel .btn-primary:hover {
    background: linear-gradient(180deg, var(--gold-3) 0%, var(--gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -16px rgba(201, 160, 99, .7);
}

.reel-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.reel-live b {
    color: #fff;
}

.reel-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--leaf);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, .6);
    animation: reelPulse 2s ease-out infinite;
}

@keyframes reelPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, .55);
    }

    70%,
    100% {
        box-shadow: 0 0 0 13px rgba(52, 199, 89, 0);
    }
}

.reel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reel-chip {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.reel-dots {
    position: absolute;
    z-index: 1;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.reel-dots span {
    width: 26px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    transition: background .4s ease, width .4s ease;
}

.reel-dots span.is-active {
    background: var(--gold-3);
    width: 42px;
}

@media (max-width: 700px) {
    .reel {
        min-height: 80vh;
    }

    .reel-scrim {
        background:
            linear-gradient(180deg, rgba(20, 8, 5, .7) 0%, rgba(20, 8, 5, .35) 30%, rgba(20, 8, 5, .55) 60%, rgba(20, 8, 5, .92) 100%),
            radial-gradient(130% 90% at 80% 30%, rgba(201, 160, 99, .2), transparent 60%);
    }

    .reel-chip {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* =========================================================
   FREE INNER CIRCLE plan treatment
   ========================================================= */
.ribbon-free {
    background: linear-gradient(180deg, var(--leaf) 0%, #2AA84A 100%);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(52, 199, 89, .7);
}

.free-plan {
    border-color: rgba(52, 199, 89, .5);
    box-shadow:
        0 0 0 1px rgba(52, 199, 89, .18) inset,
        0 16px 34px -18px rgba(52, 199, 89, .32);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(52, 199, 89, .12) 0%, transparent 56%),
        rgba(255, 255, 255, .66);
}

.plan-price-free {
    color: #1F9E45;
    font-size: 32px;
    letter-spacing: -.02em;
}

.plan-period s {
    color: rgba(47, 14, 11, .42);
    text-decoration-thickness: 1.5px;
}

.plan-cta-free {
    background: linear-gradient(180deg, var(--leaf) 0%, #2AA84A 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px -12px rgba(52, 199, 89, .6);
}

.plan-cta-free:hover {
    background: linear-gradient(180deg, #4BD968 0%, var(--leaf) 100%);
    box-shadow: 0 16px 30px -12px rgba(52, 199, 89, .72);
    transform: translateY(-1px);
}

/* Respect reduced-motion for the new video layers */
@media (prefers-reduced-motion: reduce) {

    .hero-video-el,
    .reel-video.is-active {
        animation: none !important;
    }
}

/* =========================================================
   LIVE MEETUPS MAP — modernised dark band
   ========================================================= */
.meetups-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mfx-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    will-change: transform;
}

.mfx-1 {
    width: 46vw;
    height: 46vw;
    top: -16vw;
    left: -10vw;
    background: radial-gradient(closest-side, rgba(201, 160, 99, .6), transparent 70%);
    animation: aurora1 24s ease-in-out infinite;
}

.mfx-2 {
    width: 52vw;
    height: 52vw;
    bottom: -24vw;
    right: -12vw;
    background: radial-gradient(closest-side, rgba(166, 123, 63, .5), transparent 70%);
    animation: aurora2 28s ease-in-out infinite;
}

.mfx-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: .05;
    mix-blend-mode: overlay;
}

/* Category / live legend ribbon */
.meetups-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: -4px 0 26px;
}

.ml-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(242, 235, 220, .06);
    border: 1px solid rgba(242, 235, 220, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 600;
    color: rgba(242, 235, 220, .9);
}

.ml-chip b {
    color: #fff;
    font-weight: 800;
}

.ml-live {
    background: rgba(52, 199, 89, .12);
    border-color: rgba(52, 199, 89, .38);
    color: #EAF8EE;
}

.ml-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--leaf);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, .6);
    animation: reelPulse 2s ease-out infinite;
}

.ml-more {
    background: linear-gradient(135deg, rgba(232, 200, 146, .2), rgba(166, 123, 63, .12));
    border-color: rgba(232, 200, 146, .3);
    color: var(--gold-3);
}

/* Pulsing LIVE badge over the map */
.map-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: rgba(14, 10, 7, .72);
    border: 1px solid rgba(232, 200, 146, .3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cream);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .18em;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .75);
}

.map-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--leaf);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, .6);
    animation: reelPulse 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {

    .mfx-1,
    .mfx-2,
    .ml-dot,
    .map-badge-dot {
        animation: none !important;
    }
}