:root {
  --bg: #070b16;
  --bg-2: #0b1326;
  --bg-3: #0d1830;
  --ink: #f7f9ff;
  --muted: #9ca9c7;
  --muted-2: #73809d;
  --cyan: #62e6ff;
  --blue: #5577ff;
  --violet: #8b5cff;
  --green: #60ef93;
  --glass: rgba(13, 23, 46, .56);
  --line: rgba(153, 189, 255, .16);
  --line-strong: rgba(153, 189, 255, .28);
  --shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
button, img { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(98, 230, 255, .24); color: #fff; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 999; transform: translateY(-160%); padding: 10px 14px; background: #fff; color: #000; border-radius: 9px; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

/* --- Hero: preserves the original NoteScanner landing interface --- */
.hero-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(63, 103, 244, .16), transparent 31%),
    linear-gradient(145deg, #070b16 0%, #0b1225 45%, #070a14 100%);
}
.hero-shell::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -5;
  background-image:
    linear-gradient(rgba(117, 145, 205, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 145, 205, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  transform: perspective(900px) rotateX(62deg) translateY(26%);
  transform-origin: center center;
  mask-image: radial-gradient(circle, #000 25%, transparent 71%);
  animation: grid-drift 12s linear infinite;
}
.hero-shell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 110px;
  z-index: 18;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.ambient { position: absolute; width: min(48vw, 720px); aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .28; z-index: -3; mix-blend-mode: screen; }
.ambient-a { background: #2755ff; left: -19vw; top: -18vh; animation: blob-a 13s ease-in-out infinite alternate; }
.ambient-b { background: #7b3cff; right: -20vw; bottom: -22vh; animation: blob-b 16s ease-in-out infinite alternate; }
.ambient-c { background: #16c7d9; left: 48%; top: 56%; width: min(24vw, 380px); opacity: .13; animation: blob-c 11s ease-in-out infinite alternate; }

.brand-lockup { position: absolute; z-index: 22; top: clamp(22px, 4.2vh, 52px); left: 50%; transform: translateX(-50%); width: min(92vw, 700px); pointer-events: none; }
.brand-mark-wrap { display: inline-grid; place-items: center; width: clamp(48px, 5vw, 68px); aspect-ratio: 1; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 16px 50px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(15px); }
.brand-mark { width: 76%; height: 76%; object-fit: contain; border-radius: 14px; }
.brand-lockup h1 { margin: 9px 0 1px; font-size: clamp(22px, 3vw, 38px); font-weight: 760; letter-spacing: -.035em; }
.brand-lockup p { margin: 0; color: var(--muted); font-size: clamp(11px, 1.2vw, 15px); letter-spacing: .08em; text-transform: uppercase; }

.motion-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: min(64vw, 900px); aspect-ratio: 1; animation: orbit-spin 30s linear infinite; }
.orbit-two { width: min(44vw, 630px); aspect-ratio: 1; border-style: dashed; opacity: .65; animation: orbit-spin-reverse 22s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(98,230,255,.9); }
.orbit::before { top: -4px; left: 50%; }
.orbit::after { bottom: 12%; left: 8%; background: #9c77ff; box-shadow: 0 0 18px rgba(156,119,255,.9); }
.scanner-frame { position: absolute; left: 50%; top: 50%; width: clamp(205px, 23vw, 320px); aspect-ratio: .77; transform: translate(-50%, -50%); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(157, 196, 255, .14); box-shadow: 0 30px 90px rgba(0,0,0,.32), inset 0 0 50px rgba(94,134,255,.04); backdrop-filter: blur(12px); opacity: .78; }
.corner { position: absolute; width: 29px; height: 29px; border-color: rgba(100, 226, 255, .75); border-style: solid; }
.c1 { top: 14px; left: 14px; border-width: 2px 0 0 2px; border-radius: 9px 0 0 0; }.c2 { top: 14px; right: 14px; border-width: 2px 2px 0 0; border-radius: 0 9px 0 0; }.c3 { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; border-radius: 0 0 0 9px; }.c4 { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; border-radius: 0 0 9px 0; }
.paper-lines { position: absolute; inset: 23% 17%; opacity: .45; }.paper-lines i { display: block; height: 5px; margin: 14px 0; border-radius: 99px; background: linear-gradient(90deg, rgba(215,230,255,.65), rgba(215,230,255,.08)); }.paper-lines i:nth-child(2){width:78%}.paper-lines i:nth-child(3){width:92%}.paper-lines i:nth-child(4){width:67%}.paper-lines i:nth-child(5){width:82%}
.scan-beam { position: absolute; left: 8%; right: 8%; height: 2px; top: 18%; background: linear-gradient(90deg, transparent, #76ecff 15%, #76ecff 85%, transparent); box-shadow: 0 0 9px #65e9ff, 0 0 26px rgba(58,204,255,.8), 0 11px 28px rgba(64,190,255,.16); animation: scan 3.2s cubic-bezier(.55,.08,.45,.94) infinite; }
.phone-card { position: absolute; width: clamp(90px, 10.4vw, 155px); aspect-ratio: .45; margin: 0; border-radius: clamp(12px, 1.6vw, 23px); overflow: hidden; background: #11182b; border: 1px solid rgba(255,255,255,.17); box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12); opacity: .54; filter: saturate(.82) brightness(.85); will-change: transform; }
.phone-card::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.14), transparent 35%); pointer-events:none; }.phone-card img { width: 100%; height: 100%; object-fit: cover; }.card-a { left: 7vw; top: 23vh; transform: rotate(-10deg); animation: float-a 8s ease-in-out infinite; }.card-b { right: 7vw; top: 19vh; transform: rotate(9deg); animation: float-b 9s ease-in-out infinite; }.card-c { left: 14vw; bottom: -10vh; transform: rotate(8deg); animation: float-c 10s ease-in-out infinite; }.card-d { right: 15vw; bottom: -12vh; transform: rotate(-7deg); animation: float-d 8.6s ease-in-out infinite; }
.center-cta { position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 11px; }
.play-badge { display: inline-flex; align-items: center; gap: 13px; min-width: 218px; height: 68px; padding: 7px 20px 7px 15px; border: 1px solid rgba(255,255,255,.72); border-radius: 12px; background: linear-gradient(180deg, #161616, #050505); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.025); cursor: pointer; user-select: none; text-decoration: none; transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.play-badge:hover, .play-badge:focus-visible { border-color: #fff; box-shadow: 0 18px 46px rgba(0,0,0,.48), 0 0 0 8px rgba(98,230,255,.045); outline: none; transform: translateY(-1px); }
.play-icon { width: 39px; height: 39px; flex: 0 0 auto; display: block; }.play-icon svg { width: 100%; height: 100%; display: block; }.play-copy { text-align: left; line-height: 1; display: flex; flex-direction: column; gap: 4px; }.play-copy small { font-size: 10px; font-weight: 500; letter-spacing: .08em; }.play-copy strong { font-size: 23px; font-weight: 520; letter-spacing: -.035em; white-space: nowrap; }.coming-soon { color: rgba(214,224,246,.63); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.qr-download { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 3px; color: rgba(214,224,246,.72); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .92; }
.qr-download img { width: 84px; height: 84px; padding: 6px; border: 1px solid rgba(136,224,255,.45); border-radius: 8px; background: #fff; box-shadow: 0 0 0 5px rgba(98,230,255,.035), 0 8px 25px rgba(0,0,0,.28); transition: transform .25s ease, box-shadow .25s ease; }
.qr-download:hover img, .qr-download:focus-visible img { transform: scale(1.04); box-shadow: 0 0 0 7px rgba(98,230,255,.08), 0 10px 30px rgba(0,0,0,.34); }
.qr-download:focus-visible { outline: none; color: #fff; }
.feature-strip { position: absolute; z-index: 11; bottom: max(32px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(199,211,238,.58); font-size: clamp(9px, 1vw, 12px); text-transform: uppercase; letter-spacing: .15em; }.feature-strip b { width: 3px; height: 3px; border-radius: 50%; background: rgba(99,226,255,.8); }
.particle-field { position:absolute; inset:0; z-index:-1; pointer-events:none; }.particle-field span { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius:50%; background: rgba(150,205,255,.65); box-shadow: 0 0 13px rgba(95,183,255,.7); animation: particle 7s ease-in-out var(--d) infinite; }
.scroll-cue { position: absolute; z-index: 25; left: 50%; bottom: 72px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: rgba(219,229,250,.55); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .82; }.scroll-cue span { width: 21px; height: 34px; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; position: relative; }.scroll-cue span::after { content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:99px; background:var(--cyan); transform:translateX(-50%); animation:scroll-drop 1.7s ease-in-out infinite; }

/* --- Shared section language --- */
.section-shell { position: relative; padding: clamp(86px, 10vw, 150px) 0; overflow: hidden; }
.section-shell::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(114,145,205,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(114,145,205,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: var(--cyan); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .17em; }.eyebrow::before { content:""; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: 0 0 10px rgba(98,230,255,.5); }
.section-heading { max-width: 800px; margin-bottom: clamp(42px, 6vw, 72px); }.section-heading h2, .experience-copy h2, .closing-card h2 { margin: 0; font-size: clamp(38px, 5.2vw, 72px); line-height: .98; letter-spacing: -.055em; font-weight: 760; }.section-heading h2 span, .experience-copy h2 span, .closing-card h2 span { background: linear-gradient(95deg, #fff 0%, #a9efff 36%, #93a7ff 72%, #c0a8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }.section-heading p { max-width: 680px; margin: 24px 0 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; }
.reveal-up { opacity: 0; transform: translateY(26px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* --- Feature slideshow --- */
.story-section { background: radial-gradient(circle at 90% 20%, rgba(92,91,255,.12), transparent 30%), linear-gradient(180deg, var(--bg), #091022 70%, #08101f); }
.section-glow { position:absolute; border-radius:50%; filter:blur(100px); opacity:.16; }.section-glow-a { width:440px; height:440px; background:#12bce0; left:-180px; top:34%; }
.feature-showcase { display:grid; grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr); align-items:stretch; gap: clamp(26px, 4vw, 64px); }
.feature-visual-wrap { position:relative; display:grid; place-items:center; min-height: 650px; }.visual-halo { position:absolute; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(95,214,255,.14), rgba(89,90,255,.09) 45%, transparent 70%); filter:blur(16px); animation:halo-breathe 6s ease-in-out infinite; }
.feature-visual-frame { position:relative; width:min(100%, 560px); height:650px; border-radius:38px; overflow:hidden; background:#0c1324; border:1px solid rgba(255,255,255,.13); box-shadow:0 45px 100px rgba(0,0,0,.46), 0 0 0 8px rgba(255,255,255,.018); transform:perspective(1200px) rotateY(4deg) rotateX(1deg); isolation:isolate; }
.feature-visual-frame::before { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; background:linear-gradient(120deg, rgba(255,255,255,.12), transparent 21%, transparent 70%, rgba(81,160,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.feature-slides, .feature-slide { position:absolute; inset:0; }.feature-slide { opacity:0; transform:scale(1.045); transition:opacity .8s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }.feature-slide.is-active { opacity:1; transform:scale(1); z-index:2; }.feature-slide img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.02) contrast(1.02); }.feature-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,7,15,.02), rgba(4,8,17,.02) 52%, rgba(4,8,17,.48)); }
.slide-light { position:absolute; z-index:6; width:170px; height:150%; top:-25%; left:-35%; transform:rotate(12deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation:glass-sweep 5.5s ease-in-out infinite; pointer-events:none; }.slide-status { position:absolute; z-index:8; left:22px; right:22px; bottom:20px; display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.76); text-transform:uppercase; letter-spacing:.13em; font-size:9px; }.slide-status i { flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.48), rgba(255,255,255,.08)); }
.feature-copy-panel { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:650px; padding:clamp(22px,3vw,44px); border-radius:36px; background:linear-gradient(145deg, rgba(18,30,56,.78), rgba(11,18,36,.48)); border:1px solid rgba(255,255,255,.09); box-shadow:var(--shadow); backdrop-filter:blur(18px); overflow:hidden; }.feature-copy-panel::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(81,117,255,.12); filter:blur(70px); right:-130px; top:-100px; }
.feature-copy { display:none; position:relative; z-index:2; animation:copy-in .65s cubic-bezier(.2,.7,.2,1) both; }.feature-copy.is-active { display:block; }.feature-number { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:16px; margin-bottom:30px; color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.08em; background:rgba(98,230,255,.07); border:1px solid rgba(98,230,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }.feature-copy h3 { margin:0; max-width:590px; font-size:clamp(31px,3.6vw,51px); line-height:1.04; letter-spacing:-.045em; font-weight:730; }.feature-copy p { margin:23px 0 0; max-width:590px; color:var(--muted); font-size:16px; line-height:1.75; }.feature-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }.feature-pills span { padding:8px 12px; border:1px solid rgba(151,187,255,.16); border-radius:999px; color:#c6d2ec; background:rgba(255,255,255,.035); font-size:11px; letter-spacing:.03em; }
.slider-controls { position:relative; z-index:2; display:flex; align-items:center; gap:15px; margin-top:54px; }.slider-arrow { width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; font-size:17px; transition:.25s ease; }.slider-arrow:hover { background:rgba(98,230,255,.09); border-color:rgba(98,230,255,.28); transform:translateY(-1px); }.slider-dots { display:flex; gap:8px; align-items:center; }.slider-dots button { width:8px; height:8px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.22); transition:.3s ease; }.slider-dots button.is-active { width:31px; background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 0 18px rgba(98,230,255,.3); }.slider-progress { position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.06); }.slider-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet)); animation:progress-fill 5.6s linear infinite; }
.micro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }.micro-grid article { display:flex; align-items:center; gap:15px; min-height:96px; padding:19px 22px; border-radius:24px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); }.micro-icon { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:14px; color:var(--cyan); background:rgba(98,230,255,.07); border:1px solid rgba(98,230,255,.16); font-size:18px; }.micro-grid strong,.micro-grid small { display:block; }.micro-grid strong { font-size:14px; margin-bottom:4px; }.micro-grid small { color:var(--muted-2); font-size:12px; line-height:1.45; }

/* --- Experience image section --- */
.experience-section { background:linear-gradient(180deg,#08101f,#08101e 45%,#070d1a); padding-top:20px; }.experience-card { display:grid; grid-template-columns:.9fr 1.1fr; min-height:650px; overflow:hidden; border-radius:42px; background:linear-gradient(135deg,rgba(15,26,49,.9),rgba(8,15,31,.92)); border:1px solid rgba(255,255,255,.09); box-shadow:0 50px 120px rgba(0,0,0,.4); }.experience-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(42px,6vw,84px); position:relative; z-index:2; }.experience-copy h2 { font-size:clamp(36px,4.6vw,64px); }.experience-copy p { margin:24px 0 0; color:var(--muted); font-size:16px; line-height:1.75; }.experience-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; }.experience-stats div { padding:18px 12px; border-top:1px solid rgba(255,255,255,.11); }.experience-stats strong { display:block; font-size:28px; letter-spacing:-.04em; color:#e8f7ff; }.experience-stats span { display:block; margin-top:5px; color:var(--muted-2); font-size:10px; text-transform:uppercase; letter-spacing:.09em; line-height:1.35; }
.experience-visual { position:relative; min-height:650px; overflow:hidden; background:#0b1020; }.experience-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0d172c 0%,transparent 25%,transparent 75%,rgba(7,11,22,.12)), linear-gradient(180deg,transparent 66%,rgba(5,10,20,.45)); pointer-events:none; }.experience-visual img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.03) contrast(1.02); transform:scale(1.015); }.floating-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:15px; background:rgba(9,16,31,.72); border:1px solid rgba(255,255,255,.13); color:#eaf2ff; font-size:11px; box-shadow:0 18px 45px rgba(0,0,0,.3); backdrop-filter:blur(14px); animation:chip-float 5s ease-in-out infinite; }.floating-chip span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; color:var(--cyan); background:rgba(98,230,255,.09); }.chip-one { top:18%; left:8%; }.chip-two { top:44%; right:7%; animation-delay:-1.4s; }.chip-three { bottom:12%; left:13%; animation-delay:-2.6s; }

/* --- Comparison --- */
.comparison-section { background:radial-gradient(circle at 50% 20%, rgba(80,118,255,.12), transparent 32%), linear-gradient(180deg,#070d1a,#080e1b 55%,#070b16); padding-bottom:clamp(110px,12vw,170px); }.comparison-orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.13; }.comparison-orb-a { width:420px; height:420px; background:#455dff; right:-180px; top:25%; }.comparison-orb-b { width:360px; height:360px; background:#16d5e5; left:-180px; bottom:10%; }.comparison-heading { margin-left:auto; margin-right:auto; }.comparison-heading .eyebrow::before { display:none; }.comparison-heading h2 span { color:#b5f4ff; background:none; -webkit-text-fill-color:initial; }
.comparison-card { border-radius:32px; overflow:hidden; background:rgba(11,19,36,.72); border:1px solid rgba(255,255,255,.09); box-shadow:0 38px 100px rgba(0,0,0,.38); backdrop-filter:blur(18px); }.table-responsive { scrollbar-color:rgba(98,230,255,.3) transparent; }.comparison-table { width:100%; min-width:900px; border-collapse:separate; border-spacing:0; color:#edf3ff; }.comparison-table th,.comparison-table td { padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.075); border-right:1px solid rgba(255,255,255,.06); text-align:center; vertical-align:middle; }.comparison-table thead th { position:relative; padding-top:25px; padding-bottom:25px; background:rgba(255,255,255,.025); color:#b8c4dd; font-size:12px; font-weight:700; letter-spacing:.02em; }.comparison-table thead th:first-child,.comparison-table tbody th { text-align:left; }.comparison-table thead th:first-child { min-width:255px; padding-left:28px; }.comparison-table tbody th { padding-left:28px; color:#dce6f8; font-size:13px; font-weight:600; }.comparison-table td { color:#aab6cf; font-size:13px; }.comparison-table tr:last-child th,.comparison-table tr:last-child td { border-bottom:0; }.comparison-table th:last-child,.comparison-table td:last-child { border-right:0; }
.comparison-table .our-col { background:linear-gradient(180deg,rgba(80,226,144,.075),rgba(80,226,144,.035)); border-left:1px solid rgba(96,239,147,.25); border-right:1px solid rgba(96,239,147,.25); }.comparison-table thead .our-col { box-shadow:inset 0 2px 0 rgba(96,239,147,.75); }.comparison-table tbody tr:last-child .our-col { box-shadow:inset 0 -2px 0 rgba(96,239,147,.5); }.comparison-table .differentiator .our-col { background:linear-gradient(90deg,rgba(83,238,142,.13),rgba(68,193,135,.065)); }.mini-brand { display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#dfffea; }.mini-brand img { width:25px; height:25px; border-radius:7px; }.status { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; font-size:15px; font-weight:900; line-height:1; }.status.yes { color:#8bffae; background:rgba(63,215,116,.09); box-shadow:0 0 18px rgba(63,215,116,.08); }.status.partial { color:#ffc251; background:rgba(255,184,50,.08); }.status.no { color:#ff6578; background:rgba(255,80,100,.07); }
.comparison-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 24px; border-top:1px solid rgba(255,255,255,.05); color:var(--muted-2); background:rgba(5,10,20,.22); }.legend { display:flex; flex-wrap:wrap; gap:16px; }.legend span { display:flex; align-items:center; gap:6px; font-size:10px; }.legend i { font-style:normal; font-weight:900; }.yes-dot{color:#78f99c}.partial-dot{color:#ffbf49}.no-dot{color:#ff6578}.comparison-footer small { max-width:430px; text-align:right; font-size:9px; line-height:1.5; }

/* --- Closing CTA + footer --- */
.closing-section { background:linear-gradient(180deg,#070b16,#08101e); padding-top:80px; padding-bottom:100px; }.closing-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(115,148,208,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(115,148,208,.04) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at center,#000 10%,transparent 72%); }.closing-card { position:relative; padding:clamp(50px,7vw,95px) 20px; border-radius:42px; background:radial-gradient(circle at 50% 35%,rgba(76,111,255,.12),transparent 35%),linear-gradient(145deg,rgba(15,27,52,.78),rgba(8,14,29,.72)); border:1px solid rgba(255,255,255,.09); box-shadow:0 40px 110px rgba(0,0,0,.36); }.closing-logo { width:64px; height:64px; object-fit:contain; border-radius:18px; margin-bottom:22px; filter:drop-shadow(0 13px 25px rgba(0,0,0,.3)); }.closing-card .eyebrow { display:flex; width:max-content; margin-left:auto; margin-right:auto; }.closing-card h2 { font-size:clamp(40px,5vw,69px); }.closing-card p { max-width:620px; margin:22px auto 30px; color:var(--muted); font-size:15px; line-height:1.7; }.closing-badge { margin:0 auto; }.closing-card .coming-soon { display:block; margin-top:14px; }
.site-footer { border-top:1px solid rgba(255,255,255,.065); background:#060a13; }.footer-inner { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:25px; }.footer-brand { display:flex; align-items:center; gap:11px; }.footer-brand img { width:39px; height:39px; border-radius:11px; }.footer-brand strong,.footer-brand small { display:block; }.footer-brand strong { font-size:15px; }.footer-brand small,.site-footer>*>small { color:var(--muted-2); font-size:10px; margin-top:2px; }.site-footer nav { display:flex; gap:20px; }.site-footer nav a { color:#9ba8c1; font-size:11px; text-decoration:none; transition:.2s ease; }.site-footer nav a:hover { color:var(--cyan); }

@keyframes scan { 0%,100%{top:18%;opacity:.3} 10%,90%{opacity:1} 50%{top:82%} }
@keyframes orbit-spin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes orbit-spin-reverse { to{transform:translate(-50%,-50%) rotate(-360deg)} }
@keyframes grid-drift { to{background-position:58px 58px,58px 58px} }
@keyframes blob-a { to{transform:translate(17vw,12vh) scale(1.12)} }
@keyframes blob-b { to{transform:translate(-15vw,-10vh) scale(.92)} }
@keyframes blob-c { to{transform:translate(-10vw,-12vh) scale(1.25)} }
@keyframes float-a { 0%,100%{transform:translate3d(0,0,0) rotate(-10deg)}50%{transform:translate3d(16px,-22px,0) rotate(-6deg)} }
@keyframes float-b { 0%,100%{transform:translate3d(0,0,0) rotate(9deg)}50%{transform:translate3d(-18px,18px,0) rotate(5deg)} }
@keyframes float-c { 0%,100%{transform:translate3d(0,0,0) rotate(8deg)}50%{transform:translate3d(18px,-20px,0) rotate(12deg)} }
@keyframes float-d { 0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(-15px,-25px,0) rotate(-11deg)} }
@keyframes particle { 0%,100%{transform:translateY(0) scale(.8);opacity:.18}50%{transform:translateY(-28px) scale(1.15);opacity:.8} }
@keyframes scroll-drop { 0%{transform:translate(-50%,0);opacity:.2}45%{opacity:1}100%{transform:translate(-50%,12px);opacity:0} }
@keyframes halo-breathe { 0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.08);opacity:.95} }
@keyframes glass-sweep { 0%,55%{left:-45%;opacity:0}70%{opacity:1}100%{left:120%;opacity:0} }
@keyframes copy-in { from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)} }
@keyframes progress-fill { from{width:0}to{width:100%} }
@keyframes chip-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }

@media (max-width: 991.98px) {
  .feature-showcase { grid-template-columns:1fr; }.feature-visual-wrap { min-height:auto; }.feature-visual-frame { height:min(72vh,650px); width:min(100%,520px); transform:none; }.feature-copy-panel { min-height:480px; }.experience-card { grid-template-columns:1fr; }.experience-visual { min-height:560px; }.micro-grid { grid-template-columns:1fr; }.comparison-footer { align-items:flex-start; flex-direction:column; }.comparison-footer small { text-align:left; }
}
@media (max-width: 720px) {
  .brand-lockup { top:max(16px,env(safe-area-inset-top)); }.brand-mark-wrap { width:48px;border-radius:15px }.brand-lockup h1{margin-top:6px}.brand-lockup p{font-size:9px}.scanner-frame{width:min(50vw,228px)}.orbit-one{width:120vw}.orbit-two{width:84vw}.phone-card{width:94px;opacity:.37}.card-a{left:-34px;top:27vh}.card-b{right:-34px;top:23vh}.card-c{left:-6px;bottom:-8vh}.card-d{right:-8px;bottom:-10vh}.play-badge{min-width:205px;height:64px;padding-right:17px}.play-icon{width:36px;height:36px}.play-copy strong{font-size:21px}.feature-strip{gap:7px;max-width:94vw;overflow:hidden;font-size:8px}.scroll-cue{display:none}
  .section-shell { padding:78px 0; }.section-heading { margin-bottom:38px; }.feature-visual-frame { height:565px; border-radius:28px; }.feature-copy-panel { padding:28px 22px; min-height:440px; border-radius:28px; }.feature-copy h3 { font-size:33px; }.feature-copy p { font-size:14px; }.slider-controls { margin-top:38px; }.experience-card { border-radius:30px; }.experience-copy { padding:44px 26px; }.experience-stats { gap:5px; }.experience-stats div { padding:15px 5px; }.experience-visual { min-height:480px; }.floating-chip { font-size:9px; padding:9px 10px; }.comparison-card { margin-left:-4px; margin-right:-4px; border-radius:24px; }.comparison-table th,.comparison-table td { padding:17px 14px; }.comparison-table thead th:first-child,.comparison-table tbody th { padding-left:18px; }.closing-card { border-radius:30px; }.footer-inner { padding-top:28px; padding-bottom:28px; flex-direction:column; text-align:center; }.site-footer nav { order:3; }
}
@media (max-height:620px) {
  .brand-lockup{top:10px}.brand-mark-wrap{width:40px}.brand-lockup h1{font-size:20px;margin-top:4px}.brand-lockup p{display:none}.scanner-frame{height:48vh;width:auto}.phone-card{opacity:.28}.feature-strip{bottom:9px}.scroll-cue{display:none}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }.reveal-up { opacity:1; transform:none; transition:none; }
}

/* --- Actual NoteScanner interface showcase: crisp, unmodified app UI only --- */
html { scroll-behavior: smooth; }
.app-interface-frame {
  transform: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(43, 215, 188, .09), transparent 46%),
    #05080e;
  display: grid;
  place-items: center;
  padding: 0;
}
.app-interface-frame::before { background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 24%, transparent 78%, rgba(91,213,255,.035)); }
.feature-slide {
  display: grid;
  place-items: center;
  padding: 28px 34px 50px;
  transform: translate3d(0, 14px, 0);
  transition: opacity .72s ease, transform .86s cubic-bezier(.2,.7,.2,1);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.feature-slide.is-active { transform: translate3d(0,0,0); }
.feature-slide img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.08);
}
.feature-slide::after { display:none; }
.slide-light { opacity:.22; mix-blend-mode:screen; pointer-events:none; }
.slide-status { background:rgba(4,8,15,.82); backdrop-filter:blur(12px); }

.real-interface-collage {
  min-height: 650px;
  background:
    radial-gradient(circle at 58% 45%, rgba(22,211,176,.11), transparent 31%),
    radial-gradient(circle at 78% 22%, rgba(75,112,255,.14), transparent 28%),
    #080d18;
  isolation:isolate;
}
.real-interface-collage::after { background:linear-gradient(90deg, rgba(8,13,24,.88), transparent 23%, transparent 78%, rgba(8,13,24,.28)); }
.interface-card {
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:28px;
  background:#090c12;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 34px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  transform-origin:center;
}
.interface-card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  filter:none;
  transform:none;
  image-rendering:auto;
}
.interface-card-a { width:39%; height:76%; left:8%; top:12%; transform:rotate(-7deg); z-index:1; }
.interface-card-b { width:43%; height:84%; left:31%; top:7%; transform:rotate(1.5deg); z-index:3; }
.interface-card-c { width:37%; height:72%; right:3%; top:15%; transform:rotate(7deg); z-index:2; }

@media (max-width: 991.98px) {
  .feature-slide { padding:22px 26px 48px; }
  .real-interface-collage { min-height:580px; }
}
@media (max-width: 720px) {
  .feature-slide { padding:18px 20px 44px; }
  .feature-slide img { border-radius:16px; }
  .real-interface-collage { min-height:500px; }
  .interface-card-a { width:45%; height:73%; left:1%; top:14%; }
  .interface-card-b { width:49%; height:82%; left:26%; top:8%; }
  .interface-card-c { width:42%; height:69%; right:-5%; top:17%; }
}
.closing-card h2 + .closing-badge { margin-top: 30px; }


/* --- section-by-section auto-tour and morph-like focus transitions --- */
main {
  scroll-snap-type: y mandatory;
}
main > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero-shell,
.section-shell {
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease;
  opacity: .82;
  transform: scale(.984);
  filter: saturate(.92);
  will-change: opacity, transform, filter;
}
.hero-shell.in-focus,
.section-shell.in-focus {
  opacity: 1;
  transform: scale(1);
  filter: none;
}
body.auto-tour-active {
  overscroll-behavior-y: contain;
}
body.auto-tour-active main {
  scroll-snap-type: none;
}
.feature-visual-frame {
  overflow:hidden;
}
.feature-slide img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.feature-copy-panel {
  align-self:center;
}
.experience-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (max-width: 991.98px) {
  main { scroll-snap-type:y proximity; }
  .hero-shell,
  .section-shell { opacity:1; transform:none; filter:none; }
}


/* --- 2x ratio-matched empathetic ad artwork: no cropping at any breakpoint --- */
.feature-visual-frame {
  width: min(100%, 560px) !important;
  aspect-ratio: 56 / 65;
  height: auto !important;
}
.feature-slide {
  padding: 0 !important;
}
.feature-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateZ(0);
  image-rendering: auto;
}
.experience-visual {
  background: radial-gradient(circle at 50% 42%, rgba(28,210,178,.09), transparent 42%), #071019;
}
.experience-visual img {
  object-fit: contain !important;
  transform: none !important;
  padding: 20px;
}
@media (max-width: 991.98px) {
  .feature-visual-frame {
    width: min(100%, 520px) !important;
    aspect-ratio: 56 / 65;
    height: auto !important;
  }
}
@media (max-width: 720px) {
  .feature-visual-frame {
    width: min(100%, 460px) !important;
    aspect-ratio: 56 / 65;
    height: auto !important;
  }
  .experience-visual img { padding: 10px; }
}


/* === Motion upgrade: richer hero + morphing scroll zoom === */
.hero-shell,
.section-shell {
  --scroll-focus: 1;
  --scroll-scale: 1;
  --scroll-blur: 0px;
  --scroll-radius: 0px;
  opacity: calc(.48 + (var(--scroll-focus) * .52));
  transform: scale(var(--scroll-scale));
  filter: blur(var(--scroll-blur)) saturate(calc(.86 + (var(--scroll-focus) * .14)));
  border-radius: var(--scroll-radius);
  transform-origin: center center;
  transition: none !important;
  will-change: transform, filter, opacity, border-radius;
}
.hero-shell.in-focus,
.section-shell.in-focus {
  opacity: calc(.48 + (var(--scroll-focus) * .52));
  transform: scale(var(--scroll-scale));
  filter: blur(var(--scroll-blur)) saturate(calc(.86 + (var(--scroll-focus) * .14)));
}

/* More kinetic first window without changing its layout. */
.hero-shell {
  background:
    radial-gradient(circle at 50% 48%, rgba(63,103,244,.21), transparent 30%),
    radial-gradient(circle at 50% 70%, rgba(22,199,217,.08), transparent 36%),
    linear-gradient(145deg,#070b16 0%,#0b1225 45%,#070a14 100%);
}
.motion-stage::before,
.motion-stage::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(68vw,960px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:screen;
}
.motion-stage::before {
  background:conic-gradient(from 0deg, transparent 0 15%, rgba(98,230,255,.24) 21%, transparent 29% 52%, rgba(139,92,255,.22) 59%, transparent 68% 100%);
  mask-image:radial-gradient(circle, transparent 0 39%, #000 40% 41%, transparent 42% 48%, #000 49% 50%, transparent 51%);
  animation:hero-radar 18s linear infinite;
}
.motion-stage::after {
  width:min(46vw,650px);
  background:radial-gradient(circle, rgba(98,230,255,.14), transparent 55%);
  filter:blur(25px);
  animation:hero-core-breathe 4.4s ease-in-out infinite;
}
.hero-energy {
  position:absolute;
  left:50%; top:50%;
  border:1px solid rgba(98,230,255,.13);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
  box-shadow:0 0 40px rgba(98,230,255,.06);
  animation:energy-wave 5.8s ease-out infinite;
}
.energy-one{width:min(34vw,500px);aspect-ratio:1;animation-delay:0s}
.energy-two{width:min(45vw,660px);aspect-ratio:1;animation-delay:1.9s;border-color:rgba(126,111,255,.14)}
.energy-three{width:min(56vw,820px);aspect-ratio:1;animation-delay:3.8s;border-color:rgba(96,239,147,.10)}
.scanner-frame {
  animation:scanner-live 5.2s ease-in-out infinite;
  box-shadow:0 30px 90px rgba(0,0,0,.32), inset 0 0 50px rgba(94,134,255,.04), 0 0 55px rgba(98,230,255,.05);
}
.scanner-frame::before {
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:34px;
  border:1px solid rgba(98,230,255,.11);
  opacity:.4;
  animation:scanner-ring 3.2s ease-in-out infinite;
}
.brand-mark-wrap { animation:brand-icon-live 4.2s ease-in-out infinite; }
.brand-lockup h1 {
  background:linear-gradient(90deg,#fff 0%,#fff 36%,#9cf1ff 50%,#fff 64%,#fff 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:brand-shimmer 6s ease-in-out infinite;
}
.center-cta::before {
  content:"";
  position:absolute;
  left:50%; top:34px;
  width:270px; height:100px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(98,230,255,.12), transparent 67%);
  filter:blur(8px);
  opacity:.65;
  animation:cta-halo 3.6s ease-in-out infinite;
  z-index:-1;
}
.play-badge { animation:cta-float 4s ease-in-out infinite; }
.qr-download { animation:qr-float 4.8s ease-in-out infinite; }
.phone-card { transition:filter .35s ease, opacity .35s ease; }
.card-a { animation:float-a-boost 6.8s ease-in-out infinite; }
.card-b { animation:float-b-boost 7.4s ease-in-out infinite; }
.card-c { animation:float-c-boost 8.1s ease-in-out infinite; }
.card-d { animation:float-d-boost 7.1s ease-in-out infinite; }
.particle-field span { animation-duration:5.8s; }
.scroll-cue { animation:cue-breathe 2.2s ease-in-out infinite; }

/* Morph veil appears briefly during guided transitions. */
.morph-veil {
  position:fixed;
  z-index:95;
  left:50%; top:50%;
  width:24vmax; height:24vmax;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.25);
  background:radial-gradient(circle, rgba(54,120,255,.13) 0%, rgba(98,230,255,.06) 35%, rgba(7,11,22,0) 72%);
  backdrop-filter:blur(0px);
  transition:opacity .32s ease;
  mix-blend-mode:screen;
}
.morph-veil.is-running { opacity:.9; animation:morph-veil-pulse var(--morph-duration, 1.2s) cubic-bezier(.2,.72,.18,1) both; }

@keyframes hero-radar { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes hero-core-breathe { 0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.12}50%{transform:translate(-50%,-50%) scale(1.12);opacity:.28} }
@keyframes energy-wave { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}18%{opacity:.34}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)} }
@keyframes scanner-live { 0%,100%{transform:translate(-50%,-50%) perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)} 35%{transform:translate(-50%,-51%) perspective(800px) rotateX(1.2deg) rotateY(-1.7deg) scale(1.018)} 70%{transform:translate(-50%,-49%) perspective(800px) rotateX(-1deg) rotateY(1.4deg) scale(.995)} }
@keyframes scanner-ring { 0%,100%{transform:scale(.96);opacity:.16}50%{transform:scale(1.035);opacity:.5} }
@keyframes brand-icon-live { 0%,100%{transform:translateY(0) scale(1);box-shadow:0 16px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}50%{transform:translateY(-4px) scale(1.035);box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 36px rgba(98,230,255,.1),inset 0 1px 0 rgba(255,255,255,.12)} }
@keyframes brand-shimmer { 0%,20%{background-position:110% 0}58%,100%{background-position:-110% 0} }
@keyframes cta-halo { 0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.35}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.72} }
@keyframes cta-float { 0%,100%{translate:0 0}50%{translate:0 -4px} }
@keyframes qr-float { 0%,100%{translate:0 0}50%{translate:0 -3px} }
@keyframes float-a-boost { 0%,100%{transform:translate3d(0,0,0) rotate(-10deg) scale(1)}50%{transform:translate3d(16px,-20px,0) rotate(-6deg) scale(1.04)} }
@keyframes float-b-boost { 0%,100%{transform:translate3d(0,0,0) rotate(9deg) scale(1)}50%{transform:translate3d(-18px,15px,0) rotate(5deg) scale(1.035)} }
@keyframes float-c-boost { 0%,100%{transform:translate3d(0,0,0) rotate(8deg) scale(1)}50%{transform:translate3d(22px,-18px,0) rotate(11deg) scale(1.035)} }
@keyframes float-d-boost { 0%,100%{transform:translate3d(0,0,0) rotate(-7deg) scale(1)}50%{transform:translate3d(-20px,-15px,0) rotate(-11deg) scale(1.04)} }
@keyframes cue-breathe { 0%,100%{opacity:.45;transform:translateX(-50%) translateY(0)}50%{opacity:.95;transform:translateX(-50%) translateY(5px)} }
@keyframes morph-veil-pulse { 0%{transform:translate(-50%,-50%) scale(.2);filter:blur(0);opacity:0}28%{opacity:.75}55%{filter:blur(5px);opacity:.6}100%{transform:translate(-50%,-50%) scale(6);filter:blur(12px);opacity:0} }

@media (max-width:991.98px) {
  .hero-shell,.section-shell {
    opacity:calc(.58 + (var(--scroll-focus) * .42));
    transform:scale(var(--scroll-scale));
    filter:blur(var(--scroll-blur));
  }
  .motion-stage::before { width:120vw; }
  .hero-energy { opacity:.7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shell,.section-shell { --scroll-focus:1 !important; --scroll-scale:1 !important; --scroll-blur:0px !important; --scroll-radius:0px !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .morph-veil { display:none !important; }
}


/* === Cover + smooth window transition refinement === */
.hero-shell,
.section-shell {
  --window-scale: 1;
  --window-opacity: 1;
  --window-shift: 0px;
  --window-glow: 1;
  transform: translate3d(0, var(--window-shift), 0) scale(var(--window-scale)) !important;
  opacity: var(--window-opacity) !important;
  filter: none !important;
  border-radius: 0 !important;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  contain: paint;
}
.hero-shell::after,
.section-shell::after {
  filter: none !important;
}
.morph-veil { display:none !important; }
body.section-morphing main { pointer-events:none; }

/* Richer cover content, still built only from supported NoteScanner capabilities. */
.hero-cover-copy {
  position:absolute;
  z-index:6;
  left:clamp(28px,6vw,92px);
  top:50%;
  width:min(330px,28vw);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:9px;
  pointer-events:none;
  text-align:left;
}
.hero-cover-copy .hero-kicker {
  color:#79f1db;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-cover-copy strong {
  color:#f5f8ff;
  font-size:clamp(24px,3vw,46px);
  line-height:.98;
  letter-spacing:-.055em;
  text-shadow:0 16px 46px rgba(0,0,0,.32);
}
.hero-cover-copy small {
  color:#9eabc4;
  font-size:clamp(11px,1vw,14px);
  line-height:1.65;
  max-width:290px;
}
.hero-capabilities {
  position:absolute;
  z-index:6;
  right:clamp(22px,5vw,74px);
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:10px;
  width:min(210px,20vw);
  pointer-events:none;
}
.hero-capabilities span {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  color:#c8d3e7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  background:linear-gradient(135deg,rgba(14,24,44,.72),rgba(8,14,27,.52));
  box-shadow:0 12px 35px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035);
  animation:cover-chip-drift 5.2s ease-in-out infinite;
}
.hero-capabilities span:nth-child(2){animation-delay:-1.2s}.hero-capabilities span:nth-child(3){animation-delay:-2.5s}.hero-capabilities span:nth-child(4){animation-delay:-3.7s}
.hero-capabilities i {
  display:grid;
  place-items:center;
  width:26px;height:26px;
  border-radius:9px;
  font-style:normal;
  font-size:8px;
  color:#71efda;
  background:rgba(35,213,182,.09);
  border:1px solid rgba(64,231,204,.16);
}
.hero-workflow {
  position:absolute;
  z-index:6;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(7,12,24,.72);
  border:1px solid rgba(255,255,255,.075);
  color:#9eacc4;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  pointer-events:none;
}
.hero-workflow b { color:#65e8da; font-weight:500; animation:workflow-arrow 1.8s ease-in-out infinite; }
.hero-workflow b:nth-of-type(2){animation-delay:.35s}.hero-workflow b:nth-of-type(3){animation-delay:.7s}
.brand-lockup { z-index:8; }
.center-cta { z-index:10; }

@keyframes cover-chip-drift { 0%,100%{transform:translateX(0);border-color:rgba(255,255,255,.075)}50%{transform:translateX(-5px);border-color:rgba(86,229,214,.15)} }
@keyframes workflow-arrow { 0%,100%{opacity:.35;transform:translateX(-1px)}50%{opacity:1;transform:translateX(2px)} }

/* Comparison window: fit the entire table within one desktop preview during transitions. */
@media (min-width: 992px) {
  .comparison-section {
    height:100svh;
    min-height:620px;
    padding:clamp(24px,3.4vh,46px) 0 !important;
    display:grid;
    align-items:center;
    overflow:hidden;
  }
  .comparison-section > .container {
    width:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .comparison-heading { margin-bottom:clamp(10px,1.6vh,20px) !important; }
  .comparison-heading .eyebrow { margin-bottom:7px; }
  .comparison-heading h2 { font-size:clamp(28px,3.2vw,45px); margin-bottom:7px; line-height:1; }
  .comparison-heading p { font-size:clamp(10px,.85vw,13px); margin-bottom:0; }
  .comparison-card { border-radius:24px; }
  .comparison-table th,.comparison-table td { padding:clamp(8px,1.05vh,13px) 13px; }
  .comparison-table thead th { padding-top:clamp(10px,1.35vh,16px); padding-bottom:clamp(10px,1.35vh,16px); font-size:11px; }
  .comparison-table tbody th,.comparison-table td { font-size:11px; }
  .comparison-table thead th:first-child,.comparison-table tbody th { padding-left:20px; }
  .comparison-footer { padding:clamp(9px,1.2vh,14px) 18px !important; }
  .comparison-footer small { font-size:9px; }
  .legend { gap:14px !important; font-size:9px; }
}
@media (min-width:992px) and (max-height:720px) {
  .comparison-section { padding:18px 0 !important; }
  .comparison-heading { margin-bottom:8px !important; }
  .comparison-heading h2 { font-size:28px; }
  .comparison-heading p { font-size:10px; }
  .comparison-table th,.comparison-table td { padding:7px 11px; }
  .comparison-table thead th { padding-top:8px; padding-bottom:8px; }
  .comparison-footer { padding:7px 14px !important; }
}

@media (max-width: 1199.98px) {
  .hero-cover-copy { width:230px; left:28px; }
  .hero-capabilities { width:170px; right:22px; }
  .hero-capabilities span { padding:8px 9px; font-size:9px; }
}
@media (max-width: 991.98px) {
  .hero-cover-copy { top:auto; bottom:128px; left:22px; width:220px; transform:none; }
  .hero-cover-copy strong { font-size:26px; }
  .hero-cover-copy small { display:none; }
  .hero-capabilities { display:none; }
  .hero-workflow { bottom:64px; }
  .hero-shell,.section-shell { contain:layout paint; }
}
@media (max-width: 620px) {
  .hero-cover-copy { display:none; }
  .hero-workflow { bottom:57px; gap:6px; padding:7px 10px; font-size:7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shell,.section-shell { --window-scale:1 !important;--window-opacity:1 !important;--window-shift:0px !important;transform:none !important;opacity:1 !important; }
}

/* === Mobile/tablet hero parity with desktop cover ===
   Desktop (>= 992px) is intentionally untouched. These overrides only restore
   the cover content that earlier responsive rules hid on smaller screens. */
@media (max-width: 991.98px) {
  .hero-shell {
    min-height: 100svh;
  }

  /* Keep the same overview message visible on tablet/mobile. */
  .hero-cover-copy {
    display: flex !important;
    top: clamp(108px, 15.5svh, 150px) !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(78vw, 430px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    align-items: center;
    gap: 6px;
  }
  .hero-cover-copy .hero-kicker {
    font-size: clamp(8px, 1.8vw, 10px);
    letter-spacing: .12em;
  }
  .hero-cover-copy strong {
    font-size: clamp(24px, 5vw, 34px) !important;
    line-height: 1;
  }
  .hero-cover-copy small {
    display: block !important;
    max-width: 390px;
    font-size: clamp(9px, 1.7vw, 12px);
    line-height: 1.42;
  }

  /* Restore the desktop capability cards in a compact two-column shelf. */
  .hero-capabilities {
    display: grid !important;
    top: auto !important;
    right: auto !important;
    left: 50%;
    bottom: max(116px, calc(env(safe-area-inset-bottom) + 106px));
    width: min(82vw, 430px) !important;
    transform: translateX(-50%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .hero-capabilities span {
    min-width: 0;
    padding: 7px 9px !important;
    border-radius: 12px;
    font-size: clamp(8px, 1.65vw, 10px) !important;
    line-height: 1.1;
    white-space: nowrap;
    animation-duration: 6.2s;
  }
  .hero-capabilities i {
    width: 23px;
    height: 23px;
    border-radius: 8px;
    font-size: 7px;
    flex: 0 0 auto;
  }

  .hero-workflow {
    display: flex !important;
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 62px)) !important;
    max-width: 92vw;
    padding: 7px 10px;
    gap: 6px;
    font-size: clamp(7px, 1.4vw, 9px);
  }

  /* Keep the same four real app previews around the scanner scene. */
  .phone-card {
    display: block !important;
    opacity: .43 !important;
  }

  /* Restore the desktop Explore indicator instead of removing it. */
  .scroll-cue {
    display: flex !important;
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(30px, calc(env(safe-area-inset-bottom) + 24px));
    transform: none;
    gap: 4px;
    font-size: 7px;
    letter-spacing: .12em;
  }
  .scroll-cue span {
    width: 17px;
    height: 28px;
  }
  .scroll-cue span::after {
    top: 6px;
    width: 2px;
    height: 5px;
  }

  /* Keep bottom feature labels readable alongside the restored cover content. */
  .feature-strip {
    bottom: max(15px, env(safe-area-inset-bottom)) !important;
    max-width: 76vw;
    justify-content: center;
    overflow: visible !important;
    font-size: clamp(6.5px, 1.35vw, 8px) !important;
    letter-spacing: .10em;
  }
}

@media (max-width: 620px) {
  .brand-lockup {
    top: max(10px, env(safe-area-inset-top)) !important;
  }
  .brand-mark-wrap {
    width: 42px !important;
    border-radius: 13px;
  }
  .brand-lockup h1 {
    display: block !important;
    margin-top: 5px !important;
    font-size: 21px !important;
  }
  .brand-lockup p {
    display: block !important;
    font-size: 8px !important;
    letter-spacing: .07em;
  }

  .hero-cover-copy {
    display: flex !important;
    top: clamp(94px, 13.5svh, 118px) !important;
    width: 88vw !important;
  }
  .hero-cover-copy .hero-kicker {
    font-size: 7.5px;
  }
  .hero-cover-copy strong {
    font-size: clamp(22px, 7vw, 28px) !important;
  }
  .hero-cover-copy small {
    display: block !important;
    max-width: 330px;
    font-size: clamp(8.5px, 2.35vw, 10px);
    line-height: 1.38;
  }

  /* Center scene remains visually dominant, just scaled for portrait phones. */
  .scanner-frame {
    width: min(46vw, 190px) !important;
    top: 49% !important;
  }
  .orbit-one { width: 112vw !important; }
  .orbit-two { width: 78vw !important; }
  .motion-stage::before { width: 118vw !important; }
  .energy-one { width: 66vw; }
  .energy-two { width: 88vw; }
  .energy-three { width: 108vw; }

  .center-cta {
    top: 49% !important;
  }
  .play-badge {
    min-width: 190px !important;
    height: 58px !important;
    gap: 10px;
    padding: 6px 15px 6px 12px;
  }
  .play-icon { width: 32px !important; height: 32px !important; }
  .play-copy small { font-size: 8px; }
  .play-copy strong { font-size: 19px !important; }
  .coming-soon { font-size: 8px; }

  .phone-card {
    width: clamp(68px, 20vw, 84px) !important;
    opacity: .42 !important;
  }
  .card-a { left: -15px !important; top: 29svh !important; }
  .card-b { right: -15px !important; top: 28svh !important; }
  .card-c { left: -7px !important; bottom: 19svh !important; }
  .card-d { right: -7px !important; bottom: 18svh !important; }

  .hero-capabilities {
    display: grid !important;
    width: 90vw !important;
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px)) !important;
    gap: 5px;
  }
  .hero-capabilities span {
    padding: 6px 7px !important;
    font-size: clamp(7px, 2vw, 8.5px) !important;
    border-radius: 10px;
  }
  .hero-capabilities i {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    font-size: 6px;
  }

  .hero-workflow {
    display: flex !important;
    bottom: max(59px, calc(env(safe-area-inset-bottom) + 52px)) !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    font-size: clamp(6px, 1.8vw, 7.5px) !important;
  }
  .feature-strip {
    bottom: max(13px, env(safe-area-inset-bottom)) !important;
    max-width: 72vw;
    gap: 5px !important;
    font-size: clamp(5.8px, 1.75vw, 7px) !important;
  }
  .scroll-cue {
    display: flex !important;
    right: 8px;
    bottom: max(17px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  }
}

/* Extra-tight phones: retain every desktop-cover element, but compact vertically. */
@media (max-width: 620px) and (max-height: 700px) {
  .brand-lockup { top: 6px !important; }
  .brand-mark-wrap { width: 36px !important; }
  .brand-lockup h1 { font-size: 18px !important; margin-top: 3px !important; }
  .brand-lockup p { display:block !important; font-size:6.5px !important; }
  .hero-cover-copy { top: 78px !important; }
  .hero-cover-copy .hero-kicker { font-size:6.5px; }
  .hero-cover-copy strong { font-size:20px !important; }
  .hero-cover-copy small { display:block !important; font-size:7.5px; max-width:290px; }
  .center-cta,.scanner-frame { top:47% !important; }
  .play-badge { min-width:174px !important; height:52px !important; }
  .play-icon { width:28px !important; height:28px !important; }
  .play-copy strong { font-size:17px !important; }
  .phone-card { width:62px !important; opacity:.37 !important; }
  .card-a { top:27svh !important; }.card-b { top:26svh !important; }
  .card-c { bottom:18svh !important; }.card-d { bottom:17svh !important; }
  .hero-capabilities { bottom:88px !important; }
  .hero-capabilities span { padding:4px 6px !important; font-size:6.7px !important; }
  .hero-capabilities i { width:17px;height:17px;font-size:5.5px; }
  .hero-workflow { bottom:48px !important; font-size:5.8px !important; padding:4px 7px !important; }
  .feature-strip { bottom:9px !important; font-size:5.5px !important; }
  .scroll-cue { bottom:10px !important; }
}


/* === Mobile touch stability fix ===
   Desktop is intentionally unchanged. On coarse-pointer devices we keep the same cover
   composition but reduce costly re-compositing while a finger is held on the screen. */
@media (hover: none) and (pointer: coarse) and (max-width: 991.98px) {
  /* Keep content interactive while the guided scroll is running; touch can stop it cleanly. */
  body.section-morphing main { pointer-events: auto !important; }

  /* These glass blurs sit inside a transformed full-screen hero and are costly on mobile GPUs. */
  .brand-mark-wrap,
  .scanner-frame,
  .hero-workflow {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .brand-mark-wrap { background: rgba(17, 25, 43, .90) !important; }
  .scanner-frame { background: linear-gradient(145deg, rgba(23,32,52,.90), rgba(10,16,30,.86)) !important; }
  .hero-workflow { background: rgba(7, 12, 24, .94) !important; }

  /* Stable text rasterization while the containing section is scaled by the scroll effect. */
  .brand-lockup,
  .hero-cover-copy,
  .hero-capabilities,
  .hero-workflow,
  .feature-strip,
  .scroll-cue {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .hero-shell,
  .section-shell {
    will-change: transform, opacity !important;
    contain: paint !important;
  }

  /* When a long press stops the automatic tour, freeze only decorative motion at its
     current frame. The page/text itself remains fully responsive and does not flicker. */
  body.mobile-touch-hold .hero-energy,
  body.mobile-touch-hold .orbit,
  body.mobile-touch-hold .scanner-frame,
  body.mobile-touch-hold .scan-beam,
  body.mobile-touch-hold .phone-card,
  body.mobile-touch-hold .particle-field span,
  body.mobile-touch-hold .brand-mark-wrap,
  body.mobile-touch-hold .play-badge,
  body.mobile-touch-hold .hero-capabilities span,
  body.mobile-touch-hold .hero-workflow b,
  body.mobile-touch-hold .scroll-cue {
    animation-play-state: paused !important;
  }

  /* Avoid extra paint invalidation from blend/filter-heavy ambient layers during hold. */
  body.mobile-touch-hold .ambient,
  body.mobile-touch-hold .motion-stage::before,
  body.mobile-touch-hold .motion-stage::after {
    opacity: .14 !important;
  }
}