/* ===========================================================================
   ZeroLatch CloudPilot — public site
   Palette is the product's own (validated for contrast and CVD), so the site
   and the app read as one system. Motion is defined here but every transform
   is disabled under prefers-reduced-motion at the bottom of this file.
   ======================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --page:          #f8f8f6;
  --surface-1:     #ffffff;
  --surface-2:     #f2f2ee;
  --surface-glass: rgba(255, 255, 255, .72);
  --text-primary:  #0b0b0b;
  --text-secondary:#52514e;
  --text-muted:    #898781;
  --border:        rgba(11, 11, 11, .10);
  --border-strong: rgba(11, 11, 11, .16);
  --axis:          #c3c2b7;

  --brand:         #2a78d6;
  --brand-deep:    #1c5cab;
  --brand-soft:    #86b6ef;
  --brand-wash:    rgba(42, 120, 214, .10);
  --accent:        #6250d6;
  --accent-wash:   rgba(98, 80, 214, .10);

  --good:          #0ca30c;
  --success-text:  #006300;
  --warning:       #fab219;
  --critical:      #d03b3b;

  --radius-sm: 8px;
  --radius:    13px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(11,11,11,.05), 0 1px 3px rgba(11,11,11,.04);
  --shadow:    0 4px 12px rgba(11,11,11,.06), 0 1px 3px rgba(11,11,11,.05);
  --shadow-lg: 0 18px 44px rgba(11,11,11,.10), 0 4px 12px rgba(11,11,11,.05);
  --shadow-brand: 0 14px 34px rgba(42,120,214,.22);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease:     cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:          #0b0b0c;
    --surface-1:     #16161a;
    --surface-2:     #121215;
    --surface-glass: rgba(22, 22, 26, .74);
    --text-primary:  #f0efec;
    --text-secondary:#c3c2b7;
    --text-muted:    #8e8d87;
    --border:        rgba(255, 255, 255, .10);
    --border-strong: rgba(255, 255, 255, .18);
    --axis:          #383835;
    --brand:         #3987e5;
    --brand-deep:    #86b6ef;
    --brand-soft:    #184f95;
    --brand-wash:    rgba(57, 135, 229, .14);
    --accent:        #9085e9;
    --accent-wash:   rgba(144, 133, 233, .14);
    --success-text:  #0ca30c;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 14px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
    --shadow-brand: 0 14px 34px rgba(57,135,229,.26);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0b0c; --surface-1: #16161a; --surface-2: #121215;
  --surface-glass: rgba(22,22,26,.74);
  --text-primary: #f0efec; --text-secondary: #c3c2b7; --text-muted: #8e8d87;
  --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
  --axis: #383835;
  --brand: #3987e5; --brand-deep: #86b6ef; --brand-soft: #184f95;
  --brand-wash: rgba(57,135,229,.14);
  --accent: #9085e9; --accent-wash: rgba(144,133,233,.14);
  --success-text: #0ca30c;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
  --shadow-brand: 0 14px 34px rgba(57,135,229,.26);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand-deep); }
::selection { background: var(--brand-wash); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* ---------------- header ---------------- */

header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--page) 80%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
header.scrolled { border-bottom-color: var(--border); }

.nav {
  max-width: 1140px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 22px;
}
@media (max-width: 560px) { .nav { padding: 12px 16px; gap: 14px; } }

.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 680; font-size: 16.5px; letter-spacing: -.02em;
  color: var(--text-primary); white-space: nowrap;
}
.logo:hover { color: var(--text-primary); }
.logo .mark {
  width: 27px; height: 27px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(42,120,214,.3);
  transition: transform .4s var(--ease-out);
}
.logo:hover .mark { transform: rotate(-8deg) scale(1.08); }
.logo .mark svg { width: 16px; height: 16px; }
.logo em { font-style: normal; color: var(--brand); }

.nav .links { display: flex; gap: 4px; }
@media (max-width: 860px) { .nav .links { display: none; } }
.nav .links a {
  position: relative; color: var(--text-secondary);
  font-size: 14.5px; font-weight: 550; padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav .links a:hover { color: var(--text-primary); background: var(--surface-2); }
.nav .links a.active { color: var(--text-primary); }
.nav .links a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.grow { flex: 1 1 auto; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
  transition: all .18s var(--ease); flex: none;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); transform: translateY(-1px); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------------- buttons ---------------- */

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 19px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 14.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              border-color .18s var(--ease), background .18s var(--ease);
}
.btn:hover {
  color: var(--text-primary); transform: translateY(-2px);
  box-shadow: var(--shadow); border-color: var(--border-strong);
}
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn.primary:hover { color: #fff; box-shadow: 0 18px 40px rgba(42,120,214,.32); }
/* Sheen sweep on hover — pure CSS, no JS. */
.btn.primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn.primary:hover::after { transform: translateX(120%); }
.btn.sm { padding: 7px 13px; font-size: 13.5px; border-radius: var(--radius-sm); }
.btn.lg { padding: 14px 26px; font-size: 15.5px; border-radius: 12px; }
.btn .arrow { transition: transform .25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------------- hero ---------------- */

.hero { position: relative; padding: 104px 0 68px; overflow: hidden; }
@media (max-width: 760px) { .hero { padding: 64px 0 48px; } }

/* Soft colour fields behind the hero. Pointer-events none so they never
   intercept a click. */
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.orb-1 { width: 520px; height: 520px; top: -190px; left: -130px;
         background: radial-gradient(circle, rgba(42,120,214,.40), transparent 68%); }
.orb-2 { width: 460px; height: 460px; top: -90px; right: -120px;
         background: radial-gradient(circle, rgba(98,80,214,.34), transparent 68%); }
.orb-3 { width: 380px; height: 380px; bottom: -200px; left: 36%;
         background: radial-gradient(circle, rgba(27,175,122,.20), transparent 68%); }
:root[data-theme="dark"] .orb, 
:root:where(:not([data-theme="light"])) .orb { opacity: .34; }

.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 58% at 50% 32%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 58% at 50% 32%, #000 30%, transparent 78%);
  opacity: .5;
}

.hero .wrap { position: relative; z-index: 1; text-align: center; }
.hero .wrap > *:not(.visual-shell) { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 620; letter-spacing: .01em;
  color: var(--text-secondary);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  padding: 6px 14px 6px 7px; border-radius: 999px; margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.eyebrow .pill {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}

h1.display {
  font-size: clamp(34px, 5.6vw, 60px);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 720;
  margin: 0 0 22px; max-width: 21ch; text-wrap: balance;
}
h1.display .grad {
  display: inline-block;
  background: linear-gradient(120deg, var(--brand) 10%, var(--accent) 60%, var(--brand) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s linear infinite;
}
/* Safety net: if background-clip:text is unsupported, show real ink rather
   than nothing at all. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  h1.display .grad { color: var(--brand); -webkit-text-fill-color: currentColor; }
}
@keyframes shimmer { to { background-position: 220% center; } }

/* Each word is wrapped so GSAP can stagger them in. */
.word { display: inline-block; }

p.lead {
  font-size: clamp(16.5px, 2.1vw, 19px); line-height: 1.62;
  color: var(--text-secondary); max-width: 60ch; margin: 0 0 32px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-note { margin-top: 22px; font-size: 13.5px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hero-note .tick { color: var(--success-text); font-weight: 700; }

/* ---------------- product visual ---------------- */

.visual-shell {
  position: relative; margin-top: 60px; perspective: 1600px;
  text-align: left;
}
.visual {
  position: relative; border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-style: preserve-3d;
}
.visual-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.visual-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--axis); opacity: .55; }
.visual-bar .addr {
  margin-left: 10px; font-size: 11.5px; color: var(--text-muted);
  background: var(--surface-1); border: 1px solid var(--border);
  padding: 3px 11px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.visual-body { padding: 20px; }
@media (max-width: 560px) { .visual-body { padding: 14px; } }

.vis-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(134px,100%),1fr)); gap: 11px; margin-bottom: 16px; }
.vis-kpi {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 13px; background: var(--surface-1);
}
.vis-kpi .k-label { font-size: 9.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.vis-kpi .k-value { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.vis-kpi .k-note { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.vis-kpi.accent { border-color: color-mix(in srgb, var(--brand) 34%, transparent); background: var(--brand-wash); }

.vis-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--surface-1); }
.vis-panel h4 { margin: 0 0 2px; font-size: 12.5px; font-weight: 640; }
.vis-panel .p-sub { margin: 0 0 12px; font-size: 11px; color: var(--text-muted); }
.vis-split { display: grid; grid-template-columns: 1.45fr 1fr; gap: 11px; }
@media (max-width: 720px) { .vis-split { grid-template-columns: 1fr; } }

.vis-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 11.5px; }
.vis-row:last-child { margin-bottom: 0; }
.vis-row .r-name { width: 68px; color: var(--text-secondary); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis-row .r-track { display: block; flex: 1 1 auto; height: 15px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.vis-row .r-fill {
  display: block;   /* a plain span is inline, so width/height would be ignored */
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.vis-row .r-value { width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); flex: none; }

/* Floating callout chips around the mock. */
.chip-float {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-glass); backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-lg); white-space: nowrap;
}
.chip-float .ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; color: #fff; flex: none; }
/* Straddle the top and bottom edges so they read as annotations on the
   window rather than overlapping the dashboard content. */
.chip-float.c1 { top: -17px; left: 30px; }
.chip-float.c2 { bottom: -17px; right: 30px; }
@media (max-width: 760px) { .chip-float { display: none; } }

/* ---------------- sections ---------------- */

section { padding: 76px 0; position: relative; }
@media (max-width: 760px) { section { padding: 52px 0; } }
section.alt { background: var(--surface-2); border-block: 1px solid var(--border); }

.sec-head { max-width: 62ch; margin-bottom: 40px; }
.sec-tag {
  display: inline-block; font-size: 11.5px; font-weight: 680;
  text-transform: uppercase; letter-spacing: .1em; color: var(--brand);
  margin-bottom: 13px;
}
h2 { font-size: clamp(25px, 3.6vw, 37px); line-height: 1.14; letter-spacing: -.028em; font-weight: 690; margin: 0 0 12px; }
h3 { font-size: 16.5px; font-weight: 640; letter-spacing: -.012em; margin: 0 0 7px; }
.sub { color: var(--text-secondary); font-size: 16px; margin: 0; }

.grid { display: grid; gap: 18px; }
/* The min() lets a column collapse on a phone, which plain minmax cannot do.
   The floors are chosen so each grid resolves to the column count it is named
   for at the 1140px content width, rather than silently gaining one and
   stranding the last card on a row of its own. */
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(430px,100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(224px,100%), 1fr)); }

.card {
  position: relative; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; overflow: hidden;
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
              border-color .34s var(--ease);
}
.card p { color: var(--text-secondary); font-size: 14.8px; margin: 0; }
.card.lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
/* A cursor-tracked highlight, positioned from JS via --mx/--my. */
.card.lift::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              var(--brand-wash), transparent 42%);
  transition: opacity .34s var(--ease);
}
.card.lift:hover::before { opacity: 1; }

.ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-wash), var(--accent-wash));
  border: 1px solid var(--border); margin-bottom: 15px;
  transition: transform .34s var(--ease-out);
}
.card.lift:hover .ico { transform: scale(1.08) rotate(-5deg); }
.ico svg { width: 20px; height: 20px; stroke: var(--brand); fill: none; stroke-width: 1.8; }

/* ---------------- stats ---------------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%),1fr)); gap: 22px; }
.stat .num {
  font-size: clamp(30px, 4.4vw, 42px); font-weight: 720; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text-primary), var(--brand));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat .cap { font-size: 14px; color: var(--text-secondary); margin-top: 9px; }

/* ---------------- steps ---------------- */

.flow { display: grid; gap: 0; position: relative; }
.flow-item { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding-bottom: 32px; position: relative; }
.flow-item:last-child { padding-bottom: 0; }
.flow-item::before {
  content: ""; position: absolute; left: 22px; top: 44px; bottom: -4px; width: 2px;
  background: linear-gradient(180deg, var(--border-strong), transparent);
}
.flow-item:last-child::before { display: none; }
.flow-num {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: var(--shadow-brand); position: relative; z-index: 1;
}
.flow-body h3 { margin-bottom: 5px; }
.flow-body p { color: var(--text-secondary); font-size: 14.8px; margin: 0; }

/* ---------------- tables / code / misc ---------------- */

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 660; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background .18s var(--ease); }
tbody tr:hover { background: var(--brand-wash); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

pre {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; overflow-x: auto;
  font-size: 13px; line-height: 1.7; margin: 0 0 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
       background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
pre code { background: none; padding: 0; font-size: inherit; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 660; padding: 3px 9px;
  border-radius: 6px; border: 1px solid var(--border); color: var(--text-secondary);
}
.badge.ok { color: var(--success-text); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }

.note {
  border-left: 3px solid var(--brand); background: var(--brand-wash);
  padding: 15px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.8px; margin: 0 0 18px;
}
.note.warn { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.note strong { font-weight: 670; }

/* ---------------- pricing ---------------- */

.toggle {
  display: inline-flex; gap: 3px; padding: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: 32px; flex-wrap: wrap;
}
.toggle button {
  border: none; background: none; padding: 8px 15px; border-radius: 9px;
  font: inherit; font-size: 13.5px; font-weight: 620; color: var(--text-secondary);
  cursor: pointer; transition: all .22s var(--ease);
}
.toggle button:hover { color: var(--text-primary); }
.toggle button[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.toggle .save { color: var(--success-text); font-size: 11.5px; margin-left: 6px; font-weight: 700; }

.price-card {
  display: flex; flex-direction: column; position: relative;
  /* The "most popular" tag sits above the card edge, so it must not be
     clipped by the overflow:hidden that .card sets for its hover wash. */
  overflow: visible;
}
.price-card.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(135deg, var(--brand), var(--accent)) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-lg);
}
.price-card .tag {
  position: absolute; top: -12px; left: 24px;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .07em; box-shadow: var(--shadow-brand);
}
.price-card .amount { font-size: 35px; font-weight: 720; letter-spacing: -.035em; margin: 12px 0 3px; font-variant-numeric: tabular-nums; }
.price-card .amount small { font-size: 14px; color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 18px 0 22px; font-size: 14.3px; color: var(--text-secondary); flex: 1 1 auto; }
.price-card li { padding: 6px 0 6px 25px; position: relative; }
.price-card li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 15px; height: 15px; border-radius: 50%;
  background: color-mix(in srgb, var(--good) 15%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23006300' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.price-card li.off { color: var(--text-muted); }
.price-card li.off::before {
  background: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6h5.2' fill='none' stroke='%23898781' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

/* ---------------- deployment tabs ---------------- */

.tabs {
  display: flex; gap: 4px; padding: 5px; margin-bottom: 28px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: none; border-radius: 9px; padding: 10px 16px;
  font: inherit; font-size: 14.2px; font-weight: 620; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: all .22s var(--ease);
}
.tabs button:hover { color: var(--text-primary); }
.tabs button[aria-selected="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.tabpanel { display: none; }
.tabpanel.active { display: block; animation: fadeUp .42s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 30px 46px; border-left: 2px solid var(--border); margin-left: 15px; }
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: -16px; top: -3px;
  width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
  box-shadow: var(--shadow-brand);
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--text-secondary); font-size: 14.8px; margin: 0 0 12px; }

/* ---------------- CTA ---------------- */

.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 56px 40px; text-align: center;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: var(--shadow-lg);
}
@media (max-width: 560px) { .cta-band { padding: 38px 22px; } }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 18% 22%, rgba(255,255,255,.22), transparent 42%),
                    radial-gradient(circle at 82% 78%, rgba(255,255,255,.14), transparent 42%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 11px; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 54ch; margin: 0 auto 26px; font-size: 16.5px; }
.cta-band .btn { background: #fff; color: var(--brand-deep); border-color: transparent; }
.cta-band .btn:hover { color: var(--brand-deep); }
.cta-band .btn.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.cta-band .btn.ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---------------- footer ---------------- */

footer { border-top: 1px solid var(--border); padding: 48px 0 56px; color: var(--text-secondary); font-size: 14.2px; }
footer .cols { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(130px, 1fr)); gap: 32px; }
footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-primary); margin: 0 0 11px; font-weight: 660; }
footer a { color: var(--text-secondary); display: block; padding: 3px 0; }
footer a:hover { color: var(--brand); }
footer .fine { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------------- reveal (GSAP targets, with a no-JS fallback) ---------- */

/* Visible by default. Hiding is opt-in, applied by motion.js only once GSAP
   has actually loaded — so a CDN miss, a script error or a blocked file
   leaves a readable page rather than a blank one. */
.reveal { opacity: 1; transform: none; }
html.anim .reveal { opacity: 0; transform: translateY(22px); }
html.anim .reveal.shown { opacity: 1; transform: none; }

/* ---------------- motion preferences ------------------------------------
   Anyone who has asked their OS for less motion gets a static page: no
   transforms, no shimmer, no scroll hijacking. Content must never depend on
   an animation having run.                                               */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card.lift:hover, .icon-btn:hover { transform: none !important; }
  h1.display .grad { animation: none; }
}