/* =====================================================================================================
   NeuroShrub — public landing page: full-screen hero (data-center art → dark overlay → violet tint → content),
   slow layered motion, feature cards and the final call to action.
   ===================================================================================================== */

.landing-main { padding: 0; }

/* ---- Hero ---- */
.landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(100svh - 64px, 980px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0 2rem;
    border-bottom: 1px solid var(--ai-border-soft);
}
.landing-hero__bg {
    position: absolute;
    inset: -4%;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(9, 6, 17, .97) 0%, rgba(9, 6, 17, .82) 42%, rgba(20, 10, 40, .45) 100%),
        linear-gradient(0deg, var(--ai-bg) 2%, rgba(9, 6, 17, 0) 40%),
        url("../images/game/hero/ai-hero-datacenter.svg") center / cover no-repeat;
    animation: ai-slow-zoom 38s ease-in-out infinite alternate;
    will-change: transform;
}
.landing-hero::before { /* violet tint */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(55% 70% at 72% 42%, rgba(124, 58, 237, .32), transparent 70%);
    pointer-events: none;
}
.landing-hero__particles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.landing-hero__grid { z-index: -1; height: 42%; opacity: .7; }
.landing-hero__row { min-height: 58vh; }

.landing-hero__title {
    font-size: clamp(2.6rem, 1.6rem + 5vw, 5.4rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: .04em;
    margin-bottom: 1.25rem;
    color: #fff;
    text-shadow: 0 0 40px rgba(124, 58, 237, .35);
}
.landing-hero__title span {
    display: block;
    background: linear-gradient(90deg, var(--ai-violet-pale), var(--ai-violet-soft) 45%, var(--ai-violet-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(139, 92, 246, .55));
}
.landing-hero__lead { font-size: clamp(1rem, .95rem + .3vw, 1.18rem); color: var(--ai-text-secondary); max-width: 38rem; margin-bottom: 1.75rem; }

/* About page growth path: one node → one branch → a network → an AI empire. */
.brand-path { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: step; }
.brand-path li { position: relative; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border: 1px solid var(--ai-border); border-inline-start: 2px solid var(--ai-violet-soft); background: rgba(124, 58, 237, .06); font-family: var(--ai-font-display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; counter-increment: step; }
.brand-path li::before { content: "0" counter(step); color: var(--ai-violet-soft); font-size: .8rem; }
.brand-path li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 1.55rem; bottom: -.55rem; width: 1px; height: .55rem; background: var(--ai-violet-soft); }
.brand-path li:last-child { border-color: var(--ai-violet-soft); background: rgba(124, 58, 237, .16); color: #fff; }

/* NeuroShrub brand line above the headline, the tagline as a strong brand line, and the growth path. */
.landing-brandline { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-family: var(--ai-font-display); font-size: .95rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--ai-violet-pale); }
.landing-brandline__mark { width: 1.9rem; height: 1.9rem; filter: drop-shadow(0 0 10px rgba(139, 92, 246, .6)); }
.landing-tagline {
    margin: -.35rem 0 1.25rem;
    font-family: var(--ai-font-display);
    font-size: clamp(1rem, .8rem + .9vw, 1.45rem);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #fff, var(--ai-violet-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.landing-path { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .35rem 1.75rem; padding: 0; margin: 0 0 1.25rem; list-style: none; font-size: .95rem; color: var(--ai-text); }
.landing-path li { display: flex; align-items: center; gap: .55rem; }
.landing-path li::before { content: ""; flex: none; width: .5rem; height: .5rem; transform: rotate(45deg); background: var(--ai-violet-soft); box-shadow: 0 0 8px rgba(167, 139, 250, .8); }
@media (max-width: 575.98px) { .landing-path { grid-template-columns: 1fr; } }

/* Headline reveal on load (pure CSS, staggered via --d). */
.landing-reveal { animation: ai-reveal-text .8s var(--ai-ease) both; animation-delay: var(--d, 0s); }

/* Primary CTA breathes a little light. */
.landing-cta-glow { position: relative; }
.landing-cta-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    box-shadow: inset 0 0 24px rgba(255, 255, 255, .35);
    animation: ai-glow-breathe 3.2s ease-in-out infinite;
}

/* AI core centerpiece with orbiting labels. */
.landing-core { position: relative; width: min(100%, 30rem); margin-inline: auto; aspect-ratio: 1; }
.landing-core__img { width: 100%; height: 100%; animation: ai-float 7s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(124, 58, 237, .45)); }
.landing-core__label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    font-family: var(--ai-font-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ai-text);
    background: rgba(9, 6, 17, .8);
    border: 1px solid var(--ai-border);
    border-inline-start: 2px solid var(--ai-violet-soft);
    animation: ai-float 6s ease-in-out infinite;
}
.landing-core__label--a { top: 14%; inset-inline-start: -4%; }
.landing-core__label--b { top: 46%; inset-inline-end: -6%; animation-delay: -2s; }
.landing-core__label--c { bottom: 12%; inset-inline-start: 6%; animation-delay: -4s; }

/* Live stats strip */
.landing-stats { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.stat-pill {
    display: flex;
    align-items: center;
    gap: .8rem;
    height: 100%;
    padding: .8rem 1rem;
    background: rgba(13, 9, 24, .78);
    border: 1px solid var(--ai-border);
    border-top: 2px solid var(--ai-violet-bright);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.stat-pill > .bi { font-size: 1.3rem; color: var(--ai-violet-soft); }
.stat-pill-value { font-family: var(--ai-font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.stat-pill-label { font-size: .78rem; color: var(--ai-text-muted); }

/* ---- Sections ---- */
.landing-section { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; border-top: 1px solid var(--ai-border-soft); }
.landing-section:first-child { border-top: 0; }
.landing-heading { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; letter-spacing: .06em; margin-bottom: .5rem; }
.landing-sub { color: var(--ai-text-muted); margin-bottom: 1.5rem; max-width: 720px; }

.step-number { font-family: var(--ai-font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ai-violet-soft); letter-spacing: .06em; }
@media (hover: hover) { .step-card:hover .step-number { color: rgba(139, 92, 246, .25); } }

.feature-card { display: flex; flex-direction: column; padding: 1.25rem; }
.feature-card__icon { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; font-size: 1.3rem; color: var(--ai-accent); border: 1px solid color-mix(in srgb, var(--ai-accent) 55%, transparent); background: color-mix(in srgb, var(--ai-accent) 12%, transparent); transform: rotate(45deg); transition: transform .5s var(--ai-ease), box-shadow .4s ease; }
.feature-card__icon > .bi { transform: rotate(-45deg); }
.feature-card__title { font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; }
.feature-card__figure { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--ai-border-soft); font-family: var(--ai-font-display); font-weight: 600; color: var(--ai-text); letter-spacing: .04em; }
@media (hover: hover) {
    .feature-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ai-accent) 60%, var(--ai-border)); box-shadow: 0 0 30px color-mix(in srgb, var(--ai-accent) 22%, transparent); }
    .feature-card:hover .feature-card__icon { transform: rotate(135deg); box-shadow: 0 0 18px color-mix(in srgb, var(--ai-accent) 50%, transparent); }
}

/* Economic loop as a connected track */
.loop-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; counter-reset: loop; }
.loop-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .9rem .5rem; text-align: center; background: var(--ai-panel); border: 1px solid var(--ai-border); }
.loop-step > .bi { font-size: 1.4rem; color: var(--ai-violet-soft); }
.loop-step__label { font-family: var(--ai-font-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ai-text); font-size: .85rem; }
.loop-step__hint { font-size: .75rem; color: var(--ai-text-muted); }
.loop-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; inset-inline-end: -.5rem; width: .5rem; height: 2px; background: var(--ai-violet-soft); box-shadow: 0 0 6px var(--ai-violet-bright); }
@media (max-width: 1199.98px) { .loop-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } .loop-step::after { display: none; } }
@media (max-width: 575.98px) { .loop-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tier-track { display: grid; gap: .4rem; }
.tier-track__row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .75rem; padding: .55rem .8rem; background: var(--ai-panel); border: 1px solid var(--ai-border); transition: var(--ai-transition); }
.tier-track__row:hover { border-color: var(--ai-violet-soft); transform: translateX(4px); }
.tier-track__name { color: var(--ai-text); font-weight: 500; }
.tier-track__gen { font-family: var(--ai-font-display); font-size: .75rem; letter-spacing: .14em; color: var(--ai-text-muted); text-transform: uppercase; }
@media (max-width: 575.98px) { .tier-track__row { grid-template-columns: 1fr auto; } .tier-track__row .ai-tier { grid-column: 1 / -1; justify-self: start; } }
.landing-tree { display: block; width: 100%; max-width: 26rem; }
.landing-optional { border-top: 2px solid var(--ai-text-muted); }
.landing-rule { background: rgba(13, 9, 24, .6); border: 1px solid var(--ai-border); }

/* ---- Final call to action ---- */
.landing-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.5rem, 3rem + 4vw, 7rem) 0;
    border-top: 1px solid var(--ai-border-soft);
    background: radial-gradient(60% 80% at 50% 100%, rgba(124, 58, 237, .32), transparent 70%);
}
.landing-cta .ai-grid-floor { z-index: -1; height: 75%; }
.landing-cta__title { font-size: clamp(1.6rem, 1.1rem + 2.5vw, 3rem); font-weight: 700; letter-spacing: .06em; max-width: 52rem; margin: 0 auto 1rem; }

@media (max-width: 767.98px) {
    .landing-hero { min-height: auto; }
    .landing-hero__row { min-height: 0; }
    .landing-hero__particles { opacity: .3; }
    .landing-hero__grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-hero__bg, .landing-core__img, .landing-core__label, .landing-cta-glow::after { animation: none !important; }
}