:root {
  --ink: #0b0b0a;
  --coal: #171715;
  --black: #050505;
  --paper: #f4f1eb;
  --paper-deep: #ebe7de;
  --gold: #c69d32;
  --gold-bright: #e4bd50;
  --gold-dark: #96721d;
  --white: #fbfaf7;
  --muted: #69665f;
  --line: rgba(24, 22, 17, .16);
  --radius: .8rem;
  --background: var(--ink);
  --foreground: var(--white);
  --primary: var(--gold);
  --primary-foreground: var(--ink);
  --card: #fff;
  --card-foreground: var(--ink);
  --border: rgba(255, 255, 255, .16);
  --ring: var(--gold);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: Arial, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-width { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.narrow-center { max-width: 900px; margin-inline: auto; text-align: center; }

.hero {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  isolation: isolate;
  background: #090908;
}
.hero-backdrop, .case-image {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  z-index: -3;
}
.hero-backdrop { background-image: url('assets/hero-studio.jpg'); background-position: 57% center; }
.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,4,4,.98) 0%, rgba(4,4,4,.90) 29%, rgba(4,4,4,.43) 66%, rgba(4,4,4,.10) 100%), linear-gradient(0deg, rgba(2,2,2,.50), transparent 33%);
}
.hero-grain, .final-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.32) .55px, transparent .7px), radial-gradient(rgba(255,255,255,.16) .45px, transparent .65px);
  background-position: 0 0, 7px 11px;
  background-size: 13px 13px, 17px 17px;
  mix-blend-mode: soft-light;
}
.hero-inner { position: relative; min-height: 690px; padding: 33px 0 55px; }
.brand-mark {
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(255,255,255,.83);
}
.hero-copy { width: min(575px, 56%); padding-top: 95px; position: relative; z-index: 3; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 500;
  font-size: 10px;
}
.eyebrow span { display: block; width: 62px; height: 1px; background: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 {
  max-width: 580px;
  margin: 16px 0 15px;
  font-family: "Arial Narrow", "Aptos Narrow", Arial, sans-serif;
  font-size: clamp(52px, 5.65vw, 79px);
  font-weight: 700;
  line-height: .93;
  letter-spacing: -.035em;
  color: #fcfbf9;
}
.hero h1 strong { display: block; color: var(--gold-bright); font-weight: 700; }
.hero-copy > p { max-width: 510px; color: #e4e1db; font-size: 15px; line-height: 1.5; }
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 2px;
  padding: 16px 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, #f1cf69 0%, #c79928 49%, #e4bc4d 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 12px 25px rgba(0,0,0,.20);
  color: #16130d;
  font-size: 15px;
  font-weight: 700;
  transition: transform 160ms cubic-bezier(.23,1,.32,1), filter 160ms ease, box-shadow 160ms ease;
}
.cta-button:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 17px 32px rgba(0,0,0,.28); }
.cta-button:active { transform: scale(.97); }
.hero-copy small { display: block; margin-top: 13px; color: rgba(235,230,221,.69); font-size: 10px; line-height: 1.35; }

.product-stage { position: absolute; top: 55px; right: -8px; width: 51%; height: 620px; z-index: 2; }
.book-wrap {
  position: absolute;
  z-index: 2;
  right: 25%;
  top: 41px;
  width: min(263px, 47%);
  aspect-ratio: 2 / 3;
  transform: perspective(1500px) rotateY(-11deg) rotateZ(1deg);
  transform-origin: center right;
  filter: drop-shadow(20px 27px 20px rgba(0,0,0,.66));
  transition: transform 500ms cubic-bezier(.23,1,.32,1);
}
.product-stage:hover .book-wrap { transform: perspective(1500px) rotateY(-4deg) rotateZ(0); }
.book-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,.20); }
.book-spine { position: absolute; z-index: -1; width: 17px; height: calc(100% + 2px); top: -1px; right: -16px; background: linear-gradient(90deg, #1c1b19, #57544d 40%, #0c0c0c); transform: skewY(-29deg); transform-origin: left top; }
.book-shadow { position: absolute; right: 11%; bottom: 76px; width: 63%; height: 30px; border-radius: 50%; background: rgba(0,0,0,.73); filter: blur(13px); }
.clarity-note { position: absolute; right: 0; top: 107px; width: 84px; color: rgba(255,255,255,.85); text-transform: uppercase; font-family: Consolas, "Courier New", monospace; font-size: 9px; line-height: 1.6; letter-spacing: .16em; }
.clarity-note span { display: block; }
.clarity-note i { display: block; width: 42px; height: 1px; margin-top: 20px; background: var(--gold); }
.book-stack { position: absolute; display: grid; gap: 4px; right: -4px; bottom: 80px; width: 145px; transform: skewY(4deg); }
.book-stack div { height: 29px; display: flex; align-items: center; padding-left: 18px; border-radius: 2px; background: linear-gradient(90deg, #111 0%, #272621 88%, #b59234 90%, #1d1c19 100%); box-shadow: 0 3px 8px rgba(0,0,0,.45); color: #d4b451; font-family: Consolas, "Courier New", monospace; font-size: 8px; letter-spacing: .13em; }
.scroll-cue { position: absolute; z-index: 4; bottom: 20px; left: 50%; display: inline-flex; align-items: center; gap: 6px; transform: translateX(-50%); color: rgba(255,255,255,.5); font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.scroll-cue svg { animation: bounce 1.7s infinite; }

.light-section { background: var(--paper); color: #171512; position: relative; }
.light-section::before { content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none; background-image: radial-gradient(rgba(0,0,0,.25) .45px, transparent .65px); background-size: 15px 15px; mix-blend-mode: soft-light; }
.light-section > * { position: relative; }
h2 { font-family: "Arial Narrow", "Aptos Narrow", Arial, sans-serif; font-weight: 700; letter-spacing: -.025em; line-height: .97; }
.section-intro { margin: 8px auto 0; max-width: 720px; color: #534f47; font-size: 14px; line-height: 1.48; }
.signal-section { padding: 49px 0 22px; }
.signal-section h2 { margin-bottom: 0; font-size: clamp(35px, 4vw, 52px); }
.question-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
.question-card { min-height: 81px; padding: 12px 8px 10px; border: 1px solid rgba(25,23,18,.14); border-radius: 9px; background: rgba(255,255,255,.31); box-shadow: 0 3px 8px rgba(53,45,29,.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.question-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.72); box-shadow: 0 10px 18px rgba(53,45,29,.08); }
.question-card svg { color: #ad8822; fill: #b28a20; stroke: white; width: 26px; height: 26px; }
.question-card span { font-size: 12px; font-weight: 600; text-align: center; }

.method-section { padding: 26px 0 42px; }
.gold-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 12px; color: #ab8420; text-transform: uppercase; }
.gold-rule span { width: 33px; height: 1px; background: #b9932c; }
.gold-rule em { font-family: Consolas, "Courier New", monospace; font-size: 9px; font-style: normal; letter-spacing: .14em; }
.method-section h2 { margin: 0; font-size: clamp(34px, 4.1vw, 52px); }
.stepper { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 30px; }
.step { display: grid; place-items: center; grid-template-rows: 30px 26px; position: relative; }
.step-line { position: absolute; left: calc(50% + 24px); right: calc(-50% + 25px); top: 14px; height: 1px; background: linear-gradient(90deg, #bc9634, #d3bb72); }
.step:last-child .step-line { display: none; }
.step-number { display: grid; place-items: center; width: 31px; height: 31px; position: relative; z-index: 1; border: 1px solid #b7902b; border-radius: 50%; background: var(--paper); font-family: Consolas, "Courier New", monospace; font-size: 13px; font-weight: 500; }
.step span { margin-top: 9px; font-size: 12px; font-weight: 700; }

.pillars-section { padding: 0 0 38px; }
.pillars-section h2 { margin: 0 0 14px; text-align: center; font-size: clamp(40px, 4.5vw, 59px); }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.pillar-card { display: flex; min-height: 108px; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid rgba(26,23,15,.13); border-radius: 8px; background: rgba(255,255,255,.48); box-shadow: 0 6px 13px rgba(35,30,20,.07); }
.icon-disc, .delivery-icon { flex: 0 0 auto; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #dcb95a, #ad7d1e); box-shadow: inset 0 1px rgba(255,255,255,.5); }
.icon-disc { width: 55px; height: 55px; border-radius: 50%; }
.pillar-card h3, .delivery-item h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
.pillar-card p, .delivery-item p { margin: 0; color: #514d46; font-size: 12px; line-height: 1.38; }

.case-study { position: relative; min-height: 224px; overflow: hidden; isolation: isolate; background: #111; }
.case-image { z-index: -3; background-image: url('assets/desk-still-life.jpg'); background-position: center 48%; }
.case-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(0,0,0,.08) 0%, rgba(7,7,7,.35) 29%, rgba(5,5,5,.90) 53%, rgba(5,5,5,.97) 100%); }
.case-inner { display: flex; justify-content: flex-end; align-items: center; min-height: 224px; padding-top: 28px; padding-bottom: 28px; }
.case-text { width: min(640px, 60%); color: #f4f0e8; }
.case-text .gold-rule { justify-content: flex-start; margin: 0 0 12px; }
.case-text h2 { margin-bottom: 8px; font-size: clamp(31px, 3.5vw, 45px); }
.case-text p { margin: 0; max-width: 635px; color: rgba(255,255,255,.86); font-size: 13px; line-height: 1.48; }

.delivery-section { padding: 31px 0 15px; }
.delivery-section h2 { margin: 0; font-size: clamp(37px, 4.1vw, 52px); }
.delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.delivery-item { display: flex; align-items: center; gap: 15px; padding: 0 28px; min-height: 76px; border-right: 1px solid rgba(26,23,15,.18); }
.delivery-item:first-child { padding-left: 14px; }
.delivery-item:last-child { border-right: 0; }
.delivery-icon { width: 52px; height: 52px; border: 1px solid #c39c32; color: #a37917; background: transparent; border-radius: 50%; }
.prototype-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 20px 0 0; padding-top: 8px; border-top: 1px solid rgba(22,19,14,.20); color: #777168; font-size: 10px; }
.prototype-note svg { color: var(--gold-dark); }

.final-cta { position: relative; overflow: hidden; padding: 31px 0 22px; background: radial-gradient(ellipse at 12% 130%, #373223 0%, transparent 42%), radial-gradient(ellipse at 75% 0%, #2a2822 0%, transparent 48%), #090909; color: #faf9f6; isolation: isolate; }
.final-inner { position: relative; text-align: center; }
.final-cta .gold-rule { margin-bottom: 13px; }
.final-cta h2 { margin: 0 auto 7px; max-width: 850px; font-size: clamp(35px, 4.2vw, 54px); }
.final-cta > p, .final-inner > p { margin: 0 auto; max-width: 670px; color: rgba(255,255,255,.80); font-size: 13px; line-height: 1.45; }
.cta-button-large { margin-top: 18px; padding: 15px 27px; }
.signature { position: absolute; right: 3%; top: 47px; color: #d7ad3f !important; font-family: Georgia, "Times New Roman", serif; font-size: 21px !important; font-style: italic; line-height: .93 !important; text-align: left; transform: rotate(-10deg); }
.final-cta footer { display: grid; grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr); align-items: center; gap: 21px; max-width: 500px; margin: 26px auto 0; color: #f2eee6; font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: .42em; }
.final-cta footer span { height: 1px; background: linear-gradient(90deg, transparent, #bd9630); }
.final-cta footer span:last-child { transform: rotate(180deg); }

@keyframes bounce { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .7s cubic-bezier(.23,1,.32,1) both; }
  .product-stage { animation: appear .95s .08s cubic-bezier(.23,1,.32,1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes appear { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
  .page-width { width: min(100% - 40px, 1180px); }
  .hero { min-height: auto; }
  .hero-inner { min-height: 770px; padding-top: 26px; }
  .hero-copy { width: 57%; padding-top: 60px; }
  .hero h1 { font-size: clamp(47px, 7vw, 65px); }
  .product-stage { width: 55%; right: -6%; top: 80px; }
  .book-wrap { right: 23%; width: 50%; }
  .clarity-note { right: 0; }
  .book-stack { right: 0; width: 128px; }
  .question-grid { grid-template-columns: repeat(3, 1fr); }
  .question-card { min-height: 76px; }
  .case-text { width: 62%; }
  .signature { right: 0; }
}

@media (max-width: 640px) {
  .page-width { width: min(100% - 32px, 1180px); }
  .hero { min-height: 845px; }
  .hero-backdrop { background-position: 64% center; }
  .hero-backdrop::after { background: linear-gradient(90deg, rgba(4,4,4,.94), rgba(4,4,4,.74) 70%, rgba(4,4,4,.50)), linear-gradient(0deg, rgba(2,2,2,.92), transparent 57%); }
  .brand-mark { font-size: 8px; }
  .hero-copy { width: 100%; padding-top: 50px; }
  .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .eyebrow span { width: 35px; }
  .hero h1 { width: 89%; margin-top: 13px; font-size: clamp(47px, 13vw, 61px); }
  .hero-copy > p { width: 79%; font-size: 13px; }
  .hero-copy small { width: 72%; }
  .product-stage { top: 435px; right: -8px; width: 92%; height: 370px; }
  .book-wrap { top: 0; right: 25%; width: 175px; }
  .book-shadow { bottom: 55px; }
  .clarity-note { top: 24px; right: 1%; width: 64px; font-size: 7px; }
  .book-stack { right: -5px; bottom: 62px; width: 102px; gap: 3px; }
  .book-stack div { height: 22px; padding-left: 9px; font-size: 6px; }
  .scroll-cue { display: none; }
  .signal-section { padding-top: 37px; }
  .signal-section h2 br { display: none; }
  .section-intro { font-size: 13px; }
  .question-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .question-card { min-height: 71px; }
  .method-section { padding: 32px 0 36px; }
  .stepper { grid-template-columns: repeat(4, 1fr); row-gap: 24px; }
  .step-line { display: none; }
  .step span { font-size: 11px; }
  .pillar-grid { grid-template-columns: 1fr; gap: 10px; }
  .pillar-card { min-height: 91px; padding: 14px 16px; }
  .icon-disc { width: 48px; height: 48px; }
  .case-study, .case-inner { min-height: 315px; }
  .case-image { background-position: 23% center; }
  .case-overlay { background: linear-gradient(90deg, rgba(0,0,0,.23), rgba(5,5,5,.86) 50%, rgba(5,5,5,.98)); }
  .case-text { width: 76%; }
  .case-text p { font-size: 12px; }
  .delivery-grid { grid-template-columns: 1fr; width: min(100% - 40px, 500px); margin-top: 22px; }
  .delivery-item, .delivery-item:first-child { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(26,23,15,.17); }
  .delivery-item:last-child { border-bottom: 0; }
  .signature { display: none; }
  .final-cta { padding-top: 36px; }
  .final-cta footer { gap: 11px; font-size: 9px; letter-spacing: .25em; }
}