/* SSM Learning Portal — final warm premium skin */
:root{
  --ink:#1A0F0A;
  --ink-2:#2A1B12;
  --ink-3:#6E5B4A;
  --paper:#FBF6EC;
  --paper-2:#F4E9D8;
  --cream:#FFFCF6;
  --moss:#6B1E2C;
  --moss-2:#4A1320;
  --leaf:#7C2435;
  --amber:#E87722;
  --amber-2:#F4AF5F;
  --terra:#C45F12;
  --sky:#B8862B;
  --line:#E5D9C4;
  --shadow:0 16px 44px rgba(74,19,32,.10),0 4px 12px rgba(74,19,32,.06);
  --shadow-lg:0 26px 90px rgba(74,19,32,.18),0 10px 26px rgba(74,19,32,.08);
}
body{
  background:
    radial-gradient(circle at 6% 0%,rgba(232,119,34,.14),transparent 28rem),
    radial-gradient(circle at 92% 5%,rgba(107,30,44,.09),transparent 28rem),
    linear-gradient(180deg,#fffaf2,#fbf2e3 52%,#f5e8d4) !important;
  color:var(--ink-2) !important;
}
body::before{
  background-image:
    linear-gradient(rgba(107,30,44,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,30,44,.018) 1px,transparent 1px) !important;
  background-size:42px 42px !important;
  z-index:-1 !important;
}
::selection{background:var(--amber);color:#fff!important;}
.progress-bar{background:linear-gradient(90deg,var(--amber),var(--moss)) !important;}
nav.topbar{
  background:rgba(255,252,246,.96) !important;
  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
  border-bottom:1px solid rgba(229,217,196,.92) !important;
  box-shadow:0 14px 38px rgba(74,19,32,.08) !important;
}
nav.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--moss),var(--amber),var(--sky));}
.brand-mark{background:linear-gradient(135deg,var(--moss),var(--moss-2)) !important;color:var(--amber-2)!important;box-shadow:0 12px 24px rgba(107,30,44,.22)!important;}
.brand-text span{color:var(--moss)!important;font-weight:900!important;}
.brand-text small{color:var(--terra)!important;}
.nav-links a,.nav-links button{color:var(--ink-3)!important;font-weight:800!important;}
.nav-links a:hover,.nav-links button:hover{color:var(--moss)!important;}
.nav-links a::after,.nav-links button::after{background:var(--amber)!important;}
.nav-cta,.start-test-btn,.primary-btn,.quiz-btn,.test-config-pill.selected,.option.selected,.option.correct{background:linear-gradient(135deg,var(--amber),var(--terra)) !important;color:#fff!important;border-color:var(--amber)!important;box-shadow:0 14px 30px rgba(232,119,34,.28)!important;border-radius:999px!important;}
.menu-btn span{background:var(--moss)!important;}
.home-hero{
  min-height:auto !important;
  padding:150px 0 105px !important;
  background:
    radial-gradient(circle at 8% 10%,rgba(232,119,34,.18),transparent 26rem),
    linear-gradient(135deg,#fffaf1 0%,#f5e6d0 100%) !important;
  color:var(--ink-2)!important;
  overflow:hidden !important;
}
.home-hero::before{
  content:'' !important;
  position:absolute !important;
  right:5vw !important;
  top:120px !important;
  bottom:58px !important;
  width:min(42vw,560px) !important;
  border-radius:36px !important;
  background:linear-gradient(180deg,rgba(107,30,44,.04),rgba(107,30,44,.16)),url('../assets/school_photo.jpg') center/cover no-repeat !important;
  border:12px solid rgba(255,252,246,.92) !important;
  box-shadow:var(--shadow-lg) !important;
  opacity:1 !important;
}
.home-hero-inner{max-width:1280px!important;text-align:left!important;padding:0 40px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr)!important;gap:64px!important;align-items:center!important;}
.home-hero-inner > *{grid-column:1!important;}
.home-meta{justify-content:flex-start!important;}
.home-meta .chip{background:#fff!important;color:var(--moss)!important;border-color:rgba(184,134,43,.32)!important;box-shadow:0 10px 24px rgba(74,19,32,.06)!important;}
.home-hero h1{color:var(--moss)!important;background:none!important;text-shadow:none!important;font-size:clamp(3.3rem,6.8vw,6.5rem)!important;letter-spacing:-.055em!important;line-height:.96!important;}
.home-hero h1 .accent{color:var(--terra)!important;background:none!important;}
.home-hero p.lead{color:var(--ink-3)!important;text-shadow:none!important;max-width:650px!important;font-size:1.12rem!important;}
.class-selector{justify-content:flex-start!important;}
.class-pill{background:#fff!important;color:var(--moss)!important;border-color:rgba(184,134,43,.25)!important;border-radius:999px!important;font-weight:900!important;}
.class-pill.active{background:linear-gradient(135deg,var(--moss),var(--moss-2))!important;color:var(--amber-2)!important;border-color:transparent!important;box-shadow:0 16px 36px rgba(107,30,44,.22)!important;}
.class-pill:not(.disabled):hover{background:var(--amber)!important;color:#fff!important;border-color:var(--amber)!important;}
.class-pill.disabled{opacity:.55!important;}
.subjects-section,.features{background:transparent!important;}
.eyebrow{color:var(--terra)!important;font-weight:900!important;letter-spacing:.14em!important;}
h1,h2,h3,h4,h5{color:var(--moss)!important;}
.section-num{color:rgba(107,30,44,.09)!important;}
.subj-card,.feat,.test-config-card,.note-card,.mcq,.definition,.case,.accordion,.visual-notes,.quiz-header,.test-card,.result-hero,.chapter-section,.answer-card,.exercise-card{
  background:rgba(255,252,246,.95)!important;
  border:1px solid rgba(229,217,196,.95)!important;
  border-radius:24px!important;
  box-shadow:0 14px 42px rgba(74,19,32,.07)!important;
}
.subj-card:hover,.feat:hover,.note-card:hover{transform:translateY(-7px)!important;box-shadow:0 26px 70px rgba(74,19,32,.13)!important;border-color:rgba(232,119,34,.55)!important;}
.subj-card.geo .subj-banner,.subj-card.hist .subj-banner,.subj-card.civ .subj-banner,.subj-card.sci .subj-banner,.subj-card.math .subj-banner{background:linear-gradient(135deg,var(--moss),var(--amber))!important;}
.chapter-row.ready .chapter-num,.chapter-num,.feat .feat-ico{background:linear-gradient(135deg,var(--moss),var(--moss-2))!important;color:var(--amber-2)!important;}
.chapter-row.ready:hover{border-color:var(--amber)!important;background:rgba(232,119,34,.08)!important;}
.chapter-row.ready .chapter-title,.chapter-card h3{color:var(--moss)!important;}
.test-config-pill,.option{border-color:var(--line)!important;background:var(--cream)!important;color:var(--ink-2)!important;border-radius:16px!important;}
.option.wrong{background:#FBE9E7!important;color:#8A1C12!important;border-color:#EAA39D!important;}
footer{background:linear-gradient(135deg,var(--moss-2),#2B0C14 65%,#17070B)!important;color:rgba(251,246,236,.76)!important;}
footer h4,.foot-brand b{color:var(--cream)!important;}
footer a,footer p{color:rgba(251,246,236,.72)!important;}
.foot-bottom{border-top-color:rgba(251,246,236,.12)!important;}
@media(max-width:900px){
  .home-hero{padding:108px 0 70px!important;}
  .home-hero::before{position:relative!important;display:block!important;right:auto!important;top:auto!important;bottom:auto!important;width:calc(100% - 56px)!important;height:230px!important;margin:0 auto 26px!important;border-radius:28px!important;border-width:8px!important;}
  .home-hero-inner{display:block!important;padding:0 24px!important;}
  .home-hero h1{font-size:clamp(2.8rem,12vw,4.4rem)!important;}
  .nav-links{background:var(--cream)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-lg)!important;border-radius:0 0 24px 24px!important;}
  .nav-links a,.nav-links button{color:var(--ink-3)!important;}
}

/* portal hero correction: split image and text without overlap */
.home-hero{
  display:block !important;
  min-height:680px !important;
}
.home-hero::before{
  inset:auto !important;
  left:auto !important;
  right:5vw !important;
  top:120px !important;
  bottom:60px !important;
  width:min(39vw,540px) !important;
  height:auto !important;
  opacity:1 !important;
  z-index:1 !important;
}
.home-hero-inner{
  position:relative !important;
  z-index:3 !important;
  grid-template-columns:minmax(0,.92fr) minmax(420px,.88fr) !important;
}
.home-hero h1{
  max-width:620px !important;
  font-size:clamp(3rem,5.4vw,5.4rem) !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.home-hero p.lead{
  max-width:560px !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
@media(max-width:900px){
  .home-hero{min-height:auto !important;}
  .home-hero::before{inset:auto !important;right:auto !important;left:auto !important;top:auto !important;bottom:auto !important;width:calc(100% - 56px) !important;height:230px !important;margin:0 auto 26px !important;}
}