.teacher-hero{
    position:relative;

    overflow:hidden;

    padding:30px 0 70px;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
    linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);
}

/* BACKGROUND */

.teacher-bg-pattern{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);

    background-size:40px 40px;
}

/* HERO GRID */

.teacher-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;
}

/* LEFT */

.teacher-badge{
    display:inline-flex;

    align-items:center;

    gap:10px;

    background:white;

    border:1px solid rgba(37,99,235,0.08);

    color:#2563eb;

    padding:12px 18px;

    border-radius:999px;

    font-weight:700;

    margin-bottom:24px;

    box-shadow:
    0 4px 14px rgba(0,0,0,0.04);
}

.teacher-content h1{
    font-size:58px;

    line-height:1.05;

    margin-bottom:24px;
}

.teacher-content p{
    font-size:20px;

    color:var(--muted);

    margin-bottom:36px;

    max-width:620px;
}

/* DASHBOARD */

.dashboard-preview{
    background:white;

    border-radius:36px;

    overflow:hidden;

    border:1px solid #e2e8f0;

    box-shadow:
    0 30px 80px rgba(15,23,42,0.08);
}

/* TOPBAR */

.dashboard-topbar{
    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

    border-bottom:1px solid #e2e8f0;

    background:#f8fafc;
}

.dashboard-dots{
    display:flex;

    gap:8px;
}

.dashboard-dots span{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#cbd5e1;
}

.dashboard-title{
    font-weight:700;

    color:#475569;
}

/* GRID */

.dashboard-grid{
    display:grid;

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

    gap:16px;

    padding:20px;
}

/* CARDS */

.dashboard-card{
    background:#f8fafc;

    border-radius:28px;

    padding:24px;

    transition:0.3s;
    cursor:pointer;
}

.dashboard-card:hover{
    transform:translateY(-5px);
}

.large-card{
    grid-column:span 2;

    min-height:260px;

    background:
    linear-gradient(135deg,#2563eb,#4f46e5);

    color:white;
}

.medium-card{
    background:white;

    border:1px solid #e2e8f0;
}

.stat-card{
    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    min-height:160px;
}

.medium-card,
.stat-card{
    min-height:190px;
}

/* CARD TOP */

.dashboard-card-top{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:26px;
}

.dashboard-icon{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:20px;

    background:rgba(255,255,255,0.14);

    font-size:28px;
}

.medium-card .dashboard-icon,
.stat-card .dashboard-icon{
    background:#eef2ff;
}

.dashboard-label{
    background:rgba(255,255,255,0.14);

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;
}

/* TEXT */

.dashboard-card h3{
    font-size:20px;

    line-height:1.15;

    margin-bottom:16px;
}

.dashboard-card p{
    line-height:1.7;
}

.large-card p{
    color:rgba(255,255,255,0.88);
}

.medium-card p{
    color:var(--muted);
}

.stat-card strong{
    font-size:42px;

    margin:18px 0 8px;
}

.stat-card span{
    color:var(--muted);
}

/* PROGRESS */

.progress-line{
    width:100%;

    height:12px;

    border-radius:999px;

    background:rgba(255,255,255,0.16);

    margin-top:30px;

    overflow:hidden;
}

.progress-line span{
    display:block;

    width:72%;

    height:100%;

    background:white;

    border-radius:999px;
}

/* TOOLS */

.teacher-tools-section{
    background:white;
}

.teacher-tools-grid{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;
}

.teacher-tool-card{
    background:#f8fafc;

    border-radius:30px;

    padding:34px;

    transition:0.3s;
}

.teacher-tool-card:hover{
    transform:translateY(-8px);

    background:#eff6ff;
}

.teacher-tool-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.teacher-tool-icon{
    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;
    background:white;

    font-size:34px;

    box-shadow:
    0 6px 20px rgba(0,0,0,0.04);
}

.teacher-tool-card h3{
    font-size:30px;

    margin-bottom:14px;
}

.teacher-tool-card p{
    color:var(--muted);

    line-height:1.7;
}

.teacher-tool-label{
    padding:6px 12px;

    background:#ede9fe;

    color:#5b21b6;

    font-size:12px;
    font-weight:700;
    letter-spacing:0.5px;

    border-radius:999px;
}

/* FEATURES */

.teacher-features{
    background:#f8fafc;
}

.features-layout{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.feature-box{
    background:white;

    border-radius:32px;

    padding:38px;

    box-shadow:
    0 8px 24px rgba(0,0,0,0.04);
}

.feature-icon{
    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    background:#eef2ff;

    font-size:34px;

    margin-bottom:24px;
}

.feature-box h3{
    font-size:32px;

    margin-bottom:16px;
}

.feature-box p{
    color:var(--muted);

    line-height:1.7;
}

/* CTA */

.teacher-cta{
    background:
    linear-gradient(135deg,#0f172a,#1e293b);

    border-radius:40px;

    padding:80px 40px;

    text-align:center;

    color:white;
}

.teacher-cta h2{
    font-size:50px;

    margin-bottom:22px;
}

.teacher-cta p{
    font-size:20px;

    color:#cbd5e1;

    max-width:700px;

    margin:0 auto 36px;
}

/* FIX MOBILE OVERFLOW */

html,
body{
    overflow-x:hidden;
}

/* MOBILE */

@media(max-width:980px){

    .teacher-hero-grid{
        grid-template-columns:1fr;
    }

    .teacher-content h1{
        font-size:50px;
    }

}

/* MOBILE */

@media(max-width:768px){

    .teacher-hero-grid{
        gap:40px;
    }

    .dashboard-preview{
        border-radius:24px;
    }

    .dashboard-grid{

        display:flex;
        flex-direction:column;
        gap:16px;
    }

    .dashboard-card{
        padding:18px;

        min-width:0;
    }

    .dashboard-card h3{
        font-size:24px;
    }

    .stat-card strong{
        font-size:30px;
    }

    .teacher-tool-card,
    .feature-box{
        padding:24px;
    }

}

@media(max-width:640px){

    .teacher-hero{
        padding:50px 0 80px;
    }

    .teacher-content h1{
        font-size:38px;
    }

    .teacher-cta h2{
        font-size:34px;
    }

}

/* SMALL MOBILE */

@media(max-width:480px){

    .teacher-content h1{
        font-size:34px;

        line-height:1.1;
    }

    .teacher-content p{
        font-size:17px;
    }

    .dashboard-title{
        font-size:14px;
    }

    .dashboard-icon{
        width:48px;
        height:48px;

        font-size:22px;
    }

    .dashboard-card h3{
        font-size:22px;
    }

    .teacher-tool-card h3,
    .feature-box h3{
        font-size:24px;
    }

    .teacher-cta{
        padding:60px 24px;
    }

    .teacher-cta h2{
        font-size:30px;

        line-height:1.2;
    }

}