body{margin:0;font-family:'Instrument Sans',system-ui,sans-serif;background:#F7F4EE;color:#14201F;-webkit-font-smoothing:antialiased}
a{color:#0F6E66;text-decoration:none}a:hover{color:#0B524C}
h1,h2,h3{font-family:'Fraunces','Georgia',serif;font-weight:500;letter-spacing:-0.025em}
button{font-family:inherit}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wordin{from{opacity:0;transform:translateY(0.35em) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes orbit{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.06)}}
@keyframes orbit2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,110,102,0.55)}70%{box-shadow:0 0 0 9px rgba(15,110,102,0)}}
@keyframes pulseAmber{0%,100%{box-shadow:0 0 0 0 rgba(200,130,58,0.6)}70%{box-shadow:0 0 0 9px rgba(200,130,58,0)}}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.wordin{display:inline-block;animation:wordin .55s cubic-bezier(.2,.7,.2,1) both}
.drift{animation:drift 6s ease-in-out infinite}
.orb1{animation:orbit 16s ease-in-out infinite}
.orb2{animation:orbit2 20s ease-in-out infinite}
.pulse{animation:pulse 1.8s ease-out infinite}
.pulse-amber{animation:pulseAmber 1.4s ease-out infinite}
.sweep{animation:sweep 1.6s ease-in-out infinite}
.spin{animation:spin 1.2s linear infinite}
.bounce{animation:bounce 1.8s ease-in-out infinite}
.ticker-track{animation:ticker 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.panel{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.lift{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.lift:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,32,31,0.12);border-color:#0F6E66}
.btn{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background-color .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,32,31,0.18)}
.btn::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.35),rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn:hover::after{animation:shine .8s ease}
.play{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.play:hover .play-btn{transform:scale(1.12)}
.play-btn{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.chapter{transition:background-color .25s,border-color .25s,transform .25s;cursor:pointer}
.chapter:hover{transform:translateX(4px)}
.tile{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s,color .35s,border-color .35s}
.tile:hover{transform:translateY(-6px);background:#14201F;color:#F7F4EE;border-color:#14201F}
.tile:hover svg{stroke:#8FCBC4}
.tile .hint{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease,margin-top .35s ease;margin-top:0}
.tile:hover .hint{max-height:24px;opacity:1;margin-top:4px}
.tile .num{position:absolute;top:14px;right:18px;font-size:12px;letter-spacing:.08em;color:#B5B0A6;transition:color .35s}
.tile:hover .num{color:#8FCBC4}
.row{transition:background-color .35s,padding-left .35s}
.row:hover{background:#FFFFFF;padding-left:112px}
.row .row-icon{transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .35s}
.row:hover .row-icon{transform:rotate(-8deg) scale(1.1);background:#0F6E66}
.row:hover .row-icon svg{stroke:#FFFFFF}
.row .row-icon svg{transition:stroke .35s}
.tab{transition:background-color .25s,color .25s,transform .2s;cursor:pointer}
.tab:hover{transform:translateY(-1px)}
.chip{transition:background-color .2s,color .2s,border-color .2s;cursor:pointer}
.mark{position:absolute;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rise,.wordin,.drift,.orb1,.orb2,.pulse,.pulse-amber,.sweep,.spin,.bounce,.ticker-track,.panel{animation:none}.reveal{opacity:1;transform:none}}
.if{display:contents}.if[hidden]{display:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
button{cursor:pointer}
.tab{background:transparent;color:#4B5451}.tab.sel{background:#14201F;color:#F7F4EE}
.chip{background:#FFFFFF;border-color:#E3DED4;color:#14201F}.chip.sel{background:#E6F1EF;border-color:#0F6E66;color:#0F6E66}
.chapter{background:#FFFFFF;border-color:#E3DED4;color:#14201F;font-family:inherit}.chapter .ch-num{color:#0F6E66}
.chapter.sel{background:#14201F;border-color:#14201F;color:#F7F4EE}.chapter.sel .ch-num{color:#8FCBC4}
a:focus-visible,button:focus-visible{outline:3px solid #14201F;outline-offset:3px}
.page{max-width:1600px;margin:0 auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:1180px){
#top{grid-template-columns:minmax(0,1fr)!important;padding:40px 48px 56px!important}
.visual{max-width:640px;width:100%}
#walkthrough{grid-template-columns:minmax(0,1fr)!important}
#modules>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:760px){
.nav{flex-wrap:wrap;gap:12px 24px;padding:20px 20px!important}
.nav>div{flex-wrap:wrap;gap:8px 22px!important}
.nav a{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
#top{padding:24px 20px 48px!important;gap:40px!important}
#top p{font-size:19px!important}
#top .rise>div{flex-wrap:wrap}
.visual{height:auto!important;padding:0 14px 14px 0;box-sizing:border-box}
.vshadow{inset:14px 0 0 14px!important}
.vcard{position:relative!important;inset:auto!important;padding:16px!important;min-height:600px}
.vcard>div{flex-wrap:wrap}
.vcard .tab{padding:8px 9px!important;font-size:12px!important}
.vcard .panel>div{flex-wrap:wrap}
.vcard .panel>div[style*="grid"]{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))!important}
.ticker-track{font-size:19px!important;gap:32px!important}
#demo{margin:40px 12px 0!important;padding:36px 22px!important;border-radius:28px!important}
#demo>div{flex-wrap:wrap;gap:20px}
#demo h2,#modules h2{font-size:40px!important}
#demo .play{height:260px!important}
#modules{padding:64px 20px 48px!important}
#modules>div{grid-template-columns:minmax(0,1fr)!important}
.tile .hint{max-height:24px;opacity:1;margin-top:4px;color:#0F6E66!important}
.tile:hover .hint{color:#8FCBC4!important}
#why .row{grid-template-columns:64px minmax(0,1fr)!important;gap:20px!important;padding:32px 20px!important}
#why .row:hover{padding-left:20px!important}
#why .row-icon{width:64px!important;height:64px!important;border-radius:20px!important}
#why .row-icon svg{width:28px;height:28px}
#why h3{font-size:30px!important}
#speed{margin:56px 12px 0!important;padding:36px 24px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:28px!important}
#speed span[style*="76px"]{font-size:48px!important}
#walkthrough{padding:64px 20px 56px!important;gap:32px!important}
#walkthrough h2{font-size:40px!important}
#walkthrough .play{height:320px!important}
#walkthrough .play .panel{padding:0 20px!important}
#contact{margin:0 12px!important;grid-template-columns:minmax(0,1fr)!important}
#contact>div{padding:32px 24px!important;border-radius:28px!important;min-height:260px!important}
#contact h2{font-size:34px!important}
footer{flex-wrap:wrap;gap:8px 24px;padding:36px 20px 40px!important}
footer>div{flex-wrap:wrap;gap:4px 22px!important}
footer a{min-height:44px;display:inline-flex;align-items:center}
}