:root {
  --bg: #0a0a0a;
  --bg-2: #111111;
  --paper: #f2f1ec;
  --paper-2: #e5e3dc;
  --ink: #0d0d0d;
  --muted: #9b9b95;
  --line-dark: rgba(255,255,255,.12);
  --line-light: rgba(0,0,0,.12);
  --accent: #ff4b32;
  --accent-2: #ff775f;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 120px 0; }
.section-dark { background: var(--bg); color: white; position: relative; }
.light-section { background: var(--paper); }
.mono { font-family: "IBM Plex Mono", monospace; }

.nav-wrap {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  background: rgba(10,10,10,.74);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; color: white; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(255,75,50,.9); }
.nav-links { display: flex; gap: 28px; font-size: 13px; color: #c5c5c2; }
.nav-links a:hover { color: white; }
.nav-cta { border: 1px solid rgba(255,255,255,.18); padding: 11px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; }

.hero { min-height: 100vh; display: grid; align-items: center; padding: 120px 0 80px; isolation: isolate; }
.noise { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: screen; z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; }
.eyebrow, .section-kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; font-weight: 600; color: #6c6c68; }
.eyebrow { color: #b7b7b2; display: flex; gap: 9px; align-items: center; margin-bottom: 28px; }
.live-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); }
.hero h1 { margin: 0; font-size: clamp(58px, 7.2vw, 104px); line-height: .91; letter-spacing: -.065em; font-weight: 800; max-width: 800px; }
.hero h1 span { color: #6e6e69; }
.hero-lead { max-width: 670px; color: #c4c4bf; font-size: 19px; line-height: 1.6; margin: 34px 0 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.btn-primary { background: var(--accent); color: white; box-shadow: 0 10px 35px rgba(255,75,50,.22); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(255,255,255,.16); color: #d5d5d1; }
.hero-note { margin-top: 18px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; color: #6e6e6b; }

.hero-device-wrap { position: relative; min-height: 570px; display: grid; place-items: center; }
.device-glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(255,75,50,.18), transparent 65%); filter: blur(20px); }
.device-perspective { position: relative; transform: perspective(1100px) rotateY(-11deg) rotateX(7deg); transform-style: preserve-3d; }
.device { width: min(460px, 78vw); aspect-ratio: 1.15/1; background: linear-gradient(145deg, #2b2b2d, #151517 52%, #0f0f11); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 22px; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 40px 100px rgba(0,0,0,.55); position: relative; }
.device::before { content:""; position:absolute; inset: 8px; border-radius: 22px; border:1px solid rgba(255,255,255,.04); pointer-events:none; }
.device-topline { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .12em; color: #777; }
.screen { margin-top: 20px; height: 185px; background: #080a09; border: 1px solid #2b302d; border-radius: 14px; padding: 16px; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.screen-head { display: flex; justify-content: space-between; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #9faa9f; }
.screen-rec { color: #ff6b58; font-weight: 600; }
.screen-rec i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff4b32; margin-right:7px; box-shadow:0 0 10px #ff4b32; }
.waveform { display:flex; gap:4px; align-items:center; height:83px; margin:8px 0; }
.waveform span { flex: 1; height: var(--h); background: #b8c7bb; border-radius: 3px; opacity: .84; animation: pulse 1.8s ease-in-out infinite alternate; }
.waveform span:nth-child(2n) { animation-delay: -.4s; }
.waveform span:nth-child(3n) { animation-delay: -.8s; }
@keyframes pulse { to { transform: scaleY(.56); opacity:.5; } }
.screen-status { display:flex; justify-content:space-between; font-family:"IBM Plex Mono", monospace; font-size:8px; color:#637068; }
.screen-status b { color:#b9c9bd; font-weight:500; }
.record-button { position:absolute; left:50%; bottom:58px; transform:translateX(-50%); width:92px; height:92px; border-radius:50%; border:9px solid #1d1d20; background: radial-gradient(circle at 35% 30%, #ff6b56, #da321f 58%, #8d1b10 100%); box-shadow: inset 0 5px 12px rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.55), 0 0 0 1px #3a3a3d; cursor:pointer; }
.record-button:active { transform:translateX(-50%) translateY(3px) scale(.98); }
.device-labels { position:absolute; bottom:18px; left:22px; right:22px; display:flex; justify-content:space-between; font-family:"IBM Plex Mono", monospace; font-size:7px; color:#666; letter-spacing:.08em; }
.device-shadow { width: 72%; height: 50px; background: #000; filter: blur(28px); opacity: .8; margin: 25px auto 0; border-radius: 50%; }

.section-kicker { margin-bottom: 30px; }
.dark-kicker { color: #74746f; }
.split-head h2 { margin: 0; font-size: clamp(44px, 6vw, 82px); letter-spacing: -.05em; line-height: .98; }
.split-head .muted { color: #9d9a90; margin-top: 8px; }
.joe-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:60px; }
.joe-card { min-height:230px; background:#e6e4dd; border:1px solid rgba(0,0,0,.07); border-radius:var(--radius); padding:28px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; }
.quote-mark { position:absolute; top:16px; left:24px; font-size:70px; line-height:1; color:#b6b2a7; font-family:Georgia, serif; }
.joe-card p { font-size:21px; line-height:1.35; margin:0 0 16px; max-width:280px; }
.joe-card strong { font-size:14px; font-family:"IBM Plex Mono", monospace; color:#6a6760; }
.problem-copy { max-width:850px; margin:70px 0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.problem-copy p { font-size:21px; line-height:1.55; margin:0; color:#4e4c47; }

.device-section { overflow:hidden; }
.device-intro { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; }
.device-intro h2, .workflow-head h2, .interview-copy h2, .vision-copy h2, .risk-head h2, .final-cta h2 { margin:0; font-size:clamp(48px, 6.6vw, 88px); line-height:.96; letter-spacing:-.055em; }
.device-intro h2 span, .final-cta h2 span { color:#6f6f6b; }
.device-intro p, .workflow-head p, .interview-copy p, .vision-copy p { margin:0; color:#b6b6b1; font-size:18px; line-height:1.6; max-width:520px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:70px; }
.feature-card { min-height:300px; border:1px solid var(--line-dark); background:#111; border-radius:20px; padding:24px; }
.feature-icon { font-family:"IBM Plex Mono", monospace; color:#70706c; font-size:11px; }
.feature-card h3 { font-size:26px; margin:80px 0 12px; }
.feature-card p { color:#94948f; line-height:1.55; font-size:14px; margin:0; }
.ports { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.ports span { border:1px solid var(--line-dark); border-radius:999px; padding:9px 12px; font-family:"IBM Plex Mono", monospace; font-size:9px; color:#7d7d79; }

.workflow-section { background:var(--paper); }
.workflow-head { display:flex; justify-content:space-between; align-items:end; gap:60px; }
.workflow-head h2 { color:var(--ink); max-width:780px; }
.workflow-head p { color:#6d6a63; }
.flow-line { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; margin-top:70px; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); }
.flow-node { padding:26px 8px; display:grid; gap:5px; }
.flow-node span { font-family:"IBM Plex Mono", monospace; font-size:9px; color:#8b877f; }
.flow-node strong { font-size:22px; letter-spacing:-.03em; }
.flow-node small { color:#7b7871; font-size:12px; }
.flow-arrow { color:#aaa69d; }
.before-after { margin-top:70px; display:grid; grid-template-columns:1fr auto 1fr; gap:30px; align-items:center; }
.raw-card, .knowledge-card { border:1px solid var(--line-light); border-radius:24px; padding:28px; min-height:310px; background:#ebe9e2; }
.card-label { font-family:"IBM Plex Mono", monospace; font-size:9px; color:#77736b; letter-spacing:.12em; margin-bottom:50px; }
.raw-card p { font-size:22px; line-height:1.5; color:#3c3b37; }
.audio-bar { display:flex; align-items:end; gap:4px; height:55px; margin-top:28px; }
.audio-bar span { width:8px; background:#77736b; border-radius:4px; }
.audio-bar span:nth-child(1){height:18px}.audio-bar span:nth-child(2){height:44px}.audio-bar span:nth-child(3){height:28px}.audio-bar span:nth-child(4){height:52px}.audio-bar span:nth-child(5){height:31px}.audio-bar span:nth-child(6){height:39px}.audio-bar span:nth-child(7){height:22px}.audio-bar span:nth-child(8){height:47px}
.transform-arrow { font-size:40px; color:#aaa69d; }
.knowledge-card { background:#111; color:white; border-color:#202020; }
.knowledge-card .card-label { color:#6e6e69; margin-bottom:26px; }
.knowledge-card h3 { margin:0 0 28px; font-size:25px; }
.knowledge-card dl { margin:0; }
.knowledge-card dl div { display:grid; grid-template-columns:100px 1fr; gap:14px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
.knowledge-card dt { color:#6f6f6b; font-family:"IBM Plex Mono", monospace; font-size:9px; text-transform:uppercase; }
.knowledge-card dd { margin:0; color:#cfcfca; font-size:13px; }

.interview-section { background:#dedbd2; }
.interview-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.interview-copy h2 { font-size:clamp(46px, 5.4vw, 74px); }
.interview-copy p { color:#5e5b55; margin-top:28px; }
.chat-stack { display:grid; gap:12px; }
.chat { padding:18px 20px; border-radius:18px; max-width:88%; font-size:15px; line-height:1.4; }
.chat.assistant { background:#111; color:white; border-bottom-left-radius:5px; }
.chat.user { background:#f5f3ed; margin-left:auto; border-bottom-right-radius:5px; border:1px solid rgba(0,0,0,.08); }

.vision-section { overflow:hidden; }
.vision-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.vision-copy h2 { font-size:clamp(48px,5.5vw,76px); }
.vision-copy p { margin-top:28px; }
.knowledge-map { position:relative; min-height:420px; border:1px solid var(--line-dark); border-radius:26px; background:radial-gradient(circle at 50% 45%, rgba(255,75,50,.08), transparent 40%), #0e0e0f; overflow:hidden; }
.knowledge-map svg { position:absolute; inset:0; width:100%; height:100%; }
.knowledge-map line { stroke:#474743; stroke-width:1.2; }
.node { position:absolute; z-index:2; font-family:"IBM Plex Mono", monospace; font-size:9px; letter-spacing:.08em; color:#c8c8c3; padding:13px 16px; border:1px solid #33332f; background:#171718; border-radius:999px; box-shadow:0 0 0 4px #0e0e0f; }
.n1{left:8%;top:14%}.n2{left:40%;top:32%}.n3{right:7%;top:12%}.n4{left:20%;bottom:18%}.n5{right:17%;bottom:17%}.n6{right:3%;top:44%}

.risk-section { background:#f0eee7; }
.risk-head h2 { max-width:980px; }
.big-quote { font-size:clamp(42px,6vw,80px); letter-spacing:-.05em; margin:22px 0 0; color:#a6a298; font-weight:700; }
.roles { margin-top:55px; display:flex; flex-wrap:wrap; gap:10px; }
.roles span { border:1px solid var(--line-light); padding:13px 15px; border-radius:999px; font-family:"IBM Plex Mono", monospace; font-size:10px; color:#5f5b54; background:#f8f6f0; }

.final-cta { padding:140px 0 60px; text-align:center; }
.final-cta h2 { max-width:950px; margin:0 auto; }
.final-cta p { max-width:700px; margin:30px auto; color:#a9a9a4; font-size:18px; line-height:1.6; }
.final-cta .btn { margin-top:4px; }
.footer-line { margin-top:110px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; font-family:"IBM Plex Mono", monospace; font-size:9px; color:#5f5f5b; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }

@media (max-width: 980px) {
  .nav-links { display:none; }
  .hero-grid, .device-intro, .interview-grid, .vision-grid { grid-template-columns:1fr; }
  .hero-copy { padding-top:50px; }
  .hero-device-wrap { min-height:480px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .problem-copy { grid-template-columns:1fr; max-width:700px; }
  .workflow-head { display:grid; }
  .before-after { grid-template-columns:1fr; }
  .transform-arrow { transform:rotate(90deg); justify-self:center; }
  .flow-line { grid-template-columns:1fr 1fr; gap:0; }
  .flow-arrow { display:none; }
  .flow-node { border-bottom:1px solid var(--line-light); }
}

@media (max-width: 700px) {
  .container { width:min(100% - 28px, 1180px); }
  .section { padding:84px 0; }
  .nav { height:64px; }
  .nav-cta { display:none; }
  .hero { min-height:auto; padding-top:115px; }
  .hero h1 { font-size:clamp(50px, 15vw, 72px); }
  .hero-lead { font-size:17px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-device-wrap { min-height:400px; }
  .device-perspective { transform:perspective(900px) rotateY(-6deg) rotateX(4deg) scale(.9); }
  .joe-grid, .feature-grid { grid-template-columns:1fr; }
  .joe-card { min-height:190px; }
  .feature-card { min-height:230px; }
  .feature-card h3 { margin-top:48px; }
  .split-head h2, .device-intro h2, .workflow-head h2, .interview-copy h2, .vision-copy h2, .risk-head h2, .final-cta h2 { font-size:clamp(44px, 12vw, 64px); }
  .workflow-head { gap:25px; }
  .flow-line { grid-template-columns:1fr; }
  .flow-node { padding:20px 5px; }
  .knowledge-map { min-height:350px; }
  .node { font-size:8px; padding:11px 13px; }
  .footer-line { gap:18px; flex-wrap:wrap; justify-content:center; }
}