@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  --lime:        #c8ff00;
  --lime-dim:    #a3d400;
  --lime-glow:   rgba(200,255,0,0.13);
  --lime-glow2:  rgba(200,255,0,0.04);
  --bg:          #080808;
  --bg2:         #0e0e0e;
  --bg3:         #161616;
  --card:        #101010;
  --card-hover:  #161616;
  --border:      rgba(200,255,0,0.10);
  --border-h:    rgba(200,255,0,0.32);
  --text:        #efefef;
  --text-dim:    #777;
  --text-dimmer: #383838;
  --mono:        'JetBrains Mono', monospace;
  --rune:        'Philosopher', serif;
  --r:           10px;
  --ease:        cubic-bezier(0.4,0,0.2,1);
}

[data-theme="light"] {
  --bg:         #f2f5e8;
  --bg2:        #eaeee0;
  --bg3:        #e0e5d2;
  --card:       #ffffff;
  --card-hover: #f8faf0;
  --border:     rgba(80,110,0,0.13);
  --border-h:   rgba(80,110,0,0.38);
  --text:       #191f05;
  --text-dim:   #5a6630;
  --text-dimmer:#b5bf90;
  --lime:       #607000;
  --lime-dim:   #4d5a00;
  --lime-glow:  rgba(80,110,0,0.10);
  --lime-glow2: rgba(80,110,0,0.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 3px; }

/* ── Preloader ── */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease, visibility .4s ease;
}
#preloader.hide { opacity: 0; visibility: hidden; }
.pre-rune {
  font-family: 'Philosopher', serif;
  font-size: 48px; font-weight: 700;
  color: var(--lime);
  animation: preRune 1s ease infinite alternate;
  letter-spacing: 4px;
}
@keyframes preRune {
  from { opacity: .2; transform: scale(.95); }
  to   { opacity: 1;  transform: scale(1.05); }
}

/* ── Canvas ── */
#bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .55;
}

/* ── Noise ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  opacity: .35;
}

/* ── Site wrap ── */
.site-wrap { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

/* ════════════════════════════
   HEADER
════════════════════════════ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 60px;
  background: rgba(8,8,8,.75);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
[data-theme="light"] header { background: rgba(242,245,232,.82); }

.logo {
  font-family: var(--rune);
  font-size: 18px; font-weight: 900;
  color: var(--lime); letter-spacing: 2px;
  text-transform: uppercase;
}

nav { display: flex; align-items: center; gap: 2px; }

.nav-link {
  padding: 6px 15px; border-radius: 7px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid transparent;
  transition: all .2s var(--ease);
}
.nav-link:hover, .nav-link.active {
  color: var(--lime); border-color: var(--border); background: var(--lime-glow2);
}

.nav-controls { display: flex; gap: 5px; margin-left: 14px; }

.ctrl-btn {
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all .2s var(--ease);
}
.ctrl-btn:hover { border-color: var(--border-h); color: var(--lime); background: var(--lime-glow2); }
.ctrl-btn.lang { width: auto; padding: 0 10px; font-size: 11px; letter-spacing: .06em; }

/* ════════════════════════════
   PAGE WRAPPER
════════════════════════════ */
.page {
  flex: 1; padding-top: 60px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh;
}
.inner { max-width: 900px; margin: 0 auto; width: 100%; padding: 60px 48px; }

/* ════════════════════════════
   TYPOGRAPHY
════════════════════════════ */
.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 18px;
}
.section-tag::before { content: ''; width: 20px; height: 1px; background: var(--lime); }

.page-title {
  font-family: var(--rune);
  font-size: clamp(28px,4vw,48px);
  font-weight: 900; letter-spacing: 2px;
  line-height: 1.1; margin-bottom: 32px;
  text-transform: uppercase;
}

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.btn-p {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; background: var(--lime); color: #080808;
  border-radius: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--lime);
  transition: all .2s var(--ease);
}
.btn-p:hover { background: transparent; color: var(--lime); transform: translateY(-1px); }

.btn-o {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 8px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  transition: all .2s var(--ease);
}
.btn-o:hover { border-color: var(--border-h); color: var(--text); transform: translateY(-1px); }

/* ════════════════════════════
   FOOTER
════════════════════════════ */
footer {
  border-top: 1px solid var(--border);
  padding: 22px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  position: relative; z-index: 2;
}
.footer-l { font-size: 11px; color: var(--text-dimmer); }
.footer-l span { color: var(--lime); }
.footer-r { font-size: 10px; color: var(--text-dimmer); letter-spacing: .1em; }

/* ════════════════════════════
   ANIMATIONS
════════════════════════════ */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes scrollPulse { 0%,100% { opacity:.3; transform:scaleY(.6) translateY(-8px); } 50% { opacity:1; transform:none; } }

.reveal { opacity:0; transform:translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ════════════════════════════
   MOBILE
════════════════════════════ */
@media (max-width: 768px) {
  header { padding: 0 18px; }
  .inner { padding: 40px 20px; }
  footer { padding: 18px 20px; }
  .nav-link:not(.active) { display: none; }
}