/* IntaleOne ecosystem marketing — aligned with Wallet / Partner landing tokens */

.landing-page {
    /* Play feature graphic palette (mood/tokens — not the asset itself) */
    --landing-navy: #0f172a;
    --landing-navy-deep: #050a18;
    --landing-accent: #818cf8;
    --landing-accent-soft: rgba(129, 140, 248, 0.22);
    --landing-periwinkle: #a3b1ff;
    --landing-cyan: #22d3ee;
    --landing-cyan-bright: #67e8f9;
    --landing-cyan-soft: rgba(34, 211, 238, 0.18);
    /* Partner — soft mint/emerald; distinct from hub cyan + Wallet purple */
    --landing-partner: #34d399;
    --landing-partner-bright: #6ee7b7;
    --landing-partner-soft: rgba(52, 211, 153, 0.18);
    /* Wallet / neon-tube purple–magenta (IntaleOne mark ring) */
    --landing-purple: #a855f7;
    --landing-purple-bright: #c084fc;
    --landing-magenta: #d946ef;
    --landing-purple-soft: rgba(168, 85, 247, 0.22);
    /* Aliases — aligned with Wallet (--ow-*) / Partner naming */
    --ow-cyan: var(--landing-cyan);
    --ow-cyan-bright: var(--landing-cyan-bright);
    --ow-partner: var(--landing-partner);
    --ow-purple: var(--landing-purple);
    --landing-text: #e8eefc;
    --landing-muted: #94a3b8;
    --landing-dim: #64748b;
    --landing-grad: linear-gradient(135deg, var(--landing-cyan-bright) 0%, var(--landing-accent) 100%);
    --landing-grad-partner: linear-gradient(135deg, var(--landing-partner-bright) 0%, var(--landing-partner) 100%);
    /* Neon tube — cyan left → purple/magenta right */
    --landing-neon-ring: conic-gradient(
        from 200deg,
        var(--landing-cyan-bright) 0deg,
        var(--landing-cyan) 55deg,
        var(--landing-periwinkle) 120deg,
        var(--landing-purple-bright) 185deg,
        var(--landing-magenta) 250deg,
        var(--landing-purple) 310deg,
        var(--landing-cyan-bright) 360deg
    );
    --landing-neon-line: linear-gradient(
        90deg,
        transparent 0%,
        var(--landing-cyan) 12%,
        var(--landing-cyan-bright) 28%,
        var(--landing-purple-bright) 55%,
        var(--landing-magenta) 78%,
        var(--landing-purple) 90%,
        transparent 100%
    );
    --landing-neon-bloom:
        0 0 6px rgba(34, 211, 238, 0.9),
        0 0 18px rgba(34, 211, 238, 0.45),
        0 0 36px rgba(168, 85, 247, 0.4),
        0 0 64px rgba(217, 70, 239, 0.22);

    min-height: 100vh;
    color: var(--landing-text);
    font-family: var(--font-dashboard);
    background: var(--landing-navy-deep);
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.landing-page input,
.landing-page textarea {
    -webkit-user-select: text;
    user-select: text;
}

.landing-page a {
    color: inherit;
}

/* Kill default browser focus/active boxes on landing controls; keep keyboard ring (Wallet/Partner footer pattern). */
.landing-brand:focus,
.landing-brand:active,
.landing-nav a:focus,
.landing-nav a:active,
.landing-lang a:focus,
.landing-lang a:active,
.landing-cta:focus,
.landing-cta:active,
.landing-footer-brand-link:focus,
.landing-footer-brand-link:active,
.landing-footer-nav a:focus,
.landing-footer-nav a:active {
    outline: none;
}

.landing-brand:focus-visible,
.landing-nav a:focus-visible,
.landing-lang a:focus-visible,
.landing-cta:focus-visible,
.landing-footer-brand-link:focus-visible,
.landing-footer-nav a:focus-visible {
    outline: 2px solid var(--landing-periwinkle);
    outline-offset: 3px;
    border-radius: 2px;
}

/*
 * FocusOnNavigate (Routes.razor Selector="h1") programmatically focuses the page H1 on load/nav.
 * Wallet has no FocusOnNavigate, so its hero title never shows a ring. Suppress the default
 * white outline here — the H1 is a block that stretches with the lockup, so the ring looked
 * like an empty box to the right of "IntaleOne". Keep link/CTA :focus-visible rings above.
 */
.landing-page h1:focus,
.landing-page h1:focus-visible,
.landing-page h1:active {
    outline: none;
}

/* ── Header — 1:1 with intale-onewallet/wwwroot/landing.css ── */
.landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5, 10, 24, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-header-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.landing-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.landing-brand-product-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.landing-brand-family {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.landing-brand-product {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--landing-accent);
}

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.landing-nav {
    display: none;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--landing-muted);
}

.landing-nav a {
    text-decoration: none;
    font-weight: 700; /* constant — avoids width/wrap jump on .is-current */
    border-bottom: 2px solid transparent; /* reserve underline height */
    padding-bottom: 0.15rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.landing-nav a:hover {
    color: #fff;
}

/* Active page — color + underline only; weight/border width already reserved */
.landing-nav a.is-current {
    color: #fff;
    border-bottom-color: var(--landing-cyan-bright);
}

@media (min-width: 768px) {
    .landing-nav {
        display: flex;
    }
}

.landing-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #6b7280;
}

.landing-lang a {
    text-decoration: none;
    color: #9ca3af;
    padding: 0 0.2rem;
}

.landing-lang a:hover {
    color: #fff;
}

.landing-lang a.is-active {
    font-weight: 700;
    color: var(--landing-cyan-bright);
}

/* ── One continuous navy atmosphere (hero → #how) ── */
.landing-atmosphere {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 50% at 50% 28%, #0f172a 0%, #050a18 68%, #030712 100%);
}

/* Hero + ecosystem + what + how — one decorations layer; network (partner/wallet) sits outside */

/* Partner-style ambient orbs — atmospheric only; behind glow/arcs/content */
.landing-bg-decorations {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: clip;
}

.ambient-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(6px);
    opacity: 0.85;
    pointer-events: none;
    animation: drift 12s ease-in-out infinite;
}

/* Purple orb sits on a zero-height in-flow anchor between #what and #how */
.ambient-orb-anchor {
    position: relative;
    z-index: 0;
    height: 0;
    pointer-events: none;
}

.orb-left {
    left: -7rem;
    top: -11rem; /* half of 22rem — center on the what→how seam */
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.72) 0%, rgba(168, 85, 247, 0) 70%);
}

.orb-right {
    right: 11%;
    top: 14%;
    width: 9rem;
    height: 9rem;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.42) 0%, rgba(34, 211, 238, 0) 72%);
    animation-delay: -4.5s;
}

.landing-hero-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

.landing-hero-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.92;
}

.landing-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 42% 28% at 78% 22%, rgba(34, 211, 238, 0.14) 0%, transparent 68%),
        radial-gradient(ellipse 48% 32% at 14% 55%, rgba(168, 85, 247, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 26% at 72% 78%, rgba(34, 211, 238, 0.1) 0%, transparent 72%),
        radial-gradient(ellipse 36% 22% at 58% 8%, rgba(103, 232, 249, 0.07) 0%, transparent 72%);
    animation: glow-drift 12s ease-in-out infinite alternate;
}

.landing-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin: 0 auto;
    /* Modest top under sticky header; bottom matches .landing-section (why→cta air) */
    padding: 5.5rem clamp(1.5rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 5.5rem) clamp(2.25rem, 6.5vw, 4.75rem);
    display: flex;
    align-items: start;
    gap: 3rem;
    flex-wrap: wrap;
}

/* Nested blocks in the hero atmosphere — same vertical rhythm as .landing-section (why→cta) */
.landing-hero-ecosystem {
    position: relative;
    z-index: 1;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.landing-hero-what {
    position: relative;
    z-index: 1;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.landing-hero-how {
    position: relative;
    z-index: 1;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.landing-hero-ecosystem .section-head,
.landing-hero-how .section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.landing-hero-ecosystem .section-head p,
.landing-hero-how .section-head p {
    margin-left: auto;
    margin-right: auto;
}

/* #what — center title, body, and CTAs as one block */
.landing-hero-what .landing-section-inner {
    text-align: center;
}

.landing-hero-what .section-head,
.landing-hero-what .section-body {
    margin-left: auto;
    margin-right: auto;
}

.landing-hero-what .section-cta-row {
    justify-content: center;
}

.landing-hero-ecosystem .landing-section-inner,
.landing-hero-what .landing-section-inner,
.landing-hero-how .landing-section-inner {
    position: relative;
    z-index: 1;
}

.landing-hero-copy {
    flex: 1 1 28rem;
    max-width: 42rem;
}

/* Brand lockup — mirrors intale-onewallet landing.css */
.landing-hero-lockup {
    display: flex;
    align-items: center;
    gap: clamp(1.85rem, 4.2vw, 3.25rem);
    margin: 0 0 1.85rem;
    flex-wrap: wrap;
}

.landing-hero-lockup-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 12rem;
}

/* Glowing circular brand mark — mirrors intale-onewallet landing.css */
.landing-hero-mark {
    position: relative;
    width: clamp(6.5rem, 14vw, 9.5rem);
    flex: 0 0 auto;
    aspect-ratio: 1;
    margin: 0;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.landing-hero-mark-halo {
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 48%, rgba(34, 211, 238, 0.32) 0%, transparent 52%),
        radial-gradient(circle at 72% 52%, rgba(168, 85, 247, 0.26) 0%, transparent 55%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
    animation: glow-pulse 7s ease-in-out infinite;
}

.landing-hero-mark-ring {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(
        from 210deg,
        rgba(34, 211, 238, 0.55) 0deg,
        rgba(103, 232, 249, 0.35) 70deg,
        rgba(163, 177, 255, 0.45) 150deg,
        rgba(192, 132, 252, 0.5) 220deg,
        rgba(129, 140, 248, 0.4) 290deg,
        rgba(34, 211, 238, 0.55) 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    box-shadow:
        0 0 22px rgba(34, 211, 238, 0.35),
        0 0 48px rgba(129, 140, 248, 0.28);
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}

.landing-hero-mark-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0;
    object-fit: contain;
    display: block;
    background: transparent;
    filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.2));
}

.landing-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: clamp(2.1rem, 4.2vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.landing-title-family {
    display: block;
    color: #fff;
}

.landing-tagline {
    margin: 0.2rem 0 0;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: #9aa3b5;
    max-width: 34rem;
}

.landing-lead {
    margin: 0 0 2.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--landing-muted);
    max-width: none;
}

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

.landing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    border-radius: 0.78rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-cta:hover {
    transform: translateY(-1px);
}

.landing-cta-primary {
    background: var(--landing-grad);
    color: #041018;
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

.landing-cta-primary:hover {
    box-shadow: 0 0 32px rgba(34, 211, 238, 0.35);
}

/* Partner product primary — glowing border like .eco-node-partner; global cyan unchanged */
#partner .landing-cta-primary,
.network-partner .landing-cta-primary,
.landing-page-partner .landing-cta-primary {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.55);
    color: #fff;
    box-shadow:
        0 0 18px rgba(52, 211, 153, 0.26),
        0 0 36px rgba(52, 211, 153, 0.12),
        inset 0 0 0 1px rgba(110, 231, 183, 0.12);
}

#partner .landing-cta-primary:hover,
.network-partner .landing-cta-primary:hover,
.landing-page-partner .landing-cta-primary:hover {
    border-color: rgba(110, 231, 183, 0.7);
    background: rgba(52, 211, 153, 0.14);
    box-shadow:
        0 0 24px rgba(52, 211, 153, 0.38),
        0 0 48px rgba(52, 211, 153, 0.18),
        inset 0 0 0 1px rgba(110, 231, 183, 0.2);
}

#partner .landing-cta-primary:focus-visible,
.network-partner .landing-cta-primary:focus-visible,
.landing-page-partner .landing-cta-primary:focus-visible {
    outline-color: var(--landing-partner-bright);
}

/* Wallet product primary — glowing border like .eco-node-wallet; Partner green + global cyan unchanged */
#wallet .landing-cta-primary,
.network-wallet .landing-cta-primary,
.landing-page-wallet .landing-cta-primary {
    background: rgba(192, 132, 252, 0.1);
    border: 1px solid rgba(192, 132, 252, 0.55);
    color: #fff;
    box-shadow:
        0 0 18px rgba(192, 132, 252, 0.26),
        0 0 36px rgba(192, 132, 252, 0.12),
        inset 0 0 0 1px rgba(163, 177, 255, 0.12);
}

#wallet .landing-cta-primary:hover,
.network-wallet .landing-cta-primary:hover,
.landing-page-wallet .landing-cta-primary:hover {
    border-color: rgba(163, 177, 255, 0.7);
    background: rgba(192, 132, 252, 0.14);
    box-shadow:
        0 0 24px rgba(192, 132, 252, 0.38),
        0 0 48px rgba(192, 132, 252, 0.18),
        inset 0 0 0 1px rgba(163, 177, 255, 0.2);
}

#wallet .landing-cta-primary:focus-visible,
.network-wallet .landing-cta-primary:focus-visible,
.landing-page-wallet .landing-cta-primary:focus-visible {
    outline-color: var(--landing-periwinkle);
}

.landing-cta-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--landing-text);
}

.landing-cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.landing-hero-meta {
    margin: 1.15rem 0 0;
    font-size: 0.72rem;
    color: var(--landing-dim);
}

.landing-hero-visual {
    flex: 0 1 22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: min(100%, 16rem);
    max-width: 24rem;
}

.landing-hero-stage {
    position: relative;
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 3 / 4.15;
    min-height: 28rem;
    max-height: 38rem;
    padding: 1.5rem 1.15rem 1.35rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(175deg, rgba(15, 23, 42, 0.94) 0%, rgba(5, 10, 24, 0.97) 100%);
    box-shadow:
        0 24px 56px rgba(9, 14, 43, 0.58),
        0 0 40px rgba(34, 211, 238, 0.08),
        0 0 60px rgba(168, 85, 247, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.landing-hero-stage-glow {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 36% at 50% 28%, rgba(34, 211, 238, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 48% 34% at 50% 82%, rgba(168, 85, 247, 0.16) 0%, transparent 68%);
    animation: glow-drift 10s ease-in-out infinite alternate;
}

/* Hero portrait network diagram */
.eco-network {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
}

.eco-network-glow {
    position: absolute;
    inset: 8% 12%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 26%, rgba(34, 211, 238, 0.14), transparent 42%),
        radial-gradient(circle at 58% 78%, rgba(192, 132, 252, 0.12), transparent 46%);
    filter: blur(8px);
}

/* Curved cubic Bezier side connectors with marching dashes */
.eco-portrait-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

.eco-link {
    stroke-dasharray: 6 5;
    animation: eco-link-flow 3.2s linear infinite;
}

.eco-link-retail {
    animation-delay: 0.7s;
}

.eco-spine {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
}

.eco-loop {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    flex: 0 0 auto;
    margin-top: 0.85rem;
}

.eco-node {
    position: relative;
    width: 100%;
    max-width: 11.5rem;
    padding: 0.78rem 0.85rem;
    text-align: center;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.eco-spine .eco-node {
    flex: 0 0 auto;
}

.eco-loop .eco-node {
    flex: 1 1 0;
    max-width: 8.75rem;
    min-width: 0;
}

.eco-node-core {
    max-width: 12.5rem;
    padding: 0.95rem 1rem;
    border-color: rgba(34, 211, 238, 0.55);
    background: rgba(34, 211, 238, 0.1);
    box-shadow:
        0 0 18px rgba(34, 211, 238, 0.28),
        0 0 36px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(103, 232, 249, 0.12);
}

.eco-node-wallet {
    border-color: rgba(163, 177, 255, 0.55);
    background: rgba(129, 140, 248, 0.12);
    box-shadow:
        0 0 18px rgba(168, 85, 247, 0.22),
        0 0 36px rgba(129, 140, 248, 0.12),
        inset 0 0 0 1px rgba(192, 132, 252, 0.12);
}

.eco-node-partner {
    border-color: rgba(52, 211, 153, 0.55);
    background: rgba(52, 211, 153, 0.1);
    box-shadow:
        0 0 18px rgba(52, 211, 153, 0.26),
        0 0 36px rgba(52, 211, 153, 0.12),
        inset 0 0 0 1px rgba(110, 231, 183, 0.12);
}

.eco-node-halo {
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.28), transparent 68%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
    animation: glow-pulse 6s ease-in-out infinite;
}

.eco-node-halo-wallet {
    background: radial-gradient(circle, rgba(192, 132, 252, 0.3), transparent 68%);
    animation-delay: 0.8s;
}

.eco-node-halo-partner {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.3), transparent 68%);
    animation-delay: 0.4s;
}

.eco-node-label {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    line-height: 1.25;
}

.eco-node-core .eco-node-label {
    font-size: 0.92rem;
}

.eco-arrow {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.85;
    background:
        linear-gradient(90deg, transparent 0%, #67e8f9 40%, #67e8f9 60%, transparent 100%);
    clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%);
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55));
}

.eco-arrow-down {
    width: 0.72rem;
    height: 0.95rem;
    background:
        linear-gradient(180deg, transparent 0%, #67e8f9 35%, #67e8f9 65%, transparent 100%);
    clip-path: polygon(35% 0, 65% 0, 65% 55%, 100% 55%, 50% 100%, 0 55%, 35% 55%);
}

.eco-arrow-bi {
    width: 1.25rem;
    height: 0.9rem;
    background: linear-gradient(90deg, #c084fc, #a3b1ff 50%, #c084fc);
    clip-path: polygon(
        0 50%, 28% 15%, 28% 38%, 72% 38%, 72% 15%, 100% 50%,
        72% 85%, 72% 62%, 28% 62%, 28% 85%
    );
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.5));
}

@keyframes eco-link-flow {
    from { stroke-dashoffset: 22; }
    to { stroke-dashoffset: 0; }
}

@media (max-width: 720px) {
    .landing-hero-visual {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }

    .landing-hero-stage {
        max-width: 20rem;
        aspect-ratio: 3 / 3.85;
        min-height: 24rem;
        max-height: 32rem;
        margin-inline: auto;
    }

    .eco-portrait-links {
        opacity: 0.75;
    }
}

/* Section ecosystem flow (linear) */
.eco-flow {
    width: 100%;
}

.eco-flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    align-items: stretch;
}

.eco-flow-node {
    position: relative;
    flex: 1 1 6.5rem;
    min-width: 5.5rem;
    max-width: 9rem;
    padding: 1rem 0.75rem;
    text-align: center;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.eco-flow-node::after {
    content: "→";
    position: absolute;
    right: -0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--landing-cyan);
    font-size: 0.85rem;
    opacity: 0.7;
}

.eco-flow-node:last-child::after {
    display: none;
}

.eco-flow-node-core {
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.15);
}

.eco-flow-node-partner {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.09);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.14);
}

.eco-flow-node-accent {
    border-color: rgba(129, 140, 248, 0.4);
    background: rgba(129, 140, 248, 0.1);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.12);
}

.eco-flow-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

@media (max-width: 720px) {
    .eco-flow-node::after {
        content: "↓";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -0.85rem;
        transform: translateX(-50%);
    }

    .eco-flow-list {
        flex-direction: column;
        align-items: stretch;
    }

    .eco-flow-node {
        max-width: none;
    }

    .landing-hero-inner {
        padding: 4.25rem 1.5rem clamp(3.5rem, 7vw, 5.5rem);
    }

    /* ecosystem / what / how keep .landing-section rhythm (no tighter mobile pad) */

    .landing-hero-lockup {
        gap: 1.25rem;
    }

    .landing-hero-mark {
        width: clamp(5rem, 28vw, 6.5rem);
    }
}

/* Proof → why → contact CTA — one continuous band (footer stays outside) */
.landing-closing {
    position: relative;
    background:
        radial-gradient(ellipse 58% 42% at 50% 18%, rgba(15, 23, 42, 0.95) 0%, transparent 72%),
        radial-gradient(ellipse 48% 36% at 78% 88%, rgba(34, 211, 238, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 42% 30% at 18% 72%, rgba(168, 85, 247, 0.07) 0%, transparent 68%),
        linear-gradient(180deg, #0a1224 0%, #050a18 55%, #030712 100%);
}

.landing-closing .landing-section {
    background: transparent;
}

/* #proof / #why — center heads (and proof rail) like #how / #what / network */
.landing-closing #proof .section-head,
.landing-closing #why .section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.landing-closing #proof .section-head p {
    margin-left: auto;
    margin-right: auto;
}

.landing-closing #proof .proof-label {
    text-align: center;
}

.landing-closing #proof .brand-rail {
    justify-content: center;
    text-align: center;
}

.landing-closing #why .why-grid {
    margin-left: auto;
    margin-right: auto;
}

/* Sections */
.landing-section {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.landing-section-alt {
    background: rgba(15, 23, 42, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Thin cyan→purple neon rule — section tops / between major blocks */
.neon-divider {
    display: block;
    width: min(100%, 42rem);
    height: 1.5px;
    margin: 0 auto 2rem;
    border: 0;
    background: var(--landing-neon-line);
    box-shadow: var(--landing-neon-bloom);
    opacity: 0.9;
}

.neon-divider-wide {
    width: min(100%, 80rem);
    margin-left: auto;
    margin-right: auto;
}

.landing-section-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.landing-section-narrow {
    max-width: 42rem;
}

.section-head {
    margin-bottom: 2rem;
    max-width: 40rem;
}

.section-head-tight {
    margin-bottom: 1.5rem;
}

.section-head h2,
.page-hero h1,
.landing-section h2,
.landing-hero-network h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.65rem, 3.5vw, 2.25rem);
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #fff;
}

.section-head p,
.split-feature p,
.section-body {
    margin: 0;
    color: var(--landing-muted);
    line-height: 1.55;
    font-size: 1.05rem;
}

.section-kicker {
    color: var(--landing-periwinkle) !important;
    font-weight: 600;
}

.section-body {
    margin-top: 1rem;
}

.section-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--landing-dim);
}

/* Home #network — standalone full-bleed black constellation (outside hero atmosphere) */
.landing-hero-network {
    position: relative;
    z-index: 1;
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    overflow: hidden;
    isolation: isolate;
    background: #000;
    min-height: clamp(22rem, 42vw, 32rem);
}

.landing-hero-network .network-section-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #000;
}

.landing-hero-network .network-glow {
    z-index: 0;
    background:
        radial-gradient(ellipse 42% 34% at 72% 36%, rgba(34, 211, 238, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 38% 32% at 48% 48%, rgba(168, 85, 247, 0.08) 0%, transparent 72%),
        radial-gradient(ellipse 36% 28% at 82% 68%, rgba(34, 211, 238, 0.06) 0%, transparent 74%);
    animation: glow-drift 14s ease-in-out infinite alternate;
}

.retail-network-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.92;
}

.rn-drift-a {
    animation: rn-mesh-drift 22s ease-in-out infinite alternate;
    transform-origin: 60% 45%;
}

.rn-drift-b {
    animation: rn-mesh-drift-alt 28s ease-in-out infinite alternate;
    transform-origin: 70% 40%;
}

.rn-link-flow {
    stroke-dasharray: 6 10;
    animation: rn-link-march 16s linear infinite;
}

.rn-link-delay {
    animation-duration: 22s;
    animation-direction: reverse;
    animation-delay: -5s;
}

.rn-node.rn-pulse,
.rn-hub.rn-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: rn-node-pulse 4.2s ease-in-out infinite;
}

.rn-pulse-2 {
    animation-duration: 5.4s;
    animation-delay: -1.4s;
}

.rn-pulse-3 {
    animation-duration: 6.2s;
    animation-delay: -2.8s;
}

.rn-hub-ring {
    animation-name: rn-ring-pulse;
    animation-duration: 5.6s;
}

.rn-bloom {
    transform-box: fill-box;
    transform-origin: center;
}

.rn-bloom-pulse {
    animation: rn-bloom-breathe 7s ease-in-out infinite;
}

.rn-bloom-delay {
    animation-delay: -2.5s;
    animation-duration: 8.5s;
}

.rn-bloom-delay-2 {
    animation-delay: -4.5s;
    animation-duration: 9.5s;
}

.landing-hero-network .network-section-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            105deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.66) 36%,
            rgba(0, 0, 0, 0.22) 64%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.45) 0%,
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.52) 100%
        );
}

.landing-hero-network .landing-section-inner {
    position: relative;
    z-index: 2;
}

.network-feature {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}

.network-feature-copy,
.network-product {
    text-shadow: 0 1px 18px rgba(5, 10, 24, 0.85);
}

.network-feature-copy .section-head,
.network-feature-copy .section-body,
.network-feature-copy .section-note,
.network-feature .section-cta-row {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.network-feature-copy .section-body {
    margin-top: 0;
}

.network-feature-copy .section-note {
    max-width: 36rem;
}

.network-feature .section-cta-row {
    justify-content: center;
}

/* Partner / Wallet nested in #network — full-width of section inner; share constellation bg */
.landing-hero-network .network-product {
    width: 100%;
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    text-align: center;
}

.landing-hero-network .network-product > h2,
.landing-hero-network .network-product > p {
    text-align: center;
}

.landing-hero-network .network-product > p {
    margin: 0;
    color: var(--landing-muted);
    line-height: 1.55;
    font-size: 1.05rem;
}

.landing-hero-network .network-product .section-cta-row {
    margin-top: 1.35rem;
    gap: 1rem;
    justify-content: center;
    text-align: center;
}

@keyframes rn-mesh-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(10px, -8px) scale(1.015); }
}

@keyframes rn-mesh-drift-alt {
    from { transform: translate(0, 0); }
    to { transform: translate(-8px, 6px); }
}

@keyframes rn-link-march {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -128; }
}

@keyframes rn-node-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }
}

@keyframes rn-ring-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }

    50% {
        opacity: 0.65;
        transform: scale(1.2);
    }
}

@keyframes rn-bloom-breathe {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.12);
    }
}

.section-cta-row {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Home: three sides of the ecosystem (not the network diagram) */
.eco-sides {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 800px) {
    .eco-sides {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
}

.eco-side {
    padding: 0.15rem 0 0.25rem;
}

@media (min-width: 800px) {
    .eco-side {
        padding: 0.15rem 1.75rem;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .eco-side:first-child {
        padding-left: 0;
        border-left: none;
    }

    .eco-side:last-child {
        padding-right: 0;
    }
}

.eco-side h3 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.eco-side p {
    margin: 0 0 0.9rem;
    color: var(--landing-muted);
    line-height: 1.5;
    font-size: 0.98rem;
}

@media (max-width: 799px) {
    .eco-side {
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .eco-side:first-child {
        padding-top: 0;
        border-top: none;
    }
}

.page-hero {
    padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
    background:
        radial-gradient(ellipse 50% 40% at 20% 0%, rgba(34, 211, 238, 0.1), transparent 60%),
        var(--landing-navy-deep);
}

.landing-page-partner .page-hero {
    background:
        radial-gradient(ellipse 50% 40% at 20% 0%, rgba(52, 211, 153, 0.12), transparent 60%),
        var(--landing-navy-deep);
}

.page-hero .landing-lead {
    margin-top: 0.85rem;
}

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

@media (min-width: 768px) {
    .how-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .how-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.how-steps li {
    padding: 1.35rem 1.15rem 1.15rem;
    background: transparent;
}

.how-steps strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: 1rem;
}

.how-steps span {
    color: var(--landing-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.gain-list,
.two-col ul {
    margin: 1rem 0 1.25rem;
    padding-left: 1.1rem;
    color: var(--landing-muted);
    line-height: 1.55;
}

.gain-list li + li,
.two-col li + li {
    margin-top: 0.4rem;
}

.text-link {
    color: var(--landing-cyan-bright);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.text-link:hover {
    text-decoration: underline;
}

.brand-rail {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.25rem;
}

.brand-rail li {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(232, 238, 252, 0.78);
    font-size: 0.95rem;
}

.proof-label {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--landing-dim);
    font-weight: 700;
}

.why-grid {
    display: grid;
    gap: 1.75rem;
}

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

.why-grid h3 {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: 1.1rem;
}

.why-grid p {
    margin: 0;
    color: var(--landing-muted);
    line-height: 1.5;
}

.landing-final-cta {
    text-align: center;
}

.landing-final-cta .landing-ctas {
    justify-content: center;
}

.landing-final-cta p {
    color: var(--landing-muted);
    max-width: 32rem;
    margin: 0 auto 2.25rem;
}

.split-feature h2 {
    margin-bottom: 0.75rem;
}

.feature-list {
    display: grid;
    gap: 1.75rem;
}

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

.feature-list article h2 {
    font-size: 1.2rem;
    margin-bottom: 0.45rem;
}

.feature-list article p {
    margin: 0;
    color: var(--landing-muted);
    line-height: 1.5;
}

.two-col {
    display: grid;
    gap: 2rem;
}

@media (min-width: 800px) {
    .two-col {
        grid-template-columns: 1fr 1fr;
    }
}

.layer-stack {
    display: grid;
    gap: 1.25rem;
}

.layer-card {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.layer-card h2 {
    font-size: 1.35rem;
}

.layer-card p {
    color: var(--landing-muted);
    line-height: 1.5;
    margin: 0.45rem 0;
}

.layer-label {
    display: inline-block;
    min-width: 5.5rem;
    color: var(--landing-cyan-bright);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.35rem;
}

.layer-card-core {
    border-left: 3px solid var(--landing-cyan);
    padding-left: 1rem;
}

.layer-card-partner {
    border-left: 3px solid var(--landing-partner);
    padding-left: 1rem;
}

.layer-card-partner .layer-label {
    color: var(--landing-partner-bright);
}

.layer-card-accent {
    border-left: 3px solid var(--landing-accent);
    padding-left: 1rem;
}

.contact-paths {
    display: grid;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 800px) {
    .contact-paths {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-paths article h2 {
    font-size: 1.2rem;
}

.contact-paths p {
    color: var(--landing-muted);
    margin: 0.5rem 0 1rem;
    line-height: 1.45;
}

.contact-emails {
    color: var(--landing-muted);
}

.contact-emails a {
    color: var(--landing-cyan-bright);
}

/* Footer */
.landing-footer {
    background: var(--landing-navy-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3.5rem 0 0;
}

.landing-footer-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.landing-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.landing-footer-brand-link {
    text-decoration: none;
}

.landing-footer-product {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.landing-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    font-size: 0.88rem;
    color: #6b7280;
}

.landing-footer-nav a {
    text-decoration: none;
}

.landing-footer-nav a:hover {
    color: #d1d5db;
}

.landing-footer .fund-strip {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem 1.15rem;
    border-radius: 1rem;
    background: #1a2744;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.landing-footer .fund-strip-link {
    display: block;
}

.landing-footer .fund-strip-img {
    display: block;
    width: 100%;
    max-height: 100px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.landing-footer .fund-strip-text {
    margin: 0.9rem 0 0;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #9ca3af;
}

.landing-footer-copy {
    margin: 0;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-size: 0.75rem;
    color: #4b5563;
}

.landing-legal-main {
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.landing-legal-main p {
    color: var(--landing-muted);
    line-height: 1.6;
}

/* Motion */
.reveal {
    animation: rise-in 0.7s ease-out both;
}

.reveal-1 { animation-delay: 0.1s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.26s; }
.reveal-4 { animation-delay: 0.34s; }

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(0.85rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes glow-drift {
    from { opacity: 0.85; }
    to { opacity: 1; }
}

@keyframes drift {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

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

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .landing-hero-glow,
    .landing-hero-stage-glow,
    .landing-hero-mark-halo,
    .ambient-orb,
    .eco-node-halo,
    .eco-link,
    .landing-hero-network .network-glow,
    .rn-drift-a,
    .rn-drift-b,
    .rn-link-flow,
    .rn-node.rn-pulse,
    .rn-hub.rn-pulse,
    .rn-bloom-pulse {
        animation: none !important;
    }

    .rn-link-flow {
        stroke-dasharray: none;
    }
}

/* ── IntalePoint — store badges, outcome hero, kinetic stage ── */

.landing-title-product {
    display: block;
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--landing-cyan-bright);
    margin-top: 0.2rem;
}

.landing-tagline-outcome {
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--landing-text);
    max-width: 28rem;
}

.landing-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.landing-store-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(34, 211, 238, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

.landing-store-fa {
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    width: 1.5rem;
    text-align: center;
}

.landing-store-text {
    display: grid;
    gap: 0.2rem;
    text-align: left;
}

.landing-store-label {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--landing-muted);
    margin-bottom: 0.15rem;
}

.landing-store-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.landing-footer-product .landing-brand-product {
    margin-left: 0.35rem;
    color: var(--landing-cyan-bright);
    font-weight: 600;
}

/* Kinetic “day in the store” stage */
.store-stage {
    position: relative;
    width: min(100%, 22rem);
    height: 28rem;
    margin: 0 auto;
    border-radius: 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(129, 140, 248, 0.18), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(34, 211, 238, 0.14), transparent 50%),
        linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(5, 10, 24, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 40px rgba(34, 211, 238, 0.12),
        0 0 80px rgba(168, 85, 247, 0.1);
}

.store-stage-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 40% 40%, rgba(34, 211, 238, 0.2), transparent 45%);
    animation: store-stage-breathe 8s ease-in-out infinite;
    pointer-events: none;
}

.store-stage-shelf {
    position: absolute;
    top: 12%;
    left: 10%;
    right: 10%;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
}

.store-stage-shelf-item {
    flex: 1;
    height: 3.2rem;
    border-radius: 0.45rem;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.25), rgba(148, 163, 184, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: store-shelf-pulse 12s ease-in-out infinite;
}

.store-stage-shelf-item:nth-child(2) { animation-delay: 1.5s; }
.store-stage-shelf-item:nth-child(3) { animation-delay: 3s; }
.store-stage-shelf-item:nth-child(4) { animation-delay: 4.5s; }

.store-stage-counter {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 22%;
    height: 38%;
    border-radius: 1rem 1rem 0.4rem 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.store-stage-pulse {
    position: absolute;
    border-radius: 999px;
    opacity: 0;
    filter: blur(1px);
}

.store-stage-pulse-stock {
    width: 4rem;
    height: 4rem;
    left: 12%;
    top: 18%;
    background: rgba(34, 211, 238, 0.55);
    animation: store-beat 12s ease-in-out infinite;
}

.store-stage-pulse-order {
    width: 3.2rem;
    height: 3.2rem;
    left: 42%;
    top: 28%;
    background: rgba(168, 85, 247, 0.55);
    animation: store-beat 12s ease-in-out infinite 3s;
}

.store-stage-pulse-till {
    width: 5rem;
    height: 2.4rem;
    left: 28%;
    bottom: 18%;
    border-radius: 0.6rem;
    background: rgba(129, 140, 248, 0.6);
    animation: store-beat 12s ease-in-out infinite 6s;
}

.store-stage-pulse-label {
    width: 2.4rem;
    height: 2.4rem;
    right: 14%;
    top: 22%;
    background: rgba(217, 70, 239, 0.5);
    animation: store-beat 12s ease-in-out infinite 9s;
}

.store-stage-beats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    margin: 0;
    padding: 0 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
}

.store-stage-beat {
    flex: 1;
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--landing-dim);
    opacity: 0.45;
    transition: color 0.3s ease, opacity 0.3s ease;
    animation: store-beat-label 12s ease-in-out infinite;
}

.store-stage-beat.is-order { animation-delay: 3s; }
.store-stage-beat.is-till { animation-delay: 6s; }
.store-stage-beat.is-label { animation-delay: 9s; }

@keyframes store-stage-breathe {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes store-shelf-pulse {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 12px rgba(34, 211, 238, 0.25); }
}

@keyframes store-beat {
    0%, 12%, 100% { opacity: 0; transform: scale(0.7); }
    18%, 28% { opacity: 0.9; transform: scale(1); }
    36% { opacity: 0; transform: scale(1.15); }
}

@keyframes store-beat-label {
    0%, 12%, 100% { opacity: 0.35; color: var(--landing-dim); }
    18%, 28% { opacity: 1; color: var(--landing-cyan-bright); }
    36% { opacity: 0.4; color: var(--landing-dim); }
}

/* Persona vignettes — one idea each, no card grid spam */
.point-vignettes .landing-section-inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    max-width: 40rem;
}

.point-vignette h2 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    letter-spacing: -0.02em;
}

.point-vignette p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--landing-muted);
}

.point-vignette-market h2 { color: var(--landing-cyan-bright); }
.point-vignette-cafe h2 { color: var(--landing-purple-bright); }
.point-vignette-retail h2 { color: var(--landing-periwinkle); }

.setups-pillars article + article {
    margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .store-stage-glow,
    .store-stage-shelf-item,
    .store-stage-pulse,
    .store-stage-beat {
        animation: none !important;
    }

    .store-stage-pulse {
        opacity: 0.45;
    }

    .store-stage-beat {
        opacity: 0.85;
        color: var(--landing-muted);
    }
}