:root{--bg:#fff;--ink:#0a0a0a;--text:#111;--paper-top:#fcfcfc;--paper-bottom:#f2f2f2;--line:#0000000f;--folder-shadow:0 18px 44px #00000014;--file-shadow:0 10px 24px #0000000f;--spring:.48s cubic-bezier(.22, 1, .36, 1);--folder-width:270px;--header-height:96px}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:Suisse Int\'l,Suisse Intl,Helvetica Neue,Inter,Arial,sans-serif;overflow:hidden}body{height:100vh}.site-header{width:100%;height:var(--header-height);z-index:10;align-items:flex-start;padding:28px 44px 0;display:flex;position:fixed;top:0;left:0}.logo{align-items:center;display:flex}.logo img{opacity:0;width:auto;height:65px;animation:.6s .1s forwards fadeIn;display:block}.hero{place-items:center;height:100vh;padding:0 24px;display:grid}.folder-section{flex-direction:column;align-items:center;gap:8px;animation:.6s forwards fadeUp;display:flex;transform:translateY(-28px)}.folder-wrap{width:min(60vw, var(--folder-width));aspect-ratio:740/493;cursor:pointer;position:relative}.folder-svg-wrap{z-index:3;position:absolute;inset:0}.folder-svg{width:100%;height:100%;filter:drop-shadow(var(--folder-shadow));display:block}.folder-shape{fill:var(--ink)}.folder-arrow{z-index:4;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.folder-arrow-icon{color:#fff;opacity:.92;filter:drop-shadow(0 2px 8px #ffffff2e);width:34px;height:34px;animation:1.8s ease-in-out infinite arrowPulse;transform:translateY(8px)}.file{width:31%;height:58%;transition:transform var(--spring), box-shadow var(--spring);transform-origin:bottom;background:linear-gradient(#fff 0%,#f7f7f7 55%,#eee 100%);border:1px solid #0000000d;border-radius:14px;position:absolute;bottom:20%;box-shadow:0 10px 24px #0000000f,inset 0 1px #fff9}.file-logo{object-fit:contain;opacity:0;pointer-events:none;z-index:2;width:68%;height:68%;margin:auto;transition:opacity .28s,transform .28s;position:absolute;inset:0;transform:scale(.92)}.file:before{content:"";background:#0000000f;border-radius:2px;width:84%;height:1px;position:absolute;top:0;left:8%}.file:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#fff6 0%,#ffffff0d 100%);position:absolute;inset:0}.file-back{z-index:1;left:14%;transform:rotate(-7deg)}.file-middle{z-index:2;left:34.5%;transform:rotate(0)}.file-front{z-index:1;right:14%;transform:rotate(7deg)}.tagline{width:min(60vw, var(--folder-width));text-align:center;letter-spacing:-.04em;color:#9ca3af;opacity:0;margin:0;font-size:clamp(.98rem,1.45vw,1.12rem);font-weight:500;line-height:1.15;animation:.6s .25s forwards fadeIn}.tagline .blue{color:#3b82f6}.tagline .logic{color:#9ca3af}.tagline .purple{color:#a855f7}.tagline .green{color:#22c55e}.folder-wrap:hover .file-back,.folder-wrap.is-hovered .file-back{transform:translate(-14px,-34px)rotate(-10deg)}.folder-wrap:hover .file-middle,.folder-wrap.is-hovered .file-middle{transform:translateY(-54px)rotate(0)}.folder-wrap:hover .file-front,.folder-wrap.is-hovered .file-front{transform:translate(14px,-40px)rotate(9deg)}.folder-wrap:hover .file,.folder-wrap.is-hovered .file{box-shadow:0 18px 38px #00000014,inset 0 1px #fff9}.folder-wrap:hover .file-middle .file-logo,.folder-wrap.is-hovered .file-middle .file-logo{opacity:1;transform:scale(1)}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(-28px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes arrowPulse{0%,to{opacity:.78;transform:translateY(8px)}50%{opacity:1;transform:translateY(14px)}}@media (width<=768px){:root{--header-height:84px}.site-header{padding:20px 20px 0}.logo img{height:50px}.hero{padding:0 16px}.folder-wrap{width:min(64vw,260px)}.tagline{width:min(64vw,260px);font-size:.92rem}.folder-arrow-icon{width:28px;height:28px}.file{width:29%;height:55%;bottom:31%}.file-back{transform:translateY(-8px)rotate(-7deg)}.file-middle{transform:translateY(-16px)rotate(0)}.file-front{transform:translateY(-8px)rotate(7deg)}.folder-wrap:hover .file-back,.folder-wrap.is-hovered .file-back{transform:translate(-10px,-34px)rotate(-8deg)}.folder-wrap:hover .file-middle,.folder-wrap.is-hovered .file-middle{transform:translateY(-52px)rotate(0)}.folder-wrap:hover .file-front,.folder-wrap.is-hovered .file-front{transform:translate(10px,-36px)rotate(7deg)}}@media (width<=480px){.folder-wrap{width:min(72vw,250px)}.tagline{width:min(72vw,250px);font-size:.9rem}.logo img{height:42px}.folder-section{gap:8px;animation:.6s forwards fadeUpMobile;transform:translateY(-2px)}.file{width:29%;height:54%;bottom:26%}.folder-wrap:hover .file-back,.folder-wrap.is-hovered .file-back{transform:translate(-10px,-28px)rotate(-8deg)}.folder-wrap:hover .file-middle,.folder-wrap.is-hovered .file-middle{transform:translateY(-42px)rotate(0)}.folder-wrap:hover .file-front,.folder-wrap.is-hovered .file-front{transform:translate(10px,-30px)rotate(7deg)}@keyframes fadeUpMobile{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(-2px)}}}