/* www.thefestivalzone.com — festival night look (deep violet, sunset accents). No inline styles anywhere (CSP 'self'). */
:root { --bg:#1a0b2e; --bg2:#2d1450; --panel:rgba(30,14,56,.78); --line:rgba(255,120,190,.18); --txt:#f5f0ff;
        --mut:#bcaed6; --o:#ffb23f; --p:#ff2e88; --v:#7b2ff7; --y:#ffd23f; --ok:#3ecf8e; --red:#ff5d6c; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; color:var(--txt);
  background:radial-gradient(1200px 600px at 85% -10%, rgba(255,46,136,.25), transparent 60%),
             radial-gradient(900px 500px at -10% 10%, rgba(123,47,247,.25), transparent 60%),
             linear-gradient(180deg,var(--bg2),var(--bg) 60%) fixed;
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; }
body { display:flex; flex-direction:column; min-height:100vh; }
a { color:#ff8fc4; } a:hover { color:#ffd0e6; }
img { max-width:100%; height:auto; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip { position:absolute; left:-999px; top:8px; background:#fff; color:#000; padding:6px 10px; border-radius:8px; z-index:9; }
.skip:focus { left:8px; }
[hidden] { display:none !important; }

/* nav */
.nav { display:flex; align-items:center; gap:18px; padding:12px 24px; background:rgba(26,11,46,.82); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.brand-mark { width:40px; height:40px; }
.brand-name { font-size:20px; letter-spacing:-.2px; font-weight:500; }
.brand-name b { background:linear-gradient(90deg,var(--o),var(--p)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.links { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
.links a { color:var(--mut); text-decoration:none; padding:7px 12px; border-radius:999px; font-weight:600; font-size:15px; }
.links a:hover, .links a[aria-current="page"] { color:#fff; background:rgba(255,46,136,.16); }
.nav-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.langsel, input, select, textarea { background:rgba(45,20,80,.7); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font:inherit; font-size:15px; }
textarea { resize:vertical; min-height:96px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--p); box-shadow:0 0 0 1px var(--p); }
.who { display:inline-flex; align-items:center; gap:8px; color:var(--mut); font-size:14px; text-decoration:none; }
.inline { display:inline; margin:0; }

/* buttons */
button { cursor:pointer; font:inherit; }
.btn { display:inline-block; border:0; border-radius:999px; padding:10px 20px; font-weight:700; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,var(--o),var(--p) 55%,var(--v)); box-shadow:0 6px 20px rgba(255,46,136,.25); }
.btn:hover { filter:brightness(1.08); color:#fff; } .btn:disabled { opacity:.55; cursor:default; }
.btn-s { display:inline-block; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:8px 15px; background:transparent; color:var(--txt);
  font-size:14px; font-weight:600; text-decoration:none; }
.btn-s:hover { border-color:var(--p); color:#fff; }
.btn-s.danger { border-color:rgba(255,93,108,.6); color:#ffc9cf; } .btn-s.danger:hover { border-color:var(--red); }
.big { padding:13px 24px; font-size:16px; }

/* layout */
.main { flex:1; width:100%; max-width:1120px; margin:0 auto; padding:24px 20px 40px; }
.section { margin:46px 0; }
.section h2, .card h2 { font-size:24px; margin:0 0 16px; letter-spacing:-.3px; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.panel, .card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px; }
.card { max-width:760px; margin:24px auto; } .card.wide { max-width:1000px; } .card.narrow { max-width:480px; }
.card h1 { margin:0 0 8px; font-size:30px; letter-spacing:-.4px; }
.lead { color:#e4daf5; font-size:17px; margin:0 0 18px; }
.muted { color:var(--mut); } .small { font-size:14px; margin:12px 0 0; }
.stack { display:flex; flex-direction:column; gap:9px; }
.stack label { font-size:14px; color:var(--mut); margin-top:6px; }
.stack .check { display:flex; gap:9px; align-items:center; color:var(--txt); font-size:15px; }
.stack .btn { align-self:flex-start; margin-top:10px; }
.otp { text-align:center; font-size:22px; letter-spacing:6px; }
.err, .ok, .warn { margin:12px 0; padding:10px 14px; border-radius:12px; font-size:15px; }
.err { background:rgba(255,93,108,.14); border:1px solid rgba(255,93,108,.45); color:#ffd3d8; }
.ok { background:rgba(62,207,142,.13); border:1px solid rgba(62,207,142,.45); color:#c6f7df; }
.warn { background:rgba(255,178,63,.12); border:1px solid rgba(255,178,63,.45); color:#ffe3b5; }

/* hero */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; margin:18px 0 10px; }
.hero h1 { font-size:clamp(34px,5vw,56px); line-height:1.08; margin:4px 0 16px; letter-spacing:-1px; }
.eyebrow { text-transform:uppercase; letter-spacing:3px; font-size:13px; font-weight:700; color:var(--o); margin:0; }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.hero-art { width:100%; border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; }
.feature h3 { margin:12px 0 6px; font-size:18px; } .feature p { margin:0; color:#e0d6f2; }
.steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.steps li { counter-increment:s; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px 20px 20px 66px; position:relative; }
.steps li::before { content:counter(s); position:absolute; left:18px; top:18px; width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:800; background:linear-gradient(135deg,var(--o),var(--p)); }
.plus-teaser { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,178,63,.16),rgba(255,46,136,.16) 50%,rgba(123,47,247,.2)); }
.plus-teaser p { margin:0; max-width:640px; }

/* lobby */
.soon { text-align:center; padding:30px 16px; border:1px dashed rgba(255,178,63,.5); border-radius:16px; background:rgba(255,178,63,.06); margin:8px 0 16px; }
.soon h2, .soon h3 { margin:0 0 6px; color:var(--y); }
.soon p { margin:0 auto; max-width:560px; color:#f0e6ff; }
.rooms { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.room { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:6px 14px; align-items:center; padding:12px 14px;
  border:1px solid var(--line); border-radius:14px; background:rgba(45,20,80,.45); }
.room:hover { border-color:rgba(255,46,136,.5); }
.room-main { display:flex; flex-direction:column; min-width:0; }
.room-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-owner { font-size:13px; color:var(--mut); }
.room-people { color:var(--mut); font-size:14px; white-space:nowrap; }
.room-people.live::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:7px;
  box-shadow:0 0 0 3px rgba(62,207,142,.25); }
.badge { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; color:#e8defa; }
.acc-open { border-color:rgba(62,207,142,.5); color:#bff3da; }
.acc-approval { border-color:rgba(255,178,63,.55); color:#ffe0a8; }
.acc-password, .acc-closed { border-color:rgba(168,123,255,.55); color:#dccaff; }
.badge.full { border-color:rgba(255,93,108,.5); color:#ffc9cf; }
.join { padding:7px 16px; font-size:14px; box-shadow:none; }

/* moozpro+ */
.plans { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:10px 0 18px; }
.plan { border:1px solid var(--line); border-radius:18px; padding:22px; background:rgba(45,20,80,.45); }
.plan.plus { border:1px solid transparent; background:linear-gradient(rgba(40,16,70,.95),rgba(40,16,70,.95)) padding-box,
  linear-gradient(120deg,var(--o),var(--p),var(--v)) border-box; }
.plan h2 { margin:0; } .price { font-size:20px; font-weight:800; color:var(--y); margin:6px 0 10px; }
.plan ul { padding-left:20px; margin:0 0 16px; } .plan li { margin:4px 0; }
.periods { display:flex; gap:8px; } .period { border:1px solid rgba(255,210,63,.5); color:#ffe9a3; border-radius:999px; padding:4px 12px; font-size:13px; font-weight:700; }
.note { color:#ffe3b5; }
.faq dt { font-weight:700; margin-top:14px; } .faq dd { margin:4px 0 0; color:#e0d6f2; }

/* profile + avatar (initials; the Globestar account has no photo) */
.me { display:flex; gap:16px; align-items:center; margin:8px 0 18px; } .me h1 { margin:0; }
.av { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:800; color:#fff; flex:none; }
.av.sm { width:28px; height:28px; font-size:12px; } .av.lg { width:72px; height:72px; font-size:26px; }
.h0 { background:linear-gradient(135deg,#ffb23f,#ff2e88); } .h1 { background:linear-gradient(135deg,#ff2e88,#7b2ff7); }
.h2 { background:linear-gradient(135deg,#7b2ff7,#2f6bff); } .h3 { background:linear-gradient(135deg,#00b4a6,#2f6bff); }
.h4 { background:linear-gradient(135deg,#ff6b35,#ffd23f); } .h5 { background:linear-gradient(135deg,#e83e8c,#ff6b35); }
.h6 { background:linear-gradient(135deg,#3ecf8e,#00b4a6); } .h7 { background:linear-gradient(135deg,#a87bff,#ff2e88); }
.bio { white-space:pre-line; }

.foot { color:var(--mut); font-size:13px; text-align:center; padding:22px 16px 28px; border-top:1px solid var(--line); }
.foot p { margin:4px 0; }

@media (max-width:860px) {
  .hero { grid-template-columns:1fr; } .hero-art { order:-1; max-height:260px; object-fit:cover; }
  .features, .steps, .plans { grid-template-columns:1fr; }
  .room { grid-template-columns:minmax(0,1fr) auto; } .room .badge { justify-self:start; }
  .links { order:3; flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }