/* ── Variables ─────────────────────────────── */
:root {
  /* brand */
  --primary:      #4B1FAF;
  --primary-deep: #2B0D63;
  --primary-light:#7C4DFF;
  --white:        #ffffff;

  /* light-theme surfaces (default context) */
  --surface:      #F8F9FC;
  --surface-card: #FFFFFF;
  --surface-alt:  #F1F1F8;
  --ink:          #111827;
  --ink-muted:    #6B7280;
  --border-c:     rgba(17,24,39,0.08);
  --border-accent:rgba(75,31,175,0.28);

  --green:  #16A34A;
  --red:    #DC2626;

  --grad-primary: linear-gradient(135deg,#4B1FAF,#7C4DFF);
  --grad-dark:    linear-gradient(145deg,#151E36,#0F172A);
  --shadow-lg:    0 24px 60px rgba(17,24,39,0.12);
  --shadow-md:    0 10px 30px rgba(17,24,39,0.08);
  --shadow-glow:  0 0 40px rgba(75,31,175,0.16);

  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;

  --nav-h:     78px;
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --radius:    12px;
  --radius-lg: 20px;

  /* legacy aliases (kept so any inline styles using the old token names
     still resolve correctly to the new palette, including inside
     dark-context sections like .hero/.footer which redefine the
     surface/ink tokens locally) */
  --black:       var(--surface);
  --black-deep:  var(--surface);
  --black-card:  var(--surface-card);
  --black-mid:   var(--surface-alt);
  --white-dim:   var(--ink);
  --white-muted: var(--ink-muted);
  --white-faint: var(--border-c);
  --cyan:        var(--primary);
  --blue:        var(--primary-deep);
  --border:      var(--border-c);
  --border-cyan: var(--border-accent);
  --grad-cyan:   var(--grad-primary);
}

/* ── Reset ─────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink-muted);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width:100%; height:auto; display:block; }
a  { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--font-body); }
::selection { background:rgba(75,31,175,0.15); color:var(--primary-deep); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--surface); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:4px; }

/* ── Utility ───────────────────────────────── */
.container  { max-width:1200px; margin:0 auto; padding:0 28px; }
.section-pad { padding:110px 0; }
.txt-center { text-align:center; }

.tag {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:0.8rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--primary); margin-bottom:16px;
}
.tag::before { content:'—'; opacity:0.6; }

.h1 {
  font-family:var(--font-head);
  font-size:clamp(2.1rem,4.2vw,3.4rem);
  font-weight:800; line-height:1.12;
  color:var(--ink); letter-spacing:-0.02em;
}
.h2 {
  font-family:var(--font-head);
  font-size:clamp(1.9rem,3.5vw,3rem);
  font-weight:700; line-height:1.15;
  color:var(--ink); letter-spacing:-0.015em;
}
.h3 {
  font-family:var(--font-head);
  font-size:1.25rem; font-weight:700;
  color:var(--ink); letter-spacing:-0.01em;
}
.accent { color:var(--primary); }
.grad-text {
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.lead { font-size:1.05rem; color:var(--ink-muted); line-height:1.8; }

/* ── Buttons ───────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 28px; border-radius:10px;
  font-family:var(--font-head); font-weight:600;
  font-size:0.92rem; letter-spacing:0.01em;
  transition:all 0.28s var(--ease);
  white-space:nowrap;
}
.btn-primary {
  background:var(--grad-primary); color:#fff;
  box-shadow:0 4px 20px rgba(75,31,175,0.28);
}
.btn-primary:hover { box-shadow:0 10px 32px rgba(75,31,175,0.4); transform:translateY(-2px); }
.btn-outline {
  background:transparent; color:var(--primary);
  border:1.5px solid var(--border-accent);
}
.btn-outline:hover { background:rgba(75,31,175,0.06); border-color:var(--primary); transform:translateY(-2px); }
.btn-ghost {
  background:var(--surface-alt); color:var(--ink);
  border:1px solid var(--border-c);
}
.btn-ghost:hover { background:var(--border-c); color:var(--ink); }
.btn-lg { padding:16px 36px; font-size:1.02rem; }
.btn-sm { padding:9px 20px; font-size:0.84rem; }

/* ── Image helpers ─────────────────────────── */
.img-wrap {
  position:relative; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border-c);
  box-shadow:var(--shadow-md);
}
.img-wrap img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 0.6s var(--ease);
}
.img-wrap:hover img { transform:scale(1.04); }
.img-wrap::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(75,31,175,0.10),transparent 55%,rgba(15,23,42,0.12));
}
.img-badge {
  position:absolute; bottom:18px; left:18px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(15,23,42,0.72); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.14); border-radius:100px;
  padding:7px 16px;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
  color:#fff; letter-spacing:0.05em;
}

/* ── Navbar ────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(17,24,39,0.10);
  box-shadow:0 1px 20px rgba(17,24,39,0.05);
  transition:all 0.3s var(--ease);
}
.navbar.scrolled {
  background:rgba(255,255,255,0.98);
  box-shadow:0 4px 24px rgba(17,24,39,0.09);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 28px;
  width:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:44px; width:auto; max-width:180px; object-fit:contain; }
.nav-logo-name { display:none; }
.nav-logo-sub { display:none; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  font-family:var(--font-head); font-size:0.9rem; font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink-muted); padding:9px 16px; border-radius:8px;
  transition:all 0.25s var(--ease);
}
.nav-link:hover,.nav-link.active { color:var(--primary); background:rgba(75,31,175,0.06); }
.nav-cta {
  background:var(--grad-primary) !important; color:#fff !important;
  padding:11px 22px !important;
  box-shadow:0 4px 18px rgba(75,31,175,0.24);
}
.nav-cta:hover { box-shadow:0 8px 26px rgba(75,31,175,0.36) !important; transform:translateY(-1px); }
.nav-toggle {
  display:none; flex-direction:column;
  gap:5px; padding:8px; cursor:pointer;
}
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:all 0.28s var(--ease);
}
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── Page Hero (About / Services / Courses / Contact / Programs / Blog) ── */
.page-hero {
  padding:150px 0 80px;
  background:linear-gradient(135deg,#F8F9FC 0%,#EFEAFB 100%);
  border-bottom:1px solid var(--border-c);
  position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(75,31,175,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,31,175,0.045) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:radial-gradient(ellipse 60% 100% at 50% 0%,#000 40%,transparent 100%);
}
.page-hero .container { position:relative; z-index:1; }
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.85rem; font-weight:500;
  color:var(--ink-muted); margin-bottom:22px; letter-spacing:0.01em;
}
.breadcrumb a { color:var(--primary); transition:color 0.2s; }
.breadcrumb a:hover { color:var(--primary-deep); }
.breadcrumb i { font-size:0.75rem; }

/* ── Hero (Home) — dark, premium ───────────── */
.hero {
  --surface:      #0F172A;
  --surface-card: #1A2440;
  --surface-alt:  #151E36;
  --ink:          #FFFFFF;
  --ink-muted:    #AEB8D0;
  --border-c:     rgba(255,255,255,0.10);
  min-height:100vh; display:flex; align-items:center;
  background:var(--surface); padding-top:var(--nav-h);
  position:relative; overflow:hidden;
}
.hero-bg-img {
  position:absolute; inset:0; z-index:0;
}
.hero-bg-img img {
  width:100%; height:100%; object-fit:cover;
  object-position:center right;
  filter:brightness(0.28) saturate(0.75);
}
.hero-bg-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,0.97) 40%,rgba(15,23,42,0.55) 100%);
}
.hero-content { position:relative; z-index:2; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(124,77,255,0.12);
  border:1px solid rgba(124,77,255,0.3);
  border-radius:100px; padding:7px 18px;
  font-family:var(--font-mono); font-size:0.8rem; font-weight:500;
  color:#C9B6FF; letter-spacing:0.06em;
  margin-bottom:28px;
}
.hero-dot { width:6px; height:6px; background:#C9B6FF; border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(124,77,255,0.4); }
  50%      { opacity:0.7; box-shadow:0 0 0 7px rgba(124,77,255,0); }
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }
.hero-divider { width:40px; height:2px; background:rgba(124,77,255,0.4); margin:28px 0; }
.hero-stats { display:flex; gap:44px; }
.stat-num {
  font-family:var(--font-head); font-size:2.2rem; font-weight:800;
  background:linear-gradient(135deg,#C9B6FF,#7C4DFF); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.stat-label { font-size:0.85rem; color:var(--ink-muted); margin-top:5px; letter-spacing:0.01em; }

/* Hero image side */
.hero-img-side { position:relative; }
.hero-img-main {
  height:540px; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border-c);
  box-shadow:var(--shadow-lg);
}
.hero-img-main img {
  width:100%; height:100%; object-fit:cover;
  object-position:center top;
}
.hero-img-main::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(124,77,255,0.12),transparent 60%,rgba(15,23,42,0.35));
}
.hero-float-card {
  position:absolute; bottom:-24px; left:-28px;
  background:rgba(26,36,64,0.92); backdrop-filter:blur(20px);
  border:1px solid rgba(124,77,255,0.3); border-radius:14px;
  padding:18px 22px; box-shadow:var(--shadow-glow);
  min-width:200px;
}
.hfc-label { font-family:var(--font-mono); font-size:0.78rem; font-weight:500; color:var(--ink-muted); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; }
.hfc-val { font-family:var(--font-head); font-size:1.6rem; font-weight:800; color:#fff; line-height:1; }
.hfc-sub { font-size:0.78rem; color:#C9B6FF; margin-top:4px; }

/* ── Section header ────────────────────────── */
.sec-header { margin-bottom:56px; }
.sec-header.center { text-align:center; }
.sec-header.center .lead { max-width:580px; margin:12px auto 0; }
.sec-header .lead { margin-top:12px; max-width:540px; }

/* ── Cards ─────────────────────────────────── */
.card {
  background:var(--surface-card);
  border:1px solid var(--border-c);
  border-radius:var(--radius-lg); padding:36px 30px;
  transition:all 0.32s var(--ease); position:relative; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-primary);
  opacity:0; transition:opacity 0.32s;
}
.card:hover { border-color:var(--border-accent); transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card:hover::before { opacity:1; }

/* ── About Page ────────────────────────────── */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-checks { margin:28px 0; display:flex; flex-direction:column; gap:13px; }
.check-item {
  display:flex; align-items:flex-start; gap:13px;
  padding:14px 18px; background:var(--surface-card);
  border:1px solid var(--border-c); border-radius:10px;
  font-size:0.94rem; color:var(--ink);
  box-shadow:var(--shadow-md);
  transition:border-color 0.25s;
}
.check-item:hover { border-color:var(--border-accent); }
.check-dot { width:7px; height:7px; min-width:7px; background:var(--primary); border-radius:50%; margin-top:7px; }

/* About image */
.about-img-wrap { height:500px; }

/* ── Mission cards ─────────────────────────── */
.mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mission-card {
  text-align:center; padding:44px 28px;
  background:var(--surface-card); border:1px solid var(--border-c);
  border-radius:var(--radius-lg); transition:all 0.32s var(--ease);
  box-shadow:var(--shadow-md);
}
.mission-card:hover { border-color:var(--border-accent); transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.mission-img {
  width:80px; height:80px; border-radius:50%; overflow:hidden;
  margin:0 auto 22px; border:2px solid rgba(75,31,175,0.25);
}
.mission-img img { width:100%; height:100%; object-fit:cover; }

/* ── Founder ───────────────────────────────── */
.founder-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:70px; align-items:center; }
.founder-img-wrap {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-c); box-shadow:var(--shadow-lg);
}
.founder-img-wrap img { width:100%; height:100%; object-fit:cover; }
.founder-img-wrap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,23,42,0.35) 0%,transparent 60%);
}
.founder-name { font-family:var(--font-head); font-size:2rem; font-weight:800; color:var(--ink); margin-bottom:5px; }
.founder-role { font-family:var(--font-mono); font-size:0.82rem; font-weight:600; color:var(--primary); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:26px; }
.founder-bio { color:var(--ink-muted); line-height:1.85; margin-bottom:14px; }
.founder-quote {
  border-left:3px solid var(--primary); padding-left:18px;
  font-style:italic; color:var(--ink); margin:22px 0 28px;
  font-size:1rem; line-height:1.7;
}

/* ── Services ──────────────────────────────── */
.service-block { padding:80px 0; border-bottom:1px solid var(--border-c); }
.service-block:last-of-type { border-bottom:none; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.service-grid.flip { direction:rtl; }
.service-grid.flip > * { direction:ltr; }
.service-num {
  font-family:var(--font-mono); font-size:0.8rem; font-weight:600;
  color:var(--primary); letter-spacing:0.08em; margin-bottom:14px;
}
.service-list { margin:22px 0; display:flex; flex-direction:column; gap:10px; }
.service-li {
  display:flex; align-items:flex-start; gap:12px;
  font-size:0.94rem; color:var(--ink-muted); padding:10px 0;
  border-bottom:1px solid var(--border-c);
}
.service-li:last-child { border-bottom:none; }
.service-li-dot { width:5px; height:5px; min-width:5px; background:var(--primary); border-radius:50%; margin-top:8px; }
.service-img-wrap { height:400px; }

/* ── Why us ────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.why-img-wrap { height:520px; position:relative; }
.why-items { display:flex; flex-direction:column; gap:20px; }
.why-item {
  display:flex; gap:18px; align-items:flex-start;
  padding:22px; background:var(--surface-card);
  border:1px solid var(--border-c); border-radius:12px;
  transition:all 0.28s var(--ease);
  box-shadow:var(--shadow-md);
}
.why-item:hover { border-color:var(--border-accent); transform:translateX(5px); }
.why-item-icon {
  width:44px; height:44px; min-width:44px;
  border-radius:10px; overflow:hidden;
}
.why-item-icon img { width:100%; height:100%; object-fit:cover; }
.why-item-title { font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:0.98rem; margin-bottom:5px; }
.why-item-text { font-size:0.89rem; color:var(--ink-muted); line-height:1.65; }

/* ── Programs ──────────────────────────────── */
.programs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.prog-card {
  background:var(--surface-card); border:1px solid var(--border-c);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all 0.32s var(--ease); box-shadow:var(--shadow-md);
}
.prog-card:hover { border-color:var(--border-accent); transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prog-img { height:200px; overflow:hidden; }
.prog-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.prog-card:hover .prog-img img { transform:scale(1.06); }
.prog-body { padding:28px; }
.prog-body .h3 { margin-bottom:10px; font-size:1.1rem; }
.prog-body p { font-size:0.91rem; color:var(--ink-muted); line-height:1.7; margin-bottom:20px; }

/* ── Blog ──────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card {
  background:var(--surface-card); border:1px solid var(--border-c);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all 0.32s var(--ease); box-shadow:var(--shadow-md);
}
.blog-card:hover { border-color:var(--border-accent); transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.blog-img { height:200px; overflow:hidden; position:relative; }
.blog-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.blog-card:hover .blog-img img { transform:scale(1.05); }
.blog-tag {
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(15,23,42,0.72); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.16); border-radius:100px;
  padding:5px 13px; font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
  color:#fff; letter-spacing:0.03em;
}
.blog-body { padding:24px; }
.blog-meta { font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-muted); margin-bottom:11px; }
.blog-title { font-family:var(--font-head); font-size:1.02rem; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:10px; }
.blog-excerpt { font-size:0.89rem; color:var(--ink-muted); line-height:1.7; margin-bottom:18px; }
.read-more { font-family:var(--font-head); font-size:0.85rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:6px; transition:gap 0.2s; }
.read-more:hover { gap:10px; }

/* ── Courses ───────────────────────────────── */
.courses-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.course-card {
  background:var(--surface-card); border:1px solid var(--border-c);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all 0.32s var(--ease); position:relative; box-shadow:var(--shadow-md);
}
.course-card:hover { border-color:var(--border-accent); transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.course-img { height:220px; overflow:hidden; }
.course-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.course-card:hover .course-img img { transform:scale(1.05); }
.course-body { padding:28px; }
.course-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.course-level {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:100px;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
}
.level-beginner { background:rgba(22,163,74,0.08); color:var(--green); border:1px solid rgba(22,163,74,0.22); }
.level-advanced  { background:rgba(75,31,175,0.08); color:var(--primary);  border:1px solid rgba(75,31,175,0.22); }
.course-price { font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--ink); }
.course-price small { font-size:0.8rem; color:var(--ink-muted); font-weight:400; }
.course-title { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.course-desc { font-size:0.92rem; color:var(--ink-muted); line-height:1.75; margin-bottom:22px; }
.course-meta { display:flex; gap:22px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border-c); }
.c-meta { font-size:0.84rem; color:var(--ink-muted); display:flex; align-items:center; gap:6px; }
.c-meta span { color:var(--ink); }
.course-feats { display:flex; flex-direction:column; gap:9px; margin-bottom:26px; }
.course-feat { display:flex; align-items:center; gap:10px; font-size:0.89rem; color:var(--ink-muted); }
.feat-dot { width:5px; height:5px; min-width:5px; background:var(--green); border-radius:50%; }
.course-popular {
  position:absolute; top:0; right:22px;
  background:var(--grad-primary); color:#fff;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:600;
  letter-spacing:0.06em; padding:5px 14px;
  border-radius:0 0 8px 8px; text-transform:uppercase;
}

/* ── Programs detail ───────────────────────── */
.prog-detail-list { display:flex; flex-direction:column; gap:28px; }
.prog-detail-card {
  display:grid; grid-template-columns:260px 1fr auto;
  gap:32px; align-items:start;
  padding:36px; background:var(--surface-card);
  border:1px solid var(--border-c); border-radius:var(--radius-lg);
  transition:all 0.32s var(--ease); box-shadow:var(--shadow-md);
}
.prog-detail-card:hover { border-color:var(--border-accent); box-shadow:var(--shadow-lg); }
.prog-detail-img { height:160px; border-radius:12px; overflow:hidden; }
.prog-detail-img img { width:100%; height:100%; object-fit:cover; }
.prog-detail-title { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--ink); margin-bottom:9px; }
.prog-detail-sub { font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--primary); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; }
.prog-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.prog-tag {
  background:rgba(75,31,175,0.05); border:1px solid rgba(75,31,175,0.16);
  color:var(--ink-muted); font-size:0.8rem; padding:4px 12px;
  border-radius:100px; font-family:var(--font-mono);
}

/* ── Blog detail / listing ─────────────────── */
.blog-listing { display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start; }
.blog-main-img { height:340px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-c); margin-bottom:32px; box-shadow:var(--shadow-md); }
.blog-main-img img { width:100%; height:100%; object-fit:cover; }
.blog-main-title { font-family:var(--font-head); font-size:1.75rem; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:16px; }
.blog-sidebar-card {
  background:var(--surface-card); border:1px solid var(--border-c); border-radius:12px;
  display:grid; grid-template-columns:80px 1fr; gap:14px;
  padding:16px; margin-bottom:14px; cursor:pointer;
  transition:all 0.25s var(--ease); box-shadow:var(--shadow-md);
}
.blog-sidebar-card:hover { border-color:var(--border-accent); transform:translateX(4px); }
.blog-sidebar-thumb { height:80px; border-radius:8px; overflow:hidden; }
.blog-sidebar-thumb img { width:100%; height:100%; object-fit:cover; }
.blog-sidebar-title { font-family:var(--font-head); font-size:0.9rem; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:6px; }
.blog-sidebar-date { font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-muted); }

/* ── Contact ───────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start; }
.contact-info-card {
  display:flex; gap:18px; align-items:flex-start;
  padding:22px; background:var(--surface-card);
  border:1px solid var(--border-c); border-radius:12px;
  margin-bottom:14px; transition:border-color 0.25s; box-shadow:var(--shadow-md);
}
.contact-info-card:hover { border-color:var(--border-accent); }
.c-icon {
  width:44px; height:44px; min-width:44px;
  background:rgba(75,31,175,0.07); border:1px solid var(--border-accent);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:1.05rem;
}
.c-label { font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--ink-muted); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:4px; }
.c-val { color:var(--ink); font-weight:500; font-size:0.96rem; }
.contact-form-wrap {
  background:var(--surface-card); border:1px solid var(--border-c);
  border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-md);
}
.form-group { margin-bottom:18px; }
.form-label { display:block; font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--ink-muted); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.form-input, .form-textarea, .form-select {
  width:100%; background:var(--surface);
  border:1px solid var(--border-c); border-radius:8px;
  padding:13px 17px; color:var(--ink); font-family:var(--font-body);
  font-size:0.95rem; outline:none; transition:all 0.25s var(--ease);
  -webkit-appearance:none;
}
.form-input:focus,.form-textarea:focus,.form-select:focus {
  border-color:rgba(75,31,175,0.45);
  background:#fff;
  box-shadow:0 0 0 3px rgba(75,31,175,0.08);
}
.form-input::placeholder,.form-textarea::placeholder { color:#9AA3B2; }
.form-textarea { min-height:130px; resize:vertical; }
.form-select option { background:#fff; color:var(--ink); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-msg { padding:13px 17px; border-radius:8px; font-size:0.9rem; margin-top:14px; display:none; }
.form-msg.success { background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.22); color:var(--green); }
.form-msg.error   { background:rgba(220,38,38,0.08);  border:1px solid rgba(220,38,38,0.22);  color:var(--red); }
.social-links { display:flex; gap:10px; margin-top:22px; }
.social-link {
  width:42px; height:42px; background:var(--surface-card);
  border:1px solid var(--border-c); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-muted); font-size:0.98rem;
  transition:all 0.25s var(--ease); box-shadow:var(--shadow-md);
}
.social-link:hover { color:var(--primary); border-color:var(--border-accent); background:rgba(75,31,175,0.06); transform:translateY(-3px); }

/* ── CTA banner — dark, bold close ─────────── */
.cta-banner {
  --ink: #FFFFFF;
  --ink-muted: #B9C0D4;
  padding:100px 0;
  background:linear-gradient(135deg,#1A0B4D 0%,#0F172A 50%,#1A0B4D 100%);
  border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:center; position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; width:600px; height:300px;
  background:radial-gradient(ellipse,rgba(124,77,255,0.18),transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px; }

/* ── Stats strip ───────────────────────────── */
.stats-strip {
  background:var(--surface-alt); border-top:1px solid var(--border-c); border-bottom:1px solid var(--border-c);
  padding:60px 0;
}
.stats-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center; }
.stats-inner .stat-num {
  background:var(--grad-primary); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.stats-inner .stat-label { color:var(--ink-muted); }
.stat-item .stat-num { margin-bottom:8px; }

/* ── Footer — dark ─────────────────────────── */
.footer {
  --ink: #FFFFFF;
  --ink-muted: #A9B2C6;
  background:#0F172A; border-top:1px solid rgba(255,255,255,0.08); padding-top:80px;
  color:var(--ink-muted);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.footer-logo img { height:38px; width:auto; max-width:170px; object-fit:contain; }
.footer-brand-name { display:none; }
.footer-brand-sub { display:none; }
.footer-desc { font-size:0.9rem; color:var(--ink-muted); line-height:1.85; margin-bottom:22px; }
.footer-col-title {
  font-family:var(--font-head); font-size:0.86rem; font-weight:700;
  color:#fff; letter-spacing:0.02em; text-transform:uppercase;
  margin-bottom:18px; padding-bottom:10px; position:relative;
}
.footer-col-title::after { content:''; position:absolute; bottom:0; left:0; width:22px; height:2px; background:var(--primary-light); }
.footer-links { display:flex; flex-direction:column; gap:9px; }
.footer-link { color:var(--ink-muted); font-size:0.9rem; transition:all 0.22s; }
.footer-link:hover { color:#fff; padding-left:5px; }
.footer-bottom { padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.footer-copy { font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-muted); }
.footer-copy span { color:var(--primary-light); }
.footer-legal { display:flex; gap:22px; }
.footer-legal a { font-size:0.82rem; color:var(--ink-muted); transition:color 0.2s; }
.footer-legal a:hover { color:#fff; }
.footer .social-link { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); color:var(--ink-muted); box-shadow:none; }
.footer .social-link:hover { color:#fff; background:var(--primary); border-color:var(--primary); }

/* ── WhatsApp float ────────────────────────── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:56px; height:56px; background:#25d366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.45rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:all 0.28s var(--ease);
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,0.55); }
.wa-pulse {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(37,211,102,0.45);
  animation:waPulse 2s infinite;
}
@keyframes waPulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.55);opacity:0} }

/* ── Scroll reveal ─────────────────────────── */
.reveal,.reveal-l,.reveal-r {
  opacity:0; transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal   { transform:translateY(28px); }
.reveal-l { transform:translateX(-28px); }
.reveal-r { transform:translateX(28px); }
.reveal.in,.reveal-l.in,.reveal-r.in { opacity:1; transform:none; }
.d1{transition-delay:0.1s} .d2{transition-delay:0.2s}
.d3{transition-delay:0.3s} .d4{transition-delay:0.4s}
.d5{transition-delay:0.5s}

/* ── FAQ ───────────────────────────────────── */
details {
  background:var(--surface-card); border:1px solid var(--border-c);
  border-radius:12px; margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow-md);
}
details summary {
  padding:20px 24px; cursor:pointer; list-style:none;
  font-family:var(--font-head); font-weight:600; font-size:0.98rem;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center;
}
details summary::-webkit-details-marker { display:none; }
details p { padding:0 24px 20px; color:var(--ink-muted); line-height:1.8; font-size:0.93rem; }

/* ── Generic responsive grids (used inline across pages) ── */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:1024px){
  .grid-3 { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
}

/* ── Responsive ────────────────────────────── */
@media(max-width:1024px){
  .hero-inner { grid-template-columns:1fr; }
  .hero-img-side { display:none; }
  .about-split { grid-template-columns:1fr; }
  .about-img-wrap { height:360px; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid.flip { direction:ltr; }
  .why-grid { grid-template-columns:1fr; }
  .why-img-wrap { display:none; }
  .founder-grid { grid-template-columns:1fr; }
  .mission-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .prog-detail-card { grid-template-columns:1fr; }
  .prog-detail-img { display:none; }
  .blog-listing { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  :root{ --nav-h:68px; }
  /* catch-all: any section using an inline grid (instead of a class)
     collapses to one column on mobile too */
  [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .section-pad { padding:72px 0; }
  .nav-links {
    display:none; position:fixed; top:var(--nav-h); left:0; right:0;
    background:#fff; flex-direction:column; padding:20px;
    gap:4px; border-bottom:1px solid var(--border-c); box-shadow:var(--shadow-md);
  }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero-stats { flex-wrap:wrap; gap:22px; }
  .programs-grid { grid-template-columns:1fr; }
  .courses-grid { grid-template-columns:1fr; }
  .mission-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .contact-form-wrap { padding:24px; }
}
@media(max-width:480px){
  .hero-actions { flex-direction:column; }
  .cta-actions { flex-direction:column; align-items:center; }
}