/* The Cloud Catalysts: site styles
   Palette sampled from the logo mark: navy #022A5E → blue #015CBF → #008EFA → cyan #00D5FB.
   The mark's navy half vanishes on dark backgrounds, so the logo only ever sits on light surfaces. */

:root {
  --navy-900: #051A38;
  --navy-800: #0A2448;
  --navy: #022A5E;
  --blue: #015CBF;
  --blue-bright: #008EFA;
  --cyan: #00D5FB;
  --grad: linear-gradient(100deg, var(--navy) 0%, var(--blue) 45%, var(--blue-bright) 75%, var(--cyan) 100%);

  --ink: #0B1B33;
  --ink-soft: #2C3E58;
  --muted: #5A6B82;
  --line: #DFE6EF;
  --line-strong: #C9D4E2;
  --bg: #FFFFFF;
  --tint: #F4F8FC;
  --tint-2: #EAF2FB;
  --ok: #0E8A6A;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(5, 26, 56, .06), 0 12px 32px -12px rgba(5, 26, 56, .18);
  --shadow-lg: 0 2px 4px rgba(5, 26, 56, .06), 0 30px 60px -24px rgba(2, 42, 94, .35);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.mono { font-family: var(--font-mono); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } body { font-size: 16px; } }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  text-decoration: none; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 60%, var(--blue-bright) 100%);
  box-shadow: 0 8px 20px -8px rgba(1, 92, 191, .6);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(1, 92, 191, .7); }
.btn-ghost { color: var(--navy); background: rgba(255,255,255,.7); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--navy); background: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(5, 26, 56, .4); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 48px; height: auto; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-the {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; letter-spacing: .42em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 4px; padding-left: 1px;
}
.brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.brand-name b { color: var(--navy); font-weight: 700; }
.brand-name i { font-style: normal; color: #0386D9; }
.brand-sm img { width: 36px; }
.brand-sm .brand-name { font-size: 14px; }

.nav-links { display: flex; gap: 34px; }
.nav-links a {
  position: relative; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink-soft); padding: 6px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--navy); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); opacity: .55; }
.nav-cta { display: flex; align-items: center; gap: 10px; }

.menu-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px; color: var(--navy); cursor: pointer; }
.menu-toggle svg { display: block; width: 22px; height: 22px; }
.mobile-menu { display: none; flex-direction: column; padding: 8px 16px 16px; border-top: 1px solid var(--line); background: #fff; }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 14px 4px; text-decoration: none; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a[aria-current="page"] { color: var(--navy); }
.mobile-menu a[aria-current="page"]::before { content: ""; display: inline-block; vertical-align: middle; width: 14px; height: 2px; border-radius: 2px; background: var(--grad); margin-right: 10px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 480px) {
  .nav-cta .btn { display: none; }
  .brand-name { font-size: 15px; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 112px; overflow: hidden; isolation: isolate; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(640px 420px at 88% 18%, rgba(0, 213, 251, .20), transparent 70%),
    radial-gradient(720px 520px at 70% 90%, rgba(0, 142, 250, .14), transparent 70%),
    radial-gradient(600px 480px at 0% 0%, rgba(2, 42, 94, .08), transparent 70%),
    linear-gradient(180deg, #fff 0%, var(--tint) 100%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(2, 42, 94, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 42, 94, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero { padding: 64px 0 80px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 12px;
  box-shadow: 0 2px 8px -4px rgba(5, 26, 56, .2); margin-bottom: 26px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(14, 138, 106, .15); flex: none; }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); max-width: 15ch; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 24px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--ink-soft); max-width: 48ch; }
.hero-ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

/* readout card */
.readout { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.readout-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: var(--navy-900); color: #B9C8DD; font-size: 12.5px;
  border-bottom: 2px solid transparent;
  border-image: var(--grad) 1;
}
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); color: var(--cyan); }
.live .dot { background: var(--cyan); box-shadow: 0 0 0 0 rgba(0, 213, 251, .6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 213, 251, .55); } 70% { box-shadow: 0 0 0 8px rgba(0, 213, 251, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 213, 251, 0); } }
.readout-body { padding: 22px 22px 20px; }
.readout-title { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.metrics { margin: 0; }
.metrics div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.metrics div:first-child { border-top: 0; }
.metrics dt { font-size: 14.5px; color: var(--ink-soft); }
.metrics dd { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--navy); white-space: nowrap; }
.readout-foot { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.readout-foot a { color: var(--blue); font-weight: 700; text-decoration: none; }
.readout-foot a:hover { text-decoration: underline; }

/* ---------- sections ---------- */
.section { padding: 104px 0; }
.section-tint { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .section { padding: 72px 0; } }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
@media (max-width: 760px) { .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; } }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--blue);
  margin-bottom: 14px;
}
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); max-width: 18ch; }
.section-note { max-width: 36ch; color: var(--muted); font-size: 16px; text-align: right; }
@media (max-width: 760px) { .section-note { text-align: left; } }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  position: relative; padding: 32px 28px 30px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--grad); opacity: .9;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 22px;
  color: var(--blue); background: linear-gradient(135deg, rgba(2, 42, 94, .06), rgba(0, 213, 251, .16));
}
.icon svg { width: 24px; height: 24px; }
.pillar h3 { font-size: 20px; margin-bottom: 12px; }
.pillar p { color: var(--muted); font-size: 15.5px; }

/* ---------- proof ---------- */
.proof {
  display: grid; grid-template-columns: 1.25fr .75fr; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } }
.proof-main { padding: 48px 44px; }
@media (max-width: 640px) { .proof-main { padding: 32px 22px; } }
.tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ok);
  background: rgba(14, 138, 106, .08); border: 1px solid rgba(14, 138, 106, .2); padding: 5px 12px; border-radius: 999px;
}
.tag .dot { box-shadow: none; width: 7px; height: 7px; }
.proof-main h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 16px; }
.proof-main > p { color: var(--ink-soft); font-size: 16px; margin-bottom: 28px; }
blockquote {
  margin: 0; padding: 20px 22px; border-radius: var(--radius-sm);
  background: var(--tint); border-left: 3px solid; border-image: linear-gradient(180deg, var(--blue), var(--cyan)) 1;
}
blockquote p { font-size: 16px; color: var(--ink); }
blockquote cite { display: block; margin-top: 12px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--navy); }
.proof-stats {
  margin: 0; padding: 44px 36px; display: flex; flex-direction: column; justify-content: center;
  color: #fff; position: relative; isolation: isolate;
  background: radial-gradient(420px 320px at 100% 0%, rgba(0, 213, 251, .28), transparent 70%), linear-gradient(160deg, var(--navy-900), var(--navy) 70%, #04407F);
}
.proof-stats div { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.proof-stats div:first-child { border-top: 0; padding-top: 0; }
.proof-stats div:last-child { padding-bottom: 0; }
.proof-stats dt { font-size: 14px; color: #A9BDD6; }
.proof-stats dd { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; color: #fff; }

/* ---------- services ---------- */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }
.service { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 32px 0; border-top: 1px solid var(--line); }
.num {
  font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.service h3 { font-size: 19px; margin-bottom: 10px; }
.service p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }
.fit {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue);
  background: var(--tint-2); border-radius: 6px; padding: 5px 10px; line-height: 1.4;
}

/* Link out of the six-item summary on the homepage to the full list.
   A ruled text link, not a button, so it closes the list instead of floating under it. */
.services-more { margin-top: 4px; padding-top: 30px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--muted); }
.services-more a { color: var(--blue); font-weight: 700; text-decoration: none; white-space: nowrap; }
.services-more a:hover { text-decoration: underline; }

/* Visually hidden: screen-reader-only text, e.g. the new-tab notice on outbound links. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- platforms band ---------- */
/* A quiet tint band between two white sections. No card, no shadow: this is a
   capability statement, not a credential, so it must not echo .badge in #credentials. */
.platforms { padding: 44px 0; background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .platforms { padding: 36px 0; } }
.platforms-inner { text-align: center; }
.platforms-title {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 26px;
}
/* Marks are trimmed to their own ink, so optical weight is set by the render size,
   not by a shared pixel height. align-items: center holds the common baseline. */
.platform-marks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 56px;
}
.platform-marks img { display: block; max-width: 100%; }
.pm-anthropic { width: 179px; height: 22px; }
.pm-openai { width: 109px; height: 30px; }
.pm-aws { width: 63px; height: 38px; }
@media (max-width: 560px) { .platform-marks { gap: 24px 40px; } }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 40px; } }
.about-copy p { color: var(--ink-soft); margin-bottom: 18px; max-width: 60ch; }
.founder { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-strong); color: var(--muted) !important; font-size: 15.5px; }
.founder strong { color: var(--navy); }
.creds { list-style: none; margin: 0; padding: 8px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.creds li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.creds li:first-child { border-top: 0; }
.check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad);
  -webkit-mask: radial-gradient(circle, #000 99%, transparent 100%);
  position: relative;
}
.check::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}

/* ---------- credentials ---------- */
/* White-to-tint wash keeps this distinct from the flat tint of #about above,
   and keeps the navy/silver badge artwork on a light surface. */
.credentials { background: linear-gradient(180deg, #fff 0%, var(--tint) 100%); }
/* Capped width so seven badges settle into a centred 4 + 3, not a row of six and an orphan. */
.badge-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.badge {
  flex: 0 1 168px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 14px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.badge:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.badge-art { display: flex; align-items: center; justify-content: center; height: 96px; }
/* Sources are 384px square (313px tall for the lockup) and render at 92px, so
   there is 4x headroom and no upscaling on 1x or 2x displays. Both axes are
   pinned to whole pixels, and a half-pixel box is what makes badge art look soft. */
.badge-art img { width: 92px; height: 92px; }
.badge-art .badge-lockup { width: 92px; height: 75px; }
.badge-name { font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--ink-soft); }
@media (max-width: 900px) { .badge-grid { gap: 16px; } .badge { flex: 0 1 148px; } }
@media (max-width: 420px) { .badge { flex: 0 1 44%; padding: 18px 10px 16px; gap: 12px; } }

/* ---------- interior page head ---------- */
.page-head { position: relative; padding: 88px 0 76px; overflow: hidden; isolation: isolate; }
@media (max-width: 700px) { .page-head { padding: 60px 0 52px; } }
.page-head h1 { font-size: clamp(32px, 4.4vw, 50px); max-width: 17ch; }
.page-head .lede { max-width: 52ch; }

/* ---------- long-form text (privacy policy) ---------- */
.prose { max-width: 760px; }
.prose .updated { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.prose h2 { font-size: clamp(20px, 2.2vw, 24px); margin: 44px 0 12px; }
.prose p { color: var(--ink-soft); line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose code { font-family: var(--font-mono); font-size: .88em; overflow-wrap: anywhere; }

/* ---------- case studies ---------- */
/* One <article class="case"> per study. Adding another needs no new CSS. */
.cases { display: flex; flex-direction: column; }
.case + .case { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--line-strong); }
@media (max-width: 700px) { .case + .case { margin-top: 56px; padding-top: 56px; } }
.case-next { padding: 72px 0; background: #fff; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .case-next { padding: 56px 0; } }
.case-next-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.case-next h2 { font-size: clamp(24px, 2.8vw, 34px); max-width: 22ch; }

/* ---------- contact ---------- */
.contact { position: relative; padding: 104px 0; color: #fff; overflow: hidden; isolation: isolate; background: var(--navy-900); }
@media (max-width: 700px) { .contact { padding: 72px 0; } }
.contact-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 460px at 100% 0%, rgba(0, 213, 251, .22), transparent 70%),
    radial-gradient(640px 520px at 0% 100%, rgba(1, 92, 191, .35), transparent 70%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 90%);
}
.contact .kicker { color: var(--cyan); }
.contact .section-note { color: #A9BDD6; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-copy p { color: #C9D6E6; font-size: 17px; max-width: 42ch; }
.direct { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); font-size: 15px; }
.direct a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(0, 213, 251, .5); padding-bottom: 2px; overflow-wrap: anywhere; }
.direct a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }

.contact-form {
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 640px) { .contact-form { padding: 22px 18px; } }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; color: #C9D6E6; }
.field input, .field textarea {
  width: 100%; background: rgba(5, 26, 56, .55); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  padding: 12px 14px; font: inherit; font-size: 16px; border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 213, 251, .2); }
.field.invalid input, .field.invalid textarea { border-color: #FF8A8A; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn-primary { align-self: flex-start; background: linear-gradient(100deg, var(--blue) 0%, var(--blue-bright) 60%, var(--cyan) 100%); }
.contact-form .btn-primary[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-msg { min-height: 22px; font-size: 14.5px; color: var(--cyan); }
.form-msg.error { color: #FFB4B4; }

/* ---------- footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 28px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.legal { font-size: 13.5px; color: var(--muted); }
.footer-contact { font-size: 13.5px; color: var(--muted); }
.footer-contact a { color: var(--ink-soft); text-decoration: none; }
.footer-contact a:hover { color: var(--blue); }

/* ---------- reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 404 ---------- */
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 32px 16px; position: relative; isolation: isolate; }
.nf img { width: 120px; margin: 0 auto 28px; }
.nf h1 { font-size: clamp(30px, 5vw, 44px); margin: 12px 0 14px; }
.nf p { color: var(--muted); margin-bottom: 28px; }
.kicker-center { justify-content: center; }

/* ---------- marketplace link ---------- */
.marketplace { margin: 34px 0 0; text-align: center; font-size: 15px; }
.marketplace a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease;
}
.marketplace a:hover, .marketplace a:focus-visible { color: var(--navy-900); border-bottom-color: currentColor; }