:root{
  --bg:#F8FAFC; --card:#FFFFFF; --text-900:#0F172A; --text-600:#475569;
  --primary-600:#10B981; --primary-700:#059669; --accent:#3B82F6;
  --border:#E2E8F0; --chip:#E6F9F3; --shadow:0 6px 20px rgba(0,0,0,0.06);
  --container:1200px; --radius-card:16px; --radius-pill:9999px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text-900)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{max-width:var(--container);margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 16px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--primary-600);color:#fff}
.btn-primary:hover{background:var(--primary-700)}
.btn-outline{background:#fff;border-color:var(--primary-600);color:var(--primary-600)}
.btn-outline:hover{background:rgba(16,185,129,.08)}
.input{border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-height:44px;width:100%}
.badge{display:inline-block;background:var(--chip);color:var(--primary-700);padding:4px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600}
.list-clean{list-style:none;padding:0;margin:8px 0 0}

/* Header/Nav */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:16px}
.nav-left{display:flex;align-items:center;gap:12px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary-600),var(--accent));color:#fff;font-weight:800}
.brand{font-weight:800;letter-spacing:.2px}
.nav-center{flex:1}
.searchbar{display:flex;gap:8px}
.nav-right{display:flex;gap:8px;align-items:center}
.menu-wrap{border-top:1px solid var(--border)}
.menu-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.menu-toggle{display:none;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.menu-list{display:flex;gap:20px;padding:6px 0;margin:0;list-style:none}
.menu-link{padding:8px 10px;border-radius:10px;color:var(--text-600);font-weight:600}
.menu-link:hover{background:rgba(16,185,129,.08);color:var(--text-900)}



/* Intro */
.hero.container{border-top:1px solid var(--border);padding-top:32px}
.intro-card{padding:24px}
.intro-card h1{margin:0 0 8px;font-size:clamp(22px,3.2vw,32px)}
.intro-card h2{margin:16px 0 8px;font-size:clamp(18px,2.5vw,22px)}
.intro-card p{margin:0 0 12px;color:var(--text-600)}
.intro-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.intro-item{display:flex;align-items:flex-start;gap:10px}
.intro-icon{font-size:20px;line-height:1;margin-top:2px}
.intro-text{color:var(--text-900)}

/* About split */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.about-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.about-gallery img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 6px 20px rgba(16,185,129,.08);border:1px solid var(--border)}

/* Tutors */
.section-title{margin:32px 0 12px;font-size:22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tutor-card{padding:16px;display:flex;gap:16px}
.avatar{width:72px;height:72px;border-radius:14px;object-fit:cover}
.tutor-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.price{font-weight:700}
.price small{color:var(--text-600);font-weight:500}
.muted{color:var(--text-600)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.actions{display:flex;gap:10px}

/* Services / Pricing / Contact helpers */
.services-grid,.pricing-grid{grid-template-columns:repeat(3,1fr)}
.service-card,.price-card{padding:20px}
.contact-grid{grid-template-columns:1fr 1fr}
.contact-grid textarea{grid-column:1 / -1}
.contact-grid button{justify-self:start}

/* Footer */
footer{margin-top:40px;border-top:1px solid var(--border);background:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;padding:24px}
.copyright{text-align:center;color:var(--text-600);padding:12px 0 24px}

/* Responsive */
@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .services-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .intro-list{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .searchbar{display:none}
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .tutor-card{flex-direction:column;align-items:flex-start}
  .tutor-top{flex-direction:column;align-items:flex-start}
  .menu-inner{flex-direction:column;align-items:stretch;gap:8px}
  .menu-toggle{display:inline-block}
  .menu-list{display:none;flex-direction:column;gap:6px;padding:0 0 12px}
  .menu-list.open{display:flex}


  

}

/* Focus */
.btn:focus,.input:focus,select:focus,textarea:focus,.menu-link:focus{
  outline:2px solid var(--primary-600);outline-offset:2px
}

.container.menu-inner {
  padding-top: 3px;
  padding-bottom: 3px;
}


/* --- FORCE mobile menu centering + height --- */
@media (max-width: 640px) {
  .menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;      /* centers the link block itself */
    justify-content: center;
    text-align: center;       /* centers text inside */
    gap: 8px;
    padding: 20px 0;          /* adds vertical breathing room */
  }

  .menu-link {
    display: block;
    width: 100%;              /* ensures full-width clickable area */
    padding: 16px 0;          /* increase for taller links */
    font-size: 1.1rem;
    font-weight: 600;
  }

  .menu-list.open {
    display: flex;
  }
}


@media (max-width: 640px) {
  .header {
    position: static !important;
  }
}