/* ============================================================
   GENIE FX ACADEMY — SCREENS & REAL UI STYLESHEET
   Screenshot displays, phone image layouts, news cards,
   app store badges, and product-driven visual components
   ============================================================ */

/* ========================
   GLOBAL POLISH UPGRADES
   ======================== */

/* Text selection */
::selection {
  background: rgba(1, 129, 250, 0.25);
  color: #ffffff;
}

/* Scroll indicator */
:root {
  scroll-behavior: smooth;
}

/* Enhanced scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--clr-primary-30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* Subtle horizontal gradient line between sections */
.section-separator {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-primary) 30%,
    var(--clr-primary-30) 50%,
    var(--border-primary) 70%,
    transparent 100%
  );
  margin: 0;
}

/* ========================
   HERO PHONE IMAGE SYSTEM
   ======================== */
.hero-phones-wrap {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Ambient glow beneath mockup — tuned to portrait two-phone composition */
.hero-phones-wrap::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 110px;
  background: radial-gradient(ellipse, rgba(1,129,250,0.35) 0%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}

/*
  Composed two-phone hero mockup (portrait image: 1009×1216, ratio 0.83)
  Constrained by height — not width — to prevent overflow in the 600px hero container.
  At max-height:560px the rendered width is ~464px, which sits cleanly in the right column.
*/
.hero-mockup-composed {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  height: auto;
  flex-shrink: 0;
  animation: floatSlow 7s ease-in-out infinite;
  filter:
    drop-shadow(0 24px 64px rgba(1,129,250,0.30))
    drop-shadow(0 52px 110px rgba(0,0,0,0.80));
  transform-origin: center bottom;
}

/* Mobile fallback — width-constrained since single column has no height limit */
.hero-mockup-mobile {
  width: 100%;
  max-width: 280px;
  height: auto;
  filter:
    drop-shadow(0 20px 56px rgba(1,129,250,0.30))
    drop-shadow(0 40px 80px rgba(0,0,0,0.72));
}

/* Legacy single-phone classes — no longer used in hero, kept for safety */
.hero-phone-main {
  position: relative;
  z-index: 1;
  width: 280px;
  flex-shrink: 0;
  animation: floatSlow 6s ease-in-out infinite;
  filter: drop-shadow(0 32px 80px rgba(1,129,250,0.25)) drop-shadow(0 60px 120px rgba(0,0,0,0.8));
  transform-origin: center bottom;
}

.hero-phone-secondary {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 0;
  width: 210px;
  transform: scale(0.75) translateX(-18%) translateY(8%);
  opacity: 0.45;
  filter: blur(2px);
  transform-origin: center bottom;
}

/* Floating feature chips around phones */
.phone-chip {
  position: absolute;
  background: rgba(14,14,18,0.92);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--shadow-glow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  white-space: nowrap;
  z-index: 4;
}
.phone-chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--clr-primary-08);
}
.phone-chip-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.phone-chip-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 2px;
}

/* Home structural utilities: extracted from repeated inline layout values. */
.home-page .hero-copy-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.home-page .hero-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Fixed dimensions for both hero CTAs — Download App + Explore Features */
.hero-cta-btn {
  width: 163.5px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Stack only on very small screens where two 163.5px buttons + 16px gap won't fit */
@media (max-width: 379px) {
  .home-page .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-cta-btn {
    width: 100%;
    max-width: 163.5px;
  }
}

.home-page .hero-proof-strip {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.home-page .hero-platform-note {
  color: rgba(201,207,224,0.76);
  margin: 0;
}

.home-page .hero-trust-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.home-page .hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.home-page .hero-trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
}

.home-page .hero-trust-stars {
  display: flex;
  gap: 2px;
  color: #FFB800;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255,184,0,0.22);
}

.home-page .hero-trust-label {
  color: rgba(201,207,224,0.82);
  margin: 0;
}

.home-page .feature-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: auto;
}

.home-page .feature-card-link-accent { color: var(--clr-accent); }
.home-page .feature-card-link-secondary { color: var(--clr-secondary); }
.home-page .feature-card-link-purple { color: #A050FF; }

/* ========================
   SCREENSHOT FRAME
   Used to show app screens with nice framing
   ======================== */
.screenshot-frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-md);
  transition: border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow);
}
.screenshot-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.screenshot-frame:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  transform: translateY(-4px);
}

/* Flat screenshot (no frame, just the phone image) */
.screenshot-float {
  filter:
    drop-shadow(0 10px 40px rgba(1,129,250,0.2))
    drop-shadow(0 30px 60px rgba(0,0,0,0.5));
  transition: filter var(--t-slow), transform var(--t-slow);
}
.screenshot-float:hover {
  filter:
    drop-shadow(0 15px 50px rgba(1,129,250,0.35))
    drop-shadow(0 40px 80px rgba(0,0,0,0.6));
  transform: translateY(-6px);
}

/* ========================
   FEATURE VISUAL — REAL SCREENSHOT LAYOUTS
   ======================== */

/* Single phone screenshot (for feature sections) */
.feature-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
/* Subtle ambient glow behind a transparent-bg phone — replaces hard grey card */
.phone-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.feature-phone-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(1,129,250,0.14) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  border-radius: var(--r-2xl);
  z-index: 0;
}
.feature-phone-wrap img {
  position: relative;
  z-index: 1;
}
.feature-phone-wrap img {
  position: relative;
  z-index: 1;
  max-width: 280px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(1,129,250,0.2)) drop-shadow(0 30px 80px rgba(0,0,0,0.6));
}

/* Two stacked/overlapping phone screenshots */
.feature-phone-pair {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-phone-pair .phone-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  z-index: 1;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
  opacity: 0.8;
}
.feature-phone-pair .phone-front {
  position: relative;
  z-index: 2;
  right: -20px;
  width: 240px;
  filter: drop-shadow(0 15px 50px rgba(1,129,250,0.25)) drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}

/* AI pair: side-by-side screenshots for Ask Genie */
.ai-screenshot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: end;
}
.ai-screenshot-pair img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
  border-radius: var(--r-xl);
}
.ai-screenshot-pair img:first-child {
  transform: translateY(20px);
  filter: drop-shadow(0 8px 24px rgba(1,129,250,0.2)) drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.ai-screenshot-pair img:last-child {
  filter: drop-shadow(0 8px 24px rgba(1,129,250,0.15)) drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

/* ========================
   NEWS & MARKET INSIGHTS SECTION
   ======================== */
.news-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
}
.news-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(1,129,250,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(192,240,0,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.news-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* News phone - the main visual */
.news-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}
.news-phone-glow {
  position: absolute;
  inset: 10%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.25) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.news-phone-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.3))
    drop-shadow(0 25px 60px rgba(1,129,250,0.22))
    drop-shadow(0 45px 90px rgba(0,0,0,0.7));
  animation: floatSlow 7s ease-in-out infinite;
}

/* News content cards grid */
.news-cards-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Individual news feature card */
.news-feature-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: default;
}
.news-feature-card:hover {
  border-color: var(--border-primary);
  background: var(--bg-card-hover);
  transform: translateX(6px);
  box-shadow: var(--shadow-glow);
}
.news-feature-card-img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}
.news-feature-card-content {
  padding-block: var(--sp-4);
  padding-inline-start: 0;
  padding-inline-end: var(--sp-4);
  flex: 1;
}
.news-feature-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-accent);
  background: var(--clr-accent-20);
  border: 1px solid var(--border-accent);
  padding: 2px 8px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.news-feature-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.news-feature-card-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* News bullet points (right side list) */
.news-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.news-bullet {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.news-bullet-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--clr-primary-08);
  border: 1px solid var(--border-primary);
}
.news-bullet-text h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.news-bullet-text p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ========================
   ENHANCED HERO SECTION STYLES
   ======================== */
.hero-section {
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--sp-4));
  padding-bottom: var(--sp-10);
  position: relative;
  overflow: hidden;
}

/* Gradient divider at bottom of hero */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
  z-index: 2;
}

/* Animated gradient border on hero CTA */
.btn-primary-glow {
  position: relative;
}
.btn-primary-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-md) + 1px);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary), var(--clr-accent));
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
  filter: blur(8px);
}
.btn-primary-glow:hover::before { opacity: 0.6; }

/* ========================
   PRICING TRUST BAR
   ======================== */
.pricing-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-10);
}
.pricing-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.pricing-trust-item svg {
  color: var(--clr-primary);
  flex-shrink: 0;
}
.pricing-trust-item strong { color: var(--text-primary); }

/* ========================
   ABOUT — HUMAN STORY SECTION
   ======================== */
.origin-story {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-2xl);
  padding: var(--sp-12) var(--sp-12);
  overflow: hidden;
}
.origin-story::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary), var(--clr-accent));
}
.origin-story-text {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--text-secondary);
}
.origin-story-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ========================
   CONTACT — PERSONALITY STYLES
   ======================== */
.contact-community-card {
  padding: var(--sp-6) var(--sp-7);
  background: linear-gradient(135deg, rgba(1,129,250,0.08) 0%, rgba(70,100,255,0.05) 100%);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-xl);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-top: var(--sp-4);
}
.contact-community-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  border-radius: var(--r-md);
  background: rgba(70, 100, 255, 0.10);
  border: 1px solid rgba(70, 100, 255, 0.22);
}

/* ========================
   ENHANCED CARD SPOTLIGHT EFFECT
   (uses CSS custom properties set by JS)
   ======================== */
.card-spotlight {
  background: radial-gradient(
    320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(1, 129, 250, 0.04),
    transparent 60%
  ), var(--bg-elevated);
}

/* ========================
   SECTION TRANSITION HELPERS
   ======================== */
.section-top-fade {
  position: relative;
}
.section-top-fade::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg-base), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ========================
   SOCIAL PROOF — AVATAR STACK
   ======================== */
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
  margin-right: -8px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.avatar-stack-item:nth-child(2) { background: linear-gradient(135deg, #4664FF, #B9E4FF); }
.avatar-stack-item:nth-child(3) { background: linear-gradient(135deg, #C0F000, #7EC800); color: #0A1A00; }
.avatar-stack-item:nth-child(4) { background: linear-gradient(135deg, #A050FF, #4664FF); }
.avatar-stack-last {
  margin-left: 16px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.avatar-stack-last strong { color: var(--text-primary); }

.home-page .hero-proof-strip .avatar-stack-last {
  margin-left: 0;
  color: rgba(201,207,224,0.84);
}

.home-page .hero-proof-strip .avatar-stack-last strong {
  color: #ffffff;
}

/* ========================
   HIGHLIGHTED QUOTE / PULL-QUOTE
   ======================== */
.pull-quote {
  border-left: 3px solid var(--clr-primary);
  padding: var(--sp-4) var(--sp-6);
  background: var(--clr-primary-08);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: var(--sp-6);
}
[dir="rtl"] .pull-quote {
  border-left: none;
  border-right: 3px solid var(--clr-primary);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.pull-quote p {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ========================
   EMOTIONAL HEADLINE TAG
   Used on pricing, pricing hero
   ======================== */
.emotional-headline {
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--sp-5);
}
.emotional-headline strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ========================
   HERO ATMOSPHERIC BACKGROUND DECORATIONS
   (arc rings + sparkle particles — never over text)
   ======================== */

/* Arc ring SVG — right side of hero, cinematic fintech feel */
.hero-arc-bg {
  position: absolute;
  top: 0;
  right: -5%;
  width: 58%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-arc-bg svg {
  width: 100%;
  height: 100%;
}

/* Floating sparkle particles in hero */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-sparkle {
  position: absolute;
  line-height: 1;
  animation: heroSparkle 4s ease-in-out infinite;
}
.hero-sparkle.s-blue    { color: rgba(1,129,250,0.75);    animation-delay: 0s; }
.hero-sparkle.s-accent  { color: rgba(192,240,0,0.65);    animation-delay: 1.1s; }
.hero-sparkle.s-white   { color: rgba(255,255,255,0.4);   animation-delay: 2.0s; }
.hero-sparkle.s-violet  { color: rgba(70,100,255,0.7);    animation-delay: 2.8s; }
.hero-sparkle.s-orange  { color: rgba(255,110,60,0.55);   animation-delay: 1.6s; }

/* ========================
   PHONE BEZEL — polished phone screenshot wrapper
   (glass-look phone frame, used for premium screenshot display)
   ======================== */
.phone-bezel {
  position: relative;
  border-radius: 44px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.18),
    0 0 60px rgba(1,129,250,0.18),
    0 30px 90px rgba(0,0,0,0.75);
  background: #090910;
}
/* Notch bar at top */
.phone-bezel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #090910;
  border-radius: 0 0 14px 14px;
  z-index: 10;
}
.phone-bezel img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================
   AI SHOWCASE — Ask Genie tilted phones treatment
   (image already includes both phones with shadow/depth on black bg)
   ======================== */
.ai-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.ai-showcase-glow {
  position: absolute;
  inset: 5%;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(1,129,250,0.28) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.ai-showcase-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  /* Premium 3-layer drop-shadow follows phone silhouette for native integration */
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 20px 45px rgba(1,129,250,0.18))
    drop-shadow(0 40px 80px rgba(0,0,0,0.7));
  transition: transform var(--t-slow), filter var(--t-slow);
}
.ai-showcase-img:hover {
  transform: translateY(-6px);
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.35))
    drop-shadow(0 25px 55px rgba(1,129,250,0.25))
    drop-shadow(0 50px 100px rgba(0,0,0,0.75));
}

/* ========================
   CHART SHOWCASE — Genie Chart hero treatment
   (image already includes the phone mockup + dark blue bg)
   ======================== */
.chart-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  min-height: 460px;
}
.chart-showcase-glow {
  position: absolute;
  inset: 12%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.chart-showcase-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.3))
    drop-shadow(0 25px 60px rgba(1,129,250,0.18))
    drop-shadow(0 45px 90px rgba(0,0,0,0.65));
  transition: transform var(--t-slow);
}
.chart-showcase-img:hover {
  transform: translateY(-6px);
}

/* ========================
   PRODUCT CARD — clean screenshot card with depth
   (used for Genie Chart + feature images that are not phone shapes)
   ======================== */
.product-card {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(1,129,250,0.08);
  transition: border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow);
}
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(1,129,250,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.product-card img {
  width: 100%;
  height: auto;
  display: block;
}
.product-card:hover {
  border-color: var(--border-primary);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), var(--shadow-glow);
  transform: translateY(-4px);
}

/* ========================
   RESPONSIVE OVERRIDES FOR SCREENS
   ======================== */
@media (max-width: 1024px) {
  .hero-phones-wrap { height: 480px; }
  /* Portrait image: constrain by height at tablet — ~381px wide at this height */
  .hero-mockup-composed { max-height: 460px; }
  /* legacy */
  .hero-phone-main { width: 220px; }
  .hero-phone-secondary { width: 170px; }
}

@media (max-width: 900px) {
  .hero-phones-wrap { display: none; }
  /* Show composed mockup below copy on mobile */
  .hero-phone-mobile-only {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-10);
  }
  .hero-phone-mobile-only img {
    max-width: 280px;
    filter: drop-shadow(0 20px 56px rgba(1,129,250,0.30)) drop-shadow(0 40px 80px rgba(0,0,0,0.72));
  }
  .news-layout { grid-template-columns: 1fr; }
  .news-phone-wrap { min-height: 380px; }
  .news-phone-wrap img { max-width: 320px; }
  .ai-showcase-img { max-width: 100%; }
  .ai-screenshot-pair { grid-template-columns: 1fr; }
  .ai-screenshot-pair img:first-child { transform: none; }
  .chart-showcase { min-height: 420px; }
  .chart-showcase-img { max-width: 280px; }
  .feature-phone-pair { height: auto; }
  .feature-phone-pair .phone-back { display: none; }
  .feature-phone-pair .phone-front { right: 0; width: 100%; max-width: 260px; }
  .origin-story { padding: var(--sp-8); }
}

@media (max-width: 640px) {
  .pricing-trust-bar { gap: var(--sp-5); padding: var(--sp-5); }
}

/* ========================
   MOCKUP BACKGROUND BLENDING
   ======================== */
.ai-showcase-img {
  border-radius: 16px;
}

/* legacy single-phone override — hero now uses .hero-mockup-composed */
.hero-phone-main {
  filter: drop-shadow(0 32px 80px rgba(1,129,250,0.25)) drop-shadow(0 60px 120px rgba(0,0,0,0.8));
}
.news-phone-wrap img,
.feature-phone-pair img {
  /* Note: mix-blend-mode kept off — drop-shadow + border-radius handle integration cleanly */
}
.chart-showcase-glow,
.ai-showcase-glow,
.news-phone-glow {
  opacity: 0.7 !important;
  width: 60% !important;
  height: 60% !important;
}

/* ========================
   LESSON CARDS — STAGGERED COMPOSITION
   Two real lesson cards arranged with overlap + depth
   (used in Education section, home + features)
   ======================== */
.lesson-cards {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 280px;
  margin-inline: auto;
}
.lesson-cards-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.22) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.lesson-card-img {
  position: absolute;
  width: 75%;
  height: auto;
  display: block;
  border-radius: 14px;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 18px 40px rgba(1,129,250,0.18))
    drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.lesson-card-img.card-1 {
  top: 8%;
  left: 0;
  z-index: 1;
}
.lesson-card-img.card-2 {
  bottom: 8%;
  right: 0;
  z-index: 2;
}
.lesson-cards:hover .card-1 { transform: translate(-6px, -4px); }
.lesson-cards:hover .card-2 { transform: translate(6px, 4px); }

[dir="rtl"] .lesson-card-img.card-1 { left: auto; right: 0; }
[dir="rtl"] .lesson-card-img.card-2 { right: auto; left: 0; }

@media (max-width: 768px) {
  .lesson-cards {
    min-height: 240px;
    max-width: 420px;
  }
  .lesson-card-img { width: 78%; }
}

/* Genie Chart section CTA — fixed 243×48px, text centered (EN + AR) */
.gc-cta-btn {
  width: 243px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── index.html — gc-device container: add padding to match .ai-showcase ── */
.gc-device {
  padding: var(--sp-4) !important;
}

/* ── index.html — gc-device-glow: match .ai-showcase-glow exactly ── */
.gc-device-glow {
  /* Override fixed 560px values with percentage-based centred glow */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 70% !important;
  height: 70% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    rgba(1,129,250,0.28) 0%,
    transparent 70%
  ) !important;
  filter: blur(50px) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: glowPulse 6s ease-in-out infinite !important;
}

/* ── index.html — gc-device-img: match .ai-showcase-img quality exactly ── */
.gc-device-img {
  /* Kill the rectangular frame */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* drop-shadow follows PNG silhouette — same 3-layer values as ai-showcase-img */
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 20px 45px rgba(1,129,250,0.18))
    drop-shadow(0 40px 80px rgba(0,0,0,0.7)) !important;
  transition: transform var(--t-slow), filter var(--t-slow) !important;
}
.gc-device-img:hover {
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.35))
    drop-shadow(0 25px 55px rgba(1,129,250,0.25))
    drop-shadow(0 50px 100px rgba(0,0,0,0.75)) !important;
}

/* ── FEATURES PAGE SEAMLESS FIX ──
   Fixes hard cut lines between sections on features.html.
   All rules are scoped to .features-page or to the specific section IDs
   (which only exist in features.html) — no other page is affected.
   ──────────────────────────────────────────────────────────────────── */

/* ── Fix A: Stop glow clipping ──
   .page-hero and .news-section both have overflow:hidden in their CSS.
   This clips glow elements at section edges, creating hard cut lines.
   Override only for the features page — other pages are unaffected. */
.features-page .page-hero {
  overflow: visible;
}

/* #news has higher specificity than .news-section — overrides overflow:hidden */
#chart,
#education,
#ai,
#news,
#community {
  overflow: visible;
  position: relative; /* anchor for ::before / ::after pseudo-elements */
}

/* Ensure inner content always sits above gradient fade overlays (z-index: 0).
   Without this, the absolutely-positioned fades would paint over
   unpositioned content (text, buttons, lists) in the stacking order. */
.features-page .section > .container,
.features-page .news-section > .container {
  position: relative;
  z-index: 1;
}

/* ── Fix B: Soft gradient transitions between sections ──

   Background alternation (verified):
     page-hero → bg-base
     pills bar → bg-base
     #chart    → bg-base
     #education→ bg-surface  ← cut
     #ai       → bg-base     ← cut
     #news     → bg-surface  ← cut
     #community→ bg-base     ← cut
     CTA       → bg-base     (same as community — no cut)

   Technique:
     ::after  — outgoing bleed: bleeds TOWARD the next section's background color
     ::before — entry seal: fades FROM the current section's own color (acts as
                a clean cap; invisible against the section's own background but
                smooths out any colour bleed arriving from the ::after above)

   #community::after is intentionally OMITTED — the next section (CTA) is the
   same bg-base colour; adding a bg-surface tint there would look wrong.           */

/* Shared base for all section top-fades */
#chart::before,
#education::before,
#ai::before,
#news::before,
#community::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

/* bg-base sections seal their tops with bg-base (invisible on bg-base, but
   smooths out any incoming bleed from the previous section's ::after) */
#chart::before,
#ai::before,
#community::before {
  background: linear-gradient(to bottom, var(--bg-base), transparent);
}

/* bg-surface sections seal their tops with bg-surface — same principle */
#education::before,
#news::before {
  background: linear-gradient(to bottom, var(--bg-surface), transparent);
}

/* Shared base for all section bottom-fades */
#chart::after,
#education::after,
#ai::after,
#news::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

/* bg-base sections bleed bg-surface downward (toward the bg-surface section below) */
#chart::after,
#ai::after {
  background: linear-gradient(to top, var(--bg-surface), transparent);
}

/* bg-surface sections bleed bg-base downward (toward the bg-base section below) */
#education::after,
#news::after {
  background: linear-gradient(to top, var(--bg-base), transparent);
}

/* ── Special case: #news::before ──
   .news-section::before already defines atmospheric radial gradients.
   The #news ID selector has higher specificity (1,0,1 vs 0,1,1) so it
   overrides. We combine both effects here: top seal gradient layered
   above the preserved atmospheric background gradients.              */
#news::before {
  height: 100%; /* expand to full section so atmospheric gradients cover it */
  background:
    linear-gradient(to bottom, var(--bg-base) 0%, transparent 100px),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(1,129,250,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(192,240,0,0.05)  0%, transparent 70%);
}

/* ── Fix D: Glow container stacking ──
   Ensure glow divs stay behind their sibling image/content without
   creating stacking contexts that isolate them from their section. */
.chart-showcase,
.ai-showcase,
.news-phone-wrap,
.feature-phone-pair,
.feature-phone-wrap {
  position: relative;
  isolation: auto;
}

.chart-showcase-glow,
.ai-showcase-glow,
.news-phone-glow {
  z-index: 0;
  pointer-events: none;
}

/* ── Feature nav pills bar ──
   Soften the border-bottom so it doesn't create a harsh horizontal line.
   The inline style uses var(--border-subtle) = rgba(255,255,255,0.06);
   we override with a near-invisible value via the class added in HTML. */
.features-nav-pills {
  padding-bottom: var(--sp-6);
  padding-top: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  background: transparent;
}

.features-page .features-nav-pills-inner {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.features-page .feature-inline-media-card {
  margin-top: var(--sp-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-card);
}

.features-page .feature-inline-media-card-course {
  max-width: 400px;
}

.features-page .feature-inline-media-card-ai {
  max-width: 380px;
}

.features-page .feature-inline-media-img {
  width: 100%;
  display: block;
}

.features-page .feature-cta-offset {
  margin-top: var(--sp-2);
}

.features-page .feature-cta-self-start {
  align-self: flex-start;
}

.features-page .news-copy-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.features-page .feature-phone-wrap-tall {
  min-height: 420px;
}

.features-page .feature-phone-img-quiz {
  max-width: 300px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 48px rgba(1,129,250,0.22)) drop-shadow(0 40px 80px rgba(0,0,0,0.65));
}

.features-page .feature-phone-img-community {
  max-width: 260px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 25px 50px rgba(1,129,250,0.18)) drop-shadow(0 45px 90px rgba(0,0,0,0.65));
}

.features-page .features-nav-pills .btn,
.features-page .feature-benefit-item,
.features-page .news-feature-card-meta,
.features-page .footer-trust-line {
  unicode-bidi: isolate;
}

[dir="rtl"] .features-page .features-nav-pills .btn,
[dir="rtl"] .features-page .feature-detail-content .btn,
[dir="rtl"] .features-page .cta-buttons .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

[dir="rtl"] .features-page .feature-cta-self-start {
  align-self: flex-start;
}

/* ══════════════════════════════════════
   FEATURES PAGE — SEAMLESS SECTION FIX
══════════════════════════════════════ */

/* ── Problem 1 — Hard horizontal line between sections ──
   Root cause: #education has inline background:var(--bg-surface) which
   creates a hard color boundary against adjacent bg-base sections.
   Solution: strip all per-section backgrounds so there is a single
   unified background source on <main>. Ultra-subtle rgba tints on
   #education and #news give visual rhythm without any hard line. */

.features-page .section,
.features-page .page-hero,
.features-page .news-section,
.features-page .section-sm {
  background: transparent !important;
}

.features-page main {
  background: var(--bg-base);
}

/* Specificity: .features-page #education = (1,1,0) > .features-page .section = (0,2,0)
   Both use !important so the ID-scoped rule wins — overrides the inline style too */
.features-page #education,
.features-page #news {
  background: rgba(255, 255, 255, 0.013) !important;
}

/* ── Problem 2 (homepage) — Same glow containment for index.html chart ── */

.gc-device {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.gc-device-glow {
  position: absolute !important;
  width: 85% !important;
  height: 85% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(ellipse at center, rgba(1, 129, 250, 0.2) 0%, transparent 65%) !important;
  filter: blur(45px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.gc-device-img {
  position: relative !important;
  z-index: 1 !important;
}

/* ══ CHART MOCKUP — MATCH ASK GENIE QUALITY ══ */

.chart-showcase {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--sp-4) !important;
  isolation: auto !important;
  overflow: visible !important;
  min-height: unset !important;
}

.chart-showcase-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 70% !important;
  height: 70% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    rgba(1,129,250,0.28) 0%,
    transparent 70%
  ) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
  animation: glowPulse 6s ease-in-out infinite !important;
}

.chart-showcase-img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 20px 45px rgba(1,129,250,0.18))
    drop-shadow(0 40px 80px rgba(0,0,0,0.7)) !important;
  transition: transform var(--t-slow), filter var(--t-slow) !important;
}

.chart-showcase-img:hover {
  transform: translateY(-6px) !important;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.35))
    drop-shadow(0 25px 55px rgba(1,129,250,0.25))
    drop-shadow(0 50px 100px rgba(0,0,0,0.75)) !important;
}

/* ========================
   STORY SECTION — TWO-COLUMN GRID
   LTR: content left, phone right.
   RTL: CSS grid direction:rtl (inherited from <html dir="rtl">)
        automatically reverses column order — content right, phone left.
        No [dir="rtl"] template-area override needed.
   ======================== */
.story-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "headline phone"
    "points   phone";
  column-gap: var(--sp-16);
  row-gap: var(--sp-8);
  align-items: start;
}

/* --- Grid area placements --- */
.story-body .story-headline-block {
  grid-area: headline;
  margin-bottom: 0;
  text-align: start;
}
.story-body .story-headline-block .section-badge {
  margin-inline: 0;
}

.story-body .story-phone-scene {
  grid-area: phone;
  align-self: center;
  /* Reduce vertical breathing room — grid gap handles spacing */
  padding-block: var(--sp-6);
}

/* Points become a vertical list inside the content column */
.story-body .story-points {
  grid-area: points;
  margin-inline: 0;
  max-width: 100%;
  flex-direction: column;
  gap: var(--sp-5);
}
.story-body .story-point {
  padding-inline: 0;
}
/* Horizontal divider between stacked points */
.story-body .story-point-divider {
  width: 100%;
  height: 1px;
  align-self: auto;
  margin-block: 0;
}

/* ≤900px — single column: heading → points → phone */
@media (max-width: 900px) {
  .story-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "points"
      "phone";
    row-gap: var(--sp-10);
  }
  /* Centre heading text on small screens for both LTR and RTL */
  .story-body .story-headline-block {
    text-align: center;
  }
  .story-body .story-headline-block .section-badge {
    margin-inline: auto;
  }
  .story-body .story-phone-scene {
    justify-content: center;
  }
}