:root {
  --ink: #132827;
  --ink-soft: #45605d;
  --paper: #f5f4ef;
  --cream: #ebe7dc;
  --mint: #a9eadb;
  --teal: #0d7c70;
  --lime: #d9f17f;
  --line: rgba(19, 40, 39, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans), sans-serif; }
a { color: inherit; text-decoration: none; }
img { user-select: none; }
svg { width: 20px; height: 20px; }

.site-header { height: 86px; max-width: 1480px; margin: 0 auto; padding: 0 4vw; 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; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 26px; height: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(4deg); }
.brand-mark i { display: block; background: var(--ink); border-radius: 7px 2px 7px 2px; }
.brand-mark i:first-child { grid-row: span 2; }
.brand-mark i:last-child { background: var(--teal); }
.site-header nav { display: flex; gap: 32px; font-size: 13px; font-weight: 650; }
.site-header nav a { opacity: .7; transition: opacity .2s; }
.site-header nav a:hover { opacity: 1; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

.hero { max-width: 1480px; min-height: 720px; margin: 0 auto; padding: 80px 4vw 76px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 3; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(13,124,112,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(58px, 6vw, 98px); line-height: .88; letter-spacing: -.065em; margin-bottom: 32px; font-weight: 750; }
h1 em { font-family: var(--font-serif), serif; font-weight: 400; color: var(--teal); }
.hero-lede { max-width: 610px; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.button { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 34px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.button-primary { background: var(--ink); color: white; }
.button-primary:hover svg, .button-light:hover svg { transform: translateX(4px); }
.button svg { transition: transform .2s; }
.text-link { font-size: 13px; font-weight: 750; }
.text-link span { color: var(--teal); margin-left: 5px; }
.hero-note { margin-top: 24px; font-size: 11px; color: #70817f; }
.hero-visual { height: 630px; position: relative; }
.hero-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(19,40,39,.12); left: 10%; top: 0; width: 620px; height: 620px; }
.orbit-one:before, .orbit-one:after { content: ""; position: absolute; background: var(--line); }
.orbit-one:before { width: 1px; height: 100%; left: 50%; }
.orbit-one:after { width: 100%; height: 1px; top: 50%; }
.orbit-two { width: 430px; height: 430px; left: 23%; top: 96px; border-style: dashed; }
.phone-card { position: absolute; margin: 0; overflow: hidden; border-radius: 34px; box-shadow: 0 30px 70px rgba(19,40,39,.19); background: #f7f8f8; }
.phone-card img { object-fit: cover; }
.phone-card figcaption { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-radius: 99px; padding: 8px 12px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.phone-card-texture { width: 320px; height: 570px; left: 14%; top: 6px; transform: rotate(-5deg); }
.phone-card-form { width: 276px; height: 500px; right: 5%; bottom: 0; transform: rotate(6deg); }
.quality-stamp { position: absolute; right: 2%; top: 48px; width: 108px; height: 108px; border-radius: 50%; background: var(--lime); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(8deg); box-shadow: 0 12px 30px rgba(19,40,39,.12); }
.quality-stamp strong { font-family: var(--font-serif); font-size: 36px; line-height: 1; }
.quality-stamp span { font-size: 8px; text-transform: uppercase; letter-spacing: .11em; margin-top: 4px; }

.proof-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); max-width: 1480px; margin: 0 auto; }
.proof-strip div { padding: 28px 4vw; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--line); }
.proof-strip div:last-child { border: 0; }
.proof-strip strong { font-size: 14px; }
.proof-strip span { font-size: 11px; color: var(--ink-soft); }

.section { padding: 124px max(4vw, calc((100vw - 1480px)/2 + 4vw)); }
.section-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 10%; align-items: end; margin-bottom: 58px; }
.section-kicker { color: var(--teal); margin-bottom: 20px; }
.section h2 { font-size: clamp(44px, 5.2vw, 78px); line-height: .96; letter-spacing: -.055em; margin-bottom: 0; }
.section-heading > p { color: var(--ink-soft); line-height: 1.7; font-size: 15px; margin-bottom: 4px; max-width: 520px; }

.quality { background: #dadfd8; }
.quality-heading { grid-template-columns:1fr auto; }
.quality-legend { display:flex; align-items:center; gap:12px; align-self:end; padding-bottom:8px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.quality-legend i { width:56px; height:1px; background:var(--ink); position:relative; }
.quality-legend i:after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--teal); right:0; top:-3px; }
.model-reveal { --reveal: 52%; height: min(72vw, 720px); min-height: 520px; position: relative; overflow: hidden; border-radius: 4px; background: #f7f8f8; cursor: col-resize; }
.reveal-panel { position: absolute; inset: 0; }
.reveal-panel img { object-fit: cover; object-position: center 42%; }
.reveal-panel span { position: absolute; top: 22px; padding: 9px 12px; border-radius: 3px; font-size: 9px; font-weight: 850; letter-spacing: .12em; z-index: 2; }
.reveal-white span { right: 22px; background: var(--ink); color: white; }
.reveal-texture { clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.reveal-texture span { left: 22px; background: var(--lime); }
.reveal-divider { position: absolute; left: var(--reveal); top: 0; bottom: 0; width: 2px; background: white; z-index: 3; transform: translateX(-1px); box-shadow: 0 0 14px rgba(19,40,39,.3); }
.reveal-divider i { font-style: normal; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%,-50%); background: var(--ink); color: white; border: 5px solid white; font-size: 14px; }
.model-reveal input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: col-resize; z-index: 4; }

.scan-gallery-section { background:#f3f0e8; }
.scan-heading { grid-template-columns:1.2fr .8fr; }
.scan-gallery { display:grid; grid-template-columns:minmax(300px,.38fr) minmax(0,.62fr); gap:22px; align-items:stretch; }
.scan-gallery figure { margin:0; }
.scan-ui-card { background:#e5e9e6; border:1px solid var(--line); padding:28px 28px 24px; display:flex; flex-direction:column; min-height:760px; }
.scan-ui-image { position:relative; min-height:650px; flex:1; overflow:hidden; }
.scan-ui-image img { object-fit:contain; }
.scan-ui-card figcaption { display:flex; justify-content:space-between; align-items:end; gap:16px; border-top:1px solid var(--line); padding-top:17px; margin-top:18px; }
.scan-ui-card figcaption span { color:var(--teal); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.scan-ui-card figcaption strong { font-size:11px; text-align:right; }
.scan-result-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr .86fr; gap:22px; min-height:760px; }
.scan-result { position:relative; overflow:hidden; background:#eef0ed; border:1px solid var(--line); }
.scan-result img { object-fit:cover; transition:transform .5s ease; }
.scan-result:hover img { transform:scale(1.035); }
.scan-result figcaption { position:absolute; left:15px; bottom:15px; padding:9px 12px; border-radius:99px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); color:var(--ink); font-size:9px; font-weight:800; z-index:2; }
.scan-result figcaption span { color:var(--teal); margin-right:7px; }
.scan-vehicle img { object-position:50% 39%; }
.scan-fruit img { object-position:46% 55%; }
.scan-plush { grid-column:1 / -1; }
.scan-plush img { object-position:44% 39%; transform:scale(1.12); }
.scan-plush:hover img { transform:scale(1.15); }

.reconstruct { background: var(--ink); color: #f1f0e9; }
.reconstruct-intro { max-width: 820px; }
.reconstruct-intro h2 { margin-bottom: 28px; }
.reconstruct-intro > p:last-child { color: #a6b6b3; max-width: 590px; line-height: 1.7; }
.route-board { margin-top: 74px; border: 1px solid rgba(255,255,255,.17); min-height: 390px; display: grid; grid-template-columns: .34fr 90px .66fr; align-items: center; padding: 44px; background: radial-gradient(circle at 15% 45%, rgba(169,234,219,.12), transparent 35%); }
.route-source { display: flex; flex-direction: column; align-items: flex-start; }
.route-source small, .route-options small { color: var(--mint); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 800; margin: 18px 0 6px; }
.route-source strong { font-size: 18px; }
.route-icon { display: block; width: 64px; height: 64px; border: 1px solid rgba(169,234,219,.45); border-radius: 50%; position: relative; }
.route-phone:before { content:""; position:absolute; width:22px; height:36px; border:2px solid var(--mint); border-radius:6px; left:19px; top:12px; }
.route-phone:after { content:""; position:absolute; width:6px; height:2px; background:var(--mint); left:27px; top:42px; }
.route-cloud:before { content:"☁"; position:absolute; inset:0; display:grid; place-items:center; color:var(--mint); font-size:28px; }
.route-mac:before { content:""; position:absolute; width:32px; height:23px; border:2px solid var(--mint); border-radius:3px; left:14px; top:13px; }
.route-mac:after { content:""; position:absolute; width:39px; height:2px; background:var(--mint); left:11px; top:42px; box-shadow: 15px -6px 0 -6px var(--mint); }
.route-lines { height: 190px; position: relative; }
.route-lines:before { content:""; position:absolute; left:0; right:30px; top:50%; height:1px; background:rgba(169,234,219,.5); }
.route-lines i { position:absolute; right:0; width:32px; height:1px; background:rgba(169,234,219,.5); }
.route-lines i:first-child { top:25%; transform:rotate(-35deg); transform-origin:left; }
.route-lines i:last-child { bottom:25%; transform:rotate(35deg); transform-origin:left; }
.route-options { display: grid; gap: 16px; }
.route-options article { display:grid; grid-template-columns:80px 1fr; gap:20px; align-items:center; padding:24px; background:rgba(255,255,255,.055); }
.route-options article .route-icon { width:54px; height:54px; }
.route-options h3 { font-size: 22px; margin-bottom: 7px; }
.route-options p { color:#a6b6b3; font-size:12px; line-height:1.6; margin:0; }
.route-options small { display:block; margin:0 0 5px; }
.route-download { display:inline-flex; align-items:center; gap:8px; color:var(--mint); margin-top:13px; font-size:10px; font-weight:800; border-bottom:1px solid rgba(169,234,219,.42); padding-bottom:3px; }
.route-download svg { width:14px; height:14px; }
.route-disclaimer { color:#829793; font-size:10px; margin:20px 0 0; }

.transfer { background:#e8e2d7; display:grid; grid-template-columns:.38fr .62fr; gap:8vw; align-items:center; overflow:hidden; }
.transfer-copy > p:not(.section-kicker):not(.fine-print) { color:var(--ink-soft); line-height:1.75; margin:28px 0; }
.transfer-copy ul { padding:0; list-style:none; margin:0 0 26px; }
.transfer-copy li { padding:14px 0; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; }
.transfer-copy li:before { content:"✓"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--mint); margin-right:12px; }
.fine-print { font-size:9px; line-height:1.6; color:#76817d; }
.transfer-flow { display:flex; align-items:center; min-width:760px; }
.transfer-flow figure { margin:0; position:relative; overflow:hidden; background:#f6f7f5; box-shadow:0 20px 50px rgba(19,40,39,.16); }
.transfer-flow img { object-fit:cover; }
.transfer-phone { width:270px; height:580px; border-radius:28px; z-index:2; }
.transfer-desktop { width:480px; height:510px; border-radius:8px; }
.transfer-desktop img { object-position:center; }
.transfer-flow figcaption { position:absolute; left:14px; bottom:14px; right:14px; background:rgba(255,255,255,.91); backdrop-filter:blur(8px); padding:12px 14px; font-size:10px; font-weight:800; z-index:2; }
.transfer-flow figcaption span { color:var(--teal); margin-right:8px; }
.flow-arrow { width:115px; flex:0 0 115px; position:relative; display:flex; justify-content:center; align-items:center; gap:8px; color:var(--teal); font-size:8px; font-weight:900; letter-spacing:.12em; }
.flow-arrow:before { content:""; position:absolute; height:1px; left:-16px; right:-16px; background:var(--teal); opacity:.35; }
.flow-arrow span, .flow-arrow svg { background:#e8e2d7; z-index:1; }

.capabilities { background:var(--paper); }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.capability-card { background:white; border:1px solid var(--line); overflow:hidden; transition:transform .25s, box-shadow .25s; }
.capability-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(19,40,39,.1); }
.capability-image { height:500px; position:relative; background:#f1f2f4; overflow:hidden; }
.capability-image img { object-fit:cover; object-position:center 24%; transition:transform .5s; }
.capability-card:hover img { transform:scale(1.025); }
.capability-copy { padding:28px; }
.capability-copy span { font-size:9px; font-weight:850; letter-spacing:.12em; color:var(--teal); text-transform:uppercase; }
.capability-copy h3 { font-size:25px; letter-spacing:-.03em; margin:12px 0 10px; }
.capability-copy p { color:var(--ink-soft); font-size:12px; line-height:1.7; margin:0; }
.capability-coming { background:var(--ink); color:white; }
.coming-visual { height:500px; position:relative; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 50%, rgba(169,234,219,.16), transparent 44%); }
.coming-visual:before, .coming-visual:after, .coming-visual i { content:""; position:absolute; border:1px solid rgba(169,234,219,.25); border-radius:50%; }
.coming-visual:before { width:180px; height:180px; }
.coming-visual:after { width:330px; height:330px; border-style:dashed; }
.coming-visual i { width:440px; height:440px; opacity:.45; }
.coming-visual i:nth-of-type(2) { width:260px; height:260px; border-style:dotted; }
.coming-visual i:nth-of-type(3) { width:1px; height:100%; border:0; border-left:1px solid rgba(169,234,219,.16); border-radius:0; }
.coming-visual span { width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--ink); font-family:var(--font-serif); font-size:45px; line-height:1; position:relative; z-index:2; }
.capability-coming .capability-copy p { color:#9fb2af; }

.honest { background:var(--lime); }
.honest-head { display:grid; grid-template-columns:1.15fr .85fr; gap:12%; align-items:end; margin-bottom:72px; }
.honest-head .section-kicker { color:var(--ink); }
.honest-head > p { font-size:15px; line-height:1.7; max-width:520px; margin-bottom:5px; }
.capture-tips { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(19,40,39,.36); }
.capture-tips article { padding:28px 28px 8px 0; min-height:170px; border-right:1px solid rgba(19,40,39,.24); }
.capture-tips article:not(:first-child) { padding-left:28px; }
.capture-tips article:last-child { border:0; }
.capture-tips span { font-family:var(--font-serif); font-size:27px; }
.capture-tips h3 { font-size:17px; margin:30px 0 8px; }
.capture-tips p { font-size:10px; line-height:1.65; max-width:210px; margin:0; }

.availability { background:var(--teal); color:white; display:grid; grid-template-columns:1fr 1fr; gap:12%; }
.availability .section-kicker { color:var(--lime); }
.availability-copy { align-self:end; }
.availability-copy p { color:#c5e1dc; line-height:1.75; max-width:570px; }
.button-light { background:white; color:var(--ink); margin-top:18px; }
.download-pending { flex-direction:column; align-items:flex-start; gap:2px; border:0; cursor:default; }
.download-pending span { color:var(--teal); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.install-sequence { display:grid; grid-template-columns:repeat(4,1fr); margin-top:30px; border-top:1px solid rgba(255,255,255,.25); }
.install-sequence span { padding:16px 12px 0 0; font-size:8px; line-height:1.5; color:#c5e1dc; }
.install-sequence b { display:block; font-family:var(--font-serif); color:var(--lime); font-size:19px; margin-bottom:6px; }

footer { background:#0d1e1d; color:#eff2ec; padding:46px max(4vw, calc((100vw - 1480px)/2 + 4vw)); display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:center; }
.footer-brand .brand-mark i { background:#eff2ec; }
.footer-brand .brand-mark i:last-child { background:var(--mint); }
footer p { margin:0; color:#8ba09d; font-size:10px; }
footer > div { display:flex; gap:20px; font-size:10px; }
footer small { grid-column:1/-1; color:#617673; border-top:1px solid rgba(255,255,255,.1); padding-top:20px; font-size:8px; line-height:1.6; }

@media (max-width: 1080px) {
  .hero { grid-template-columns:1fr 1fr; }
  .phone-card-texture { left:2%; }
  .phone-card-form { right:-10%; }
  .transfer { grid-template-columns:1fr; }
  .transfer-copy { max-width:700px; }
  .transfer-flow { min-width:0; margin-top:30px; justify-content:center; }
  .capability-image { height:420px; }
}

@media (max-width: 780px) {
  .site-header { height:70px; padding:0 20px; }
  .site-header nav { display:none; }
  .nav-cta { font-size:10px; }
  .hero { display:block; padding:58px 20px 54px; min-height:0; }
  h1 { font-size:57px; }
  .hero-lede { font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .hero-visual { height:510px; margin-top:50px; }
  .hero-orbit { width:450px; height:450px; left:-6%; top:24px; }
  .orbit-two { width:310px; height:310px; left:12%; top:92px; }
  .phone-card-texture { width:230px; height:420px; left:5%; }
  .phone-card-form { width:190px; height:350px; right:-2%; bottom:2px; }
  .quality-stamp { width:76px; height:76px; right:0; top:22px; }
  .quality-stamp strong { font-size:27px; }
  .quality-stamp span { font-size:6px; }
  .proof-strip { grid-template-columns:1fr; }
  .proof-strip div { border-right:0; border-bottom:1px solid var(--line); padding:20px; }
  .section { padding:82px 20px; }
  .section-heading { display:block; margin-bottom:38px; }
  .section-heading > p { margin-top:24px; }
  .quality-legend { margin-top:26px; }
  .section h2 { font-size:47px; }
  .model-reveal { height:580px; min-height:0; }
  .reveal-panel img { object-position:center top; }
  .scan-gallery { grid-template-columns:1fr; }
  .scan-ui-card { min-height:620px; padding:20px; }
  .scan-ui-image { min-height:530px; }
  .scan-result-grid { min-height:640px; gap:12px; }
  .route-board { grid-template-columns:1fr; padding:26px; }
  .route-source { align-items:center; text-align:center; }
  .route-lines { height:70px; }
  .route-lines:before { left:50%; top:8px; bottom:8px; width:1px; height:auto; }
  .route-lines i { display:none; }
  .route-options article { grid-template-columns:58px 1fr; padding:18px; gap:14px; }
  .transfer-flow { flex-direction:column; }
  .transfer-phone { width:235px; height:500px; }
  .flow-arrow { height:80px; transform:rotate(90deg); }
  .flow-arrow span { display:none; }
  .transfer-desktop { width:100%; height:auto; aspect-ratio:1/1.06; }
  .capability-grid { grid-template-columns:1fr; }
  .capability-card { display:grid; grid-template-columns:45% 55%; }
  .capability-image { height:400px; }
  .coming-visual { height:400px; }
  .capability-copy { padding:22px; align-self:center; }
  .honest-head { display:block; margin-bottom:44px; }
  .honest-head > p { margin-top:25px; }
  .capture-tips { grid-template-columns:1fr 1fr; }
  .capture-tips article, .capture-tips article:not(:first-child) { padding:22px 18px; min-height:180px; border-bottom:1px solid rgba(19,40,39,.24); }
  .capture-tips h3 { margin-top:22px; }
  .availability { grid-template-columns:1fr; gap:42px; }
  .install-sequence { grid-template-columns:1fr 1fr; }
  footer { grid-template-columns:1fr; padding:42px 20px; }
  footer small { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }