/* =====================================================================
   Intertraff VMM — Design System
   Premium, technical, blue. Light-first with dark gradient hero sections.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* Brand navy scale */
    --navy-950: #060e1d;
    --navy-900: #0a1426;
    --navy-850: #0b1b2b;
    --navy-800: #0f2540;
    --navy-700: #143257;
    --navy-600: #1c4170;

    /* Brand blue / cyan accents */
    --blue-700: #1456d6;
    --blue-600: #1e6bff;
    --blue-500: #2d7dff;
    --blue-400: #4f95ff;
    --blue-300: #8bb8ff;
    --cyan-400: #38bdf8;
    --cyan-300: #7dd3fc;

    /* Neutrals */
    --white: #ffffff;
    --paper: #f6f9ff;
    --paper-2: #eef3fb;
    --ink-900: #0b1b2b;
    --ink-700: #243b56;
    --ink-500: #5b6b82;
    --ink-400: #7d8aa0;
    --line: #e3eaf5;
    --line-2: #d4ddee;

    /* Semantic */
    --success: #16a34a;
    --success-bg: #e8f7ee;
    --warning: #d97706;
    --danger: #dc2626;
    --danger-bg: #fdecec;

    /* Gradients */
    --grad-accent: linear-gradient(135deg, #1e6bff 0%, #38bdf8 100%);
    --grad-accent-soft: linear-gradient(135deg, rgba(30,107,255,.12), rgba(56,189,248,.12));
    --grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(56,189,248,.18), transparent 60%),
                 radial-gradient(900px 500px at 0% 0%, rgba(30,107,255,.22), transparent 55%),
                 linear-gradient(180deg, #0a1426 0%, #0b1b2b 100%);

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(11,27,43,.06);
    --shadow-sm: 0 2px 8px rgba(11,27,43,.06);
    --shadow-md: 0 10px 30px rgba(11,27,43,.08);
    --shadow-lg: 0 24px 60px rgba(11,27,43,.14);
    --shadow-glow: 0 18px 50px rgba(30,107,255,.30);

    /* Layout */
    --container: 1180px;
    --container-narrow: 880px;
    --nav-h: 70px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .15s var(--ease);
    --t: .25s var(--ease);

    /* ---------- Aurora Light redesign tokens (ADDITIVE — no existing value changed) ---------- */
    /* Brand hue family: one canonical 3-stop ramp + one per-card surprise */
    --brand-royal:  #1e50ff;   /* logo VMM box; gradient stop 1 */
    --brand-indigo: #5b6cff;   /* depth hue; gradient stop 2 */
    --brand-teal:   #2dd4bf;   /* life hue;  gradient stop 3 */
    --brand-violet: #7c5cff;   /* per-card accent / featured tie-in */

    --ink-brand: #0d1b3e;      /* logo wordmark navy (slightly more indigo than --ink-900) */

    --paper-aurora: #fbfcff;   /* default light section base */
    --paper-mist:   #f3f7ff;   /* bottom stop of hero/pricing gradient */

    --shadow-brand: 0 30px 70px rgba(11,27,43,.10), 0 4px 14px rgba(30,80,255,.06);

    --grad-brand:      linear-gradient(120deg, #11286f 0%, #1d44d8 50%, #1f63c9 100%);
    --grad-brand-deep: linear-gradient(120deg, #0b1b6e 0%, #1e50ff 55%, #2f86e8 100%);
    --grad-brand-text: linear-gradient(90deg, #1e50ff, #1488c7); /* AA: end stop darkened to clear large-text 3:1 on near-white */

    --aurora-mesh:
        radial-gradient(760px 460px at 12% -8%,  rgba(30,80,255,.10),  transparent 60%),
        radial-gradient(680px 520px at 92% 8%,   rgba(91,108,255,.09), transparent 58%),
        radial-gradient(620px 480px at 70% 108%, rgba(45,212,191,.07), transparent 60%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink-900);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.12;
    margin: 0 0 .4em;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1rem; }

a { color: var(--blue-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-700); }

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

code, pre { font-family: var(--font-mono); }

hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }

::selection { background: rgba(30,107,255,.18); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(56px, 8vw, 110px); position: relative; }
.section-sm { padding-block: clamp(40px, 5vw, 64px); }
.section-tight { padding-block: clamp(28px, 4vw, 48px); }

.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
/* Aurora Light: .bg-hero = light aurora canvas (dark text); .bg-dark = brand band (white text) */
.bg-dark {
    background:
        radial-gradient(900px 380px at 50% -20%, rgba(255,255,255,.12), transparent 60%),
        var(--grad-brand);
    color: #dbe6ff;
}
.bg-hero {
    background:
        var(--aurora-mesh),
        linear-gradient(180deg, var(--paper-aurora) 0%, var(--paper-mist) 100%);
    color: var(--ink-700);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-hero h1, .bg-hero h2, .bg-hero h3 { color: var(--ink-brand); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.muted { color: var(--ink-500); }
.lead { font-size: 1.18rem; color: var(--ink-700); line-height: 1.7; }
.bg-dark .muted { color: #9fb2cd; }
.bg-hero .muted { color: var(--ink-500); }
.bg-dark .lead { color: #e6edff; }
.bg-hero .lead { color: var(--ink-700); }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600);
}
.bg-dark .eyebrow { color: #cfe0ff; }
.bg-hero .eyebrow { color: var(--blue-600); }

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Grid utilities */
.grid { display: grid; gap: 24px; }
/* Allow grid items to shrink below their content (so wide code blocks scroll
   internally instead of blowing out the column). */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: .5rem; } .gap { gap: 1rem; } .gap-lg { gap: 1.5rem; }
.wrap { flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--blue-600); --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--font-sans); font-weight: 600; font-size: .95rem; line-height: 1;
    padding: .82rem 1.4rem; border-radius: var(--r-pill); border: 1px solid transparent;
    background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t);
    white-space: nowrap; text-decoration: none;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn-primary { background: var(--grad-accent); box-shadow: var(--shadow-glow); }
.btn-primary:hover { box-shadow: 0 22px 60px rgba(30,107,255,.42); }

.btn-secondary { background: var(--navy-850); color: #fff; }
.btn-secondary:hover { background: var(--navy-800); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper); color: var(--ink-900); border-color: var(--blue-300); }
.bg-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.24); }
.bg-dark .btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.bg-hero .btn-ghost { color: var(--ink-900); border-color: var(--line-2); }
.bg-hero .btn-ghost:hover { background: var(--paper); color: var(--ink-900); border-color: var(--blue-300); }

.btn-lg { padding: 1rem 1.8rem; font-size: 1.02rem; }
.btn-sm { padding: .55rem 1rem; font-size: .85rem; }
.btn-block { width: 100%; }

/* ---------- Pills / badges ---------- */
.pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .85rem; border-radius: var(--r-pill);
    font-size: .8rem; font-weight: 500; line-height: 1;
    background: var(--grad-accent-soft); color: var(--blue-700);
    border: 1px solid rgba(30,107,255,.18);
}
.bg-dark .pill {
    background: rgba(255,255,255,.14); color: #eaf1ff; border-color: rgba(255,255,255,.28);
}
.bg-hero .pill {
    background: var(--grad-accent-soft); color: var(--blue-700); border-color: rgba(30,107,255,.18);
}
.badge {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem;
    border-radius: var(--r-sm); font-size: .75rem; font-weight: 600; line-height: 1;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-blue { background: rgba(30,107,255,.1); color: var(--blue-700); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Cards ---------- */
.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }

.feature-card { padding: 1.8rem; }
.feature-icon {
    width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--grad-accent-soft); color: var(--blue-600); margin-bottom: 1.1rem;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.18rem; margin-bottom: .4rem; }
.feature-card p { color: var(--ink-500); margin: 0; font-size: .96rem; }

.glass {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg); backdrop-filter: blur(10px);
}

/* ---------- Stats ---------- */
.stat .stat-num {
    font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 600; letter-spacing: -.02em;
    background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .stat-label { color: var(--ink-500); font-size: .92rem; }
.bg-dark .stat .stat-label { color: #9fb2cd; }
.bg-hero .stat .stat-label { color: var(--ink-500); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; color: var(--ink-700); }
.input, .select, .textarea {
    width: 100%; font-family: inherit; font-size: .96rem; color: var(--ink-900);
    padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-md);
    background: var(--white); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(30,107,255,.14);
}
.textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: .82rem; color: var(--ink-400); margin-top: .35rem; }
.field-error { font-size: .82rem; color: var(--danger); margin-top: .35rem; }

/* ---------- Code blocks ---------- */
.codeblock {
    background: var(--navy-900); border: 1px solid var(--navy-700); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
}
.codeblock-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .9rem; border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
}
.codeblock-dots { display: flex; gap: 6px; }
.codeblock-dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.codeblock-dots i:nth-child(1){ background:#ff5f57;} .codeblock-dots i:nth-child(2){ background:#febc2e;} .codeblock-dots i:nth-child(3){ background:#28c840;}
.codeblock-lang { font-family: var(--font-mono); font-size: .76rem; color: #8fa6c6; letter-spacing: .04em; }
.codeblock pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; }
.codeblock code { font-size: .86rem; line-height: 1.65; color: #d7e3f5; white-space: pre; }
.copy-btn {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600;
    color: #9fb2cd; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    padding: .35rem .7rem; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t-fast);
}
.copy-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.copy-btn.copied { color: #28c840; border-color: rgba(40,200,64,.4); }

/* Syntax accents (lightweight) */
.tok-key { color: #7dd3fc; } .tok-str { color: #9ae6b4; } .tok-num { color: #fbb6ce; }
.tok-com { color: #5f7a99; } .tok-fn { color: #c4b5fd; } .tok-punc { color: #8fa6c6; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.tab {
    font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--ink-500);
    padding: .5rem .9rem; border-radius: var(--r-pill); cursor: pointer; border: 1px solid transparent;
    background: transparent; transition: all var(--t-fast);
}
.tab:hover { color: var(--ink-900); background: var(--paper-2); }
.tab.active { color: var(--blue-700); background: rgba(30,107,255,.1); border-color: rgba(30,107,255,.18); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); font-weight: 600; }
.table tbody tr:hover { background: var(--paper); }
.table-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }

/* ---------- Misc ---------- */
.divider-grad { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.kbd {
    font-family: var(--font-mono); font-size: .8rem; padding: .15rem .45rem; border-radius: 6px;
    background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-700);
}
.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; color: var(--ink-700); }
.list-check li::before {
    content: ""; position: absolute; left: 0; top: .15rem; width: 1.15rem; height: 1.15rem;
    border-radius: 50%; background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- FAQ / accordion ---------- */
.faq { display: flex; flex-direction: column; gap: .7rem; }
.faq-item {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: .1rem 1.2rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item:hover { border-color: var(--blue-300); }
.faq-item[open] { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.faq-item summary {
    cursor: pointer; font-weight: 600; padding: 1rem 0; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--blue-600); font-weight: 300; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 0 0 1.1rem; color: var(--ink-500); }

/* Reveal animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeUp .6s var(--ease) both; }
.reveal-2 { animation: fadeUp .6s var(--ease) .08s both; }
.reveal-3 { animation: fadeUp .6s var(--ease) .16s both; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-2, .reveal-3 { animation: none; } }