@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ==========================================================
   Aziz GeoVerse — brand system
   Dark navy/charcoal surfaces · off-white neutrals · brand green accent
   (accent follows the official logo — adjust --green / --green-deep
   here if the brand color changes; one place only)
   ========================================================== */
:root {
  --ink: #0d1b2a;
  --ink-2: #132435;
  --ink-3: #1a3049;
  --bg: #f5f7f7;
  --bg-soft: #edf1f1;
  --surface: #ffffff;
  --text: #12202e;
  --muted: #54677a;
  --text-inv: #eef4f8;
  --muted-inv: #9fb2c4;
  --line: rgba(13, 27, 42, .14);
  --line-inv: rgba(238, 244, 248, .16);
  --green: #a8ed68;
  --green-deep: #35802f;
  --green-ink: #0a190e;
  --cyan: #67d8c4;
  --danger: #e0684f;
  /* Technical color coding for the CAD → GIS headline only
     (inspired by AutoCAD red / ArcGIS Pro cyan — no logos, no affiliation) */
  --cad: #e5484d;
  --gis: #6fd3e7;
  /* Refined brand accent — clean, crisp technical emerald */
  --neon: #a8ed68;
  --radius: 20px;
  /* Motion tokens — one coherent motion language for the whole page */
  --motion-fast: .25s;
  --motion-mid: .45s;
  --motion-normal: .65s;
  --motion-slow: 1.3s;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Cairo, Arial, sans-serif;
  line-height: 1.75;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: linear-gradient(rgba(13,27,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,42,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 8%, black, transparent 62%);
  animation: grid-drift 90s linear infinite;
}
/* Almost-subconscious GIS grid drift (compositor-only transform, 52px = one tile) */
@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-52px, 52px, 0); }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1160px, calc(100% - 40px)); margin: auto; position: relative; }
.section { padding: 84px 0; position: relative; }
/* Section rhythm — spacing varies with section importance,
   so the page reads as one continuous story, not stacked blocks. */
.cost { padding: 64px 0; }
#new-way { padding: 92px 0; }
.proof { padding: 92px 0; }
.about { padding: 72px 0; }
.audience-section { padding: 64px 0; }
.skillset { padding: 72px 0; }
.registration { padding: 92px 0; }
.faq-section { padding: 76px 0; }
main section[id], main [id] { scroll-margin-top: 84px; }
.eyebrow { color: var(--green-deep); font: 700 .8rem/1.4 'Space Grotesk', Cairo, sans-serif; letter-spacing: .04em; }
/* Unified heading scale + controlled widths so Arabic wraps naturally */
/* Major section headings: centered presentation; body copy stays RTL start */
.section-title { max-width: 680px; margin: 16px auto 18px; text-align: center; font-size: clamp(1.75rem, 2.9vw, 2.7rem); line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.section .container > .eyebrow { display: block; text-align: center; }
.section-copy { max-width: 640px; color: var(--muted); font-size: 1.05rem; }
.section-copy.centered { margin: 30px auto 0; text-align: center; }
.pull-line { margin: 44px auto 0; max-width: 760px; text-align: center; color: var(--green-deep); font-size: clamp(1.1rem, 1.9vw, 1.4rem); font-weight: 800; line-height: 1.7; }
.pull-line.small { margin: 26px 0 16px; max-width: none; text-align: start; font-size: 1.12rem; }
/* Dark section overrides */
.section.dark { background: var(--ink); color: var(--text-inv); }
.section.dark .section-copy { color: var(--muted-inv); }
.section.dark .eyebrow { color: var(--green); }
.section.dark .pull-line { color: var(--green); }

/* ----------------------------------------------------------------------
   Motion system — keyframes shared across the page
   ---------------------------------------------------------------------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes video-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes node-in { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes accent-ring {
  0% { box-shadow: 0 0 0 0 rgba(168,237,104,.4); }
  100% { box-shadow: 0 0 0 16px rgba(168,237,104,0); }
}
@keyframes cta-ring {
  0% { box-shadow: 0 10px 26px rgba(41,84,37,.26), 0 0 0 0 rgba(168,237,104,.5); }
  100% { box-shadow: 0 10px 26px rgba(41,84,37,.26), 0 0 0 20px rgba(168,237,104,0); }
}

/* Scroll progress — 2px brand-green data line, filled by JS (transform only) */
.scroll-progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 90; background: linear-gradient(90deg, var(--green-deep), var(--green)); transform: scaleX(0); transform-origin: 100% 50%; pointer-events: none; }

/* ----------------------------------------------------------------------
   Scroll reveal system (IntersectionObserver adds .in-view)
   ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity var(--motion-normal) ease, transform var(--motion-normal) var(--ease-out), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); transition-delay: 0s; }
/* Scale-in variant (founder portrait) */
.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--motion-slow) ease, transform var(--motion-slow) var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); transition-delay: 0s; }

/* ----------------------------------------------------------------------
   Header (sticky, light) — official transparent logo + compact CTA
   ---------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 10px 0; background: rgba(245,247,247,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); animation: drop-in .6s var(--ease-out) backwards; transition: padding var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease; }
/* Slightly more compact + grounded once the user scrolls */
.site-header.is-scrolled { padding: 7px 0; background: rgba(245,247,247,.97); box-shadow: 0 4px 20px rgba(13,27,42,.07); }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 34px; width: auto; max-width: 180px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(13,27,42,.18)); }
.nav-cta-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.nav-note { color: var(--muted); font-size: .68rem; font-weight: 600; }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 100px; background: var(--neon); color: var(--green-ink); font-size: .82rem; font-weight: 800; box-shadow: 0 4px 12px rgba(41,84,37,.24); transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); }
.nav-cta:hover { transform: translateY(-1px); background: #c9fb98; box-shadow: 0 6px 16px rgba(41,84,37,.32); }
.nav-cta:active { transform: scale(.98); }
.nav-cta .cta-short { display: none; }

/* ----------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 55px; padding: 13px 26px; border: 1px solid transparent; border-radius: 100px; background: var(--neon); color: var(--green-ink); font-weight: 800; transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast); cursor: pointer; font-family: inherit; box-shadow: 0 8px 20px rgba(41,84,37,.22); }
.button:hover { transform: translateY(-2px); background: #c9fb98; box-shadow: 0 12px 30px rgba(41,84,37,.34); filter: brightness(1.03); }
.button:active { transform: translateY(-1px) scale(.98); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.button.secondary:hover { background: rgba(13,27,42,.05); box-shadow: 0 8px 20px rgba(13,27,42,.08); }
/* Primary CTA = strongest accent on the page (no continuous pulse) */
.button.primary { box-shadow: 0 10px 26px rgba(41,84,37,.26); }
/* One-time attention ring when a key WhatsApp CTA enters the viewport */
.button.primary.ring-on { animation: cta-ring .9s var(--ease-smooth) .25s; }
.microcopy { margin: 12px 0 0; color: #7d92a5; font-size: .82rem; }
.section-cta { margin-top: 40px; }
.section-cta a { color: var(--green-deep); font-weight: 800; font-size: 1.02rem; }
.section-cta a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------
   Hero (dark)
   ---------------------------------------------------------------------- */
.hero { background: radial-gradient(circle at 78% 22%, rgba(168,237,104,.12), transparent 32%), radial-gradient(circle at 14% 74%, rgba(103,216,196,.08), transparent 30%), var(--ink); padding: 72px 0 52px; color: var(--text-inv); }
/* Hero entrance — ENTER: staggered, one-shot, CSS-driven (no JS needed).
   fill-mode "backwards" keeps elements in their from-state during the
   delay, then releases to natural styles so hover interactions work. */
.hero-grid > div > *:nth-child(1) { animation: rise-in .6s var(--ease-out) .05s backwards; }
.hero-grid > div > *:nth-child(2) { animation: rise-in .6s var(--ease-out) .15s backwards; }
.hero-grid > div > *:nth-child(3) { animation: rise-in .6s var(--ease-out) .25s backwards; }
.hero-grid > div > *:nth-child(4) { animation: rise-in .6s var(--ease-out) .35s backwards; }
.hero-grid > div > *:nth-child(5) { animation: rise-in .6s var(--ease-out) .42s backwards; }
.hero-grid > div > *:nth-child(6) { animation: rise-in .6s var(--ease-out) .48s backwards; }
.hero-grid > div > *:nth-child(7) { animation: rise-in .6s var(--ease-out) .56s backwards; }
.hero-grid > div > *:nth-child(8) { animation: rise-in .6s var(--ease-out) .64s backwards; }
.hero-grid > div > *:nth-child(9) { animation: rise-in .6s var(--ease-out) .72s backwards; }
/* Two-column hero: copy (start side in RTL) + 16:9 transformation visual.
   Collapses to a single stacked column at ≤850px (see breakpoint below). */
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 46px; align-items: center; }
.hero-copy-col { max-width: 640px; }
/* The supplied RAW CAD → STRUCTURE + NETWORK LOGIC → GIS NETWORK visual —
   subtle border/radius/shadow consistent with the existing design, nothing else */
.hero-visual { margin: 0; width: 100%; max-width: 660px; aspect-ratio: 16 / 9; border: 1px solid rgba(168,237,104,.3); border-radius: 18px; overflow: hidden; background: #0a1522; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: rise-in .7s var(--ease-out) .3s backwards; }
.hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Real "when" indicator (date is announced in the group — no fake dates) */
.hero-date { display: inline-flex; align-items: center; gap: 9px; margin: 4px 0 18px; padding: 7px 14px; border: 1px solid rgba(168,237,104,.4); border-radius: 100px; background: rgba(168,237,104,.1); color: var(--text-inv); font-size: .82rem; font-weight: 700; line-height: 1.5; }
/* WhatsApp status dot — very subtle brightness pulse, no movement */
.hero-date .live-dot { flex: none; animation: dot-pulse 3.4s ease-in-out .3s infinite; }
/* Whole badge breathes gently too — text stays stable and readable */
.hero-date { animation: date-glow 3.4s ease-in-out .3s infinite; }
@keyframes date-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes dot-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.7); }
}
/* Compact presenter credibility line */
.hero-host { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.hero-host-avatar { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(168,237,104,.6); }
.hero-host-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hero-host-name { font-size: .85rem; font-weight: 700; color: var(--text-inv); line-height: 1.45; }
.hero-host-name small { display: block; font-size: .72rem; font-weight: 600; color: var(--muted-inv); }
.hero .eyebrow { color: var(--green); }
/* FREE must read instantly — small solid pill inside the hero eyebrow */
.eyebrow .free-flag { display: inline-block; margin-inline-end: 7px; padding: 3px 10px; border-radius: 100px; background: var(--green); color: var(--green-ink); font-weight: 800; letter-spacing: .08em; line-height: 1.4; vertical-align: 1px; animation: free-glow 3.2s ease-in-out .6s infinite; }
/* Subtle premium lighting pulse on the FREE badge — brightness only, no movement */
@keyframes free-glow {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 rgba(168,237,104,0); }
  50% { filter: brightness(1.15); box-shadow: 0 0 14px rgba(168,237,104,.5); }
}
/* Psychological hook — an insight, not a slogan; visible but clearly
   secondary to the headline (cyan ties it to the GIS-accent idea) */
.hero-hook { margin: 0 auto 4px; max-width: 580px; font-size: clamp(.95rem, 1.6vw, 1.12rem); font-weight: 700; line-height: 1.75; color: var(--gis); }
.hero h1 { margin: 16px 0 18px; max-width: 660px; font-size: clamp(2.1rem, 3.9vw, 3.6rem); line-height: 1.28; letter-spacing: -.035em; text-wrap: balance; }
.hero h1 em { color: var(--green); font-style: normal; }
/* CAD → GIS color coding: red CAD, cyan GIS, green arrow (brand) */
.hero h1 .hl-cad { color: var(--cad); }
.hero h1 .hl-gis { color: var(--gis); }
.hero h1 .hl-arrow { color: var(--green); }
.hero-copy { max-width: 640px; color: var(--muted-inv); font-size: clamp(1rem, 1.4vw, 1.16rem); }
/* Two short paragraphs read tighter as one block */
.hero-copy + .hero-copy { margin-top: 6px; }

/* ----------------------------------------------------------------------
   One-line deeper-value insight — sits between hero and video,
   aspiration without promises
   ---------------------------------------------------------------------- */
.perspective { padding: 34px 0; background: var(--ink-2); border-top: 1px solid var(--line-inv); border-bottom: 1px solid var(--line-inv); }
.perspective-line { margin: 0 auto; max-width: 820px; text-align: center; color: var(--muted-inv); font-size: clamp(1rem, 1.9vw, 1.22rem); font-weight: 700; line-height: 1.95; }
.perspective-line b { color: var(--green); font-weight: 800; }
/* Hero is a centered presentation block (headline + CTA); longer page
   content below stays start-aligned RTL for readability */
.hero-grid > div { text-align: center; }
.hero-journey, .hero-host { justify-content: center; }
/* Three-step process — numbered pills, NO directional arrows
   (avoids RTL/LTR confusion; numbers carry the progression) */
.hero-journey { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 4px; }
.hero-journey .step { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(168,237,104,.4); border-radius: 100px; background: rgba(168,237,104,.09); color: var(--text-inv); font-size: .8rem; font-weight: 700; }
.hero-journey .step b { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(168,237,104,.2); color: var(--green); font: 700 .68rem/1 'Space Grotesk', sans-serif; }
/* Keep technical terms from breaking mid-phrase in RTL text */
.nw { white-space: nowrap; }

/* ----------------------------------------------------------------------
   Video section — dark band right after the hero, central to the experience
   ---------------------------------------------------------------------- */
.video-section { padding: 40px 0 64px; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
/* Video band entrance — appears last in the hero sequence (DISCOVER) */
.video-wrap > *:nth-child(1) { animation: rise-in .6s var(--ease-out) .5s backwards; }
.video-wrap > *:nth-child(2) { animation: rise-in .6s var(--ease-out) .56s backwards; }
.video-wrap > *:nth-child(3) { animation: video-in .7s var(--ease-out) .64s backwards; }
.video-wrap { text-align: center; }
/* Single attention cue above the video — no paragraphs, no "scroll down" */
.video-cue { margin: 0 auto 14px; color: var(--text-inv); font-size: 1.02rem; font-weight: 800; line-height: 1.6; }
.video-cue .cue-arrow { display: inline-block; animation: cue-breathe 2.2s ease-in-out infinite; }
@keyframes cue-breathe {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(3px); }
}
/* One small context line BELOW the video (context after, not before) */
.video-sub { margin: 14px auto 0; max-width: 620px; color: var(--muted-inv); font-size: .82rem; font-weight: 600; }
.video-section .video-shell { margin: 0 auto; max-width: 720px; }

/* ----------------------------------------------------------------------
   Early human credibility — compact band right after the video
   ---------------------------------------------------------------------- */
.credibility { padding: 26px 0; background: var(--bg); }
.cred-card { display: flex; align-items: center; gap: 15px; max-width: 590px; margin: 0 auto; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 24px rgba(13,27,42,.06); }
.cred-avatar { flex: none; display: block; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid var(--green); }
.cred-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.cred-text { text-align: start; }
.cred-text b { display: block; color: var(--text); font-size: 1rem; line-height: 1.4; }
.cred-role { display: block; margin-top: 1px; color: var(--green-deep); font: 700 .78rem/1.5 'Space Grotesk', Cairo, sans-serif; }
.cred-text p { margin: 5px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }
/* Presenter + workflow section (merged: top presenter intro + visual) */
.presenter-workflow { padding: 48px 0; background: var(--bg); }
.presenter-workflow .cred-card { margin-bottom: 34px; }
.cred-line { margin-top: 8px !important; color: var(--text) !important; font-size: .92rem !important; font-weight: 700; line-height: 1.8 !important; }
.cred-line b { color: var(--green-deep); font-weight: 800; }

/* ----------------------------------------------------------------------
   CAD → GIS concept visual — mandatory supplied image, prominent and untouched
   ---------------------------------------------------------------------- */
.pipeline-visual { padding: 58px 0; background: var(--bg); }
.pipeline-figure { margin: 0; }
.pipeline-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(13,27,42,.08); background: #fff; }
.pipeline-figure figcaption { margin-top: 16px; text-align: center; color: var(--muted); font-size: .85rem; font-weight: 600; }
/* Technical flow under the CAD→GIS visual — the markup is dir="ltr" so the
   RTL engine can never reverse the arrows. Horizontal on wide screens,
   stacked with ↓ arrows on small phones (never shrunk unreadable). */
.pipeline-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; text-align: center; }
.pipeline-flow .pf-item { font: 700 .85rem/1.3 'Space Grotesk', Cairo, sans-serif; letter-spacing: .07em; color: var(--text); }
.pipeline-flow .pf-arrow { color: var(--green-deep); font-weight: 800; font-size: 1rem; }
.pipeline-flow .pf-note { flex-basis: 100%; margin-top: 6px; color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ----------------------------------------------------------------------
   Video player — 16:9, optional (config.VIDEO)
   ---------------------------------------------------------------------- */
.video-shell { margin: 26px 0 4px; max-width: 620px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid rgba(168,237,104,.35); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 18%, rgba(168,237,104,.06), transparent 46%), #0a1522; box-shadow: 0 16px 40px rgba(0,0,0,.3); transition: transform var(--motion-mid) var(--ease-smooth), box-shadow var(--motion-mid) var(--ease-smooth); }
/* Subtle hover elevation on pointer devices only */
@media (hover: hover) {
  .video-shell:hover .video-frame { transform: translateY(-4px) scale(1.01); box-shadow: 0 32px 74px rgba(0,0,0,.48); }
}
/* Subtle legibility overlay on the poster — removed once the player mounts */
.video-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,27,42,.22), rgba(13,27,42,.48)); pointer-events: none; }
.video-frame.playing::before { display: none; }
.video-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .85; }
.video-frame iframe,
.video-frame video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; display: block; }
.video-cta-label { position: absolute; bottom: 14px; inset-inline: 12px; z-index: 2; text-align: center; color: #eef4f8; font-size: .85rem; font-weight: 700; text-shadow: 0 1px 10px rgba(0,0,0,.55); pointer-events: none; }
.video-play { position: absolute; inset: 0; margin: auto; z-index: 3; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(168,237,104,.6); background: rgba(13,27,42,.66); color: var(--green); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: pointer; transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease; }
.video-play:hover { transform: scale(1.07); background: var(--green); color: var(--green-ink); box-shadow: 0 0 0 10px rgba(168,237,104,.14); }
.video-play:active { transform: scale(.97); }
.video-play:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Very subtle attention ring around the play button */
.video-play::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(168,237,104,.5); animation: video-pulse 3.2s ease-out infinite; pointer-events: none; }
@keyframes video-pulse {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(1.28); opacity: 0; }
}
/* Placeholder state (no source configured): play stays visible as a
   professional thumbnail affordance; clicking scrolls to registration. */
.video-frame.playing .video-cta-label,
.video-frame.playing .video-play { display: none; }

/* ----------------------------------------------------------------------
   Core problem (narrative + recognition cards)
   ---------------------------------------------------------------------- */
.problem { background: var(--bg-soft); }
.problem .section-copy { max-width: 660px; }
/* Pre-conversion questions — the real checklist a professional asks first */
.problem-questions { list-style: none; margin: 4px 0 10px; padding: 0; max-width: 620px; }
.problem-questions li { position: relative; padding-inline-start: 22px; margin: 8px 0; color: var(--text); font-weight: 700; font-size: 1rem; line-height: 1.6; }
.problem-questions li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep); }
.problem-cards { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.issue-card { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: .92rem; font-weight: 700; line-height: 1.55; }
.issue-card::before { content: ''; display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--green); margin-bottom: 9px; }
/* Social proof — real previous-batch community (historical joining,
   NOT a current membership count). Premium, clean, conversion-focused. */
.social-proof { padding: 44px 0; background: var(--bg); }
.proof-card { max-width: 620px; margin: 0 auto; text-align: center; padding: 30px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 30px rgba(13,27,42,.06); }
/* The number is the focal point: large, green, very subtle glow */
.proof-num { display: block; color: var(--green-deep); font: 800 2.6rem/1.1 'Space Grotesk', Cairo, sans-serif; letter-spacing: -.02em; }
/* One-shot, subtle emphasis when the counter lands on +1,000 */
.proof-num.is-done { animation: num-done .6s var(--ease-out); }
@keyframes num-done {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.04); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}
.proof-label { display: block; margin-top: 8px; color: var(--text); font-size: 1rem; font-weight: 800; }
.proof-card p { margin: 10px auto 0; max-width: 480px; color: var(--muted); font-size: .88rem; line-height: 1.8; }
.proof-card .proof-benefit { margin-top: 6px; font-size: .82rem; }
/* Small elegant community invitation — clearly secondary to the main CTA */
.proof-cta { display: inline-block; margin-top: 16px; padding: 9px 18px; border: 1px solid rgba(53,128,47,.35); border-radius: 100px; background: rgba(168,237,104,.1); color: var(--green-deep); font-size: .85rem; font-weight: 800; line-height: 1.5; text-align: center; transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease; }
.proof-cta:hover { background: rgba(168,237,104,.2); box-shadow: 0 6px 18px rgba(168,237,104,.28); }
.proof-cta:active { transform: scale(.98); }

/* Curiosity — the deeper question behind CAD → GIS (dark section) */
.curiosity-neg { margin: 28px auto 0; max-width: 560px; text-align: center; display: grid; gap: 12px; }
.curiosity-neg p { margin: 0; font-size: clamp(1.35rem, 3.2vw, 1.9rem); font-weight: 800; line-height: 1.5; color: var(--text-inv); }
.curiosity-neg b { color: var(--cad); font-weight: 800; }
.curiosity-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 26px auto 12px; }
.curiosity-flow span:not(.arrow) { padding: 8px 16px; border: 1px solid rgba(168,237,104,.4); border-radius: 100px; background: rgba(168,237,104,.08); color: var(--text-inv); font: 700 .92rem/1.2 'Space Grotesk', Cairo, sans-serif; }
.curiosity-flow .final { border-color: rgba(111,211,231,.55); background: rgba(111,211,231,.12); color: var(--gis); }
.curiosity-flow .arrow { color: var(--green); font-weight: 800; font-size: 1.1rem; }
/* Short curiosity: question + two labeled contrast flows */
.curiosity-q { margin: 18px auto 0; max-width: 640px; text-align: center; color: var(--text-inv); font-size: 1.08rem; font-weight: 700; line-height: 1.9; }
.curiosity-rows { margin-top: 10px; }
.curiosity-flow-label { display: block; text-align: center; margin: 18px auto 8px; font-size: .75rem; font-weight: 800; letter-spacing: .05em; color: var(--muted-inv); }
.curiosity-flow-label.next { color: var(--green); }
.curiosity-flow.old span:not(.arrow) { border-color: rgba(229,72,77,.45); background: rgba(229,72,77,.08); color: var(--muted-inv); }
.curiosity-flow.old .arrow { color: var(--cad); }
.curiosity .curiosity-flow { margin-top: 0; }
/* Concept statement: base text calm, only the key phrase accented */
.curiosity .pull-line { color: var(--text-inv); }
.curiosity .pull-line b { color: var(--green); font-weight: 800; }

/* ----------------------------------------------------------------------
   Cost of the problem
   ---------------------------------------------------------------------- */
.impact-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.impact-grid article { padding: 20px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.impact-grid article:hover { border-color: rgba(53,128,47,.45); background-color: #fbfdf9; }
.impact-grid h3 { margin: 0 0 6px; font-size: .98rem; }
.impact-grid p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }

/* ----------------------------------------------------------------------
   Transformation / mindset (dark)
   ---------------------------------------------------------------------- */
.transform { margin-top: 44px; display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 18px; align-items: stretch; }
.tf-card { padding: 28px 26px; border: 1px solid var(--line-inv); border-radius: 18px; background: var(--ink-2); }
.tf-card.old .tf-main { color: var(--muted-inv); }
.tf-card.new { border-color: rgba(168,237,104,.45); background: linear-gradient(135deg, rgba(168,237,104,.12), rgba(19,36,53,.6)); }
.tf-label { display: block; color: var(--muted-inv); font-size: .8rem; font-weight: 700; margin-bottom: 10px; }
.tf-card.new .tf-label { color: var(--green); }
/* "بعد" receives one soft accent pulse when the transformation reveals */
.tf-card.new.in-view { animation: accent-ring .9s var(--ease-smooth) .35s; }
.tf-main { margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; }
.tf-sub { margin: 10px 0 0; color: var(--muted-inv); font-size: .9rem; }
/* The proper workflow — a vertical system, not a sentence */
.tf-flow { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.tf-flow li { position: relative; padding-inline-start: 22px; color: var(--text-inv); font-weight: 700; font-size: .92rem; font-family: 'Space Grotesk', Cairo, sans-serif; }
.tf-flow li::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
/* BEFORE → AFTER: in RTL, قبل sits on the right and بعد on the left,
   so the forward direction is LEFT on desktop and DOWN on mobile. */
.tf-arrow { align-self: center; color: var(--green); font-size: 1.9rem; font-weight: 800; }
.tf-arrow::before { content: '←'; }

/* ----------------------------------------------------------------------
   Mechanism / Protocol — connected timeline + subtle flow line
   ---------------------------------------------------------------------- */
.workflow-layout { margin-top: 48px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.workflow-layout figure { margin: 0; }
.workflow-layout figure img { width: 100%; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
/* UNDERSTAND: the pipeline draws itself, then data flows one way through it */
.workflow-list { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 12px; }
.workflow-list::before { content: ''; position: absolute; inset-inline-start: 19px; top: 16px; bottom: 16px; width: 2px; background: var(--line); transform: scaleY(0); transform-origin: top; }
.workflow-list.in-view::before { animation: line-grow var(--motion-slow) var(--ease-out) .15s forwards; }
@keyframes line-grow { to { transform: scaleY(1); } }
/* Data packet — slow, one-directional, fades at both ends */
.workflow-list::after { content: ''; position: absolute; inset-inline-start: 18px; top: 16px; width: 2px; height: 20%; background: linear-gradient(180deg, transparent, var(--green-deep), transparent); opacity: 0; pointer-events: none; }
.workflow-list.in-view::after { animation: flow-line 4.5s var(--ease-smooth) 1.5s infinite; }
@keyframes flow-line {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .55; }
  85% { opacity: .55; }
  100% { transform: translateY(370%); opacity: 0; }
}
.workflow-list li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
/* Each node "receives" the data as its step reveals — the animation delay
   mirrors the row's stagger var so the pop lands exactly when the row lands */
.workflow-list li.in-view b { animation: node-in .5s var(--ease-out) var(--rd, 0s) backwards; }
.workflow-list b { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 0 4px var(--bg); color: var(--green-deep); font: 700 .8rem/1 'Space Grotesk', sans-serif; }
.step-title { display: block; font-weight: 800; font-size: .98rem; }
.step-en { display: block; color: var(--muted); font: 600 .72rem/1.6 'Space Grotesk', Cairo, sans-serif; letter-spacing: .05em; }
.step-desc { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.protocol-chips { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-label { color: var(--muted); font-size: .84rem; font-weight: 700; margin-inline-end: 4px; }
.chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); color: var(--text); font: 600 .78rem/1 'Space Grotesk', Cairo, sans-serif; }

/* ----------------------------------------------------------------------
   Radical transparency — real labeled project data
   ---------------------------------------------------------------------- */
.proof-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.transparency-grid { margin-top: 40px; }
.media-card { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.media-card img { width: 100%; max-height: 640px; object-fit: cover; object-position: top; }
.media-card figcaption { padding: 15px 19px; color: var(--muted); font-size: .85rem; }
.card-label { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 5px 12px; border-radius: 100px; background: rgba(7,17,13,.82); color: var(--cyan); font: 600 .72rem/1 'Space Grotesk', Cairo, sans-serif; letter-spacing: .04em; }
.section.dark .media-card { background: var(--ink-2); border-color: var(--line-inv); }
.section.dark .media-card figcaption { color: var(--muted-inv); }
.proof-grid .media-card img { max-height: 460px; }
.transparency-grid .media-card img { max-height: 420px; }
/* Workshop teaser — final Bootcamp visual, natural aspect ratio, no crop */
.workshop-teaser { margin-top: 36px; display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.workshop-teaser img { height: 150px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.workshop-teaser h3 { margin: 0 0 6px; font-size: 1.15rem; }
.workshop-teaser p { margin: 0; color: var(--muted); font-size: .95rem; }
/* Honest bridge to the workshop offer (free webinar ≠ full implementation) */
.experience-transition { margin: 30px auto 0; max-width: 720px; text-align: center; color: var(--green-deep); font-weight: 700; font-size: 1rem; line-height: 1.9; }
/* Automation opportunity: the AI-assist line gets a green accent */
.automation-ai { margin: 22px auto 0; max-width: 640px; text-align: center; color: var(--green); font-weight: 700; font-size: 1.05rem; line-height: 1.9; }
/* Concise line replacing the removed command chips (workflow overview) */
.workflow-note { margin: 26px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: .85rem; font-weight: 600; line-height: 1.8; }

/* ----------------------------------------------------------------------
   Proof (dark) — logical proof + optional real assets
   ---------------------------------------------------------------------- */
.proof-points { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proof-point { padding: 20px; border: 1px solid var(--line-inv); border-radius: 16px; background: var(--ink-2); }
.proof-point b { display: block; color: var(--green); font: 700 .95rem/1.4 'Space Grotesk', Cairo, sans-serif; }
.proof-point span { display: block; margin-top: 6px; color: var(--muted-inv); font-size: .85rem; line-height: 1.6; }
.proof-grid .media-card { border-color: var(--line-inv); background: var(--ink-2); }

/* ----------------------------------------------------------------------
   Founder — text carries the weight, portrait stays small
   ---------------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 54px; align-items: center; }
.portrait { position: relative; }
/* Circular founder portrait — visible brand-green ring, face kept in frame */
.portrait img { width: min(100%, 260px); aspect-ratio: 1; object-fit: cover; object-position: center 28%; border-radius: 50%; border: 2px solid var(--green); box-shadow: 0 18px 44px rgba(13,27,42,.14), 0 0 36px rgba(168,237,104,.14); filter: saturate(.92); }
.about-title { margin: 12px 0 4px; font-size: clamp(1.75rem, 2.9vw, 2.7rem); line-height: 1.3; }
.role { color: var(--green-deep); font-size: .95rem; font-weight: 700; }
.role-sub { color: var(--muted); font-size: .9rem; font-weight: 600; margin-top: 2px; }
.exp-badge { display: inline-block; margin-top: 12px; padding: 7px 14px; border: 1px solid rgba(53,128,47,.3); border-radius: 100px; background: rgba(168,237,104,.12); color: var(--green-deep); font-size: .8rem; font-weight: 700; }
.about-copy { margin-top: 16px; color: var(--muted); max-width: 620px; }
.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ----------------------------------------------------------------------
   Consolidated Audience Section — "هل الويبينار ده مناسب لشغلك؟"
   ---------------------------------------------------------------------- */
.audience-section { padding: 64px 0; }
.audience-roles-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.audience-role-card { padding: 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: start; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.audience-role-card:hover { transform: translateY(-2px); border-color: rgba(53,128,47,.4); box-shadow: 0 10px 24px rgba(13,27,42,.06); }
.audience-role-card h3 { margin: 0 0 6px; color: var(--green-deep); font: 700 .98rem/1.35 'Space Grotesk', Cairo, sans-serif; }
.audience-role-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }

.audience-fit-grid { margin-top: 36px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.fit-card { padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: start; }
.fit-card.is-not-for { background: var(--bg-soft); }
.fit-card h3 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fit-list li { position: relative; padding-inline-start: 24px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.fit-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 0; color: var(--green-deep); font-weight: 800; font-size: 1rem; }
.not-for-list li::before { content: '×'; color: #c4634f; font-weight: 800; font-size: 1rem; }

.audience-exp-notice { margin: 26px auto 0; max-width: 820px; padding: 14px 22px; border: 1px solid rgba(53,128,47,.3); border-radius: 100px; background: rgba(168,237,104,.1); color: var(--text); font-size: .88rem; font-weight: 700; line-height: 1.7; text-align: center; }

/* ----------------------------------------------------------------------
   Career / skillset
   ---------------------------------------------------------------------- */
.skillset { background: var(--bg-soft); }
.skill-ladder { display: grid; justify-items: center; gap: 8px; margin-top: 34px; }
.skill-step { display: block; width: min(100%, 300px); padding: 13px 26px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); text-align: center; font: 700 .98rem/1.3 'Space Grotesk', Cairo, sans-serif; }
.skill-arrow { color: var(--green-deep); font-size: 1.1rem; font-weight: 800; line-height: 1.2; }

/* ----------------------------------------------------------------------
   Card micro-interactions — subtle lift (only after reveal has run)
   ---------------------------------------------------------------------- */
.impact-grid article:hover, .issue-card:hover, .audience-card:hover, .audience-role-card:hover, .fit-card:hover, .workshop-teaser:hover, .value-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(13,27,42,.08);
  transition: opacity .6s ease, transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* ----------------------------------------------------------------------
   Dream buyer resonance
   ---------------------------------------------------------------------- */
.resonance-list { margin: 26px 0 0; display: grid; gap: 12px; max-width: 700px; }
.resonance-list p { margin: 0; padding: 12px 18px; border-right: 3px solid var(--green); border-radius: 0 12px 12px 0; background: rgba(168,237,104,.1); color: var(--text); font-size: .98rem; font-weight: 700; line-height: 1.7; }

/* ----------------------------------------------------------------------
   Steps before registration — "إيه اللي هيحصل بعد التسجيل؟"
   ---------------------------------------------------------------------- */
.post-reg-steps { padding: 56px 0 32px; background: var(--bg); }
.steps-flow-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step-flow-card { padding: 22px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: start; }
.step-flow-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(168,237,104,.16); color: var(--green-deep); font: 700 .9rem/1 'Space Grotesk', sans-serif; margin-bottom: 12px; }
.step-flow-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.step-flow-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }

/* ----------------------------------------------------------------------
   WhatsApp value stack
   ---------------------------------------------------------------------- */
.value-stack { margin-top: 34px; display: grid; gap: 12px; max-width: 780px; }
.value-item { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.value-item b { color: var(--green-deep); font: 700 .85rem/1 'Space Grotesk', sans-serif; }
.value-item span { font-weight: 700; font-size: .95rem; }
/* Prominent form-first notice (WhatsApp gateway section) */
.notice-box { margin: 24px auto 0; max-width: 640px; padding: 14px 20px; border: 1px solid rgba(53,128,47,.35); border-radius: 14px; background: rgba(168,237,104,.1); color: var(--text); font-size: .9rem; font-weight: 700; line-height: 1.8; text-align: center; }

/* ----------------------------------------------------------------------
   Live attendance — attendance, not just registration
   ---------------------------------------------------------------------- */
.live-attendance { padding: 36px 0; }
.live-panel { background: var(--ink); color: var(--text-inv); border-radius: 22px; padding: clamp(28px, 5vw, 48px); text-align: center; box-shadow: 0 24px 60px rgba(13,27,42,.2); }
.live-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(168,237,104,.4); border-radius: 100px; background: rgba(168,237,104,.12); color: var(--green); font: 700 .75rem/1 'Space Grotesk', Cairo, sans-serif; letter-spacing: .08em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.live-panel h2 { margin: 16px 0 12px; color: var(--text-inv); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.4; }
.live-panel p { max-width: 640px; margin: 0 auto; color: var(--muted-inv); }
.live-note { margin-top: 14px; color: var(--green) !important; font-weight: 700; font-size: .9rem; }
.live-date { margin-top: 14px; color: var(--green) !important; font-weight: 800; font-size: 1rem; }

/* ----------------------------------------------------------------------
   Event info — YouTube Live explanation
   ---------------------------------------------------------------------- */
.event-info-section { padding: 48px 0; }
.event-panel { background: var(--ink); color: var(--text-inv); border-radius: 20px; padding: clamp(28px, 4vw, 44px); text-align: center; border: 1px solid var(--line-inv); box-shadow: 0 14px 36px rgba(13,27,42,.1); }
.event-panel h2 { margin: 16px 0 10px; color: var(--text-inv); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.4; }
.event-desc { max-width: 620px; margin: 0 auto 10px; color: var(--text-inv); font-size: 1rem; font-weight: 700; line-height: 1.7; }
.event-note { max-width: 600px; margin: 0 auto; color: var(--muted-inv); font-size: .92rem; line-height: 1.7; }

/* ----------------------------------------------------------------------
   Live attendance bonus (dedicated section)
   ---------------------------------------------------------------------- */
.bonus-section { padding: 36px 0 0; }
.bonus-head { text-align: center; max-width: 640px; margin: 0 auto 24px; }
.bonus-head .section-title, .bonus-head .section-copy { margin-right: auto; margin-left: auto; }

/* ----------------------------------------------------------------------
   Final CTA Section
   ---------------------------------------------------------------------- */
.final-cta-section { padding: 56px 0 16px; background: var(--bg-soft); }

/* ----------------------------------------------------------------------
   Registration & form
   ---------------------------------------------------------------------- */
.registration { background: radial-gradient(circle at 50% 0%, rgba(168,237,104,.16), transparent 42%), var(--bg-soft); }
.reg-steps { margin: 14px 0 0; color: var(--green-deep); font-weight: 800; font-size: 1rem; line-height: 2; }
/* Visible form-first note inside the form card */
.form-note { margin: 10px 0 0; padding: 10px 14px; border-inline-start: 3px solid var(--green-deep); background: rgba(168,237,104,.12); border-radius: 8px; font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.7; }
.registration-head { text-align: center; max-width: 700px; margin: 0 auto 26px; }
.registration-head .section-title, .registration-head .section-copy { margin-right: auto; margin-left: auto; }
.registration-head .button { margin-top: 8px; }
.live-badge { display: inline-block; margin-bottom: 14px; padding: 7px 16px; border: 1px solid rgba(53,128,47,.35); border-radius: 100px; background: rgba(168,237,104,.12); color: var(--green-deep); font-size: .8rem; font-weight: 800; }
/* Countdown — rendered only when WEBINAR_DATE is configured */
.countdown { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; justify-content: center; margin: 18px auto 0; }
.cd-unit { padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.cd-num { display: block; color: var(--text); font: 700 1.25rem/1.1 'Space Grotesk', Cairo, sans-serif; }
.cd-label { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; font-weight: 700; }
/* Live attendance bonus — distinct green-accent card above the form */
.live-bonus { max-width: 680px; margin: 0 auto 22px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 24px 26px; border: 1px solid rgba(53,128,47,.4); border-radius: 18px; background: linear-gradient(135deg, rgba(168,237,104,.16), rgba(255,255,255,.65)); }
.bonus-icon { font-size: 1.6rem; line-height: 1.2; }
.live-bonus h3 { margin: 0 0 6px; font-size: 1.12rem; }
.live-bonus > div > p { margin: 0; color: var(--muted); font-size: .92rem; }
/* One-time accent highlight + icon pop when the bonus card enters */
.live-bonus.in-view { animation: accent-ring .9s var(--ease-smooth) .5s; }
.live-bonus.in-view .bonus-icon { animation: node-in .5s var(--ease-out) .45s backwards; }
.bonus-item { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.bonus-name { display: block; color: var(--text); font-weight: 800; font-size: .95rem; }
.bonus-desc { display: block; margin-top: 3px; color: var(--muted); font-size: .83rem; line-height: 1.6; }
.form-card { max-width: 680px; margin: 0 auto; padding: 31px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 22px 60px rgba(13,27,42,.08); }
.form-card h3 { margin: 0 0 4px; font-size: 1.4rem; }
.form-card > p { margin-top: 0; color: var(--muted); font-size: .88rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #33475c; font-size: .82rem; font-weight: 700; }
input, select { width: 100%; height: 48px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0 13px; font-family: inherit; font-size: 1rem; outline: none; }
/* International phone widget — the wrapper is dir="ltr" so the flag, dial
   code and digits stay in standard LTR order inside the RTL form, while the
   Arabic label above stays RTL. Dropdown is inside the wrapper (form-card has
   no overflow clipping) and flips above the field when the viewport is short. */
.phone-input { direction: ltr; position: relative; display: flex; align-items: stretch; }
.phone-country { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 12px; background: rgba(13,27,42,.04); border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; color: var(--text); font-family: inherit; cursor: pointer; transition: background var(--motion-fast) ease; }
.phone-country:hover { background: rgba(13,27,42,.07); }
.phone-input.is-open .phone-country { background: rgba(168,237,104,.14); border-color: var(--green-deep); }
.phone-flag { font-size: 1.1rem; line-height: 1; }
.phone-code { font-weight: 700; font-size: .92rem; font-family: 'Space Grotesk', Cairo, sans-serif; }
.phone-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; transition: transform .2s ease; }
.phone-input.is-open .phone-caret { transform: rotate(180deg); }
.phone-input input[type="tel"] { flex: 1; min-width: 0; border-radius: 0 10px 10px 0; border-left: 0; }
.phone-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 6px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(13,27,42,.16); max-height: min(320px, 60vh); overflow: hidden; }
.phone-dropdown[hidden] { display: none; }
.phone-search { margin: 10px 10px 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font-family: inherit; font-size: .85rem; outline: none; }
.phone-search:focus { border-color: var(--green-deep); }
.phone-list { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; overscroll-behavior: contain; }
.phone-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: .88rem; }
.phone-row-flag { width: 24px; text-align: center; font-size: 1.1rem; line-height: 1; }
.phone-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-row-dial { color: var(--muted); font: 600 .8rem/1 'Space Grotesk', Cairo, sans-serif; }
.phone-row:hover, .phone-row.is-active { background: rgba(168,237,104,.16); }
.phone-row.is-selected { background: rgba(168,237,104,.22); }
.phone-row.is-selected .phone-row-dial { color: var(--green-deep); font-weight: 800; }
input::placeholder { color: #8a9cab; }
select { appearance: auto; }
input:focus, select:focus { border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(168,237,104,.25); }
.form-card .button { width: 100%; margin-top: 18px; }
.form-card .button:disabled { opacity: .6; cursor: wait; transform: none; }
.form-status { min-height: 22px; margin: 11px 0 0; color: var(--green-deep); font-size: .83rem; }
.form-status a { color: var(--green-deep); font-weight: 700; text-decoration: underline; }
.form-status.is-error { color: var(--danger); }
.form-card .microcopy { color: var(--muted); }

/* ----------------------------------------------------------------------
   Static FAQ Cards — visible by default, zero click noise / tracking noise
   ---------------------------------------------------------------------- */
.faq { max-width: 960px; margin: 0 auto; }
.faq-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.faq-card { padding: 24px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: start; }
.faq-card h3 { margin: 0 0 10px; color: var(--text); font-size: 1.05rem; font-weight: 800; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
.faq-card h3::before { content: '؟'; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(168,237,104,.16); color: var(--green-deep); font: 700 .85rem/1 'Cairo', sans-serif; }
.faq-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.75; }

/* ----------------------------------------------------------------------
   Audience Personas (Section 11)
   ---------------------------------------------------------------------- */
.personas-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.persona-card { padding: 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: start; }
.persona-card b { display: block; color: var(--green-deep); font: 700 .85rem/1.3 'Space Grotesk', Cairo, sans-serif; margin-bottom: 4px; }
.persona-card span { display: block; font-size: .88rem; font-weight: 700; color: var(--text); line-height: 1.5; }

/* ----------------------------------------------------------------------
   Free Live-Attendance Gifts (Section 17)
   ---------------------------------------------------------------------- */
.gifts-box { max-width: 720px; margin: 0 auto; padding: 32px 28px; border: 1px solid rgba(53,128,47,.4); border-radius: 20px; background: linear-gradient(135deg, rgba(168,237,104,.14), rgba(255,255,255,.7)); text-align: center; }
.gifts-icon { font-size: 2.2rem; margin-bottom: 12px; }
.gifts-box h3 { margin: 0 0 10px; font-size: 1.35rem; color: var(--text); font-weight: 800; }
.gifts-box p { margin: 0 auto 12px; max-width: 600px; color: var(--muted); font-size: .95rem; line-height: 1.8; }
.gifts-notice { display: inline-block; margin-top: 8px; padding: 8px 18px; border-radius: 100px; background: rgba(13,27,42,.06); color: var(--green-deep); font-size: .84rem; font-weight: 800; }

.live-previous-notice { margin-top: 16px; padding: 12px 18px; border-radius: 12px; background: rgba(238,244,248,.08); color: var(--muted-inv); font-size: .88rem; line-height: 1.7; text-align: center; border: 1px solid rgba(238,244,248,.12); }
.gateway-subnotice { margin: 12px auto 0; text-align: center; color: var(--muted); font-size: .85rem; font-weight: 700; }

/* ----------------------------------------------------------------------
   Sticky mobile CTA bar (safe-area aware) — an unmistakable BUTTON,
   not a static footer. Soft neon-like brightness/glow pulse every ~3s,
   then fades back to normal — no shake, no bounce, no scaling.
   ---------------------------------------------------------------------- */
.mobile-cta { display: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobile-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 12px 26px;
  border: 1px solid rgba(41,84,37,.3); border-radius: 100px;
  background: var(--neon); color: var(--green-ink);
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em;
  box-shadow: 0 8px 18px rgba(41,84,37,.3), 0 0 14px rgba(183,249,126,.18), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
  animation: cta-neon 3s ease-in-out infinite;
}
.mobile-cta-arrow { font-weight: 800; font-size: 1.05rem; line-height: 1; }
/* Subtle breathing (~3s): gentle brightness and soft glow rise and fall —
   calm, premium, no scale, no flash */
@keyframes cta-neon {
  0%, 100% { filter: brightness(1); box-shadow: 0 4px 14px rgba(41,84,37,.25), inset 0 1px 0 rgba(255,255,255,.4); }
  50% { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(41,84,37,.32), 0 0 12px rgba(168,237,104,.2), inset 0 1px 0 rgba(255,255,255,.4); }
}

/* ----------------------------------------------------------------------
   Footer — clean, professional, organized
   ---------------------------------------------------------------------- */
.site-footer { padding: 42px 0 32px; background: var(--ink); border-top: 1px solid var(--line-inv); color: var(--muted-inv); text-align: center; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-social-title { margin: 0; color: var(--text-inv); font-size: .94rem; font-weight: 700; letter-spacing: -.01em; }
.footer-social-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.footer-social-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border: 1px solid var(--line-inv); border-radius: 100px; background: rgba(238,244,248,.04); color: var(--text-inv); font: 600 .86rem/1 'Space Grotesk', Cairo, sans-serif; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.footer-social-link:hover { background: rgba(168,237,104,.12); color: var(--green); border-color: rgba(168,237,104,.4); transform: translateY(-1px); }
.footer-social-link:active { transform: scale(.98); }
.footer-social-link .social-icon { flex: none; display: block; opacity: .85; transition: opacity var(--motion-fast) ease; }
.footer-social-link:hover .social-icon { opacity: 1; }
.footer-copy { margin: 8px 0 0; color: #7d92a5; font-size: .78rem; font-weight: 500; }

/* ----------------------------------------------------------------------
   Thank-you page (dark)
   ---------------------------------------------------------------------- */
.thank-you-page { min-height: 100vh; display: grid; place-items: center; padding: 30px 0; background: radial-gradient(circle at 50% 30%, rgba(168,237,104,.14), transparent 34%), var(--ink); }
.thank-you-card { max-width: 650px; padding: clamp(32px, 6vw, 66px); text-align: center; border: 1px solid var(--line-inv); border-radius: 28px; background: rgba(19,36,53,.85); color: var(--text-inv); }
.success-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: rgba(168,237,104,.16); color: var(--green); font-size: 1.8rem; }
.thank-you-card .eyebrow { color: var(--green); }
.thank-you-card h1 { margin: 0; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.3; }
.thank-you-card p { color: var(--muted-inv); }
.thank-you-card .button { width: 100%; margin-top: 15px; }
.thank-you-card .microcopy { color: var(--muted-inv); }
.thank-you-card .ty-next { margin-top: 14px; font-size: 1.1rem; font-weight: 700; color: var(--text-inv); }
.thank-you-card .ty-lead { margin-top: 22px; font-weight: 700; color: var(--text-inv); }
.ty-checklist { list-style: none; margin: 12px 0 24px; padding: 0; display: grid; gap: 10px; text-align: start; }
.ty-checklist li { position: relative; padding-inline-start: 32px; font-weight: 700; font-size: .95rem; color: var(--text-inv); }
.ty-checklist li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 0; color: var(--green); font-weight: 800; font-size: 1.05rem; }
/* Activation hierarchy — "last important step" note + strong headline */
.thank-you-card .ty-step-note { margin-top: 18px; color: var(--green); font-weight: 800; font-size: 1.02rem; }
.thank-you-card .ty-headline { margin: 8px 0 0; font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.45; font-weight: 800; color: var(--text-inv); }
/* Dominant WhatsApp CTA — the visually strongest element on the page.
   Recognizable WhatsApp green gradient, white bold text, integrated icon. */
.wa-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 66px; margin-top: 6px; padding: 16px 30px; border: none; border-radius: 100px; background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); color: #fff; font-weight: 800; font-size: 1.2rem; text-decoration: none; box-shadow: 0 14px 34px rgba(18,140,126,.35); transition: transform var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wa-button .wa-icon { flex: none; display: block; }
.wa-button:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(18,140,126,.5); filter: brightness(1.05); }
.wa-button:active { transform: translateY(-1px) scale(.99); }
.wa-button:focus-visible { outline: 3px solid rgba(37,211,102,.55); outline-offset: 3px; }

/* ----------------------------------------------------------------------
   Layout collapse (tablets)
   ---------------------------------------------------------------------- */
@media (max-width: 850px) {
  .nav-note { display: none; }
  .nav-cta { font-size: .78rem; min-height: 38px; padding: 7px 14px; }
  .nav-cta .cta-full { display: none; }
  .nav-cta .cta-short { display: inline; }
  /* Hero stacks on phones: copy/CTA first, then the video section.
     The 16:9 visual is hidden on mobile so the video comes right after
     the hero CTA — the concept image appears right after the trust line. */
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy-col { max-width: 100%; }
  .hero-visual { display: none; }
  .workflow-layout, .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .problem-cards { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .transform { grid-template-columns: 1fr; gap: 12px; }
  .tf-arrow { justify-self: center; }
  .tf-arrow::before { content: '↓'; }
  .workshop-teaser { grid-template-columns: 1fr; text-align: center; }
  .portrait { max-width: 280px; }
}

/* ----------------------------------------------------------------------
   Mobile typography & spacing — conversion first
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { line-height: 1.65; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .container { width: min(100% - 32px, 1160px); }
  main section[id], main [id] { scroll-margin-top: 68px; }
  /* Sticky mobile CTA bar */
  .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 85; display: block; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(245,247,247,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(13,27,42,.08); text-align: center; }
  .mobile-cta-sub { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; font-weight: 600; }
  /* Pointer devices: stop the pulse on hover so the hover state reads clearly */
  @media (hover: hover) {
    .mobile-cta:hover .mobile-cta-btn { animation: none; background: #b9f57f; box-shadow: 0 10px 26px rgba(41,84,37,.4), inset 0 1px 0 rgba(255,255,255,.4); }
  }
  /* Touch feedback: clear press state */
  .mobile-cta:active .mobile-cta-btn { transform: scale(.985); box-shadow: 0 3px 10px rgba(41,84,37,.3), inset 0 1px 0 rgba(255,255,255,.4); transition-duration: .08s; }

  /* Mobile motion: shorter travel, the stagger step is reduced in JS */
  .reveal { transform: translateY(10px); }
  .reveal-scale { transform: scale(.97); }

  /* Tighter vertical rhythm — high density without feeling cramped */
  .section { padding: 48px 0; }
  .cost { padding: 40px 0; }
  #new-way, .proof { padding: 48px 0; }
  .about { padding: 42px 0; }
  .audience-section { padding: 40px 0; }
  .skillset { padding: 42px 0; }
  .registration { padding: 48px 0; }
  .faq-section { padding: 44px 0; }
  .site-footer { padding: 20px 0; }
  .credibility { padding: 20px 0; }
  .pipeline-visual { padding: 40px 0; }
  .perspective { padding: 26px 0; }
  .presenter-workflow { padding: 40px 0; }
  .presenter-workflow .cred-card { margin-bottom: 28px; }
  .social-proof { padding: 32px 0; }
  .proof-card { padding: 28px 22px; }
  .proof-num { font-size: 2.3rem; }
  .proof-label { font-size: .95rem; }
  .proof-cta { font-size: .82rem; padding: 8px 14px; }
  .hero { padding: 40px 0 34px; }
  .video-section { padding: 24px 0 34px; }
  .video-cue { font-size: .95rem; margin-bottom: 10px; }
  .video-sub { font-size: .78rem; }
  .impact-grid, .learn-grid, .proof-grid { margin-top: 30px; gap: 11px; }
  .problem-cards { margin-top: 30px; gap: 10px; }
  .audience-grid { margin-top: 28px; gap: 12px; }
  .registration-head { margin-bottom: 30px; }
  .transform { margin-top: 34px; }

  .eyebrow { font-size: .7rem; letter-spacing: .02em; }
  .hero { padding: 34px 0 28px; }
  /* Mobile hero = ONE CTA: the sticky bar at the bottom.
     The in-hero button (and its fact line) stay on desktop only. */
  .hero .button.primary, .hero .microcopy { display: none; }
  /* Calm vertical rhythm: each element gets its own breathing room.
     Order: eyebrow → hook → headline (dominant) → copy → steps → date → host */
  .hero-hook { font-size: .92rem; margin-bottom: 2px; }
  .hero h1 { font-size: 1.58rem; line-height: 1.5; letter-spacing: -.02em; margin: 12px 0 14px; }
  .hero-copy { font-size: .95rem; line-height: 1.75; margin-top: 0; }
  /* Numbered process pills (no arrows) */
  .hero-journey { margin: 18px 0 0; gap: 7px; }
  .hero-journey .step { font-size: .74rem; padding: 6px 12px; gap: 6px; }
  .hero-journey .step b { width: 16px; height: 16px; font-size: .62rem; }
  .hero-date { margin: 16px 0 0; }
  .hero-host { margin-top: 16px; }
  .pipeline-flow .pf-item { font-size: .78rem; letter-spacing: .05em; }
  .problem-questions li { font-size: .93rem; margin: 6px 0; }
  .ty-checklist li { font-size: .9rem; }
  .section-title { font-size: 1.28rem; line-height: 1.5; letter-spacing: -.012em; margin: 10px 0 12px; }
  .section-copy { font-size: .93rem; }
  .pull-line { margin-top: 32px; font-size: 1.02rem; }
  .pull-line.small { margin: 20px 0 12px; font-size: 1.05rem; }
  .issue-card { font-size: .83rem; padding: 12px 14px; line-height: 1.5; }
  .resonance-list p { font-size: .9rem; padding: 11px 15px; }
  .value-item { padding: 13px 15px; }
  .value-item span { font-size: .88rem; }
  .reg-steps { font-size: .9rem; }
  .tf-main { font-size: 1.1rem; }
  .tf-card { padding: 22px 18px; }
  .tf-flow li { font-size: .86rem; }
  .workflow-layout { margin-top: 34px; }
  .workflow-list b { width: 36px; height: 36px; font-size: .74rem; }
  .step-title { font-size: .92rem; }
  .step-en { font-size: .68rem; }
  .step-desc { font-size: .76rem; }
  .proof-points { grid-template-columns: 1fr; }
  .workshop-teaser { padding: 20px; }
  .workshop-teaser img { height: 120px; }
  .impact-grid h3 { font-size: .92rem; }
  .impact-grid p { font-size: .8rem; }
  .audience-card { padding: 20px 17px; border-radius: 16px; }
  .audience-card h3 { font-size: 1.08rem; }
  .audience-card li { font-size: .88rem; }
  .skill-step { font-size: .9rem; padding: 11px 20px; }
  .live-bonus { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; }
  .bonus-icon { font-size: 1.4rem; }
  .live-bonus > div > p { font-size: .86rem; }
  .form-card { padding: 24px 18px; border-radius: 18px; }
  .form-card h3 { font-size: 1.28rem; }
  .form-card > p { font-size: .82rem; }
  .form-grid { gap: 12px; }
  input, select { height: 46px; border-radius: 9px; }
  .form-card .button { min-height: 52px; margin-top: 16px; }
  .form-status { font-size: .8rem; }
  .faq-grid { grid-template-columns: 1fr; gap: 14px; }
  .personas-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .audience-roles-grid { grid-template-columns: 1fr; gap: 12px; }
  .audience-fit-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .audience-exp-notice { border-radius: 14px; font-size: .84rem; padding: 12px 16px; }
  .fit-card { padding: 20px 18px; }
  .steps-flow-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .step-flow-card { padding: 18px 15px; }
  .step-flow-card h3 { font-size: .98rem; }
  .step-flow-card p { font-size: .84rem; }
  .phone-country { height: 46px; padding: 0 11px; }
  .phone-input input[type="tel"] { height: 46px; }
  .phone-dropdown { max-height: min(280px, 55vh); }
  .phone-row { padding: 11px 10px; font-size: .9rem; }
  .button { min-height: 52px; padding: 12px 22px; font-size: .98rem; }
  .microcopy { font-size: .76rem; }
  .section-cta { margin-top: 30px; }
  .brand img { height: 30px; max-width: 130px; }
  .video-frame { border-radius: 14px; }
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 21px; height: 21px; }
}

/* ----------------------------------------------------------------------
   Small phones
   ---------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container { width: min(100% - 26px, 1160px); }
  .section { padding: 38px 0; }
  .proof-num { font-size: 2.3rem; }
  .proof-card { padding: 26px 18px; }
  .cost { padding: 34px 0; }
  #new-way, .proof, .registration { padding: 42px 0; }
  .about, .skillset { padding: 38px 0; }
  .audience-section, .faq-section { padding: 34px 0; }
  .credibility { padding: 16px 0; }
  .pipeline-visual { padding: 32px 0; }
  .pipeline-figure figcaption { font-size: .8rem; }
  .perspective { padding: 22px 0; }
  .perspective-line { font-size: .95rem; }
  /* Compact hero on small phones: the video must land in the first viewport */
  .hero { padding: 24px 0 18px; }
  .hero-hook { font-size: .88rem; }
  .hero h1 { font-size: 1.32rem; margin: 10px 0 10px; }
  .hero-copy { line-height: 1.65; }
  .hero-journey { margin: 14px 0 0; }
  .hero-journey .step { font-size: .72rem; padding: 6px 11px; }
  .hero-date { margin: 12px 0 0; }
  .hero-host { margin-top: 12px; }
  .video-cue { margin-bottom: 10px; }
  /* LTR technical flow stacks vertically on phones (→ becomes ↓) */
  .pipeline-flow { flex-direction: column; gap: 7px; }
  .pipeline-flow .pf-item { font-size: .82rem; }
  .pipeline-flow .pf-arrow { transform: rotate(90deg); font-size: 1.1rem; }
  .pipeline-flow .pf-note { margin-top: 4px; font-size: .8rem; }
  .personas-grid { grid-template-columns: 1fr; }
  .audience-roles-grid { grid-template-columns: 1fr; }
  .steps-flow-grid { grid-template-columns: 1fr; gap: 10px; }
  .curiosity-neg { gap: 9px; }
  .curiosity-neg p { font-size: 1.3rem; }
  .curiosity-flow span:not(.arrow) { font-size: .8rem; padding: 6px 12px; }
  .curiosity-q { font-size: 1rem; }
  .curiosity-flow-label { margin: 14px auto 6px; }
  /* New/merged sections — compact on small phones */
  .presenter-workflow { padding: 34px 0; }
  .presenter-workflow .cred-card { margin-bottom: 26px; }
  .cred-line { font-size: .86rem !important; }
  .experience-transition { font-size: .95rem; }
  .automation-ai { font-size: .98rem; }
  .workflow-note { font-size: .82rem; }
  .notice-box { font-size: .84rem; padding: 12px 16px; }
  .form-note { font-size: .8rem; }
  .live-date { font-size: .92rem; }
  .hero-date { margin: 10px 0 0; }
  .hero-host { margin-top: 12px; }
  .video-section { padding: 20px 0 30px; }
  .problem-questions li { font-size: .9rem; }
  .section-title { font-size: 1.18rem; }
  .video-play { width: 60px; height: 60px; }
  .video-shell { max-width: 100%; }
  .video-cta-label { font-size: .78rem; }
  .countdown { grid-template-columns: repeat(4, 58px); }
  .cd-num { font-size: 1.1rem; }
  .button { font-size: .95rem; }
  .form-grid { grid-template-columns: 1fr; }
  /* Problem + impact stay 2-column on small phones (short cards, high density);
     audience cards need full width for their longer list items */
  .audience-grid { grid-template-columns: 1fr; }
  /* Compact credibility card stacks on narrow screens */
  .cred-card { flex-direction: column; text-align: center; gap: 10px; padding: 16px 16px; }
  .cred-text { text-align: center; }
  .cred-text p { font-size: .82rem; }
  .footer-social-link { padding: 7px 15px; font-size: .82rem; }
  .footer-social-title { font-size: .88rem; }
  .thank-you-card { padding: 28px 20px; }
}

/* ----------------------------------------------------------------------
   Accessibility — reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Content is immediately visible; all autonomous motion is off */
  .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
  .site-header, .hero-grid > div > *, .hero-visual, .video-wrap > *,
  .workflow-list li.in-view b, .tf-card.new.in-view,
  .live-bonus.in-view, .live-bonus.in-view .bonus-icon,
  .button.primary.ring-on { animation: none; }
  body::before, .video-play::after { animation: none; }
  .workflow-list::before { transform: none; animation: none; }
  .workflow-list::after { display: none; }
  .acc-panel, .acc-inner, .acc-icon::before, .acc-icon::after { transition: none; }
  .button:active, .nav-cta:active, .video-play:active { transform: none; }
  .mobile-cta-btn, .free-flag, .hero-date, .hero-date .live-dot, .video-cue .cue-arrow, .proof-num.is-done { animation: none; }
  .mobile-cta:active .mobile-cta-btn { transform: none; }
  .impact-grid article:hover, .issue-card:hover, .audience-card:hover, .workshop-teaser:hover, .value-item:hover,
  .video-shell:hover .video-frame { transform: none; box-shadow: none; }
}