@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ─── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {

  /* ── GOUD PALET ───────────────────── */

  --gold:               #D4AF37;
  --gold-dim:           #C9A227;
  --gold-dark:          #B8860B;
  --gold-deeper:        #7A5A00;
  --gold-abyss:         #4F3B00;

  --gold-ghost:         rgba(212,175,55,0.06);
  --gold-subtle:        rgba(212,175,55,0.15);
  --gold-border:        rgba(212,175,55,0.26);
  --gold-border-strong: rgba(212,175,55,0.55);

  /* ── ACHTERGROND ─────────────────── */

  --bg:       #050505;
  --bg-lift:  #090909;
  --bg-raise: #0f0f0f;
  --bg-high:  #151515;

  /* ── TEKST ───────────────────────── */

  --text:       #f8f4e8;
  --text-muted: #d8c68a;
  --text-dim:   #ab9557;
  --text-ghost: #756236;

  /* ── DANGER ──────────────────────── */

  --danger:        rgba(160,0,0,0.15);
  --danger-border: rgba(160,0,0,0.4);
  --danger-text:   #e05050;

  /* ── FONTS ───────────────────────── */

  --font-serif:   'Cormorant Garamond', serif;
  --font-display: 'Playfair Display', serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

/* ─── SCROLLBAR ────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
}

/* ─── SELECTION ────────────────────────────────────────────────── */

::selection {
  background: var(--gold-subtle);
  color: var(--gold);
}

/* ─── NAV ──────────────────────────────────────────────────────── */

.ks-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1.1rem 3rem;

  background: rgba(5,5,5,0.9);

  border-bottom: .5px solid var(--gold-border-strong);
  box-shadow:
    0 1px 24px rgba(212,175,55,.06),
    0 0 1px rgba(212,175,55,.4);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ks-logo {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.5vw, 17px);
  font-weight: 900;

  background: linear-gradient(
    100deg,
    var(--gold-dark) 0%,
    var(--gold) 22%,
    #fdeeb0 45%,
    var(--gold) 62%,
    var(--gold-dim) 80%,
    var(--gold) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  letter-spacing: clamp(1.5px, 0.35vw, 4px);
  text-transform: uppercase;

  text-decoration: none;

  line-height: 1;
  white-space: nowrap;

  filter:
    drop-shadow(0 0 8px rgba(212,175,55,.22))
    drop-shadow(0 0 20px rgba(212,175,55,.1));

  animation: logoShine 9s linear infinite;
}

.ks-logo span {
  display: block;

  font-size: 8px;
  letter-spacing: 5px;

  font-weight: 300;

  color: var(--text-ghost);

  margin-top: 4px;

  font-family: var(--font-serif);
  white-space: nowrap;
}

@keyframes logoShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

.ks-nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.ks-nav-links a {
  color: var(--text-ghost);

  font-size: 9px;
  letter-spacing: 3px;

  text-transform: uppercase;
  text-decoration: none;

  transition: .25s;

  font-family: var(--font-serif);
}

.ks-nav-links a:hover,
.ks-nav-links a.active {
  color: var(--gold);
}

/* ─── PAGE WRAPPER ─────────────────────────────────────────────── */

.ks-page {
  padding-top: 64px;
  min-height: 100vh;
}

/* ─── SECTION ──────────────────────────────────────────────────── */

.section {
  padding: 4rem 3rem;

  border-bottom: .5px solid var(--gold-ghost);
}

.section-label {

  font-size: 9px;
  letter-spacing: 6px;

  color: var(--text-ghost);

  text-transform: uppercase;

  margin-bottom: .4rem;
}

.section-title {

  font-family: var(--font-display);

  font-size: 32px;
  font-weight: 700;

  color: var(--text);

  margin-bottom: .4rem;

  line-height: 1.1;

  text-shadow: 0 0 24px rgba(212,175,55,.08);
}

.gold-line {

  width: 48px;
  height: 1px;

  background: linear-gradient(
    90deg,
    var(--gold-dark),
    var(--gold) 45%,
    #fdeeb0 55%,
    var(--gold)
  );

  box-shadow:
    0 0 10px rgba(212,175,55,.35),
    0 0 22px rgba(212,175,55,.12);

  margin-bottom: 2.5rem;
}

/* ─── GRID UTILITIES ───────────────────────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
}

/* ─── RULE ─────────────────────────────────────────────────────── */

.rule {

  width: 100%;
  height: .5px;

  background: var(--gold-border);

  margin: 2rem 0;
}

/* ─── BADGE ────────────────────────────────────────────────────── */

.badge {

  display: inline-block;

  font-size: 8px;
  letter-spacing: 3px;

  color: var(--gold);

  border: .5px solid var(--gold-border-strong);

  background:
    linear-gradient(135deg, rgba(212,175,55,.09), rgba(212,175,55,.02));

  box-shadow:
    inset 0 0 12px rgba(212,175,55,.06),
    0 0 10px rgba(212,175,55,.06);

  padding: 3px 10px;

  text-transform: uppercase;

  font-family: var(--font-serif);
}

.badge-danger {

  color: var(--danger-text);

  border-color: var(--danger-border);
}

/* ─── FOOTER ───────────────────────────────────────────────────── */

.ks-footer {

  padding: 2.5rem 3rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: .5px solid var(--gold-ghost);
}

.ks-footer-logo {

  font-family: var(--font-display);

  font-size: clamp(10px, 1.4vw, 13px);

  background: linear-gradient(100deg, var(--gold-deeper), var(--text-ghost) 50%, var(--gold-deeper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  letter-spacing: clamp(1.5px, 0.4vw, 5px);

  white-space: nowrap;
}

.ks-footer-owner {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.ks-footer-owner a {

  color: var(--text-ghost);

  text-decoration: none;

  margin-top: 2px;

  transition: .2s;
}

.ks-footer-owner a:hover {

  color: var(--gold);

  text-decoration: underline;
}

.ks-footer-sub {

  font-size: 9px;

  letter-spacing: 3px;

  color: var(--text-dim);

  text-transform: uppercase;

  font-style: italic;
}

/* ─── ANIMATIONS ───────────────────────────────────────────────── */

@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@keyframes scanline {

  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }

}

@keyframes goldPulse {

  0%,100% {
    opacity: .4;
  }

  50% {
    opacity: 1;
  }

}

@keyframes crownDrop {

  from {

    opacity: 0;

    transform:
      translateY(-30px)
      scale(.85);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}

.anim-fade-up {
  animation: fadeUp .8s cubic-bezier(.22,1,.36,1) both;
}

.anim-fade-in {
  animation: fadeIn 1s ease both;
}

.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .45s; }
.delay-4 { animation-delay: .6s; }
.delay-5 { animation-delay: .75s; }
.delay-6 { animation-delay: .9s; }

/* ─── RESPONSIVE ───────────────────────────────────────────────── */

@media (max-width:768px) {

  .ks-nav {

    padding: 1rem 1.5rem;

  }

  .ks-nav-links {

    gap: 1.2rem;

  }

  .ks-nav-links a {

    font-size: 8px;

    letter-spacing: 2px;

  }

  .section {

    padding: 3rem 1.5rem;

  }

  .grid-2,
  .grid-3 {

    grid-template-columns: 1fr;

  }

}

/* ── COBRA ICON (replaces ✠ glyph) ─────────────────────────────── */
.cobra-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url(/assets/cobra-icon.svg) center / contain no-repeat;
          mask: url(/assets/cobra-icon.svg) center / contain no-repeat;
  vertical-align: -0.12em;
}