/* ============================================================
   WAITR — section styles (SaaS app aesthetic)
   Dark cinematic hero + flow, light product sections,
   dark CTA + footer.
============================================================ */

/* shared section rhythm */
.section { padding: 120px 0; }
.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 18px 0 0; }
.section-head .lead { margin-top: 20px; font-size: 18px; line-height: 1.7; }

/* reveal animation base (GSAP toggles .is-in) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* tint chips for icons */
.chip { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; }
.chip.coral { background: rgba(255,111,94,.14); color: var(--coral-strong); }
.chip.green { background: rgba(27,169,76,.14); color: var(--green); }
.chip.blue  { background: rgba(45,111,247,.14); color: var(--blue); }
.chip.amber { background: rgba(255,178,62,.18); color: #C77E12; }

/* ============================================================
   SCENE 02 — scan → order → pay (pinned, dark)
============================================================ */
.flow { background: linear-gradient(180deg, #120D0B 0%, #16110F 100%); color: #F4EBE5; padding: 0; }
.flow .section-head { padding-top: 110px; }
.flow .section-head h2, .flow .section-head .lead { color: #F4EBE5; }
.flow .section-head .lead { color: #C9B8AE; }

.flow-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; min-height: 100vh; }
.flow-steps { display: flex; flex-direction: column; gap: 14px; }
.flow-step {
  display: flex; gap: 18px; padding: 22px 24px; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark); background: rgba(255,255,255,.02);
  opacity: .42; transition: opacity .4s var(--ease), background .4s, border-color .4s, transform .4s;
}
.flow-step.active { opacity: 1; background: rgba(255,111,94,.08); border-color: rgba(255,111,94,.5); transform: translateX(6px); }
.flow-step .idx {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  background: rgba(255,255,255,.06); color: #fff; transition: background .4s, color .4s;
}
.flow-step.active .idx { background: var(--coral); color: #fff; }
.flow-step h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 4px; color: #fff; }
.flow-step p { font-size: 15px; color: #C9B8AE; line-height: 1.5; }

/* phone */
.flow-phone-col { display: flex; justify-content: center; align-items: center; }
.phone {
  position: relative; width: 300px; height: 620px; border-radius: 46px; padding: 12px;
  background: #0c0907; border: 2px solid #2a211c;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.04);
}
.phone::before { content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0c0907; border-radius:0 0 16px 16px; z-index:4; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #FDF4EE; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.phone-screen img.show { opacity: 1; transform: scale(1); }
.phone-glow { position:absolute; inset:-40px; border-radius:60px; background: radial-gradient(circle at 50% 40%, rgba(255,111,94,.4), transparent 65%); filter: blur(30px); z-index:-1; opacity:.7; }
.flow-progress { position:absolute; bottom:-2px; left:0; height:3px; background: var(--coral); width:0; transition: width .3s linear; }

/* ============================================================
   light product sections
============================================================ */
.light { background: var(--cream); color: var(--ink); }
.light .section-head .lead { color: var(--muted-2); }
.light .eyebrow { color: var(--coral-strong); }
.light .eyebrow::before { background: var(--coral-strong); }

/* feature grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.card h3 { font-family: var(--font-display); font-size: 23px; margin: 22px 0 10px; color: var(--ink); }
.card p { color: var(--muted-2); font-size: 15.5px; line-height: 1.65; }
.card .tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--cream-2); color: var(--muted-2); }

/* kitchen display strip */
.kds { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.kds-ticket { flex: 1; min-width: 150px; background: var(--paper); border:1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 14px; padding: 16px; }
.kds-ticket .status { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kds-ticket.s1 { border-left-color: var(--amber); } .kds-ticket.s1 .status { color: #C77E12; }
.kds-ticket.s2 { border-left-color: var(--blue); }  .kds-ticket.s2 .status { color: var(--blue); }
.kds-ticket.s3 { border-left-color: var(--green); } .kds-ticket.s3 .status { color: var(--green); }
.kds-ticket .dish { margin-top: 8px; font-weight: 600; color: var(--ink); }
.kds-ticket .meta { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   features — bento grid with live CSS mockups
============================================================ */
.bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 22px; }
.bento .card { padding: 26px; display: flex; flex-direction: column; }
.b-pos { grid-column: 1; grid-row: 1 / span 2; }
.b-loyalty { grid-column: 2; grid-row: 1; }
.b-reports { grid-column: 3; grid-row: 1; }
.b-kds { grid-column: 2 / span 2; grid-row: 2; }
.b-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.b-head h3 { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin: 0; }
.b-sub { font-size: 13.5px; color: var(--muted); margin: 3px 0 0; }
.b-head .chip { width: 46px; height: 46px; font-size: 22px; flex: none; }

/* POS mockup */
.pos-ui { margin-top: auto; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.pos-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pos-tabs span { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--muted-2); border: 1px solid var(--line); }
.pos-tabs span.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pos-rows { display: flex; flex-direction: column; gap: 10px; }
.pos-row { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 10px; padding: 11px 13px; font-size: 14px; }
.pos-row .q { color: var(--coral-strong); font-weight: 700; }
.pos-row .n { color: var(--ink); flex: 1; }
.pos-row .p { color: var(--muted-2); font-weight: 600; }
.pos-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 4px; font-size: 14px; color: var(--muted-2); }
.pos-total b { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.pos-send { margin-top: 14px; width: 100%; border: none; cursor: default; background: var(--green); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 14px; padding: 13px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* loyalty mockup */
.coupon { display: flex; margin-top: auto; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.coupon-l { background: var(--coral); color: #fff; padding: 18px 18px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.coupon-off { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; }
.coupon-lbl { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.coupon-r { flex: 1; background: var(--paper); border: 1px solid var(--line); border-left: 2px dashed var(--coral-soft); padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.coupon-code { font-family: ui-monospace, monospace; font-weight: 700; color: var(--ink); font-size: 16px; letter-spacing: .04em; }
.coupon-note { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.pts { margin-top: 16px; }
.pts-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-2); margin-bottom: 8px; }
.pts-top b { color: var(--ink); }
.pts-bar { height: 8px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.pts-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; width: 0; transition: width 1.1s var(--ease) .2s; }
.b-loyalty.is-in .pts-bar i { width: 64%; }

/* reports mockup */
.rep { margin-top: auto; }
.rep-stat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rep-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink); }
.rep-delta { font-size: 13px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 4px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.chart span { flex: 1; background: linear-gradient(180deg,#FF8A6B,#E8553F); border-radius: 6px 6px 0 0; height: 0; transition: height .9s var(--ease); }
.b-reports.is-in .chart span { height: var(--h); }

/* kitchen display board */
.kds-board { margin-top: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.kticket { background: var(--cream); border: 1px solid var(--line); border-top: 3px solid var(--muted); border-radius: 14px; padding: 14px; }
.kticket.s1 { border-top-color: var(--amber); }
.kticket.s2 { border-top-color: var(--blue); }
.kticket.s3 { border-top-color: var(--green); }
.kt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kt-status { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.s1 .kt-status { color: #C77E12; } .s2 .kt-status { color: var(--blue); } .s3 .kt-status { color: var(--green); }
.kt-time { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.kt-table { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; }
.kticket ul { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.kticket li { font-size: 13px; color: var(--muted-2); }
.kt-bar { height: 6px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.kt-bar i { display: block; height: 100%; border-radius: 999px; }
.s1 .kt-bar i { background: var(--amber); animation: ktfill 3s ease-in-out infinite alternate; }
.s2 .kt-bar i { background: var(--blue); width: 100%; }
.s3 .kt-bar i { background: var(--green); width: 100%; }
@keyframes ktfill { from { width: 35%; } to { width: 80%; } }

/* split feature block (growth) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split + .split { margin-top: 110px; }
.split.rev .split-media { order: 2; }
.split-copy h3 { font-family: var(--font-display); font-size: clamp(26px,3vw,38px); margin: 16px 0 14px; color: var(--ink); }
.split-copy p { color: var(--muted-2); font-size: 17px; line-height: 1.75; }
.split-copy ul { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.split-copy li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--muted-2); }
.split-copy li i { color: var(--green); margin-top: 3px; }
.media-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; }

/* influencer video tiles */
.reels { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.reel { aspect-ratio: 9/16; border-radius: 16px; position: relative; overflow: hidden; background: #2b211c; display: grid; place-items: center; }
.reel.r1 { background: linear-gradient(160deg,#FF6F5E,#E8553F); }
.reel.r2 { background: linear-gradient(160deg,#2D6FF7,#1B4FCB); }
.reel.r3 { background: linear-gradient(160deg,#FFB23E,#E8853F); }
.reel i { font-size: 30px; color: rgba(255,255,255,.92); }
.reel .badge { position:absolute; bottom:10px; left:10px; font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,.3); padding:4px 9px; border-radius:999px; }

/* ===== influencer — Instagram-style post card ===== */
.split-media { display: flex; justify-content: center; }
.ig-card { position: relative; width: 100%; max-width: 384px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); }
.ig-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; }
.ig-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; background: linear-gradient(135deg,#FF8A6B,#E8553F); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.ig-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.ig-name { font-weight: 600; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.ig-name i { color: var(--blue); font-size: 15px; }
.ig-sub { font-size: 12px; color: var(--muted); }
.ig-dots { color: var(--muted-2); font-size: 20px; }
.ig-media { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(150deg,#FF8A6B 0%,#E8553F 55%,#C0341B 100%); display: grid; place-items: center; overflow: hidden; }
.ig-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 130%, rgba(0,0,0,.32), transparent 60%); }
.ig-play { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.65); display: grid; place-items: center; color: #fff; font-size: 28px; animation: igpulse 2.8s var(--ease) infinite; }
@keyframes igpulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
.ig-views { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.34); padding: 5px 11px; border-radius: 999px; }
.ig-views b { animation: vpulse 2.4s ease-in-out infinite; }
@keyframes vpulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.ig-tag { position: absolute; bottom: 12px; left: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: var(--coral-strong); background: #fff; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.3); }
.ig-actions { display: flex; align-items: center; gap: 16px; padding: 13px 16px 2px; font-size: 23px; color: var(--ink); }
.ig-actions .ig-save { margin-left: auto; }
.ig-actions span:first-child i { color: var(--coral-strong); }
.ig-likes { padding: 2px 16px; font-weight: 600; font-size: 14px; color: var(--ink); }
.ig-cap { padding: 4px 16px 18px; font-size: 14px; color: var(--muted-2); line-height: 1.5; }
.ig-cap b { color: var(--ink); }
.ig-chip { position: absolute; top: 70px; right: -12px; z-index: 5; display: flex; align-items: center; gap: 6px; background: #fff; color: var(--coral-strong); font-weight: 700; font-size: 13px; padding: 8px 13px; border-radius: 999px; box-shadow: var(--shadow-card); animation: floaty 4.6s var(--ease) infinite; }
.ig-chip i { color: var(--coral); }

/* ===== WhatsApp panel ===== */
.wa { width: 100%; max-width: 384px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line); background: #ECE5DD; }
.wa-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: #128C7E; color: #fff; }
.wa-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #0c6b5f; display: grid; place-items: center; font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.wa-hmeta { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.wa-name { font-weight: 600; font-size: 15px; }
.wa-status { font-size: 12px; color: rgba(255,255,255,.82); }
.wa-icons { display: flex; gap: 15px; font-size: 18px; color: rgba(255,255,255,.92); }
.wa-body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 9px; background: #ECE5DD; min-height: 320px; }
.wa-day { align-self: center; background: #fff; color: var(--muted-2); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 8px; margin-bottom: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.wa-msg { position: relative; max-width: 82%; padding: 8px 13px 19px; border-radius: 10px; font-size: 14px; line-height: 1.45; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.wa-msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.wa-msg.out { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 2px; }
.wa-time { position: absolute; right: 11px; bottom: 5px; font-size: 10.5px; color: #667781; display: flex; align-items: center; gap: 3px; }
.wa-time i { color: #34B7F1; font-size: 14px; }
.wa-stars { display: block; margin-top: 5px; color: #FFB23E; letter-spacing: 2px; font-size: 16px; }
.wa-msg.rate { padding-bottom: 8px; }
.wa-msg.rate .wa-time { position: static; justify-content: flex-end; margin-top: 5px; }
.wa-typing { align-self: flex-start; background: #fff; border-radius: 10px; border-top-left-radius: 2px; padding: 12px 14px; display: flex; gap: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.wa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa3a8; animation: wadot 1.2s infinite; }
.wa-typing span:nth-child(2) { animation-delay: .2s; }
.wa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes wadot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* whatsapp chat mock */
.chat { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.bubble.in { align-self: flex-start; background: var(--cream-2); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 4px; }
.stars { color: var(--amber); letter-spacing: 2px; }

/* stat band */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 70px; }
.stat-card { text-align: center; padding: 28px 16px; border-radius: var(--radius); background: var(--paper); border:1px solid var(--line); }
.stat-card .big { font-family: var(--font-display); font-weight: 700; font-size: 42px; color: var(--coral-strong); }
.stat-card .lbl { color: var(--muted-2); font-size: 14px; margin-top: 6px; }

/* rich metric cards (growth section) */
.metric { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 22px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.metric:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.metric::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.m-coral { --accent: #E8553F; --accent-soft: rgba(255,111,94,.14); }
.m-blue  { --accent: #2D6FF7; --accent-soft: rgba(45,111,247,.14); }
.m-amber { --accent: #C77E12; --accent-soft: rgba(255,178,62,.20); }
.m-green { --accent: #1BA94C; --accent-soft: rgba(27,169,76,.14); }
.metric-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.metric-val { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1; }
.metric-val .big { font-size: 46px; }
.metric-val .unit { font-size: 26px; color: var(--accent); }
.metric-lbl { font-size: 13.5px; color: var(--muted-2); margin-top: 9px; }
.metric-viz { margin-top: 20px; }
/* trend bars */
.viz-bars { display: flex; align-items: flex-end; gap: 6px; height: 36px; }
.viz-bars span { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; height: 0; opacity: .85; transition: height .8s var(--ease); }
.metric.is-in .viz-bars span { height: var(--h); }
/* reels tiles */
.viz-reels { display: flex; gap: 7px; height: 36px; }
.viz-reels span { width: 18px; border-radius: 5px; background: var(--accent); transform: scaleY(.5); transform-origin: bottom; }
.viz-reels span:nth-child(even) { opacity: .65; }
.metric.is-in .viz-reels span { animation: reelgrow .5s var(--ease) both; }
.metric.is-in .viz-reels span:nth-child(2) { animation-delay: .1s; }
.metric.is-in .viz-reels span:nth-child(3) { animation-delay: .2s; }
.metric.is-in .viz-reels span:nth-child(4) { animation-delay: .3s; }
@keyframes reelgrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.viz-reels span:nth-child(even) { opacity: 1; }
/* stars */
.viz-stars { display: flex; gap: 4px; font-size: 19px; color: #E89B23; }
.metric.is-in .viz-stars i { animation: spop .4s var(--ease) both; }
.metric.is-in .viz-stars i:nth-child(2) { animation-delay: .08s; }
.metric.is-in .viz-stars i:nth-child(3) { animation-delay: .16s; }
.metric.is-in .viz-stars i:nth-child(4) { animation-delay: .24s; }
.metric.is-in .viz-stars i:nth-child(5) { animation-delay: .32s; }
@keyframes spop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
/* speed bar */
.viz-speed { height: 8px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.viz-speed i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .8s var(--ease) .15s; }
.metric.is-in .viz-speed i { width: 100%; }

/* ============================================================
   Petpooja integration band
============================================================ */
.integrate { background: var(--cream-2); }
.integrate-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 48px; box-shadow: var(--shadow-card); }
.node { text-align: center; }
.node .logo { width: 92px; height: 92px; border-radius: 24px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0 auto 14px; }
.node .logo.w { background: var(--coral); color: #fff; }
.node .logo.p { background: #16110F; color: #fff; font-size: 14px; }
.node h4 { font-size: 17px; color: var(--ink); }
.node p { font-size: 14px; color: var(--muted); }
.connector { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--green); }
.connector .line { width: 90px; height: 2px; background: repeating-linear-gradient(90deg,var(--green) 0 8px, transparent 8px 14px); position: relative; }
.connector .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green); position: absolute; top: -4px; left: 0; animation: flow 2.2s linear infinite; }
@keyframes flow { from { left: 0; } to { left: 90px; } }

/* ===== integration — hub + amplify ===== */
.integ { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 44px; }
.integ-flow { display: flex; align-items: center; justify-content: center; gap: 12px; }
.integ-node { text-align: center; flex: none; width: 200px; }
.integ-logo { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; margin: 0 auto 14px; }
.integ-logo.pp { width: 150px; height: 70px; border-radius: 18px; background: #16110F; color: #fff; font-size: 18px; }
.integ-node h4 { font-size: 16px; color: var(--ink); }
.integ-node p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.integ-node.hub .hub-core { position: relative; width: 88px; height: 88px; border-radius: 24px; background: var(--coral); color: #fff; display: grid; place-items: center; font-size: 34px; margin: 0 auto 14px; box-shadow: 0 16px 40px -10px rgba(255,111,94,.7); }
.integ-node.hub .hub-core::after { content: ""; position: absolute; inset: -8px; border-radius: 30px; border: 2px solid var(--coral); opacity: .5; animation: hubpulse 2.6s ease-out infinite; }
@keyframes hubpulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
.integ-pipe { flex: 1; max-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.pipe-label { font-size: 12px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 6px; }
.pipe-track { position: relative; width: 100%; height: 4px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--coral-soft) 0 6px, transparent 6px 12px); }
.pipe-track .dot { position: absolute; top: 50%; margin-top: -4.5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(27,169,76,.18); animation: flowx 2.4s linear infinite; }
.pipe-track .dot:nth-child(2) { animation-delay: .8s; }
.pipe-track .dot:nth-child(3) { animation-delay: 1.6s; }
@keyframes flowx { from { left: 0; } to { left: 100%; } }
@keyframes flowy { from { top: 0; } to { top: 100%; } }
.pipe-tags { display: flex; gap: 6px; }
.pipe-tags span { font-size: 11px; font-weight: 600; color: var(--muted-2); background: var(--cream); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.amplify { margin-top: 40px; padding-top: 32px; border-top: 1px dashed var(--line); text-align: center; }
.amplify-lead { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-strong); margin-bottom: 18px; }
.amplify-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.amp { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--cream); border: 1px solid var(--line); padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-card); }
.amp i { color: var(--coral-strong); font-size: 18px; }
.integ.is-in .amp { animation: amppop .5s var(--ease) both; }
.amp.d0 { animation-delay: .05s; } .amp.d1 { animation-delay: .15s; } .amp.d2 { animation-delay: .25s; } .amp.d3 { animation-delay: .35s; }
@keyframes amppop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   pricing teaser
============================================================ */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
.price-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.price-card.feature { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.03); }
.price-card.feature p, .price-card.feature .price small { color: #C9B8AE; }
.price-card .plan { font-family: var(--font-display); font-size: 20px; }
.price-card .price { font-family: var(--font-display); font-size: 44px; font-weight: 700; margin: 14px 0 4px; }
.price-card .price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.price-card ul { list-style: none; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 12px; }
.price-card li { font-size: 14.5px; display: flex; gap: 10px; align-items: flex-start; }
.price-card li i { color: var(--green); margin-top: 2px; }
.price-card.feature li i { color: #4ade80; }
.price-card .btn { margin-top: auto; justify-content: center; }
.badge-pop { align-self: flex-start; font-size: 12px; font-weight: 700; background: var(--coral); color:#fff; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }

/* about teaser */
.about-band { background: var(--cream); text-align: center; }
.about-band h2 { font-size: clamp(30px,4vw,52px); max-width: 880px; margin: 0 auto; color: var(--ink); }
.about-band .sub { max-width: 620px; margin: 22px auto 0; color: var(--muted-2); font-size: 18px; }

/* ============================================================
   final CTA + footer (dark)
============================================================ */
.cta-final { background: linear-gradient(135deg,#1A1411,#16110F); color:#fff; text-align:center; overflow:hidden; position:relative; }
.cta-final::after { content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 50% 0%, rgba(255,111,94,.22), transparent 70%); pointer-events:none; }
.cta-final h2 { font-size: clamp(34px,5vw,68px); position:relative; }
.cta-final p { max-width: 540px; margin: 22px auto 36px; color:#C9B8AE; font-size:18px; position:relative; }
.cta-final .btn { position: relative; }

.footer { background: #120D0B; color:#C9B8AE; padding: 70px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.footer h5 { color:#fff; font-size:14px; letter-spacing:.04em; margin-bottom:16px; }
.footer a { display:block; color:#C9B8AE; font-size:14.5px; padding:6px 0; opacity:.85; }
.footer a:hover { opacity:1; color:#fff; }
.footer .brand { color:#fff; margin-bottom:14px; }
.footer .tagline { font-size:14.5px; max-width:280px; line-height:1.6; }
.footer-bottom { margin-top: 50px; padding-top: 26px; border-top:1px solid var(--line-on-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; opacity:.7; }
.footer-bottom a { display: inline; padding: 0; }

/* ============================================================
   founder story
============================================================ */
.journey { position: relative; max-width: 720px; margin: 0 auto; }
.journey::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 44px; width: 2px; background: var(--line); }
.journey-fill { position: absolute; left: 17px; top: 8px; width: 2px; height: calc(100% - 52px); background: var(--coral); transform: scaleY(0); transform-origin: top; }
.j-item { position: relative; padding: 0 0 46px 56px; }
.j-item:last-child { padding-bottom: 0; }
.j-dot { position: absolute; left: 8px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); border: 2px solid var(--coral); z-index: 1; }
.j-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--coral); }
.j-step { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-strong); font-weight: 600; }
.j-item h3 { font-family: var(--font-display); font-size: 23px; color: var(--ink); margin: 6px 0 10px; }
.j-item p { color: var(--muted-2); font-size: 16px; line-height: 1.75; }

.pquote { max-width: 760px; margin: 0 auto; text-align: center; }
.pquote .qmark { font-family: var(--font-display); font-size: 64px; line-height: .6; color: var(--coral); }
.pquote blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(23px, 3vw, 33px); line-height: 1.32; color: var(--ink); letter-spacing: -0.01em; margin-top: 12px; }
.pquote .who { margin-top: 20px; color: var(--muted); font-size: 14px; }

.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; }
.founder { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-card); text-align: center; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.founder:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.founder-ava { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 32px; color: #fff; }
.founder.f1 .founder-ava { background: linear-gradient(135deg,#FF8A6B,#E8553F); }
.founder.f2 .founder-ava { background: linear-gradient(135deg,#2D6FF7,#1B4FCB); }
.founder h3 { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.founder .role { color: var(--coral-strong); font-weight: 600; font-size: 14px; margin: 4px 0 14px; }
.founder p { color: var(--muted-2); font-size: 15px; line-height: 1.7; }
.founder-social { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.founder-social a { width: 38px; height: 38px; border-radius: 11px; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted-2); font-size: 18px; transition: background .2s, color .2s, border-color .2s; }
.founder-social a:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
@media (max-width: 600px) { .founders { grid-template-columns: 1fr; } }
.founders.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
.founder.f3 .founder-ava { background: linear-gradient(135deg,#1BA94C,#0F7A37); }
@media (max-width: 860px) { .founders.cols-3 { grid-template-columns: 1fr; max-width: 460px; } }

/* ===== gamified team — RPG player cards ===== */
.squad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1000px; margin: 0 auto; }
.pcard { position: relative; border-radius: 22px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.pcard:hover { transform: translateY(-10px); box-shadow: var(--shadow-soft); }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(125deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 58%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.pcard:hover::after { transform: translateX(120%); }
.pc-coral { --accent: #FF6F5E; --accent2: #E8553F; --accent-ink: #B23A22; --accent-soft: rgba(255,111,94,.14); }
.pc-blue  { --accent: #4C8DFF; --accent2: #1B4FCB; --accent-ink: #185FA5; --accent-soft: rgba(45,111,247,.14); }
.pc-green { --accent: #2BB85D; --accent2: #0F7A37; --accent-ink: #15863B; --accent-soft: rgba(27,169,76,.14); }
.pcard-top { position: relative; height: 130px; padding: 16px 18px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; justify-content: space-between; align-items: flex-start; overflow: hidden; }
.pcard-top::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 12px 12px; opacity: .5; }
.pcard-lvl { position: relative; background: rgba(0,0,0,.22); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; padding: 7px 11px; border-radius: 11px; text-align: center; }
.pcard-lvl b { font-size: 20px; display: block; line-height: 1; }
.pcard-rarity { position: relative; text-align: right; color: #fff; }
.pcard-rarity .tier { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.pcard-rarity .stars { display: block; font-size: 14px; letter-spacing: 2px; color: #FFE08A; }
.pcard-ava { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--paper); background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff; z-index: 2; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); }
.pcard-body { padding: 54px 22px 24px; text-align: center; }
.pcard-body h3 { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.pcard-class { display: inline-block; margin: 7px 0 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 13px; border-radius: 999px; }
.pstat { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pstat .pl { width: 84px; text-align: left; font-size: 11px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.pstat .pbar { flex: 1; height: 7px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.pstat .pbar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 1s var(--ease); }
.pcard.is-in .pstat .pbar i { width: var(--v); }
.pstat .pv { width: 26px; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcard-ability { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted-2); line-height: 1.5; }
.pcard-ability .lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.pcard-social { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }
.pcard-social a { width: 36px; height: 36px; border-radius: 10px; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted-2); font-size: 17px; transition: background .2s, color .2s, border-color .2s; }
.pcard-social a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 860px) { .squad { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   legal pages
============================================================ */
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-updated { color: var(--muted); font-size: 14px; margin-bottom: 30px; }
.legal-note { display: flex; align-items: flex-start; gap: 12px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; color: var(--muted-2); font-size: 15px; line-height: 1.6; margin-bottom: 36px; }
.legal-note i { color: var(--coral-strong); font-size: 20px; margin-top: 1px; flex: none; }
.legal-body h2 { font-size: 23px; color: var(--ink); margin: 38px 0 14px; }
.legal-body h3 { font-size: 18px; color: var(--ink); margin: 24px 0 10px; }
.legal-body p, .legal-body li { color: var(--muted-2); font-size: 16px; line-height: 1.8; }
.legal-body ul, .legal-body ol { margin: 12px 0 12px 22px; }
.legal-body a { color: var(--coral-strong); text-decoration: underline; }
.legal-skeleton { margin-top: 8px; }
.legal-skeleton .sk { display: block; height: 14px; border-radius: 6px; background: var(--cream-2); margin: 12px 0; }
.legal-skeleton .sk-h { height: 20px; width: 42%; background: #E7D9CE; margin: 34px 0 16px; }
.legal-skeleton .sk.w90 { width: 90%; } .legal-skeleton .sk.w70 { width: 70%; } .legal-skeleton .sk.w80 { width: 80%; }

/* legal layout with sticky table of contents */
.legal-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; max-width: 1120px; margin: 0 auto; }
.legal-toc { position: sticky; top: 104px; }
.legal-toc h5 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.legal-toc ol { position: relative; list-style: none; display: flex; flex-direction: column; gap: 1px; max-height: 74vh; overflow: auto; padding-right: 6px; scroll-behavior: smooth; }
.legal-toc a { display: block; font-size: 13px; color: var(--muted-2); padding: 7px 12px; border-radius: 8px; line-height: 1.35; box-shadow: inset 0 0 0 var(--coral); transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), padding-left .3s var(--ease); }
.legal-toc a:hover { background: var(--cream-2); color: var(--ink); }
.legal-toc a.active { background: var(--cream-2); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--coral); padding-left: 16px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.legal-fact { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 18px; min-width: 150px; }
.legal-fact .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-fact .v { font-size: 14.5px; color: var(--ink); font-weight: 600; margin-top: 3px; }
.legal-fact .v a { color: var(--coral-strong); text-decoration: none; }
.legal-body h2 { scroll-margin-top: 100px; display: flex; gap: 10px; align-items: baseline; }
.legal-body h2 .num { color: var(--coral-strong); font-size: 15px; font-weight: 600; font-family: var(--font-sans); flex: none; }
.legal-end { margin-top: 36px; padding: 22px 24px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--muted-2); }
@media (max-width: 980px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { display: none; }
}

/* ============================================================
   escalation matrix
============================================================ */
.esc-wrap { max-width: 860px; margin: 0 auto; }
.esc-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.esc-ladder { display: flex; flex-direction: column; gap: 18px; }
.esc-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.esc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.esc-badge { width: 58px; height: 58px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; text-align: center; flex: none; }
.esc-badge b { font-size: 22px; display: block; }
.esc-main h3 { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin-bottom: 12px; }
.esc-scope { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.esc-scope span { font-size: 12.5px; color: var(--muted-2); background: var(--cream); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.esc-contact { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; padding-top: 16px; border-top: 1px solid var(--line); }
.esc-contact .ec { font-size: 14.5px; color: var(--ink); }
.esc-contact .ec .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.esc-contact .ec a { color: var(--coral-strong); }
.esc-sla { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 9px 15px; border-radius: 999px; white-space: nowrap; }
.esc-l1 { --accent: #1BA94C; --accent-soft: rgba(27,169,76,.14); }
.esc-l2 { --accent: #2D6FF7; --accent-soft: rgba(45,111,247,.14); }
.esc-l3 { --accent: #C77E12; --accent-soft: rgba(255,178,62,.20); }
.esc-l4 { --accent: #E8553F; --accent-soft: rgba(255,111,94,.14); }
.esc-special { margin-top: 18px; }
.esc-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-card); }
.esc-box.critical { background: #2B1512; border-color: rgba(255,111,94,.4); }
.esc-box.critical h3, .esc-box.critical p, .esc-box.critical a { color: #FFE7E0; }
.esc-box .eb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.esc-box .eb-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: none; }
.esc-box.critical .eb-ic { background: rgba(255,111,94,.22); color: #FF9684; }
.esc-box.reg .eb-ic { background: rgba(45,111,247,.14); color: var(--blue); }
.esc-box h3 { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.esc-box p { font-size: 14px; color: var(--muted-2); line-height: 1.6; }
.esc-box .eb-mail { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14.5px; color: var(--coral-strong); }
.esc-box.critical .eb-mail { color: #FFB3A6; }
.esc-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: rgba(255,111,94,.2); color: #FFB3A6; padding: 4px 10px; border-radius: 8px; margin-bottom: 10px; }
.esc-hours { display: flex; align-items: center; gap: 14px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-top: 18px; }
.esc-hours i { font-size: 24px; color: var(--coral-strong); }
.esc-hours .k { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.esc-hours .v { font-size: 15px; color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .esc-card { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .esc-sla { margin-left: 0; }
  .esc-special { grid-template-columns: 1fr; }
}

/* ============================================================
   inner page hero (pricing / about) — dark band
============================================================ */
.page-hero { background: linear-gradient(180deg,#1A1411 0%, #16110F 100%); color:#F4EBE5; padding: 170px 0 90px; text-align: center; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(55% 60% at 50% 0%, rgba(255,111,94,.20), transparent 70%); pointer-events:none; }
.page-hero h1 { font-size: clamp(40px,6vw,76px); color:#FFF6F1; position:relative; }
.page-hero h1 .accent { background: linear-gradient(120deg,#FF8A6B,#E8553F); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero .lead { max-width: 560px; margin: 22px auto 0; color:#D9C9C0; font-size:18px; position:relative; }

/* comparison table */
.compare { width:100%; border-collapse: collapse; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.compare th, .compare td { padding: 18px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: 17px; color: var(--ink); background: var(--cream); }
.compare thead th.hot { color: var(--coral-strong); }
.compare td.feat { color: var(--muted-2); font-weight: 500; }
.compare td.center, .compare th.center { text-align: center; }
.compare td i.yes { color: var(--green); font-size: 19px; }
.compare td i.no { color: var(--line); font-size: 19px; }
.compare tr:last-child td { border-bottom: none; }
.compare .col-hot { background: rgba(255,111,94,.05); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding: 22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.faq-q i { transition: transform .3s var(--ease); color: var(--coral-strong); flex:none; }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding: 0 0 22px; color: var(--muted-2); font-size: 16px; line-height: 1.7; }

/* ============================================================
   responsive
============================================================ */
@media (max-width: 980px) {
  .grid-3, .price-grid, .reels { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .split, .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  /* features bento → single column */
  .bento { grid-template-columns: 1fr; }
  .b-pos, .b-loyalty, .b-reports, .b-kds { grid-column: auto; grid-row: auto; }
  /* section 02 — purpose-built mobile layout: phone on top, steps below */
  .flow { padding-bottom: 80px; }
  .flow .section-head { padding-top: 96px; padding-bottom: 8px; }
  .flow-stage { display: flex; flex-direction: column; align-items: center; gap: 32px; min-height: 0; }
  .flow-phone-col { order: -1; width: 100%; }
  .flow-steps { width: 100%; max-width: 480px; gap: 12px; }
  .flow-step { opacity: 1; transform: none; }
  .flow-step.active { transform: none; }
  .split.rev .split-media { order: 0; }
  .integrate-card { grid-template-columns: 1fr; gap: 28px; }
  .connector .line { width: 2px; height: 60px; background: repeating-linear-gradient(180deg,var(--green) 0 8px,transparent 8px 14px); }
  .connector .pulse { animation: none; }
  .price-card.feature { transform: none; }
  /* comparison table: horizontal scroll with a sticky feature column */
  .compare { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
  .compare th, .compare td { white-space: nowrap; }
  .compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; min-width: 180px; }
  .compare thead th:first-child { background: var(--cream); }
  .compare tbody td:first-child { background: var(--paper); }
}

/* footer + tablets */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .page-hero { padding: 140px 0 70px; }
  /* integration → stacked, vertical sync pipe */
  .integ { padding: 30px 22px; }
  .integ-flow { flex-direction: column; gap: 6px; }
  .integ-node { width: auto; }
  .integ-pipe { max-width: none; width: auto; padding: 8px 0; }
  .pipe-track { width: 4px; height: 84px; background: repeating-linear-gradient(180deg, var(--coral-soft) 0 6px, transparent 6px 12px); }
  .pipe-track .dot { left: 50%; margin-left: -4.5px; top: 0; margin-top: 0; animation-name: flowy; }
}

@media (max-width: 600px) {
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 44px; }
  .grid-3, .price-grid, .reels, .stats { grid-template-columns: 1fr; }
  .phone { width: 250px; height: 520px; }
  .card, .price-card, .media-box { padding: 24px; }
  .split + .split { margin-top: 72px; }
  .split-copy h3 { font-size: 26px; }
  .integrate-card { padding: 30px 24px; }
  .cta-final .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .section { padding: 60px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .reels { grid-template-columns: 1fr 1fr; }
  .flow-step { padding: 18px; gap: 14px; }
  .flow-step h3 { font-size: 19px; }
  .price-card .price { font-size: 38px; }
  .kds-ticket { min-width: 100%; }
  .ig-chip { right: 8px; top: 60px; }
  .wa-body { min-height: 280px; }
  .kds-board { grid-template-columns: 1fr; }
}