/* LumaBeautyCore AI marketing site.
   A white site with black sections for rhythm. Portal screenshots, the concierge
   chat and the specials cards are always black, in the Luma staff portal's own
   language: near-black panels, pill badges, heavy uppercase headlines with italic
   serif accents and corner glows, recolored to the Luma brand coral.

   Theme tokens: light by default; anything in .dark (sections) or the portal-shot
   elements below switches to the dark set. Text colors meet WCAG AA in both. */

:root {
  --bg: #ffffff;
  --bg-alt: #faf6f1;
  --panel: #ffffff;
  --panel-2: #fbf8f5;
  --line: rgba(14, 20, 36, 0.09);
  --line-2: rgba(14, 20, 36, 0.16);
  --hover: rgba(14, 20, 36, 0.04);
  --text: #0e1424;                  /* Luma navy (logo) */
  --muted: rgba(14, 20, 36, 0.74);
  --faint: rgba(14, 20, 36, 0.6);
  --gold: #85663a;                  /* eyebrows, 5.0:1 on white */
  --icon: #c9584a;                  /* coral line icons on white */
  --accent-ink: #b84d40;            /* coral text on white, 4.8:1 */
  --glow-grad: linear-gradient(120deg, #e06d5b 0%, #d4566a 40%, #c2456a 65%, #e06d5b 100%);
  --glow-shadow: rgba(224, 109, 91, 0.28);
  --ok: #15803d;
  --check: #16a34a;
  --warn: #a16207;
  --shadow: 0 40px 90px -45px rgba(14, 20, 36, 0.4);
  --shadow-sm: 0 18px 40px -26px rgba(14, 20, 36, 0.35);

  --coral: #f7a396;                 /* Luma brand coral (logo): fills and glows */
  --coral-hi: #ffb6a8;
  --rose: #ff7e95;
  --peach: #ffc9a8;
  --navy: #0e1424;
  --brand-grad: linear-gradient(120deg, #ffd3b6 0%, #f7a396 38%, #ff8a9e 70%, #f7a396 100%);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius: 22px;
}

.dark, .ui, .chat, .special, .float-card {
  --bg: #07070a;
  --bg-alt: #0b0a0e;
  --panel: #121116;
  --panel-2: #18161d;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --hover: rgba(255, 255, 255, 0.05);
  --text: #f6f1ec;
  --muted: rgba(246, 241, 236, 0.74);
  --faint: rgba(246, 241, 236, 0.58);
  --gold: #d6c596;
  --icon: #f7a396;
  --accent-ink: #ffb6a8;
  --glow-grad: var(--brand-grad);
  --glow-shadow: rgba(247, 163, 150, 0.5);
  --ok: #4ade80;
  --check: #22c55e;
  --warn: #fbbf24;
  --shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9);
  --shadow-sm: 0 20px 50px -30px rgba(0, 0, 0, 0.9);
  color: var(--text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(247, 163, 150, 0.4); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
#main:focus { outline: none; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 18px; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 800; text-decoration: none; transition: top 0.2s;
}
.skip:focus { top: 16px; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
/* Accent words: Urbanist, the geometric style of the Luma wordmark, in lowercase coral,
   the way 'BeautyCore' sits inside 'LumaBeautyCore'. */
.accent { font-family: 'Urbanist', 'Manrope', system-ui, sans-serif; font-style: normal; font-weight: 800; text-transform: none; letter-spacing: -0.04em; }
.glow-text {
  background: var(--glow-grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px var(--glow-shadow));
  animation: shimmer 7s ease-in-out infinite;
  padding-right: 0.02em;
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.h2 {
  margin: 0; font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; line-height: 0.98;
  letter-spacing: -0.045em; word-spacing: 0.1em; text-transform: uppercase; text-wrap: balance;
}
.h2 .accent { font-size: 1.04em; }
.lead { margin: 22px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: ping 2s infinite; display: inline-block; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(247, 163, 150, 0.7); } 80%, 100% { box-shadow: 0 0 0 12px rgba(247, 163, 150, 0); } }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.btn .arrow { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--coral); color: #1a0c0a; box-shadow: 0 12px 32px -12px rgba(232, 120, 104, 0.8); }
.btn-primary:hover { background: var(--coral-hi); transform: translateY(-2px); box-shadow: 0 20px 50px -14px rgba(232, 120, 104, 0.95), 0 0 0 6px rgba(247, 163, 150, 0.18); }
.btn-primary::after { /* shine sweep */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: rgba(255, 255, 255, 0.6); border-color: var(--line-2); color: var(--text); backdrop-filter: blur(10px); }
.dark .btn-ghost { background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover { border-color: rgba(232, 120, 104, 0.6); background: rgba(247, 163, 150, 0.12); transform: translateY(-2px); }
.btn-lg { height: 56px; padding: 0 30px; font-size: 13px; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 11.5px; }
.btn-xs { height: 34px; padding: 0 14px; font-size: 10.5px; }

/* ---------- Header (light glass) ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); box-shadow: 0 10px 40px -30px rgba(14, 20, 36, 0.4); }
.head-row { display: flex; align-items: center; gap: 28px; height: 78px; }
.brand img { height: 32px; width: auto; }
.main-nav { display: flex; gap: 6px; margin-left: auto; }
.main-nav a { padding: 9px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; transition: color 0.2s, background 0.2s; }
.main-nav a:hover { color: var(--text); background: rgba(247, 163, 150, 0.14); }
.menu-btn { display: none; }

/* ---------- Hero: warm front-desk photo, copy on the left, black portal shot below ---------- */
.hero { position: relative; padding: 0 0 120px; overflow: hidden; isolation: isolate; background: var(--bg); }
.hero-photo { position: absolute; inset: 0 0 auto 0; height: 1060px; z-index: -1; pointer-events: none; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 32%; }
/* Warm cream fade behind the copy on the left; the receptionist stays clear on the right.
   The bottom melts into white where the portal shot overlaps. */
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  /* Layers, top first: a light wash so the menu reads over the photo, the fade to
     pure white (on top, so the photo's bottom edge meets the page with no seam),
     then the cream fade behind the copy. */
  background:
    linear-gradient(180deg, rgba(252, 248, 243, 0.6) 0, rgba(252, 248, 243, 0) 130px),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.75) 80%, #fff 96%),
    linear-gradient(90deg, rgba(252, 248, 243, 0.97) 0%, rgba(252, 248, 243, 0.92) 30%, rgba(252, 248, 243, 0.62) 47%, rgba(252, 248, 243, 0.1) 64%, rgba(252, 248, 243, 0) 78%);
}
.aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.o1 { width: 640px; height: 640px; top: -240px; right: -140px; background: radial-gradient(circle, rgba(247, 163, 150, 0.55), transparent 65%); animation: drift1 18s ease-in-out infinite; }
.o2 { width: 540px; height: 540px; top: 160px; left: -240px; background: radial-gradient(circle, rgba(255, 126, 149, 0.28), transparent 65%); animation: drift2 22s ease-in-out infinite; }
.o3 { width: 780px; height: 440px; bottom: -120px; left: 28%; background: radial-gradient(circle, rgba(255, 201, 168, 0.5), transparent 65%); animation: drift3 26s ease-in-out infinite; }
.dark .orb { mix-blend-mode: screen; opacity: 0.6; }
@keyframes drift1 { 50% { transform: translate(-80px, 60px) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate(90px, -40px) scale(1.15); } }
@keyframes drift3 { 50% { transform: translate(-120px, -50px) scale(0.92); } }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-copy { align-self: flex-start; max-width: 660px; padding-top: 168px; text-align: left; }
.hero-title {
  margin: 0; font-size: clamp(46px, 6.6vw, 96px); font-weight: 800; line-height: 0.92;
  letter-spacing: -0.055em; word-spacing: 0.14em; text-transform: uppercase; text-wrap: balance;
}
.hero-title .accent { font-size: 1.04em; }
.hero-lead { margin: 26px 0 0; max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin-top: 36px; }
.trust { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 26px; }
.trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.trust svg { width: 18px; height: 18px; color: var(--icon); }

.hero-stage { position: relative; width: 100%; max-width: 1120px; margin-top: 110px; perspective: 1600px; }
.stage-glow {
  position: absolute; inset: 6% 4% -8%; z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(247, 163, 150, 0.75), rgba(255, 126, 149, 0.25) 45%, transparent 72%);
  filter: blur(60px); animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.tilt { transform: rotateX(14deg) scale(0.96); transform-origin: 50% 0; transition: transform 1.4s var(--ease); }
.hero-stage.in .tilt { transform: rotateX(0deg) scale(1); }

/* ---------- Portal shots (always black) ---------- */
.ui {
  position: relative; text-align: left; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 120px -40px rgba(14, 20, 36, 0.55), 0 0 0 1px rgba(14, 20, 36, 0.4), 0 0 90px -30px rgba(247, 163, 150, 0.7);
  font-size: 13px;
}
.ui::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 100% 0%, rgba(247, 163, 150, 0.16), transparent 70%);
}
.ui-bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.ui-bar > span { width: 11px; height: 11px; border-radius: 50%; }
.ui-bar > span:first-child { background: #ff6b6b; opacity: 0.75; }
.ui-bar > span:nth-child(2) { background: #fbbf24; opacity: 0.75; }
.ui-bar > span:nth-child(3) { background: #4ade80; opacity: 0.75; }
.ui-bar b { margin-left: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.chip-sample { margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border: 1px dashed rgba(214, 197, 150, 0.7); border-radius: 999px; padding: 4px 10px; }
.ui-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 440px; }
.ui-side { padding: 22px 14px; border-right: 1px solid var(--line); background: radial-gradient(80% 50% at 0% 0%, rgba(247, 163, 150, 0.12), transparent 70%), rgba(0, 0, 0, 0.25); }
.ui-side img { height: 20px; width: auto; margin: 0 8px 24px; }
.ui-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ui-side li { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; color: var(--faint); font-weight: 600; font-size: 12.5px; }
.ui-side li i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; opacity: 0.8; }
.ui-side li em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; color: #1a0c0a; background: var(--coral); border-radius: 999px; padding: 1px 7px; }
.ui-side li.on { color: var(--text); background: linear-gradient(90deg, rgba(247, 163, 150, 0.24), rgba(247, 163, 150, 0.03)); }
.ui-side li.on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--coral); box-shadow: 0 0 12px var(--coral); }
.ui-side li.on i { color: var(--coral); }
.ui-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-title { display: flex; flex-direction: column; gap: 4px; }
.ui-title small { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.ui-title strong { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; text-transform: uppercase; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.kpi span { position: relative; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.kpi b { position: relative; font-size: 26px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi em, .up { position: relative; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ok); }
.kpi.hot { border-color: rgba(247, 163, 150, 0.35); }
.kpi.hot::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 100% 0%, rgba(247, 163, 150, 0.3), transparent 70%); animation: breathe 4s ease-in-out infinite; }
.ui-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.panel { position: relative; padding: 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.ph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ph b { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.ph small { font-size: 11px; color: var(--faint); }
.bars { display: flex; align-items: flex-end; gap: 9px; height: 150px; padding-bottom: 20px; }
.bars span { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 4px 4px; background: rgba(255, 255, 255, 0.11); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.bars span.hot { background: linear-gradient(180deg, var(--coral-hi), #e7766a); box-shadow: 0 0 28px -4px rgba(247, 163, 150, 0.8); }
.bars i { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-style: normal; font-size: 10px; color: var(--faint); }
.in .bars span { transform: scaleY(1); }
.in .bars span:nth-child(2) { transition-delay: 0.08s; } .in .bars span:nth-child(3) { transition-delay: 0.16s; }
.in .bars span:nth-child(4) { transition-delay: 0.24s; } .in .bars span:nth-child(5) { transition-delay: 0.32s; }
.in .bars span:nth-child(6) { transition-delay: 0.4s; } .in .bars span:nth-child(7) { transition-delay: 0.48s; }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mini-list li { display: flex; align-items: center; gap: 10px; }
.mini-list li div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mini-list b { font-size: 12.5px; }
.mini-list small { font-size: 11px; color: var(--faint); }
.av { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; font-weight: 800; color: #fff; }
.a1 { background: linear-gradient(135deg, #f7a396, #b5574d); }
.a2 { background: linear-gradient(135deg, #c9b98a, #7a6a3f); }
.a3 { background: linear-gradient(135deg, #ff9fb3, #a8405a); }
.a4 { background: linear-gradient(135deg, #9fb6ff, #4b5a9e); }
.a5 { background: linear-gradient(135deg, #8de0c0, #2f7d62); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: var(--hover); color: var(--muted); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.pink { color: var(--coral-hi); background: rgba(247, 163, 150, 0.14); }
.pill.ok { color: var(--ok); background: rgba(74, 222, 128, 0.12); }
.pill.warn { color: var(--warn); background: rgba(251, 191, 36, 0.12); }
.pill.gold { color: var(--gold); background: rgba(214, 197, 150, 0.14); }
.pill.muted { color: var(--faint); }

.float-card {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  border-radius: 18px; text-align: left; background: rgba(18, 17, 22, 0.88); border: 1px solid var(--line-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -20px rgba(14, 20, 36, 0.6), 0 0 40px -12px rgba(247, 163, 150, 0.55);
  animation: float 6s ease-in-out infinite;
}
.float-card div { display: flex; flex-direction: column; line-height: 1.3; }
.float-card b { font-size: 13px; }
.float-card small { font-size: 11.5px; color: var(--faint); }
.fc-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(247, 163, 150, 0.16); color: var(--coral); font-size: 17px; }
.fc-ic svg { width: 18px; height: 18px; }
.fc1 { left: -34px; top: 32%; }
.fc2 { right: -30px; bottom: 16%; animation-delay: -3s; }
.fc3 { left: -30px; bottom: -64px; animation-delay: -2s; }
.fc4 { right: -22px; top: -22px; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Sections ---------- */
.section { position: relative; padding: 130px 0; background: var(--bg); overflow: hidden; isolation: isolate; }
.section.alt { background: var(--bg-alt); }
.dark.section, .dark.feature { background: var(--bg); }
.sec-head { max-width: 860px; margin-bottom: 64px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }

/* Spotlight that follows the cursor (set by JS via --mx/--my) */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(247, 163, 150, 0.2), transparent 60%);
}
.spot:hover::after { opacity: 1; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile {
  padding: 30px 26px 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), border-color 0.45s, box-shadow 0.45s;
}
.tile:hover { transform: translateY(-6px); border-color: rgba(232, 120, 104, 0.45); box-shadow: 0 30px 70px -30px rgba(232, 120, 104, 0.55); }
.t-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(247, 163, 150, 0.16); border: 1px solid rgba(232, 120, 104, 0.25); color: var(--icon); box-shadow: 0 0 30px -8px rgba(247, 163, 150, 0.7); }
.t-ic svg { width: 24px; height: 24px; }
.tile h3, .sec-card h3, .step h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.tile p, .sec-card p, .step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- Big feature sections ---------- */
.feature { position: relative; padding: 140px 0; overflow: hidden; isolation: isolate; background: var(--bg); }
.feature-glow { position: absolute; z-index: -1; width: 900px; height: 900px; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.g-left { left: -380px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(247, 163, 150, 0.3), transparent 62%); }
.g-right { right: -380px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(255, 126, 149, 0.22), transparent 62%); }
.g-center { left: 60%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(247, 163, 150, 0.3), transparent 60%); }
.dark .g-left { background: radial-gradient(circle, rgba(247, 163, 150, 0.22), transparent 62%); }
.dark .g-right { background: radial-gradient(circle, rgba(255, 126, 149, 0.18), transparent 62%); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 80px; }
.feature-grid.reverse .feature-copy { order: 2; }
.feature-copy .h2 { font-size: clamp(34px, 4.4vw, 60px); }
.checks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { position: relative; padding-left: 36px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(247, 163, 150, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23b84d40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 16px -4px rgba(247, 163, 150, 0.8);
}
.dark .checks li::before { background-color: rgba(247, 163, 150, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23f7a396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.feature-visual { position: relative; min-width: 0; }
.ui-wide { font-size: 13.5px; }
.ui-pad { padding: 22px; position: relative; overflow-x: auto; }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--faint); border: 1px solid var(--line); }
.tabs span em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.tabs span.on { color: #1a0c0a; background: var(--coral); border-color: var(--coral); box-shadow: 0 0 22px -6px rgba(247, 163, 150, 0.9); }
.tabs span.on em { color: #1a0c0a; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); padding: 0 10px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tbl .r { text-align: right; color: var(--faint); }
.src { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.src::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: currentColor; }
.src.g { color: #9ec5ff; } .src.ig { color: #ff9fc0; } .src.tt { color: #8de8e0; } .src.ai { color: var(--coral); } .src.qr { color: var(--gold); }

.pay-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pay-top small, .sub-kpis small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.big { display: block; margin: 6px 0 4px; font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.secure { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--coral); background: rgba(247, 163, 150, 0.12); border: 1px solid rgba(247, 163, 150, 0.3); }
.secure svg { width: 14px; height: 14px; }
.spark { height: 74px; margin: 14px -22px 6px; }
.spark svg, .growth svg { width: 100%; height: 100%; }
.spark .line, .growth .draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s var(--ease) 0.3s; filter: drop-shadow(0 0 8px rgba(247, 163, 150, 0.8)); }
.spark .area { opacity: 0; transition: opacity 1.2s ease 1s; }
.in .spark .line, .in .growth .draw { stroke-dashoffset: 0; }
.in .spark .area { opacity: 1; }
.pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pay-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.pay-list li div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pay-list small { color: var(--faint); font-size: 11.5px; }
.pay-list .amt { font-variant-numeric: tabular-nums; }
.pi { flex: none; display: grid; place-items: center; width: 44px; height: 30px; border-radius: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pi.dep { background: rgba(247, 163, 150, 0.16); color: var(--coral-hi); }
.pi.bill { background: rgba(158, 197, 255, 0.14); color: #9ec5ff; }
.pi.gift { background: rgba(214, 197, 150, 0.16); color: var(--gold); }
.pi.pkg { background: rgba(141, 232, 224, 0.13); color: #8de8e0; }

.specials { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.special {
  padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -40px rgba(14, 20, 36, 0.6), 0 0 60px -30px rgba(247, 163, 150, 0.6);
  overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.special::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 100% 0%, rgba(247, 163, 150, 0.2), transparent 70%); }
.s1 { grid-row: span 2; justify-content: flex-end; min-height: 340px; background: radial-gradient(85% 60% at 25% 0%, rgba(255, 150, 128, 0.55), transparent 62%), radial-gradient(75% 60% at 100% 100%, rgba(255, 110, 145, 0.42), transparent 65%), radial-gradient(60% 40% at 80% 30%, rgba(255, 214, 190, 0.18), transparent 70%), var(--panel); }
.s1 .sp-top { margin-bottom: auto; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.timer { font-size: 11.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.special h4 { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-transform: uppercase; }
.s1 h4 { font-size: 30px; }
.price { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: var(--coral-hi); text-shadow: 0 0 24px rgba(247, 163, 150, 0.6); }
.price s, .price span { color: var(--faint); font-size: 14px; }
.meter { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--brand-grad); box-shadow: 0 0 14px rgba(247, 163, 150, 0.8); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) 0.3s; }
.in .meter i { transform: scaleX(1); }
.special small { color: var(--muted); font-size: 12.5px; }
.special .btn { align-self: flex-start; margin-top: 6px; }

.sub-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sub-kpis div { padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.sub-kpis b { display: block; margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.growth { position: relative; height: 130px; margin: 18px 0 8px; }
.g-label { position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 800; color: var(--ok); }
.pulse-dot { opacity: 0; transition: opacity 0.4s 2.1s; filter: drop-shadow(0 0 8px #f7a396); }
.in .pulse-dot { opacity: 1; animation: pulse 2s ease-in-out 2.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.5); } }
.consent { list-style: none; margin: 0; padding: 0; }
.consent li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.consent li div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.consent small { color: var(--faint); font-size: 11.5px; }

/* Staggered children (rows, cards) once their section is visible */
.stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.in .stagger > * { opacity: 1; transform: none; }
.in .stagger > *:nth-child(2) { transition-delay: 0.12s; } .in .stagger > *:nth-child(3) { transition-delay: 0.24s; }
.in .stagger > *:nth-child(4) { transition-delay: 0.36s; } .in .stagger > *:nth-child(5) { transition-delay: 0.48s; }

/* Concierge chat (black) */
.chat { max-width: 520px; margin-left: auto; border-radius: 28px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 50px 110px -40px rgba(14, 20, 36, 0.6), 0 0 90px -30px rgba(247, 163, 150, 0.75); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: radial-gradient(70% 120% at 0% 0%, rgba(247, 163, 150, 0.16), transparent 70%); }
.chat-head img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(247, 163, 150, 0.6)); }
.chat-head div { display: flex; flex-direction: column; line-height: 1.3; }
.chat-head small { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ok); }
.chat-head .live-dot { width: 7px; height: 7px; background: var(--ok); }
.chat-body { display: flex; flex-direction: column; gap: 12px; padding: 22px; min-height: 380px; }
.msg { max-width: 82%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.msg.me { align-self: flex-end; background: rgba(255, 255, 255, 0.08); border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: linear-gradient(135deg, rgba(247, 163, 150, 0.2), rgba(247, 163, 150, 0.07)); border: 1px solid rgba(247, 163, 150, 0.25); border-bottom-left-radius: 6px; }
.msg.show { opacity: 1; transform: none; }
.msg-link { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--coral-hi); }
.typing { align-self: flex-start; display: flex; gap: 5px; margin: 0; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); opacity: 0; transition: opacity 0.3s; }
.typing.show { opacity: 1; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: dots 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* Analytics bars */
.hbars { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hbars li { display: grid; grid-template-columns: 100px 1fr 44px; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hbars i { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; }
.hbars i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--brand-grad); box-shadow: 0 0 16px rgba(247, 163, 150, 0.7); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); }
.in .hbars i::after { transform: scaleX(1); }
.in .hbars li:nth-child(2) i::after { transition-delay: 0.1s; } .in .hbars li:nth-child(3) i::after { transition-delay: 0.2s; }
.in .hbars li:nth-child(4) i::after { transition-delay: 0.3s; } .in .hbars li:nth-child(5) i::after { transition-delay: 0.4s; }
.in .hbars li:nth-child(6) i::after { transition-delay: 0.5s; }
.hbars b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Websites: real example sites (auto-fit: 2 or 3 across) ---------- */
.sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin: 0 0 70px; }
.site-card { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.site-card img {
  width: 100%; height: auto; aspect-ratio: 1448 / 1086; object-fit: cover; border-radius: 18px;
  box-shadow: 0 40px 80px -40px rgba(14, 20, 36, 0.5), 0 0 0 1px rgba(14, 20, 36, 0.06);
  transition: transform 0.6s var(--ease), box-shadow 0.6s;
}
.site-card:hover img { transform: translateY(-8px); box-shadow: 0 55px 100px -40px rgba(201, 95, 80, 0.55), 0 0 0 1px rgba(14, 20, 36, 0.06); }
.site-card figcaption { padding-left: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.web-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.web-feats li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 2px solid var(--line-2); }
.web-feats b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.web-feats span { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Security (dark) ---------- */
.sec-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sec-card { padding: 32px 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: transform 0.45s var(--ease), border-color 0.45s; overflow: hidden; }
.sec-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, rgba(247, 163, 150, 0.1), transparent 70%); }
.sec-card:hover { transform: translateY(-6px); border-color: rgba(247, 163, 150, 0.4); }

/* ---------- What's included (green checkboxes) ---------- */
.inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inc-card {
  position: relative; padding: 30px 28px; border-radius: 24px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s, border-color 0.45s;
}
.inc-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand-grad); }
.inc-card:hover { transform: translateY(-5px); border-color: rgba(22, 163, 74, 0.35); box-shadow: 0 30px 70px -32px rgba(22, 163, 74, 0.4); }
.inc-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.inc-card h3 .t-ic { width: 40px; height: 40px; border-radius: 12px; }
.inc-card h3 .t-ic svg { width: 20px; height: 20px; }
.inc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.inc-list li { position: relative; padding-left: 36px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text); }
.inc-list li::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 23px; height: 23px; border-radius: 7px;
  background: var(--check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12), 0 6px 14px -6px rgba(22, 163, 74, 0.8);
}
.js .inc-card .inc-list li::before { transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .inc-card.in .inc-list li::before { transform: scale(1); }
.inc-card.in .inc-list li:nth-child(2)::before { transition-delay: 0.08s; } .inc-card.in .inc-list li:nth-child(3)::before { transition-delay: 0.16s; }
.inc-card.in .inc-list li:nth-child(4)::before { transition-delay: 0.24s; } .inc-card.in .inc-list li:nth-child(5)::before { transition-delay: 0.32s; }
.inc-card.in .inc-list li:nth-child(6)::before { transition-delay: 0.4s; }
.inc-foot { margin: 40px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.inc-foot p { margin: 0; color: var(--muted); font-weight: 600; }

/* ---------- Steps (dark) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(247, 163, 150, 0.06), transparent 60%), var(--panel); border: 1px solid var(--line); }
.num { display: block; font-family: 'Urbanist', sans-serif; font-weight: 800; letter-spacing: -0.05em; font-size: 60px; line-height: 0.9; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(247, 163, 150, 0.4)); }
.step:not(:last-child)::after { content: ''; position: absolute; top: 54px; right: -12px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 14px var(--coral); z-index: 2; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.faq-wrap .sec-head { position: sticky; top: 120px; margin: 0; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.faq details[open] { border-color: rgba(232, 120, 104, 0.4); background: var(--panel); box-shadow: 0 24px 60px -36px rgba(232, 120, 104, 0.6); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--accent-ink); font-size: 20px; font-weight: 400; transition: transform 0.35s var(--ease), background 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: rgba(247, 163, 150, 0.16); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--muted); line-height: 1.7; }

/* ---------- Contact (dark) ---------- */
.contact { position: relative; padding: 140px 0 150px; overflow: hidden; isolation: isolate; background: var(--bg); }
.aurora.small .o1 { top: -200px; right: -200px; }
.aurora.small .o2 { top: auto; bottom: -260px; left: -180px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 70px; align-items: start; }
.contact-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.cp-ic { color: var(--coral); text-shadow: 0 0 12px var(--coral); }
.form { padding: 34px; border-radius: 28px; background: rgba(18, 17, 22, 0.88); border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 100px -40px rgba(247, 163, 150, 0.7); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field label span { color: var(--coral); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.35); color: var(--text); font-size: 15px; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23f7a396' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field select option { background: #18161d; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 4px rgba(247, 163, 150, 0.16), 0 0 30px -8px rgba(247, 163, 150, 0.6); }
.field input[aria-invalid='true'] { border-color: #ff8f8f; }
::placeholder { color: var(--faint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-note { margin: 0; font-size: 13px; color: var(--faint); }
.f-submit { width: 100%; margin-top: 4px; }
.f-submit[disabled] { opacity: 0.7; cursor: progress; }
.f-status { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 700; }
.f-status.ok { color: var(--ok); }
.f-status.err { color: #ff9f9f; }
.f-legal { margin: 0; font-size: 11.5px; color: var(--faint); }
.f-legal a { color: var(--muted); }
.grecaptcha-badge { visibility: hidden; }

/* ---------- Footer (dark) ---------- */
.site-foot { position: relative; padding: 80px 0 34px; border-top: 1px solid var(--line); background: radial-gradient(40% 60% at 50% 0%, rgba(247, 163, 150, 0.08), transparent 70%), var(--bg-alt); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 50px; }
.foot-brand img { height: 30px; width: auto; }
.foot-brand p { max-width: 42ch; margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }
.foot-nav { display: flex; flex-direction: column; gap: 10px; }
.foot-nav b { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.foot-nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; transition: color 0.2s; }
.foot-nav a:hover { color: var(--coral-hi); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.foot-base p { margin: 0; }
.foot-base a { color: var(--muted); text-decoration: none; }
.foot-base a:hover { color: var(--coral-hi); }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js .hero-copy .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .hero-copy .reveal:nth-child(3) { transition-delay: 0.18s; }
.js .hero-copy .reveal:nth-child(4) { transition-delay: 0.28s; }
.js .hero-copy .reveal:nth-child(5) { transition-delay: 0.38s; }
.js .hero-stage.reveal { transition-delay: 0.5s; }
/* Without JS, everything that animates in is simply shown */
html:not(.js) .bars span, html:not(.js) .meter i, html:not(.js) .hbars i::after { transform: none; }
html:not(.js) .stagger > *, html:not(.js) .msg, html:not(.js) .spark .area { opacity: 1; transform: none; }
html:not(.js) .spark .line, html:not(.js) .growth .draw { stroke-dashoffset: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .feature-grid, .contact-grid, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .feature-grid.reverse .feature-copy { order: 0; }
  .faq-wrap .sec-head { position: static; }
  .chat { margin: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .sec-grid, .inc-grid { grid-template-columns: repeat(2, 1fr); }
  .fc1 { left: -10px; } .fc2 { right: -10px; } .fc3 { left: 0; } .fc4 { right: 0; }
}
@media (max-width: 860px) {
  .main-nav {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 2px; margin: 0; padding: 14px 20px 22px;
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -40px rgba(14, 20, 36, 0.5);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all 0.3s var(--ease);
  }
  .main-nav.open { transform: none; opacity: 1; visibility: visible; }
  .main-nav a { padding: 14px 12px; font-size: 16px; }
  .head-cta { margin-left: auto; }
  .menu-btn { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; cursor: pointer; }
  .menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.3s; }
  .menu-btn[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .ui-body { grid-template-columns: 1fr; }
  .ui-side { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .ui-row { grid-template-columns: 1fr; }
  .web-feats { grid-template-columns: 1fr; }
  .hero-photo { position: relative; z-index: 0; height: 380px; margin-top: 78px; }
  .hero-photo img { object-position: 72% 34%; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, #fff 100%); }
  .hero-copy { padding-top: 26px; max-width: none; }
  .hero-stage { margin-top: 70px; }
  .sec-grid, .steps, .inc-grid { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 0 0 70px; }
  .hero-photo { height: 300px; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: 0.14em; gap: 8px; }
  .head-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .brand img { height: 26px; }
  .tiles { grid-template-columns: 1fr; }
  .specials { grid-template-columns: 1fr; }
  .s1 { grid-row: auto; min-height: 260px; }
  .float-card { display: none; }
  .tbl th:nth-child(3), .tbl td:nth-child(3), .tbl th:nth-child(5), .tbl td:nth-child(5) { display: none; }
  .section, .feature, .contact { padding: 90px 0; }
  .form { padding: 22px; }
  .hbars li { grid-template-columns: 84px 1fr 40px; }
  .sub-kpis b { font-size: 22px; }
}

/* ---------- Reduced motion: no drifting, floating, shimmering or reveal motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .tilt { transform: none; }
  .bars span, .meter i, .hbars i::after { transform: none; }
  .stagger > *, .msg, .typing, .spark .area { opacity: 1; transform: none; }
  .typing { display: none; }
  .spark .line, .growth .draw { stroke-dashoffset: 0; }
  .pulse-dot { opacity: 1; }
  .js .inc-card .inc-list li::before { transform: none; }
}