
:root{
  --pink:#f04f9a;
  --pink-dark:#d93680;
  --ink:#202a3a;
  --muted:#657083;
  --cream:#fffafb;
  --line:#e9e9ef;
  --dark:#202837;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream)}
a{text-decoration:none;color:inherit}
.navbar{height:78px;background:#fff;display:flex;align-items:center;gap:28px;padding:0 4%;border-bottom:1px solid #eee;position:sticky;top:0;z-index:20}
.logo{font-size:32px;font-weight:800;letter-spacing:-1.8px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.paw{font-size:34px;color:var(--pink)}
.logo span{color:var(--pink)}
.navlinks{display:flex;gap:34px;margin:auto}
.navlinks a{font-weight:600;color:#3e4654;padding:27px 0;position:relative}
.navlinks a.active:after{content:"";height:3px;background:var(--pink);position:absolute;left:0;right:0;bottom:0;border-radius:3px}
.nav-actions{display:flex;align-items:center;gap:12px}
.icon{font-size:22px;padding:8px}
.btn{border:0;border-radius:999px;padding:13px 25px;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.btn-outline{background:#fff;border:1px solid var(--ink)}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:var(--pink-dark)}
.hero{min-height:505px;background:#27211f;position:relative;overflow:hidden;display:flex;align-items:center}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(12,12,15,.78) 0%,rgba(12,12,15,.54) 43%,rgba(12,12,15,.1) 100%),url("hero.png");background-size:cover;background-position:center 57%;filter:saturate(.95)}
.hero-content{position:relative;z-index:1;color:white;width:min(650px,90%);margin-left:6%;padding:60px 0}
.hero h1{font-size:clamp(58px,7vw,92px);line-height:.95;margin:0 0 18px;font-weight:900;letter-spacing:-4px}
.hero h1 span{color:#ff68ad}
.hero h2{font-size:clamp(28px,3vw,42px);margin:0 0 18px;letter-spacing:-1.5px}
.hero h2 span{color:#ff68ad}
.hero p{font-size:20px;line-height:1.5;max-width:520px;color:#f6f6f7;margin:0 0 28px}
.features{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;padding:42px 5%;gap:0}
.feature{text-align:center;padding:8px 28px;border-right:1px solid var(--line)}
.feature:last-child{border:0}
.feature-icon{font-size:38px;margin-bottom:12px}
.feature h3{margin:0 0 8px;font-size:18px}
.feature p{margin:0;color:var(--muted);line-height:1.45}
.creators{padding:44px 4.5% 58px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.section-head h2{font-size:34px;margin:0;letter-spacing:-1px}
.view{color:var(--pink);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#151a22;border-radius:12px;overflow:hidden;position:relative;min-height:230px;color:white;box-shadow:0 5px 18px rgba(31,38,50,.08)}
.card-image{height:230px;background-image:var(--bg);background-size:cover;background-position:center;filter:saturate(.9)}
.card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(5,8,14,.92))}
.card-info{position:absolute;z-index:2;bottom:14px;left:14px;right:14px}
.creator{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:20px}
.creator strong{display:block;font-size:15px}
.creator small{display:block;color:#d9dee8;margin-top:3px}
.verified{color:#4da7ff}
.footer{background:var(--dark);color:#fff;padding:42px 5% 20px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:30px}
.footer .logo{font-size:28px}
.footer-links{display:flex;gap:26px;color:#e3e7ef}
.footer-bottom{border-top:1px solid #485061;margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;color:#b9c0cc;font-size:13px}
.auth-page{min-height:100vh;background:linear-gradient(135deg,#fff7fb,#f5efff);display:grid;place-items:center;padding:30px}
.auth-card{width:min(430px,100%);background:#fff;border:1px solid #eee;border-radius:22px;padding:34px;box-shadow:0 20px 60px rgba(40,30,50,.1)}
.auth-card .logo{justify-content:center;margin-bottom:24px}
.auth-card h1{text-align:center;margin:0 0 8px}
.auth-card>p{text-align:center;color:var(--muted);margin:0 0 26px}
.form-group{margin-bottom:16px}
label{display:block;font-weight:700;margin-bottom:7px}
input{width:100%;padding:13px 14px;border:1px solid #d9dce4;border-radius:10px;font:inherit}
input:focus{outline:3px solid #ffd4e9;border-color:var(--pink)}
.full{width:100%;justify-content:center}
.auth-note{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}
.auth-note a{color:var(--pink-dark);font-weight:800}
@media(max-width:850px){
 .navlinks{display:none}.navbar{justify-content:space-between}.grid{grid-template-columns:repeat(2,1fr)}
 .features{grid-template-columns:repeat(2,1fr)}.feature{border-bottom:1px solid var(--line)}.feature:nth-child(2){border-right:0}
}
@media(max-width:560px){
 .navbar{padding:0 18px}.logo{font-size:25px}.nav-actions .icon{display:none}.nav-actions{gap:5px}.btn{padding:10px 16px}
 .hero{min-height:560px}.hero-content{margin-left:7%;padding-top:70px}.hero h1{font-size:55px;letter-spacing:-3px}
 .grid{grid-template-columns:1fr}.features{grid-template-columns:1fr;padding:25px 8%}.feature{border-right:0;border-bottom:1px solid var(--line);padding:22px 8px}.feature:last-child{border-bottom:0}
 .footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}.footer-links{flex-wrap:wrap}
}

.about-hero{background:linear-gradient(135deg,#fff3f9,#f7f0ff);padding:82px 7% 76px;text-align:center}.about-hero .eyebrow{color:#f04f9a;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:14px;margin-bottom:12px}.about-hero h1{font-size:clamp(48px,7vw,78px);line-height:1;letter-spacing:-3px;margin:0 0 18px}.about-hero h1 span{color:#f04f9a}.about-hero p{max-width:720px;margin:0 auto;color:#657083;font-size:20px;line-height:1.6}.about-content{max-width:1050px;margin:0 auto;padding:70px 5%}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:65px}.about-card{background:#fff;border:1px solid #ececf2;border-radius:20px;padding:34px;box-shadow:0 10px 35px rgba(31,38,50,.06)}.about-card .about-icon{font-size:38px;margin-bottom:12px}.about-card h2{margin:0 0 10px;font-size:25px}.about-card p{margin:0;color:#657083;line-height:1.65;font-size:16px}.about-story{text-align:center;max-width:780px;margin:0 auto 65px}.about-story h2{font-size:36px;margin:0 0 15px}.about-story p{color:#657083;font-size:18px;line-height:1.7}.about-cta{background:#202837;color:#fff;border-radius:24px;padding:48px 30px;text-align:center}.about-cta h2{font-size:34px;margin:0 0 10px}.about-cta p{color:#cbd1dc;max-width:600px;margin:0 auto 24px;line-height:1.6}@media(max-width:700px){.about-grid{grid-template-columns:1fr}.about-hero{padding:62px 7%}}
