/* SMG Ops — main.css */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
@import url('./tokens.css');

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-x);
}
@media (min-width: 768px)  { .container { padding: 0 var(--padding-x-md); } }
/* Desktop: right uses standard token, left is wider to breathe past fixed sidebar nav */
@media (min-width: 1025px) { .container { padding-left: 6rem; padding-right: var(--padding-x-lg); } }

section { padding: var(--space-20) 0; }
hr.divider { height: 1px; border: none; background: var(--color-border); }

/* ── Utilities ──────────────────────────────────────────── */
@keyframes blur-in {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0);    }
}
.blur-reveal { opacity: 0; }
.blur-reveal.revealed { animation: blur-in 0.9s var(--ease-slow) forwards; }

/* ── Hero — Cinematic ───────────────────────────────────── */

/* 40s cycle — 5 images × 8s each */
@keyframes hc-bg-1 {
  0%    { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  2%    { opacity: 1;   filter: blur(24px); transform: scale(1.06); }
  4%    { opacity: 1;   filter: blur(0px);  transform: scale(1.02); }
  18%   { opacity: 1;   filter: blur(0px);  transform: scale(1.0);  }
  20%   { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
  100%  { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
}
@keyframes hc-bg-2 {
  0%    { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  20%   { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  22%   { opacity: 1;   filter: blur(24px); transform: scale(1.06); }
  24%   { opacity: 1;   filter: blur(0px);  transform: scale(1.02); }
  38%   { opacity: 1;   filter: blur(0px);  transform: scale(1.0);  }
  40%   { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
  100%  { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
}
@keyframes hc-bg-3 {
  0%    { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  40%   { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  42%   { opacity: 1;   filter: blur(24px); transform: scale(1.06); }
  44%   { opacity: 1;   filter: blur(0px);  transform: scale(1.02); }
  58%   { opacity: 1;   filter: blur(0px);  transform: scale(1.0);  }
  60%   { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
  100%  { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
}
@keyframes hc-bg-4 {
  0%    { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  60%   { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  62%   { opacity: 1;   filter: blur(24px); transform: scale(1.06); }
  64%   { opacity: 1;   filter: blur(0px);  transform: scale(1.02); }
  78%   { opacity: 1;   filter: blur(0px);  transform: scale(1.0);  }
  80%   { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
  100%  { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
}
@keyframes hc-bg-5 {
  0%    { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  80%   { opacity: 0;   filter: blur(24px); transform: scale(1.06); }
  82%   { opacity: 1;   filter: blur(24px); transform: scale(1.06); }
  84%   { opacity: 1;   filter: blur(0px);  transform: scale(1.02); }
  98%   { opacity: 1;   filter: blur(0px);  transform: scale(1.0);  }
  100%  { opacity: 0;   filter: blur(0px);  transform: scale(1.0);  }
}

.hero-cinematic {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #000;
}
.hc-bg {
  position: absolute;
  inset: 0;
}
.hc-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, filter, transform;
}
.hc-img-1 { animation: hc-bg-1 40s ease-in-out infinite; }
.hc-img-2 { animation: hc-bg-2 40s ease-in-out infinite; }
.hc-img-3 { animation: hc-bg-3 40s ease-in-out infinite; }
.hc-img-4 { animation: hc-bg-4 40s ease-in-out infinite; }
.hc-img-5 { animation: hc-bg-5 40s ease-in-out infinite; }

.hc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.80) 100%
  );
}

.hc-credential {
  position: absolute;
  bottom: var(--space-10);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}
.hc-credential-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: var(--space-2);
}
.hc-credential-names {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.04em;
}

.hc-content {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-40%);
  z-index: 1;
  text-align: center;
  padding: 0 var(--padding-x);
}

.hc-title {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* word-by-word blur — resolves once, stays */
.hc-title span {
  color: transparent;
  display: inline;
  animation: hc-text-blur 1.8s ease-out forwards;
  -webkit-animation: hc-text-blur 1.8s ease-out forwards;
}
.hc-title span:nth-of-type(1) { animation-delay: 0.1s; }
.hc-title span:nth-of-type(2) { animation-delay: 0.2s; }
.hc-title span:nth-of-type(3) { animation-delay: 0.3s; }
.hc-title span:nth-of-type(4) { animation-delay: 0.4s; }
.hc-title span:nth-of-type(5) { animation-delay: 0.5s; }
.hc-title span:nth-of-type(6) { animation-delay: 0.6s; }
.hc-title span:nth-of-type(7) { animation-delay: 0.7s; }
.hc-title span:nth-of-type(8) { animation-delay: 0.8s; }
.hc-title span:nth-of-type(9) { animation-delay: 0.9s; }

@keyframes hc-text-blur {
  0%   { text-shadow: 0 0 100px #fff; opacity: 0; }
  40%  { text-shadow: 0 0 20px #fff;  opacity: 1; }
  100% { text-shadow: 0 0 0px #fff;   opacity: 1; }
}
@-webkit-keyframes hc-text-blur {
  0%   { text-shadow: 0 0 100px #fff; opacity: 0; }
  40%  { text-shadow: 0 0 20px #fff;  opacity: 1; }
  100% { text-shadow: 0 0 0px #fff;   opacity: 1; }
}

/* ── Section Header ─────────────────────────────────────── */
.section-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.section-h2 {
  font-size: clamp(1.75rem, 3.5vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}
.problem-left .section-h2 { font-weight: var(--weight-regular); font-size: clamp(1.5rem, 3vw, var(--text-4xl)); }
.problem-left .section-h2 .q-muted { display: block; margin-top: var(--space-3); }
.section-body {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 560px;
}

/* ── Who We Are ─────────────────────────────────────────── */
.who-section {
  background: var(--color-white);
  padding: var(--space-section-top) 0 var(--space-24);
}
.who-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: stretch;
  min-height: 88vh;
}
.who-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.who-headline {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}
/* .who-primary = dark lead text, .who-secondary = muted payoff text — both regular weight */
.who-primary   { font-weight: var(--weight-regular); color: var(--color-text-primary); }
.who-secondary { font-weight: var(--weight-regular); color: var(--color-text-muted); }

.who-hook {
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  max-width: 44ch;
}
.who-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.who-col p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.who-col p + p { margin-top: var(--space-4); }
.who-right {
  display: flex;
  align-items: flex-start;
}
.who-video-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
}
.who-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .who-grid { grid-template-columns: 1fr; min-height: unset; }
  .who-right { order: -1; }
  .who-left { gap: var(--space-10); }
}
@media (max-width: 768px) {
  .who-body { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ── Problem Section ────────────────────────────────────── */
.problem { background: var(--color-bg-primary); padding: var(--space-section-top) 0 var(--space-24); }
.problem.is-dark {
  background: var(--color-bg-dark);
}
.problem.is-dark .section-tag { color: var(--color-text-muted); }
.problem.is-dark .section-h2  { color: var(--color-white); }
.problem.is-dark .section-body { color: rgba(255,255,255,0.55); }
.problem.is-dark .problem-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.problem.is-dark .problem-card:hover { box-shadow: none; background: rgba(255,255,255,0.08); }
.problem.is-dark .problem-card h3 { color: var(--color-white); }
.problem.is-dark .problem-card p  { color: rgba(255,255,255,0.55); }
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.problem-video-wrap {
  margin-top: var(--space-8);
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-dark);
}
.problem-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.problem-right { padding-top: var(--space-6); }
.problem-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.problem-card {
  background: var(--color-white);
  border: 0.6px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--ease-default);
}
.problem-card:hover { box-shadow: var(--shadow-md); }
.problem-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.problem-card h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.problem-card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ── Quadrant Section ───────────────────────────────────── */
.quadrant-section {
  background: var(--color-bg-primary);
  padding: var(--space-16) 0 18rem;
}
.quadrant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1.5px solid rgba(26,26,26,0.28);
  border-left: 1.5px solid rgba(26,26,26,0.28);
}
.quadrant {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.75rem;
  border-right: 1.5px solid rgba(26,26,26,0.28);
  border-bottom: 1.5px solid rgba(26,26,26,0.28);
  min-height: auto;
}
.quadrant-headline {
  min-height: 20rem;
}
.quadrant-opening {
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.q-bold { font-weight: var(--weight-bold); }
.q-muted { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.q-strong { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.quadrant-media {
  width: 100%;
  max-width: 34.375rem;
  aspect-ratio: 55 / 36;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--color-border);
  margin-bottom: var(--space-8);
}
.quadrant-media img,
.quadrant-media video,
.quadrant-media svg,
.quadrant-media lottie-player,
.quadrant-media dotlottie-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.quadrant-content { margin-top: 0; }
.quadrant-label {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  font-weight: var(--weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4) 0;
}
.quadrant-content p:not(.quadrant-label) {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}
.q-lead { color: var(--color-text-primary); }
.quadrant-closer {
  justify-content: space-between;
}
.quadrant-base {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quadrant-rule {
  width: 100%;
  height: 1.5px;
  background: var(--color-purple);
}
.quadrant-closer .quadrant-cta {
  border-bottom: none;
  align-self: flex-end;
  color: var(--color-purple);
  font-size: var(--text-sm);
}
.quadrant-base-text {
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  text-align: right;
  margin: 0;
}
.quadrant-cta {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-primary);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--ease-default), border-color var(--ease-default);
}
.quadrant-cta:hover { color: var(--color-gold); border-color: var(--color-gold); }

/* ── Quadrant SVG animation system ──────────────────────── */
.quadrant-media {
  perspective: 600px;
  perspective-origin: 50% 40%;
  overflow: visible;
}
.quadrant-media svg line,
.quadrant-media svg circle,
.quadrant-media svg rect,
.quadrant-media svg path,
.quadrant-media svg polyline {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.quadrant-media [stroke]:not([stroke="none"]) {
  stroke-dasharray: var(--dash, 400);
  stroke-dashoffset: var(--dash, 400);
}
.quadrant-media.q-animate svg {
  animation: q-float 9s ease-in-out var(--q-float-start, 2.5s) infinite backwards;
}
.quadrant-media.q-animate svg line,
.quadrant-media.q-animate svg circle,
.quadrant-media.q-animate svg rect,
.quadrant-media.q-animate svg path,
.quadrant-media.q-animate svg polyline {
  animation: q-fade 0.5s ease var(--q-delay, 0s) both;
}
.quadrant-media.q-animate [stroke]:not([stroke="none"]) {
  animation:
    q-draw 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--q-delay, 0s) both,
    q-fade 0.5s ease var(--q-delay, 0s) both,
    q-breathe 5s ease-in-out var(--q-breathe-delay, 3s) infinite;
}
@keyframes q-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes q-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes q-float {
  0%   { transform: rotateY(-8deg) rotateX(4deg)  scale(1);    }
  20%  { transform: rotateY(6deg)  rotateX(-5deg) scale(1.02); }
  40%  { transform: rotateY(4deg)  rotateX(6deg)  scale(0.99); }
  60%  { transform: rotateY(-5deg) rotateX(-3deg) scale(1.01); }
  80%  { transform: rotateY(7deg)  rotateX(4deg)  scale(1);    }
  100% { transform: rotateY(-8deg) rotateX(4deg)  scale(1);    }
}
@keyframes q-breathe {
  0%, 100% { stroke-opacity: 1; }
  50%       { stroke-opacity: 0.4; }
}

/* ── Wipe CTA ────────────────────────────────────────────── */
@property --wipe-pct {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.wipe-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 0.3rem 0.5rem;
}
.wipe-cta:hover { color: var(--color-purple); border-color: transparent; }
.wipe-overlay {
  --wipe-pct: 0%;
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  color: var(--color-white);
  white-space: nowrap;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, black var(--wipe-pct), transparent var(--wipe-pct));
  mask-image: linear-gradient(to right, black var(--wipe-pct), transparent var(--wipe-pct));
  transition: --wipe-pct 0.25s ease;
}
.wipe-cta:hover .wipe-overlay { --wipe-pct: 100%; }
.wipe-bar {
  position: absolute;
  inset: 0;
  background: var(--color-purple);
  z-index: -1;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-text-primary);
  color: var(--color-white);
  border: 0.6px solid var(--color-text-primary);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--ease-default), border-color var(--ease-default);
  text-decoration: none;
}
.problem-left .btn-primary { margin-top: var(--space-8); }
.btn-primary:hover { background: var(--color-gold); border-color: var(--color-gold); }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  padding: var(--space-12) 0 var(--space-8);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.footer-brand-name {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.footer-brand-name span { color: var(--color-gold); }
.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 260px;
}
.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--ease-default); }
.footer-col a:hover { color: var(--color-text-primary); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Contact Page ────────────────────────────────────────── */
.contact-hero {
  background: var(--color-bg-dark);
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: var(--space-32) 0 var(--space-20);
}
.contact-hero-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}
.contact-hero h1 {
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}
.contact-hero-sub {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.50);
  max-width: 440px;
  line-height: var(--leading-normal);
}

.contact-section {
  background: var(--color-bg-primary);
  padding: var(--space-24) 0 var(--space-32);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-20);
  align-items: start;
}
.contact-info-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}
.contact-info-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-10);
}
.contact-info-body p + p { margin-top: var(--space-3); }
.contact-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact-info-list li { display: flex; flex-direction: column; gap: var(--space-1); }
.info-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.contact-info-list a {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  transition: color var(--ease-default);
}
.contact-info-list a:hover { color: var(--color-gold); }

/* Form card */
.contact-form {
  background: var(--color-white);
  border: 0.6px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.form-label .req { color: var(--color-gold); margin-left: 2px; }
.form-label .optional {
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  opacity: 0.7;
}
.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 0.6px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(26, 26, 26, 0.30); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(183, 146, 74, 0.10);
}
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: #D94040; }
.form-textarea { resize: vertical; min-height: 120px; line-height: var(--leading-normal); }
.form-select-wrap { position: relative; }
.form-select-wrap::after {
  content: '↓';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form-error-msg {
  font-size: var(--text-xs);
  color: #D94040;
  display: none;
  margin-top: calc(-1 * var(--space-1));
}
.form-error-msg.visible { display: block; }
.cf-turnstile { margin: var(--space-2) 0 var(--space-4); }
.form-btn-wrap { margin-top: var(--space-2); }
.form-submit-error {
  font-size: var(--text-sm);
  color: #D94040;
  margin-top: var(--space-3);
  display: none;
  line-height: var(--leading-normal);
}
.form-submit-error.visible { display: block; }
.form-submit-error a { text-decoration: underline; color: inherit; }

/* Success state */
.form-success {
  text-align: center;
  padding: var(--space-16) var(--space-8);
}
.form-success .success-mark {
  font-size: 2.5rem;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
  display: block;
}
.form-success h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.form-success p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Contact responsive */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
@media (max-width: 768px) {
  .contact-hero h1 { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: var(--space-6); }
  .contact-hero { padding: var(--space-24) 0 var(--space-12); }
}
@media (max-width: 480px) {
  .contact-hero h1 { font-size: 2.5rem; }
  .contact-form { padding: var(--space-5); border-radius: var(--radius-lg); }
}

/* ── Sidebar Nav ─────────────────────────────────────────── */
.sidebar-nav {
  position: fixed;
  left: 2.5rem;
  top: 40px; /* JS overrides on homepage; other pages use this lock position */
  z-index: 100;
  width: 160px;
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
}
.sidebar-nav * { transition: color 0.3s ease; }
.sidebar-brand {
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}
.sidebar-brand.active { color: var(--color-gold); }
.sidebar-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.sidebar-link {
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}
.sidebar-link:hover { color: var(--color-white); }
.sidebar-link.active { color: var(--color-gold); }
.nav-symbol {
  display: inline-block;
  width: 1em;
  flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--color-gold);
  text-align: center;
}

/* nav over light backgrounds */
.nav-on-light .sidebar-brand        { color: rgba(26, 26, 26, 0.55); }
.nav-on-light .sidebar-brand:hover  { color: var(--color-text-primary); }
.nav-on-light .sidebar-link         { color: rgba(26, 26, 26, 0.55); }
.nav-on-light .sidebar-link:hover   { color: var(--color-text-primary); }
.nav-on-light .sidebar-link.active  { color: var(--color-gold); }

/* ── Mobile Nav ──────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.6px solid rgba(255, 255, 255, 0.10);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--ease-default);
  padding: var(--space-1) var(--space-3);
  min-width: 56px;
}
.mobile-nav-item svg { flex-shrink: 0; }
.mobile-nav-item:hover, .mobile-nav-item.active { color: var(--color-gold); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar-nav { display: none; }
  .mobile-nav { display: flex; }
  body { padding-bottom: 72px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 768px) {
  section { padding: var(--space-16) 0; }
  .hc-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .problem-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
}
@media (max-width: 480px) {
  .hc-title { font-size: 1.75rem; letter-spacing: -0.01em; }
  .hc-content { padding: 0 var(--space-6); }
  .hc-credential { bottom: var(--space-6); padding: 0 var(--space-4); }
  .hc-credential-names { font-size: var(--text-xs); }
}

/* ── About Page ──────────────────────────────────────────── */

/* Hero */
.about-hero {
  background: var(--color-bg-primary);
  padding: var(--space-32) 0 var(--space-16);
}
.about-hero-h1 {
  font-size: clamp(2.5rem, 5vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-6);
}
.about-hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 500px;
  line-height: var(--leading-normal);
}

/* Founder */
.founder-section {
  background: var(--color-bg-primary);
  padding: var(--space-16) 0 var(--space-12);
}
.founder-grid {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.founder-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 200px;
}
.founder-photo-wrap {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-card);
  margin-bottom: var(--space-3);
}
.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.founder-name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.founder-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.founder-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: 0;
}
.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 0.6px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  transition: background var(--ease-default), color var(--ease-default);
  text-decoration: none;
  width: fit-content;
}
.founder-linkedin:hover { background: var(--color-text-primary); color: var(--color-white); }

/* Bio */
.bio-section {
  background: var(--color-white);
  padding: var(--space-16) 0;
}
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}
.bio-grid p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Tools bar */
.tools-section {
  background: var(--color-white);
  padding: var(--space-12) 0 var(--space-16);
  border-top: 1px solid var(--color-border);
}
.tools-bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.tool-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.tool-sep {
  color: var(--color-gold);
  font-size: var(--text-xs);
}

/* Stats */
.stats-section {
  background: var(--color-bg-primary);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.stat-item { display: flex; flex-direction: column; gap: var(--space-2); }
.stat-value {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
  line-height: 1;
}
.stat-value.stat-text {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* CTA Banner */
.about-cta-section {
  background: var(--color-bg-dark);
  padding: var(--space-16) 0 var(--space-24);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.about-cta-section .container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.about-cta-banner {
  background: linear-gradient(135deg, #0D0D0D 0%, #1C0A3E 60%, #2D1169 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-24) var(--space-16);
  text-align: center;
}
.about-cta-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}
.about-cta-h2 {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.about-cta-sub {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-10);
}
.about-cta-banner .btn-primary {
  background: var(--color-white);
  color: var(--color-text-primary);
  border-color: var(--color-white);
}
.about-cta-banner .btn-primary:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/* About responsive */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .bio-grid   { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 768px) {
  .stats-grid           { grid-template-columns: repeat(2, 1fr); }
  .about-cta-banner     { padding: var(--space-16) var(--space-6); }
  .about-cta-h2         { font-size: var(--text-3xl); }
  .tools-bar            { gap: var(--space-4); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .about-hero-h1 { font-size: var(--text-4xl); }
}