/* ======================================================================
   NEXUS PUBLIC SCHOOL ERP
   ====================================================================== */

:root{
  --serp-purple:#6933ee;
  --serp-purple-2:#7e4bff;
  --serp-purple-dark:#21124d;
  --serp-ink:#11142e;
  --serp-muted:#5f6475;
  --serp-border:#ebe9f2;
  --serp-soft:#f8f6ff;
  --serp-soft-2:#f2edff;
  --serp-green:#19a565;
  --serp-red:#ea4a59;
  --serp-shadow:0 20px 60px rgba(60,35,120,.12);
  --serp-container:1440px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body.school-erp-public-page{
  margin:0;
  background:#fff;
  color:var(--serp-ink);
  font-family:
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.school-svg-library{
  position:absolute;
  left:-9999px;
  overflow:hidden;
}

.serp-container{
  width:min(calc(100% - 64px),var(--serp-container));
  margin-inline:auto;
}


/* ======================================================================
   HEADER
   ====================================================================== */

.serp-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #eeeaf5;
  backdrop-filter:blur(18px);
}

.serp-header-inner{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:42px;
}

.serp-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#151631;
  margin-right:auto;
}

.serp-brand-badge{
  width:48px;
  height:48px;
  display:block;
}

.serp-brand-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.serp-brand strong{
  font-size:1.75rem;
  letter-spacing:-.03em;
}

.serp-nav{
  display:flex;
  align-items:center;
  gap:36px;
}

.serp-nav a{
  color:#181a35;
  text-decoration:none;
  font-size:1rem;
  font-weight:500;
  transition:.18s ease;
}

.serp-nav a:hover{
  color:var(--serp-purple);
}

.serp-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:30px;
}

.serp-login-btn,
.serp-demo-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:8px;
  font-size:.96rem;
  font-weight:600;
  text-decoration:none;
}

.serp-login-btn{
  border:1.5px solid #bda9ff;
  color:#3b248e;
  background:#fff;
}

.serp-demo-btn{
  color:#fff;
  background:linear-gradient(
    135deg,
    #7546ef,
    #5f23dc
  );
  box-shadow:0 8px 22px rgba(101,50,224,.18);
}

.serp-menu-btn{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--serp-border);
  background:#fff;
  border-radius:10px;
  place-items:center;
}

.serp-menu-btn svg{
  width:23px;
  height:23px;
}


/* ======================================================================
   HERO
   ====================================================================== */

.serp-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 86% 22%,
      rgba(129,75,255,.15),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fefcff 77%,
      #f2ebff 100%
    );
}

.serp-hero-grid{
  min-height:720px;
  display:grid;
  grid-template-columns:.84fr 1.35fr;
  align-items:center;
  gap:62px;
  padding-top:64px;
  padding-bottom:82px;
  position:relative;
  z-index:2;
}

.serp-hero-copy{
  padding-left:10px;
}

.serp-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 14px;
  border-radius:999px;
  background:#eee7ff;
  color:#6b37ee;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.03em;
  margin-bottom:20px;
}

.serp-hero h1{
  max-width:610px;
  margin:0;
  font-size:clamp(3.5rem,5vw,5.6rem);
  line-height:.99;
  letter-spacing:-.055em;
  font-weight:650;
  color:#11142c;
}

.serp-hero h1 span{
  display:inline-block;
  color:var(--serp-purple);
}

.serp-hero-text{
  max-width:600px;
  margin:24px 0 22px;
  color:#54596b;
  font-size:1.16rem;
  line-height:1.75;
}

.serp-hero-points{
  display:grid;
  gap:14px;
  margin:0 0 28px;
}

.serp-hero-points > div{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.03rem;
  font-weight:500;
  color:#30334a;
}

.serp-hero-points span{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#efe9ff;
  color:#7240ed;
}

.serp-hero-points svg{
  width:17px;
  height:17px;
}

.serp-hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:30px;
}

.serp-btn{
  min-height:55px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 27px;
  border-radius:9px;
  text-decoration:none;
  font-size:1rem;
  font-weight:600;
}

.serp-btn svg{
  width:18px;
  height:18px;
}

.serp-btn-primary{
  color:#fff;
  background:linear-gradient(
    135deg,
    #7444ef,
    #5c24da
  );
  box-shadow:0 12px 26px rgba(105,51,238,.22);
}

.serp-btn-secondary{
  color:#5f2ee6;
  background:#fff;
  border:1.5px solid #8f68f2;
}

.serp-trust-row{
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:14px;
}

.serp-avatars{
  display:flex;
}

.serp-avatars span{
  width:36px;
  height:36px;
  margin-left:-8px;
  border:3px solid #fff;
  border-radius:50%;
  background:
    linear-gradient(135deg,#f0c0a0,#6b43de);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.72rem;
  font-weight:700;
}

.serp-avatars span:first-child{
  margin-left:0;
}

.serp-trust-row strong{
  display:block;
  font-size:.86rem;
  font-weight:500;
  color:#45485b;
}

.serp-stars{
  margin-top:4px;
  color:#f6aa18;
  font-size:.86rem;
  letter-spacing:.05em;
}

.serp-stars small{
  margin-left:6px;
  color:#2e3044;
  letter-spacing:0;
  font-weight:600;
}


/* ======================================================================
   DASHBOARD VISUAL
   ====================================================================== */

.serp-dashboard-shell{
  min-width:0;
  border-radius:22px;
  padding:2px;
  background:linear-gradient(
    145deg,
    rgba(105,51,238,.1),
    rgba(255,255,255,.5)
  );
  box-shadow:var(--serp-shadow);
}

.serp-dashboard{
  min-height:570px;
  display:grid;
  grid-template-columns:175px 1fr;
  background:#fff;
  border:1px solid #edeaf4;
  border-radius:20px;
  overflow:hidden;
}

.serp-dashboard-side{
  padding:24px 14px;
  border-right:1px solid #edeaf4;
  background:#fff;
}

.serp-dash-brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 8px 22px;
}

.serp-dash-brand img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.serp-dash-brand strong{
  font-size:.9rem;
  letter-spacing:-.02em;
}

.serp-dash-menu{
  display:grid;
  gap:7px;
}

.serp-dash-menu a{
  min-height:37px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border-radius:7px;
  color:#646779;
  font-size:.76rem;
  font-weight:500;
}

.serp-dash-menu a.active{
  color:#fff;
  background:linear-gradient(
    135deg,
    #7444ed,
    #6328df
  );
}

.serp-dash-menu svg{
  width:15px;
  height:15px;
}

.serp-dashboard-main{
  min-width:0;
  padding:20px;
  background:#fdfdff;
}

.serp-dash-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:19px;
}

.serp-dash-topbar > div:first-child strong{
  font-size:.98rem;
}

.serp-school-profile{
  display:flex;
  align-items:center;
  gap:12px;
}

.serp-school-profile > div{
  text-align:right;
}

.serp-school-profile strong{
  display:block;
  font-size:.72rem;
}

.serp-school-profile span{
  display:block;
  color:#8a8b98;
  font-size:.62rem;
  margin-top:2px;
}

.serp-school-profile svg{
  width:17px;
  height:17px;
  color:#6c3dea;
}

.serp-profile-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid!important;
  place-items:center;
  background:#efe8ff;
  color:#6030dc!important;
  font-size:.62rem!important;
  font-weight:700;
  margin:0!important;
}

.serp-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.serp-stat-grid article{
  min-width:0;
  min-height:82px;
  padding:13px;
  border:1px solid #eeeeF5;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 14px rgba(40,30,90,.035);
}

.serp-stat-grid span{
  display:block;
  color:#858795;
  font-size:.58rem;
}

.serp-stat-grid strong{
  display:block;
  margin-top:7px;
  font-size:.9rem;
  white-space:nowrap;
}

.serp-stat-grid small{
  display:block;
  margin-top:5px;
  font-size:.58rem;
  font-weight:700;
}

.serp-stat-grid .up{
  color:var(--serp-green);
}

.serp-stat-grid .down{
  color:var(--serp-red);
}

.serp-analytics-grid,
.serp-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin-top:13px;
}

.serp-dash-card{
  min-width:0;
  padding:15px;
  border:1px solid #eeeeF5;
  border-radius:11px;
  background:#fff;
  box-shadow:0 4px 14px rgba(40,30,90,.035);
}

.serp-dash-card h4{
  margin:0 0 13px;
  font-size:.69rem;
}

.serp-attendance-content{
  display:flex;
  align-items:center;
  gap:20px;
}

.serp-donut{
  width:98px;
  height:98px;
  flex:0 0 98px;
  padding:11px;
  border-radius:50%;
  background:
    conic-gradient(
      #7040ed 0 88%,
      #d7ccff 88% 96%,
      #ebe7f4 96% 100%
    );
}

.serp-donut > div{
  width:100%;
  height:100%;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
}

.serp-donut strong{
  color:#6533e7;
  font-size:1rem;
}

.serp-donut-key{
  display:grid;
  gap:10px;
  font-size:.59rem;
  color:#656777;
  width:100%;
}

.serp-donut-key span{
  display:grid;
  grid-template-columns:8px 1fr auto;
  align-items:center;
  gap:6px;
}

.serp-donut-key i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7040ed;
}

.serp-donut-key span:nth-child(2) i{
  background:#b4a2ee;
}

.serp-donut-key span:nth-child(3) i{
  background:#ded9e8;
}

.serp-donut-key b{
  font-weight:600;
}

.serp-line-chart{
  display:block;
  width:100%;
  height:113px;
}

.serp-months{
  display:flex;
  justify-content:space-between;
  color:#9a9ca9;
  font-size:.54rem;
}

.serp-table{
  display:grid;
}

.serp-table > div{
  min-height:30px;
  display:grid;
  grid-template-columns:1.25fr .8fr .9fr .45fr;
  align-items:center;
  gap:5px;
  border-bottom:1px solid #f1f0f6;
  font-size:.55rem;
}

.serp-table strong{
  font-size:.53rem;
  text-align:right;
}

.serp-table em{
  justify-self:end;
  font-style:normal;
  color:#23a968;
  background:#e7f8ef;
  border-radius:4px;
  padding:3px 5px;
  font-size:.48rem;
}

.serp-dash-card > a{
  display:inline-block;
  margin-top:11px;
  color:#6d3bea;
  text-decoration:none;
  font-size:.55rem;
  font-weight:600;
}

.serp-subjects{
  display:grid;
  gap:11px;
}

.serp-subjects > div{
  display:grid;
  grid-template-columns:75px 1fr 28px;
  gap:7px;
  align-items:center;
  font-size:.55rem;
}

.serp-subjects i{
  height:5px;
  background:#eeeaf6;
  border-radius:999px;
  overflow:hidden;
}

.serp-subjects b{
  height:100%;
  display:block;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #6532e7,
    #8d61ff
  );
}

.serp-subjects strong{
  font-size:.53rem;
  text-align:right;
}


/* ======================================================================
   HERO DECORATION
   ====================================================================== */

.serp-hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  pointer-events:none;
}

.serp-orb-one{
  width:420px;
  height:420px;
  right:-180px;
  top:90px;
  background:rgba(122,74,248,.08);
}

.serp-orb-two{
  width:320px;
  height:320px;
  left:-180px;
  bottom:-140px;
  background:rgba(132,85,251,.13);
}

.serp-hero-wave{
  position:absolute;
  left:-5%;
  bottom:-75px;
  width:110%;
  height:160px;
  border-radius:50%;
  background:rgba(112,62,238,.09);
  transform:rotate(2deg);
}


/* ======================================================================
   VALUE STRIP
   ====================================================================== */

.serp-value-strip{
  padding:28px 0 36px;
  background:#fff;
  border-bottom:1px solid #f2eff8;
}

.serp-value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--serp-border);
  border-radius:17px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(54,38,100,.04);
}

.serp-value-grid article{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:21px 22px;
  background:#fff;
  border-right:1px solid var(--serp-border);
}

.serp-value-grid article:last-child{
  border-right:0;
}

.serp-value-grid article > span{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#6f3eec;
  background:#f5f1ff;
}

.serp-value-grid svg{
  width:23px;
  height:23px;
}

.serp-value-grid strong{
  display:block;
  color:#6432e7;
  font-size:.9rem;
}

.serp-value-grid p{
  margin:7px 0 0;
  color:#656879;
  font-size:.76rem;
  line-height:1.55;
}


/* ======================================================================
   SECTION HEADINGS
   ====================================================================== */

.serp-section-heading{
  text-align:center;
  max-width:850px;
  margin:0 auto 30px;
}

.serp-section-label{
  display:inline-flex;
  padding:5px 12px;
  border-radius:999px;
  background:#f0eaff;
  color:#7040ed;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
}

.serp-section-heading h2{
  margin:8px 0 8px;
  color:#17192f;
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:650;
}

.serp-section-heading p{
  margin:0;
  color:#676a79;
  font-size:.94rem;
  line-height:1.65;
}

.serp-section-heading.compact{
  margin-bottom:22px;
}


/* ======================================================================
   FEATURES
   ====================================================================== */

.serp-features{
  padding:38px 0 30px;
  background:#fff;
}

.serp-feature-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.serp-feature-card{
  min-width:0;
  min-height:158px;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:18px;
  border:1px solid var(--serp-border);
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 16px rgba(55,38,100,.025);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.serp-feature-card:hover{
  transform:translateY(-3px);
  border-color:#d9cdf8;
  box-shadow:0 14px 32px rgba(69,41,138,.08);
}

.serp-feature-card > span{
  width:37px;
  height:37px;
  flex:0 0 37px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#713fef;
  background:#f2edff;
}

.serp-feature-card svg{
  width:21px;
  height:21px;
}

.serp-feature-card h3{
  margin:0;
  font-size:.91rem;
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:650;
}

.serp-feature-card p{
  margin:8px 0 0;
  color:#646879;
  font-size:.74rem;
  line-height:1.55;
}


/* ======================================================================
   MODERN CARDS
   ====================================================================== */

.serp-modern{
  padding:22px 0 38px;
}

.serp-modern-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.serp-modern-card{
  overflow:hidden;
  border-radius:17px;
  background:linear-gradient(
    180deg,
    #f5f0ff,
    #faf8ff
  );
  border:1px solid #f0ecf8;
  padding-bottom:21px;
}

.serp-illustration{
  height:178px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.serp-illustration svg{
  width:100%;
  height:100%;
}

.serp-modern-card h3{
  margin:0 21px;
  font-size:1rem;
  font-weight:650;
  letter-spacing:-.015em;
}

.serp-modern-card p{
  margin:9px 21px 0;
  color:#646779;
  font-size:.79rem;
  line-height:1.58;
}


/* ======================================================================
   SYSTEM
   ====================================================================== */

.serp-system{
  padding:18px 0 28px;
}

.serp-system-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border:1px solid var(--serp-border);
  border-radius:14px;
  overflow:hidden;
}

.serp-system-grid article{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:17px 14px;
  border-right:1px solid var(--serp-border);
}

.serp-system-grid article:last-child{
  border-right:0;
}

.serp-system-grid svg{
  width:23px;
  height:23px;
  flex:0 0 23px;
  color:#6f3ce9;
}

.serp-system-grid strong{
  display:block;
  font-size:.72rem;
}

.serp-system-grid span{
  display:block;
  margin-top:5px;
  color:#707382;
  font-size:.6rem;
  line-height:1.4;
}


/* ======================================================================
   CTA
   ====================================================================== */

.serp-final{
  padding:0 0 34px;
}

.serp-final-inner{
  min-height:155px;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:30px 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  color:#fff;
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(255,255,255,.13),
      transparent 20%
    ),
    linear-gradient(
      120deg,
      #7032e9,
      #5e23d9,
      #7436ed
    );
}

.serp-final-inner:after{
  content:"";
  position:absolute;
  right:50px;
  top:35px;
  width:82px;
  height:82px;
  opacity:.42;
  background-image:
    radial-gradient(
      circle,
      #fff 2px,
      transparent 2px
    );
  background-size:12px 12px;
}

.serp-final h2{
  margin:0;
  font-size:2rem;
  letter-spacing:-.035em;
  font-weight:650;
}

.serp-final p{
  margin:8px 0 0;
  color:rgba(255,255,255,.87);
  font-size:.96rem;
}

.serp-final-actions{
  position:relative;
  z-index:2;
  display:flex;
  gap:14px;
  padding-right:100px;
}

.serp-final-actions a{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 28px;
  border-radius:8px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
}

.serp-final-actions svg{
  width:17px;
  height:17px;
}

.serp-final-light{
  background:#fff;
  color:#5d2cda;
}

.serp-final-outline{
  border:1px solid rgba(255,255,255,.8);
  color:#fff;
}


/* ======================================================================
   SHARED NEXUS FOOTER ON THIS PAGE
   ====================================================================== */

.school-erp-public-page .site-footer{
  margin-top:0;
}


/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media(max-width:1250px){

  .serp-hero-grid{
    grid-template-columns:.8fr 1.2fr;
    gap:38px;
  }

  .serp-feature-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .serp-system-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .serp-system-grid article{
    border-bottom:1px solid var(--serp-border);
  }

}


@media(max-width:1050px){

  .serp-nav{
    display:none;
    position:absolute;
    top:78px;
    right:24px;
    width:260px;
    padding:15px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:#fff;
    border:1px solid var(--serp-border);
    border-radius:14px;
    box-shadow:0 18px 50px rgba(45,24,90,.15);
  }

  .serp-nav.open{
    display:flex;
  }

  .serp-nav a{
    padding:12px;
    border-radius:8px;
  }

  .serp-nav a:hover{
    background:#f6f2ff;
  }

  .serp-menu-btn{
    display:grid;
  }

  .serp-hero-grid{
    grid-template-columns:1fr;
    padding-top:54px;
  }

  .serp-hero-copy{
    max-width:760px;
    padding-left:0;
  }

  .serp-dashboard-shell{
    max-width:900px;
    width:100%;
  }

  .serp-value-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .serp-value-grid article{
    border-bottom:1px solid var(--serp-border);
  }

  .serp-feature-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .serp-modern-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


@media(max-width:760px){

  .serp-container{
    width:min(calc(100% - 28px),var(--serp-container));
  }

  .serp-header-inner{
    min-height:76px;
    gap:12px;
  }

  .serp-brand-badge{
    width:41px;
    height:41px;
  }

  .serp-brand strong{
    font-size:1.45rem;
  }

  .serp-login-btn{
    display:none;
  }

  .serp-demo-btn{
    min-height:40px;
    padding:0 15px;
    font-size:.82rem;
  }

  .serp-hero-grid{
    min-height:0;
    padding-top:38px;
    padding-bottom:65px;
  }

  .serp-hero h1{
    font-size:clamp(2.85rem,13vw,4.2rem);
  }

  .serp-hero-text{
    font-size:1.02rem;
    line-height:1.68;
  }

  .serp-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .serp-btn{
    width:100%;
  }

  .serp-dashboard{
    grid-template-columns:1fr;
  }

  .serp-dashboard-side{
    display:none;
  }

  .serp-dashboard-main{
    padding:14px;
  }

  .serp-stat-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .serp-analytics-grid,
  .serp-bottom-grid{
    grid-template-columns:1fr;
  }

  .serp-value-grid{
    grid-template-columns:1fr;
  }

  .serp-value-grid article{
    border-right:0;
  }

  .serp-feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .serp-modern-grid{
    grid-template-columns:1fr;
  }

  .serp-system-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .serp-final-inner{
    padding:30px 24px;
    flex-direction:column;
    align-items:flex-start;
  }

  .serp-final-actions{
    width:100%;
    padding-right:0;
  }

  .serp-final-actions a{
    flex:1;
  }

  .serp-final-inner:after{
    right:20px;
    top:20px;
  }

}


@media(max-width:520px){

  .serp-demo-btn{
    display:none;
  }

  .serp-hero-points > div{
    font-size:.94rem;
  }

  .serp-dashboard-shell{
    margin-inline:-4px;
    width:calc(100% + 8px);
  }

  .serp-school-profile > div{
    display:none;
  }

  .serp-stat-grid{
    gap:8px;
  }

  .serp-stat-grid article{
    padding:11px;
  }

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

  .serp-feature-card{
    min-height:0;
  }

  .serp-system-grid{
    grid-template-columns:1fr;
  }

  .serp-final-actions{
    flex-direction:column;
  }

  .serp-final-actions a{
    width:100%;
  }

}


/* ======================================================================
   NEXUS SCHOOL ERP SMART FIXED HEADER V1
   Same navigation behaviour as main Nexus website
   ====================================================================== */

:root{
  --serp-header-height:88px;
}


/* ----------------------------------------------------------------------
   FIX HEADER TO VIEWPORT
   ---------------------------------------------------------------------- */

.serp-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;

  width:100% !important;

  z-index:9999 !important;

  background:rgba(255,255,255,.96) !important;

  border-bottom:
    1px solid rgba(31,20,70,.08) !important;

  box-shadow:
    0 4px 20px rgba(31,20,70,.045);

  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);

  transform:translateY(0);

  transition:
    transform .28s cubic-bezier(.4,0,.2,1),
    box-shadow .22s ease,
    background-color .22s ease !important;

  will-change:transform;
}


/* Header disappears while scrolling DOWN */

.serp-header.serp-header-hidden{
  transform:translateY(-105%) !important;
}


/* Header gets slightly stronger after leaving page top */

.serp-header.serp-header-scrolled{
  background:rgba(255,255,255,.985) !important;

  box-shadow:
    0 8px 30px rgba(35,20,90,.08);
}


/* ----------------------------------------------------------------------
   OFFSET PAGE CONTENT BECAUSE HEADER IS NOW FIXED
   ---------------------------------------------------------------------- */

.school-erp-public-page main{
  padding-top:var(--serp-header-height);
}


/* Prevent anchor navigation from hiding headings below fixed header */

.school-erp-public-page section[id],
.school-erp-public-page [id]{
  scroll-margin-top:
    calc(var(--serp-header-height) + 22px);
}


/* ----------------------------------------------------------------------
   MOBILE HEADER HEIGHT
   ---------------------------------------------------------------------- */

@media(max-width:760px){

  :root{
    --serp-header-height:76px;
  }

}


/* ----------------------------------------------------------------------
   MOBILE DROPDOWN MUST REMAIN ATTACHED TO FIXED HEADER
   ---------------------------------------------------------------------- */

@media(max-width:1050px){

  .serp-nav{
    position:fixed !important;

    top:calc(
      var(--serp-header-height) + 8px
    ) !important;

    right:20px !important;

    z-index:10001 !important;
  }

  /*
   If mobile navigation is open, keep the header visible.
   */

  .serp-header:has(.serp-nav.open){
    transform:translateY(0) !important;
  }

}