/* Chat Gay Gratis — design system. Hand-authored, zero runtime deps, one cached file for the whole site. */

:root{
  --bg:#0c0815;
  --bg-alt:#120c1e;
  --surface:#1a1329;
  --surface-2:#231a35;
  --border:#2f2545;
  --border-strong:#42335f;
  --ink:#f6f2fb;
  --ink-soft:#cabfdd;
  --muted:#9483ad;
  --accent:#e91e79;
  --accent-bright:#ff5fa8;
  --accent-2:#7c5cff;
  --accent-3:#2dd4bf;
  --on-accent:#ffffff;
  --good:#34d399;
  --good-soft:#12291f;
  --warn:#fbbf24;
  --crit:#fb7185;
  --focus:#b79bff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1120px;
  --container-narrow: 720px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--font);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{color:var(--ink); font-family:var(--font); font-weight:800; letter-spacing:-.02em; margin:0; text-wrap:balance;}
p{margin:0;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* layout */
.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
.container-narrow{max-width:var(--container-narrow); margin:0 auto; padding:0 20px;}
.section{padding-top:64px; padding-bottom:64px;}
.section-tight{padding-top:40px; padding-bottom:40px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px;}
.section-head p{color:var(--muted); margin-top:8px; max-width:56ch;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-bright); margin:0 0 14px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--accent-2),var(--accent)); flex:none;}

h1{font-size:clamp(30px,5.4vw,46px); line-height:1.1;}
h2{font-size:clamp(22px,3.4vw,30px); line-height:1.18;}
h3{font-size:17px; line-height:1.3;}
.lede{font-size:17px; color:var(--ink-soft); max-width:60ch;}
.grad-text{
  background:linear-gradient(120deg,var(--accent-bright),var(--accent-2) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(12,8,21,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); font-size:15px;}
.brand-mark{
  width:36px; height:36px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px;
}
.nav{display:none; align-items:center; gap:28px; font-size:14px; font-weight:600;}
.nav a{color:var(--ink-soft); transition:color .15s ease;}
.nav a:hover{color:var(--ink);}
@media (min-width:840px){.nav{display:flex;}}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:100px; font-weight:700; font-size:14.5px; padding:13px 24px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-sm{padding:9px 18px; font-size:13.5px;}
.btn-primary{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:var(--on-accent);
  box-shadow:0 8px 24px -8px rgba(233,30,121,.55);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px -6px rgba(233,30,121,.65);}
.btn-outline{background:transparent; border-color:var(--border-strong); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent-bright); color:var(--ink);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-row{display:flex; flex-wrap:wrap; gap:12px;}

.link-accent{color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; font-weight:600;}
.link-accent:hover{color:var(--accent);}

/* hero */
.hero{padding-top:56px; padding-bottom:8px;}
.hero-grid{display:grid; gap:40px; align-items:center;}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr; gap:56px;}}
.hero-checks{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:26px; font-size:14px; color:var(--ink-soft);}
.hero-checks li{display:flex; gap:8px; align-items:flex-start;}
.hero-checks li::before{content:"✓"; color:var(--accent-3); font-weight:800; flex:none;}
.hero-art{position:relative;}
.hero-art .glow{
  position:absolute; inset:-40px; z-index:0; filter:blur(60px); opacity:.55;
  background:radial-gradient(closest-side, var(--accent-2), transparent 70%), radial-gradient(closest-side at 70% 70%, var(--accent), transparent 65%);
}
.hero-art svg{position:relative; z-index:1; width:100%; height:auto;}

/* cards */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:var(--border-strong);}
.card h3{margin-bottom:8px;}
.card p{font-size:14px; color:var(--ink-soft);}
.card-grid{display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr;}}
@media (min-width:900px){.card-grid.cols-3{grid-template-columns:repeat(3,1fr);} .card-grid.cols-4{grid-template-columns:repeat(4,1fr);}}

/* city grid */
.city-grid{display:grid; gap:14px; grid-template-columns:1fr;}
@media (min-width:640px){.city-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:960px){.city-grid{grid-template-columns:repeat(3,1fr);}}
.city-card{
  display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); transition:border-color .15s ease, transform .15s ease;
}
.city-card:hover{border-color:var(--accent-bright); transform:translateY(-2px);}
.city-card .icon{width:44px; height:44px; border-radius:12px; flex:none; background:var(--surface-2); border:1px solid var(--border);}
.city-card strong{color:var(--ink); font-size:15px; display:block;}
.city-card span{color:var(--muted); font-size:13px; display:block; margin-top:3px;}

/* stat strip */
.stat-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:28px;}
@media (min-width:640px){.stat-strip{grid-template-columns:repeat(4,1fr);}}
.stat-strip div{background:var(--surface); padding:18px 16px;}
.stat-strip .num{font-family:var(--font); font-weight:800; font-size:22px; color:var(--ink);}
.stat-strip .lbl{font-size:12px; color:var(--muted); margin-top:2px;}

/* breadcrumb */
.breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted); padding-top:22px;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--ink-soft);}
.breadcrumb .current{color:var(--ink-soft); font-weight:600;}

/* faq */
.faq-item{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:4px 18px; margin-bottom:10px;}
.faq-item summary{
  cursor:pointer; list-style:none; padding:14px 0; font-weight:700; color:var(--ink); font-size:14.5px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{color:var(--muted); transition:transform .2s ease; flex:none;}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item p{padding-bottom:16px; font-size:14px; color:var(--ink-soft);}

/* callouts / tip boxes */
.tip{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; font-size:13px; color:var(--ink-soft);}
.tip strong{color:var(--ink);}

/* cta banner */
.cta-banner{
  border-radius:var(--radius-lg); padding:44px 36px; margin:8px 0;
  background:linear-gradient(135deg, var(--bg-alt), var(--surface) 60%);
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:0; opacity:.5; z-index:0;
  background:radial-gradient(480px circle at 85% 20%, rgba(233,30,121,.28), transparent 60%);
}
.cta-banner > *{position:relative; z-index:1;}
.cta-banner h2{margin-bottom:10px;}
.cta-banner p{color:var(--ink-soft); max-width:56ch; margin-bottom:22px;}

/* article / legal pages */
.article{max-width:var(--container-narrow);}
.article h2{margin-top:36px; margin-bottom:10px; font-size:19px;}
.article p, .article li{font-size:14.5px; color:var(--ink-soft); margin-bottom:10px;}
.article ul{padding-left:20px; list-style:disc;}
.article strong{color:var(--ink);}
.help-box{margin-top:40px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:22px;}

/* footer */
.site-footer{border-top:1px solid var(--border); background:var(--bg-alt); margin-top:60px;}
.footer-grid{display:grid; gap:32px; padding-top:48px; padding-bottom:48px; grid-template-columns:1fr;}
@media (min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-grid h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px;}
.footer-grid ul{display:grid; gap:9px;}
.footer-grid a{color:var(--ink-soft); font-size:14px;}
.footer-grid a:hover{color:var(--ink);}
.footer-about p{font-size:13.5px; color:var(--muted); margin-top:10px; max-width:34ch;}
.footer-bottom{border-top:1px solid var(--border); padding-top:18px; padding-bottom:18px; font-size:12.5px; color:var(--muted);}

/* iframe wrap (entra page, used inside content flow) */
.chat-frame-wrap{border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface); overflow:hidden;}
.chat-frame-wrap iframe{width:100%; display:block; border:0;}

/* full-screen chat shell (entra page) */
.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;}
body.entra-shell{display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;}
body.entra-shell .site-header{flex:none;}
body.entra-shell main{flex:1; display:flex; flex-direction:column; min-height:0;}
.chat-toolbar{flex:none; display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:8px 16px; border-bottom:1px solid var(--border); background:var(--bg-alt);}
.chat-toolbar a{font-size:12.5px; color:var(--muted); font-weight:600;}
.chat-toolbar a:hover{color:var(--ink-soft);}
.chat-frame-full{flex:1; min-height:0; background:var(--bg);}
.chat-frame-full iframe{width:100%; height:100%; display:block; border:0;}

@media (max-width:639px){
  .section{padding-top:44px; padding-bottom:44px;}
}