/* =========================================================================
   Codra Tech — main.css
   Mobile-first, RTL, dark-tech + green accent. Vanilla CSS, no framework.
   Sections: 1) Tokens  2) Reset/base  3) Layout helpers  4) Buttons
             5) Header/nav  6) Hero  7-16) Homepage sections  17) Blog
             18) Dark mode  19) Utilities/responsive
   ========================================================================= */

/* ---------- 1) DESIGN TOKENS (from the Codra Tech design system) --------- */
:root {
	/* Brand */
	--ct-green-500:#62d270; --ct-green-400:#74d980; --ct-green-600:#47b857;
	--ct-green-700:#389347; --ct-green-800:#32743d;
	--ct-charcoal-900:#333333; --ct-white:#ffffff;
	--ct-neutral-100:#f4f4f4; --ct-neutral-200:#e7e7e7; --ct-neutral-300:#d1d1d1;
	--ct-neutral-400:#a8a8a8; --ct-neutral-500:#7a7a7a; --ct-neutral-600:#5c5c5c;
	--ct-neutral-700:#474747; --ct-neutral-800:#3a3a3a;
	--ct-danger:#b42318;

	/* Fonts */
	--ct-font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif;
	--ct-font-en:"Clash Display",Inter,Arial,sans-serif;

	/* Page theme (light — overridden by [data-theme="dark"]) */
	--pg-bg:#ffffff; --pg-bg-subtle:#f4f4f4; --pg-card:#ffffff;
	--pg-text:#333333; --pg-muted:#666666; --pg-line:#e7e7e7; --pg-strong:#333333;

	/* Effects */
	--radius-sm:4px; --radius-pill:999px;
	--shadow-2:0 12px 32px rgb(0 0 0 / .12);
	--ease:cubic-bezier(.2,.8,.2,1); --fast:140ms; --normal:240ms;

	/* Layout */
	--container:1200px;
	--gutter:clamp(16px,3vw,32px);
	--nav-h:76px;
}

/* ---------- 2) RESET / BASE --------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body {
	margin:0;
	font-family:var(--ct-font-ar);
	font-size:16px; line-height:1.85;
	color:var(--pg-text); background:var(--pg-bg);
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--ct-green-700); text-decoration:none; }
a:hover { color:var(--ct-green-800); }
h1,h2,h3 { margin:0 0 .5em; font-weight:700; line-height:1.3; text-wrap:pretty; }
p { margin:0 0 1em; }
ul,ol { margin:0; padding:0; }
/* Latin words/numbers inside Arabic text use the display font, kept LTR inline */
.en { font-family:var(--ct-font-en); direction:ltr; unicode-bidi:isolate; }
/* English terms (Python, ChatGPT, Portfolio…) embedded in Arabic sentences */
.latin-term { direction:ltr; unicode-bidi:isolate; display:inline-block; }
button { font-family:inherit; }

/* Accessibility helpers */
.screen-reader-text {
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
	position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
	background:var(--ct-charcoal-900); color:#fff; padding:10px 16px;
}
.skip-link:focus { inset-inline-start:8px; top:8px; }
:focus-visible { outline:3px solid var(--ct-green-500); outline-offset:2px; }

/* ---------- 3) LAYOUT HELPERS ------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(64px,9vw,96px); background:var(--pg-bg); }
.section--subtle { background:var(--pg-bg-subtle); }
.section--dark { background:var(--ct-charcoal-900); color:var(--ct-white); }
.content-narrow { max-width:760px; }

/* Section kicker: green square + "01 · Label" */
.kicker {
	display:flex; align-items:center; gap:12px; margin:0 0 24px;
	font-family:var(--ct-font-en); font-size:14px; letter-spacing:.1em;
	text-transform:uppercase; color:var(--pg-muted);
}
.kicker--center { justify-content:center; }
.kicker__sq { width:10px; height:10px; background:var(--ct-green-500); flex:none; }

/* Green highlight behind key words */
.mark {
	background:var(--ct-green-500); color:var(--ct-charcoal-900);
	padding:.02em .18em .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* Bullets */
.bullet { width:8px; height:8px; flex:none; }
.bullet--muted { background:var(--ct-neutral-400); }
.bullet--dark  { background:var(--ct-charcoal-900); }
.bullet--green { background:var(--ct-green-500); }

/* Pixel-mark logo (output by codra_pixel_mark) */
.pixel-mark { display:inline-grid; width:max-content; }
.pixel-mark i { display:block; }

/* ---------- 4) BUTTONS --------------------------------------------------- */
.btn {
	display:inline-flex; align-items:center; justify-content:center;
	height:44px; padding:0 26px; border-radius:var(--radius-pill);
	font-family:var(--ct-font-ar); font-size:15px; font-weight:700; line-height:1;
	border:2px solid transparent; cursor:pointer; text-align:center;
	transition:transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn--lg    { height:56px; padding:0 32px; }
.btn--nav   { height:44px; }
.btn--block { width:100%; height:46px; }
.btn--block.btn--lg { height:56px; }

.btn--brand { background:var(--ct-green-500); color:var(--ct-charcoal-900); border-color:var(--ct-green-500); }
.btn--brand:hover { background:var(--ct-green-400); border-color:var(--ct-green-400); color:var(--ct-charcoal-900); transform:translateY(-2px); }

.btn--ghost { background:transparent; color:var(--pg-text); border-color:var(--pg-strong); }
.btn--ghost:hover { transform:translateY(-2px); color:var(--pg-text); }
.btn--ghost-dark { color:var(--ct-white); border-color:var(--ct-neutral-500); }
.btn--ghost-dark:hover { color:var(--ct-white); border-color:var(--ct-green-500); }

.btn:active { transform:translateY(0); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---------- 5) HEADER / NAV --------------------------------------------- */
.site-header {
	position:sticky; top:0; z-index:50;
	background:rgba(51,51,51,.9);
	backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
	color:var(--ct-white);
	border-bottom:1px solid transparent;
	transition:border-color var(--normal) var(--ease);
}
.site-header.is-scrolled { border-bottom-color:var(--ct-neutral-600); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.nav-start { display:flex; align-items:center; gap:clamp(24px,4vw,48px); min-width:0; }
.nav-end   { display:flex; align-items:center; gap:12px; flex:none; }

.brand { display:flex; align-items:center; gap:10px; color:var(--ct-white); flex:none; }
.brand:hover { color:var(--ct-white); }
.brand-word,.brand .brand-word {
	font-family:var(--ct-font-en); font-weight:700; font-size:.95rem; line-height:.95;
	letter-spacing:-.02em; text-transform:uppercase;
}
.brand-mark { display:inline-flex; }
.brand img { max-height:40px; width:auto; }

.primary-nav { display:none; }        /* shown on desktop via media query */
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a { font-size:15px; font-weight:600; color:var(--ct-neutral-300); transition:color var(--fast); }
.nav-links a:hover { color:var(--ct-green-400); }

.icon-btn {
	display:none; width:40px; height:40px; border-radius:var(--radius-pill);
	border:1px solid var(--ct-neutral-600); background:transparent; color:var(--ct-white);
	font-family:var(--ct-font-en); font-size:15px; align-items:center; justify-content:center;
	cursor:pointer; padding:0; transition:border-color var(--fast);
}
.icon-btn:hover { border-color:var(--ct-green-500); }
#dark-toggle span[aria-hidden] { font-size:18px; }

.hamburger {
	display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
	width:40px; height:40px; border-radius:var(--radius-pill);
	border:1px solid var(--ct-neutral-600); background:transparent; color:var(--ct-white);
	cursor:pointer; padding:0;
}
.hamburger span:not(.screen-reader-text) { width:16px; height:2px; background:currentColor; }

.mobile-menu { background:var(--ct-charcoal-900); border-top:1px solid var(--ct-neutral-700); }
.mobile-menu[hidden] { display:none; }
.mobile-menu .container { padding-block:8px 16px; }
.mobile-nav-links { list-style:none; display:grid; }
.mobile-nav-links a {
	display:block; padding:14px 0; font-size:16px; font-weight:600;
	color:var(--ct-neutral-200); border-bottom:1px solid var(--ct-neutral-700);
}
.mobile-nav-links a:hover { color:var(--ct-green-400); }
.mobile-menu__actions { display:flex; gap:12px; padding-top:14px; }
/* .icon-btn is hidden by default (desktop-only in the bar); force-show inside the mobile panel */
.icon-btn--mobile { display:inline-flex; }

/* ---------- 6) HERO ------------------------------------------------------ */
.hero {
	background:var(--ct-charcoal-900); color:var(--ct-white);
	background-image:
		radial-gradient(ellipse 60% 45% at 18% 8%, rgba(98,210,112,.13), transparent 70%),
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size:auto, 40px 40px, 40px 40px;
}
.hero-grid {
	display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,6vw,5rem);
	align-items:center;
	padding-block:clamp(4.5rem,10vw,8rem) clamp(5rem,11vw,8.5rem);
}
.hero-badge {
	display:inline-flex; align-items:center; gap:12px; margin:0 0 28px;
	border:1px solid rgba(98,210,112,.55); color:var(--ct-green-400);
	border-radius:var(--radius-pill); padding:.35rem 1rem; font-size:14px; font-weight:600;
}
.hero-badge .dot { width:7px; height:7px; background:var(--ct-green-500); flex:none; }
/* Hero headline — mobile-first: 34px, then 42px (tablet), then clamp (desktop). */
.hero-title { font-size:34px; line-height:1.18; margin:0 0 28px; }
/* Green highlight in the hero: slightly smaller + tighter so it stays strong but never dominates. */
.hero-title .mark {
	display:inline-block;
	font-size:.9em;
	line-height:1.15;
	padding:.03em .2em;
	vertical-align:baseline;
}
.hero-lead {
	font-size:clamp(17px,1.6vw,19px); line-height:2; margin:0 0 48px;
	max-width:52ch; color:var(--ct-neutral-300);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.hero-actions .btn { flex:1 1 220px; max-width:320px; }
.hero-reassure { margin:0; font-size:14px; color:var(--ct-neutral-400); }

/* Hero decorative "path" card (kept modest so it doesn't dominate the hero) */
.hero-visual { position:relative; display:flex; justify-content:center; padding:32px 12px 12px; }
.hero-frame { position:absolute; inset-inline-end:6px; bottom:-8px; width:min(360px,90%); height:88%; border:2px solid var(--ct-green-500); z-index:0; }
.hero-pixel { position:absolute; top:0; inset-inline-end:0; z-index:0; }
.path-card {
	position:relative; z-index:1; width:min(360px,100%);
	background:var(--ct-white); color:var(--ct-charcoal-900);
	border:2px solid var(--ct-charcoal-900); box-shadow:var(--shadow-2);
}
.path-card__head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; border-bottom:2px solid var(--ct-charcoal-900); }
.path-card__title { font-weight:700; }
.path-card__dots { display:inline-flex; gap:4px; }
.path-card__dots i { width:7px; height:7px; background:var(--ct-neutral-300); }
.path-card__dots i.on { background:var(--ct-green-500); }
.path-card__body { display:grid; gap:20px; padding:24px; }
.path-row { display:grid; gap:8px; }
.path-row__meta { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.path-row__name { font-weight:600; font-size:14px; }
.path-row__pct { font-family:var(--ct-font-en); font-size:12px; color:var(--pg-muted); }
.path-row__cells { display:flex; gap:3px; }
.path-row__cells .cell { width:14px; height:8px; background:var(--ct-neutral-200); }
.path-row__cells .cell--on { background:var(--ct-green-500); }
.path-card__foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 24px; border-top:1px solid var(--ct-neutral-200); font-size:12px; color:var(--pg-muted); }
.path-card__foot .en { letter-spacing:.08em; text-transform:uppercase; }

/* ---------- 7) PROBLEM --------------------------------------------------- */
.problem-grid { display:grid; grid-template-columns:1fr; gap:clamp(3rem,6vw,5rem); align-items:start; }
.problem-intro h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 32px; max-width:22ch; }
.loop { display:grid; gap:12px; max-width:380px; }
.loop__label { font-size:14px; font-weight:700; color:var(--pg-muted); }
.loop__chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:var(--pg-muted); }
.loop__chip { display:inline-flex; align-items:center; gap:8px; }
.pill { border:1px solid var(--pg-line); border-radius:var(--radius-pill); padding:.25rem .8rem; }
.pill--danger { border-color:var(--ct-danger); color:var(--ct-danger); }
.loop__chip .arrow { color:var(--ct-neutral-400); }

.pain-list { list-style:none; display:grid; border-top:2px solid var(--pg-strong); }
.pain-item { display:flex; gap:24px; align-items:baseline; padding:24px 0; border-bottom:1px solid var(--pg-line); }
.pain-item__n { font-family:var(--ct-font-en); font-weight:600; font-size:18px; color:var(--ct-green-600); min-width:2.4ch; }
.pain-item__t { font-weight:600; font-size:clamp(16px,1.5vw,19px); line-height:1.7; }

/* ---------- 8) SOLUTION -------------------------------------------------- */
.solution__title { font-size:clamp(28px,4.5vw,44px); margin:0 0 48px; max-width:26ch; }
.ba { display:grid; grid-template-columns:1fr; border:2px solid var(--pg-strong); background:var(--pg-card); }
.ba__col { padding:clamp(2rem,4vw,3.5rem); display:flex; flex-direction:column; gap:24px; }
.ba__col--before { color:var(--pg-muted); }
.ba__col--after { background:var(--ct-green-500); color:var(--ct-charcoal-900); border-top:2px solid var(--pg-strong); }
.ba__heading { font-weight:700; font-size:clamp(20px,2vw,26px); margin:0; }
.ba__list { list-style:none; display:grid; gap:20px; line-height:1.7; }
.ba__list li { display:flex; gap:12px; align-items:baseline; }
.ba__col--after .ba__list li { font-weight:500; }
.tag { width:fit-content; border-radius:var(--radius-pill); padding:.25rem .8rem; font-size:12px; font-weight:700; }
.tag--muted { border:1px solid var(--pg-muted); color:var(--pg-muted); }
.tag--dark { background:var(--ct-charcoal-900); color:var(--ct-white); padding:.3rem .85rem; }

/* ---------- 9) PROGRAMS -------------------------------------------------- */
.programs h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 48px; }
.programs-grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:stretch; }
.program-card {
	display:flex; flex-direction:column; background:var(--pg-card); color:var(--pg-text);
	border:2px solid var(--pg-strong); transition:transform var(--normal) var(--ease);
}
.program-card:hover { transform:translateY(-6px); }
.program-card--rec { background:var(--ct-green-500); color:var(--ct-charcoal-900); }
.program-card__banner { background:var(--ct-charcoal-900); color:var(--ct-white); padding:.45rem 32px; font-size:12px; font-weight:700; }
.program-card__body { padding:32px; display:flex; flex-direction:column; gap:20px; flex:1; }
.program-card__top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.program-card__eyebrow { font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.program-card__level { border:1px solid currentColor; border-radius:var(--radius-pill); padding:.2rem .7rem; font-size:12px; font-weight:700; }
.program-card__title { font-family:var(--ct-font-en); font-size:clamp(21px,2vw,26px); font-weight:600; line-height:1.12; letter-spacing:-.02em; margin:0; }
.program-card__desc { margin:0; line-height:1.85; }
.program-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:auto; padding-top:20px; border-top:1px solid rgba(128,128,128,.35); font-size:14px; line-height:1.6; }
.program-card__meta .lbl { font-weight:700; display:block; opacity:.75; font-size:12px; }
.program-card__notes { display:grid; gap:12px; font-size:14px; line-height:1.7; }
.program-card .btn--ghost { color:currentColor; border-color:currentColor; }

/* ---------- 10) AUDIENCE ------------------------------------------------- */
.audience { border-top:1px solid var(--pg-line); }
.audience__inner { text-align:center; }
.audience__inner .kicker { justify-content:center; }
.audience h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 40px; }
.audience-list { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 24px; max-width:900px; margin-inline:auto; }
.audience-list li { display:inline-flex; align-items:center; gap:16px; font-weight:600; font-size:clamp(19px,2.2vw,27px); }
.audience-list .bullet { width:10px; height:10px; }

/* ---------- 11) WHY ------------------------------------------------------ */
.why h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 48px; }
.why-grid { display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem) 32px; }
.why-item { border-top:4px solid var(--pg-strong); padding-top:20px; }
.why-item__n { font-family:var(--ct-font-en); font-weight:600; color:var(--ct-green-600); font-size:14px; letter-spacing:.08em; }
.why-item__t { font-size:clamp(18px,1.8vw,22px); margin:12px 0; }
.why-item__d { color:var(--pg-muted); line-height:1.85; margin:0; }

/* ---------- 12) HOW IT WORKS -------------------------------------------- */
.how__inner { max-width:880px; margin-inline:auto; padding-inline:var(--gutter); }
.how h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 48px; }
.how .kicker { color:var(--ct-neutral-400); }
.steps { list-style:none; display:grid; }
.step { display:flex; gap:clamp(1.5rem,3vw,2.5rem); }
.step__rail { display:flex; flex-direction:column; align-items:center; flex:none; }
.step__n { width:48px; height:48px; background:var(--ct-green-500); color:var(--ct-charcoal-900); font-family:var(--ct-font-en); font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; }
.step__line { width:2px; flex:1; background:var(--ct-neutral-600); margin:8px 0; }
.step__content { padding-top:10px; padding-bottom:clamp(2rem,4vw,3rem); }
.step__t { font-size:clamp(19px,2vw,23px); margin:0 0 8px; }
.step__d { color:var(--ct-neutral-400); line-height:1.8; margin:0; }

/* ---------- 13) TRUST ---------------------------------------------------- */
.trust h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 48px; max-width:26ch; }
.trust-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.proof-card { border:2px solid var(--pg-strong); background:var(--pg-card); padding:28px; display:flex; flex-direction:column; gap:12px; }
.proof-card__sq { width:10px; height:10px; background:var(--ct-green-500); }
.proof-card__t { font-size:clamp(17px,1.7vw,20px); margin:0; }
.proof-card__d { color:var(--pg-muted); line-height:1.8; font-size:15px; margin:0; }

/* ---------- 14) REGISTRATION -------------------------------------------- */
.register-grid { display:grid; grid-template-columns:1fr; gap:clamp(3rem,6vw,5.5rem); align-items:start; }
.register h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 24px; }
.register-lead { line-height:1.95; color:var(--pg-muted); margin:0 0 32px; max-width:44ch; font-size:17px; }
.register-benefits { list-style:none; display:grid; gap:20px; margin:0 0 32px; }
.register-benefits li { display:flex; gap:12px; align-items:baseline; line-height:1.7; font-weight:500; }
.register-alt { border-top:1px solid var(--pg-line); padding-top:24px; display:grid; gap:16px; justify-items:start; }
.register-alt span { font-size:14px; color:var(--pg-muted); }

.lead-form-wrap { position:relative; }
.lead-form { background:var(--pg-card); border:2px solid var(--pg-strong); box-shadow:var(--shadow-2); padding:clamp(24px,4vw,48px); display:grid; gap:20px; }
.field { display:grid; gap:8px; }
.field-row { display:grid; grid-template-columns:1fr; gap:20px; }
.field label { font-size:14px; font-weight:600; }
.field .req { color:var(--ct-danger); }
.field input,.field select,.field textarea {
	width:100%; min-height:46px; border:2px solid var(--pg-strong); border-radius:var(--radius-sm);
	padding:.6rem .85rem; background:var(--pg-card); color:var(--pg-text); font:inherit;
}
.field textarea { min-height:96px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { outline:3px solid var(--ct-green-500); outline-offset:1px; border-color:var(--ct-green-600); }
.form-support { margin:0; font-size:13px; text-align:center; line-height:1.7; font-weight:600; color:var(--pg-text); }
.form-privacy { margin:0; font-size:12px; text-align:center; line-height:1.7; color:var(--pg-muted); }

.lead-success { background:var(--pg-card); border:2px solid var(--pg-strong); box-shadow:var(--shadow-2); padding:64px 32px; text-align:center; display:grid; gap:16px; justify-items:center; }
.lead-success[hidden] { display:none; }
.lead-success__t { font-weight:700; font-size:24px; margin:0; }
.lead-success__d { color:var(--pg-muted); line-height:1.8; margin:0; }

/* ---------- 15) FAQ ------------------------------------------------------ */
.faq__inner { max-width:780px; margin-inline:auto; padding-inline:var(--gutter); }
.faq h2 { font-size:clamp(28px,4.5vw,44px); margin:0 0 48px; }
.faq-list { display:grid; border-top:2px solid var(--pg-strong); }
.faq-item { border-bottom:1px solid var(--pg-line); }
.faq-item__q { cursor:pointer; padding:24px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item__q::-webkit-details-marker { display:none; }
.faq-item__q h3 { margin:0; font-weight:700; font-size:clamp(17px,1.7vw,21px); line-height:1.5; }
.faq-item__icon { color:var(--ct-green-600); font-weight:600; font-size:22px; line-height:1; transition:transform var(--fast) var(--ease); }
.faq-item[open] .faq-item__icon { transform:rotate(45deg); }
.faq-item__a { margin:0; padding:0 0 24px; line-height:1.95; color:var(--pg-muted); max-width:58ch; }

/* ---------- 16) FINAL CTA ------------------------------------------------ */
.final-cta {
	background-image:
		radial-gradient(ellipse 55% 50% at 50% 0%, rgba(98,210,112,.12), transparent 70%),
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size:auto, 40px 40px, 40px 40px;
}
.final-cta__inner { text-align:center; display:grid; justify-items:center; gap:32px; }
.final-cta__title { font-size:clamp(30px,5vw,54px); line-height:1.28; margin:0; max-width:22ch; }
.final-cta__actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.final-cta__note { margin:0; color:var(--ct-neutral-400); font-size:14px; }

/* ---------- 17) FOOTER + MOBILE STICKY BAR ------------------------------ */
.site-footer { background:var(--ct-charcoal-900); color:var(--ct-white); border-top:1px solid var(--ct-neutral-700); }
.footer-inner { display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding-block:32px; }
.brand--footer .brand-word { font-size:.85rem; }
.footer-nav .footer-links { list-style:none; display:flex; flex-wrap:wrap; gap:20px; }
.footer-links a { font-size:14px; color:var(--ct-neutral-300); }
.footer-links a:hover { color:var(--ct-green-400); }
.footer-copy { margin:0; font-size:14px; color:var(--ct-neutral-400); }

.mobile-cta-bar {
	display:none; position:fixed; bottom:0; inset-inline:0; z-index:60; height:64px;
	background:rgba(51,51,51,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
	border-top:2px solid var(--ct-green-500); align-items:center; gap:10px; padding:0 16px;
}
.mobile-cta-bar .btn { height:44px; padding:0 16px; }
.mobile-cta-bar .btn--brand { flex:1.4; }
.mobile-cta-bar .btn--ghost-dark { flex:1; }

/* Floating WhatsApp button — hidden by default; shown only under 768px (see responsive) */
.wa-fab { display:none; }
/* JS adds this while the hero is on screen so the button never overlaps the hero */
.wa-fab--hidden { display:none !important; }

/* Lang toast */
.lang-toast {
	position:fixed; bottom:84px; inset-inline:0; display:flex; justify-content:center;
	z-index:70; pointer-events:none; opacity:0; transition:opacity var(--normal);
}
.lang-toast.is-visible { opacity:1; }
.lang-toast span { background:var(--ct-charcoal-900); color:var(--ct-white); border:1px solid var(--ct-green-500); padding:10px 20px; font-size:14px; font-weight:600; }

/* ---------- 18) BLOG TEMPLATES ------------------------------------------ */
.page-head { margin-bottom:40px; }
.page-head__title { font-size:clamp(28px,4.5vw,44px); }
.page-head__desc { color:var(--pg-muted); }
.post-list { display:grid; gap:40px; }
.post-card { display:grid; gap:16px; }
.post-card__thumb img { width:100%; border:2px solid var(--pg-strong); }
.post-card__meta { font-size:13px; color:var(--pg-muted); }
.post-card__title { font-size:clamp(20px,2.5vw,28px); margin:0; }
.post-card__title a { color:var(--pg-text); }
.post-card__title a:hover { color:var(--ct-green-700); }
.post-card__excerpt { color:var(--pg-muted); margin:0; }
.post-card__more { font-weight:700; color:var(--ct-green-700); }

.entry__figure { margin:0 0 32px; }
.entry__figure img { border:2px solid var(--pg-strong); }
.entry__content { line-height:1.95; }
.entry__content h2 { font-size:clamp(24px,3vw,32px); margin-top:1.5em; }
.entry__content h3 { font-size:clamp(20px,2.5vw,26px); margin-top:1.3em; }
.entry__content img { margin:1.5em 0; }
.entry__content a { text-decoration:underline; }
.entry__content blockquote { border-inline-start:4px solid var(--ct-green-500); margin:1.5em 0; padding-inline-start:20px; color:var(--pg-muted); }
.entry__content pre { background:var(--ct-charcoal-900); color:#fff; padding:20px; overflow-x:auto; border-radius:var(--radius-sm); }
.entry__content code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.entry__tags { margin-top:32px; font-size:14px; }
.entry__tags a { display:inline-block; border:1px solid var(--pg-line); border-radius:var(--radius-pill); padding:.25rem .8rem; margin:0 0 8px 8px; color:var(--pg-muted); }

.post-nav { display:flex; justify-content:space-between; gap:24px; margin:48px 0; font-weight:600; }
.pagination { margin-top:48px; }
.pagination .nav-links { justify-content:center; gap:12px; flex-wrap:wrap; }
.pagination a,.pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--pg-line); }
.pagination .current { background:var(--ct-green-500); border-color:var(--ct-green-500); color:var(--ct-charcoal-900); font-weight:700; }

.search-form { display:flex; gap:8px; }
.search-form .search-field { flex:1; min-height:46px; border:2px solid var(--pg-strong); border-radius:var(--radius-sm); padding:.6rem .85rem; font:inherit; background:var(--pg-card); color:var(--pg-text); }
.search-form .search-submit { height:46px; padding:0 20px; border:none; background:var(--ct-green-500); color:var(--ct-charcoal-900); font-weight:700; border-radius:var(--radius-sm); cursor:pointer; }

.comment-list { list-style:none; }
.comment-list .comment { border-top:1px solid var(--pg-line); padding:20px 0; }
.comment-respond input,.comment-respond textarea { width:100%; border:2px solid var(--pg-strong); border-radius:var(--radius-sm); padding:.6rem .85rem; font:inherit; margin-bottom:12px; background:var(--pg-card); color:var(--pg-text); }

/* ---------- 19) DARK MODE ----------------------------------------------- */
/* Toggled by JS adding data-theme="dark" on <html>. The always-dark sections
   (hero/how/final-cta/header/footer) keep charcoal in both themes. */
:root[data-theme="dark"] {
	--pg-bg:#333333; --pg-bg-subtle:#3a3a3a; --pg-card:#3a3a3a;
	--pg-text:#ffffff; --pg-muted:#a8a8a8; --pg-line:#5c5c5c; --pg-strong:#f4f4f4;
}

/* ---------- 20) RESPONSIVE ---------------------------------------------- */
/* Tablet and up */
@media (min-width:768px) {
	.field-row { grid-template-columns:1fr 1fr; }
	/* Tablet: text (wider) on the right, visual card (narrower) on the left in RTL. */
	.hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; }
	.hero-title { font-size:40px; }
	.problem-grid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
	.ba { grid-template-columns:1fr 1fr; }
	.ba__col--after { border-top:0; border-inline-start:2px solid var(--pg-strong); }
	.programs-grid { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
	.why-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
	.trust-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
	.register-grid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
	.post-card { grid-template-columns:280px 1fr; align-items:start; }
}

/* Desktop nav */
@media (min-width:1024px) {
	:root { --nav-h:76px; }
	.nav-inner { height:76px; }
	.primary-nav { display:block; }
	.icon-btn { display:inline-flex; }
	.hamburger { display:none; }
	/* Desktop hero headline: fluid 40→54px. */
	.hero-title { font-size:clamp(40px,4vw,54px); line-height:1.18; }
	/* Never show the mobile drop-down on desktop (e.g. if left open then resized). */
	.mobile-menu { display:none !important; }
}

/* Mobile-only: sticky CTA bar + space for it, hide desktop-only bits */
@media (max-width:1023px) {
	.mobile-cta-bar { display:flex; }
	body.is-front-page { padding-bottom:64px; }
	/* Compact header CTA so logo + CTA + hamburger never crowd on small screens */
	.nav-end { gap:8px; }
	.btn--nav { height:40px; padding:0 16px; font-size:14px; }
}

/* ---- Phones (< 768px): fix the hero + floating WhatsApp button ---- */
@media (max-width:767px) {
	/* 6) Hero: text-only — decorative progress card fully hidden */
	.hero-grid { grid-template-columns:1fr; gap:1.5rem; padding-block:56px 48px; }
	.hero-copy { text-align:center; }
	.hero-badge { margin-inline:auto; }
	.hero-visual { display:none; }

	/* 4) Hero title */
	.hero-title { font-size:30px; line-height:1.3; text-align:center; max-width:100%; overflow-wrap:normal; margin:0 0 20px; }

	/* 3) Green highlight → small inline pill; never a full-width block */
	.hero-title .mark { display:inline; font-size:.95em; line-height:inherit; padding:0 6px; border-radius:8px; }

	/* 5a) Subtitle: clearly under the title, with a gap above the buttons */
	.hero-lead { font-size:16px; line-height:1.8; text-align:center; max-width:100%; margin:0 auto 28px; }

	/* 5b) CTA buttons: stacked below the full title, full width up to 320px */
	.hero-actions { flex-direction:column; align-items:center; gap:12px; margin-top:24px; margin-bottom:16px; }
	.hero-actions .btn { flex:none; width:100%; max-width:320px; }
	.hero-reassure { text-align:center; }

	/* 2) Safe bottom spacing so the floating button never covers content */
	.mobile-cta-bar { display:none; }
	body,
	body.is-front-page { padding-bottom:80px; }

	/* 1) Floating WhatsApp button — fixed bottom-left, out of the content flow.
	   It is also hidden while the hero is on screen (toggled by JS) so it can
	   never sit over the hero title or CTA buttons. */
	.wa-fab {
		display:flex; align-items:center; justify-content:center;
		position:fixed; bottom:18px; left:18px; width:52px; height:52px;
		border-radius:50%; background:#25d366; color:#fff; z-index:999;
		box-shadow:0 6px 18px rgba(0,0,0,.28);
		transition:transform var(--fast) var(--ease);
	}
	.wa-fab:hover,.wa-fab:focus-visible { color:#fff; transform:translateY(-2px); }
	.wa-fab svg { width:28px; height:28px; display:block; }

	/* 7) Header: keep logo / CTA / menu aligned, trim height slightly */
	.nav-inner { height:60px; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto; }
	* { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}