/* ══════════════════════════════════════════════════════════════
   CG LEGAL TECHNOLOGIES — "OBSIDIAN VERDICT"
   Warm charcoal · signature maroon · champagne gold · bone
   Anton (impact) · Fraunces (elegance) · IBM Plex Mono (docket)
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:      #0E0B0C;
  --bg-2:    #14100F;
  --panel:   #1A1414;
  --panel-2: #241A1C;
  --head:    #F3EDE2;
  --maroon:  #6E1528;
  --maroon-2:#9E1B33;
  --maroon-d:#3D0B16;
  --gold:    #D2AC68;
  --gold-2:  #EBCF92;
  --gold-s:  #D2AC68;          /* strong/label gold per theme */
  --bone:    #F3EDE2;
  --text:    #A99FA0;
  --muted:   #6F6566;
  --line:    rgba(210,172,104,.15);
  --line-2:  rgba(210,172,104,.34);
  --nav-rgb: 14,11,12;
  --spot:    rgba(158,27,51,.07);
  /* paper artifacts (mission brief / founder quote) */
  --brief-a: #F3EDE2; --brief-b: #E9E1D2;
  --brief-head: #211A1B; --brief-text: #38302E; --brief-eyebrow: #8a6a3c;
  --stamp-c: #9E1B33; --stamp-blend: multiply;
  --quote-a: #F3EDE2; --quote-b: #E9E1D2;
  --quote-text: #211A1B; --quote-mark: rgba(110,21,40,.45); --quote-cap: #6E1528;
  --impact: 'Anton', Impact, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ── LIGHT THEME — bone chambers, maroon artifacts ── */
[data-theme="light"] {
  --bg:      #F4EEE2;
  --bg-2:    #ECE4D3;
  --panel:   #FBF6EB;
  --panel-2: #F1E8D7;
  --head:    #211A1C;
  --text:    #564C4B;
  --muted:   #8A7D78;
  --gold-s:  #8A6A3C;
  --line:    rgba(110,21,40,.16);
  --line-2:  rgba(110,21,40,.34);
  --nav-rgb: 244,238,226;
  --spot:    rgba(110,21,40,.08);
  /* inverted artifacts: maroon paper, bone ink */
  --brief-a: #6E1528; --brief-b: #4A0E1C;
  --brief-head: #F3EDE2; --brief-text: #EBD9CD; --brief-eyebrow: #D2AC68;
  --stamp-c: #EBCF92; --stamp-blend: normal;
  --quote-a: #6E1528; --quote-b: #4A0E1C;
  --quote-text: #F3EDE2; --quote-mark: rgba(210,172,104,.55); --quote-cap: #EBCF92;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}
::selection { background: var(--maroon-2); color: var(--bone); }
a { color: var(--gold-2); text-decoration: none; }
p { margin: 0 0 1em; }
h1,h2,h3 { margin: 0; }

/* ── Preloader: courtroom doors ── */
.loader { position: fixed; inset: 0; z-index: 3000; animation: loader-failsafe 0s 3s forwards; }
.loader-door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--maroon-d); }
.ld-left { left: 0; border-right: 1px solid rgba(210,172,104,.25); }
.ld-right { right: 0; }
.loader-core {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem; z-index: 1;
}
.loader-mark { font-family: var(--serif); font-size: 2rem; color: var(--bone); margin: 0; letter-spacing: .04em; }
.loader-mark span { color: var(--gold); }
.loader-count { font-family: var(--mono); font-size: .8rem; letter-spacing: .3em; color: var(--gold); margin: 0; }
@keyframes loader-failsafe { to { visibility: hidden; pointer-events: none; } }
html.loaded .loader { display: none; }

/* ── Chrome ── */
#progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; }
#progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--maroon-2), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
}
#cursor {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  pointer-events: none; z-index: 2000; opacity: 0; will-change: transform;
  transition: width .3s ease, height .3s ease;
}
html.has-cursor #cursor { opacity: 1; }
#cursor.is-hover { width: 72px; height: 72px; }
@media (pointer: coarse) { #cursor { display: none !important; } }

/* ── Top bar ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.05rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(var(--nav-rgb),.94), rgba(var(--nav-rgb),.78));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform .45s ease;
}
.topbar.hide { transform: translateY(-110%); }
.wordmark { font-family: var(--serif); font-size: 1.3rem; color: var(--head); }
.wordmark span { color: var(--maroon-2); }
.topbar-links { display: flex; gap: 1.7rem; margin-left: auto; }
.topbar-links a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); position: relative; padding: .3rem 0; transition: color .3s;
}
.topbar-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--maroon-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s ease;
}
.topbar-links a:hover, .topbar-links a.active { color: var(--head); }
.topbar-links a:hover::after, .topbar-links a.active::after { transform: scaleX(1); }
.topbar-cta {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); background: var(--maroon);
  border: 1px solid rgba(210,172,104,.3);
  padding: .6rem 1.15rem; border-radius: 3px; white-space: nowrap;
  transition: background .3s ease;
}
.topbar-cta:hover { background: var(--maroon-2); }
@media (max-width: 900px) { .topbar-links { display: none; } .topbar-cta { margin-left: auto; } }

/* ── Shared ── */
main section { padding: clamp(5rem, 12vh, 8.5rem) clamp(1.2rem, 6vw, 6rem); position: relative; }
.docket {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-s); margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: .9rem;
}
.docket::before { content: ''; width: 36px; height: 1px; background: var(--maroon-2); flex: none; }
.h2 {
  font-family: var(--impact); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .98; letter-spacing: .01em; color: var(--head);
  margin-bottom: 1.2rem;
}
.h2-outline { color: transparent; -webkit-text-stroke: 1.5px var(--gold-s); }
.h2-maroon { color: var(--maroon-2); }
.sub { color: var(--muted); max-width: 50em; font-size: 1rem; }
.chip {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
  color: var(--gold-s); border: 1px solid var(--line-2); border-radius: 30px;
  padding: .3em 1em; vertical-align: middle; margin-left: 1rem; position: relative; top: -.8em;
}
.ext { border-bottom: 1px solid var(--line-2); padding-bottom: .12em; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 1rem 1.7rem; border-radius: 3px;
  position: relative; overflow: hidden; will-change: transform;
}
.btn .btn-label { position: relative; z-index: 1; display: inline-block; }
.btn-maroon { background: var(--maroon); color: var(--bone); border: 1px solid rgba(210,172,104,.28); }
.btn-maroon::before {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.btn-maroon:hover::before { transform: translateY(0); }
.btn-maroon:hover { color: var(--maroon-d); }
.btn-line { color: var(--head); border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--gold-s); color: var(--gold-s); }

/* ════════ HERO ════════ */
#hero { padding: 0; }
.hero-stage {
  min-height: 100svh; position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 6.5rem clamp(1.2rem, 6vw, 6rem) 4rem;
  background:
    radial-gradient(50% 60% at 80% 35%, rgba(110,21,40,.28), transparent 70%),
    radial-gradient(40% 50% at 15% 85%, rgba(110,21,40,.14), transparent 70%),
    var(--bg);
}
#field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-s); margin-bottom: 1.8rem;
}
.hero-h1 { line-height: .92; margin-bottom: 1.2rem; }
.hl {
  display: block;
  white-space: nowrap;
  font-family: var(--impact); font-weight: 400;
  font-size: clamp(3.2rem, 10.5vw, 8.2rem);
  letter-spacing: .015em;
  color: var(--head);
}
.hl-maroon { color: var(--maroon-2); }
.hl-outline { color: transparent; -webkit-text-stroke: 2px var(--gold-s); }
.hl .ch { display: inline-block; will-change: transform; }
.hero-it {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.3rem, 3vw, 2rem); color: var(--head); margin: 0 0 1.4rem;
}
.hero-it em { color: var(--gold-s); font-style: italic; }
.hero-sub { color: var(--muted); max-width: 34em; font-size: 1rem; margin-bottom: 2.2rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.phase-box {
  position: absolute; right: clamp(1.2rem, 5vw, 5rem); bottom: 5.5rem; z-index: 2;
  text-align: right; min-width: 280px;
}
.phase {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0; position: absolute; right: 0; bottom: 0; white-space: nowrap;
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;
}
.phase span { color: var(--maroon-2); margin-right: .8em; }
.phase.on { opacity: 1; transform: translateY(0); }
.scroll-cue {
  position: absolute; bottom: 2rem; left: clamp(1.2rem, 6vw, 6rem); z-index: 2;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: .8rem;
}
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(180deg, var(--maroon-2), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; display:block; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.5; } 50% { transform: scaleY(1); opacity:1; } }
@media (max-width: 860px) {
  .hero-copy { max-width: 100%; }
  #field { opacity: .5; }
  .phase-box { display: none; }
}

/* ════════ STATS — maroon band ════════ */
#stats {
  background: linear-gradient(180deg, var(--maroon-d), var(--maroon));
  border-top: 1px solid rgba(210,172,104,.25);
  border-bottom: 1px solid rgba(210,172,104,.25);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  padding-top: 4.2rem; padding-bottom: 4.2rem;
}
.stat { text-align: center; position: relative; }
.stat + .stat::before { content: ''; position: absolute; left: -1rem; top: 14%; bottom: 14%; width: 1px; background: rgba(210,172,104,.22); }
.stat-n {
  font-family: var(--impact); font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums; will-change: transform;
}
.stat-ai {
  background: linear-gradient(90deg, var(--gold) 20%, var(--gold-2) 40%, #FFF2CF 50%, var(--gold-2) 60%, var(--gold) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 3.4s linear infinite;
}
@keyframes shimmer { from { background-position: 200% center; } to { background-position: -200% center; } }
.stat-l { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,237,226,.66); margin-top: .9rem; }
@media (max-width: 760px) { #stats { grid-template-columns: 1fr 1fr; row-gap: 2.6rem; } .stat:nth-child(3)::before { display: none; } }

/* ════════ MARQUEE ════════ */
.marquee { overflow: hidden; white-space: nowrap; padding: 1rem 0; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track span { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.marquee-track i { color: var(--maroon-2); font-style: normal; }

/* ════════ MISSION — VERDICT STAMP ════════ */
#mission { background: var(--bg-2); }
.brief { display: flex; justify-content: center; }
.brief-paper {
  position: relative;
  background: linear-gradient(180deg, var(--brief-a), var(--brief-b));
  color: var(--brief-text);
  width: min(760px, 100%);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 5vw, 3.6rem) clamp(4.4rem, 8vw, 5.4rem);
  border-radius: 6px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.brief-eyebrow { font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brief-eyebrow); margin-bottom: 1rem; }
.brief-h { font-family: var(--impact); font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--brief-head); margin-bottom: 1.1rem; }
.brief-body { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; color: var(--brief-text); margin: 0; }
.brief-body em { color: var(--gold-s); }
.stamp {
  position: absolute; right: clamp(1rem, 5vw, 3rem); bottom: 1.4rem;
  border: 4px solid var(--stamp-c); border-radius: 8px;
  color: var(--stamp-c);
  padding: .5rem 1.3rem .6rem;
  text-align: center;
  transform: rotate(-12deg);
  opacity: 0;
  mix-blend-mode: var(--stamp-blend);
  will-change: transform;
}
.stamp span { font-family: var(--impact); font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: .12em; display: block; line-height: 1; }
.stamp small { font-family: var(--mono); font-size: .58rem; letter-spacing: .26em; display: block; margin-top: .3rem; }
.stamp-burst {
  position: absolute; right: clamp(2.4rem, 8vw, 5.4rem); bottom: 3rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(158,27,51,.5), transparent 70%);
  transform: scale(0); opacity: 0; pointer-events: none;
}

/* ════════ PRODUCTS — EXHIBIT RAIL ════════ */
#products { padding: 0; }
.rail-pin {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 6rem clamp(1.2rem, 6vw, 6rem) 4rem; overflow: hidden;
}
.rail-head { margin-bottom: 3.2rem; }
.rail-track { display: flex; gap: 1.5rem; width: max-content; will-change: transform; }
.exhibit {
  width: clamp(280px, 33vw, 400px); flex: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 8px 8px 8px;
  padding: 2.2rem 2.1rem; min-height: 330px;
  position: relative; margin-top: 26px;
}
.exhibit::before {
  content: ''; position: absolute; top: -26px; left: -1px;
  width: 130px; height: 26px;
  background: var(--maroon);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 8px 14px 0 0;
}
.exhibit h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--head); margin: 0 0 .7rem; }
.exhibit p { font-size: .95rem; color: var(--muted); margin: 0; }
.ex-tag {
  position: absolute; top: -26px; left: 12px; height: 26px; line-height: 26px;
  font-family: var(--mono) !important; font-size: .6rem !important; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone) !important; z-index: 1; margin: 0 !important;
}
.ex-intro { width: clamp(320px, 42vw, 540px); background: linear-gradient(160deg, var(--panel-2), var(--panel)); }
.ex-intro h3 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.ex-cta { background: linear-gradient(160deg, var(--maroon-d), var(--panel)); border-color: var(--line-2); }
.ex-cta .btn { margin: 1.2rem 0 1.4rem; align-self: flex-start; }
.ex-cta { display: flex; flex-direction: column; }
.ex-soon { font-size: .85rem !important; }
.ex-soon span { color: var(--gold-s); font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 860px) {
  .rail-pin { min-height: 0; padding-top: 5rem; }
  .rail-track { flex-direction: column; width: 100%; }
  .exhibit, .ex-intro { width: 100%; min-height: 0; }
}

/* ════════ SERVE — TILT + BEAM ════════ */
#serve { border-top: 1px solid var(--line); }
.serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.2rem; perspective: 1400px; }
.tilt-card { position: relative; border-radius: 10px; padding: 1px; will-change: transform; transform-style: preserve-3d; }
@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.tilt-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from var(--beam), transparent 0 70%, var(--maroon-2) 82%, var(--gold) 90%, transparent 98%);
  animation: beam 5.5s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }
@supports not (background: conic-gradient(from var(--beam), red, blue)) {
  .tilt-card::before { background: linear-gradient(135deg, rgba(158,27,51,.5), rgba(210,172,104,.4)); animation: none; }
}
.tc-in {
  position: relative; border-radius: 9px; height: 100%;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  padding: 2.3rem 2rem 2.1rem;
  overflow: hidden;
}
.tc-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(235,207,146,.12), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.tilt-card:hover .tc-in::after { opacity: 1; }
.tc-num {
  font-family: var(--impact); font-size: 3.2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--maroon-2);
  display: block; margin-bottom: 1.2rem;
}
.tc-in h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--head); margin-bottom: .6rem; }
.tc-in p { font-size: .94rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .serve-grid { grid-template-columns: 1fr; } }

/* ════════ WHY — FLIP CARDS ════════ */
#why { background: var(--bg-2); border-top: 1px solid var(--line); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
.flip { perspective: 1300px; min-height: 230px; cursor: pointer; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.flip:hover .flip-in, .flip.tapped .flip-in { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0; border-radius: 10px; padding: 2.1rem 2rem;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-front { background: var(--panel); border: 1px solid var(--line); }
.flip-front h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--head); margin-bottom: .6rem; }
.flip-front h3::before { content: '§'; color: var(--maroon-2); margin-right: .5em; }
.flip-front p { font-size: .93rem; color: var(--muted); margin: 0; }
.flip-hint { position: absolute; right: 1.2rem; bottom: .9rem; color: var(--gold-s); opacity: .6; font-size: 1.05rem; }
.flip-back {
  background: linear-gradient(160deg, var(--maroon), var(--maroon-d));
  border: 1px solid rgba(210,172,104,.3);
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.flip-back p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; color: var(--bone); margin: 0; }
.flip-back em { color: var(--gold-2); }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } .flip { min-height: 210px; } }

/* ════════ STORY ════════ */
#story { border-top: 1px solid var(--line); }
.record { position: relative; max-width: 760px; margin: 3.4rem auto 0; padding-left: 2.4rem; }
.rec-line { position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.rec-line span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--maroon-2), var(--gold)); transform: scaleY(0); transform-origin: 50% 0; display: block; }
.rec-item { position: relative; padding: 1.4rem 0; }
.rec-node {
  position: absolute; left: -2.4rem; top: 2.05rem; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-2); transition: all .4s ease;
}
.rec-item.on .rec-node {
  background: var(--maroon-2); border-color: var(--maroon-2);
  box-shadow: 0 0 0 6px rgba(158,27,51,.16), 0 0 22px rgba(158,27,51,.55);
}
.rec-tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-s); margin: 0 0 .4rem; }
.rec-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--head); margin-bottom: .5rem; }
.rec-item p:last-child { color: var(--muted); font-size: .97rem; margin: 0; }

/* ════════ FOUNDER ════════ */
#founder { background: var(--bg-2); border-top: 1px solid var(--line); }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; margin-top: 2.2rem; align-items: start; }
.founder-role { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-s); margin: 1rem 0 1.5rem; }
.founder-info p { color: var(--muted); font-size: .98rem; }
.founder-quote {
  margin: 0; position: relative;
  background: linear-gradient(180deg, var(--quote-a), var(--quote-b));
  border-radius: 8px; padding: 2.7rem 2.6rem 2.2rem;
  box-shadow: 0 36px 70px rgba(0,0,0,.5);
}
.founder-quote::before {
  content: '\201C'; position: absolute; top: -.32em; left: .22em;
  font-family: var(--serif); font-size: 7rem; color: var(--quote-mark); line-height: 1;
}
.founder-quote blockquote {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem); line-height: 1.75; color: var(--quote-text);
}
.founder-quote .q-word { opacity: .15; transition: opacity .12s linear; }
.founder-quote .q-word.on { opacity: 1; }
html:not(.gsap-on) .founder-quote .q-word { opacity: 1; }
.founder-quote figcaption { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--quote-cap); margin-top: 1.6rem; }
@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; } }

/* ════════ CONTACT ════════ */
#contact { border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.contact-card {
  display: block; position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.9rem 2rem;
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
a.contact-card:hover { border-color: var(--maroon-2); transform: translateY(-5px); background: var(--panel-2); }
.cc-tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-s); margin: 0 0 .55rem; }
.cc-val { font-family: var(--serif); font-size: 1.18rem; color: var(--head); margin: 0; }
.cc-arrow { position: absolute; right: 1.4rem; top: 1.3rem; color: var(--maroon-2); font-size: 1.1rem; }
.outro {
  margin: 3.8rem auto 0; max-width: 36em; text-align: center;
  font-family: var(--serif); font-size: clamp(1.3rem, 2.7vw, 1.8rem); color: var(--head); line-height: 1.5;
}
.outro em { color: var(--gold-s); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ════════ FOOTER ════════ */
footer { border-top: 1px solid var(--line); overflow: hidden; }
.footer-band { padding: 2.2rem 0 1.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.footer-word { display: inline-flex; will-change: transform; }
.footer-word span {
  font-family: var(--impact); font-size: clamp(3.4rem, 9vw, 8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(158,27,51,.55);
  padding-right: 1.5rem; user-select: none;
}
.footer-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 1.6rem clamp(1.2rem, 6vw, 6rem) 1.8rem;
  font-size: .82rem; color: var(--muted); font-family: var(--mono);
}
.footer-row p { margin: 0; font-size: .72rem; letter-spacing: .06em; }
.footer-links a { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-left: 1.6rem; }
.footer-links a:first-child { margin-left: 0; }
.footer-links a:hover { color: var(--gold-s); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .loader, #cursor, .scroll-cue, #field { display: none !important; }
  .stat-ai, .tilt-card::before { animation: none !important; }
  .marquee-track, .footer-word { transform: none !important; }
  .founder-quote .q-word, .stamp { opacity: 1 !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ════════ THEME TOGGLE / CLOCK / PALETTE BUTTON ════════ */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--gold-s); font-size: 1rem; cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  flex: none;
}
.theme-toggle:hover { background: rgba(158,27,51,.14); transform: rotate(-18deg); }
.clock {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  color: var(--muted); white-space: nowrap;
}
.pal-btn {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line-2); background: transparent; border-radius: 4px;
  color: var(--muted); font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .5rem .8rem; cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.pal-btn kbd { font-family: var(--mono); font-size: .68rem; color: var(--gold-s); }
.pal-btn:hover { color: var(--head); border-color: var(--gold-s); }
@media (max-width: 1180px) { .clock { display: none; } }
@media (min-width: 901px) { .pal-btn span { display: none; } }
@media (max-width: 900px) { .pal-btn kbd { display: none; } }

/* ════════ COMMAND PALETTE ════════ */
#palette { position: fixed; inset: 0; z-index: 2500; }
#palette[hidden] { display: none; }
.pal-back {
  position: absolute; inset: 0;
  background: rgba(10,8,9,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .pal-back { background: rgba(40,28,26,.35); }
.pal-box {
  position: relative; width: min(620px, calc(100vw - 2rem));
  margin: 14vh auto 0;
  background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  overflow: hidden;
  animation: pal-in .28s cubic-bezier(.22,1,.36,1);
}
@keyframes pal-in { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
#pal-in {
  width: 100%; border: none; outline: none; background: transparent;
  font-family: var(--mono); font-size: .92rem; color: var(--head);
  padding: 1.15rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
#pal-in::placeholder { color: var(--muted); }
#pal-list { list-style: none; margin: 0; padding: .5rem; max-height: 46vh; overflow-y: auto; }
#pal-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-radius: 8px; cursor: pointer;
  font-family: var(--serif); font-size: 1rem; color: var(--text);
}
#pal-list li .pl-hint { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#pal-list li.sel { background: var(--maroon); color: var(--bone); }
#pal-list li.sel .pl-hint { color: var(--gold-2); }
.pal-hint { margin: 0; padding: .7rem 1.2rem .85rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--muted); }
.pal-hint kbd { color: var(--gold-s); }

/* ════════ AI TERMINAL EXHIBIT ════════ */
.ex-term { background: #121012 !important; border-color: rgba(210,172,104,.28) !important; display: flex; flex-direction: column; }
.term-bar {
  display: flex; align-items: center; gap: .45rem;
  padding-bottom: .9rem; margin-bottom: .9rem;
  border-bottom: 1px solid rgba(210,172,104,.18);
}
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--maroon-2); opacity: .9; }
.term-bar i:nth-child(2) { background: var(--gold); }
.term-bar i:nth-child(3) { background: #5E9D7C; }
.term-bar span { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #7d7370; margin-left: .5rem; }
.term-body {
  margin: 0; flex: 1; font-family: var(--mono); font-size: .78rem; line-height: 1.85;
  color: #C9BFB4; white-space: pre-wrap; word-break: break-word;
}
.term-body .t-prompt { color: var(--gold-2); }
.term-body .t-ok { color: #7FBF9C; }
.term-body .t-caret { display: inline-block; width: .55em; height: 1.05em; background: var(--gold); vertical-align: -0.18em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ════════ AMBIENT CURSOR SPOTLIGHT ════════ */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(560px circle at var(--gx, 50%) var(--gy, 30%), var(--spot), transparent 70%);
}
@media (pointer: coarse) { body::after { display: none; } }

/* ════════ THEME WIPE (View Transitions) ════════ */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-wipe .65s cubic-bezier(.22,1,.36,1); }
@keyframes vt-wipe {
  from { clip-path: circle(0px at var(--tw-x, 92%) var(--tw-y, 2rem)); }
  to   { clip-path: circle(165% at var(--tw-x, 92%) var(--tw-y, 2rem)); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none !important; } }

/* compact topbar on phones */
@media (max-width: 600px) {
  .topbar { gap: .7rem; padding: .8rem 1rem; }
  .wordmark { font-size: 1.05rem; }
  .topbar-cta { padding: .5rem .7rem; font-size: .58rem; letter-spacing: .08em; }
  .pal-btn { padding: .45rem .6rem; }
  .pal-btn span { font-size: .58rem; }
  .theme-toggle { width: 34px; height: 34px; font-size: .9rem; }
}