/* =======================
   Base
======================= */
:root{
  --bg:#0b0f14;
  --surface:#0e141e;
  --surface-2:#121b27;
  --text:#e6eef5;
  --muted:#a6b6c8;
  --border:rgba(255,255,255,.12);
  --accent:#d0b37f;          /* złoty – CTA */
  --accent-2:#c19a53;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --container:1200px;
  --radius:14px;
}

/* opcjonalna czcionka jak logo – wrzuć pliki do /assets/fonts/ */
@font-face{
  font-family:'Lineage2';
  src:url('/assets/fonts/lineage2.woff2') format('woff2'),
      url('/assets/fonts/lineage2.woff') format('woff');
  font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 system-ui,Segoe UI,Roboto,sans-serif;
}
a{color:#dce7f3; text-decoration:none}

.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:56px 0}
.card{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}

.font-logo{
  font-family:'Lineage2', system-ui, Segoe UI, Roboto, sans-serif;
  font-weight:800;
  letter-spacing:.5px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =======================
   Header / Navigation
======================= */
.top{
  position:sticky; top:0; z-index:40;
  background:rgba(10,14,20,.72);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:64px}

/* brand */
.brand{display:flex; align-items:center; gap:12px}
.brand .brand-name{color:#fff; font-size:2rem; font-family:'Lineage2', system-ui, Segoe UI, Roboto, sans-serif; font-weight:800}

/* center nav */
.primary-nav{flex:1; display:flex; align-items:center; justify-content:center; gap:14px}

/* wspólna klasa linków */
.navlink{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:10px;
  color:#e2e7ee;
  transition:color .15s ease;
}

/* GLOW (subtelny, bez zmiany koloru) */
.navlink::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:inherit;
  background:radial-gradient(120% 120% at 50% 120%, rgba(255,255,255,.16), transparent 60%);
  opacity:0;
  filter:blur(10px);
  transition:opacity .18s ease, filter .18s ease;
  pointer-events:none;
}
.navlink:hover::before,
.navlink:focus-visible::before{
  opacity:.9;
  filter:blur(12px);
}

/* cienka świetlista kreska pod tekstem */
.navlink::after{
  content:"";
  position:absolute; left:50%; bottom:-6px;
  height:2px; width:0;
  background:rgba(255,255,255,.28);
  box-shadow:0 0 10px rgba(255,255,255,.28);
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .18s ease, opacity .18s ease;
  opacity:0;
}
.navlink:hover::after,
.navlink:focus-visible::after{width:60%; opacity:1}

/* separator (romb) */
.primary-nav .sep{
  width:7px; height:7px; transform:rotate(45deg);
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px; opacity:.6;
}

/* login taki sam jak inne */
.nav-actions{display:flex; align-items:center; gap:10px}
.nav-actions .login{padding:8px 12px; background:transparent; border:none}
.nav-actions .login svg{opacity:.9}
.nav-actions .login:hover svg{opacity:1}

/* accessibility: bez migotania */
.navlink:focus-visible{outline:none}

/* =======================
   Hero (obraz zawsze pod treścią)
======================= */
.hero{
  position:relative; z-index:0;
  min-height:60vh;
  display:grid; place-items:center;
  overflow:hidden;
  background:var(--bg);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('/assets/img/hero.jpg') center/cover no-repeat;
  pointer-events:none; z-index:-2;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:45vh;
  background:linear-gradient(to top, var(--bg) 0%, rgba(11,15,20,.92) 45%, transparent 100%);
  pointer-events:none; z-index:-1;
}
.hero__content{position:relative; z-index:1; text-align:center; max-width:780px; padding:40px 24px 56px; margin:0 auto}
.hero h1{margin:0 0 10px; font-size:48px; line-height:1.15}
.hero .lead{color:var(--muted); margin:0 0 18px; font-size:1.05rem}

/* hero actions */
.hero .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px}

/* badges pod przyciskami */
.badges{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:14px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text); font-size:.95rem}
.badge .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2))}

/* =======================
   Buttons (global)
======================= */
.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  transition:filter .15s, transform .02s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border:none; color:#1b1206; font-weight:800}
.btn.outline{background:transparent; border:1px solid var(--border)}

/* Hero – bardziej „fancy” */
.hero .btn{
  position:relative;
  padding:14px 20px;
  border-radius:14px;
  font-weight:700; letter-spacing:.2px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  backdrop-filter:saturate(120%) blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
  transition:filter .15s, transform .02s, box-shadow .2s ease;
  overflow:hidden;
}
.hero .btn:hover{filter:brightness(1.07)}
.hero .btn:active{transform:translateY(1px)}
.hero .btn::before{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.20) 48%, transparent 60% 100%);
  transform:translateX(-130%); transition:transform .6s ease; pointer-events:none;
}
.hero .btn:hover::before{transform:translateX(130%)}
.hero .btn.solid{
  border:none; color:#1b1206;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 12px 28px rgba(208,179,127,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.hero .btn.solid:hover{
  box-shadow:0 0 0 2px rgba(241,210,143,.25), 0 16px 38px rgba(208,179,127,.36), inset 0 1px 0 rgba(255,255,255,.28);
}
.hero .btn.glow{
  border:none; color:#0b0f14;
  background:linear-gradient(180deg, #7fb4ff, #2f6bff);
  box-shadow:0 10px 28px rgba(63,131,248,.28);
}
.hero .btn.glow:hover{box-shadow:0 0 14px 4px rgba(90,150,255,.45), 0 16px 36px rgba(63,131,248,.36)}
.hero .btn.lg{padding:15px 22px; font-size:1.05rem; border-radius:16px}

@media (prefers-reduced-motion:reduce){
  .navlink, .navlink::before, .navlink::after,
  .hero .btn, .hero .btn::before{transition:none !important}
}

/* =======================
   Features / Steps / Discord / Footer
======================= */
.features .grid{display:grid; gap:16px; grid-template-columns:1.1fr .9fr}
.features .left .video{
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  background:#0a0f17 url('/assets/img/feature-video.jpg') center/cover no-repeat;
}
.features .right{display:grid; gap:16px}
.features .tile{display:flex; gap:14px; overflow:hidden}
.features .tile .thumb{
  width:42%; aspect-ratio:16/10; border-radius:12px;
  background:#09121c url('/assets/img/feature-1.jpg') center/cover no-repeat;
}
.features .tile .meta{flex:1; display:flex; flex-direction:column; justify-content:center}
.features .tile h3{margin:0 0 6px; font-size:18px}
.features .tile p{color:var(--muted)}

.steps .wrap{display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:center}
.steps .art{
  min-height:360px; border-radius:var(--radius); border:1px solid var(--border);
  background:#0c1320 url('/assets/img/cat.png') center/contain no-repeat;
}
.steps .list{padding:16px}
.step{display:flex; gap:12px; align-items:flex-start; margin:10px 0; padding:12px; border-radius:12px; border:1px dashed var(--border)}
.step .num{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#1b1206; font-weight:800;
}
.step h4{margin:0 0 4px; font-size:16px}
.step p{margin:0; color:var(--muted)}

.discord .panel{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface-2);
}
.discord .panel .desc{color:var(--muted)}
.discord .panel .btn{min-width:160px}

.foot{border-top:1px solid var(--border); padding:18px 0; color:var(--muted)}
.foot .wrap{display:flex; align-items:center; justify-content:space-between}

/* =======================
   Responsive
======================= */
@media (max-width:1024px){
  .nav-wrap{height:60px}
  .primary-nav{gap:12px}
  .hero h1{font-size:40px}
  .features .grid{grid-template-columns:1fr}
  .steps .wrap{grid-template-columns:1fr}
  .hero{min-height:62vh}
}
@media (max-width:720px){
  .primary-nav{gap:10px; flex-wrap:wrap}
  .nav-actions .login span{display:none}
}
@media (max-width:640px){
  .hero h1{font-size:32px}
  .hero .actions{flex-direction:column}
  .badges{flex-direction:column; align-items:center}
  .features .tile{flex-direction:column}
  .features .tile .thumb{width:100%}
}