/* ==========================================================================
   TAWASSUL TYPING & STUDIO
   DESIGN SYSTEM v1.0
   ========================================================================== */

/* ==========================================================================
   CSS RESET
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {

    /* Brand Colors */

    --color-primary: #0F2C59;
    --color-secondary: #2563EB;
    --color-accent: #C8A55B;

    --color-white: #FFFFFF;
    --color-black: #111827;

    --color-gray-50: #F9FAFB;
    --color-gray-100:#F3F4F6;
    --color-gray-200:#E5E7EB;
    --color-gray-300:#D1D5DB;
    --color-gray-400:#9CA3AF;
    --color-gray-500:#6B7280;
    --color-gray-600:#4B5563;
    --color-gray-700:#374151;
    --color-gray-800:#1F2937;
    --color-gray-900:#111827;

    --color-success:#16A34A;
    --color-warning:#F59E0B;
    --color-danger:#DC2626;

    /* Typography */

    --font-primary:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    /* Font Sizes */

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-base:1rem;
    --fs-lg:1.125rem;
    --fs-xl:1.25rem;
    --fs-2xl:1.5rem;
    --fs-3xl:2rem;
    --fs-4xl:2.5rem;
    --fs-5xl:3rem;

    /* Font Weight */

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* Spacing */

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;

    /* Radius */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;

    /* Shadows */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.06);

    --shadow-md:
        0 6px 18px rgba(0,0,0,.10);

    --shadow-lg:
        0 15px 40px rgba(0,0,0,.15);

    /* Layout */

    --container-width:1200px;

    /* Animation */

    --transition:
        all .3s ease;
}
/* ==========================================================================
   GLOBAL
   ========================================================================== */

body{

    font-family:var(--font-primary);

    font-size:var(--fs-base);

    color:var(--color-gray-800);

    background:var(--color-white);

    line-height:1.6;
}

img{

    display:block;

    max-width:100%;
}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);
}

ul{

    list-style:none;
}

button{

    cursor:pointer;

    border:none;

    transition:var(--transition);

    font-family:inherit;
}

input,
textarea,
select{

    font:inherit;
}

.container{

    width:min(
        90%,
        var(--container-width)
    );

    margin:auto;
}
/* =====================================================
HEADER
===================================================== */

.site-header{

    background:var(--color-primary);

    color:var(--color-white);

    padding:18px 0;

    box-shadow:var(--shadow-sm);

}

.site-header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo a{

    font-size:1.6rem;

    font-weight:700;

}

.main-nav ul{

    display:flex;

    gap:2rem;

}

.main-nav a{

    color:white;

    font-weight:500;

}

.main-nav a:hover{

    color:var(--color-accent);

}
/* =====================================================
SECTION
===================================================== */

.section{

    padding:5rem 0;

}

.section-title{

    font-size:2.5rem;

    color:var(--color-primary);

    margin-bottom:1rem;

}

.section-subtitle{

    max-width:700px;

    color:var(--color-gray-600);

    margin-bottom:3rem;

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:var(--radius-md);

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--color-primary);

    color:white;

}

.btn-primary:hover{

    background:#153d78;

}

.btn-secondary{

    background:var(--color-accent);

    color:white;

}

.btn-secondary:hover{

    opacity:.9;

}
/* =====================================================
CARD
===================================================== */

.card{

    background:white;

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

    box-shadow:var(--shadow-sm);

    padding:2rem;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}
/* =====================================================
GRID
===================================================== */

.grid{

    display:grid;

    gap:2rem;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}
/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:992px){

.grid-4{

grid-template-columns:repeat(2,1fr);

}

.grid-3{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){
.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}
.site-header .container{

flex-direction:column;

gap:1rem;

}

.main-nav ul{

flex-wrap:wrap;

justify-content:center;

}

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

.hero-grid{

    grid-template-columns:1fr;

}

.hero{

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.hero h1{

    font-size:2.2rem;

}
}

.section-title{

font-size:2rem;

}

}
/* =====================================================
HERO
===================================================== */

.hero{

    padding:6rem 0;

    background:linear-gradient(
        135deg,
        #F8FAFC,
        #FFFFFF
    );

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:4rem;

}

.hero-badge{

    display:inline-block;

    background:#EEF4FF;

    color:var(--color-primary);

    padding:8px 18px;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:1.5rem;

}

.hero h1{

    font-size:3rem;

    line-height:1.2;

    color:var(--color-primary);

    margin-bottom:1.5rem;

}

.hero p{

    color:var(--color-gray-600);

    font-size:1.1rem;

    margin-bottom:2rem;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    margin-bottom:2rem;

    flex-wrap:wrap;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:1.5rem;

    font-weight:600;

    color:var(--color-gray-700);

}

.hero-image img{

    border-radius:20px;

    box-shadow:var(--shadow-lg);

    width:100%;

    height:auto;

}
/* =====================================================
FOOTER
===================================================== */

.site-footer{

    background:var(--color-primary);

    color:white;

    padding:4rem 0 2rem;

    margin-top:5rem;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:3rem;

}

.site-footer h3,
.site-footer h4{

    margin-bottom:1rem;

}

.site-footer p,
.site-footer li{

    color:#dbe5f1;

    margin-bottom:.6rem;

}

.site-footer a{

    color:#dbe5f1;

}

.site-footer a:hover{

    color:var(--color-accent);

}

.site-footer hr{

    margin:2rem 0;

    border:none;

    border-top:1px solid rgba(255,255,255,.2);

}

.footer-bottom{

    text-align:center;

    font-size:.9rem;

}