/* ============================================================
   Lands of Vaelor — website styles
   Classic CSS (no framework), matching the in-game client theme.
   Palette + fonts mirror /styleguide and /client.
   ============================================================ */

:root{
  /* palette (from the game client styleguide) */
  --background:  #15140f;
  --bg-2:        #1b1a16;
  --panel-bg:    #26241f;
  --panel-bg-2:  #2f2c26;
  --primary:     #928174;
  --secondary:   #bd8960;
  --gold:        #e0af29;
  --gold-soft:   #d8b65f;
  --txt:         #cdc6ba;
  --txt-dim:     #a39c93;
  --txt-brown:   #928174;
  --line:        #4a443b;

  --engrave: 0 1px 0 rgba(0,0,0,.65);
  --gold-glow: 0 0 18px rgba(224,175,41,.35);

  /* Discord brand mark (inline SVG, used as a CSS mask so it takes currentColor) */
  --discord-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E");

  /* ornate window frame params (from styleguide) */
  --win-border: 13px;
  --win-corner: 60px;

  /* "image" line icon used inside graphic placeholders */
  --img-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5L5 20'/%3E%3C/svg%3E");

  --maxw: 1180px;
  --radius: 4px;
}

/* ---------- reusable graphic placeholder (swap with <img> later) ---------- */
.art-slot{
  position:relative; display:flex; align-items:center; justify-content:center;
  border-radius:6px; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(146,129,116,.05) 0 9px, rgba(146,129,116,.09) 9px 18px),
    radial-gradient(circle at 50% 40%, rgba(189,137,96,.12), transparent 65%),
    linear-gradient(160deg, #231f19, #15140f);
  border:1px solid rgba(146,129,116,.32);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.art-slot::after{
  content:""; width:38%; height:38%; max-width:34px; max-height:34px;
  background-color:rgba(189,137,96,.5);
  -webkit-mask:var(--img-ico) center/contain no-repeat;
          mask:var(--img-ico) center/contain no-repeat;
}
.art-slot > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-slot:has(img)::after{ display:none; }

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(189,137,96,.10), transparent 60%),
    var(--background);
  color:var(--txt);
  font-family:"Lato", system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--gold-soft); text-decoration:none; }
a:hover{ color:var(--gold); }

h1,h2,h3,h4{
  font-family:"IM Fell English", Georgia, serif;
  color:#efe7d6;
  text-shadow:var(--engrave);
  font-weight:400;
  line-height:1.15;
  margin:0 0 .5em;
}
em{ color:var(--gold-soft); font-style:italic; }
strong{ color:#e6ddcd; }

/* ---------- layout helpers ---------- */
.container{ width:min(var(--maxw), calc(100% - 48px)); margin-inline:auto; }
.container.narrow{ width:min(800px, calc(100% - 48px)); }
.center{ text-align:center; }
.section{ padding:90px 0; position:relative; }
.section-alt{
  background:linear-gradient(180deg, var(--bg-2), #141310);
  border-top:1px solid rgba(146,129,116,.14);
  border-bottom:1px solid rgba(0,0,0,.5);
}
.section-title{ font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-bottom:.4em; }
.section-title.center,.section .section-title{ }
.section-title.left{ text-align:left; }
.section > .container > .section-title:first-child,
.section > .container.narrow > .section-title{ text-align:center; }
.section-title.left{ text-align:left !important; }

.kicker{
  display:inline-block; font-family:"Lato"; font-weight:900;
  text-transform:uppercase; letter-spacing:.22em; font-size:.72rem;
  color:var(--gold); margin-bottom:14px;
  padding-bottom:6px; border-bottom:1px solid rgba(224,175,41,.35);
}
.lead{ font-size:1.12rem; color:var(--txt); }
.lead.center{ max-width:760px; margin-inline:auto; }
.micro{ color:var(--txt-dim); font-size:.92rem; }
.group-title{
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--secondary); text-align:center; margin:42px 0 18px;
  font-family:"Lato"; font-weight:900;
}

/* ornamental divider under centered titles */
.section > .container > .section-title.center::after,
.section > .container > .section-title:first-child::after{
  content:""; display:block; width:120px; height:14px; margin:16px auto 0;
  background:
    radial-gradient(circle at center, var(--gold) 0 3px, transparent 4px) center/14px 14px no-repeat,
    linear-gradient(90deg, transparent, rgba(224,175,41,.55) 20%, rgba(224,175,41,.55) 80%, transparent);
  background-position:center, center;
  opacity:.8;
}

/* ============================================================
   BUTTONS — metal frame from the game (border-image)
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; user-select:none;
  font-family:"Lato"; font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; font-size:.86rem;
  padding:8px 18px; margin:6px;
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-lg{ font-size:1rem; padding:13px 26px; }

/* gold / brass CTA — on-brand, distinct from the blue Discord button */
.btn-gold{
  color:#2a1d06;
  background:linear-gradient(180deg, #f6d985 0%, #e7bb45 42%, #c79124 72%, #a9781b 100%);
  border:1px solid #7c5a16;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(255,244,214,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 5px rgba(120,80,10,.45),
    0 4px 12px rgba(0,0,0,.5);
}
.btn-gold:hover{
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 0 18px rgba(224,175,41,.5),
    0 6px 16px rgba(0,0,0,.5);
  color:#2a1d06;
}
.btn-gold:active{ filter:brightness(.97); box-shadow:inset 0 2px 5px rgba(80,52,8,.6); }

/* ghost / outline button */
.btn-ghost{
  color:var(--gold-soft);
  background:rgba(40,36,30,.55);
  border:1px solid rgba(146,129,116,.5);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.btn-ghost:hover{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(56,50,42,.7);
}

/* discord buttons */
.btn-discord:hover{ color:#c9d2ff; border-color:#7b88d8; }
.btn-discord-lg{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Lato"; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
  font-size:1rem; padding:14px 30px; margin:18px 0 6px;
  color:#fff; background:linear-gradient(180deg,#5865F2,#4752c4);
  border:1px solid #3c45a5; border-radius:6px;
  box-shadow:0 6px 18px rgba(60,69,165,.45);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-discord-lg:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(88,101,242,.55); color:#fff; filter:brightness(1.06); }

/* Discord logo glyph in any Discord button (takes currentColor via mask) */
.btn[data-discord]::before,
.btn-discord-lg::before{
  content:""; display:inline-block; flex:0 0 auto;
  width:1.25em; height:1.25em; margin-right:.55em; vertical-align:-.22em;
  background-color:currentColor;
  -webkit-mask:var(--discord-ico) center/contain no-repeat;
          mask:var(--discord-ico) center/contain no-repeat;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(180deg, rgba(15,14,11,.96), rgba(15,14,11,.78));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(146,129,116,.22);
  transition:background .3s ease, box-shadow .3s ease;
}
.navbar.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.5); background:rgba(15,14,11,.98); }
.nav-inner{
  width:min(var(--maxw), calc(100% - 36px)); margin-inline:auto;
  display:flex; align-items:center; gap:18px; height:64px;
}
.nav-logo{ height:38px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.nav-icon{ height:40px; width:40px; object-fit:contain; transition:transform .15s ease; }
.nav-brand:hover .nav-icon{ transform:scale(1.06); }
.nav-links{ display:flex; gap:22px; margin-left:10px; flex:1; }
.nav-links a{
  font-family:"Lato"; font-weight:700; font-size:.9rem; color:var(--txt-dim);
  letter-spacing:.04em; padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:var(--gold-soft); }
.nav-links a.active{ color:var(--gold); border-bottom-color:var(--gold); }
.nav-cta{ display:flex; align-items:center; }
.nav-cta .btn{ margin:0 0 0 8px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:8px; margin-left:auto;
}
.nav-toggle span{ width:24px; height:2px; background:var(--gold-soft); transition:.25s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  justify-content:center; text-align:center; overflow:hidden;
  padding:120px 20px 90px;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url("assets/background.png") center/cover no-repeat;
  transform:scale(1.05);
  filter:brightness(.72) saturate(1.02) contrast(1.02);
}
.hero::after{ /* vignette + bottom fade into page */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 72% at 50% 40%, transparent 0%, rgba(10,9,7,.30) 60%, rgba(10,9,7,.88) 100%),
    linear-gradient(180deg, rgba(15,14,11,.35) 0%, transparent 28%, transparent 68%, var(--background) 100%);
}
.hero-inner{ position:relative; z-index:3; max-width:840px; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-logo{ height:clamp(180px, 26vw, 320px); width:auto; max-width:90%; margin:0 auto 2px; }
.chip{
  display:inline-block; font-family:"Lato"; font-weight:900; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.2em; color:var(--gold);
  padding:7px 16px; margin-bottom:24px;
  background:rgba(20,18,14,.6); border:1px solid rgba(224,175,41,.4); border-radius:40px;
  box-shadow:inset 0 0 12px rgba(224,175,41,.08);
}
.hero-title{
  font-size:clamp(2.1rem, 1.3rem + 4vw, 3.8rem);
  color:#f6eede; letter-spacing:.01em;
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 30px rgba(224,175,41,.25);
  margin:6px 0 18px;
}
.hero-sub{
  font-size:clamp(1.05rem, .95rem + .6vw, 1.3rem);
  color:#d7cebd; max-width:680px; margin:0 auto 30px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; }
.hero-trust{ color:#b6ab97; font-size:.86rem; letter-spacing:.02em; }

/* floating embers (lightweight) */
.hero .ember{
  position:absolute; bottom:-12px; z-index:2; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #fff7e6 0%, rgba(255,196,92,.98) 35%, rgba(224,140,41,.35) 70%, transparent 80%);
  box-shadow:0 0 var(--glow,8px) calc(var(--glow,8px) * .35) rgba(255,150,50,.55);
  opacity:0; pointer-events:none; will-change:transform, opacity;
  animation:rise linear infinite;
  filter:blur(.2px);
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0) scale(1); opacity:0; }
  8%{ opacity:var(--peak,.9); }
  45%{ transform:translateY(-42vh) translateX(var(--sway,12px)) scale(.92); opacity:var(--peak,.9); }
  60%{ opacity:calc(var(--peak,.9) * .55); }       /* flicker dip */
  75%{ opacity:var(--peak,.9); }
  100%{ transform:translateY(-90vh) translateX(var(--drift,20px)) scale(.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .hero .ember{ display:none; } }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.pillar{
  background:linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  border:1px solid rgba(146,129,116,.28);
  border-radius:6px; padding:0; overflow:hidden; text-align:left;
  display:flex; flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.pillar:hover{ transform:translateY(-4px); border-color:rgba(224,175,41,.5); box-shadow:0 14px 30px rgba(0,0,0,.45), var(--gold-glow); }
.pillar:hover .pillar-art > img{ transform:scale(1.04); }
.pillar-ico{ font-size:2.4rem; margin-bottom:10px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
/* large post-style banner across the top of the card */
.pillar-art{
  width:100%; height:210px; margin:0;
  border-radius:0; border-left:0; border-right:0; border-top:0;
  border-bottom:1px solid rgba(146,129,116,.28);
}
.pillar-art > img{ transition:transform .35s ease; }
.pillar-art::after{ width:30%; height:30%; max-width:56px; max-height:56px; }
.pillar h3{ font-size:1.4rem; color:var(--gold-soft); padding:24px 24px 0; }
.pillar p{ color:var(--txt-dim); margin:0; padding:12px 24px 28px; }

/* ============================================================
   SPLIT (text + media)
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center; }
.split.reverse .split-text{ order:2; }
.split.reverse .split-media{ order:1; }
.split-text .lead{ margin-bottom:22px; }

/* economy: long text column — let the screenshot fill the full height instead of sitting tiny */
.split.split-stretch{ align-items:stretch; grid-template-columns:1fr .92fr; }
.split-stretch .split-media{ display:flex; }
.shot.shot-fill{ aspect-ratio:auto; height:100%; min-height:480px; flex:1; }

/* community graphic banner (legacy, unused) */
.community-art{ width:min(300px, 80%); height:108px; margin:0 auto 24px; }

/* community section: full background image + bottom-weighted gradient, text low */
#community{
  --community-bg:url("assets/background.png");
  position:relative; overflow:hidden; background:none;
  min-height:760px;
  display:flex; align-items:flex-end;     /* push content to the bottom */
  padding-top:380px; padding-bottom:90px;
}
#community::before{                         /* the swappable background image */
  content:""; position:absolute; inset:0; z-index:0;
  background:#15140f var(--community-bg) center/cover no-repeat;
}
#community::after{                          /* overlay: light up top, dark at bottom */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,14,11,.10) 0%,
    rgba(15,14,11,.40) 42%,
    rgba(15,14,11,.80) 76%,
    rgba(15,14,11,.96) 100%);
}
#community > .container{ position:relative; z-index:2; }
#community .lead{ text-shadow:0 1px 6px rgba(0,0,0,.55); }
@media (max-width:760px){
  #community{ min-height:560px; padding-top:240px; padding-bottom:64px; }
}

/* in-game style framed screenshot placeholder */
.shot{
  position:relative; margin:0; aspect-ratio:16/10; width:100%;
  border-style:solid; border-width:var(--win-border);
  border-image:url("assets/ui/full-window.png") 12 fill stretch;
  background:
    repeating-linear-gradient(135deg, rgba(146,129,116,.05) 0 14px, rgba(146,129,116,.09) 14px 28px),
    radial-gradient(circle at 50% 40%, rgba(189,137,96,.16), transparent 60%),
    linear-gradient(160deg, #211f1a, #15140f);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
/* swappable screenshot image — fills the frame, sits under corners + caption */
.shot > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.shot:has(img){ background:#15140f; }
/* ornate corner overlays (game window corners) */
.shot::before, .pillar.framed::before{
  z-index:2;
  content:""; position:absolute; inset:calc(-1 * var(--win-border)); pointer-events:none;
  background-image:url("assets/ui/window-corner-tl.png"), url("assets/ui/window-corner-tr.png");
  background-repeat:no-repeat, no-repeat;
  background-size:var(--win-corner) var(--win-corner), var(--win-corner) var(--win-corner);
  background-position:left top, right top;
}
.shot::after{
  content:"📷  " attr(data-shot);
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis;
  font-family:"Lato"; font-weight:700; font-size:.82rem; letter-spacing:.03em;
  color:var(--txt-dim);
  background:rgba(12,11,9,.72); border:1px solid rgba(146,129,116,.3);
  padding:6px 14px; border-radius:30px;
}
/* "screenshot coming" stamp in the center */
.shot > .shot-label,
.shot:empty::before{ } /* keep ::before for corners; central hint via data */
.split-media{ position:relative; }
.split-media::after{
  content:"In-game screenshot"; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-family:"IM Fell English", serif; font-size:1.1rem; color:rgba(224,175,41,.5);
  letter-spacing:.04em; pointer-events:none; text-shadow:var(--engrave);
}

/* ============================================================
   FEATURE LIST (economy)
   ============================================================ */
.feature-list{ display:flex; flex-direction:column; gap:18px; margin:8px 0 22px; }
.feature{
  padding-left:18px; border-left:2px solid rgba(224,175,41,.45);
}
.feature h4{ font-family:"Lato"; font-weight:900; color:#e8dcc6; font-size:1.02rem; margin:0 0 4px; letter-spacing:.01em; }
.feature p{ margin:0; color:var(--txt-dim); }
.link-arrow{ font-family:"Lato"; font-weight:900; letter-spacing:.04em; color:var(--gold); }
.link-arrow:hover{ text-shadow:var(--gold-glow); }

/* ============================================================
   PROFESSIONS GRID
   ============================================================ */
.prof-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
.prof{
  display:flex; flex-direction:row; gap:14px; align-items:flex-start;
  background:linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  border:1px solid rgba(146,129,116,.24); border-radius:6px;
  padding:16px; transition:transform .15s, border-color .2s, box-shadow .2s;
}
.prof:hover{ transform:translateY(-3px); border-color:rgba(224,175,41,.5); box-shadow:0 10px 22px rgba(0,0,0,.4); }
.prof-thumb{ flex:0 0 64px; width:64px; height:64px; }
.prof-info{ display:flex; flex-direction:column; gap:4px; }
.prof-info strong{ font-family:"IM Fell English", serif; font-weight:400; font-size:1.22rem; color:var(--gold-soft); line-height:1.1; }
.prof-info p{ margin:0; color:var(--txt-dim); font-size:.92rem; line-height:1.5; }

/* ============================================================
   PROFESSION EXPLORER (list + detail panel)
   ============================================================ */
.prof-explorer{ margin:36px 0 10px; }
.pf-filter{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.pf-tab{
  font-family:"Lato"; font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem;
  color:var(--txt-dim); background:rgba(40,36,30,.5); border:1px solid rgba(146,129,116,.3);
  border-radius:30px; padding:9px 18px; cursor:pointer; transition:color .2s, border-color .2s, background .2s;
}
.pf-tab span{ color:var(--secondary); margin-left:3px; }
.pf-tab:hover{ color:var(--gold-soft); border-color:rgba(224,175,41,.45); }
.pf-tab.is-active{ color:#241803; background:linear-gradient(180deg,#f0c558,#cf971f); border-color:#7c5a16; }
.pf-tab.is-active span{ color:#6b4a0e; }

.pf-grid{ display:grid; grid-template-columns:282px 1fr; gap:22px; align-items:start; }

.pf-list{ display:flex; flex-direction:column; gap:6px; max-height:560px; overflow:auto; padding-right:4px; }
.pl-item{
  display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; width:100%;
  background:linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  border:1px solid rgba(146,129,116,.22); border-left:3px solid transparent; border-radius:6px;
  padding:11px 14px; color:var(--txt); transition:border-color .15s, background .15s, transform .12s;
}
.pl-item:hover{ border-color:rgba(224,175,41,.4); transform:translateX(2px); }
.pl-item.is-active{ border-left-color:var(--gold); background:linear-gradient(180deg,#3b342a,#2a261f); }
.pl-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; box-shadow:0 0 7px currentColor; }
.pl-dot.gather{ background:#8cbf52; color:#8cbf52; }
.pl-dot.craft{ background:#c0392b; color:#c0392b; }
.pl-name{ font-family:"IM Fell English", serif; font-size:1.16rem; color:var(--gold-soft); flex:1; line-height:1.1; }
.pl-cat{ font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-brown); }

.pf-detail{
  background:linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  border:1px solid rgba(146,129,116,.28); border-radius:10px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.42);
}
.pd-media{ aspect-ratio:16/9; width:100%; border:0; border-radius:0; border-bottom:1px solid rgba(146,129,116,.25); }
.pd-media-hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:"IM Fell English", serif; font-size:1.05rem; color:rgba(224,175,41,.55); text-shadow:var(--engrave);
}
.pd-body{ padding:22px 26px 26px; }
.pd-badge{
  display:inline-block; font-family:"Lato"; font-weight:900; text-transform:uppercase; letter-spacing:.12em;
  font-size:.64rem; padding:4px 12px; border-radius:30px; margin-bottom:12px;
}
.pd-badge.gather{ color:#c7e89a; background:rgba(140,191,82,.15); border:1px solid rgba(140,191,82,.4); }
.pd-badge.craft{ color:#f0a99f; background:rgba(192,57,43,.16); border:1px solid rgba(192,57,43,.5); }
.pd-name{ font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); color:#efe7d6; margin:0 0 4px; }
.pd-tagline{ font-style:italic; color:var(--secondary); font-size:1.12rem; margin:0 0 16px; }
.pd-desc{ color:var(--txt); margin:0 0 20px; }
.pd-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:0; padding-top:18px; border-top:1px solid rgba(146,129,116,.18); }
.pd-fact dt{ font-family:"Lato"; font-weight:900; text-transform:uppercase; letter-spacing:.1em; font-size:.64rem; color:var(--txt-brown); margin-bottom:3px; }
.pd-fact dd{ margin:0; color:var(--txt); font-size:.95rem; }

@media (max-width:820px){
  .pf-grid{ grid-template-columns:1fr; gap:16px; }
  .pf-list{ flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden; padding:0 0 8px; }
  .pl-item{ flex:0 0 auto; border-left-width:3px; transform:none !important; }
  .pl-cat{ display:none; }
  .pd-facts{ grid-template-columns:1fr; gap:12px; }
}

/* ============================================================
   TICKS / HORIZON
   ============================================================ */
.ticks{ list-style:none; padding:0; margin:6px 0 0; }
.ticks li{ position:relative; padding:6px 0 6px 28px; color:var(--txt); }
.ticks li::before{
  content:"◆"; position:absolute; left:2px; top:6px; color:var(--gold); font-size:.8rem;
}
.horizon{
  margin-top:24px; padding:16px 18px; border-radius:6px;
  background:rgba(40,36,30,.5); border:1px dashed rgba(189,137,96,.45);
}
.horizon-label{
  display:inline-block; font-family:"Lato"; font-weight:900; text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem; color:var(--secondary); margin-bottom:6px;
}
.horizon p{ margin:0; color:var(--txt-dim); font-size:.96rem; }

/* ============================================================
   STEPS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:38px 0 34px; }
.step{
  position:relative; text-align:center; padding:34px 22px 26px;
  background:linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  border:1px solid rgba(146,129,116,.26); border-radius:8px;
}
.step-num{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-family:"IM Fell English", serif; font-size:1.4rem; color:#1c1812;
  background:radial-gradient(circle at 35% 30%, #f3d579, var(--gold) 60%, #a9781a);
  border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.5), var(--gold-glow);
  border:2px solid #7c5c14;
}
.step h3{ color:var(--gold-soft); font-size:1.3rem; margin-top:6px; }
.step p{ color:var(--txt-dim); margin:0; }

/* ============================================================
   COMMUNITY
   ============================================================ */
.community-points{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.community-points li{
  padding:8px 18px; background:rgba(40,36,30,.55);
  border:1px solid rgba(146,129,116,.3); border-radius:30px; color:var(--txt-dim); font-size:.92rem;
}

/* ============================================================
   DOWNLOAD
   ============================================================ */
.download-buttons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 14px; }
.download-meta{ color:var(--txt-dim); font-size:.9rem; }
.download-meta a{ white-space:nowrap; }
.btn-gold[aria-disabled="true"]{ filter:grayscale(.7) brightness(.7); cursor:not-allowed; pointer-events:none; }
.btn-os-sub{ display:block; font-size:.62rem; font-weight:700; opacity:.8; letter-spacing:.08em; margin-top:2px; }
/* Przycisk pobierania: główny napis i podpis JEDEN POD DRUGIM (kolumna zamiast wiersza). */
.btn-download{ flex-direction:column; gap:0; line-height:1.12; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:32px; }
.faq details{
  border:1px solid rgba(146,129,116,.26); border-radius:6px;
  background:linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:16px 20px;
  font-family:"Lato"; font-weight:700; color:#e6ddcd; font-size:1.02rem;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold); font-size:1.4rem; line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--gold-soft); }
.faq details p{ margin:0; padding:0 20px 18px; color:var(--txt-dim); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#100f0c; border-top:1px solid rgba(146,129,116,.22); padding:42px 0 26px; margin-top:0; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; }
.footer-brand{ display:flex; flex-direction:column; gap:2px; }
.footer-brand strong{ font-family:"IM Fell English", serif; font-weight:400; font-size:1.4rem; color:var(--gold-soft); }
.footer-tag{ font-style:italic; color:var(--txt-brown); font-size:.92rem; }
.footer-copy{ color:#7d756a; font-size:.82rem; margin-top:4px; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ color:var(--txt-dim); font-weight:700; font-size:.9rem; }
.footer-links a:hover{ color:var(--gold); }
.footer-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.footer-version{ color:#7d756a; font-size:.8rem; }
.footer-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:28px; padding-top:18px; border-top:1px solid rgba(146,129,116,.14);
  color:#6f685e; font-size:.8rem;
}
.footer-legal a{ color:#8a8276; }

/* ============================================================
   MOBILE STICKY DOWNLOAD
   ============================================================ */
.mobile-dl{ display:none; position:fixed; left:14px; right:14px; bottom:14px; z-index:45; text-align:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:30px; }
  .split.reverse .split-text{ order:1; }
  .split.reverse .split-media{ order:2; }
  .pillars{ grid-template-columns:1fr; }
  .prof-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .nav-links{
    position:fixed; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(13,12,9,.99); border-bottom:1px solid rgba(146,129,116,.25);
    padding:8px 0; transform:translateY(-130%); transition:transform .3s ease; margin:0;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:14px 24px; border-bottom:1px solid rgba(146,129,116,.12); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  /* Sticky pływający przycisk Download na mobile WYŁĄCZONY (wkurzał przy przewijaniu).
     Pobieranie i tak jest w hero, sekcji Download i stopce. Zmień na 'block', by wrócił. */
  .mobile-dl{ display:none; }
  .prof-grid{ grid-template-columns:1fr; }
  .hero{ min-height:88vh; }
}