@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#201c35;--paper:#fbf7ed;--muted:#6b657c;--line:#29223e;--mint:#b5f1d1;--peach:#ffba9e;--coral:#ff786c;--purple:#b9a6fc;--yellow:#f8d86c;--sky:#afe6fa;--radius:25px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.5 'DM Sans',system-ui,-apple-system,sans-serif;overflow-x:hidden}
body:before{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;background-image:radial-gradient(#504068 0.6px,transparent .6px);background-size:26px 26px;opacity:.16}
button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%}
::selection{background:#ddc9ff}
:focus-visible{outline:3px solid #6054d6;outline-offset:4px}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.nav{border-bottom:2px solid rgba(32,28,53,.1)}
.nav .container{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:inline-flex;align-items:center;gap:11px;font-weight:900;font-size:1.07rem;letter-spacing:-.05em}
.logo-icon{display:grid;place-items:center;width:41px;height:41px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--coral);font:800 1.35rem 'Space Grotesk',sans-serif;transform:rotate(-8deg)}
.nav-links{display:flex;align-items:center;gap:25px;font-size:.88rem;font-weight:800}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav-status{display:inline-flex;align-items:center;gap:9px;border:2px solid var(--ink);border-radius:100px;padding:8px 13px;font-size:.71rem;font-weight:900;background:white;letter-spacing:.05em;box-shadow:3px 3px 0 var(--ink)}
.live-dot{width:9px;height:9px;background:#27b17a;box-shadow:0 0 0 3px #d7f6e5;border-radius:50%;flex-shrink:0}
.kicker{font-size:.77rem;letter-spacing:.13em;text-transform:uppercase;font-weight:900}
.kicker .marker{display:inline-block;background:var(--yellow);border-radius:7px;padding:6px 10px;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
h1,h2,h3{font-family:'Space Grotesk','Arial Rounded MT Bold',system-ui,sans-serif;letter-spacing:-.065em;line-height:1.04}
h1{font-size:clamp(4rem,9vw,7.9rem);margin:14px 0 20px;max-width:800px}
h2{font-size:clamp(2.4rem,5vw,4.5rem);margin:0}
h3{font-size:clamp(1.55rem,2.4vw,2.3rem);margin:0}
p{margin:0}
.lead{font-size:clamp(1.03rem,1.5vw,1.25rem);line-height:1.68;max-width:570px;color:#554f64}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;background:#fff;color:var(--ink);font-size:.94rem;font-weight:900;line-height:1.2;text-align:center;padding:16px 21px;min-height:54px;border:2px solid var(--ink);border-radius:15px;box-shadow:5px 5px 0 var(--ink);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:5px 5px 0 #a49cbd}
.btn-coral{background:var(--coral)}
.btn-yellow{background:var(--yellow)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1.5px solid var(--ink);border-radius:100px;font-size:.68rem;text-transform:uppercase;letter-spacing:.065em;font-weight:900;background:white;white-space:nowrap}
.tag.green{background:var(--mint)}.tag.pink{background:#ffd7e4}.tag.purple{background:#e7dfff}.tag.yellow{background:var(--yellow)}
.section-header{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:26px}
.section-header .aside{font-size:.88rem;max-width:240px;color:var(--muted);font-weight:700;text-align:right}
.footer{border-top:2px solid rgba(32,28,53,.15);padding:29px 0 34px;margin-top:80px}
.footer .container{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:.84rem;font-weight:700}
.link-arrow{font-size:1.7rem;line-height:1;font-weight:600}
.hero{padding:85px 0 76px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:28px}
.hero-copy{z-index:1}
.hero-title .wiggle{display:inline-block;color:#6b55bb;transform:rotate(-4deg);text-shadow:5px 6px 0 #e9dfff}
.hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:31px}
.hero-art{min-height:510px;position:relative;isolation:isolate;display:grid;place-items:center}
.art-orbit{position:absolute;width:min(95%,500px);aspect-ratio:1;border-radius:50%;background:#eae1ff;border:3px dashed #a898e1;box-shadow:0 0 0 23px #f0e9fc;z-index:-1}
.art-window{width:min(75%,355px);height:350px;border:3px solid var(--ink);background:#fff;border-radius:23px;box-shadow:15px 17px 0 var(--ink);transform:rotate(-8deg);overflow:hidden;position:relative}
.art-top{height:47px;border-bottom:3px solid var(--ink);background:#ffdc7a;display:flex;gap:8px;align-items:center;padding:0 17px}
.art-top span{height:12px;width:12px;background:var(--ink);border-radius:50%}
.art-scene{height:calc(100% - 47px);background:#c8f2dd;position:relative;overflow:hidden}
.art-sun{position:absolute;top:27px;left:83px;font-size:6rem;transform:rotate(7deg);animation:float 5s ease-in-out infinite}
.art-label{position:absolute;bottom:28px;left:27px;background:white;border:2px solid var(--ink);padding:14px 18px;border-radius:14px;transform:rotate(7deg);font-weight:900;letter-spacing:-.03em;box-shadow:5px 5px 0 var(--ink)}
.art-planet{position:absolute;top:1%;right:4%;background:var(--coral);border:3px solid var(--ink);width:92px;height:92px;border-radius:50%;transform:rotate(16deg);display:grid;place-items:center;font-size:2.8rem;box-shadow:5px 5px 0 var(--ink)}
.art-star{position:absolute;bottom:12%;left:4%;font-size:5rem;color:#7a64c8;animation:float 4s ease-in-out infinite reverse}
.art-tape{position:absolute;bottom:5%;right:1%;background:var(--yellow);border:2px solid var(--ink);padding:12px 17px;transform:rotate(11deg);font-size:.82rem;font-weight:900;box-shadow:4px 4px 0 var(--ink)}
.projects{padding:25px 0 65px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.project{min-height:350px;border:2.5px solid var(--ink);border-radius:27px;padding:26px 27px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:7px 8px 0 var(--ink);transition:transform .2s,box-shadow .2s;background:white}
a.project:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:10px 13px 0 var(--ink)}
.project--disney{background:#b8e9ff}.project--movie{background:#ffd5c5}.project--idea{background:#e1d7fb}.project--future{background:#fbe9a6}
.project-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.project-art{font-size:5.6rem;line-height:1.2;text-align:right;filter:drop-shadow(5px 6px 0 rgba(32,28,53,.12));transform:rotate(9deg);margin:-8px 12px -10px 0;user-select:none}
.project-content{position:relative;z-index:1}
.project-kicker{font-size:.73rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.project p{font-size:.98rem;line-height:1.5;color:#4d455c;max-width:390px;margin-top:11px;font-weight:600}
.project-bottom{margin-top:22px;display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:.9rem}
.project-bottom .arrow{display:grid;place-items:center;background:white;border:2px solid var(--ink);border-radius:50%;height:43px;width:43px;font-size:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.project-feature{grid-column:span 2;min-height:330px;display:grid;grid-template-columns:1fr 300px;align-items:center}
.project-feature .project-art{font-size:8rem;text-align:center}
.project-feature .project-bottom{margin-top:27px}
.project[aria-disabled="true"]{cursor:default;box-shadow:4px 4px 0 #a7a0af;border-style:dashed}
.project[aria-disabled="true"] .project-bottom{color:#726b7e}
.idea-section{padding:35px 0 20px}
.idea-box{background:#27213d;border:3px solid var(--ink);border-radius:32px;padding:40px 45px;color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:center;box-shadow:9px 10px 0 #c8b7ec;position:relative;overflow:hidden}
.idea-box:after{content:"✳";position:absolute;font-size:13rem;line-height:1;color:#40395b;right:-34px;top:-70px;pointer-events:none}
.idea-box h2{font-size:clamp(2.1rem,3.9vw,3.7rem)}
.idea-box p{color:#d9d3e5;font-size:1rem;margin-top:15px;line-height:1.65}
.idea-card{position:relative;z-index:1;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:22px;padding:26px 25px;box-shadow:7px 8px 0 #a897ce;transform:rotate(3deg)}
.idea-card strong{font-size:1.45rem;display:block;font-family:'Space Grotesk',sans-serif;letter-spacing:-.045em;line-height:1.2;margin:12px 0}
.idea-card p{color:#514b60;font-size:.89rem;margin:0 0 22px}
.idea-card .btn{width:100%;background:var(--yellow)}
.app-hero{padding:70px 0 30px}
.app-hero h1{font-size:clamp(3.8rem,8vw,6.8rem)}
.app-hero p.lead{margin-top:16px}
.back{font-size:.87rem;font-weight:900;display:inline-flex;align-items:center;gap:9px;margin-bottom:24px}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.app-panel{background:white;border:3px solid var(--ink);border-radius:28px;box-shadow:8px 9px 0 var(--ink);padding:30px}
.app-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.note{font-size:.83rem;color:var(--muted);line-height:1.55;font-weight:600}
@keyframes float{50%{transform:translateY(-12px) rotate(12deg)}}
@media(max-width:800px){
 .nav .container{min-height:71px}
 .nav-links{gap:12px}
 .hero{padding:64px 0 42px}
 .hero-grid{grid-template-columns:1fr}
 .hero-copy{text-align:center}
 .hero-copy .lead{margin-left:auto;margin-right:auto}
 .hero-actions{justify-content:center}
 .hero-art{min-height:350px;max-width:490px;width:100%;margin:0 auto}
 .art-window{height:275px;max-width:275px}
 .art-sun{font-size:5rem;left:60px}
 .art-planet{width:74px;height:74px;font-size:2.2rem;right:9%}
 .art-star{font-size:3.5rem}
 .project-feature{grid-template-columns:1fr 220px}
 .project-feature .project-art{font-size:6rem}
 .idea-box{grid-template-columns:1fr}
}
@media(max-width:610px){
 .container{padding:0 20px}
 .nav-links .desktop-nav{display:none}
 .nav-status{font-size:.62rem;padding:7px 9px}
 .nav .container{gap:6px}
 .logo{font-size:1rem}
 .logo-icon{height:36px;width:36px}
 h1{font-size:clamp(3.9rem,15vw,6rem)}
 .hero{padding:51px 0 30px}
 .lead{font-size:1rem}
 .hero-actions{gap:13px}
 .btn{padding:15px 17px;font-size:.88rem}
 .hero-art{min-height:310px}
 .art-window{height:252px;max-width:235px}
 .art-sun{left:47px;top:23px;font-size:4.5rem}
 .art-label{font-size:.84rem;left:15px;bottom:22px}
 .art-planet{right:7%;top:4%}
 .projects{padding:20px 0 45px}
 .section-header{align-items:start;flex-direction:column;gap:12px}
 .section-header .aside{text-align:left}
 .cards{grid-template-columns:1fr;gap:22px}
 .project{min-height:298px;padding:22px}
 .project-feature{grid-column:auto;display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:stretch}
 .project-feature .project-art{text-align:right;font-size:5rem;margin-top:-55px;margin-right:5px;min-height:70px}
 .project-feature .project-content{width:100%}
 .project-art{font-size:4.7rem}
 .project p{font-size:.92rem}
 .idea-section{padding-top:20px}
 .idea-box{padding:30px 23px;gap:25px}
 .idea-card{transform:rotate(1.5deg)}
 .app-hero{padding:43px 0 20px}
 .app-hero h1{font-size:clamp(3.55rem,13vw,5.6rem)}
 .app-panel{padding:20px;box-shadow:5px 6px 0 var(--ink)}
 .footer{margin-top:60px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}