/* ShelfCloud public marketing site -- self-contained, not shared with
   the authenticated app's inline base.html styles (no global stylesheet
   exists to link to; brand variables are intentionally re-declared here,
   same convention templates/public/base_public.html already uses). */

:root{
  --sm-brand:#1a3c6e;
  --sm-brand-light:#e8f0fe;
  --sm-accent:#2563aa;
  --sm-navy:#0f1f3d;
  --sm-grey:#f6f8fc;
  --sm-border:#e3e8f2;
  --sm-text:#28344a;
  --sm-text-muted:#5b6b85;

  /* Same accent hues the authenticated ERP UI uses for its module/stat
     cards (frontend/static/css/exams-theme.css) -- re-declared here rather
     than linked, so a module's landing-page card carries the same color
     identity as its real ERP module without pulling the admin-only
     stylesheet onto the public site. */
  --accent-blue:   #2563eb; --accent-amber:  #b45309; --accent-purple: #7c3aed;
  --accent-slate:  #475569; --accent-teal:   #0e7490; --accent-pink:   #db2777;
  --accent-green:  #15803d; --accent-indigo: #4338ca; --accent-danger: #dc3545;

  /* Two modules have their OWN distinct real brand color inside the ERP,
     separate from the 9-hue accent-card rotation above (frontend/static/
     css/exams-theme.css's --exam-brand, frontend/static/css/library.css's
     --lib-accent) -- re-declared here at the exact same hex so their
     landing cards carry the module's actual established identity rather
     than being forced into a generic hue that doesn't really belong to
     them. */
  --exam-brand: #43AB49;
  --lib-accent: #2541B2;
}
.accent-card-blue   { --accent-card-color: var(--accent-blue); }
.accent-card-amber  { --accent-card-color: var(--accent-amber); }
.accent-card-purple { --accent-card-color: var(--accent-purple); }
.accent-card-slate  { --accent-card-color: var(--accent-slate); }
.accent-card-teal   { --accent-card-color: var(--accent-teal); }
.accent-card-pink   { --accent-card-color: var(--accent-pink); }
.accent-card-green  { --accent-card-color: var(--accent-green); }
.accent-card-indigo { --accent-card-color: var(--accent-indigo); }
.accent-card-danger { --accent-card-color: var(--accent-danger); }
.accent-card-exam-brand { --accent-card-color: var(--exam-brand); }
.accent-card-lib-accent { --accent-card-color: var(--lib-accent); }

body{
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  color:var(--sm-text);
  background:#fff;
  overflow-x:hidden;
}

/* ── Reveal-on-scroll (plain IntersectionObserver, no library) ── */
.sm-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.sm-reveal-visible{ opacity:1; transform:translateY(0); }

/* ── Navbar ── */
.sm-navbar{
  background:#fff;
  box-shadow:0 2px 14px rgba(15,31,61,.06);
  padding-top:.6rem; padding-bottom:.6rem;
}
.sm-brand{
  font-size:1.3rem; font-weight:700; color:var(--sm-brand)!important;
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
}
.sm-brand span{ color:var(--sm-accent); }
.sm-navbar .nav-link{ color:var(--sm-text); font-weight:500; }
.sm-navbar .nav-link:hover{ color:var(--sm-brand); }

.sm-btn-primary{
  background:var(--sm-brand); color:#fff; border:1px solid var(--sm-brand);
  border-radius:50px; font-weight:600; padding:.55rem 1.4rem; transition:all .2s ease;
}
.sm-btn-primary:hover{ background:var(--sm-accent); border-color:var(--sm-accent); color:#fff; transform:translateY(-1px); }
.sm-btn-outline{
  background:transparent; color:var(--sm-brand); border:1px solid var(--sm-brand);
  border-radius:50px; font-weight:600; padding:.55rem 1.4rem; transition:all .2s ease;
}
.sm-btn-outline:hover{ background:var(--sm-brand-light); color:var(--sm-brand); }
.sm-btn-light{ background:#fff; color:var(--sm-navy); border-radius:50px; font-weight:600; padding:.6rem 1.6rem; }
.sm-btn-light:hover{ background:var(--sm-brand-light); color:var(--sm-navy); }
.sm-btn-outline-light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:50px; font-weight:600; padding:.6rem 1.6rem; }
.sm-btn-outline-light:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ── Hero ── */
.sm-hero{
  background:radial-gradient(1200px 500px at 80% -10%, var(--sm-brand-light) 0%, transparent 60%),
             linear-gradient(180deg, #eef3fb 0%, #ffffff 100%);
  padding-top:2rem;
}
.sm-hero-title{ font-size:2.75rem; font-weight:800; color:var(--sm-navy); line-height:1.15; letter-spacing:-.5px; }
.sm-hero-sub{ font-size:1.1rem; color:var(--sm-text-muted); margin-top:1rem; max-width:560px; }

.sm-hero-diagram{ position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin:0 auto; }
.sm-hero-diagram::before{
  content:''; position:absolute; inset:8%; border:1.5px dashed var(--sm-border); border-radius:50%;
}
.sm-hero-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%; background:var(--sm-brand); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  box-shadow:0 12px 30px rgba(26,60,110,.35); font-weight:700; font-size:.8rem; z-index:2;
}
.sm-hero-core i{ font-size:1.4rem; }
.sm-node{
  position:absolute; transform:translate(-50%,-50%);
  background:#fff; border:1px solid var(--sm-border); border-radius:14px;
  padding:.5rem .7rem; box-shadow:0 8px 20px rgba(15,31,61,.08);
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  font-size:.7rem; font-weight:600; color:var(--sm-text); min-width:82px; z-index:1;
}
.sm-node i{ color:var(--sm-brand); font-size:1.1rem; }
.sm-node-n1{ top:10%;  left:50%; }
.sm-node-n2{ top:23%;  left:79%; }
.sm-node-n3{ top:50%;  left:90%; }
.sm-node-n4{ top:77%;  left:79%; }
.sm-node-n5{ top:90%;  left:50%; }
.sm-node-n6{ top:77%;  left:21%; }
.sm-node-n7{ top:50%;  left:10%; }
.sm-node-n8{ top:23%;  left:21%; }

/* ── Section scaffolding ── */
.sm-section{ padding:5.5rem 0; }
.sm-section-alt{ background:var(--sm-grey); }
.sm-section-navy{ background:linear-gradient(160deg, var(--sm-navy) 0%, var(--sm-brand) 100%); color:#fff; }
.sm-section-title{ font-size:2rem; font-weight:800; color:var(--sm-navy); text-align:center; letter-spacing:-.3px; }
.sm-section-title.text-start{ text-align:left; }
.sm-title-light{ color:#fff; }
.sm-section-sub{ color:var(--sm-text-muted); font-size:1.05rem; max-width:640px; margin:.75rem auto 0; text-align:center; }
.sm-sub-light{ color:rgba(255,255,255,.75); }
.sm-body-text{ color:var(--sm-text-muted); font-size:1.02rem; line-height:1.7; }

/* ── Value strip ── */
.sm-value-card{
  background:#fff; border:1px solid var(--sm-border); border-radius:16px; padding:1.75rem;
  height:100%; transition:transform .2s ease, box-shadow .2s ease;
}
.sm-value-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,31,61,.08); }
.sm-value-icon{
  width:52px; height:52px; border-radius:12px; background:var(--sm-brand-light); color:var(--sm-brand);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.9rem;
}

/* ── About chips ── */
.sm-about-grid{ display:flex; flex-wrap:wrap; gap:.6rem; }
.sm-about-chip{
  background:#fff; border:1px solid var(--sm-border); border-radius:50px; padding:.5rem 1rem;
  font-size:.85rem; font-weight:600; color:var(--sm-brand); display:inline-flex; align-items:center; gap:.4rem;
}

/* ── Module cards ── */
.sm-module-card{
  background:#fff; border:1px solid var(--sm-border); border-radius:16px; padding:1.5rem; height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sm-module-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,31,61,.08); border-color:var(--accent-card-color, var(--sm-brand-light)); }
.sm-module-icon{
  width:46px; height:46px; border-radius:12px; background:var(--accent-card-color, var(--sm-brand)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.85rem;
}

/* ── Ecosystem diagram ── */
.sm-ecosystem{ max-width:760px; margin:0 auto; }
.sm-eco-root{
  display:inline-block; background:#fff; color:var(--sm-navy); font-weight:800; letter-spacing:1px;
  border-radius:50px; padding:.7rem 2rem; margin-bottom:0; position:relative;
}
.sm-eco-root::after{
  content:''; position:absolute; bottom:-1.75rem; left:50%; transform:translateX(-50%);
  width:1.5px; height:1.75rem; background:rgba(255,255,255,.4);
}
.sm-eco-row{ display:flex; justify-content:center; gap:2.5rem; margin-top:1.75rem; flex-wrap:wrap; }
.sm-eco-col{ display:flex; flex-direction:column; gap:.85rem; position:relative; padding-top:1.25rem; }
.sm-eco-col::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1.5px; height:1.25rem; background:rgba(255,255,255,.4);
}
.sm-eco-node{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:12px;
  padding:.6rem 1.1rem; font-weight:600; font-size:.9rem; min-width:130px;
}
.sm-eco-leadership{
  display:inline-block; margin-top:2rem; background:#fff; color:var(--sm-navy); font-weight:800; letter-spacing:1px;
  border-radius:50px; padding:.7rem 2rem; position:relative;
}
.sm-eco-leadership::before{
  content:''; position:absolute; top:-2rem; left:50%; transform:translateX(-50%);
  width:1.5px; height:2rem; background:rgba(255,255,255,.4);
}

/* ── Vision / Mission ── */
.sm-vm-card{
  background:var(--sm-grey); border-radius:20px; padding:2.25rem; height:100%;
}
.sm-vm-icon{
  width:56px; height:56px; border-radius:50%; background:var(--sm-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem;
}

/* ── Why cards ── */
.sm-why-card{
  background:#fff; border:1px solid var(--sm-border); border-radius:16px; padding:1.75rem; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sm-why-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,31,61,.08); }
.sm-why-icon{ color:var(--sm-brand); font-size:1.6rem; margin-bottom:.75rem; }

/* ── Persona cards ── */
.sm-persona-card{
  background:#fff; border:1px solid var(--sm-border); border-radius:14px; padding:1.1rem .75rem;
  text-align:center; height:100%; transition:transform .2s ease, box-shadow .2s ease;
}
.sm-persona-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(15,31,61,.08); }
.sm-persona-icon{ color:var(--sm-brand); font-size:1.5rem; margin-bottom:.4rem; }
.sm-persona-blurb{ font-size:.72rem; margin-top:.25rem; line-height:1.4; }

/* ── Student journey ── */
.sm-journey{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem; }
.sm-journey-step{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; width:96px;
}
.sm-journey-icon{
  width:52px; height:52px; border-radius:50%; background:#fff; border:1px solid var(--sm-border);
  color:var(--sm-brand); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  box-shadow:0 8px 18px rgba(15,31,61,.06);
}
.sm-journey-arrow{ color:var(--sm-border); font-size:1.1rem; }

/* ── Leadership / Security chips ── */
.sm-leadership-chip, .sm-security-chip{
  background:#fff; border:1px solid var(--sm-border); border-radius:10px; padding:.6rem .9rem;
  font-size:.88rem; font-weight:600; color:var(--sm-text); display:flex; align-items:center; gap:.5rem;
}
.sm-leadership-chip i{ color:#2a9d5c; }
.sm-security-chip i{ color:var(--sm-brand); }

/* ── Final CTA ── */
.sm-cta{ background:linear-gradient(135deg, var(--sm-brand) 0%, var(--sm-navy) 100%); color:#fff; padding:5rem 0; }
.sm-cta-title{ font-size:2.1rem; font-weight:800; }
.sm-cta-sub{ color:rgba(255,255,255,.8); font-size:1.05rem; max-width:560px; margin:.5rem auto 0; }

/* ── Footer ── */
.sm-footer{ background:var(--sm-navy); color:rgba(255,255,255,.85); }
.sm-footer a{ color:rgba(255,255,255,.75); text-decoration:none; }
.sm-footer a:hover{ color:#fff; }
.sm-footer-heading{ font-size:.75rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; color:rgba(255,255,255,.5); margin-bottom:.6rem; }
.sm-footer .sm-brand{ color:#fff!important; }

/* ── Responsive ── */
@media (max-width: 991.98px){
  .sm-hero-title{ font-size:2.1rem; }
  .sm-hero-diagram{ max-width:340px; margin-top:2rem; }
  .sm-node{ font-size:.62rem; padding:.4rem .5rem; min-width:66px; }
  .sm-node i{ font-size:.95rem; }
  .sm-hero-core{ width:92px; height:92px; font-size:.68rem; }
  .sm-hero-core i{ font-size:1.1rem; }
  .sm-section{ padding:3.5rem 0; }
  .sm-eco-row{ gap:1.25rem; }
}
@media (max-width: 575.98px){
  .sm-journey-step{ width:78px; }
  .sm-eco-row{ flex-direction:column; align-items:center; }
}

/* Respect reduced-motion preference -- content still fully visible, no
   fade delay, per accessibility best practice. */
@media (prefers-reduced-motion: reduce){
  .sm-reveal{ opacity:1; transform:none; transition:none; }
}