:root { --bg:#FFF8F1; --ink:#1A1A1A; --muted:#6B6B6B; --coral:#FF6B5B; --line:#F0E6DC; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system, system-ui, "Segoe UI", sans-serif; }
a { color:var(--coral); }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.narrow { max-width:640px; padding-top:24px; padding-bottom:48px; }
.nav { display:flex; justify-content:space-between; align-items:center; padding-top:20px; padding-bottom:20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; color:var(--coral); text-decoration:none; }
.brand img { border-radius:9px; }
h1 { font-size:clamp(36px, 6vw, 60px); line-height:1.1; margin:0 0 16px; letter-spacing:-0.02em; }
h2 { font-size:22px; margin:28px 0 6px; }
.accent { color:var(--coral); }
.lead { font-size:19px; color:var(--muted); max-width:520px; }
.small { font-size:14px; color:var(--muted); }
.cta { display:inline-block; margin-top:12px; background:var(--ink); color:#fff; padding:14px 26px; border-radius:14px; font-weight:700; text-decoration:none; }
.cta:hover { background:var(--coral); }
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; padding-top:32px; padding-bottom:64px; }
.phone { width:100%; max-width:300px; height:auto; border-radius:36px; border:8px solid var(--ink); box-shadow:0 24px 60px rgba(200,120,100,.25); justify-self:center; }
.steps { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-bottom:64px; text-align:center; }
.steps p { color:var(--muted); margin:0; }
.contact { padding-left:20px; }
.contact li { margin-bottom:8px; }
.foot { border-top:1px solid var(--line); padding-top:24px; padding-bottom:40px; font-size:14px; color:var(--muted); }
.foot p { margin:4px 0; }
@media (max-width:720px) {
  .hero, .steps { grid-template-columns:1fr; text-align:center; }
  .lead { margin-left:auto; margin-right:auto; }
}

/* ---------- V3: mobile-first phone-reel hero ---------- */
.hero2 { text-align:center; padding-top:36px; padding-bottom:56px; display:flex; flex-direction:column; align-items:center; }
.eyebrow { display:inline-block; margin:0 0 10px; padding:6px 14px; border-radius:999px; background:#FFECE6; color:var(--coral); font-weight:700; font-size:13px; letter-spacing:.02em; }
.hero2 h1 { max-width:520px; }
.lead.center { margin-left:auto; margin-right:auto; text-align:center; }
.cta-soon { cursor:default; }
.cta-soon:hover { background:var(--ink); }

.phone-reel { margin-top:40px; display:flex; justify-content:center; }
.phone-frame {
  position:relative; width:min(78vw, 290px); aspect-ratio:9/19.4;
  background:#0b0b0c; border-radius:44px; padding:12px;
  box-shadow:0 30px 70px rgba(200,120,100,.30), 0 2px 0 rgba(255,255,255,.04) inset;
  animation:sway 6s ease-in-out infinite alternate;
}
@keyframes sway { from { transform:rotate(-1.1deg); } to { transform:rotate(1.1deg); } }
.island { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:34%; height:22px; background:#0b0b0c; border-radius:14px; z-index:5; }
.screen { position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--bg); }

.scene { position:absolute; inset:0; opacity:0; background:var(--bg); }
.scene img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

/* 5 scenes across one 16s loop, ~20% each with a quick fade-in cut */
.scene-1 { animation:scene1 16s infinite; }
.scene-2 { animation:scene2 16s infinite; }
.scene-3 { animation:scene3 16s infinite; }
.scene-4 { animation:scene4 16s infinite; }
.scene-5 { animation:scene5 16s infinite; }
@keyframes scene1 { 0%{opacity:1} 18%{opacity:1} 20%{opacity:0} 100%{opacity:0} }
@keyframes scene2 { 0%,20%{opacity:0} 21%{opacity:1} 38%{opacity:1} 40%{opacity:0} 100%{opacity:0} }
@keyframes scene3 { 0%,40%{opacity:0} 41%{opacity:1} 58%{opacity:1} 60%{opacity:0} 100%{opacity:0} }
@keyframes scene4 { 0%,60%{opacity:0} 61%{opacity:1} 78%{opacity:1} 80%{opacity:0} 100%{opacity:0} }
@keyframes scene5 { 0%,80%{opacity:0} 81%{opacity:1} 98%{opacity:1} 100%{opacity:0} }

.statusbar { display:flex; justify-content:space-between; padding:10px 20px 0; font-size:13px; font-weight:700; }
.statusbar .glyphs { font-size:11px; opacity:.7; }
.scr-nav { display:flex; align-items:center; justify-content:center; position:relative; padding:14px 20px 0; font-weight:800; color:var(--coral); }
.scr-nav .back { position:absolute; left:20px; font-size:20px; color:var(--ink); }
.scr-nav .gear { position:absolute; right:20px; }
.scr-h1 { margin:18px 20px 14px; font-size:22px; }

.paste-field { margin:0 20px 14px; height:44px; border:2px solid #F4D97A; border-radius:14px; background:#fff; display:flex; align-items:center; padding:0 14px; gap:8px; font-size:13px; }
.typed-wrap { overflow:hidden; white-space:nowrap; display:inline-block; }
.typed { display:inline-block; width:0; overflow:hidden; white-space:nowrap; border-right:2px solid var(--coral); animation:typeUrl 16s infinite steps(28,end); }
@keyframes typeUrl { 0%,20%{width:0} 21%{width:0} 34%{width:15ch} 38%{width:15ch} 39%{width:0} 100%{width:0} }
.import-btn { margin:0 20px; height:42px; border-radius:14px; background:var(--coral); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; animation:tapPulse 16s infinite; }
@keyframes tapPulse { 0%,35%{transform:scale(1)} 36%{transform:scale(.93)} 37%,100%{transform:scale(1)} }

.spin-wrap { display:flex; justify-content:center; margin-top:34%; }
.spin { width:36px; height:36px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--coral); animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.scraping-text { text-align:center; font-weight:700; margin-top:14px; }
.dots i { font-style:normal; animation:dotBlink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay:.2s; }
.dots i:nth-child(3) { animation-delay:.4s; }
@keyframes dotBlink { 0%,100%{opacity:.15} 50%{opacity:1} }
.skeleton { padding:0 32px; margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.skeleton span { height:12px; border-radius:8px; background:var(--line); animation:pulse 1.3s ease-in-out infinite; }
.skeleton span:nth-child(2) { width:80%; animation-delay:.15s; }
.skeleton span:nth-child(3) { width:60%; animation-delay:.3s; }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.scroll-wrap { width:100%; height:100%; overflow:hidden; }
.scroll-wrap img { animation:scrollRecipe 16s infinite; }
@keyframes scrollRecipe { 0%,60%{transform:translateY(0)} 62%{transform:translateY(0)} 78%{transform:translateY(-18%)} 80%,100%{transform:translateY(-18%)} }

.mini-landing { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 28px; gap:6px; }
.mini-wordmark { color:var(--coral); font-weight:800; font-size:20px; }
.mini-wordmark i { font-style:normal; color:#F4D97A; }
.mini-landing h4 { margin:8px 0 2px; font-size:21px; line-height:1.2; }
.mini-landing p { margin:0 0 10px; color:var(--muted); font-size:14px; }
.mini-cta { background:var(--ink); color:#fff; padding:10px 20px; border-radius:12px; font-weight:700; font-size:13px; }

@media (prefers-reduced-motion: reduce) {
  .phone-frame, .scene, .typed, .import-btn, .spin, .dots i, .skeleton span, .scroll-wrap img { animation:none !important; }
  .scene-1 { opacity:1; }
}

.feature-row { display:grid; grid-template-columns:1fr; gap:28px; padding:16px 0 64px; text-align:center; }
.feature .fi { font-size:28px; }
.feature h2 { margin:10px 0 4px; }
.feature p { margin:0; color:var(--muted); }
@media (min-width:720px) {
  .feature-row { grid-template-columns:1fr 1fr 1fr; }
}

/* ---------- language switch + cookie banner ---------- */
.nav-links { display:flex; align-items:center; gap:16px; }
.lang-switch { border:1px solid var(--coral); border-radius:8px; padding:3px 9px; font-size:13px; font-weight:700; text-decoration:none; }
.lang-switch:hover { background:var(--coral); color:#fff; }

.cookie-bar {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100;
  max-width:720px; margin:0 auto;
  background:var(--ink); color:#fff;
  border-radius:16px; padding:16px 18px;
  box-shadow:0 12px 34px rgba(0,0,0,.25);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  font-size:13.5px; line-height:1.5;
}
.cookie-bar p { margin:0; flex:1 1 260px; color:#fff; }
.cookie-bar a { color:#FFD9CF; text-decoration:underline; }
.cookie-bar button {
  flex:0 0 auto; background:var(--coral); color:#fff; border:none;
  padding:10px 18px; border-radius:10px; font-weight:700; font-size:13.5px; cursor:pointer;
}
.cookie-bar button:hover { background:#fff; color:var(--ink); }
@media (max-width:520px) {
  .cookie-bar { flex-direction:column; align-items:stretch; text-align:center; gap:12px; padding:14px 16px; }
  .cookie-bar p { flex:0 0 auto; }
  .cookie-bar button { width:100%; }
}