/* Homepage-only elevation layer (loaded only by index.html, after style.css).
 * Adds depth, food photography, device framing and motion without touching the
 * shared component styles used by the content pages. */

/* ---- Hero: soft layered glow + float ---- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 80% at 82% 18%, rgba(16,165,106,.13), transparent 60%),
    radial-gradient(55% 70% at 12% 10%, rgba(255,90,60,.09), transparent 55%),
    radial-gradient(90% 90% at 50% 120%, rgba(240,180,41,.08), transparent 60%),
    var(--bg);
  padding-top:84px;
}
.hero .eyebrow{
  background:rgba(255,90,60,.1); padding:6px 12px; border-radius:999px; margin-bottom:18px;
}
/* highlight the key phrase in the H1 */
.hero h1 .hl{ color:var(--brand-ink); position:relative; white-space:nowrap; }
.hero h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.22em;
  background:rgba(16,165,106,.18); border-radius:4px; z-index:-1;
}
.phone-frame{
  box-shadow:0 40px 90px -30px rgba(21,34,76,.55), 0 10px 30px -12px rgba(16,165,106,.25);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
/* a soft halo behind the phone */
.hero .phone-frame::before{
  content:""; position:absolute; inset:-12% -8%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(16,165,106,.22), transparent 70%);
  filter:blur(8px);
}
.hero .phone-frame{ position:relative; }

/* floating "AI detected" food card over the phone */
.hero-visual{ position:relative; justify-self:center; }
.scan-card{ position:absolute; left:-24px; bottom:72px; z-index:3; display:flex; gap:10px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:10px 12px; max-width:236px;
  box-shadow:0 26px 54px -24px rgba(21,34,76,.55); animation:floaty2 6s ease-in-out infinite; }
.scan-card img{ width:48px; height:48px; border-radius:11px; object-fit:cover; flex:0 0 auto; }
.scan-tag{ font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--brand-ink); display:block; margin-bottom:1px; }
.scan-card strong{ font-size:13.5px; display:block; line-height:1.2; }
.scan-kcal{ font-size:12px; color:var(--mid); }
@keyframes floaty2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }
@media (max-width:560px){ .scan-card{ left:4px; bottom:16px; transform:scale(.9); } }

/* trust row under the store badges */
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:18px; color:var(--mid); font-size:13px; font-weight:600; }
.hero-trust .stars{ color:var(--amber); letter-spacing:2px; }
.hero-trust .dot{ color:var(--line2); }

/* ---- Food photography band ---- */
.food-band{ position:relative; overflow:hidden; background:#0c1222; color:#fff; padding:72px 0 76px; }
.food-band .fb-head{ max-width:640px; margin:0 auto 38px; padding:0 24px; text-align:center; }
.food-band .eyebrow{ color:#ffb3a3; }
.food-band h2{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.6vw,40px); line-height:1.14; margin:12px 0 14px; letter-spacing:-.4px; }
.food-band p{ color:#aeb7cc; font-size:17px; margin:0; }
.marquee{ display:flex; flex-direction:column; gap:18px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-row{ display:flex; gap:18px; width:max-content; animation:mq 64s linear infinite; }
.mq-row.rev{ animation-direction:reverse; animation-duration:76s; }
.food-band:hover .mq-row{ animation-play-state:paused; }
.mq-row img{ width:216px; height:150px; object-fit:cover; border-radius:18px; flex:0 0 auto;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6); background:#1a2234; border:1px solid rgba(255,255,255,.06); }
@keyframes mq{ to{ transform:translateX(-50%); } }
.fb-note{ text-align:center; color:#8a93ac; font-size:13px; margin:30px 0 0; padding:0 24px; }

/* ---- Feature cards: lift + accent ---- */
#features{ background:linear-gradient(180deg, var(--panel), var(--bg)); }
.feature-card{ transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(21,34,76,.4); border-color:var(--line2); }
.feature-icon{ box-shadow:inset 0 0 0 1px rgba(21,34,76,.04); }

/* ---- Steps: connect with a subtle line ---- */
.steps{ position:relative; }

/* ---- Screens: gradient backdrop + depth ---- */
#screens{ position:relative; background:
  radial-gradient(60% 60% at 50% 0%, rgba(16,165,106,.08), transparent 60%), var(--bg); }
.shots-row img{ transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 30px 60px -28px rgba(21,34,76,.4); border:6px solid #10182f; border-radius:30px; }
.shots-row img:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(21,34,76,.5); }

/* ---- Pricing + CTA polish ---- */
.plan-card{ transition:transform .18s ease, box-shadow .2s ease; }
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(21,34,76,.35); }
.cta-band{ position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(40% 60% at 80% 10%, rgba(255,255,255,.14), transparent 60%); pointer-events:none; }

/* ---- Scroll reveal (JS adds .reveal / .in) ---- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .phone-frame{ animation:none; }
  .scan-card{ animation:none; }
  .mq-row{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}
@media (max-width:640px){
  .mq-row img{ width:160px; height:112px; }
}