/* ================================================================
   MP-WEB-001 · Mi-PA Website · style.css
   Core design system: tokens, layout, components.
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
    /* Palette */
    --bg:               #090B10;
    --bg-2:             #11161D;
    --green:            #6AC800;   /* primary   */
    --green-accent:     #23B34A;   /* accent    */
    --green-highlight:  #A6FF00;   /* highlight */
    --white:            #FFFFFF;
    --muted:            #C6CCD6;
    --border:           rgba(255, 255, 255, .08);
    --border-strong:    rgba(255, 255, 255, .14);

    /* Surfaces */
    --glass-bg:         rgba(255, 255, 255, .035);
    --glass-bg-hover:   rgba(255, 255, 255, .06);

    /* Brand gradient */
    --grad-brand:       linear-gradient(120deg, var(--green-highlight) 0%, var(--green) 45%, var(--green-accent) 100%);

    /* Typography */
    --font-head:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type scale (fluid) */
    --fs-hero:          clamp(2.6rem, 6vw, 4.6rem);
    --fs-h2:            clamp(1.9rem, 3.4vw, 3rem);
    --fs-h3:            1.25rem;
    --fs-lead:          clamp(1.05rem, 1.6vw, 1.25rem);
    --fs-body:          1rem;
    --fs-sm:            .875rem;

    /* Spacing */
    --space-section:    clamp(5rem, 10vw, 9rem);
    --radius:           18px;
    --radius-lg:        26px;
    --radius-pill:      999px;

    /* Effects */
    --shadow-soft:      0 20px 50px -20px rgba(0, 0, 0, .55);
    --shadow-glow:      0 0 60px -12px rgba(106, 200, 0, .45);
    --blur:             saturate(160%) blur(14px);

    /* Layout */
    --container:        1200px;
    --nav-h:            76px;

    /* Motion */
    --ease:             cubic-bezier(.22, .61, .36, 1);
    --dur:              .45s;
}

/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--muted);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* ----------------------------------------------------------------
   GLOBAL BACKDROP
   The fixed Mi-PA brand environment. Two layers in one element:
     1) a tuned dark gradient overlay (keeps white text readable)
     2) the brand artwork itself
   A solid base colour fills any letterbox area on extreme aspect
   ratios. position:fixed keeps it anchored while content scrolls.
   ---------------------------------------------------------------- */
.site-backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(5, 8, 11, .48), rgba(5, 8, 11, .66)),
        url("../images/mipa-brand.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;         /* overlay covers; artwork covers */
}

/* Portrait / narrow screens: `cover` would crop the wide wordmark badly,
   so the artwork switches to `contain` (overlay still covers the viewport)
   and sits in the upper-middle, staying fully recognisable. */
@media (max-width: 860px), (max-aspect-ratio: 4 / 5) {
    .site-backdrop {
        background-size: cover, contain;
        background-position: center center, center 26%;
    }
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--white);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 600;
}

p { text-wrap: pretty; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

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

button { font-family: inherit; cursor: pointer; border: none; background: none; }

ul { list-style: none; }

/* ----------------------------------------------------------------
   3. UTILITIES
   ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero accent line — brighter, more luminous gradient plus a soft green
   glow so "Every Business Process." feels alive over the artwork. */
.hero__title .text-gradient {
    background: linear-gradient(100deg, #C8FF57 0%, #A6FF00 32%, #7BE000 62%, #34D24E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(166, 255, 0, .35));
}

.sr-only,
.skip-link {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 12px; left: 12px;
    width: auto; height: auto;
    padding: .7rem 1.1rem;
    clip: auto;
    z-index: 1000;
    background: var(--green);
    color: var(--bg);
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green-highlight);
    padding: .4rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: rgba(166, 255, 0, .05);
    margin-bottom: 1.25rem;
}

/* Glassmorphism surface */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

/* ----------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------- */
.btn {
    --btn-py: .8rem;
    --btn-px: 1.4rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: var(--btn-py) var(--btn-px);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .01em;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    overflow: hidden;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
    isolation: isolate;
}

.btn--primary {
    background: var(--grad-brand);
    color: var(--bg);
    box-shadow: 0 10px 30px -12px rgba(106, 200, 0, .6);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px rgba(106, 200, 0, .8);
}

.btn--ghost {
    background: var(--glass-bg);
    color: var(--white);
    border-color: var(--border-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}
.btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    background: var(--glass-bg-hover);
}

.btn--sm  { --btn-py: .55rem; --btn-px: 1.05rem; font-size: .82rem; }
.btn--lg  { --btn-py: .95rem; --btn-px: 1.8rem;  font-size: .95rem; }
.btn--block { width: 100%; }

.btn:focus-visible {
    outline: 2px solid var(--green-highlight);
    outline-offset: 3px;
}

/* Ripple element injected by app.js */
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .35);
    pointer-events: none;
    z-index: -1;
    animation: ripple .6s var(--ease) forwards;
}

/* ----------------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    border-bottom: 1px solid transparent;
}
.nav[data-scrolled="true"] {
    background: rgba(9, 11, 16, .72);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom-color: var(--border);
    box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .8);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__brand {
    display: inline-flex;
    align-items: center;
}
/* Wordmark image. It ships on a black field; `screen` blending drops the
   black so only the letters float on the nav — clean over any backdrop. */
.nav__logo-img {
    height: 30px;
    width: auto;
    display: block;
    mix-blend-mode: screen;
}
.nav__logo-img--footer { height: 34px; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav__link {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--muted);
    position: relative;
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
    border-radius: 2px;
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }

/* Mobile toggle (hidden on desktop) */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.nav__toggle span {
    width: 24px; height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 2.25rem;
    background: rgba(9, 11, 16, .92);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--border);
}
/* The [hidden] attribute must win over display:flex above, otherwise the
   panel is permanently visible (and overlaps the hero on desktop). */
.nav__mobile[hidden] { display: none; }
.nav__mobile-link {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--muted);
    padding: .35rem 0;
}
.nav__mobile-link:hover { color: var(--white); }

/* ----------------------------------------------------------------
   6. HERO
   ---------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--nav-h) + 60px) 5rem;
    overflow: hidden;
    text-align: center;
}

/* Secondary living layer only — the global backdrop is the primary visual,
   so the particle canvas is kept faint and never competes with the artwork. */
.hero__particles {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    opacity: .55;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Focused dark halo behind the hero text: lifts readability where the words
   sit while leaving the banner's glow, hexagons and edges fully visible. */
.hero__inner::before {
    content: "";
    position: absolute;
    inset: -10% -14%;
    z-index: -1;
    background: radial-gradient(58% 60% at 50% 47%,
        rgba(5, 8, 11, .74) 0%,
        rgba(5, 8, 11, .52) 42%,
        rgba(5, 8, 11, 0) 78%);
    pointer-events: none;
}

.hero__title {
    font-size: var(--fs-hero);
    font-weight: 700;
    margin-bottom: 32px;                  /* Headline → Paragraph */
    /* Crisp edge + soft halo so the headline reads over the artwork. */
    text-shadow: 0 2px 5px rgba(0, 0, 0, .55), 0 6px 34px rgba(0, 0, 0, .6);
}

.hero__subtitle {
    font-size: var(--fs-lead);
    max-width: 640px;
    margin-bottom: 40px;                  /* Paragraph → Buttons */
    color: #EDF1F6;                       /* brighter than body muted for legibility */
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 18px rgba(0, 0, 0, .65);
}

/* Two CTAs, side by side, auto-sized to their content (never full-width). */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 40px;                  /* Buttons → Statistics */
}
.hero__actions .btn {
    --btn-px: 1.5rem;                     /* trim padding so the longer label fits the range */
    min-width: 205px;                     /* equal, balanced pair (~180–220px) */
}

.hero__stats {
    display: flex;
    gap: clamp(1.75rem, 5vw, 3.5rem);
    flex-wrap: wrap;
    justify-content: center;
}
.hero__stat { display: flex; flex-direction: column; align-items: center; }
.hero__stat-num {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 2rem;
    color: var(--white);
    line-height: 1;
}
.hero__stat-label {
    font-size: .8rem;
    color: var(--muted);
    margin-top: .4rem;
    letter-spacing: .02em;
}

.hero__scroll {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 26px; height: 42px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-pill);
    display: grid;
    place-items: start center;
    padding-top: 7px;
}
.hero__scroll-dot {
    width: 4px; height: 8px;
    border-radius: 2px;
    background: var(--green);
    animation: scrollDot 1.8s var(--ease) infinite;
}

/* ----------------------------------------------------------------
   7. SECTION SCAFFOLD
   ---------------------------------------------------------------- */
.section { padding-block: var(--space-section); position: relative; }

/* ----------------------------------------------------------------
   LAYERED SURFACES
   Each content section is a frosted-glass layer floating over the
   fixed Mi-PA backdrop. Translucency lets the artwork stay subtly
   visible through and between sections; the eased gradient tops make
   sections melt into one another instead of reading as hard panels.
   ---------------------------------------------------------------- */
.operating-system,
.manage,
.connect,
.run,
.understand,
.foundation,
.extend,
.industries,
.about,
.early {
    --tint: .80;
    -webkit-backdrop-filter: blur(6px) saturate(116%);
    backdrop-filter: blur(6px) saturate(116%);
    /* Eased-transparent top so sections melt into one another. */
    background: linear-gradient(180deg,
        rgba(9, 11, 16, calc(var(--tint) - .30)) 0%,
        rgba(9, 11, 16, var(--tint)) 9%,
        rgba(9, 11, 16, var(--tint)) 100%);
}
.operating-system { --tint: .80; }
.manage           { --tint: .84; }
.connect          { --tint: .78; }
.run              { --tint: .82; }
.understand       { --tint: .84; }
.foundation       { --tint: .74; }
.extend           { --tint: .80; }
.industries       { --tint: .72; }
.about            { --tint: .82; }
/* Early-access also eases out at the bottom before the footer. */
.early {
    --tint: .76;
    background: linear-gradient(180deg,
        rgba(9, 11, 16, .48) 0%,
        rgba(9, 11, 16, .76) 9%,
        rgba(9, 11, 16, .76) 88%,
        rgba(9, 11, 16, .48) 100%);
}

.section__head {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}
.section__title { font-size: var(--fs-h2); margin-bottom: 1.1rem; }
.section__lead { font-size: var(--fs-lead); color: var(--muted); }

/* ----------------------------------------------------------------
   8. PLATFORM
   ---------------------------------------------------------------- */
.platform__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.platform__feature { padding: 1.9rem 1.6rem; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.platform__feature:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    background: var(--glass-bg-hover);
}
.platform__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    margin-bottom: 1.1rem;
    background: rgba(106, 200, 0, .1);
    border: 1px solid var(--border);
}
.platform__icon svg {
    width: 24px; height: 24px;
    fill: none;
    stroke: var(--green-highlight);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.platform__feature h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.platform__feature p { font-size: var(--fs-sm); }

/* ----------------------------------------------------------------
   9. CARD GRID (Solutions)
   ---------------------------------------------------------------- */
.cards { display: grid; gap: 1.5rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
    position: relative;
    padding: 2.1rem 1.9rem;
    overflow: hidden;
    transition: transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease);
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 0%, rgba(106, 200, 0, .12), transparent 55%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}
.card:hover,
.card:focus-visible {
    transform: translateY(-8px);
    border-color: var(--green);
    background: var(--glass-bg-hover);
    box-shadow: var(--shadow-soft), 0 0 40px -20px rgba(106, 200, 0, .6);
    outline: none;
}
.card:hover::before,
.card:focus-visible::before { opacity: 1; }

.card__icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 16px;
    margin-bottom: 1.4rem;
    background: var(--grad-brand);
    box-shadow: 0 10px 26px -12px rgba(106, 200, 0, .7);
}
.card__icon svg {
    width: 26px; height: 26px;
    fill: none;
    stroke: var(--bg);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card__title { font-size: 1.4rem; margin-bottom: .6rem; }
.card__text { font-size: var(--fs-sm); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

/* Capability tags — the sub-capabilities inside a hub card, shown as a
   soft wrapped pill list so we communicate depth without a feature dump. */
.card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.1rem;
}
.card__tags li {
    font-size: .72rem;
    line-height: 1;
    color: var(--muted);
    padding: .38rem .6rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.card--compact .card__title { font-size: 1.2rem; }

/* Section eyebrow number (A · Manage the Business) */
.layer-index {
    font-family: var(--font-mono);
    color: var(--green);
    margin-right: .5rem;
}

/* ----------------------------------------------------------------
   CHIPS — flat wrapped list for foundation services, workspace
   examples, business-operation flows and vertical solutions.
   ---------------------------------------------------------------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}
.chips--start { justify-content: flex-start; }
.chip {
    font-size: .82rem;
    font-weight: 500;
    color: var(--white);
    padding: .55rem .95rem;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    border: 1px solid var(--border-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:hover { border-color: var(--green); background: var(--glass-bg-hover); }
.chip--brand {
    color: var(--green-highlight);
    border-color: rgba(166, 255, 0, .3);
    background: rgba(166, 255, 0, .06);
}

/* ----------------------------------------------------------------
   RUN THE WORK — two emphasis panels (Workspace + Business Operations)
   ---------------------------------------------------------------- */
.run__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.run__panel { padding: 2.4rem 2.1rem; }
.run__panel h3 {
    font-size: 1.6rem;
    margin: 1.1rem 0 .5rem;
}
.run__lead { color: var(--green-highlight); font-weight: 600; font-size: .9rem; }
.run__panel > p { font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.run__note {
    margin-top: 1.4rem;
    font-size: .8rem;
    color: var(--muted);
}
.run__note strong { color: var(--white); font-weight: 600; }

/* Honest, global product-status note */
.status-note {
    max-width: 680px;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: .82rem;
    color: rgba(198, 204, 214, .75);
    font-style: italic;
}

/* Business Operations flow line */
.run__flow {
    font-family: var(--font-mono);
    color: var(--green-highlight);
    font-size: .95rem;
    letter-spacing: .02em;
    margin-bottom: .6rem;
}

/* Foundation traceability note */
.foundation__note {
    text-align: center;
    margin-top: 1.9rem;
    font-size: .9rem;
    color: var(--muted);
}
.foundation__note strong { color: var(--green-highlight); font-weight: 600; }

/* Search callout — a single wide glass strip reinforcing one-platform search */
.search-callout {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding: 1.9rem 2.1rem;
}
.search-callout__icon {
    flex: none;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--grad-brand);
    box-shadow: 0 10px 26px -12px rgba(106, 200, 0, .7);
}
.search-callout__icon svg {
    width: 26px; height: 26px;
    fill: none; stroke: var(--bg);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.search-callout__body h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.search-callout__body > p { font-size: var(--fs-sm); margin-bottom: 1rem; }

/* Industry story cards */
.industry-card__icon { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: .9rem; }
.industry-card__lead {
    color: var(--white);
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .55rem;
}

/* ----------------------------------------------------------------
   LEGAL PAGES (privacy.html / terms.html)
   Readable legal-document typography on the existing design system.
   ---------------------------------------------------------------- */
.legal { padding-block: calc(var(--nav-h) + 56px) var(--space-section); }
.legal__surface {
    max-width: 880px;
    margin-inline: auto;
    background: rgba(9, 11, 16, .92);
    -webkit-backdrop-filter: blur(8px) saturate(116%);
    backdrop-filter: blur(8px) saturate(116%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 4vw, 3.25rem);
}
.legal__back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--green-highlight);
    margin-bottom: 1.5rem;
}
.legal__back:hover { color: var(--green); }
.legal__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .9rem; }
.legal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.4rem;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--muted);
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}
.legal__meta strong { color: var(--white); font-weight: 600; }
.legal__intro { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.75rem; }

/* Table of contents */
.legal__toc {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
}
.legal__toc h2 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--white);
    margin-bottom: .85rem;
}
.legal__toc ol { columns: 2; column-gap: 2.2rem; margin: 0; padding-left: 1.1rem; }
.legal__toc li { list-style: decimal; font-size: .84rem; margin-bottom: .35rem; break-inside: avoid; color: var(--muted); }
.legal__toc a { color: var(--muted); text-decoration: none; }
.legal__toc a:hover { color: var(--green-highlight); }

/* Body */
.legal__section { scroll-margin-top: calc(var(--nav-h) + 20px); margin-bottom: 1.75rem; }
.legal__section > h2 {
    font-size: 1.22rem;
    color: var(--white);
    margin-bottom: .7rem;
}
.legal__section h3 { font-size: 1rem; color: var(--white); margin: 1.2rem 0 .5rem; }
.legal__section p { color: var(--muted); line-height: 1.75; margin-bottom: .9rem; font-size: .95rem; }
.legal__section ul { margin: 0 0 1rem 0; padding-left: 1.3rem; display: grid; gap: .4rem; }
.legal__section li { color: var(--muted); line-height: 1.65; font-size: .95rem; list-style: disc; }
.legal__section a { color: var(--green-highlight); text-decoration: underline; text-underline-offset: 2px; }
.legal__section a:hover { color: var(--green); }
.legal__num { color: var(--green); font-family: var(--font-mono); margin-right: .5rem; }
.legal__updated {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
    color: rgba(198, 204, 214, .7);
}

/* Footer trademark line */
.footer__tm { font-size: .74rem; color: rgba(198, 204, 214, .6); margin-top: .3rem; max-width: 620px; }

/* Early Access legal acknowledgement */
.early__ack {
    margin-top: .5rem;
    font-size: .78rem;
    color: rgba(198, 204, 214, .7);
    position: relative;
}
.early__ack a { color: var(--green-highlight); text-decoration: underline; text-underline-offset: 2px; }
.early__ack a:hover { color: var(--green); }

/* ----------------------------------------------------------------
   10. INDUSTRIES
   ---------------------------------------------------------------- */
.industries__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.industry {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.15rem 1.3rem;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: .98rem;
    color: var(--white);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.industry:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    background: var(--glass-bg-hover);
}
.industry__icon { font-size: 1.35rem; line-height: 1; }

/* ----------------------------------------------------------------
   11. ABOUT
   ---------------------------------------------------------------- */
.about__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.about__text { margin: 1.25rem 0; }
.about__list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.about__list li {
    position: relative;
    padding-left: 1.8rem;
    color: var(--white);
    font-size: var(--fs-sm);
}
.about__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .5em;
    width: 10px; height: 10px;
    border-radius: 3px;
    background: var(--grad-brand);
}

/* Orbiting network visual */
.about__visual { display: grid; place-items: center; }
.about__card {
    position: relative;
    width: min(420px, 90%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
}
.about__pulse {
    position: absolute;
    width: 60%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 200, 0, .3), transparent 70%);
    animation: pulse 3.5s var(--ease) infinite;
}
.about__core {
    position: relative;
    z-index: 2;
    width: 96px; height: 96px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--bg);
    background: var(--grad-brand);
    box-shadow: 0 0 40px -6px rgba(106, 200, 0, .8);
}
.about__nodes {
    position: absolute;
    inset: 0;
    animation: spin 26s linear infinite;
}
.about__node {
    position: absolute;
    top: 50%; left: 50%;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--white);
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border-strong);
    white-space: nowrap;
    /* place around a circle: 6 nodes, 60deg apart */
    transform:
        translate(-50%, -50%)
        rotate(calc(var(--i) * 60deg))
        translateY(-150px)
        rotate(calc(var(--i) * -60deg));
    animation: spin-reverse 26s linear infinite;
}

/* ----------------------------------------------------------------
   12. EARLY ACCESS
   ---------------------------------------------------------------- */
.early__card {
    position: relative;
    max-width: 780px;
    margin-inline: auto;
    padding: clamp(2.25rem, 5vw, 3.75rem);
    text-align: center;
    overflow: hidden;
    border-color: var(--border-strong);
}
.early__glow {
    position: absolute;
    top: -40%; left: 50%;
    width: 120%; aspect-ratio: 2;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(106, 200, 0, .18), transparent 62%);
    pointer-events: none;
}
.early__title { font-size: var(--fs-h2); margin-bottom: 1rem; position: relative; }
.early__lead { font-size: var(--fs-lead); max-width: 520px; margin: 0 auto 2rem; position: relative; }

.early__form {
    position: relative;
    display: flex;
    gap: .75rem;
    max-width: 520px;
    margin-inline: auto;
}
.early__input {
    flex: 1;
    min-width: 0;
    padding: .95rem 1.25rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--white);
    background: rgba(9, 11, 16, .6);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.early__input::placeholder { color: rgba(198, 204, 214, .55); }
.early__input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(106, 200, 0, .18);
}
.early__note {
    min-height: 1.25rem;
    margin-top: 1rem;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.early__note[data-state="ok"]   { color: var(--green-highlight); }
.early__note[data-state="error"]{ color: #ff8080; }
.early__fine {
    margin-top: .5rem;
    font-size: .78rem;
    color: rgba(198, 204, 214, .6);
    position: relative;
}

/* ----------------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------------- */
.footer {
    border-top: 1px solid var(--border);
    /* Darker translucent surface — still part of the Mi-PA environment,
       with the backdrop faintly visible through it. */
    background: linear-gradient(180deg, rgba(9, 11, 16, .66) 0%, rgba(9, 11, 16, .90) 12%, rgba(9, 11, 16, .92) 100%);
    -webkit-backdrop-filter: blur(6px) saturate(116%);
    backdrop-filter: blur(6px) saturate(116%);
    padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}
.footer__tagline {
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.35;
}
.footer__tagline span:nth-child(1) { color: var(--green-highlight); }
.footer__tagline span:nth-child(2) { color: var(--green); }
.footer__tagline span:nth-child(3) { color: var(--green-accent); }

.footer__col { display: flex; flex-direction: column; gap: .8rem; }
.footer__heading {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--white);
    margin-bottom: .3rem;
}
.footer__link { font-size: var(--fs-sm); color: var(--muted); }
.footer__link:hover { color: var(--green-highlight); }
.footer__email {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--white);
}
.footer__email:hover { color: var(--green-highlight); }
.footer__cta { margin-top: .4rem; align-self: flex-start; }

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
    color: rgba(198, 204, 214, .7);
}
.footer__legal { display: inline-flex; gap: .6rem; align-items: center; }

/* ----------------------------------------------------------------
   14. REDUCED MOTION (base courtesy; full rules in animations.css)
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}