/* gay-chat-rooms.com 2026 design (light). Edit this file directly: pages link it with its file date (?v=), so changes show at once. */
@font-face{font-display:swap;font-family:Poppins;font-weight:600;src:url(fonts/poppins-600.woff2)}
@font-face{font-display:swap;font-family:Poppins;font-weight:700;src:url(fonts/poppins-700.woff2)}
@font-face{font-display:swap;font-family:Poppins;font-weight:800;src:url(fonts/poppins-800.woff2)}
@font-face{font-display:swap;font-family:Inter;font-weight:400;src:url(fonts/inter-400.woff2)}
@font-face{font-display:swap;font-family:Inter;font-weight:500;src:url(fonts/inter-500.woff2)}
@font-face{font-display:swap;font-family:Inter;font-weight:600;src:url(fonts/inter-600.woff2)}
:root{
  --bg:#fffaf5;--bg2:#fff1f6;--card:#fff;--line:#f0e3ea;
  --txt:#23172f;--mut:#665a75;--acc:#f0287a;--accTxt:#d61f6b;--violet:#7c4dff;
  --grad:linear-gradient(120deg,#ff3d8b,#ff7a45);
  --shadow:0 18px 40px -22px rgba(120,40,90,.35);
  --pride:linear-gradient(90deg,#e40303 0 16.66%,#ff8c00 0 33.33%,#ffd400 0 50%,#00a14b 0 66.66%,#2b5cd6 0 83.33%,#8a2be2 0);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--txt);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pride{height:5px;background:var(--pride)}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(255,250,245,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{flex:none;filter:drop-shadow(0 6px 12px rgba(240,40,122,.25))}
.brand b{display:block;font:800 23px/1 Poppins;letter-spacing:-.4px;white-space:nowrap}
.brand b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font:600 10.5px/1 Inter;color:var(--mut);letter-spacing:2.4px;text-transform:uppercase;margin-top:6px}
nav.main{display:flex;gap:30px;font:600 14px Poppins;color:var(--mut)}
nav.main a.on,nav.main a:hover{color:var(--accTxt)}
.right{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--grad);color:#fff;font:600 16px Poppins;padding:15px 32px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(255,61,139,.7);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(255,61,139,.8)}
.btn.sm{padding:10px 22px;font-size:14px}
.btn.ghost{background:#fff;border:1.5px solid #ead9e3;box-shadow:none;color:var(--txt)}
.btn.ghost:hover{border-color:var(--acc);color:var(--accTxt)}
.btn.light{background:#fff;color:var(--accTxt);box-shadow:0 14px 30px -12px rgba(60,0,40,.5)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.mnav summary svg{stroke:var(--txt)}
.mnav summary::-webkit-details-marker{display:none}
.mnav .drop{position:absolute;right:0;top:52px;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 24px 50px -20px rgba(80,20,60,.4)}
.mnav .drop a{display:block;padding:11px 14px;border-radius:10px;font:600 15px Poppins}
.mnav .drop a:hover,.mnav .drop a.on{background:var(--bg2);color:var(--accTxt)}

/* hero */
.hero{position:relative;padding:64px 0 84px;overflow:hidden;background:
  radial-gradient(520px 420px at 92% 12%,rgba(255,212,0,.22),transparent 70%),
  radial-gradient(560px 460px at 70% 95%,rgba(124,77,255,.14),transparent 70%),
  radial-gradient(600px 480px at 5% 0%,rgba(255,61,139,.14),transparent 70%),
  radial-gradient(460px 380px at 30% 100%,rgba(0,161,75,.10),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;font:600 12px Inter;letter-spacing:1.8px;text-transform:uppercase;color:var(--accTxt);background:#fff;border:1px solid #f6cfe0;padding:7px 14px;border-radius:999px;margin-bottom:24px;box-shadow:0 6px 16px -10px rgba(240,40,122,.5)}
.pill i{width:7px;height:7px;border-radius:50%;background:#16b96b;box-shadow:0 0 0 4px rgba(22,185,107,.18)}
h1{font:800 clamp(36px,5vw,60px)/1.07 Poppins;letter-spacing:-1.6px;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(90deg,#e8202b,#ff8c00 25%,#e8b400 42%,#1aa357 60%,#2b6cf0 78%,#8a2be2);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mut);font-size:18px;max-width:520px;margin:22px 0 34px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;color:var(--mut);font-size:14.5px;list-style:none}
.ticks li:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffe3ef;color:var(--accTxt);font-weight:700;font-size:12px;margin-right:8px}
.photo{position:relative;justify-self:end;width:100%;max-width:440px;margin:40px 26px 40px 0}
.photo:before{content:"";position:absolute;inset:-14px -14px 14px 14px;border-radius:34px;background:var(--pride);background:linear-gradient(160deg,#ff3d8b,#ff8c00 35%,#ffd400 55%,#1aa357 70%,#2b6cf0 85%,#8a2be2);opacity:.9;transform:rotate(3deg)}
.photo img{position:relative;width:100%;aspect-ratio:900/1046;object-fit:cover;border-radius:28px;box-shadow:0 40px 80px -36px rgba(80,20,60,.6);border:6px solid #fff}
.bub{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;border-radius:18px;padding:10px 16px 10px 10px;box-shadow:0 18px 36px -16px rgba(60,20,60,.45);font-size:14px;color:var(--txt)}
.bub b{display:block;font:600 12.5px Poppins;color:var(--mut)}
.bub.b1{left:-90px;top:-30px;border-bottom-left-radius:4px}
.bub.b2{right:-40px;bottom:120px;border-bottom-right-radius:4px}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 14px Poppins;color:#fff}
.a1{background:linear-gradient(135deg,#ff7a45,#e43a5c)}.a2{background:linear-gradient(135deg,#3a8dff,#7c4dff)}
.tag{position:absolute;left:-60px;bottom:-26px;display:flex;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:12px 18px 12px 12px;box-shadow:0 18px 40px -16px rgba(60,20,60,.5)}
.tag b{display:block;font:600 14px Poppins}
.tag small{color:var(--mut);font-size:12.5px}
.tag i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:#fff}
.tag svg{width:19px;height:19px}

/* sections */
section{padding:92px 0}
section.alt{background:var(--bg2)}
.kicker{display:block;text-align:center;font:600 12.5px Inter;letter-spacing:2.4px;text-transform:uppercase;color:var(--accTxt);margin-bottom:12px}
h2{font:700 clamp(28px,3.6vw,42px)/1.15 Poppins;letter-spacing:-.8px;text-align:center;text-wrap:balance}
.kicker.left,h2.left{text-align:left}
.sub{color:var(--mut);text-align:center;max-width:620px;margin:14px auto 48px}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.room{display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .18s,box-shadow .18s}
.room:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(120,40,90,.45)}
.room img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%}
.room .txt{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.room h3{font:600 19px Poppins;margin-bottom:6px}
.room p{color:var(--mut);font-size:14.5px;flex:1}
.room .go{margin-top:14px;font:600 14px Poppins;color:var(--accTxt)}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.game{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .18s}
.game:hover{transform:translateY(-3px)}
.game .ic{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff}
.g1 .ic{background:linear-gradient(135deg,#ffb52e,#ff7a45)}.g2 .ic{background:linear-gradient(135deg,#25c48a,#1a9fd6)}
.game h3{font:600 18px Poppins}
.game p{color:var(--mut);font-size:14.5px}
.game .go{margin-left:auto;font:600 22px Poppins;color:var(--accTxt)}

/* features */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pic{position:relative}
.pic:before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:30px;background:linear-gradient(135deg,#ffd400,#ff8c00)}
.pic img{position:relative;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:28px;border:6px solid #fff;box-shadow:var(--shadow)}
.feats{list-style:none;display:grid;gap:20px;margin:30px 0 32px}
.feats li{display:flex;gap:16px;align-items:flex-start}
.feats b{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff}
.feats .c1{background:linear-gradient(135deg,#ff3d8b,#ff7a45)}.feats .c2{background:linear-gradient(135deg,#7c4dff,#3a8dff)}.feats .c3{background:linear-gradient(135deg,#ffb52e,#ff7a45)}.feats .c4{background:linear-gradient(135deg,#25c48a,#1a9fd6)}
.feats strong{display:block;font:600 17px Poppins;margin-bottom:2px}
.feats span{color:var(--mut);font-size:15px}

/* worldwide */
.world{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.world p{color:var(--mut);margin-top:16px;max-width:520px}
.collage{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:460px}
.collage img{width:100%;height:100%!important;object-fit:cover;border-radius:24px;box-shadow:var(--shadow);border:5px solid #fff}
.collage img:first-child{grid-row:1/3}

/* steps, cards */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{padding:30px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.step:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font:700 17px Poppins;color:#fff;background:var(--grad);margin-bottom:18px}
.step:nth-child(2):before{background:linear-gradient(120deg,#7c4dff,#3a8dff)}
.step:nth-child(3):before{background:linear-gradient(120deg,#25c48a,#1a9fd6)}
.step h3{font:600 18px Poppins;margin-bottom:8px}
.step p{color:var(--mut);font-size:15px}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.card .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#ffe3ef;color:var(--accTxt);margin-bottom:18px}
.card h3{font:600 19px Poppins;margin-bottom:8px}
.card p{color:var(--mut);font-size:15px}
.card a{color:var(--accTxt);text-decoration:underline;text-underline-offset:3px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.two .card{padding:34px}
.two .card+.card .ic{background:#efe8ff;color:var(--violet)}

/* closing call to action */
.cta{padding:0 0 92px}
.cta .box{border-radius:32px;padding:84px 30px;text-align:center;color:#fff;background-size:cover;background-position:center 40%;box-shadow:0 30px 60px -30px rgba(240,40,122,.6)}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.92);margin:12px 0 30px;font-size:17px}

/* subpages */
.band{padding:64px 0 54px;text-align:center;background:radial-gradient(520px 300px at 20% 0,rgba(255,61,139,.14),transparent 70%),radial-gradient(520px 300px at 80% 0,rgba(255,212,0,.18),transparent 70%),var(--bg2);border-bottom:1px solid var(--line)}
.band h1{font-size:clamp(32px,4.4vw,50px)}
.band p{color:var(--mut);max-width:640px;margin:14px auto 0;font-size:17px}
.page{padding:60px 0 92px}
.narrow{max-width:740px;margin:0 auto}
.more{text-align:center;margin-top:40px}
.prose{padding:40px 44px}
.prose h2{text-align:left;font:600 21px/1.3 Poppins;letter-spacing:-.2px;margin:32px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#463a55;font-size:15.5px}
.prose p+p{margin-top:12px}
.prose ul{margin:6px 0 0 20px;display:grid;gap:7px}
.prose li::marker{color:var(--acc)}
.prose a{color:var(--accTxt);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--txt)}
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 24px;box-shadow:0 10px 24px -20px rgba(120,40,90,.4)}
.faq summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;font:600 17px Poppins;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:16px;font:400 26px Inter;color:var(--accTxt)}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--mut);padding:0 0 22px;font-size:15.5px}
.faq a{color:var(--accTxt);text-decoration:underline}
.msg{text-align:center;padding:48px 32px}
.msg .big{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:#ffe3ef;color:var(--accTxt)}
.msg h2{font-size:26px;margin-bottom:10px}
.msg p{margin-bottom:26px}
.msg .ctas{justify-content:center}

/* footer */
footer{padding:56px 0 0;color:var(--mut);font-size:14px;background:#fff;border-top:1px solid var(--line)}
footer>.wrap:first-child{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fbrand p{margin-top:14px;max-width:300px}
.fbrand .brand b{font-size:19px;color:var(--txt)}
footer nav{display:flex;flex-direction:column;gap:9px}
footer h4{font:600 13px Inter;letter-spacing:1.6px;text-transform:uppercase;color:var(--txt);margin-bottom:4px}
footer nav a:hover{color:var(--accTxt)}
footer .legal{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;padding-bottom:30px;font-size:13px}
.age{display:inline-block;background:var(--txt);border-radius:6px;padding:1px 7px;font-weight:600;color:#fff;margin-right:10px;font-size:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

/* responsive */
@media (max-width:1060px){
  nav.main{display:none}
  .mnav{display:block}
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .photo{justify-self:center;margin:20px auto}
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.world{grid-template-columns:1fr;gap:48px}
  .pic{max-width:640px}
  footer>.wrap:first-child{grid-template-columns:1fr 1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .top .wrap{height:64px;gap:12px}
  .brand{gap:9px}.brand .mark{width:32px;height:32px}
  .brand b{font-size:19px}.brand small{display:none}
  .top .btn.sm{padding:9px 15px;font-size:13px}
  .hero{padding:40px 0 60px}
  .lead{font-size:16.5px}
  .ctas .btn{flex:1 1 auto}
  .photo{max-width:330px;margin-top:56px}
  .bub.b1{left:-12px;top:-52px}.bub.b2{display:none}.tag{left:auto;right:-12px;bottom:-18px}
  section{padding:64px 0}
  .rooms,.games,.steps,.two{grid-template-columns:1fr}
  .collage{height:340px;gap:10px}
  .pic:before{inset:10px -8px -10px 8px}
  .prose{padding:28px 22px}
  .cta{padding-bottom:64px}
  .cta .box{padding:56px 22px}
  footer>.wrap:first-child{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}