:root{
  --bg:#0c0f14;
  --bg-2:#12161d;
  --card:#171c25;
  --muted:#9aa3b2;
  --text:#e6ecf3;
  --primary:#ff9b30;      /* accent galben-portocaliu */
  --primary-2:#ff6230;    /* accent ro?u-portocaliu */
  --brand:#ffffff;
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Reset mic */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0a0d12,#0e131b 40%,#0c0f14);
}

/* Helpers */
.container{width:min(1200px,92%); margin:auto}
.btn{display:inline-block; padding:.85rem 1.25rem; border-radius:10px; text-decoration:none; font-weight:700; transition:.2s}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#111}
.btn-ghost{border:1px solid #2a3140; color:var(--text)}
.btn-ghost:hover{background:#1a2130}
.grid-3{display:grid; gap:24px; grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.nav-links a.active { color: var(--primary); font-weight: 600; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(12,15,20,.7); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px}
.brand{display:flex; align-items:center; gap:12px; color:var(--brand); text-decoration:none; font-weight:800; letter-spacing:.5px}
.brand-logo{height:38px; width:auto}
.brand-text{font-size:20px}

.main-nav ul{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.main-nav a{color:var(--text); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:8px; transition:.15s}
.main-nav li.active>a, .main-nav a:hover{background:#1a2230}
.discord-btn{background:#5865F2; color:#fff; border-radius:10px}
.has-dropdown{position:relative}
.has-dropdown .dropdown{
  position:absolute; left:0; top:110%; min-width:200px; background:#101521; border:1px solid #222a3b;
  border-radius:12px; padding:8px; display:none; box-shadow:var(--shadow)
}
.has-dropdown:hover .dropdown{display:block}
.dropdown a{display:block; padding:10px 12px; border-radius:8px}
.dropdown a:hover{background:#161d2a}

/* Burger mobile */
.nav-toggle{display:none; background:none; border:0; width:40px; height:40px}
.nav-toggle span{display:block; height:2px; background:#fff; margin:7px 0; transition:.2s}
@media (max-width:980px){
  .nav-toggle{display:block}
  .main-nav{position:absolute; inset:72px 0 auto 0; background:#0c0f14; border-bottom:1px solid #1f2635; display:none}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; align-items:flex-start; padding:10px 16px}
  .has-dropdown .dropdown{position:relative; top:0; min-width:100%; border:0; background:#0f1420; display:block}
}

/* ===== Hero ===== */
.hero{position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid #1b2232}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9)}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 400px at 15% 100%, rgba(255,98,48,.25), transparent 60%),
    radial-gradient(1000px 400px at 85% 100%, rgba(255,155,48,.22), transparent 60%),
    linear-gradient(180deg, rgba(5,7,10,.65), rgba(5,7,10,.75) 55%, rgba(5,7,10,.9))
}
.hero-content{position:relative; text-align:center; padding:80px 0}
.hero h1{font-size:clamp(32px,5vw,56px); margin:0 0 10px}
.hero h1 span{background:linear-gradient(90deg,var(--primary),var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:0 0 22px; color:var(--muted)}
.cta{display:flex; gap:12px; justify-content:center}

/* ===== About + Contact ===== */
.story{position:relative}
.story-logo{width:72px; height:72px; object-fit:contain; display:block; margin-bottom:14px; filter:drop-shadow(0 6px 18px rgba(255,120,40,.15))}
.socials{display:flex; gap:10px; margin-top:14px}
.socials a{width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:#121826; color:#c9d3e1; text-decoration:none; border:1px solid #222a3b}
.socials a:hover{background:#1a2130}

.about h3, .contact h3{margin:6px 0 14px}
.about-list{list-style:none; padding:0; margin:0}
.about-list li{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed #222a3b; color:#c7d0df}
.about-list i{color:var(--primary)}

.contact-form .row{display:flex; gap:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; background:#0f1420; color:#e8eef6; border:1px solid #222a3b
}
.contact-form textarea{resize:vertical}
.contact-form .btn{margin-top:10px}

@media (max-width:980px){
  .grid-3{grid-template-columns:1fr}
  .contact-form .row{flex-direction:column}
}

/* ===== Footer ===== */
.site-footer{border-top:1px solid #1b2232; background:#0b0f15}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0}
.footer-inner p{margin:0; color:#9aa6b6; font-size:14px}
.footer-inner .credit span{color:var(--primary)}