:root {
  --ink: #101015;
  --ink-soft: #1b1a22;
  --paper: #f8f7f3;
  --paper-warm: #eeece5;
  --muted: #747178;
  --line: rgba(16, 16, 21, .13);
  --line-light: rgba(255, 255, 255, .16);
  --red: #fa604f;
  --red-deep: #cc4439;
  --orange: #ff9860;
  --max: 1180px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.scroll-progress { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: 3px; background: var(--red); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left center; pointer-events: none; }
.site-shell { overflow: hidden; }
.section-wrap { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.site-header { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; height: 84px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.04em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; color: #625f66; }
.site-nav a { transition: color .2s ease, transform .2s ease; }
.site-nav a:hover { color: var(--ink); transform: translateY(-1px); }
.site-nav .nav-cta { color: #fff; background: var(--ink); padding: 11px 15px; border-radius: 100px; }
.site-nav .nav-cta:hover { color: #fff; background: #303039; }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: 8px 13px; font: inherit; }
.hero { min-height: 760px; padding: 78px 0 96px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: center; }
.hero-copy { padding-bottom: 20px; position: relative; z-index: 2; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 22px; }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--red); margin: 0 8px 1px 0; box-shadow: 0 0 0 4px rgba(250,96,79,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.35rem, 6vw, 6.8rem); line-height: .91; letter-spacing: -.087em; font-weight: 650; margin-bottom: 27px; }
h1 em, h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.07em; }
.hero-lede { font-size: 18px; line-height: 1.45; color: #66636b; max-width: 420px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; gap: 17px; border-radius: 100px; padding: 15px 19px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px) scale(.98); }
.button-primary { color: #fff; background: var(--ink); box-shadow: 0 12px 30px rgba(16,16,21,.14); }
.button-primary:hover { background: #2b2a32; box-shadow: 0 16px 36px rgba(16,16,21,.2); }
.button-quiet { color: #6f6b73; padding-left: 9px; }
.button-quiet:hover { color: var(--ink); }
.button-light { background: #fff; color: var(--ink); box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.hero-notes { display: flex; align-items: center; gap: 10px; margin-top: 29px; color: #aaa6ae; font-size: 11px; }
.hero-notes i { width: 3px; height: 3px; background: #c7c2c8; border-radius: 50%; }
.hero-art { min-width: 0; position: relative; padding: 22px 10px 44px 0; transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }
.editor-window { position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.3); background: #201f24; border-radius: 18px; box-shadow: 0 30px 80px rgba(24,21,31,.24), 0 8px 20px rgba(24,21,31,.11); transform: rotate(2.7deg); overflow: hidden; }
.window-bar { height: 38px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; background: #2b2930; color: #aaa5ad; font-size: 9px; letter-spacing: .02em; }
.window-lights { display: flex; gap: 5px; }.window-lights b { display: block; width: 7px; height: 7px; border-radius: 50%; background: #626068; }.window-lights b:first-child { background: #f06c62; }.window-lights b:nth-child(2) { background: #e2a65e; }
.window-status { color: #b5afa8; }.window-status i, .live-chip i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #8ed0a8; margin-right: 5px; }
.editor-body { display: flex; min-height: 395px; }.editor-sidebar { width: 42px; background: #1b1a1f; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 17px; }.editor-sidebar span { width: 12px; height: 12px; border: 1px solid #5b5660; border-radius: 4px; opacity: .65; }.editor-sidebar .sidebar-active { border-color: #ff765f; background: #fa604f; opacity: 1; }.sidebar-mark { width: 13px; height: 13px; border-radius: 4px; background: #f9eee8; margin-bottom: 18px; }.sidebar-spacer { flex: 1; }
.editor-main { padding: 27px 26px 22px; flex: 1; min-width: 0; background: #242228; }.editor-topline, .timeline-head { display: flex; justify-content: space-between; color: #98939d; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }.stage-frame { margin-top: 13px; height: 244px; border-radius: 9px; overflow: hidden; position: relative; background: #242544; border: 1px solid rgba(255,255,255,.08); }.stage-background { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(19,36,70,.8), rgba(71,39,74,.45)), url('assets/screenduo-wallpaper-ribbon.png') center/cover; opacity: .82; }.stage-copy { position: absolute; top: 31px; left: 32px; color: #fff; }.stage-copy small { display: block; color: rgba(255,255,255,.62); letter-spacing: .18em; font-size: 8px; margin-bottom: 18px; }.stage-copy strong { font-size: 25px; line-height: .98; letter-spacing: -.06em; font-weight: 600; }.stage-phone { position: absolute; bottom: -38px; right: 68px; height: 167px; width: 89px; background: #f2efe9; border: 4px solid #e6e1dd; border-radius: 13px 13px 0 0; padding: 15px 8px; color: #454653; box-shadow: 0 5px 20px rgba(0,0,0,.2); }.phone-notch { width: 29px; height: 4px; border-radius: 4px; background: #aba9ad; margin: -8px auto 15px; }.phone-line { height: 4px; width: 65%; background: #9b9aa2; border-radius: 4px; margin-bottom: 5px; opacity: .6; }.phone-line.short { width: 42%; }.phone-window { height: 59px; background: #f76f57; border-radius: 4px; margin: 12px 0; }.phone-line.shorter { width: 50%; }.stage-camera { width: 86px; height: 70px; position: absolute; bottom: 16px; left: 26px; background: #13131a; border: 4px solid rgba(247,242,235,.88); border-radius: 9px; overflow: hidden; }.camera-face { width: 30px; height: 38px; background: #d3926f; border-radius: 45% 45% 35% 35%; margin: 10px auto -1px; box-shadow: 0 -10px 0 7px #3c2630; }.stage-camera span { font-size: 6px; letter-spacing: .12em; color: #fff; position: absolute; left: 6px; bottom: 5px; }.timeline-head { margin-top: 20px; }.timeline { height: 64px; position: relative; margin-top: 8px; background: #1d1c21; border-radius: 6px; padding: 8px 8px 7px 45px; }.time-ruler { display: flex; color: #706b74; font-size: 7px; justify-content: space-between; margin-bottom: 7px; }.track { height: 12px; border-radius: 3px; display: flex; gap: 3px; margin-bottom: 4px; position: relative; }.track b { font-size: 6px; font-weight: 600; color: #a29ca4; position: absolute; left: -38px; top: 2px; }.track i { display: block; height: 100%; border-radius: 2px; background: #5f8290; flex: 1; }.track i:nth-child(2) { flex: 1.4; }.track i:nth-child(3) { background: #99746c; flex: .7; }.track-camera i { background: #c17465; }.playhead { position: absolute; top: 4px; bottom: 4px; left: 43%; width: 1px; background: #fb705a; }.playhead:before { content: ''; position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fb705a; }
.hero-float-card { position: absolute; z-index: 3; right: -22px; bottom: 9px; width: 170px; padding: 17px 18px; background: rgba(255,252,247,.92); border: 1px solid rgba(255,255,255,.8); border-radius: 12px; box-shadow: 0 17px 42px rgba(28,24,31,.22); transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(-3.5deg); will-change: transform; }.float-kicker { display: block; font-size: 8px; letter-spacing: .16em; color: var(--red-deep); margin-bottom: 9px; font-weight: 700; }.hero-float-card strong { font-size: 16px; line-height: 1.05; letter-spacing: -.045em; }.float-arrow { position: absolute; right: 16px; bottom: 15px; color: var(--red); }.hero-orbit { position: absolute; border: 1px solid rgba(250,96,79,.2); border-radius: 50%; transform: rotate(-20deg); }.orbit-one { width: 620px; height: 270px; right: -145px; top: 42px; }.orbit-two { width: 460px; height: 190px; right: -47px; top: 75px; border-color: rgba(15,14,19,.12); }
.signal-strip { background: #e7e6ef; padding: 26px 0; }.signal-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }.signal-inner p { margin: 0; font-size: 14px; color: #66636c; }.platforms { display: flex; gap: 30px; align-items: center; color: #767583; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.story { padding: 164px 0 176px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }.story h2, .section-heading h2, .pairing-copy h2, .trust-copy h2, .launch-panel h2 { font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .94; letter-spacing: -.075em; font-weight: 650; margin-bottom: 24px; }.story-copy > p:not(.eyebrow) { color: #6d6971; max-width: 430px; font-size: 17px; line-height: 1.5; }.check-list { list-style: none; margin: 42px 0 0; padding: 0; display: grid; gap: 0; max-width: 480px; }.check-list li { border-top: 1px solid var(--line); padding: 18px 0; display: grid; grid-template-columns: 34px 1fr; gap: 10px; }.check-list li:last-child { border-bottom: 1px solid var(--line); }.check-list li > span, .feature-index, .caption-number { color: var(--red-deep); font-size: 10px; letter-spacing: .1em; font-weight: 700; }.check-list strong { display: block; font-size: 14px; margin-bottom: 3px; }.check-list small { color: #8a858c; font-size: 13px; line-height: 1.35; }.capture-art { position: relative; }.capture-board { background: #1b1a20; padding: 22px; border-radius: 16px; box-shadow: 0 22px 50px rgba(16,16,21,.16); transform: rotate(-2deg); }.capture-header, .capture-footer { color: #b9b4bc; display: flex; align-items: center; justify-content: space-between; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }.live-chip { border: 1px solid rgba(142,208,168,.25); color: #9ed8b4; padding: 5px 8px; border-radius: 99px; letter-spacing: .05em; }.capture-layout { min-height: 350px; display: grid; grid-template-columns: 1fr 150px; gap: 18px; align-items: center; padding: 29px 18px; }.capture-screen { height: 220px; border-radius: 10px; background: #f0ede8; position: relative; padding: 24px 23px; overflow: hidden; }.capture-screen-bar { height: 10px; width: 42%; background: #23232d; border-radius: 3px; margin-bottom: 28px; }.capture-screen-lines { display: grid; gap: 8px; }.capture-screen-lines i { display: block; background: #c6c4c9; height: 5px; width: 75%; border-radius: 3px; }.capture-screen-lines i:nth-child(2) { width: 55%; }.capture-screen-lines i:nth-child(3) { width: 65%; }.capture-screen-card { position: absolute; right: 22px; bottom: 21px; width: 112px; height: 80px; border-radius: 8px; background: linear-gradient(135deg, #f68763, #ee554d); }.capture-phone { height: 256px; border: 5px solid #d7d5d8; background: #fbfaf7; border-radius: 25px; padding: 17px; transform: rotate(5deg); box-shadow: -10px 18px 22px rgba(0,0,0,.2); }.phone-speaker { height: 4px; width: 31px; background: #a8a6ac; border-radius: 4px; margin: -8px auto 21px; }.capture-phone-art { height: 90px; border-radius: 8px; background: linear-gradient(135deg, #3d4f86, #ef715b); margin-bottom: 18px; }.capture-phone-copy { display: grid; gap: 7px; }.capture-phone-copy i { height: 5px; width: 80%; background: #9f9da2; border-radius: 4px; }.capture-phone-copy i:nth-child(2) { width: 63%; }.capture-phone-copy i:nth-child(3) { width: 48%; }.capture-caption { display: flex; align-items: center; gap: 13px; color: #8d8991; font-size: 11px; margin-top: 24px; }.caption-line { height: 1px; background: #c8c3ca; flex: 1; }
.feature-section { padding: 60px 0 175px; }.section-heading { max-width: 560px; }.section-heading > p:last-child { color: #77737b; font-size: 17px; max-width: 450px; }.feature-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }.feature-card { min-height: 430px; padding: 34px; border-radius: 14px; background: #e9e8e2; position: relative; overflow: hidden; }.feature-wide { grid-column: span 7; }.feature-tall { grid-column: span 5; background: #dedde8; }.feature-dark { grid-column: span 5; min-height: 350px; background: #24232a; color: #f7f5f1; }.feature-warm { grid-column: span 7; min-height: 350px; background: #e9e0d4; }.feature-card h3 { font-size: 29px; line-height: 1; letter-spacing: -.065em; margin: 19px 0 13px; }.feature-card p { color: #77747b; max-width: 285px; font-size: 14px; line-height: 1.4; }.feature-dark p { color: #aaa6ae; }.timeline-visual { position: absolute; bottom: 39px; left: 34px; right: 34px; background: #242329; border-radius: 9px; padding: 17px 19px 15px 55px; }.mini-ruler { display: flex; justify-content: space-between; margin-bottom: 11px; }.mini-ruler i { width: 3px; height: 3px; background: #756f78; border-radius: 50%; }.mini-track { display: flex; gap: 4px; height: 15px; margin-bottom: 5px; position: relative; }.mini-track b { position: absolute; left: -43px; top: 4px; color: #aaa2a8; font-size: 7px; }.mini-track span { flex: 1; border-radius: 3px; background: #658d97; }.mini-track span:nth-child(3) { flex: 1.5; }.mini-track span:nth-child(4) { background: #bf755f; }.camera-track span { background: #9a6f81; }.mini-playhead { position: absolute; top: 13px; bottom: 13px; left: 55%; width: 1px; background: #fb725d; }.canvas-visual { position: absolute; right: 28px; bottom: 23px; height: 205px; width: 255px; border: 1px solid rgba(48,46,65,.16); background: rgba(255,255,255,.36); border-radius: 9px; overflow: hidden; }.canvas-screen { position: absolute; width: 165px; height: 112px; left: 37px; top: 32px; background: #444a88; border-radius: 5px; }.canvas-camera { position: absolute; width: 72px; height: 53px; right: 21px; bottom: 24px; background: #e86759; border: 5px solid #eee9ea; border-radius: 7px; }.measure { position: absolute; background: #c3a4be; opacity: .8; }.measure-x { width: 165px; height: 1px; left: 37px; bottom: 19px; }.measure-y { height: 112px; width: 1px; left: 24px; top: 32px; }.export-pill { position: absolute; left: 34px; bottom: 37px; right: 34px; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); padding: 20px 0; display: grid; grid-template-columns: 1fr 1fr 30px; align-items: center; color: #fff; }.export-pill span { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .14em; }.export-pill strong { font-size: 16px; }.export-pill i { font-style: normal; text-align: right; color: #c6c1c8; }.project-visual { position: absolute; bottom: 32px; left: 34px; right: 34px; display: grid; gap: 9px; }.project-folder { background: #2c2a32; border-radius: 8px; padding: 11px 13px; display: flex; gap: 8px; }.project-folder span { background: #f2d7bc; color: #714c40; padding: 6px 8px; border-radius: 4px; font-size: 8px; letter-spacing: .08em; }.project-folder span:nth-child(2) { background: #b7c4cd; color: #34464b; }.project-folder span:nth-child(3) { background: #c7b3c9; color: #604c66; }.project-file { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; background: rgba(255,255,255,.63); padding: 11px 13px; border-radius: 8px; font-size: 11px; }.project-file i { width: 11px; height: 13px; background: #dc725e; border-radius: 2px; }.project-file strong { font-size: 11px; }.project-file small { color: #8d8484; font-size: 9px; }
.pairing-section { background: var(--ink); color: #f8f5ef; padding: 160px 0; }.pairing-inner { display: grid; grid-template-columns: .77fr 1.23fr; gap: 90px; align-items: center; }.pairing-copy > p:not(.eyebrow) { color: #aaa5af; max-width: 380px; font-size: 17px; }.text-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 25px; color: #fff; font-size: 14px; font-weight: 700; border-bottom: 1px solid #77717c; padding-bottom: 8px; }.pairing-art { min-height: 390px; position: relative; transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }.device { position: absolute; background: #2a2830; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 26px 40px rgba(0,0,0,.3); }.device-ipad { width: 435px; height: 292px; top: 36px; left: 35px; border-radius: 15px; padding: 20px; transform: rotate(-5deg); }.device-content { background: linear-gradient(140deg,#343568,#1f293e); border-radius: 8px; height: 100%; padding: 27px; display: flex; flex-direction: column; justify-content: center; }.device-content small { color: rgba(255,255,255,.55); letter-spacing: .15em; font-size: 8px; }.device-content strong { margin-top: 17px; font-size: 35px; letter-spacing: -.08em; line-height: .92; }.device-bar { margin-top: 24px; height: 5px; border-radius: 4px; background: var(--red); width: 76%; }.device-bar.short { margin-top: 8px; width: 48%; background: rgba(255,255,255,.28); }.device-phone { width: 148px; height: 281px; right: 45px; bottom: 0; border-radius: 22px; padding: 19px 15px; transform: rotate(8deg); background: #eeebe7; color: #333039; }.device-notch { width: 35px; height: 5px; border-radius: 4px; background: #8e8992; margin: -9px auto 25px; }.phone-person { height: 128px; border-radius: 10px; background: linear-gradient(145deg,#b8695b,#e5b889); margin-bottom: 17px; position: relative; overflow: hidden; }.phone-person:after { content: ''; position: absolute; width: 46px; height: 69px; border-radius: 48%; background: #c88466; top: 35px; left: 51px; box-shadow: 0 -19px 0 9px #31222a; }.device-phone small { font-size: 8px; letter-spacing: .14em; }.device-camera { width: 6px; height: 6px; border-radius: 50%; background: #1e1d23; position: absolute; top: 11px; left: 50%; }.pairing-line { position: absolute; height: 1px; background: rgba(250,96,79,.8); transform-origin: left; z-index: 1; }.line-one { width: 240px; left: 300px; top: 153px; transform: rotate(31deg); }.line-two { width: 177px; left: 390px; top: 211px; transform: rotate(-13deg); background: rgba(255,255,255,.4); }.pairing-badge { position: absolute; top: 11px; right: 62px; padding: 9px 12px; background: #1a281f; color: #9dd5ac; border-radius: 99px; font-size: 9px; font-weight: 700; letter-spacing: .1em; border: 1px solid rgba(157,213,172,.24); }.pairing-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8dd29f; margin-right: 6px; }
.use-cases { padding: 175px 0; }.centered { margin: 0 auto; text-align: center; }.centered > p:last-child { margin-left: auto; margin-right: auto; }.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 66px; }.case-card { border-top: 1px solid var(--line); padding-top: 15px; }.case-art { height: 294px; border-radius: 12px; overflow: hidden; position: relative; }.case-demo { background: #25242a; padding: 22px 20px; }.case-window { height: 100%; background: #f1eee8; border-radius: 7px; padding: 13px; position: relative; }.case-dot { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: #d96556; margin-right: 4px; }.case-dot:nth-child(2) { background: #d6a566; }.case-dot:nth-child(3) { background: #8eb49f; }.case-code { position: absolute; top: 52px; left: 22px; right: 22px; display: grid; gap: 9px; }.case-code i { height: 5px; width: 70%; background: #9e9ba1; border-radius: 5px; }.case-code i:nth-child(2) { width: 50%; background: #cf625e; }.case-code i:nth-child(3) { width: 79%; }.case-code i:nth-child(4) { width: 61%; }.case-code i:nth-child(5) { width: 43%; }.case-output { position: absolute; bottom: 18px; left: 22px; right: 22px; height: 82px; border-radius: 6px; background: linear-gradient(135deg,#394578,#de715e); }.case-course { background: linear-gradient(145deg,#eed9aa,#90a9c1); }.course-map { position: absolute; left: 27px; top: 29px; display: grid; gap: 10px; }.course-map span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: rgba(250,248,241,.82); font-size: 10px; color: #4d5568; }.course-map span:nth-child(2) { margin-left: 22px; }.course-map span:nth-child(3) { margin-left: 8px; }.course-map span:nth-child(4) { margin-left: 34px; }.course-face { position: absolute; width: 130px; height: 176px; right: 41px; bottom: -11px; border-radius: 65px 65px 0 0; background: #222232; }.course-face:after { content: ''; position: absolute; width: 53px; height: 70px; border-radius: 50%; background: #bc7d64; left: 39px; top: 35px; box-shadow: 0 -22px 0 8px #35242d; }.case-support { background: #eee9df; }.support-bubble { position: absolute; left: 37px; right: 37px; top: 40px; padding: 22px; background: #fff; border-radius: 11px; box-shadow: 0 9px 19px rgba(50,45,46,.12); display: grid; gap: 12px; }.support-bubble strong { font-size: 19px; letter-spacing: -.05em; }.support-bubble span { font-size: 11px; color: #8b8583; border-top: 1px solid #e3dfda; padding-top: 11px; }.case-meta { padding-top: 18px; display: grid; grid-template-columns: 29px 1fr; column-gap: 10px; }.case-meta > span { color: var(--red-deep); font-size: 11px; font-weight: 700; }.case-meta h3 { font-size: 19px; line-height: 1; letter-spacing: -.05em; margin: 0 0 8px; }.case-meta p { grid-column: 2; color: #7b767d; font-size: 14px; margin: 0; }
.trust-section { border-top: 1px solid var(--line); padding: 123px 0 165px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 130px; }.trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }.trust-list > div { border-top: 1px solid var(--line); padding: 19px 0 24px; }.trust-list > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }.trust-list span { display: block; color: var(--red-deep); font-size: 10px; font-weight: 700; margin-bottom: 12px; }.trust-list strong { display: block; font-size: 16px; letter-spacing: -.025em; margin-bottom: 7px; }.trust-list p { color: #827d84; font-size: 13px; margin: 0; line-height: 1.35; }
.faq-section { border-top: 1px solid var(--line); padding: 135px 0 160px; }.faq-list { max-width: 790px; margin: 62px auto 0; border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); padding: 21px 0; }.faq-list summary { cursor: pointer; list-style: none; font-size: 16px; font-weight: 650; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary:after { content: '+'; font-size: 20px; color: var(--red-deep); font-weight: 400; }.faq-list details[open] summary:after { content: '−'; }.faq-list details p { max-width: 650px; margin: 14px 0 0; color: #77727a; font-size: 14px; line-height: 1.5; }
.launch-section { padding: 0 0 112px; }.launch-panel { background: var(--ink); color: #f8f5ef; border-radius: 20px; min-height: 480px; padding: 78px 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }.launch-panel .eyebrow, .launch-panel > p { position: relative; z-index: 1; }.launch-panel h2 { position: relative; z-index: 1; font-size: clamp(2.8rem, 5.4vw, 5.5rem); margin-bottom: 17px; }.launch-panel > p:not(.eyebrow) { color: #ada7b0; max-width: 380px; }.launch-panel .button { position: relative; z-index: 1; margin-top: 20px; }.launch-glow { position: absolute; width: 570px; height: 260px; border-radius: 50%; background: radial-gradient(ellipse, rgba(250,96,79,.5), transparent 67%); filter: blur(26px); top: 76px; left: 50%; transform: translateX(-50%); opacity: .75; }.site-footer { padding: 0 0 32px; }.footer-top { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 26px 0; }.footer-top p { margin: 0; color: #86818a; font-size: 13px; }.back-top { font-size: 12px; color: #6f6b73; }.back-top span { color: var(--red-deep); margin-left: 6px; }.footer-bottom { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; color: #aaa6ad; font-size: 11px; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay-1 { transition-delay: .1s; }.reveal-delay-2 { transition-delay: .18s; }
.hero-art.reveal, .pairing-art.reveal { transform: translate3d(0, var(--parallax-y, 0px), 0); }
@media (hover: hover) and (pointer: fine) { .feature-card { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); }.feature-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(16,16,21,.1); } }
@media (max-width: 900px) { .hero, .story, .pairing-inner, .trust-section { grid-template-columns: 1fr; gap: 58px; }.hero { padding-top: 54px; }.hero-copy { max-width: 650px; }.hero-art { padding-left: 18px; }.story { padding: 110px 0 125px; }.pairing-section { padding: 110px 0; }.pairing-copy { max-width: 530px; }.pairing-art { max-width: 620px; width: 100%; }.trust-section { gap: 50px; }.feature-wide, .feature-tall, .feature-dark, .feature-warm { grid-column: span 12; }.feature-tall { min-height: 420px; }.feature-dark { min-height: 320px; }.case-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }.case-art { height: 330px; } }
@media (max-width: 640px) { .section-wrap, .site-header { width: min(calc(100% - 32px), var(--max)); }.site-header { height: 72px; }.menu-toggle { display: block; color: var(--ink); }.site-nav { display: none; position: absolute; top: 66px; right: 0; left: 0; padding: 13px; flex-direction: column; align-items: stretch; gap: 2px; background: rgba(248,247,243,.98); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 15px 35px rgba(16,16,21,.12); }.site-nav.is-open { display: flex; }.site-nav a { padding: 12px; }.site-nav .nav-cta { text-align: center; margin-top: 6px; }.hero { min-height: auto; padding: 63px 0 80px; gap: 42px; }.hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }.hero-lede { font-size: 16px; }.hero-notes { flex-wrap: wrap; gap: 7px; }.hero-notes i:nth-of-type(3) { display: none; }.editor-window { transform: rotate(1.7deg) scale(1.03); transform-origin: right center; }.window-bar { font-size: 8px; }.window-status { display: none; }.editor-body { min-height: 295px; }.editor-sidebar { width: 30px; padding: 16px 8px; gap: 15px; }.editor-main { padding: 18px 12px 14px; }.stage-frame { height: 181px; }.stage-copy { top: 20px; left: 18px; }.stage-copy strong { font-size: 19px; }.stage-phone { right: 25px; height: 125px; width: 68px; }.stage-camera { left: 15px; bottom: 11px; transform: scale(.72); transform-origin: left bottom; }.hero-float-card { right: 2px; bottom: 0; width: 145px; padding: 13px; }.hero-float-card strong { font-size: 14px; }.orbit-one { width: 440px; right: -155px; }.signal-inner { display: block; }.platforms { margin-top: 15px; gap: 17px; flex-wrap: wrap; }.platforms span { font-size: 10px; }.story { padding: 92px 0 102px; }.story h2, .section-heading h2, .pairing-copy h2, .trust-copy h2, .launch-panel h2 { font-size: clamp(2.7rem, 13vw, 4.4rem); }.capture-layout { min-height: 250px; grid-template-columns: 1fr 96px; gap: 10px; padding: 22px 8px; }.capture-board { padding: 14px; }.capture-screen { height: 169px; padding: 18px 14px; }.capture-phone { height: 190px; padding: 12px; border-width: 4px; border-radius: 18px; }.capture-phone-art { height: 69px; }.capture-caption { gap: 7px; font-size: 9px; }.feature-section, .use-cases { padding: 40px 0 110px; }.feature-grid { margin-top: 43px; }.feature-card { padding: 26px; min-height: 410px; }.feature-card h3 { font-size: 25px; }.timeline-visual { left: 26px; right: 26px; bottom: 25px; }.canvas-visual { width: 220px; right: 22px; transform: scale(.92); transform-origin: right bottom; }.project-file { grid-template-columns: 12px 1fr; }.project-file small { grid-column: 2; }.pairing-art { min-height: 310px; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(.8); transform-origin: left center; width: 125%; }.device-ipad { left: 0; }.device-phone { right: 10px; }.line-one { left: 266px; }.line-two { left: 342px; }.pairing-badge { right: 26px; }.case-grid { margin-top: 44px; }.case-art { height: 280px; }.trust-section { padding: 92px 0 110px; }.trust-list { grid-template-columns: 1fr; }.trust-list > div:nth-child(2) { border-top: 1px solid var(--line); padding-top: 19px; }.faq-section { padding: 100px 0 110px; }.faq-list { margin-top: 44px; }.faq-list summary { font-size: 14px; gap: 15px; }.faq-list details p { font-size: 13px; }.launch-panel { min-height: 430px; padding: 55px 24px; }.footer-top { display: grid; gap: 16px; }.footer-top p { order: 3; }.footer-bottom { display: grid; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .scroll-progress { transform: none; opacity: .35; } .reveal { opacity: 1; transform: none; } .hero-art.reveal, .hero-float-card, .pairing-art.reveal { transform: none; } }