:root{
  --bg:#071018;
  --bg2:#0b151e;
  --panel:#101c26;
  --text:#f5f7f8;
  --muted:#9caab2;
  --accent:#32dce6;
  --line:rgba(255,255,255,.09);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

/* Navigation */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(4,10,14,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{height:74px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-right:auto}
.brand img{width:42px;height:42px;object-fit:contain}
.nav nav{display:flex;gap:28px}
.nav nav a{font-size:14px;color:#d2dade}
.nav nav a:hover{color:var(--accent)}

/* Hero */
.hero{position:relative;min-height:100vh;background-image:url("../assets/palmera-background.png");background-size:cover;background-position:center center;display:flex;align-items:flex-end;overflow:hidden}
.hero-shade{position:absolute;inset:0;background:
linear-gradient(to bottom,rgba(0,0,0,.20) 0%,rgba(0,0,0,.08) 35%,rgba(0,0,0,.33) 66%,rgba(5,12,17,.92) 100%),
linear-gradient(to right,rgba(0,0,0,.15),transparent 40%,rgba(0,0,0,.08))}
.hero-content{position:relative;z-index:3;width:100%;padding-bottom:80px}
.hero-spacer{height:52vh}
.hero-panel{max-width:760px;padding:28px 30px;background:rgba(6,14,20,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 25px 70px rgba(0,0,0,.35)}
.hero-kicker,.eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--accent)}
.hero-panel h1{margin:0;font-size:clamp(42px,5vw,66px);line-height:.95;letter-spacing:-.045em}
.hero-panel>p:last-of-type{margin:18px 0 0;color:#c6d0d5;line-height:1.65;font-size:16px}
.hero-actions,.join-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:8px;font-size:14px;font-weight:700}
.primary{background:var(--accent);color:#031114}
.secondary{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.scroll-down{position:absolute;z-index:4;right:32px;bottom:30px;color:#d5dce0;font-size:12px}

/* Content */
.section{padding:100px 0}
.alt{background:var(--bg2)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
h2{margin:0;font-size:clamp(36px,5vw,58px);letter-spacing:-.04em;line-height:1.05}
.intro-copy p,.section-head>p:last-child,.join p{color:var(--muted);line-height:1.8}
.section-head{max-width:760px;margin-bottom:42px}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-grid article{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;min-height:220px}
.feature-grid article>span{color:var(--accent);font-size:12px}
.feature-grid h3{margin:44px 0 10px;font-size:21px}
.feature-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* 2x2 for 4 departments */
.departments-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.departments-grid article{border:1px solid var(--line);border-radius:14px;padding:28px;background:rgba(255,255,255,.02)}
.dept-code{color:var(--accent);font-size:30px;font-weight:900}
.departments-grid h3{font-size:21px;margin:35px 0 10px}
.departments-grid p{color:var(--muted);line-height:1.65;font-size:14px}

.join{background:linear-gradient(135deg,#0a1d26,#071018);padding:90px 0}
.join-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}
.join-inner>div:first-child{max-width:650px}
.join-actions{flex-shrink:0;margin-top:0}

footer{background:#04090d;border-top:1px solid var(--line)}
.footer{min-height:80px;display:flex;align-items:center;color:var(--muted);font-size:13px}
.footer-simple{justify-content:flex-end}

/* Rules page */
.rules-body{background:#071018}
.rules-hero{padding:150px 0 70px;background:linear-gradient(180deg,#0b1821,#071018)}
.rules-hero p{max-width:760px;color:var(--muted);line-height:1.7}
.rules-layout{display:grid;grid-template-columns:240px 1fr;gap:55px;padding:70px 0 100px}
.rules-nav{position:sticky;top:100px;align-self:start;border:1px solid var(--line);border-radius:12px;padding:18px;background:#0b151e}
.rules-nav a{display:block;padding:10px 8px;color:#aebbc2;font-size:13px;border-radius:8px}
.rules-nav a:hover{background:rgba(50,220,230,.08);color:var(--accent)}
.rules-content section{scroll-margin-top:105px;border-bottom:1px solid var(--line);padding:0 0 38px;margin-bottom:38px}
.rules-content h2{font-size:32px;margin-bottom:18px}
.rules-content h3{font-size:18px;margin:22px 0 8px}
.rules-content p,.rules-content li{color:var(--muted);line-height:1.75}
.rules-content ol,.rules-content ul{padding-left:22px}
.rules-note{padding:16px 18px;border-left:3px solid var(--accent);background:#0b151e;border-radius:6px;color:#c9d5da!important}

@media(max-width:900px){
  .nav nav{gap:16px}
  .hero-content{padding-bottom:55px}
  .hero-spacer{height:48vh}
  .intro-grid,.feature-grid,.departments-grid{grid-template-columns:1fr}
  .join-inner{flex-direction:column;align-items:flex-start}
  .join-actions{margin-top:10px}
  .rules-layout{grid-template-columns:1fr}
  .rules-nav{position:relative;top:auto}
}
@media(max-width:700px){
  .nav nav{display:none}
}
@media(max-width:560px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .brand span{display:none}
  .hero{background-position:center top;min-height:92vh}
  .hero-spacer{height:43vh}
  .hero-panel{padding:22px}
  .hero-panel h1{font-size:42px}
  .hero-actions,.join-actions{flex-direction:column;width:100%}
  .btn{width:100%}
  .scroll-down{display:none}
  .section{padding:75px 0}
  .intro-grid{gap:28px}
  .footer-simple{justify-content:center}
}