/* ============================================================================
 *  Rooted — styles.css
 *  Coral & Cream palette · Fraunces (display) + Inter (body)
 *  All design tokens live in :root — it is the single source of color/spacing.
 * ========================================================================== */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  /* Neutrals (warm) */
  --ink:#1A1410;
  --graphite:#3D352E;
  --muted:#7A6E64;
  --cream:#FFF9F5;       /* page background */
  --surface:#FFFFFF;     /* cards */
  --soft:#FBF1EA;        /* subtle fills / alt sections */
  --fog:#EADFD6;         /* borders */
  --line:#DBCBBF;        /* stronger borders */
  --dark:#1E1410;        /* dark band background */

  /* Brand — coral */
  --coral:#F2552C;       /* primary accent / CTA fill */
  --coral-2:#D8431D;     /* hover + small-text accent (AA on white) */
  --peach:#E8836B;       /* secondary accent */
  --mist:#FFE9E0;        /* light tint (badges, icon bg) */
  --ok:#2E9E6B;          /* success / checkmarks */

  /* Type */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Shape */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:22px;
  --container:1180px;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(60,30,18,.05), 0 1px 1px rgba(60,30,18,.04);
  --shadow-md: 0 10px 28px -10px rgba(60,30,18,.16), 0 2px 6px rgba(60,30,18,.05);
  --shadow-lg: 0 28px 64px -22px rgba(60,30,18,.24), 0 8px 16px rgba(60,30,18,.06);

  --focus: 0 0 0 3px rgba(242,85,44,.40);
}

/* ---- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--cream);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, svg, video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, textarea { font:inherit; color:inherit; }
ul { list-style:none; padding:0; }
h1, h2, h3, h4 { font-family:var(--font-display); color:var(--ink); line-height:1.08; font-weight:600; letter-spacing:-.01em; }
strong { color:var(--ink); font-weight:600; }
::selection { background:var(--mist); color:var(--ink); }

:focus { outline:none; }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:8px; }

.skip-link {
  position:absolute; left:12px; top:-48px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
  transition:top .2s ease;
}
.skip-link:focus { top:12px; }

/* ---- Layout --------------------------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:22px; }
.section { padding:96px 0; position:relative; }
.section-soft { background:var(--soft); }
.section-head { max-width:720px; margin:0 auto 52px; text-align:center; }
.section-head.left { margin-left:0; text-align:left; }
.section-head h2 { font-size:clamp(28px,3.6vw,44px); }
.section-head p { margin-top:14px; color:var(--muted); font-size:clamp(16px,1.6vw,18px); }
.eyebrow {
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-2); margin-bottom:14px;
}
.hl { color:var(--coral); }
.center { text-align:center; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 22px; border-radius:999px;
  font-weight:600; font-size:15px; letter-spacing:.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--coral); color:#fff; box-shadow:0 6px 18px -6px rgba(242,85,44,.55); }
.btn-primary:hover { background:var(--coral-2); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(242,85,44,.6); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { background:var(--surface); border-color:var(--muted); transform:translateY(-1px); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#2c211a; transform:translateY(-1px); }
.btn-lg { min-height:54px; padding:0 30px; font-size:16px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity:.55; cursor:not-allowed; filter:grayscale(.3); transform:none !important; box-shadow:none;
}
.btn[aria-busy="true"] { opacity:.75; pointer-events:none; }

/* ---- Nav ------------------------------------------------------------------ */
.nav {
  position:sticky; top:0; z-index:90;
  background:rgba(255,249,245,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled { border-bottom-color:var(--fog); background:rgba(255,249,245,.92); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:68px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.01em; }
.brand-mark {
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:var(--coral); color:#fff; box-shadow:0 4px 12px -4px rgba(242,85,44,.6);
  animation:sprout .6s cubic-bezier(.22,1,.36,1) both;
}
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a[data-nav] {
  position:relative; padding:9px 13px; border-radius:9px; font-size:14.5px; font-weight:500; color:var(--graphite);
  transition:color .15s ease, background .15s ease;
}
.nav-links a[data-nav]:hover { color:var(--ink); background:var(--soft); }
.nav-links a[data-nav]::after {
  content:''; position:absolute; left:13px; right:13px; bottom:4px; height:2px; border-radius:2px;
  background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-links a[data-nav][data-active="true"] { color:var(--ink); }
.nav-links a[data-nav][data-active="true"]::after { transform:scaleX(1); }
.nav-cta { margin-left:8px; }
.nav-toggle { display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:11px; color:var(--ink); }
.nav-toggle:hover { background:var(--soft); }

.scroll-progress {
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--coral),var(--peach));
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

/* ---- Hero ----------------------------------------------------------------- */
.hero { position:relative; overflow:hidden; padding:74px 0 86px; }
.aurora { position:absolute; inset:-20% -10% auto -10%; height:130%; z-index:0; pointer-events:none; filter:blur(60px); opacity:.9; }
.aurora span { position:absolute; border-radius:50%; display:block; }
.aurora .a1 { width:520px; height:520px; left:6%;  top:-6%;  background:radial-gradient(circle at 30% 30%, rgba(242,85,44,.42), transparent 62%); animation:drift1 22s ease-in-out infinite; }
.aurora .a2 { width:480px; height:480px; right:4%; top:2%;   background:radial-gradient(circle at 60% 40%, rgba(232,131,107,.40), transparent 60%); animation:drift2 26s ease-in-out infinite; }
.aurora .a3 { width:420px; height:420px; left:38%; top:24%;  background:radial-gradient(circle at 50% 50%, rgba(255,193,140,.38), transparent 64%); animation:drift3 30s ease-in-out infinite; }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero-copy h1 { font-size:clamp(38px,5.2vw,64px); letter-spacing:-.022em; }
.hero-copy h1 .word { display:inline-block; }
.hero-copy h1.anim-words .word { animation:wordIn .6s cubic-bezier(.22,1,.36,1) both; }
.hero .lede { margin-top:20px; font-size:clamp(17px,1.7vw,20px); color:var(--graphite); max-width:33ch; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:30px; }
.hero-meta span { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--graphite); font-weight:500; }
.hero-meta svg { width:16px; height:16px; color:var(--ok); flex:none; }

.hero-visual { position:relative; }
.browser {
  background:var(--surface); border:1px solid var(--fog); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:perspective(1400px) rotateY(-9deg) rotateX(3deg) translateZ(0);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.browser-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--soft); border-bottom:1px solid var(--fog); }
.dot { width:11px; height:11px; border-radius:50%; }
.dot.r{ background:#ED6A5E; } .dot.y{ background:#F4C152; } .dot.g{ background:#62C26E; }
.browser-url { margin-left:10px; font-size:12.5px; color:var(--muted); background:var(--surface); border:1px solid var(--fog); border-radius:7px; padding:3px 12px; font-family:var(--font-body); }
.browser-body { padding:20px; }
.mock-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mock-logo { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:15px; }
.mock-nav { display:flex; gap:7px; }
.mock-nav span { width:24px; height:6px; border-radius:3px; background:var(--fog); }
.mock-hero { background:linear-gradient(135deg,var(--mist),#fff); border:1px solid var(--fog); border-radius:14px; padding:20px; margin-bottom:14px; }
.line { height:11px; border-radius:6px; background:var(--fog); margin-bottom:9px; }
.line.lg { width:75%; height:15px; background:var(--peach); opacity:.55; }
.line.md { width:88%; } .line.sm { width:54%; }
.mock-cta { display:inline-block; margin-top:6px; background:var(--coral); color:#fff; font-size:12px; font-weight:600; padding:7px 14px; border-radius:8px; }
.mock-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mock-card { height:52px; border-radius:11px; background:var(--soft); border:1px solid var(--fog); }

.hero-chip {
  position:absolute; left:-18px; bottom:34px; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--fog); border-radius:13px;
  padding:10px 14px; box-shadow:var(--shadow-md); font-size:13px; font-weight:600; color:var(--ink);
  animation:floaty 5s ease-in-out infinite;
}
.hero-chip .pulse-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); position:relative; }
.hero-chip .pulse-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--ok); animation:pulse 2.2s ease-out infinite; }
.hero-chip .typing { display:inline-flex; gap:3px; }
.hero-chip .typing i { width:5px; height:5px; border-radius:50%; background:var(--muted); display:block; animation:typing 1.3s infinite; }
.hero-chip .typing i:nth-child(2){ animation-delay:.18s; } .hero-chip .typing i:nth-child(3){ animation-delay:.36s; }

/* ---- Stats bar ------------------------------------------------------------ */
.stats { border-block:1px solid var(--fog); background:var(--surface); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:30px 0; }
.stat { text-align:center; padding:6px 10px; position:relative; }
.stat + .stat::before { content:''; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--fog); }
.stat-num { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,3.6vw,42px); color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.stat-num .u { color:var(--coral); }
.stat-label { margin-top:8px; font-size:13.5px; color:var(--muted); }

/* ---- Section heading utility (industries etc.) ---------------------------- */
.industries { }
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile {
  position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--fog);
  border-radius:var(--radius-lg); padding:24px; min-height:172px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tile::before {                       /* cursor spotlight */
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s ease; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(242,85,44,.10), transparent 70%);
}
.tile:hover { transform:translateY(-4px); border-color:var(--line); box-shadow:var(--shadow-md); }
.tile:hover::before { opacity:1; }
.tile.b-wide { grid-column:span 2; }
.tile-icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--mist); color:var(--coral-2); margin-bottom:auto; }
.tile-icon svg { width:24px; height:24px; }
.tile h3 { font-size:18px; }
.tile p { font-size:14px; color:var(--muted); }
.tile-cta { background:var(--dark); color:#fff; justify-content:center; text-align:center; align-items:center; }
.tile-cta h3 { color:#fff; font-size:20px; }
.tile-cta p { color:rgba(255,255,255,.72); }
.tile-cta .tile-icon { background:rgba(255,255,255,.10); color:var(--peach); margin:0 auto 4px; }
.tile-cta .btn { margin-top:14px; }

/* ---- Services ------------------------------------------------------------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card {
  position:relative; background:var(--surface); border:1px solid var(--fog); border-radius:var(--radius-lg);
  padding:30px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card.grad-border::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg,var(--coral),var(--peach));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.card.grad-border:hover::before { opacity:1; }
.card-icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--mist); color:var(--coral-2); margin-bottom:18px; }
.card-icon svg { width:26px; height:26px; }
.card h3 { font-size:21px; margin-bottom:9px; }
.card p { color:var(--muted); font-size:15px; }
.card .feat { margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.card .feat li { display:flex; gap:9px; font-size:14px; color:var(--graphite); }
.card .feat svg { width:18px; height:18px; color:var(--ok); flex:none; margin-top:2px; }

/* ---- AI assistant demo ---------------------------------------------------- */
.demo { background:var(--dark); color:#fff; position:relative; overflow:hidden; }
.demo .aurora { opacity:.5; filter:blur(70px); }
.demo .section-head h2 { color:#fff; }
.demo .section-head p { color:rgba(255,255,255,.72); }
.demo .eyebrow { color:var(--peach); }
.demo-shell { position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:start; max-width:980px; margin:0 auto; }
.demo-side h3 { color:#fff; font-size:23px; margin-bottom:10px; }
.demo-side p { color:rgba(255,255,255,.70); font-size:15px; margin-bottom:20px; }
.demo-switch { display:flex; flex-wrap:wrap; gap:9px; }
.demo-pill {
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.86);
  font-size:13.5px; font-weight:500; transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.demo-pill svg { width:16px; height:16px; }
.demo-pill:hover { background:rgba(255,255,255,.13); transform:translateY(-1px); }
.demo-pill[aria-pressed="true"] { background:var(--coral); border-color:var(--coral); color:#fff; }

.chat { background:var(--surface); color:var(--ink); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; min-height:440px; }
.chat-head { display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--fog); background:var(--soft); }
.chat-avatar { width:38px; height:38px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; flex:none; }
.chat-avatar svg { width:20px; height:20px; }
.chat-name { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); line-height:1.2; }
.chat-name small { display:block; font-family:var(--font-body); font-weight:500; font-size:12px; color:var(--ok); }
.chat-name small::before { content:'● '; font-size:9px; vertical-align:1px; }
.chat-body { flex:1; padding:18px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:340px; }
.chat-msg { max-width:82%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; animation:msgIn .3s ease both; }
.chat-msg.theirs { align-self:flex-start; background:var(--soft); color:var(--ink); border-bottom-left-radius:5px; }
.chat-msg.mine { align-self:flex-end; background:var(--coral); color:#fff; border-bottom-right-radius:5px; }
.chat-typing { align-self:flex-start; display:inline-flex; gap:4px; padding:12px 15px; background:var(--soft); border-radius:16px; border-bottom-left-radius:5px; }
.chat-typing i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:typing 1.3s infinite; }
.chat-typing i:nth-child(2){ animation-delay:.18s; } .chat-typing i:nth-child(3){ animation-delay:.36s; }
.chat-foot { border-top:1px solid var(--fog); padding:13px 15px; background:var(--surface); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:11px; }
.chip {
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:13px; font-weight:500;
  color:var(--coral-2); background:var(--surface); transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.chip:hover { background:var(--mist); border-color:var(--coral); transform:translateY(-1px); }
.demo-input { display:flex; gap:8px; }
.demo-input input { flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-size:14px; background:var(--cream); }
.demo-input input:focus-visible { box-shadow:var(--focus); border-color:var(--coral); }
.demo-input button { flex:none; width:44px; height:44px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; }
.demo-input button:hover { background:var(--coral-2); }
.demo-input button svg { width:18px; height:18px; }
.demo-note { text-align:center; color:rgba(255,255,255,.55); font-size:12.5px; margin-top:18px; position:relative; z-index:1; }

/* ---- Showreel + marquee --------------------------------------------------- */
.reel { overflow:hidden; }
.reel-track {
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 22px 24px; margin-inline:-22px; scrollbar-width:none;
}
.reel-track::-webkit-scrollbar { display:none; }
.reel-card {
  scroll-snap-align:center; flex:0 0 320px; background:var(--surface); border:1px solid var(--fog);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease;
}
.reel-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
/* Mini-site mockup (themed per industry via --accent / --tint on the card) */
.reel-bar { display:flex; align-items:center; gap:5px; padding:9px 12px; background:var(--soft); border-bottom:1px solid var(--fog); }
.reel-bar i { width:7px; height:7px; border-radius:50%; background:var(--line); }
.reel-url { margin-left:8px; font-size:10.5px; color:var(--muted); background:var(--surface); border:1px solid var(--fog); border-radius:6px; padding:2px 9px; }
.reel-shot-img { display:block; width:100%; height:auto; background:var(--soft); }
.reel-meta { padding:14px 18px; border-top:1px solid var(--fog); display:flex; align-items:center; justify-content:space-between; }
.reel-meta b { font-size:14.5px; color:var(--ink); }
.reel-meta span { font-size:12.5px; color:var(--muted); }
.reel-hint { text-align:center; font-size:13px; color:var(--muted); margin-top:6px; }

.marquee { margin-top:54px; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; width:max-content; gap:14px; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.logo-badge { display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1px solid var(--fog); border-radius:999px; background:var(--surface); color:var(--muted); font-weight:600; font-size:14px; white-space:nowrap; }
.logo-badge svg { width:18px; height:18px; color:var(--peach); }

/* ---- How it works --------------------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; }
.steps::before { content:''; position:absolute; left:14%; right:14%; top:32px; height:2px; background:var(--fog); z-index:0; }
.steps-fill { position:absolute; left:14%; top:32px; height:2px; background:linear-gradient(90deg,var(--coral),var(--peach)); width:0; z-index:0; will-change:width; }
.step { position:relative; z-index:1; text-align:center; }
.step-num { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--fog); color:var(--muted); font-family:var(--font-display); font-weight:700; font-size:24px; transition:border-color .3s ease, color .3s ease, background .3s ease; }
.step.lit .step-num { background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 8px 20px -6px rgba(242,85,44,.5); }
.step h3 { font-size:20px; margin-bottom:9px; }
.step p { color:var(--muted); font-size:14.5px; max-width:30ch; margin-inline:auto; }

/* ---- Pricing -------------------------------------------------------------- */
.pricing-top { display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:18px; }
.tabs { display:inline-flex; background:var(--soft); border:1px solid var(--fog); border-radius:999px; padding:5px; gap:4px; }
.tab { padding:10px 20px; border-radius:999px; font-size:14.5px; font-weight:600; color:var(--muted); transition:color .2s ease, background .2s ease, box-shadow .2s ease; }
.tab[aria-selected="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.tab:hover:not([aria-selected="true"]) { color:var(--ink); }

.price-toggle { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.switch { display:inline-flex; background:var(--soft); border:1px solid var(--fog); border-radius:999px; padding:4px; }
.switch button { padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--muted); }
.switch button[aria-pressed="true"] { background:var(--coral); color:#fff; }
.save-pill { background:var(--mist); color:var(--coral-2); font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }

.tabpanel { display:none; }
.tabpanel.is-active { display:block; animation:fadeUp .35s ease both; }
.plans-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:stretch; }
.price-card {
  position:relative; background:var(--surface); border:1px solid var(--fog); border-radius:var(--radius-lg);
  padding:30px; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.price-card.featured { border-color:transparent; box-shadow:var(--shadow-md); }
.price-card.featured::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.6px;
  background:linear-gradient(135deg,var(--coral),var(--peach),var(--coral)); background-size:200% 200%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  animation:borderShift 6s linear infinite;
}
.price-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--coral); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:5px 13px; border-radius:999px; box-shadow:0 6px 16px -6px rgba(242,85,44,.6); white-space:nowrap; }
.price-eyebrow { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.price-card h3 { font-size:23px; }
.price-tagline { color:var(--muted); font-size:14px; margin-top:6px; min-height:40px; }
.price-amount { margin:18px 0 4px; display:flex; align-items:baseline; gap:4px; }
.price-num { font-family:var(--font-display); font-weight:700; font-size:46px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; transition:opacity .25s ease, transform .25s ease; }
.price-num.roll { animation:numRoll .4s ease both; }
.price-period { color:var(--muted); font-size:15px; font-weight:500; }
.price-sub { color:var(--coral-2); font-weight:600; font-size:13px; margin:1px 0 4px; }
.price-setup { color:var(--graphite); font-size:14px; }
.price-setup b { color:var(--ink); }
.no-ai-row { margin:14px 0 -2px; }
.no-ai { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); background:var(--soft); border:1px solid var(--fog); padding:5px 11px; border-radius:999px; }
.no-ai svg { width:14px; height:14px; color:var(--muted); }
.cross-sell { display:block; text-align:center; margin-top:12px; font-size:13px; font-weight:600; color:var(--coral-2); text-decoration:underline; text-underline-offset:2px; }
.cross-sell:hover { color:var(--coral); }
.features { margin:20px 0 24px; display:flex; flex-direction:column; gap:11px; }
.features li { display:flex; gap:10px; font-size:14.5px; color:var(--graphite); line-height:1.45; }
.features svg { width:18px; height:18px; color:var(--ok); flex:none; margin-top:2px; }
.price-card .btn { margin-top:auto; width:100%; }

.custom-card { background:linear-gradient(180deg,var(--soft),var(--surface)); border:1px solid var(--fog); border-radius:var(--radius-lg); padding:30px; margin-top:22px; }
.custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; }
.custom-card h3 { font-size:24px; }
.custom-card > .custom-grid > div > p { color:var(--muted); font-size:15px; margin-top:8px; }
.custom-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field .input-money { position:relative; }
.field .input-money span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600; }
.field input { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px 12px 28px; font-size:16px; background:var(--surface); font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.field input:focus-visible { box-shadow:var(--focus); border-color:var(--coral); }
.field .help { font-size:12px; color:var(--muted); margin-top:6px; }
.custom-total { grid-column:1/-1; font-size:14.5px; color:var(--ink); background:var(--mist); border-radius:12px; padding:13px 16px; min-height:0; }
.custom-total[hidden] { display:none; }
.custom-form .btn { grid-column:1/-1; }
.custom-fine { grid-column:1/-1; font-size:12.5px; color:var(--muted); }

.pricing-note { text-align:center; color:var(--muted); font-size:14px; margin-top:30px; }
.guarantee { display:inline-flex; align-items:center; gap:10px; margin:18px auto 0; padding:11px 18px; background:var(--surface); border:1px solid var(--fog); border-radius:999px; font-size:13.5px; color:var(--graphite); }
.guarantee svg { width:20px; height:20px; color:var(--ok); }
.guarantee b { color:var(--ink); }

/* ---- Testimonials --------------------------------------------------------- */
.t-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.t-card { background:var(--surface); border:1px solid var(--fog); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; }
.stars { display:flex; gap:3px; margin-bottom:14px; color:var(--coral); }
.stars svg { width:17px; height:17px; }
.t-quote { font-size:15.5px; color:var(--graphite); line-height:1.6; }
.t-author { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--fog); }
.avatar { width:42px; height:42px; border-radius:50%; background:var(--mist); color:var(--coral-2); display:grid; place-items:center; font-weight:700; font-family:var(--font-display); flex:none; }
.t-author b { font-size:14.5px; color:var(--ink); display:block; }
.t-author span { font-size:13px; color:var(--muted); }
.badge-sample { display:inline-block; margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--soft); border:1px solid var(--fog); padding:3px 8px; border-radius:6px; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { max-width:780px; margin:0 auto; }
.faq details { border:1px solid var(--fog); border-radius:var(--radius); background:var(--surface); margin-bottom:12px; transition:border-color .2s ease, box-shadow .2s ease; }
.faq details[open] { border-color:var(--line); box-shadow:var(--shadow-sm); }
.faq summary { list-style:none; cursor:pointer; padding:19px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; flex:none; width:22px; height:22px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8431D' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); transition:transform .25s ease; }
.faq details[open] summary::after { transform:rotate(135deg); }
.faq .faq-body { padding:0 22px 20px; color:var(--graphite); font-size:15px; line-height:1.65; }
.faq .faq-body a { color:var(--coral-2); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ---- Final CTA ------------------------------------------------------------ */
.cta-band { position:relative; overflow:hidden; background:var(--dark); color:#fff; border-radius:28px; padding:64px 40px; text-align:center; }
.cta-band .aurora { opacity:.55; filter:blur(64px); }
.cta-band h2 { color:#fff; font-size:clamp(28px,4vw,46px); position:relative; z-index:1; }
.cta-band p { color:rgba(255,255,255,.78); margin:14px auto 28px; max-width:50ch; position:relative; z-index:1; }
.cta-band .hero-ctas { justify-content:center; position:relative; z-index:1; }
.cta-band .btn-ghost { color:#fff; border-color:rgba(255,255,255,.3); }
.cta-band .btn-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }

/* ---- Footer --------------------------------------------------------------- */
.footer { background:var(--surface); border-top:1px solid var(--fog); padding:60px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; }
.footer-brand .brand { margin-bottom:14px; }
.footer-brand p { color:var(--muted); font-size:14px; max-width:34ch; }
.footer-col h4 { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-family:var(--font-body); font-weight:700; }
.footer-col a, .footer-col button { display:block; text-align:left; padding:5px 0; color:var(--graphite); font-size:14.5px; transition:color .15s ease; }
.footer-col a:hover, .footer-col button:hover { color:var(--coral-2); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:44px; padding-top:24px; border-top:1px solid var(--fog); color:var(--muted); font-size:13.5px; }

/* ---- FAB + contact panel -------------------------------------------------- */
.fab-wrap { position:fixed; right:22px; bottom:22px; z-index:95; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.fab { display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 22px; border-radius:999px; background:var(--coral); color:#fff; font-weight:600; font-size:15px; box-shadow:var(--shadow-lg); transition:transform .2s ease, background .2s ease; }
.fab:hover { background:var(--coral-2); transform:translateY(-2px); }
.fab svg { width:20px; height:20px; }
.fab::after { content:''; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(242,85,44,.5); animation:fabPulse 2.6s ease-out infinite; pointer-events:none; }
.fab { position:relative; }

.contact-panel {
  position:absolute; right:0; bottom:72px; width:320px; max-width:calc(100vw - 44px);
  background:var(--surface); border:1px solid var(--fog); border-radius:18px; box-shadow:var(--shadow-lg);
  transform-origin:bottom right; transform:scale(.92) translateY(8px); opacity:0; visibility:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1), opacity .2s ease, visibility .2s;
}
.contact-panel.open { transform:scale(1) translateY(0); opacity:1; visibility:visible; }
.contact-head { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 18px 8px; }
.contact-head h4 { font-size:17px; }
.contact-head p { font-size:13px; color:var(--muted); margin-top:2px; }
.panel-close { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--muted); }
.panel-close:hover { background:var(--soft); color:var(--ink); }
.contact-list { padding:6px 12px 16px; display:flex; flex-direction:column; gap:4px; }
.contact-item { display:flex; align-items:center; gap:13px; padding:12px; border-radius:12px; transition:background .15s ease; }
.contact-item:hover { background:var(--soft); }
.contact-ico { width:40px; height:40px; border-radius:11px; background:var(--mist); color:var(--coral-2); display:grid; place-items:center; flex:none; }
.contact-ico svg { width:20px; height:20px; }
.contact-item b { font-size:14.5px; color:var(--ink); display:block; }
.contact-item span { font-size:13px; color:var(--muted); }

/* ---- Toast ---------------------------------------------------------------- */
.toast { position:fixed; left:50%; bottom:96px; transform:translate(-50%,16px); z-index:96; background:var(--ink); color:#fff; border-radius:14px; padding:14px 18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:14px; max-width:calc(100vw - 44px); opacity:0; visibility:hidden; transition:transform .25s ease, opacity .25s ease, visibility .25s; }
.toast.show { transform:translate(-50%,0); opacity:1; visibility:visible; }
.toast span { font-size:14px; }
.toast .btn { min-height:38px; padding:0 14px; font-size:13.5px; }

/* ---- Reveal on scroll ----------------------------------------------------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease-out, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }
.stagger > * { transition-delay:calc(var(--i,0) * 70ms); }

/* ---- Keyframes ------------------------------------------------------------ */
@keyframes sprout { 0%{ opacity:0; transform:scale(.6) rotate(-10deg);} 60%{ opacity:1; transform:scale(1.08) rotate(3deg);} 100%{ opacity:1; transform:scale(1) rotate(0);} }
@keyframes msgIn { from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} }
@keyframes typing { 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-4px); opacity:1;} }
@keyframes pulse { 0%{ transform:scale(.9); opacity:.7;} 100%{ transform:scale(2.4); opacity:0;} }
@keyframes fabPulse { 0%{ box-shadow:0 0 0 0 rgba(242,85,44,.5);} 70%{ box-shadow:0 0 0 16px rgba(242,85,44,0);} 100%{ box-shadow:0 0 0 0 rgba(242,85,44,0);} }
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
@keyframes fadeUp { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes numRoll { 0%{ opacity:0; transform:translateY(8px);} 100%{ opacity:1; transform:none;} }
@keyframes wordIn { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
@keyframes borderShift { 0%{ background-position:0% 50%;} 100%{ background-position:200% 50%;} }
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes drift1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,30px) scale(1.08);} }
@keyframes drift2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-36px,24px) scale(1.06);} }
@keyframes drift3 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(20px,-30px) scale(1.1);} }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:960px) {
  .section { padding:74px 0; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero { padding:48px 0 70px; }
  .hero .lede { max-width:46ch; }
  .browser { transform:none; }
  .hero-visual { max-width:480px; }
  .demo-shell { grid-template-columns:1fr; gap:24px; }
  .bento { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--cream); border-bottom:1px solid var(--fog); padding:12px 22px 18px; box-shadow:var(--shadow-md); }
  .nav.nav-open .nav-links { display:flex; }
  .nav-links a[data-nav] { padding:13px; }
  .nav-links a[data-nav]::after { display:none; }
  .nav-cta { margin:6px 0 0; }
  .nav-toggle { display:inline-flex; }
}
@media (max-width:780px) {
  .grid-3 { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:30px; }
  .steps::before, .steps-fill { display:none; }
  .plans-grid { grid-template-columns:1fr; }
  .custom-grid { grid-template-columns:1fr; gap:20px; }
  .t-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:8px 18px; }
  .stat:nth-child(3)::before { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:560px) {
  .container { padding-inline:18px; }
  .section { padding:54px 0; }
  /* Compact industries: 2-col, icon + title only (hide descriptions on phone) */
  .bento { grid-template-columns:repeat(2,1fr); gap:10px; }
  .tile { min-height:116px; padding:15px; gap:4px; }
  .tile p { display:none; }
  .tile h3 { font-size:15px; }
  .tile-icon { width:38px; height:38px; border-radius:11px; }
  .tile-icon svg { width:20px; height:20px; }
  .tile.b-wide { grid-column:span 1; }
  .tile.tile-cta { grid-column:1 / -1; min-height:0; padding:22px; }
  .tile-cta p { display:block; }
  /* Shorten the page on phones */
  #testimonials { display:none; }
  .chat { min-height:380px; }
  .custom-form { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .hero-chip { left:0; }
  .cta-band { padding:48px 24px; }
  .fab span { display:none; }
  .fab { padding:0; width:56px; justify-content:center; }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; }
  .aurora { display:none; }
  .fab::after { display:none; }
  .marquee-track { animation:none !important; }
  .browser { transform:none !important; }
}