/* ============================================================
   Agreely CITIZEN landing - surface styles.
   Tokens come from app.css (copied verbatim). Same family signature as the
   business landing (island nav docking to a pill, numbered mono labels, reveal
   footer, scroll reveals, easing cubic-bezier(0.4,0,0.2,1)), but amber is
   promoted to co-lead: one amber highlighter (.mark) per section, warmer hero,
   rounder cards, more whitespace, bigger type, shorter measures. Indigo still
   carries structure, buttons and links. No new hex values beyond the existing
   token set. No em-dashes, no en-dashes.
   ============================================================ */

.landing-body { scroll-behavior: smooth; overflow-x: clip; }
.landing-main { padding-top: 0; }
.landing-body .dotgrid { display: none; }

.container { max-width: 70rem; margin: 0 auto; padding: 0 1.5rem; position: relative; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

/* skip link */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.focus\:not-sr-only:focus { position: fixed; top: 1rem; left: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border-radius: 0.5rem; z-index: 100; clip: auto; white-space: normal; }

/* ── The amber highlighter (the citizen signature) ──────────────────────────
   Wraps the single most emotional word per section. Inherits its text color so
   it works over the pinned-light hero type and over ink headings alike; the AA
   contrast is carried by the underlying text, the amber is a decorative swipe. */
.mark {
    position: relative;
    isolation: isolate;
    white-space: nowrap;
    padding: 0 0.04em;
    color: inherit;
}
.mark::before {
    content: "";
    position: absolute;
    left: -0.06em; right: -0.06em;
    bottom: 0.04em;
    height: 0.44em;
    z-index: -1;
    border-radius: 2px;
    background: linear-gradient(101deg, rgba(232,148,60,0) 0%, rgba(232,148,60,0.58) 8%, rgba(232,148,60,0.62) 92%, rgba(232,148,60,0) 100%);
    transform: rotate(-1.5deg);
}
[data-theme="dark"] .mark::before {
    background: linear-gradient(101deg, rgba(240,184,106,0) 0%, rgba(240,184,106,0.44) 8%, rgba(240,184,106,0.48) 92%, rgba(240,184,106,0) 100%);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.1s var(--ease); border-radius: 9999px; line-height: 1; font-family: inherit; }
.btn:active { transform: scale(0.98); }
.btn-arrow { transition: transform 0.25s var(--ease); flex-shrink: 0; }
.btn:hover .btn-arrow { transform: translateY(0.15rem); }
.btn-primary { background: var(--accent); color: #fff; padding: 0.9rem 1.7rem; font-size: 0.95rem; box-shadow: 0 10px 24px -10px rgba(58, 53, 181, 0.65); }
.btn-primary:hover { background: var(--accent-strong); color: #fff; box-shadow: 0 12px 28px -10px rgba(58, 53, 181, 0.8); }
.btn-ghost { background: var(--bg-surface); color: var(--ink); padding: 0.9rem 1.5rem; font-size: 0.95rem; border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--border-accent); background: var(--accent-glow); color: var(--accent); }
[data-theme="dark"] .btn-primary { background: #5b55d6; box-shadow: 0 10px 24px -12px rgba(91, 85, 214, 0.7); }
[data-theme="dark"] .btn-primary:hover { background: #4a45c0; }
/* Dark-mode nav CTA (isl-cta and its -sm / -block variants share this base):
   #fff on the default accent is only 3.68:1 in dark; lift to AA (parity with the
   business landing's landing.css fix). Covers spread, docked pill and mobile menu. */
[data-theme="dark"] .isl-cta { background: #5b55d6; box-shadow: 0 6px 18px -6px rgba(91, 85, 214, 0.6); }
[data-theme="dark"] .isl-cta:hover { background: #4a45c0; }

/* copied-state affordance on any copy button */
.js-copy.is-copied { color: var(--good); }
.cta-btn-ghost.js-copy.is-copied { color: var(--good); border-color: var(--good); }

/* ── Shared section chrome ───────────────────────────────── */
.lsec { padding: 6rem 0; border-top: 1px solid var(--border); position: relative; }
.lsec-intro { max-width: 46rem; }
.section-heading { font-size: clamp(1.8rem, 3.8vw, 2.7rem); line-height: 1.14; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); margin: 0 0 1.15rem; max-width: 40rem; text-wrap: balance; }
.section-lede { font-size: 1.1rem; line-height: 1.7; color: var(--text-muted); max-width: 40rem; margin: 0; }
.section-lede strong { color: var(--text-bright); font-weight: 600; }

.glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 9999px; filter: blur(8px); }

/* ============================================================
   NAV - landing-mode overrides (base styles live in app.css).
   ============================================================ */
.isl-nav[data-mode="landing"] .isl-spread .isl-pill {
    background: none; border-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0.3rem 0;
}
.isl-nav[data-mode="landing"] .isl-spread .isl-link { color: #20235C; font-weight: 500; }
.isl-nav[data-mode="landing"] .isl-spread .isl-link:hover { color: #20235C; background: rgba(58, 53, 181, 0.12); }
.isl-nav[data-mode="landing"] .isl-spread-row {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding-top: 1.3rem; padding-bottom: 1.3rem;
}
.isl-nav[data-mode="landing"] .isl-spread .isl-left { justify-self: start; }
.isl-nav[data-mode="landing"] .isl-spread .isl-pill { justify-self: center; }
.isl-nav[data-mode="landing"] .isl-spread .isl-right { justify-self: end; gap: 0.6rem; }

/* Citizen wordmark lockup (mark + Agreely + small "citoyens" tag) */
.isl-wordmark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.isl-wordmark-mark { display: inline-flex; color: var(--accent); }
.isl-wordmark-text { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink); }
.isl-wordmark-tag {
    display: inline-flex; align-items: center; gap: 0.15rem;
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
    text-transform: lowercase; letter-spacing: 0.04em; color: var(--accent-warm);
    background: var(--accent-warm-glow); border: 1px solid rgba(180,83,9,0.22);
    border-radius: 9999px; padding: 0.1rem 0.45rem; line-height: 1;
    align-self: center; font-feature-settings: "zero" 1;
}
.isl-wordmark-tag-dot { display: none; }
[data-theme="dark"] .isl-wordmark-tag { color: var(--accent-warm-soft); background: rgba(232,162,76,0.14); border-color: rgba(232,162,76,0.28); }

.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark { gap: 0.65rem; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-text { font-size: 1.85rem; font-weight: 680; letter-spacing: -0.025em; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-mark svg { width: 38px; height: 38px; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-text { color: #20235C; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-mark { color: #3A35B5; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-tag { font-size: 0.68rem; }

/* the quiet "are you a business?" text link */
.isl-biz-link {
    font-size: 0.8rem; color: var(--nav-biz-ink); text-decoration: none; white-space: nowrap;
    padding: 0.3rem 0.2rem; transition: color 0.15s var(--ease);
}
.isl-biz-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.isl-pill-scrolled .isl-biz-link { display: none; }

/* FR/EN + toggle read bare over the art */
.isl-nav[data-mode="landing"] .isl-spread .isl-lang-current { color: #3A35B5; }
.isl-nav[data-mode="landing"] .isl-spread .isl-lang-link { color: #20235C; }
.isl-nav[data-mode="landing"] .isl-spread .isl-lang-sep { color: rgba(32, 35, 92, 0.35); }

/* Dark hero: flip the pinned palette light-on-dark (mirrors the hero art swap) */
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-text { color: #F4F6FC; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-mark { color: #A7A3FF; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-link { color: #C9CEDE; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-link:hover { color: #F4F6FC; background: rgba(123, 118, 240, 0.20); }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-biz-link { color: #C9CEDE; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-lang-current { color: #A7A3FF; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-lang-link { color: #C9CEDE; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-lang-sep { color: rgba(201, 203, 255, 0.42); }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-icon-btn {
    background: rgba(24, 28, 46, 0.58); border-color: rgba(123, 118, 240, 0.34); color: #D5D7FF;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-icon-btn:hover { color: #F4F6FC; border-color: var(--border-accent); background: rgba(34, 38, 58, 0.72); }
[data-theme="dark"] .isl-pill-scrolled .isl-link { color: var(--text); }
[data-theme="dark"] .isl-pill-scrolled .isl-link:hover { color: var(--text-bright); }

/* scrollspy active (grouped: problem / gifts+app+why / manifeste+honesty / faq+cta) */
.isl-nav[data-active-section="problem"] .isl-link[data-section="problem"],
.isl-nav[data-active-section="gifts"] .isl-link[data-section="gifts"],
.isl-nav[data-active-section="app"] .isl-link[data-section="gifts"],
.isl-nav[data-active-section="why"] .isl-link[data-section="gifts"],
.isl-nav[data-active-section="manifeste"] .isl-link[data-section="manifeste"],
.isl-nav[data-active-section="honesty"] .isl-link[data-section="manifeste"],
.isl-nav[data-active-section="faq"] .isl-link[data-section="faq"],
.isl-nav[data-active-section="cta"] .isl-link[data-section="faq"] {
    color: var(--accent); background: var(--accent-glow);
}

/* ── Mobile menu (hamburger dialog) ─────────────────────────── */
.isl-menu-toggle .isl-menu-close { display: none; }
.isl-menu-toggle[aria-expanded="true"] .isl-menu-open { display: none; }
.isl-menu-toggle[aria-expanded="true"] .isl-menu-close { display: inline-flex; }
.isl-menu-toggle[aria-expanded="true"] { color: #3A35B5; border-color: rgba(58, 53, 181, 0.4); }
.isl-mobile-menu {
    position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column;
    padding: 5rem 0.9rem 1.25rem;
    background: rgba(20, 24, 92, 0.42);
    -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
    opacity: 0; transition: opacity 0.28s var(--ease);
}
.isl-mobile-menu.is-open { opacity: 1; }
.isl-mobile-menu[hidden] { display: none; }
.isl-mobile-panel {
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(58, 53, 181, 0.16); border-radius: 1.25rem;
    box-shadow: 0 28px 64px -24px rgba(20, 24, 92, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 0.6rem; opacity: 0; transform: translateY(-0.85rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.isl-mobile-menu.is-open .isl-mobile-panel { opacity: 1; transform: translateY(0); }
.isl-mobile-links { display: flex; flex-direction: column; }
.isl-mobile-links a {
    display: flex; align-items: center; min-height: 3rem; padding: 0.85rem 0.9rem;
    font-size: 1.0625rem; font-weight: 550; color: #20235C; text-decoration: none;
    border-radius: 0.75rem; transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.isl-mobile-links a:hover, .isl-mobile-links a:active { color: #3A35B5; background: rgba(58, 53, 181, 0.1); }
.isl-mobile-links a + a { border-top: 1px solid rgba(32, 35, 92, 0.08); }
.isl-nav[data-active-section="problem"] .isl-mobile-links a[data-section="problem"],
.isl-nav[data-active-section="gifts"] .isl-mobile-links a[data-section="gifts"],
.isl-nav[data-active-section="app"] .isl-mobile-links a[data-section="gifts"],
.isl-nav[data-active-section="why"] .isl-mobile-links a[data-section="gifts"],
.isl-nav[data-active-section="manifeste"] .isl-mobile-links a[data-section="manifeste"],
.isl-nav[data-active-section="honesty"] .isl-mobile-links a[data-section="manifeste"],
.isl-nav[data-active-section="faq"] .isl-mobile-links a[data-section="faq"],
.isl-nav[data-active-section="cta"] .isl-mobile-links a[data-section="faq"] {
    color: #3A35B5; background: rgba(58, 53, 181, 0.1);
}
.isl-mobile-foot { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 0.5rem; padding: 0.95rem 0.9rem 0.4rem; border-top: 1px solid rgba(32, 35, 92, 0.1); }
.isl-mobile-foot .isl-lang { font-size: 0.95rem; gap: 0.5rem; justify-content: center; margin-top: 0.35rem; }
.isl-mobile-foot .isl-lang-current { color: #3A35B5; }
.isl-mobile-foot .isl-lang-link { color: #20235C; }
.isl-mobile-foot .isl-lang-link, .isl-mobile-foot .isl-lang-current { padding: 0.35rem 0.25rem; }
.isl-mobile-foot .isl-lang-sep { color: rgba(32, 35, 92, 0.3); }
.isl-cta-block { width: 100%; min-height: 2.85rem; padding: 0 1.3rem; font-size: 0.95rem; }
.isl-mobile-book {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.85rem; border-radius: 9999px; color: var(--text-muted);
    font-size: 0.9rem; font-weight: 500; text-decoration: none;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.isl-mobile-book svg { flex-shrink: 0; }
.isl-mobile-book:hover, .isl-mobile-book:active { color: var(--accent); background: var(--accent-glow); }
body.menu-lock { overflow: hidden; }
[data-theme="dark"] .isl-mobile-menu { background: rgba(6, 8, 18, 0.55); }
[data-theme="dark"] .isl-mobile-panel { background: rgba(20, 23, 41, 0.96); border-color: rgba(123, 118, 240, 0.22); box-shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .isl-mobile-links a { color: #E7E9F5; }
[data-theme="dark"] .isl-mobile-links a:hover, [data-theme="dark"] .isl-mobile-links a:active { color: #F4F6FC; background: rgba(123, 118, 240, 0.18); }
[data-theme="dark"] .isl-mobile-links a + a { border-top-color: rgba(201, 203, 255, 0.1); }
[data-theme="dark"] .isl-mobile-foot { border-top-color: rgba(201, 203, 255, 0.12); }
[data-theme="dark"] .isl-mobile-foot .isl-lang-current { color: #A7A3FF; }
[data-theme="dark"] .isl-mobile-foot .isl-lang-link { color: #C9CEDE; }
@media (prefers-reduced-motion: reduce) { .isl-mobile-menu, .isl-mobile-panel { transition: none; } }

/* ============================================================
   HERO - the mirror. Warmed dawn-wetland art + a glowing receipt card.
   ============================================================ */
.hero {
    position: relative; display: flex; align-items: center; min-height: clamp(38rem, 90vh, 54rem);
    padding: calc(var(--nav-height) + 2rem) 0 9.5rem;
    overflow-x: clip; overflow-y: visible; isolation: isolate;
}
.hero > .container { width: 100%; }
.hero-bg { position: absolute; inset: -2% 0 -46% 0; z-index: -3; display: block; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 88% center; }
/* Amber dawn wash: a warm layer over the art so dawn reads more prominent than
   on the business site, then a cool-light directional scrim holds the type. */
.hero-scrim {
    position: absolute; inset: 0 0 -46% 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(48rem 30rem at 82% 8%, rgba(232,148,60,0.30), transparent 62%),
        linear-gradient(90deg, rgba(246,248,252,0.80) 0%, rgba(246,248,252,0.78) 24%, rgba(246,248,252,0.72) 41%, rgba(246,248,252,0.54) 54%, rgba(246,248,252,0.36) 63%, rgba(246,248,252,0.12) 71%, rgba(246,248,252,0) 78%);
}
.hero-fade { position: absolute; left: 0; right: 0; bottom: -46%; height: 11rem; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(246,248,252,0) 0%, var(--bg-deep) 92%); }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.hero-copy { position: relative; z-index: 1; max-width: 40rem; }
.hero-h1 { font-size: clamp(2.3rem, 4.6vw, 3.35rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; color: #20235C; margin: 0 0 1.3rem; text-wrap: balance; }
.hero-lede { font-size: 1.14rem; line-height: 1.62; color: #2C3340; margin: 0 0 2rem; max-width: 44rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.hero .btn-primary { background: #3A35B5; box-shadow: 0 12px 28px -12px rgba(58, 53, 181, 0.6); }
.hero .btn-primary:hover { background: #2A2690; }
.hero .btn-ghost { background: rgba(255, 255, 255, 0.85); color: #20235C; border-color: rgba(58, 53, 181, 0.22); }
.hero .btn-ghost:hover { background: #fff; border-color: var(--border-accent); color: var(--accent); }

/* Dark hero art swap + pinned-light type */
.hero-bg-dark {
    inset: -2% 0 -46% 0;
    background-image: url('/assets/hero/hero-heron-dark.jpg');
    background-image: -webkit-image-set(url('/assets/hero/hero-heron-dark.webp') type('image/webp'), url('/assets/hero/hero-heron-dark.jpg') type('image/jpeg'));
    background-image: image-set(url('/assets/hero/hero-heron-dark.webp') type('image/webp'), url('/assets/hero/hero-heron-dark.jpg') type('image/jpeg'));
    background-size: cover; background-position: 88% center; background-repeat: no-repeat; display: none;
}
[data-theme="dark"] .hero-bg-light { display: none; }
[data-theme="dark"] .hero-bg-dark { display: block; }
[data-theme="dark"] .hero-scrim {
    background:
        radial-gradient(48rem 30rem at 82% 8%, rgba(232,162,76,0.18), transparent 62%),
        linear-gradient(90deg, rgba(12,14,26,0.90) 0%, rgba(12,14,26,0.88) 24%, rgba(12,14,26,0.82) 41%, rgba(12,14,26,0.64) 54%, rgba(12,14,26,0.42) 63%, rgba(12,14,26,0.15) 71%, rgba(12,14,26,0) 80%);
}
[data-theme="dark"] .hero-h1 { color: #F4F6FC; }
[data-theme="dark"] .hero-lede { color: #C9CEDE; }
[data-theme="dark"] .hero .btn-primary { background: #5b55d6; box-shadow: 0 12px 28px -12px rgba(91,85,214,0.7); }
[data-theme="dark"] .hero .btn-primary:hover { background: #4a45c0; }
[data-theme="dark"] .hero .btn-ghost { background: rgba(20,24,38,0.55); color: #D5D7FF; border-color: rgba(123,118,240,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-theme="dark"] .hero .btn-ghost:hover { background: rgba(28,32,54,0.75); border-color: var(--border-accent); color: #EDEEFF; }
/* Dark art is higher-contrast than the pale light art, so the short light-mode
   fade leaves a visible grey-to-canvas band. Use a taller, earlier ramp so the
   dark heron dissolves smoothly into the canvas behind the problem section. */
[data-theme="dark"] .hero-fade { height: 20rem; background: linear-gradient(180deg, rgba(12,14,26,0) 0%, rgba(12,14,26,0.5) 42%, var(--bg-deep) 86%); }

@media (max-width: 900px) {
    .hero { padding: calc(var(--nav-height) + 2rem) 0 7rem; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-copy { max-width: 34rem; }
    .hero-bg img { object-position: 85% center; }
    .hero-bg-dark { background-position: 85% center; }
    .hero-scrim {
        background:
            radial-gradient(40rem 22rem at 80% 0%, rgba(232,148,60,0.24), transparent 60%),
            linear-gradient(180deg, #F6F8FC 0%, rgba(246,248,252,0.9) 40%, rgba(246,248,252,0.55) 66%, rgba(246,248,252,0.2) 100%);
    }
    [data-theme="dark"] .hero-scrim {
        background:
            radial-gradient(40rem 22rem at 80% 0%, rgba(232,162,76,0.14), transparent 60%),
            linear-gradient(180deg, #0C0E1A 0%, rgba(12,14,26,0.92) 40%, rgba(12,14,26,0.6) 66%, rgba(12,14,26,0.22) 100%);
    }
    .hero-fade { height: 7rem; }
}
@media (max-width: 560px) { .hero-h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); } }

/* ── Problem ────────────────────────────────────────────────── */
/* No hairline here: the problem section sits directly under the hero art, and
   the .lsec top border would draw a line across the fading heron. The hero art
   fade is the divider. */
.problem-sec { border-top: 0; }
.problem-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.problem-intro { max-width: 28rem; }
@media (min-width: 901px) { .problem-intro { position: sticky; top: calc(var(--nav-height) + 2.5rem); } }
.problem-cards { display: flex; flex-direction: column; gap: 1rem; }
.pcard {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.1rem;
    padding: 1.6rem 1.75rem; display: grid; grid-template-columns: 3rem 1fr; gap: 0.4rem 1.25rem;
    align-items: center; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.pcard:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(20, 24, 92, 0.4); transform: translateY(-2px); }
.pcard-ico { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.85rem; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
.pcard-h { font-size: 1.12rem; font-weight: 650; color: var(--ink); margin: 0; letter-spacing: -0.01em; align-self: end; }
.pcard-p { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin: 0; align-self: start; }

/* ── Gifts (calm 2x2 grid, one card per gift) ───────────────────────────────
   Every card shares the same anatomy: icon chip + mono index up top, then
   title, body, optional caveat/link, then an inset "panel" motif pinned to the
   card's bottom edge via margin-top:auto so all four bottoms align. The panels
   speak one visual language (elevated inset, mono microtype, hairline rows).
   Amber stays scarce here: the single .mark on "non" plus the semantic warm
   caveat; the receipt seal and all panel chrome run indigo/muted. */
.gifts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
@media (max-width: 880px) { .gifts-grid { grid-template-columns: 1fr; max-width: 34rem; gap: 1.1rem; } }
.gift-card {
    display: flex; flex-direction: column;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.25rem;
    padding: 1.9rem 1.9rem 1.7rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.gift-card:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(20, 24, 92, 0.4); transform: translateY(-3px); }
@media (max-width: 560px) { .gift-card { padding: 1.5rem 1.35rem 1.35rem; } }
.gift-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.gift-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
.gift-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-muted); font-feature-settings: "zero" 1; }
.gift-body { flex: 1 1 auto; padding-bottom: 1.5rem; }
.gift-h { font-size: 1.25rem; font-weight: 650; color: var(--ink); margin: 0 0 0.6rem; letter-spacing: -0.015em; line-height: 1.25; }
.gift-p { font-size: 0.97rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.gift-caveat { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem 0 0; padding: 0.7rem 0.9rem; background: var(--accent-warm-glow); border: 1px solid rgba(180,83,9,0.2); border-radius: 0.7rem; font-size: 0.86rem; line-height: 1.5; color: var(--accent-warm); }
.gift-caveat svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--accent-warm); }
[data-theme="dark"] .gift-caveat { color: var(--accent-warm-soft); border-color: rgba(232,162,76,0.28); }
[data-theme="dark"] .gift-caveat svg { color: var(--accent-warm-soft); }
.gift-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.95rem; font-weight: 550; color: var(--accent); border-radius: 0.35rem; }
.gift-link svg { transition: transform 0.25s var(--ease); }
.gift-link:hover { color: var(--accent-strong); }
.gift-link:hover svg { transform: translateX(0.2rem); }
.gift-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* gift panels: the four motifs, one shared inset language */
.gift-panel { margin-top: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0.9rem; padding: 1.05rem 1.2rem; }
[data-theme="dark"] .gift-panel { background: rgba(28, 32, 54, 0.55); }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.55rem; }
.gp-title { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-feature-settings: "zero" 1; }
.gp-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; border-radius: 9999px; padding: 0.2rem 0.55rem; color: var(--good); background: var(--good-bg); border: 1px solid rgba(21, 128, 61, 0.28); }
.gp-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.gp-line span:first-child { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.gp-line span:last-child { color: var(--text-bright); font-weight: 550; text-align: right; }
.gp-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }
.gp-foot svg { color: var(--accent); flex-shrink: 0; }
.gp-foot-mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; font-feature-settings: "zero" 1; }
/* access-log motif */
.gp-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gp-log li { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.gp-log-eye { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 0.45rem; background: var(--accent-glow); color: var(--accent); }
.gp-log-who { font-size: 0.86rem; color: var(--text-bright); font-weight: 550; }
.gp-log-when { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); font-feature-settings: "zero" 1; white-space: nowrap; }
/* withdrawal before/after motif */
.gp-state { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 0.7rem; border: 1px solid var(--border); background: var(--bg-surface); }
.gp-state.is-was { opacity: 0.72; }
.gp-state.is-now { background: var(--accent-glow); border-color: var(--border-accent); }
.gp-state-label { font-size: 0.82rem; color: var(--text-muted); }
.gp-state.is-now .gp-state-label { color: var(--ink); font-weight: 550; }
.gp-pill { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; border-radius: 9999px; padding: 0.26rem 0.7rem; font-feature-settings: "zero" 1; }
.gp-pill-on { color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); }
.gp-pill-off { color: #fff; background: var(--accent); }
[data-theme="dark"] .gp-pill-off { background: #5b55d6; }
.gp-state-arrow { display: flex; justify-content: center; color: var(--accent); padding: 0.3rem 0; }
/* verifier-result motif */
.gp-verify { display: flex; align-items: center; gap: 0.8rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.gp-verify-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: var(--good-bg); color: var(--good); border: 1px solid rgba(21, 128, 61, 0.28); flex-shrink: 0; }
.gp-verify-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gp-verify-h { font-size: 0.92rem; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.gp-verify-sub { font-size: 0.82rem; color: var(--text-muted); }

/* ── App (soft plate + phone shot) ──────────────────────────── */
.lsec-soft {
    border-top: 0;
    background:
        radial-gradient(60rem 26rem at 10% 0%, rgba(58, 53, 181, 0.07), transparent 60%),
        radial-gradient(52rem 24rem at 92% 100%, rgba(232, 148, 60, 0.10), transparent 62%),
        linear-gradient(180deg, var(--bg-deep) 0%, #EEF1FB 50%, var(--bg-deep) 100%);
}
[data-theme="dark"] .lsec-soft {
    background:
        radial-gradient(60rem 26rem at 10% 0%, rgba(123, 118, 240, 0.12), transparent 60%),
        radial-gradient(52rem 24rem at 92% 100%, rgba(232, 162, 76, 0.10), transparent 62%),
        var(--bg-deep);
}
.app-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
@media (max-width: 900px) { .app-grid { grid-template-columns: 1fr; gap: 2.75rem; } }
.app-bullets { list-style: none; margin: 2rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.app-bullet { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.app-bullet-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: var(--bg-surface); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
.app-bullet-h { font-size: 1.02rem; font-weight: 650; color: var(--ink); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.app-bullet-p { font-size: 0.94rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.app-shot { position: relative; display: flex; justify-content: center; }
.app-shot-glow { position: absolute; inset: 6% 12% 6% 12%; z-index: -1; background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(58,53,181,0.22), transparent 70%); filter: blur(8px); pointer-events: none; }
[data-theme="dark"] .app-shot-glow { background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(123,118,240,0.26), transparent 70%); }
.app-phone {
    position: relative; width: min(17rem, 74vw); padding: 0.6rem; border-radius: 2.4rem;
    background: linear-gradient(165deg, var(--phone-bezel-top) 0%, var(--phone-bezel-bottom) 100%);
    box-shadow: 0 40px 80px -36px rgba(20, 24, 92, 0.6), inset 0 1px 0 rgba(255,255,255,0.14);
    border: 1px solid rgba(201,203,255,0.14);
}
.app-phone-notch { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); width: 4.5rem; height: 0.4rem; border-radius: 9999px; background: rgba(201,203,255,0.35); z-index: 2; }
.app-phone picture, .app-phone img { display: block; width: 100%; height: auto; border-radius: 1.9rem; }

/* ── Why ────────────────────────────────────────────────────── */
.why-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 820px) { .why-list { grid-template-columns: 1fr; } }
.why-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.1rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.why-item:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(20,24,92,0.4); transform: translateY(-3px); }
.why-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); }
.why-p { font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.why-p strong { color: var(--ink); font-weight: 650; display: block; margin-bottom: 0.2rem; }

/* ── Manifeste (the conversion moment) ──────────────────────── */
.lsec-manifeste {
    border-top: 0;
    background:
        radial-gradient(56rem 28rem at 88% 4%, rgba(232, 148, 60, 0.14), transparent 60%),
        radial-gradient(52rem 26rem at 4% 100%, rgba(58, 53, 181, 0.10), transparent 62%),
        linear-gradient(180deg, var(--bg-deep) 0%, var(--band-manifeste) 45%, var(--bg-deep) 100%);
}
[data-theme="dark"] .lsec-manifeste {
    background:
        radial-gradient(56rem 28rem at 88% 4%, rgba(232, 162, 76, 0.14), transparent 60%),
        radial-gradient(52rem 26rem at 4% 100%, rgba(123, 118, 240, 0.14), transparent 62%),
        var(--bg-deep);
}
.manifeste-wrap { max-width: 52rem; margin: 0 auto; }
.manifeste-intro { text-align: center; margin: 0 auto 2.5rem; max-width: 40rem; }
.manifeste-intro .section-heading, .manifeste-intro .section-lede { margin-left: auto; margin-right: auto; }
.manifeste-intro .section-label { margin-left: auto; margin-right: auto; }
.manifeste-card {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.4rem;
    padding: 1.75rem; box-shadow: 0 40px 80px -44px rgba(20, 24, 92, 0.4);
}
@media (min-width: 640px) { .manifeste-card { padding: 2rem 2.25rem; } }

.copy-field { }
.copy-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.copy-field-label { font-size: 0.8rem; font-weight: 650; color: var(--ink); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.copy-field-hint { font-size: 0.8rem; color: var(--text-muted); }
.copy-field-area {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 12rem;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0.9rem;
    padding: 1rem 1.15rem; font-family: var(--font-body); font-size: 0.96rem; line-height: 1.65;
    color: var(--text); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.copy-field-area:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.manifeste-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.25rem; }
.manifeste-actions .btn { padding: 0.75rem 1.3rem; font-size: 0.9rem; }
.manifeste-status { min-height: 1.25rem; margin: 0.9rem 0 0; font-size: 0.88rem; font-weight: 550; color: var(--good); }

/* ── Honesty ────────────────────────────────────────────────── */
.honesty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
@media (max-width: 900px) { .honesty-grid { grid-template-columns: 1fr; max-width: 34rem; } }
.honesty-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.1rem; padding: 1.75rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.honesty-card:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -26px rgba(20,24,92,0.4); transform: translateY(-3px); }
.honesty-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--accent-warm-glow); color: var(--accent-warm); border: 1px solid rgba(180,83,9,0.22); margin-bottom: 1rem; }
[data-theme="dark"] .honesty-ico { color: var(--accent-warm-soft); background: rgba(232,162,76,0.14); border-color: rgba(232,162,76,0.28); }
.honesty-h { font-size: 1.08rem; font-weight: 650; color: var(--ink); margin: 0 0 0.5rem; letter-spacing: -0.01em; line-height: 1.3; }
.honesty-p { font-size: 0.94rem; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* ── FAQ (native details accordion) ─────────────────────────── */
.faq-list { max-width: 52rem; margin-top: 2.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { border: 1px solid var(--border); border-radius: 0.9rem; background: var(--bg-surface); overflow: hidden; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.faq-item:hover { border-color: var(--border-accent); }
.faq-item[open] { border-color: var(--border-accent); box-shadow: 0 14px 34px -22px rgba(32, 35, 92, 0.35); }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-size: 1.06rem; font-weight: 600; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { flex: 1; }
.faq-chevron { flex-shrink: 0; color: var(--accent); transition: transform 0.25s var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 0.9rem; }
.faq-a { padding: 0 1.4rem 1.3rem; }
.faq-a p { margin: 0; font-size: 1rem; line-height: 1.72; color: var(--text-muted); max-width: 46rem; }
.faq-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.faq-a a:hover { color: var(--accent-strong); }
.faq-disclaimer { display: flex; align-items: center; gap: 0.5rem; margin-top: 2rem; font-size: 0.85rem; color: var(--text-muted); }
.faq-disclaimer svg { color: var(--accent); flex-shrink: 0; }
@media (max-width: 640px) {
    .faq-q { padding: 1.25rem 1.3rem; font-size: 1.02rem; }
    .faq-a { padding: 0 1.3rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .faq-item, .faq-chevron { transition: none; } }

/* ── Closing CTA band ───────────────────────────────────────── */
.cta { position: relative; padding: 2rem 0 9.25rem; overflow-x: clip; }
.cta-card {
    position: relative; overflow: hidden; max-width: 56rem; margin: 0 auto; padding: 4rem 2rem;
    text-align: center; border-radius: 1.75rem;
    background: linear-gradient(150deg, #FFFFFF 0%, #F1F2FC 44%, #FBF1E6 100%);
    border: 1px solid var(--border); box-shadow: 0 40px 80px -42px rgba(20, 24, 92, 0.32); isolation: isolate;
}
.cta-card-grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(58,53,181,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(58,53,181,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, #000 35%, transparent 80%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, #000 35%, transparent 80%);
}
.cta-card-glow { position: absolute; top: -34%; left: 50%; transform: translateX(-50%); width: 42rem; height: 26rem; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(232,148,60,0.24), transparent 70%); }
.cta-inner { position: relative; z-index: 1; max-width: 38rem; margin: 0 auto; }
.cta-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: #B45309; margin-bottom: 1rem; display: block; font-feature-settings: "zero" 1; }
.cta-h { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 650; color: #20235C; margin: 0 0 1rem; text-wrap: balance; }
.cta-p { font-size: 1.08rem; line-height: 1.6; color: #4A5360; margin: 0 0 2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.cta-btn-light { background: #3A35B5; color: #fff; padding: 0.9rem 1.7rem; font-size: 0.95rem; box-shadow: 0 14px 30px -12px rgba(58, 53, 181, 0.55); }
.cta-btn-light:hover { background: #2A2690; color: #fff; box-shadow: 0 16px 34px -12px rgba(58, 53, 181, 0.7); }
.cta-btn-ghost { background: #FFFFFF; color: #20235C; padding: 0.9rem 1.6rem; font-size: 0.95rem; border: 1px solid rgba(58, 53, 181, 0.24); }
.cta-btn-ghost:hover { background: rgba(58, 53, 181, 0.08); border-color: rgba(58, 53, 181, 0.4); color: #2A2690; }
.cta-status { min-height: 1.25rem; margin: 1.1rem 0 0; font-size: 0.88rem; font-weight: 550; color: #15803D; }
@media (max-width: 560px) { .cta-card { padding: 3rem 1.25rem; } .cta-actions .btn { width: 100%; justify-content: center; } }

/* ============================================================
   FOOTER - the Ophelios reveal (citizen columns, no residency seal).
   ============================================================ */
.landing-body { --footer-h: 28rem; }
.landing-body .landing-main {
    position: relative; z-index: 1; background: var(--bg-deep);
    border-bottom-left-radius: 2.25rem; border-bottom-right-radius: 2.25rem;
    margin-bottom: calc(var(--footer-h) - 3rem);
    box-shadow: 0 1.5rem 3rem -1rem rgba(20, 24, 92, 0.16);
}
.landing-body .isl-footer { visibility: hidden; }
.landing-body.footer-revealed .isl-footer { visibility: visible; }
.landing-body .isl-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
    background: linear-gradient(180deg, #20235C 0%, #191C4D 100%); background-color: #191C4D;
    color: #EDEEFA; overflow: hidden;
}
.isl-footer-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(201, 203, 255, 0.16) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); }
.isl-footer-glow { position: absolute; top: -8rem; left: 50%; transform: translateX(-50%); width: min(50rem, 100%); height: 22rem; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(123, 118, 240, 0.28), transparent 70%); pointer-events: none; }
.isl-footer-top { position: relative; z-index: 1; padding: 5.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; }
@media (min-width: 768px) { .isl-footer-top { padding-left: 2rem; padding-right: 2rem; } }
.isl-footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; }
.isl-footer-mark { display: inline-flex; color: #C9CBFF; }
.isl-footer-name { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.isl-footer-tagpill { font-family: var(--font-mono); font-size: 0.62rem; text-transform: lowercase; letter-spacing: 0.05em; color: var(--footer-tagpill-ink); background: rgba(232,148,60,0.16); border: 1px solid rgba(232,148,60,0.32); border-radius: 9999px; padding: 0.12rem 0.5rem; align-self: center; }
.isl-footer-tag { color: rgba(237, 238, 250, 0.78); font-size: 0.95rem; line-height: 1.65; max-width: 24rem; margin: 1.1rem 0 1.5rem; }
.isl-footer-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 550; color: #fff; padding: 0.6rem 1.15rem; border: 1px solid rgba(201, 203, 255, 0.4); border-radius: 9999px; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.isl-footer-cta:hover { color: #fff; background: rgba(123, 118, 240, 0.22); border-color: rgba(201, 203, 255, 0.7); }
.isl-footer-cta svg { transition: transform 0.25s var(--ease); }
.isl-footer-cta:hover svg { transform: translateX(0.2rem); }
.isl-footer-socials { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.isl-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 9999px; border: 1px solid rgba(201, 203, 255, 0.28); color: rgba(237, 238, 250, 0.82); background: rgba(201, 203, 255, 0.06); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); }
.isl-footer-social:hover { color: #fff; border-color: rgba(201, 203, 255, 0.7); background: rgba(123, 118, 240, 0.22); transform: translateY(-2px); }
.isl-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; }
.isl-footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.isl-footer-h { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: #9FA4D6; margin-bottom: 0.2rem; }
.isl-footer-col a { color: rgba(237, 238, 250, 0.82); font-size: 0.9rem; transition: color 0.15s var(--ease); width: fit-content; }
.isl-footer-col a:hover { color: #fff; }
.isl-footer-base { position: relative; padding: 1.5rem; border-top: 1px solid rgba(201, 203, 255, 0.16); display: flex; justify-content: space-between; align-items: center; gap: 0.85rem 1.5rem; flex-wrap: wrap; font-size: 0.8125rem; color: rgba(237, 238, 250, 0.7); }
.isl-footer-base-left { display: inline-flex; align-items: center; gap: 0.55rem 0.8rem; flex-wrap: wrap; }
.isl-footer-base-right { display: inline-flex; align-items: center; gap: 1.25rem; }
.isl-footer-copy a { color: rgba(237, 238, 250, 0.82); text-decoration: none; transition: color 0.15s var(--ease); }
.isl-footer-copy a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.isl-footer-legal { display: inline-flex; align-items: center; gap: 0.6rem; }
.isl-footer-legal a { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(237, 238, 250, 0.7); text-decoration: none; transition: color 0.15s var(--ease); }
.isl-footer-lock, .isl-footer-a11y-ico { color: #9FA4D6; flex-shrink: 0; }
.isl-footer-legal a:hover { color: #fff; }
.isl-footer-legal a:hover .isl-footer-a11y-ico, .isl-footer-legal a:hover .isl-footer-lock { color: #fff; }
.isl-footer-legal-sep { color: rgba(201, 203, 255, 0.35); }
.isl-footer-mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; }
@media (max-width: 820px) {
    .isl-footer-top { grid-template-columns: 1fr; gap: 2.25rem; }
    .isl-footer-cols { display: none; }
    .landing-body .isl-footer { position: static; }
    .landing-body .landing-main { margin-bottom: 0; border-radius: 0; box-shadow: none; }
    .isl-footer-base { flex-direction: column; justify-content: center; text-align: center; }
    .isl-footer-base-right { width: 100%; justify-content: center; }
    .isl-footer-base-left { width: 100%; flex-direction: column; align-items: center; gap: 0.7rem; }
    .isl-footer-base-left > .isl-footer-legal-sep { display: none; }
}

/* ── Reveal-on-scroll ───────────────────────────────────────── */
.reveal-on-scroll { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js-anim .reveal-on-scroll:not(.is-visible) { opacity: 0; transform: translateY(1.25rem); }
.js-anim .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-anim .reveal-stagger:not(.is-visible) > * { opacity: 0; transform: translateY(1rem); }
.js-anim .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.js-anim .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js-anim .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js-anim .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.reveal-scale { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-anim .reveal-scale:not(.is-visible) { opacity: 0; transform: translateY(1.5rem) scale(0.98); }
.js-anim .reveal-scale.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll, .reveal-stagger > *, .reveal-scale { opacity: 1 !important; transform: none !important; }
}

/* Overflow guards */
.landing-body { overflow-x: clip; }
.lsec, .cta, .hero { overflow-x: clip; }