/* ============================================================
   OptimFood.ai — HOMEPAGE stylesheet (Design System v2)
   Loaded AFTER assets/v2.css (shared tokens, base, bands, nav,
   footer). This file holds only homepage-specific styling:
   the cinematic hero, the phone conversation, and the sections.
   ============================================================ */

/* ============ HERO — the cinema ============ */
.hero{position:relative;background:var(--ink);color:var(--paper)}
.cinema{position:relative;min-height:100svh;overflow:clip}
.cinema-media{position:absolute;inset:0}
.cinema-media picture,.cinema-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cineCanvas{position:absolute;inset:0;width:100%;height:100%}
.cinema-scrim{
  position:absolute;inset:0;
  background:linear-gradient(72deg,rgba(15,26,23,.88) 0%,rgba(15,26,23,.55) 42%,rgba(15,26,23,.08) 70%),
             linear-gradient(to top,rgba(15,26,23,.55),transparent 34%),
             linear-gradient(to bottom,rgba(15,26,23,.6),transparent 130px);
}
.hero-copy{
  position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:120px;padding-bottom:clamp(56px,9vh,110px);
  max-width:var(--maxw-site);margin:0 auto;padding-inline:clamp(20px,4.5vw,40px);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:22px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.hero h1{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-hero);
  line-height:.98;letter-spacing:-.03em;max-width:12ch;text-wrap:balance;margin-bottom:26px;
}
.hero h1 .accent{color:var(--teal)}
.hero .sub{font-size:var(--fs-lead);line-height:1.6;color:var(--paper-70);max-width:52ch;margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.trust{display:flex;align-items:center;gap:10px;color:var(--paper-70);font-size:14px}
.trust b{color:var(--paper);font-family:var(--font-mono);font-weight:500}
.scroll-cue{
  display:none;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;color:var(--paper-70);
}
.js.tier-a .scroll-cue{display:block;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ---- the phone (ONE dom node, repositioned per tier) ---- */
.hero-chat{position:relative;z-index:4;display:flex;justify-content:center;padding:0 20px clamp(64px,9vw,96px)}
.js.tier-a .cinema{height:100svh}
.js.tier-a .hero-chat{position:absolute;inset:0;padding:0;display:block;pointer-events:none}
.js.tier-a .phone-wrap{position:absolute;pointer-events:auto;opacity:0}
/* in tier-a the VIDEO provides the device — the DOM renders only the screen,
   laid out at real size on the video phone's glass rect (set by home.js) */
.js.tier-a .phone{width:100%;height:100%;background:transparent;padding:0;box-shadow:none;border-radius:0}
.js.tier-a .phone-screen{height:100%}
/* balance the column: first messages sit lower so the screen never has a
   large empty band at the bottom */
.js.tier-a .wa-body{padding:44px 16px 18px}
/* owl clearly perched on the video phone's top bezel, fully visible */
.js.tier-a .hero-owl{top:-64px;right:28px}
.js.tier-a #cineCanvas{opacity:0}
/* pre-hidden states so nothing flashes before the animation takes over (JS-gated only) */
.js.tier-b .bubble,.js.tier-b .save-chip{opacity:0}
.js.tier-c .wa-body{overflow-y:auto;scrollbar-width:thin}
.phone-wrap{position:relative}
.phone{
  width:min(340px,88vw);background:#0B130F;border-radius:44px;padding:12px;
  box-shadow:inset 0 0 0 1.5px var(--line-on-dark);
}
.phone-screen{
  background:var(--panel-on-light);border-radius:34px;overflow:hidden;
  display:flex;flex-direction:column;height:min(600px,72svh);
}
.wa-head{display:flex;align-items:center;gap:12px;background:var(--ink);padding:14px 16px}
.wa-ava{width:46px;height:46px;border-radius:50%;background:var(--paper);object-fit:contain;image-rendering:pixelated;padding:3px}
.wa-name{color:var(--paper);font-weight:600;font-size:18px}
.wa-status{color:var(--paper-70);font-size:14px;font-family:var(--font-mono);position:relative;height:18px}
.wa-status .typing,.wa-status #stOnline{position:absolute;left:0;top:0;white-space:nowrap}
.wa-body{flex:1;overflow:hidden;position:relative;padding:16px 14px}
.chat-track{position:relative;display:flex;flex-direction:column;gap:20px;will-change:transform}
.bubble{
  max-width:86%;padding:13px 15px 23px;border-radius:16px;font-size:16px;line-height:1.5;
  position:relative;color:var(--ink);
}
.bubble.in{background:var(--paper);border:1px solid var(--line-on-light);border-top-left-radius:4px;align-self:flex-start}
.bubble.out{background:#D9F0EC;border-top-right-radius:4px;align-self:flex-end}
.bubble .time{
  position:absolute;right:12px;bottom:6px;font-family:var(--font-mono);
  font-size:11px;color:var(--ink-40);
}
.bubble .fig{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.bubble .save{display:block;margin:10px 0 8px}
.bubble .save .big{font-size:26px;color:var(--green-ink);font-weight:500}
.msg-slot{position:relative;display:flex;flex-direction:column}
.msg-slot .bubble{width:fit-content}
.typing-ind{
  position:absolute;top:-2px;left:0;display:flex;gap:3px;background:var(--paper);
  border:1px solid var(--line-on-light);border-radius:12px;padding:8px 10px;opacity:0;
}
.typing-ind span{width:5px;height:5px;border-radius:50%;background:var(--ink-40)}
/* the persistent end-of-chat "owl is typing…" bubble: in-flow, styled like an
   incoming bubble, stays visible once shown (visible by default for no-JS/static) */
.typing-ind.typing-end{
  position:static;width:fit-content;opacity:1;
  border-top-left-radius:4px;border-radius:16px 16px 16px 4px;padding:13px 16px;gap:4px;
}
.typing-ind.typing-end span{width:6px;height:6px}
.js.tier-a .typing-end,.js.tier-b .typing-end{opacity:0}
.js.tier-a .typing-ind span,.js.tier-b .typing-ind span{animation:tyb 1s ease-in-out infinite}
.typing-ind span:nth-child(2){animation-delay:.15s}
.typing-ind span:nth-child(3){animation-delay:.3s}
@keyframes tyb{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ping{
  position:absolute;top:8px;right:-4px;width:10px;height:10px;border-radius:50%;
  background:var(--amber);opacity:0;
}
.wa-input{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--paper);border-top:1px solid var(--line-on-light)}
.wa-input .fld{
  flex:1;border:1px solid var(--line-on-light);border-radius:var(--radius-pill);
  padding:10px 15px;font-size:14px;color:var(--ink-40);
}
.wa-input .snd{
  width:36px;height:36px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.hero-owl{
  position:absolute;top:-56px;right:16px;width:76px;image-rendering:pixelated;z-index:5;
}

/* ============ PROBLEM (paper) ============ */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prob{
  border:1px solid var(--line-on-light);border-radius:var(--radius-lg);
  padding:30px;display:flex;flex-direction:column;gap:12px;background:var(--paper);
}
.prob .big{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-stat);font-variant-numeric:tabular-nums;color:var(--amber-ink)}
.prob:last-child .big{color:var(--ink)}
.prob h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.prob p{color:var(--ink-70);font-size:15px;line-height:1.6}

/* ============ HOW / LOOP (ink) ============ */
.loop-index{display:flex;flex-direction:column}
.ix-row{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,4vw,44px);align-items:start;
  padding:26px 0;border-top:1px solid var(--line-on-dark);
}
.ix-row:last-child{border-bottom:1px solid var(--line-on-dark)}
.ix-num{
  font-family:var(--font-mono);font-weight:500;font-size:clamp(34px,4.4vw,54px);
  color:rgba(255,255,255,.14);line-height:1;padding-top:2px;font-variant-numeric:tabular-nums;
}
.ix-body .num{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:8px;
}
.ix-body h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.015em;margin-bottom:6px}
.ix-body p{color:var(--paper-70);max-width:56ch;font-size:15.5px;line-height:1.6}

/* ============ MOAT (paper) ============ */
.moat{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.moat .hl{color:var(--teal-ink);font-weight:600}
.moat p{color:var(--ink-70);font-size:var(--fs-lead);line-height:1.6;max-width:54ch}
.moat p+p{margin-top:16px}
.bench{
  border:1px solid var(--line-on-light);border-radius:var(--radius-lg);overflow:hidden;
  font-size:15px;background:var(--paper);
}
.bench .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 22px;border-top:1px solid var(--line-on-light);
}
.bench .row:first-child{border-top:0;background:var(--panel-on-light)}
.bench .who{color:var(--ink-70)}
.bench .row:first-child .who{color:var(--ink);font-weight:600}
.bench .pr{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.bench .pr.high{color:var(--amber-ink)}
.bench .pr.low{color:var(--green-ink)}
.bench .row.verdict .who,.bench .row.verdict .pr{color:var(--green-ink);font-weight:600}

/* ============ PRICING (ink) ============ */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px}
.pcard{
  border:1px solid var(--line-on-dark);border-radius:var(--radius-lg);padding:34px 30px;
  display:flex;flex-direction:column;gap:14px;position:relative;
}
.pcard.feat{background:var(--panel-on-dark);border-color:rgba(13,148,136,.55)}
.pcard .tag{
  position:absolute;top:-14px;left:28px;background:var(--teal);color:var(--ink);
  font-size:12px;font-weight:600;border-radius:var(--radius-pill);padding:5px 14px;
}
.pcard h3{
  font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-70);
}
.pcard .amt{
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-stat);
  font-variant-numeric:tabular-nums;line-height:1;
}
.pcard .amt small{font-size:.38em;color:var(--paper-70);font-weight:400}
.pcard .note{color:var(--paper-70);font-size:14px}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:10px 0 22px}
.pcard li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--paper);line-height:1.5}
.pcard li svg{flex:0 0 auto;margin-top:2px}
.pcard .money{color:var(--green);font-family:var(--font-mono);font-weight:500}
.pcard .btn{justify-content:center;margin-top:auto}

/* ============ FINAL CTA (paper) ============ */
.cta-final{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:640px}
.cta-owl{width:72px;image-rendering:pixelated}
.cta-final h2{margin-bottom:0}
.cta-final p{color:var(--ink-70);font-size:var(--fs-lead);line-height:1.6}

/* ============ responsive (homepage sections) ============ */
@media (max-width:960px){
  .moat{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  .prob-grid{grid-template-columns:1fr}
  .ix-row{grid-template-columns:56px 1fr}
  .ix-num{font-size:26px}
  .hero-owl{right:6px}
}
@media (max-width:560px){
  .hero-actions .btn{width:100%;justify-content:center}
}