:root{
  --bg:#0D0E14;
  --surface:#161822;
  --surface-alt:#1E212D;
  --border:#2A2D3B;
  --text:#F4F3F7;
  --muted:#9A97AC;
  --pink:#FF4D7A;
  --pink-dim:#B93A5C;
  --teal:#33E0C2;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:28px;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Unbounded',sans-serif; line-height:1.15; margin:0; font-weight:600;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul,ol{margin:0; padding:0; list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- notice ---------- */
.notice{background:var(--surface-alt); border-bottom:1px solid var(--border); color:var(--muted); font-size:13px; text-align:center; padding:9px 16px;}
.notice strong{color:var(--text); font-weight:600;}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:40; background:rgba(13,14,20,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.brand{font-size:22px; display:flex; align-items:center; gap:9px;}
.brand .dot{width:11px; height:11px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(51,224,194,0.18);}
.nav-links{display:flex; gap:32px; font-size:14.5px; color:var(--muted);}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text);}
.nav-cta{background:var(--pink); color:#fff; font-weight:600; font-size:14.5px; padding:11px 22px; border-radius:999px; border:none; cursor:pointer; transition:background .18s ease;}
.nav-cta:hover{background:#ff6690;}

/* ---------- generic section rhythm ---------- */
section{padding:96px 0;}
.section-alt{background:var(--surface);}
.eyebrow-num{color:var(--pink); font-family:'Unbounded',sans-serif; font-size:14px; font-weight:600;}
h2{font-size:clamp(28px,3.2vw,40px); max-width:20ch; letter-spacing:-0.3px;}
h3{font-size:19px; margin-bottom:10px;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head p{color:var(--muted); font-size:16.5px; margin-top:16px;}

/* ---------- hero (home) ---------- */
.hero{padding:86px 0 90px; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:-20% -10% auto -10%; height:600px; background:radial-gradient(ellipse at top, rgba(255,77,122,0.16), transparent 60%); pointer-events:none;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; position:relative;}
.kicker{display:inline-flex; align-items:center; gap:8px; color:var(--teal); font-size:14px; font-weight:600; margin-bottom:22px;}
.kicker .pulse{width:8px; height:8px; border-radius:50%; background:var(--teal); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(51,224,194,0.5);} 50%{box-shadow:0 0 0 7px rgba(51,224,194,0);}}
h1{font-size:clamp(38px, 4.6vw, 60px); letter-spacing:-0.5px; max-width:15ch;}
h1 em{font-style:normal; background:linear-gradient(100deg, var(--pink), #ff9a7a); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-sub{margin-top:22px; max-width:46ch; color:var(--muted); font-size:17.5px;}

/* interest search bar */
.interest-search{margin-top:30px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:7px 8px 7px 20px; max-width:440px;}
.interest-search svg{flex:none; width:18px; height:18px; color:var(--muted);}
.interest-search input{flex:1; background:none; border:none; color:var(--text); font-family:'Inter',sans-serif; font-size:14.5px; padding:8px 0;}
.interest-search input::placeholder{color:var(--muted);}
.interest-search button{background:var(--pink); color:#fff; border:none; border-radius:999px; font-weight:600; font-size:13.5px; padding:11px 20px; cursor:pointer; white-space:nowrap;}
.interest-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.interest-tags span{font-size:12.5px; color:var(--muted); border:1px solid var(--border); padding:5px 12px; border-radius:999px;}

.hero-actions{margin-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.btn-primary{background:var(--pink); color:#fff; font-weight:600; font-size:16px; padding:16px 30px; border-radius:999px; border:none; cursor:pointer; box-shadow:0 12px 30px -10px rgba(255,77,122,0.55); transition:transform .15s ease, background .15s ease;}
.btn-primary:hover{background:#ff6690; transform:translateY(-1px);}
.btn-ghost{color:var(--text); font-weight:500; font-size:15px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); padding-bottom:2px;}
.hero-meta{margin-top:38px; display:flex; gap:34px; flex-wrap:wrap;}
.hero-meta div strong{display:block; font-family:'Unbounded',sans-serif; font-size:24px; font-weight:600;}
.hero-meta div span{color:var(--muted); font-size:13.5px;}

/* hero visual: connecting call */
.call-visual{position:relative; height:420px;}
.frame{position:absolute; width:230px; height:300px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); padding:16px; display:flex; flex-direction:column; justify-content:space-between;}
.frame.a{left:0; top:10px; transform:rotate(-4deg);}
.frame.b{right:0; bottom:10px; transform:rotate(3deg); background:var(--surface-alt);}
.avatar{width:100%; aspect-ratio:1; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;}
.frame.a .avatar{background:linear-gradient(155deg,#FF4D7A,#7A3CFF);}
.frame.b .avatar{background:linear-gradient(155deg,#33E0C2,#2C7BFF);}
.avatar svg{width:46%; height:46%; opacity:0.92;}
.frame-row{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted);}
.live-tag{display:flex; align-items:center; gap:6px; background:rgba(255,77,122,0.14); color:var(--pink); padding:4px 9px; border-radius:999px; font-weight:600; font-size:11px;}
.live-tag .d{width:6px; height:6px; border-radius:50%; background:var(--pink);}
.connect-line{position:absolute; left:50%; top:50%; width:2px; height:120px; background:repeating-linear-gradient(180deg, var(--teal) 0 6px, transparent 6px 12px); transform:translate(-50%,-50%) rotate(35deg); opacity:0.6;}

/* ---------- article / content pages ---------- */
.article-hero{padding:64px 0 56px; position:relative; overflow:hidden;}
.article-hero::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:500px; background:radial-gradient(ellipse at top, rgba(255,77,122,0.14), transparent 60%); pointer-events:none;}
.breadcrumb{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13.5px; margin-bottom:22px; position:relative; flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--text);}
h1.article-title{font-size:clamp(32px,4.4vw,50px); max-width:24ch; letter-spacing:-0.5px; position:relative;}
.article-sub{margin-top:20px; max-width:66ch; color:var(--muted); font-size:17px; position:relative;}
.meta-row{display:flex; gap:20px; margin-top:26px; color:var(--muted); font-size:13.5px; flex-wrap:wrap; position:relative;}
.meta-row span{display:flex; align-items:center; gap:6px;}

.toc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 32px; max-width:560px; margin-top:36px; position:relative;}
.toc h2{font-size:16px; margin-bottom:14px;}
.toc ol{counter-reset:toc; display:flex; flex-direction:column; gap:9px;}
.toc li{counter-increment:toc; font-size:14.5px; color:var(--muted);}
.toc li::before{content:counter(toc) ". "; color:var(--pink); font-weight:600;}
.toc a:hover{color:var(--text);}

.prose{max-width:760px;}
.prose > * + *{margin-top:16px;}
.prose p{color:var(--muted); font-size:16px;}
.prose strong{color:var(--text);}
.prose h3{margin-top:8px;}
.prose ul.plain{list-style:disc; padding-left:20px; color:var(--muted);}
.prose ul.plain li{margin-top:8px;}
.article-block + .article-block{margin-top:64px;}

.quick-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:44px;}
.quick-facts div{background:var(--bg); padding:24px 20px;}
.quick-facts strong{display:block; font-family:'Unbounded',sans-serif; font-size:22px;}
.quick-facts span{color:var(--muted); font-size:13px;}

.compare-wrap{overflow-x:auto; margin-top:20px;}
table.compare{width:100%; border-collapse:collapse; min-width:520px;}
table.compare th,table.compare td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--border); font-size:14.5px;}
table.compare th{color:var(--muted); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.03em;}
table.compare td:first-child{color:var(--text); font-weight:500;}
table.compare td.win{color:var(--teal); font-weight:600;}

.tip-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px;}
.tip{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px;}
.tip .n{font-family:'Unbounded',sans-serif; color:var(--pink); font-size:13px; margin-bottom:8px; display:block;}
.tip h3{font-size:16px; margin-bottom:8px;}
.tip p{color:var(--muted); font-size:14.5px;}

/* ---------- how it works steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
.steps::before{content:""; position:absolute; top:26px; left:8%; right:8%; height:1px; background:var(--border);}
.step{position:relative; padding:0 26px 0 0;}
.step-num{width:52px; height:52px; border-radius:50%; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-weight:600; color:var(--teal); position:relative; z-index:1; margin-bottom:22px;}
.step h3{font-size:19px; margin-bottom:10px;}
.step p{color:var(--muted); font-size:15px;}

/* ---------- feature grid ---------- */
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;}
.feature{background:var(--bg); padding:34px 32px; display:flex; gap:18px;}
.feature-icon{flex:none; width:44px; height:44px; border-radius:12px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; color:var(--teal);}
.feature-icon svg{width:22px; height:22px;}
.feature h3{font-size:17px; margin-bottom:8px;}
.feature p{color:var(--muted); font-size:14.5px;}

/* ---------- safety ---------- */
.safety{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
.safety-visual{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; display:flex; flex-direction:column; align-items:flex-start; gap:22px;}
.safety-visual .shield{width:64px; height:64px; color:var(--teal);}
.safety-visual strong{font-family:'Unbounded',sans-serif; font-size:22px; display:block; margin-bottom:6px;}
.safety-visual span{color:var(--muted); font-size:14.5px;}
.safety-points{display:flex; flex-direction:column; gap:26px;}
.safety-point{display:flex; gap:18px;}
.safety-point .num{font-family:'Unbounded',sans-serif; color:var(--pink); font-size:14px; flex:none; width:26px;}
.safety-point h3{font-size:16.5px; margin-bottom:6px;}
.safety-point p{color:var(--muted); font-size:14.5px;}

/* ---------- stats / help strip ---------- */
.stats-strip{display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:40px 0;}
.stats-strip div strong{font-family:'Unbounded',sans-serif; font-size:30px; display:block;}
.stats-strip div span{color:var(--muted); font-size:13.5px;}

.help-strip{display:flex; gap:20px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 32px; margin-top:56px;}
.help-strip svg{flex:none; width:26px; height:26px; color:var(--teal); margin-top:2px;}
.help-strip h3{font-size:16px; margin-bottom:6px;}
.help-strip p{color:var(--muted); font-size:14.5px; max-width:64ch;}

/* ---------- faq / accordion ---------- */
.faq{max-width:760px;}
details{border-bottom:1px solid var(--border); padding:22px 0;}
summary{cursor:pointer; font-size:17px; font-weight:500; display:flex; justify-content:space-between; align-items:center; list-style:none;}
summary::-webkit-details-marker{display:none;}
summary .chev{flex:none; width:20px; height:20px; color:var(--muted); transition:transform .2s ease;}
details[open] summary .chev{transform:rotate(45deg);}
details p{color:var(--muted); margin-top:14px; font-size:15px; max-width:60ch;}
.faq-category{margin-top:12px; margin-bottom:18px;}
.faq-category h3{color:var(--pink); font-family:'Unbounded',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:0.03em;}

/* ---------- contact / cards ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px;}
.contact-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px;}
.contact-card .feature-icon{margin-bottom:18px;}
.contact-card h3{font-size:17px; margin-bottom:8px;}
.contact-card p{color:var(--muted); font-size:14.5px; margin-bottom:14px;}
.contact-card a.link{color:var(--teal); font-weight:600; font-size:14px;}

.form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; max-width:640px; margin-top:44px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13.5px; color:var(--muted); margin-bottom:8px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:'Inter',sans-serif; font-size:14.5px; padding:12px 14px;
}
.form-row textarea{min-height:120px; resize:vertical;}

/* ---------- legal pages ---------- */
.legal-nav{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 28px; max-width:320px;}
.legal-nav li{margin-bottom:10px; font-size:14px;}
.legal-nav a{color:var(--muted);}
.legal-nav a:hover{color:var(--text);}
.legal-layout{display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:start;}
.legal-section{margin-bottom:48px;}
.legal-section h2{font-size:22px; margin-bottom:14px;}
.legal-section p{color:var(--muted); font-size:15.5px; margin-top:12px;}
.legal-section ul{list-style:disc; padding-left:20px; color:var(--muted); font-size:15.5px;}
.legal-section ul li{margin-top:8px;}
.legal-updated{color:var(--muted); font-size:13.5px; margin-top:10px;}

/* ---------- final cta ---------- */
.final-cta{background:linear-gradient(120deg, var(--pink-dim), #6B2FA8 130%); border-radius:var(--radius-lg); padding:64px 56px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.final-cta h2{max-width:16ch; color:#fff; margin-bottom:0;}
.final-cta .btn-primary{background:#fff; color:#1a0d24; box-shadow:none;}
.final-cta .btn-primary:hover{background:#f3e9ff;}

/* ---------- footer ---------- */
footer{padding:56px 0 40px; border-top:1px solid var(--border);}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;}
.footer-grid p{color:var(--muted); font-size:14px; margin-top:14px; max-width:32ch;}
.footer-grid h4{font-size:13.5px; color:var(--text); margin-bottom:16px; font-weight:600;}
.footer-grid ul li{margin-bottom:11px;}
.footer-grid a{color:var(--muted); font-size:14px;}
.footer-grid a:hover{color:var(--text);}
.footer-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:12px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .call-visual{height:280px; margin-top:20px;}
  .frame{width:170px; height:220px;}
  .steps{grid-template-columns:1fr; gap:36px;}
  .steps::before{display:none;}
  .feature-list{grid-template-columns:1fr;}
  .safety{grid-template-columns:1fr; gap:36px;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
  .quick-facts{grid-template-columns:repeat(2,1fr);}
  .tip-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .legal-layout{grid-template-columns:1fr;}
  .legal-nav{max-width:100%; position:static;}
}
@media (max-width:640px){
  .nav-links{display:none;}
  .hero{padding:56px 0 60px;}
  section{padding:64px 0;}
  .hero-meta{gap:24px;}
  .interest-search{max-width:100%; flex-wrap:wrap; border-radius:20px; padding:14px;}
  .interest-search button{width:100%;}
  .final-cta{padding:44px 28px; flex-direction:column; text-align:center;}
  .footer-grid{grid-template-columns:1fr;}
  .stats-strip{justify-content:flex-start; gap:28px 40px;}
  .help-strip{flex-direction:column;}
  table.compare{min-width:460px;}
}

/* ---------- start-chat page: category picker ---------- */
.category-wrap{
  margin-top:8px;
  display:grid; grid-template-columns:1fr 1fr; column-gap:56px; row-gap:8px;
}
.category-group{margin-bottom:36px;}
.category-group-label{
  font-family:'Unbounded',sans-serif; font-size:12.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px; display:block;
}
.chip-grid{display:flex; flex-wrap:wrap; gap:12px 10px;}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-size:14px; font-weight:500;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  transition:all .15s ease; user-select:none; white-space:nowrap;
}
.chip .emoji{font-size:16px; line-height:1;}
.chip:hover{border-color:#3c4055;}
.chip.active{
  background:linear-gradient(100deg, rgba(255,77,122,0.18), rgba(122,60,255,0.18));
  border-color:var(--pink); color:#fff;
  box-shadow:0 0 0 1px rgba(255,77,122,0.35);
}
.chip.surprise{border-style:dashed;}
.chip.surprise.active{
  background:linear-gradient(100deg, rgba(51,224,194,0.18), rgba(44,123,255,0.18));
  border-color:var(--teal); border-style:solid;
  box-shadow:0 0 0 1px rgba(51,224,194,0.35);
}

.filter-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 20px; margin-top:36px;
}
.filter-row label{font-size:14px; color:var(--muted); white-space:nowrap;}
.filter-row select{
  flex:1; min-width:160px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-family:'Inter',sans-serif; font-size:14.5px; padding:10px 14px;
}

.selection-summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:34px; padding:16px 20px;
  background:rgba(51,224,194,0.06); border:1px solid rgba(51,224,194,0.25);
  border-radius:var(--radius-md); font-size:14px; color:var(--muted);
}
.selection-summary strong{color:var(--text);}
.selection-summary .tag{
  background:var(--surface-alt); border:1px solid var(--border); color:var(--text);
  font-size:12.5px; padding:4px 11px; border-radius:999px;
}

.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:20px;}
.mode-card{
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  border-radius:var(--radius-lg); padding:36px; border:2px solid var(--border);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; font-family:inherit; color:var(--text);
}
.mode-card:hover{transform:translateY(-6px) scale(1.01);}
.mode-card:active{transform:translateY(-2px) scale(0.99);}
.mode-card.primary{
  background:linear-gradient(135deg, var(--pink-dim), #6B2FA8 140%); border-color:transparent;
  box-shadow:0 20px 40px -18px rgba(255,77,122,0.5);
}
.mode-card.primary:hover{box-shadow:0 26px 50px -16px rgba(255,77,122,0.65);}
.mode-card.secondary{background:var(--surface);}
.mode-card.secondary:hover{border-color:var(--teal); box-shadow:0 20px 40px -20px rgba(51,224,194,0.4);}
.mode-card .icon-circle{
  width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.mode-card.primary .icon-circle{background:rgba(255,255,255,0.16);}
.mode-card.secondary .icon-circle{background:var(--surface-alt); color:var(--teal);}
.mode-card .icon-circle svg{width:30px; height:30px;}
.mode-card.primary .icon-circle svg{color:#fff;}
.mode-card h3{font-size:23px; margin-bottom:8px;}
.mode-card p{font-size:14.5px; color:rgba(244,243,247,0.75);}
.mode-card.secondary p{color:var(--muted);}
.mode-card .go{
  display:inline-flex; align-items:center; gap:6px; margin-top:22px;
  font-size:14.5px; font-weight:700;
}
.mode-card.secondary .go{color:var(--teal);}

/* tap-to-click indicator, floats gently to invite clicking */
.tap-icon{
  position:absolute; top:22px; right:22px;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:tapFloat 2.2s ease-in-out infinite;
}
.mode-card.primary .tap-icon{background:rgba(255,255,255,0.14);}
.mode-card.secondary .tap-icon{background:rgba(51,224,194,0.12);}
.tap-icon svg{width:18px; height:18px;}
.mode-card.primary .tap-icon svg{color:#fff;}
.mode-card.secondary .tap-icon svg{color:var(--teal);}
@keyframes tapFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-4px) scale(1.08);}
}

/* click ripple feedback */
.mode-card .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.35);
  transform:scale(0); pointer-events:none; animation:rippleGrow .6s ease-out forwards;
}
.mode-card.secondary .ripple{background:rgba(51,224,194,0.28);}
@keyframes rippleGrow{
  to{transform:scale(1); opacity:0;}
}

.searching-overlay{
  position:fixed; inset:0; background:rgba(9,10,15,0.86); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:24px;
}
.searching-overlay.active{display:flex;}
.searching-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px 36px; max-width:380px; width:100%; text-align:center;
}
.radar-loader{position:relative; width:96px; height:96px; margin:0 auto 26px;}
.radar-loader .core{
  position:absolute; inset:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--pink), #7A3CFF);
}
.radar-loader .ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--teal); opacity:0;
  animation:radarPing 1.8s ease-out infinite;
}
.radar-loader .ring.r2{animation-delay:0.6s;}
.radar-loader .ring.r3{animation-delay:1.2s;}
@keyframes radarPing{
  0%{transform:scale(0.4); opacity:0.6;}
  100%{transform:scale(1); opacity:0;}
}
.searching-card h3{font-size:18px; margin-bottom:8px;}
.searching-card p{color:var(--muted); font-size:14px;}
.searching-close{
  margin-top:24px; background:none; border:1px solid var(--border); color:var(--muted);
  padding:10px 22px; border-radius:999px; font-size:13.5px; cursor:pointer;
}
.searching-close:hover{color:var(--text); border-color:#3c4055;}

@media (max-width:900px){
  .category-wrap{grid-template-columns:1fr; row-gap:0;}
}
@media (max-width:760px){
  .mode-grid{grid-template-columns:1fr;}
  .filter-row{flex-direction:column; align-items:stretch;}
}
@media (max-width:480px){
  .chip{padding:9px 14px; font-size:13px;}
  .chip .emoji{font-size:14px;}
}