/* ============================================================================
   naliwajka.com — shared brand theme. This is the CANONICAL "matching header":
   the same dark/glassy emerald-teal identity used by the MGMT control panel
   (web/static/app.css). Keep the :root tokens + the header block in sync with
   that file so every naliwajka.* property renders one consistent header.
   ========================================================================== */
:root{
  --bg:#0c0907; --bg-glow:#1b1208;
  --surface:#1c1410; --surface-2:#241913; --surface-3:#2e2017;
  --line:#3c2c1d; --line-soft:#2f2316;
  --text:#f4ece2; --text-dim:#c2ab93; --text-faint:#8a7459;
  --accent:#f0b429; --accent-2:#e0443e; --accent-deep:#a8741a;
  --accent-ink:#1c0f02; --accent-glow:rgba(240,180,43,.30);
  --ok:#86c06a; --warn:#f0b429; --danger:#ef5350;
  --radius:14px; --radius-sm:9px;
  --shadow:0 18px 44px rgba(0,0,0,.55); --shadow-sm:0 3px 14px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  position:relative;
  background:
    radial-gradient(900px 500px at 12% -8%, var(--accent-glow), transparent 60%),
    radial-gradient(1100px 600px at 100% 0%, rgba(224,68,62,.12), transparent 55%),
    linear-gradient(180deg, var(--bg-glow), var(--bg) 38%);
  background-attachment:fixed;
  color:var(--text);
  font:14px/1.55 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* isometric lattice — a fixed 30deg/150deg/vertical grid of gold + red lines,
   kept faint so it reads as texture behind the content. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:
    repeating-linear-gradient(30deg,  var(--accent)   0 1px, transparent 1px 58px),
    repeating-linear-gradient(150deg, var(--accent)   0 1px, transparent 1px 58px),
    repeating-linear-gradient(90deg,  var(--accent-2) 0 1px, transparent 1px 58px);
  -webkit-mask-image:radial-gradient(1200px 700px at 70% -10%, #000, transparent 75%);
  mask-image:radial-gradient(1200px 700px at 70% -10%, #000, transparent 75%);}
::selection{background:var(--accent-glow);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#2c3a48 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#2c3a48;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#3a4b5b;background-clip:content-box}

/* -------- shared header (mirrors web/static/app.css lines 37-57) ---------- */
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;
  padding:12px 22px;
  background:linear-gradient(180deg, rgba(20,28,38,.92), rgba(16,22,30,.82));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.4)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.6}
header h1{font-size:17px;margin:0;letter-spacing:.04em;font-weight:700;
  background:linear-gradient(90deg,#fff,var(--accent) 70%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px var(--accent-glow))}
header h1 .tag{-webkit-text-fill-color:var(--text-faint);color:var(--text-faint);
  font-weight:500;font-size:13px;letter-spacing:.02em;margin-left:2px}
nav{display:flex;gap:4px;margin-left:8px}
nav a{position:relative;color:var(--text-dim);text-decoration:none;padding:6px 13px;
  border-radius:8px;font-size:13px;font-weight:500;transition:background .15s,color .15s}
nav a:hover{background:#212c36;color:var(--text)}
nav a.active{color:var(--accent-ink);
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  box-shadow:0 4px 14px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.25);font-weight:600}
header .sub{margin-left:auto;color:var(--text-faint);font-size:12px;letter-spacing:.02em}

/* -------------------------------- layout --------------------------------- */
main{max-width:960px;margin:0 auto;padding:22px 18px 40px}
h2.sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);
  margin:26px 4px 8px;display:flex;align-items:center;gap:10px}
h2.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* --------------------------------- hero ---------------------------------- */
.hero{margin:14px 2px 6px}
.hero h2{font-size:26px;margin:0 0 6px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.hero h2 .grad{background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:var(--text-dim);font-size:14.5px;max-width:620px;line-height:1.6}

/* ----------------------------- link tiles -------------------------------- */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.link-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:var(--text);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.link-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transition:opacity .16s ease}
a.link-tile::after{content:"↗";position:absolute;top:14px;right:15px;color:var(--text-faint);
  font-size:15px;transition:color .16s,transform .16s}
a.link-tile:hover{transform:translateY(-4px);border-color:var(--accent-deep);
  box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 0 1px var(--accent-glow)}
a.link-tile:hover::before{opacity:1}
a.link-tile:hover::after{color:var(--accent);transform:translate(2px,-2px)}
.lt-name{font-size:15.5px;font-weight:650;letter-spacing:.01em;padding-right:20px}
.lt-desc{font-size:12px;color:var(--text-faint)}

/* -------------------------------- footer --------------------------------- */
footer{max-width:960px;margin:0 auto;padding:18px;color:var(--text-faint);font-size:12px;
  border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent-deep)}
footer a:hover{color:var(--accent-2)}