/* ── RESET ─────────────────────────────────────────── */

*, *::before, *::after {

    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

/* ── ROOT ─────────────────────────────────────────── */

:root {

    --bg:       #09090e;
    --bg2:      #0f1118;
    --bg3:      #161a26;
    --bg4:      #1c2030;

    --border:   #1f2437;
    --border2:  #2a3048;

    --accent:   #f97316;
    --accent2:  #fb923c;
    --accentD:  #ea6b0a;

    --glow:     rgba(249,115,22,0.15);
    --glow2:    rgba(249,115,22,0.06);

    --text:     #eaecf2;
    --text2:    #c4c9d9;

    --muted:    #5a6178;
    --muted2:   #7c8499;

    --success:  #22c55e;
    --gold:     #f59e0b;

}

/* ── HTML ─────────────────────────────────────────── */

html {

    scroll-behavior: smooth;
    overflow-x: hidden;

}

/* ── BODY ─────────────────────────────────────────── */

body {

    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;

}

/* ── GRAIN OVERLAY ───────────────────────────────── */

body::before {

    content: '';

    position: fixed;

    inset: 0;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");

    pointer-events: none;

    z-index: 0;

    opacity: 0.4;

}

/* ── SECTION BASE ───────────────────────────────── */

.section {

    padding: 90px 40px;
    position: relative;

}

.section-inner {

    max-width: 1140px;
    margin: 0 auto;

}

.section-label {

    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--accent);

    margin-bottom: 14px;

}

.section-label::before {

    content: '';

    width: 20px;
    height: 2px;

    background: var(--accent);

    border-radius: 2px;

}

.section-title {

    font-family: 'Syne', sans-serif;

    font-size: clamp(26px, 3.5vw, 40px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.01em;

    margin-bottom: 14px;

}

.section-title span {

    color: var(--accent);

}

.section-sub {

    font-size: 16px;

    color: var(--text2);

    max-width: 540px;

    line-height: 1.7;

}

/* ── ANIMATION ─────────────────────────────────── */

@keyframes fadeUp {

    from {

        opacity: 0;
        transform: translateY(20px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

.reveal {

    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

}

.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}

/* ── SCROLLBAR ─────────────────────────────────── */

::-webkit-scrollbar {

    width: 5px;

}

::-webkit-scrollbar-track {

    background: var(--bg);

}

::-webkit-scrollbar-thumb {

    background: var(--border2);

    border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--accent);

}