:root {
  color-scheme: light dark;
  --blue:#0a477f;
  --blue-deep:#06284d;
  --blue-bright:#1768aa;
  --amber:#c76308;
  --green:#0d7a45;
  --ink:#102231;
  --muted:#60707b;
  --paper:#faf9f5;
  --card:#ffffff;
  --soft:#edf3f7;
  --line:#d8e1e7;
  --shadow:0 18px 48px rgba(10,38,60,.09);
}

* { box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; overflow-x:hidden; font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; color:var(--ink); background-color:var(--paper); background-image:radial-gradient(circle at 1px 1px,rgba(10,71,127,.09) 1px,transparent 0); background-size:24px 24px; }
a { color:var(--blue-bright); text-underline-offset:3px; }
.shell { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }

.site-header { border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent); background:color-mix(in srgb,var(--paper) 88%,transparent); position:sticky; top:0; z-index:10; backdrop-filter:blur(18px) saturate(1.2); }
nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-size:1.22rem; font-weight:800; letter-spacing:-.025em; text-decoration:none; }
.brand img { display:block; width:38px; height:38px; border-radius:10px; box-shadow:0 5px 14px rgba(6,40,77,.17); }
.links { display:flex; align-items:center; gap:25px; }
.links a { color:var(--ink); font-size:.94rem; font-weight:650; text-decoration:none; }
.links a:hover { color:var(--blue-bright); }

.hero { min-height:680px; padding-block:82px 72px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); gap:70px; align-items:center; }
.hero-copy { position:relative; z-index:1; }
.eyebrow { color:var(--blue-bright); font-size:.78rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:.18em 0 .25em; font-size:clamp(3.35rem,6.5vw,5.7rem); line-height:.98; letter-spacing:-.055em; }
h1 span { color:var(--blue); }
h2 { margin:.2em 0 .4em; font-size:clamp(2rem,4.3vw,3.5rem); line-height:1.08; letter-spacing:-.035em; }
h3 { margin:.7em 0 .3em; font-size:1.3rem; line-height:1.25; letter-spacing:-.02em; }
p { margin:.5em 0; }
.lede { max-width:680px; color:var(--muted); font-size:1.2rem; line-height:1.65; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin:31px 0 25px; }
.button { min-height:48px; padding:11px 20px; border:1px solid transparent; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:750; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:white; background:var(--blue); box-shadow:0 10px 24px rgba(10,71,127,.22); }
.button.primary:hover { background:var(--blue-bright); box-shadow:0 13px 27px rgba(10,71,127,.27); }
.button.secondary { color:var(--ink); background:color-mix(in srgb,var(--card) 74%,transparent); border-color:var(--line); }
.trust-list { margin:0; padding:0; display:flex; gap:19px; flex-wrap:wrap; color:var(--muted); font-size:.89rem; list-style:none; }
.trust-list li { display:flex; align-items:center; gap:7px; }
.trust-list li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 13%,transparent); }

.product-stage { position:relative; padding:34px 0; }
.product-stage::before { content:""; position:absolute; inset:-25px -40px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--blue-bright) 20%,transparent),transparent 68%); filter:blur(18px); }
.app-window { position:relative; overflow:hidden; min-height:505px; border:1px solid color-mix(in srgb,var(--line) 70%,white); border-radius:25px; padding:21px; background:color-mix(in srgb,var(--card) 94%,var(--soft)); box-shadow:0 35px 85px rgba(6,40,77,.2),0 4px 12px rgba(6,40,77,.08); }
.app-bar { padding-bottom:16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.mini-brand { display:flex; align-items:center; gap:9px; font-weight:800; }
.mini-brand img { width:29px; height:29px; border-radius:8px; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 12%,transparent); }
.project-heading { margin:22px 0 16px; display:flex; align-items:center; justify-content:space-between; }
.project-heading div { display:grid; gap:2px; }
.project-heading strong { font-size:1.4rem; }
.micro-label { color:var(--muted); font-size:.72rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.ready-pill,.verify-tag { color:var(--green); background:color-mix(in srgb,var(--green) 11%,var(--card)); border:1px solid color-mix(in srgb,var(--green) 25%,transparent); border-radius:999px; padding:5px 10px; font-size:.76rem; font-weight:800; }
.view-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; background:var(--soft); border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:12px; }
.view-switch span { padding:7px 8px; color:var(--muted); border-radius:8px; text-align:center; font-size:.75rem; font-weight:750; }
.view-switch .active { color:var(--blue); background:var(--card); box-shadow:0 2px 8px rgba(10,38,60,.08); }
.plan-preview { height:285px; margin-top:13px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background-color:var(--paper); background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--blue) 20%,transparent) 1px,transparent 0); background-size:18px 18px; }
.plan-preview svg { width:100%; height:100%; display:block; }
.room-shape { fill:color-mix(in srgb,var(--blue) 7%,transparent); stroke:var(--blue); stroke-width:6; stroke-linejoin:round; }
.door-gap { fill:none; stroke:var(--paper); stroke-width:10; }
.door-swing { fill:none; stroke:var(--blue-bright); stroke-width:2; stroke-dasharray:4 4; }
.window-mark { fill:none; stroke:var(--blue-bright); stroke-width:3; }
.dimension-line,.dimension-tick { fill:none; stroke:var(--muted); stroke-width:1.5; }
.dimension-arrow { fill:var(--muted); }
.svg-room-label { fill:var(--blue-bright); font-size:11px; font-weight:800; letter-spacing:1.2px; }
.svg-room-name { fill:var(--ink); font-size:17px; font-weight:800; }
.svg-dimension { fill:var(--muted); font-size:11px; font-weight:700; }
.map-pin path { fill:var(--amber); stroke:white; stroke-width:3; }
.map-pin circle { fill:white; }
.verify-tag { position:absolute; right:14px; top:14px; }
.preview-note { margin:9px 2px 0; color:var(--muted); font-size:.7rem; text-align:right; }

.principles { padding:20px 0 100px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { padding:27px; background:color-mix(in srgb,var(--card) 95%,transparent); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 28px rgba(10,38,60,.055); }
.feature-card h2 { margin:.7em 0 .3em; font-size:1.35rem; letter-spacing:-.02em; }
.feature-card p { color:var(--muted); }
.feature-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-weight:900; font-size:1.25rem; }
.feature-icon.local { color:var(--blue); background:color-mix(in srgb,var(--blue) 11%,var(--card)); }
.feature-icon.verify { color:var(--green); background:color-mix(in srgb,var(--green) 11%,var(--card)); }
.feature-icon.export { color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,var(--card)); }

.workflow { padding:95px 0 105px; color:#f6fbff; background-color:var(--blue-deep); background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:24px 24px; }
.workflow .eyebrow { color:#78baff; }
.section-heading { max-width:740px; margin-bottom:44px; }
.section-heading p { color:#b9ccda; font-size:1.1rem; }
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.workflow-card { position:relative; padding:24px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); }
.workflow-card p { color:#b9ccda; }
.step { color:#78baff; font-size:.73rem; font-weight:850; letter-spacing:.12em; }
.workflow-visual { height:155px; margin:18px 0 21px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:rgba(3,18,35,.45); }
.capture-art .scan-box { position:absolute; inset:26px 50px; border:3px solid #78baff; border-radius:5px; }
.capture-art .scan-box::before,.capture-art .scan-box::after { content:""; position:absolute; width:28px; height:28px; border-color:var(--amber); }
.capture-art .scan-box::before { left:-8px; top:-8px; border-left:3px solid var(--amber); border-top:3px solid var(--amber); }
.capture-art .scan-box::after { right:-8px; bottom:-8px; border-right:3px solid var(--amber); border-bottom:3px solid var(--amber); }
.scan-line { position:absolute; left:18%; right:18%; top:49%; height:2px; background:linear-gradient(90deg,transparent,#ffad40,transparent); box-shadow:0 0 13px #ffad40; }
.review-art span { position:absolute; inset:30px; border:4px solid #78baff; transform:skew(-8deg); }
.review-art i { position:absolute; right:29px; bottom:24px; width:43px; height:43px; display:grid; place-items:center; color:#06284d; background:#5cd993; border:4px solid #f6fbff; border-radius:50%; font-style:normal; font-weight:900; }
.sheet { position:absolute; width:92px; height:108px; top:22px; left:50%; border:2px solid #78baff; border-radius:7px; background:#0a345f; }
.sheet.back { transform:translateX(-67%) rotate(-7deg); opacity:.6; }
.sheet.front { transform:translateX(-40%) rotate(3deg); }
.sheet.front::before { content:""; position:absolute; inset:25px 17px; background:repeating-linear-gradient(#78baff 0 2px,transparent 2px 15px); opacity:.65; }
.export-art i { position:absolute; right:35px; top:21px; color:#ffad40; font-size:2rem; font-style:normal; font-weight:900; }

.privacy-band { margin-block:100px; padding:42px 46px; display:flex; align-items:center; justify-content:space-between; gap:35px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.privacy-band h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); }
.privacy-band p { color:var(--muted); }
.privacy-band .button { flex:0 0 auto; }

.document { max-width:820px; padding:74px 0 100px; }
.document h1 { font-size:clamp(2.8rem,6vw,4.8rem); }
.document h2 { margin-top:1.8em; font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.02em; }
.document h3 { margin-top:1.5em; }
.document p,.document li { color:var(--muted); }
.document li + li { margin-top:.45em; }
.meta { padding-bottom:24px; margin-bottom:38px; color:var(--muted); border-bottom:1px solid var(--line); }
.callout { margin-block:25px; padding:19px 22px; color:var(--ink); background:color-mix(in srgb,var(--blue) 8%,var(--card)); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; }
.support-card { margin-block:18px 34px; padding:24px 26px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 28px rgba(10,38,60,.055); }
.support-card h3 { margin-top:0; }

footer { padding:37px 0 48px; color:var(--muted); background:color-mix(in srgb,var(--paper) 94%,transparent); border-top:1px solid var(--line); }
footer .shell { display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; }
footer a { color:inherit; }

a:focus-visible { outline:3px solid color-mix(in srgb,var(--blue-bright) 45%,transparent); outline-offset:4px; border-radius:5px; }

@media (max-width:860px) {
  .hero { min-height:auto; padding-top:58px; grid-template-columns:1fr; gap:30px; }
  .hero-copy { max-width:760px; }
  .product-stage { width:min(500px,100%); margin-inline:auto; }
  .principles,.workflow-grid { grid-template-columns:1fr; }
  .feature-card { display:grid; grid-template-columns:auto 1fr; column-gap:16px; }
  .feature-card p { grid-column:2; }
  .privacy-band { align-items:flex-start; flex-direction:column; }
}

@media (max-width:560px) {
  .shell { width:min(100% - 28px,1120px); }
  nav { min-height:68px; padding-block:11px 12px; gap:8px; flex-wrap:wrap; }
  .brand { font-size:1.05rem; }
  .brand img { width:34px; height:34px; }
  .links { width:100%; gap:24px; }
  .links a { font-size:.84rem; }
  .links .nav-workflow { display:none; }
  .hero { padding-top:45px; }
  h1 { font-size:clamp(3rem,15vw,4.15rem); }
  .lede { font-size:1.05rem; }
  .actions { align-items:stretch; flex-direction:column; }
  .button { width:100%; }
  .trust-list { align-items:flex-start; flex-direction:column; gap:8px; }
  .product-stage { padding:10px 0; }
  .app-window { min-height:455px; padding:15px; transform:none; }
  .plan-preview { height:245px; }
  .principles { padding-bottom:70px; }
  .workflow { padding-block:72px 78px; }
  .privacy-band { margin-block:65px; padding:30px 24px; }
  .document { padding-top:54px; }
  footer .shell { flex-direction:column; }
}

@media (prefers-color-scheme:dark) {
  :root { --blue:#57aaff; --blue-deep:#071f3d; --blue-bright:#75baff; --amber:#ffad40; --green:#5cd993; --ink:#edf5f8; --muted:#acbbc5; --paper:#10151a; --card:#171f26; --soft:#202a32; --line:#34414a; --shadow:0 18px 48px rgba(0,0,0,.28); }
  .button.primary { color:#06192b; }
  .room-shape { fill:color-mix(in srgb,var(--blue) 8%,transparent); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button { transition:none; }
}