/*
 * Arman Pouyan homepage refinement
 * Scope: .home-page only
 *
 * The original green identity at the beginning and end is retained.
 * Middle sections use a clean white / indigo / blue system.
 */

.home-page{
  overflow:hidden;
  background:#fff;
  color:#475569;
}

.home-page *,
.home-page *::before,
.home-page *::after{
  box-sizing:border-box;
}


/* =========================================================
   GREEN IDENTITY — KEEP
   ========================================================= */

.home-page .vision-hero{
  background:
    linear-gradient(128deg,#052f29 0%,#07483b 56%,#0c6652 100%)!important;
  color:#fff!important;
}

.home-page .vision-hero::before{
  background:
    linear-gradient(90deg,transparent 48%,#02241f88),
    radial-gradient(circle at 16% 14%,#e8bd4d29,transparent 27%)!important;
}

.home-page .vision-hero__badge{
  color:#073f35!important;
}

.home-page .vision-hero__grade{
  background:#062e28e8!important;
}

.home-page .vision-kicker,
.home-page .vision-hero__copy>p,
.home-page .vision-hero__signals{
  color:#d8e7e2;
}


/* =========================================================
   PROMISE STRIP
   ========================================================= */

.home-page .promise-bar{
  position:relative;
  z-index:5;
}

.home-page .promise-bar__grid{
  border:1px solid #e1e7f0;
  box-shadow:0 20px 55px rgba(15,23,42,.10);
}

.home-page .promise-bar article{
  min-width:0;
}

.home-page .promise-bar article>span{
  color:#4f46e5;
}

.home-page .promise-bar b{
  color:#172033;
}

.home-page .promise-bar small{
  color:#667085;
}


/* =========================================================
   QUICK ACCESS
   ========================================================= */

.home-page .school-access{
  padding:88px 0 56px;
  background:#fff;
}

.home-page .school-access__head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:30px;
}

.home-page .school-access__head>div>span{
  display:block;
  margin-bottom:6px;
  color:#4f46e5;
  font-size:11px;
  font-weight:900;
}

.home-page .school-access__head h2{
  margin:0;
  color:#172033;
  font-size:clamp(25px,3vw,38px);
  line-height:1.5;
}

.home-page .school-access__head>a{
  flex:none;
  color:#4338ca;
  font-size:11px;
  font-weight:900;
}

.home-page .school-access__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.home-page .school-access__grid>a{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:122px;
  padding:20px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 7px 24px rgba(15,23,42,.04);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.home-page .school-access__grid>a:hover{
  transform:translateY(-3px);
  border-color:#a5b4fc;
  box-shadow:0 15px 35px rgba(49,46,129,.09);
}

.home-page .school-access__grid>a>span{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#eef2ff;
  color:#4f46e5;
}

.home-page .school-access__grid b{
  display:block;
  margin-bottom:5px;
  color:#172033;
  font-size:13px;
}

.home-page .school-access__grid small{
  display:block;
  color:#667085;
  font-size:10px;
  line-height:1.9;
}


/* =========================================================
   SHARED SECTION HEADING
   ========================================================= */

.home-page .premium-section{
  padding:88px 0;
}

.home-page .premium-heading{
  align-items:flex-end;
  margin-bottom:34px;
}

.home-page .premium-heading>div{
  min-width:0;
}

.home-page .premium-heading span{
  display:block;
  margin-bottom:5px;
  color:#4f46e5;
  font-weight:900;
}

.home-page .premium-heading h2{
  color:#172033;
  font-size:clamp(27px,3vw,40px);
  letter-spacing:-.025em;
}

.home-page .premium-heading>p{
  color:#667085;
  line-height:2;
}


/* =========================================================
   SMART SCHOOL
   ========================================================= */

.home-page .smart-school{
  background:
    radial-gradient(circle at 90% 5%,rgba(99,102,241,.08),transparent 28%),
    linear-gradient(180deg,#f8faff 0%,#fff 100%);
}

.home-page .intelligence-grid{
  gap:16px;
}

.home-page .intelligence-card{
  border:1px solid #e0e7ff;
  border-radius:20px;
  box-shadow:0 7px 25px rgba(15,23,42,.035);
}

.home-page .intelligence-card:hover{
  border-color:#a5b4fc;
  box-shadow:0 18px 45px rgba(49,46,129,.09);
}

.home-page .intelligence-card--feature{
  background:
    radial-gradient(circle at 10% 8%,rgba(56,189,248,.16),transparent 30%),
    linear-gradient(155deg,#312e81,#4338ca)!important;
}

.home-page .intelligence-card--wide{
  background:linear-gradient(135deg,#fafaff,#eef2ff);
}

.home-page .intelligence-card:not(.intelligence-card--feature) h3{
  color:#172033;
}

.home-page .intelligence-card:not(.intelligence-card--feature) p{
  color:#667085;
}

.home-page .card-icon{
  background:#eef2ff!important;
  color:#4f46e5!important;
}

.home-page .intelligence-card--feature .card-icon{
  background:#ffffff18!important;
  color:#fff!important;
}

.home-page .intelligence-card a{
  color:#4338ca;
}


/* =========================================================
   THREE-YEAR JOURNEY
   ========================================================= */

.home-page .grade-journey{
  background:
    radial-gradient(circle at 10% 15%,rgba(56,189,248,.14),transparent 30%),
    linear-gradient(135deg,#1e1b4b,#312e81,#4338ca)!important;
}

.home-page .grade-journey .premium-heading h2{
  color:#fff;
}

.home-page .grade-journey .premium-heading span{
  color:#bfdbfe;
}

.home-page .grade-journey .premium-heading>p{
  color:#dbeafe;
}

.home-page .journey-card{
  display:block;
  border-color:#ffffff20;
  background:#ffffff0d;
  box-shadow:none;
}

.home-page .journey-card:hover{
  border-color:#93c5fd;
  background:#ffffff14;
}

.home-page .journey-card small,
.home-page .journey-card>b,
.home-page .journey-card__link{
  color:#bfdbfe;
}

.home-page .journey-card p{
  color:#d8e3ff;
}


/* =========================================================
   PORTALS
   ========================================================= */

.home-page .portals-showcase{
  background:#f7f8fe;
}

.home-page .role-grid{
  gap:14px;
  align-items:stretch;
}

.home-page .role-card{
  min-width:0;
  height:100%;
  border:1px solid #e0e7ff;
  border-radius:20px;
  background:#fff;
  box-shadow:0 7px 25px rgba(15,23,42,.035);
}

.home-page .role-card:hover{
  border-color:#a5b4fc;
  box-shadow:0 18px 42px rgba(49,46,129,.09);
}

.home-page .role-card>span{
  background:#eef2ff;
  color:#4f46e5;
}

.home-page .role-card>small{
  color:#6366f1;
}

.home-page .role-card h3{
  color:#172033;
}

.home-page .role-card p{
  color:#667085;
}

.home-page .role-card b{
  color:#4338ca;
}

.home-page .role-card--admin{
  background:
    radial-gradient(circle at 10% 5%,rgba(56,189,248,.16),transparent 32%),
    linear-gradient(150deg,#312e81,#4338ca);
  border-color:#4338ca;
}

.home-page .role-card--admin>span{
  background:#ffffff18;
  color:#fff;
}

.home-page .role-card--admin>small,
.home-page .role-card--admin b{
  color:#bfdbfe;
}

.home-page .role-card--admin h3{
  color:#fff;
}

.home-page .role-card--admin p{
  color:#e0e7ff;
}


/* =========================================================
   NEWS + GALLERY
   ========================================================= */

.home-page .school-life{
  background:#fff;
}

.home-page .school-life__grid{
  align-items:stretch;
}

.home-page .news-list{
  padding:3px 22px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:#fff;
}

.home-page .news-list article{
  min-width:0;
  border-color:#edf0f6;
}

.home-page .news-list h3{
  color:#172033;
}

.home-page .news-list p{
  color:#667085;
}

.home-page .news-list time{
  color:#4f46e5;
}

.home-page .text-link{
  color:#4338ca;
}

.home-page .premium-gallery{
  min-width:0;
}

.home-page .premium-gallery__item{
  background:#e2e8f0;
  box-shadow:0 8px 26px rgba(15,23,42,.08);
}

.home-page .premium-gallery__item::after{
  background:linear-gradient(
    transparent 45%,
    rgba(15,23,42,.78)
  )!important;
}

.home-page .premium-gallery img{
  display:block;
  width:100%;
  height:100%;
}


/* =========================================================
   FAQ
   ========================================================= */

.home-page .faq-section{
  padding:88px 0;
  background:
    radial-gradient(circle at 85% 10%,rgba(99,102,241,.07),transparent 28%),
    #f8faff;
}

.home-page .home-section-heading{
  max-width:700px;
  margin:0 auto 36px;
  text-align:center;
}

.home-page .home-section-heading>span{
  display:block;
  margin-bottom:7px;
  color:#4f46e5;
  font-size:11px;
  font-weight:900;
}

.home-page .home-section-heading h2{
  margin:0;
  color:#172033;
  font-size:clamp(26px,3vw,38px);
  line-height:1.5;
}

.home-page .home-section-heading p{
  margin:10px 0 0;
  color:#667085;
  font-size:11px;
  line-height:2;
}

.home-page .faq-list{
  width:min(900px,100%);
  margin:auto;
  display:grid;
  gap:10px;
}

.home-page .faq-list>[data-faq-item]{
  overflow:hidden;
  border:1px solid #e0e7ff;
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 18px rgba(15,23,42,.035);
}

.home-page .faq-list [data-faq-toggle]{
  position:relative;
  width:100%;
  min-height:62px;
  padding:16px 20px 16px 52px;
  border:0;
  background:transparent;
  color:#172033;
  text-align:right;
  font-size:13px;
  font-weight:800;
}

.home-page .faq-list [data-faq-toggle]::after{
  content:"+";
  position:absolute;
  inset-inline-end:auto;
  left:18px;
  top:50%;
  width:27px;
  height:27px;
  margin-top:-13px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#eef2ff;
  color:#4338ca;
  font-size:19px;
  line-height:1;
}

.home-page .faq-list [data-faq-answer]{
  color:#667085;
  font-size:11px;
  line-height:2.1;
}

.home-page .faq-list [data-faq-answer]>div{
  padding:0 20px 20px;
  border-top:1px solid #f0f2f7;
  padding-top:16px;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.home-page [data-back-to-top]{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:35;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #c7d2fe;
  border-radius:14px;
  background:#fff;
  color:#4338ca;
  box-shadow:0 10px 28px rgba(49,46,129,.14);
}

.home-page [data-back-to-top] i{
  display:none;
}

.home-page [data-back-to-top]::before{
  content:"↑";
  font-size:20px;
  font-weight:900;
}


/* =========================================================
   FINAL GREEN CTA — KEEP
   ========================================================= */

.home-page .final-invitation{
  background:#fff;
}

.home-page .final-invitation__inner{
  background:linear-gradient(125deg,#073f35,#0d6752)!important;
}

.home-page .final-invitation span{
  color:#e9c968;
}

.home-page .final-invitation p{
  color:#c5d6d0;
}


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

@media (max-width:1100px){

  .home-page .school-access__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .home-page .role-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .home-page .premium-heading{
    gap:28px;
  }
}


@media (max-width:800px){

  .home-page .school-access{
    padding:68px 0 45px;
  }

  .home-page .premium-section,
  .home-page .faq-section{
    padding:68px 0;
  }

  .home-page .premium-heading{
    display:block;
  }

  .home-page .premium-heading>p{
    margin-top:13px;
    max-width:none;
  }

  .home-page .school-life__grid{
    grid-template-columns:1fr;
  }

  .home-page .premium-gallery{
    margin-top:8px;
  }
}


@media (max-width:620px){

  .home-page .school-access__head{
    display:block;
  }

  .home-page .school-access__head>a{
    display:inline-block;
    margin-top:12px;
  }

  .home-page .school-access__grid,
  .home-page .role-grid{
    grid-template-columns:1fr;
  }

  .home-page .school-access__grid>a{
    min-height:0;
  }

  .home-page .premium-section,
  .home-page .faq-section{
    padding:54px 0;
  }

  .home-page .premium-heading{
    margin-bottom:25px;
  }

  .home-page .premium-heading h2,
  .home-page .school-access__head h2{
    font-size:27px;
  }

  .home-page .intelligence-card{
    min-height:0;
  }

  .home-page .journey-card{
    min-height:285px;
  }

  .home-page .news-list{
    padding:2px 14px;
  }

  .home-page .news-list article{
    grid-template-columns:62px 1fr;
    gap:11px;
  }

  .home-page .premium-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(2,125px);
  }

  .home-page .premium-gallery__item.item-0{
    grid-row:span 2;
  }

  .home-page .faq-list [data-faq-toggle]{
    font-size:12px;
    padding-right:15px;
  }

  .home-page .final-invitation__inner{
    padding:30px 22px;
  }

  .home-page [data-back-to-top]{
    left:14px;
    bottom:14px;
  }
}

/* =========================================================
   MODERN EDUCATIONAL ICON & GLASSMORPHISM ENHANCEMENTS
   ========================================================= */

.home-page .signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #e6f3ef;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-page .signal-pill:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Promise Steps with Rich Pods */
.home-page .promise-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-page .promise-step:hover {
  background: #f8faff;
  transform: translateY(-2px);
}

.home-page .promise-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.07);
}

.home-page .promise-step:hover .promise-icon {
  transform: scale(1.12) rotate(-4deg);
}

.home-page .promise-step--emerald .promise-icon {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.32);
}

.home-page .promise-step--indigo .promise-icon {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.32);
}

.home-page .promise-step--amber .promise-icon {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.home-page .promise-step--rose .promise-icon {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
  color: #be123c;
  border: 1px solid rgba(244, 63, 94, 0.32);
}

/* Educational Badges & Access Cards */
.home-page .edu-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-page .access-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.home-page .access-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
}

.home-page .access-card:hover .edu-badge {
  transform: scale(1.12) rotate(-4deg);
}

.home-page .edu-badge--emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.28);
  box-shadow: 0 8px 18px -4px rgba(16, 185, 129, 0.24);
}

.home-page .access-card--emerald:hover {
  border-color: #6ee7b7;
  box-shadow: 0 16px 32px -8px rgba(5, 150, 105, 0.14);
}

.home-page .edu-badge--indigo {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow: 0 8px 18px -4px rgba(99, 102, 241, 0.24);
}

.home-page .access-card--indigo:hover {
  border-color: #a5b4fc;
  box-shadow: 0 16px 32px -8px rgba(79, 70, 229, 0.14);
}

.home-page .edu-badge--rose {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  color: #e11d48;
  border: 1px solid rgba(244, 63, 94, 0.28);
  box-shadow: 0 8px 18px -4px rgba(244, 63, 94, 0.24);
}

.home-page .access-card--rose:hover {
  border-color: #fda4af;
  box-shadow: 0 16px 32px -8px rgba(225, 29, 72, 0.14);
}

.home-page .edu-badge--sky {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.28);
  box-shadow: 0 8px 18px -4px rgba(14, 165, 233, 0.24);
}

.home-page .access-card--sky:hover {
  border-color: #7dd3fc;
  box-shadow: 0 16px 32px -8px rgba(2, 132, 199, 0.14);
}

.home-page .edu-badge--purple {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 8px 18px -4px rgba(168, 85, 247, 0.24);
}

.home-page .access-card--purple:hover {
  border-color: #d8b4fe;
  box-shadow: 0 16px 32px -8px rgba(147, 51, 234, 0.14);
}

.home-page .edu-badge--amber,
.home-page .edu-badge--gold {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 8px 18px -4px rgba(245, 158, 11, 0.24);
}

.home-page .access-card--amber:hover {
  border-color: #fcd34d;
  box-shadow: 0 16px 32px -8px rgba(217, 119, 6, 0.14);
}

/* Portals Role Cards */
.home-page .role-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 18px -3px rgba(0, 0, 0, 0.08);
}

.home-page .role-card:hover .role-icon-box {
  transform: scale(1.14) rotate(-5deg);
}

.home-page .role-card--teacher .role-icon-box {
  background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.32);
}

.home-page .role-card--teacher:hover {
  border-color: #6ee7b7;
  box-shadow: 0 18px 45px rgba(5, 150, 105, 0.12);
}

.home-page .role-card--teacher b {
  color: #059669;
}

.home-page .role-card--student .role-icon-box {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.32);
}

.home-page .role-card--student:hover {
  border-color: #a5b4fc;
  box-shadow: 0 18px 45px rgba(79, 70, 229, 0.12);
}

.home-page .role-card--student b {
  color: #4f46e5;
}

.home-page .role-card--parent .role-icon-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.home-page .role-card--parent:hover {
  border-color: #fcd34d;
  box-shadow: 0 18px 45px rgba(217, 119, 6, 0.12);
}

.home-page .role-card--parent b {
  color: #d97706;
}

.home-page .role-card--admin .role-icon-box {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

/* Glowing card icon in feature card */
.home-page .card-icon--glow {
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.home-page .vision-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}