/* ============================================================
   School Mobile App — page CSS (creative, app-themed).
   Spacing centralized via style.css (.mb-100). Common heading/banner from style.css.
   ============================================================ */
:root{ --nv:#022b63; --cream:#efede7; --amber:#f9a825; --ink:#111827; --muted:#5b6472; --line:#e7e4dc; --soft:#f7f6f2; --radius:16px; }

.sma-two{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.sma-two.rev{ direction:rtl; } .sma-two.rev > *{ direction:ltr; }
.sma-two p{ color:var(--muted); line-height:1.8; font-size:15.5px; margin-bottom:16px; }

/* creative phone mockup */
.sma-phone{ display:flex; justify-content:center; align-items:center; }
.sma-phoneframe{
  width:280px; height:560px; background:linear-gradient(160deg,#022b63,#043a82);
  border-radius:40px; padding:14px; box-shadow:0 40px 80px rgba(2,43,99,.28); position:relative;
}
.sma-phoneframe::before{ content:''; position:absolute; top:22px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#022b63; border-radius:0 0 16px 16px; z-index:3; }
.sma-screen{ width:100%; height:100%; background:linear-gradient(180deg,#eef1f6,#fff); border-radius:28px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.sma-scrhead{ background:var(--nv); padding:38px 20px 20px; color:#fff; }
.sma-scrhead .t{ font-family:'DMSans-SemiBold'; font-size:15px; }
.sma-scrhead .s{ font-size:11px; opacity:.75; margin-top:3px; }
.sma-scrbody{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.sma-tile{ background:#fff; border:1px solid #eef0f4; border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink); box-shadow:0 6px 16px rgba(2,43,99,.05); }
.sma-tile i{ width:30px; height:30px; border-radius:8px; background:var(--cream); color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:16px; }

/* feature chips (16 items) */
.sma-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sma-chip{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); font-family:'DMSans-Medium'; transition:.3s; }
.sma-chip:hover{ border-color:var(--nv); box-shadow:0 12px 28px rgba(2,43,99,.08); transform:translateY(-3px); }
.sma-chip i{ width:34px; height:34px; border-radius:9px; background:var(--cream); color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; transition:.3s; }
.sma-chip:hover i{ background:var(--nv); color:#fff; }

/* top qualities — 4 cards */
.sma-qual{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.sma-qcard{ background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px; transition:.35s; }
.sma-qcard:hover{ background:#fff; transform:translateY(-6px); box-shadow:0 20px 44px rgba(2,43,99,.08); }
.sma-qcard .ic{ width:56px; height:56px; border-radius:15px; background:#fff; border:1px solid var(--line); color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px; transition:.35s; }
.sma-qcard:hover .ic{ background:var(--nv); color:#fff; }
.sma-qcard h4{ font-family:'DMSans-SemiBold'; font-size:17px; color:var(--ink); margin-bottom:10px; }
.sma-qcard p{ color:var(--muted); font-size:14px; line-height:1.65; margin:0; }

/* download-style CTA band (creative) */
.sma-band{ background:linear-gradient(120deg,#022b63,#043a82); border-radius:24px; padding:56px; display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; }
.sma-band h2{ font-family:"PlusJakartaSans-Medium"; font-size:30px; color:#fff; line-height:1.25; margin-bottom:14px; }
.sma-band p{ color:#ffffffcf; font-size:15px; line-height:1.7; margin:0 0 22px; }
.sma-stores{ display:flex; gap:14px; flex-wrap:wrap; }
.sma-store{ background:#fff; color:var(--nv); border-radius:12px; padding:12px 20px; display:inline-flex; align-items:center; gap:10px; font-family:'DMSans-Medium'; font-size:14px; transition:.3s; }
.sma-store:hover{ background:var(--amber); transform:translateY(-3px); }
.sma-store i{ font-size:22px; }
.sma-bandvisual{ display:flex; justify-content:center; }
.sma-bandvisual .ic{ width:120px; height:120px; border-radius:30px; background:#ffffff18; color:#fff; display:flex; align-items:center; justify-content:center; font-size:60px; }

@media(max-width:991px){
  .sma-two,.sma-two.rev{ grid-template-columns:1fr; gap:30px; } .sma-two.rev{ direction:ltr; }
  .sma-feats{ grid-template-columns:1fr 1fr; }
  .sma-qual{ grid-template-columns:1fr 1fr; gap:18px; }
  .sma-band{ grid-template-columns:1fr; padding:36px; text-align:center; }
  .sma-stores{ justify-content:center; } .sma-bandvisual{ display:none; }
}
@media(max-width:575px){ .sma-feats,.sma-qual{ grid-template-columns:1fr; } }