/* home.css — TG3 SaaS home page
   Builds on tokens.css. Page-level layout, sections, components.
*/

/* ============ Reset + base ============ */
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); overflow-x: hidden; }
img { max-width: 100%; display: block; }

/* ============ Container ============ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap-tight { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* ============ Sticky nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 32px;
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              padding var(--d-base) var(--ease-out);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  padding: 14px 32px;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  position: relative;
  transition: color var(--d-base) var(--ease-out);
}
.nav.scrolled .nav-brand { color: var(--ink); }
.nav-brand .logo {
  height: 30px; width: auto; display: block;
}
.nav-brand .logo-light { display: block; }
.nav-brand .logo-dark { display: none; }
.nav.scrolled .nav-brand .logo-light { display: none; }
.nav.scrolled .nav-brand .logo-dark { display: block; }
.nav-brand .wordmark {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: -0.02em;
}
.nav-brand .wordmark .div { opacity: 0.5; margin: 0 6px; }
.nav-brand .wordmark .sfx { font-weight: 500; opacity: 0.85; font-size: 16px; }

.nav-links {
  display: flex; gap: 32px; align-items: center;
}
.nav-links a {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.84);
  transition: color var(--d-base) var(--ease-out);
}
.nav.scrolled .nav-links a { color: var(--slate); }
.nav-links a:hover { color: #fff; }
.nav.scrolled .nav-links a:hover { color: var(--cobalt); }

.nav-cta {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--navy);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.nav.scrolled .nav-cta { background: var(--cobalt); color: #fff; }
.nav-cta:hover { background: var(--cobalt-deep); color: #fff; }
.nav.scrolled .nav-cta:hover { background: var(--cobalt-deep); }
.nav-cta .arrow { transition: transform var(--d-fast) var(--ease-out); }
.nav-cta:hover .arrow { transform: translateX(3px); }

/* mobile nav */
.nav-mobile-toggle { display: none; }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 152px 32px 88px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero.h-navy   { background: var(--navy); }
.hero.h-grad   { background: var(--grad-brand); }
.hero.h-navy::before {
  /* subtle radial light */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(74,147,240,0.18) 0%, transparent 60%);
}
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
}
.hero-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.hero-headline {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  max-width: 18ch;
  margin: 0;
}
.hero-headline em {
  font-style: normal;
  color: var(--cobalt-bright);
  position: relative;
}
.hero-sub {
  margin-top: 32px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
}
.hero-ctas {
  margin-top: 48px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.hero .btn-primary-on-navy {
  background: #fff;
  color: var(--navy);
  border: 1px solid #fff;
  padding: 16px 26px;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 12px;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.hero .btn-primary-on-navy:hover { background: var(--cobalt-bright); color: var(--navy); }
.hero .btn-ghost-on-navy {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 16px 26px;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 12px;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.hero .btn-ghost-on-navy:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.hero .arrow { transition: transform var(--d-fast) var(--ease-out); }
.hero .btn-primary-on-navy:hover .arrow,
.hero .btn-ghost-on-navy:hover .arrow { transform: translateX(3px); }

.hero-proofline {
  margin-top: 56px;
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
}
.hero-proofline span strong { color: #fff; font-weight: 500; }
.hero-proofline .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cobalt-bright);
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* hero chart-block (optional) */
.hero-chart {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  width: 380px; height: 260px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
  padding: 18px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.62);
}
.hero.h-with-chart .hero-headline { max-width: 14ch; }
@media (max-width: 1100px) { .hero-chart { display: none; } }

/* ============ Section base ============ */
.sec {
  padding: 112px 32px;
  border-top: 1px solid var(--border);
}
.sec-tight { padding: 88px 32px; }
.sec-loose { padding: 144px 32px; }
.sec.no-border { border-top: 0; }
.sec.on-navy { background: var(--navy); color: #fff; border-top-color: var(--navy); }
.sec.on-bone { background: var(--bone); }

.sec-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-2);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.sec-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.sec.on-navy .sec-eyebrow { color: rgba(255,255,255,0.5); }

.sec-h {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.sec.on-navy .sec-h { color: #fff; }
.sec-h em { font-style: normal; color: var(--cobalt); }
.sec.on-navy .sec-h em { color: var(--cobalt-bright); }

.sec-lede {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--slate-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.sec.on-navy .sec-lede { color: rgba(255,255,255,0.7); }

.sec-head {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 64px;
  margin-bottom: 80px;
  align-items: end;
}
.sec-head.stacked { grid-template-columns: 1fr; gap: 24px; }
.sec-head .right { text-align: right; }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 24px; }
  .sec-head .right { text-align: left; }
}

/* ============ S2 · Logo bar ============ */
.logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
}
.logos .cell {
  padding: 36px 20px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--slate-3);
  filter: grayscale(1);
  transition: filter var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
  min-height: 96px;
}
.logos .cell:nth-child(5n) { border-right: 0; }
.logos .cell:nth-last-child(-n+5) { border-bottom: 0; }
.logos .cell:hover { color: var(--cobalt); filter: grayscale(0); }
.logos .cell .placeholder {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.logos .cell .placeholder::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: currentColor; opacity: 0.4;
}
@media (max-width: 900px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
  .logos .cell { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
  .logos .cell:nth-child(2n) { border-right: 0 !important; }
}

/* ============ S3 · Proof strip ============ */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.proof-strip .col {
  padding: 64px 40px;
  border-right: 1px solid var(--border);
}
.proof-strip .col:last-child { border-right: 0; }
.proof-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.proof-num em { font-style: normal; color: var(--cobalt); }
.proof-lbl {
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.proof-foot {
  margin-top: 12px;
  font-size: 14px;
  color: var(--slate-2);
  line-height: 1.45;
  max-width: 32ch;
}
@media (max-width: 800px) {
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip .col { border-right: 0; border-bottom: 1px solid var(--border); }
  .proof-strip .col:last-child { border-bottom: 0; }
}

/* ============ S4 · Services ============ */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.service {
  background: var(--white);
  padding: 36px 32px 32px;
  position: relative;
  transition: background var(--d-base) var(--ease-out);
  cursor: pointer;
  display: flex; flex-direction: column;
  min-height: 240px;
}
.service:hover { background: var(--bone); }
.service .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate-3);
  margin-bottom: 16px;
}
.service h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.service p {
  font-size: 15px;
  color: var(--slate-2);
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 32ch;
}
.service .more {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cobalt);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.service .more .arrow { transition: transform var(--d-fast) var(--ease-out); }
.service:hover .more .arrow { transform: translateX(3px); }
.service.featured {
  grid-column: span 2;
  background: var(--navy);
  color: #fff;
}
.service.featured .n { color: rgba(255,255,255,0.5); }
.service.featured h3 { color: #fff; }
.service.featured p { color: rgba(255,255,255,0.75); }
.service.featured:hover { background: var(--navy-deep); }
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr 1fr; }
  .service.featured { grid-column: span 2; }
}
@media (max-width: 600px) {
  .services { grid-template-columns: 1fr; }
  .service.featured { grid-column: span 1; }
}

/* ============ S5 · Featured case ============ */
.case-feat {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: stretch;
}
.case-feat-meta {
  display: flex; flex-direction: column;
  padding-top: 48px;
}
.case-feat-meta .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 24px;
}
.case-feat-meta h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.024em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.case-feat-meta p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-2);
  margin: 0 0 20px;
}
.case-feat-numbers {
  margin: 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.case-feat-numbers .n {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.case-feat-numbers .n em { font-style: normal; color: var(--cobalt); }
.case-feat-numbers .l {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate-2);
}
.case-feat-meta .case-cta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}
.case-feat-meta .case-cta .arrow { transition: transform var(--d-fast) var(--ease-out); }
.case-feat-meta .case-cta:hover .arrow { transform: translateX(4px); }

/* chart mock */
.chart {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-md);
  padding: 36px 36px 32px;
  min-height: 460px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.chart::after {
  /* subtle gradient overlay */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(74,147,240,0.16) 0%, transparent 60%);
  pointer-events: none;
}
.chart-h {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; position: relative; z-index: 1;
}
.chart-h h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0;
}
.chart-h .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}
.chart-h .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cobalt-bright);
  padding: 4px 8px;
  border: 1px solid var(--cobalt-bright);
  border-radius: 3px;
}
.chart-body {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.chart-foot {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  position: relative; z-index: 1;
}
.chart-foot .stat .n {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.018em;
  color: #fff;
}
.chart-foot .stat .n em { font-style: normal; color: var(--cobalt-bright); }
.chart-foot .stat .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .case-feat { grid-template-columns: 1fr; gap: 32px; }
  .chart { min-height: 360px; }
}

/* ============ S6 · Manifesto ============ */
.manifesto {
  max-width: 920px; margin: 0 auto;
  text-align: center;
}
.manifesto p.lead {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.manifesto p.lead em { font-style: normal; color: var(--cobalt); }
.manifesto .attrib {
  margin-top: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-3);
}

/* ============ S7 · Process ============ */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.phase {
  border-top: 2px solid var(--navy);
  padding-top: 32px;
  position: relative;
}
.phase .step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 16px;
}
.phase h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.phase p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-2);
  margin: 0;
  text-wrap: pretty;
}
.phase .week {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-3);
  letter-spacing: 0.06em;
}
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process { grid-template-columns: 1fr; } }

/* ============ S8 · Founder note ============ */
.founder {
  display: grid;
  grid-template-columns: 2fr 5fr;
  gap: 64px;
  align-items: start;
}
.founder-photo {
  aspect-ratio: 3/4;
  background: var(--bone-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.founder-photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(15,42,77,0.04) 12px, rgba(15,42,77,0.04) 13px);
}
.founder-photo span { position: relative; z-index: 1; }
.founder-note {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.founder-note em { font-style: normal; color: var(--cobalt); }
.founder-attrib {
  margin-top: 32px;
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--slate-2);
}
.founder-attrib strong { color: var(--ink); font-weight: 600; }
.founder-attrib::before {
  content: ""; width: 32px; height: 1px; background: var(--navy);
}
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; gap: 40px; }
  .founder-photo { max-width: 280px; aspect-ratio: 1; }
}

/* ============ S9 · Comparison ============ */
.compare-table {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compare-table .ct-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
}
.compare-table .ct-head {
  background: var(--navy);
  color: #fff;
}
.compare-table .ct-head > div {
  padding: 22px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.compare-table .ct-head > div:first-child { color: rgba(255,255,255,0.6); }
.compare-table .ct-head > div.tg3 {
  color: #fff;
  background: rgba(74,147,240,0.18);
}
.compare-table .ct-row > div {
  padding: 20px 24px;
  font-size: 14px;
  color: var(--slate);
  border-top: 1px solid var(--border);
}
.compare-table .ct-row > div:first-child {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.compare-table .ct-row > div.tg3 {
  background: var(--bone);
  color: var(--ink);
  font-weight: 500;
}
.compare-table .ct-row .yes {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--cobalt);
}
.compare-table .ct-row .no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--slate-3);
}
.compare-table .ct-foot {
  background: var(--bone);
  padding: 20px 24px;
  font-size: 13px;
  color: var(--slate-2);
  border-top: 1px solid var(--border);
  font-style: italic;
}
@media (max-width: 800px) {
  .compare-table .ct-row { grid-template-columns: 1.4fr 1fr 1fr 1fr; font-size: 12px; }
  .compare-table .ct-row > div { padding: 14px 12px; }
}

/* ============ S10 · FAQ ============ */
.faq-grid {
  display: grid; gap: 0;
  border-top: 1px solid var(--ink);
}
.faq {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.faq summary .toggle {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--ink);
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
}
.faq[open] summary .toggle {
  border-color: var(--cobalt);
  color: var(--cobalt);
  transform: rotate(45deg);
}
.faq .answer {
  padding: 0 0 32px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-2);
  max-width: 70ch;
  text-wrap: pretty;
}
.faq .answer p { margin: 0 0 12px; }
.faq .answer p:last-child { margin: 0; }

/* ============ S11 · Final CTA ============ */
.final-cta {
  background: var(--grad-brand);
  color: #fff;
  padding: 112px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  max-width: 22ch;
  margin-left: auto; margin-right: auto;
}
.final-cta h2 em { font-style: normal; color: var(--cobalt-bright); }
.final-cta p {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
}
.final-cta .ctas {
  margin-top: 48px;
  display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
}
.final-cta .btn-on-grad {
  background: #fff; color: var(--navy);
  padding: 18px 28px; font-size: 17px; font-weight: 500;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 12px;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.final-cta .btn-on-grad:hover { background: var(--cobalt-bright); color: var(--navy); }
.final-cta .btn-ghost-on-grad {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 18px 28px; font-size: 17px; font-weight: 500;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 12px;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.final-cta .btn-ghost-on-grad:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.final-cta .small {
  margin-top: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ============ Footer ============ */
.foot {
  background: var(--navy);
  color: #fff;
  padding: 80px 32px 40px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  max-width: 1280px; margin: 0 auto;
}
.foot-brand {
  display: flex; flex-direction: column; gap: 24px;
}
.foot-brand .lockup .logo {
  height: 28px; width: auto; display: block;
}
.foot-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  max-width: 30ch;
  margin: 0;
}
.foot h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin: 0 0 18px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot ul a {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  transition: color var(--d-fast) var(--ease-out);
}
.foot ul a:hover { color: var(--cobalt-bright); }
.foot-bottom {
  max-width: 1280px;
  margin: 64px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.foot-bottom .legal {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}
.foot-bottom .sister {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.foot-bottom .sister a {
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
}
.foot-bottom .sister a:hover { color: var(--cobalt-bright); border-bottom-color: var(--cobalt-bright); }
@media (max-width: 800px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ Mobile nav ============ */
@media (max-width: 800px) {
  .nav { padding: 14px 20px; }
  .nav.scrolled { padding: 12px 20px; }
  .nav-links { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .hero { padding: 130px 20px 64px; }
  .sec { padding: 80px 20px; }
  .final-cta { padding: 80px 20px; }
  .wrap, .wrap-tight { padding: 0 20px; }
  .sec-head { margin-bottom: 56px; }
}

/* ============ Tweaks (variation modes) ============ */
body.tweak-hero-grad .hero.h-navy { background: var(--grad-brand); }
body.tweak-hero-grad .hero.h-navy::before { display: none; }

body.tweak-dense .sec { padding: 80px 32px; }
body.tweak-dense .hero { padding: 124px 32px 72px; }
body.tweak-dense .sec-head { margin-bottom: 56px; }

body.tweak-no-chart .hero-chart { display: none; }
body.tweak-no-chart .hero-headline { max-width: 18ch; }

/* Emphasis style on headline */
body.tweak-emph-underline .hero-headline em,
body.tweak-emph-underline .sec-h em,
body.tweak-emph-underline .final-cta h2 em {
  color: inherit;
  border-bottom: 4px solid var(--cobalt-bright);
  padding-bottom: 4px;
}
body.tweak-emph-none .hero-headline em,
body.tweak-emph-none .sec-h em,
body.tweak-emph-none .final-cta h2 em {
  color: inherit;
}

/* ============================================================
   Interior-page heroes — navy dark anchor (site standard)
   Every content page links home.css, so this converts all of
   them at once. Heroes are token-driven, so re-scoping the
   color tokens on the hero element cascades light values to
   every descendant (headline, sub, breadcrumb, stats, buttons,
   borders) with no per-element overrides.
   ============================================================ */
.svc-hero, .cs-hero, .pri-hero, .ct-hero, .pr-hero,
.ab-hero, .tm-hero, .in-hero, .hub-hero {
  background-color: var(--navy) !important;
  background-image: radial-gradient(ellipse 64% 58% at 18% 0%, rgba(74,147,240,0.16) 0%, transparent 60%) !important;
  color: #fff;
  border-bottom-color: var(--navy-2) !important;
  /* local token re-scope → all token-driven descendants go light */
  --ink: #FFFFFF;
  --slate: #C8D2E2;
  --slate-2: #9DA8BC;
  --slate-3: #7E8BA3;
  --cobalt: var(--cobalt-bright);
  --border: rgba(255,255,255,0.16);
  --border-strong: rgba(255,255,255,0.26);
}
.lang-soon{display:block;padding:10px 16px;font-size:13px;color:var(--slate-3);cursor:default;font-family:inherit;}