:root {
    --bg: #050505;
    --bg-2: #0a0a0a;
    --bg-3: #111111;
    --fg: #ffffff;
    --muted: #ffffff;
    --dim: #737373;
    --line: #ffffff58;
    --acid: #ccff00;
    --acid-2: #000000;
    --danger: #ff3b3b;
    --black: #000000;
    --white: #ffffff;

    --max: 1180px;
    --max-sm: 820px;

    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --ease: cubic-bezier(.16, 1, .3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    min-height: 100vh;
    background:
    radial-gradient(circle at 15% 10%, rgba(204,255,0,.10), transparent 26rem),
    radial-gradient(circle at 85% 20%, rgba(204,255,0,.06), transparent 20rem),
    linear-gradient(180deg, #050505 0%, #070707 45%, #050505 100%);
    color: var(--fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

button {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

::selection {
    background: var(--acid);
    color: var(--black);
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: screen;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.container-sm {
    max-width: var(--max-sm);
}

.mono {
    font-family: var(--font-mono);
}

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

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

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

.inline-link {
    color: var(--acid);
    border-bottom: 1px solid currentColor;
}

.inline-link:hover {
    opacity: .75;
}

.light-theme .inline-link {
    color: var(--acid-2);
}

.skip {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    background: var(--acid);
    color: var(--black);
    padding: .8rem 1rem;
    font: 800 .8rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.skip:focus {
    top: 1rem;
}

/* NAV */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font: 900 .85rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-mark {
    width: .72rem;
    height: .72rem;
    background: var(--acid);
    border-radius: 999px;
    box-shadow: 0 0 28px rgba(204,255,0,.75);
}

.nav-links {
    display: none;
    align-items: center;
    gap: 1.2rem;
    font: 700 .72rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav-links a:hover {
    color: var(--acid);
}

.nav-cta {
    width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem;
    background: var(--acid);
    color: var(--black);
    font: 900 1.1rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-cta:hover {
    background: var(--white);
}

/* HERO */

.hero {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 7rem 0 4rem;
}

.hero-grid {
    display: grid;
    gap: 3rem;
    align-items: end;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.5rem;
    color: var(--muted);
    font: 800 .76rem var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: .65rem;
    height: .65rem;
    border-radius: 99px;
    background: var(--acid);
    box-shadow: 0 0 20px rgba(204,255,0,.7);
}

h1 {
    max-width: 11ch;
    font-size: clamp(3.2rem, 9vw, 7.6rem);
    line-height: .88;
    letter-spacing: -.0125em;
    font-weight: 950;
    text-wrap: balance;
}

.hero-sub {
    max-width: 50rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: clamp(1.12rem, 2vw, 1.45rem);
    line-height: 1.55;
    font-weight: 360;
}

.hero-sub strong {
    color: var(--fg);
    font-weight: 850;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.25rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.35rem;
    padding: 1rem 1.25rem;
    font: 900 .78rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition:
    transform .25s var(--ease),
    background .25s var(--ease),
    color .25s var(--ease),
    border-color .25s var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--acid);
    color: var(--black);
}

.btn-primary:hover {
    background: var(--white);
}

.btn-ghost {
    border: 1px solid var(--line);
    color: var(--fg);
    background: rgba(255,255,255,.02);
}

.btn-ghost:hover {
    border-color: var(--acid);
    color: var(--acid);
}

.btn-dark {
    background: var(--black);
    color: var(--acid);
}

.btn-dark:hover {
    background: var(--bg-3);
}

.hero-card {
    border: 1px solid var(--line);
    background: rgba(10,10,10,.76);
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    overflow: hidden;
}

.terminal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
    background: #0d0d0d;
    font: 800 .72rem var(--font-mono);
    color: var(--dim);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dots {
    display: flex;
    gap: .35rem;
}

.dot {
    width: .62rem;
    height: .62rem;
    border-radius: 99px;
    background: var(--line);
}

.dot:nth-child(1) { background: #ff5f57; }
.dot:nth-child(2) { background: #ffbd2e; }
.dot:nth-child(3) { background: #28c840; }

.terminal {
    padding: 1.2rem;
    font: 500 .88rem/1.7 var(--font-mono);
    color: var(--muted);
}

.terminal p + p {
    margin-top: .75rem;
}

.prompt {
    color: var(--acid);
}

.cursor {
    display: inline-block;
    width: .6em;
    height: 1em;
    margin-left: .15rem;
    vertical-align: -.18em;
    background: var(--acid);
    animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* MARQUEE */

.marquee-wrap {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: #060606;
    padding: .85rem 0;
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    color: var(--dim);
    font: 800 .72rem var(--font-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    animation: marquee 34s linear infinite;
}

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

/* SECTIONS */

section {
    padding: 6rem 0;
}

.section-acid {
    background: var(--acid);
    color: var(--black);
}

.section-white {
    background: var(--white);
    color: var(--black);
}

.section-dark {
    background: var(--bg-2);
}

.kicker {
    margin-bottom: 1.25rem;
    color: var(--acid);
    font: 900 1.125rem var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.light-theme .kicker {
    color: var(--acid-2);
}

.section-acid .kicker,
.section-white .kicker {
    color: var(--black);
}

h2 {
    max-width: 17ch;
    font-size: clamp(2.25rem, 5vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 950;
    text-wrap: balance;
}

.section-white h2,
.section-acid h2 {
    color: var(--black);
}

.prose {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
    max-width: 54rem;
    color: var(--muted);
    font-size: clamp(1.06rem, 1.6vw, 1.26rem);
    line-height: 1.62;
    font-weight: 360;
}

.section-acid .prose,
.section-white .prose {
    color: rgba(0,0,0,.78);
    font-weight: 440;
}

.prose strong {
    color: var(--fg);
    font-weight: 850;
}

.section-acid .prose strong,
.section-white .prose strong {
    color: var(--black);
}

/* FACTS */

.facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 2.5rem;
    border: 1px solid var(--line);
    background: var(--line);
}

.fact {
    min-height: 15rem;
    padding: 1.55rem;
    background: var(--bg);
    transition:
    background .25s var(--ease),
    color .25s var(--ease),
    transform .25s var(--ease);
}

.fact:hover {
    background: var(--fg);
    color: var(--black);
}

.fact:hover .fact-tag,
.fact:hover .fact-body,
.fact:hover a {
    color: var(--black);
}

.fact-tag {
    margin-bottom: .85rem;
    color: var(--acid);
    font: 900 .72rem var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.light-theme .fact-tag {
    color: var(--acid-2);
}

.fact h3 {
    margin-bottom: .75rem;
    font-size: 1.35rem;
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 900;
}

.fact-body {
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.55;
}

.fact-body code,
.code {
    font-family: var(--font-mono);
    color: var(--acid);
    border: 1px solid var(--acid);
    padding: 2px 5px 2px 8px;
    background: var(--black);
}

.fact:hover .code,
.fact:hover code {
    color: var(--black);
}

/* STEPS */

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 2.5rem;
    border: 1px solid var(--line);
    background: var(--line);
    font-size: 1.3rem;
}

.step {
    padding: 1.6rem;
    background: var(--bg);
}

.step-num {
    margin-bottom: 1.1rem;
    color: var(--acid);
    font: 950 2.5rem/.8 var(--font-mono);
    letter-spacing: -.08em;
}

.light-theme .step-num {
    color: var(--acid-2);
}

.step h3 {
    margin-bottom: .7rem;
    font-size: 1.3rem;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.02em;
}

.step p {
    color: var(--muted);
    line-height: 1.55;
    font-size: 1.3rem;
}

.step small {
    display: block;
    margin-top: 1rem;
    color: var(--dim);
    font: 800 .72rem var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* DOWNLOAD */

.download-box {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(0,0,0,.07);
}

.download-line {
    display: grid;
    gap: .75rem;
    align-items: center;
}

.url-pill {
    overflow: auto;
    padding: 1rem;
    background: var(--black);
    color: var(--acid);
    font: 850 .86rem var(--font-mono);
    white-space: nowrap;
}

.copy-btn {
    min-height: 3.2rem;
    padding: .95rem 1rem;
    background: var(--black);
    color: var(--acid);
    font: 900 .75rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.copy-btn:hover {
    background: #181818;
}

.download-note {
    color: #000;
    line-height: 1.55;
    font-size: 1.25rem;
}

/* LICENSE */

.license-card {
    margin-top: 2.5rem;
    border: 1px solid var(--line);
    background: #090909;
    overflow: hidden;
}

.license-head {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
    color: var(--acid);
    font: 900 .78rem var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.license-body {
    padding: 1.2rem;
    color: var(--muted);
    font: 500 .9rem/1.7 var(--font-mono);
    white-space: pre-wrap;
}

/* LIMITS */

.limits {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
    max-width: 54rem;
}

.limit {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    line-height: 1.5;
    font-size: 1.2rem;
}

.limit b {
    color: var(--acid);
    font-family: var(--font-mono);
    font-size: 2.9rem;
    margin-right: 0.55rem;
}

.light-theme .limit b {
    color: var(--acid-2);
}

/* FOOTER */

footer {
    padding: 5rem 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    text-align: center;
}

.footer-line {
    max-width: 18ch;
    margin: 0 auto;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 950;
}

.footer-meta {
    display: grid;
    gap: .5rem;
    margin-top: 2rem;
    color: var(--dim);
    font: 800 .72rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

/* REVEAL */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */

@media (min-width: 760px) {
    .container {
    padding: 0 2.5rem;
    }

    .nav {
    padding: 1rem 2rem;
    }

    .nav-links {
    display: flex;
    }

    .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    }

    .facts {
    grid-template-columns: repeat(2, 1fr);
    }

    .fact-wide {
    grid-column: 1 / -1;
    }

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

    .download-line {
    grid-template-columns: 1fr auto;
    }
}

.desktop {
    display: none;
}

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

    .fact-wide {
    grid-column: span 3;
    }

    .desktop {
    display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    }

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


/* -------------------------------------------------------------
   LIGHT THEME — synchronisé avec localStorage.monia_config.theme
   ------------------------------------------------------------- */

body.light-theme {
    --bg: #f8f9fa;
    --bg-2: #ffffff;
    --bg-3: #f1f1f1;
    --fg: #1a1a1a;
    --muted: #1a1a1a;
    --dim: #6b7280;
    --line: #1a1a1a30;
}

body.light-theme {
    background:
        radial-gradient(circle at 15% 10%, rgba(204,255,0,.16), transparent 26rem),
        radial-gradient(circle at 85% 20%, rgba(204,255,0,.10), transparent 20rem),
        linear-gradient(180deg, #f8f9fa 0%, #ffffff 45%, #f8f9fa 100%);
}

body.light-theme .noise {
    opacity: .025;
    mix-blend-mode: multiply;
}

body.light-theme .nav {
    background: rgba(248,249,250,.82);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

body.light-theme .nav-cta {
    background: var(--acid-2);
    color: var(--white);
}

body.light-theme .nav-cta:hover {
    background: var(--black);
    color: var(--acid);
}

body.light-theme .hero-card {
    background: rgba(255,255,255,.92);
    border-color: rgba(0,0,0,.1);
    box-shadow: 0 30px 80px rgba(0,0,0,.08);
}

body.light-theme .terminal-bar {
    background: #f1f1f1;
    border-bottom-color: rgba(0,0,0,.08);
}

body.light-theme .terminal {
    background: #ffffff;
    color: var(--fg);
}

body.light-theme .marquee-wrap {
    background: #f1f1f1;
    border-block-color: rgba(0,0,0,.08);
}

body.light-theme .section-dark {
    background: #ffffff;
}

body.light-theme .fact {
    background: var(--bg-2);
}
body.light-theme .fact:hover {
    background: var(--fg);
    color: #ffffff;
}
body.light-theme .fact:hover .fact-tag,
body.light-theme .fact:hover .fact-body,
body.light-theme .fact:hover a {
    color: #ffffff;
}
body.light-theme .fact:hover .code,
body.light-theme .fact:hover code {
    color: var(--acid);
}

body.light-theme .step {
    background: var(--bg-2);
}

body.light-theme .limit {
    background: rgba(255,255,255,.7);
    border-color: rgba(0,0,0,.1);
}

body.light-theme .btn-ghost {
    border-color: rgba(0,0,0,.18);
    background: rgba(255,255,255,.6);
}
body.light-theme .btn-ghost:hover {
    border-color: var(--acid);
    color: var(--acid-2);
}

body.light-theme .btn-primary:hover {
    background: var(--black);
    color: var(--acid);
}

body.light-theme .btn-primary {
    background: var(--acid-2);
    color: var(--white);
}

body.light-theme .btn-primary:hover {
    background: var(--black);
    color: var(--acid);
}

body.light-theme .license-card {
    background: #ffffff;
    border-color: rgba(0,0,0,.1);
}
body.light-theme .license-head {
    border-bottom-color: rgba(0,0,0,.1);
    color: var(--acid-2);
}

body.light-theme footer {
    background: #ffffff;
    color: var(--fg);
    border-top-color: rgba(0,0,0,.08);
}

body.light-theme ::selection {
    background: var(--acid);
    color: var(--black);
}