@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/GeistSans-wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: #ffffff;
  --background-secondary: #ede0f0;
  --surface: #f8f3f9;
  --surface-elevated: #fbf8fc;
  --text-primary: #21172f;
  --text-secondary: #4c3d59;
  --text-muted: #66576f;
  --border: rgba(70, 45, 134, 0.16);
  --border-strong: rgba(70, 45, 134, 0.34);
  --brand-primary: #462d86;
  --brand-secondary: #b793d2;
  --accent: #9169c1;
  --accent-subtle: #dfc8e4;
  --interactive: #6f4aa3;
  --interactive-hover: #58368f;
  --focus-ring: #9169c1;
  --selection-background: #e6b84a;
  --selection-text: #21172f;
  --success: #286d23;
  --green-accent: #82ac33;
}
html.dark {
  color-scheme: dark;
  --background: #120d20;
  --background-secondary: #1b1330;
  --surface: #24193c;
  --surface-elevated: #302049;
  --text-primary: #f2e7f5;
  --text-secondary: #dfc8e4;
  --text-muted: #b793d2;
  --border: rgba(223, 200, 228, 0.16);
  --border-strong: rgba(183, 147, 210, 0.38);
  --brand-primary: #b793d2;
  --brand-secondary: #9169c1;
  --accent: #9169c1;
  --accent-subtle: #302049;
  --interactive: #b793d2;
  --interactive-hover: #dfc8e4;
  --focus-ring: #b793d2;
  --selection-background: #e6b84a;
  --selection-text: #120d20;
  --success: #82ac33;
  --green-accent: #82ac33;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: 'Geist Sans', Arial, sans-serif;
  font-synthesis: none;
  transition: color 300ms ease, background-color 300ms ease;
}
::selection { background: var(--selection-background); color: var(--selection-text); }
a { color: var(--interactive); text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { color: var(--interactive-hover); }
a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.site-nav {
  height: 80px; padding: 0 4.4vw; display: flex; align-items: center; justify-content: space-between;
  font-family: 'Geist Sans', Arial, sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  backdrop-filter: blur(14px); position: relative; z-index: 2;
}
.site-nav a { color: var(--text-primary); text-decoration: none; }
.site-nav a:hover { color: var(--interactive-hover); }
.site-nav strong { color: var(--brand-primary); font-family: 'Geist Sans', Arial, sans-serif; font-weight: 700; letter-spacing: .01em; }
.site-nav div { display: flex; gap: 32px; }

.case { width: min(880px, calc(100% - 48px)); margin: 0 auto; padding: 8vh 0 96px; }
.case-head { padding-top: 4vh; }
.case-head h1 {
  color: var(--text-primary); font-size: clamp(44px, 5.7vw, 72px); line-height: 1;
  letter-spacing: -.04em; margin: 0; font-weight: 700;
}
.case-meta {
  display: flex; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 14px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  color: var(--text-secondary); font-family: 'Geist Sans', Arial, sans-serif; font-size: 13px;
  font-weight: 500; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.case-meta .tag {
  background: var(--accent-subtle); color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--border); padding: 2px 5px;
  font-size: 12px; font-weight: 650; line-height: 1.35; letter-spacing: .07em;
}
.lead {
  color: var(--text-secondary); font-size: clamp(24px, 2.55vw, 32px); line-height: 1.3;
  letter-spacing: -.015em; margin: 42px 0 70px; max-width: 28ch; font-weight: 450;
}
.section { margin: 84px 0; }
.section h2 {
  color: var(--brand-primary); font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1;
  margin: 0 0 22px; letter-spacing: -.025em; font-weight: 650;
}
.section p, .section li { color: var(--text-secondary); font-family: 'Geist Sans', Arial, sans-serif; font-size: 17px; line-height: 1.65; font-weight: 400; letter-spacing: 0; }
.section p { max-width: 65ch; }
.section ul { padding-left: 20px; }
.section li::marker { color: var(--green-accent); }
.media { margin: 34px 0 12px; }
.media img, .media-grid img {
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 18px 60px rgba(70, 45, 134, .08);
}
.media img { display: block; width: 100%; height: auto; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 34px 0; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; }
.phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phones img { object-fit: contain; max-height: 720px; }
.caption { font: 450 13px/1.5 'Geist Sans', Arial, sans-serif; letter-spacing: .02em; color: var(--text-muted); text-transform: uppercase; margin-top: 10px; }
.stack { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.stack li { border: 1px solid var(--border); background: var(--surface); padding: 7px 10px; }

.support-hero {
  margin: 52px 0 76px; min-height: 380px;
  background: linear-gradient(135deg, #2d1b52, #462d86 56%, #6f4aa3); color: #f2e7f5;
  display: flex; align-items: flex-end; padding: 38px; position: relative; overflow: hidden;
  box-shadow: 0 24px 70px rgba(70, 45, 134, .20);
}
.support-hero::before {
  content: 'SUPPORTIQ'; position: absolute; top: -.1em; left: -.04em; color: #dfc8e4;
  font-size: clamp(96px, 18vw, 200px); font-weight: 800; letter-spacing: -.08em; opacity: .14;
}
.support-hero p { color: #f2e7f5; font-size: clamp(28px, 4vw, 52px); line-height: 1.04; max-width: 15ch; margin: 0; position: relative; }
.logo-card { min-height: 440px; background: var(--surface-elevated); display: grid; place-items: center; border: 1px solid var(--border); }
.logo-card img { width: min(62%, 520px); height: auto; }
.name-card {
  min-height: 440px; background: var(--accent-subtle); color: #462d86; display: grid; place-items: center;
  font-weight: 780; font-size: clamp(54px, 11vw, 120px); letter-spacing: -.07em; text-align: center; padding: 32px;
}
html.dark .name-card { background: #302049; color: #f2e7f5; }
.footer {
  border-top: 1px solid var(--border); padding-top: 24px; margin-top: 100px; display: flex;
  justify-content: space-between; color: var(--text-muted); font: 500 13px/1.5 'Geist Sans', Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
}
.footer a { color: var(--interactive); }
.footer a:hover { color: var(--interactive-hover); }
.simple-case .case { max-width: 980px; }
.simple-case .case-head { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.simple-case .lead { max-width: 790px; }
.simple-copy { max-width: 820px; margin: 0 auto; padding: 48px 0; border-top: 1px solid var(--border); }
.simple-copy p { color: var(--text-secondary); font: 400 clamp(18px, 2.2vw, 27px)/1.55 'Geist Sans', Arial, sans-serif; letter-spacing: 0; }
.simple-copy + .simple-copy { padding-top: 48px; }

@media (max-width: 680px) {
  .site-nav { height: 64px; padding: 0 20px; }
  .site-nav div { gap: 15px; font-size: 13px; line-height: 1.4; letter-spacing: .055em; }
  .case { width: calc(100% - 32px); padding-top: 4vh; }
  .case-meta { display: grid; grid-template-columns: 1fr auto; }
  .lead { margin: 32px 0 52px; }
  .case-head h1 { font-size: 44px; line-height: 1.04; letter-spacing: -.03em; }
  .case-meta { font-size: 12px; line-height: 1.5; }
  .section { margin: 62px 0; }
  .section h2 { font-size: 30px; line-height: 1.15; }
  .section p, .section li { font-size: 16px; line-height: 1.65; }
  .caption { font-size: 12px; line-height: 1.5; }
  .footer { font-size: 12px; line-height: 1.5; }
  .media-grid { grid-template-columns: 1fr; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-hero, .logo-card, .name-card { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}