:root { --ink:#17151e; --paper:#f6f1e7; --blue:#2952ff; --red:#ff5b42; --lime:#d0ef46; --yellow:#ffc72e; --mono:'DM Mono',monospace; --display:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--ink); font-family:var(--display); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.noise { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:.1; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.cursor-glow { width:270px; height:270px; border-radius:50%; position:fixed; z-index:2; pointer-events:none; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(208,239,70,.2),transparent 67%); mix-blend-mode:screen; transition:width .25s,height .25s; }
.toast { position:fixed; z-index:30; right:28px; bottom:24px; padding:13px 18px; background:var(--lime); font:500 11px var(--mono); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transform:translateY(150%); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.toast.show { transform:translateY(0); }
.hero { min-height:100vh; position:relative; overflow:hidden; background:var(--paper); }
.nav { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,78px); border-bottom:2px solid var(--ink); position:relative; z-index:5; }
.wordmark { font-weight:700; font-size:27px; letter-spacing:-1.8px; }.wordmark span { color:var(--red); }
.nav-links { display:flex; align-items:center; gap:clamp(18px,3vw,42px); font:500 11px var(--mono); }.nav-links a { position:relative; }.nav-links a:not(.nav-contact)::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .25s; }.nav-links a:hover::after { transform:scaleX(1); }.nav-contact { background:var(--ink); color:var(--paper); padding:11px 15px; transition:background .2s,color .2s, transform .2s; }.nav-contact:hover { background:var(--lime); color:var(--ink); transform:rotate(-2deg); }.nav-contact span { color:var(--lime); }.nav-contact:hover span { color:var(--ink); }
.hero-grid { width:min(1400px,100%); min-height:calc(100vh - 125px); margin:auto; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; padding:50px clamp(24px,6vw,100px) 86px; }
.hero-copy { position:relative; z-index:3; }.eyebrow { margin:0 0 22px; font:500 11px var(--mono); letter-spacing:.04em; }.live-dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:var(--red); margin-right:7px; animation:blink 1.8s infinite; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:25px; font-size:clamp(66px,8.4vw,138px); letter-spacing:-.09em; line-height:.76; font-weight:700; } h1 em,h2 em { color:var(--red); font-style:normal; position:relative; } h1 em::after { content:''; position:absolute; left:2%; width:98%; height:9px; background:var(--lime); z-index:-1; bottom:4px; transform:rotate(-2deg); }
.intro { max-width:390px; font-size:18px; line-height:1.35; letter-spacing:-.04em; }.hero-actions { display:flex; align-items:center; gap:22px; margin-top:30px; }.button { font:500 12px var(--mono); padding:15px 18px; display:inline-flex; gap:18px; align-items:center; border:2px solid var(--ink); }.button-primary { background:var(--blue); color:white; box-shadow:5px 5px 0 var(--ink); transition:transform .2s,box-shadow .2s; }.button-primary:hover { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }.button span { font-size:17px; }.sound-toggle { cursor:pointer; border:0; background:transparent; font:500 10px var(--mono); display:flex; align-items:center; gap:9px; }.sound-bars { display:flex; height:17px; align-items:center; gap:2px; }.sound-bars i { display:block; width:3px; height:7px; background:var(--ink); transition:height .25s; }.sound-toggle.active .sound-bars i:nth-child(1){height:15px;animation:bars .7s infinite alternate}.sound-toggle.active .sound-bars i:nth-child(2){height:10px;animation:bars .55s infinite alternate-reverse}.sound-toggle.active .sound-bars i:nth-child(3){height:17px;animation:bars .8s infinite alternate}
.hero-visual { height:min(68vw,670px); min-height:500px; position:relative; align-self:end; perspective:900px; }.hero-visual::before { content:''; width:83%; aspect-ratio:1; position:absolute; right:4%; top:9%; background:var(--yellow); border-radius:50%; border:2px solid var(--ink); }.hero-art { position:absolute; z-index:2; width:108%; height:100%; object-fit:contain; object-position:center bottom; right:-4%; bottom:-2%; filter:drop-shadow(10px 12px 0 rgba(23,21,30,.12)); transition:transform .5s cubic-bezier(.2,.7,.2,1); image-rendering:auto; }.hero-visual:hover .hero-art { transform:translateY(-9px) rotate(1deg); }
.pixel-card { position:absolute; z-index:3; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font:500 10px/1.25 var(--mono); transition:transform .3s; }.card-top { background:var(--lime); padding:12px; right:1%; top:10%; transform:rotate(7deg); }.card-top b { font-size:12px; }.card-side { background:var(--red); color:var(--paper); padding:10px; left:-3%; top:45%; transform:rotate(-9deg); }.card-side span { font-size:25px; line-height:1; }.hero-visual:hover .card-top { transform:translate(8px,-10px) rotate(12deg); }.hero-visual:hover .card-side { transform:translate(-5px,8px) rotate(-14deg); }.pixel-sticker { position:absolute; z-index:3; display:grid; place-items:center; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transition:transform .3s; }.sticker-1 { background:var(--red); width:53px;height:53px; border-radius:50%; font-size:31px; left:5%; top:16%; }.sticker-2 { background:var(--paper); width:65px;height:48px; border-radius:47%; font:700 25px var(--display); right:0; bottom:22%; transform:rotate(9deg); }.hero-visual:hover .sticker-1 { transform:rotate(20deg) scale(1.12); }.hero-visual:hover .sticker-2 { transform:rotate(-7deg) scale(1.09); }.orbit { position:absolute; z-index:1; width:86%; height:67%; border:2px dashed var(--ink); border-radius:50%; left:8%; top:16%; animation:spin 18s linear infinite; }.orbit span { position:absolute; top:-15px; left:13%; font-size:38px; }.orbit-two { width:96%; height:75%; left:0; top:10%; animation-direction:reverse; animation-duration:24s; }.orbit-two span { left:auto; right:9%; top:auto; bottom:-13px; color:var(--red); font-size:45px; }.art-caption { font:500 9px/1.3 var(--mono); position:absolute; z-index:4; right:10%; bottom:3%; transform:rotate(-3deg); }
.marquee { height:39px; position:absolute; bottom:0; overflow:hidden; width:100%; background:var(--ink); color:var(--paper); display:flex; align-items:center; white-space:nowrap; font:500 11px var(--mono); }.marquee div { animation:marquee 25s linear infinite; }
.work-section { position:relative; background:var(--blue); padding:100px clamp(24px,6vw,100px) 115px; color:var(--paper); overflow:hidden; }.work-section::after { content:'✦'; position:absolute; color:var(--lime); font-size:300px; right:-82px; top:10px; transform:rotate(15deg); opacity:.9; }.section-heading { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; margin-bottom:55px; }.section-heading .eyebrow { align-self:start; }.section-heading h2 { font-size:clamp(56px,9vw,132px); line-height:.75; letter-spacing:-.09em; margin:0; }.section-heading h2 em { color:var(--lime); }.section-heading h2 em::after { content:''; position:absolute; background:var(--red); width:105%; height:10px; bottom:2px; left:-2%; z-index:-1; }.section-note { font:500 10px var(--mono); margin:0 9vw 3px 0; }.product-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.product { display:flex; flex-direction:column; color:var(--ink); min-height:390px; border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); transition:transform .25s, box-shadow .25s; overflow:hidden; }.product:hover { transform:translate(-5px,-7px) rotate(-1deg); box-shadow:14px 16px 0 var(--ink); }.product-yellow { background:var(--yellow); }.product-red { background:var(--red); }.product-blue { background:var(--paper); }.product-number { padding:13px 14px; font:500 10px var(--mono); border-bottom:2px solid var(--ink); }.product-art { min-height:275px; flex:1; position:relative; display:grid; place-items:center; overflow:hidden; }.product-footer { padding:14px; display:flex; justify-content:space-between; align-items:center; border-top:2px solid var(--ink); }.product-footer h3 { margin:0; font-size:20px; letter-spacing:-.07em; }.product-footer span { font-size:25px; transition:transform .25s; }.product:hover .product-footer span { transform:rotate(45deg); }.loop-art { background:var(--blue); color:var(--paper); }.loop-art span { z-index:1; font-size:clamp(52px,7vw,92px); font-weight:700; letter-spacing:-.13em; transform:rotate(-11deg); transition:transform .4s; }.loop-art i { position:absolute; width:90px; aspect-ratio:1; border:21px solid var(--lime); border-radius:50%; }.loop-art i:nth-of-type(1){left:9%;top:14%}.loop-art i:nth-of-type(2){right:5%;bottom:-12%;border-color:var(--red)}.loop-art i:nth-of-type(3){right:10%;top:10%;width:40px;border-width:9px;border-color:var(--yellow)}.product:hover .loop-art span { transform:rotate(9deg) scale(1.1); }.book-art { background:var(--paper); }.book-art div { width:68%; height:73%; background:var(--red); color:var(--paper); border:2px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:16px; font-size:clamp(30px,4vw,50px); line-height:.78; font-weight:700; letter-spacing:-.1em; transition:transform .4s; }.book-art b { color:var(--lime); }.book-art span { position:absolute; font-size:58px; color:var(--blue); right:10%; top:8%; }.product:hover .book-art div { transform:rotate(9deg) translateY(-8px); }.tiny-art { background:var(--lime); }.face { font-size:clamp(55px,8vw,105px); letter-spacing:-.15em; padding-bottom:10px; transition:transform .3s; }.tiny-star { position:absolute; font-style:normal; color:var(--red); font-size:75px; left:11%; top:9%; }.tiny-star.second { color:var(--blue); font-size:39px; left:auto; right:12%; top:auto; bottom:12%; }.product:hover .face { transform:scale(1.17) rotate(-5deg); }
.about-section { background:var(--paper); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(45px,10vw,170px); align-items:center; padding:110px clamp(24px,11vw,190px); }.about-portrait { background:var(--yellow); min-height:430px; position:relative; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--ink); overflow:hidden; display:grid; place-items:center; }.portrait-orbit { position:absolute; width:min(78%,320px); aspect-ratio:1; border:2px dashed var(--ink); border-radius:50%; display:grid; place-items:start center; padding-top:15px; animation:spin 20s linear infinite; font:500 8px var(--mono); letter-spacing:.08em; white-space:nowrap; }.portrait-face { width:190px; aspect-ratio:1; border-radius:50%; background:var(--red); display:grid; place-items:center; font-size:80px; border:2px solid var(--ink); z-index:1; }.about-portrait p { position:absolute; z-index:2; bottom:12px; left:15px; font:500 10px/1.3 var(--mono); }.about-copy h2 { font-size:clamp(44px,5vw,76px); line-height:.83; letter-spacing:-.09em; margin:0 0 30px; }.about-copy h2 em { color:var(--blue); }.about-copy h2 em::after { content:''; position:absolute; background:var(--lime); height:8px; width:102%; bottom:2px; left:-1%; z-index:-1; }.about-copy > p:not(.eyebrow) { max-width:500px; font-size:18px; letter-spacing:-.03em; line-height:1.45; }.skill-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:27px; }.skill-list span { font:500 10px var(--mono); border:1.5px solid var(--ink); padding:7px 9px; transition:background .2s,transform .2s; }.skill-list span:hover { background:var(--lime); transform:rotate(-3deg); }
.contact-section { min-height:620px; position:relative; overflow:hidden; padding:95px clamp(24px,9vw,140px) 27px; display:flex; flex-direction:column; background:var(--red); color:var(--ink); }.contact-section .eyebrow { position:relative; z-index:2; }.contact-section h2 { position:relative; z-index:2; font-size:clamp(50px,8.3vw,125px); line-height:.77; letter-spacing:-.1em; margin:25px 0 auto; }.contact-section h2 a { text-decoration:underline; text-decoration-thickness:8px; text-decoration-color:var(--lime); text-underline-offset:7px; }.contact-section h2 em { color:var(--paper); }.contact-spark { position:absolute; font-size:clamp(300px,45vw,680px); right:-8%; top:-9%; color:var(--yellow); transform:rotate(14deg); transition:transform .5s; }.contact-section:hover .contact-spark { transform:rotate(28deg) scale(1.06); }.footer-line { position:relative; z-index:2; padding-top:18px; border-top:2px solid var(--ink); display:flex; justify-content:space-between; font:500 10px var(--mono); }.footer-line a:hover { text-decoration:underline; }
@keyframes blink { 50% { opacity:.15; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes marquee { to { transform:translateX(-50%); } } @keyframes bars { to { transform:scaleY(.45); } }
@media (max-width:760px) { .cursor-glow{display:none}.nav{height:68px;padding:0 20px}.nav-links a:not(.nav-contact){display:none}.hero-grid{grid-template-columns:1fr;padding:55px 24px 78px;min-height:auto}.hero-copy{z-index:4}.hero-visual{height:470px;min-height:0;margin:0 -20px -18px}.hero-visual::before{width:80%;right:9%;top:13%}.intro{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:19px}.card-side{left:2%;top:52%}.card-top{right:3%;top:10%}.sticker-2{right:3%;bottom:20%}.art-caption{right:12%;bottom:2%}.section-heading{display:block;margin-bottom:42px}.section-heading h2{margin:32px 0 18px}.section-note{margin:0}.work-section{padding:72px 24px}.product-grid{grid-template-columns:1fr;gap:24px}.product{min-height:350px}.about-section{grid-template-columns:1fr;padding:72px 25px;gap:65px}.about-portrait{min-height:340px}.portrait-face{width:150px;font-size:60px}.contact-section{min-height:530px;padding:70px 24px 20px}.contact-section h2{margin-top:32px}.footer-line{gap:15px;flex-wrap:wrap;line-height:1.4}.contact-spark{top:0;right:-27%;}.nav-contact{padding:10px 12px}.toast{right:15px;bottom:15px} }

.product-grid-duo { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; }
.loop-art small,.tiny-art small { position:absolute; z-index:2; bottom:23px; font:500 10px var(--mono); letter-spacing:.08em; }
@media (max-width:760px) { .product-grid-duo { grid-template-columns:1fr; } }

.socials { position:relative; z-index:2; display:flex; gap:12px; flex-wrap:wrap; margin:38px 0 35px; }
.social-link { min-width:170px; height:58px; display:flex; align-items:center; gap:10px; padding:7px 11px 7px 7px; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); transition:transform .22s,box-shadow .22s,background .22s; }
.social-link b { width:40px; height:40px; display:grid; place-items:center; background:var(--ink); color:var(--paper); font:700 14px var(--mono); border:2px solid var(--ink); }
.social-link span { font:500 10px/1.05 var(--mono); letter-spacing:.04em; }.social-link small { font-size:8px; color:var(--red); }.social-link i { margin-left:auto; font-style:normal; font-size:20px; transition:transform .22s; }
.social-link:hover { background:var(--lime); transform:translate(-3px,-4px) rotate(-2deg); box-shadow:8px 9px 0 var(--ink); }.social-link:hover b { background:var(--blue); }.social-link:hover i { transform:rotate(45deg); }.social-link:focus-visible { outline:3px solid var(--paper); outline-offset:4px; }
@media (max-width:760px) { .socials { gap:10px; margin:30px 0 28px; }.social-link { min-width:150px; flex:1; } }

/* Contact finale: a smooth, fully-contained star entrance and a clean two-line CTA. */
.contact-section h2 a { text-decoration:none; }
.contact-section .cta-lets { position:relative; display:inline-block; z-index:1; }
.contact-section .cta-lets::after { content:''; position:absolute; z-index:-1; left:-2%; right:-2%; height:6px; bottom:-6px; background:var(--lime); transform:rotate(-1deg); }
.contact-spark { width:clamp(240px,33vw,470px); height:auto; right:clamp(24px,6vw,96px); top:clamp(18px,4vw,55px); color:initial; transform-origin:center; opacity:0; pointer-events:none; overflow:visible; }
.contact-spark path { fill:var(--yellow); stroke:#ffde66; stroke-width:14; stroke-linejoin:round; }
.contact-section.in-view .contact-spark { animation:star-arrival 1.15s cubic-bezier(.18,.9,.26,1.15) .1s forwards; }
.contact-section:hover .contact-spark { filter:drop-shadow(7px 8px 0 rgba(23,21,30,.14)); }
@keyframes star-arrival { 0% { opacity:0; transform:translate(-135%,135%) rotate(-145deg) scale(.18); } 62% { opacity:1; transform:translate(12%,-8%) rotate(21deg) scale(1.08); } 100% { opacity:1; transform:translate(0,0) rotate(10deg) scale(1); } }
@media (max-width:760px) { .contact-spark { width:210px; top:28px; right:17px; }.contact-section .cta-lets::after { height:5px; bottom:-4px; } }
@media (prefers-reduced-motion:reduce) { .contact-section.in-view .contact-spark { animation:none; opacity:1; transform:rotate(10deg); } }