:root {
  --paper: #f1efe9;
  --paper-deep: #e6e2d9;
  --ink: #111310;
  --muted: #686a62;
  --line: rgba(17, 19, 16, 0.16);
  --soft-line: rgba(17, 19, 16, 0.08);
  --acid: #d9f44d;
  --tomato: #ef674b;
  --night: #151813;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

@font-face {
  font-family: "RiddleScript";
  src: url("DancingScript.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .038;
  z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.section-shell, .site-header { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.site-header {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 11;
}
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
}
.brand-name { font-size: 18px; }
.brand-name span { color: var(--tomato); }
.nav-links { display: flex; gap: 30px; margin-left: auto; margin-right: 24px; font-size: 13px; color: var(--muted); }
.nav-links a, .nav-cta, .text-link, .light-link { transition: color .2s ease; }
.nav-links a:hover, .nav-cta:hover, .text-link:hover, .light-link:hover { color: var(--tomato); }
.nav-cta { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.nav-download { display: inline-flex; align-items: center; gap: 8px; }
.android-icon { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.nav-cta span, .text-link span, .light-link span { color: var(--tomato); font-size: 16px; margin-left: 4px; }
.hero { min-height: 690px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); align-items: center; gap: 66px; padding-top: 58px; padding-bottom: 74px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--tomato); box-shadow: 0 0 0 4px rgba(239,103,75,.12); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.06em; }
h1 { max-width: 620px; margin-bottom: 24px; font-size: clamp(54px, 6.2vw, 84px); line-height: .97; }
h1 em { color: var(--tomato); font-style: italic; }
.hero-lede { max-width: 465px; margin-bottom: 31px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions, .start-actions { display: flex; align-items: center; gap: 25px; }
.button { display: inline-flex; align-items: center; gap: 20px; min-height: 49px; padding: 0 19px; font-size: 13px; font-weight: 600; border: 1px solid var(--ink); transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--paper); background: var(--ink); }
.button-primary:hover { background: var(--tomato); border-color: var(--tomato); }
.button-light { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.button-light:hover { background: var(--paper); border-color: var(--paper); }
.text-link, .light-link { font-size: 13px; font-weight: 600; }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 48px; color: var(--muted); font: 11px var(--mono); }
.line-mark { width: 38px; height: 1px; background: var(--tomato); }
.hero-stage { min-width: 0; min-height: 610px; display: grid; place-items: center; position: relative; overflow: hidden; }
.hero-stage-image { min-height: 630px; }
.companion-hero-figure { width: min(680px, 100%); max-width: 100%; min-width: 0; margin: 0; position: relative; z-index: 2; transform: rotate(2.2deg); }
.companion-hero-figure::after { content: ""; position: absolute; inset: -14px -12px 48px 12px; border: 1px solid rgba(239,103,75,.44); z-index: -1; transform: rotate(-4deg); }
.hero-boox-demo { width: 100%; min-width: 0; padding: 18px 19px 15px; position: relative; color: var(--paper); background: rgba(21,24,19,.98); border: 1px solid rgba(241,239,233,.34); box-shadow: 15px 20px 0 rgba(17,19,16,.16), 2px 5px 24px rgba(17,19,16,.22); transform: rotate(-1.4deg); z-index: 3; }
.demo-chrome, .demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 8px var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.demo-chrome { color: rgba(241,239,233,.62); }
.demo-status { color: var(--acid); }
.demo-page { width: 100%; min-width: 0; min-height: 350px; margin-top: 14px; padding: 35px 45px; position: relative; overflow: hidden; color: var(--ink); background: #fffefb; contain: layout paint; }
.demo-page::before { content: ""; position: absolute; inset: 15%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(217,244,77,.28), rgba(239,103,75,.08) 28%, transparent 67%); opacity: 0; transform: scale(.7); }
.demo-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 45%, rgba(239,103,75,.08) 50%, transparent 55%); transform: translateX(-115%); }
.demo-page-lines { position: absolute; inset: 19% 7% 11%; z-index: 0; background: repeating-linear-gradient(to bottom, transparent 0 45px, rgba(17,19,16,.08) 46px 47px); }
.demo-copy { display: grid; width: 100%; min-width: 0; min-height: 118px; gap: 7px; position: relative; z-index: 1; margin-top: 17%; font: 400 clamp(32px, 3.4vw, 52px)/1.06 "RiddleScript", cursive; letter-spacing: -.03em; }
.demo-line { display: block; white-space: nowrap; }
.demo-word { display: inline-block; opacity: 0; transform: translateY(10px) rotate(1deg); filter: blur(1.5px); }
.demo-word + .demo-word { margin-left: .14em; }
.demo-dust { position: absolute; inset: 15% 8%; z-index: 3; pointer-events: none; opacity: 0; }
.demo-dust::before { content: ""; position: absolute; inset: 24% 10%; border-radius: 50%; background: radial-gradient(ellipse, rgba(17,19,16,.16), rgba(239,103,75,.08) 36%, transparent 72%); filter: blur(14px); opacity: 0; transform: scale(.72); }
.demo-dust i { width: 5px; height: 5px; position: absolute; left: var(--dust-x); top: var(--dust-y); border-radius: 50%; background: var(--acid); box-shadow: 0 0 9px rgba(217,244,77,.9), 0 0 18px rgba(239,103,75,.35); }
.demo-dust i:nth-child(3n) { background: var(--tomato); box-shadow: 0 0 9px rgba(239,103,75,.75), 0 0 18px rgba(239,103,75,.32); }
.demo-dust i:nth-child(4n) { width: 3px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.demo-cursor { position: absolute; left: 19%; top: 28%; z-index: 4; width: 10px; height: 42px; border: 1px solid rgba(17,19,16,.75); border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #363a32 0%, #111310 38%, #54584e 68%, #171913 100%); box-shadow: 2px 3px 5px rgba(17,19,16,.24); opacity: 0; transform-origin: 50% 88%; }
.demo-cursor::before { content: ""; position: absolute; left: 1px; bottom: -9px; width: 0; height: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 10px solid #111310; filter: drop-shadow(1px 2px 1px rgba(17,19,16,.24)); }
.demo-cursor::after { content: ""; position: absolute; top: 7px; left: 2px; width: 2px; height: 23px; border-radius: 2px; background: rgba(241,239,233,.42); }
.demo-thinking-dot { position: absolute; left: 50%; top: 50%; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); opacity: 0; box-shadow: 0 0 0 7px rgba(239,103,75,.12), 0 0 0 16px rgba(239,103,75,.06); }
.demo-caption { display: block; margin-top: 10px; color: rgba(241,239,233,.62); }
.hero-boox-demo[data-state="write"] .demo-word, .hero-boox-demo[data-state="reply"] .demo-word { animation: demoWordIn .48s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--word-delay); }
.hero-boox-demo[data-state="reply"] .demo-word { animation-delay: calc(.38s + var(--word-delay)); }
.hero-boox-demo[data-state="write"] .demo-cursor { opacity: 1; animation: demoCursor 2.9s ease-in-out both; }
.hero-boox-demo[data-state="dissolve"] .demo-word { opacity: 1; animation: demoWordOut .72s ease both; animation-delay: calc(var(--word-index) * .07s); }
.hero-boox-demo[data-state="dissolve"] .demo-page::after { animation: demoSweep 1.1s ease both; }
.hero-boox-demo[data-state="dissolve"] .demo-dust { opacity: 1; }
.hero-boox-demo[data-state="dissolve"] .demo-dust::before { animation: dustCloud 1.1s ease-out both; }
.hero-boox-demo[data-state="dissolve"] .demo-dust i { animation: dustBurst 1.1s var(--dust-delay) ease-out both; }
.hero-boox-demo[data-state="think"] .demo-word { opacity: 0; }
.hero-boox-demo[data-state="think"] .demo-thinking-dot { opacity: 1; animation: demoPulse 1.1s ease-in-out infinite; }
.hero-boox-demo[data-state="reply"] .demo-page::before { animation: pageGlow 1.7s .1s ease-out both; }
.hero-boox-demo[data-state="reply"] .demo-dust { opacity: 1; }
.hero-boox-demo[data-state="reply"] .demo-dust i { animation: dustGather 1.7s var(--dust-delay) ease-in both; }
.hero-boox-demo[data-state="pause"] .demo-copy { opacity: 0; }
.hero-boox-demo[data-state="linger"] .demo-word { animation: demoWordIn .48s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.3s + var(--word-index) * .16s); }
.hero-boox-demo[data-state="linger"] .demo-page::before { animation: pageGlow 1.55s .08s ease-out both; }
.hero-boox-demo[data-state="linger"] .demo-dust { opacity: 1; }
.hero-boox-demo[data-state="linger"] .demo-dust i { animation: dustGather 1.55s var(--dust-delay) ease-in both; }
.hero-boox-demo[data-state="linger"] .demo-word { opacity: 1; transform: none; filter: none; }
.companion-hero-figure figcaption { display: flex; justify-content: space-between; gap: 15px; padding-top: 14px; color: var(--muted); font: 9px var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.companion-hero-figure figcaption span:first-child { color: var(--tomato); }
.stage-orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-14deg); }
.orbit-one { width: 640px; height: 385px; }
.orbit-two { width: 560px; height: 430px; transform: rotate(42deg); border-color: rgba(239,103,75,.28); }
.hero-paper { position: relative; width: min(430px, 82%); padding: 27px 28px 21px; background: #fffefb; border: 1px solid rgba(17,19,16,.18); transform: rotate(4.5deg); z-index: 2; }
.paper-shadow { box-shadow: 15px 20px 0 rgba(17,19,16,.07), 3px 5px 18px rgba(17,19,16,.08); }
.paper-topline, .paper-footer, .memory-header, .memory-foot { display: flex; justify-content: space-between; gap: 12px; font: 10px var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.paper-topline { color: var(--muted); }
.live-state { color: var(--tomato); }
.live-state i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--tomato); animation: blink 1.8s ease-in-out infinite; }
.paper-rule { height: 1px; margin: 19px 0 31px; background: var(--soft-line); }
.paper-prompt { margin-bottom: 22px; font-family: var(--serif); font-size: 38px; line-height: .95; letter-spacing: -.05em; }
.hero-paper img { width: 100%; margin-left: -2px; mix-blend-mode: multiply; }
.paper-caption { margin-top: 27px; padding-left: 15px; border-left: 1px solid var(--tomato); color: var(--muted); font: 11px/1.4 var(--mono); }
.paper-footer { margin-top: 37px; color: var(--muted); }
.floating-note { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 13px; background: var(--acid); color: var(--ink); font: 10px var(--mono); text-transform: uppercase; z-index: 3; box-shadow: 4px 5px 0 rgba(17,19,16,.12); }
.floating-note strong { font-size: 16px; font-weight: 400; }
.note-top { top: 83px; right: 2px; transform: rotate(6deg); }
.note-bottom { bottom: 56px; left: 1px; background: var(--tomato); color: #fffaf0; transform: rotate(-7deg); }
.signal-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-row div { padding: 21px 16px 20px 0; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.signal-row div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.signal-row span { margin-right: 9px; color: var(--tomato); }
.download-prompt { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 30px; margin-top: 92px; padding: 31px 35px; position: relative; overflow: hidden; color: var(--paper); background: var(--night); }
.download-prompt::after { content: ""; width: 260px; height: 260px; position: absolute; right: 11%; top: -168px; border: 1px solid rgba(217,244,77,.22); border-radius: 50%; box-shadow: 0 0 0 24px rgba(239,103,75,.06), 0 0 0 49px rgba(217,244,77,.05); transform: rotate(22deg); pointer-events: none; }
.download-mark { width: 68px; height: 68px; position: relative; z-index: 1; }
.download-app-mark { width: 57px; height: 57px; display: grid; place-items: center; color: var(--paper); background: var(--tomato); border-radius: 18px 18px 23px 23px; font: italic 500 32px var(--serif); transform: rotate(-8deg); }
.download-android-mark { width: 29px; height: 29px; display: grid; place-items: center; position: absolute; right: -5px; bottom: -3px; color: var(--night); background: var(--acid); border: 3px solid var(--night); border-radius: 50%; transform: rotate(10deg); }
.download-android-mark .android-icon { width: 18px; height: 18px; }
.download-copy, .download-actions { position: relative; z-index: 1; }
.download-copy .eyebrow { margin-bottom: 10px; color: rgba(241,239,233,.54); }
.download-copy h2 { margin-bottom: 8px; color: var(--paper); font-size: clamp(32px, 4vw, 48px); }
.download-copy > p:last-child { max-width: 570px; margin-bottom: 0; color: rgba(241,239,233,.62); font-size: 14px; line-height: 1.6; }
.download-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.button-download { gap: 11px; white-space: nowrap; }
.download-actions .button-download { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.download-actions .button-download:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.download-note { color: rgba(241,239,233,.48); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.ritual { padding-top: 155px; padding-bottom: 157px; }
.section-intro { max-width: 560px; }
h2 { margin-bottom: 21px; font-size: clamp(42px, 5vw, 67px); line-height: .99; }
.section-intro > p:last-child, .inside-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.7; }
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 77px; }
.ritual-card { min-width: 0; }
.card-number { margin-bottom: 17px; color: var(--tomato); font: 11px var(--mono); }
.card-visual { height: 268px; margin-bottom: 29px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: 1px solid var(--line); background: #e5e2da; }
.card-visual img { width: 92%; mix-blend-mode: multiply; transform: rotate(-4deg); }
.tiny-chrome { position: absolute; inset: 15px 15px auto; display: flex; justify-content: space-between; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.tiny-chrome span:last-child { color: var(--tomato); }
.sample-page { width: 88%; min-height: 168px; display: flex; flex-direction: column; justify-content: center; padding: 30px 24px 22px; position: relative; overflow: hidden; background: #fffefb; color: var(--ink); box-shadow: 6px 9px 0 rgba(17,19,16,.1); transform: rotate(-3deg); }
.sample-page::before { content: ""; position: absolute; inset: 46px 20px 28px; background: repeating-linear-gradient(to bottom, transparent 0 32px, rgba(17,19,16,.08) 33px 34px); pointer-events: none; }
.sample-script, .memory-script { position: relative; z-index: 1; font: 400 clamp(25px, 2.4vw, 36px)/1.12 "RiddleScript", cursive; letter-spacing: -.03em; }
.sample-note { position: relative; z-index: 1; align-self: flex-end; margin-top: 12px; padding: 4px 10px; color: var(--tomato); font: 10px var(--mono); text-transform: uppercase; transform: rotate(2deg); }
.ink-cursor { position: absolute; right: 18%; bottom: 27%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.ink-cursor::after { content: ""; position: absolute; width: 28px; height: 1px; top: 8px; left: -10px; background: var(--ink); transform: rotate(-53deg); transform-origin: right; }
.card-visual-think { background: var(--night); color: var(--paper); }
.pulse-dot { width: 9px; height: 9px; position: relative; z-index: 2; border-radius: 50%; background: var(--acid); box-shadow: 0 0 24px 7px rgba(217,244,77,.23); }
.pulse-ring { position: absolute; width: 100px; height: 100px; border: 1px solid rgba(217,244,77,.32); border-radius: 50%; }
.ring-a { animation: ring 3.6s ease-out infinite; }
.ring-b { width: 180px; height: 180px; border-color: rgba(217,244,77,.12); animation: ring 3.6s 1s ease-out infinite; }
.thinking-label { position: absolute; bottom: 22px; left: 24px; color: rgba(241,239,233,.56); font: 10px var(--mono); text-transform: uppercase; }
.card-visual-reply { display: block; padding: 43px 23px; background: #fffefb; }
.reply-meta { margin-bottom: 26px; color: var(--muted); font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.reply-line { font: 400 clamp(23px, 2.4vw, 32px)/1.25 "RiddleScript", cursive; letter-spacing: -.03em; white-space: nowrap; }
.reply-line-a { transform: rotate(-3deg); }
.reply-line-b { margin: 18px 0 0 21px; color: var(--tomato); transform: rotate(2deg); }
.reply-pencil { position: absolute; right: 32px; bottom: 22px; color: var(--tomato); font-size: 17px; }
.ritual-card h3, .boox-point h3 { margin-bottom: 9px; font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: -.04em; }
.ritual-card p { max-width: 300px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.companion { padding-top: 138px; padding-bottom: 145px; border-top: 1px solid var(--line); }
.companion .section-intro { max-width: 810px; }
.companion .section-intro > p:last-child { max-width: 610px; }
.companion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 75px; }
.companion-card { min-height: 345px; padding: 24px 21px 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--line); background: rgba(255,254,251,.44); }
.companion-card::before { content: ""; position: absolute; width: 100px; height: 100px; top: -45px; right: -35px; border: 1px solid currentColor; border-radius: 50%; opacity: .28; }
.companion-card-teacher { color: var(--ink); }
.companion-card-friend { color: var(--paper); background: var(--night); border-color: var(--night); }
.companion-card-reader { color: var(--ink); background: rgba(217,244,77,.44); border-color: rgba(17,19,16,.25); }
.companion-card-operator { color: var(--paper); background: var(--tomato); border-color: var(--tomato); }
.companion-symbol { height: 45px; color: var(--tomato); font: 36px/.9 var(--serif); }
.companion-card-friend .companion-symbol, .companion-card-operator .companion-symbol { color: var(--acid); }
.companion-role { margin: 0 0 36px; font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .66; }
.companion-card h3 { max-width: 210px; margin-bottom: 12px; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.03; letter-spacing: -.04em; }
.companion-card > p:not(.companion-role) { max-width: 230px; margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.58; }
.companion-card-friend > p:not(.companion-role), .companion-card-operator > p:not(.companion-role) { color: rgba(241,239,233,.64); }
.companion-index { margin-top: auto; font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .58; }
.inside { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 10%; padding-top: 135px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.inside-copy { padding-bottom: 15px; }
.inside-copy h2 { max-width: 450px; }
.inside-copy > p:not(.eyebrow) { max-width: 450px; margin-bottom: 34px; }
.feature-list { display: grid; gap: 21px; }
.feature-item { display: flex; align-items: flex-start; gap: 14px; }
.feature-icon { display: grid; flex: 0 0 29px; height: 29px; place-items: center; color: var(--tomato); border: 1px solid var(--tomato); border-radius: 50%; font-size: 14px; }
.feature-item div { display: grid; gap: 3px; padding-top: 1px; }
.feature-item strong { font-size: 14px; }
.feature-item div span { color: var(--muted); font-size: 12px; }
.memory-card { position: relative; min-height: 530px; padding: 23px; background: var(--night); color: var(--paper); transform: rotate(-2.5deg); box-shadow: 14px 18px 0 rgba(17,19,16,.08); }
.memory-header { color: rgba(241,239,233,.56); }
.memory-status { color: var(--acid); }
.memory-page { position: absolute; background: #fffefb; color: var(--ink); box-shadow: 6px 9px 0 rgba(0,0,0,.2); }
.memory-page-main { width: 75%; height: 250px; top: 89px; left: 12%; padding: 22px 18px; transform: rotate(4deg); }
.memory-page-small { width: 55%; height: 155px; right: 5%; bottom: 49px; padding: 15px; transform: rotate(-7deg); opacity: .92; }
.page-index { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.memory-script { margin: 31px 0 0 12px; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.05; transform: rotate(-2deg); }
.memory-script-small { margin: 24px 0 0 7px; font-size: clamp(22px, 2.2vw, 32px); transform: rotate(2deg); }
.memory-note { display: inline-block; margin: 14px 0 0 20px; padding: 5px 8px; color: var(--tomato); font: 9px var(--mono); text-transform: uppercase; transform: rotate(-2deg); }
.memory-arrow { position: absolute; right: -34px; bottom: 20px; color: var(--tomato); font: 33px var(--serif); }
.memory-foot { position: absolute; right: 23px; bottom: 23px; left: 23px; color: rgba(241,239,233,.56); }
.memory-foot span:last-child { color: var(--acid); font-size: 17px; }
.boox { padding-top: 143px; padding-bottom: 147px; border-top: 1px solid var(--line); }
.boox-heading { max-width: 715px; }
.boox-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 13%; margin-top: 85px; }
.boox-quote { padding: 32px 38px 30px; border: 1px solid var(--line); background: rgba(255,254,251,.48); }
.quote-mark { height: 52px; color: var(--tomato); font: 81px/.75 var(--serif); }
blockquote { max-width: 380px; margin: 0 0 35px; font: 500 34px/1.12 var(--serif); letter-spacing: -.05em; }
.quote-signature { color: var(--muted); font: 11px var(--mono); text-transform: uppercase; }
.boox-points { display: grid; gap: 32px; align-content: center; }
.boox-point { display: grid; grid-template-columns: 37px 1fr; gap: 16px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.boox-point > span { color: var(--tomato); font: 11px var(--mono); }
.boox-point h3 { margin-top: -5px; font-size: 24px; }
.boox-point p { max-width: 380px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.start { padding-top: 50px; padding-bottom: 150px; }
.start-panel { min-height: 410px; display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 75px 82px; position: relative; overflow: hidden; color: var(--paper); background: var(--night); }
.start-copy { max-width: 610px; position: relative; z-index: 2; }
.eyebrow-light { color: rgba(241,239,233,.56); }
.start-panel h2 { max-width: 600px; margin-bottom: 18px; color: var(--paper); }
.start-panel p:not(.eyebrow) { max-width: 480px; margin-bottom: 29px; color: rgba(241,239,233,.64); font-size: 15px; line-height: 1.65; }
.start-actions { gap: 24px; }
.start-actions .light-link { color: var(--paper); }
.start-actions .light-link:hover { color: var(--acid); }
.start-actions .light-link span { color: var(--acid); }
.start-glyph { width: 270px; height: 270px; flex: 0 0 auto; position: relative; opacity: .92; transform: rotate(17deg); }
.glyph-circle { position: absolute; inset: 22px; border: 1px solid rgba(217,244,77,.55); border-radius: 50%; }
.glyph-circle::before, .glyph-circle::after { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(217,244,77,.24); border-radius: 50%; }
.glyph-circle::after { inset: 59px; border-color: rgba(239,103,75,.7); }
.glyph-line { position: absolute; height: 1px; background: var(--acid); transform-origin: left; }
.glyph-line-1 { width: 130px; top: 134px; left: 72px; transform: rotate(41deg); }
.glyph-line-2 { width: 102px; top: 151px; left: 99px; transform: rotate(-42deg); background: var(--tomato); }
.glyph-line-3 { width: 152px; top: 112px; left: 69px; transform: rotate(-9deg); background: rgba(241,239,233,.5); }
.glyph-star { position: absolute; right: 15px; top: 7px; color: var(--acid); font-size: 25px; }
.faq { padding-top: 7px; padding-bottom: 147px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 12%; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 21px 0; cursor: pointer; list-style: none; font: 500 20px var(--serif); letter-spacing: -.03em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--tomato); font: 22px var(--mono); transition: transform .2s ease; }
details[open] summary::after { content: "−"; }
details p { max-width: 580px; padding: 0 40px 22px 0; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 94px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-brand { color: var(--ink); }
.footer-brand .brand-mark { width: 23px; height: 23px; font-size: 13px; }
.footer-right { display: flex; justify-content: flex-end; gap: 30px; font: 10px var(--mono); text-transform: uppercase; }
.footer-right a { color: var(--ink); }
.footer-right a:hover { color: var(--tomato); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ring { 0% { transform: scale(.5); opacity: .6; } 75%, 100% { transform: scale(1.4); opacity: 0; } }
@keyframes demoWordIn { from { opacity: 0; transform: translateY(10px) rotate(1deg); filter: blur(1.5px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes demoWordOut { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-5px) rotate(-1deg); filter: blur(3px); } }
@keyframes demoSweep { from { transform: translateX(-115%); } to { transform: translateX(115%); } }
@keyframes dustBurst { 0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); } 22% { opacity: 1; transform: translate(0, 0) scale(1) rotate(38deg); } 100% { opacity: 0; transform: translate(var(--dust-dx), var(--dust-dy)) scale(.15) rotate(160deg); } }
@keyframes dustGather { 0% { opacity: 0; transform: translate(var(--dust-dx), var(--dust-dy)) scale(.12) rotate(-90deg); } 26% { opacity: 1; transform: translate(calc(var(--dust-dx) * .42), calc(var(--dust-dy) * .42)) scale(1) rotate(18deg); } 100% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(90deg); } }
@keyframes dustCloud { 0% { opacity: 0; transform: scale(.72); } 28% { opacity: .72; transform: scale(1); } 100% { opacity: 0; transform: scale(1.34); } }
@keyframes pageGlow { 0% { opacity: 0; transform: scale(.7); } 34% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes demoPulse { 0%, 100% { transform: scale(.85); box-shadow: 0 0 0 7px rgba(239,103,75,.12), 0 0 0 16px rgba(239,103,75,.06); } 50% { transform: scale(1.15); box-shadow: 0 0 0 13px rgba(239,103,75,.08), 0 0 0 27px rgba(239,103,75,.03); } }
@keyframes demoCursor { 0% { left: 19%; top: 28%; transform: rotate(42deg); } 38% { left: 57%; top: 28%; transform: rotate(42deg); } 50% { left: 19%; top: 46%; transform: rotate(42deg); } 84% { left: 61%; top: 46%; transform: rotate(42deg); } 100% { left: 61%; top: 46%; transform: rotate(42deg); } }
@media (max-width: 900px) {
  .section-shell, .site-header { width: min(100% - 40px, 700px); }
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding-top: 80px; }
  .hero-copy { max-width: 650px; }
  .hero-stage { min-height: 600px; }
  .hero-boox-demo { width: 100%; }
  .ritual-grid { grid-template-columns: 1fr; gap: 65px; }
  .card-visual { height: 330px; }
  .ritual-card p { max-width: 500px; }
  .companion-grid { grid-template-columns: repeat(2, 1fr); }
  .inside, .boox-layout, .faq { grid-template-columns: 1fr; gap: 75px; }
  .inside { padding-top: 100px; }
  .memory-card { width: min(100%, 570px); margin-inline: auto; }
  .faq { padding-top: 0; }
  .faq .section-intro { max-width: 550px; }
  .start-panel { padding: 60px 45px; }
  .start-glyph { width: 210px; height: 210px; }
  .download-prompt { grid-template-columns: 68px minmax(0, 1fr); gap: 22px; }
  .download-actions { grid-column: 2; }
}
@media (max-width: 560px) {
  .section-shell, .site-header { width: calc(100% - 34px); }
  .site-header { height: 70px; }
  .nav-cta { display: none; }
  h1 { font-size: clamp(49px, 15vw, 73px); }
  h2 { font-size: 48px; }
  .hero { min-height: auto; padding-top: 65px; padding-bottom: 75px; }
  .hero-lede { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 19px; }
  .hero-note { margin-top: 36px; }
  .hero-stage { min-height: 475px; }
  .hero-stage-image { min-height: 455px; }
  .companion-hero-figure { width: 100%; }
  .hero-boox-demo { width: 100%; padding: 12px 12px 11px; }
  .demo-page { min-height: 272px; padding: 25px 23px; }
  .demo-page-lines { inset: 19% 7% 11%; background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(17,19,16,.08) 35px 36px); }
  .demo-copy { min-height: 82px; margin-top: 19%; gap: 5px; font-size: clamp(24px, 7.8vw, 34px); }
  .demo-chrome, .demo-caption { font-size: 7px; }
  .hero-paper { width: 90%; padding: 20px 18px 16px; }
  .paper-prompt { font-size: 31px; }
  .orbit-one { width: 370px; height: 220px; }
  .orbit-two { width: 330px; height: 260px; }
  .note-top { top: 35px; right: -1px; }
  .note-bottom { bottom: 19px; left: -1px; }
  .signal-row { grid-template-columns: 1fr 1fr; }
  .signal-row div { padding: 15px 7px; font-size: 9px; }
  .signal-row div + div { padding-left: 9px; }
  .ritual { padding-top: 100px; padding-bottom: 100px; }
  .ritual-grid { margin-top: 55px; gap: 54px; }
  .card-visual { height: 260px; }
  .reply-line { font-size: 22px; }
  .companion { padding-top: 100px; padding-bottom: 100px; }
  .companion-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 52px; }
  .companion-card { min-height: 285px; }
  .companion-role { margin-bottom: 25px; }
  .inside, .boox { padding-top: 100px; padding-bottom: 100px; }
  .memory-card { min-height: 410px; padding: 17px; }
  .memory-page-main { height: 192px; top: 70px; padding: 16px 12px; }
  .memory-page-small { height: 125px; padding: 11px; }
  .memory-page img { margin-top: 20px; }
  .memory-page-small img { margin-top: 12px; }
  .memory-foot { right: 17px; bottom: 17px; left: 17px; font-size: 8px; }
  .boox-layout { margin-top: 55px; gap: 55px; }
  .boox-quote { padding: 25px; }
  blockquote { font-size: 29px; }
  .start { padding-bottom: 100px; }
  .start-panel { min-height: 495px; padding: 45px 25px; align-items: flex-start; }
  .start-glyph { position: absolute; right: -65px; bottom: -32px; opacity: .58; }
  .start-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .download-prompt { grid-template-columns: 1fr; gap: 22px; margin-top: 68px; padding: 27px 22px; }
  .download-mark { margin-left: 2px; }
  .download-actions { grid-column: auto; align-items: flex-start; }
  .download-copy h2 { font-size: 40px; }
  .faq { padding-bottom: 100px; gap: 50px; }
  summary { font-size: 18px; }
  .site-footer { grid-template-columns: 1fr; gap: 11px; padding: 24px 0; }
  .footer-right { justify-content: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}