/* Axiom Digital — light SaaS theme (Linear / Stripe / Notion-inspired).
   Self-contained — the only stylesheet the site loads. */

:root {
  --brand:        #D97706;
  --brand-hover:  #B45309;
  --brand-soft:   #FEF3C7;
  --brand-200:    #FDE68A;

  --ink:          #0F172A;  /* slate-900 — headings */
  --ink-700:      #334155;  /* slate-700 — body */
  --ink-500:      #64748B;  /* slate-500 — muted */
  --ink-400:      #94A3B8;  /* slate-400 — faint */
  --ink-300:      #CBD5E1;  /* slate-300 — disabled */

  --bg:           #FFFBEB;  /* light amber — page background */
  --bg-alt:       #FDF4DD;  /* deeper warm amber — alt sections */
  --bg-soft:      #FAEFD3;
  --bg-card:      #FFFFFF;

  --line:         #E5E7EB;
  --line-strong:  #D1D5DB;

  --wa:           #25D366;

  --shadow-sm:    0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-md:    0 8px 24px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:    0 18px 48px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-amber: 0 12px 32px rgba(217,119,6,0.25);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--brand);
  color: #ffffff;
  transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 2px rgba(217,119,6,0.20);
}
.btn-primary:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-amber);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-ghost:hover {
  background: var(--bg-alt);
  border-color: var(--line-strong);
}
.btn-ghost:active { transform: translateY(0); }

/* ── Cards ─────────────────────────────────────────────────────────── */
/* Default card — light amber gradient with a soft amber glow. */
.card {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid var(--brand-200);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(217,119,6,0.16), 0 2px 8px rgba(217,119,6,0.10);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card-hover:hover {
  box-shadow: 0 18px 44px rgba(217,119,6,0.26), 0 4px 14px rgba(217,119,6,0.14);
  transform: translateY(-2px);
  border-color: var(--brand);
}

/* Plain white card — kept for the floating callouts on device mockups. */
.card-plain {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* Dark card — featured / most-popular offerings. Re-scopes the theme
   tokens so descendant var()-driven colors flip to a dark palette. */
.card-dark {
  background: linear-gradient(180deg, #211c16 0%, #14110d 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(217,119,6,0.30), 0 6px 18px rgba(0,0,0,0.38);
  --ink:         #FFFFFF;
  --ink-700:     #D6D3D1;
  --ink-500:     #A8A29E;
  --ink-400:     #78716C;
  --ink-300:     #57534E;
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --bg-card:     #211c16;
  --bg-alt:      rgba(255,255,255,0.05);
  --brand-soft:  rgba(217,119,6,0.20);
  --brand-200:   rgba(217,119,6,0.42);
}
.card-dark.card-hover:hover {
  box-shadow: 0 26px 64px rgba(217,119,6,0.42), 0 8px 22px rgba(0,0,0,0.45);
  transform: translateY(-2px);
  border-color: rgba(217,119,6,0.55);
}
.card-dark .btn-primary {
  box-shadow: 0 0 28px rgba(217,119,6,0.55), 0 1px 3px rgba(217,119,6,0.35);
}
.card-dark .btn-primary:hover {
  box-shadow: 0 0 40px rgba(217,119,6,0.75);
}

/* ── Inputs ────────────────────────────────────────────────────────── */
.ax-input {
  width: 100%;
  padding: 10px 14px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ax-input::placeholder { color: var(--ink-400); }
.ax-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.15);
}
.ax-input:disabled { background: var(--bg-alt); cursor: not-allowed; }
select.ax-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  appearance: none;
}

/* ── Shiny gradient text (kept) ────────────────────────────────────── */
.shiny-text {
  background: linear-gradient(90deg, #B45309 0%, #F59E0B 35%, #FBBF24 50%, #F59E0B 65%, #B45309 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shiny 7s linear infinite;
}
@keyframes shiny {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Scroll-reveal (kept from prod, opacity/transform only) ───────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translate3d(0, 0, 0); }
.r-fade  { transform: none; }
.r-left  { transform: translate3d(-24px, 0, 0); }
.r-right { transform: translate3d(24px, 0, 0); }
.r-scale { transform: scale(0.96); }
.r-fade.in, .r-left.in, .r-right.in, .r-scale.in { transform: none; }

/* ── Hero slide-in (kept) ─────────────────────────────────────────── */
.slide-in-up    { animation: slideInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.slide-in-right { animation: slideInRight 1.0s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes slideInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Live pulse (kept) ─────────────────────────────────────────────── */
.pulse-dot {
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ── Accordion (kept) ─────────────────────────────────────────────── */
.acc-icon { transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease; }
.acc-open .acc-icon {
  background: var(--brand);
  color: #ffffff;
  transform: rotate(180deg);
  border-color: var(--brand);
}

/* ── Tablet mockup (POS hero) — light theme version ───────────────── */
.tablet-wrap { perspective: 1400px; }
.tablet {
  position: relative;
  width: 100%;
  border-radius: 22px;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  padding: 14px;
  box-shadow: var(--shadow-lg), 0 30px 60px rgba(15,23,42,0.18);
}
.tablet-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

/* ── Respect reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .slide-in-up, .slide-in-right, .shiny-text, .pulse-dot {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ── Misc ─────────────────────────────────────────────────────────── */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Hide v2 carousel scrollbar on Safari/Firefox for slides */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }