/* AI girlfriend platform: app-like dark UI, character gallery, profiles, builder. */
.app-hero{padding:46px 0 26px;background:radial-gradient(900px 420px at 80% 0%,rgba(var(--accent-rgb),.22),transparent 65%),radial-gradient(700px 380px at 0% 100%,rgba(var(--accent-rgb),.08),transparent 60%)}
.app-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.app-hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;margin:0 0 16px;background:linear-gradient(90deg,var(--text) 30%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:19px;color:var(--muted);margin:0 0 24px;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.app-hero-stack{position:relative;height:500px}
.stack-card{position:absolute;width:52%;aspect-ratio:2/3;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);border:3px solid rgba(255,255,255,.08);text-decoration:none;transition:transform .3s}
.stack-card img{width:100%;height:100%;object-fit:cover}
.stack-card span{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;padding:5px 12px;border-radius:99px;font-weight:700;font-size:14px}
.stack-card.s1{left:24%;top:0;z-index:3}.stack-card.s2{left:0;top:12%;transform:rotate(-7deg);z-index:2}.stack-card.s3{right:0;top:14%;transform:rotate(7deg);z-index:1}
.stack-card:hover{transform:translateY(-6px) rotate(0);z-index:4}
@media(max-width:900px){.app-hero-grid{grid-template-columns:1fr}.app-hero-stack{height:380px;max-width:440px;margin:0 auto;width:100%}}
/* phones: headline, then her profile straight under it, then the buttons */
@media(max-width:900px){
  .app-hero{padding-top:18px}
  .app-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .app-hero-copy{display:contents}
  .app-hero .eyebrow{order:1;margin:0}
  .app-hero h1{order:2;margin:0;font-size:clamp(30px,8.5vw,42px)}
  .app-hero-grid .hero-deck{order:3}
  .app-hero .hero-ctas{order:4;margin:0;justify-content:center}
  .app-hero .hero-sub{order:5;margin:0;font-size:16px}
  .app-hero .chips{order:6}
}
@media(max-width:560px){.app-header .header-join{display:none}.app-header .header-actions{margin-left:auto}}
.gallery{margin-top:40px}
.filter-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:none}
.filter-chips button{flex:none;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 16px;border-radius:99px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.filter-chips button.on,.filter-chips button:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);border-color:transparent}
.girl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.girl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.girl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.girl-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.girl-card:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.6);box-shadow:0 16px 40px rgba(var(--accent-rgb),.18)}
.girl-img{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--surface2)}
.girl-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.girl-card:hover .girl-img img{transform:scale(1.04)}
.online{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
.online i{width:7px;height:7px;border-radius:50%;background:#22c55e}
.girl-over{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff}
.girl-over h3{margin:0;font-size:19px}.girl-over h3 span{font-weight:500;opacity:.8}.girl-over p{margin:2px 0 0;font-size:13px;opacity:.85;line-height:1.35}
.girl-chat{padding:11px;text-align:center;font-weight:700;font-size:14px;color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.girl-card:hover .girl-chat{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent)}
.features{margin-top:70px}
.steps{margin-top:60px}.steps h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin-bottom:20px}
.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;position:relative}
.step span{display:inline-flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);font-weight:800;margin-bottom:12px}
.step h3{font-size:18px;margin-bottom:4px}.step p{margin:0;color:var(--muted)}
@media(max-width:820px){.step-grid{grid-template-columns:1fr}}
/* profile */
.profile{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr) minmax(0,1fr);gap:26px;margin-top:10px;align-items:start}
.profile-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:2/3;background:var(--surface2);box-shadow:var(--shadow)}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-info h1{font-size:clamp(32px,4vw,46px);font-weight:800;margin:0}.profile-info h1 span{font-weight:500;color:var(--muted)}
.profile-tagline{font-size:18px;color:var(--muted);margin:6px 0 14px}
.profile-facts{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600}
.trait-row{margin-bottom:16px}.trait-row h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.profile-info .btn-block{margin:10px 0 8px}
.profile-chat{background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-head img{border-radius:50%;object-fit:cover;width:40px;height:40px}.chat-head div{display:flex;flex-direction:column;line-height:1.2}.chat-head span{font-size:12px;color:#22c55e;display:flex;align-items:center;gap:6px}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:300px}
.bubble{max-width:82%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45}
.bubble.her{align-self:flex-start;background:var(--surface2);border-bottom-left-radius:6px}
.bubble.you{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);border-bottom-right-radius:6px}
.chat-body .bubble.pop{animation:bubble-pop .35s cubic-bezier(.2,.9,.3,1.3) both}.chat-body .bubble.you.pop{transform-origin:right bottom}.chat-body .bubble.her.pop{transform-origin:left bottom}
.typing{display:flex;gap:4px;padding:14px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-input{display:flex;align-items:center;justify-content:space-between;margin:0 12px 12px;padding:12px 16px;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--muted)}
.chat-input b{color:var(--accent);font-size:18px}.chat-input:hover{border-color:var(--accent)}
.profile-bio{margin-top:40px}
@media(max-width:1000px){.profile{grid-template-columns:1fr 1fr}.profile-chat{grid-column:1/-1}}
@media(max-width:640px){.profile{grid-template-columns:1fr}}
/* builder */
.create-head{text-align:center;max-width:720px;margin:30px auto 30px}.create-head .hero-sub{margin:0 auto}
.create-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;align-items:start}
.builder{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:24px}
.builder-step{border:0;padding:0;margin:0 0 20px}
.builder-step legend{font-weight:800;font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.builder-step legend span{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgb),.16);color:var(--accent);font-size:13px}
.builder-opts{display:flex;flex-wrap:wrap;gap:8px}
.builder-opts label{cursor:pointer}.builder-opts input{position:absolute;opacity:0;pointer-events:none}
.builder-opts span{display:inline-block;padding:9px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);font-weight:600;font-size:14px;transition:all .15s}
.builder-opts input:checked+span{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);border-color:transparent}
.builder-preview{position:sticky;top:90px}
.preview-stack{position:relative;aspect-ratio:3/4}
.preview-stack img{position:absolute;width:62%;aspect-ratio:2/3;object-fit:cover;border-radius:20px;border:3px solid var(--surface);box-shadow:var(--shadow)}
.preview-stack .p1{left:19%;top:0;z-index:4}.preview-stack .p2{left:0;top:10%;transform:rotate(-8deg);z-index:3}.preview-stack .p3{right:0;top:10%;transform:rotate(8deg);z-index:2}.preview-stack .p4{left:19%;top:18%;z-index:1;opacity:.6}
@media(max-width:860px){.create-grid{grid-template-columns:1fr}.builder-preview{display:none}}