/* Motion concept — isolated design preview. */
:root{--copper:#ed9854;--amber:#f4c885;--emerald:#35685e}
.hero-stage{margin:20px 24px 0;border-radius:27px;position:relative;overflow:hidden;isolation:isolate;background:#211711;color:#fff2df;box-shadow:0 14px 40px #38201616}
.hero-stage:before{content:'';position:absolute;inset:-25%;z-index:-2;background:radial-gradient(ellipse at 72% 42%,#e298535f 0,transparent 43%),radial-gradient(ellipse at 22% 8%,#8a45203f 0,transparent 37%),radial-gradient(ellipse at 90% 82%,#37776a66 0,transparent 32%);animation:ambient-shift 17s ease-in-out infinite alternate;filter:blur(15px)}
.hero-stage:after{content:'';position:absolute;inset:0;z-index:-1;opacity:.055;pointer-events:none;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.75' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{min-height:755px;padding-top:75px;padding-bottom:55px;position:relative;z-index:2}.hero .eyebrow{color:#e0b78d;font-size:10px;letter-spacing:.16em}.hero .tiny-dot{background:#e4ad6b;box-shadow:0 0 0 4px #e4ad6b18,0 0 15px #e4ad6b66;animation:signal-breathe 2.8s ease-in-out infinite}.hero h1{font-size:clamp(60px,5.9vw,85px);color:#fff2df;line-height:1.035;letter-spacing:-.047em;margin-top:26px;margin-bottom:29px}.hero-line{display:block;overflow:hidden;padding-bottom:7px;margin-bottom:-7px}.hero-line>span{display:block;animation:headline-in 1.1s cubic-bezier(.16,1,.3,1) both}.hero-line:nth-child(2)>span{animation-delay:.13s}.hero h1 em{color:#f0b172;text-shadow:0 0 50px #ff9b4433}.hero .hero-description{color:#d1bba4;font-size:15px;animation:soft-in 1s ease both;animation-delay:.4s}.hero-actions{animation:soft-in 1s ease both;animation-delay:.55s}.hero .button-dark{background:linear-gradient(115deg,#d68748,#f0b172);color:#281a10;border:1px solid #f6c88d55;box-shadow:0 7px 30px #cf742322}.hero .button-dark:hover{box-shadow:0 8px 35px #e6924e66;background:linear-gradient(115deg,#efa05f,#f6c486)}.hero .button-quiet{color:#fff2df;border-color:#ffffff2d;background:#ffffff05}.hero .button-quiet:hover{background:#ffffff0c;border-color:#e4ae76}.hero .hero-small{color:#b79d84}.hero .screen-selector{border-color:#e3b78b25;margin-top:55px}.hero .screen-selector button{color:#cdb49a;font-size:11px;transition:color .25s}.hero .screen-selector button span{color:#9e7e62}.hero .screen-selector button.selected{color:#f0b172}.hero .screen-selector button.selected:after{background:#f0b172;box-shadow:0 0 12px #f0b17270}.hero-visual{transform-style:preserve-3d;perspective:1100px;transform:rotateX(var(--turn-y,0deg)) rotateY(var(--turn-x,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}.hero .visual-circle{background:radial-gradient(circle at 35% 25%,#dbab7840,#9a53253b 55%,#18372e22);box-shadow:inset 0 0 60px #ecad5a14,0 0 90px #d5893714;animation:orb-breathe 9s ease-in-out infinite}.hero .circle-ring{border-color:#e3bb9029;border-style:solid;animation:orb-spin 60s linear infinite}.hero .circle-ring:before,.hero .circle-ring:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;top:17%;left:11%;background:#e5b885;box-shadow:0 0 20px #ecad5a88}.hero .circle-ring:after{top:auto;left:auto;bottom:8%;right:19%;background:#7ab79d;box-shadow:0 0 20px #7ab79d99}.hero .device{width:274px;animation:phone-float 7s ease-in-out infinite;box-shadow:0 35px 65px #0006,0 0 0 1px #d8b68d77,16px 2px 35px #dd985324;border-color:#211a14;border-width:8px}.hero .device img{transition:opacity .25s ease,filter .35s}.hero .floating-book{top:76px;right:-10px;background:#fff6eaf4;border-color:#f6dbb2;color:#352419;box-shadow:0 8px 30px #0003;animation:book-label-float 7.8s ease-in-out infinite;z-index:3}.hero .floating-book strong{font-size:11px}.hero .floating-book span{color:#876a51}.hero .floating-note{bottom:78px;left:-24px;background:#fff6eaf8;color:#352419;box-shadow:0 17px 45px #0003;animation:note-float 8s ease-in-out infinite;z-index:3;border-color:#eacdb0}.hero .note-label{color:#a86836}.hero .note-signature{color:#957961;border-color:#dfcfbc}.hero .visual-caption{color:#d2ae8b}.hero .caption-line{background:#dca167}.kinetic-book{position:absolute;width:86px;height:114px;transform-style:preserve-3d;z-index:-1;filter:drop-shadow(14px 20px 15px #0005);pointer-events:none}.book-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#b87740;border-left:4px solid #784621;border-radius:2px 5px 5px 2px;box-shadow:inset 0 0 0 1px #ffe8c52b,inset 5px 0 8px #0002;backface-visibility:hidden;transform:translateZ(9px)}.book-front img{width:61px;opacity:.95}.book-edge{position:absolute;inset:3px 0 3px 4px;background:repeating-linear-gradient(0deg,#f5e4cc 0 1px,#d7c7af 1px 2px);transform:translateZ(-8px);border-radius:3px}.book-spine-edge{position:absolute;width:18px;top:0;bottom:0;left:-7px;background:#9e6032;transform:rotateY(-90deg);border-radius:2px}.kb-one{right:3px;bottom:120px;animation:book-one-float 10s ease-in-out infinite}.kb-two{left:40px;top:36px;width:68px;height:95px;animation:book-two-float 12s ease-in-out infinite}.kb-two .book-front{background:#335b4b;border-left-color:#233e33}.kb-two .book-spine-edge{background:#284637}.scene-particle{position:absolute;width:3px;height:3px;background:#f5bd72;border-radius:50%;pointer-events:none;animation:particle-drift var(--duration,12s) linear infinite;animation-delay:var(--delay,0s);opacity:0;z-index:1}.hero-marquee{position:relative;z-index:2;border-top:1px solid #e3b78b25;padding:19px 0;color:#d5b798;overflow:hidden;background:#1d150e36}.marquee-rail{display:flex;width:max-content;animation:marquee-travel 30s linear infinite}.marquee-set{display:flex;align-items:center;gap:44px;padding-right:44px}.marquee-set span{font-size:11px;letter-spacing:.1em}.marquee-set i{color:#df9d5d;font:italic 22px var(--serif);font-style:normal}.hero-marquee:hover .marquee-rail{animation-play-state:paused}.scroll-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#d68748,#f5cb8b,#477b67);z-index:100;transform-origin:left;transform:scaleX(var(--scroll-progress,0));width:100%;box-shadow:0 0 10px #d6874833}
.journey-section{background:var(--paper);padding-top:88px;padding-bottom:88px;border:0}.section-heading h2{font-size:50px}.section-heading .eyebrow{font-size:10px}.feature-grid{gap:22px}.feature-card{position:relative;overflow:hidden;min-height:345px;border-radius:17px;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--card-y,0deg)) rotateY(var(--card-x,0deg));transition:transform .35s ease,box-shadow .35s ease;border-color:#dbc3a5;background:linear-gradient(145deg,#f0e0c7,#e5c49d);box-shadow:0 10px 30px #63432310;color:#493221}.feature-card>*{position:relative;z-index:1}.feature-card:before{content:'';position:absolute;inset:0;background:radial-gradient(260px circle at var(--pointer-x,50%) var(--pointer-y,20%),#fff7e84d,transparent 75%);opacity:0;transition:opacity .3s;pointer-events:none}.feature-card:hover:before{opacity:1}.feature-card:hover{box-shadow:0 20px 40px #63432325}.feature-card h3{font-size:25px;font-weight:500}.feature-card p{font-size:12px;color:#795d45}.feature-card .feature-number{color:#8a5f37;font-size:9px}.feature-illustration{height:151px}.book-spine{animation:spine-sway 6s ease-in-out infinite;transform-origin:bottom}.b1{animation-delay:.2s;background:#9e5b2d}.b2{animation-delay:1s;background:#db9857}.b3{animation-delay:1.8s;background:#294f41}.b4{animation:lean-sway 7s ease-in-out infinite}.feature-card:nth-child(2){background:radial-gradient(ellipse at 90% 10%,#75452755,transparent 70%),#30221a;border-color:#4f3325;color:#fff0db}.feature-card:nth-child(2) p{color:#c5aa8f}.feature-card:nth-child(2) .feature-number{color:#dda575}.feature-card:nth-child(2) .quote-line{background:#80624b}.feature-card:nth-child(2) .line2{background:#e4a363;position:relative;overflow:hidden}.feature-card:nth-child(2) .line2:after{content:'';position:absolute;inset:0;background:#ffdfa155;transform:translateX(-110%);animation:underline-wipe 5s ease-in-out infinite}.feature-card:nth-child(2) .quote-mark{color:#e4a363;animation:quote-pulse 5s ease-in-out infinite}.feature-card:nth-child(2) .quote-small{color:#e1c4a8}.feature-card:nth-child(3){background:radial-gradient(ellipse at 0% 0%,#65897855,transparent 75%),#23493c;border-color:#426455;color:#eff3e5}.feature-card:nth-child(3) p{color:#b9ccbb}.feature-card:nth-child(3) .feature-number{color:#c9d6b6}.feature-card:nth-child(3) .swap-arrow{color:#e4bd7e;animation:swap-nudge 3.5s ease-in-out infinite}.feature-card:nth-child(3) .swap-book{box-shadow:4px 3px 0 #dacaae;animation:swap-book-left 7s ease-in-out infinite}.feature-card:nth-child(3) .right-book{animation:swap-book-right 7s ease-in-out infinite}.motion-reveal{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}.motion-reveal.is-visible{opacity:1;transform:none}.story-section{padding-top:25px;padding-bottom:100px;align-items:center}.story-index{display:block;position:relative;line-height:1.8;padding-top:0}.story-index>span{display:inline-block;margin-left:15px}.story-art{position:relative;margin-top:33px;height:240px;perspective:900px}.story-art:before{content:'';position:absolute;inset:16px 7px 10px;border-radius:50%;background:radial-gradient(ellipse,#c5976339,transparent 70%);animation:orb-breathe 7s ease-in-out infinite}.open-book{position:absolute;top:45px;left:18px;width:205px;height:145px;transform:rotate(-13deg) rotateX(17deg);animation:open-book-float 8s ease-in-out infinite;filter:drop-shadow(10px 16px 8px #5e3e2525)}.book-leaf{position:absolute;top:0;bottom:0;width:50%;background:#fff8eb;border:1px solid #e2ceb1;background-image:repeating-linear-gradient(0deg,transparent 0 13px,#a9875815 14px,transparent 15px);box-shadow:inset 8px 0 12px #5a3e1a08;border-radius:3px 3px 7px 3px}.leaf-left{left:0;transform-origin:right;transform:rotateY(-8deg)}.leaf-right{right:0;transform-origin:left;transform:rotateY(8deg);border-radius:3px 3px 3px 7px}.leaf-turn{right:0;transform-origin:left;animation:page-turn 7s ease-in-out infinite;background:#fff4e1;backface-visibility:visible;z-index:2}.book-leaf:after{content:'';position:absolute;top:24px;left:17px;right:14px;height:3px;background:#bc8b555c;box-shadow:0 17px 0 #bc8b5540,0 34px 0 #bc8b5540,0 51px 0 #bc8b5540}.book-ribbon{position:absolute;top:-8px;left:100px;width:8px;height:164px;background:#ae5f34;z-index:3;clip-path:polygon(0 0,100% 0,100% 100%,50% 95%,0 100%)}.story-art .story-label{position:absolute;bottom:3px;right:23px;font:italic 18px var(--serif);color:#9c693e;transform:rotate(-8deg)}.closing-section{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 16px 38px #3120161c;background:#2c2118}.closing-section:before{content:'';position:absolute;width:470px;height:470px;top:-230px;right:-50px;background:radial-gradient(circle,#ba763c55,transparent 70%);z-index:-1;animation:closing-glow 11s ease-in-out infinite}.closing-section:after{content:'';position:absolute;width:450px;height:450px;bottom:-310px;left:20px;background:radial-gradient(circle,#37695166,transparent 70%);z-index:-1;animation:closing-glow 13s ease-in-out infinite reverse}.button-paper:hover{background:#edc597}.header-join:hover{box-shadow:0 7px 25px #30251e22}.site-header{transition:box-shadow .3s}.site-header.has-scrolled{box-shadow:0 8px 24px #30251e0d}.preview-dock{background:var(--surface);border-color:var(--line)}
@keyframes ambient-shift{0%{transform:translate(-2%,-2%) rotate(-3deg)}100%{transform:translate(4%,3%) rotate(4deg)}}
@keyframes signal-breathe{50%{box-shadow:0 0 0 7px #e4ad6b08,0 0 20px #e4ad6b88}}
@keyframes headline-in{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes soft-in{from{transform:translateY(15px);opacity:0}to{transform:none;opacity:1}}
@keyframes orb-breathe{50%{transform:scale(1.07);opacity:.8}}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-17px) rotate(.8deg)}}
@keyframes book-label-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(10px) rotate(-1deg)}}
@keyframes note-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(-2deg)}}
@keyframes book-one-float{0%,100%{transform:translateY(0) rotateX(15deg) rotateY(-35deg) rotateZ(18deg)}50%{transform:translateY(-23px) rotateX(8deg) rotateY(-18deg) rotateZ(9deg)}}
@keyframes book-two-float{0%,100%{transform:translateY(0) rotateX(10deg) rotateY(35deg) rotateZ(-12deg)}50%{transform:translateY(18px) rotateX(19deg) rotateY(20deg) rotateZ(-20deg)}}
@keyframes particle-drift{0%{transform:translate(0,20px);opacity:0}20%,75%{opacity:.55}100%{transform:translate(30px,-95px);opacity:0}}
@keyframes marquee-travel{to{transform:translateX(-50%)}}
@keyframes spine-sway{50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes lean-sway{0%,100%{transform:rotate(12deg)}50%{transform:rotate(5deg)}}
@keyframes underline-wipe{0%,25%{transform:translateX(-110%)}65%,100%{transform:translateX(110%)}}
@keyframes quote-pulse{50%{transform:translateY(-4px)}}
@keyframes swap-nudge{50%{transform:translateX(5px);opacity:.6}}
@keyframes swap-book-left{0%,100%{transform:rotate(-10deg)}50%{transform:translateY(-7px) rotate(-3deg)}}
@keyframes swap-book-right{0%,100%{transform:rotate(9deg)}50%{transform:translateY(6px) rotate(15deg)}}
@keyframes open-book-float{50%{transform:translateY(-10px) rotate(-8deg) rotateX(10deg)}}
@keyframes page-turn{0%,15%{transform:rotateY(0)}55%,80%{transform:rotateY(-168deg)}100%{transform:rotateY(0)}}
@keyframes closing-glow{50%{transform:translate(-50px,60px) scale(1.2)}}
@media(max-width:1050px){.hero-stage{margin-inline:16px}.hero h1{font-size:67px}.hero .device{width:246px}.hero .floating-note{left:-3px}.hero .floating-book{right:-3px}.kb-one{right:3px;bottom:100px;width:70px;height:95px}.kb-two{left:15px;top:28px}.story-art{height:210px}.open-book{width:176px;height:125px;left:5px}.book-ribbon{left:86px;height:145px}}
@media(max-width:760px){.hero-stage{margin:10px 10px 0;border-radius:21px}.hero{min-height:0;padding-top:44px;padding-bottom:36px;gap:37px}.hero .eyebrow{font-size:8px}.hero h1{font-size:clamp(49px,9.6vw,69px);margin-bottom:24px}.hero .hero-description{font-size:13px}.hero .screen-selector{margin-top:33px}.hero .screen-selector button{font-size:10px}.hero .device{width:238px}.hero .floating-book{top:35px;right:0}.hero .floating-book strong{font-size:9px}.hero .floating-note{left:-3px;bottom:38px}.hero .hero-visual{min-height:545px}.kb-one{right:7px;bottom:100px;width:63px;height:85px}.kb-two{left:9px;top:20px;width:57px;height:80px}.book-front img{width:43px}.hero-marquee{padding:15px 0}.marquee-set{gap:28px;padding-right:28px}.marquee-set span{font-size:9px;letter-spacing:.07em}.marquee-set i{font-size:18px}.journey-section{padding-block:57px}.section-heading h2{font-size:39px}.section-heading .eyebrow{font-size:9px}.feature-card{min-height:206px}.feature-card h3{font-size:24px}.feature-card .feature-number{font-size:8px}.feature-illustration{height:140px}.story-section{padding-top:5px;padding-bottom:55px}.story-index{display:flex;flex-wrap:wrap;align-items:center;gap:0}.story-art{width:100%;height:155px;margin-top:5px}.open-book{width:190px;height:125px;left:calc(50% - 95px);top:10px}.book-ribbon{left:93px;height:143px}.story-art .story-label{right:calc(50% - 137px);bottom:3px;font-size:16px}.hero .visual-caption{font-size:7px;right:22px}.hero .floating-note p{font-size:22px}}
@media(max-width:390px){.hero h1{font-size:49px}.hero .hero-visual{min-height:508px}.hero .device{width:218px}.hero .floating-note{padding:14px 17px;bottom:31px}.hero .floating-note p{font-size:20px}.hero .floating-book{top:28px}.hero .floating-book img{width:32px;height:32px}.hero .floating-book strong{font-size:8px}.hero .floating-book span{font-size:8px}.kb-one{width:52px;height:74px;right:-2px}.kb-two{width:50px;height:67px;left:0;top:35px}.hero .screen-selector{gap:10px}.hero .screen-selector button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-stage:before,.hero .tiny-dot,.hero-line>span,.hero .hero-description,.hero-actions,.hero .visual-circle,.hero .circle-ring,.hero .device,.hero .floating-book,.hero .floating-note,.kinetic-book,.scene-particle,.marquee-rail,.book-spine,.b4,.line2:after,.quote-mark,.swap-arrow,.swap-book,.open-book,.leaf-turn,.closing-section:before,.closing-section:after{animation:none!important}.motion-reveal{opacity:1;transform:none}.hero-visual,.feature-card{transform:none!important}.hero-line>span{opacity:1;transform:none}}
