/* ═══════════════════════════════════════════════════════════
   main.css — Landing page section styles
   ═══════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 5% 5rem;
  position:relative; overflow:hidden; background:var(--bg);
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255,107,0,.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 50% 50%,  rgba(255,107,0,.05) 0%, transparent 65%);
}
[data-theme="light"] .hero-bg {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,107,0,.10) 0%, transparent 55%);
}
.hero-burst {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-burst svg { width:700px; height:700px; opacity:.06; animation:burst-spin 36s linear infinite; }
[data-theme="light"] .hero-burst svg { opacity:.04; }
@keyframes burst-spin { to { transform:rotate(360deg); } }

.hero-content { position:relative; z-index:2; max-width:860px; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,107,0,.10); border:1px solid rgba(255,107,0,.28);
  color:var(--orange); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  padding:.36rem 1rem; border-radius:50px; margin-bottom:2rem;
}

.logo-wrap { position:relative; width:178px; height:178px; margin:0 auto 2rem; }
.logo-glow {
  position:absolute; inset:-24px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,0,.38) 0%, transparent 70%);
  animation:logo-pulse 2.8s ease-in-out infinite;
}
@keyframes logo-pulse { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.logo-wrap img {
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:26px;
  box-shadow:0 0 70px rgba(255,107,0,.4), 0 24px 60px rgba(0,0,0,.7);
  animation:logo-float 3.5s ease-in-out infinite;
}
[data-theme="light"] .logo-wrap img { box-shadow:0 0 50px rgba(255,107,0,.3), 0 20px 40px rgba(0,0,0,.15); }
@keyframes logo-float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-13px) rotate(1deg)} }

.hero-title {
  font-family:'Anton',sans-serif;
  font-size:clamp(3.8rem,11vw,8.5rem);
  line-height:.92; color:var(--head); transition:color .25s;
}
.hero-title .accent { color:var(--orange); }
.hero-sub    { font-size:clamp(.93rem,2vw,1.12rem); color:var(--muted); line-height:1.75; max-width:490px; margin:1rem auto 2.5rem; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:4rem; }
.hero-stats  { display:flex; justify-content:center; gap:2.8rem; flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--border); }
.stat-num    { font-family:'Anton',sans-serif; font-size:2rem; color:var(--orange); line-height:1; }
.stat-lbl    { font-size:.75rem; color:var(--muted); margin-top:.25rem; text-transform:uppercase; letter-spacing:.5px; }

/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee-strip { background:var(--orange); padding:.72rem 0; overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; animation:marquee-run 22s linear infinite; }
.marquee-track span { font-family:'Anton',sans-serif; font-size:.9rem; letter-spacing:2px; color:#FFF; padding:0 2rem; }
.marquee-track span::after { content:'·'; padding-left:2rem; }
@keyframes marquee-run { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── APP DOWNLOAD ──────────────────────────────────────────── */
.app-wrap { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); transition:background .25s; }
.app-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:5.5rem 5%; max-width:1240px; margin:0 auto; }
.app-badges { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.app-badge {
  display:flex; align-items:center; gap:.7rem;
  background:var(--surf2); border:1px solid var(--border);
  border-radius:12px; padding:.82rem 1.3rem;
  text-decoration:none; color:var(--text); transition:all .22s; min-width:168px;
}
.app-badge:hover { border-color:var(--orange); background:rgba(255,107,0,.06); transform:translateY(-2px); }
.ab-icon  { font-size:1.8rem; line-height:1; }
.ab-small { font-size:.67rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ab-name  { font-size:.96rem; font-weight:700; color:var(--head); line-height:1.1; transition:color .25s; }
.phone-mockup {
  width:205px; height:390px; background:var(--surf2);
  border:2px solid var(--border); border-radius:32px;
  position:relative; margin:0 auto;
  box-shadow:0 40px 90px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; transition:background .25s;
}
[data-theme="light"] .phone-mockup { box-shadow:0 20px 60px rgba(0,0,0,.12); }
.phone-mockup::before { content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:70px; height:5px; background:rgba(128,128,128,.2); border-radius:3px; }
.phone-screen { position:absolute; inset:25px 7px 7px; background:linear-gradient(155deg,#FF6B00 0%,#FF9040 45%,#140800 100%); border-radius:22px; display:flex; align-items:center; justify-content:center; }
.phone-screen img { width:72px; height:72px; object-fit:cover; border-radius:17px; animation:logo-float 3s ease-in-out infinite; }

/* ── FEATURES ──────────────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.fcard { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.9rem; transition:all .25s; }
.fcard:hover { border-color:var(--border-o); background:rgba(255,107,0,.04); transform:translateY(-4px); }
.fcard-icon { font-size:1.9rem; margin-bottom:1.1rem; display:block; }
.fcard h3 { font-family:'Anton',sans-serif; font-size:1.1rem; color:var(--head); letter-spacing:.5px; margin-bottom:.4rem; transition:color .25s; }
.fcard p  { font-size:.86rem; color:var(--muted); line-height:1.65; }

/* ── HOW IT WORKS ──────────────────────────────────────────── */
.how-wrap { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); transition:background .25s; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.steps-grid::before {
  content:''; position:absolute; top:36px; left:12.5%; right:12.5%; height:1px;
  background:repeating-linear-gradient(to right,var(--border-o) 0,var(--border-o) 8px,transparent 8px,transparent 16px);
}
.step-item { padding:2rem 1.4rem; text-align:center; }
.step-num {
  width:52px; height:52px; background:var(--bg);
  border:2px solid var(--orange); border-radius:50%;
  font-family:'Anton',sans-serif; font-size:1.3rem; color:var(--orange);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem;
  position:relative; z-index:1; transition:background .25s;
}
.step-item h3 { font-family:'Anton',sans-serif; font-size:.95rem; color:var(--head); letter-spacing:.5px; margin-bottom:.4rem; transition:color .25s; }
.step-item p  { font-size:.83rem; color:var(--muted); line-height:1.6; }

/* ── COVERAGE / ZONES ──────────────────────────────────────── */
.cov-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.city-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:2.3rem; position:relative; overflow:hidden; transition:background .25s;
}
.city-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right,var(--orange),var(--orange-w)); }
.city-badge { display:inline-flex; align-items:center; background:rgba(255,107,0,.10); color:var(--orange); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:.26rem .72rem; border-radius:4px; margin-bottom:.85rem; }
.city-name  { font-family:'Anton',sans-serif; font-size:1.85rem; color:var(--head); margin-bottom:.4rem; transition:color .25s; }
.city-desc  { color:var(--muted); font-size:.86rem; line-height:1.65; margin-bottom:1.3rem; }
.zone-list  { display:flex; flex-direction:column; gap:.5rem; }
.zone-item  { display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:var(--text); }
.zdot       { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.exp-card   { background:linear-gradient(135deg,var(--surface) 0%,rgba(255,107,0,.05) 100%); border:1px solid var(--border-o); border-radius:20px; padding:2.3rem; transition:background .25s; }
.exp-title  { font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--head); margin-bottom:.6rem; transition:color .25s; }
.exp-sub    { color:var(--muted); font-size:.86rem; line-height:1.65; margin-bottom:1.6rem; }
.exp-cities { display:flex; flex-direction:column; gap:.65rem; }
.exp-city   { display:flex; align-items:center; justify-content:space-between; padding:.68rem 1rem; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; font-size:.86rem; }
[data-theme="light"] .exp-city { background:rgba(0,0,0,.02); }
.exp-city-n { color:var(--text); font-weight:500; }
.badge      { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:.18rem .52rem; border-radius:4px; }
.badge-on   { background:rgba(255,107,0,.14); color:var(--orange); }
.badge-off  { background:rgba(128,128,128,.12); color:var(--muted); }

/* ── ORDER CTA ─────────────────────────────────────────────── */
.order-cta { background:linear-gradient(135deg,#FF6B00 0%,#CC4400 100%); position:relative; overflow:hidden; }
.order-cta::before { content:'ORDER'; position:absolute; right:-1%; top:50%; transform:translateY(-50%); font-family:'Anton',sans-serif; font-size:13rem; color:rgba(255,255,255,.07); pointer-events:none; letter-spacing:-5px; white-space:nowrap; }
.order-cta-inner { max-width:1240px; margin:0 auto; padding:5rem 5%; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; position:relative; z-index:1; }
.order-cta-text h2 { font-family:'Anton',sans-serif; font-size:clamp(1.9rem,4.5vw,3.2rem); color:#FFF; line-height:1.05; margin-bottom:.4rem; }
.order-cta-text p  { color:rgba(255,255,255,.78); font-size:.97rem; }

/* ── RESTAURANT SIGNUP ─────────────────────────────────────── */
.rest-wrap { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); transition:background .25s; }
.rest-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.benefits  { display:flex; flex-direction:column; gap:1.1rem; margin-top:2rem; }
.benefit   { display:flex; align-items:flex-start; gap:.95rem; }
.ben-icon  { width:40px; height:40px; flex-shrink:0; background:rgba(255,107,0,.10); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.ben-title { font-weight:700; color:var(--head); margin-bottom:.12rem; font-size:.92rem; transition:color .25s; }
.ben-sub   { font-size:.81rem; color:var(--muted); line-height:1.5; }
.signup-card   { background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:2.4rem; transition:background .25s; }
.signup-card h3{ font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--head); margin-bottom:.3rem; transition:color .25s; }
.signup-card > p { font-size:.86rem; color:var(--muted); margin-bottom:1.7rem; }

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.rcard { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.8rem; transition:all .25s; }
.rcard:hover { border-color:var(--border-o); transform:translateY(-3px); }
.rstars  { color:var(--orange); font-size:.9rem; letter-spacing:2px; margin-bottom:.85rem; }
.rtext   { color:var(--muted); font-size:.86rem; line-height:1.7; margin-bottom:1.3rem; font-style:italic; }
.rauthor { display:flex; align-items:center; gap:.7rem; }
.ravatar { width:34px; height:34px; background:var(--orange); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:.9rem; color:#FFF; flex-shrink:0; }
.rname   { font-weight:700; font-size:.86rem; color:var(--head); transition:color .25s; }
.rloc    { font-size:.74rem; color:var(--muted); }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-wrap { background:var(--surface); border-top:1px solid var(--border); transition:background .25s; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.channels { display:flex; flex-direction:column; gap:.85rem; margin-top:2rem; }
.channel  { display:flex; align-items:center; gap:.95rem; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:.95rem 1.15rem; text-decoration:none; color:var(--text); transition:all .22s; }
.channel:hover { border-color:var(--border-o); background:rgba(255,107,0,.04); }
.ch-icon  { width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.ch-green  { background:rgba(37,211,102,.10); }
.ch-orange { background:rgba(255,107,0,.10); }
.ch-blue   { background:rgba(0,120,255,.10); }
.ch-label { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ch-value { font-weight:600; color:var(--head); font-size:.9rem; transition:color .25s; }
.ch-arr   { color:var(--muted); margin-left:auto; }
.cform-title { font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--head); margin-bottom:.3rem; transition:color .25s; }
.cform-sub   { font-size:.86rem; color:var(--muted); margin-bottom:1.4rem; }

/* ── MISSION & VISION ──────────────────────────────────────── */
.mv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;
}
.mv-card {
  border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden;
}
.mv-mission {
  background: linear-gradient(135deg, rgba(255,107,0,.10) 0%, rgba(255,107,0,.03) 100%);
  border: 1px solid var(--border-o);
}
.mv-vision {
  background: var(--surface); border: 1px solid var(--border);
}
.mv-icon  { font-size: 2.2rem; margin-bottom: 1rem; display: block; }
.mv-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--orange); margin-bottom: .5rem; display: block;
}
.mv-card h3 {
  font-family: 'Anton', sans-serif; font-size: 1.55rem;
  color: var(--head); margin-bottom: .85rem; line-height: 1.1; transition: color .25s;
}
.mv-card p { font-size: .9rem; color: var(--text); line-height: 1.8; }

.mv-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .5rem;
}
.mv-pillar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.5rem 1.2rem; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: .7rem;
  transition: border-color .22s, transform .22s;
}
.mv-pillar:hover { border-color: var(--border-o); transform: translateY(-3px); }
.mv-pillar-icon { font-size: 2rem; }
.mv-pillar-text { font-size: .87rem; font-weight: 600; color: var(--text); line-height: 1.4; }

/* ── RESPONSIVE: MAIN PAGE ─────────────────────────────────── */
@media (max-width:1024px) {
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid    { grid-template-columns:repeat(2,1fr); }
  .steps-grid::before { display:none; }
}
@media (max-width:820px) {
  .mv-grid, .mv-pillars { grid-template-columns:1fr; }
  .app-grid, .cov-grid, .rest-grid, .contact-grid { grid-template-columns:1fr; gap:2.4rem; }
  .phone-mockup { display:none; }
  .features-grid, .reviews-grid { grid-template-columns:1fr; }
  .order-cta-inner { flex-direction:column; text-align:center; }
  .order-cta::before { font-size:5rem; }
  .hero-stats { gap:1.5rem; }
}
@media (max-width:480px) {
  .steps-grid { grid-template-columns:1fr; }
}