:root {
  --ink: #07090b;
  --panel: #0d1114;
  --line: rgba(255, 255, 255, 0.11);
  --white: #f7f9f6;
  --muted: #9ba4ad;
  --lime: #b5f54a;
  --blue: #94baff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--white); background: radial-gradient(circle at 50% -20%, rgba(181,245,74,.09), transparent 34rem), var(--ink); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.site-nav { width: min(1180px, calc(100% - 40px)); height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 11px; }.brand img { border-radius: 11px; box-shadow: 0 0 28px rgba(181,245,74,.12); }.brand span { display: flex; flex-direction: column; gap: 1px; }.brand strong { font-size: 15px; letter-spacing: -.02em; }.brand small { color: #7f8994; font: 700 7px/1 "JetBrains Mono", monospace; letter-spacing: .2em; }
.nav-links { display: flex; align-items: center; gap: 28px; color: #adb5bd; font-size: 13px; }.nav-links a, footer div a { transition: color 160ms ease; }.nav-links a:hover, footer div a:hover { color: var(--white); }
.nav-download { display: inline-flex; align-items: center; gap: 13px; padding: 10px 14px 10px 18px; border: 1px solid rgba(181,245,74,.28); border-radius: 99px; color: var(--lime); font-size: 12px; font-weight: 650; background: rgba(181,245,74,.06); }.nav-download b { color: var(--ink); background: var(--lime); border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; }
.hero { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 112px 0 80px; text-align: center; position: relative; }.hero-glow, .download-glow { position: absolute; width: 560px; max-width: 100%; height: 350px; border-radius: 50%; background: rgba(181,245,74,.07); filter: blur(90px); left: 50%; transform: translateX(-50%); top: 20px; pointer-events: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 700 10px/1 "JetBrains Mono", monospace; color: #aeb7bd; letter-spacing: .15em; }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px rgba(181,245,74,.72); }
.hero h1 { margin: 25px auto 24px; max-width: 980px; font-size: clamp(58px, 8.1vw, 112px); line-height: .91; letter-spacing: -.07em; font-weight: 620; }.hero h1 em { color: var(--lime); font-style: normal; font-weight: 500; }.hero-copy { max-width: 635px; margin: 0 auto; color: #a7b0b8; font-size: 18px; line-height: 1.6; letter-spacing: -.015em; }
.hero-actions { margin: 34px auto 22px; display: flex; align-items: center; justify-content: center; gap: 27px; }.primary-button { min-width: 248px; display: inline-flex; align-items: center; gap: 13px; padding: 12px 15px; background: var(--lime); color: #11160c; border-radius: 14px; text-align: left; box-shadow: 0 14px 44px rgba(181,245,74,.13); transition: transform 180ms ease, box-shadow 180ms ease; }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 52px rgba(181,245,74,.21); }.primary-button .apple-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--lime); background: #11160c; font-size: 13px; }.primary-button > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }.primary-button strong { font-size: 13px; }.primary-button small { margin-top: 2px; font: 600 8px/1.3 "JetBrains Mono", monospace; opacity: .58; text-transform: uppercase; letter-spacing: .05em; }.primary-button b { font-size: 18px; font-weight: 500; }.text-link { color: #c2c8cd; font-size: 13px; border-bottom: 1px solid #4b5359; padding: 10px 0 7px; }.text-link span { color: var(--lime); margin-left: 8px; }
.trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; color: #7f8992; font: 600 9px/1 "JetBrains Mono", monospace; letter-spacing: .04em; }.trust-row span { display: inline-flex; align-items: center; gap: 7px; }.trust-row i { color: var(--lime); font-style: normal; }
.hero-product { margin: 92px auto 0; max-width: 1080px; position: relative; }.product-halo { position: absolute; inset: -30px 5% -10px; background: linear-gradient(135deg, rgba(181,245,74,.11), rgba(88,133,255,.07)); filter: blur(50px); border-radius: 50%; }.app-frame { position: relative; border: 1px solid rgba(255,255,255,.17); border-radius: 22px; overflow: hidden; background: #0a0d0f; box-shadow: 0 42px 110px rgba(0,0,0,.68); transform: perspective(1600px) rotateX(1.5deg); }.window-bar { height: 34px; background: #111518; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 13px; gap: 7px; }.traffic { width: 8px; height: 8px; border-radius: 50%; }.traffic.red { background: #ff6159; }.traffic.yellow { background: #ffbd2e; }.traffic.green { background: #28c941; }.window-title { position: absolute; left: 50%; transform: translateX(-50%); color: #677079; font: 600 8px "JetBrains Mono", monospace; }.app-frame > img { width: 100%; height: auto; display: block; }
.camera-island-demo { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 490px; min-height: 78px; padding: 28px 35px 16px; border-radius: 21px; background: rgba(2,3,4,.96); box-shadow: 0 20px 60px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.08); }.camera-dot { position: absolute; width: 58px; height: 18px; border-radius: 0 0 11px 11px; background: #000; top: 0; left: 50%; transform: translateX(-50%); }.camera-dot::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #13212c; left: 50%; top: 5px; }.camera-island-demo p { margin: 0; font-size: 17px; font-weight: 650; }.camera-island-demo > span { display: block; width: 54px; height: 2px; background: var(--lime); margin: 10px auto 0; border-radius: 9px; }
.statement { padding: 170px 20px 140px; text-align: center; border-top: 1px solid rgba(255,255,255,.04); }.section-label { color: var(--lime); font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: .2em; }.statement p { margin: 25px auto 0; font-size: clamp(28px,4vw,54px); line-height: 1.18; letter-spacing: -.045em; color: #717a81; }.statement strong { color: var(--white); font-weight: 560; }
.feature-grid { width: min(1180px, calc(100% - 40px)); margin: 0 auto 150px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.feature-card { min-height: 545px; border-radius: 24px; padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; }.feature-index { font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: .13em; opacity: .6; }.feature-card h2 { margin: auto 0 12px; font-size: 25px; line-height: 1.08; letter-spacing: -.035em; }.feature-card > p { margin: 0; font-size: 13px; line-height: 1.55; opacity: .68; }.lime-card { background: var(--lime); color: #11160c; }.dark-card { background: #101519; border: 1px solid var(--line); }.blue-card { background: #a7c3ff; color: #11182a; }
.focus-demo { height: 245px; margin: 36px -5px 0; display: flex; align-items: center; justify-content: center; position: relative; }.focus-demo .notch { position: absolute; top: 20px; width: 105px; height: 28px; background: #070908; border-radius: 0 0 13px 13px; }.focus-demo .notch span { display: block; width: 6px; height: 6px; border-radius: 50%; background: #142431; margin: 7px auto; }.focus-demo p { background: #090b09; color: white; width: 90%; border-radius: 17px; padding: 20px; text-align: center; font-size: 16px; font-weight: 620; box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.speech-demo { margin-top: 42px; padding: 15px 17px 25px; min-height: 255px; border-radius: 18px; background: #050708; border: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; }.speech-status { color: #6f7980; font: 700 7px "JetBrains Mono", monospace; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }.speech-status span { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; }.speech-status b { margin-left: auto; font-weight: 500; }.speech-demo strong { display: block; margin: 38px auto 18px; max-width: 260px; text-align: center; font-size: 17px; line-height: 1.3; }.speech-demo p { margin: 0 auto; color: #566068; max-width: 240px; text-align: center; font-size: 12px; line-height: 1.4; }.speech-demo i { display: block; width: 58px; height: 2px; background: var(--lime); border-radius: 4px; margin: 25px auto 0; }
.flow-demo { height: 250px; display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center; perspective: 600px; }.flow-demo span { font-size: 13px; opacity: .28; transform: scale(.9); }.flow-demo strong { background: #0b1020; color: #fff; padding: 22px 15px; border-radius: 16px; box-shadow: 0 18px 40px rgba(12,24,60,.22); font-size: 16px; }
.interview-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto 150px; padding: 72px; border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(circle at 90% 10%, rgba(181,245,74,.09), transparent 40%), #0d1114; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }.interview-copy h2, .privacy-copy h2, .steps-section h2, .download-section h2 { margin: 20px 0; font-size: clamp(40px,5vw,68px); line-height: .98; letter-spacing: -.055em; }.interview-copy > p, .privacy-copy > p { color: #929ca4; font-size: 15px; line-height: 1.68; }.interview-copy ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }.interview-copy li { font-size: 12px; color: #d5dadc; border-top: 1px solid var(--line); padding-top: 13px; }.interview-copy li span { color: var(--lime); font: 700 8px "JetBrains Mono", monospace; margin-right: 12px; }
.deck-visual { min-width: 0; background: #050708; border: 1px solid rgba(255,255,255,.1); border-radius: 23px; padding: 0 16px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.38); }.deck-header { height: 49px; display: flex; align-items: center; gap: 8px; color: #c1c7ca; font: 700 8px "JetBrains Mono", monospace; letter-spacing: .14em; }.deck-header span { color: var(--lime); }.deck-header b { margin-left: auto; color: #4e565c; font-weight: 500; letter-spacing: 0; }.deck-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.deck-cards article { min-width: 0; height: 205px; padding: 15px; background: #0f1417; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; position: relative; }.deck-cards small { color: var(--lime); font: 700 7px "JetBrains Mono", monospace; }.deck-cards b { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #111; background: var(--lime); font: 700 10px "JetBrains Mono", monospace; }.deck-cards h3 { margin: 27px 0 16px; font-size: 15px; }.deck-cards p { color: #788188; font-size: 10px; line-height: 2; }
.privacy-section { width: min(1050px, calc(100% - 40px)); margin: 0 auto 170px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }.privacy-orbit { aspect-ratio: 1; position: relative; display: grid; place-items: center; }.orbit { position: absolute; border: 1px solid rgba(181,245,74,.2); border-radius: 50%; }.orbit-one { inset: 11%; }.orbit-two { inset: 27%; border-style: dashed; opacity: .65; }.privacy-orbit::before, .privacy-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--lime); box-shadow: 0 0 24px rgba(181,245,74,.5); }.privacy-orbit::before { width: 8px; height: 8px; top: 24%; left: 20%; }.privacy-orbit::after { width: 5px; height: 5px; right: 18%; bottom: 29%; }.privacy-core { width: 122px; height: 122px; border-radius: 31px; display: grid; place-items: center; align-content: center; gap: 10px; background: var(--lime); color: #10140d; box-shadow: 0 0 70px rgba(181,245,74,.18); transform: rotate(-4deg); }.privacy-core span { font-size: 30px; }.privacy-core strong { font: 800 9px "JetBrains Mono", monospace; letter-spacing: .2em; }.privacy-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.privacy-facts span { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); color: #aeb6bb; font-size: 10px; }
.steps-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto 160px; text-align: center; }.steps-section h2 { margin-bottom: 55px; }.steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.steps article { text-align: left; padding: 26px 34px; border-right: 1px solid var(--line); }.steps article:last-child { border-right: 0; }.steps span { color: var(--lime); font: 700 9px "JetBrains Mono", monospace; }.steps h3 { margin: 42px 0 8px; font-size: 23px; }.steps p { margin: 0; color: #858f97; font-size: 12px; line-height: 1.55; }
.download-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto 100px; padding: 110px 30px 55px; border: 1px solid var(--line); border-radius: 32px; text-align: center; position: relative; overflow: hidden; background: #0d1114; }.download-section > * { position: relative; }.download-section > img { border-radius: 25px; margin-bottom: 22px; box-shadow: 0 20px 60px rgba(181,245,74,.14); }.download-section h2 { max-width: 820px; margin: 25px auto 35px; }.primary-button.large { min-width: 290px; margin: 0 auto; }.requirements { color: #707a81; font: 600 8px "JetBrains Mono", monospace; margin: 15px 0 40px; text-transform: uppercase; letter-spacing: .06em; }.checksum { border-top: 1px solid var(--line); padding-top: 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; text-align: left; }.checksum span { color: #657078; font: 700 8px "JetBrains Mono", monospace; }.checksum code { overflow: hidden; text-overflow: ellipsis; color: #909aa1; font: 500 9px "JetBrains Mono", monospace; }.checksum a { color: var(--lime); font: 650 9px "JetBrains Mono", monospace; }
footer { width: min(1180px, calc(100% - 40px)); min-height: 110px; margin: 0 auto; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.footer p, footer > p { color: #6e777e; font-size: 10px; }footer > p a { color: var(--lime); font-weight: 650; }footer > p span { color: #ef6961; }footer > div { display: flex; gap: 22px; color: #7f8990; font-size: 10px; }
@media (max-width: 900px) { .nav-links { display: none; }.hero { padding-top: 85px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 500px; }.interview-section { grid-template-columns: 1fr; padding: 50px 28px; }.privacy-section { grid-template-columns: 1fr; gap: 20px; }.privacy-orbit { max-width: 450px; width: 100%; margin: 0 auto; }.privacy-copy { text-align: center; }.privacy-facts { justify-content: center; } }
@media (max-width: 640px) { .site-nav { width: min(100% - 28px,1180px); height: 70px; }.nav-download { padding-left: 13px; }.nav-download-label { display: none; }.hero { width: min(100% - 28px,1180px); padding-top: 65px; }.hero h1 { font-size: clamp(48px,15.5vw,74px); }.hero-copy { font-size: 15px; }.hero-actions { flex-direction: column; gap: 12px; }.trust-row { gap: 12px 18px; }.camera-island-demo { width: 82%; min-height: 62px; padding: 24px 16px 12px; }.camera-island-demo p { font-size: 11px; }.app-frame { border-radius: 14px; }.window-bar { height: 24px; }.statement { padding: 110px 20px 90px; }.feature-grid, .interview-section, .steps-section, .download-section { width: min(100% - 28px,1180px); }.feature-card { min-height: 470px; }.deck-cards { overflow-x: auto; grid-template-columns: repeat(3,150px); }.privacy-section { width: min(100% - 28px,1050px); margin-bottom: 110px; }.privacy-copy h2, .interview-copy h2, .steps-section h2, .download-section h2 { font-size: 43px; }.steps { grid-template-columns: 1fr; }.steps article { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 8px; }.steps h3 { margin-top: 20px; }.download-section { padding: 75px 20px 40px; }.checksum { grid-template-columns: 1fr; gap: 8px; text-align: center; }.checksum code { font-size: 7px; }footer { flex-direction: column; padding: 35px 0; gap: 22px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { transition-duration: .01ms !important; } }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 5px; }