:root {
  --ink: #0a0b0d;
  --paper: #f2efe8;
  --paper-soft: #e7e3d9;
  --lime: #d8ff38;
  --orange: #a92a00;
  --orange-on-dark: #ff8055;
  --blue: #5d71ff;
  --line: rgba(10, 11, 13, 0.16);
  --muted: #686a68;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
svg { display: block; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-180%);
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.site-header, footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-size: 1.1rem; font-weight: 850; letter-spacing: -.04em; }
.brand-mark { width: 29px; height: 29px; fill: var(--ink); }
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.7rem); }
nav a { text-decoration: none; font-size: .76rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-status { display: flex; align-items: center; gap: .55rem; }
.nav-status span, .eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,90,36,.12); }

.hero {
  max-width: var(--max);
  min-height: 700px;
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8.5rem) 2rem clamp(4rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  align-items: center;
  gap: 3rem;
  overflow: hidden;
}
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.hero h1, .section h2 { margin: 0; font-size: clamp(3.7rem, 7.2vw, 7rem); line-height: .89; letter-spacing: -.075em; font-weight: 880; }
h1 em, h2 em { color: var(--orange); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-lede { max-width: 610px; margin: 2rem 0 2.2rem; color: #4d4f4c; font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 52px; padding: .8rem 1.2rem; border: 1px solid var(--ink); text-decoration: none; font-size: .76rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; transition: transform .18s, box-shadow .18s; }
.button:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.button.primary { color: var(--paper); background: var(--ink); }
.button.secondary { background: transparent; }
.trust-list { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; padding: 0; margin: 2.2rem 0 0; list-style: none; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.trust-list li::before { content: "✦"; margin-right: .45rem; color: var(--orange); }

.product-stage { position: relative; min-height: 510px; display: grid; place-items: center; }
.stage-glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: var(--lime); filter: blur(2px); opacity: .76; }
.source-card { position: absolute; left: 0; top: 74px; z-index: 1; width: 270px; padding: 10px; background: #181a1d; border: 1px solid #363a3d; box-shadow: 0 22px 55px rgba(0,0,0,.25); transform: rotate(-5deg); }
.source-top { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 8px; color: #a9adb0; font: 650 9px/1 monospace; }
.source-top span:first-child { width: 50px; height: 5px; background: #4b5054; }
.source-scene { position: relative; height: 145px; overflow: hidden; background: linear-gradient(145deg,#252942,#cc4c35); }
.scene-orb { position: absolute; width: 100px; height: 100px; right: 15px; top: 10px; border-radius: 50%; background: #f3ad57; filter: blur(1px); }
.scene-person { position: absolute; left: 50px; bottom: -45px; width: 95px; height: 150px; border-radius: 45px 45px 15px 15px; background: #111a20; transform: rotate(8deg); }
.play-icon { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 22px; text-shadow: 0 2px 12px #000; }
.timeline { position: relative; height: 29px; margin-top: 8px; display: flex; gap: 3px; background: #24272a; overflow: hidden; }
.timeline i { position: absolute; z-index: 1; left: 40%; width: 2px; height: 100%; background: var(--orange); }
.timeline b { flex: 1; background: repeating-linear-gradient(90deg,#5d71ff 0 2px,transparent 2px 5px); opacity: .65; }
.source-meta { display: flex; gap: 7px; padding-top: 7px; }.source-meta span { width: 38%; height: 4px; background: #414549; }
.forge-line { position: absolute; z-index: 2; left: 37%; width: 30%; height: 1px; background: var(--ink); }
.forge-line::after { content: ""; position: absolute; right: -2px; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.forge-line span { position: absolute; left: 42%; top: -14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--paper); background: var(--ink); font: 800 8px/1 sans-serif; }
.clip-stack { position: absolute; right: 7%; top: 28px; z-index: 3; width: 225px; height: 460px; }
.phone { position: absolute; width: 195px; height: 370px; padding: 8px; background: #0d0e10; border: 1px solid #404448; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.phone-back { left: 24px; top: 60px; transform: rotate(12deg); opacity: .62; }
.phone-mid { left: -28px; top: 38px; transform: rotate(-9deg); opacity: .8; }
.phone-front { top: 0; left: 0; }
.phone-scene { position: relative; height: 325px; overflow: hidden; border-radius: 13px 13px 5px 5px; background: radial-gradient(circle at 70% 20%,#fb995a 0 12%,transparent 13%),linear-gradient(165deg,#6871b3,#d9b06d 49%,#253031 50%); }
.scene-two { background: linear-gradient(145deg,#ff6c3b,#36205d 55%,#111 56%); }.scene-three { background: linear-gradient(160deg,#d8ff38,#29435e 48%,#151719 49%); }
.portrait { position: absolute; width: 150px; height: 240px; left: 20px; bottom: -55px; border-radius: 70px 70px 20px 20px; background: #192527; box-shadow: inset 0 15px 0 #d09b6e; }
.caption-line { position: absolute; left: 12px; right: 12px; bottom: 67px; padding: 3px 5px; text-align: center; color: white; background: #0d0e10; font: 900 14px/1.1 sans-serif; transform: rotate(-2deg); }
.caption-line.accent { bottom: 47px; color: var(--ink); background: var(--lime); transform: rotate(1deg); }
.phone-label { display: flex; justify-content: space-between; padding: 8px 3px 0; color: #b6b9b9; font: 700 9px/1 monospace; }

.proof-strip { max-width: var(--max); margin: 0 auto; padding: 1.5rem 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); align-items: center; }
.proof-strip > p { font-family: Georgia, serif; font-style: italic; font-size: 1.1rem; }
.proof-strip > div { display: flex; align-items: center; gap: .7rem; padding: .5rem 1rem; border-left: 1px solid var(--line); }
.proof-strip strong { color: var(--orange); font: 850 10px/1 monospace; }.proof-strip span { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }

.section { max-width: var(--max); margin: 0 auto; padding: clamp(5.5rem, 10vw, 9rem) 2rem; }
.section-heading { display: grid; grid-template-columns: 1.3fr .7fr; column-gap: 4rem; align-items: end; margin-bottom: 4rem; }
.section-heading .eyebrow { grid-column: 1 / -1; }.section h2 { font-size: clamp(3rem, 5vw, 5rem); }.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 1.05rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; margin: 0; background: var(--ink); list-style: none; border: 1px solid var(--ink); }
.feature-card { position: relative; min-height: 430px; padding: clamp(1.7rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--paper); }
.feature-wide { grid-column: 1 / -1; min-height: 330px; display: grid; grid-template-columns: .7fr 1fr 1.2fr; align-items: center; gap: 2rem; }
.feature-number { position: absolute; top: 1.2rem; right: 1.3rem; font: 800 .65rem/1 monospace; }.feature-kicker { margin: 0 0 .7rem; color: var(--orange); font-size: .69rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.feature-card h3 { max-width: 470px; margin: 0 0 1rem; font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.05em; }.feature-card p:last-child { max-width: 500px; margin-bottom: 0; color: var(--muted); }
.waveform { height: 145px; display: flex; align-items: center; gap: 5px; padding: 1rem; background: var(--ink); }.waveform i { flex: 1; min-width: 2px; height: var(--h, 35%); background: var(--lime); }.waveform i:nth-child(3n) { height: 72%; }.waveform i:nth-child(4n) { height: 95%; }.waveform i:nth-child(5n) { height: 52%; }
.feature-icon { width: 150px; height: 150px; align-self: center; }.transcript-icon { padding: 27px 20px; border-radius: 50%; background: var(--blue); transform: rotate(-8deg); }.transcript-icon span { display: block; height: 8px; margin: 10px 0; background: var(--paper); }.transcript-icon span:nth-child(2) { width: 73%; }.transcript-icon span:nth-child(4) { width: 52%; }
.feature-dark { color: var(--paper); background: var(--ink); }.feature-dark .feature-kicker { color: var(--orange-on-dark); }.feature-dark p:last-child { color: #aeb0ad; }.crop-demo { position: relative; width: 190px; height: 190px; align-self: center; border: 1px solid #45494a; background: linear-gradient(145deg,#3c5363,#d97755); }.crop-face { position: absolute; inset: 34px 49px 0; border-radius: 50px 50px 0 0; background: #171c1e; box-shadow: inset 0 17px #d0a178; }.crop-demo span { position: absolute; inset: 18px 45px; border: 2px solid var(--lime); }.crop-demo span::before,.crop-demo span::after { content:""; position:absolute; background:var(--lime); }.crop-demo span::before { width: 7px; height: 7px; left: 50%; top: 50%; border-radius:50%; }.crop-demo span::after { left:50%; top:0; width:1px; height:100%; opacity:.5; }
.feature-review { grid-template-columns: .7fr 1fr 1fr; }.review-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items:center; padding: 1.5rem; border:1px solid var(--line); background:#e3dfd5; }.review-controls span { grid-column:1/-1; font:800 9px/1 monospace; }.review-controls i { grid-column:1/-1; height:7px; background:#c2beb4; }.review-controls i:nth-of-type(2) { width:72%; }.review-controls b { padding:.7rem .3rem; border:1px solid var(--ink); text-align:center; font-size:9px; }.review-controls b:last-child { color:var(--ink); background:var(--lime); }

.plans { border-top: 1px solid var(--line); }
.plans-heading { margin-bottom: 3rem; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: var(--ink); border: 1px solid var(--ink); }
.plan-card { min-height: 275px; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); }
.plan-card.featured { color: var(--paper); background: var(--ink); }
.plan-card h3 { margin: 2.7rem 0 1.2rem; font-size: clamp(3rem, 5vw, 5rem); line-height: .9; letter-spacing: -.07em; }
.plan-card h3 span { font-size: .45em; vertical-align: top; }
.plan-card > p:last-child { max-width: 23rem; color: var(--muted); }
.plan-card.featured > p:last-child { color: #b4b6b3; }
.promotion { display: grid; grid-template-columns: .35fr 1.65fr; gap: 2rem; margin-top: 1rem; padding: 1.5rem; color: var(--ink); background: var(--lime); border: 1px solid var(--ink); }
.promotion strong { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.promotion p { margin: 0; }
.platform-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; border-block: 1px solid var(--line); }
.platform-row div { padding: 1.3rem; border-right: 1px solid var(--line); }
.platform-row div:last-child { border-right: 0; }
.platform-row strong, .platform-row span { display: block; }
.platform-row span { margin-top: .25rem; color: var(--muted); font-size: .82rem; }
.availability-note { margin: 1.2rem 0 0; color: var(--muted); font-size: .9rem; }

.privacy { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:center; gap: clamp(3rem,9vw,9rem); color:var(--paper); background:var(--ink); }
.privacy > * { width:100%; max-width:560px; }.privacy-art { position:relative; min-height:520px; justify-self:end; display:grid; place-items:center; }.privacy-ring { position:absolute; border:1px solid #4a4c4d; border-radius:50%; }.ring-one { width:440px; height:440px; }.ring-two { width:300px; height:300px; border-style:dashed; }.privacy-core { z-index:1; display:grid; place-items:center; width:150px; height:150px; border-radius:50%; background:var(--lime); box-shadow:0 0 80px rgba(216,255,56,.2); }.privacy-core svg { width:64px; fill:var(--ink); }.orbit-label { position:absolute; padding:.55rem .75rem; color:var(--ink); background:var(--paper); font:850 9px/1 monospace; letter-spacing:.12em; }.label-local { top:10%; left:18%; transform:rotate(-7deg); }.label-private { top:53%; right:0; transform:rotate(8deg); }.label-yours { bottom:5%; left:34%; transform:rotate(-3deg); background:var(--orange-on-dark); color:var(--ink); }
.privacy h2 { font-size:clamp(3rem,5vw,5rem); }.privacy h2 em { color:var(--orange-on-dark); }.privacy-copy > p:nth-of-type(2) { margin:2rem 0; color:#b4b6b3; font-size:1.08rem; }.privacy-copy ul { padding:0; margin:2.5rem 0 0; list-style:none; }.privacy-copy li { display:flex; gap:1rem; padding:1.2rem 0; border-top:1px solid #333638; }.privacy-copy li > span { color:var(--lime); font-weight:900; }.privacy-copy strong,.privacy-copy small { display:block; }.privacy-copy small { margin-top:.3rem; color:#989b98; }

.launch { position:relative; max-width:var(--max); min-height:580px; display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:4rem; overflow:hidden; }.launch-grid { position:absolute; inset:0; z-index:-1; opacity:.28; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to right,transparent,black); }.launch-copy > p:nth-of-type(2) { max-width:680px; margin:2rem 0; color:var(--muted); font-size:1.08rem; }.status-card { width:fit-content; display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--ink); }.status-light { width:12px; height:12px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,90,36,.14); }.status-card strong,.status-card small { display:block; }.status-card small { color:var(--muted); }.launch-stamp { justify-self:center; width:240px; height:240px; border:2px solid var(--ink); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-9deg); box-shadow:inset 0 0 0 8px var(--paper),inset 0 0 0 10px var(--ink); }.launch-stamp span { font:800 10px/1.5 monospace; letter-spacing:.12em; }.launch-stamp strong { color:var(--orange); font-size:3rem; letter-spacing:-.05em; }

footer { min-height:120px; border-top:1px solid var(--line); }.footer p { color:var(--muted); } footer > p { color:var(--muted); font-size:.8rem; } footer > a:last-child { font-size:.72rem; font-weight:800; text-transform:uppercase; text-underline-offset:4px; }

@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; padding-top:5rem; }.plan-grid { grid-template-columns:1fr; }.promotion { grid-template-columns:1fr; }.product-stage { min-height:480px; }.source-card { left:7%; }.clip-stack { right:12%; }.proof-strip { grid-template-columns:repeat(2,1fr); }.proof-strip > p { grid-column:1/-1; }.proof-strip > div { border-left:0; border-top:1px solid var(--line); }.section-heading { grid-template-columns:1fr; gap:1.5rem; }.feature-wide,.feature-review { grid-template-columns:1fr; }.feature-wide .feature-number { display:none; }.privacy { grid-template-columns:1fr; }.privacy-art { justify-self:center; order:2; min-height:440px; }.privacy-copy { justify-self:center; }.launch { grid-template-columns:1fr; }.launch-stamp { display:none; }
}
@media (max-width: 620px) {
  .site-header,footer { padding:1rem 1.1rem; }.platform-row { grid-template-columns:1fr; }.platform-row div { border-right:0; border-bottom:1px solid var(--line); }.platform-row div:last-child { border-bottom:0; }.site-header nav a:not(.nav-status) { display:none; }.hero,.section { padding-left:1.1rem; padding-right:1.1rem; }.hero { min-height:auto; padding-top:4rem; }.hero h1 { font-size:clamp(3.25rem,16vw,5rem); }.hero-actions { flex-direction:column; }.button { width:100%; }.product-stage { min-height:390px; margin-top:1rem; transform:scale(.82); transform-origin:center; }.stage-glow { width:360px; height:360px; }.source-card { left:-20%; top:70px; }.clip-stack { right:-12%; transform:scale(.9); }.forge-line { display:none; }.trust-list { font-size:.65rem; }.proof-strip { padding:1rem 1.1rem; }.proof-strip > div { padding:.8rem .25rem; }.feature-grid { grid-template-columns:1fr; }.feature-card,.feature-wide { grid-column:auto; min-height:390px; }.waveform { height:110px; }.privacy-art { min-height:330px; transform:scale(.72); margin:-2rem 0; }.launch h2 { font-size:clamp(2.8rem,13vw,4rem); }.status-card { width:100%; }.footer,footer { flex-wrap:wrap; gap:1.2rem; } footer > p { order:3; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
