/* ==========================================================================
   Build It Simple - design system for the marketing site, extracted from the
   app (BuildItSimple/wwwroot/css/site.css). Names match the app's tokens.
   Fonts: the app loads Inter 400-700 + Manrope 600-800 from Google Fonts,
   falling back to the system stack (keep the site's existing <link>).
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;
  --font-body: Inter, -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: Manrope, Inter, -apple-system, "Segoe UI", sans-serif;

  --accent: #007AFF;
  --accent-hover: #1A88FF;
  --accent-pressed: #0062CC;
  --accent-soft: rgba(0, 122, 255, 0.12);

  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --border-color: rgba(0, 0, 0, 0.08);
  --surface: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.72);
  --input-fill: #F2F2F5;
  --input-border: #D5D5DB;
  --hover-fill: #f2f2f7;
  --shadow: 0 2px 18px rgba(0, 0, 0, 0.08);

  --glass-tint: rgba(0, 122, 255, 0.16);
  --glass-tint-hover: rgba(0, 122, 255, 0.25);
  --glass-tint-active: rgba(0, 122, 255, 0.34);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 6px 20px rgba(0, 122, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-blur: blur(28px);
  --nav-bg: rgba(255, 255, 255, 0.55);
  --header-bg: rgba(255, 255, 255, 0.6);

  --brand-bg: #f3f6fc;
  --blob-1: #7cc0ff;
  --blob-2: #b8a4ff;
  --blob-3: #8ff0e0;
  --blob-opacity: 0.45;
  --brand-gradient: linear-gradient(100deg, #007AFF 10%, #6b5cff 55%, #00b3a4 95%);
  --button-gradient: linear-gradient(180deg, #2b8fff, #007AFF 55%, #0066dd);
  --button-glow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 24px -10px rgba(0, 122, 255, 0.75);
  --button-glow-hover: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 30px -10px rgba(0, 122, 255, 0.85);

  --tile-bg: rgba(255, 255, 255, 0.62);
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -22px rgba(20, 40, 90, 0.35);
  --tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 40px -18px rgba(0, 60, 140, 0.45);

  --ok-bg: #D8F5DE;   --ok: #1A7A3A;
  --warn-bg: #FCE6D4; --warn: #A85A1D;
  --info-bg: #D8E9FF; --info: #1D5FA8;
  --bad-bg: #FFE2E2;  --bad: #C0392B;
  --error: #D70015;

  /* Radii used by the app */
  --r-btn: 12px; --r-btn-sm: 9px; --r-btn-lg: 14px;
  --r-tile: 18px; --r-card: 20px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Tokens: dark (system), unless the toggle chose light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text-primary: #f2f4fb;
    --text-secondary: #b7bbcc;
    --border-color: rgba(255, 255, 255, 0.08);
    --surface: rgba(34, 38, 56, 0.95);
    --card-bg: rgba(28, 32, 48, 0.7);
    --input-fill: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.14);
    --hover-fill: rgba(255, 255, 255, 0.08);
    --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --glass-tint: rgba(0, 122, 255, 0.22);
    --glass-tint-hover: rgba(0, 122, 255, 0.32);
    --glass-tint-active: rgba(0, 122, 255, 0.42);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --nav-bg: rgba(28, 32, 48, 0.6);
    --header-bg: rgba(12, 15, 28, 0.7);
    --brand-bg: #070a14;
    --blob-1: #0a4fb0; --blob-2: #4b2fa6; --blob-3: #0b6a63;
    --blob-opacity: 0.5;
    --accent-soft: rgba(0, 122, 255, 0.22);
    --tile-bg: rgba(28, 32, 48, 0.7);
    --tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 50px -16px rgba(0, 90, 220, 0.55);
    --ok-bg: #16402A;   --ok: #7EE2A0;
    --warn-bg: #4D3218; --warn: #FFC08A;
    --info-bg: #1B3558; --info: #9CC8FF;
    --bad-bg: #4A1F22;  --bad: #FF9B93;
    --error: #ff9b93;
  }
}
/* ---------- Tokens: dark (toggle) - keep identical to the block above ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-primary: #f2f4fb;
  --text-secondary: #b7bbcc;
  --border-color: rgba(255, 255, 255, 0.08);
  --surface: rgba(34, 38, 56, 0.95);
  --card-bg: rgba(28, 32, 48, 0.7);
  --input-fill: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.14);
  --hover-fill: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --glass-tint: rgba(0, 122, 255, 0.22);
  --glass-tint-hover: rgba(0, 122, 255, 0.32);
  --glass-tint-active: rgba(0, 122, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --nav-bg: rgba(28, 32, 48, 0.6);
  --header-bg: rgba(12, 15, 28, 0.7);
  --brand-bg: #070a14;
  --blob-1: #0a4fb0; --blob-2: #4b2fa6; --blob-3: #0b6a63;
  --blob-opacity: 0.5;
  --accent-soft: rgba(0, 122, 255, 0.22);
  --tile-bg: rgba(28, 32, 48, 0.7);
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 50px -16px rgba(0, 90, 220, 0.55);
  --ok-bg: #16402A;   --ok: #7EE2A0;
  --warn-bg: #4D3218; --warn: #FFC08A;
  --info-bg: #1B3558; --info: #9CC8FF;
  --bad-bg: #4A1F22;  --bad: #FF9B93;
  --error: #ff9b93;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--brand-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, .brand { font-family: var(--font-head); }
h2 { font-weight: 700; }
a { color: var(--accent); text-decoration: none; }

/* ---------- Animated brand background (markup: <div class="brand-bg"><i class="blob b1"></i><i class="blob b2"></i><i class="blob b3"></i></div>) ---------- */
.brand-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.brand-bg .blob {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(80px); opacity: var(--blob-opacity);
}
.brand-bg .b1 { background: var(--blob-1); top: -18vmax; left: -10vmax; animation: brand-drift1 26s ease-in-out infinite alternate; }
.brand-bg .b2 { background: var(--blob-2); top: 20vh; right: -16vmax; animation: brand-drift2 32s ease-in-out infinite alternate; }
.brand-bg .b3 { background: var(--blob-3); bottom: -22vmax; left: 20vw; animation: brand-drift3 28s ease-in-out infinite alternate; }
@keyframes brand-drift1 { to { transform: translate(14vw, 10vh) scale(1.1); } }
@keyframes brand-drift2 { to { transform: translate(-12vw, 16vh) scale(0.9); } }
@keyframes brand-drift3 { to { transform: translate(-10vw, -14vh) scale(1.15); } }

/* ---------- Gradient headline with shine (app: .site-main h1 / .app-name) ---------- */
.grad-title, .grad {
  font-weight: 800;
  letter-spacing: -0.025em;
  background: var(--brand-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brand-shine 10s linear infinite;
}
@keyframes brand-shine { to { background-position: 200% center; } }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* app: .settings-group-title */

/* ---------- Buttons (app: one size system) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px;
  font: 600 14px/1 var(--font-body); white-space: nowrap;
  border-radius: var(--r-btn); cursor: pointer; text-decoration: none; margin: 0;
  background: var(--glass-tint); color: var(--accent);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--glass-tint-hover); text-decoration: none; }
.btn:active { background: var(--glass-tint-active); transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.btn-primary { background: var(--button-gradient); color: #fff; border: 0; box-shadow: var(--button-glow); font-weight: 700; }
.btn-primary:hover { background: var(--button-gradient); color: #fff; box-shadow: var(--button-glow-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--button-gradient); transform: scale(0.98); }
.btn-secondary { background: var(--input-fill); color: var(--text-primary); border: 1px solid var(--input-border); box-shadow: none; }
.btn-secondary:hover { background: var(--input-border); }
.btn-sm { height: 28px; padding: 0 11px; font-size: 13px; border-radius: var(--r-btn-sm); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 16px; border-radius: var(--r-btn-lg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; }

/* ---------- Glass card (app: .card-section / .detail-section) ---------- */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  padding: 18px 22px;
  box-shadow: var(--tile-shadow);
}
/* Collapsible card, same as the app's job sections */
details.card { padding: 0; overflow: hidden; }
details.card > summary { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; color: var(--text-primary); }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: ""; width: 8px; height: 8px; margin-right: 12px; flex-shrink: 0;
  border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
details.card[open] > summary::before { transform: rotate(45deg); }

/* ---------- Lift tile (app: .mode-button) ---------- */
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; border-radius: var(--r-tile);
  background: var(--tile-bg); color: var(--text-primary);
  border: 1px solid var(--glass-border); box-shadow: var(--tile-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.tile:hover { transform: translateY(-3px); border-color: rgba(0, 122, 255, 0.45); box-shadow: var(--tile-shadow-hover); }
.tile:active { transform: translateY(-1px) scale(0.99); }

/* ---------- Glass pill nav (app: .site-nav) ---------- */
.site-nav {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--nav-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.site-nav a {
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--text-primary);
  transition: background 0.2s ease, color 0.2s ease;
}
.site-nav a:hover { background: var(--accent-soft); text-decoration: none; }
.site-nav a.on { background: var(--glass-tint-hover); color: var(--accent); }
@media (max-width: 1100px) {
  .site-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* ---------- Status pills (app: .status-pill-*) ---------- */
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.status-pill-green  { background: var(--ok-bg);   color: var(--ok); }
.status-pill-orange { background: var(--warn-bg); color: var(--warn); }
.status-pill-blue   { background: var(--info-bg); color: var(--info); }
.status-pill-red    { background: var(--bad-bg);  color: var(--bad); }

/* ---------- Inputs (app: soft blue focus ring) ---------- */
.field {
  font: 500 15px var(--font-body); color: var(--text-primary);
  padding: 10px 12px; border-radius: 10px;
  background: var(--input-fill); border: 1px solid var(--input-border);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- Theme toggle (app: .theme-toggle) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border); background: var(--accent-soft); color: var(--accent);
  cursor: pointer; transition: transform 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }

/* ---------- Scroll reveal (tasteful motion) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .brand-bg .blob, .grad-title, .grad { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .tile { transition: none; }
}

/* ==========================================================================
   Marketing site components - built on the app tokens above.
   ========================================================================== */
:root { --wrap: 1200px; --frame: #0c0e16; --frame-edge: rgba(255,255,255,.10); --laptop-base: linear-gradient(180deg, #e4e7ee, #b9bfcc); --screen-bg: #eef3fb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --laptop-base: linear-gradient(180deg, #4a4f5e, #2a2e3a); } }
:root[data-theme="dark"] { --laptop-base: linear-gradient(180deg, #4a4f5e, #2a2e3a); }

body { line-height: 1.5; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.muted { color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Faint grid over the blobs (site only - not part of the app) */
.brand-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border-color) 1px, transparent 1px), linear-gradient(90deg, var(--border-color) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 15%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 10%, #000 15%, transparent 65%); opacity: .7; }

/* ---------- Nav (the app's glass pill) ---------- */
.nav { position: sticky; top: 12px; z-index: 50; max-width: var(--wrap); margin: 12px auto 0; padding: 0 16px; }
.nav .site-nav { justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; overflow: visible; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--accent); letter-spacing: -.01em; white-space: nowrap; }
.brand svg { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(0,122,255,.7); flex: none; }
.nav .site-nav a.brand { padding: 2px 6px 2px 0; }
.nav .site-nav a.brand:hover { background: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-end { display: flex; align-items: center; gap: 8px; }
.nav .site-nav .nav-end a.btn { color: #fff; padding: 0 11px; border-radius: var(--r-btn-sm); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } }
.scroll-progress { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand-gradient); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .9; pointer-events: none; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 80px 0 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--nav-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.kicker .dot { width: 20px; height: 20px; border-radius: 999px; background: var(--accent); display: grid; place-items: center; }
.kicker .dot::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .6; } }
.hero h1 { margin: 0; font-size: 64px; line-height: 1.03; letter-spacing: -.035em; font-weight: 800; max-width: 1000px; }
.hero h1 .grad { display: inline-block; padding-bottom: .06em; }
.hero .lede { margin: 0; font-size: 20px; line-height: 1.55; color: var(--text-secondary); max-width: 660px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.hero-note { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* Device stage */
.stage { position: relative; margin: 60px auto 0; max-width: 1060px; padding: 0 70px 66px; }
.stage-glow { position: absolute; inset: 10% 8% 0; background: radial-gradient(closest-side, rgba(0,122,255,.42), transparent); filter: blur(46px); z-index: -1; }
.stage .laptop { transform: perspective(1800px) rotateX(calc(var(--tilt, 1) * 9deg)) scale(calc(1 - var(--tilt, 1) * .03)); transform-origin: 50% 0; transition: transform .2s linear; }
.stage .phone { position: absolute; right: 8px; bottom: 0; width: 200px; transform: translateY(calc(var(--sy, 0) * -60px)); }
.stage .phone .phone-in { animation: float 7s ease-in-out infinite; }
.float-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--glass-border); box-shadow: var(--tile-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); white-space: nowrap; }
.float-chip.c1 { left: 0; top: -30px; animation: float 8s ease-in-out infinite; transform: translateY(calc(var(--sy, 0) * -30px)); }
.float-chip.c2 { left: 0; bottom: 0; animation: float 9s ease-in-out -3s infinite; }
.float-chip .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.float-chip .ic svg { width: 15px; height: 15px; }
.float-chip.bad .ic { background: var(--bad-bg); color: var(--bad); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- Device frames ---------- */
.laptop { position: relative; }
.laptop .lid { background: var(--frame); border-radius: 18px 18px 8px 8px; padding: 2.1% 2.1% 2.6%; border: 1px solid var(--frame-edge); box-shadow: 0 40px 80px -40px rgba(10,30,80,.55); position: relative; }
.laptop .lid::before { content: ""; position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2a2f3c; }
.laptop .base { position: relative; height: 16px; margin: 0 -7%; background: var(--laptop-base); border-radius: 2px 2px 16px 16px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.5); }
.laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: rgba(0,0,0,.14); }
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--screen-bg); }
.screen img, .phone .scr img { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .7s ease; }
.screen img.on, .phone .scr img.on { opacity: 1; }
.screen img.on.pan { animation: pan 9s ease-in-out .9s infinite alternate; }
@keyframes pan { to { transform: translateY(calc(-1 * var(--pan, 0%))); } }
.zoomable { cursor: zoom-in; }
.zoom-hint { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-btn-sm); font-size: 12px; font-weight: 700; color: #fff; background: rgba(12,14,22,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.zoomable:hover .zoom-hint, .zoomable:focus-visible .zoom-hint { opacity: 1; transform: none; }

.phone { position: relative; width: 240px; }
.phone .phone-in { background: var(--frame); border-radius: 40px; padding: 9px; border: 1px solid var(--frame-edge); box-shadow: 0 30px 60px -28px rgba(10,30,80,.6), inset 0 0 0 2px rgba(255,255,255,.05); }
.phone .scr { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 32px; background: var(--screen-bg); }
.phone .scr img { height: 100%; object-fit: cover; object-position: top; }
.phone .scr::after { content: ""; position: absolute; top: 7px; left: 50%; width: 30%; height: 18px; transform: translateX(-50%); border-radius: 12px; background: var(--frame); z-index: 2; opacity: .92; }
.phone .scr img:only-of-type, .phone .scr img.solo { opacity: 1; }

/* ---------- Ticker ---------- */
.ticker { margin: 56px 0 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; gap: 10px; width: max-content; animation: ticker 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--tile-bg); border: 1px solid var(--glass-border); white-space: nowrap; }
.ticker span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-group { display: flex; gap: 10px; }

/* Facts row */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.fact-tile { text-align: center; padding: 18px 16px; }
.fact-tile b { font-family: var(--font-head); font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1.1; }
.fact-tile span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* ---------- Sections ---------- */
section { padding: 72px 0; scroll-margin-top: 70px; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sec-head h2 { margin: 10px 0 12px; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.028em; }
.sec-head p { margin: 0 auto; font-size: 18px; line-height: 1.55; color: var(--text-secondary); }

/* ---------- Workflow strip ---------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.flow-line { position: absolute; left: 8%; right: 8%; top: 42px; height: 3px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; z-index: 0; }
.flow-line::after { content: ""; position: absolute; top: 0; left: 0; width: 22%; height: 100%; border-radius: 3px; background: var(--brand-gradient); animation: flowrun 6s linear infinite; }
@keyframes flowrun { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.step { position: relative; z-index: 1; text-align: center; padding: 18px 12px 18px; cursor: pointer; font: inherit; color: inherit; align-items: center; }
.step .num { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #3d9bff, #007AFF); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -10px rgba(0,122,255,.9); margin-bottom: 10px; }
.step .num svg { width: 23px; height: 23px; }
.step b { font-family: var(--font-head); font-size: 17px; font-weight: 800; }
.step small { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.step .go { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--accent); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.step:hover .go, .step:focus-visible .go { opacity: 1; transform: none; }
.step.lit { border-color: rgba(0,122,255,.55); box-shadow: var(--tile-shadow-hover); }
.step.lit .num { animation: lit .9s var(--ease-out); }
@keyframes lit { 40% { transform: scale(1.12); } }

/* ---------- Showcase (tabs) ---------- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; border-radius: 22px; margin: 0 auto 28px; max-width: 1060px; }
.tabs [role="tab"] { flex: none; position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-primary); font: 600 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; overflow: hidden; transition: background .2s, color .2s; }
.tabs [role="tab"] svg { width: 16px; height: 16px; flex: none; }
.tabs [role="tab"]:hover { background: var(--accent-soft); }
.tabs [role="tab"][aria-selected="true"] { background: var(--glass-tint-hover); color: var(--accent); }
.tabs [role="tab"] .prog { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.tabs [role="tab"][aria-selected="true"] .prog { opacity: .8; }
.tabs [role="tab"].timing .prog { animation: prog var(--dur, 9s) linear forwards; }
.showcase.paused .tabs [role="tab"].timing .prog { animation-play-state: paused; }
@keyframes prog { to { transform: scaleX(1); } }

.panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; }
.panel[hidden] { display: none; }
.panel.enter .panel-copy > * { animation: rise .6s var(--ease-out) both; }
.panel.enter .panel-copy > *:nth-child(2) { animation-delay: .05s; } .panel.enter .panel-copy > *:nth-child(3) { animation-delay: .1s; } .panel.enter .panel-copy > *:nth-child(4) { animation-delay: .15s; } .panel.enter .panel-copy > *:nth-child(5) { animation-delay: .2s; } .panel.enter .panel-copy > *:nth-child(6) { animation-delay: .25s; }
.panel.enter .panel-media { animation: rise-media .8s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise-media { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.panel-copy h3 { margin: 8px 0 8px; font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.panel-copy > p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.feat { margin-bottom: 10px; }
.feat > summary { gap: 10px; padding: 14px 18px; }
.feat > summary .ft { flex: 1; }
.feat > summary .ft b { display: block; font-size: 15px; font-weight: 700; }
.feat > summary .ft span { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }
.feat ul { margin: 0; padding: 0 18px 14px 38px; display: grid; gap: 7px; }
.feat li { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.feat li::marker { color: var(--accent); }
.feat[open] { border-color: rgba(0,122,255,.30); }
.panel-media { position: relative; }
.panel-media .phone { position: absolute; right: -14px; bottom: -26px; width: 168px; }
.panel-media .phone .phone-in { animation: float 7s ease-in-out infinite; }
.panel-media.phones { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 10px 0 20px; }
.panel-media.phones .phone { position: relative; right: auto; bottom: auto; width: 220px; margin: 0 -14px; }
.panel-media.phones .phone:nth-child(1) { transform: rotate(-6deg) translateY(18px); z-index: 1; }
.panel-media.phones .phone:nth-child(2) { z-index: 2; }
.panel-media.phones .phone:nth-child(3) { transform: rotate(6deg) translateY(18px); z-index: 1; }
.panel-media.phones .phone:nth-child(2) .phone-in { animation-delay: -2s; }
.shot-caption { margin-top: 26px; min-height: 40px; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.dots { display: flex; gap: 6px; padding-top: 6px; flex: none; }
.dots button { width: 8px; height: 8px; padding: 0; border-radius: 99px; border: 0; background: var(--input-border); cursor: pointer; transition: width .3s var(--ease-out), background .3s; }
.dots button[aria-current="true"] { width: 22px; background: var(--accent); }

/* Assistant mock */
.chat { padding: 0; overflow: hidden; }
.chat-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-color); font-weight: 700; }
.chat-h .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-gradient); color: #fff; }
.chat-h .ic svg { width: 17px; height: 17px; }
.chat-h small { margin-left: auto; font-weight: 600; color: var(--text-secondary); font-size: 12px; }
.chat-b { display: flex; flex-direction: column; gap: 12px; padding: 18px; min-height: 360px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease-out); }
.msg.in { opacity: 1; transform: none; }
.msg.me { align-self: flex-end; background: var(--button-gradient); color: #fff; border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: var(--input-fill); border: 1px solid var(--input-border); border-bottom-left-radius: 6px; }
.msg.ai .row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-top: 1px solid var(--border-color); font-size: 13px; }
.msg.ai .row:first-of-type { margin-top: 6px; }
.msg.ai .acts { display: flex; gap: 6px; margin-top: 10px; }
.chat-note { padding: 0 18px 14px; font-size: 12px; color: var(--text-secondary); }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Field gallery ---------- */
.field-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; }
.field-copy h2 { margin: 10px 0 12px; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.028em; }
.field-copy p { margin: 0 0 18px; font-size: 18px; line-height: 1.55; color: var(--text-secondary); }
.checks { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.45; }
.checks li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; flex: none; border-radius: 999px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.rail-wrap { position: relative; min-width: 0; }
.rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px 26px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail figure { margin: 0; flex: none; width: calc((100% - 44px) / 3); scroll-snap-align: start; }
.rail figure .phone { width: 100%; transition: transform .5s var(--ease-out); }
.rail figure:hover .phone { transform: translateY(-6px); }
.rail figcaption { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.rail figcaption b { display: block; color: var(--text-primary); font-size: 14px; margin-bottom: 2px; }
.rail-ctrl { display: flex; gap: 8px; }

/* ---------- Roles split ---------- */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.role { padding: 28px 26px; gap: 12px; }
.role .r-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #3d9bff, #007AFF); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -10px rgba(0,122,255,.9); }
.role.r2 .r-ic { background: linear-gradient(145deg, #8f7dff, #6b5cff); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -10px rgba(107,92,255,.9); }
.role.r3 .r-ic { background: linear-gradient(145deg, #26d0c0, #00a394); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -10px rgba(0,163,148,.9); }
.role .r-ic svg { width: 24px; height: 24px; }
.role h3 { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.role > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.role .checks { margin: 6px 0 0; gap: 9px; }
.role .checks li { font-size: 14px; font-weight: 500; }
.role::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(0,122,255,.13), transparent 40%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.role:hover::before { opacity: 1; }

/* ---------- Everything grid ---------- */
.all { columns: 3; column-gap: 20px; }
.all .card { break-inside: avoid; margin: 0 0 20px; display: block; padding: 20px 22px; transition: transform .35s var(--ease-out), box-shadow .35s; }
.all .card:hover { transform: translateY(-3px); box-shadow: var(--tile-shadow-hover); }
.all .g-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.all .g-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.all .g-ic svg { width: 18px; height: 18px; }
.all h3 { margin: 0; font-size: 16px; font-weight: 800; }
.all dl { margin: 0; }
.all dt { font-size: 14px; font-weight: 700; margin-top: 10px; }
.all dd { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.all .more { margin-top: 12px; }

/* ---------- Interactive job demo (the original site's demo, restyled to the app) ---------- */
.demo-stage { position: relative; max-width: 1040px; margin: 0 auto; }
.demo-glow { position: absolute; inset: 8% 6% -4%; background: radial-gradient(closest-side, rgba(0,122,255,.35), transparent); filter: blur(40px); z-index: -1; }
.window { border-radius: var(--r-card); overflow: hidden; text-align: left; background: var(--card-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.titlebar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--border-color); }
.titlebar i { width: 11px; height: 11px; border-radius: 999px; display: block; flex: none; }
.titlebar .url { margin-left: 12px; flex: 1; max-width: 380px; padding: 5px 14px; border-radius: 999px; background: var(--input-fill); font-size: 12px; color: var(--text-secondary); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 470px; position: relative; }
.appbar { display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--border-color); overflow: hidden; }
.appbar .brand { font-size: 14px; margin-right: 10px; } .appbar .brand svg { width: 26px; height: 26px; border-radius: 7px; }
.appbar a { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.appbar a.on { background: var(--glass-tint-hover); color: var(--accent); }
.viewport { position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; padding: 22px 24px; overflow-y: auto; transition: transform .6s var(--ease-out), opacity .45s; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.view.detail { transform: translateX(100%); opacity: 0; pointer-events: none; }
.viewport.open .view.list { transform: translateX(-28%) scale(.96); opacity: 0; pointer-events: none; }
.viewport.open .view.detail { transform: none; opacity: 1; pointer-events: auto; }
.view-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.view-h h4, .jd-head h4 { margin: 0; font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--accent); }
.job-row, .job-th { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 64px 150px; align-items: center; gap: 12px; }
.job-th { padding: 0 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.job-row .tag { justify-self: end; }
.job-row .c-pm, .job-row .c-gc { font-size: 13px; color: var(--text-primary); }
.job-row .c-days { font-size: 13px; font-weight: 600; text-align: center; }
.job-th .c-days { text-align: center; }
.job-row { padding: 12px 16px; border-radius: 14px; margin-bottom: 9px; background: var(--card-bg); border: 1px solid var(--border-color); cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.job-row:hover, .job-row.hover { transform: translateY(-2px); box-shadow: var(--tile-shadow-hover); border-color: rgba(0,122,255,.45); }
.job-row .jn { font-weight: 700; font-size: 15px; color: var(--accent); }
.job-row .jm { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.t-ok { background: var(--ok-bg); color: var(--ok); } .t-warn { background: var(--warn-bg); color: var(--warn); }
.t-info { background: var(--info-bg); color: var(--info); } .t-bad { background: var(--bad-bg); color: var(--bad); }
.ripple { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,122,255,.35); transform: translate(-50%, -50%) scale(0); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(40); opacity: 0; } }
.back { margin-bottom: 12px; }
.jd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jd-head .sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.jd-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fact { padding: 11px 12px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border-color); }
.fact span { display: block; font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.fact b { display: block; font-size: 14px; margin-top: 3px; }
.lane { border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border-color); margin-bottom: 10px; overflow: hidden; opacity: 0; transform: translateY(-14px); transition: opacity .45s, transform .5s var(--ease-out), box-shadow .25s; }
.lane:hover { box-shadow: var(--tile-shadow-hover); }
.viewport.open .lane.in { opacity: 1; transform: none; }
.lane-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.lane-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.lane-ic svg { width: 17px; height: 17px; stroke: var(--accent); }
.lane-h .lt { font-weight: 700; font-size: 14px; flex: 1; }
.lane-h .lc { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.chev { width: 16px; height: 16px; stroke: var(--text-secondary); transition: transform .35s; }
.lane.expanded .chev { transform: rotate(180deg); }
.lane-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.lane.expanded .lane-b { grid-template-rows: 1fr; }
.lane-b > div { overflow: hidden; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border-color); font-size: 13px; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; }
.lane.expanded .item { opacity: 1; transform: none; }
.lane.expanded .item:nth-child(2) { transition-delay: .08s; } .lane.expanded .item:nth-child(3) { transition-delay: .16s; }
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 20; pointer-events: none; transition: transform .9s cubic-bezier(.45,.05,.25,1), opacity .3s; opacity: 0; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.cursor.show { opacity: 1; }
.cursor svg { transition: transform .12s; transform-origin: 4px 3px; }
.cursor.press svg { transform: scale(.82); }
.demo-hint { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.contact-copy h2 { margin: 10px 0 12px; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.contact-copy p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.contact-form { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.contact-form .opt { font-weight: 500; }
.contact-form .field { width: 100%; resize: vertical; }
.contact-form .btn { align-self: flex-start; margin-top: 2px; }
.form-status { font-size: 14px; font-weight: 600; min-height: 1em; }
.form-status.ok { color: var(--ok); } .form-status.err { color: var(--bad); }
.hp { position: absolute; left: -9999px; }

/* ---------- CTA banner + footer ---------- */
.cta { border-radius: 28px; padding: 72px 32px; text-align: center; position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0a84ff, #0059d6 60%, #3b2fd1); box-shadow: 0 30px 80px -30px rgba(0,90,220,.8); }
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; }
.cta::before { width: 360px; height: 360px; background: #5ac8fa; top: -140px; left: -80px; animation: brand-drift2 18s ease-in-out infinite alternate; }
.cta::after { width: 300px; height: 300px; background: #af52de; bottom: -140px; right: -60px; animation: brand-drift1 20s ease-in-out infinite alternate; }
.cta > * { position: relative; }
.cta h2 { margin: 0 0 14px; font-size: 42px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.cta p { margin: 0 auto 28px; font-size: 18px; color: rgba(255,255,255,.88); max-width: 560px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-white { background: rgba(255,255,255,.96); color: var(--accent); border: 0; box-shadow: 0 1px 0 #fff inset, 0 14px 30px -12px rgba(0,0,0,.45); }
.btn-white:hover { background: #fff; color: var(--accent-pressed); transform: translateY(-1px); }
.btn-outline-white { color: #fff; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.7); box-shadow: none; }
.btn-outline-white:hover { color: #fff; background: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-white:focus-visible, .btn-outline-white:focus-visible { box-shadow: 0 0 0 4px rgba(255,255,255,.45); }

footer { padding: 40px 0 48px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.foot nav a { padding: 6px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.foot nav a:hover { background: var(--accent-soft); }
.foot small { color: var(--text-secondary); font-size: 13px; }

/* ---------- Lightbox ---------- */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1280px, 94vw); max-height: 92vh; width: auto; overflow: visible; }
.lightbox::backdrop { background: rgba(5,8,18,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in .35s var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }
.lb-card { padding: 12px; border-radius: var(--r-card); background: var(--card-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.lb-card img { max-height: calc(92vh - 90px); width: auto; max-width: 100%; margin: 0 auto; border-radius: 10px; }
.lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; font-size: 13px; color: var(--text-secondary); }

/* ---------- Reveal stagger ---------- */
.stagger > .reveal:nth-child(2) { transition-delay: .07s; } .stagger > .reveal:nth-child(3) { transition-delay: .14s; }
.stagger > .reveal:nth-child(4) { transition-delay: .21s; } .stagger > .reveal:nth-child(5) { transition-delay: .28s; } .stagger > .reveal:nth-child(6) { transition-delay: .35s; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero h1 { font-size: 54px; }
  .panel { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .panel-media { max-width: 720px; margin: 0 auto; width: 100%; }
  .panel-wrap { order: -1; }
  .panel .shot-caption { margin-top: 22px; min-height: 0; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-line { display: none; }
  .all { columns: 2; }
  .field-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appbar .brand span { display: none; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 16px; }
  .nav { padding: 0 10px; }
  .nav-links { display: none; }
  .hero { padding-top: 52px; gap: 16px; }
  .hero h1 { font-size: 40px; }
  .hero .lede { font-size: 17px; }
  .cta-row { flex-direction: column; width: 100%; }
  .cta-row .btn { width: 100%; }
  .stage { padding: 0 0 64px; margin-top: 36px; }
  .stage .phone { width: 128px; right: -4px; bottom: 54px; }
  .stage .laptop { transform: none; margin: 0 52px 0 14px; }
  .laptop .base { margin: 0 -5%; }
  .panel-media .laptop { margin: 0 4%; }
  .float-chip { font-size: 12px; padding: 7px 10px; }
  .float-chip.c1 { left: 0; top: auto; bottom: 0; }
  .float-chip.c2 { display: none; }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fact-tile b { font-size: 26px; }
  section { padding: 56px 0; }
  .sec-head { margin-bottom: 32px; }
  .sec-head h2, .field-copy h2, .contact-copy h2 { font-size: 32px; }
  .sec-head p, .field-copy p { font-size: 16px; }
  .cta h2 { font-size: 30px; }
  .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-pill); margin: 0 -16px 22px; padding: 5px; scroll-padding: 0 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .panel-copy h3 { font-size: 26px; }
  .panel-media .phone { width: 112px; right: -6px; bottom: -18px; }
  .panel-media.phones { padding: 10px 16px 24px; }
  .panel-media.phones .phone { width: 36%; margin: 0 -3%; }
  .flow { grid-template-columns: 1fr 1fr; gap: 10px; }
  .step { padding: 14px 10px; }
  .roles { grid-template-columns: 1fr; }
  .all { columns: 1; }
  .rail { gap: 16px; }
  .rail figure { width: calc((100% - 16px) / 2); }
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 20px; }
  .contact-form .btn { align-self: stretch; }
  .cta { padding: 52px 22px; }
  .app { height: 500px; }
  .appbar { overflow-x: auto; scrollbar-width: none; }
  .view { padding: 16px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .jd-head { flex-direction: column; }
  .jd-actions { justify-content: flex-start; }
  .titlebar .url { max-width: 210px; }
  .foot { justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  .brand-text { display: none; }
  .hero h1 { font-size: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .msg { opacity: 1; transform: none; }
  .stage .laptop { transform: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .ticker-track { width: auto; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; justify-content: center; }
  .ticker-group { flex-wrap: wrap; justify-content: center; }
  .ticker-group[aria-hidden] { display: none; }
}

/* ==========================================================================
   Review fixes
   ========================================================================== */
/* Nav and tab bar: near-solid glass so scrolled content never reads through (the blur stays as an extra) */
:root { --nav-solid: rgba(255, 255, 255, 0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-solid: rgba(20, 24, 38, 0.94); } }
:root[data-theme="dark"] { --nav-solid: rgba(20, 24, 38, 0.94); }
.nav .site-nav, .tabs.site-nav { background: var(--nav-solid); }
/* Soft fade above the floating nav so content doesn't peek through the 12px gap */
.nav::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -12px; width: 100vw; height: 40px; transform: translateX(-50%); background: linear-gradient(var(--brand-bg) 45%, transparent); pointer-events: none; }

/* "Next: ..." at the end of each feature panel */
.next-tab { margin-top: 8px; }

/* Desktop: every panel sits in the same grid cell, so the showcase is as tall as the tallest panel and
   switching tabs never moves the page below it. Hidden panels keep their space but are invisible and inert. */
@media (min-width: 1081px) {
  .showcase { display: grid; grid-template-columns: minmax(0, 1fr); }
  .showcase > .tabs { grid-row: 1; }
  .showcase > .panel { grid-row: 2; grid-column: 1; }
  .showcase > .panel[hidden] { display: grid; visibility: hidden; pointer-events: none; }
}

/* Touch screens have no hover: always show the enlarge badge */
@media (hover: none) {
  .zoom-hint { opacity: 1; transform: none; }
}

/* Dark mode: the app captures are light, so take the glare off */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .screen img, :root:not([data-theme="light"]) .phone .scr img { filter: brightness(.84) contrast(1.04); } }
:root[data-theme="dark"] .screen img, :root[data-theme="dark"] .phone .scr img { filter: brightness(.84) contrast(1.04); }

@media (max-width: 860px) {
  /* Tab bar sticks under the nav so areas can be switched from anywhere in a long panel */
  .tabs { position: sticky; top: 70px; z-index: 40; }
  /* Screenshots: no laptop bezel, a 2x close-up of the screen that slowly pans across it */
  .panel-media .laptop { margin: 0; }
  .panel-media .laptop .lid { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .panel-media .laptop .lid::before, .panel-media .laptop .base { display: none; }
  .panel-media .screen { aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid var(--glass-border); box-shadow: var(--tile-shadow); }
  .screen img { width: 200%; max-width: none; margin-top: -13.5%; }
  .screen img.on, .screen img.on.pan { animation: panx 16s ease-in-out 1.2s infinite alternate; }
  .panel-media .phone { width: 96px; right: 8px; bottom: -18px; }
  /* Demo: job name and status only */
  .job-row, .job-th { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .job-row .tag { justify-self: start; }
  .stage .zoom-hint { display: none; }
  .job-row .c-pm, .job-row .c-gc, .job-row .c-days, .job-th > span:not(:first-child) { display: none; }
  .job-row .jm::after { content: " · " attr(data-pm); }
}
@keyframes panx { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .screen img.on, .screen img.on.pan { animation: none !important; } }