:root{
  --pink:#ff2f92;
  --pink-dark:#e91278;
  --blue:#46c8f2;
  --ink:#111113;
  --muted:#6d6d75;
  --canvas:#f6f6f4;
  --surface:#fff;
  --soft:#ededee;
  --line:#dedee2;
  --bubble:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --text:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow:0 18px 55px rgba(17,17,19,.08);
  --shadow-small:0 8px 28px rgba(17,17,19,.06);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:15px;
}

*{-webkit-tap-highlight-color:transparent}
html{background:var(--canvas);scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--text);font-size:15px;letter-spacing:-.01em}
button,input,textarea,select{font-family:inherit}
button{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease}
button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(70,200,242,.5);outline-offset:2px}
.bubble,h1,h2,h3,button,strong,.eyebrow,.tiny{font-family:var(--bubble)}
.bubble{letter-spacing:-.055em}
.app-shell{background:var(--canvas)}
.workspace{min-height:100vh}

/* Application chrome */
.topbar{height:76px;padding:10px 17px;background:rgba(246,246,244,.88);border-bottom:1px solid rgba(17,17,19,.07);backdrop-filter:blur(22px) saturate(1.35)}
.mobile-logo{width:126px;height:50px}
.mobile-logo img{width:148px;height:148px;left:-11px;top:-51px}
.top-actions{gap:8px}
.how-link,.login-btn,.round-btn{height:42px;border:1px solid var(--line);background:rgba(255,255,255,.82);box-shadow:0 3px 12px rgba(17,17,19,.03)}
.how-link{padding:0 14px}
.login-btn{border-radius:13px;background:var(--ink);color:#fff;padding:0 18px}
.round-btn{width:42px;font-size:18px}
main{max-width:1320px;padding:20px 17px 112px}
.view{animation:viewIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Shared page language */
.eyebrow{padding:8px 12px;background:var(--soft);border:1px solid rgba(17,17,19,.04);font-size:10px;letter-spacing:.1em}
.page-head{margin-bottom:26px}
.page-head h1{font-size:clamp(40px,10vw,58px);margin:18px 0 10px}
.page-head p{max-width:590px;font-size:14px;color:var(--muted)}
.primary-btn,.secondary-btn,.dark-btn,.light-btn,.text-btn{min-height:50px;border-radius:14px;padding:0 20px;font-size:12px;letter-spacing:-.01em}
.primary-btn{background:var(--pink);color:#111;box-shadow:0 9px 24px rgba(255,47,146,.2)}
.secondary-btn{background:#fff;border:1px solid var(--line)}
.dark-btn{background:var(--ink);color:#fff}
.light-btn{background:#fff;color:var(--ink)}
.text-btn{background:var(--blue);color:var(--ink)}
.primary-btn:hover,.dark-btn:hover,.light-btn:hover,.text-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-small)}

/* Home */
.home-slogan{padding:10px 0 4px}
.home-slogan h1{max-width:980px;font-size:clamp(38px,11vw,54px);line-height:.88;margin:8px 0 0}
.home-showcase{margin-top:24px}
.showcase-window{border-radius:var(--radius-xl);box-shadow:var(--shadow);border:1px solid rgba(17,17,19,.05)}
.showcase-slide{border-radius:var(--radius-xl)}
.showcase-slide>i,.slide-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(14px)}
.showcase-slide>i{font-family:var(--bubble);font-style:normal}
.showcase-slide.active .slide-copy{animation-duration:.7s}
.showcase-controls{margin-top:13px}
.showcase-controls>button{background:#fff;border-color:var(--line);color:var(--ink)}
.showcase-controls>button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Filters and inputs */
.filter-row,.category-strip,.choice-row{gap:8px;margin-bottom:20px;scrollbar-width:none}
.filter-row::-webkit-scrollbar,.category-strip::-webkit-scrollbar,.choice-row::-webkit-scrollbar{display:none}
.chip,.choice{padding:11px 16px;border:1px solid transparent;background:#e9e9eb;color:#555;font-size:11px}
.chip.active,.choice.active{background:var(--ink);color:#fff}
.searchbox{height:52px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-small)}
.searchbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(70,200,242,.15)}
.searchbox input{font-size:14px}

/* Content cards */
.needs-list,.offer-grid,.company-grid,.anonymous-grid,.feed{gap:14px}
.need-card,.offer,.company-card,.anonymous-card,.post,.form-card,.settings-card,.price-card{border:1px solid rgba(17,17,19,.08);border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 1px 0 rgba(17,17,19,.02);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.need-card,.offer,.company-card,.anonymous-card,.post{padding:20px}
.need-card:hover,.offer:hover,.company-card:hover,.anonymous-card:hover,.post:hover,.price-card:hover{transform:translateY(-3px);border-color:rgba(17,17,19,.14);box-shadow:var(--shadow-small)}
.category-badge,.match-score,.verified,.post-type,.company-state{padding:7px 10px;background:#dff7ff;border:1px solid rgba(70,200,242,.18)}
.need-meta span,.offer-meta span{background:#f2f2f3;border:1px solid rgba(17,17,19,.04)}
.card-action,.company-actions button,.post-actions button{min-height:38px;border-radius:11px;padding:9px 13px}
.card-action.primary,.company-actions button:first-child{background:var(--ink);color:#fff}
.offer-price{font-size:31px;letter-spacing:-.04em}
.company-logo{background:#f1f1f2;border:1px solid var(--line)}

/* Matches */
.match-layout{gap:18px}
.explain-card{border-radius:var(--radius-xl);padding:26px;background:var(--ink);box-shadow:var(--shadow)}
.explain-card .lock{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;background:#fff;color:#111}
.explain-card h2{font-size:35px}
.split strong{border:1px solid #343438;background:#242427}

/* Feature areas */
.influencer-hero,.business-hero,.profile-hero{border-radius:var(--radius-xl);box-shadow:var(--shadow);overflow:hidden}
.influencer-hero{background:var(--pink);padding:27px 22px}
.business-hero{background:var(--ink)}
.profile-hero{background:linear-gradient(145deg,#ff429d,#f61b82)}
.wallet{border:1px solid rgba(17,17,19,.08);box-shadow:var(--shadow-small)}
.wallet strong{letter-spacing:-.05em}
.steps,.business-flow{gap:12px;margin-top:16px}
.steps article,.business-flow article{background:#fff;border-color:rgba(17,17,19,.08);box-shadow:0 1px 0 rgba(17,17,19,.02)}
.steps b,.business-flow b{background:var(--ink);color:#fff}
.empty-card{background:#fff;border:1px dashed #c7c7cc}

/* Community */
.community-layout{gap:18px}
.rules{background:#e9e9eb;border:1px solid rgba(17,17,19,.06);border-radius:var(--radius-xl)}
.person{background:var(--blue);border:1px solid rgba(17,17,19,.06)}

/* Profile and settings */
.avatar{width:62px;height:62px;border:1px solid rgba(17,17,19,.08);box-shadow:var(--shadow-small)}
.profile-grid{gap:14px}
.form-card,.settings-card{padding:21px}
.form-card label,.sheet label{color:#35353a}
.form-card input,.form-card select,.sheet input,.sheet select,.sheet textarea{border:1px solid var(--line);background:#f7f7f7;border-radius:13px;padding:13px 14px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.form-card input:focus,.form-card select:focus,.sheet input:focus,.sheet select:focus,.sheet textarea:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(70,200,242,.14)}
.notice,.permission{background:#ededee;border:1px solid rgba(17,17,19,.05)}
.settings-card>button{min-height:66px;border-bottom-color:#ededee}
.settings-card>button:hover{padding-left:7px}
.toggle-row input{appearance:none;width:46px;height:26px;border-radius:999px;background:#d4d4d7;position:relative;flex:0 0 auto;transition:.25s}
.toggle-row input:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0002;transition:.25s}
.toggle-row input:checked{background:var(--pink)}
.toggle-row input:checked:after{transform:translateX(20px)}

/* Business */
.pricing-head{margin-top:46px}
.pricing-grid{gap:14px}
.price-card{padding:25px}
.price-card.featured{border:2px solid var(--pink);box-shadow:0 16px 45px rgba(255,47,146,.12)}
.price-card button{height:49px;border-radius:13px}
.fee-model{background:#e9e9eb;border:1px solid rgba(17,17,19,.06);border-radius:var(--radius-xl)}
.fee-split span{border:1px solid rgba(17,17,19,.06)}

/* How it works */
.how-title{padding:18px 0 32px}
.how-title h1{font-size:clamp(48px,12vw,70px)}
.bubble-world{gap:14px}
.info-bubble{box-shadow:0 14px 35px rgba(17,17,19,.08)}
.info-bubble p{font-family:var(--text);font-size:12px;line-height:1.5}
.model-bubble{box-shadow:0 10px 28px rgba(17,17,19,.08)}
.model-bubble:hover{transform:translateY(-4px) rotate(-1deg)}

/* Dialogs */
.modal{background:rgba(10,10,12,.62);backdrop-filter:blur(7px)}
.sheet{border:1px solid rgba(255,255,255,.25);box-shadow:0 26px 90px rgba(0,0,0,.24)}
.close{background:#ededee;border:1px solid var(--line)}
.auth-sheet>img{width:122px}
.toast{border:1px solid #333;box-shadow:0 14px 35px rgba(0,0,0,.2)}

/* Mobile navigation */
.mobile-nav{padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);border-top:1px solid rgba(17,17,19,.09);backdrop-filter:blur(22px) saturate(1.4)}
.mobile-nav button{min-height:53px;border-radius:13px;font-size:9px}
.mobile-nav span{font-size:22px}
.mobile-nav button.active{background:#f0f0f1;color:var(--ink)}
.mobile-nav button:nth-child(2){background:var(--pink);color:#111}

@media(min-width:700px){
  main{padding:32px 30px 90px}
  .page-head h1{font-size:62px}
  .home-slogan h1{font-size:72px}
  .need-card,.offer,.company-card,.anonymous-card,.post{padding:22px}
  .influencer-hero{padding:38px}
}

@media(min-width:1000px){
  .app-shell{grid-template-columns:252px 1fr}
  .sidebar{padding:118px 16px 24px;background:#fff;border-right:1px solid rgba(17,17,19,.08)}
  .side-logo{left:25px;top:23px;width:180px}
  .side-nav{gap:5px}
  .side-item{min-height:50px;border-radius:13px;padding:0 12px;color:#606067;font-size:12px}
  .side-item span{font-family:var(--text);font-size:19px}
  .side-item:hover{background:#f2f2f3;color:var(--ink);transform:translateX(2px)}
  .side-item.active{background:var(--ink);color:#fff}
  .side-item.action-pink{background:var(--pink);color:#111;box-shadow:0 10px 24px rgba(255,47,146,.18)}
  .side-claim{color:#999}
  .topbar{height:82px;padding:14px 34px}
  main{padding:42px 40px 80px}
  .home-slogan h1{font-size:clamp(72px,6.8vw,100px);max-width:1000px}
  .home-showcase{margin-top:34px}
  .page-head h1{font-size:clamp(62px,6vw,82px)}
  .influencer-hero,.business-hero{padding:48px}
  .profile-hero{padding:40px}
}

@media(max-width:699px){
  .topbar{height:70px}
  main{padding-top:15px}
  .home-slogan h1{font-size:clamp(35px,10.7vw,46px)}
  .showcase-window,.showcase-slide{border-radius:24px}
  .showcase-slide{min-height:246px}
  .slide-copy b{font-size:clamp(35px,11.5vw,45px)}
  .page-head{gap:14px}
  .page-head .primary-btn,.page-head .secondary-btn{width:100%}
  .profile-hero{display:block}
  .profile-hero .avatar{margin-bottom:22px}
  .info-bubble{min-height:255px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}