/* ==========================================================================
   Calvera Labs — design system

   Light is the default and dark is a full counterpart, not an afterthought.
   The page is a rounded white sheet floating on a tinted backdrop; that one
   move is what stops a static marketing site reading as a bare document.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens: light (default) ---------- */
:root {
  --backdrop:      #E8ECF7;
  --sheet:         #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F4F6FB;
  --surface-hover: #FAFBFE;
  --border:        rgba(20, 22, 26, 0.09);
  --border-strong: rgba(20, 22, 26, 0.16);
  --text:          #14161A;
  --text-2:        #6B7280;
  --text-3:        #9AA1AC;
  --accent:        #3B82F6;
  --accent-strong: #2563EB;
  --accent-ink:    #FFFFFF;
  --accent-soft:   rgba(59, 130, 246, 0.09);
  --accent-quiet:  #C3D4F6;
  --glow:          rgba(59, 130, 246, 0.18);
  --footer-bg:     #1B2029;
  --footer-text:   #EAEFF7;
  --footer-muted:  #98A2B3;
  --header-bg:     rgba(255, 255, 255, 0.88);
  --shadow-card:   0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-lift:   0 18px 40px -22px rgba(20, 22, 26, 0.28);
  --success:       #0F9D58;
  --danger:        #D92D20;

  --r-pill:  999px;
  --r-card:  28px;
  --r-sm:    20px;
  --r-sheet: 40px;

  color-scheme: light;
}

/* Dark counterpart. Declared for both the pre-JS system-preference paint and
   the explicit toggle, so neither route can drift from the other. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --backdrop:      #05070A;
    --sheet:         #0E131A;
    --surface:       #151B24;
    --surface-2:     #121821;
    --surface-hover: #1A222D;
    --border:        rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text:          #EAEFF7;
    --text-2:        #9BA7B6;
    --text-3:        #6F7C8C;
    --accent:        #5B9CFF;
    --accent-strong: #7DB1FF;
    --accent-ink:    #06101F;
    --accent-soft:   rgba(91, 156, 255, 0.12);
    --accent-quiet:  #2F4569;
    --glow:          rgba(91, 156, 255, 0.24);
    --footer-bg:     #080C11;
    --footer-text:   #EAEFF7;
    --footer-muted:  #8593A5;
    --header-bg:     rgba(14, 19, 26, 0.88);
    --shadow-card:   0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --shadow-lift:   0 18px 40px -22px rgba(0, 0, 0, 0.7);
    --success:       #34D399;
    --danger:        #FB7185;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --backdrop:      #05070A;
  --sheet:         #0E131A;
  --surface:       #151B24;
  --surface-2:     #121821;
  --surface-hover: #1A222D;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text:          #EAEFF7;
  --text-2:        #9BA7B6;
  --text-3:        #6F7C8C;
  --accent:        #5B9CFF;
  --accent-strong: #7DB1FF;
  --accent-ink:    #06101F;
  --accent-soft:   rgba(91, 156, 255, 0.12);
  --accent-quiet:  #2F4569;
  --glow:          rgba(91, 156, 255, 0.24);
  --footer-bg:     #080C11;
  --footer-text:   #EAEFF7;
  --footer-muted:  #8593A5;
  --header-bg:     rgba(14, 19, 26, 0.88);
  --shadow-card:   0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-lift:   0 18px 40px -22px rgba(0, 0, 0, 0.7);
  --success:       #34D399;
  --danger:        #FB7185;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--backdrop);
  color: var(--text);
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* The page is an inset card with all four corners rounded, floating clear of
   the canvas on every side. Combined with the floating nav pill and the light
   footer below, this is Calvera's own structure rather than a borrowed one. */
.sheet {
  max-width: 1360px;
  margin: 14px auto 0;
  background: var(--sheet);
  border-radius: 34px;
  border: 1px solid var(--border);
  /* Clips the square-cornered sticky header to the rounded top. overflow:clip
     does not create a scrollport, so sticky still resolves against the
     viewport; overflow:hidden here would break it. */
  overflow: clip;
}
@media (max-width: 720px) { .sheet { margin: 8px 8px 0; border-radius: 22px; } }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.55rem, 1.7rem + 3.6vw, 4.5rem); }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.3vw, 3.25rem); letter-spacing: -0.026em; }
h3 { font-size: 1.0625rem; letter-spacing: -0.012em; line-height: 1.3; }
h4 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.container { width: 100%; max-width: 1288px; margin: 0 auto; padding: 0 clamp(1.25rem, 0.7rem + 2vw, 3.5rem); }
.container.narrow { max-width: 1024px; }

section { padding-block: clamp(2.5rem, 1.9rem + 2.4vw, 4.5rem); }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--text-2); line-height: 1.62; }

.eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.7rem 1.1rem; border-radius: 0 0 12px 0; font-weight: 500;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.72rem 1.35rem;
  border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); box-shadow: 0 10px 24px -12px var(--glow); }

.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--text-3); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

/* A plain arrow that slides on hover. Deliberately not a circular badge. */
.btn-ico { width: 13px; height: 13px; flex: none; transition: transform 0.18s ease; }
.btn:hover .btn-ico { transform: translateX(3px); }

/* Inline text link with a trailing arrow glyph drawn as SVG, because the
   Outfit latin subset has no U+2192 and would fall back mid-sentence. */
.section-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
}
.section-link svg { width: 13px; height: 13px; transition: transform 0.18s ease; }
.section-link:hover svg { transform: translate(2px, -2px); }

/* ---------- chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem; font-weight: 500;
  box-shadow: var(--shadow-card);
}

.tag {
  display: inline-flex; align-items: center;
  padding: 0.24rem 0.66rem; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid var(--border); color: var(--text-2);
}
.tag-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-soft); }

/* ---------- header ---------- */
/* Pinned flush to the top, painting an opaque band so content passes behind
   the pill rather than through the gap above it. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 10px clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  background: var(--sheet);
}
.header-inner {
  display: flex; align-items: center; gap: 1.25rem; min-height: 60px;
  padding-inline: clamp(0.85rem, 0.5rem + 1.2vw, 1.4rem);
  background: var(--header-bg);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  max-width: none;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 25px; height: 25px; color: var(--accent); flex: none; }
.brand-name { font-size: 1.0625rem; }

.nav { margin-left: 0.75rem; margin-right: auto; }
.nav ul { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 0.42rem 0.78rem; border-radius: var(--r-pill);
  color: var(--text-2); font-size: 0.9375rem; font-weight: 500;
}
.nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.theme-toggle, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.theme-toggle svg, .nav-toggle svg { width: 16px; height: 16px; }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

.header-cta { display: inline-flex; padding: 0.58rem 1.15rem; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    position: absolute; left: clamp(0.6rem, 0.3rem + 1vw, 1.1rem); right: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
    top: calc(100% + 6px);
    margin: 0; padding: 0.6rem;
    background: var(--sheet); border: 1px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow-lift);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0.1rem; }
  .nav a { padding: 0.7rem 0.9rem; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.hero-grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.02fr 0.98fr; } }

.hero h1 { margin-bottom: 1.35rem; }
.hero-sub { font-size: 1.0625rem; font-weight: 500; color: var(--accent); margin-bottom: 0.85rem; letter-spacing: -0.01em; }

/* The hero's right column is a single card showing the actual portfolio, which
   is both honest about what the studio has and structurally its own thing. */
.showcase {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  border-radius: var(--r-card);
  color: #fff;
  background:
    radial-gradient(120% 130% at 88% 4%, #6AA6FF 0%, transparent 55%),
    radial-gradient(120% 120% at 4% 96%, #1E3A8A 0%, transparent 58%),
    linear-gradient(150deg, #2F63C8 0%, #1B2F63 100%);
}
.showcase-eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
.showcase-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.4rem; }

.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.4rem; }
.showcase-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.showcase-item img { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.showcase-name { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.showcase-cat { font-size: 0.72rem; color: rgba(255, 255, 255, 0.66); }
.showcase-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.showcase-foot p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.showcase-foot a { color: #fff; font-weight: 500; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.showcase-foot a svg { width: 12px; height: 12px; transition: transform 0.18s ease; }
.showcase-foot a:hover svg { transform: translateX(3px); }
@media (max-width: 460px) { .showcase-grid { grid-template-columns: 1fr; } }

/* ---------- page head (inner pages) ---------- */
.page-head { padding-top: clamp(2.75rem, 2rem + 3vw, 5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-head h1 { margin-bottom: 1.2rem; }

/* ---------- inner-page head panel ----------
   Inner pages open on a tinted panel rather than bare text, so /apps, /about
   and /contact carry the same weight as the homepage hero. */
.page-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
}
.page-panel h1 { margin-bottom: 1.1rem; }
.page-panel .lede { max-width: 60ch; }

/* A long intro reads better as two columns than one deep block. */
.intro-cols { display: grid; gap: clamp(1rem, 0.6rem + 1.6vw, 2.5rem); grid-template-columns: 1fr; margin-top: 1.6rem; }
@media (min-width: 860px) { .intro-cols { grid-template-columns: 1fr 1fr; } }
.intro-cols p { color: var(--text-2); }
.intro-cols p + p { margin-top: 1rem; }

/* ---------- compact portfolio overview ----------
   A scannable index above the full entries, so four apps can be taken in at a
   glance before committing to reading any one of them. */
.app-index { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .app-index { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.app-index-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.7rem; padding: 1.5rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.app-index-item:hover { border-color: var(--accent-quiet); transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.app-index-item img { width: 54px; height: 54px; border-radius: 14px; }
.app-index-name { font-weight: 600; letter-spacing: -0.015em; font-size: 0.9375rem; }
.app-index-cat { font-size: 0.8rem; color: var(--text-2); }

/* ---------- contact: form beside the facts ---------- */
.contact-grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.35fr 0.65fr; } }
.contact-aside { display: grid; gap: 1.5rem; }
.contact-aside h3 { margin-bottom: 0.4rem; }
.contact-aside p { color: var(--text-2); font-size: 0.9375rem; }

/* ---------- section heads ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.section-head h2 { margin-bottom: 0.7rem; }
.section-head p { color: var(--text-2); max-width: 60ch; }
.section-head-center { text-align: center; flex-direction: column; align-items: center; }
.section-head-center p { margin-inline: auto; }

/* ---------- panel: a tinted section rendered as one big card ---------- */
.panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
}

.pullquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.35rem;
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }

/* ---------- cards ---------- */
.card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
/* auto-fit rather than a fixed count: the portfolio grows, and a hard-coded
   four-up track leaves a fifth card stranded alone on its own row. */
@media (min-width: 1040px) { .card-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } }

/* Pillar cards carry bullets and a CTA, so they need width. Two-up keeps them
   readable where a four-up track would squeeze each into a column. */
.card-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr); } }

.app-card {
  position: relative; display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow-card); color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.app-card:hover { border-color: var(--accent-quiet); transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.app-card:hover .app-card-name { color: var(--accent); }
.app-card-top { display: flex; align-items: center; gap: 0.85rem; }
.app-card-name { font-weight: 600; letter-spacing: -0.015em; transition: color 0.2s ease; }
.app-card p { color: var(--text-2); font-size: 0.9rem; }
.app-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; }

.value-card {
  padding: 1.6rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.value-card h3 { margin-bottom: 0.55rem; }
.value-card p { color: var(--text-2); font-size: 0.9rem; }
.value-num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); display: block; margin-bottom: 0.9rem; }

/* ---------- service pillars ---------- */
.pillar-card { display: flex; flex-direction: column; }
.pillar-card h3 { margin-bottom: 0.5rem; }
.pillar-icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: 1.1rem; }
.pillar-card .feature-list { margin-top: 1.1rem; }
.pillar-card .feature-list li { font-size: 0.9rem; }
.pillar-link { margin-top: auto; padding-top: 1.5rem; align-self: start; }

/* ---------- numbered process rail ---------- */
.rail { position: relative; margin-bottom: 1.5rem; height: 1px; background: var(--border); }
.rail::before, .rail::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); transform: translateY(-50%);
}
.rail::before { left: 0; }
.rail::after { right: 0; }

.step-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .step-grid { grid-template-columns: repeat(4, 1fr); } }

.step-card {
  padding: 1.5rem 1.35rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface);
}
.step-card .step-num {
  display: block; font-size: 2rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.04em; color: var(--accent-quiet); margin-bottom: 1.1rem;
}
.step-card h3 { margin-bottom: 0.45rem; }
.step-card p { color: var(--text-2); font-size: 0.9rem; }

/* ---------- three-column feature grid split by hairlines ---------- */
.split-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.split-grid > * { padding: 0 0 1.75rem; border-bottom: 1px solid var(--border); }
.split-grid > *:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .split-grid { grid-template-columns: repeat(3, 1fr); }
  .split-grid > * { padding: 0 2rem; border-bottom: 0; border-left: 1px solid var(--border); }
  .split-grid > *:first-child { padding-left: 0; border-left: 0; }
  .split-grid > *:last-child { padding-right: 0; }
}
@media (max-width: 899px) { .split-grid > * + * { padding-top: 1.75rem; } }
.split-grid .feat-icon { width: 24px; height: 24px; color: var(--text); margin-bottom: 1.1rem; }
.split-grid h3 { margin-bottom: 0.5rem; }
.split-grid p { color: var(--text-2); font-size: 0.9375rem; }

/* ---------- split (asymmetric two-column) ---------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.split p { color: var(--text-2); }

.stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stat-list li { display: flex; gap: 1.25rem; padding: 1.05rem 0; border-bottom: 1px solid var(--border); }
.stat-list li:first-child { padding-top: 0; }
.stat-list li:last-child { border-bottom: 0; }
.stat-value { font-weight: 600; letter-spacing: -0.015em; min-width: 8.5rem; flex: none; }
.stat-label { color: var(--text-2); font-size: 0.9375rem; }
@media (max-width: 520px) { .stat-list li { flex-direction: column; gap: 0.3rem; } .stat-value { min-width: 0; } }

.step-list .stat-value { min-width: 10.5rem; display: flex; align-items: baseline; gap: 0.6rem; }
.step-num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
@media (max-width: 520px) { .step-list li { flex-direction: column; gap: 0.35rem; } .step-list .stat-value { min-width: 0; } }

.proof-line { margin-top: 2rem; color: var(--text-2); font-size: 0.9375rem; }

/* ---------- client-work block ---------- */
.build-block {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); grid-template-columns: 1fr;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-2);
}
@media (min-width: 860px) { .build-block { grid-template-columns: 1.05fr 0.95fr; align-items: center; } }
.build-block h2 { margin-bottom: 0.9rem; }
.build-block > div > p { color: var(--text-2); }

.build-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.build-list li { padding: 0.95rem 0; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 0.9375rem; }
.build-list li:first-child { padding-top: 0; }
.build-list li:last-child { border-bottom: 0; }
.build-list strong { display: block; color: var(--text); font-weight: 600; letter-spacing: -0.012em; margin-bottom: 0.15rem; }

/* ---------- app detail ---------- */
.app-entry { padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
.app-entry:last-of-type { border-bottom: 0; }
.app-entry-grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .app-entry-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.app-entry-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; }
.app-entry-head .app-icon { width: 62px; height: 62px; border-radius: 16px; }
.app-entry h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.5rem; }
.app-entry .app-tagline { color: var(--accent); font-weight: 500; font-size: 0.9375rem; }
.app-entry > .app-entry-grid p.app-desc { color: var(--text-2); }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.feature-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-2); font-size: 0.9375rem; }
.feature-list li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.62rem;
  border-radius: 50%; background: var(--accent);
}
.feature-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; }

/* ---------- store badges ---------- */
.store-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 1.1rem; min-width: 160px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease;
}
a.store-badge:hover { border-color: var(--text-3); transform: translateY(-1px); text-decoration: none; }
.store-badge[aria-disabled="true"] { opacity: 0.55; }
.store-badge svg { width: 21px; height: 21px; flex: none; }
.badge-small { display: block; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.badge-big { display: block; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- FAQ accordion ---------- */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.012em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-chevron { width: 16px; height: 16px; flex: none; color: var(--text-3); transition: transform 0.22s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item > p { color: var(--text-2); padding-bottom: 1.4rem; max-width: 76ch; font-size: 0.9375rem; }

/* ---------- CTA: an inset dark card on the page ---------- */
.cta { padding-block: clamp(1rem, 0.5rem + 2vw, 2rem) 0; }
.cta > .container > .cta-card,
.cta-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  background:
    radial-gradient(90% 140% at 88% 0%, rgba(91, 156, 255, 0.30) 0%, transparent 58%),
    linear-gradient(155deg, #1D2432 0%, #12161F 100%);
  color: #fff;
}
.cta h2 { color: #fff; margin-bottom: 0.8rem; max-width: 20ch; }
.cta p { color: rgba(255, 255, 255, 0.75); max-width: 58ch; font-size: 1.0625rem; }
.cta .btn-primary { background: #fff; color: #14161A; }
.cta .btn-primary:hover { background: #EAF0FB; box-shadow: none; }
.cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.30); }
.cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.5); }

/* ---------- footer ---------- */
.site-footer { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--border); }
.footer-inner { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-tag { color: var(--text-2); font-size: 0.9375rem; margin-top: 0.9rem; max-width: 42ch; }
.footer-col h4 { color: var(--text-3); margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a { color: var(--text-2); font-size: 0.9375rem; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 0.875rem;
}
.footer-cta { margin-top: 1.5rem; }

/* ---------- consent banner ----------
   Sits above the page rather than blocking it: analytics is not worth holding
   the content hostage over, and a modal that traps the reader is the dark
   pattern this studio says it does not ship. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); pointer-events: none; }
.consent[hidden] { display: none; }
.consent-card {
  pointer-events: auto;
  max-width: 27rem; margin-left: auto;
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}
@media (max-width: 620px) { .consent-card { max-width: none; } }
.consent-title { font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.consent-copy { color: var(--text-2); font-size: 0.9rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.15rem; }
/* Equal weight, equal width: the refusal must not read as the lesser option. */
.consent-actions .btn { flex: 1 1 0; justify-content: center; padding: 0.6rem 1.15rem; background: var(--surface-2); }
.consent-actions .btn:hover { background: var(--surface-hover); border-color: var(--text-3); }

/* ---------- sitemap page ---------- */
.sitemap-group { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sitemap-group h2 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; }
.sitemap-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sitemap-list li { border-bottom: 1px solid var(--border); }
.sitemap-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.95rem 0; color: var(--text); font-weight: 500; }
.sitemap-list a:hover { color: var(--accent); text-decoration: none; }
.sitemap-note { color: var(--text-2); font-size: 0.875rem; font-weight: 400; }

/* ---------- policy prose ---------- */
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { color: var(--text-2); }
.prose ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-weight: 600; color: var(--text); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.prose td { color: var(--text-2); }
.prose .updated { font-size: 0.875rem; color: var(--text-3); }

/* ---------- forms ---------- */
.form-section { padding-top: 0; }
.field { margin-bottom: 1.35rem; }
.field label { display: block; font-weight: 500; font-size: 0.9375rem; margin-bottom: 0.5rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.field-error { color: var(--danger); font-size: 0.875rem; margin-top: 0.4rem; min-height: 1.2em; }
.form-status { margin-top: 1rem; font-size: 0.9375rem; }
.form-status[data-state="ok"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--danger); }
.direct-line { margin-top: 1.25rem; color: var(--text-2); font-size: 0.9375rem; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.notfound .btn-row { justify-content: center; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}