/* ============================================================
FunChatX — "Signal" visual identity
A friendly, modern chat-app look: soft gradient glow, pill
controls, rounded geometric type, colour-coded feature chips.
Toggle via [data-theme="dark"] on (see script.js).
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{
color-scheme: light;
--bg:#eeecfb;
--bg-soft:#e6e3f9;
--panel:#ffffff;
--panel-2:#e6e2f8;
--border:#cfc9f0;
--border-soft:#ddd8f4;
--text:#0e0f24;
--muted:#3d4066;
--muted-dim:#5d6089;
/* Bolt — primary brand (indigo-violet) */
--purple:#5b4fff;
--purple-bright:#7266ff;
--purple-deep:#4338c9;
--purple-tint:rgba(91,79,255,.10);
--purple-tint-strong:rgba(91,79,255,.20);
/* Ember — VIP / warm accent */
--gold:#f2932c;
--gold-bright:#ffa947;
--gold-tint:rgba(242,147,44,.12);
/* Mint — success / online */
--green:#12b981;
--green-tint:rgba(18,185,129,.13);
/* Bloom — secondary accents for chips/testimonials */
--pink:#ff5da2;
--pink-tint:rgba(255,93,162,.12);
--blue:#2fb0ff;
--blue-tint:rgba(47,176,255,.12);
--on-accent:#ffffff;
--radius:14px;
--radius-sm:11px;
--radius-lg:22px;
--radius-pill:999px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: 'Sora', 'Inter', -apple-system, sans-serif;
--shadow-lift: 0 24px 50px -24px rgba(30,20,80,.22);
--shadow-card: 0 1px 2px rgba(30,20,80,.05), 0 14px 30px -22px rgba(30,20,80,.14);
--ease: cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
color-scheme: dark;
--bg:#0a0a16;
--bg-soft:#0e0e1c;
--panel:#14152a;
--panel-2:#1b1c36;
--border:#2b2c4c;
--border-soft:#211f3d;
--text:#f1f1fb;
--muted:#a8abcc;
--muted-dim:#75789c;
--purple:#8b7fff;
--purple-bright:#a49aff;
--purple-deep:#6c5cff;
--purple-tint:rgba(139,127,255,.14);
--purple-tint-strong:rgba(139,127,255,.24);
--gold:#ffb347;
--gold-bright:#ffc370;
--gold-tint:rgba(255,179,71,.14);
--green:#33e3a6;
--green-tint:rgba(51,227,166,.16);
--pink:#ff7cb8;
--pink-tint:rgba(255,124,184,.14);
--blue:#5cc4ff;
--blue-tint:rgba(92,196,255,.14);
--on-accent:#0e0a26;
--shadow-lift: 0 24px 50px -22px rgba(0,0,0,.65);
--shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 16px 34px -22px rgba(0,0,0,.6);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion: reduce){
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--font);
line-height:1.65;
-webkit-font-smoothing:antialiased;
transition:background .2s var(--ease), color .2s var(--ease);
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px;}
::selection{background:var(--purple);color:#fff;}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;font-weight:700;}
.logo{font-family:var(--font-display);font-weight:700;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0;}
.skip-link:focus{left:16px;top:16px;border-radius:8px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:2px solid var(--purple-bright);outline-offset:2px;border-radius:4px;
}
/* ---------- Age gate ---------- */
.age-gate{
position:fixed;inset:0;z-index:9999;
background:rgba(10,8,25,.6);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
padding:20px;
}
html[data-theme="dark"] .age-gate{background:rgba(2,2,8,.84);}
.age-gate[hidden]{display:none;}
.age-gate-card{
background:var(--panel);
border:1px solid var(--border);border-radius:var(--radius-lg);
max-width:420px;width:100%;padding:32px 26px;text-align:center;
box-shadow:var(--shadow-lift);
animation:gateIn .35s var(--ease);
}
@keyframes gateIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.age-gate-card h2{margin:0 0 10px;font-size:1.3rem;}
.age-gate-card p{color:var(--muted);font-size:.92rem;margin:0 0 22px;}
.age-gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.age-gate-actions .btn{cursor:pointer;border:none;}
.age-gate-decline{
background:transparent;color:var(--muted);border:1px solid var(--border);
border-radius:var(--radius-pill);padding:10px 18px;font-size:.9rem;cursor:pointer;
transition:border-color .15s var(--ease), color .15s var(--ease);
}
.age-gate-decline:hover{color:var(--text);border-color:var(--muted-dim);}
.age-declined{
max-width:480px;margin:80px auto;text-align:center;padding:0 20px;
}
/* ---------- Ad slots ---------- */
.ad-slot{
margin:24px auto;text-align:center;
color:var(--muted-dim);font-size:.72rem;
border:1px dashed var(--border);border-radius:var(--radius);
padding:8px;
}
.ad-slot span{display:block;margin-bottom:6px;letter-spacing:.08em;text-transform:uppercase;}
.ad-slot-leaderboard{max-width:728px;min-height:90px;}
.ad-slot-inline{max-width:100%;min-height:100px;}
/* ---------- Header ---------- */
.site-header{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter:blur(14px) saturate(160%);
border-bottom:1px solid var(--border-soft);
}
.site-header .wrap{display:flex;align-items:center;justify-content:flex-start;gap:20px;height:70px;}
@media (max-width:520px){
.site-header .wrap{height:60px;gap:10px;}
.logo{font-size:1.12rem;gap:7px;}
.logo-mark{width:30px;height:30px;}
}
.logo{font-size:1.3rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:9px;color:var(--text);flex:none;}
.logo-mark{border-radius:11px;flex:none;box-shadow:0 6px 16px -4px rgba(91,79,255,.55);}
.logo .dot{color:var(--purple);}
.header-tools{display:flex;align-items:center;gap:10px;margin-left:auto;}
.online-pill{
display:inline-flex;align-items:center;gap:7px;
background:var(--green-tint);border:1px solid transparent;border-radius:var(--radius-pill);
padding:7px 14px;font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap;
}
.online-pill .dot{
width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
box-shadow:0 0 0 3px var(--green-tint);animation:onlinePulse 2.2s ease-in-out infinite;
}
.online-pill #onlineCount{color:var(--green);font-weight:700;}
@keyframes onlinePulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@media (max-width:520px){
.online-pill{padding:6px 10px;font-size:.74rem;gap:5px;}
.online-pill .online-label{display:none;}
}
@media (max-width:380px){
.header-tools{gap:6px;}
}
.theme-toggle{
display:inline-flex;align-items:center;
width:52px;height:29px;border-radius:999px;flex:none;position:relative;
background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
cursor:pointer;padding:0 7px;justify-content:space-between;
transition:border-color .15s var(--ease);
}
.theme-toggle:hover{border-color:var(--purple);}
.theme-toggle svg{width:14px;height:14px;position:relative;z-index:1;flex:none;}
.theme-toggle .icon-sun{display:block;color:var(--gold);}
.theme-toggle .icon-moon{display:block;color:var(--muted);}
.theme-toggle::before{
content:"";position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;
background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.25);
transition:transform .25s var(--ease);
}
html[data-theme="dark"] .theme-toggle::before{transform:translateX(23px);}
html[data-theme="dark"] .theme-toggle .icon-moon{color:var(--purple-bright);}
nav.main-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;font-size:.9rem;font-weight:600;}
nav.main-nav a{text-decoration:none;color:var(--muted);position:relative;padding:9px 14px;border-radius:var(--radius-pill);transition:color .15s var(--ease), background .15s var(--ease);display:inline-block;}
nav.main-nav a:hover{color:var(--text);background:var(--panel-2);}
nav.main-nav a[aria-current="page"]{color:var(--on-accent);background:var(--purple);}
nav.main-nav a.vip-link{color:var(--gold);}
nav.main-nav a.vip-link:hover{background:var(--gold-tint);color:var(--gold);}
nav.main-nav a.vip-link[aria-current="page"]{background:var(--gold);color:#fff;}
.nav-toggle{
display:none;background:none;border:1px solid var(--border);color:var(--text);
width:42px;height:42px;padding:0;border-radius:var(--radius-sm);cursor:pointer;order:2;
flex:none;position:relative;
}
.nav-toggle span{
position:absolute;left:50%;top:50%;width:18px;height:2px;background:currentColor;
transform:translate(-50%,-50%);transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
transition:transform .2s var(--ease), top .2s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{opacity:0;}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}
@media (max-width:760px){
nav.main-nav{position:absolute;top:100%;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--border);display:none;box-shadow:var(--shadow-lift);}
nav.main-nav.open{display:block;}
nav.main-nav ul{flex-direction:column;padding:18px 20px;gap:6px;}
nav.main-nav a{display:block;padding:12px 16px;}
.nav-toggle{display:block;}
.site-header .wrap{flex-wrap:wrap;}
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;
padding:14px 26px;border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;
border:1px solid transparent;font-family:var(--font-display);
transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary{background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;box-shadow:0 14px 28px -10px rgba(91,79,255,.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(91,79,255,.65);}
.btn-gold{background:linear-gradient(135deg, var(--gold), var(--gold-bright));color:#fff;box-shadow:0 14px 28px -10px rgba(242,147,44,.45);}
.btn-gold:hover{transform:translateY(-2px);}
.btn-ghost{background:var(--panel);border-color:var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px);}
.btn-block{width:100%;justify-content:center;}
.btn:active{transform:translateY(0);}
/* ---------- Hero-style bands ---------- */
.hero,.vip-hero,.page-hero,.cta-band{position:relative;}
/* ---------- Hero ---------- */
.hero{
padding:clamp(56px,9vw,96px) 0 clamp(40px,6vw,56px);
border-bottom:1px solid var(--border-soft);text-align:center;overflow:hidden;
background:
radial-gradient(560px 320px at 15% -10%, var(--purple-tint-strong), transparent 60%),
radial-gradient(520px 320px at 100% 0%, var(--pink-tint), transparent 60%),
var(--bg);
}
.hero h1{font-size:clamp(2.1rem,5.6vw,3.5rem);margin:0 0 18px;font-weight:800;letter-spacing:-.02em;line-height:1.08;}
.hero h1 span{background:linear-gradient(135deg, var(--purple), var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lede{color:var(--muted);max-width:52ch;margin:0 auto 30px;font-size:clamp(1rem,2vw,1.15rem);}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero-note{color:var(--muted);font-size:.85rem;margin-top:18px;}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:.76rem;color:var(--purple);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;}
/* Trust strip: dot-separated inline badges under hero CTAs */
.trust-strip{
display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
margin:26px 0 6px;color:var(--muted);font-size:.85rem;font-weight:600;
}
.trust-strip span{display:flex;align-items:center;gap:8px;}
.trust-strip span:not(:last-child)::after{content:"·";color:var(--border);margin-left:2px;font-weight:400;}
@media (max-width:640px){.trust-strip span:not(:last-child)::after{display:none;}}
.gender-row{display:flex;gap:10px;justify-content:center;margin:32px 0 8px;flex-wrap:wrap;}
.gender-pill{
border:1px solid var(--border);background:var(--panel);color:var(--text);
padding:10px 18px 10px 14px;border-radius:var(--radius-pill);font-weight:600;font-size:.86rem;
display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-card);
transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.gender-pill:not(.locked)::before{
content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
box-shadow:0 0 0 3px var(--green-tint);flex:none;
}
.gender-pill.locked{opacity:.7;}
.gender-pill .lock{color:var(--gold);font-size:.8rem;}
.gender-pill:hover{border-color:var(--purple);transform:translateY(-2px);}
/* ---------- Sections ---------- */
section{padding:clamp(48px,7vw,72px) 0;}
section.tight{padding:clamp(28px,5vw,40px) 0;}
.section-head{max-width:600px;margin:0 auto clamp(28px,5vw,40px);text-align:center;}
h2.section-title{font-size:clamp(1.5rem,3.6vw,2.1rem);margin:0 0 10px;font-weight:800;letter-spacing:-.01em;}
.section-head p{color:var(--muted);margin:0;}
.section-head .eyebrow{display:block;}
.alt{background:var(--bg-soft);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.card{
background:var(--panel);
border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;
transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
box-shadow:var(--shadow-card);
}
.card::before{
content:"";display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:13px;margin-bottom:16px;
background:var(--purple-tint);
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:center;background-size:20px;
}
/* cycle accent colour per card so the grid feels lively, not monotone */
.grid .card:nth-child(3n+2)::before{background-color:var(--pink-tint);background-image:url('data:image/svg+xml;utf8,');}
.grid .card:nth-child(3n+3)::before{background-color:var(--blue-tint);background-image:url('data:image/svg+xml;utf8,');}
.card:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:var(--shadow-lift);}
.card h3{margin:0 0 8px;font-size:1.08rem;font-weight:700;}
.card p{color:var(--muted);margin:0;font-size:.92rem;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;text-align:center;}
.steps > div{position:relative;}
.steps .num{
width:40px;height:40px;border-radius:50%;
background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 14px;
font-family:var(--font-display);box-shadow:0 8px 20px -8px rgba(91,79,255,.55);
}
.steps h3{margin:0 0 6px;font-size:1.05rem;font-weight:700;}
.steps p{color:var(--muted);font-size:.9rem;margin:0;max-width:30ch;margin-inline:auto;}
/* ---------- Testimonials ---------- */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.testimonial{
background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:26px;box-shadow:var(--shadow-card);position:relative;
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.testimonial:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.testimonial .quote-mark{
font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--purple);opacity:.35;
display:block;margin-bottom:2px;
}
.testimonial h3{margin:0 0 8px;font-size:1rem;font-weight:700;}
.testimonial p.line{color:var(--muted);font-size:.9rem;margin:0 0 14px;}
.testimonial blockquote{margin:0;padding:0;font-size:.92rem;color:var(--text);font-style:italic;border-left:2px solid var(--purple-tint-strong);padding-left:12px;}
.testimonial cite{display:block;margin-top:12px;font-size:.8rem;color:var(--muted-dim);font-weight:600;font-style:normal;}
.testimonial:nth-child(3n+2) .quote-mark{color:var(--pink);}
.testimonial:nth-child(3n+3) .quote-mark{color:var(--blue);}
/* ---------- Comparison table ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
table.compare{width:100%;border-collapse:collapse;min-width:560px;font-size:.88rem;}
table.compare th,table.compare td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--border-soft);}
table.compare th:first-child,table.compare td:first-child{text-align:left;}
table.compare thead th{background:var(--panel-2);font-weight:700;color:var(--text);}
table.compare thead th.us{color:var(--purple);}
table.compare tbody tr:last-child td{border-bottom:none;}
table.compare td.yes{color:var(--green);font-weight:700;}
table.compare td.no{color:var(--muted-dim);}
/* ---------- Chat demo ---------- */
.chat-mock{
background:var(--panel);
border:1px solid var(--border);border-radius:var(--radius-lg);
max-width:600px;margin:0 auto;overflow:hidden;box-shadow:var(--shadow-lift);
}
.chat-mock .bar{
display:flex;justify-content:space-between;align-items:center;padding:13px 18px;
border-bottom:1px solid var(--border);font-size:.78rem;color:var(--muted);
letter-spacing:.02em;text-transform:uppercase;font-weight:700;
background:var(--panel-2);
}
.chat-mock .bar .stranger{color:var(--green);display:flex;align-items:center;gap:6px;}
.chat-mock .bar .stranger::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
box-shadow:0 0 0 3px var(--green-tint);
}
.chat-mock .messages{padding:20px;display:flex;flex-direction:column;gap:10px;min-height:200px;}
.msg{max-width:min(80%, 620px);padding:10px 14px;border-radius:16px;font-size:.9rem;line-height:1.5;}
.msg.them{background:var(--panel-2);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:4px;}
.msg.me{background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.msg.system{align-self:center;color:var(--muted-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.msg.system.chat-rules-msg{
align-self:center;max-width:92%;width:100%;text-align:left;text-transform:none;letter-spacing:normal;font-weight:400;
background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:14px 16px;
}
.msg.system.chat-rules-msg .chat-app-age{margin-bottom:8px;}
.msg.system.chat-rules-msg .chat-app-rules{font-size:.82rem;line-height:1.6;}
.chat-mock .composer{display:flex;gap:8px;padding:14px;border-top:1px solid var(--border);}
.chat-mock .composer input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:11px 16px;border-radius:var(--radius-pill);font-family:var(--font);transition:border-color .15s var(--ease);min-width:0;}
.chat-mock .composer input:focus{border-color:var(--purple);}
.chat-mock .composer button{background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;border:none;border-radius:var(--radius-pill);padding:0 22px;font-weight:700;cursor:pointer;transition:transform .15s var(--ease), box-shadow .15s var(--ease);flex:none;}
.chat-mock .composer button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(91,79,255,.6);}
.chat-mock .composer button:disabled{opacity:.45;cursor:not-allowed;}
.demo-flag{text-align:center;color:var(--muted-dim);font-size:.8rem;margin-top:14px;}
.chat-rules{text-align:center;color:var(--muted-dim);font-size:.78rem;margin-top:6px;max-width:52ch;margin-inline:auto;line-height:1.6;}
/* ---------- Chat app card (random-chat page: full-height app-style widget) ---------- */
.chat-app{
background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
max-width:480px;margin:0 auto;box-shadow:var(--shadow-lift);position:relative;overflow:hidden;
}
.chat-app-flag{
position:absolute;top:16px;right:16px;z-index:2;background:none;border:none;cursor:pointer;
font-size:1.4rem;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));text-decoration:none;
display:inline-block;transition:transform .15s var(--ease);padding:4px;
}
.chat-app-flag:hover{transform:scale(1.12) rotate(-4deg);}
.chat-app .messages{
min-height:280px;max-height:340px;overflow-y:auto;padding:20px;
display:flex;flex-direction:column;gap:10px;justify-content:flex-end;
}
.chat-app-info{padding:0 20px 18px;}
.chat-app-status{margin:0 0 10px;font-weight:800;font-size:1.02rem;font-family:var(--font-display);color:var(--text);}
.chat-app-age{
display:inline-flex;align-items:center;gap:8px;color:var(--pink);font-weight:800;font-size:.9rem;margin-bottom:10px;
}
.chat-app-age .badge18{
background:#ef1f4a;color:#fff;font-size:.68rem;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:.02em;
}
.chat-app-rules{list-style:none;margin:0;padding:0;color:var(--muted);font-size:.87rem;line-height:1.7;}
.chat-app-rules li{margin-bottom:2px;}
.chat-app-rules li.strong{color:var(--text);font-weight:700;}
.chat-app-controls{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 16px;border-top:1px solid var(--border-soft);background:var(--panel-2);
opacity:1;max-height:60px;overflow:hidden;
transition:opacity .3s var(--ease), max-height .3s var(--ease), padding .3s var(--ease);
}
.chat-app-controls.fade-out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none;}
.mode-pill{
display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--border);
border-radius:var(--radius-pill);padding:8px 14px;font-weight:700;font-size:.84rem;color:var(--text);
}
.mode-pill .dot-icon{font-size:.9rem;}
.safety-link-pill{
display:inline-flex;align-items:center;gap:6px;background:var(--purple-tint);color:var(--purple);
border-radius:var(--radius-pill);padding:8px 14px;font-weight:700;font-size:.84rem;text-decoration:none;
transition:background .15s var(--ease);
}
.safety-link-pill:hover{background:var(--purple-tint-strong);}
.chat-app-composer{display:flex;align-items:center;gap:8px;padding:14px 16px;}
.chat-app-composer #demoBtn{
background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;border:none;
border-radius:var(--radius-pill);padding:13px 22px;font-weight:800;font-family:var(--font-display);
cursor:pointer;flex:none;transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-app-composer #demoBtn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(91,79,255,.6);}
.chat-app-input-wrap{flex:1;position:relative;min-width:0;}
.chat-app-input-wrap input,.chat-app-input-wrap .chat-app-input{
width:100%;background:var(--panel-2);border:1.5px solid var(--border);color:var(--text);
padding:13px 44px 13px 16px;border-radius:var(--radius-pill);font-family:var(--font);
transition:border-color .15s var(--ease),background .15s var(--ease);
box-shadow:0 1px 2px rgba(30,20,80,.06);
}
.chat-app-input-wrap input::placeholder{color:var(--muted-dim);}
.chat-app-input-wrap input:focus{border-color:var(--purple);background:var(--panel);}
.chat-app-input-wrap input:disabled{opacity:.6;}
.chat-app-input{
box-sizing:border-box;min-height:46px;max-height:120px;overflow-y:auto;
font-size:max(16px,.95rem);line-height:1.4;white-space:pre-wrap;word-break:break-word;
outline:0;cursor:text;
}
.chat-app-input:focus{border-color:var(--purple);background:var(--panel);}
.chat-app-input:empty::before{content:attr(data-placeholder);color:var(--muted-dim);pointer-events:none;}
.chat-app-input[contenteditable="false"]{opacity:.6;cursor:not-allowed;}
#demoSend{
position:absolute;right:5px;top:50%;transform:translateY(-50%);
background:var(--purple-tint);border:none;cursor:pointer;color:var(--purple);
width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
transition:color .15s var(--ease), background .15s var(--ease);
}
#demoSend:hover{color:#fff;background:linear-gradient(135deg, var(--purple), var(--pink));}
#demoSend svg{width:17px;height:17px;}
@media (max-width:480px){
.chat-app .messages{min-height:220px;max-height:280px;}
.chat-app-controls{flex-wrap:wrap;}
}
/* ---------- Full-screen chat mode (random-chat page) ---------- */
.chat-page{display:flex;flex-direction:column;}
.chat-fullscreen-wrap{
flex:1 1 auto;display:flex;padding:10px 0 20px;
min-height:calc(100dvh - 70px);
}
.chat-fullscreen-wrap .wrap{flex:1 1 auto;display:flex;flex-direction:column;max-width:none;padding-left:0;padding-right:0;}
.chat-app-full{
flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
width:100%;margin:0 auto;
border-radius:0;box-shadow:none;border-left:none;border-right:none;
}
.chat-app-full .messages{flex:1 1 auto;min-height:0;max-height:none;justify-content:flex-end;}
/* Typing indicator bubble (three bouncing dots), shown at the bottom of the message list */
.typing-indicator{
align-self:flex-start;display:inline-flex;align-items:center;gap:4px;
background:var(--panel-2);border:1px solid var(--border);border-radius:16px;
border-bottom-left-radius:4px;padding:11px 14px;
}
.typing-indicator span{
width:6px;height:6px;border-radius:50%;background:var(--muted-dim);display:inline-block;
animation:typingBounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2){animation-delay:.15s;}
.typing-indicator span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{
0%,60%,100%{transform:translateY(0);opacity:.5;}
30%{transform:translateY(-4px);opacity:1;}
}
/* Settings (gear) button — sits left of the report/flag button, reopens gender picker */
.chat-settings-btn{
display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--muted);
cursor:pointer;font-size:1.05rem;line-height:1;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.chat-settings-btn:hover{background:var(--purple-tint);border-color:var(--purple);color:var(--purple);}
/* Sound effects toggle row, inside the gender/settings overlay */
.sound-toggle-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
}
.sound-toggle-label{
display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--text);
}
.sound-toggle-switch{
position:relative;width:44px;height:26px;border-radius:var(--radius-pill);
border:1.5px solid var(--border);background:var(--panel-2);cursor:pointer;flex:none;
transition:background .2s var(--ease),border-color .2s var(--ease);padding:0;
}
.sound-toggle-switch:hover{border-color:var(--purple);}
.sound-toggle-switch[aria-checked="true"]{
background:linear-gradient(135deg, var(--purple), var(--pink));
border-color:transparent;
}
.sound-toggle-knob{
position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s var(--ease);
}
.sound-toggle-switch[aria-checked="true"] .sound-toggle-knob{transform:translateX(18px);}
/* Promo bar */
.chat-promo-bar{
display:flex;align-items:center;gap:10px;padding:9px 14px;
background:linear-gradient(90deg, var(--purple), var(--purple-bright));color:#fff;
font-size:.78rem;font-weight:600;flex:none;
}
.chat-promo-bar span{flex:1 1 auto;}
.chat-promo-cta{
background:rgba(255,255,255,.18);color:#fff;text-decoration:none;font-weight:800;
padding:5px 12px;border-radius:var(--radius-pill);font-size:.74rem;flex:none;
transition:background .15s var(--ease);
}
.chat-promo-cta:hover{background:rgba(255,255,255,.3);}
.chat-promo-close{
background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;font-size:.8rem;
flex:none;padding:2px 4px;line-height:1;
}
.chat-promo-close:hover{color:#fff;}
/* Contact bar */
.chat-contact-bar{
display:flex;align-items:center;gap:10px;padding:10px 14px;
border-bottom:1px solid var(--border-soft);background:var(--panel-2);flex:none;
}
.chat-back{
display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--text);
text-decoration:none;font-size:1.05rem;transition:background .15s var(--ease);
}
.chat-back:hover{background:var(--border-soft);}
.chat-contact{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;}
.chat-contact-avatar{
display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
border-radius:50%;background:var(--purple-tint);font-size:1.15rem;
}
.chat-contact-meta{display:flex;flex-direction:column;gap:1px;min-width:0;}
.chat-contact-name{font-weight:800;font-size:.92rem;font-family:var(--font-display);color:var(--text);}
.chat-contact-status{font-size:.76rem;color:var(--green);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-kebab-btn{
display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--muted);
cursor:pointer;font-size:1.15rem;line-height:1;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.chat-kebab-btn:hover{background:rgba(239,31,74,.1);border-color:#ef1f4a;color:#ef1f4a;}
/* Wallpaper + date divider */
.chat-wallpaper{
background-color:var(--bg-soft);
background-image:radial-gradient(var(--border) 1px, transparent 1px);
background-size:18px 18px;
}
html[data-theme="dark"] .chat-wallpaper{background-color:var(--bg);}
.chat-date-divider{display:flex;justify-content:center;margin:2px 0 10px;}
.chat-date-divider span{
background:var(--purple);color:#fff;font-size:.72rem;font-weight:700;
padding:4px 14px;border-radius:var(--radius-pill);letter-spacing:.02em;
}
/* Composer: skip + kebab + input */
.chat-app-composer{display:flex;align-items:center;gap:8px;padding:14px 16px;flex:none;}
.btn-skip{
background:linear-gradient(135deg, #ff4d67, #ef1f4a);color:#fff;border:none;
border-radius:var(--radius-pill);padding:13px 20px;font-weight:800;font-family:var(--font-display);
cursor:pointer;flex:none;transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-skip:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(239,31,74,.6);}
.chat-kebab-btn-composer{
background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;border:none;
font-size:1.3rem;font-weight:900;
}
.chat-kebab-btn-composer:hover{background:linear-gradient(135deg, var(--purple), var(--pink));color:#fff;opacity:.9;border:none;}
@media (max-width:760px){
.chat-fullscreen-wrap{padding:0;min-height:calc(100dvh - 60px);}
}
/* ---------- Locked/fixed chat viewport (random-chat page): no page scroll, chat fills the screen ---------- */
html:has(body.chat-locked){height:100%;overflow:hidden;}
/* Fallback for browsers without :has() support — script.js adds this class to directly */
html.chat-locked-html{height:100%;overflow:hidden;}
body.chat-locked{
height:100vh;height:100dvh;overflow:hidden;
display:flex;flex-direction:column;
}
body.chat-locked .site-header{flex:none;}
body.chat-locked .chat-page{flex:1 1 auto;min-height:0;overflow:hidden;}
body.chat-locked .chat-fullscreen-wrap{
min-height:0;height:100%;padding:10px 0;overflow:hidden;
}
body.chat-locked .chat-fullscreen-wrap .wrap{min-height:0;height:100%;}
body.chat-locked .chat-app-full{min-height:0;height:100%;}
body.chat-locked .chat-app-full .messages{overflow-y:auto;}
@media (max-width:760px){
body.chat-locked .chat-fullscreen-wrap{padding:0;}
}
.chat-page-h1{
font-size:.92rem;font-weight:700;text-align:center;color:var(--muted);
margin:8px auto 0;max-width:640px;padding:0 12px;line-height:1.3;flex:none;
}
@media (max-width:380px){
.chat-promo-bar span{display:none;}
}
/* ---------- Report-user popup ---------- */
.report-overlay{
position:fixed;inset:0;z-index:80;background:rgba(10,8,30,.55);backdrop-filter:blur(3px);
display:flex;align-items:flex-end;justify-content:center;padding:0;
animation:reportFade .15s var(--ease);
}
@keyframes reportFade{from{opacity:0;}to{opacity:1;}}
.report-overlay[hidden]{display:none;}
.report-modal{
background:var(--panel);border:1px solid var(--border);
border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:88dvh;overflow-y:auto;
box-shadow:var(--shadow-lift);padding:18px 18px 22px;
animation:reportUp .2s var(--ease);
}
@keyframes reportUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media (min-width:641px){
.report-overlay{align-items:center;}
.report-modal{border-radius:var(--radius-lg);max-height:80dvh;}
}
.report-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.report-modal-head h3{margin:0;font-size:1.15rem;font-family:var(--font-display);font-weight:800;}
.report-modal-small{max-width:360px;}
.report-close{
background:var(--panel-2);border:1px solid var(--border);border-radius:50%;
width:30px;height:30px;flex:none;cursor:pointer;color:var(--muted);font-size:.85rem;
display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease);
}
.report-close:hover{background:var(--border-soft);}
.report-modal-sub{color:var(--muted);font-size:.87rem;margin:10px 0 14px;line-height:1.55;}
.report-reasons{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;}
.report-reason{
width:100%;display:flex;align-items:center;gap:12px;text-align:left;
background:var(--panel-2);border:1.5px solid var(--border);border-radius:var(--radius);
padding:11px 13px;cursor:pointer;font-family:var(--font);color:var(--text);
transition:border-color .15s var(--ease),background .15s var(--ease),transform .1s var(--ease);
}
.report-reason:hover{border-color:var(--purple);background:var(--purple-tint);}
.report-reason.selected{border-color:var(--purple);background:var(--purple-tint-strong);}
.report-reason-icon{font-size:1.25rem;flex:none;line-height:1;}
.report-reason-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.report-reason-text strong{font-size:.9rem;font-weight:700;}
.report-reason-text small{color:var(--muted);font-size:.78rem;line-height:1.4;}
.report-modal-actions{display:flex;gap:10px;justify-content:flex-end;}
.report-modal-actions .btn{padding:11px 20px;font-size:.88rem;}
.report-modal-status{margin:12px 0 0;font-size:.85rem;font-weight:700;color:var(--green);text-align:center;min-height:1.2em;}
.report-modal-status.error{color:#ef1f4a;}
/* ---------- FAQ ---------- */
.faq details{
background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow-card);
transition:border-color .15s var(--ease);
}
.faq details:last-child{margin-bottom:0;}
.faq details[open]{border-color:var(--purple);}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
content:"+";color:var(--purple);font-size:1.1rem;font-weight:400;flex:none;
width:26px;height:26px;border-radius:50%;background:var(--purple-tint);
display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{color:var(--muted);margin:14px 0 0;}
/* ---------- CTA band ---------- */
.cta-band{
text-align:center;padding:clamp(52px,8vw,76px) 0;
background:linear-gradient(135deg, var(--purple-deep), var(--purple), var(--pink));
border-top:1px solid var(--border-soft);
color:#fff;
}
.cta-band h2{font-size:clamp(1.6rem,3.8vw,2.3rem);margin:0 0 12px;font-weight:800;color:#fff;}
.cta-band p{color:rgba(255,255,255,.85);max-width:48ch;margin:0 auto 26px;}
.cta-band .btn-primary{background:#fff;color:var(--purple-deep);box-shadow:0 14px 28px -10px rgba(0,0,0,.35);}
.cta-band .btn-primary:hover{background:#fff;color:var(--purple-deep);}
.cta-band .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff;}
.cta-band .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.2);}
/* ---------- VIP page ---------- */
.vip-hero{
background:
radial-gradient(500px 300px at 85% -10%, var(--gold-tint), transparent 60%),
var(--bg-soft);
border-bottom:1px solid var(--border-soft);padding:clamp(52px,8vw,72px) 0 clamp(36px,6vw,46px);text-align:center;
}
.vip-badge{
display:inline-block;background:linear-gradient(135deg, var(--gold), var(--gold-bright));color:#fff;
font-weight:800;font-size:.72rem;padding:6px 16px;border-radius:var(--radius-pill);margin-bottom:16px;
text-transform:uppercase;letter-spacing:.1em;
}
.vip-hero h1{font-size:clamp(2rem,5vw,2.8rem);margin:0 0 16px;font-weight:800;letter-spacing:-.02em;}
.vip-hero p{color:var(--muted);max-width:54ch;margin:0 auto;}
.gender-select{display:flex;gap:14px;justify-content:center;margin:34px 0;flex-wrap:wrap;}
.gender-option{
background:var(--panel);border:2px solid var(--border);border-radius:var(--radius-lg);
padding:22px 30px;text-align:center;cursor:pointer;min-width:130px;font-weight:700;
transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.gender-option:hover{border-color:var(--gold);transform:translateY(-3px);}
.gender-option.selected{border-color:var(--gold);background:var(--gold-tint);box-shadow:0 14px 30px -14px rgba(242,147,44,.45);}
.gender-option .icon{font-size:1.9rem;display:block;margin-bottom:10px;}
.gender-option .label{display:block;}
.gender-option .sub{display:block;color:var(--muted);font-weight:500;font-size:.78rem;margin-top:4px;}
.currency-toggle{display:flex;justify-content:center;gap:8px;margin-bottom:8px;}
.curr-btn{
background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
padding:8px 18px;border-radius:999px;font-weight:700;font-size:.85rem;cursor:pointer;
transition:border-color .15s var(--ease), color .15s var(--ease);
}
.curr-btn:hover{color:var(--text);}
.curr-btn.active{background:var(--gold);color:#fff;border-color:var(--gold);}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:24px;}
.plan{
background:var(--panel);border:1px solid var(--border);
border-radius:var(--radius-lg);padding:28px;text-align:center;
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
box-shadow:var(--shadow-card);
}
.plan:hover{transform:translateY(-4px);}
.plan.featured{border-color:var(--gold);position:relative;box-shadow:0 20px 44px -18px rgba(242,147,44,.4);}
.plan.featured::before{
content:"MOST POPULAR";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:linear-gradient(135deg, var(--gold), var(--gold-bright));color:#fff;font-size:.65rem;font-weight:800;
padding:5px 14px;border-radius:999px;letter-spacing:.06em;white-space:nowrap;
}
.plan h3{margin:0 0 4px;font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.plan .price{font-size:2.2rem;font-weight:800;margin:10px 0;font-family:var(--font-display);}
.plan .price span{font-size:.9rem;color:var(--muted);font-weight:500;font-family:var(--font);}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;text-align:left;font-size:.88rem;color:var(--muted);}
.plan li{padding:8px 0;border-top:1px solid var(--border-soft);}
.plan li:first-child{border-top:none;}
.plan li::before{content:"✓ ";color:var(--green);font-weight:700;}
/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:34px 0;}
.stat{text-align:center;}
.stat b{display:block;font-size:1.9rem;background:linear-gradient(135deg, var(--purple), var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--font-display);font-weight:800;}
.stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
/* ---------- Safety grid (icon + label cards) ---------- */
.safety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
.safety-item{
background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:24px;text-align:center;box-shadow:var(--shadow-card);
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.safety-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.safety-item .tag{
display:inline-flex;align-items:center;justify-content:center;
min-width:52px;height:36px;padding:0 12px;border-radius:var(--radius-pill);
background:var(--purple-tint);color:var(--purple);font-weight:800;font-size:.85rem;
margin-bottom:14px;font-family:var(--font-display);
}
.safety-item:nth-child(3n+2) .tag{background:var(--pink-tint);color:var(--pink);}
.safety-item:nth-child(3n+3) .tag{background:var(--blue-tint);color:var(--blue);}
.safety-item h3{margin:0 0 6px;font-size:1rem;font-weight:700;}
.safety-item p{margin:0;color:var(--muted);font-size:.88rem;}
/* ---------- Footer ---------- */
footer.site-footer{border-top:1px solid var(--border-soft);padding:52px 0 28px;background:var(--bg-soft);}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;margin-bottom:34px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-dim);margin:0 0 14px;font-weight:800;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-grid a{text-decoration:none;color:var(--text);opacity:.82;font-size:.9rem;transition:opacity .15s var(--ease), color .15s var(--ease);}
.footer-grid a:hover{opacity:1;color:var(--purple);}
.footer-about p{color:var(--muted);font-size:.88rem;max-width:32ch;margin-top:12px;}
.footer-bottom{border-top:1px solid var(--border-soft);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted-dim);font-size:.78rem;}
.age-badge{border:1px solid var(--border);border-radius:6px;padding:2px 9px;color:var(--purple);}
/* ---------- Content pages ---------- */
.page-hero{padding:clamp(40px,6vw,52px) 0 clamp(22px,4vw,28px);border-bottom:1px solid var(--border-soft);background:var(--bg-soft);}
.page-hero h1{font-size:clamp(1.8rem,4.4vw,2.4rem);margin:0;font-weight:800;letter-spacing:-.01em;}
.page-hero .updated{color:var(--muted-dim);font-size:.8rem;margin-top:12px;}
.content{padding:clamp(32px,6vw,44px) 0 clamp(48px,8vw,76px);}
.content .wrap{max-width:780px;}
.content h2{font-size:1.3rem;margin:38px 0 14px;font-weight:700;}
.content h2:first-child{margin-top:0;}
.content p{color:var(--text);opacity:.85;margin:0 0 16px;}
.content ul{color:var(--text);opacity:.85;padding-left:20px;}
.content li{margin-bottom:7px;}
.toc{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:36px;}
.toc h2{margin:0 0 12px;font-size:.9rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;}
.toc ol{margin:0;padding-left:18px;color:var(--muted);font-size:.87rem;}
.toc li{margin-bottom:7px;}
.toc a{text-decoration:none;color:var(--purple);}
.toc a:hover{text-decoration:underline;}
/* ---------- Contact / forms ---------- */
.form-grid{display:grid;gap:18px;max-width:540px;}
label{font-size:.85rem;font-weight:700;display:block;margin-bottom:7px;}
input[type=text],input[type=email],select,textarea{
width:100%;background:var(--panel);border:1px solid var(--border);color:var(--text);
padding:12px 14px;border-radius:var(--radius-sm);font-family:var(--font);font-size:.92rem;
transition:border-color .15s var(--ease);
}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{border-color:var(--purple);}
textarea{resize:vertical;min-height:120px;}
.center{text-align:center;}
.small{font-size:.85rem;color:var(--muted);}
/* ---------- Mobile fine-tuning ---------- */
@media (max-width:640px){
.wrap{padding:0 16px;}
.hero-cta,.gender-row{gap:8px;}
.btn{padding:13px 20px;font-size:.9rem;width:100%;justify-content:center;}
.hero-cta{flex-direction:column;align-items:stretch;}
.hero-cta .btn{width:100%;}
.chat-mock .composer{flex-wrap:nowrap;gap:6px;padding:10px;}
.chat-mock .composer input{padding:10px 14px;font-size:.85rem;}
.chat-mock .composer button{padding:0 16px;font-size:.85rem;}
.chat-mock .messages{padding:14px;min-height:170px;}
.plan.featured::before{font-size:.6rem;}
.stats{grid-template-columns:repeat(2,1fr);gap:14px;}
section{padding:36px 0;}
h2.section-title{font-size:1.4rem;}
.compare-wrap{position:relative;}
.compare-wrap::after{
content:"⟷ swipe to see more";display:block;text-align:center;font-size:.72rem;
color:var(--muted-dim);padding:8px 0;background:var(--panel-2);
}
table.compare{font-size:.82rem;}
table.compare th,table.compare td{padding:11px 12px;}
.footer-bottom{flex-direction:column;text-align:center;}
}
@media (min-width:641px) and (max-width:900px){
.grid{grid-template-columns:repeat(2,1fr);}
}
/* iOS safe-area support for notched devices */
.site-header{padding-top:env(safe-area-inset-top);}
footer.site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom));}