/* ==========================================================================
   HOME – BASE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg-primary, #0d0b1e);
    color: var(--color-text-primary, #f0f0f0);
    overflow-x: hidden;
    font-family: var(--font-family-sans, 'Roboto', sans-serif);
    line-height: var(--line-height-md, 1.5);
}

.scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary-500, #3d2c8d), var(--color-primary-300, #6a5ab9));
    z-index: var(--z-index-sidebar, 1000);
    pointer-events: none;
    transition: width .08s linear;
    border-radius: 0 2px 2px 0;
}

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}

.stag {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
                transform .6s cubic-bezier(.22, 1, .36, 1);
}
.stag.in {
    opacity: 1;
    transform: none;
}

.stag-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1),
                transform .65s cubic-bezier(.22, 1, .36, 1);
}
.stag-left.in {
    opacity: 1;
    transform: none;
}

.stag-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1),
                transform .65s cubic-bezier(.22, 1, .36, 1);
}
.stag-right.in {
    opacity: 1;
    transform: none;
}

.stag-scale {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
                transform .6s cubic-bezier(.22, 1, .36, 1);
}
.stag-scale.in {
    opacity: 1;
    transform: scale(1);
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--padding-xl, 32px);
}

.s-tag {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary-300, #6a5ab9);
    text-align: center;
    margin-bottom: var(--margin-md, 16px);
}

.s-title {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: var(--line-height-sm, 1.25);
    color: var(--color-text-primary, #f0f0f0);
    text-align: center;
    margin-bottom: var(--margin-md, 16px);
}

.s-sub {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--margin-2xl, 48px);
    line-height: var(--line-height-lg, 1.75);
}

section {
    padding: 96px 0;
}

@media (max-width: 1024px) {
    .s-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
}

@media (max-width: 768px) {
    .wrap { padding: 0 var(--padding-md, 16px); }
    section { padding: 72px 0; }
    .s-sub { font-size: var(--font-size-md, 1rem); }
    .s-title { font-size: clamp(1.4rem, 4vw, 1.8rem); }
}

@media (max-width: 480px) {
    .wrap { padding: 0 var(--padding-sm, 8px); }
    section { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .stag, .stag-left, .stag-right, .stag-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    * { animation: none !important; }
}