/* Graphite night, champagne accent. One family (Archivo) used across widths. */
:root {
  --bg: oklch(14.5% .006 270);
  --bg-2: oklch(17.5% .007 270);
  --surface: oklch(20.5% .008 270);
  --surface-2: oklch(24% .009 270);
  --line: oklch(100% 0 0 / .09);
  --line-strong: oklch(100% 0 0 / .18);
  --text: oklch(95% .008 85);
  --muted: oklch(74% .012 85);
  --gold: oklch(85% .07 82);
  --gold-deep: oklch(70% .085 75);
  --on-gold: oklch(18% .02 75);
  --ok: oklch(80% .1 155);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: 'Archivo', system-ui, sans-serif;
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--display);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--on-gold); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 10px; border: 2px solid var(--bg); }
html { scrollbar-color: var(--surface-2) var(--bg); }
h1, h2, h3, h4, p { margin: 0; }
p { max-width: 62ch; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: normal; color: var(--gold); }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(1280px, calc(100% - clamp(32px, 8vw, 112px))); margin-inline: auto; }
.section { padding-block: clamp(96px, 12vw, 168px); }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 50; padding: 12px 20px; background: var(--gold); color: var(--on-gold); border-radius: 999px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Type scale */
h1, h2 { font-family: var(--display); font-weight: 380; font-stretch: 118%; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.4vw, 6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
h3 { font-weight: 500; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.15; }

/* Buttons and links */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .5s var(--ease);
}
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 16px; }
.btn-primary { background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 24px -12px oklch(0% 0 0 / .7); }
.btn-primary:hover { background: oklch(91% .055 85); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg, .text-link:hover svg { transform: translate(2px, -2px); }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--gold); font-weight: 500;
  background: linear-gradient(currentColor 0 0) left calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.text-link:hover { background-size: 100% 1px; }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--header-h);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: oklch(14.5% .006 270 / .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-content { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 26px; font-weight: 600; font-stretch: 112%; letter-spacing: -.05em; }
.brand span { color: var(--gold); }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 14px; }
.main-nav a { position: relative; padding-block: 12px; color: var(--muted); transition: color .3s; }
.main-nav a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.main-nav a:hover, .main-nav a.is-active { color: var(--text); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.main-nav .nav-cta { padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); transition: background-color .3s, color .3s, border-color .3s; }
.main-nav .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.menu-toggle { display: none; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding-block: calc(var(--header-h) + 48px) clamp(56px, 8vh, 96px); overflow: hidden; isolation: isolate; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; z-index: -1; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero-inner { display: grid; gap: clamp(28px, 4vw, 48px); }
.hero-status { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 14px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: oklch(17.5% .007 270 / .6); font-size: 13px; color: var(--muted); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.hero-foot p { color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-cue { position: absolute; right: clamp(16px, 4vw, 56px); top: 50%; display: grid; place-items: center; width: 44px; height: 72px; }
.scroll-cue span { position: relative; width: 1px; height: 64px; background: var(--line-strong); overflow: hidden; }
.scroll-cue span::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateY(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* Line mask reveal (only hidden when JS runs) */
.split-lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-lines .line > span { display: block; transition: transform 1.3s var(--ease); }
.js .split-lines:not(.is-in) .line > span { transform: translateY(105%); }
.split-lines .line:nth-child(2) > span { transition-delay: .09s; }
.split-lines .line:nth-child(3) > span { transition-delay: .18s; }

.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; margin: 0; padding: 0; list-style: none; }
.marquee li { display: flex; align-items: center; gap: 40px; padding-right: 40px; font-size: clamp(18px, 2vw, 26px); font-stretch: 115%; font-weight: 350; color: var(--muted); white-space: nowrap; }
.marquee li::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Section head */
.section-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head p { color: var(--muted); justify-self: end; max-width: 40ch; }

/* Spotlight: border and surface light follow the cursor */
.spotlight { position: relative; --mx: 50%; --my: 50%; }
.spotlight::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: radial-gradient(420px circle at var(--mx) var(--my), oklch(85% .07 82 / .55), transparent 45%);
  -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 .5s;
}
.spotlight::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px circle at var(--mx) var(--my), oklch(85% .07 82 / .05), transparent 40%); opacity: 0; transition: opacity .5s; }
.spotlight:hover::before, .spotlight:hover::after { opacity: 1; }

/* Work: stacked sticky cases */
.stack { display: grid; gap: clamp(24px, 4vw, 48px); }
.case {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: 28px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  box-shadow: 0 -20px 60px -20px oklch(0% 0 0 / .6);
  transform-origin: 50% 0; transform: scale(var(--s, 1)); filter: brightness(var(--b, 1));
  will-change: transform;
}
.case-text { display: grid; gap: 18px; align-content: center; }
.case-index { font-size: 13px; color: var(--gold); }
.case h3 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; font-stretch: 118%; letter-spacing: -.035em; }
.case p { color: var(--muted); }
.case-visual { display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); aspect-ratio: 1440 / 1000; background: var(--bg); }
.case-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.4s var(--ease); }
.case:hover .case-visual img { transform: scale(1.04); }

/* Services */
.services { border-top: 1px solid var(--line); }
.services-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.services-intro { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 24px; }
.services-intro p { color: var(--muted); }
.service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.service { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 40px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.service::before { content: ''; position: absolute; inset: 0 auto -1px 0; width: 100%; height: 1px; top: auto; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.service:hover::before { transform: scaleX(1); }
.service h3 { font-size: clamp(20px, 1.9vw, 26px); transition: transform .6s var(--ease), color .4s; }
.service:hover h3 { transform: translateX(8px); color: var(--gold); }
.service p { color: var(--muted); }
.service-own { grid-template-columns: 1fr; margin-top: 24px; padding: 32px; border: 1px solid oklch(85% .07 82 / .35); border-radius: 20px; background: radial-gradient(120% 140% at 100% 0%, oklch(85% .07 82 / .1), transparent 60%); }
.service-own::before { display: none; }
.service-own h3 { color: var(--gold); font-size: clamp(24px, 2.4vw, 32px); }
.service-own:hover h3 { transform: none; }
.service-own .text-link { justify-self: start; }

/* Lab */
.lab-section { background: var(--bg-2); border-block: 1px solid var(--line); }
.lab-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: 28px; background: var(--bg); }
.lab-intro { display: grid; gap: 18px; align-content: start; }
.lab-intro h3 { font-size: 26px; font-stretch: 112%; }
.lab-intro p, .lab-intro ul { color: var(--muted); font-size: 14px; }
.lab-intro ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.lab-intro li::marker { color: var(--gold-deep); }
.demo-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); margin-bottom: 12px; }
.demo-tab { flex: 1; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; transition: background-color .3s, color .3s; }
.demo-tab:hover { color: var(--text); }
.demo-tab.is-active { background: var(--surface-2); color: var(--text); }
.demo-stage { min-width: 0; min-height: 460px; padding: clamp(16px, 2.4vw, 28px); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.demo-panel.is-active { animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-action, .reset-action { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; transition: background-color .3s, border-color .3s; }
.mini-action { border: 0; background: var(--gold); color: var(--on-gold); font-weight: 500; }
.mini-action:hover { background: oklch(91% .055 85); }
.reset-action { border: 1px solid var(--line-strong); background: transparent; }
.reset-action:hover { border-color: var(--text); }
.demo-feedback { margin-block: 14px 20px; font-size: 13px; color: var(--muted); }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 14px; overflow: hidden; background: var(--line); }
.metric-row div { display: grid; gap: 4px; padding: 18px; background: var(--surface-2); }
.metric-row span, .demo-table span { font-size: 12px; color: var(--muted); }
.metric-row strong { font-size: clamp(20px, 2.2vw, 28px); font-weight: 450; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.bar-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; padding: 0; list-style: none; }
.bar-chart li { display: grid; gap: 6px; font-size: 13px; }
.chart-plot { position: relative; height: 120px; border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.chart-plot span { position: absolute; inset: auto 0 0; height: var(--value); background: linear-gradient(var(--gold), var(--gold-deep)); border-radius: 10px 10px 0 0; opacity: .85; }
.bar-chart strong { font-weight: 500; }
.bar-chart b { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-table { display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--line); }
.demo-table div { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; background: var(--surface-2); font-size: 14px; }
.demo-table strong { font-weight: 500; }
.demo-table em { font-size: 12px; }
.pipeline-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pipeline-board > div { display: grid; gap: 8px; align-content: start; min-height: 220px; padding: 12px; border-radius: 14px; background: var(--bg-2); }
.pipeline-board h4 { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.lead-card { display: grid; gap: 2px; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.lead-card span { font-size: 12px; color: var(--muted); }
.lead-card.is-won { border-color: oklch(85% .07 82 / .45); }
.lead-card.is-new { animation: panelIn .6s var(--ease); border-color: oklch(85% .07 82 / .45); }
.crm-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.crm-summary div { display: grid; gap: 2px; padding: 16px; border-radius: 14px; background: var(--surface-2); }
.crm-summary strong { font-weight: 450; font-size: 20px; font-variant-numeric: tabular-nums; }
.crm-summary span { font-size: 12px; color: var(--muted); }
.chat-demo { display: grid; gap: 16px; }
.chat-header { display: grid; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat-header span { font-size: 12px; color: var(--muted); }
.chat-header strong { font-weight: 500; }
.chat-messages { display: grid; gap: 10px; align-content: start; height: 260px; overflow-y: auto; padding-right: 6px; }
.chat-messages p { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: 14px; animation: panelIn .5s var(--ease); }
.bot-message { justify-self: start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.user-message { justify-self: end; background: var(--gold); color: var(--on-gold); border-bottom-right-radius: 6px; }
.chat-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-options button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: 14px; transition: border-color .3s, color .3s; }
.chat-options button:hover { border-color: var(--gold); color: var(--gold); }

/* Store */
.store-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.store-copy { display: grid; gap: 24px; justify-items: start; }
.store-copy p { color: var(--muted); }
.store-products { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.product { border-radius: 22px; }
.product a { display: grid; gap: 10px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, var(--surface), var(--bg-2)); transition: transform .6s var(--ease); }
.product a:hover { transform: translateY(-4px); }
.product-tag { font-size: 13px; color: var(--gold); }
.product strong { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; font-stretch: 115%; letter-spacing: -.03em; line-height: 1.15; }
.product-desc { color: var(--muted); }
.product-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 500; }

/* Process */
.process { border-top: 1px solid var(--line); }
.process-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); }
.process-intro { display: grid; gap: 24px; align-content: start; }
.process-intro p { color: var(--muted); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.step:first-child { border-top: 1px solid var(--line); }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 14px; color: var(--gold); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 21px; margin-bottom: 6px; }
.step p { color: var(--muted); }

/* Contact */
.contact { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(120px, 16vw, 220px); border-top: 1px solid var(--line); text-align: center; }
.contact-glow { position: absolute; left: 50%; top: 60%; z-index: -1; width: min(1100px, 140vw); aspect-ratio: 2 / 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, oklch(85% .07 82 / .16), transparent); filter: blur(20px); animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
.contact-inner { display: grid; justify-items: center; gap: 32px; }
.contact h2 { font-size: clamp(2.6rem, 7vw, 6rem); }
.contact p { color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); max-width: 50ch; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 32px; font-size: 14px; color: var(--muted); }
.footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-footer .brand { font-size: 22px; color: var(--text); }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; transition: color .3s; }
.site-footer nav a:hover { color: var(--gold); }

/* Responsive */
@media (max-width: 1000px) {
  .case { grid-template-columns: 1fr; }
  .case-visual { order: -1; }
  .services-layout, .process-layout, .store-layout { grid-template-columns: 1fr; }
  .services-intro { position: static; }
  .lab-shell { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .menu-toggle { position: relative; z-index: 2; display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; }
  .menu-toggle span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform .4s var(--ease); }
  .menu-toggle.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 0 clamp(16px, 8vw, 56px); background: var(--bg); font-size: 30px; font-stretch: 115%; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
  .main-nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease); }
  .main-nav a { color: var(--text); }
  .main-nav .nav-cta { margin-top: 24px; font-size: 18px; padding: 14px 24px; }
  .nav-open { overflow: hidden; }
  .nav-open .site-header { background: var(--bg); }
  .hero-foot { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .section-head { grid-template-columns: 1fr; }
  .section-head p { justify-self: start; }
  .case { position: relative; top: auto; transform: none; filter: none; border-radius: 22px; }
  .service { grid-template-columns: 1fr; }
  .service-own { padding: 24px; }
  .metric-row, .bar-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-row div:last-child { grid-column: 1 / -1; }
  .pipeline-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-table div { grid-template-columns: 70px minmax(0, 1fr) auto; padding: 12px; }
  .crm-summary { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .hero-actions .btn, .contact-actions .btn { width: 100%; white-space: normal; text-align: center; }
  .btn-lg { padding: 0 20px; }
  .pipeline-board { grid-template-columns: 1fr; }
  .pipeline-board > div { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .split-lines:not(.is-in) .line > span, .js .reveal { transform: none; opacity: 1; filter: none; }
  .marquee-track { animation: none; }
}

.catalog .store-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog .product strong { font-size: clamp(19px, 1.7vw, 24px); }
@media (max-width: 720px) { .catalog .store-products { grid-template-columns: 1fr; } }

.catalog .product:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Product checkout links */
.script-status { display: grid; gap: 12px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, var(--surface), var(--bg-2)); }
.script-status strong { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; }
.script-status p { margin: 0; color: var(--muted); }
.catalog .store-layout { align-items: start; }
.catalog .product { border: 1px solid var(--line); background: linear-gradient(150deg, var(--surface), var(--bg-2)); transition: transform .6s var(--ease); }
.catalog .product:hover { transform: translateY(-4px); }
.catalog .product-inner { display: grid; gap: 10px; width: 100%; padding: clamp(24px, 3vw, 36px); }
.catalog .product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.catalog .product a.product-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 13px; transition: color .3s, border-color .3s; }
.catalog .product a.product-action:hover { transform: none; border-color: var(--gold); color: var(--gold); }