:root {
  --ink: #e9eef7;
  --ink-soft: #92a6c6;
  --night: #0b1220;
  --night-2: #101a2d;
  --paper: #0b1220;
  --paper-2: #111b2e;
  --white: #0f192b;
  --mint: #5fd9c4;
  --mint-light: #bcefe5;
  --mint-pale: #122b32;
  --line: rgba(146, 166, 198, .16);
  --shadow: 0 28px 80px rgba(0, 0, 0, .34);
  --radius: 26px;
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::selection { color: #06211a; background: var(--mint); }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
svg { display: block; }
a:focus-visible, button:focus-visible, summary:focus-visible, .process-step:focus-visible { outline: 3px solid #2d6e64; outline-offset: 4px; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 150px 0; }
.skip-link { position: fixed; z-index: 999; left: 20px; top: -60px; background: var(--white); padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { top: 20px; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.site-header.is-scrolled { background: rgba(11, 18, 32, .86); border-color: var(--line); backdrop-filter: blur(18px); }
.header-inner { height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-size: 18px; font-weight: 760; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; color: #06211a; background: var(--mint); border-radius: 10px; transform: rotate(-2deg); }
.brand-mark svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.desktop-nav { display: flex; align-items: center; gap: 34px; color: var(--ink-soft); font-size: 14px; font-weight: 650; }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 1px; background: var(--ink); transition: right .25s ease; }
.desktop-nav a:hover::after { right: 0; }
.header-cta { justify-self: end; display: inline-flex; gap: 9px; align-items: center; padding: 11px 16px; color: #06211a; background: var(--mint); border-radius: 999px; font-size: 13px; font-weight: 720; transition: transform .2s ease, background .2s ease; }
.header-cta:hover { transform: translateY(-2px); background: #7be6d2; }
.header-cta svg { width: 16px; fill: currentColor; }
.menu-toggle, .mobile-nav { display: none; }

.hero { position: relative; overflow: hidden; padding: 166px 0 0; background: var(--paper); }
.hero::before { content: ""; position: absolute; width: 760px; height: 760px; right: -280px; top: -280px; border: 1px solid rgba(95, 217, 196, .14); border-radius: 50%; box-shadow: 0 0 0 96px rgba(95, 217, 196, .035), 0 0 0 192px rgba(95, 217, 196, .025); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; min-height: 670px; gap: 72px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 5px rgba(85, 200, 179, .15); }
.hero h1, .section-heading h2, .privacy h2, .audience h2, .faq h2, .final-card h2 {
  margin: 0;
  font-size: clamp(54px, 5.3vw, 80px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 725;
}
h1 em, h2 em { color: var(--mint); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.hero-lead { max-width: 570px; margin: 32px 0 0; color: var(--ink-soft); font-size: 19px; line-height: 1.62; letter-spacing: -.018em; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 34px; }
.store-button { display: inline-flex; align-items: center; gap: 12px; min-width: 184px; padding: 11px 19px 11px 16px; color: #06211a; background: var(--mint); border-radius: 13px; box-shadow: 0 12px 26px rgba(0, 0, 0, .28); transition: transform .2s ease, box-shadow .2s ease; }
.store-button:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(8, 25, 25, .22); }
.store-button svg { width: 28px; fill: currentColor; }
.store-button span { display: flex; flex-direction: column; font-size: 19px; font-weight: 620; line-height: 1.05; }
.store-button small { font-size: 9px; font-weight: 560; letter-spacing: .08em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 720; }
.text-link span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; transition: transform .2s ease, background .2s ease; }
.text-link:hover span { transform: translateY(3px); background: var(--night-2); }
.trust-list { display: flex; gap: 20px; flex-wrap: wrap; margin: 33px 0 0; padding: 0; color: var(--ink-soft); list-style: none; font-size: 12px; font-weight: 650; }
.trust-list li { display: flex; align-items: center; gap: 5px; }
.trust-list svg { width: 15px; fill: none; stroke: var(--mint); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.hero-visual { position: relative; height: 610px; }
.visual-halo { position: absolute; inset: 74px 5px 40px 80px; background: radial-gradient(circle at 56% 45%, rgba(85, 200, 179, .2), transparent 64%); filter: blur(10px); }
.hero-visual::before { content: ""; position: absolute; inset: 70px 8px 14px 65px; border: 1px solid rgba(16,37,37,.1); border-radius: 50%; }
.hero-visual::after { content: ""; position: absolute; width: 9px; height: 9px; right: 14px; top: 232px; background: var(--mint); border-radius: 50%; box-shadow: -480px 178px 0 -2px var(--mint), -375px -119px 0 -3px var(--ink); }
.plan-card { position: absolute; z-index: 2; width: 300px; left: 4px; top: 104px; padding: 33px 25px 30px; color: #27322e; background: #f7f2e7; border: 1px solid rgba(45,55,50,.25); box-shadow: 0 18px 50px rgba(25, 40, 36, .18); transform: rotate(-6deg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; }
.plan-card::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(45,55,50,.05) 3px 4px); pointer-events: none; }
.paper-tape { position: absolute; width: 94px; height: 26px; left: 103px; top: -10px; background: rgba(224, 216, 195, .72); transform: rotate(3deg); }
.plan-heading { display: flex; justify-content: space-between; align-items: end; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.plan-heading strong { font-size: 14px; }
.plan-rule { height: 2px; margin: 12px 0 8px; background: #3a433e; }
.plan-row { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px dotted rgba(45,55,50,.35); font-size: 11px; }
.ocr-box { position: absolute; z-index: 3; display: grid; place-items: center; width: 26px; height: 27px; right: 16px; color: #0e4940; background: rgba(85,200,179,.18); border: 1.5px solid var(--mint); border-radius: 4px; font-size: 11px; opacity: 0; animation: detect 4.5s ease-in-out infinite; }
.ocr-one { top: 93px; animation-delay: .7s; }.ocr-two { top: 173px; animation-delay: 1.25s; }.ocr-three { top: 253px; animation-delay: 1.8s; }
.scan-beam { position: absolute; z-index: 4; left: 0; right: 0; top: 60px; height: 2px; background: var(--mint); box-shadow: 0 0 12px var(--mint), 0 7px 30px rgba(85,200,179,.35); animation: scanPaper 4.5s cubic-bezier(.45,0,.55,1) infinite; }
.hero-phone { position: absolute; z-index: 4; width: 296px; right: 16px; top: 25px; transform: rotate(4deg); filter: drop-shadow(0 28px 38px rgba(15,40,38,.25)); }
.phone-hardware { position: relative; padding: 10px; aspect-ratio: .49; background: #172321; border: 1px solid #55605b; border-radius: 48px; box-shadow: inset 0 0 0 2px #0b1211, inset 0 0 0 4px #39443f; }
.phone-hardware::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 43px; pointer-events: none; }
.dynamic-island { position: absolute; z-index: 5; width: 84px; height: 24px; left: 50%; top: 17px; transform: translateX(-50%); background: #020606; border-radius: 20px; }
.phone-status { position: absolute; z-index: 4; display: flex; justify-content: space-between; inset: 18px 25px auto; color: white; font-size: 8px; font-weight: 700; }
.phone-content { height: 100%; padding: 50px 14px 16px; color: #eff7f4; background: #0c1d21; border-radius: 38px; overflow: hidden; }
.app-topline { display: flex; justify-content: space-between; color: #a7b5b2; font-size: 8px; }.app-topline strong { color: #eef5f2; font-size: 10px; }
.success-orb { display: grid; place-items: center; width: 54px; height: 54px; margin: 44px auto 14px; color: var(--mint); background: rgba(85,200,179,.1); border: 1px solid rgba(85,200,179,.25); border-radius: 18px; }
.success-orb svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.phone-content h3 { margin: 0; text-align: center; font-size: 19px; letter-spacing: -.04em; }.phone-content > p { margin: 6px 0 24px; color: #8fa4a0; text-align: center; font-size: 9px; }
.app-shifts { display: grid; gap: 7px; }
.app-shifts > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px; background: #132a2d; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; }
.app-shifts i, .mapping-ui i, .calendar-stack i, .control-row i, .review-list i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-style: normal; font-weight: 760; font-size: 9px; }
.shift-f { color: #15594f; background: #a9eadc; }.shift-s { color: #363c89; background: #c9cdfa; }.shift-n { color: #dbe0ff; background: #4551a5; }
.app-shifts span { display: flex; flex-direction: column; }.app-shifts b { font-size: 8px; }.app-shifts small { margin-top: 2px; color: #829693; font-size: 6.5px; }.app-shifts em { color: #6f8581; font-style: normal; }
.app-primary { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; padding: 12px; color: #0c2422; background: var(--mint); border-radius: 11px; font-size: 9px; font-weight: 760; }.app-primary b { display: grid; place-items: center; width: 16px; height: 16px; background: rgba(255,255,255,.35); border-radius: 50%; font-size: 7px; }
.detected-pill, .privacy-pill { position: absolute; z-index: 7; display: grid; align-items: center; color: var(--ink); background: rgba(15, 25, 43, .9); border: 1px solid var(--line); box-shadow: 0 15px 40px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.detected-pill { grid-template-columns: 12px 1fr; left: 120px; bottom: 86px; padding: 12px 16px; border-radius: 13px; }
.detected-pill > span { grid-row: 1 / 3; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 5px rgba(85,200,179,.17); }
.detected-pill strong, .privacy-pill b { font-size: 10px; }.detected-pill small, .privacy-pill small { color: var(--ink-soft); font-size: 8px; }
.privacy-pill { grid-template-columns: 31px 1fr; gap: 10px; right: -30px; top: 132px; padding: 11px 15px; border-radius: 13px; }
.privacy-pill svg { width: 24px; padding: 4px; color: var(--mint); background: var(--mint-pale); border-radius: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.privacy-pill span { display: flex; flex-direction: column; }

.hero-proof { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 68px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-proof > div { display: flex; gap: 16px; align-items: center; padding: 27px 30px; border-right: 1px solid var(--line); }.hero-proof > div:last-child { border-right: 0; }
.hero-proof p { display: flex; flex-direction: column; margin: 0; }.hero-proof strong { font-size: 13px; }.hero-proof small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.proof-icon { position: relative; display: block; width: 38px; height: 38px; flex: 0 0 auto; background: var(--mint-pale); border: 1px solid rgba(95,217,196,.16); border-radius: 11px; }
.camera-icon::before { content: ""; position: absolute; width: 17px; height: 12px; left: 10px; top: 13px; border: 1.5px solid var(--ink); border-radius: 3px; }.camera-icon::after { content: ""; position: absolute; width: 5px; height: 5px; left: 16px; top: 16px; border: 1.5px solid var(--ink); border-radius: 50%; }
.edit-icon::before { content: ""; position: absolute; width: 15px; height: 5px; left: 11px; top: 16px; border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }.edit-icon::after { content: ""; position: absolute; width: 6px; height: 6px; left: 10px; top: 21px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.shield-icon::before { content: ""; position: absolute; width: 16px; height: 19px; left: 11px; top: 9px; border: 1.5px solid var(--ink); border-radius: 8px 8px 11px 11px; }.shield-icon::after { content: "✓"; position: absolute; left: 15px; top: 11px; font-size: 12px; font-weight: 800; }

.cinematic {
  --paper-x: 0px;
  --paper-y: 0px;
  --paper-scale: .92;
  --paper-rotate: -5deg;
  --paper-opacity: 1;
  --paper-blur: 0px;
  --scan-y: 0px;
  --scan-opacity: 0;
  --phone-x: 420px;
  --phone-y: 0px;
  --phone-scale: .82;
  --phone-opacity: 0;
  --token-p: 0;
  --token-opacity: 0;
  --camera-opacity: 1;
  --review-opacity: 0;
  --calendar-opacity: 0;
  --final-glow: 0;
  position: relative;
  height: 520vh;
  color: var(--ink);
  background: #070d18;
}
.film-sticky { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; }
.film-ambient { position: absolute; inset: 0; background: radial-gradient(circle at calc(62% + var(--phone-x) * .08) 52%, rgba(95,217,196,calc(.05 + var(--final-glow) * .14)), transparent 33%), radial-gradient(circle at 50% 115%, rgba(38,73,111,.28), transparent 48%); }
.film-ambient::before { content: ""; position: absolute; width: 780px; height: 780px; right: -280px; top: -290px; border: 1px solid rgba(95,217,196,.1); border-radius: 50%; box-shadow: 0 0 0 90px rgba(95,217,196,.018), 0 0 0 180px rgba(95,217,196,.012); transform: scale(calc(1 + var(--final-glow) * .08)); }
.film-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(146,166,198,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(146,166,198,.24) 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 65% 50%,black,transparent 72%); }
.film-shell { position: relative; height: 100%; }
.film-copy { position: absolute; z-index: 10; width: min(450px, 37vw); left: 0; top: 50%; transform: translateY(-50%); }
.film-caption { position: absolute; left: 0; top: 50%; width: 100%; opacity: 0; transform: translateY(calc(-50% + 28px)); pointer-events: none; transition: opacity .42s ease, transform .6s cubic-bezier(.2,.75,.2,1); }
.film-caption.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.film-caption > span { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 23px; color: var(--mint); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.film-caption > span::before { content:""; width: 22px; height: 1px; background: currentColor; }
.film-caption h2 { margin: 0; font-size: clamp(45px,4.5vw,67px); line-height: .98; letter-spacing: -.06em; }
.film-caption h2 em { color: var(--mint); font-family: Georgia,"Times New Roman",serif; font-weight: 400; letter-spacing: -.04em; }
.film-caption p { max-width: 410px; margin: 25px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.film-world { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.film-paper { position: absolute; z-index: 3; width: 350px; left: 61%; top: 50%; padding: 35px 28px 31px; color: #26322e; background: #f5f0e4; border: 1px solid rgba(27,40,35,.2); box-shadow: 0 35px 80px rgba(0,0,0,.35); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; transform: translate(-50%,-50%) translate(var(--paper-x),var(--paper-y)) rotate(var(--paper-rotate)) scale(var(--paper-scale)); opacity: var(--paper-opacity); filter: blur(var(--paper-blur)); will-change: transform,opacity,filter; }
.film-paper::after { content:""; position:absolute; inset:0; opacity:.2; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(38,50,46,.05) 3px 4px); }
.film-tape { position:absolute; z-index:2; width:104px; height:27px; left:123px; top:-12px; background:rgba(220,212,191,.74); transform:rotate(2deg); }
.film-paper-head { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:end; text-transform:uppercase; letter-spacing:.1em; font-size:9px; }.film-paper-head strong{font-size:15px}.film-paper-rule{position:relative;z-index:2;height:2px;margin:13px 0 8px;background:#34403b}
.film-paper-row { position:relative; z-index:2; display:flex; justify-content:space-between; padding:10px 4px; border-bottom:1px dotted rgba(38,50,46,.35); font-size:11px; }.film-paper-row i{position:absolute;right:-5px;top:5px;width:30px;height:29px;border:1.5px solid var(--mint);background:rgba(95,217,196,.16);border-radius:4px;opacity:var(--scan-opacity);transform:scale(calc(.8 + var(--scan-opacity) * .2))}.film-paper-row:nth-of-type(4) i{transition-delay:.04s}.film-paper-row:nth-of-type(5) i{transition-delay:.08s}.film-paper-row:nth-of-type(6) i{transition-delay:.12s}.film-paper-row:nth-of-type(7) i{transition-delay:.16s}
.film-scanline { position:absolute; z-index:8; left:0; right:0; top:66px; height:2px; background:var(--mint); box-shadow:0 0 13px var(--mint),0 14px 34px rgba(95,217,196,.34); opacity:var(--scan-opacity); transform:translateY(var(--scan-y)); }.film-scanline span{position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(rgba(95,217,196,.09),transparent);transform:translateY(-90px)}
.film-focus-corners i{position:absolute;z-index:9;width:28px;height:28px;border-color:var(--mint);border-style:solid;opacity:var(--scan-opacity)}.film-focus-corners i:nth-child(1){left:-8px;top:-8px;border-width:2px 0 0 2px}.film-focus-corners i:nth-child(2){right:-8px;top:-8px;border-width:2px 2px 0 0}.film-focus-corners i:nth-child(3){left:-8px;bottom:-8px;border-width:0 0 2px 2px}.film-focus-corners i:nth-child(4){right:-8px;bottom:-8px;border-width:0 2px 2px 0}
.film-token { position:absolute; z-index:8; display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; width:166px; padding:9px; color:#102525; background:#fffef9; border:1px solid rgba(16,37,37,.14); border-radius:13px; box-shadow:0 15px 35px rgba(0,0,0,.3); opacity:var(--token-opacity); will-change:transform,opacity; }
.film-token>b{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;font-size:12px}.film-token>span{display:flex;flex-direction:column;font-size:10px;font-weight:760}.film-token small{margin-top:2px;color:#60716e;font-size:7px;font-weight:500}.token-f{left:55%;top:38%;transform:translate(calc(var(--token-p) * 235px),calc(var(--token-p) * 18px)) rotate(calc(-4deg + var(--token-p) * 4deg))}.token-f>b{color:#15594f;background:#a9eadc}.token-s{left:56%;top:49%;transform:translate(calc(var(--token-p) * 220px),calc(var(--token-p) * 3px))}.token-s>b{color:#363c89;background:#c9cdfa}.token-n{left:57%;top:60%;transform:translate(calc(var(--token-p) * 205px),calc(var(--token-p) * -14px)) rotate(calc(3deg - var(--token-p) * 3deg))}.token-n>b{color:#dbe0ff;background:#4551a5}
.film-phone { position:absolute; z-index:6; width:304px; height:626px; left:75%; top:50%; padding:10px; background:#121b2a; border:1px solid #526074; border-radius:50px; box-shadow:0 42px 90px rgba(0,0,0,.5),inset 0 0 0 3px #273245; transform:translate(-50%,-50%) translate(var(--phone-x),var(--phone-y)) scale(var(--phone-scale)); opacity:var(--phone-opacity); will-change:transform,opacity; }
.film-phone::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.14);border-radius:45px;pointer-events:none}.film-phone-island{position:absolute;z-index:15;width:85px;height:24px;left:50%;top:18px;transform:translateX(-50%);background:#020407;border-radius:20px}.film-phone-status{position:absolute;z-index:14;display:flex;justify-content:space-between;inset:18px 26px auto;color:#fff;font-size:8px;font-weight:700}
.film-phone-screen { position:absolute; inset:10px; padding:50px 13px 15px; overflow:hidden; color:#edf4fa; background:#0c1726; border-radius:41px; will-change:opacity,transform; }
.film-camera-screen{opacity:var(--camera-opacity);transform:scale(calc(.98 + var(--camera-opacity) * .02))}.film-review-screen{opacity:var(--review-opacity);transform:translateX(calc((1 - var(--review-opacity)) * 24px))}.film-calendar-screen{opacity:var(--calendar-opacity);transform:translateX(calc((1 - var(--calendar-opacity)) * 24px))}
.film-app-nav{display:flex;justify-content:space-between;align-items:center;height:30px;color:#91a3bc;font-size:8px}.film-app-nav b{color:#edf4fa;font-size:10px}
.film-camera-preview{position:relative;height:430px;margin-top:6px;overflow:hidden;background:linear-gradient(135deg,#64767a,#2c4045);border-radius:17px}.film-camera-mini-paper{position:absolute;width:218px;left:21px;top:95px;padding:20px 17px;background:#f2ecdf;color:#25312d;box-shadow:0 15px 30px rgba(0,0,0,.25);transform:rotate(-3deg)}.film-camera-mini-paper b{font:700 8px ui-monospace,monospace}.film-camera-mini-paper i{display:block;height:1px;margin:15px 0;background:rgba(37,49,45,.25)}.film-camera-brackets i{position:absolute;width:25px;height:25px;border-color:var(--mint);border-style:solid}.film-camera-brackets i:nth-child(1){left:12px;top:68px;border-width:2px 0 0 2px}.film-camera-brackets i:nth-child(2){right:12px;top:68px;border-width:2px 2px 0 0}.film-camera-brackets i:nth-child(3){left:12px;bottom:65px;border-width:0 0 2px 2px}.film-camera-brackets i:nth-child(4){right:12px;bottom:65px;border-width:0 2px 2px 0}.film-shutter{width:48px;height:48px;margin:14px auto 0;border:3px solid #fff;border-radius:50%;box-shadow:inset 0 0 0 4px #0c1726,inset 0 0 0 25px #fff}
.film-review-success{display:flex;align-items:center;gap:10px;margin:13px 0 14px;padding:13px;color:#123d36;background:var(--mint-light);border-radius:12px}.film-review-success>i{display:grid;place-items:center;width:31px;height:31px;background:rgba(255,255,255,.48);border-radius:50%;font-style:normal}.film-review-success span{display:flex;flex-direction:column}.film-review-success b{font-size:10px}.film-review-success small{font-size:7px}.film-review-list{display:grid;gap:7px}.film-review-list>div{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;padding:10px;background:#132239;border:1px solid rgba(255,255,255,.06);border-radius:11px}.film-review-list>div>i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;font-style:normal;font-size:9px;font-weight:760}.film-review-list span{display:flex;flex-direction:column}.film-review-list b{font-size:8px}.film-review-list small{color:#8193aa;font-size:7px}.film-review-list em{color:#708198;font-style:normal}.film-row-pulse{border-color:rgba(95,217,196,.45)!important;box-shadow:0 0 0 3px rgba(95,217,196,.06)}.film-phone-button{display:flex;justify-content:center;gap:8px;margin-top:15px;padding:12px;color:#06211a;background:var(--mint);border-radius:11px;font-size:8px;font-weight:800}.film-phone-button b{display:grid;place-items:center;width:15px;height:15px;background:rgba(255,255,255,.4);border-radius:50%;font-size:7px}
.film-week{display:grid;grid-template-columns:repeat(7,1fr);padding:17px 0 22px;text-align:center}.film-week span{color:#6f829b;font-size:6px}.film-week i{margin-top:10px;font-size:9px;font-style:normal}.film-week i.today{display:grid;place-items:center;width:24px;height:24px;margin:4px auto -4px;color:#06211a;background:var(--mint);border-radius:50%}.film-calendar-list{display:grid;gap:9px}.film-calendar-list>div{display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:10px;padding:13px;background:#132239;border-radius:12px;border-left:3px solid}.film-calendar-list>div.event-f{border-color:#5fd9c4}.film-calendar-list>div.event-s{border-color:#7c82dc}.film-calendar-list>div.event-n{border-color:#4551a5}.film-calendar-list i{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;font-style:normal;font-size:9px;font-weight:760}.film-calendar-list .event-f i{color:#15594f;background:#a9eadc}.film-calendar-list .event-s i{color:#363c89;background:#c9cdfa}.film-calendar-list .event-n i{color:#dbe0ff;background:#4551a5}.film-calendar-list span{display:flex;flex-direction:column}.film-calendar-list b{font-size:9px}.film-calendar-list small{color:#8193aa;font-size:7px}.film-calendar-list em{color:#8193aa;font-size:9px;font-style:normal}.film-calendar-done{position:absolute;left:13px;right:13px;bottom:17px;display:flex;align-items:center;gap:10px;padding:12px;color:#123d36;background:var(--mint-light);border-radius:12px}.film-calendar-done>i{display:grid;place-items:center;width:31px;height:31px;background:rgba(255,255,255,.5);border-radius:50%;font-style:normal}.film-calendar-done span{display:flex;flex-direction:column}.film-calendar-done b{font-size:9px}.film-calendar-done small{font-size:7px}
.film-orbit{position:absolute;z-index:1;left:76%;top:50%;border:1px solid rgba(95,217,196,calc(.08 + var(--final-glow) * .2));border-radius:50%;transform:translate(-50%,-50%) scale(calc(.85 + var(--final-glow) * .25));opacity:calc(.35 + var(--final-glow) * .65)}.film-orbit.orbit-a{width:520px;height:520px}.film-orbit.orbit-b{width:690px;height:690px}
.film-timeline{position:absolute;z-index:12;right:0;top:50%;display:flex;flex-direction:column;justify-content:space-between;width:1px;height:200px;background:rgba(146,166,198,.2);transform:translateY(-50%)}.film-timeline-fill{position:absolute;left:0;top:0;width:1px;height:calc(var(--film-progress,0) * 100%);background:var(--mint)}.film-timeline i{position:relative;left:-4px;width:9px;height:9px;background:#18243a;border:1px solid #61728d;border-radius:50%;transition:background .3s,border .3s,box-shadow .3s}.film-timeline i.is-active{background:var(--mint);border-color:var(--mint);box-shadow:0 0 0 5px rgba(95,217,196,.1)}
.film-scroll-hint{position:absolute;z-index:12;left:0;bottom:37px;display:flex;align-items:center;gap:10px;color:#667a98;font-family:ui-monospace,monospace;font-size:8px;text-transform:uppercase;letter-spacing:.1em;opacity:calc(1 - var(--film-progress,0) * 5)}.film-scroll-hint span{position:relative;width:17px;height:28px;border:1px solid #60708a;border-radius:10px}.film-scroll-hint span::after{content:"";position:absolute;width:2px;height:5px;left:7px;top:5px;background:var(--mint);border-radius:2px;animation:filmWheel 1.8s ease-in-out infinite}.film-scene-count{position:absolute;z-index:12;right:23px;bottom:37px;display:flex;align-items:baseline;gap:4px;font-family:ui-monospace,monospace}.film-scene-count b{color:var(--mint);font-size:17px}.film-scene-count span{color:#60708a;font-size:8px}
@keyframes filmWheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(10px);opacity:0}}

.section-heading { display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: 80px; margin-bottom: 90px; }
.section-heading.compact { grid-template-columns: 1fr; }
.section-kicker { margin-bottom: 24px; }
.section-heading h2, .audience h2, .faq h2 { font-size: clamp(46px, 5vw, 72px); }
.section-heading h2 em, .audience h2 em, .faq h2 em { color: var(--mint); }
.section-intro { margin: 0 0 7px; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.process { background: var(--white); }
.process-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 105px; align-items: center; }
.demo-wrap { position: sticky; top: 115px; min-height: 660px; display: grid; place-items: center; }
.demo-glow { position: absolute; width: 460px; height: 460px; background: radial-gradient(circle, rgba(85,200,179,.19), rgba(85,200,179,0) 68%); border-radius: 50%; }
.demo-phone { position: relative; width: 306px; height: 632px; padding: 10px; background: #13201e; border: 1px solid #4f5955; border-radius: 51px; box-shadow: 0 38px 80px rgba(15,35,33,.22), inset 0 0 0 3px #27312e; overflow: hidden; }
.demo-phone::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(255,255,255,.14); border-radius: 46px; }
.demo-island { position: absolute; z-index: 10; width: 84px; height: 24px; left: 50%; top: 18px; transform: translateX(-50%); background: #020707; border-radius: 20px; }
.demo-screen { position: absolute; inset: 10px; color: #eaf4f1; background: #0b1d20; border-radius: 41px; overflow: hidden; opacity: 0; transform: translateX(28px) scale(.98); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.23,1); }
.demo-screen.is-active { z-index: 2; opacity: 1; transform: none; }
.demo-nav { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 22px 18px 5px; color: #9cb1ad; font-size: 10px; }.demo-nav b { color: #eff6f4; font-size: 12px; }
.camera-view { position: relative; height: 465px; margin: 0 9px; background: #81918a; border-radius: 18px; overflow: hidden; }
.camera-view::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 40%), radial-gradient(circle at 70% 10%, rgba(255,255,255,.2), transparent 30%); }
.camera-paper { position: absolute; width: 224px; left: 22px; top: 98px; padding: 22px 18px; color: #2a3430; background: #f1ecdf; box-shadow: 0 12px 35px rgba(15,30,27,.25); transform: rotate(-3deg); font-family: ui-monospace, monospace; }.camera-paper b { font-size: 9px; text-transform: uppercase; }.camera-paper p { margin: 12px 0; border-bottom: 1px dotted #8b928d; font-size: 8px; }
.focus-corners i { position: absolute; width: 26px; height: 26px; border-color: var(--mint); border-style: solid; }.focus-corners i:nth-child(1) { left: 12px; top: 68px; border-width: 2px 0 0 2px; border-radius: 5px 0 0; }.focus-corners i:nth-child(2) { right: 12px; top: 68px; border-width: 2px 2px 0 0; border-radius: 0 5px 0 0; }.focus-corners i:nth-child(3) { left: 12px; bottom: 66px; border-width: 0 0 2px 2px; border-radius: 0 0 0 5px; }.focus-corners i:nth-child(4) { right: 12px; bottom: 66px; border-width: 0 2px 2px 0; border-radius: 0 0 5px; }
.live-scanline { position: absolute; left: 14px; right: 14px; top: 84px; height: 2px; background: var(--mint); box-shadow: 0 0 14px var(--mint); animation: liveScan 3.2s ease-in-out infinite; }
.camera-hint { position: absolute; left: 50%; bottom: 19px; transform: translateX(-50%); width: max-content; padding: 7px 10px; color: #f5faf8; background: rgba(8,25,25,.62); border-radius: 9px; font-size: 7px; }
.camera-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; padding: 14px 30px; }.camera-controls button { width: 49px; height: 49px; padding: 4px; background: transparent; border: 3px solid white; border-radius: 50%; box-shadow: inset 0 0 0 3px #0b1d20, inset 0 0 0 25px white; }.camera-controls i { width: 20px; height: 20px; background: rgba(255,255,255,.1); border-radius: 5px; }.camera-controls span { color: #b3c2bf; }
.review-summary { display: flex; gap: 12px; align-items: center; margin: 13px 15px 16px; padding: 14px; color: #173d37; background: var(--mint-light); border-radius: 13px; }.review-summary i { display: grid; place-items: center; width: 31px; height: 31px; background: rgba(255,255,255,.5); border-radius: 50%; font-style: normal; }.review-summary div { display: flex; flex-direction: column; }.review-summary b { font-size: 11px; }.review-summary small { margin-top: 2px; font-size: 7px; }
.review-list { display: grid; gap: 8px; padding: 0 15px; }.review-list > div { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #132a2d; border: 1px solid rgba(255,255,255,.06); border-radius: 11px; }.review-list > div.selected { border-color: rgba(85,200,179,.5); box-shadow: 0 0 0 3px rgba(85,200,179,.08); }.review-list span { display: flex; align-items: center; gap: 9px; }.review-list b { font-size: 8px; }.review-list em { color: #94a8a4; font-size: 7px; font-style: normal; }
.demo-bottom-button { display: flex; justify-content: space-between; margin: 18px 15px; padding: 12px 14px; color: #0c2926; background: var(--mint); border-radius: 11px; font-size: 9px; font-weight: 760; }
.calendar-title { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 16px; }.calendar-title span { font-size: 20px; font-weight: 720; letter-spacing: -.04em; }.calendar-title small { padding: 6px 9px; color: var(--mint); background: rgba(85,200,179,.09); border-radius: 8px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 15px 15px; text-align: center; }.calendar-grid span { color: #6e8581; font-size: 6px; }.calendar-grid i { margin-top: 10px; font-size: 10px; font-style: normal; }.calendar-grid i:nth-of-type(3) { display: grid; place-items: center; width: 24px; height: 24px; margin: 4px auto -4px; color: var(--night); background: var(--mint); border-radius: 50%; }
.calendar-events { display: grid; gap: 9px; padding: 0 15px; }.calendar-events > div { display: grid; grid-template-columns: 31px 1fr 20px; align-items: center; gap: 10px; padding: 13px; background: #13292b; border-radius: 12px; border-left: 3px solid; }.calendar-events > div.event-f { border-color: #55c8b3; }.calendar-events > div.event-s { border-color: #7c82dc; }.calendar-events > div.event-n { border-color: #4551a5; }.calendar-events i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; font-style: normal; font-size: 9px; font-weight: 760; }.event-f i { color:#15594f;background:#a9eadc }.event-s i { color:#363c89;background:#c9cdfa }.event-n i { color:#dbe0ff;background:#4551a5 }.calendar-events span { display: flex; flex-direction: column; }.calendar-events b { font-size: 9px; }.calendar-events small { color: #819692; font-size: 7px; }.calendar-events em { color: #819692; font-size: 9px; font-style: normal; }
.calendar-success { position: absolute; left: 15px; right: 15px; bottom: 18px; padding: 12px; color: #173d37; background: var(--mint-light); border-radius: 12px; text-align: center; font-size: 8px; font-weight: 700; }.calendar-success span { margin-right: 5px; }
.process-steps { display: grid; }
.process-step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 46px 0; border-top: 1px solid var(--line); cursor: pointer; outline: none; transition: opacity .3s ease; }.process-step:last-child { border-bottom: 1px solid var(--line); }.process-step:not(.is-active) { opacity: .42; }.process-step:hover, .process-step:focus-visible { opacity: .75; }.process-step.is-active { opacity: 1; }
.step-number { display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; font-family: ui-monospace, monospace; font-size: 10px; transition: color .3s, background .3s, border-color .3s; }.process-step.is-active .step-number { color: var(--night); background: var(--mint); border-color: var(--mint); }
.process-step h3 { margin: 2px 0 11px; font-size: 28px; letter-spacing: -.04em; }.process-step p { max-width: 520px; margin: 0; color: var(--ink-soft); line-height: 1.7; }

.features { background: var(--paper); }
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento-card { position: relative; min-height: 425px; padding: 37px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.bento-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 45%); pointer-events: none; }
.bento-large { grid-column: span 7; }.stats-card { grid-column: span 5; }.calendar-card { grid-column: span 5; }.demo-card { grid-column: span 7; }.bento-wide { grid-column: span 12; }
.card-copy { position: relative; z-index: 2; max-width: 490px; }.card-label { display: inline-flex; padding: 6px 9px; color: var(--mint); background: var(--mint-pale); border: 1px solid rgba(95,217,196,.12); border-radius: 7px; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card-copy h3 { margin: 19px 0 12px; font-size: 30px; line-height: 1.12; letter-spacing: -.045em; }.card-copy p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.shift-card { min-height: 540px; }.mapping-ui { position: absolute; z-index: 2; display: grid; gap: 9px; width: 390px; right: 34px; bottom: -54px; padding: 17px; color: #102525; background: #f1eee6; border: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 20px 50px rgba(0,0,0,.3); transform: rotate(-2deg); }
.mapping-ui > div { display: grid; grid-template-columns: 36px 1fr 12px; gap: 11px; align-items: center; padding: 12px; background: var(--white); border-radius: 13px; }.mapping-ui i { width: 36px; height: 36px; font-size: 11px; }.mapping-ui span { display: flex; flex-direction: column; }.mapping-ui b { font-size: 11px; }.mapping-ui small { color: var(--ink-soft); font-size: 8px; }.mapping-ui em { width: 8px; height: 8px; background: var(--dot); border-radius: 50%; }.mapping-ui button { padding: 12px; color: var(--ink-soft); background: transparent; border: 1px dashed rgba(16,37,37,.22); border-radius: 12px; font-size: 10px; }
.stats-card { color: var(--white); background: var(--night-2); }.stats-card .card-label { color: var(--mint); background: rgba(85,200,179,.1); }.mini-stats { position: absolute; inset: auto 31px 30px; }.stat-total { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.1); }.stat-total span { color: #a3b5b1; font-size: 11px; }.stat-total strong { grid-row: 1 / 3; grid-column: 2; font-size: 44px; letter-spacing: -.05em; }.stat-total strong small { color: #9fb2ae; font-size: 14px; }.stat-total em { color: #6f8984; font-size: 9px; font-style: normal; }
.bar-chart { display: flex; align-items: end; gap: 10px; height: 142px; padding-top: 21px; }.bar-chart i { position: relative; width: 100%; height: var(--h); background: #27403d; border-radius: 5px 5px 2px 2px; }.bar-chart i.active { background: var(--mint); box-shadow: 0 0 25px rgba(85,200,179,.18); }.bar-chart small { position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); color: #75908a; font-size: 7px; font-style: normal; }
.calendar-stack { position: absolute; width: 310px; right: -20px; bottom: 37px; display: grid; gap: 8px; transform: rotate(2deg); }.calendar-stack > div { display: grid; grid-template-columns: 37px 1fr; align-items: center; gap: 12px; padding: 14px; color: #102525; background: #f3f0e7; border: 1px solid rgba(16,37,37,.14); border-radius: 14px; box-shadow: 0 11px 28px rgba(0,0,0,.24); }.calendar-stack > div:nth-child(2) { transform: translateX(-18px); }.calendar-stack i { width: 37px; height: 37px; }.calendar-stack span { display: flex; flex-direction: column; }.calendar-stack b { font-size: 11px; }.calendar-stack small { color: #49605e; font-size: 8px; }
.demo-card { color: var(--ink); background: #14233a; }.demo-card .card-label { color: var(--mint); background: rgba(95,217,196,.1); }.demo-card .card-copy p { color: var(--ink-soft); }.demo-play { position: absolute; right: 48px; bottom: 42px; display: flex; align-items: center; gap: 14px; }.demo-play span { display: grid; place-items: center; width: 75px; height: 75px; color: #06211a; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 12px rgba(95,217,196,.12); font-size: 17px; transition: transform .3s ease; }.demo-card:hover .demo-play span { transform: scale(1.06); }.demo-play small { font-family: ui-monospace, monospace; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.control-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; min-height: 400px; color: var(--white); background: var(--night); }.control-card .card-label { color: var(--mint); background: rgba(85,200,179,.1); }.control-card .card-copy p { color: #9eb2ae; }.control-visual { position: relative; z-index: 2; align-self: center; display: grid; gap: 7px; }.control-row { display: grid; grid-template-columns: 70px 42px 1fr auto; align-items: center; gap: 12px; padding: 14px 17px; color: var(--ink); background: #f2efe7; border-radius: 15px; }.control-row > span { color: var(--ink-soft); font-family: ui-monospace, monospace; font-size: 8px; text-transform: uppercase; }.control-row i { width: 42px; height: 42px; }.control-row p { display: flex; flex-direction: column; margin: 0; }.control-row p b { font-size: 11px; }.control-row p small { color: var(--ink-soft); font-size: 8px; }.control-row em { color: #27665c; font-size: 9px; font-style: normal; font-weight: 700; }.control-row.after { color: #173d37; background: var(--mint-light); }.control-row.after i { background: rgba(255,255,255,.46); border-radius: 50%; }.control-arrow { justify-self: center; color: var(--mint); font-size: 18px; }

.privacy { position: relative; overflow: hidden; color: var(--white); background: var(--night); }
.privacy::before { content: ""; position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to right, transparent, black 70%, transparent); }
.privacy-orbit { position: absolute; border: 1px solid rgba(85,200,179,.13); border-radius: 50%; }.orbit-one { width: 880px; height: 880px; right: -310px; top: -180px; }.orbit-two { width: 620px; height: 620px; right: -180px; top: -50px; }
.privacy-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.section-kicker.light { color: #8ba39e; }.privacy h2 { font-size: clamp(48px, 5vw, 73px); }.privacy h2 em { color: var(--mint); }.privacy-copy > p:not(.section-kicker) { max-width: 540px; margin: 32px 0; color: #9eb2ae; font-size: 17px; line-height: 1.75; }
.privacy-link { display: inline-flex; gap: 18px; align-items: center; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 700; }.privacy-link span { color: var(--mint); transition: transform .2s ease; }.privacy-link:hover span { transform: translateX(4px); }
.privacy-diagram { position: relative; min-height: 510px; display: grid; place-items: center; }
.local-ring { position: relative; display: grid; place-items: center; width: 390px; height: 390px; border: 1px solid rgba(85,200,179,.24); border-radius: 50%; box-shadow: 0 0 0 38px rgba(85,200,179,.025), 0 0 0 76px rgba(85,200,179,.018); animation: breathe 5s ease-in-out infinite; }
.local-ring::before { content: ""; position: absolute; inset: 53px; border: 1px dashed rgba(85,200,179,.25); border-radius: 50%; animation: rotateSlow 30s linear infinite; }
.local-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 180px; height: 180px; color: var(--ink); background: var(--mint); border-radius: 50%; box-shadow: 0 0 55px rgba(85,200,179,.23); }.local-core svg { width: 38px; margin-bottom: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.local-core strong { font-size: 18px; }.local-core small { margin-top: 3px; font-size: 9px; }
.orbit-label { position: absolute; padding: 8px 11px; color: #b8cbc7; background: #102927; border: 1px solid rgba(85,200,179,.2); border-radius: 9px; font-family: ui-monospace, monospace; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }.label-photo { left: -6px; top: 74px; }.label-shifts { right: -12px; top: 108px; }.label-calendar { right: 26px; bottom: 47px; }
.blocked-route { position: absolute; right: 0; bottom: 18px; display: flex; align-items: center; gap: 8px; color: #6d8380; font-family: ui-monospace, monospace; font-size: 8px; text-transform: uppercase; }.blocked-route i { display: block; width: 75px; border-top: 1px dashed #526a66; }.blocked-route b { display: grid; place-items: center; width: 22px; height: 22px; color: #e18978; border: 1px solid #9c5b50; border-radius: 50%; }
.privacy-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 100px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; }.privacy-facts > div { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 25px 28px; background: #0c211f; }.privacy-facts strong { color: var(--mint); font-family: ui-monospace, monospace; font-size: 10px; }.privacy-facts span { display: flex; flex-direction: column; }.privacy-facts b { font-size: 12px; }.privacy-facts small { margin-top: 3px; color: #829a95; font-size: 9px; }

.audience { overflow: hidden; background: #111c30; }.audience-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 80px; }.audience-copy { width: 100%; max-width: 860px; }.audience h2 { font-size: clamp(48px, 6vw, 82px); }.audience h2 em { color: var(--mint); }.audience-copy > p:last-child { max-width: 620px; margin: 27px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.sector-marquee { display: flex; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(-1deg); }.sector-marquee > div { display: flex; flex: 0 0 auto; animation: marquee 28s linear infinite; }.sector-marquee span { position: relative; padding: 20px 35px; font-size: 17px; font-weight: 700; white-space: nowrap; }.sector-marquee span::after { content: "✦"; position: absolute; right: -4px; color: var(--mint); font-size: 10px; top: 26px; }

.faq { background: var(--white); }.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 120px; }.faq-heading { position: sticky; top: 130px; align-self: start; }.faq h2 { font-size: clamp(46px,4.7vw,68px); }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 27px 4px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 680; letter-spacing: -.02em; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { position: relative; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; }.faq-list summary span::before, .faq-list summary span::after { content:""; position:absolute; left:8px; right:8px; top:13px; height:1px; background: var(--ink); transition: transform .25s ease; }.faq-list summary span::after { transform: rotate(90deg); }.faq-list details[open] summary span::after { transform: rotate(0); }.faq-list p { max-width: 650px; margin: -4px 50px 27px 4px; color: var(--ink-soft); line-height: 1.7; }

.final-cta { padding: 0 0 55px; background: var(--white); }.final-card { position: relative; min-height: 505px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; padding: 70px 74px; overflow: hidden; color: var(--ink); background: #14233a; border: 1px solid rgba(95,217,196,.18); border-radius: 32px; }.final-card::before { content: ""; position: absolute; width: 600px; height: 600px; right: -170px; top: -150px; border: 1px solid rgba(95,217,196,.14); border-radius: 50%; box-shadow: 0 0 0 70px rgba(95,217,196,.025), 0 0 0 140px rgba(95,217,196,.018); }
.final-copy { position: relative; z-index: 2; }.final-label { display: inline-flex; margin-bottom: 27px; padding: 7px 10px; color: #06211a; background: var(--mint); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.final-card h2 { font-size: clamp(40px,4.4vw,61px); }.final-card h2 em { color: var(--mint); }.final-actions { display: flex; align-items: center; gap: 20px; margin-top: 35px; }.light-store { color: #06211a; background: var(--mint); }.final-actions > span { color: var(--ink-soft); font-size: 10px; }
.final-art { position: relative; z-index: 2; min-height: 320px; }.final-calendar { position: absolute; z-index: 1; display: flex; flex-direction: column; width: 220px; right: 58px; top: 28px; padding: 20px; color: var(--ink); background: #f4f0e5; border-radius: 18px; box-shadow: 0 25px 50px rgba(7,25,23,.22); transform: rotate(7deg); }.final-calendar span { color: #326a61; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; }.final-calendar strong { margin: 18px 0 9px; font-size: 76px; line-height: .9; letter-spacing: -.08em; }.final-calendar small { padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; }
.final-scanmark { position: absolute; z-index: 2; display: grid; place-items: center; width: 140px; height: 140px; right: -3px; bottom: 23px; background: var(--mint); border-radius: 38px; box-shadow: 0 25px 50px rgba(7,25,23,.2); transform: rotate(-6deg); }.final-scanmark i { position: absolute; width: 27px; height: 27px; border-color: var(--ink); border-style: solid; }.final-scanmark i:nth-child(1){left:24px;top:24px;border-width:2px 0 0 2px}.final-scanmark i:nth-child(2){right:24px;top:24px;border-width:2px 2px 0 0}.final-scanmark i:nth-child(3){left:24px;bottom:24px;border-width:0 0 2px 2px}.final-scanmark i:nth-child(4){right:24px;bottom:24px;border-width:0 2px 2px 0}.final-scanmark span { display: grid; place-items: center; width: 47px; height: 47px; color: var(--mint); background: var(--ink); border-radius: 50%; font-size: 22px; }

.site-footer { padding: 42px 0 25px; background: var(--paper); }.footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding-bottom: 34px; border-bottom: 1px solid var(--line); }.footer-top > p { justify-self: center; margin: 0; color: var(--ink-soft); font-size: 12px; }.footer-top nav { justify-self: end; display: flex; gap: 24px; color: var(--ink-soft); font-size: 11px; font-weight: 650; }.footer-top nav a:hover { color: var(--ink); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; color: #6f82a2; font-family: ui-monospace, monospace; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }

.legal-main { min-height: 80vh; padding: 160px 0 110px; background: var(--white); }.legal-wrap { max-width: 820px; }.legal-wrap h1 { margin: 0 0 45px; font-size: clamp(48px,6vw,76px); line-height: .98; letter-spacing: -.06em; }.legal-wrap h2 { margin: 45px 0 13px; font-size: 25px; letter-spacing: -.035em; }.legal-wrap h3 { margin: 30px 0 8px; font-size: 17px; }.legal-wrap p, .legal-wrap li { color: var(--ink-soft); line-height: 1.75; }.legal-wrap a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }.legal-back { display: inline-flex; margin-bottom: 45px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1); }.reveal.is-visible { opacity: 1; transform: none; }
@keyframes scanPaper { 0%,10% { transform:translateY(0); opacity:0 } 16%{opacity:1} 52%{transform:translateY(290px);opacity:1} 58%,100%{transform:translateY(290px);opacity:0} }
@keyframes detect { 0%,20%{opacity:0;transform:scale(.75)} 28%,58%{opacity:1;transform:scale(1)} 72%,100%{opacity:0;transform:scale(.95)} }
@keyframes liveScan { 0%,10%{transform:translateY(0);opacity:0} 18%{opacity:1} 78%{transform:translateY(290px);opacity:1} 90%,100%{transform:translateY(290px);opacity:0} }
@keyframes rotateSlow { to { transform:rotate(360deg) } }
@keyframes breathe { 0%,100%{transform:scale(1)}50%{transform:scale(1.015)} }
@keyframes marquee { to { transform:translateX(-100%) } }

@media (max-width: 1050px) {
  :root { --shell: min(100% - 40px, 900px); }
  .desktop-nav { display:none; }.header-inner { grid-template-columns: 1fr auto auto; }.menu-toggle { display:grid; gap:5px; width:42px; height:42px; padding:12px; background:transparent; border:1px solid var(--line); border-radius:50%; }.menu-toggle span { width:16px; height:1px; background:var(--ink); transition:transform .25s; }.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .mobile-nav { position:absolute; display:grid; gap:0; top:76px; left:20px; right:20px; padding:10px; background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); opacity:0; transform:translateY(-10px); visibility:hidden; transition:.25s ease; }.mobile-nav.is-open { opacity:1; transform:none; visibility:visible; }.mobile-nav a { padding:13px 14px; border-bottom:1px solid var(--line); font-size:14px; font-weight:650; }.mobile-nav a:last-child { color:var(--white); background:var(--ink); border:0; border-radius:11px; text-align:center; }
  .hero-grid { grid-template-columns: 1fr; gap:30px; }.hero-copy { max-width:700px; }.hero-visual { width:700px; max-width:100%; justify-self:center; }.hero h1 { font-size:clamp(57px,8vw,80px); }
  .section-heading { grid-template-columns:1fr; gap:28px; }.section-intro{max-width:650px}.process-layout { gap:55px; }.bento-large,.stats-card,.calendar-card,.demo-card { grid-column:span 6; }.shift-card { min-height:560px; }.mapping-ui{width:86%;}.calendar-card{min-height:500px}.calendar-stack{right:-45px}.control-card{gap:35px}.privacy-grid{gap:45px}.local-ring{width:340px;height:340px}.faq-grid{gap:65px}.final-card{padding:60px 50px}.final-calendar{right:15px}
}

@media (max-width: 760px) {
  :root { --shell: calc(100vw - 32px); --radius: 20px; }
  .section { padding:100px 0; }.header-inner{height:72px}.header-cta{display:none}.brand{font-size:16px}.brand-mark{width:32px;height:32px}
  .hero { padding-top:125px; }.hero-grid { min-height:0; }.hero h1 { font-size:clamp(47px,14vw,65px); }.hero-lead{font-size:17px}.hero-actions{align-items:flex-start;flex-direction:column;gap:19px}.trust-list{gap:11px 15px;margin-top:27px}.hero-visual{height:550px;width:100%;margin-top:15px}.plan-card{width:245px;left:-30px;top:107px;padding:28px 20px}.plan-row{padding:7px 3px}.hero-phone{width:247px;right:-18px;top:23px}.phone-content{padding-inline:11px}.success-orb{margin-top:35px}.privacy-pill{right:-13px;top:90px}.detected-pill{left:12px;bottom:34px}.hero-proof{grid-template-columns:1fr;margin-top:20px}.hero-proof>div{padding:20px 10px;border-right:0;border-bottom:1px solid var(--line)}.hero-proof>div:last-child{border-bottom:0}
  .section-heading{margin-bottom:58px}.section-heading h2,.audience h2,.faq h2{font-size:clamp(42px,12vw,58px)}.section-intro{font-size:16px}.process-layout{grid-template-columns:1fr;gap:65px}.demo-wrap{position:relative;top:auto;min-height:610px;order:2}.demo-phone{width:286px;height:591px}.process-steps{order:1}.process-step{grid-template-columns:45px 1fr;gap:12px;padding:30px 0}.process-step h3{font-size:23px}.process-step p{font-size:14px}
  .bento-grid{grid-template-columns:1fr}.bento-card,.bento-large,.stats-card,.calendar-card,.demo-card,.bento-wide{grid-column:1;min-height:460px;padding:27px}.card-copy h3{font-size:27px}.mapping-ui{width:96%;right:-5%;bottom:-45px}.calendar-stack{right:-25px}.demo-card{min-height:400px}.demo-play{right:30px;bottom:35px}.control-card{display:block;min-height:620px}.control-visual{position:absolute;left:25px;right:25px;bottom:28px}.control-row{grid-template-columns:54px 38px 1fr}.control-row em{display:none}.control-row i{width:38px;height:38px}
  .privacy-grid{grid-template-columns:1fr;gap:65px}.privacy h2{font-size:clamp(46px,13vw,62px)}.privacy-diagram{min-height:430px}.local-ring{width:285px;height:285px}.local-core{width:145px;height:145px}.label-photo{left:-18px}.label-shifts{right:-25px}.blocked-route{right:-12px}.privacy-facts{grid-template-columns:1fr;margin-top:65px}.privacy-facts>div{padding:22px}
  .audience-grid{gap:55px}.audience-copy>p:last-child{font-size:15px}.sector-marquee{margin-inline:-16px}.sector-marquee span{padding:17px 28px}
  .faq-grid{grid-template-columns:1fr;gap:50px}.faq-heading{position:relative;top:0}.faq-list summary{padding:22px 2px;font-size:16px}.faq-list p{margin-right:20px;font-size:14px}
  .final-cta{padding:0}.final-card{width:100%;min-height:690px;grid-template-columns:1fr;padding:48px 28px 35px;border-radius:0}.final-card h2{font-size:clamp(39px,11vw,52px)}.final-actions{flex-direction:column;align-items:flex-start}.final-art{min-height:260px}.final-calendar{right:70px;top:20px;width:185px}.final-calendar strong{font-size:62px}.final-scanmark{width:115px;height:115px;right:5px;bottom:0}.final-scanmark i{width:23px;height:23px}.final-scanmark i:nth-child(1){left:20px;top:20px}.final-scanmark i:nth-child(2){right:20px;top:20px}.final-scanmark i:nth-child(3){left:20px;bottom:20px}.final-scanmark i:nth-child(4){right:20px;bottom:20px}
  .footer-top{grid-template-columns:1fr;justify-items:start;gap:23px}.footer-top>p{justify-self:start}.footer-top nav{justify-self:start;flex-wrap:wrap}.footer-bottom{gap:20px;flex-direction:column}.legal-main{padding:125px 0 80px}
}

@media (max-width: 390px) {
  .hero-visual{height:525px}.plan-card{width:225px;left:-40px}.hero-phone{width:230px;right:-25px}.privacy-pill{display:none}.detected-pill{left:0}.mapping-ui{width:108%}.control-row>span{display:none}.control-row{grid-template-columns:38px 1fr}.demo-wrap{transform:scale(.94);margin-inline:-12px}.final-calendar{right:40px}
}

@media (max-width: 1050px) {
  .film-copy { width: 40vw; }
  .film-paper { left: 63%; }
  .film-phone { left: 77%; }
  .film-caption h2 { font-size: clamp(42px, 5vw, 58px); }
}

@media (max-width: 760px) {
  .cinematic { height: 460vh; }
  .film-sticky { min-height: 0; }
  .film-grid { background-size: 48px 48px; }
  .film-shell { width: 100%; }
  .film-copy { z-index: 11; width: auto; left: 16px; right: 48px; top: 0; transform: none; }
  .film-caption { top: 110px; transform: translateY(22px); }
  .film-caption.is-active { transform: none; }
  .film-caption > span { margin-bottom: 14px; }
  .film-caption h2 { max-width: 355px; font-size: clamp(38px, 10.5vw, 49px); }
  .film-caption p { max-width: 340px; margin-top: 15px; font-size: 13px; line-height: 1.55; }
  .film-world { top: 235px; bottom: 20px; }
  .film-paper { width: 258px; left: 50%; top: 56%; padding: 27px 20px 22px; }
  .film-tape { width: 78px; height: 22px; left: 89px; }
  .film-paper-head strong { font-size: 12px; }
  .film-paper-row { padding: 7px 3px; font-size: 8px; }
  .film-paper-row i { width: 23px; height: 22px; }
  .film-scanline { top: 53px; }
  .film-token { width: 135px; grid-template-columns: 31px 1fr; gap: 7px; padding: 7px; }
  .film-token > b { width: 31px; height: 31px; font-size: 9px; }
  .film-token > span { font-size: 8px; }
  .film-token small { font-size: 6px; }
  .token-f { left: 34%; top: 42%; transform: translate(calc(var(--token-p) * 95px),calc(var(--token-p) * 8px)); }
  .token-s { left: 36%; top: 52%; transform: translate(calc(var(--token-p) * 88px),0); }
  .token-n { left: 38%; top: 62%; transform: translate(calc(var(--token-p) * 80px),calc(var(--token-p) * -8px)); }
  .film-phone { width: 238px; height: 492px; left: 50%; top: 57%; padding: 8px; border-radius: 41px; }
  .film-phone::after { inset: 4px; border-radius: 37px; }
  .film-phone-island { width: 68px; height: 19px; top: 14px; }
  .film-phone-status { inset: 15px 20px auto; font-size: 6px; }
  .film-phone-screen { inset: 8px; padding: 41px 10px 11px; border-radius: 34px; }
  .film-app-nav { height: 24px; font-size: 6px; }
  .film-app-nav b { font-size: 8px; }
  .film-camera-preview { height: 333px; }
  .film-camera-mini-paper { width: 174px; left: 19px; top: 72px; padding: 16px 13px; }
  .film-camera-mini-paper i { margin: 11px 0; }
  .film-shutter { width: 37px; height: 37px; margin-top: 10px; }
  .film-review-success { margin: 8px 0 9px; padding: 9px; }
  .film-review-success > i { width: 25px; height: 25px; }
  .film-review-list { gap: 5px; }
  .film-review-list > div { grid-template-columns: 27px 1fr auto; padding: 7px; }
  .film-review-list > div > i { width: 27px; height: 27px; }
  .film-phone-button { margin-top: 9px; padding: 9px; }
  .film-week { padding: 10px 0 14px; }
  .film-calendar-list { gap: 6px; }
  .film-calendar-list > div { grid-template-columns: 28px 1fr 17px; padding: 9px; }
  .film-calendar-list i { width: 28px; height: 28px; }
  .film-calendar-done { left: 10px; right: 10px; bottom: 12px; padding: 9px; }
  .film-calendar-done > i { width: 26px; height: 26px; }
  .film-orbit { left: 50%; top: 57%; }
  .film-orbit.orbit-a { width: 360px; height: 360px; }
  .film-orbit.orbit-b { width: 500px; height: 500px; }
  .film-timeline { right: 17px; top: 52%; height: 160px; }
  .film-scroll-hint { left: 16px; bottom: 18px; }
  .film-scene-count { right: 17px; bottom: 18px; }
}

/* App-native dark palette: light surfaces remain only where they represent paper or iOS cards. */
.stats-card,
.control-card,
.privacy { color: var(--ink); }
.control-card .card-copy p { color: var(--ink-soft); }
.mapping-ui > div { color: #102525; background: #fffef9; }
.mapping-ui small,
.mapping-ui button { color: #49605e; }
.control-row { color: #102525; }
.control-row > span,
.control-row p small { color: #49605e; }
.local-core { color: #06211a; box-shadow: 0 0 55px rgba(95,217,196,.23); }
.final-calendar { color: #102525; box-shadow: 0 25px 50px rgba(0,0,0,.32); }
.final-calendar small { border-color: rgba(16,37,37,.14); }
.final-scanmark i { border-color: #06211a; }
.final-scanmark span { background: #06211a; }
.mobile-nav { background: #101a2d; }
.mobile-nav a:last-child { color: #06211a; background: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
  .cinematic { height: 100svh; min-height: 720px; --paper-opacity: 0; --phone-x: 0px; --phone-scale: 1; --phone-opacity: 1; --camera-opacity: 0; --review-opacity: 0; --calendar-opacity: 1; --final-glow: 1; }
  .film-caption { display: none; }
  .film-caption:last-child { display: block; opacity: 1; transform: translateY(-50%); }
  .film-scroll-hint { display: none; }
}