:root{--primary:#2563eb;--secondary:#7c3aed;--dark:#0f172a;--muted:#64748b;--soft:#f8fafc;--card:#fff;--border:#e2e8f0;--shadow:0 24px 70px rgba(15,23,42,.14);--radius:26px}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 35%),radial-gradient(circle at top right,rgba(124,58,237,.14),transparent 35%),#f8fafc;color:#0f172a}
.fw-black{font-weight:900}
.tm-nav{background:rgba(15,23,42,.92)!important;backdrop-filter:blur(16px);box-shadow:0 10px 35px rgba(0,0,0,.25)}
.navbar-brand{letter-spacing:-.7px}
.nav-link{font-weight:700;opacity:.88}
.nav-link:hover{opacity:1}
.btn{border-radius:16px;font-weight:800;padding:.75rem 1.1rem}
.btn-primary{border:0;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 15px 35px rgba(37,99,235,.3)}
.tm-hero{min-height:720px;display:flex;align-items:center;position:relative;overflow:hidden}
.tm-badge,.tm-level{display:inline-flex;border-radius:999px;padding:.45rem .8rem;font-weight:900;background:#dbeafe;color:#1d4ed8;margin-bottom:1rem}
.tm-hero h1,.page-head h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:950;letter-spacing:-2.8px;line-height:1.02}
.lead,.page-head p,.section-title p{color:var(--muted);font-size:1.17rem;line-height:1.8}
.typing-demo{background:linear-gradient(145deg,#111827,#0f172a);border:1px solid rgba(255,255,255,.12);border-radius:32px;padding:2rem;min-height:360px;color:#e5e7eb;box-shadow:0 35px 100px rgba(15,23,42,.45);position:relative;transform:perspective(900px) rotateY(-6deg);animation:float 5s ease-in-out infinite}
.demo-top{display:flex;gap:.5rem;margin-bottom:2rem}
.demo-top span{width:13px;height:13px;border-radius:50%;background:#ef4444}
.demo-top span:nth-child(2){background:#f59e0b}
.demo-top span:nth-child(3){background:#22c55e}
.typing-demo p{font-size:2rem;font-weight:900;line-height:1.4}
.cursor{width:13px;height:38px;background:#38bdf8;display:inline-block;animation:blink 1s infinite}
.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:absolute;bottom:2rem;left:2rem;right:2rem}
.demo-stats b,.stats-grid>div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:1rem;text-align:center}
.section-title{text-align:center;margin-bottom:2.5rem}
.section-title h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:950;letter-spacing:-2px}
.section-title.light h2,.section-title.light p{color:white}
.tm-card{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.7rem;transition:.25s;position:relative;overflow:hidden}
.tm-card:hover{transform:translateY(-8px);box-shadow:0 35px 90px rgba(15,23,42,.2)}
.tm-card h3{font-weight:900;letter-spacing:-.8px}
.tm-dark{background:linear-gradient(135deg,#0f172a,#1e1b4b);position:relative}
.game-card{height:100%;border-radius:30px;padding:2rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:2.5rem;transition:.25s}
.game-card:hover,.game-tile:hover{transform:translateY(-8px) scale(1.01)}
.game-card h3{font-size:1.5rem;margin-top:1rem}
.page-head{padding:5rem 0;background:linear-gradient(135deg,#eef2ff,#f8fafc)}
.typing-panel{background:#0f172a;color:#e5e7eb;border-radius:32px;padding:2rem;box-shadow:0 35px 100px rgba(15,23,42,.38);max-width:100%;overflow-x:auto}
.typing-text{font-size:1.45rem;line-height:2.1;letter-spacing:.4px}
.char.correct{color:#22c55e}
.char.wrong{color:#ef4444;background:rgba(239,68,68,.18);border-radius:4px}
.char.current{border-bottom:3px solid #38bdf8}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.stats-grid>div{background:#fff;color:#0f172a;border:1px solid #e2e8f0;box-shadow:var(--shadow)}
.stats-grid b{display:block;font-size:2.3rem;font-weight:950;color:#2563eb}
.stats-grid span{font-weight:800;color:#64748b}
.big-icon{font-size:3rem}
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:4rem 1rem}
.auth-card{width:min(480px,100%);background:#fff;border-radius:30px;padding:2rem;box-shadow:var(--shadow)}
.auth-card h1{font-weight:950}
.tm-footer{background:#0f172a;color:#cbd5e1}
.tm-footer a{color:#fff;text-decoration:none}
.blog-content{font-size:1.1rem;line-height:1.9}

.admin-body{background:#f1f5f9;min-height:100vh}
.admin-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.admin-sidebar{background:linear-gradient(180deg,#0f172a,#111827);color:#fff;padding:1.5rem;position:sticky;top:0;height:100vh}
.admin-brand{display:block;color:#fff;text-decoration:none;font-size:1.35rem;font-weight:950;margin-bottom:2rem;letter-spacing:-.8px}
.admin-sidebar nav{display:grid;gap:.55rem}
.admin-sidebar nav a{color:#cbd5e1;text-decoration:none;padding:.85rem 1rem;border-radius:16px;font-weight:800}
.admin-sidebar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.admin-main{padding:1.5rem 2rem}
.admin-topbar{background:#fff;border:1px solid #e2e8f0;border-radius:24px;box-shadow:0 18px 45px rgba(15,23,42,.08);padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.admin-topbar strong{display:block;font-size:1.4rem;font-weight:950}
.admin-topbar span{color:#64748b;font-weight:700}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.admin-stat,.admin-card{background:#fff;border:1px solid #e2e8f0;border-radius:26px;box-shadow:0 20px 60px rgba(15,23,42,.08);padding:1.5rem}
.admin-stat b{display:block;font-size:2.3rem;font-weight:950;color:#2563eb}
.admin-stat span{font-weight:900;color:#64748b}
.admin-card h2,.admin-card h3{font-weight:950;letter-spacing:-.7px}

.blog-featured-image{margin:30px 0}
.blog-featured-image img{width:100%;height:420px;object-fit:cover;object-position:center;border-radius:14px;display:block}

.lesson-text,
.practice-text,
.typing-text,
.target-text{
    display:block;
    width:100%;
    max-width:100%;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
    line-height:1.8;
}

.lesson-text p,
.practice-text p,
.typing-text p,
.target-text p{
    margin-bottom:16px;
}

.lesson-text img,
.practice-text img,
.typing-text img,
.target-text img{
    max-width:100%;
    height:auto;
    border-radius:12px;
}

.lesson-text table,
.practice-text table,
.typing-text table,
.target-text table{
    width:100%;
    display:block;
    overflow-x:auto;
}

.practice-card,
.typing-card,
.lesson-practice-box{
    max-width:100%;
    overflow-x:auto;
}

@keyframes blink{50%{opacity:0}}
@keyframes float{0%,100%{transform:perspective(900px) rotateY(-6deg) translateY(0)}50%{transform:perspective(900px) rotateY(-6deg) translateY(-14px)}}

@media(max-width:900px){
    .admin-shell{grid-template-columns:1fr}
    .admin-sidebar{position:relative;height:auto}
    .admin-main{padding:1rem}
    .admin-topbar{border-radius:18px}
}

@media(max-width:768px){
    .tm-hero{min-height:auto;padding:4rem 0}
    .typing-demo{transform:none}
    .demo-stats{position:static;margin-top:2rem;grid-template-columns:1fr}
    .tm-hero h1,.page-head h1{font-size:2.5rem}
    .page-head{padding:3rem 0}
    .blog-featured-image img{height:240px}
    .typing-panel{padding:1.2rem;border-radius:22px}
    .typing-text,
    .lesson-text,
    .practice-text,
    .target-text{
        font-size:1rem;
        line-height:1.7;
    }
}
.home-hero {
    padding: 90px 0;
    background: linear-gradient(135deg, #eef4ff, #ffffff, #f4ecff);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 18px;
}

.home-hero h1 {
    font-size: 58px;
    line-height: 1.05;
    font-weight: 900;
    color: #0f172a;
}

.home-hero p {
    font-size: 18px;
    color: #64748b;
    max-width: 620px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
}

.hero-card {
    background: #0f172a;
    color: white;
    padding: 30px;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(15,23,42,.25);
}

/* Scoped to home hero card to avoid overriding the global .typing-demo/.stats-grid styles */
.hero-card .typing-demo {
    background: rgba(255,255,255,.08);
    padding: 20px;
    border-radius: 18px;
    margin: 20px 0;
    line-height: 1.7;
}

.hero-card .stats-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.hero-card .stats-grid div {
    background: white;
    color: #0f172a;
    padding: 18px;
    border-radius: 16px;
    text-align: center;
}

.hero-card .stats-grid strong {
    display: block;
    font-size: 24px;
    color: #2563eb;
}

.hero-card .stats-grid span {
    font-size: 12px;
    font-weight: 700;
}

.home-features,
.home-lessons,
.home-blog {
    padding: 30px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 36px;
}

.section-title h2 {
    font-size: 38px;
    font-weight: 900;
    color: #0f172a;
}

.section-title p {
    color: #64748b;
}

.feature-grid,
.lesson-grid,
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.feature-card,
.lesson-card,
.blog-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 12px 35px rgba(15,23,42,.06);
}

.feature-card span {
    font-size: 34px;
}

.feature-card h3,
.lesson-card h3,
.blog-card h3 {
    margin-top: 12px;
    font-weight: 800;
    color: #0f172a;
}

.lesson-card span {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.lesson-card a,
.blog-card a {
    font-weight: 800;
    text-decoration: none;
}

.blog-card {
    padding: 0;
    overflow: hidden;
}

.blog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-card-body {
    padding: 22px;
}

@media(max-width: 900px) {
    .hero-grid,
    .feature-grid,
    .lesson-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .home-hero h1 {
        font-size: 38px;
    }

    .hero-actions {
        flex-direction: column;
    }
}
.section-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 900;
}

.modern-lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.modern-lesson-card {
    position: relative;
    min-height: 270px;
    padding: 28px;
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none;
    background: linear-gradient(145deg, #ffffff, #eef4ff);
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    transition: .35s ease;
}

.modern-lesson-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -55px;
    top: -55px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 50%;
    opacity: .12;
    transition: .35s ease;
}

.modern-lesson-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 70px rgba(37, 99, 235, .18);
}

.modern-lesson-card:hover::before {
    transform: scale(1.35);
    opacity: .2;
}

.lesson-top,
.lesson-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lesson-level {
    background: #0f172a;
    color: #fff;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.lesson-arrow {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
    transition: .35s ease;
}

.modern-lesson-card:hover .lesson-arrow {
    transform: rotate(-35deg);
    background: #7c3aed;
}

.modern-lesson-card h3 {
    margin: 28px 0 14px;
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
}

.modern-lesson-card p {
    color: #64748b;
    line-height: 1.7;
}

.lesson-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
    color: #2563eb;
    font-weight: 900;
}

.lesson-bottom strong {
    font-size: 24px;
}

@media(max-width: 992px) {
    .modern-lesson-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px) {
    .modern-lesson-grid {
        grid-template-columns: 1fr;
    }
}
.hero-modern {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(124,58,237,.2), transparent 32%),
        linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #f8f5ff 100%);
}

.hero-bg-shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(4px);
    opacity: .6;
}

.hero-shape-1 {
    width: 280px;
    height: 280px;
    right: 8%;
    top: 8%;
    background: rgba(37,99,235,.18);
}

.hero-shape-2 {
    width: 220px;
    height: 220px;
    left: 6%;
    bottom: 8%;
    background: rgba(124,58,237,.16);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-modern h1 {
    font-size: 66px;
    line-height: 1.02;
    font-weight: 950;
    color: #0f172a;
    letter-spacing: -2px;
}

.hero-modern h1 span {
    display: block;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-modern p {
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.8;
    color: #475569;
    max-width: 650px;
}

.hero-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff !important;
    padding: 15px 24px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 16px 35px rgba(37,99,235,.28);
}

.hero-secondary {
    background: #fff;
    color: #0f172a !important;
    padding: 15px 24px;
    border-radius: 14px;
    font-weight: 900;
    border: 1px solid #e5e7eb;
}

.hero-trust {
    display: flex;
    gap: 16px;
    margin-top: 35px;
}

.hero-trust div {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226,232,240,.8);
    padding: 16px 22px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.hero-trust strong {
    display: block;
    font-size: 24px;
    color: #2563eb;
}

.hero-trust span {
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
}

.hero-visual {
    position: relative;
    z-index: 2;
}

.typing-window {
    background: #0f172a;
    color: #fff;
    border-radius: 30px;
    padding: 28px;
    box-shadow: 0 35px 80px rgba(15,23,42,.35);
    transform: rotate(2deg);
}

.window-top {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.window-top span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #64748b;
}

.typing-line {
    background: rgba(255,255,255,.08);
    padding: 15px 18px;
    border-radius: 14px;
    margin-bottom: 12px;
    color: #cbd5e1;
}

.typing-line.active {
    background: #fff;
    color: #0f172a;
    font-weight: 800;
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 22px;
}

.mini-stats div {
    background: #fff;
    color: #0f172a;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
}

.mini-stats strong {
    display: block;
    font-size: 28px;
    color: #2563eb;
}

.mini-stats span {
    font-size: 12px;
    font-weight: 900;
}

@media(max-width: 900px) {
    .hero-modern h1 {
        font-size: 42px;
    }

    .hero-trust {
        flex-direction: column;
    }

    .typing-window {
        transform: none;
    }
}
.computer-typing {
    position: relative;
    max-width: 520px;
    margin-left: auto;
}

.monitor {
    background: #0f172a;
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 35px 80px rgba(15,23,42,.35);
    transform: rotate(2deg);
}

.monitor-top {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.monitor-top span {
    width: 12px;
    height: 12px;
    background: #64748b;
    border-radius: 50%;
}

.screen-text {
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border-radius: 16px;
    min-height: 230px;
    padding: 28px;
}

.typed-line {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-weight: 900;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.typed-line.muted {
    color: #64748b;
}

.cursor-line {
    color: #2563eb;
    font-size: 36px;
    font-weight: 900;
    animation: blinkCursor .8s infinite;
}

@keyframes blinkCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.monitor-stand {
    width: 90px;
    height: 45px;
    background: #1e293b;
    margin: 0 auto;
    border-radius: 0 0 16px 16px;
}

.keyboard {
    background: #111827;
    padding: 18px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 9px;
    box-shadow: 0 25px 50px rgba(15,23,42,.22);
}

.keyboard span {
    height: 24px;
    background: linear-gradient(180deg, #ffffff, #cbd5e1);
    border-radius: 7px;
    box-shadow: inset 0 -3px 0 rgba(15,23,42,.18);
    animation: keyTap 1.6s infinite;
}

.keyboard span:nth-child(3n) {
    animation-delay: .2s;
}

.keyboard span:nth-child(4n) {
    animation-delay: .4s;
}

@keyframes keyTap {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(4px); }
}

@media(max-width:900px) {
    .computer-typing {
        margin: 30px 0 0;
    }

    .monitor {
        transform: none;
    }
}
.lesson-premium-head {
    position: relative;
    padding: 90px 0 120px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(124,58,237,.16), transparent 30%),
        linear-gradient(135deg, #f8fbff, #eef4ff, #faf5ff);
    overflow: hidden;
}

.lesson-premium-head::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: 12%;
    top: 20%;
    background: rgba(37,99,235,.12);
    border-radius: 50%;
    filter: blur(4px);
}

.lesson-badge {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 900;
    margin-bottom: 18px;
}

.lesson-premium-head h1 {
    font-size: 64px;
    font-weight: 950;
    letter-spacing: -2px;
    color: #0f172a;
    margin: 0;
}

.lesson-premium-head p {
    font-size: 18px;
    color: #64748b;
    margin-top: 14px;
}

.lesson-premium-wrap {
    padding: 0 0 90px;
    background: linear-gradient(180deg, #eef4ff, #ffffff);
}

.lesson-premium-card {
    margin-top: -70px;
    position: relative;
    background: #0f172a;
    color: #fff;
    border-radius: 34px;
    padding: 32px;
    box-shadow: 0 35px 80px rgba(15,23,42,.28);
    overflow: hidden;
}

.lesson-premium-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -80px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 50%;
    opacity: .18;
}

.lesson-practice-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.lesson-practice-title span {
    font-size: 14px;
    font-weight: 900;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lesson-practice-title strong {
    background: rgba(255,255,255,.08);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
}

.premium-target-text {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    padding: 22px;
    border-radius: 20px;
    font-size: 24px;
    line-height: 1.8;
    color: #fff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.premium-typing-box {
    margin-top: 20px;
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 20px;
    font-size: 17px;
    outline: none;
    resize: vertical;
    box-shadow: inset 0 0 0 2px rgba(37,99,235,.12);
}

.premium-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-top: 22px;
}

.premium-stats div {
    background: #fff;
    color: #0f172a;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

.premium-stats strong {
    display: block;
    font-size: 36px;
    color: #2563eb;
    font-weight: 950;
}

.premium-stats span {
    font-size: 13px;
    font-weight: 900;
    color: #64748b;
}

.premium-restart {
    margin-top: 22px;
    border: 0;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    padding: 13px 22px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 16px 35px rgba(37,99,235,.25);
}

@media(max-width:768px) {
    .lesson-premium-head h1 {
        font-size: 42px;
    }

    .premium-stats {
        grid-template-columns: 1fr;
    }

    .premium-target-text {
        font-size: 18px;
    }
}
.premium-target-text .char {
    padding: 2px 1px;
    border-radius: 4px;
}

.premium-target-text .char.correct {
    color: #22c55e;
    background: rgba(34,197,94,.12);
}

.premium-target-text .char.wrong {
    color: #fff;
    background: #ef4444;
}

.premium-target-text .char.current {
    border-bottom: 3px solid #38bdf8;
}

.mistake-history {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    padding: 18px;
    border-radius: 18px;
    color: #fff;
}

.mistake-history h5 {
    font-weight: 900;
    margin-bottom: 10px;
}

.mistake-history ul {
    margin: 0;
    padding-left: 20px;
}

.mistake-history li {
    margin-bottom: 6px;
    color: #fecaca;
}
.typing-start-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 22px 0;
}

.premium-start-btn {
    border: 0;
    background: linear-gradient(135deg, #22c55e, #2563eb);
    color: #fff;
    padding: 15px 28px;
    border-radius: 16px;
    font-weight: 950;
    font-size: 16px;
    box-shadow: 0 18px 40px rgba(34,197,94,.28);
}

.premium-start-btn:disabled {
    opacity: .75;
    cursor: not-allowed;
}

.premium-timer {
    min-width: 170px;
    background: radial-gradient(circle at top, #2563eb, #0f172a);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    padding: 18px 22px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(37,99,235,.32);
    animation: timerPulse 1.2s infinite;
}

.premium-timer span {
    display: block;
    font-size: 44px;
    line-height: 1;
    font-weight: 950;
}

.premium-timer small {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #bfdbfe;
    font-weight: 900;
}

@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 20px 50px rgba(37,99,235,.32);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 25px 70px rgba(124,58,237,.45);
    }
}

@media(max-width:768px) {
    .typing-start-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-timer {
        width: 100%;
    }
}
.lessons-hero {
    position: relative;
    padding: 95px 0 115px;
    background:
        radial-gradient(circle at 12% 20%, rgba(37,99,235,.18), transparent 30%),
        radial-gradient(circle at 88% 30%, rgba(124,58,237,.16), transparent 28%),
        linear-gradient(135deg, #f8fbff, #eef4ff, #faf5ff);
    overflow: hidden;
}

.lessons-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: 12%;
    bottom: -90px;
    background: rgba(37,99,235,.12);
    border-radius: 999px;
    filter: blur(3px);
}

.lessons-hero h1 {
    font-size: 72px;
    font-weight: 950;
    letter-spacing: -3px;
    color: #0f172a;
    margin: 12px 0 10px;
}

.lessons-hero p {
    max-width: 680px;
    font-size: 19px;
    color: #64748b;
    line-height: 1.8;
}

.lessons-premium-section {
    padding: 0 0 90px;
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
}

.lessons-premium-grid {
    margin-top: -60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 2;
}

.premium-lesson-box {
    position: relative;
    min-height: 285px;
    padding: 30px;
    border-radius: 30px;
    text-decoration: none;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 22px 60px rgba(15,23,42,.08);
    overflow: hidden;
    transition: .35s ease;
}

.premium-lesson-box::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -70px;
    top: -70px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 50%;
    opacity: .12;
    transition: .35s ease;
}

.premium-lesson-box:hover {
    transform: translateY(-12px);
    box-shadow: 0 35px 90px rgba(37,99,235,.18);
    border-color: rgba(37,99,235,.35);
}

.premium-lesson-box:hover::before {
    transform: scale(1.4);
    opacity: .22;
}

.premium-lesson-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    font-size: 26px;
    margin-bottom: 20px;
}

.premium-lesson-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.premium-lesson-top span {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
}

.premium-lesson-top strong {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    transition: .35s ease;
}

.premium-lesson-box:hover .premium-lesson-top strong {
    transform: rotate(-35deg);
    background: #2563eb;
}

.premium-lesson-box h3 {
    margin: 22px 0 12px;
    font-size: 27px;
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -1px;
}

.premium-lesson-box p {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 24px;
}

.premium-lesson-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}

.premium-lesson-footer small {
    color: #64748b;
    font-weight: 800;
}

.premium-lesson-footer b {
    color: #2563eb;
}

@media(max-width: 992px) {
    .lessons-premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lessons-hero h1 {
        font-size: 52px;
    }
}

@media(max-width: 640px) {
    .lessons-premium-grid {
        grid-template-columns: 1fr;
    }

    .lessons-hero h1 {
        font-size: 42px;
    }
}
.lessons-pro-hero {
    position: relative;
    padding: 110px 0 145px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(37,99,235,.22), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(124,58,237,.22), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(14,165,233,.14), transparent 35%),
        linear-gradient(135deg, #f8fbff 0%, #eef4ff 45%, #faf5ff 100%);
}

.lessons-pro-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    top: -120px;
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.18));
    border-radius: 50%;
    filter: blur(4px);
}

.lessons-pro-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: 5%;
    bottom: -100px;
    background: rgba(37,99,235,.12);
    border-radius: 50%;
}

.lessons-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.lessons-pro-hero h1 {
    font-size: 72px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -3px;
    color: #0f172a;
    margin: 16px 0;
}

.lessons-pro-hero p {
    font-size: 20px;
    line-height: 1.8;
    color: #64748b;
    max-width: 720px;
}

.lesson-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    padding: 14px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.lesson-filter-bar input {
    flex: 1;
    min-width: 250px;
    border: 0;
    background: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    outline: none;
    font-weight: 700;
}

.filter-btn {
    border: 0;
    padding: 13px 18px;
    border-radius: 14px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 900;
    transition: .25s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    box-shadow: 0 12px 28px rgba(37,99,235,.25);
}

.lessons-pro-section {
    padding: 0 0 95px;
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
}

.lessons-pro-grid {
    position: relative;
    z-index: 3;
    margin-top: -75px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.lesson-pro-card {
    position: relative;
    display: block;
    min-height: 320px;
    padding: 30px;
    border-radius: 34px;
    overflow: hidden;
    text-decoration: none;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 24px 70px rgba(15,23,42,.09);
    transition: .35s ease;
}

.lesson-pro-card:hover {
    transform: translateY(-14px) scale(1.01);
    border-color: rgba(37,99,235,.45);
    box-shadow: 0 38px 100px rgba(37,99,235,.2);
}

.lesson-card-glow {
    position: absolute;
    width: 210px;
    height: 210px;
    right: -85px;
    top: -85px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 50%;
    opacity: .12;
    transition: .35s ease;
}

.lesson-pro-card:hover .lesson-card-glow {
    transform: scale(1.45);
    opacity: .25;
}

.lesson-card-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lesson-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: 28px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
}

.lesson-card-head span {
    padding: 8px 14px;
    background: #0f172a;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
}

.lesson-pro-card h3 {
    position: relative;
    z-index: 2;
    margin: 26px 0 14px;
    font-size: 29px;
    line-height: 1.2;
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -1px;
}

.lesson-pro-card p {
    position: relative;
    z-index: 2;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 24px;
}

.lesson-progress {
    position: relative;
    z-index: 2;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 22px;
}

.lesson-progress div {
    height: 100%;
    width: 55%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 999px;
}

.lesson-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lesson-card-footer strong {
    color: #2563eb;
    font-weight: 950;
}

.lesson-card-footer em {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #2563eb;
    color: #fff;
    border-radius: 50%;
    font-style: normal;
    font-weight: 950;
    transition: .35s ease;
}

.lesson-pro-card:hover .lesson-card-footer em {
    transform: rotate(-35deg);
    background: #7c3aed;
}

@media(max-width: 992px) {
    .lessons-pro-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lessons-pro-hero h1 {
        font-size: 52px;
    }
}

@media(max-width: 640px) {
    .lessons-pro-grid {
        grid-template-columns: 1fr;
    }

    .lessons-pro-hero h1 {
        font-size: 40px;
    }

    .lesson-filter-bar {
        display: block;
    }

    .lesson-filter-bar input,
    .filter-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}
.lesson-icon {
    width: 72px !important;
    height: 72px !important;
    font-size: 36px !important;
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #fff;
    box-shadow: 0 18px 35px rgba(37,99,235,.35);
}

.lesson-card-head span {
    background: linear-gradient(135deg, #0f172a, #2563eb) !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.22);
}

.lesson-card-footer strong {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff !important;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(37,99,235,.25);
}

.lesson-card-footer em {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px;
    box-shadow: 0 16px 35px rgba(37,99,235,.35);
}

.lesson-pro-card {
    border: 2px solid rgba(37,99,235,.12) !important;
}

.lesson-pro-card:hover {
    background: linear-gradient(145deg, #ffffff, #eef4ff) !important;
}
.typing-text span.correct{
    color:#22c55e;
    background:#dcfce7;
    border-radius:4px;
}

.typing-text span.wrong{
    color:#fff;
    background:#ef4444;
    border-radius:4px;
}

.typing-text span.current{
    border-bottom:3px solid #2563eb;
}
.blog-premium-hero {
    padding: 95px 0 120px;
    background:
        radial-gradient(circle at 15% 20%, rgba(37,99,235,.18), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(124,58,237,.16), transparent 30%),
        linear-gradient(135deg, #f8fbff, #eef4ff, #faf5ff);
}

.blog-premium-hero h1 {
    font-size: 72px;
    font-weight: 950;
    letter-spacing: -3px;
    color: #0f172a;
}

.blog-premium-hero p {
    color: #64748b;
    font-size: 19px;
}

.blog-premium-section {
    padding: 0 0 90px;
    background: linear-gradient(180deg, #eef4ff, #ffffff);
}

.blog-premium-grid {
    margin-top: -70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-premium-card {
    display: block;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 70px rgba(15,23,42,.08);
    transition: .35s ease;
}

.blog-premium-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 35px 90px rgba(37,99,235,.18);
}

.blog-image-wrap {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    overflow: hidden;
}

.blog-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .35s ease;
}

.blog-premium-card:hover .blog-image-wrap img {
    transform: scale(1.08);
}

.blog-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 55px;
}

.blog-premium-body {
    padding: 24px;
}

.blog-premium-body span {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.blog-premium-body h3 {
    margin: 16px 0 12px;
    font-size: 25px;
    font-weight: 950;
    color: #0f172a;
}

.blog-premium-body p {
    color: #64748b;
    line-height: 1.7;
}

.blog-premium-body strong {
    color: #2563eb;
    font-weight: 950;
}

.blog-pagination {
    display: flex;
    justify-content: center;
}

@media(max-width: 992px) {
    .blog-premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px) {
    .blog-premium-grid {
        grid-template-columns: 1fr;
    }

    .blog-premium-hero h1 {
        font-size: 42px;
    }
}
.home-cta{
    padding:50px 0;
}

.home-cta-card{
    position:relative;
    overflow:hidden;
    padding:70px;
    border-radius:34px;
    background:
    linear-gradient(135deg,#2563eb,#4f46e5,#7c3aed);
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    box-shadow:0 35px 90px rgba(37,99,235,.25);
}

.home-cta-card::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.home-cta-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    left:-60px;
    bottom:-60px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.cta-content{
    position:relative;
    z-index:2;
    max-width:720px;
}

.cta-content h2{
    font-size:52px;
    font-weight:950;
    margin:16px 0;
    line-height:1.1;
}

.cta-content p{
    font-size:18px;
    line-height:1.8;
    opacity:.95;
}

.cta-action{
    position:relative;
    z-index:2;
}

.cta-btn{
    display:inline-block;
    padding:18px 34px;
    border-radius:18px;
    background:#fff;
    color:#2563eb;
    text-decoration:none;
    font-weight:900;
    font-size:18px;
    transition:.3s;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.cta-btn:hover{
    transform:translateY(-6px);
    color:#2563eb;
}

@media(max-width:992px){

.home-cta-card{
    flex-direction:column;
    text-align:center;
    padding:45px 30px;
}

.cta-content h2{
    font-size:38px;
}

}
/*==================================================
STATIC PAGES
==================================================*/

.static-page-hero{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 30%),
        radial-gradient(circle at bottom right,rgba(124,58,237,.18),transparent 30%),
        linear-gradient(135deg,#f8fbff,#eef4ff,#faf5ff);
}

.static-page-hero h1{
    font-size:64px;
    font-weight:950;
    letter-spacing:-2px;
    color:#0f172a;
}

.static-page-hero p{
    color:#64748b;
    font-size:19px;
    max-width:720px;
    margin-top:16px;
}

.static-page-wrap{
    background:linear-gradient(180deg,#eef4ff,#fff);
    padding-bottom:90px;
}

.static-page-card{
    margin-top:-60px;
    background:#fff;
    border-radius:30px;
    padding:45px;
    box-shadow:0 25px 70px rgba(15,23,42,.08);
    border:1px solid #e5e7eb;
}

.static-page-content{
    font-size:17px;
    line-height:1.9;
    color:#475569;
}

.static-page-content h2,
.static-page-content h3{
    margin-top:35px;
    margin-bottom:15px;
    font-weight:900;
    color:#0f172a;
}

.static-page-content img{
    max-width:100%;
    border-radius:18px;
    margin:25px 0;
}

.static-page-content table{
    width:100%;
    border-collapse:collapse;
    margin:25px 0;
}

.static-page-content table td,
.static-page-content table th{
    border:1px solid #e5e7eb;
    padding:12px;
}

.static-page-content blockquote{
    border-left:5px solid #2563eb;
    background:#f8fafc;
    padding:20px;
    border-radius:12px;
    margin:30px 0;
}

.static-page-content a{
    color:#2563eb;
    font-weight:700;
}

@media(max-width:768px){

.static-page-hero{
padding:60px 0;
}

.static-page-hero h1{
font-size:40px;
}

.static-page-card{
padding:25px;
margin-top:-35px;
}

}
/*==================================================
PREMIUM STATIC PAGE LAYOUT
==================================================*/

.static-pro-hero{
    position:relative;
    overflow:hidden;
    padding:90px 0 125px;
    background:
        radial-gradient(circle at 14% 20%, rgba(37,99,235,.18), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(124,58,237,.16), transparent 30%),
        linear-gradient(135deg,#f8fbff,#eef4ff,#faf5ff);
}

.static-pro-hero::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:10%;
    bottom:-110px;
    border-radius:999px;
    background:rgba(37,99,235,.12);
}

.static-pro-breadcrumb{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    font-weight:800;
    color:#64748b;
}

.static-pro-breadcrumb a{
    color:#2563eb;
    text-decoration:none;
}

.static-pro-breadcrumb strong{
    color:#0f172a;
}

.static-pro-hero h1{
    position:relative;
    z-index:2;
    font-size:64px;
    line-height:1.05;
    font-weight:950;
    letter-spacing:-2px;
    color:#0f172a;
    margin:0;
}

.static-pro-hero p{
    position:relative;
    z-index:2;
    max-width:760px;
    margin-top:18px;
    color:#64748b;
    font-size:19px;
    line-height:1.8;
}

.static-pro-section{
    padding:0 0 90px;
    background:linear-gradient(180deg,#eef4ff,#fff);
}

.static-pro-grid{
    position:relative;
    z-index:3;
    margin-top:-70px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:28px;
    align-items:start;
}

.static-pro-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:32px;
    padding:48px;
    box-shadow:0 25px 75px rgba(15,23,42,.09);
}

.static-pro-content{
    font-size:17px;
    line-height:1.9;
    color:#475569;
}

.static-pro-content > *:first-child{
    margin-top:0;
}

.static-pro-content h2,
.static-pro-content h3,
.static-pro-content h4{
    color:#0f172a;
    font-weight:950;
    letter-spacing:-.5px;
    margin-top:36px;
    margin-bottom:16px;
}

.static-pro-content p{
    margin-bottom:18px;
}

.static-pro-content ul,
.static-pro-content ol{
    padding-left:24px;
    margin-bottom:20px;
}

.static-pro-content li{
    margin-bottom:8px;
}

.static-pro-content img{
    max-width:100%;
    height:auto;
    border-radius:18px;
    margin:25px 0;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
}

.static-pro-content table{
    width:100%;
    border-collapse:collapse;
    margin:28px 0;
    overflow:hidden;
    border-radius:14px;
}

.static-pro-content table th,
.static-pro-content table td{
    border:1px solid #e5e7eb;
    padding:13px;
}

.static-pro-content table th{
    background:#f8fafc;
    color:#0f172a;
}

.static-pro-content blockquote{
    border-left:5px solid #2563eb;
    background:#f8fafc;
    padding:22px;
    border-radius:16px;
    margin:30px 0;
    color:#334155;
    font-weight:700;
}

.static-pro-content a{
    color:#2563eb;
    font-weight:800;
    text-decoration:none;
}

.static-pro-content a:hover{
    text-decoration:underline;
}

.static-pro-sidebar{
    display:grid;
    gap:20px;
    position:sticky;
    top:100px;
}

.static-side-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:26px;
    padding:26px;
    box-shadow:0 18px 55px rgba(15,23,42,.07);
}

.static-side-card h4{
    font-size:20px;
    font-weight:950;
    color:#0f172a;
    margin-bottom:10px;
}

.static-side-card p{
    color:#64748b;
    line-height:1.7;
}

.static-side-card a{
    color:#2563eb;
    font-weight:900;
    text-decoration:none;
}

.static-side-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.static-side-card li{
    border-bottom:1px solid #e5e7eb;
    padding:10px 0;
}

.static-side-card li:last-child{
    border-bottom:0;
}

@media(max-width:992px){
    .static-pro-grid{
        grid-template-columns:1fr;
    }

    .static-pro-sidebar{
        position:relative;
        top:auto;
    }

    .static-pro-hero h1{
        font-size:48px;
    }
}

@media(max-width:640px){
    .static-pro-hero{
        padding:60px 0 95px;
    }

    .static-pro-hero h1{
        font-size:36px;
    }

    .static-pro-card{
        padding:28px;
        border-radius:24px;
    }

    .static-pro-grid{
        margin-top:-45px;
    }
}
/*==================================================
ADVANCED BLOG SEO SHOW PAGE
==================================================*/

.blog-seo-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
    color:#64748b;
    font-weight:800;
}

.blog-seo-meta span{
    background:#fff;
    border:1px solid #e5e7eb;
    padding:8px 13px;
    border-radius:999px;
}

.blog-content h2,
.blog-content h3{
    margin-top:34px;
    margin-bottom:16px;
    font-weight:950;
    color:#0f172a;
}

.blog-content p{
    margin-bottom:18px;
}

.blog-content img{
    max-width:100%;
    height:auto;
    border-radius:18px;
}

.blog-sidebar-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    box-shadow:0 18px 55px rgba(15,23,42,.07);
    margin-bottom:24px;
}

.blog-sidebar-card h3{
    font-size:20px;
    font-weight:950;
    margin-bottom:18px;
}

.blog-mini-post{
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid #e5e7eb;
}

.blog-mini-post:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:0;
}

.blog-mini-post a{
    display:block;
    color:#0f172a;
    text-decoration:none;
    font-weight:900;
    line-height:1.4;
}

.blog-mini-post a:hover{
    color:#2563eb;
}

.blog-mini-post small{
    color:#64748b;
    font-weight:700;
}

.blog-share-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.blog-share-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:12px;
    background:#eef2ff;
    color:#2563eb;
    text-decoration:none;
    font-weight:900;
}

.blog-share-links a:hover{
    background:#2563eb;
    color:#fff;
}

.blog-prev-next{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:30px;
}

.blog-prev-next a{
    display:block;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:18px;
    text-decoration:none;
    color:#0f172a;
    font-weight:900;
}

.blog-prev-next a:hover{
    background:#eef2ff;
    color:#2563eb;
}

@media(max-width:768px){
    .blog-prev-next{
        grid-template-columns:1fr;
    }
}
/*==================================================
BLOG SINGLE HERO FIX
==================================================*/

.blog-single-hero{
    padding:40px 0 30px !important;
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 30%),
        radial-gradient(circle at top right,rgba(124,58,237,.14),transparent 30%),
        #f8fafc;
}

.blog-single-hero h1{
    margin:12px 0;
    font-size:64px;
    font-weight:950;
    letter-spacing:-2px;
    line-height:1.05;
}

.blog-single-hero p{
    margin:0;
}

.blog-single-meta{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:15px;
    color:#64748b;
    font-weight:700;
}

@media(max-width:768px){

.blog-single-hero{
    padding:30px 0 20px !important;
}

.blog-single-hero h1{
    font-size:40px;
}

}


/*==================================================
FRESH FIX: BLOG SINGLE PAGE SPACING + PREMIUM SIDEBAR
Add this at the very end so it overrides older page-head/blog styles.
==================================================*/

.blog-single-hero{
    padding:42px 0 34px !important;
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 30%),
        radial-gradient(circle at top right,rgba(124,58,237,.12),transparent 30%),
        linear-gradient(135deg,#f8fbff,#eef4ff,#f8fafc) !important;
}

.blog-single-hero .container{
    max-width:1140px;
}

.blog-single-hero h1{
    margin:14px 0 0 !important;
    font-size:clamp(2.5rem,5vw,4.4rem) !important;
    font-weight:950 !important;
    line-height:1.05 !important;
    letter-spacing:-2px !important;
    color:#0f172a !important;
}

.blog-single-hero a{
    color:#2563eb;
    font-weight:800;
    text-decoration:none;
}

.blog-single-hero a:hover{
    text-decoration:underline;
}

.blog-single-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
}

.blog-single-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:1px solid #e5e7eb;
    color:#64748b;
    padding:8px 13px;
    border-radius:999px;
    font-size:.95rem;
    font-weight:800;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
}

/* Fallback if old blog show still uses .page-head */
.page-head{
    padding:42px 0 34px;
}

/* Reduce space between blog hero and content */
.blog-single-hero + section.py-5,
.page-head + section.py-5{
    padding-top:38px !important;
}

.blog-featured-image{
    margin:0 0 28px;
}

.blog-featured-image img{
    border-radius:18px;
    box-shadow:0 18px 55px rgba(15,23,42,.08);
}

.blog-content{
    color:#334155;
    font-size:1.08rem;
    line-height:1.9;
}

.blog-content p{
    margin-bottom:18px;
}

.blog-content h2,
.blog-content h3,
.blog-content h4{
    color:#0f172a;
    font-weight:950;
    letter-spacing:-.5px;
    margin-top:34px;
    margin-bottom:14px;
}

.blog-content ul,
.blog-content ol{
    padding-left:24px;
    margin-bottom:20px;
}

.blog-content img{
    max-width:100%;
    height:auto;
    border-radius:18px;
    margin:22px 0;
}

.blog-content blockquote{
    border-left:5px solid #2563eb;
    background:#f8fafc;
    padding:20px;
    border-radius:14px;
    color:#334155;
    font-weight:700;
}

.blog-sidebar-card,
.blog-single-sidebar .tm-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
    box-shadow:0 18px 55px rgba(15,23,42,.07);
    margin-bottom:24px;
}

.blog-sidebar-card h3,
.blog-single-sidebar .tm-card h3{
    font-size:1.25rem;
    font-weight:950;
    margin-bottom:18px;
}

.blog-mini-post{
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid #e5e7eb;
}

.blog-mini-post:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:0;
}

.blog-mini-post a{
    display:block;
    color:#0f172a;
    text-decoration:none;
    font-weight:900;
    line-height:1.4;
}

.blog-mini-post a:hover{
    color:#2563eb;
}

.blog-mini-post small{
    color:#64748b;
    font-weight:700;
}

.blog-share-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.blog-share-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:12px;
    background:#eef2ff;
    color:#2563eb;
    text-decoration:none;
    font-weight:900;
}

.blog-share-links a:hover{
    background:#2563eb;
    color:#fff;
}

.blog-prev-next{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:30px;
}

.blog-prev-next a{
    display:block;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:18px;
    text-decoration:none;
    color:#0f172a;
    font-weight:900;
}

.blog-prev-next a:hover{
    background:#eef2ff;
    color:#2563eb;
}

@media(max-width:768px){
    .blog-single-hero,
    .page-head{
        padding:30px 0 24px !important;
    }

    .blog-single-hero + section.py-5,
    .page-head + section.py-5{
        padding-top:28px !important;
    }

    .blog-prev-next{
        grid-template-columns:1fr;
    }
}
/* Verify Certificate Page Center */
.page-head.verify-head,
.verify-head{
    text-align:center;
}

.verify-head h1,
.verify-head p{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
/*==================================================
PREMIUM HOMEPAGE FEATURE CARDS
==================================================*/

.home-features{
    position:relative;
    padding:60px 0 70px;
    background:
        radial-gradient(circle at 12% 25%, rgba(37,99,235,.12), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(124,58,237,.10), transparent 28%),
        linear-gradient(180deg,#eef4ff 0%,#ffffff 100%);
    overflow:hidden;
}

.home-features .section-title{
    margin-bottom:38px;
}

.home-features .section-title h2{
    font-size:42px;
    font-weight:950;
    letter-spacing:-1.5px;
}

.home-features .section-title p{
    font-size:18px;
    color:#64748b;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
}

.feature-card{
    position:relative;
    min-height:300px;
    padding:34px 30px;
    border-radius:30px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
    border:1px solid rgba(226,232,240,.9);
    box-shadow:0 22px 65px rgba(15,23,42,.08);
    overflow:hidden;
    transition:.35s ease;
}

.feature-card::before{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    right:-95px;
    top:-95px;
    border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    opacity:.12;
    transition:.35s ease;
}

.feature-card::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#2563eb,#7c3aed,#06b6d4);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}

.feature-card:hover{
    transform:translateY(-14px);
    box-shadow:0 38px 95px rgba(37,99,235,.18);
    border-color:rgba(37,99,235,.35);
}

.feature-card:hover::before{
    transform:scale(1.35);
    opacity:.22;
}

.feature-card:hover::after{
    transform:scaleX(1);
}

.feature-card span{
    position:relative;
    z-index:2;
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    border-radius:22px;
    font-size:34px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    box-shadow:0 18px 40px rgba(37,99,235,.30);
    margin-bottom:24px;
}

.feature-card h3{
    position:relative;
    z-index:2;
    font-size:28px;
    line-height:1.22;
    font-weight:950;
    letter-spacing:-.8px;
    color:#0f172a;
    margin-bottom:15px;
}

.feature-card p{
    position:relative;
    z-index:2;
    color:#475569;
    font-size:16px;
    line-height:1.75;
    margin:0;
}

.feature-card:hover h3{
    color:#2563eb;
}

.feature-card:hover span{
    transform:rotate(-6deg) scale(1.05);
}

.home-features .section-kicker{
    background:#dbeafe;
    color:#1d4ed8;
    box-shadow:0 10px 25px rgba(37,99,235,.12);
}

@media(max-width:1100px){
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:640px){
    .home-features{
        padding:45px 0 55px;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .feature-card{
        min-height:auto;
        padding:28px;
    }

    .home-features .section-title h2{
        font-size:32px;
    }
}

/* Lessons page compact professional fix */
.lessons-pro-hero{
    padding: 55px 0 95px !important;
}

.lessons-pro-hero h1{
    font-size: 54px !important;
    letter-spacing: -2px !important;
}

.lessons-pro-hero p{
    font-size: 17px !important;
    margin-bottom: 0 !important;
}

.lesson-filter-bar{
    margin-top: 22px !important;
}

.lessons-pro-grid{
    margin-top: -55px !important;
    gap: 22px !important;
}

.lesson-pro-card{
    min-height: 270px !important;
    padding: 24px !important;
    border-radius: 26px !important;
}

.lesson-icon{
    width: 58px !important;
    height: 58px !important;
    font-size: 30px !important;
}

.lesson-pro-card h3{
    font-size: 24px !important;
    margin: 20px 0 10px !important;
}

.lesson-pro-card p{
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}

.lesson-card-footer strong{
    padding: 10px 15px !important;
}

.lesson-card-footer em{
    width: 44px !important;
    height: 44px !important;
}

/* Single lesson page compact fix */
.lesson-premium-head{
    padding: 55px 0 85px !important;
}

.lesson-premium-head h1{
    font-size: 50px !important;
}

.lesson-premium-wrap{
    padding-bottom: 60px !important;
}

.lesson-premium-card{
    margin-top: -55px !important;
    padding: 26px !important;
    border-radius: 28px !important;
}

.premium-target-text{
    font-size: 21px !important;
    padding: 20px !important;
    line-height: 1.65 !important;
}

.premium-typing-box{
    min-height: 105px !important;
}

.premium-stats div{
    padding: 18px !important;
}

@media(max-width:768px){
    .lessons-pro-hero{
        padding: 38px 0 75px !important;
    }

    .lessons-pro-hero h1,
    .lesson-premium-head h1{
        font-size: 34px !important;
    }

    .lesson-premium-card{
        padding: 18px !important;
    }
}
/* ===== Lesson Practice Compact Layout ===== */

.lesson-premium-head{
    padding:40px 0 55px !important;
}

.lesson-premium-head h1{
    font-size:48px !important;
    margin-bottom:10px !important;
}

.lesson-premium-head p{
    margin-bottom:0 !important;
}

.lesson-premium-card{
    margin-top:-35px !important;
    padding:24px !important;
}

.lesson-engine-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px !important;
}

.lesson-timer{
    width:110px !important;
    height:110px !important;
}

.lesson-timer strong{
    font-size:36px !important;
}

.lesson-target-text{
    min-height:78px !important;
    padding:18px !important;
    margin-bottom:16px !important;
}

.lesson-input{
    min-height:90px !important;
    padding:18px !important;
    margin-bottom:16px !important;
}

.lesson-actions{
    margin-bottom:18px !important;
}

.lesson-stats{
    gap:14px !important;
}

.lesson-stats .stat-card{
    padding:18px 14px !important;
    min-height:95px !important;
}

@media(max-width:768px){

    .lesson-premium-head{
        padding:30px 0 45px !important;
    }

    .lesson-premium-head h1{
        font-size:34px !important;
    }

    .lesson-engine-top{
        flex-direction:column;
        text-align:center;
    }

    .lesson-timer{
        margin:10px auto;
    }
}
/* ===== Lesson Practice Compact Premium Layout ===== */

.lesson-premium-head{
    padding: 36px 0 50px !important;
}

.lesson-premium-head h1{
    font-size: 46px !important;
    margin-bottom: 8px !important;
}

.lesson-premium-head p{
    margin-bottom: 0 !important;
}

.lesson-premium-card{
    margin-top: -32px !important;
    padding: 22px 24px 26px !important;
    border-radius: 28px !important;
}

.lesson-premium-card .premium-target-text{
    min-height: 74px !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    font-size: 21px !important;
    line-height: 1.55 !important;
}

.lesson-premium-card .premium-typing-box{
    min-height: 88px !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
}

.lesson-premium-card .premium-stats{
    gap: 14px !important;
}

.lesson-premium-card .premium-stats div{
    padding: 16px 14px !important;
    min-height: 82px !important;
}

.lesson-premium-card .premium-stats strong{
    font-size: 34px !important;
}

.lesson-premium-card .practice-timer,
.lesson-premium-card .timer-box,
.lesson-premium-card .lesson-timer{
    width: 105px !important;
    height: 105px !important;
    margin: 0 0 12px auto !important;
}

.lesson-premium-card .practice-timer strong,
.lesson-premium-card .timer-box strong,
.lesson-premium-card .lesson-timer strong{
    font-size: 34px !important;
}

@media(max-width:768px){
    .lesson-premium-head{
        padding: 28px 0 42px !important;
    }

    .lesson-premium-head h1{
        font-size: 34px !important;
    }

    .lesson-premium-card{
        padding: 18px !important;
    }

    .lesson-premium-card .practice-timer,
    .lesson-premium-card .timer-box,
    .lesson-premium-card .lesson-timer{
        margin: 10px auto 14px !important;
    }
}