/* =========================
   ROOT VARIABLES
========================= */
:root{
    --bg:#0b0b0b;
    --card:#111111;
    --accent:#ffcc00;
    --text:#f5f5f5;
    --muted:#9ca3af;
    --border:#1f1f1f;
}

/* =========================
   GLOBAL RESET
========================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

body{
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

/* =========================
   LINKS & BUTTONS
========================= */
a{
    color:var(--accent);
    text-decoration:none;
}

a:hover{
    opacity:.85;
}
button{
    margin-top:18px;
    width:100%;
    background:var(--accent);
    color:#000;
    padding:14px;
    border:none;
    border-radius:12px;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
}


button:hover{
    transform:translateY(-1px);
}

/* =========================
   HEADER / NAV
========================= */
header{
    background:#000;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:1000;
}

nav{
    max-width:1100px;
    margin:auto;
    padding:16px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

nav strong{
    color:var(--accent);
    font-size:18px;
}

nav a{
    color:var(--muted);
    margin-left:18px;
    font-weight:500;
}

nav a:hover{
    color:#fff;
}


.site-header {
    background:#000;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* BASE NAV */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LEFT GROUP (LOGO + SOCIAL) */
.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* LOGO */
.logo a {
    font-size: 22px;
    font-weight: 700;
    color: #facc15;
    text-decoration: none;
}

/* SOCIAL ICONS */
.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    color: #9da7b3;
    font-size: 18px;
}

/* NAV LINKS (DESKTOP) */
.nav-links a {
    margin-left: 16px;
    color: #9da7b3;
}

/* ACTIVE PAGE */
.nav-links a.active {
    color: #facc15;
    border-bottom: 2px solid #facc15;
}

/* 📱 MOBILE FIX */
@media (max-width: 768px) {

    .nav-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-left {
        width: 100%;
        justify-content: space-between; /* LOGO LEFT, SOCIAL RIGHT */
    }

    .nav-links {
        width: 100%;
        display: flex;
        gap: 18px;
        margin-top: 12px;
    }

    .nav-links a {
        margin-left: 0;
    }
}


/* =========================
   CONTAINER
========================= */
.container{
    max-width:1100px;
    margin:auto;
    padding:24px 20px;
}

/* =========================
   HERO (COMMON)
========================= */
.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    margin-top:40px;
}

.hero img{
    width:100%;
    border-radius:16px;
    box-shadow:0 10px 40px rgba(0,0,0,.6);
}

/* =========================
   CARDS
========================= */
.card{
    background:var(--card);
    padding:28px;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.6);
}

.card h1,
.card h2,
.card h3{
    color:var(--accent);
}

.card p{
    color:var(--muted);
    margin-top:8px;
}

/* =========================
   FORMS
========================= */
form input,
form select{
    width:100%;
    padding:14px;
    margin-top:14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:#000;
    color:var(--text);
}

form input:focus,
form select:focus{
    outline:none;
    border-color:var(--accent);
}

form button{
    margin-top:18px;
    width:100%;
    background:var(--accent);
    color:#000;
    padding:14px;
    border:none;
    border-radius:12px;
    font-weight:700;
    font-size:16px;
}

form button:hover{
    background:#ffd633;
}

/* =========================
   FEATURES / GRID
========================= */
.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px;
    margin-top:40px;
}

.feature{
    background:var(--card);
    padding:18px;
    border-radius:14px;
    text-align:center;
    color:var(--accent);
    font-weight:600;
}

/* =========================
   FOOTER
========================= */
footer{
    text-align:center;
    padding:30px 20px;
    color:var(--muted);
    border-top:1px solid var(--border);
    margin-top:60px;
    font-size:14px;
}

/* =========================
   MODAL (GLOBAL)
========================= */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-content{
    background:var(--card);
    padding:26px;
    border-radius:16px;
    width:100%;
    max-width:420px;
    box-shadow:0 20px 50px rgba(0,0,0,.7);
}

.modal-content h2{
    color:var(--accent);
    margin-bottom:14px;
}

.close{
    float:right;
    font-size:22px;
    cursor:pointer;
    color:var(--muted);
}

.close:hover{
    color:#fff;
}

/* =========================
   UTILITIES
========================= */
.text-center{text-align:center;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}

/* =========================
   MOBILE FIRST
========================= */
@media(max-width:900px){
    .hero{
        grid-template-columns:1fr;
    }

    nav{
        flex-direction:column;
        align-items:flex-start;
    }

    nav div{
        margin-top:10px;
    }

    nav a{
        margin-left:0;
        margin-right:14px;
    }
}

.google-btn{
    background:#fff;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}


.course-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.course-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.level-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 20px;
    font-weight: 600;
}

.level-tag.beginner {
    background: #ffd700;
    color: #000;
}

.course-meta {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 12px;
}

.course-focus strong {
    color: #ffd700;
    font-size: 14px;
}

.course-focus ul {
    margin: 8px 0 12px;
    padding-left: 18px;
}

.course-focus li {
    font-size: 14px;
    margin-bottom: 6px;
    color: #eee;
    text-align: left;
}

.course-outcome {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 15px;
}

.course-outcome i {
    color: #ffd700;
}

.level-tag.intermediate {
    background: #ffb703;
    color: #000;
}

.level-tag.expert {
    background: #f72585;
    color: #fff;
}


.chess-faq {
    margin-top: 80px;
}

.section-title {
    text-align: center;
    font-size: 32px;
    color: #facc15;
    margin-bottom: 30px;
}

.faq-item {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 22px;
    color: #facc15;
}

.faq-question.active::after {
    content: "–";
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
    color: #d1d5db;
}

.faq-answer ul {
    padding-left: 18px;
}

.faq-answer p,
.faq-answer li {
    font-size: 14px;
    margin: 8px 0;
}