/* =========================================================
   Quanta  ·  the restaurant operating system
   Warm editorial dark. Fraunces display + Hanken Grotesk.
   Restrained: no grain, no glass floaties, no gradient text.
   ========================================================= */
:root{
  /* warm near-black paper, cream ink, one violet accent */
  --bg:        #0e0c11;
  --bg-2:      #131019;
  --surface:   #191521;
  --surface-2: #211c2c;
  --line:      rgba(240,235,228,.10);
  --line-2:    rgba(240,235,228,.17);

  --accent:    #7c66ff;
  --accent-2:  #9d8bff;
  --accent-ink:#c9beff;

  --text:      #f1ede6;   /* warm off-white */
  --dim:       #a9a39c;   /* warm grey */
  --mute:      #726c76;

  --pos:       #7ee0a6;   /* positive / margin green */

  --maxw: 1180px;
  --r: 16px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--accent); color:#fff }

/* ---------- shared type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:520;
  line-height:1.06;
  letter-spacing:-.012em;
  font-optical-sizing:auto;
}
.em{ font-style:italic; font-weight:480; color:var(--accent-ink) }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600;
  font-size:.78rem; letter-spacing:.02em; color:var(--dim);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent-2); opacity:.8;
}
.idx{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
  color:var(--accent-2); margin-bottom:1.15rem;
}
.body{ color:var(--dim); font-size:1.06rem; max-width:48ch }
.tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.02em;
  color:var(--mute);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  color:#fff; background:var(--accent);
  padding:.72rem 1.2rem; border-radius:11px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s ease, background .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-1px); background:#6b52f2 }
.btn svg{ transition:transform .2s }
.btn:hover svg{ transform:translateX(2px) }
.btn-lg{ padding:.92rem 1.5rem; font-size:1rem }
.btn-sm{ padding:.55rem 1rem; font-size:.88rem; border-radius:9px }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line-2) }
.btn-ghost:hover{ background:rgba(240,235,228,.04); border-color:var(--accent-2) }
.btn.wa{ background:#1fab54 }
.btn.wa:hover{ background:#23bd5d }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.9rem clamp(1rem,4vw,2.2rem);
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(14,12,17,.78); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:560; font-size:1.34rem; letter-spacing:-.01em }
.brand-mark{ display:grid; place-items:center }
.nav-links{ display:flex; gap:1.7rem; margin-left:auto; font-size:.94rem; font-weight:500 }
.nav-links a{ color:var(--dim); transition:color .2s; position:relative }
.nav-links a:hover{ color:var(--text) }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--accent-2); transition:width .25s }
.nav-links a:hover::after{ width:100% }
.nav-toggle{ display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer }

/* ---------- HERO (stacked: copy, then large showcase) ---------- */
.hero{ position:relative; padding:clamp(7rem,13vh,9rem) clamp(1rem,4vw,2.2rem) 4.5rem }
.hero-inner{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
}
.hero-copy{ max-width:840px }
.hero-copy h1{
  font-size:clamp(2.8rem,6.6vw,5rem);
  margin:1.35rem 0 1.5rem; letter-spacing:-.02em;
}
.hero-copy .lede{ color:var(--dim); font-size:1.18rem; max-width:56ch; line-height:1.55 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 2.1rem }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none }
.hero-meta li{
  font-size:.8rem; font-weight:500; color:var(--dim);
  border:1px solid var(--line); border-radius:8px; padding:.34rem .68rem;
}

/* hero visual: large, centered, fully contained */
.hero-visual{ position:relative; margin:clamp(2.6rem,6vw,4rem) auto 1.2rem; max-width:1060px }
.browser{
  position:relative; border-radius:12px; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85), 0 1px 0 rgba(240,235,228,.04) inset;
}
.browser-bar{
  display:flex; align-items:center; gap:.42rem;
  padding:.58rem .8rem; background:#0c0a10; border-bottom:1px solid var(--line);
}
.browser-bar span{ width:10px; height:10px; border-radius:50%; background:#2a2733 }
.browser-bar span:nth-child(1){ background:#ff5f57 }
.browser-bar span:nth-child(2){ background:#febc2e }
.browser-bar span:nth-child(3){ background:#28c840 }
.browser-bar i{
  margin-left:.7rem; font-family:var(--font-mono); font-style:normal;
  font-size:.72rem; color:var(--mute);
}
.browser img{ width:100%; height:auto; display:block }

/* single, grounded stat chip (solid, never clipped) */
.stat-chip{
  position:absolute; left:1.4rem; bottom:-1.1rem; z-index:3;
  display:flex; align-items:center; gap:.7rem;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px;
  padding:.7rem .95rem; box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
}
.stat-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 4px rgba(126,224,166,.14) }
.stat-chip b{ font-family:var(--font-display); font-weight:560; font-size:1.12rem; display:block; line-height:1.1 }
.stat-chip small{ display:block; color:var(--mute); font-size:.74rem }

/* ---------- LOGO / CAPABILITY ROW (static, no marquee) ---------- */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2) }
.strip-inner{
  max-width:var(--maxw); margin:0 auto; padding:1.5rem clamp(1rem,4vw,2.2rem);
  display:flex; flex-wrap:wrap; gap:.7rem 1.9rem; align-items:center;
}
.strip-inner .lbl{ font-size:.82rem; color:var(--mute); margin-right:.4rem }
.strip-inner span:not(.lbl){ font-size:.9rem; color:var(--dim); font-weight:500 }
.strip-inner i{ color:var(--line-2); font-style:normal }

/* ---------- FEATURE SECTIONS ---------- */
.feature{ padding:clamp(4.5rem,10vh,7rem) clamp(1rem,4vw,2.2rem) }
.feature.alt{ background:var(--bg-2) }
.feature-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(2rem,4.5vw,3.8rem); align-items:center;
}
.feature-grid > *{ min-width:0 } /* let the image column shrink instead of overflowing */
.feature-grid.reverse .feature-copy{ order:2 }
.feature-copy h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:1.2rem }
.ticks{ list-style:none; margin-top:1.6rem; display:grid; gap:.75rem }
.ticks li{ position:relative; padding-left:1.7rem; color:var(--dim); font-size:1.01rem }
.ticks li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:7px; height:7px; border-radius:2px; background:var(--accent-2);
}
.feature-shot .browser{ box-shadow:0 34px 80px -38px rgba(0,0,0,.9) }

/* ---------- REPORTS DASH (designed, illustrative) ---------- */
.reports{ padding:clamp(4.5rem,10vh,7rem) clamp(1rem,4vw,2.2rem); max-width:var(--maxw); margin:0 auto }
.reports-head{ max-width:60ch; margin-bottom:2.4rem }
.reports-head h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:1.1rem }
.dash{
  display:grid; grid-template-columns:repeat(3,1fr); gap:13px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:20px;
  padding:clamp(1rem,2.5vw,1.7rem);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.dash-top{ grid-column:1/-1; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:13px }
.dash-kpi{ background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.42rem }
.dash-kpi .k{ font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--mute) }
.dash-kpi b{ font-family:var(--font-display); font-weight:560; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1 }
.dash-kpi.big{ background:linear-gradient(135deg,rgba(124,102,255,.20),rgba(124,102,255,.04)); border-color:rgba(157,139,255,.32) }
.dash-kpi em{ font-style:normal; font-size:.82rem; color:var(--mute) }
.dash-kpi em.up{ color:var(--pos) }
.dash-chart{ grid-column:1/3; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:1.2rem }
.dash-chart-head{ display:flex; justify-content:space-between; margin-bottom:1rem; font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--mute) }
.bars{ display:flex; align-items:flex-end; gap:8px; height:148px }
.bars span{
  flex:1; height:var(--h); min-height:6px; border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--accent-2),rgba(124,102,255,.22));
  transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.8,.2,1) both;
}
.bars span.peak{ background:linear-gradient(180deg,#c1b6ff,var(--accent)) }
@keyframes grow{ from{ transform:scaleY(.03) } to{ transform:scaleY(1) } }
.dash-list{ grid-column:3/4; grid-row:2; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:1.2rem }
.dash-list .k{ margin-bottom:.8rem; font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--mute) }
.dash-list ul{ list-style:none; display:grid; gap:.72rem }
.dash-list li{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.6rem; font-size:.9rem }
.dash-list li span{ color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dash-list li b{ font-family:var(--font-mono); font-weight:500; font-size:.82rem }
.dash-list li i{ font-style:normal; font-family:var(--font-mono); font-size:.72rem; color:var(--pos); background:rgba(126,224,166,.1); padding:.1rem .4rem; border-radius:5px }
.dash-note{ text-align:right; color:var(--mute); font-size:.76rem; margin-top:.9rem }

/* ---------- WHY ---------- */
.why{ padding:clamp(4.5rem,10vh,7rem) clamp(1rem,4vw,2.2rem); max-width:var(--maxw); margin:0 auto }
.why h2{ font-size:clamp(2.1rem,5vw,3.4rem); margin-bottom:2.6rem; max-width:16ch }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.why-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.8rem 1.6rem; transition:transform .3s, border-color .3s; position:relative;
}
.why-card:hover{ transform:translateY(-4px); border-color:var(--line-2) }
.why-num{ font-size:.78rem; font-weight:600; color:var(--accent-2); margin-bottom:1rem }
.why-card h3{ font-size:1.35rem; font-weight:540; margin-bottom:.55rem }
.why-card p{ color:var(--dim); font-size:.97rem }

/* ---------- FEATURE GRID ---------- */
.grid-feats{ padding:clamp(4rem,9vh,6.5rem) clamp(1rem,4vw,2.2rem); max-width:var(--maxw); margin:0 auto }
.gf-head{ margin-bottom:2.2rem }
.gf-head h2{ font-size:clamp(1.9rem,4vw,2.8rem) }
.gf{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.gf-item{ background:var(--bg-2); padding:1.6rem 1.4rem; transition:background .25s }
.gf-item:hover{ background:var(--surface) }
.gf-item h4{ font-family:var(--font-display); font-weight:540; font-size:1.1rem; margin-bottom:.5rem }
.gf-item p{ color:var(--mute); font-size:.9rem }

/* ---------- CTA ---------- */
.cta{ padding:clamp(4rem,9vh,7rem) clamp(1rem,4vw,2.2rem) }
.cta-inner{
  max-width:740px; margin:0 auto; text-align:center;
  background:var(--surface); border:1px solid var(--line-2); border-radius:24px;
  padding:clamp(2.5rem,6vw,4.2rem) clamp(1.5rem,4vw,3rem);
}
.cta-inner h2{ font-size:clamp(2.2rem,5vw,3.3rem); margin:.9rem 0 1rem }
.cta-inner .body{ margin:0 auto 2rem; color:var(--dim) }
.cta .wa{ margin:0 auto }
.cta-phone{ margin-top:1.1rem; font-family:var(--font-mono); font-size:.9rem; color:var(--mute) }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(3rem,6vw,4.2rem) clamp(1rem,4vw,2.2rem) 2rem }
.foot-top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 2fr; gap:3rem }
.foot-brand p{ color:var(--mute); font-size:.95rem; max-width:38ch; margin-top:1rem }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem }
.foot-cols h5{ font-size:.76rem; letter-spacing:.02em; color:var(--mute); margin-bottom:1rem; font-weight:600 }
.foot-cols a{ display:block; color:var(--dim); font-size:.94rem; margin-bottom:.6rem; transition:color .2s }
.foot-cols a:hover{ color:var(--accent-ink) }
.foot-bottom{
  max-width:var(--maxw); margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  color:var(--mute); font-size:.85rem;
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.07s } .reveal.d2{ transition-delay:.14s }
.reveal.d3{ transition-delay:.21s } .reveal.d4{ transition-delay:.28s }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; gap:3.2rem }
  .hero-visual{ margin-top:.5rem }
  .feature-grid{ grid-template-columns:1fr; gap:2.5rem }
  .feature-grid.reverse .feature-copy{ order:0 }
  .dash-top{ grid-template-columns:1fr 1fr }
  .dash-chart{ grid-column:1/-1 }
  .dash-list{ grid-column:1/-1; grid-row:auto }
  .why-grid{ grid-template-columns:1fr }
  .gf{ grid-template-columns:repeat(2,1fr) }
  .foot-top{ grid-template-columns:1fr; gap:2.5rem }
}
@media (max-width:640px){
  body{ font-size:16px }
  .nav-links{ display:none }
  .nav-links.open{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(14,12,17,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:.5rem 0;
  }
  .nav-links.open a{ padding:.9rem clamp(1rem,4vw,2.2rem) }
  .nav-toggle{ display:block; margin-left:auto }
  .nav .btn-sm{ display:none }
  .hero-copy h1{ font-size:clamp(2.5rem,9vw,3.3rem) }
  .stat-chip{ left:1rem; bottom:-1rem }
  .gf{ grid-template-columns:1fr }
  .foot-cols{ grid-template-columns:1fr 1fr }
  .foot-bottom{ flex-direction:column; align-items:flex-start }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
}