/* ==========================================================================
   Schola Egypt — company website styles
   Brand tokens come from the Schola demo (navy / gold / blue + module accents).
   All layout uses logical properties so /ar (RTL) mirrors automatically.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../fonts/Poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-weight: 600 800; font-display: swap; src: url("../fonts/Cairo-var-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-weight: 600 800; font-display: swap; src: url("../fonts/Cairo-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSansArabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSansArabic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSansArabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSansArabic-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSansArabic-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --navy: #1B2A4E;
  --navy-2: #0A1628;
  --navy-3: #243a6b;
  --blue: #2E5EAA;
  --gold: #D4A84B;
  --gold-2: #b8902f;
  --gray: #F4F6F9;
  --gray-2: #E6EAF1;
  --line: #D6DCE6;
  --ink: #0A1628;
  --ink-2: #33415c;
  --muted: #5b6579;
  --white: #FFFFFF;
  --teal: #14B8A6;
  --green: #10B981;
  --briteblue: #3B82F6;
  --purple: #8B5CF6;
  --coral: #EF4444;
  --orange: #F59E0B;
  --danger: #b42318;
  --danger-bg: #fdecec;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 20px 50px -24px rgba(10, 22, 40, .45);
  --shadow-sm: 0 6px 18px -8px rgba(10, 22, 40, .3);
  --ease: cubic-bezier(.16, .84, .44, 1);
  --font-display: "Poppins", "Cairo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --z-content: 1; --z-role-nav: 60; --z-fab: 90; --z-toast: 95; --z-header: 100; --z-skip: 200;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --dots: radial-gradient(rgba(27, 42, 78, .09) 1px, transparent 1.2px);
}
[dir="rtl"] {
  --font-display: "Cairo", "Poppins", system-ui, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
[dir="rtl"] body { font-size: 17px; line-height: 1.8; }
img, svg { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }
.h4 { font-size: 1.05rem; font-family: var(--font-display); font-weight: 700; margin: 0 0 .5em; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.25em; }
.latin { font-family: "Poppins", system-ui, sans-serif; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: var(--z-skip); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container.narrow { max-width: 820px; }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--gold-2); margin: 0 0 .7em; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
.section-text { color: var(--ink-2); max-width: 68ch; margin-bottom: 1.8em; }
.note { color: var(--muted); font-size: .95rem; margin-top: 1.5em; max-width: 80ch; }
.note-strong { color: var(--ink-2); background: var(--gray); padding: 12px 16px; border-radius: var(--radius-sm); border-inline-start: 4px solid var(--gold); }
.note-center { text-align: center; margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); font-weight: 600; font-size: .98rem; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s; line-height: 1.2; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
.btn-primary { background: linear-gradient(180deg, var(--navy-3), var(--navy)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--navy-3); color: #fff; box-shadow: var(--shadow-sm); }
.btn-gold { background: linear-gradient(180deg, #e0b95e, var(--gold)); color: var(--navy-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -10px rgba(212, 168, 75, .9); }
.btn-gold:hover { background: #e2b85b; color: var(--navy-2); box-shadow: 0 10px 24px -10px rgba(212, 168, 75, .8); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn-link-light { background: transparent; color: #fff; padding-inline: 8px; text-decoration: underline; text-underline-offset: 4px; white-space: normal; text-align: center; max-width: 100%; }
.btn-link-light:hover { color: var(--gold); }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-lg { padding: 15px 28px; font-size: 1.05rem; white-space: normal; text-align: center; max-width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.btn-row-center { justify-content: center; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 40px; height: 40px; border-radius: 11px; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name .latin { font-weight: 800; font-size: 1.35rem; letter-spacing: .3px; color: var(--ink); }
.brand-a { color: var(--gold); }
.brand-sub { font-size: .72rem; color: var(--muted); margin-top: 3px; font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; }
[dir="rtl"] .brand-sub { letter-spacing: 0; font-size: .85rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 12px; position: relative; cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }
.site-nav { display: flex; align-items: center; gap: 22px; }
.nav-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-link { display: inline-block; padding: 8px 11px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav-link:hover, .nav-link.is-active { color: var(--navy); background: var(--gray); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch { font-weight: 600; text-decoration: none; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); }
.lang-switch:hover { border-color: var(--navy); }
@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .site-nav { position: absolute; inset-inline: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px var(--gutter) 20px; gap: 12px; box-shadow: var(--shadow); display: none; }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; }
  .nav-link { display: block; padding: 12px 14px; font-size: 1.05rem; }
  .nav-actions { justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 108px); }
.section-tight { padding-block: 24px; }
.section-alt { background: var(--gray); background-image: var(--dots); background-size: 24px 24px; }
.page-intro { padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px); background: var(--dots), radial-gradient(700px 320px at 15% 0%, rgba(212, 168, 75, .16), transparent 70%), linear-gradient(180deg, var(--gray) 0%, #fff 100%); background-size: 24px 24px, auto, auto; }
.page-intro-center { text-align: center; }
.page-intro-center .lead { margin-inline: auto; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.two-col-media { align-items: center; }
.media-col { display: flex; flex-direction: column; align-items: center; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 18px; }
.card-grid-1 { grid-template-columns: 1fr; }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card { background: var(--gray); border: 1px solid transparent; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 8px; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.section-alt .card { background: #fff; box-shadow: var(--shadow-sm); }
.card:hover { background: #fff; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; margin-bottom: 6px; }
.card-icon .icon { width: 24px; height: 24px; }
.card-number { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--gold); line-height: 1; }
.card-title { margin: 0; font-size: 1.12rem; }
.card-text { margin: 0; color: var(--ink-2); flex: 1; }
.check-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); }
.check-list .icon { color: var(--green); margin-top: .2em; }
.badge-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; line-height: 1.3; }
[dir="rtl"] .badge { font-size: .82rem; }
.badge-demo { background: #e8f1ff; color: #1d4ed8; border-color: #c7dbff; }
.badge-planned { background: #f3e8ff; color: #6d28d9; border-color: #e2ccff; }
.badge-integration { background: #fff4e0; color: #9a5b00; border-color: #ffe1ad; }
.badge-custom { background: #e6f9f3; color: #067154; border-color: #b9ecda; }
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: radial-gradient(1200px 600px at 80% -10%, rgba(46, 94, 170, .45), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--gold); }
.hero .lead { color: #d7deea; }
.hero-statement { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--gold); border-inline-start: 3px solid var(--gold); padding-inline-start: 14px; }
.hero-note { color: #aab5c9; font-size: .9rem; margin-top: 1.2em; }
.hero-visual, .brand-visual { position: relative; min-height: 420px; display: grid; place-items: center; overflow: hidden; max-width: 100%; }
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-fallback { position: relative; display: grid; place-items: center; width: 100%; }
.hero-visual.is-3d .scene-fallback, .brand-visual.is-3d .scene-fallback { visibility: hidden; }
.hero-visual .scene-fallback, .brand-visual .scene-fallback { min-height: 420px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual, .brand-visual { min-height: 380px; }
}

/* Orbiting chips (CSS fallback + decoration) */
.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; --r: 190px; }
.orbit-chip-0 { --a: -90deg; background: rgba(20, 184, 166, .35); }
.orbit-chip-1 { --a: -30deg; background: rgba(59, 130, 246, .35); }
.orbit-chip-2 { --a: 30deg; background: rgba(139, 92, 246, .35); }
.orbit-chip-3 { --a: 90deg; background: rgba(245, 158, 11, .35); }
.orbit-chip-4 { --a: 150deg; background: rgba(16, 185, 129, .35); }
.orbit-chip-5 { --a: 210deg; background: rgba(239, 68, 68, .35); }
@media (max-width: 480px) { .orbit-chip { --r: 118px; font-size: .72rem; } }
@media (prefers-reduced-motion: no-preference) {
  [data-motion="auto"] .orbit { animation: orbit-spin 40s linear infinite; }
  [data-motion="auto"] .orbit-chip { animation: orbit-counter 40s linear infinite; }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-counter { to { transform: translate(-50%, -50%) rotate(calc(var(--a) - 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a) + 360deg)); } }

/* ---------- CSS phone mockup ---------- */
.phone { --school: var(--navy); --school-accent: var(--gold); width: 236px; aspect-ratio: 9 / 18.6; background: #0d1526; border-radius: 34px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), inset 0 0 0 2px #2b3650; position: relative; flex: none; }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 64px; height: 10px; border-radius: 999px; background: #0d1526; z-index: 2; }
.phone-screen { background: #f4f6f9; border-radius: 26px; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; font-family: var(--font-body); color: var(--ink); }
.phone-status { display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; color: var(--ink-2); padding-inline: 6px; }
.phone-app-header { display: flex; align-items: center; gap: 8px; background: var(--school); color: #fff; border-radius: 14px; padding: 10px; font-weight: 600; font-size: 11px; }
.phone-logo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--gold); color: var(--navy-2); font-family: var(--font-display); font-weight: 800; font-size: 12px; flex: none; }
.phone-school { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-card { background: #fff; border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 8px -4px rgba(10, 22, 40, .3); }
.phone-card-hero { border-inline-start: 3px solid var(--green); }
.phone-card-title { font-size: 9px; color: var(--muted); font-weight: 600; }
.phone-card-value { font-size: 11px; font-weight: 700; color: var(--ink); }
.phone-card-sub { font-size: 9.5px; color: var(--ink-2); }
.phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone-tile { background: #fff; border-radius: 10px; padding: 10px 8px; font-size: 9.5px; font-weight: 600; color: var(--ink-2); text-align: center; border-top: 3px solid var(--school); }
.phone-nav { margin-top: auto; display: flex; justify-content: space-around; padding-top: 4px; }
.phone-nav span { width: 18px; height: 4px; border-radius: 4px; background: #c9d1de; }
.phone-nav span:first-child { background: var(--school); }
/* Brand-swap fallback: four stacked phones, the selected one turns to the front */
.brand-fallback { display: grid; place-items: center; }
.brand-stack { position: relative; width: 236px; aspect-ratio: 9 / 18.6; perspective: 1200px; }
.brand-stack .phone { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: rotateY(-90deg) scale(.92); pointer-events: none; transition: transform .55s var(--ease), opacity .3s; }
.brand-stack .phone.is-front { opacity: 1; transform: none; z-index: 2; }

/* Variant "fresh": greeting header, gradient summary, round quick actions, floating nav */
.ps-fresh .phone-screen { background: color-mix(in srgb, var(--school) 8%, #f6fbfa); }
.ps-greet { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.ps-greet-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ps-greet-hi { font-size: 9px; color: var(--muted); font-weight: 600; }
.ps-greet-name { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--school); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: #fff; color: var(--school); font-weight: 800; font-size: 12px; font-family: var(--font-display); box-shadow: 0 0 0 2px var(--school-accent); flex: none; }
.ps-hero-gradient { position: relative; border-radius: 14px; padding: 10px; background: linear-gradient(135deg, var(--school), color-mix(in srgb, var(--school) 55%, #fff)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.ps-hero-gradient .phone-card-title { color: rgba(255, 255, 255, .8); }
.ps-hero-gradient .phone-card-value { color: #fff; }
.ps-pill { position: absolute; inset-inline-end: 10px; top: 10px; background: var(--school-accent); color: #1f2937; font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.ps-section { font-size: 8.5px; font-weight: 700; color: var(--muted); padding-inline: 4px; }
.ps-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ps-action { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8px; font-weight: 600; color: var(--ink-2); text-align: center; }
.ps-action i { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px -4px rgba(10, 22, 40, .35); position: relative; }
.ps-action i::after { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: var(--school); opacity: .85; }
.ps-action:nth-child(2) i::after { border-radius: 50%; background: var(--school-accent); }
.ps-action:nth-child(3) i::after { inset: 10px 8px; border-radius: 3px; }
.ps-action:nth-child(4) i::after { inset: 8px 10px 12px; }
.ps-list { gap: 6px; }
.ps-list-row { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; color: var(--ink); }
.ps-list-row b { width: 8px; height: 8px; border-radius: 50%; background: var(--school); flex: none; }
.ps-list-row:nth-child(2) b { background: var(--school-accent); }
.ps-list-row em { font-style: normal; margin-inline-start: auto; color: var(--muted); font-size: 8.5px; font-weight: 500; }
.ps-nav-float { margin-top: auto; align-self: center; display: flex; gap: 14px; padding: 7px 14px; border-radius: 999px; background: var(--school); }
.ps-nav-float span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.ps-nav-float span:first-child { background: var(--school-accent); }

/* Variant "creative": gradient panel, asymmetric mosaic, weekly chart */
.ps-creative .phone-screen { background: #faf7ff; }
.ps-panel { position: relative; overflow: hidden; border-radius: 16px; padding: 12px 10px 10px; background: linear-gradient(135deg, var(--school), var(--school-accent)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.ps-panel-blob { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, .18); inset-inline-end: -22px; top: -26px; }
.ps-panel-initial { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--school); display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; margin-bottom: 4px; }
.ps-panel-name { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; line-height: 1.2; }
.ps-panel-sub { font-size: 8.5px; opacity: .85; }
.ps-mosaic { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.ps-tall { grid-row: 1 / span 2; border-inline-start: 3px solid var(--school-accent); }
.ps-small { padding: 7px 8px; }
.ps-small .phone-card-value { font-size: 9.5px; }
.ps-line { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--school) 18%, #fff); margin-top: 4px; }
.ps-line.short { width: 60%; }
.ps-chart { gap: 6px; }
.ps-bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; }
.ps-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--school); opacity: .75; }
.ps-bars i:nth-child(1) { height: 50%; }
.ps-bars i:nth-child(2) { height: 80%; }
.ps-bars i:nth-child(3) { height: 100%; background: var(--school-accent); opacity: 1; }
.ps-bars i:nth-child(4) { height: 65%; }
.ps-bars i:nth-child(5) { height: 40%; }
.ps-nav-dots { justify-content: center; gap: 12px; }
.ps-nav-dots span { width: 6px; height: 6px; border-radius: 50%; }
.ps-nav-dots span:first-child { background: var(--school-accent); width: 18px; }

/* Variant "bold": dark band with strong stripe, big stat, full-width rows */
.ps-bold .phone-screen { background: #f3f4f6; }
.ps-band { display: flex; align-items: center; gap: 8px; background: var(--school-accent); color: #fff; padding: 10px; border-radius: 6px; border-inline-start: 5px solid var(--school); }
.ps-band-initial { width: 22px; height: 22px; background: var(--school); color: #fff; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 11px; border-radius: 4px; flex: none; }
.ps-band-name { font-family: var(--font-display); font-weight: 800; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .ps-band-name { text-transform: none; letter-spacing: 0; }
.ps-stat { background: var(--school); color: #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; }
.ps-stat .phone-card-title { color: rgba(255, 255, 255, .8); }
.ps-stat-big { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; }
.ps-stat-sub { font-size: 9px; font-weight: 600; }
.ps-rows { display: flex; flex-direction: column; gap: 5px; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #fff; border-radius: 6px; padding: 7px 8px; border-inline-start: 4px solid var(--school); font-size: 9.5px; font-weight: 700; color: var(--ink); }
.ps-row em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 8.5px; text-align: end; }
.ps-alert { display: flex; align-items: center; gap: 6px; background: var(--school-accent); color: #fff; border-radius: 6px; padding: 7px 8px; font-size: 8.5px; font-weight: 600; }
.ps-alert i { width: 8px; height: 8px; border-radius: 50%; background: var(--school); box-shadow: 0 0 0 3px color-mix(in srgb, var(--school) 35%, transparent); flex: none; }
.ps-nav-dark { margin-top: auto; display: flex; justify-content: space-around; align-items: center; background: var(--school-accent); border-radius: 8px; padding: 7px; }
.ps-nav-dark span { width: 16px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.ps-nav-dark span:first-child { background: var(--school); width: 28px; height: 8px; }

/* ---------- Brand swap section ---------- */
.section-brand { background: linear-gradient(180deg, #fff, var(--gray)); }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.brand-btn { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: start; transition: border-color .2s, box-shadow .2s; }
.brand-item.is-active .brand-btn { border-color: var(--school); box-shadow: 0 0 0 3px color-mix(in srgb, var(--school) 22%, transparent); color: var(--ink); }
.brand-item.is-active .brand-btn { background: color-mix(in srgb, var(--school) 5%, #fff); }
.brand-dot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--school); color: #fff; font-family: var(--font-display); font-weight: 800; flex: none; }
.brand-label { min-width: 0; }
.brand-sep { color: var(--muted); font-weight: 400; }
.brand-theme { color: var(--muted); font-weight: 500; }
.brand-item.is-active .brand-theme { color: var(--school); }
.brand-swatch { margin-inline-start: auto; display: flex; gap: 3px; flex: none; }
.brand-swatch i { width: 10px; height: 10px; border-radius: 3px; background: var(--school); }
.brand-swatch i:last-child { background: var(--school-accent); }

/* ---------- Device trio (CSS 3D) ---------- */
.device-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; margin: 32px 0 8px; perspective: 1400px; }
@media (max-width: 760px) { .device-trio { grid-template-columns: 1fr; justify-items: center; } }
.device { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.device figcaption { font-family: var(--font-display); font-weight: 600; color: var(--ink-2); }
.device .phone { width: 200px; }
@media (prefers-reduced-motion: no-preference) {
  [data-motion="auto"] .device-web .browser { transform: rotateY(14deg) rotateX(4deg); }
  [data-motion="auto"] .device-android .phone { transform: rotateY(-8deg) rotateX(4deg); }
  [data-motion="auto"] .device-ios .phone { transform: rotateY(-16deg) rotateX(4deg); }
  [data-motion="auto"] .device:hover .browser, [data-motion="auto"] .device:hover .phone { transform: none; }
  .device .browser, .device .phone { transition: transform .6s var(--ease); }
}
.browser { --school: var(--navy); width: 100%; max-width: 360px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--gray); border-bottom: 1px solid var(--line); }
.browser-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #c9d1de; }
.browser-url { flex: 1; width: auto !important; height: auto !important; border-radius: 6px !important; background: #fff !important; font-size: 10px; color: var(--muted); padding: 3px 8px; margin-inline-start: 6px; text-align: start; }
.browser-body { padding: 12px; display: grid; gap: 10px; }
.browser-hero { display: flex; align-items: center; gap: 10px; background: var(--school); color: #fff; padding: 22px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; }
.browser-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.browser-cols span { height: 46px; background: var(--gray); border-radius: 8px; border-top: 3px solid var(--school); }

/* ---------- Tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; align-items: stretch; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tier-2 { border-color: var(--gold); box-shadow: var(--shadow); position: relative; }
.tier-name { font-size: 1.4rem; margin: 0; }
.tier-text { color: var(--ink-2); min-height: 3em; }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier-grid-compact .tier { padding: 22px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.faq-item summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--gold-2); flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--ink-2); padding-bottom: 12px; margin: 0; }

/* ---------- CTA ---------- */
.section-cta { padding-block: 0; }
.cta-panel { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 28px; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; box-shadow: var(--shadow); }
.cta-panel h2 { color: #fff; }
.cta-panel p { color: #d7deea; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 800px) { .cta-panel { grid-template-columns: 1fr; } .cta-actions { justify-content: flex-start; } }
.download-panel { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: var(--gray); border-radius: 24px; padding: clamp(24px, 4vw, 40px); }
.download-panel > div { min-width: 0; flex: 1 1 320px; }
.download-panel .btn { flex: 0 1 auto; }
.download-panel h2 { margin-bottom: .3em; }
.download-panel p { margin: 0 0 .5em; }
.contact-inline { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .95rem; }
.contact-label { font-weight: 600; color: var(--muted); margin-inline-end: 6px; }
.contact-strip { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; padding: 18px 22px; background: var(--gray); border-radius: 16px; }
.disclaimer { display: flex; gap: 14px; align-items: flex-start; background: #fff7e6; border: 1px solid #ffe1ad; border-radius: 16px; padding: 16px 18px; color: #6b4200; }
.disclaimer .icon { flex: none; margin-top: .2em; }
.disclaimer p { margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }
.form { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 36px); box-shadow: var(--shadow-sm); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field-full { margin-top: 16px; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.req { color: var(--danger); }
input:not([type="checkbox"]), select, textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid #b9c2d1; border-radius: 12px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 94, 170, .18); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
textarea { resize: vertical; min-height: 110px; }
.field-error { color: var(--danger); font-size: .88rem; margin: 0; min-height: 1.2em; }
.field-error:empty { display: none; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.checkbox input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--navy); flex: none; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 16px; }
.checkbox-consent { font-size: .95rem; color: var(--ink-2); }
.hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.form-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form-alert { background: var(--danger-bg); border: 1px solid #f5b5b0; color: var(--danger); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.form-alert p { margin: 0 0 6px; }
.form-aside { background: var(--gray); border-radius: 24px; padding: 28px; }
.form-aside .btn { margin-top: 12px; }
.steps-list { padding-inline-start: 1.3em; display: grid; gap: 8px; color: var(--ink-2); }
.steps-list li::marker { color: var(--gold-2); font-weight: 700; }
.channel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.channel { display: flex; gap: 14px; align-items: flex-start; }
.channel p { margin: 0 0 4px; }
.success-mark { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #e6f9f3; color: var(--green); margin-bottom: 16px; }
.success-mark .icon { width: 36px; height: 36px; }
.reference { font-size: 1.15rem; background: var(--gray); display: inline-flex; gap: 10px; padding: 12px 20px; border-radius: 12px; }
.reference strong { font-family: var(--font-display); letter-spacing: .06em; }

/* ---------- Toast (form submission feedback) ---------- */
.toast { position: fixed; inset-inline-end: 18px; bottom: 84px; z-index: var(--z-toast); display: flex; align-items: flex-start; gap: 12px; max-width: min(420px, calc(100vw - 36px)); background: #fff; color: var(--ink); border: 1px solid var(--line); border-inline-start: 5px solid var(--green); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); font-size: .95rem; }
.toast-error { border-inline-start-color: var(--danger); }
.toast-body { flex: 1; min-width: 0; }
.toast-body strong { display: block; font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.toast-body p { margin: 0 0 4px; color: var(--ink-2); }
.toast-body a { display: inline-block; margin-top: 4px; font-weight: 600; }
.toast-close { flex: none; width: 32px; height: 32px; border: 0; background: var(--gray); color: var(--ink-2); border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.toast-close:hover { background: var(--gray-2); }
@media (max-width: 560px) { .toast { inset-inline: 12px; bottom: 76px; max-width: none; } }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in .3s var(--ease); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form.is-sent [data-submit] { opacity: .7; cursor: default; }

/* ---------- Legal ---------- */
.legal { max-width: 800px; padding-block: clamp(40px, 6vw, 72px); }
.legal h2 { font-size: 1.25rem; margin-top: 1.8em; }
.legal p { color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--navy-2); color: #c9d2e3; padding-block: 56px 28px; margin-top: clamp(56px, 8vw, 96px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr .9fr 1.1fr; gap: 32px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand-name .latin, .site-footer .brand-sub { color: #fff; }
.site-footer .brand-sub { color: #aab5c9; }
.footer-about p { margin-top: 14px; max-width: 46ch; }
.footer-statement { color: var(--gold); font-weight: 600; }
.footer-heading { color: #fff; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
[dir="rtl"] .footer-heading { letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: #e6ebf5; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.contact-list .contact-label { color: #8f9bb3; display: block; font-size: .8rem; margin: 0; }
.site-footer a.download-link { margin-top: 16px; color: #fff; border-color: rgba(255, 255, 255, .55); white-space: normal; text-align: center; max-width: 100%; }
.site-footer a.download-link:hover, .site-footer a.download-link:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--navy-2); }
.site-footer a.download-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.motion-toggle { margin-top: 18px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #e6ebf5; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .88rem; cursor: pointer; }
.motion-toggle:hover { border-color: #fff; }
.footer-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: #8f9bb3; }
.footer-bottom p { margin: 0 0 6px; }
.footer-demo-note { max-width: 90ch; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: var(--z-fab); display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; padding: 12px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .8); transition: transform .2s var(--ease); }
.whatsapp-fab:hover { transform: translateY(-2px); color: #fff; }
.whatsapp-fab .icon { width: 22px; height: 22px; }
@media (max-width: 560px) { .whatsapp-fab-text { display: none; } .whatsapp-fab { padding: 12px; } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
[data-motion="reduce"] html { scroll-behavior: auto; }

/* ---------- Print ---------- */
@media print {
  .site-header, .whatsapp-fab, .scene-canvas, .motion-toggle { display: none !important; }
  .hero { background: #fff; color: var(--ink); }
}

/* ==========================================================================
   Redesign layer: motion system, CSS 3D cards, packages, roles, feature groups
   ========================================================================== */

/* ---------- Motion system (reveal + stagger; JS marks html[data-reveal-ready]) ---------- */
[data-reveal-ready] [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--stagger, 0) * 80ms); will-change: opacity, transform; }
[data-reveal-ready] [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-ready][data-motion="reduce"] [data-reveal] { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal-ready] [data-reveal] { opacity: 1; transform: none; transition: none; } }
.section h2, .page-intro h1 { position: relative; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); vertical-align: middle; margin-inline-end: 10px; transform-origin: 0 50%; }
[dir="rtl"] .eyebrow::before { transform-origin: 100% 50%; }
[data-reveal-ready][data-motion="auto"] [data-reveal] .eyebrow::before { transform: scaleX(0); transition: transform .7s var(--ease) .25s; }
[data-reveal-ready][data-motion="auto"] [data-reveal].is-in .eyebrow::before, [data-reveal-ready][data-motion="auto"] .is-in .eyebrow::before { transform: scaleX(1); }

/* ---------- CSS 3D card base (perspective from the grid, layers on the card) ---------- */
[data-reveal-group], .pkg-grid, .fgrid, .role-media { perspective: 1400px; }
.card3d { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card3d::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; pointer-events: none; }
.card3d-back { position: absolute; inset: 10px -6px -10px 6px; border-radius: inherit; background: linear-gradient(135deg, rgba(46, 94, 170, .10), rgba(212, 168, 75, .12)); transform: translateZ(-30px); z-index: -2; opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
[dir="rtl"] .card3d-back { inset: 10px 6px -10px -6px; }
.card3d > *:not(.card3d-back) { transform: translateZ(1px); }
.card3d::after, .pkg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 168, 75, .22), transparent 62%); opacity: 0; transition: opacity .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { [data-motion="auto"] .card3d:hover::after, [data-motion="auto"] .pkg:hover::after { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  [data-motion="auto"] .card3d:hover { --lift: -6px; box-shadow: var(--shadow); }
  [data-motion="auto"] .card3d:hover .card3d-back { opacity: 1; transform: translateZ(-30px) translateY(6px); }
}
.card3d:focus-within { box-shadow: var(--shadow); }
.card.card3d:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); }

/* Role accents on the generic card (home roles section) */
.card-key-parents .card-icon { background: linear-gradient(135deg, #0f766e, var(--teal)); }
.card-key-students .card-icon { background: linear-gradient(135deg, #1d4ed8, var(--briteblue)); }
.card-key-teachers .card-icon { background: linear-gradient(135deg, #047857, var(--green)); }
.card-key-management .card-icon { background: linear-gradient(135deg, var(--navy), var(--gold)); }
.card-key-supervisors .card-icon { background: linear-gradient(135deg, #5b21b6, var(--purple)); }
.card-key-accounts .card-icon { background: linear-gradient(135deg, #b45309, var(--orange)); }

/* ---------- Packages ---------- */
.pkg-ladder { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: level; position: relative; }
.pkg-ladder::before { content: ""; position: absolute; inset-inline: 8%; top: 18px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--gold), var(--navy)); border-radius: 3px; opacity: .55; }
[dir="rtl"] .pkg-ladder::before { background: linear-gradient(270deg, var(--blue), var(--gold), var(--navy)); }
.pkg-ladder-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-inline: 8px; counter-increment: level; }
.pkg-ladder-step::before { content: counter(level); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); color: var(--navy); font-family: var(--font-display); font-weight: 800; position: relative; z-index: 1; }
.pkg-ladder-plus::before { border-color: var(--gold); background: var(--gold); color: var(--navy-2); }
.pkg-ladder-complete::before { border-color: var(--navy); background: var(--navy); color: #fff; }
.pkg-ladder-name { font-family: var(--font-display); font-weight: 700; margin-top: 6px; }
.pkg-ladder-adds { font-size: .86rem; color: var(--muted); max-width: 26ch; }
@media (max-width: 640px) { .pkg-ladder { grid-template-columns: 1fr; gap: 14px; } .pkg-ladder::before { display: none; } .pkg-ladder-step { flex-direction: row; text-align: start; align-items: center; } .pkg-ladder-step::before { flex: none; } .pkg-ladder-adds { max-width: none; } }

.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: end; padding-top: 22px; }
@media (max-width: 960px) { .pkg-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.pkg { --accent: var(--blue); --accent-2: #5b8ae0; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10, 22, 40, .06), 0 14px 32px -20px rgba(10, 22, 40, .35); }
.pkg-body { position: relative; padding: 28px; display: flex; flex-direction: column; gap: 14px; transform: translateZ(2px); }
.pkg-layer { position: absolute; border-radius: 26px; pointer-events: none; }
.pkg-layer-back { inset: 14px -10px -14px 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, var(--accent-2) 10%, #fff)); transform: translateZ(-46px); z-index: -2; }
.pkg-layer-mid { inset: 6px -4px -6px 4px; background: #fff; border: 1px solid var(--line); opacity: .8; transform: translateZ(-22px); z-index: -1; }
[dir="rtl"] .pkg-layer-back { inset: 14px 10px -14px -10px; }
[dir="rtl"] .pkg-layer-mid { inset: 6px 4px -6px -4px; }
.pkg-head { display: flex; align-items: center; gap: 14px; }
.pkg-emblem { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex: none; transform: translateZ(18px); box-shadow: 0 10px 22px -10px var(--accent); }
.pkg-emblem .icon { width: 26px; height: 26px; }
.pkg-name { margin: 0; font-size: 1.6rem; }
.pkg-label { display: inline-block; margin-top: 2px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
[dir="rtl"] .pkg-label { letter-spacing: 0; font-size: .9rem; }
.pkg-adds { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, #fff); color: var(--ink); font-weight: 600; font-size: .95rem; }
.pkg-adds .icon { color: var(--accent); margin-top: .2em; }
.pkg-text { margin: 0; color: var(--ink-2); }
.pkg-highlights { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pkg-highlights li { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); background: var(--gray); border-radius: 12px; padding: 8px 10px; transform: translateZ(8px); }
.pkg-hl-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--accent); flex: none; border: 1px solid var(--line); }
.pkg-hl-icon .icon { width: 16px; height: 16px; }
.pkg-modules { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pkg-modules-compact { font-size: .92rem; }
.pkg-cta { margin-top: auto; align-self: flex-start; }
.pkg-badge { position: absolute; top: -16px; inset-inline-start: 50%; transform: translateX(-50%) translateZ(30px); background: var(--gold); color: var(--navy-2); font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(212, 168, 75, .9); z-index: 3; white-space: nowrap; }
[dir="rtl"] .pkg-badge { transform: translateX(50%) translateZ(30px); letter-spacing: 0; }
/* Core: calm, light, thin depth */
.pkg-core { --accent: var(--blue); --accent-2: #6f9be6; }
.pkg-core .pkg-layer-mid { display: none; }
/* Plus: recommended, taller, gold border and glow */
.pkg-plus { --accent: var(--gold-2); --accent-2: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 0 5px rgba(212, 168, 75, .16), 0 24px 50px -24px rgba(212, 168, 75, .55), 0 1px 2px rgba(10, 22, 40, .06); }
.pkg-plus .pkg-emblem { background: linear-gradient(135deg, var(--navy), var(--navy-3)); color: var(--gold); box-shadow: 0 10px 22px -10px var(--navy); }
.pkg-plus .pkg-layer-back { background: linear-gradient(135deg, rgba(212, 168, 75, .35), rgba(46, 94, 170, .12)); }
@media (min-width: 961px) { .pkg-plus:not(.pkg-compact) { transform: translateY(-22px) scale(1.03); } .pkg-plus.pkg-compact { transform: translateY(-12px); } }
/* Complete: deep, dark, layered */
.pkg-complete { --accent: var(--gold); --accent-2: var(--purple); background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); border-color: rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 30px 60px -30px rgba(10, 22, 40, .8), 0 1px 2px rgba(10, 22, 40, .2); }
.pkg-complete .pkg-name, .pkg-complete .pkg-text, .pkg-complete .pkg-adds, .pkg-complete .check-list li { color: #fff; }
.pkg-complete .pkg-text { color: #c9d2e3; }
.pkg-complete .pkg-adds { background: rgba(255, 255, 255, .1); }
.pkg-complete .pkg-label { color: var(--gold); }
.pkg-complete .pkg-emblem { background: linear-gradient(135deg, var(--gold), #f0cd7a); color: var(--navy-2); box-shadow: 0 10px 24px -10px rgba(212, 168, 75, .8); }
.pkg-complete .pkg-highlights li { background: rgba(255, 255, 255, .08); color: #e6ebf5; }
.pkg-complete .pkg-hl-icon { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: var(--gold); }
.pkg-complete .pkg-modules { border-top-color: rgba(255, 255, 255, .18); }
.pkg-complete .check-list .icon { color: var(--gold); }
.pkg-complete .pkg-layer-back { background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(212, 168, 75, .35)); inset: 18px -14px -18px 14px; }
[dir="rtl"] .pkg-complete .pkg-layer-back { inset: 18px 14px -18px -14px; }
.pkg-complete .pkg-layer-mid { background: var(--navy-3); border-color: rgba(255, 255, 255, .1); }
@media (hover: hover) and (pointer: fine) {
  [data-motion="auto"] .pkg:hover { --lift: -8px; }
  [data-motion="auto"] .pkg-plus:not(.pkg-compact):hover { transform: translateY(-30px) scale(1.03) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion="auto"] .pkg-layer-back { animation: pkg-float 7s ease-in-out infinite; }
  [data-motion="auto"] .pkg-plus .pkg-layer-back { animation-delay: -2s; }
  [data-motion="auto"] .pkg-complete .pkg-layer-back { animation-delay: -4s; }
}
@keyframes pkg-float { 0%, 100% { transform: translateZ(-46px) translateY(0); } 50% { transform: translateZ(-46px) translateY(-6px); } }
.pkg-compact .pkg-body { padding: 22px; gap: 10px; }
.pkg-compact .pkg-name { font-size: 1.3rem; }
.pkg-compact .pkg-emblem { width: 46px; height: 46px; border-radius: 14px; }
.pkg-grid-compact { align-items: stretch; }

/* ---------- Roles ---------- */
.role-nav { position: sticky; top: 68px; z-index: var(--z-role-nav); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.role-nav-inner { display: flex; align-items: center; gap: 14px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.role-nav-inner::-webkit-scrollbar { display: none; }
.role-nav-label { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
[dir="rtl"] .role-nav-label { letter-spacing: 0; font-size: .9rem; }
.role-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.role-chip { --accent: var(--navy); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.role-chip .icon { width: 18px; height: 18px; color: var(--accent); }
.role-chip:hover, .role-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.role-chip:hover .icon, .role-chip.is-active .icon { color: #fff; }
.role-chip-parents { --accent: #0f766e; } .role-chip-students { --accent: #1d4ed8; } .role-chip-teachers { --accent: #047857; }
.role-chip-management { --accent: var(--navy); } .role-chip-supervisors { --accent: #6d28d9; } .role-chip-accounts { --accent: #b45309; }

.role-list { display: grid; gap: clamp(40px, 6vw, 72px); }
.role { --accent: var(--navy); --accent-2: var(--blue); --accent-soft: #e9edf4; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); align-items: center; scroll-margin-top: 140px; padding: 8px 0; }
.role:nth-child(even) .role-media { order: 2; }
@media (max-width: 860px) { .role { grid-template-columns: 1fr; } .role:nth-child(even) .role-media { order: 0; } }
.role-media { position: relative; min-height: 300px; display: grid; place-items: center; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.role-backplate { position: absolute; width: min(82%, 320px); aspect-ratio: 1; border-radius: 40px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: .16; transform: translateZ(-60px) rotate(-6deg); }
.role-screen { position: relative; width: min(78%, 300px); aspect-ratio: 4 / 3; background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 12px; transform: translateZ(30px); }
.role-emblem { position: absolute; inset-inline-end: 8%; bottom: 10%; display: grid; place-items: center; width: 84px; height: 84px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 18px 34px -16px var(--accent); transform: translateZ(70px); border-radius: 26px; }
.role-emblem .icon { width: 40px; height: 40px; }
.role-index { position: absolute; inset-inline-start: 6%; top: 4%; font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; color: var(--accent); opacity: .16; transform: translateZ(10px); }
.role-copy .role-title { font-size: clamp(1.5rem, 2.6vw, 2rem); position: relative; padding-inline-start: 16px; }
.role-copy .role-title::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 5px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.role-text { color: var(--ink-2); max-width: 60ch; }
.role-points { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.role-points li { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; color: var(--ink-2); }
.role-points .icon { color: var(--accent); margin-top: .2em; }
/* accents + emblem shapes per role */
.role-parents { --accent: #0f766e; --accent-2: var(--teal); --accent-soft: #e6f7f4; }
.role-parents .role-emblem { border-radius: 50%; }
.role-students { --accent: #1d4ed8; --accent-2: var(--briteblue); --accent-soft: #e8efff; }
.role-students .role-emblem { border-radius: 18px; transform: translateZ(70px) rotate(-8deg); }
.role-teachers { --accent: #047857; --accent-2: var(--green); --accent-soft: #e6f7ef; }
.role-teachers .role-emblem { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0; }
.role-management { --accent: var(--navy); --accent-2: var(--gold); --accent-soft: #eef0f6; }
.role-management .role-emblem { clip-path: polygon(50% 0, 100% 18%, 92% 72%, 50% 100%, 8% 72%, 0 18%); border-radius: 0; }
.role-supervisors { --accent: #6d28d9; --accent-2: var(--purple); --accent-soft: #f1ebff; }
.role-supervisors .role-emblem { border-radius: 50%; outline: 6px solid color-mix(in srgb, var(--accent) 22%, #fff); outline-offset: 4px; }
.role-accounts { --accent: #b45309; --accent-2: var(--orange); --accent-soft: #fff3e3; }
.role-accounts .role-emblem { border-radius: 12px 30px 12px 30px; }
/* mini visuals (decorative, aria-hidden) */
.rs-line { display: block; height: 10px; border-radius: 6px; background: var(--gray-2); width: 60%; }
.rs-line-lg { width: 85%; } .rs-line-sm { width: 40%; }
.rs-row { display: flex; align-items: center; gap: 10px; }
.rs-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.rs-avatar-2 { background: linear-gradient(135deg, var(--gold), var(--orange)); margin-inline-start: -14px; border: 3px solid #fff; }
.rs-alert { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--accent-soft); border-inline-start: 4px solid var(--accent); }
.rs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.rs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
.rs-tiles span { border-radius: 10px; background: var(--gray); border-top: 3px solid var(--accent); min-height: 34px; }
.rs-timetable { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; }
.rs-slot { border-radius: 8px; background: var(--accent-soft); border-inline-start: 4px solid var(--accent); }
.rs-slot-2 { background: #fff3e3; border-color: var(--orange); } .rs-slot-3 { background: #e6f7ef; border-color: var(--green); } .rs-slot-4 { background: #f1ebff; border-color: var(--purple); }
.rs-check { display: flex; align-items: center; gap: 10px; }
.rs-box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line); flex: none; }
.rs-box-on { background: var(--accent); border-color: var(--accent); }
.rs-roster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; flex: 1; align-content: center; }
.rs-seat { aspect-ratio: 1; border-radius: 50%; }
.rs-seat-on { background: var(--accent-soft); border: 2px solid var(--accent); } .rs-seat-off { background: #fde7e7; border: 2px solid var(--coral); }
.rs-bar { display: flex; align-items: center; gap: 10px; }
.rs-pill { width: 54px; height: 22px; border-radius: 999px; background: var(--accent); flex: none; }
.rs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rs-kpis span { height: 34px; border-radius: 10px; background: var(--gray); border-top: 3px solid var(--gold); }
.rs-chart { display: flex; align-items: flex-end; gap: 8px; flex: 1; padding-top: 6px; }
.rs-chart i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.rs-c1 { height: 40%; } .rs-c2 { height: 65%; } .rs-c3 { height: 50%; } .rs-c4 { height: 85%; } .rs-c5 { height: 70%; } .rs-c6 { height: 95%; }
.rs-gauge { position: relative; width: 96px; height: 96px; margin-inline: auto; }
.rs-gauge-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accent) 0 72%, var(--gray-2) 72% 100%); }
.rs-gauge-core { position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.rs-rows { display: grid; gap: 8px; }
.rs-invoice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.rs-amount { width: 48px; height: 12px; border-radius: 6px; background: var(--accent-soft); flex: none; }
.rs-amount-paid { background: var(--green); }
.rs-stamp { position: absolute; inset-inline-end: 18px; bottom: 16px; width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--green); opacity: .6; transform: rotate(-12deg); }

/* ---------- Feature groups ---------- */
.legend-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 20px; background: var(--gray); border-radius: 18px; }
.legend-panel .h4 { margin: 0; }
.legend-lg .badge { font-size: .86rem; padding: 6px 14px; }
.fgroup-nav ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fgroup-chip { --accent: var(--navy); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; }
.fgroup-chip .icon { width: 18px; height: 18px; color: var(--accent); }
.fgroup-chip:hover { border-color: var(--accent); color: var(--accent); }
.fgroup { --accent: var(--navy); --accent-2: var(--blue); --accent-soft: #eef0f6; margin-top: 40px; scroll-margin-top: 90px; }
.fgroup-communication, .fgroup-chip-communication { --accent: #0f766e; --accent-2: var(--teal); --accent-soft: #e6f7f4; }
.fgroup-academic, .fgroup-chip-academic { --accent: #1d4ed8; --accent-2: var(--briteblue); --accent-soft: #e8efff; }
.fgroup-finance, .fgroup-chip-finance { --accent: #b45309; --accent-2: var(--orange); --accent-soft: #fff3e3; }
.fgroup-transport, .fgroup-chip-transport { --accent: #6d28d9; --accent-2: var(--purple); --accent-soft: #f1ebff; }
.fgroup-admissions, .fgroup-chip-admissions { --accent: #047857; --accent-2: var(--green); --accent-soft: #e6f7ef; }
.fgroup-activities, .fgroup-chip-activities { --accent: #b91c1c; --accent-2: var(--coral); --accent-soft: #fdeaea; }
.fgroup-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-soft); }
.fgroup-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex: none; }
.fgroup-title { margin: 0; font-size: 1.35rem; }
.fgroup-count { margin-inline-start: auto; font-family: var(--font-display); font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.fcard { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: 0 1px 2px rgba(10, 22, 40, .05), 0 12px 30px -22px rgba(10, 22, 40, .4); }
.fcard-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); flex: none; transform: translateZ(14px); }
.fcard-icon .icon { width: 24px; height: 24px; }
.fcard-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fcard-title { margin: 0; font-size: 1.08rem; }
.fcard-text { margin: 0; color: var(--ink-2); font-size: .95rem; }
.fcard .badge-list { margin-top: 8px; }
.fcard .badge { font-size: .8rem; padding: 5px 12px; }
.fcard.is-featured { grid-column: span 2; border-inline-start: 5px solid var(--accent); background: linear-gradient(135deg, #fff, var(--accent-soft)); }
.fcard.is-featured .fcard-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 12px 24px -12px var(--accent); }
.fcard.is-featured .fcard-icon .icon { width: 30px; height: 30px; }
.fcard.is-featured .fcard-title { font-size: 1.25rem; }
@media (max-width: 620px) { .fcard.is-featured { grid-column: auto; } }

/* ---------- Responsive audit fixes (320px and up) ---------- */
@media (max-width: 430px) {
  .pkg-highlights { grid-template-columns: 1fr; }
  .pkg-body { padding: 22px 18px; }
  .pkg-badge { max-width: calc(100% - 24px); text-overflow: ellipsis; overflow: hidden; }
  .pkg-name { font-size: 1.4rem; }
  .role-points { grid-template-columns: 1fr; }
  .role-media { min-height: 260px; }
  .role-screen { width: min(84%, 300px); }
  .role-emblem { width: 68px; height: 68px; inset-inline-end: 4%; }
  .role-emblem .icon { width: 32px; height: 32px; }
  .role-index { font-size: 2.4rem; }
}
@media (max-width: 400px) {
  .fcard { flex-direction: column; gap: 12px; }
  .fcard.is-featured .fcard-icon { width: 52px; height: 52px; }
  .fgroup-head { flex-wrap: wrap; }
  .legend-panel { padding: 14px 16px; }
  .field-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .form { padding: 18px 14px; }
  .form-aside { padding: 20px 16px; }
  .cta-panel { padding: 26px 20px; }
  .download-panel { padding: 22px 18px; }
  .btn-lg { padding: 13px 20px; font-size: 1rem; }
  .brand-name .latin { font-size: 1.2rem; }
}
@media (max-width: 360px) {
  .hero-visual, .brand-visual { min-height: 340px; }
  .hero-visual .scene-fallback, .brand-visual .scene-fallback { min-height: 340px; }
  .hero-visual .phone { width: 196px; }
  .orbit-chip { --r: 88px; font-size: .68rem; padding: 5px 9px; }
  .brand-stack { width: 196px; }
  .reference { font-size: 1rem; padding: 10px 14px; }
  .toast { inset-inline: 8px; bottom: 72px; padding: 12px 12px; }
  .device .phone { width: 180px; }
}

/* ---------- Premium surface upgrades ---------- */
.hero::before, .cta-panel::before, .site-footer::before, .pkg-complete::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--noise); opacity: .09; pointer-events: none; mix-blend-mode: overlay; z-index: 0; }
.hero > .container, .cta-panel > *, .site-footer > .container, .pkg-complete > .pkg-body { position: relative; z-index: var(--z-content); }
.hero { background: radial-gradient(900px 480px at 85% -5%, rgba(46, 94, 170, .55), transparent 62%), radial-gradient(600px 400px at 10% 110%, rgba(212, 168, 75, .22), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); }

/* Home: deliverables as an asymmetric feature grid, capabilities as a bento, process as a timeline */
@media (min-width: 960px) {
  .section-deliverables .card-grid-3 { grid-template-columns: 1.3fr 1fr 1fr; }
  .section-deliverables .card:first-child { background: linear-gradient(135deg, #fff, #fbf3e0); box-shadow: var(--shadow-sm); }
  .section-deliverables .card:first-child .card-icon { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--gold), #f0cd7a); color: var(--navy-2); }
  .section-deliverables .card:first-child .card-title { font-size: 1.4rem; }
}
@media (min-width: 1024px) {
  .section-capabilities .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section-capabilities .card-grid-4 > .card:nth-child(1), .section-capabilities .card-grid-4 > .card:nth-child(6) { grid-column: span 2; }
  .section-capabilities .card-grid-4 > .card:nth-child(7), .section-capabilities .card-grid-4 > .card:nth-child(8) { grid-column: span 2; }
  .section-roles .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-capabilities .card-grid-4 > .card:nth-child(1) { background: linear-gradient(135deg, #fff, #e8f7f4); }
  .section-capabilities .card-grid-4 > .card:nth-child(6) { background: linear-gradient(135deg, #fff, #eef1ff); }
}
.timeline { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 26px; position: relative; counter-reset: step; }
.timeline::before { content: ""; position: absolute; inset-inline: 30px; top: 27px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--blue)); opacity: .5; }
[dir="rtl"] .timeline::before { background: linear-gradient(270deg, var(--gold), var(--blue)); }
.timeline li { position: relative; padding-top: 74px; counter-increment: step; }
.timeline li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #fff; border: 2px solid var(--gold); color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; box-shadow: 0 10px 22px -12px rgba(212, 168, 75, .9); }
.timeline h3 { margin: 0 0 6px; font-size: 1.12rem; }
.timeline p { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .timeline::before { display: none; } .timeline li { padding-top: 0; padding-inline-start: 72px; min-height: 56px; } }

/* FAQ: visible two-column list instead of an accordion */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px 40px; }
.faq-item { background: transparent; border: 0; border-top: 2px solid var(--line); border-radius: 0; padding: 16px 0 0; }
.faq-q { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.faq-a { color: var(--ink-2); margin: 0; }

/* Packages: shared elements align across the three cards on desktop */
@media (min-width: 961px) {
  .pkg-grid:not(.pkg-grid-compact) .pkg-text { min-height: 4.6em; }
  .pkg-grid:not(.pkg-grid-compact) .pkg-adds { min-height: 3.4em; }
}

/* Footer: three columns, legal links in the bottom bar */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.footer-bottom .footer-legal { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.footer-bottom .motion-toggle { margin: 0; margin-inline-start: auto; }
.footer-demo-note { flex-basis: 100%; }