/* ==========================================================================
   DesiMenus marketing site — styles
   Palette, type and shape values are pulled from desimenus-tokens.json.
   Layout uses the "Appetite" expression: larger radii, more air, serif
   display type, photography/illustration allowed to lead.
   ========================================================================== */

:root {
  /* ---- Brand ramps (from desimenus-tokens.json) ---- */
  --primary-50:#EEF6FD; --primary-100:#D6EAFA; --primary-200:#ADD5F4; --primary-300:#7DBBEB;
  --primary-400:#3697DB; --primary-500:#1E7CC4; --primary-600:#1463A4; --primary-700:#0F4E83; --primary-900:#082A47;

  --slate-0:#FFFFFF; --slate-25:#F7F9FB; --slate-50:#EFF3F7; --slate-100:#E2E8EF; --slate-200:#CBD4DF;
  --slate-300:#A7B4C4; --slate-400:#7A8899; --slate-500:#5A6878; --slate-600:#43505F; --slate-700:#303B48;
  --slate-800:#1E2833; --slate-900:#131C25; --slate-950:#0B1219; --slate-1000:#05090D; --slate-950:#0B1219;

  --pudina-50:#E6F5EF; --pudina-200:#A8DCC5; --pudina-400:#2E9E75; --pudina-500:#16875E; --pudina-600:#0E6E4C;
  --haldi-50:#FBF1DC; --haldi-300:#F0C36A; --haldi-400:#E0A32E; --haldi-500:#C4841A; --haldi-600:#9E6710;
  --mirchi-50:#FCEBEC; --mirchi-400:#E66A6A; --mirchi-500:#C42D3C; --mirchi-600:#9E1F2E;
  --tandoor-50:#FCEEE6; --tandoor-300:#EE8F5E; --tandoor-400:#E2622B; --tandoor-500:#C24A18; --tandoor-600:#9B3A11;
  --jamun-50:#F0EBFB; --jamun-300:#B39CE8; --jamun-400:#9B7FE0; --jamun-500:#6F4FBF; --jamun-600:#573C9B;

  /* ---- Type ---- */
  --font-ui: "IBM Plex Sans", -apple-system, Segoe UI, Roboto, system-ui, sans-serif;
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", SFMono-Regular, Consolas, monospace;

  /* ---- Site tokens ---- */
  --canvas: var(--slate-25);
  --surface: var(--slate-0);
  --surface-sunken: var(--slate-50);
  --text: var(--slate-900);
  --text-2: var(--slate-500);
  --text-3: var(--slate-400);
  --border: var(--slate-100);
  --border-strong: var(--slate-200);
  --action: var(--primary-600);
  --action-hover: var(--primary-500);
  --on-action: #fff;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;
  --rail-w: 6px;
  --shadow-sm: 0 1px 2px rgba(19,28,37,.06), 0 1px 3px rgba(19,28,37,.05);
  --shadow-md: 0 8px 24px rgba(19,28,37,.10), 0 2px 6px rgba(19,28,37,.06);
  --shadow-lg: 0 24px 60px rgba(19,28,37,.16), 0 6px 16px rgba(19,28,37,.08);
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --container: 1180px;
}

/* ---- Dark theme (values from desimenus-tokens.json [data-theme="dark"]) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: var(--slate-950);
  --surface: var(--slate-900);
  --surface-sunken: var(--slate-1000);
  --text: var(--slate-200);
  --text-2: var(--slate-300);
  --text-3: var(--slate-400);
  --border: var(--slate-700);
  --border-strong: var(--slate-600);
  --action: var(--primary-400);
  --action-hover: var(--primary-300);
  --on-action: var(--slate-950);
  --shadow-sm: none; --shadow-md: 0 0 0 1px var(--slate-700); --shadow-lg: 0 0 0 1px var(--slate-700);
}
[data-theme="dark"] .site-header { background: rgba(11,18,25,.82); }
[data-theme="dark"] .site-header.is-scrolled { background: rgba(11,18,25,.96); }
[data-theme="dark"] .contact-copy { background: var(--slate-1000); }

/* ---- Reset ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--action); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; }

.eyebrow {
  font: 600 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--action); margin: 0 0 12px;
}
.eyebrow.center { text-align: center; }

.section { padding: 96px 0; }
.section-tint { background: var(--surface); }
.section-title {
  font: 600 clamp(28px, 3.4vw, 40px)/1.2 var(--font-display);
  margin: 0 0 16px;
  max-width: 780px;
}
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lead { color: var(--text-2); font-size: 17px; max-width: 640px; margin: 0 0 48px; }
.section-lead.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-ui); white-space: nowrap;
  border: 1.5px solid transparent; transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--action); color: var(--action); }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,249,251,.92);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); background: rgba(247,249,251,.96); }
.header-inner { display: flex; align-items: center; gap: 32px; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--primary-600); }
.brand-mark { width: 28px; height: 28px; }
.brand-word { font: 600 19px/1 var(--font-display); color: var(--text); }
.brand-word em { font-style: normal; color: var(--primary-600); }

.main-nav { display: flex; gap: 28px; margin-left: 8px; flex: 1; }
.main-nav a { font: 500 15px/1 var(--font-ui); color: var(--text-2); padding: 8px 0; position: relative; }
.main-nav a:hover { color: var(--text); }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--action); transform: scaleX(0); transition: transform .2s var(--ease);
}
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-login-hide { display: none; }

.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: border-color .2s var(--ease), transform .2s var(--ease);
  position: relative; flex: none;
}
.theme-toggle:hover { border-color: var(--action); color: var(--action); }
.theme-icon { width: 18px; height: 18px; position: absolute; transition: opacity .25s var(--ease), transform .35s var(--ease); }
.theme-icon path, .theme-icon circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
.theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }

.nav-toggle {
  display: none; width: 40px; height: 40px; border: none; background: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; }

/* ---- Rail card primitive (signature element) ---- */
.rail-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-left: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail-w); }
.rail-primary  { background: var(--primary-500); }
.rail-pudina   { background: var(--pudina-500); }
.rail-haldi    { background: var(--haldi-400); }
.rail-mirchi   { background: var(--mirchi-500); }
.rail-tandoor  { background: var(--tandoor-500); }
.rail-jamun    { background: var(--jamun-500); }

/* ---- Hero ---- */
.hero { padding: 76px 0 40px; overflow: hidden; position: relative; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; z-index: 2; }

/* ---- Layered background blobs (parallax depth cue) ---- */
.hero-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.hero-blob-1 { width: 420px; height: 420px; top: -140px; left: -80px; background: radial-gradient(circle, var(--primary-200), transparent 70%); opacity: .55; animation: blobFloat 14s ease-in-out infinite; }
.hero-blob-2 { width: 360px; height: 360px; top: 60px; right: -120px; background: radial-gradient(circle, var(--tandoor-200), transparent 70%); opacity: .5; animation: blobFloat 17s ease-in-out infinite reverse; }
.hero-blob-3 { width: 320px; height: 320px; bottom: -160px; left: 30%; background: radial-gradient(circle, var(--pudina-200), transparent 70%); opacity: .45; animation: blobFloat 20s ease-in-out infinite; }
@keyframes blobFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-14px) scale(1.06); } }
[data-theme="dark"] .hero-blob-1 { background: radial-gradient(circle, var(--primary-700), transparent 70%); opacity: .35; }
[data-theme="dark"] .hero-blob-2 { background: radial-gradient(circle, var(--tandoor-600), transparent 70%); opacity: .3; }
[data-theme="dark"] .hero-blob-3 { background: radial-gradient(circle, var(--pudina-600), transparent 70%); opacity: .28; }

.hero-copy { position: relative; z-index: 2; will-change: transform, opacity; }
.hero h1 {
  font: 600 clamp(34px, 4.4vw, 54px)/1.12 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.hero-sub { color: var(--text-2); font-size: 18px; line-height: 1.6; max-width: 560px; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; }
.hero-trust { display: flex; flex-direction: column; gap: 10px; }
.hero-trust li { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--font-ui); color: var(--text-2); }
.hero-trust .i { width: 16px; height: 16px; color: var(--pudina-500); flex: none; }
.hero-trust .i path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Page-load stagger ---- */
.stagger { opacity: 0; transform: translateY(14px); animation: staggerIn .7s var(--ease) forwards; }
.stagger-1 { animation-delay: .55s; }
.stagger-2 { animation-delay: .68s; }
.stagger-3 { animation-delay: .82s; }
.stagger-4 { animation-delay: .96s; }
.stagger-5 { animation-delay: 1.1s; }
@keyframes staggerIn { to { opacity: 1; transform: translateY(0); } }

/* ---- Header brand mark draw-in on load ---- */
.brand-mark path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: logoDraw 1.1s var(--ease) .1s forwards; }
@keyframes logoDraw { to { stroke-dashoffset: 0; } }

/* ---- Custom hero cursor accent (pointer-fine only, added via JS) ---- */
.hero-cursor {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 1.5px solid var(--tandoor-400); pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease), transform .12s linear;
  z-index: 60; mix-blend-mode: multiply;
}
.hero-cursor.is-active { opacity: .8; }
.hero-cursor::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--tandoor-400); opacity: .5;
}

/* ---- Ambient spice-dust particles (spawned by JS in the hero) ---- */
.spice-dust {
  position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 55;
  animation: dustDrift 1.1s ease-out forwards;
}
@keyframes dustDrift { to { transform: translateY(-30px) scale(.3); opacity: 0; } }

.hero-visual { position: relative; height: 490px; }

/* ---- Flowing connector between demo cards ---- */
.hero-connector { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.connector-path { stroke: var(--tandoor-300); stroke-width: 2; stroke-dasharray: 5 7; opacity: .6; animation: connectorFlow 1.4s linear infinite; }
@keyframes connectorFlow { to { stroke-dashoffset: -24; } }
.connector-dot { fill: var(--tandoor-500); filter: drop-shadow(0 0 5px rgba(194,74,24,.55)); }
[data-theme="dark"] .connector-path { stroke: var(--tandoor-600); }

/* ---- Live preview badge ---- */
.live-badge {
  position: absolute; top: -12px; left: 20px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--slate-900); color: #fff; font: 600 11px/1 var(--font-ui); letter-spacing: .02em;
  padding: 6px 10px 6px 8px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); z-index: 3;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pudina-400); animation: liveDotPulse 1.6s ease-in-out infinite; }
@keyframes liveDotPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,158,117,.55); } 50% { opacity: .7; box-shadow: 0 0 0 5px rgba(46,158,117,0); } }

/* ---- Animated gradient headline highlight ---- */
.hl {
  position: relative; white-space: nowrap;
  background-image: linear-gradient(90deg, var(--tandoor-500), var(--primary-500), var(--pudina-500), var(--tandoor-500));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hlShift 6s ease-in-out infinite;
}
@keyframes hlShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.demo-anim { opacity: 0; transform: translateY(16px); animation: rise .6s var(--ease) 1.15s forwards; }
.demo-anim-delay { animation-delay: 1.3s; }
.demo-anim-delay2 { animation-delay: 1.45s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.rail-card.ticket-card { overflow: visible; }
.ticket-card { position: absolute; top: 0; right: 20px; width: 260px; padding: 20px 20px 20px 26px; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mono-time { font: 500 15px/1 var(--font-mono); color: var(--tandoor-600); }
.ticket-table { font: 600 13px/1 var(--font-ui); color: var(--text-2); margin-bottom: 12px; }
.ticket-items { display: flex; flex-direction: column; gap: 10px; }
.ticket-items li { display: flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--font-ui); }
.ticket-items em { font-style: normal; margin-left: auto; color: var(--text-3); font: 500 13px/1 var(--font-mono); }
.ticket-items li.muted { color: var(--text-3); }
.veg-dot, .nonveg-dot { width: 10px; height: 10px; border: 2px solid var(--pudina-600); flex: none; }
.nonveg-dot { border-color: var(--mirchi-600); border-radius: 2px; transform: rotate(45deg); }

.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-ui); }
.chip-tandoor { background: var(--tandoor-50); color: var(--tandoor-600); }

.kiosk-card { position: absolute; top: 232px; right: 260px; width: 250px; padding: 22px 22px 24px 28px; }
.kiosk-eyebrow { font: 600 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.kiosk-title { font: 600 18px/1.3 var(--font-display); margin-bottom: 18px; }
.kiosk-track { display: flex; align-items: center; margin-bottom: 8px; }
.track-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-strong); flex: none; }
.track-dot.done { background: var(--pudina-500); }
.track-dot.active { background: var(--tandoor-500); box-shadow: 0 0 0 4px var(--tandoor-50); }
.track-line { flex: 1; height: 2px; background: var(--border-strong); }
.track-line.done { background: var(--pudina-500); }
.kiosk-labels { display: flex; justify-content: space-between; font: 500 11px/1 var(--font-ui); color: var(--text-3); }

.stat-card { position: absolute; bottom: 0; right: 0; width: 200px; padding: 22px 20px 22px 26px; transition: opacity .22s ease; }
.stat-num { font: 600 40px/1 var(--font-mono); color: var(--primary-600); margin-bottom: 6px; }
.stat-label { font: 500 13px/1.4 var(--font-ui); color: var(--text-2); }

/* ---- Live ticker strip ---- */
.ticker-strip {
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; padding: 14px 0;
}
.ticker-track { display: flex; gap: 36px; width: max-content; animation: tickerScroll 34s linear infinite; }
.ticker-strip:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font-ui); color: var(--text-2); white-space: nowrap; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Urgency hover-sweep on the KDS surface card ---- */
.surface-card:nth-child(3):hover .surface-icon {
  animation: urgencySweep 1.8s ease-in-out;
}
@keyframes urgencySweep {
  0%   { background: var(--pudina-50); color: var(--pudina-600); }
  50%  { background: var(--haldi-50);  color: var(--haldi-600); }
  100% { background: var(--mirchi-50); color: var(--mirchi-600); }
}

/* ---- Order lifecycle scroll diagram ---- */
.lifecycle-diagram { position: relative; height: 260px; margin-bottom: 48px; }
.lifecycle-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lifecycle-path { stroke: var(--border-strong); stroke-width: 2.5; stroke-dasharray: 7 7; }
.lifecycle-dot { fill: var(--tandoor-500); filter: drop-shadow(0 0 6px rgba(194,74,24,.5)); }
.lifecycle-stop {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; width: 140px;
}
.lifecycle-icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--primary-600); box-shadow: var(--shadow-sm);
}
.lifecycle-icon svg { width: 22px; height: 22px; }
.lifecycle-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Mobile-only zigzag path — hidden on desktop where the curved SVG is used. */
.lifecycle-svg-mobile { display: none; }
.lifecycle-dot-mobile { display: none; }
.lifecycle-label { font: 500 12.5px/1.4 var(--font-ui); color: var(--text-2); }
.lifecycle-label em { font-style: normal; display: block; font: 600 10.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-top: 2px; }

/* ---- Live kitchen queue demo ---- */
.kds-demo { max-width: 560px; margin: 0 auto; padding: 22px 24px 22px 30px; }
.kds-demo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kds-demo-head .chip { gap: 6px; }
.kds-demo-head .i { width: 14px; height: 14px; }
.kds-demo-head .i path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kds-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.kds-ticket-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); font: 500 14px/1 var(--font-ui); transition: box-shadow .3s var(--ease);
}
.kds-ticket-row span:nth-child(2) { flex: 1; }
.kds-time { font: 500 13px/1 var(--font-mono); color: var(--text-2); }
.urgency-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kds-ticket-row[data-urgency="ready"] .urgency-dot { background: var(--pudina-500); }
.kds-ticket-row[data-urgency="warning"] .urgency-dot { background: var(--haldi-400); }
.kds-ticket-row[data-urgency="new"] .urgency-dot { background: var(--tandoor-500); }
.kds-ticket-row.is-pulsing { animation: kdsPulse 1.4s var(--ease); }
@keyframes kdsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194,74,24,0); }
  30% { box-shadow: 0 0 0 3px rgba(194,74,24,.35); }
}
.surface-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.surface-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.surface-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.surface-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--primary-50);
  display: flex; align-items: center; justify-content: center; color: var(--primary-600); margin-bottom: 18px;
}
.surface-icon svg { width: 22px; height: 22px; }
.surface-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.surface-card h3 { font: 600 18px/1.2 var(--font-display); margin-bottom: 6px; }
.surface-meta { font: 500 12.5px/1.4 var(--font-ui); color: var(--tandoor-600); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; }
.surface-card p:last-child { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }

/* ---- Filter bar + feature grid ---- */
.filter-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn {
  height: 38px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font: 600 13.5px/1 var(--font-ui);
  transition: all .15s var(--ease);
}
.filter-btn:hover { border-color: var(--action); color: var(--action); }
.filter-btn.is-active { background: var(--action); border-color: var(--action); color: #fff; }

.feature-grid { position: relative; }
.feature-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: var(--radius-lg);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(54,151,219,.14), transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.feature-grid:hover::before { opacity: 1; }


.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-left: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 24px 22px 24px 28px; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.feature-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: none; }
.feature-icon svg { width: 19px; height: 19px; }
.feature-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon svg * { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1s var(--ease) .15s; }
.feature-card.is-visible .feature-icon svg * { stroke-dashoffset: 0; }
.feature-tag { font: 600 10.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.feature-card h3 { font: 600 16.5px/1.3 var(--font-ui); margin-bottom: 8px; }
.feature-card p { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.feature-card[hidden] { display: none; }

/* tag/icon tint per stage */
.tag-core, .icon-core { background: var(--primary-50); color: var(--primary-600); }
.tag-growth, .icon-growth { background: var(--tandoor-50); color: var(--tandoor-600); }
.tag-pro, .icon-pro { background: var(--jamun-50); color: var(--jamun-600); }
.tag-platform, .icon-platform { background: var(--pudina-50); color: var(--pudina-600); }

/* ---- Outlets ---- */
.outlet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.outlet-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 26px 24px 26px 30px;
}
.outlet-card h3 { font: 600 18px/1.2 var(--font-display); margin-bottom: 8px; }
.outlet-card p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.outlet-card-wide { grid-column: span 1; }

/* ---- Roadmap timeline ---- */
.timeline { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline-item { display: flex; gap: 22px; padding: 0 0 40px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: 6px; top: 22px; bottom: -4px; width: 2px; background: var(--border-strong);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 4px; z-index: 1; box-shadow: 0 0 0 4px var(--canvas); }
.section-tint .timeline-dot { box-shadow: 0 0 0 4px var(--surface); }
.dot-primary { background: var(--primary-500); }
.dot-pudina { background: var(--pudina-500); }
.dot-haldi { background: var(--haldi-400); }
.dot-tandoor { background: var(--tandoor-500); }
.dot-jamun { background: var(--jamun-500); }
.timeline-stage { font: 600 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.timeline-item h3 { font: 600 20px/1.3 var(--font-display); margin-bottom: 8px; }
.timeline-item p:last-child { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* ---- Pricing toggle ---- */
.pricing-toggle { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }
.toggle-btn {
  height: 42px; padding: 0 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font: 600 14px/1 var(--font-ui); transition: all .18s var(--ease);
}
.toggle-btn:hover { border-color: var(--action); color: var(--action); }
.toggle-btn.is-active { background: var(--action); border-color: var(--action); color: #fff; }
.price-desc, .price-list-swap { transition: opacity .2s var(--ease); }
.is-swapping { opacity: 0; }

/* ---- Pricing ---- */
/* ⚠ auto-fit, NOT repeat(3, 1fr). How many pricing cards there are is now
   chosen in the SaaS console; the seeded content already ships four (Core,
   Growth, Pro, Platform), and a hard 3 leaves the fourth alone on a second
   row at a third of the width, beside a card that is translateY(-8px) up. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; align-items: stretch; }
.price-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 32px 28px 28px 32px;
  display: flex; flex-direction: column;
}
.price-card-featured { border-color: var(--tandoor-300); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.price-badge { position: absolute; top: -13px; left: 32px; background: var(--tandoor-500); color: #fff; font: 600 11px/1 var(--font-ui); padding: 6px 12px; border-radius: var(--radius-pill); }
.price-tier { font: 600 22px/1 var(--font-display); margin-bottom: 10px; }
.price-desc { color: var(--text-2); font-size: 14.5px; line-height: 1.5; margin-bottom: 20px; }
.price-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
.price-list li { font-size: 14px; padding-left: 22px; position: relative; color: var(--text); }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--pudina-500); font-weight: 700; }
.pricing-footnote { text-align: center; color: var(--text-2); font-size: 14.5px; margin-top: 36px; }
.pricing-footnote a { color: var(--action); font-weight: 600; }

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; background: none; border: none; text-align: left;
  font: 600 15.5px/1.4 var(--font-ui); color: var(--text);
}
.faq-plus { font: 400 22px/1 var(--font-ui); color: var(--text-3); transition: transform .2s var(--ease); flex: none; }
.faq-q[aria-expanded="true"] .faq-plus { transform: rotate(45deg); color: var(--action); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s var(--ease); }
.faq-a p { padding: 0 22px 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 620px; }

/* ---- Contact ---- */
.contact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr;
}
.contact-copy { background: var(--primary-900); color: #fff; padding: 44px; }
.contact-copy .eyebrow { color: var(--primary-300); }
.contact-copy h2 { font: 600 30px/1.25 var(--font-display); margin-bottom: 14px; }
.contact-copy p { color: var(--primary-100); font-size: 15px; line-height: 1.6; margin-bottom: 32px; }
.contact-details { display: flex; flex-direction: column; gap: 14px; }
.contact-details li { display: flex; align-items: center; gap: 10px; font: 500 14.5px/1 var(--font-ui); }
.contact-details .i { width: 17px; height: 17px; color: var(--tandoor-300); }
.contact-details .i path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.contact-form { padding: 44px; display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field__label { font: 600 12.5px/1 var(--font-ui); color: var(--text-2); }
.ds-field__input {
  height: 46px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: 400 14.5px/1 var(--font-ui);
}
.ds-field__input:focus { border-color: var(--action); }
.ds-field__textarea { height: auto; padding: 12px 14px; resize: vertical; font-family: var(--font-ui); }
.form-note { font: 500 13.5px/1.4 var(--font-ui); color: var(--pudina-600); min-height: 18px; }

.outlet-select-wrap { position: relative; display: flex; align-items: center; }
.outlet-preview-icon {
  position: absolute; left: 12px; width: 18px; height: 18px; color: var(--action); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.outlet-preview-icon svg { width: 100%; height: 100%; }
.outlet-preview-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.outlet-select-wrap select { padding-left: 38px; }

.form-fields { display: flex; flex-direction: column; gap: 16px; transition: opacity .25s var(--ease); }
.form-success { text-align: center; padding: 20px 8px 4px; }
.success-check { width: 64px; height: 64px; margin: 0 auto 18px; display: block; }
.success-circle {
  stroke: var(--pudina-500); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: circleDraw .6s var(--ease) forwards;
}
.success-tick {
  stroke: var(--pudina-500); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34; animation: tickDraw .35s var(--ease) .55s forwards;
}
@keyframes circleDraw { to { stroke-dashoffset: 0; } }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }
.success-title { font: 600 20px/1.3 var(--font-display); margin-bottom: 6px; }
.success-sub { color: var(--text-2); font-size: 14.5px; margin-bottom: 22px; }
.success-timeline { display: flex; flex-direction: column; gap: 12px; text-align: left; max-width: 320px; margin: 0 auto 26px; }
.success-timeline li { display: flex; align-items: center; gap: 12px; font: 500 14px/1 var(--font-ui); color: var(--text); opacity: 0; animation: staggerIn .5s var(--ease) forwards; }
.success-timeline li:nth-child(1) { animation-delay: .8s; }
.success-timeline li:nth-child(2) { animation-delay: 1s; }
.success-timeline li:nth-child(3) { animation-delay: 1.2s; }
.success-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pudina-500); flex: none; }

/* ---- Footer ---- */
.site-footer { background: var(--slate-950); color: var(--slate-300); padding: 64px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--slate-800); }
.footer-brand .brand { color: var(--primary-300); margin-bottom: 16px; }
.footer-brand .brand-word { color: #fff; }
.footer-brand .brand-word em { color: var(--primary-300); }
.footer-brand p { font-size: 14px; line-height: 1.6; color: var(--slate-400); max-width: 320px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: var(--slate-900); display: flex;
  align-items: center; justify-content: center; font: 600 12px/1 var(--font-ui); color: var(--slate-300);
}
.footer-social a:hover { background: var(--primary-600); color: #fff; }
.footer-heading { font: 600 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 16px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 14.5px; color: var(--slate-300); }
.footer-col a:hover { color: #fff; }
.footer-bottom { padding: 22px 0; }
.footer-bottom p { font-size: 13px; color: var(--slate-500); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { height: 420px; margin-top: 20px; }
  .ticket-card { right: 10px; }
  .kiosk-card { right: auto; left: 0; top: 250px; }
  .stat-card { right: auto; left: 140px; bottom: -10px; }
  .surface-grid, .feature-grid, .outlet-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-card { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .lifecycle-diagram { position: relative; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding: 8px 0; }
  .lifecycle-svg { display: none; }
  .lifecycle-svg-mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
  .lifecycle-dot-mobile {
    display: block; position: absolute; left: 0; top: 0; width: 13px; height: 13px;
    margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--tandoor-500);
    box-shadow: 0 0 6px rgba(194,74,24,.5); z-index: 2; pointer-events: none;
  }
  .lifecycle-stop {
    position: static; transform: none; flex-direction: row; text-align: left; width: 68%;
    z-index: 1;
  }
  .lifecycle-stop--right { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
  .lifecycle-icon { position: relative; z-index: 1; background: var(--surface); flex: none; }
  .lifecycle-label { text-align: left; }
  .lifecycle-stop--right .lifecycle-label { text-align: right; }
  .pricing-toggle { flex-wrap: wrap; }
  .main-nav { position: fixed; inset: 76px 0 0 0; background: var(--canvas); flex-direction: column; padding: 24px; gap: 4px; transform: translateX(100%); transition: transform .25s var(--ease); }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 17px; }
  .nav-toggle { display: flex; }
  .header-actions .btn-primary { padding: 0 16px; height: 40px; font-size: 14px; }
  .section { padding: 64px 0; }
  .surface-grid, .feature-grid, .outlet-grid, .pricing-grid { grid-template-columns: 1fr; }
  .price-card-featured { transform: none; }
  .form-row { grid-template-columns: 1fr; }
  .contact-copy, .contact-form { padding: 30px 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   New interactive / animated elements
   ========================================================================== */

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--tandoor-500), var(--primary-500), var(--pudina-500));
  z-index: 200; transition: width .1s linear;
}

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Ambient decorative SVG in hero ---- */
.ambient-rail { position: absolute; inset: -20px -20px auto auto; width: 100%; height: 100%; z-index: 0; pointer-events: none; will-change: transform; }
.ambient-dash rect { fill: var(--primary-200); opacity: .5; }
.ambient-dash-2 rect { fill: var(--pudina-300); }
.ambient-dash { animation: dashDrift 6s ease-in-out infinite; }
.ambient-dash-2 { animation-duration: 7.5s; animation-direction: alternate-reverse; }
@keyframes dashDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
.ambient-dot { fill: var(--tandoor-400); opacity: .55; animation: dotPulse 2.4s ease-in-out infinite; }
.ambient-dot-2 { fill: var(--jamun-400); animation-delay: .8s; }
@keyframes dotPulse { 0%,100% { r: 4; opacity: .35; } 50% { r: 6; opacity: .75; } }

/* ---- Order-flow demo stepper (hero) ---- */
.ticket-card, .kiosk-card, .stat-card { z-index: 1; }
.order-steps { display: flex; align-items: center; margin-top: 18px; }
.step-dot {
  width: 14px; height: 14px; border-radius: 50%; border: none; background: var(--border-strong);
  flex: none; cursor: pointer; padding: 0; transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.step-dot:hover { transform: scale(1.2); }
.step-dot.is-active { background: var(--tandoor-500); box-shadow: 0 0 0 4px var(--tandoor-50); }
.step-dot.is-done { background: var(--pudina-500); }
.step-line { flex: 1; height: 2px; background: var(--border-strong); transition: background .25s var(--ease); }
.step-line.is-done { background: var(--pudina-500); }
.step-labels { display: flex; justify-content: space-between; margin-top: 8px; font: 500 10.5px/1 var(--font-ui); color: var(--text-3); }
.chip-pudina { background: var(--pudina-50); color: var(--pudina-600); }
.chip-primary { background: var(--primary-50); color: var(--primary-600); }
.rail-primary-anim { background: var(--primary-500); }

/* ---- Outlet switcher ---- */
.outlet-switcher { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.outlet-tabs { display: flex; flex-direction: column; gap: 6px; }
.outlet-tab {
  text-align: left; padding: 13px 18px; border-radius: var(--radius-md); border: 1.5px solid transparent;
  background: transparent; color: var(--text-2); font: 600 14.5px/1 var(--font-ui);
  transition: all .18s var(--ease);
}
.outlet-tab:hover { background: var(--surface); color: var(--text); }
.outlet-tab.is-active { background: var(--surface); color: var(--action); border-color: var(--border); box-shadow: var(--shadow-sm); }
.outlet-panel { min-height: 300px; padding: 36px; position: relative; overflow: hidden; }
.outlet-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--tint-color, transparent); opacity: .6; transition: background .45s var(--ease);
}
.outlet-panel-inner { position: relative; z-index: 1; display: flex; gap: 28px; align-items: flex-start; animation: fadeSwap .35s var(--ease); }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.outlet-panel-icon { width: 84px; height: 84px; flex: none; color: var(--tandoor-500); }
.outlet-panel-icon svg { width: 100%; height: 100%; }
.outlet-panel-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.outlet-panel-copy h3 { font: 600 24px/1.25 var(--font-display); margin-bottom: 10px; }
.outlet-panel-copy p { color: var(--text-2); font-size: 15px; line-height: 1.6; margin-bottom: 16px; max-width: 480px; }
.outlet-panel-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.outlet-panel-tags li {
  font: 600 12px/1 var(--font-ui); padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-2);
}

/* animated icon primitives, reused across outlet illustrations */
.steam-line { transform-origin: bottom; animation: steamRise 2.6s ease-in-out infinite; opacity: 0; }
.steam-line:nth-child(2) { animation-delay: .5s; }
.steam-line:nth-child(3) { animation-delay: 1s; }
@keyframes steamRise { 0% { opacity: 0; transform: translateY(0) scaleY(1); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scaleY(1.25); } }
.flame-shape { animation: flameFlicker 1.5s ease-in-out infinite; transform-origin: bottom center; }
@keyframes flameFlicker { 0%,100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.1) scaleX(.92); } }
.wheel-shape { animation: wheelSpin 3.2s linear infinite; transform-origin: center; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.sparkle-shape { animation: sparkleTwinkle 1.8s ease-in-out infinite; transform-origin: center; }
.sparkle-shape:nth-child(2) { animation-delay: .5s; }
.sparkle-shape:nth-child(3) { animation-delay: .9s; }
@keyframes sparkleTwinkle { 0%,100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }
.wave-shape { animation: wavePulse 2.4s ease-in-out infinite; transform-origin: center; }
.wave-shape:nth-child(2) { animation-delay: .4s; }
.wave-shape:nth-child(3) { animation-delay: .8s; }
@keyframes wavePulse { 0% { opacity: .15; transform: scale(.85); } 50% { opacity: .6; } 100% { opacity: .15; transform: scale(1.15); } }
.liquid-shape { transform-origin: bottom; animation: glassFill 3.2s ease-in-out infinite; }
@keyframes glassFill { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(.85); } }

/* ---- Tilt-on-hover for cards ---- */
.tilt { transition: transform .25s var(--ease), box-shadow .25s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* ---- Magnetic buttons ---- */
.btn-magnetic { transition: transform .18s var(--ease), background .15s var(--ease); }

@media (max-width: 900px) {
  .outlet-switcher { grid-template-columns: 1fr; }
  .outlet-tabs { flex-direction: row; flex-wrap: wrap; }
  .outlet-panel-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-anim, .demo-anim-delay, .demo-anim-delay2 { animation: none; opacity: 1; transform: none; }
  .ambient-dash, .ambient-dash-2, .ambient-dot, .steam-line, .flame-shape, .wheel-shape,
  .sparkle-shape, .wave-shape, .liquid-shape { animation: none !important; opacity: .6; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tilt { transform: none !important; }
  .stagger { animation: none; opacity: 1; transform: none; }
  .brand-mark path { animation: none; stroke-dashoffset: 0; }
  .ticker-track { animation: none; }
  .hero-cursor, .spice-dust { display: none; }
  .kds-ticket-row.is-pulsing { animation: none; }
  .surface-card:nth-child(3):hover .surface-icon { animation: none; }
  .success-circle, .success-tick, .success-timeline li { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .connector-path { animation: none; }
  .connector-dot { display: none; }
  .live-dot { animation: none; }
  .hl { animation: none; background-position: 0% 50%; }
  .hero-blob { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Auth / login page (Blazor-only addition — not on the marketing site)
   ========================================================================== */
.auth-section { padding: 64px 0 96px; min-height: calc(100vh - 76px); display: flex; align-items: center; }
.auth-section .wrap { width: 100%; }
.auth-brand { display: flex; justify-content: center; gap: 10px; color: var(--primary-600); margin-bottom: 32px; }
.auth-brand .brand-mark { width: 30px; height: 30px; }
.auth-brand .brand-word { font: 600 21px/1 var(--font-display); color: var(--text); }
.auth-brand .brand-word em { font-style: normal; color: var(--primary-600); }

.auth-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; box-shadow: var(--shadow-lg); overflow: hidden; }
.auth-card-inner { padding: 44px; display: flex; flex-direction: column; gap: 16px; }
.auth-card-inner h1 { font: 600 28px/1.25 var(--font-display); margin: 4px 0 4px; }
.auth-sub { color: var(--text-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 12px; }
.auth-sub a, .auth-footnote a { color: var(--action); font-weight: 600; }
.auth-card-inner form,
.auth-card-inner .ds-field { margin-top: 2px; }
.auth-card-inner .ds-field { margin-bottom: 4px; }

.field-error { display: block; font: 500 12.5px/1.4 var(--font-ui); color: var(--mirchi-600); margin: -8px 0 4px; }
.form-note.note-error { color: var(--mirchi-600); }
.form-note.note-info { color: var(--tandoor-600); background: var(--tandoor-50); padding: 10px 14px; border-radius: var(--radius-sm); margin: 4px 0; }
.validation-message { display: block; font: 500 12.5px/1.4 var(--font-ui); color: var(--mirchi-600); margin: -8px 0 4px; }

.auth-remember { display: flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font-ui); color: var(--text-2); margin: 6px 0 4px; cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--action); }

.auth-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 13.5px; }
.auth-links a { color: var(--text-2); }
.auth-links a:hover { color: var(--action); }
.auth-links span { color: var(--text-3); }

.auth-footnote { text-align: center; color: var(--text-2); font-size: 13.5px; margin-top: 28px; }

@media (max-width: 560px) {
  .auth-card-inner { padding: 30px 24px; }
}

/* ==========================================================================
   Blazor framework UI (error bar shown by blazor.web.js on unhandled errors)
   ========================================================================== */
#blazor-error-ui {
  background: var(--mirchi-600);
  color: #fff;
  bottom: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
  display: none;
  left: 0;
  padding: 12px 20px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font: 500 14px/1.4 var(--font-ui);
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
  color: #fff;
  font-weight: 700;
}

/* ==========================================================================
   MS-1 — styles for the content-driven site.

   Everything below supports markup that is now generated from what the SaaS
   console holds rather than hand-written here: colour tints keyed by RAIL
   TOKEN rather than by stage code (a stage code is now an arbitrary string an
   operator types), the announcement bar, the stat strip, roadmap status
   words, testimonials, real prices, and the sign-in launcher.
   ========================================================================== */

/* ---- Tier tints by rail token -------------------------------------------
   The originals were .tag-core / .icon-growth — keyed on the stage's CODE,
   which was a fixed four-item list. Stage codes are now typed by an operator,
   so the tint follows the stage's chosen RAIL COLOUR instead. The old classes
   are left in place above; they simply stop matching anything once a stage is
   renamed, which is why these exist. */
.tag-primary,  .icon-primary  { background: var(--primary-50); color: var(--primary-600); }
.tag-tandoor,  .icon-tandoor  { background: var(--tandoor-50); color: var(--tandoor-600); }
.tag-jamun,    .icon-jamun    { background: var(--jamun-50);   color: var(--jamun-600); }
.tag-pudina,   .icon-pudina   { background: var(--pudina-50);  color: var(--pudina-600); }
.tag-haldi,    .icon-haldi    { background: var(--haldi-50);   color: var(--haldi-600); }
.tag-mirchi,   .icon-mirchi   { background: var(--mirchi-50);  color: var(--mirchi-600); }

.rail-haldi  { background: var(--haldi-500); }
.rail-mirchi { background: var(--mirchi-500); }
.dot-haldi   { background: var(--haldi-500); }
.dot-mirchi  { background: var(--mirchi-500); }
.dot-tandoor { background: var(--tandoor-500); }
.dot-jamun   { background: var(--jamun-500); }
.dot-pudina  { background: var(--pudina-500); }

/* ---- Announcement bar ---- */
.announcement-bar {
  background: var(--primary-600); color: #fff;
  font: 500 14px/1.4 var(--font-ui);
  position: relative; z-index: 60;
}
.announcement-inner { padding: 10px 24px; text-align: center; }
.announcement-inner a { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .announcement-bar { background: var(--primary-700); }

/* ---- Stat strip ---- */
.stat-strip { background: var(--surface); border-bottom: 1px solid var(--border); }
.stat-strip-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px; padding: 34px 24px;
}
.stat-strip-item { text-align: center; }
.stat-strip-value { font: 600 30px/1 var(--font-display); color: var(--action); }
.stat-strip-label { font-size: 13.5px; color: var(--text-2); margin-top: 6px; line-height: 1.4; }
.stat-strip-caption { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ---- Features ---- */
.filter-blurb {
  text-align: center; color: var(--text-2); font-size: 15px;
  max-width: 620px; margin: -24px auto 32px;
}
.feature-area {
  margin-top: 12px; font: 600 10.5px/1 var(--font-ui);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}

/* ---- Roadmap status ------------------------------------------------------
   ⚠ THE WORD IS THE MESSAGE; THE COLOUR IS DECORATION ON TOP OF IT. A
   roadmap that separates "shipped" from "planned" by hue alone reads as
   all-shipped to a reader who cannot separate those hues — and on this
   section that misreading becomes a promise nobody made. Hence a border and
   a label, never a bare dot. */
.roadmap-status {
  display: inline-block; margin-left: 10px; padding: 3px 9px;
  border-radius: var(--radius-pill); border: 1px solid currentColor;
  font: 600 10.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle;
}
.roadmap-status.status-shipped  { color: var(--pudina-600); background: var(--pudina-50); }
.roadmap-status.status-progress { color: var(--haldi-600);  background: var(--haldi-50); }
.roadmap-status.status-planned  { color: var(--slate-500);  background: var(--slate-50); }
[data-theme="dark"] .roadmap-status.status-shipped  { background: transparent; color: var(--pudina-400); }
[data-theme="dark"] .roadmap-status.status-progress { background: transparent; color: var(--haldi-300); }
[data-theme="dark"] .roadmap-status.status-planned  { background: transparent; color: var(--slate-300); }

/* ---- Testimonials ---- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.testimonial-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 28px 26px 24px 30px; margin: 0;
}
.testimonial-card blockquote {
  margin: 0 0 18px; font: 400 17px/1.6 var(--font-display); color: var(--text);
}
.testimonial-card blockquote::before { content: "\201C"; }
.testimonial-card blockquote::after  { content: "\201D"; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.testimonial-role { color: var(--text-2); font-size: 13px; }

/* ---- Pricing ---- */
.price-amount { margin: 4px 0 14px; min-height: 40px; }
.price-figure { font: 600 32px/1 var(--font-display); color: var(--text); }
.price-suffix { display: block; font-size: 13px; color: var(--text-2); margin-top: 6px; }
.price-caption { font: 600 18px/1.2 var(--font-display); color: var(--text-2); }
.price-list-excluded { color: var(--text-3); text-decoration: line-through; }

/* ---- Sign-in launcher ----------------------------------------------------
   ⚠ These are LINKS to another origin, not form controls, and they are
   styled to look like the destination rather than like a submit button —
   nothing on this page should resemble a password field. */
.auth-choice {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; margin-top: 8px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.auth-choice:hover { border-color: var(--action); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-choice-icon {
  width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary-600);
}
.auth-choice-icon svg { width: 21px; height: 21px; }
.auth-choice-icon svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-choice-copy { display: flex; flex-direction: column; gap: 4px; }
.auth-choice-copy strong { font: 600 16px/1.2 var(--font-ui); }
.auth-choice-copy span { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.auth-choice-arrow { margin-left: auto; color: var(--action); font-size: 20px; }
.auth-choice-quiet .auth-choice-icon { background: var(--slate-50); color: var(--slate-500); }
[data-theme="dark"] .auth-choice-icon { background: rgba(54,151,219,.14); }
[data-theme="dark"] .auth-choice-quiet .auth-choice-icon { background: rgba(255,255,255,.06); }

/* ---- Honeypot ------------------------------------------------------------
   ⚠ OFF-SCREEN, NOT display:none AND NOT visibility:hidden. Both of those
   are trivially detectable, and a bot that checks skips the field — which
   defeats the entire point. Absolutely positioned a long way off-screen
   renders it invisible to a person while leaving it a perfectly ordinary
   input to anything reading the DOM.

   Paired with aria-hidden and tabindex="-1" in the markup, so a screen
   reader never announces it and a keyboard user never lands on it. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- Footer ---- */
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.footer-bottom-links a { color: var(--slate-500); }
.footer-bottom-links a:hover { color: var(--action); }
.footer-operator-link { opacity: .72; }
.footer-fallback-note {
  padding: 0 0 18px; font-size: 12px; color: var(--slate-400); text-align: center;
}

@media (max-width: 820px) {
  .stat-strip-inner { padding: 26px 20px; gap: 18px; }
  .stat-strip-value { font-size: 25px; }
  .auth-choice { padding: 16px; gap: 12px; }
}

/* ==========================================================================
   MS-1 — corrections to rules written before the site was content-driven.
   ========================================================================== */

/* ⚠ AN EXCLUDED LINE MUST NOT KEEP THE GREEN TICK. .price-list li::before
   paints a ✓ on every bullet, so a line marked not-included was getting a
   strikethrough AND a tick — which at a glance reads as included. That is the
   worst possible direction for this particular error to fail in. */
.price-list-excluded::before {
  content: "×" !important;
  color: var(--text-3) !important;
}

/* ⚠ ValidationSummary DISCARDS THE class WE PASS IT. Its BuildRenderTree
   writes AdditionalAttributes first and then its own class="validation-errors",
   and RenderTreeBuilder keeps the last attribute of a given name — so the
   styling has to hang off ITS class, not ours. Without this the errors render
   as unstyled list items under the submit button, inheriting
   `ul { list-style: none; padding: 0 }`, which is very easy to miss. */
.validation-errors {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--mirchi-400);
  background: var(--mirchi-50);
  color: var(--mirchi-600);
  font-size: 14px;
  list-style: none;
}
.validation-errors li + li { margin-top: 4px; }
[data-theme="dark"] .validation-errors { background: transparent; color: var(--mirchi-400); }

/* ⚠ HOOKED ON IDENTITY, NOT ON GRID POSITION. The urgency sweep belongs to
   the kitchen-display card specifically; :nth-child(3) gave it to whichever
   card an operator happened to order third. The positional rule earlier in
   this file is neutralised here rather than deleted, so the diff stays
   legible. */
.surface-card:nth-child(3):hover .surface-icon { animation: none; }

.surface-card[data-surface="kds"]:hover .surface-icon {
  animation: urgencySweep 1.8s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .surface-card[data-surface="kds"]:hover .surface-icon { animation: none; }
}

/* ==========================================================================
   CO-1 — monthly / annual pricing.

   ⚠ ADDITIVE TO THE .price-* BLOCK ABOVE, NOT A REPLACEMENT. The toggle
   changed meaning (outlet count → billing interval) but the cards did not
   change shape, so nothing above needed rewriting. The rules here cover the
   three things that are new: the saving badge on the toggle, the fine print
   under the price, and the reassurance under a Purchase button.
   ========================================================================== */

/* The "save up to 22%" pill inside the annual toggle button. */
.toggle-btn { display: inline-flex; align-items: center; gap: 8px; }

.toggle-save {
  font: 600 11px/1 var(--font-ui);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--pudina-50, rgba(0, 0, 0, .05));
  color: var(--pudina-600, var(--text-2));
  white-space: nowrap;
}

/* ⚠ INHERITS THE ACTIVE BUTTON'S WHITE TEXT rather than keeping its green.
   The active toggle is a solid accent fill; a green pill on it is unreadable,
   and this is the state the badge is most often seen in. */
.toggle-btn.is-active .toggle-save {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* --- Fine print under the price ----------------------------------------
   ⚠ RESERVES ITS HEIGHT WHETHER OR NOT IT HAS CONTENT (min-height), so
   toggling monthly/annual does not make every card below the price jump by
   two lines. A pricing grid that reflows on a toggle looks broken even when
   the numbers are right. */
.price-fine {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -6px 0 18px;
  min-height: 34px;
}

.price-fine-line { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.price-fine-win  { color: var(--pudina-600, var(--text-2)); font-weight: 600; }
.price-fine-win s { color: var(--text-3); font-weight: 400; }

/* --- Under a Purchase button -------------------------------------------- */
.price-note {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
}

/* --- The GST line under the whole grid ---------------------------------- */
.pricing-foot {
  text-align: center;
  color: var(--text-2);
  font-size: 13.5px;
  margin-top: 28px;
}