/* ============================================================
   NickAcademy Website - Design Tokens (Phase 1)
   Direction: colorful-playful-premium
   ============================================================ */

:root {
  /* Brand colors */
  --blue-brand: #1565C0;
  --blue-deep: #0D47A1;
  --blue-mid: #1E88E5;
  --blue-light: #6FB5F5;
  --orange: #FF8C42;
  --orange-hot: #FF7A1A;
  --orange-soft: #FFA94D;
  --ink: #15243B;
  --ink-soft: #44546A;
  --paper: #FFFFFF;
  --paper-warm: #F6F9FE;

  /* Type */
  --font-display-en: 'Fredoka', 'Nunito', sans-serif;
  --font-body-en: 'Nunito', sans-serif;
  --font-display-he: 'Rubik', sans-serif;
  --font-body-he: 'Rubik', sans-serif;

  /* Motion */
  --ease-soft: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --max-width: 1240px;
  --nav-height: 72px;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); }

body {
  font-family: var(--font-body-en);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

html[lang="he"] body { font-family: var(--font-body-he); }

h1, h2, h3 { font-family: var(--font-display-en); font-weight: 600; }
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3 { font-family: var(--font-display-he); font-weight: 700; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   GEFEN strip (Hebrew version only)
   ============================================================ */
.gefen-strip {
  background: var(--blue-deep);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 7px 16px;
  position: relative;
  z-index: 60;
}
.gefen-strip strong { font-weight: 700; }

/* ============================================================
   Top navigation
   ============================================================ */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(21, 101, 192, 0.08);
}

.topnav-inner {
  /* full-bleed: logo and actions sit flush to the screen edges */
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo { display: flex; align-items: center; }
.logo-img { height: 38px; width: auto; }

.nav-links {
  display: flex;
  gap: 18px;
  margin-inline-start: auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.nav-links a { transition: color 0.2s ease; white-space: nowrap; }
.nav-links a:hover { color: var(--blue-brand); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid rgba(21, 101, 192, 0.35);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-brand);
  padding: 4px 9px;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.lang-switch a:hover { background: rgba(21, 101, 192, 0.07); }
.lang-switch a.active { background: var(--blue-brand); color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s var(--ease-pop), box-shadow 0.25s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--orange-soft), var(--orange-hot));
  color: #fff;
  font-size: 16px;
  padding: 12px 26px;
  box-shadow: 0 8px 22px rgba(255, 122, 26, 0.38);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(255, 122, 26, 0.46);
}

.btn-nav { font-size: 14.5px; padding: 9px 20px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  background: linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-mid) 42%, var(--blue-light) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* background layers */
.orange-blob {
  position: absolute;
  top: 42%;
  inset-inline-end: 8%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--orange-soft) 0%, var(--orange) 55%, transparent 74%);
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.5;
  animation: blob-pulse 11s var(--ease-soft) infinite;
  z-index: 1;
}
@keyframes blob-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.18) rotate(160deg); }
}

.swoosh {
  position: absolute;
  width: 240%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  z-index: 2;
}
.swoosh-1 { top: 22%; left: -70%; transform: rotate(-7deg); animation: swoosh-drift 15s linear infinite; }
.swoosh-2 { top: 52%; left: -70%; transform: rotate(4deg); animation: swoosh-drift 18s linear infinite; animation-delay: -6s; }
.swoosh-3 { top: 78%; left: -70%; transform: rotate(-3deg); animation: swoosh-drift 21s linear infinite; animation-delay: -11s; }
@keyframes swoosh-drift {
  0% { transform: translateX(-22%) rotate(-7deg); }
  100% { transform: translateX(22%) rotate(-7deg); }
}

.sparkle {
  position: absolute;
  width: 9px; height: 9px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 18px #fff, 0 0 36px rgba(255,255,255,0.5);
  animation: sparkle-twinkle 2.6s ease-in-out infinite;
  z-index: 3;
}
.sparkle-1 { top: 18%; left: 22%; animation-delay: 0s; }
.sparkle-2 { top: 64%; left: 70%; animation-delay: 0.5s; }
.sparkle-3 { top: 34%; left: 84%; animation-delay: 1s; }
.sparkle-4 { top: 76%; left: 16%; animation-delay: 1.5s; }
.sparkle-5 { top: 14%; left: 58%; animation-delay: 0.3s; }
.sparkle-6 { top: 84%; left: 48%; animation-delay: 0.9s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* hero layout */
.hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 28px 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 24px;
  flex: 1;
}

.hero-copy { color: #fff; max-width: 560px; }

.badge-paramount {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  direction: ltr;
  margin-bottom: 26px;
  animation: badge-in 0.9s var(--ease-pop) both;
}
.badge-paramount .backed-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.badge-paramount-logo {
  height: 44px;
  width: auto;
  opacity: 0.95;
}
/* בעברית: הלוגו משמאל למילה "בשיתוף" */
[dir="rtl"] .badge-paramount { direction: rtl; }
@keyframes badge-in {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy h1 {
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -1px;
  margin-bottom: 20px;
  text-shadow: 0 4px 24px rgba(13, 71, 161, 0.35);
  animation: rise-in 0.9s var(--ease-pop) 0.12s both;
}
html[lang="he"] .hero-copy h1 { letter-spacing: 0; }

.hero-copy .sub {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  font-weight: 500;
  opacity: 0.94;
  max-width: 480px;
  margin-bottom: 34px;
  animation: rise-in 0.9s var(--ease-pop) 0.24s both;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  animation: rise-in 0.9s var(--ease-pop) 0.36s both;
}
.btn-hero { font-size: 18px; padding: 16px 34px; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* hero visual: phone + characters */
.hero-visual {
  position: relative;
  height: clamp(440px, 58vh, 600px);
  z-index: 5;
}

.laptop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 660px);
  aspect-ratio: 1600 / 1181;
  animation: laptop-float 6s var(--ease-soft) infinite;
  z-index: 5;
}
@keyframes laptop-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-12px); }
}

.laptop-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,0.38));
}

/* the two screens crossfade every few seconds */
.laptop-img.fade-a { animation: laptop-fade 12s ease-in-out infinite; }
.laptop-img.fade-b { animation: laptop-fade 12s ease-in-out infinite; animation-delay: -6s; }
@keyframes laptop-fade {
  0%, 38% { opacity: 1; }
  50%, 88% { opacity: 0; }
  100% { opacity: 1; }
}

.character {
  position: absolute;
  height: auto;
  z-index: 10;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25));
}
.character:hover { transform: scale(1.08) !important; z-index: 20 !important; }

.raphael {
  top: -4%;
  left: -3%;
  width: 32%;
  animation: raphael-glide 5s var(--ease-soft) infinite;
  z-index: 12;
}
@keyframes raphael-glide {
  0%, 100% { transform: translateY(0) translateX(0) rotate(-2deg); }
  50% { transform: translateY(-18px) translateX(6px) rotate(1deg); }
}

.garfield {
  top: -2%;
  right: -1%;
  width: 22%;
  animation: garfield-breathe 6s var(--ease-soft) infinite;
  z-index: 4;
}
@keyframes garfield-breathe {
  0%, 100% { transform: rotate(-1deg) translateY(0) scale(1); }
  50% { transform: rotate(2deg) translateY(-8px) scale(1.02); }
}

.arnold {
  bottom: -2%;
  right: -4%;
  width: 28%;
  animation: arnold-sway 7s var(--ease-soft) infinite;
  z-index: 11;
}
@keyframes arnold-sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-12px); }
}

.cosmo {
  top: 58%;
  left: -1%;
  width: 15%;
  animation: cosmo-hover 6s var(--ease-soft) infinite;
  z-index: 13;
}
@keyframes cosmo-hover {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-12px) translateX(6px) rotate(2deg); }
  50% { transform: translateY(-18px) translateX(0) rotate(0deg); }
  75% { transform: translateY(-12px) translateX(-6px) rotate(-2deg); }
}

.wanda {
  bottom: -3%;
  left: 12%;
  width: 14%;
  animation: wanda-float 5.5s var(--ease-soft) infinite;
  z-index: 13;
}
@keyframes wanda-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

/* ============================================================
   Partner logo marquee (bottom of hero)
   ============================================================ */
.partner-strip {
  position: relative;
  z-index: 15;
  background: rgba(13, 71, 161, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  padding: 20px 0 24px;
  overflow: hidden;
  /* the scrolling strip always runs LTR, even on the Hebrew page,
     so the loop math stays identical in both languages */
  direction: ltr;
}

.partner-label {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
html[lang="he"] .partner-label { direction: rtl; }

.marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
  direction: ltr; /* logos always scroll the same way */
}
.marquee:hover { animation-play-state: paused; }

.marquee-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 0 32px;
}

.partner-logo-img {
  height: 38px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.partner-logo-img:hover { opacity: 1; transform: scale(1.06); }
/* for logos whose original color clashes with the blue strip */
.partner-logo-img.tint-white { filter: brightness(0) invert(1); }
/* stacked (square-ish) logos need more height to match the visual
   weight of the wide horizontal logos */
.partner-logo-img.logo-tall { height: 56px; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Placeholder for next sections
   ============================================================ */
.placeholder-next {
  padding: 90px 28px;
  text-align: center;
  background: var(--paper-warm);
}
.placeholder-next h2 { color: var(--blue-brand); font-size: 30px; margin-bottom: 12px; }
.placeholder-next p { color: var(--ink-soft); font-size: 17px; max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Shared decoration: outline blobs (design unity across sections)
   Same family as the product-catalog background. Every section
   carries 1-2 of these as a consistent, low-key texture.
   ============================================================ */
.deco-blob {
  position: absolute;
  z-index: 0;
  opacity: 0.45;
  pointer-events: none;
  width: 300px;
}
/* corner placements (logical props → mirror correctly in RTL) */
.deco-blob.tl { top: -60px;  inset-inline-start: -80px;  transform: rotate(-8deg); }
.deco-blob.br { bottom: -70px; inset-inline-end: -90px;  transform: rotate(12deg);  width: 330px; }
.deco-blob.tr { top: -55px;  inset-inline-end: -70px;   transform: rotate(10deg);  width: 270px; }
.deco-blob.bl { bottom: -65px; inset-inline-start: -75px; transform: rotate(-12deg); width: 290px; }
/* opacity tuned per background brightness */
.deco-blob.on-dark { opacity: 0.28; }
.deco-blob.on-light { opacity: 0.5; }

/* Living color: the outline blobs slowly trade colors for a sense of movement.
   Orange drifts toward purple and purple toward orange, both through pink
   (never green), so within each section the two blobs appear to swap colors.
   Targeted by file name so no extra markup is needed. */
.deco-blob[src*="orange"] { animation: deco-hue-o 11s var(--ease-soft) infinite; }
.deco-blob[src*="purple"] { animation: deco-hue-p 11s var(--ease-soft) infinite; }
/* offset whole sections so they don't all pulse in unison */
#products .deco-blob { animation-delay: -3.6s; }
#teachers .deco-blob { animation-delay: -7.2s; }
#pedagogy .deco-blob { animation-delay: -1.8s; }
#testimonials .deco-blob { animation-delay: -5.4s; }
#media .deco-blob { animation-delay: -9s; }
#contact .deco-blob { animation-delay: -2.7s; }
@keyframes deco-hue-o {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(-110deg); }
}
@keyframes deco-hue-p {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(110deg); }
}

/* ============================================================
   Section 2: About / מי אנחנו
   ============================================================ */
.about {
  position: relative;
  padding: 130px 28px 120px;
  background: linear-gradient(180deg, #DCEBFF 0%, #EEF5FF 50%, #FFFFFF 100%);
  overflow: hidden;
}
/* flowing background shapes — same family as the hero */
.about-blob {
  position: absolute;
  top: -120px;
  inset-inline-start: -150px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--orange-soft) 0%, var(--orange) 55%, transparent 72%);
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.28;
  z-index: 0;
}
.about-blob.two {
  top: auto; bottom: -170px;
  inset-inline-start: auto; inset-inline-end: -130px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--blue-light) 0%, var(--blue-mid) 55%, transparent 72%);
  opacity: 0.26;
}
.about-swoosh {
  position: absolute;
  width: 160%; height: 2px; left: -30%;
  background: linear-gradient(90deg, transparent, rgba(21,101,192,0.22), transparent);
  z-index: 0;
}
.about-swoosh.s1 { top: 16%; transform: rotate(-4deg); }
.about-swoosh.s2 { bottom: 20%; transform: rotate(3deg); }

.about-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }

/* editorial, asymmetric header (not dead-centered) */
.about-head { max-width: 900px; margin-bottom: 60px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-hot);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--orange); border-radius: 2px; }
html[lang="he"] .eyebrow { letter-spacing: 1px; }

.about-lead {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--ink);
}
html[lang="he"] .about-lead { letter-spacing: 0; }
.about-lead .hl {
  color: var(--blue-brand);
  background: linear-gradient(to top, rgba(255,169,77,0.55) 0 34%, transparent 34%);
  border-radius: 3px;
  padding: 0 3px;
}

.platform { background: none; border: none; padding: 0; }
.platform-head { margin-bottom: 30px; }
.platform-head h3 {
  font-size: clamp(26px, 2.9vw, 40px);
  color: var(--blue-deep);
  margin-bottom: 10px;
}
.platform-sub {
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 580px;
  line-height: 1.5;
}

/* the video, framed with personality: offset block + tilt + character */
.platform-stage { position: relative; margin-top: 10px; }
.platform-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 26px -20px -24px 26px;
  background: repeating-linear-gradient(45deg, var(--orange) 0 16px, var(--orange-hot) 16px 32px);
  border-radius: 26px;
  opacity: 0.16;
  transform: rotate(-1.2deg);
}
.platform-video {
  position: relative;
  z-index: 2;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--blue-deep);
  border: 6px solid #fff;
  box-shadow: 0 30px 70px rgba(13, 71, 161, 0.30);
  transform: rotate(-1.2deg);
  transition: transform 0.55s var(--ease-pop);
  cursor: pointer; /* click anywhere on the video to toggle sound */
}
.platform-stage:hover .platform-video { transform: rotate(0deg); }
.platform-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* mute / unmute button on the video */
.mute-btn {
  position: absolute;
  z-index: 4;
  bottom: 16px;
  inset-inline-start: 16px;
  width: 46px; height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(13, 71, 161, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  pointer-events: none; /* state indicator only; clicks pass through to the video */
}
.mute-btn svg { width: 22px; height: 22px; }
.mute-btn .icon-muted { display: none; }
.mute-btn.muted .icon-sound { display: none; }
.mute-btn.muted .icon-muted { display: block; }
/* a real brand character peeking from behind the video */
.platform-peek {
  position: absolute;
  z-index: 3;
  width: clamp(92px, 13vw, 168px);
  bottom: -38px;
  inset-inline-end: -18px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.25));
  animation: peek-bob 5s var(--ease-soft) infinite;
  pointer-events: none;
}
@keyframes peek-bob {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(-12px) rotate(-2deg); }
}

/* ============================================================
   Section 3: Social proof (bold blue band)
   ============================================================ */
.proof {
  position: relative;
  background: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-brand) 55%, var(--blue-mid) 100%);
  min-height: 230px;
  padding: 46px 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.proof::after {
  content: "";
  position: absolute;
  top: 48%; left: -20%;
  width: 140%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: rotate(-2deg);
  z-index: 1;
}
.proof-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.proof-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.proof-num {
  font-family: var(--font-display-en);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
html[lang="he"] .proof-num { font-family: var(--font-display-he); }
.proof-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--orange-soft);
  text-transform: uppercase;
}
.proof-divider { width: 2px; height: 42px; background: rgba(255,255,255,0.18); border-radius: 2px; }
.proof-gesa { display: flex; align-items: center; }
.proof-gesa-logo {
  height: 96px;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
}

/* numbers glow softly + lift on hover */
.proof-num { text-shadow: 0 2px 20px rgba(255,255,255,0.28); }
.proof-stat { transition: transform 0.3s var(--ease-pop); }
.proof-stat:hover { transform: translateY(-5px); }

/* playful brand accents: characters peeking + sparkles */
.proof-char {
  position: absolute;
  z-index: 1;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.30));
  pointer-events: none;
}
.proof-char.left {
  width: clamp(96px, 11vw, 132px);
  inset-inline-start: 1.5%;
  bottom: 8px;
  animation: peek-bob 5.5s var(--ease-soft) infinite;
}
.proof-char.right {
  width: clamp(92px, 10vw, 124px);
  inset-inline-end: 2%;
  bottom: 8px;
  animation: peek-bob 6.5s var(--ease-soft) infinite;
  animation-direction: reverse;
}
.proof-sparkle {
  position: absolute;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 14px #fff, 0 0 28px rgba(255,255,255,0.5);
  animation: sparkle-twinkle 2.6s ease-in-out infinite;
  z-index: 1;
}
.proof-sparkle.p1 { top: 26%; left: 17%; animation-delay: 0s; }
.proof-sparkle.p2 { top: 66%; left: 41%; animation-delay: 0.6s; }
.proof-sparkle.p3 { top: 28%; left: 69%; animation-delay: 1.1s; }
.proof-sparkle.p4 { top: 72%; left: 85%; animation-delay: 0.35s; }

@media (max-width: 760px) {
  .proof { padding: 30px 18px; min-height: 0; }
  .proof-divider { display: none; }
  .proof-inner { gap: 22px 28px; }
  .proof-gesa { width: 100%; justify-content: center; margin-top: 4px; }
  .proof-gesa-logo { height: 84px; }
  .proof-char { display: none; }
}

/* subjects strip — branded design-system icons, illustrating "many subjects" */
.subjects { margin-top: 58px; text-align: center; }
.subjects-label {
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 28px;
}
html[lang="he"] .subjects-label { font-weight: 700; }
.subjects-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 44px;
}
.subject {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 92px;
}
.subject img {
  height: 60px;
  width: auto;
  filter: drop-shadow(0 8px 12px rgba(13, 71, 161, 0.16));
  transition: transform 0.35s var(--ease-pop);
}
.subject:hover img { transform: translateY(-6px) scale(1.07); }
.subject span { font-size: 15px; font-weight: 700; color: var(--ink); }

/* ============================================================
   Section 4: Product catalog
   ============================================================ */
.catalog {
  position: relative;
  padding: 120px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E7F1FF 100%);
  overflow: hidden;
}
.catalog-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.catalog-head { text-align: center; margin-bottom: 60px; }
.catalog-title {
  font-size: clamp(32px, 4.4vw, 56px);
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
html[lang="he"] .catalog-title { letter-spacing: 0; }
.catalog-sub {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}
.catalog-label {
  display: inline-block;
  margin-top: 36px;
  padding-bottom: 14px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  font-style: italic;
  color: var(--blue-brand);
  border-bottom: 2px dashed rgba(21,101,192,0.4);
}

.catalog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pc) 12%, #fff);
  /* layered, color-tinted shadow for real depth */
  box-shadow:
    0 1px 2px rgba(15, 36, 59, 0.05),
    0 6px 12px rgba(15, 36, 59, 0.07),
    0 18px 32px color-mix(in srgb, var(--pc) 18%, transparent),
    0 34px 62px color-mix(in srgb, var(--pc) 22%, transparent);
  color: inherit;
  transition: transform 0.45s var(--ease-pop), box-shadow 0.45s var(--ease-soft);
}
.pcard:hover {
  transform: translateY(-14px) rotate(-0.6deg);
  box-shadow:
    0 2px 4px rgba(15, 36, 59, 0.06),
    0 12px 22px rgba(15, 36, 59, 0.10),
    0 30px 50px color-mix(in srgb, var(--pc) 26%, transparent),
    0 56px 88px color-mix(in srgb, var(--pc) 30%, transparent);
}

/* light header with a colorful design-system blob behind a floating character */
.pcard-top {
  position: relative;
  height: 234px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pc) 7%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  /* soft inner depth: grounds the character and separates from the white body */
  box-shadow:
    inset 0 -18px 26px -16px color-mix(in srgb, var(--pc) 40%, transparent),
    inset 0 14px 24px -18px rgba(15, 36, 59, 0.18);
}
.pcard-blob {
  position: absolute;
  top: 50%; left: 50%;
  width: 116%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: blob-float 9s var(--ease-soft) infinite;
}
@keyframes blob-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -50%) scale(1.05) rotate(6deg); }
}
.pcard-char {
  position: relative;
  z-index: 3;
  height: 180px;
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.26));
  animation: peek-bob 5.5s var(--ease-soft) infinite;
  transition: transform 0.45s var(--ease-pop);
}
.pcard:hover .pcard-char { transform: scale(1.07); }

.pcard-body {
  flex: 1;
  padding: 30px 30px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pcard-name { font-size: clamp(24px, 2.3vw, 30px); color: var(--pc); margin-bottom: 12px; }
.pcard-desc { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; flex: 1; }
.pcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: var(--pc);
  padding: 11px 24px;
  border-radius: 999px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pc) 38%, transparent);
  transition: transform 0.25s var(--ease-pop), box-shadow 0.25s var(--ease-soft);
}
.pcard:hover .pcard-cta { transform: translateY(-2px); }
.pcard-cta .arr { transition: transform 0.3s var(--ease-pop); }
.pcard:hover .pcard-cta .arr { transform: translateX(6px); }
[dir="rtl"] .pcard:hover .pcard-cta .arr { transform: translateX(-6px); }

/* stagger the card reveal */
.catalog-cards .reveal:nth-child(1) { transition-delay: 0s; }
.catalog-cards .reveal:nth-child(2) { transition-delay: 0.12s; }
.catalog-cards .reveal:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 860px) {
  .catalog { padding: 84px 20px; }
  .catalog-cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ============================================================
   Section 5: Teachers / מורים
   ============================================================ */
.teachers {
  position: relative;
  padding: 120px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF4E9 55%, #FFEAD6 100%);
  overflow: hidden;
}
.teachers-blob {
  position: absolute;
  top: -140px; inset-inline-end: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--blue-light) 0%, var(--blue-mid) 55%, transparent 72%);
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.22;
  z-index: 0;
}
.teachers-blob.two {
  top: auto; bottom: -160px;
  inset-inline-end: auto; inset-inline-start: -130px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--orange-soft) 0%, var(--orange) 55%, transparent 72%);
  opacity: 0.26;
}

.teachers-inner {
  position: relative; z-index: 2;
  max-width: var(--max-width); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: center;
}

/* copy column */
.teachers-lead {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 18px;
}
html[lang="he"] .teachers-lead { letter-spacing: 0; }
.teachers-lead .hl {
  color: var(--blue-brand);
  background: linear-gradient(to top, rgba(255,169,77,0.55) 0 34%, transparent 34%);
  border-radius: 3px;
  padding: 0 3px;
}
.teachers-sub {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: 38px;
}
.t-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 42px;
}
.t-point { display: flex; gap: 18px; align-items: flex-start; }
.t-ico {
  flex: none;
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
}
.t-ico img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(13,71,161,0.16)); }
.t-point h3 { font-size: clamp(19px, 1.8vw, 23px); color: var(--ink); margin-bottom: 6px; }
.t-point p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.btn-teachers { font-size: 17px; padding: 15px 32px; }
.t-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* dashboard visual, framed with a tilt + diagonal block, like the about video */
.teachers-visual { position: relative; }
.teachers-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 24px -22px -22px 24px;
  background: repeating-linear-gradient(45deg, var(--blue-mid) 0 16px, var(--blue-brand) 16px 32px);
  border-radius: 24px;
  opacity: 0.14;
  transform: rotate(1.6deg);
}
.dash-frame {
  display: block;
  position: relative;
  z-index: 2;
  border-radius: 20px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 30px 70px rgba(13, 71, 161, 0.28);
  transform: rotate(1.6deg);
  transition: transform 0.55s var(--ease-pop);
  cursor: pointer;
}
.teachers-visual:hover .dash-frame { transform: rotate(0deg); }
.dash-frame img { width: 100%; display: block; }
/* "click to try" hint, revealed on hover over the clickable dashboard */
.dash-try {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(13, 71, 161, 0.94);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 71, 161, 0.42);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-pop);
  pointer-events: none;
}
.dash-frame:hover .dash-try { opacity: 1; transform: translateX(-50%) translateY(0); }
.dash-peek {
  position: absolute;
  z-index: 3;
  width: clamp(78px, 10vw, 128px);
  bottom: -34px;
  inset-inline-start: -22px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.22));
  animation: peek-bob 5.5s var(--ease-soft) infinite;
  pointer-events: none;
}

@media (max-width: 980px) {
  .teachers-inner { grid-template-columns: 1fr; gap: 56px; }
  .teachers-visual { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .teachers { padding: 84px 20px; }
  .teachers-sub { max-width: 100%; }
}

/* ============================================================
   Section 7: Data security (short blue band — same look as proof)
   ============================================================ */
.security {
  position: relative;
  background: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-brand) 55%, var(--blue-mid) 100%);
  padding: 44px 28px;
  overflow: hidden;
}
.security::after {
  content: "";
  position: absolute;
  top: 50%; left: -20%;
  width: 140%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: rotate(-2deg);
  z-index: 1;
}
.security-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px 46px;
  flex-wrap: wrap;
}
/* COPPA certification seal, shown directly on the band (original contour, like GESA) */
.sec-badge {
  flex: none;
  height: 120px;
  width: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.30));
}
.sec-text { display: flex; flex-direction: column; gap: 12px; }
.sec-text h2 {
  color: #fff;
  font-size: clamp(21px, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.3px;
}
html[lang="he"] .sec-text h2 { letter-spacing: 0; }
.sec-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 24px;
}
.sec-point {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  font-weight: 600;
}
.sec-point svg { width: 20px; height: 20px; color: var(--orange-soft); flex: none; }
.sec-link {
  flex-basis: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sec-link:hover { opacity: 1; color: #fff; }

@media (max-width: 760px) {
  .security { padding: 40px 20px; }
  .security-inner { gap: 16px; }
  .sec-text { align-items: center; text-align: center; }
  .sec-points { justify-content: center; }
}

/* ============================================================
   Section 6: Pedagogy / פדגוגיה
   ============================================================ */
.pedagogy {
  position: relative;
  padding: 120px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF2FF 100%);
  overflow: hidden;
}
.pedagogy-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.pedagogy-head { text-align: center; max-width: 760px; margin: 0 auto 58px; }
.ped-lead {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 18px;
}
html[lang="he"] .ped-lead { letter-spacing: 0; }
.ped-lead .hl {
  color: var(--blue-brand);
  background: linear-gradient(to top, rgba(255,169,77,0.55) 0 34%, transparent 34%);
  border-radius: 3px;
  padding: 0 3px;
}
.ped-intro {
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--ink-soft);
  line-height: 1.6;
}

.ped-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 70px;
}
.ped-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--pc) 14%, #fff);
  border-radius: 22px;
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(15, 36, 59, 0.05),
    0 10px 26px color-mix(in srgb, var(--pc) 16%, transparent);
  transition: transform 0.4s var(--ease-pop), box-shadow 0.4s var(--ease-soft);
}
.ped-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 2px 4px rgba(15, 36, 59, 0.06),
    0 22px 44px color-mix(in srgb, var(--pc) 24%, transparent);
}
.ped-ico {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.ped-ico img { width: 100%; height: 100%; object-fit: contain; }
.ped-term {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pc);
  margin-bottom: 7px;
}
.ped-name { font-size: clamp(20px, 2vw, 25px); color: var(--ink); margin-bottom: 12px; }
.ped-desc { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.ped-principles .reveal:nth-child(1) { transition-delay: 0s; }
.ped-principles .reveal:nth-child(2) { transition-delay: 0.1s; }
.ped-principles .reveal:nth-child(3) { transition-delay: 0.2s; }

/* dark trust panel: the partner logos are white-on-transparent, so they sit on deep blue */
.ped-partners {
  text-align: center;
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-deep));
  border-radius: 26px;
  padding: 44px 36px 40px;
  box-shadow: 0 22px 50px rgba(13, 71, 161, 0.22);
}
.ped-partners-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 32px;
}
.ped-partners-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 34px 40px;
  padding-inline: 24px;
}
.ped-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 132px;
}
.ped-partner img {
  height: 46px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  transition: transform 0.3s var(--ease-pop);
}
.ped-partner:hover img { transform: translateY(-3px); }
.ped-partner span {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.ped-download { text-align: center; margin-top: 56px; }
.ped-download p { font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-soft); margin-bottom: 18px; }
.btn-ghost {
  background: #fff;
  color: var(--blue-brand);
  border: 2px solid color-mix(in srgb, var(--blue-brand) 28%, #fff);
  font-size: 16px;
  padding: 13px 28px;
}
.btn-ghost svg { width: 19px; height: 19px; }
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--blue-brand);
  box-shadow: 0 12px 26px rgba(21, 101, 192, 0.18);
}

@media (max-width: 860px) {
  .pedagogy { padding: 84px 20px; }
  .ped-principles { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto 56px; }
  .ped-partners-row { justify-content: center; gap: 30px 40px; padding-inline: 0; }
}

/* ============================================================
   Section 9: Testimonials (video carousel)
   ============================================================ */
.testimonials {
  position: relative;
  padding: 120px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 100%);
  overflow: hidden;
}
.testimonials-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.testi-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.testi-lead {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 16px;
}
html[lang="he"] .testi-lead { letter-spacing: 0; }
.testi-lead .hl {
  color: var(--blue-brand);
  background: linear-gradient(to top, rgba(255,169,77,0.55) 0 34%, transparent 34%);
  border-radius: 3px;
  padding: 0 3px;
}
.testi-sub { font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.6; }

/* carousel shell */
.carousel { position: relative; max-width: 980px; margin: 0 auto; }
.carousel-viewport { overflow: hidden; border-radius: 28px; }
.carousel-track {
  display: flex;
  direction: ltr; /* deterministic sliding regardless of page direction */
  transition: transform 0.55s var(--ease-soft);
}
.testi-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: center;
  padding: 6px;
}
html[lang="he"] .testi-card { direction: rtl; text-align: right; }

/* the video (or placeholder poster) */
.testi-video {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 460px;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 24px 54px rgba(13, 71, 161, 0.26);
  background: linear-gradient(150deg, var(--blue-deep), var(--blue-mid));
  cursor: pointer;
}
.testi-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fullscreen: show the whole vertical frame (with side bars) instead of cropping top/bottom */
.testi-video video:fullscreen { object-fit: contain; background: #000; }
.testi-video video:-webkit-full-screen { object-fit: contain; background: #000; }
/* first-frame thumbnail shown until the user hits play */
.testi-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.testi-video .testi-tag {
  position: absolute; z-index: 3;
  top: 14px; inset-inline-start: 14px;
  background: rgba(255,255,255,0.92);
  color: var(--blue-brand);
  font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px;
}
.testi-play {
  position: absolute; z-index: 3;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--blue-brand);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  transition: transform 0.25s var(--ease-pop);
}
.testi-play:hover { transform: translate(-50%,-50%) scale(1.08); }
.testi-play svg { width: 28px; height: 28px; margin-inline-start: 3px; }
.testi-video .testi-name-overlay {
  position: absolute; z-index: 3;
  bottom: 0; left: 0; right: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(13,71,161,0.85), transparent);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
}

/* the quote + attribution */
.testi-content { min-width: 0; }
/* small product tag: which product this customer worked with */
.testi-product {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.testi-product.sg { background: #7C5CFF; }
.testi-product.nc { background: var(--orange-hot); }
/* when shown on the video itself (top corner) */
.testi-video .testi-product {
  position: absolute;
  z-index: 3;
  top: 14px;
  inset-inline-start: 14px;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.testi-qmark {
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 0.5;
  color: var(--orange);
  display: block;
  margin-bottom: 14px;
  height: 28px;
}
.testi-quote {
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 22px;
}
.testi-person { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-size: 18px; font-weight: 800; color: var(--blue-deep); }
.testi-role { font-size: 15px; color: var(--ink-soft); }

/* arrows + dots */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 52px; height: 52px;
  border: none; border-radius: 50%;
  background: #fff;
  color: var(--blue-brand);
  font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(13,71,161,0.20);
  transition: transform 0.2s var(--ease-pop), background 0.2s ease;
}
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); background: var(--paper-warm); }
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-arrow.prev { left: -8px; }
.carousel-arrow.next { right: -8px; }
.carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: rgba(21,101,192,0.25); cursor: pointer; padding: 0;
  transition: background 0.25s ease, transform 0.25s var(--ease-pop);
}
.carousel-dot.active { background: var(--orange-hot); transform: scale(1.25); }

@media (max-width: 760px) {
  .testimonials { padding: 84px 18px; }
  .testi-card { grid-template-columns: 1fr; gap: 26px; justify-items: center; text-align: center; }
  .testi-video { width: min(240px, 70vw); max-height: none; }
  .testi-person { align-items: center; }
  .carousel-arrow.prev { left: 2px; }
  .carousel-arrow.next { right: 2px; }
  .testi-qmark { text-align: center; }
}

/* ============================================================
   Section 8: In the media (featured news clip)
   ============================================================ */
.media {
  position: relative;
  padding: 120px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF4E9 100%);
  overflow: hidden;
}
.media-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; text-align: center; }
.media-head { max-width: 760px; margin: 0 auto 50px; }
.media-lead {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 16px;
}
html[lang="he"] .media-lead { letter-spacing: 0; }
.media-lead .hl {
  color: var(--blue-brand);
  background: linear-gradient(to top, rgba(255,169,77,0.55) 0 34%, transparent 34%);
  border-radius: 3px;
  padding: 0 3px;
}
.media-sub { font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.6; }

.media-feature { max-width: 820px; margin: 0 auto; }
.media-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 30px 70px rgba(13, 71, 161, 0.26);
  background: #000;
  cursor: pointer;
}
.media-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.media-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-caption { margin-top: 26px; }
.media-headline {
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  max-width: 680px;
  margin: 0 auto 8px;
}
.media-source {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ============================================================
   Section 11: Contact
   ============================================================ */
.contact {
  position: relative;
  padding: 120px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF2FF 100%);
  overflow: hidden;
}
.contact-inner {
  position: relative; z-index: 2;
  max-width: 1060px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.contact-lead {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.12; letter-spacing: -0.5px;
  color: var(--ink); margin-bottom: 16px;
}
html[lang="he"] .contact-lead { letter-spacing: 0; }
.contact-lead .hl {
  color: var(--blue-brand);
  background: linear-gradient(to top, rgba(255,169,77,0.55) 0 34%, transparent 34%);
  border-radius: 3px; padding: 0 3px;
}
.contact-sub { font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.6; margin-bottom: 26px; max-width: 440px; }
.contact-points { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.contact-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 16px; }
.contact-points svg { width: 20px; height: 20px; color: var(--orange-hot); flex: none; }

.contact-form {
  background: #fff;
  border-radius: 26px;
  padding: 34px;
  box-shadow: 0 24px 60px rgba(21, 101, 192, 0.16);
}
.contact-form .field { margin-bottom: 15px; }
.contact-form label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1.5px solid rgba(21, 101, 192, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit; font-size: 15px; color: var(--ink); background: #fff;
  transition: border-color 0.2s ease;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue-brand); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--orange-hot); outline-offset: 2px; }
.contact-form textarea { resize: vertical; }
.contact-submit { width: 100%; justify-content: center; margin-top: 8px; font-size: 17px; padding: 14px; }
.contact-success { margin-top: 16px; text-align: center; color: var(--blue-deep); font-weight: 800; font-size: 16px; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--blue-deep); color: rgba(255, 255, 255, 0.82); padding: 56px 28px 0; }
.footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px;
}
.footer-wordmark { font-family: var(--font-display-en); font-size: 25px; font-weight: 700; color: #fff; margin-bottom: 14px; }
html[lang="he"] .footer-wordmark { font-family: var(--font-display-he); }

/* Social links in the footer */
.footer-social { display: flex; gap: 10px; margin: 4px 0 16px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-brand p { font-size: 14.5px; line-height: 1.6; max-width: 330px; margin-bottom: 8px; }
.footer-gefen { font-weight: 700; color: rgba(255,255,255,0.92); }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; font-family: inherit; }
.footer-col a { display: block; font-size: 14.5px; color: rgba(255, 255, 255, 0.75); margin-bottom: 9px; transition: color 0.2s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Conversion helpers: floating WhatsApp + sticky mobile CTA
   ============================================================ */
.wa-float {
  position: fixed;
  z-index: 80;
  left: 22px; bottom: 22px;   /* moved to bottom-left so it doesn't collide with the tabnav accessibility button (bottom-right) */
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(37, 211, 102, 0.7);
  transition: transform 0.25s var(--ease-pop);
  animation: wa-pulse 2.1s ease-out infinite;
}
.wa-float:hover { transform: scale(1.12); }
.wa-float svg { width: 38px; height: 38px; fill: #fff; }
@keyframes wa-pulse {
  0%   { box-shadow: 0 12px 34px rgba(37, 211, 102, 0.7), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 12px 34px rgba(37, 211, 102, 0.7), 0 0 0 22px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 12px 34px rgba(37, 211, 102, 0.7), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Sticky "wheel of fortune" launcher — opens the wheel popup any time.
   Sits on the left, stacked above the WhatsApp button (which is bottom-left). */
.wheel-fab {
  position: fixed; z-index: 81;
  left: 22px; bottom: 94px;
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(8, 40, 90, 0.3);
  animation: wheel-fab-pulse 2.6s ease-in-out infinite;
}
.wheel-fab svg { width: 46px; height: 46px; }
.wheel-fab:hover { transform: scale(1.08); }
@keyframes wheel-fab-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(21, 101, 192, 0.5); }
  50% { box-shadow: 0 10px 28px rgba(21, 101, 192, 0.5), 0 0 0 12px rgba(255, 122, 26, 0.14); }
}
@media (max-width: 720px) { .wheel-fab { bottom: 88px; } }
@media (prefers-reduced-motion: reduce) { .wheel-fab { animation: none; } }

.mobile-cta { display: none; }

/* WhatsApp button inside the contact section */
.contact-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; font-weight: 800; font-size: 16px;
  padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.38);
  transition: transform 0.25s var(--ease-pop), box-shadow 0.25s ease;
}
.contact-wa:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 12px 28px rgba(37, 211, 102, 0.46); }
.contact-wa svg { width: 22px; height: 22px; fill: #fff; }
.contact-wa-label { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 22px 0 10px; }

@media (max-width: 720px) {
  .wa-float { display: none; }
  .mobile-cta {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
    display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(21, 101, 192, 0.12);
  }
  .mobile-cta a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; font-size: 15px; padding: 13px; border-radius: 999px;
  }
  .mobile-cta .mc-wa { background: #25D366; color: #fff; }
  .mobile-cta .mc-wa svg { width: 20px; height: 20px; fill: #fff; }
  .mobile-cta .mc-talk { background: linear-gradient(135deg, var(--orange-soft), var(--orange-hot)); color: #fff; }
  body { padding-bottom: 74px; }
}

/* ============================================================
   Motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 40px;
    gap: 8px;
  }
  .hero-copy { max-width: 100%; }
  .hero-copy .sub { margin-inline: auto; }
  .hero-cta-row { justify-content: center; }

  .hero-visual { height: 400px; max-width: 480px; margin: 0 auto; width: 100%; }
  .orange-blob { width: 420px; height: 420px; inset-inline-end: -15%; }
}

@media (max-width: 760px) {
  .about { padding: 84px 20px 74px; }
  .about-head { margin-bottom: 42px; }
  .platform-peek { width: 84px; bottom: -24px; inset-inline-end: -8px; }
  .platform-stage::before { inset: 16px -10px -14px 16px; }
}

@media (max-width: 520px) {
  .topnav-inner { padding: 0 16px; gap: 12px; }
  .logo { font-size: 22px; }
  .btn-nav { font-size: 13px; padding: 8px 14px; }

  .hero-inner { padding: 30px 18px 12px; }
  .hero-visual { height: 330px; }
  .btn-hero { font-size: 16px; padding: 14px 26px; }
}


/* ============================================================
   Legal subpages (privacy / terms / cookies / accessibility)
   ============================================================ */
.legal-hero {
  background: linear-gradient(135deg, var(--blue-brand), var(--blue-deep));
  color: #fff;
  padding: 56px 28px 64px;
  position: relative;
  overflow: hidden;
}
.legal-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,140,66,0.28), transparent 70%);
  border-radius: 50%;
}
.legal-hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.legal-hero .eyebrow { color: var(--orange-soft); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 10px; }
.legal-hero h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.15; margin-bottom: 12px; }
.legal-hero .legal-updated { font-size: 14.5px; color: rgba(255,255,255,0.82); }

.legal-body { max-width: 820px; margin: 0 auto; padding: 52px 28px 72px; }
.legal-body .legal-intro { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 30px; }
.legal-body h2 {
  font-size: 21px;
  color: var(--blue-brand);
  margin: 38px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #E6EFFA;
}
.legal-body h3 { font-size: 17px; color: var(--ink); margin: 24px 0 8px; }
.legal-body p { font-size: 15.5px; line-height: 1.78; color: var(--ink-soft); margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px; padding-inline-start: 22px; }
.legal-body li { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 8px; }
.legal-body a { color: var(--blue-brand); font-weight: 600; text-decoration: underline; }
.legal-body strong { color: var(--ink); }

.legal-callout {
  background: var(--paper-warm);
  border: 1px solid #DCE8F7;
  border-inline-start: 4px solid var(--orange-hot);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 22px 0;
}
.legal-callout p { margin-bottom: 0; }

.legal-contact {
  background: var(--blue-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-top: 38px;
}
.legal-contact h3 { color: #fff; margin-top: 0; }
.legal-contact p { color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.legal-contact a { color: var(--orange-soft); }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  font-weight: 600;
  color: var(--blue-brand);
}
.legal-back:hover { color: var(--blue-deep); }

/* a11y bar: skip-link + larger focus ring */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 200;
}
.skip-link:focus { inset-inline-start: 8px; }
.legal-body a:focus-visible,
.legal-back:focus-visible { outline: 3px solid var(--orange-hot); outline-offset: 2px; }

/* Global keyboard-focus indicator — honors the accessibility statement:
   interactive elements are marked when reached by keyboard (Tab). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orange-hot);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Cookie consent banner — gates analytics until the visitor
   agrees. Shown by JS only when no choice is stored yet.
   ============================================================ */
.cc-banner {
  position: fixed;
  z-index: 9999;
  left: 50%; transform: translateX(-50%);
  bottom: 16px;
  width: min(680px, calc(100% - 32px));
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  padding: 16px 20px;
  display: none;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cc-banner.cc-show { display: flex; }
.cc-text { flex: 1 1 280px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cc-text a { color: var(--blue-brand); font-weight: 700; }
.cc-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cc-btn { font-weight: 800; font-size: 14px; padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer; }
.cc-accept { background: linear-gradient(135deg, var(--orange-soft), var(--orange-hot)); color: #fff; }
.cc-decline { background: rgba(21, 101, 192, 0.08); color: var(--blue-deep); }
.cc-btn:hover { filter: brightness(1.05); }
@media (max-width: 560px) {
  .cc-banner { bottom: 0; left: 0; transform: none; width: 100%; border-radius: 16px 16px 0 0; }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; }
}

@media (max-width: 600px) {
  .legal-hero { padding: 40px 20px 48px; }
  .legal-body { padding: 36px 20px 56px; }
}

/* ============================================================
   Product page — NickAcademy + (prod-*)
   ============================================================ */
.prod-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-mid) 0%, var(--blue-brand) 45%, var(--blue-deep) 100%);
  color: #fff;
  padding: 64px 24px 76px;
}
.prod-hero .deco-blob { position: absolute; opacity: 0.18; pointer-events: none; }
.prod-hero .pb-1 { width: 360px; top: -80px; inset-inline-start: -90px; }
.prod-hero .pb-2 { width: 320px; bottom: -110px; inset-inline-end: -70px; }
.prod-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
}
.prod-hero-copy .eyebrow { color: var(--orange-soft); }
.prod-hero h1 {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.08; margin: 10px 0 16px;
  color: #fff; letter-spacing: -0.5px;
}
.prod-hero h1 .plus { color: var(--orange-hot); }
.prod-hero-sub { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 540px; }
.prod-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.prod-hero-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.prod-hero-badge .backed-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.prod-hero-badge img { height: 22px; width: auto; }
.prod-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; }
.prod-hero-visual .prod-laptop { width: 100%; max-width: 520px; filter: drop-shadow(0 24px 50px rgba(0,0,0,0.35)); border-radius: 14px; }
.prod-hero-visual .prod-peek { position: absolute; width: 120px; bottom: -18px; inset-inline-start: -10px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); }

/* generic light section */
.prod-section { position: relative; overflow: hidden; padding: 72px 24px; }
.prod-section.warm { background: var(--paper-warm); }
.prod-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.prod-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.prod-head h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; color: var(--ink); margin-bottom: 14px; }
.prod-head p { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; color: var(--ink-soft); }

/* doors grid — branded card style (blob + floating icon), matches catalog pcards */
.prod-door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.prod-door {
  display: flex; flex-direction: column; background: #fff; border-radius: 28px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pc, var(--blue-brand)) 12%, #fff);
  box-shadow:
    0 1px 2px rgba(15,36,59,0.05),
    0 6px 12px rgba(15,36,59,0.07),
    0 18px 32px color-mix(in srgb, var(--pc, var(--blue-brand)) 15%, transparent),
    0 34px 62px color-mix(in srgb, var(--pc, var(--blue-brand)) 18%, transparent);
  transition: transform 0.45s var(--ease-pop), box-shadow 0.45s var(--ease-soft);
}
.prod-door:hover {
  transform: translateY(-12px) rotate(-0.6deg);
  box-shadow:
    0 2px 4px rgba(15,36,59,0.06),
    0 12px 22px rgba(15,36,59,0.10),
    0 30px 50px color-mix(in srgb, var(--pc, var(--blue-brand)) 24%, transparent),
    0 56px 88px color-mix(in srgb, var(--pc, var(--blue-brand)) 28%, transparent);
}
.prod-door-top {
  position: relative; height: 188px; overflow: hidden;
  background: color-mix(in srgb, var(--pc, var(--blue-brand)) 4%, #fff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -16px 24px -20px color-mix(in srgb, var(--pc, var(--blue-brand)) 30%, transparent);
}
.prod-door-blob {
  position: absolute; top: 50%; left: 50%; width: 96%;
  transform: translate(-50%, -50%); z-index: 1; opacity: 0.5;
  animation: blob-float 9s var(--ease-soft) infinite;
}
.prod-door-ico { position: relative; z-index: 3; display: grid; place-items: center; }
.prod-door-ico img {
  width: 116px; height: 116px; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.18));
  animation: peek-bob 5.5s var(--ease-soft) infinite;
  transition: transform 0.45s var(--ease-pop);
}
.prod-door:hover .prod-door-ico img { transform: scale(1.09); }
.prod-door-body { flex: 1; padding: 24px 26px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.prod-door-game { font-family: var(--font-display-en); font-weight: 600; font-size: 23px; color: var(--pc, var(--blue-brand)); margin-bottom: 5px; }
.prod-door-subject { font-size: 13px; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.3px; margin-bottom: 12px; }
.prod-door-body p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* creative tools */
.prod-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.prod-tool {
  position: relative; border-radius: var(--radius); padding: 30px 28px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep));
}
.prod-tool.purple { background: linear-gradient(135deg, #9170ff, #6A45D6); }
.prod-tool h3 { font-size: 24px; color: #fff; margin-bottom: 8px; }
.prod-tool .prod-tool-tag { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.5px; }
.prod-tool p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.92); margin-top: 10px; }

/* how it works steps */
.prod-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prod-step { text-align: center; padding: 10px; }
.prod-step-num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: linear-gradient(135deg, var(--orange-soft), var(--orange-hot)); color: #fff; font-family: var(--font-display-en); font-weight: 600; font-size: 22px; }
.prod-step h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.prod-step p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* dashboard block */
.prod-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.prod-dash-frame { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 46px rgba(21,101,192,0.18); transform: rotate(-1.4deg); border: 5px solid #fff; cursor: pointer; transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft); }
.prod-dash-frame img { width: 100%; display: block; }
.prod-dash-frame:hover { transform: rotate(0deg) scale(1.015); box-shadow: 0 26px 56px rgba(21,101,192,0.26); }
.prod-dash-hint { position: absolute; bottom: 14px; inset-inline-end: 14px; background: linear-gradient(135deg, var(--orange-soft), var(--orange-hot)); color: #fff; font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgba(255,122,26,0.4); opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
.prod-dash-frame:hover .prod-dash-hint { opacity: 1; transform: translateY(0); }
.prod-dash-copy h2 { font-size: clamp(24px, 3.2vw, 36px); color: var(--ink); margin-bottom: 14px; }
.prod-dash-copy p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 18px; }
.prod-dash-list { list-style: none; display: grid; gap: 12px; margin-bottom: 24px; }
.prod-dash-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.prod-dash-list svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--orange-hot); margin-top: 2px; }

/* final CTA band */
.prod-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--blue-brand), var(--blue-deep)); color: #fff; text-align: center; padding: 72px 24px; }
.prod-cta .deco-blob { width: 320px; opacity: 0.16; top: -70px; inset-inline-end: -80px; }
.prod-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.prod-cta h2 { font-size: clamp(28px, 4vw, 44px); color: #fff; margin-bottom: 14px; }
.prod-cta p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 28px; }
.prod-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.prod-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.65); }
.prod-cta .btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; box-shadow: none; }

@media (max-width: 920px) {
  .prod-hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .prod-hero-sub { margin-inline: auto; }
  .prod-hero-cta { justify-content: center; }
  .prod-door-grid, .prod-steps, .prod-tools { grid-template-columns: 1fr 1fr; }
  .prod-dash { grid-template-columns: 1fr; gap: 28px; }
  .prod-dash-frame { transform: none; }
}
@media (max-width: 600px) {
  .prod-section { padding: 52px 18px; }
  .prod-hero { padding: 48px 18px 56px; }
  .prod-door-grid, .prod-steps, .prod-tools { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog (added 2026-07: blog index + article pages)
   ============================================================ */
.nav-links a.nav-current { color: var(--blue-brand); font-weight: 700; }

/* --- blog index head --- */
.blog-head { position: relative; overflow: hidden; background: var(--paper-warm); padding: 72px 24px 56px; }
.blog-head-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.blog-head h1 { font-size: clamp(32px, 4.6vw, 52px); color: var(--ink); margin: 6px 0 14px; }
.blog-head-sub { font-size: 18px; line-height: 1.7; color: var(--ink-soft); max-width: 640px; }

/* --- card grid --- */
.blog-list { padding: 56px 24px 84px; }
.blog-list-inner { max-width: var(--max-width); margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 6px 16px rgba(15,36,59,0.07), 0 20px 40px rgba(21,101,192,0.10);
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(15,36,59,0.10), 0 28px 54px rgba(21,101,192,0.16); }
.blog-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-warm); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.blog-card-meta { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.blog-card h2, .blog-card h3 { font-size: 20px; line-height: 1.35; color: var(--ink); }
.blog-card p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.blog-card-more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 15px; color: var(--blue-brand); }
.blog-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; }
.blog-card-featured .blog-card-img { aspect-ratio: auto; min-height: 300px; }
.blog-card-featured .blog-card-body { justify-content: center; padding: 30px 34px; }
.blog-card-featured h2 { font-size: clamp(22px, 2.6vw, 30px); }
.blog-card-featured p { font-size: 16.5px; }
.blog-tag {
  display: inline-block; background: color-mix(in srgb, var(--blue-brand) 9%, #fff);
  color: var(--blue-brand); font-weight: 700; font-size: 12.5px; padding: 4px 12px;
  border-radius: 999px; margin-inline-end: 6px;
}

/* --- article page --- */
.article { max-width: 780px; margin: 0 auto; padding: 56px 24px 20px; }
.article-crumbs { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 18px; }
.article-crumbs a:hover { color: var(--blue-brand); }
.article-head h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.22; color: var(--ink); margin-bottom: 16px; }
.article-lead { font-size: 19px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.article-meta .dot { color: var(--blue-light); }
.article-tags { margin-inline-start: 8px; }
.article-hero { margin: 28px 0 8px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 24px rgba(15,36,59,0.10), 0 26px 52px rgba(21,101,192,0.12); }
.article-hero img { width: 100%; display: block; }
.article-body { padding-top: 26px; font-size: 17.5px; line-height: 1.85; color: var(--ink); }
.article-body p { margin-bottom: 20px; }
.article-body h2 { font-size: 27px; color: var(--blue-brand); margin: 40px 0 14px; }
.article-body h3 { font-size: 21px; color: var(--ink); margin: 30px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-inline-start: 26px; }
.article-body li { margin-bottom: 9px; }
.article-body a { color: var(--blue-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote {
  border-inline-start: 4px solid var(--orange); background: var(--paper-warm);
  border-radius: 12px; padding: 18px 22px; margin: 0 0 20px; font-weight: 500;
}
.article-body figure { margin: 26px 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 20px rgba(15,36,59,0.09); }

/* --- CTA + author --- */
.article-cta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 240px; align-items: center; gap: 30px;
  background:
    radial-gradient(ellipse 120% 160% at 8% -40%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(120deg, var(--blue-mid), var(--blue-brand) 45%, var(--blue-deep));
  border-radius: 24px; padding: 38px 40px; margin: 48px 0 30px; color: #fff;
  box-shadow: 0 14px 30px rgba(13,71,161,0.28), 0 30px 60px rgba(21,101,192,0.18);
}
.article-cta-blob {
  position: absolute; top: -70px; inset-inline-end: -60px; width: 240px;
  opacity: 0.32; pointer-events: none; transform: rotate(14deg);
}
.article-cta-copy { position: relative; z-index: 2; }
.article-cta h2 { color: #fff; font-size: clamp(22px, 2.6vw, 27px); line-height: 1.3; margin-bottom: 10px; }
.article-cta p { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.65; max-width: 480px; margin-bottom: 22px; }
.article-cta-media {
  position: relative; z-index: 2; align-self: center; justify-self: center;
  border: 6px solid #fff; border-radius: 14px; background: #fff; overflow: hidden;
  transform: rotate(2.5deg); width: 240px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.30);
  transition: transform 0.3s var(--ease-pop);
}
.article-cta:hover .article-cta-media { transform: rotate(0deg) scale(1.02); }
.article-cta-media img { width: 100%; height: 170px; object-fit: cover; display: block; }
.article-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.article-cta .btn-primary {
  background: linear-gradient(135deg, var(--orange-soft), var(--orange-hot));
  box-shadow: 0 8px 20px rgba(255,122,26,0.40);
}
.btn-cta-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.65); font-size: 16px; padding: 12px 28px; }
.btn-cta-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.author-box { display: flex; align-items: center; gap: 16px; border-top: 1.5px solid color-mix(in srgb, var(--blue-brand) 12%, #fff); padding: 24px 0 40px; }
.author-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep)); color: #fff;
  font-family: var(--font-display-he); font-weight: 800; font-size: 22px;
}
.author-name { font-weight: 800; font-size: 16px; color: var(--ink); }
.author-role { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* --- related --- */
.blog-related { background: var(--paper-warm); padding: 60px 24px 76px; }
.blog-related-inner { max-width: var(--max-width); margin: 0 auto; }
.blog-related h2 { font-size: 30px; color: var(--ink); margin: 4px 0 26px; }
.blog-related .blog-card-featured { grid-column: auto; display: flex; }
.blog-related .blog-card-featured .blog-card-img { aspect-ratio: 16 / 9; min-height: 0; }

@media (max-width: 920px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card-featured { grid-template-columns: 1fr; }
  .blog-card-featured .blog-card-img { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-head { padding: 52px 18px 40px; }
  .blog-list { padding: 40px 18px 60px; }
  .article { padding: 40px 18px 12px; }
  .article-cta { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; }
  .article-cta-media { width: 100%; max-width: 300px; }
}