/* =========================================================
   EmarEats – Intro / Preview Layout
   FIXES:
   - No broken CSS (remove "..." tokens)
   - Stable blue background gradient via body::before
   - Full-bleed back layer (hero + video + ticker + ribbon)
   - Proper hero grid + right image card
   - Video visible + responsive
   - Front layer slides appear after spacer cleanly
========================================================= */

:root{
  --ee-bg-900:#0b0f16;
  --ee-bg-800:#0f172a;
  --ee-bg-700:#0b2a3b;

  --ee-text:#e7eef7;
  --ee-muted:rgba(231,238,247,.72);

  --ee-accent:#f59e0b;
  --ee-accent-2:#ffb74a;

  --glass-bg: rgba(9, 16, 28, 0.72);
  --glass-bg-strong: rgba(9, 16, 28, 0.66);
  --glass-border: rgba(255,255,255,0.10);

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;

  --shadow-1: 0 18px 60px rgba(0,0,0,.45);
  --shadow-2: 0 10px 35px rgba(0,0,0,.35);

  --container: 1320px;
  --pad-x: clamp(14px, 2.2vw, 26px);
  --gap: clamp(14px, 1.8vw, 24px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ee-text);
  background: var(--ee-bg-900);
  overflow-x:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* === FIXED BLUE BACKGROUND (global) === */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 600px at 70% 35%, rgba(56,105,140,.55), rgba(15,49,84,0) 60%),
    linear-gradient(135deg, var(--ee-bg-900), var(--ee-bg-800) 55%, var(--ee-bg-700));
  transform: translateZ(0);
}

/* prevent any accidental extra overlays */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* keep empty (no gradient) */
}

/* Utility */
.mb-3{ margin-bottom: 18px; }

/* Glass utility (small cards only) */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* =========================================================
   STACK LAYERS
========================================================= */
.ee-stack{
  position:relative;
  width:100%;
}

/* Back layer is fixed (acts like the base page) */
.ee-layer-back{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* This is the moving content inside back layer */
.ee-back-inner{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  will-change: transform;
  transform: translateY(0);
}

/* spacing container */
.ee-back-inner > *{
  width: min(var(--container), 100% - (var(--pad-x) * 2));
  margin-left:auto;
  margin-right:auto;
}

/* Spacer provides scroll distance before front layer starts */
.ee-back-spacer{
  height: 110vh; /* JS will overwrite accurately */
}

/* Front layer is normal flow (slides overlay phase) */
.ee-layer-front{
  position:relative;
  z-index:2;
  padding-bottom: 48px;
}

/* Front layer subtle highlight (ok) */
.ee-layer-front::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,0.06), transparent 60%);
}

/* =========================================================
   HERO (full viewport feel)
========================================================= */
.hero{
  margin-top: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: var(--radius-xl);
  background: rgba(8,14,24,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: min(92vh, 860px);
  display:flex;
  align-items:center;
}

.hero-grid{
  width:100%;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gap);
  align-items: stretch;
}

/* LEFT */
.hero-left{ padding: 6px 4px; }

.hero-header{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 10px;
}
.hero-header-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.hero-header-meta{ display:flex; flex-direction:column; gap: 8px; }

.hero-tagline{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(8,14,24,.28);
  width: fit-content;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-badge-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.hero-stats-bar{
  font-size: 12px;
  color: rgba(231,238,247,.68);
}

.hero-title{
  margin: 12px 0 17px;
  font-size: clamp(40px, 4.0vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 95%;
}

.hero-highlight{
  color: var(--ee-accent);
  text-shadow: 0 10px 40px rgba(245,158,11,.22);
}

.hero-subtitle{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ee-muted);
  max-width: 62ch;
  padding: 12px 16px; 
}

.hero-points{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}
.hero-point{
  display:inline-flex;
  align-items:center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,14,24,.26);
  font-size: 13px;
  color: rgba(231,238,247,.88);
}
.hero-point-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(96,165,250,.95);
}

.hero-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 6px;
}

.btn-primary-hero{
  appearance:none;
  border:0;
  cursor:pointer;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ee-accent), #f97316);
  color:#111827;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(245,158,11,.18);
}
.btn-primary-hero:hover{ filter: brightness(1.03); }

.btn-ghost-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  color: rgba(231,238,247,.92);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(8,14,24,.22);
}
.btn-ghost-hero:hover{ background: rgba(8,14,24,.32); }

/* RIGHT */
.hero-right{
  position:relative;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,12,20,.55);
  box-shadow: var(--shadow-2);
  min-height: 420px;
}
.hero-food-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.hero-right-overlay{
  position:absolute;
  inset: 14px 14px auto 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  pointer-events:none;
}
.hero-tag-top{
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10,18,32,.55);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(231,238,247,.9);
}
.hero-card-bottom{
  max-width: 520px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10,18,32,.52);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-card-bottom > span:first-child{
  display:block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(231,238,247,.78);
  margin-bottom: 6px;
}
.hero-card-bottom > span:last-child{
  display:block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(231,238,247,.86);
}

/* =========================================================
   VIDEO SECTION
========================================================= */
.deck-panel{
  width: 100%;
  margin-top: 14px;
  padding-left: var(--hero-text-start);
  padding-right: var(--hero-pad);
}

.video-section{
  padding: 16px;
  width: 100%;               
  border-radius: var(--radius-xl);
  background: rgba(8,14,24,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding-left: var(--hero-text-start);
  padding-right: var(--hero-pad);
}
.video-frame{
  max-width: none !important;
  width: min(760px, 100%) !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.app-video{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 4px 0;
}
.video-header-under{
  margin-top: 10px;
}
.video-title{
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(231,238,247,.84);
}
.video-subtitle{
  font-size: 12px;
  color: rgba(231,238,247,.58);
}

/* =========================================================
   TICKER
========================================================= */
.ticker-section{
  margin-top: 14px;
  padding: 14px 0;
}
.ticker-inner{
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  background: rgba(8,14,24,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.ticker-label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(231,238,247,.75);
  margin-bottom: 10px;
}

.ticker-row{
  display:flex;
  gap: 16px;
  white-space: nowrap;
  animation: tickerMove 34s linear infinite;
}
.ticker-item{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,14,24,.20);
  color: rgba(231,238,247,.88);
  font-size: 13px;
}
.ticker-square{
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(96,165,250,.9);
}
@keyframes tickerMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =========================================================
   BRAND RIBBON
========================================================= */
.brand-ribbon{
  margin-top: 14px;
  padding: 0;
}
.brand-ribbon-icons{
  border-radius: var(--radius-xl);
  background: rgba(8,14,24,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
  padding: 14px 0;
}
.brand-ribbon-track{
  display:flex;
  gap: 18px;
  padding: 0 16px;
  width:max-content;
  animation: ribbonMove 34s linear infinite;
}
.brand-ribbon.user-control .brand-ribbon-track{
  animation-play-state: paused;
}
.brand-icon{
  width: 120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  text-align:center;
  color: rgba(231,238,247,.75);
  font-size: 11px;
}
.brand-icon img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
@keyframes ribbonMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =========================================================
   SLIDES
========================================================= */
.slides-section{
  padding-top: 26px;
}
.slides-header{
  width: min(var(--container), 100% - (var(--pad-x) * 2));
  margin: 0 auto 14px;
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  background: rgba(8,14,24,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.slides-header h2{
  margin:0 0 6px;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.slides-header small{
  color: rgba(231,238,247,.65);
}

.slide-wrap{
  width: min(var(--container), 100% - (var(--pad-x) * 2));
  margin: 0 auto;
}
.slide-frame{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,12,20,.55);
  box-shadow: var(--shadow-1);
}
.slide-img{
  width:100%;
  height:auto;
  display:block;
}
.overlay-text{
  position:absolute;
  transform: translateZ(0) scale(var(--scale,1));
  transform-origin: top left;
  color: rgba(231,238,247,.95);
}
.overlay-text .box{
  background: rgba(8,14,24,.40);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
}
.overlay-text .title{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 22px;
}
.overlay-text .subtitle{
  font-weight: 700;
  font-size: 14px;
  color: rgba(231,238,247,.82);
}

/* Word animation */
.overlay-text .word{
  display:inline-block;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * 22ms);
}
.overlay-text.in .word{
  opacity:1;
  transform: translateY(0);
}

/* Go top */
.goto-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
}
.goto-top .btn{
  border-radius: 999px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet + Mobile */
@media (max-width: 992px){
  .hero{ min-height: auto; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-right{ min-height: 340px; }
  .video-frame{ max-width: 100%; }
  .brand-icon{ width: 108px; }

  /* Disable back-layer + spacer behavior on mobile/tablet (fix huge gaps) */
  .ee-layer-back{
    position: relative !important;
    inset: auto !important;
  }
  .ee-back-inner{
    position: static !important;
    transform: none !important;
  }
  .ee-back-spacer{
    display: none !important;
    height: 0 !important;
  }
}

/* Small Mobile */
@media (max-width: 520px){
  .hero-title{
    font-size: 28px;
    max-width: 60%;
    /* IMPORTANT: no padding on title */
  }

  .hero-subtitle{
    font-size: 13px;
    padding: 12px 14px;  /* safe left/right breathing inside the glass box */
  }

  .hero-point{ font-size: 12px; }
  .hero-points{ gap: 8px; }
  .goto-top{ right: 12px; bottom: 12px; }
}

/* Soft glass for subtle pills/cards */
.glass-soft{
  background: rgba(8,14,24,.20);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Deck panel under video */
.deck-panel-title{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(231,238,247,.84);
  margin-bottom: 6px;
}
.deck-panel-subtitle{
  font-size: 13px;
  color: rgba(231,238,247,.62);
}



/* =========================================================
   PATCH: intro.html inline <style> removal support
   Append this block at the END of app.css
   ========================================================= */

/* 1) Global anchors hover behavior (missing in app.css) */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; color:var(--accent); }

/* 2) Make sure main doesn't introduce unexpected paddings/margins
      (safe defaults; does not break layer system) */
main{
  margin:0;
  width:100%;
  padding:0;
}

/* 3) Hero header variable used by your markup (was only in inline style) */
:root{
  /* (Tagline + Stats) */
  --heroHeaderMetaH: clamp(40px, 4.2vw, 52px);
}

/* Ensure hero header layout works exactly like your inline version */
.hero-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.hero-header-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height: var(--heroHeaderMetaH);
}
.hero-header-logo{
  height: var(--heroHeaderMetaH);
  width:auto;
  flex:0 0 auto;
}
.hero-header .hero-tagline{ margin-bottom:2px; }
.hero-header .hero-stats-bar{ margin-bottom:0; }

@media (max-width: 768px){
  .hero-header{ margin-bottom:10px; gap:10px; }
  .hero-header-logo{ max-width:70px; }
}

/* 4) Optional “soft glass” used in your HTML (glass-soft didn't exist) */
.glass-soft{
  background: rgba(8,14,24,.20);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 5) Deck panel under video (deck-panel classes didn't exist) */

.deck-panel-title{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(231,238,247,.84);
  margin-bottom: 6px;
}
.deck-panel-subtitle{
  font-size: 13px;
  color: rgba(231,238,247,.62);
}

/* 6) Bring back hover-pause behavior for ribbon (if you want same UX) */
.brand-ribbon:hover .brand-ribbon-track{
  animation-play-state: paused;
}

/* 7) If your HTML uses "ticker" + "ribbon-move" keyframe names,
      but app.css uses different names (tickerMove / ribbonMove),
      these aliases keep both working safely. */
@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes ribbon-move{
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* 8) Reserved "slide-visual" system (only if you later use it) */
.slide-visual{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #020617;
  container-type: inline-size;
}
.slide-visual > img,
.slide-visual > video{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.slide-overlay-block{
  position:absolute;
  z-index:4;
  color:#f9fafb;
  line-height:1.5;
  font-weight:400;
  font-size: clamp(10px, calc(var(--scale, 1) * 1.6cqw), 24px);
}
.slide-overlay-inner{ white-space: pre-line; }
.slide-role-title .slide-overlay-inner{ font-weight:700; letter-spacing:.03em; }
.slide-role-subtitle .slide-overlay-inner{ font-weight:600; }
.slide-role-bullets .slide-overlay-inner,
.slide-role-body .slide-overlay-inner{ font-weight:400; }
.slide-overlay-box{
  background: rgba(15, 23, 42, 0.88);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* ===== PATCH (place at END of app.css) ===== */

/* 1) Back layer background image (olive photo) */
.ee-layer-back{
  background-image: var(--ee-back-bg);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

/* 2) Remove the “frame” effect from hero-right (keep only overlay texts) */
.hero-right{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) If hero image tag still exists, hide it to avoid double image/cropping */
.hero-food-img{
  display: none !important;
}

/* 4) Deck panel under the video (you already have the HTML but no CSS rule) */

.deck-panel-title{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin-bottom: 6px;
}
.deck-panel-subtitle{
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
/* ===== HERO IMAGE ON BACKGROUND ===== */

.ee-layer-back::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* hero image from inline style var */
  background-image: var(--ee-hero-img, none);
  background-repeat: no-repeat;

  /* DESKTOP placement */
  /* horizontal (right offset) + vertical (top offset) */
  background-position: 95% 55%;

  /* responsive size with max limit */
  background-size: min(80%, 840px) auto;

  /* depth */
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}

/* ===== MOBILE / TABLET ===== */
@media (max-width: 992px){
  .ee-layer-back::before{
    /* MOBILE placement */
    /* horizontal + vertical */
    background-position: 93% 4%;

    /* smaller & controlled */
    background-size: min(55%, 420px) auto;

    opacity: .8;
  }
}
/* ===== HERO FULL TRANSPARENT BACK (override) ===== */
.hero{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== OPTIONAL: Intro slides panel – FULL TRANSPARENT ===== */
.deck-panel.glass{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== FINAL: Align video + its glass panels with HERO left text ===== */
:root{
  --hero-pad: clamp(18px, 2.2vw, 28px); /* same as .hero padding */
  --hero-left-extra: 4px;              /* .hero-left padding: 6px 4px */
  --hero-text-start: calc(var(--pad-x) + var(--hero-pad) + var(--hero-left-extra));
}

/* keep the whole section centered by container rule, only inset its content */
.video-section{
  padding-left: var(--hero-text-start) !important;
  padding-right: var(--hero-pad) !important;
}

/* the KEY FIX: stop centering the video frame */
.video-frame{
  max-width: none !important;      /* cancel max-width centering behavior */
  width: min(760px, 100%);         /* your desired video size */
  margin: 0;                       /* remove margin:0 auto */
  margin-right: auto;              /* ensure it stays left */
}

/* align headers and the small glass panel under video to the same left edge */
.video-header,
.deck-panel{
  width: min(760px, 100%) !important;
  margin-left: 0 !important;
  margin-right: auto !important;              /* left aligned, not centered */
}

/* Mobile: keep it natural/centered for small screens */
@media (max-width: 980px){
  .video-section{
    padding-left: var(--hero-text-start) !important;
    padding-right: 12px !important;
  }

  .video-frame,
  .video-header,
  .deck-panel{
    width: 100% !important;
    margin: 0 !important;
  }
}
.video-header{
  justify-content: flex-start !important;
  gap: 10px !important;
}
.deck-panel{
  padding-left: 0 !important;   /* چون خود پنل الان هم‌عرض ویدیو است */
  padding-right: 0 !important;
}
/* FINAL LOCK: ensure deck-panel + video-frame match exactly */
.video-frame{
  width: min(760px, 100%) !important;
  margin: 0 !important;
  margin-right: auto !important;
}
.deck-panel{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ======================================================================
   FINAL PATCH — EmarEats Intro (Deck / Presentation Typography Lock)
   Purpose:
   1) Prevent double-scaling on slide overlays (scale was applied twice:
      via transform: scale(var(--scale)) + font-size/clamp logic).
   2) Lock HERO typography to presentation-friendly sizes.
   3) Make slides behave like a pitch deck (size driven by JSON --scale only).
   Notes:
   - Appended at END of app.css
   - Does NOT remove any existing rules; only overrides safely.
====================================================================== */

/* ------------------------------
   0) Safety: define missing tokens if any
-------------------------------- */
:root{
  --text-muted: rgba(231,238,247,.62); /* fallback used in some patches */
}

/* ------------------------------
   2) Slides: remove DOUBLE SCALE (critical fix)
   - Previously: transform: translateZ(0) scale(var(--scale))
   - Keep transform minimal; use --scale ONLY in font-size calculations.
-------------------------------- */
.overlay-text{
  transform: translateZ(0) !important;   /* cancel scale() */
  transform-origin: top left !important;
}

/* ------------------------------
   3) Slides: Deck Typography System (driven by JSON --scale only)
   - Titles/subtitles/body scale consistently regardless of viewport.
-------------------------------- */

/* Default readable base for any overlay content */
.overlay-text{
  /* Avoid any inherited tiny sizes */
  font-size: 15px !important;
  line-height: 1.60 !important;
}

/* If box is used, keep it consistent */
.overlay-text .box{
  font-size: calc(15px * var(--scale, 1)) !important;
  line-height: 1.60 !important;
}

/* Title / Subtitle sizing (deck-like) */
.overlay-text .title{
  font-size: calc(26px * var(--scale, 1)) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.overlay-text .subtitle{
  font-size: calc(17px * var(--scale, 1)) !important;
  line-height: 1.50 !important;
}

/* Generic body/bullets blocks (when not wrapped in .title/.subtitle) */
.overlay-text .box > div:not(.title):not(.subtitle),
.overlay-text > div:not(.box):not(.title):not(.subtitle){
  font-size: calc(15px * var(--scale, 1)) !important;
  line-height: 1.60 !important;
}

/* ------------------------------
   4) Mobile: keep overlays readable without rewriting layout
-------------------------------- */
@media (max-width: 768px){
  .overlay-text{
    font-size: 14px !important;
    line-height: 1.60 !important;
  }
  .overlay-text .title{
    font-size: 18px !important; /* mobile cap */
  }
  .overlay-text .subtitle{
    font-size: 15px !important;
  }
  .overlay-text .box{
    font-size: 14px !important;
  }
}

/* ------------------------------
   5) Ribbon + ticker animation alias safety (if mixed keyframe names exist)
   (No visual change, just compatibility.)
-------------------------------- */
.brand-ribbon:hover .brand-ribbon-track{
  animation-play-state: paused;
}

@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes ribbon-move{
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ====================================================================== */


/* ======================================================================
   MOBILE ADAPT PATCH — EmarEats Intro (Fix mobile layout + readability)
   - Makes slide text stack under images on small screens (like a deck reader)
   - Removes large left insets on mobile (hero/video/deck alignment variables)
   - Improves touch layout for hero actions
   Append at END of app.css
====================================================================== */

@media (max-width: 980px){
  /* stop desktop alignment offsets on mobile */
  :root{
    --hero-text-start: 12px; /* override calc(...) used on desktop */
    --hero-pad: 12px;
  }

  .hero{
    padding: 14px !important;
    min-height: auto !important;
    margin-top: 12px !important;
  }

  .hero-left{ padding: 0 !important; }

  .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn-primary-hero,
  .btn-ghost-hero{
    width: 100%;
    justify-content: center;
  }

  .video-section{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .video-frame,
  .video-header,
  .deck-panel{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 768px){
  /* Slides become “image + text” blocks for readability */
  .slide-frame{
    display: block;
  }

  .overlay-text{
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;

    margin: 10px 14px 12px !important;
    transform: none !important; /* ensure no transform impacts layout */
  }

  .overlay-text .box{
    background: rgba(0,0,0,.58) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ====================================================================== */