:root {
  --ink: #111b31;
  --ink-2: #263554;
  --paper: #f5f7fa;
  --mist: #e7edf4;
  --cyan: #00d9ff;
  --blue: #3d5afe;
  --line: rgba(17, 27, 49, .16);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; z-index: 99; top: -5rem; left: 1rem; padding: .75rem 1rem; color: white; background: var(--ink); border-radius: 0 0 .5rem .5rem; }
.skip-link:focus { top: 0; }

.site-header { height: 82px; padding: 0 clamp(1.3rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(245,247,250,.9); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.04em; }
.brand img { width: 26px; height: 26px; object-fit: contain; }
nav { display: flex; gap: clamp(1rem, 2vw, 2.4rem); font-size: .8rem; font-weight: 700; }
nav a { opacity: .72; transition: opacity .2s; }
nav a:hover, nav a:focus { opacity: 1; }
.header-contact { font-size: .8rem; font-weight: 800; border-bottom: 2px solid var(--cyan); padding-bottom: .2rem; }

.hero { min-height: min(760px, calc(100vh - 82px)); padding: clamp(4rem, 9vw, 9rem) clamp(1.3rem, 8vw, 9rem); display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); align-items: center; gap: 2rem; overflow: hidden; position: relative; }
.eyebrow, .section-index { margin: 0 0 1.4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; font-weight: 500; }
.eyebrow { display: flex; align-items: center; gap: .55rem; color: #4a5a72; }
.eyebrow span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(0,217,255,.14); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 8.7ch; margin-bottom: 1.5rem; font-size: clamp(3.2rem, 6.4vw, 6.7rem); line-height: .92; letter-spacing: -.075em; font-weight: 800; }
h1 em, h2 em { font-style: normal; color: var(--blue); }
.hero-text { max-width: 510px; color: #506078; font-size: 1.03rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 48px; padding: .8rem 1.1rem; border-radius: .3rem; font-size: .8rem; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--ink); box-shadow: 0 8px 18px rgba(17,27,49,.18); }
.button-primary span, .button-light span { color: var(--cyan); font-size: 1.1rem; }
.button-quiet { border: 1px solid var(--line); }
.hero-note { margin-top: 2rem; color: #8490a2; font-size: .75rem; }

.hero-visual { height: 500px; position: relative; isolation: isolate; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .75; }
.orb-one { width: 300px; height: 300px; top: 0; right: 4%; background: radial-gradient(circle, rgba(0,217,255,.35), transparent 67%); }
.orb-two { width: 360px; height: 360px; bottom: -8%; left: 1%; background: radial-gradient(circle, rgba(61,90,254,.26), transparent 70%); }
.grid-plane { position: absolute; inset: 22% 7% 3% 17%; transform: skewY(-18deg); border: 1px solid rgba(61,90,254,.17); background-image: linear-gradient(rgba(61,90,254,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(61,90,254,.1) 1px, transparent 1px); background-size: 21px 21px; }
.scan-card { position: absolute; inset: 8% 10% 5% 15%; overflow: hidden; border: 1px solid rgba(17,27,49,.24); background: linear-gradient(140deg, rgba(255,255,255,.86), rgba(224,232,244,.82)); box-shadow: 22px 28px 50px rgba(33,48,87,.17); }
.scan-topline { height: 36px; padding: 0 .8rem; display: flex; align-items: center; justify-content: space-between; color: #53647c; border-bottom: 1px solid rgba(17,27,49,.14); font: .52rem var(--mono); letter-spacing: .07em; }
.scan-topline i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: pulse 1.5s infinite; }
.cloud { position: absolute; border-radius: 39% 61% 63% 37% / 53% 42% 58% 47%; background-image: radial-gradient(circle, var(--cyan) 1.7px, transparent 2.1px); background-size: 13px 13px; opacity: .82; filter: drop-shadow(0 0 1px rgba(61,90,254,.6)); }
.cloud-a { width: 46%; height: 62%; left: 17%; top: 21%; transform: rotate(-18deg); }
.cloud-b { width: 40%; height: 53%; right: 16%; top: 15%; background-image: radial-gradient(circle, #3d5afe 1.5px, transparent 2px); transform: rotate(26deg); opacity: .54; }
.cloud-c { width: 56%; height: 24%; left: 23%; bottom: 12%; transform: skewX(-26deg); opacity: .45; }
.axis { position: absolute; background: #63738b; transform-origin: left; opacity: .65; }
.axis-x { width: 58%; height: 1px; left: 18%; bottom: 20%; transform: rotate(-14deg); }
.axis-y { width: 43%; height: 1px; left: 46%; bottom: 18%; transform: rotate(-72deg); }
.axis-z { width: 45%; height: 1px; left: 45%; bottom: 18%; transform: rotate(34deg); }
.guide { position: absolute; border: 1px solid var(--blue); opacity: .7; }
.guide-a { width: 48%; height: 43%; left: 27%; top: 25%; }
.guide-b { width: 22%; height: 52%; left: 52%; top: 19%; transform: skewY(-21deg); }
.corner { position: absolute; width: 30%; height: 37%; right: 17%; bottom: 16%; border-right: 3px solid var(--cyan); border-bottom: 3px solid var(--cyan); transform: skewY(-20deg); }
.scan-label { position: absolute; z-index: 2; padding: .48rem .6rem; background: var(--ink); color: white; font: .57rem var(--mono); letter-spacing: .06em; box-shadow: 4px 5px 0 var(--cyan); }
.scan-label b { color: var(--cyan); margin-right: .35rem; }
.label-a { top: 15%; right: 2%; }.label-b { bottom: 13%; left: 0; }
@keyframes pulse { 50% { opacity: .2; transform: scale(.65); } }

.statement, .workflow, .output, .future, .faq { padding-left: clamp(1.3rem, 8vw, 9rem); padding-right: clamp(1.3rem, 8vw, 9rem); }
.statement { padding-top: clamp(5rem, 11vw, 10rem); padding-bottom: clamp(5rem, 10vw, 9rem); display: grid; grid-template-columns: minmax(130px, .28fr) 1fr; gap: 2rem; border-top: 1px solid var(--line); }
.section-index { color: #66758a; }
.statement-large { max-width: 920px; margin-bottom: 2rem; font-size: clamp(2rem, 4.15vw, 4.6rem); letter-spacing: -.065em; line-height: 1.05; font-weight: 700; }
.statement-small { max-width: 480px; margin-left: auto; color: #607087; line-height: 1.7; }

.workflow { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); background: white; }
.section-heading { display: grid; grid-template-columns: minmax(130px,.28fr) 1fr; gap: 2rem; margin-bottom: 3rem; }
.section-heading h2, .future h2, .contact h2 { margin-bottom: 0; font-size: clamp(2.1rem, 4.6vw, 4.7rem); line-height: 1; letter-spacing: -.07em; }
.workflow-list { list-style: none; max-width: 1100px; padding: 0; margin: 0 auto; border-top: 1px solid var(--line); }
.workflow-list li { display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: start; transition: padding-left .2s; }
.workflow-list li:hover { padding-left: .8rem; }
.step-number { color: var(--blue); font: .72rem var(--mono); }
.workflow-list h3 { margin-bottom: .55rem; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.045em; }
.workflow-list p { max-width: 620px; margin-bottom: 0; color: #627187; line-height: 1.65; font-size: .93rem; }
.step-mark { color: var(--cyan); font-size: 1.5rem; }

.video-section { padding: clamp(5rem, 10vw, 9rem) clamp(1.3rem, 8vw, 9rem); display: grid; grid-template-columns: minmax(0, .75fr) minmax(380px, 1.25fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; background: #dce4ef; }
.video-copy h2 { margin-bottom: 1.5rem; font-size: clamp(2.3rem, 4.7vw, 4.9rem); line-height: 1; letter-spacing: -.07em; }
.video-copy p:not(.section-index) { max-width: 480px; margin-bottom: 2rem; color: #52637a; line-height: 1.7; }
.video-frame { overflow: hidden; position: relative; aspect-ratio: 16 / 9; background: var(--ink); box-shadow: 18px 20px 0 rgba(61,90,254,.22); }
.video-frame iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }

.features { padding: clamp(5rem, 9vw, 9rem) clamp(1.3rem, 8vw, 9rem); color: white; background: var(--ink); }
.dark-heading .section-index { color: #9babc4; }.dark-heading h2 { color: white; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.feature { min-height: 370px; padding: clamp(1.4rem, 3vw, 3rem); position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.feature-kicker { color: var(--cyan); font: .63rem var(--mono); letter-spacing: .1em; }
.feature h3 { margin: 2.5rem 0 1rem; position: relative; z-index: 1; font-size: clamp(1.6rem, 3.2vw, 3.4rem); line-height: .98; letter-spacing: -.065em; }
.feature p { max-width: 390px; position: relative; z-index: 1; color: #bec9dc; font-size: .88rem; line-height: 1.65; }
.mode-bars { position: absolute; right: 8%; bottom: 0; width: 45%; display: flex; align-items: end; gap: 7px; opacity: .8; }.mode-bars i { flex: 1; background: linear-gradient(var(--cyan), var(--blue)); }.mode-bars i:nth-child(1) { height: 30px; }.mode-bars i:nth-child(2) { height: 92px; }.mode-bars i:nth-child(3) { height: 142px; }.mode-bars i:nth-child(4) { height: 73px; }.mode-bars i:nth-child(5) { height: 175px; }
.plane-art { position: absolute; right: -7%; bottom: -11%; width: 65%; height: 65%; border: 1px solid var(--cyan); transform: skewY(-22deg); opacity: .63; }.plane-art i { position: absolute; inset: 16% 13%; border: 1px solid var(--blue); }.plane-art i:nth-child(2) { inset: 31% 24%; }.plane-art i:nth-child(3) { inset: 44% 35%; }
.raster-art { position: absolute; right: 4%; bottom: 10%; width: 43%; aspect-ratio: 1; border: 1px solid var(--cyan); background-image: radial-gradient(circle, var(--cyan) 1px, transparent 1.5px); background-size: 13px 13px; transform: rotate(9deg); opacity: .65; }.raster-art i { position: absolute; background: var(--blue); }.raster-art i:nth-child(1), .raster-art i:nth-child(3) { width: 14px; height: 2px; }.raster-art i:nth-child(2), .raster-art i:nth-child(4) { width: 2px; height: 14px; }.raster-art i:nth-child(1) { left: -5px; top: -2px; }.raster-art i:nth-child(2) { left: 0; top: -7px; }.raster-art i:nth-child(3) { right: -5px; bottom: -2px; }.raster-art i:nth-child(4) { right: 0; bottom: -7px; }
.paper-art { position: absolute; right: 10%; bottom: 0; width: 46%; height: 66%; padding: 1rem; color: var(--ink); background: #e8f8fc; transform: rotate(-6deg); box-shadow: 8px -8px 0 rgba(0,217,255,.34); }.paper-art i { display: block; height: 1px; margin-bottom: 1rem; background: var(--blue); }.paper-art b { font: 1.7rem var(--mono); }

.output { padding-top: clamp(5rem, 11vw, 11rem); padding-bottom: clamp(5rem, 11vw, 11rem); display: grid; grid-template-columns: minmax(0, .95fr) minmax(350px, 1.05fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.output h2 { font-size: clamp(2.2rem, 4.2vw, 4.8rem); line-height: 1; letter-spacing: -.07em; }.output-copy > p:not(.section-index) { max-width: 540px; margin-top: 2rem; color: #617188; line-height: 1.7; }.output ul { list-style: none; padding: 0; margin: 2.1rem 0 0; color: #41526b; line-height: 2; font-size: .9rem; }.output li span { color: var(--blue); margin-right: .5rem; }
.sheet-preview { aspect-ratio: .83; padding: 1.1rem; position: relative; overflow: hidden; border: 1px solid #aab7c9; background: white; box-shadow: 17px 20px 0 var(--mist); font: .55rem var(--mono); }.sheet-header, .sheet-footer { position: relative; z-index: 3; display: flex; justify-content: space-between; color: #64738a; }.sheet-footer { position: absolute; right: 1.1rem; bottom: 1.1rem; left: 1.1rem; }.sheet-grid { position: absolute; inset: 12% 8% 13%; background-image: linear-gradient(rgba(49,93,154,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(49,93,154,.1) 1px, transparent 1px); background-size: 14px 14px; }.sheet-points { position: absolute; top: 26%; left: 16%; width: 66%; height: 37%; background-image: radial-gradient(circle, #1c245c 1px, transparent 1.5px); background-size: 7px 7px; clip-path: polygon(0 70%, 14% 30%, 32% 45%, 48% 8%, 68% 33%, 86% 20%, 100% 72%, 92% 90%, 50% 76%, 18% 100%); opacity: .62; }.sheet-line { position: absolute; z-index: 2; height: 2px; background: var(--cyan); transform-origin: left; }.line-one { width: 55%; top: 51%; left: 17%; transform: rotate(-19deg); }.line-two { width: 35%; top: 44%; left: 42%; transform: rotate(31deg); background: var(--blue); }


.future { padding-top: clamp(5rem, 10vw, 10rem); padding-bottom: clamp(5rem, 10vw, 10rem); display: grid; grid-template-columns: minmax(130px,.28fr) 1fr; gap: 2rem; background: #dce4ef; }.future h2 { max-width: 760px; }.future p:not(.section-index) { max-width: 530px; margin: 2rem 0 0 auto; color: #52637a; line-height: 1.75; }.future .coming-soon { display: inline-block; margin: 0 0 1rem; padding: .35rem .55rem; color: var(--blue); border: 1px solid rgba(61,90,254,.35); font: .63rem var(--mono); letter-spacing: .12em; }
.faq { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); background: white; }.faq details { max-width: 980px; margin: 0 auto; padding: 1.25rem 0; border-top: 1px solid var(--line); }.faq details:last-child { border-bottom: 1px solid var(--line); }.faq summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 700; letter-spacing: -.025em; }.faq summary span { color: var(--blue); font-size: 1.2rem; }.faq details[open] summary span { transform: rotate(45deg); }.faq details p { max-width: 690px; margin: 1rem 2rem .2rem 0; color: #637188; line-height: 1.65; font-size: .9rem; }
.contact { padding: clamp(5rem, 11vw, 10rem) clamp(1.3rem, 8vw, 9rem); color: white; background: linear-gradient(125deg, #101a30, #1f2371); }.contact .eyebrow { color: #bacbe6; }.contact h2 { max-width: 700px; color: white; }.contact > p:not(.eyebrow) { max-width: 450px; margin: 1.5rem 0 2rem; color: #bed0e8; line-height: 1.7; }.button-light { color: var(--ink); background: white; }.button-light:hover { box-shadow: 0 8px 23px rgba(0,0,0,.22); }
footer { padding: 1.6rem clamp(1.3rem, 8vw, 9rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #65748a; font-size: .72rem; }.brand + p { margin-left: auto; } footer p { margin: 0; }

@media (max-width: 780px) { nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 4.5rem; }.hero-visual { height: 380px; margin-top: 1rem; }.statement, .future { grid-template-columns: 1fr; }.section-heading { grid-template-columns: 1fr; gap: 0; }.output, .video-section { grid-template-columns: 1fr; }.feature-grid { grid-template-columns: 1fr; }.feature { min-height: 330px; }.statement-small { margin-left: 0; }.future p:not(.section-index) { margin-left: 0; }.sheet-preview { max-width: 520px; width: 100%; margin: auto; }.header-contact { font-size: .72rem; } }
@media (max-width: 460px) { .site-header { height: 70px; }.header-contact { display: none; }.hero { min-height: auto; }.hero-visual { height: 300px; }.scan-card { inset: 8% 3% 5% 6%; }.workflow-list li { grid-template-columns: 46px 1fr; }.step-mark { display: none; }.feature { min-height: 300px; } footer { flex-wrap: wrap; }.brand + p { margin-left: 0; } }