/* =========================================================
   SAGA GLOBAL DESIGN SYSTEM
   Cinematic / Premium Comic Platform
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    /* =========================
       COLORS
    ========================= */

    --saga-bg: #0b0b0f;
    --saga-bg-secondary: #121218;
    --saga-bg-soft: #1a1a22;

    --saga-surface: rgba(255,255,255,0.04);
    --saga-surface-hover: rgba(255,255,255,0.07);

    --saga-border: rgba(255,255,255,0.08);

    --saga-text: #ffffff;
    --saga-text-soft: rgba(255,255,255,0.72);
    --saga-text-muted: rgba(255,255,255,0.45);

    /* =========================
       BRAND ACCENT
    ========================= */

    --saga-accent: #7b3ff2;
    --saga-accent-2: #a855f7;

    --saga-gradient:
        linear-gradient(
            135deg,
            #7b3ff2,
            #a855f7
        );

    /* =========================
       SHADOW
    ========================= */

    --saga-shadow-sm:
        0 6px 20px rgba(0,0,0,.18);

    --saga-shadow-md:
        0 14px 40px rgba(0,0,0,.28);

    --saga-shadow-lg:
        0 24px 60px rgba(0,0,0,.45);

    /* =========================
       RADIUS
    ========================= */

    --saga-radius-sm: 12px;
    --saga-radius-md: 18px;
    --saga-radius-lg: 28px;
    --saga-radius-full: 999px;

    /* =========================
       SPACING
    ========================= */

    --saga-space-1: 4px;
    --saga-space-2: 8px;
    --saga-space-3: 12px;
    --saga-space-4: 16px;
    --saga-space-5: 24px;
    --saga-space-6: 32px;
    --saga-space-7: 48px;
    --saga-space-8: 72px;

    /* =========================
       TRANSITION
    ========================= */

    --saga-transition:
        all .28s ease;

}


/* =========================================================
   GLOBAL RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
}

body{
    margin:0;
    padding:0;

    background:var(--saga-bg);

    color:var(--saga-text);

    font-family:
        Inter,
        sans-serif;

    font-size:16px;
    font-weight:400;

    line-height:1.6;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;
}


/* =========================================================
   SELECTION
========================================================= */

::selection{
    background:#7b3ff2;
    color:#fff;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#2b2b36;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#45455a;
}


/* =========================================================
   LINKS
========================================================= */

a{
    color:inherit;

    text-decoration:none;

    transition:var(--saga-transition);
}

a:hover{
    opacity:1;
}


/* =========================================================
   IMAGES
========================================================= */

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


/* =========================================================
   VIDEO
========================================================= */

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


/* =========================================================
   CONTAINER
========================================================= */

.saga-container{
    width:min(1400px,92%);
    margin-inline:auto;
}


/* =========================================================
   SECTION SPACING
========================================================= */

.saga-section{
    position:relative;
    padding:100px 0;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0 0 18px;

    line-height:1.1;

    font-weight:700;

    letter-spacing:-0.03em;

    color:var(--saga-text);
}

h1{
    font-size:clamp(42px,6vw,76px);
}

h2{
    font-size:clamp(32px,4vw,56px);
}

h3{
    font-size:clamp(24px,3vw,36px);
}

h4{
    font-size:22px;
}

h5{
    font-size:18px;
}

h6{
    font-size:15px;
}

p{
    margin:0 0 18px;

    color:#0b0c11;

    line-height:1.8;
}


/* =========================================================
   TEXT UTILITIES
========================================================= */

.saga-text-center{
    text-align:center;
}

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

.saga-gradient-text{
    background:var(--saga-gradient);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* =========================================================
   BUTTONS
========================================================= */

.saga-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:52px;

    padding:14px 26px;

    border:none;
    outline:none;

    border-radius:var(--saga-radius-full);

    background:var(--saga-gradient);

    color:#fff;

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

    cursor:pointer;

    transition:var(--saga-transition);

    box-shadow:
        0 10px 30px rgba(123,63,242,.25);
}

.saga-btn:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px rgba(123,63,242,.35);

}

.saga-btn:active{
    transform:translateY(0);
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.saga-btn-outline{

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:none;

}

.saga-btn-outline:hover{

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   GLASS CARD
========================================================= */

.saga-glass{

    background:
        rgba(255,255,255,.04);

    backdrop-filter:
        blur(16px);

    border:
        1px solid rgba(255,255,255,.06);

    border-radius:
        var(--saga-radius-lg);

    box-shadow:
        var(--saga-shadow-md);

}


/* =========================================================
   GRID SYSTEM
========================================================= */

.saga-grid{
    display:grid;
    gap:24px;
}

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

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

.saga-grid-4{
    grid-template-columns:repeat(4,1fr);
}


/* =========================================================
   HERO ANIMATION
========================================================= */

.saga-global-hero__content{
    animation:
        sagaFadeUp 1s ease forwards;
}

.saga-global-hero__content h1{

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

    animation:
        sagaFadeUp .9s ease forwards;

}

.saga-global-hero__content p{

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

    animation:
        sagaFadeUp 1s ease forwards;

    animation-delay:.2s;

}

.saga-global-hero__content .saga-btn{

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

    animation:
        sagaFadeUp 1s ease forwards;

    animation-delay:.4s;

}


/* =========================================================
   GLOBAL ANIMATION
========================================================= */

@keyframes sagaFadeUp{

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================================
   FADE IN CLASS
========================================================= */

.saga-fade{
    opacity:0;
    transform:translateY(30px);
    animation:sagaFadeUp .9s ease forwards;
}


/* =========================================================
   DIVIDER
========================================================= */

.saga-divider{

    width:100%;
    height:1px;

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   BADGE
========================================================= */

.saga-badge{

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

    padding:8px 14px;

    border-radius:999px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.06);

    color:
        var(--saga-text-soft);

    font-size:13px;
    font-weight:600;

}


/* =========================================================
   INPUTS
========================================================= */

input,
textarea,
select{

    width:100%;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        16px;

    padding:
        14px 18px;

    color:
        var(--saga-text);

    outline:none;

    transition:
        var(--saga-transition);

}

input:focus,
textarea:focus,
select:focus{

    border-color:
        rgba(123,63,242,.6);

    box-shadow:
        0 0 0 4px rgba(123,63,242,.15);

}


/* =========================================================
   TABLE
========================================================= */

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:16px;
    border-bottom:
        1px solid rgba(255,255,255,.08);
}

th{
    text-align:left;
    color:var(--saga-text);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:992px){

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

}

@media(max-width:768px){

    body{
        font-size:15px;
    }

    .saga-container{
        width:min(100%,92%);
    }

    .saga-section{
        padding:72px 0;
    }

    .saga-grid-2,
    .saga-grid-3,
    .saga-grid-4{
        grid-template-columns:1fr;
    }

    h1{
        font-size:44px;
    }

    h2{
        font-size:34px;
    }

    h3{
        font-size:26px;
    }

}

@media(max-width:480px){

    .saga-section{
        padding:56px 0;
    }

    .saga-btn{
        width:100%;
    }

}