:root{
  --bg:#05070d;
  --bg-soft:#080d17;
  --panel:rgba(12,18,30,.80);
  --panel-strong:rgba(15,23,38,.94);
  --panel-hover:rgba(18,29,48,.96);
  --line:rgba(157,184,221,.14);
  --line-strong:rgba(117,212,255,.28);
  --text:#f5f8ff;
  --muted:#91a0b8;
  --muted-2:#687890;
  --cyan:#55d9ff;
  --cyan-2:#8be9ff;
  --violet:#8e7dff;
  --green:#37df8b;
  --red:#ff697c;
  --amber:#ffc56a;
  --shadow:0 22px 70px rgba(0,0,0,.38);
  --shadow-soft:0 12px 36px rgba(0,0,0,.24);
  --r:20px;
  --r-sm:13px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%,rgba(46,181,255,.16),transparent 65%),
    radial-gradient(800px 520px at 90% 4%,rgba(126,92,255,.15),transparent 62%),
    linear-gradient(180deg,#05070d 0%,#070b13 42%,#05070d 100%);
  background-attachment:fixed;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);
}
::selection{background:rgba(85,217,255,.28);color:#fff}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;z-index:1000;left:16px;top:-70px;padding:11px 15px;border-radius:10px;background:#b9efff;color:#041019;font-weight:850;transition:top .2s}.skip-link:focus{top:14px}
button,input,textarea,select{font:inherit}
.topline{
  height:3px;
  background:linear-gradient(90deg,#38cfff 0%,#6be5ff 35%,#8e7dff 70%,#b388ff 100%);
  box-shadow:0 0 26px rgba(85,217,255,.35);
}

/* Navigation */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(5,8,15,.76);
  backdrop-filter:blur(22px) saturate(135%);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max);margin:auto;min-height:82px;
  display:flex;align-items:center;gap:24px;padding:0 24px;
}
.brand{display:flex;align-items:center;gap:13px;font-weight:950;letter-spacing:.075em;white-space:nowrap}
.brand-mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  border:1px solid rgba(85,217,255,.38);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.17),transparent 35%),
    linear-gradient(145deg,rgba(85,217,255,.22),rgba(142,125,255,.18));
  box-shadow:inset 0 0 20px rgba(85,217,255,.06),0 10px 34px rgba(43,158,255,.14);
}
.brand-mark:before{content:"S";font-size:22px;font-weight:1000}
.brand span{font-size:14px}
.brand small{display:block;margin-top:3px;color:#73859f;font-size:8px;letter-spacing:.25em;font-weight:800}
.nav-links{display:flex;align-items:center;gap:3px;margin-left:auto}
.nav-links a{
  position:relative;padding:10px 11px;border-radius:10px;
  color:#aebcd0;font-size:13px;font-weight:650;transition:.2s ease;
}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.055)}
.nav-links a:after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(0);transition:.2s;
}
.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}
.nav-actions{display:flex;gap:9px;align-items:center}

/* Buttons */
.btn{
  min-height:43px;border:1px solid transparent;border-radius:12px;
  padding:11px 16px;font-weight:850;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  color:#031017;
  background:linear-gradient(135deg,#53d8ff,#89ecff);
  box-shadow:0 12px 28px rgba(55,192,240,.18);
}
.btn-primary:hover{box-shadow:0 15px 34px rgba(55,192,240,.28)}
.btn-secondary{
  color:#edf5ff;background:rgba(255,255,255,.048);
  border-color:var(--line);
}
.btn-secondary:hover{background:rgba(255,255,255,.085);border-color:rgba(125,209,255,.28)}
.btn-violet{color:#fff;background:linear-gradient(135deg,#7768ff,#a38fff);box-shadow:0 12px 28px rgba(119,104,255,.2)}
.discord-btn{width:100%;background:linear-gradient(135deg,#5865f2,#7289ff);color:#fff;box-shadow:0 14px 35px rgba(88,101,242,.2)}

/* Hero */
.hero{
  max-width:var(--max);margin:auto;padding:104px 24px 72px;
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:54px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan-2);font-weight:900;
}
.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.hero h1{
  max-width:850px;font-size:clamp(48px,7vw,90px);line-height:.92;
  margin:15px 0 24px;letter-spacing:-.052em;font-weight:950;
}
.hero h1 span{
  background:linear-gradient(90deg,#fff 4%,#a3f1ff 45%,#baaeff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{max-width:760px;margin:0;color:#a8b7cb;font-size:18px;line-height:1.78}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.hero-card{
  position:relative;overflow:hidden;padding:29px;border:1px solid var(--line);
  border-radius:28px;background:
    linear-gradient(155deg,rgba(19,29,48,.93),rgba(8,13,23,.91));
  box-shadow:var(--shadow);
}
.hero-card:before{
  content:"";position:absolute;width:260px;height:260px;right:-100px;top:-100px;border-radius:50%;
  background:rgba(74,201,255,.18);filter:blur(65px)
}
.hero-card:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 35%)
}
.status-row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px}
.status-dot{width:10px;height:10px;border-radius:50%;background:#76849a;box-shadow:0 0 0 5px rgba(118,132,154,.08)}
.status-dot.online{background:var(--green);box-shadow:0 0 0 5px rgba(55,223,139,.11),0 0 26px rgba(55,223,139,.36)}
.big-num{position:relative;z-index:1;font-size:58px;font-weight:950;letter-spacing:-.06em;margin:22px 0 7px}
.server-code{
  position:relative;z-index:1;margin-top:22px;padding:15px 16px;border-radius:13px;
  background:rgba(2,7,14,.7);border:1px solid rgba(149,181,218,.12);
  font-family:Consolas,ui-monospace,monospace;color:#c9d8eb;
}

/* Sections/cards */
.section{max-width:var(--max);margin:auto;padding:72px 24px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section h2,.page-hero h1{letter-spacing:-.038em}
.section h2{font-size:clamp(31px,4vw,44px);margin:8px 0 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{
  position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:
    linear-gradient(150deg,rgba(17,25,40,.89),rgba(9,14,24,.82));
  box-shadow:var(--shadow-soft);overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.03),transparent 38%);
}
.card:hover{transform:translateY(-3px);border-color:rgba(102,206,255,.24);background:linear-gradient(150deg,rgba(20,31,50,.94),rgba(10,16,27,.89))}
.card h3{position:relative;margin:0 0 10px;font-size:18px;letter-spacing:-.015em}
.card p{position:relative;margin:0;color:#a4b2c7;line-height:1.72}
.card .tag{
  position:relative;display:inline-flex;padding:6px 10px;border-radius:999px;
  background:rgba(85,217,255,.08);border:1px solid rgba(85,217,255,.14);
  color:#9cecff;font-size:11px;font-weight:850;letter-spacing:.03em;margin-bottom:14px;
}
.muted{color:var(--muted)}
.team-card{display:flex;align-items:center;gap:17px}
.avatar{
  flex:0 0 62px;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(85,217,255,.19),rgba(142,125,255,.2));
  border:1px solid rgba(121,199,255,.18);font-weight:950;font-size:22px;
}
.rule{padding:19px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:0}.rule strong{display:block;margin-bottom:7px;color:#eef5ff}

/* Forms */
.form-shell{max-width:560px;margin:72px auto;padding:0 22px}
.form-card{
  padding:30px;border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(155deg,rgba(18,27,45,.96),rgba(8,13,22,.93));box-shadow:var(--shadow)
}
.form-card h1{margin:0 0 7px;letter-spacing:-.03em}
.field{margin:16px 0}
.field label{display:block;margin-bottom:8px;color:#d5deeb;font-size:12px;font-weight:800;letter-spacing:.015em}
.field input,.field textarea,.field select{
  width:100%;border:1px solid rgba(151,181,220,.14);
  background:rgba(3,8,15,.72);color:#fff;border-radius:12px;
  padding:13px 14px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
}
.field textarea{min-height:125px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#56667c}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(85,217,255,.54);background:rgba(5,11,20,.92);
  box-shadow:0 0 0 3px rgba(85,217,255,.07)
}
.field input:disabled{opacity:.7}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--line)}
.notice{
  padding:13px 15px;border-radius:12px;background:rgba(85,217,255,.07);
  border:1px solid rgba(85,217,255,.18);color:#b8efff;font-size:13px;line-height:1.55;
}
.error{background:rgba(255,105,124,.075);border-color:rgba(255,105,124,.24);color:#ffc2ca}
.empty{color:var(--muted);padding:18px;border:1px dashed rgba(148,173,208,.18);border-radius:13px;background:rgba(255,255,255,.018)}

/* Admin */
.admin-layout{max-width:var(--max);margin:auto;padding:52px 24px 78px}
.admin-layout>.section-head{
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px
}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.list{display:grid;gap:10px}
.list-item{
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  padding:15px 16px;border-radius:14px;background:rgba(4,9,16,.64);
  border:1px solid rgba(151,181,220,.11);transition:.18s;
}
.list-item:hover{border-color:rgba(85,217,255,.2);background:rgba(7,14,24,.82)}
.list-item strong{color:#f2f7ff}
.user-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.user-controls select{min-width:145px;border:1px solid var(--line);background:#07101a;color:#fff;border-radius:10px;padding:10px}

/* Pages */
.page-hero{max-width:var(--max);margin:auto;padding:82px 24px 34px}
.page-hero h1{font-size:clamp(42px,6vw,66px);margin:10px 0 13px}
.page-hero p{max-width:760px;color:#9eacc0;line-height:1.75}
.content-box{max-width:var(--max);margin:auto;padding:0 24px 72px}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* Footer */
.footer{border-top:1px solid var(--line);margin-top:60px;background:rgba(2,5,10,.25)}
.footer-inner{
  max-width:var(--max);margin:auto;padding:38px 24px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  color:#73839b;font-size:12px
}
.footer-links{display:flex;gap:17px;flex-wrap:wrap}
.footer-links a:hover{color:#ccefff}

/* Details / whitelist */
details{border-radius:12px}
summary{color:#d8e8fb;font-weight:750}
details[open] summary{color:var(--cyan-2)}
.status-pill{
  background:rgba(85,217,255,.07)!important;
  border-color:rgba(85,217,255,.2)!important;
  color:#bcefff!important
}

/* Scrollbar */
*{scrollbar-width:thin;scrollbar-color:#31435d #07101a}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#07101a}
::-webkit-scrollbar-thumb{background:#31435d;border-radius:20px;border:2px solid #07101a}
::-webkit-scrollbar-thumb:hover{background:#41617f}

/* Responsive */
.mobile-toggle{display:none;margin-left:auto}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:68px}
  .grid,.two,.admin-grid,.guide-grid{grid-template-columns:1fr}
  .nav-links{
    display:none;position:absolute;left:14px;right:14px;top:76px;
    flex-direction:column;align-items:stretch;margin:0;padding:10px;
    background:rgba(7,12,21,.98);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)
  }
  .nav-links.open{display:flex}
  .nav-actions{display:none}
  .mobile-toggle{display:inline-flex}
  .section-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){
  .nav-inner{padding:0 16px;min-height:74px}
  .brand span{display:none}
  .hero{padding:56px 18px 48px}
  .hero h1{font-size:46px}
  .hero p{font-size:16px}
  .section,.page-hero,.content-box,.admin-layout{padding-left:18px;padding-right:18px}
  .page-hero h1{font-size:40px}
  .card,.form-card{padding:20px}
  .form-shell{padding:0 16px}
  .list-item{align-items:flex-start;flex-direction:column}
  .user-controls{width:100%}
  .user-controls select,.user-controls .btn{width:100%}
}


/* =========================================================
   SKYLIGHT CITY RP — HOMEPAGE REDESIGN 2026
   ========================================================= */

.home-page{
  overflow-x:hidden;
  background:
    linear-gradient(180deg,rgba(4,8,15,.72) 0%,rgba(4,8,15,.88) 45%,rgba(4,8,15,.95) 100%),
    url('/assets/skylight-hero-night.png') center top/cover fixed no-repeat;
}
.home-page .nav{
  background:rgba(4,7,13,.82);
}
.gv-hero{position:relative;min-height:690px;display:grid;place-items:center;text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}.gv-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,13,.35),rgba(3,7,13,.82))}.gv-hero-inner{position:relative;max-width:880px;padding:105px 24px}.gv-welcome{margin:18px 0 0;color:#a8b8cc;font-size:21px}.gv-hero h1{margin:10px 0 21px;font-size:clamp(66px,11vw,130px);line-height:.78;letter-spacing:-.08em}.gv-hero h1 span{background:linear-gradient(90deg,#6ce4ff,#b49aff);-webkit-background-clip:text;color:transparent}.gv-lead{max-width:680px;margin:auto;color:#c0ccdd;font-size:18px;line-height:1.7}.gv-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0}.gv-status{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(5,11,20,.7);font-size:12px}.gv-status [data-players]{color:#aeeeff;font-weight:900}.gv-status button{border:0;background:transparent;color:#aeeeff;cursor:pointer;font:inherit}.gv-about{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center;padding-top:100px}.gv-about h2,.gv-section-intro h2{font-size:clamp(38px,5vw,58px);line-height:.98;margin:12px 0 22px}.gv-about p{max-width:690px;color:#a9b8cc;line-height:1.8}.gv-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.gv-stats article,.gv-feature-grid article{padding:25px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(145deg,rgba(15,24,40,.9),rgba(7,12,22,.88))}.gv-stats article{min-height:145px;display:flex;flex-direction:column;justify-content:flex-end}.gv-stats strong{font-size:32px;color:#b8f1ff}.gv-stats span{margin-top:7px;color:#74859e;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.gv-features{padding-top:80px}.gv-section-intro{text-align:center;max-width:780px;margin:0 auto 38px}.gv-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gv-feature-grid b{color:#77e4ff;font-size:12px}.gv-feature-grid h3{font-size:22px;margin:17px 0 9px}.gv-feature-grid p{margin:0;color:#a0afc3;line-height:1.7;font-size:14px}.gv-news{padding-top:80px}@media(max-width:850px){.gv-about{grid-template-columns:1fr}.gv-feature-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.gv-hero{min-height:600px}.gv-hero-inner{padding:80px 18px}.gv-status{flex-wrap:wrap;justify-content:center}.gv-feature-grid,.gv-stats{grid-template-columns:1fr}}
.home-page .nav-inner{
  max-width:1320px;
}
.home-page .brand-mark{
  border-radius:12px;
}
.home-hero{
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.home-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,8,14,.80) 0%,rgba(5,10,18,.70) 45%,rgba(7,9,19,.42) 100%),
    linear-gradient(180deg,rgba(5,8,15,.12),rgba(4,7,13,.47)),
    radial-gradient(circle at 72% 35%,rgba(81,209,255,.14),transparent 28%),
    radial-gradient(circle at 82% 42%,rgba(142,125,255,.14),transparent 34%);
}
.home-hero:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000,transparent 95%);
}
.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
  opacity:.6;
}
.hero-glow-one{
  width:420px;height:420px;
  right:10%;top:10%;
  background:rgba(55,198,255,.16);
}
.hero-glow-two{
  width:380px;height:380px;
  right:-4%;bottom:0;
  background:rgba(130,93,255,.18);
}
.home-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1320px;
  margin:auto;
  padding:96px 24px 92px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
  gap:78px;
  align-items:center;
}
.home-hero-copy{
  max-width:820px;
}
.home-hero h1{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:18px 0 26px;
  font-size:clamp(64px,7.4vw,112px);
  line-height:.82;
  letter-spacing:-.07em;
  font-weight:1000;
}
.hero-line-light{
  color:#f7fbff;
}
.hero-line-gradient{
  padding-bottom:.08em;
  background:linear-gradient(90deg,#78e8ff 0%,#b1efff 37%,#a998ff 75%,#d4b4ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 12px 38px rgba(92,194,255,.08));
}
.hero-lead{
  max-width:730px;
  font-size:19px;
  line-height:1.78;
  color:#aab7c9;
}
.hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}
.hero-chips span{
  padding:8px 11px;
  border-radius:999px;
  color:#c8d6e9;
  font-size:12px;
  font-weight:750;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(163,190,227,.1);
}
.btn-large{
  min-height:48px;
  padding:13px 19px;
}
.server-panel{
  position:relative;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(133,190,236,.17);
  background:
    linear-gradient(145deg,rgba(17,27,45,.96),rgba(7,12,22,.94));
  box-shadow:
    0 40px 100px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.server-panel:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(85,217,255,.18),transparent 28%,transparent 72%,rgba(142,125,255,.14));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  padding:1px;
}
.server-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.live-badge{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:13px;
}
.live-label{
  font-size:10px;
  letter-spacing:.18em;
  color:#71839d;
  font-weight:850;
}
.player-block{
  margin:34px 0 24px;
}
.player-block .big-num{
  font-size:70px;
  margin:0 0 8px;
  letter-spacing:-.07em;
}
.server-address{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-radius:15px;
  background:#030811;
  border:1px solid rgba(143,174,214,.11);
}
.server-address small{
  display:block;
  font-size:9px;
  letter-spacing:.18em;
  color:#687b95;
  margin-bottom:6px;
  font-weight:850;
}
.server-address code{
  color:#d9e7f8;
  font-size:13px;
}
.copy-mini{
  width:38px;height:38px;
  border-radius:10px;
  border:1px solid var(--line);
  color:#a9eaff;
  background:rgba(85,217,255,.06);
  cursor:pointer;
}
.whitelist-box{
  margin-top:14px;
  padding:17px;
  border-radius:16px;
  border:1px solid rgba(85,217,255,.18);
  background:linear-gradient(135deg,rgba(26,99,124,.13),rgba(66,45,120,.12));
}
.whitelist-state-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.whitelist-state-row strong{
  color:#94ecff;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.08em;
}
.whitelist-apply{
  width:100%;
  margin-top:14px;
}
.hero-scroll{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  color:#54657c;
  font-size:9px;
  font-weight:900;
  letter-spacing:.24em;
}
.home-strip{
  position:relative;
  z-index:5;
  background:rgba(7,12,20,.86);
  border-bottom:1px solid var(--line);
}
.home-strip-inner{
  max-width:1320px;
  margin:auto;
  padding:19px 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.home-strip-inner>div{
  padding:2px 22px;
  border-right:1px solid var(--line);
}
.home-strip-inner>div:first-child{padding-left:0}
.home-strip-inner>div:last-child{border-right:0}
.home-strip strong{
  display:block;
  color:#f4f8ff;
  font-size:12px;
  margin-bottom:4px;
}
.home-strip span{
  color:#6f8098;
  font-size:11px;
}
.about-city{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:38px;align-items:center;padding-top:96px;padding-bottom:40px}
.about-city-copy{padding:12px 0}.about-city-copy h2{max-width:650px;font-size:clamp(38px,4.8vw,57px);line-height:.98;margin:12px 0 20px}.about-city-copy p{max-width:720px;margin:0 0 14px;color:#a8b8cb;line-height:1.78;font-size:16px}.about-city-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.about-city-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;border:1px solid var(--line);border-radius:27px;background:linear-gradient(145deg,rgba(14,24,40,.9),rgba(6,11,20,.85));box-shadow:var(--shadow-soft)}
.about-city-stats article{min-height:142px;padding:23px;border-radius:18px;border:1px solid rgba(151,181,220,.10);background:rgba(4,9,17,.53);display:flex;flex-direction:column;justify-content:flex-end}.about-city-stats strong{font-size:clamp(25px,3vw,37px);letter-spacing:-.05em;color:#e9f8ff}.about-city-stats article:first-child strong{color:#7ee9ff}.about-city-stats span{margin-top:7px;color:#71839b;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.home-features{
  padding-top:96px;
}
.start-guide{padding-top:82px}
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.start-card{position:relative;min-height:235px;padding:27px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(14,24,40,.92),rgba(6,11,20,.9));box-shadow:var(--shadow-soft);overflow:hidden}
.start-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 40%);pointer-events:none}.step-no{display:inline-grid;place-items:center;width:35px;height:35px;border:1px solid rgba(85,217,255,.2);border-radius:11px;background:rgba(85,217,255,.08);color:#aeeeff;font-size:12px;font-weight:950}.start-card h3{margin:19px 0 10px;font-size:23px;letter-spacing:-.03em}.start-card p{margin:0;color:#9cadc3;line-height:1.72;font-size:14px}.start-card a{display:inline-block;margin-top:21px;color:#91eaff;font-size:13px;font-weight:850}.start-card a:hover{color:#fff}
.section-intro{
  max-width:460px;
}
.factions{padding-top:30px}
.faction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.faction-card{min-height:270px;padding:25px;border-radius:23px;border:1px solid var(--line);overflow:hidden;position:relative;background:linear-gradient(145deg,rgba(15,24,40,.93),rgba(6,11,20,.9));transition:transform .2s ease,border-color .2s ease}
.faction-card:hover{transform:translateY(-4px);border-color:rgba(120,215,255,.36)}
.faction-card:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-85px;bottom:-100px;filter:blur(35px);opacity:.5}
.faction-lspd:after{background:#369eff}.faction-ems:after{background:#ff5d7f}.faction-mechanic:after{background:#ffc463}.faction-street:after{background:#8d70ff}
.faction-icon{display:block;font-size:32px;color:#b9efff;margin-bottom:21px;font-weight:900}
.faction-card .tag{display:inline-flex;padding:6px 9px;border:1px solid rgba(125,210,255,.17);border-radius:999px;color:#aeeeff;background:rgba(85,217,255,.08);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.faction-card h3{font-size:21px;line-height:1.18;margin:15px 0 10px;letter-spacing:-.028em}.faction-card p{position:relative;z-index:1;margin:0;color:#9badc5;line-height:1.7;font-size:14px}
.feature-grid{
  display:grid;
  grid-template-columns:1.45fr .775fr .775fr;
  gap:18px;
}
.feature-card{
  position:relative;
  min-height:290px;
  padding:28px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(150deg,rgba(17,25,41,.92),rgba(8,13,23,.88));
  box-shadow:var(--shadow-soft);
}
.feature-card-large{
  min-height:360px;
  background:
    radial-gradient(circle at 85% 15%,rgba(76,207,255,.11),transparent 32%),
    linear-gradient(145deg,rgba(18,29,47,.97),rgba(8,13,23,.92));
}
.feature-number{
  position:absolute;
  top:18px;
  right:22px;
  color:rgba(160,192,229,.14);
  font-size:56px;
  font-weight:1000;
  letter-spacing:-.06em;
}
.feature-card h3{
  max-width:420px;
  margin:8px 0 12px;
  font-size:clamp(24px,2.4vw,36px);
  letter-spacing:-.04em;
}
.feature-card:not(.feature-card-large) h3{
  font-size:24px;
}
.feature-card p{
  max-width:520px;
  color:#9cabc0;
  line-height:1.75;
}
.feature-accent{
  position:absolute;
  width:220px;height:220px;
  right:-70px;bottom:-90px;
  border-radius:50%;
  background:rgba(74,206,255,.15);
  filter:blur(50px);
}
.section-split{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:54px;
  align-items:start;
}
.split-heading{
  position:sticky;
  top:122px;
}
.split-heading h2{
  font-size:44px;
  margin:10px 0 14px;
}
.home-news-grid,
.home-event-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.section-badge{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  color:#a8bbd4;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
}
.team-showcase{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:30px;
  padding:38px;
  border-radius:30px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 80% 10%,rgba(85,217,255,.08),transparent 30%),
    linear-gradient(145deg,rgba(15,23,38,.94),rgba(7,12,21,.92));
  box-shadow:var(--shadow);
}
.team-showcase-copy h2{
  font-size:46px;
  margin:10px 0 16px;
}
.team-showcase-copy p{
  color:#9dacc0;
  line-height:1.75;
  margin-bottom:24px;
}
.team-showcase-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.team-profile{
  min-height:220px;
  padding:24px;
  border-radius:21px;
  background:rgba(4,9,17,.63);
  border:1px solid rgba(151,181,220,.1);
}
.team-avatar{
  width:66px;height:66px;
  display:grid;place-items:center;
  border-radius:20px;
  margin-bottom:28px;
  font-size:24px;
  font-weight:1000;
  background:linear-gradient(145deg,rgba(85,217,255,.2),rgba(142,125,255,.22));
  border:1px solid rgba(111,211,255,.2);
}
.role-label{
  display:inline-block;
  color:#7fe6ff;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:7px;
}
.team-profile h3{
  margin:0 0 6px;
  font-size:22px;
}
.team-profile p{
  margin:0;
  color:#8191a8;
}
.final-cta{
  position:relative;
  overflow:hidden;
  padding:45px;
  border-radius:30px;
  border:1px solid rgba(94,207,255,.18);
  background:
    linear-gradient(120deg,rgba(16,28,45,.98),rgba(12,15,30,.97));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  box-shadow:var(--shadow);
}
.final-cta h2{
  margin:9px 0 8px;
  font-size:44px;
}
.final-cta p{
  max-width:650px;
  color:#98a9bd;
}
.final-cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.final-cta-glow{
  position:absolute;
  width:350px;height:350px;
  right:-100px;top:-130px;
  border-radius:50%;
  background:rgba(107,103,255,.19);
  filter:blur(80px);
}
.faq-section{padding-top:20px}.faq-list{display:grid;gap:10px}.faq-list details{padding:19px 21px;border:1px solid var(--line);border-radius:16px;background:rgba(7,13,23,.78);transition:border-color .2s}.faq-list details[open]{border-color:rgba(85,217,255,.27)}.faq-list summary{cursor:pointer;list-style:none;font-size:16px}.faq-list summary:after{content:'+';float:right;color:#8be9ff;font-size:22px;line-height:.7}.faq-list details[open] summary:after{content:'–'}.faq-list p{max-width:850px;margin:14px 0 2px;color:#9fafc3;line-height:1.7;font-size:14px}.faq-list code{padding:3px 6px;border-radius:6px;background:rgba(85,217,255,.1);color:#b7efff}
.footer-modern{
  align-items:center;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-brand .brand-mark{
  width:38px;height:38px;
}
.footer-brand strong{
  display:block;
  color:#eaf2ff;
  font-size:12px;
  letter-spacing:.08em;
}
.footer-brand span{
  display:block;
  margin-top:3px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#60728c;
}
.footer-copy{
  max-width:460px;
  text-align:center;
}

@media(max-width:1050px){
  .home-hero-inner{
    grid-template-columns:1fr;
    gap:46px;
    padding-top:78px;
  }
  .server-panel{
    max-width:620px;
  }
  .feature-grid{
    grid-template-columns:1fr 1fr;
  }
  .start-grid{grid-template-columns:1fr 1fr}
  .faction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-card-large{
    grid-column:1/-1;
  }
  .section-split{
    grid-template-columns:1fr;
  }
  .split-heading{
    position:static;
  }
  .team-showcase{
    grid-template-columns:1fr;
  }
  .about-city{grid-template-columns:1fr;padding-top:75px}
}
@media(max-width:760px){
  .home-hero{
    min-height:auto;
  }
  .home-hero-inner{
    padding:62px 18px 72px;
  }
  .home-hero h1{
    font-size:clamp(51px,14vw,76px);
  }
  .hero-lead{
    font-size:16px;
  }
  .home-strip-inner{
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .home-strip-inner>div{
    padding:13px 12px;
    border-bottom:1px solid var(--line);
  }
  .about-city-stats{grid-template-columns:1fr 1fr}.about-city-stats article{min-height:112px;padding:18px}
  .feature-grid,
  .start-grid,
  .faction-grid,
  .home-news-grid,
  .home-event-grid,
  .team-showcase-cards{
    grid-template-columns:1fr;
  }
  .feature-card-large{
    grid-column:auto;
  }
  .team-showcase,
  .final-cta{
    padding:26px;
  }
  .team-showcase-copy h2,
  .final-cta h2{
    font-size:34px;
  }
  .final-cta{
    align-items:flex-start;
    flex-direction:column;
  }
  .final-cta-actions,
  .final-cta-actions .btn{
    width:100%;
  }
  .footer-copy{
    text-align:left;
  }
}


/* =========================================================
   SKYLIGHT CITY RP — PORTAL / WHITELIST / ADMIN
   ========================================================= */
.portal-page{background:#05070d}
.portal-shell{max-width:1180px;margin:auto;padding:64px 24px 90px}
.portal-hero{position:relative;padding:38px 0 30px}
.portal-hero h1{font-size:clamp(42px,6vw,72px);line-height:.95;margin:12px 0 16px;letter-spacing:-.055em}
.portal-hero p{max-width:760px;font-size:16px;line-height:1.75}
.portal-kicker{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.portal-kicker span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);color:#91a5bd;font-size:11px;font-weight:750}
.portal-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(16,25,41,.94),rgba(7,12,21,.9));box-shadow:var(--shadow-soft)}
.portal-status{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;margin-bottom:22px}
.portal-status strong{color:#eaf6ff}
.portal-status small{display:block;margin-top:4px;color:#71839b}
.wl-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.wl-sidebar{position:sticky;top:105px;padding:20px}
.wl-sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#6e829c;font-weight:900;margin-bottom:16px}
.wl-nav{display:grid;gap:8px}
.wl-nav a{padding:11px 12px;border-radius:11px;color:#91a4bc;font-size:12px;border:1px solid transparent}
.wl-nav a:hover{color:#fff;background:rgba(255,255,255,.035);border-color:var(--line)}
.wl-nav b{display:inline-grid;place-items:center;width:23px;height:23px;margin-right:8px;border-radius:8px;background:rgba(85,217,255,.08);color:#91eaff}
.wl-main{min-width:0}
.wl-step{position:relative;margin:0 0 18px;padding:30px!important;border-radius:24px!important}
.wl-step-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.wl-step-no{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,rgba(85,217,255,.15),rgba(142,125,255,.16));border:1px solid rgba(85,217,255,.18);color:#b9f1ff;font-weight:950}
.wl-step h2{font-size:24px!important;margin:0 0 6px!important}
.wl-step .grid{gap:15px}
.wl-step .field{margin:4px 0}
.wl-step .field label{font-size:11px;text-transform:uppercase;letter-spacing:.055em;color:#9eb0c6}
.wl-step .field input,.wl-step .field textarea,.wl-step .field select{background:rgba(2,7,14,.72)}
.wl-submit{padding:32px!important;background:radial-gradient(circle at 90% 0,rgba(85,217,255,.08),transparent 30%),linear-gradient(145deg,rgba(16,25,41,.94),rgba(7,12,21,.9))!important}
.profile-dashboard{max-width:1050px;margin:auto;padding:72px 24px 100px}
.profile-header{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:24px}
.profile-header h1{font-size:54px;margin:8px 0 0;letter-spacing:-.05em}
.profile-user-card{display:grid;grid-template-columns:170px 1fr;overflow:hidden}
.profile-identity{padding:30px;border-right:1px solid var(--line);background:radial-gradient(circle at 20% 10%,rgba(85,217,255,.1),transparent 50%)}
.profile-avatar{width:82px;height:82px;border-radius:25px;display:grid;place-items:center;font-size:31px;font-weight:1000;background:linear-gradient(145deg,rgba(85,217,255,.22),rgba(142,125,255,.24));border:1px solid rgba(112,208,255,.22);margin-bottom:18px}
.profile-details{padding:25px}
.profile-details .list{grid-template-columns:1fr 1fr;display:grid;gap:10px}
.profile-details .list-item{min-height:72px;align-items:flex-start;flex-direction:column}
.profile-details .list-item span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#697c96}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.admin-page .admin-layout{max-width:1320px;padding-top:58px}
.admin-page .admin-layout>.section-head h1{font-size:48px;margin:7px 0}
.admin-page .admin-grid{gap:16px}
.admin-page .card{border-radius:22px}
.admin-page .card>h3,.admin-page .section-head h3{font-size:20px}
.admin-page .list-item{background:rgba(2,7,14,.55)}
.admin-page .field input,.admin-page .field textarea,.admin-page .field select{background:rgba(2,7,14,.75)}
.admin-page details{background:rgba(2,7,14,.4)!important;border-color:var(--line)!important}
.admin-page .status-pill{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.admin-page .btn{font-size:12px}
.admin-page .admin-dashboard-banner{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 22px;margin-bottom:18px;border:1px solid rgba(85,217,255,.15);border-radius:18px;background:linear-gradient(120deg,rgba(85,217,255,.06),rgba(142,125,255,.05))}
@media(max-width:900px){
 .wl-layout{grid-template-columns:1fr}.wl-sidebar{position:static}.wl-nav{grid-template-columns:repeat(2,1fr)}
 .profile-user-card{grid-template-columns:1fr}.profile-identity{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:650px){
 .portal-shell,.profile-dashboard{padding-left:17px;padding-right:17px}
 .wl-nav{grid-template-columns:1fr}.wl-step{padding:21px!important}
 .profile-header{align-items:flex-start;flex-direction:column}.profile-header h1{font-size:42px}
 .profile-details .list{grid-template-columns:1fr}
}