@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --black:#010101; --white:#f4eeee; --pink:#9c3f37; --red:#791e19; --pale:#6d2c2d; --line:#973739; --muted:#b88989; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--white); background:#010101; font-family:'DM Sans',sans-serif; position:relative; overflow-x:hidden; }
body:before,body:after { content:''; position:fixed; inset:-20%; pointer-events:none; z-index:0; background-repeat:no-repeat; will-change:background-position,opacity,transform,filter; }
body:before { background-image:radial-gradient(circle 44vw at 50% 48%,rgba(121,30,25,.62) 0%,rgba(141,37,35,.48) 34%,rgba(156,63,55,.24) 58%,transparent 76%); filter:blur(55px); opacity:.92; animation:red-glow-drift 13s ease-in-out infinite alternate; }
body:after { background-image:radial-gradient(circle 37vw at 52% 51%,rgba(185,44,43,.3) 0%,rgba(156,30,33,.2) 42%,transparent 72%); filter:blur(78px); opacity:.78; animation:red-glow-pulse 8s ease-in-out infinite alternate; }
.page-shell { max-width:1280px; margin:0 auto; padding:0 6vw; overflow:hidden; position:relative; z-index:1; } .side-nav { position:fixed; left:22px; top:50%; transform:translate(-34px,-50%); display:flex; flex-direction:column; gap:10px; z-index:10; opacity:0; pointer-events:none; transition:transform .35s ease,opacity .35s ease; } body.nav-visible .side-nav, .side-nav:hover, .side-nav:focus-within { opacity:1; pointer-events:auto; transform:translate(0,-50%); } .side-nav-link { position:relative; width:148px; min-height:42px; display:flex; align-items:center; gap:12px; color:#d6aaaa; text-decoration:none; border:1px solid rgba(156,63,55,.72); border-radius:999px; background:linear-gradient(105deg,rgba(121,30,25,.88),rgba(109,44,45,.5)); box-shadow:inset 0 0 18px rgba(1,1,1,.2),0 0 0 rgba(156,63,55,0); backdrop-filter:blur(12px); padding:0 13px; transition:transform .25s, color .25s, background .25s, border-color .25s, box-shadow .25s; overflow:hidden; } .side-nav-link:before { content:''; position:absolute; left:0; width:3px; height:0; border-radius:0 3px 3px 0; background:var(--white); transition:height .25s; } .side-nav-link b { white-space:nowrap; font:600 10px 'Space Grotesk'; letter-spacing:.13em; text-transform:uppercase; transition:opacity .2s; } .side-nav-link:hover,.side-nav-link.active { transform:translateX(5px); color:var(--white); background:linear-gradient(105deg,#791e19,#9c3f37); border-color:var(--pink); box-shadow:inset 0 0 18px rgba(1,1,1,.25),0 0 18px rgba(156,63,55,.24); } .side-nav-link:hover:before,.side-nav-link.active:before { height:100%; } .side-nav-number { color:var(--muted); font:600 10px 'Space Grotesk'; letter-spacing:.08em; min-width:19px; }
.topbar { height:92px; display:flex; align-items:center; justify-content:flex-start; border:0; border-radius:0 0 26px 26px; position:relative; z-index:2; padding:0 18px; background:rgba(1,1,1,.24); }
.brand { color:var(--white); display:flex; gap:12px; align-items:center; text-decoration:none; font-size:11px; line-height:1.1; letter-spacing:.05em; text-transform:uppercase; }
.brand strong { font-size:13px; letter-spacing:.01em; }
.brand-photo { width:37px; height:37px; object-fit:cover; border-radius:50%; border:0; }
.top-link { color:var(--white); text-decoration:none; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--pink); padding-bottom:5px; }
.hero { min-height:665px; display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:5vw; padding:74px 2% 94px; position:relative; border:0; border-radius:32px; overflow:hidden; margin-top:28px; background:rgba(1,1,1,.22); }
.eyebrow { color:var(--muted); font:700 10px 'Space Grotesk'; letter-spacing:.18em; text-transform:uppercase; margin:0 0 23px; }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pink); margin:0 8px 1px 0; box-shadow:0 0 0 4px var(--pale); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; }
h1 { font-size:clamp(58px,8.5vw,116px); line-height:.88; letter-spacing:-.08em; font-weight:600; margin-bottom:37px; text-shadow:0 0 35px rgba(156,63,55,.18); }
h1 em,h2 em { font-style:normal; color:var(--pink); }
.hero-text { max-width:390px; line-height:1.7; font-size:16px; color:var(--muted); }
.hero-actions { display:flex; gap:17px; align-items:center; margin-top:35px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:193px; padding:15px 22px; border-radius:999px; text-decoration:none; font-weight:700; font-size:12px; letter-spacing:.02em; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-3px); } .button-primary { color:white; background:var(--pink); } .button-primary:hover { background:var(--red); }
.button-quiet { color:var(--white); min-width:140px; } .button-quiet span { color:var(--pink); }
.hero-art { position:relative; min-height:440px; display:grid; place-items:center; } .hero-art:before { content:''; position:absolute; inset:13% 2%; border:1px solid rgba(244,238,238,.16); border-radius:32px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.015)); backdrop-filter:blur(12px); }
.kitty-card { width:min(360px,75vw); aspect-ratio:1; background:var(--pink); border-radius:47% 45% 50% 48%; position:relative; transform:rotate(5deg); animation:kitty-spin 18s ease-in-out infinite; box-shadow:18px 20px 0 var(--red),0 0 55px rgba(156,63,55,.45); overflow:hidden; z-index:1; } .kitty-card img { width:100%; height:100%; object-fit:cover; display:block; }
.face { position:absolute; inset:24% 14% 18%; background:var(--white); border-radius:48% 48% 51% 51%; }
.ear { width:78px; height:96px; position:absolute; top:-30px; background:var(--white); border:5px solid var(--black); z-index:-1; } .ear-left { left:50px; transform:rotate(-31deg); border-radius:4px 85% 10% 80%; } .ear-right { right:50px; transform:rotate(31deg); border-radius:85% 4px 80% 10%; }
.bow { position:absolute; z-index:2; top:45px; right:38px; display:flex; align-items:center; } .bow i { display:block; width:48px; height:38px; border:4px solid var(--black); background:var(--red); } .bow i:first-child { border-radius:80% 8% 75% 20%; transform:rotate(27deg); } .bow i:nth-child(2) { border-radius:8% 80% 20% 75%; transform:rotate(-27deg); } .bow b { width:19px; height:19px; border-radius:50%; background:var(--black); position:absolute; left:39px; }
.eye,.nose { position:absolute; background:var(--black); border-radius:50%; } .eye { width:12px; height:17px; top:42%; } .eye-left { left:24%; } .eye-right { right:24%; } .nose { width:16px; height:12px; background:#f1bd23; top:53%; left:calc(50% - 8px); }
.whisker { position:absolute; width:50px; height:2px; background:var(--black); } .whisker-one { left:7%; top:48%; transform:rotate(13deg); } .whisker-two { left:7%; top:57%; transform:rotate(-11deg); } .whisker-three { right:7%; top:48%; transform:rotate(-13deg); } .whisker-four { right:7%; top:57%; transform:rotate(11deg); }
.face-label { position:absolute; bottom:3%; width:100%; text-align:center; font:700 17px 'Space Grotesk'; line-height:.8; letter-spacing:-.08em; text-transform:lowercase; } .face-label strong { font-size:25px; }
.orbit,.orbit-two { display:none; } .sticker { position:absolute; z-index:3; color:var(--black); font-size:44px; } .sticker-star { left:4%; top:12%; color:var(--pink); transform:rotate(-15deg); } .sticker-heart { right:0; bottom:15%; color:var(--red); font-size:32px; transform:rotate(15deg); }
.section { padding:120px 7%; border:0; border-radius:32px; overflow:hidden; margin-top:28px; background:rgba(1,1,1,.22); } .section-heading h2 { font-size:clamp(42px,6vw,76px); line-height:.95; letter-spacing:-.07em; margin:0; } .section-heading h2 span { color:var(--pink); }
.about-grid { display:grid; grid-template-columns:minmax(0,.78fr) minmax(320px,1fr); gap:6vw; margin-top:62px; align-items:center; } .large-copy { font:500 clamp(20px,2.35vw,31px)/1.18 'Space Grotesk'; letter-spacing:-.05em; max-width:500px; } .large-copy strong { color:var(--pink); font-weight:500; } .about-photo-wrap { width:100%; max-width:500px; justify-self:end; aspect-ratio:4/3; overflow:hidden; border-radius:26px; background:#6d2c2d; box-shadow:0 18px 40px rgba(1,1,1,.32); transform:rotate(2deg); } .about-photo { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; } .about-photo-wrap:hover .about-photo { transform:scale(1.05); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:57px; } .info-card { min-height:300px; padding:31px; background:#6d2c2d; border:0; border-radius:24px; position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s; } .info-card:hover { transform:translateY(-5px); box-shadow:0 16px 35px rgba(1,1,1,.28); } .info-card:after { content:'♡'; position:absolute; right:-14px; bottom:-32px; color:#973739; font:140px Georgia; transform:rotate(-20deg); } .card-dark { background:#791e19; color:white; } .card-dark:after { color:#973739; } .card-number { color:#d09b9b; font:11px 'Space Grotesk'; } .card-icon { color:var(--pink); font-size:25px; margin:32px 0 24px; } .info-card h3 { font-size:24px; line-height:1; letter-spacing:-.06em; margin-bottom:17px; } .info-card p { color:#e0bcbc; max-width:220px; font-size:13px; line-height:1.5; position:relative; z-index:1; } .card-dark p { color:#b4aaad; }
.join { min-height:390px; position:relative; background:linear-gradient(115deg,#8d2523,#791e19 60%,#9c3f37); padding:94px 9%; border:0; border-radius:32px; overflow:hidden; box-shadow:inset 0 0 70px rgba(1,1,1,.22); } .join h2 { color:white; font-size:clamp(58px,8vw,104px); line-height:.84; margin-bottom:24px; } .join p:not(.eyebrow) { color:#f0caca; font-size:15px; } .button-dark { background:var(--black); color:white; margin-top:20px; width:223px; border:1px solid rgba(255,255,255,.22); } .join-kitty { position:absolute; right:8%; top:10%; width:260px; height:240px; min-height:240px; transform:rotate(-8deg); z-index:2; } .join-kitty img { position:absolute; right:0; top:-30px; width:260px; height:260px; max-width:none; object-fit:contain; display:block; visibility:visible; opacity:1; filter:drop-shadow(0 0 26px rgba(1,1,1,.5)); }
.footer { display:flex; justify-content:flex-start; padding:27px 0 32px; color:#b88989; font-size:10px; letter-spacing:.06em; text-transform:uppercase; } .footer b { color:var(--pink); font-size:14px; }
@keyframes kitty-spin { 0%,100% { transform:rotate(5deg); } 50% { transform:rotate(-5deg); } }
@keyframes red-glow-drift { 0% { background-position:47% 46%; transform:scale(.88) translate3d(-2%,1%,0); filter:blur(48px) hue-rotate(-8deg); opacity:.68; } 50% { background-position:53% 52%; transform:scale(1.12) translate3d(1%,-1%,0); filter:blur(66px) hue-rotate(7deg); opacity:1; } 100% { background-position:49% 54%; transform:scale(.98) translate3d(2%,1%,0); filter:blur(52px) hue-rotate(-2deg); opacity:.82; } }
@keyframes red-glow-pulse { 0% { background-position:48% 51%; transform:scale(.84) translate3d(1%,1%,0); filter:blur(72px) hue-rotate(-12deg); opacity:.48; } 50% { background-position:54% 46%; transform:scale(1.18) translate3d(-1%,-1%,0); filter:blur(92px) hue-rotate(12deg); opacity:.95; } 100% { background-position:50% 53%; transform:scale(.96) translate3d(1%,-1%,0); filter:blur(74px) hue-rotate(-3deg); opacity:.7; } }
@keyframes orbit-drift { from { transform:rotate(-31deg) translateX(-8px); opacity:.45; } to { transform:rotate(-21deg) translateX(8px); opacity:1; } } @keyframes orbit-drift-reverse { from { transform:rotate(30deg) translateY(8px); opacity:.35; } to { transform:rotate(19deg) translateY(-8px); opacity:.85; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }
@media (max-width:720px) { .page-shell { padding:0 22px 0 58px; } .side-nav { left:10px; transform:translate(-34px,-50%); } body.nav-visible .side-nav,.side-nav:hover,.side-nav:focus-within { transform:translate(0,-50%); } .side-nav-link { width:148px; } .side-nav-link b { display:block; } .topbar { height:76px; } .hero { display:block; padding:65px 0 70px; } h1 { font-size:67px; } .hero-art { min-height:390px; margin-top:45px; } .kitty-card { width:285px; } .ear { width:61px; height:75px; top:-25px; } .ear-left { left:38px; } .ear-right { right:38px; } .bow { top:36px; right:30px; transform:scale(.78); transform-origin:top right; } .about-grid { display:grid; grid-template-columns:1fr; gap:35px; margin-top:42px; } .about-photo-wrap { width:100%; max-width:none; justify-self:stretch; transform:rotate(0); } .section { padding:75px 0; } .cards { grid-template-columns:1fr; gap:12px; } .info-card { min-height:235px; } .join { padding:65px 28px; } .join-kitty { opacity:1; right:0; top:27%; transform:scale(.82) rotate(-8deg); z-index:2; } .footer { gap:15px; flex-direction:column; } }