:root{
    --green-950:#063f20;
    --green-900:#075226;
    --green-800:#0b6b2f;
    --green-700:#0f8237;
    --green-600:#16a03f;
    --green-500:#38c746;
    --lime:#a6ee47;
    --yellow:#f3ff4d;
    --cream:#f7fff2;
    --text:#102416;
    --muted:#526157;
    --border:#cce7c6;
    --shadow:0 18px 50px rgba(0,0,0,.16);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#f8fff4 0%,#ecfae8 100%)}
a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 36px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,var(--green-950),var(--green-700));border-bottom:1px solid rgba(255,255,255,.15)}
.nav-wrap{height:86px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;color:#fff;min-width:220px}.brand img{width:80px;height:auto}.brand span{font-size:26px;line-height:.85;font-weight:900}.brand em{display:block;font-style:normal;color:#FFF}.main-nav{display:flex;gap:24px;align-items:center;flex:1;justify-content:center}.main-nav a{color:#fff;font-weight:700;opacity:.92}.main-nav a.active,.main-nav a:hover{border-bottom:3px solid #fff;padding-bottom:8px}.nav-actions{display:flex;gap:14px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:12px 22px;font-weight:800;border:0;cursor:pointer;transition:.2s ease}.btn:hover{transform:translateY(-1px)}.btn-outline{border:2px solid #fff;color:#fff}.btn-light{background:var(--lime);color:#083c1d}.btn-primary{background:linear-gradient(180deg,var(--green-500),var(--green-700));color:#fff;box-shadow:0 8px 18px rgba(22,160,63,.25)}.mobile-toggle{display:none;margin-left:auto;background:none;border:0}.mobile-toggle span{display:block;width:26px;height:3px;background:#fff;margin:5px;border-radius:4px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 70% 35%,#42bd3f 0%,#16803a 35%,#0b5c2c 70%,#06401f 100%);color:#fff}.hero:before{content:"2x+3=11  √25=5  a²+b²=c²  5x-2=13";position:absolute;inset:80px 0 auto 35%;font-weight:800;font-size:32px;letter-spacing:18px;line-height:3;color:rgba(255,255,255,.09);transform:rotate(-8deg);white-space:pre-wrap}.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;min-height:455px}.eyebrow{display:inline-flex;background:rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;font-weight:800;margin-bottom:18px}.hero h1{font-size:clamp(44px,6vw,76px);line-height:.98;margin:0 0 22px;text-shadow:0 2px 8px rgba(0,0,0,.18)}.hero h1 span{color:var(--yellow)}.hero p{font-size:20px;max-width:560px;line-height:1.45;margin:0 0 28px}.hero-actions{display:flex;flex-wrap:wrap;gap:16px}.role-card{min-width:230px;border-radius:12px;padding:16px 22px;display:block;box-shadow:var(--shadow)}.role-card strong{display:block;font-size:18px}.role-card small{font-size:13px}.role-teacher{background:linear-gradient(180deg,#86d930,#20a02f);color:#fff}.role-student{background:#fff;color:var(--green-800)}.hero-art{position:relative;text-align:right}.hero-art img{max-width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}.speech-bubble{position:absolute;right:58px;top:42px;background:#cbf68f;color:#0d4f24;padding:18px 24px;border-radius:28px;font-weight:900;font-size:20px;transform:rotate(3deg);z-index:2}.feature-strip{position:relative;z-index:4}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--shadow)}.feature-grid article{padding:0 22px;border-right:1px solid var(--border)}.feature-grid article:last-child{border-right:0}.feature-grid span{font-size:42px}.feature-grid h3{color:var(--green-800);margin:6px 0}.feature-grid p{margin:0;color:#203327;line-height:1.45}.dashboard-preview{padding:34px 0 24px}.app-grid{display:grid;grid-template-columns:1.45fr 1fr .95fr .95fr;gap:14px}.panel{background:rgba(255,255,255,.93);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(14,88,31,.08)}.panel h2{margin:0 0 14px;color:var(--green-800)}.fake-app{display:grid;grid-template-columns:115px 1fr 105px;gap:14px}.fake-app aside{background:linear-gradient(180deg,var(--green-900),#1f7b38);border-radius:10px;padding:12px}.fake-app aside a{display:block;color:#fff;font-size:13px;padding:9px;border-radius:8px}.fake-app aside a.active{background:rgba(255,255,255,.14)}.fake-form,.stats-card,.problem-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px}.fake-form form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fake-form h3{margin:0 0 10px}.fake-form label{display:grid;gap:4px;font-size:12px;font-weight:800}.fake-form input,.fake-form select,.answer-row input{border:1px solid #d7e6d5;border-radius:8px;padding:11px;background:#fbfffa}.fake-form button{grid-column:1/-1}.form-message{margin:8px 0 0;color:var(--green-700);font-weight:800}.stats-card{display:grid;gap:3px;align-content:start}.stats-card strong{font-size:22px}.stats-card span{font-size:12px;border-bottom:1px solid #e5f0e3;padding-bottom:10px}.problem-card{position:relative;overflow:hidden;min-height:250px}.points{text-align:right;color:var(--green-800)}.equation{font-size:34px;font-weight:900;text-align:center;margin:22px 0}.answer-row{display:flex;gap:10px;align-items:center;justify-content:center;font-size:24px;font-weight:900}.answer-row input{width:72px;text-align:center;font-size:22px;font-weight:900;color:var(--green-800)}.answer-status{margin-top:20px;font-size:13px}.progress{height:9px;background:#d9ded8;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green-500)}.problem-card img{position:absolute;left:-10px;bottom:-10px;width:115px}.leader-list{list-style:none;padding:0;margin:0}.leader-list li{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #e4efe1}.game-panel img{width:100%;border-radius:10px;display:block}.game-panel .btn{width:100%;margin-top:8px}.trust-bar{padding:18px 0 36px}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:linear-gradient(90deg,var(--green-950),var(--green-800));border-radius:14px;color:#fff;overflow:hidden}.trust-grid span{padding:22px;text-align:center;font-weight:800;border-right:1px solid rgba(255,255,255,.18)}.site-footer{background:#053a1c;color:#dff6df;padding:42px 0 18px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:28px}.footer-brand{font-size:28px;font-weight:900;color:#fff}.site-footer h4{margin:0 0 12px;color:#fff}.site-footer a{display:block;margin:8px 0;color:#dff6df}.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:18px;text-align:center;color:#a9c9ad}.page-hero{background:linear-gradient(135deg,var(--green-900),var(--green-600));color:#fff;padding:76px 0}.page-hero h1{font-size:54px;margin:0 0 10px}.page-hero p{font-size:20px;max-width:720px}.content-section{padding:42px 0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}.content-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(14,88,31,.08)}
@media(max-width:1000px){.nav-actions{display:none}.main-nav{display:none;position:absolute;left:18px;right:18px;top:86px;background:var(--green-900);border-radius:14px;padding:18px;flex-direction:column}.main-nav.open{display:flex}.mobile-toggle{display:block}.hero-grid,.app-grid{grid-template-columns:1fr}.hero-art{text-align:center}.feature-grid{grid-template-columns:1fr 1fr}.feature-grid article{border-right:0;border-bottom:1px solid var(--border);padding:18px}.footer-grid,.trust-grid,.two-col{grid-template-columns:1fr 1fr}.fake-app{grid-template-columns:1fr}.fake-app aside{display:flex;overflow:auto}.stats-card{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.container{width:min(100% - 24px,1180px)}.nav-wrap{height:76px}.brand{min-width:0}.brand span{font-size:22px}.hero-grid{min-height:auto;padding:48px 0 20px}.hero p{font-size:17px}.role-card{width:100%}.feature-grid,.footer-grid,.trust-grid,.two-col{grid-template-columns:1fr}.fake-form form{grid-template-columns:1fr}.speech-bubble{right:10px;top:8px;font-size:15px}.page-hero h1{font-size:42px}}

.feature-cards {
    padding: 25px 0;
    background: #f5f7f6;
}

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

.feature-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.feature-card img {
    width: 100%;
    height: auto;
}

.feature-content {
    padding: 18px;
    text-align: center;
}

.feature-content h3 {
    margin-bottom: 8px;
    color: #1e7d3a;
}

.feature-content p {
    font-size: 14px;
    color: #555;
}

/* 📱 Responsive */
@media (max-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}