/* Krediverse — Year End Party 2026 */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cinzel+Decorative:wght@400;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");

/* ---- colors.css ---- */
/* Dark is the default theme. Set data-theme="light" on <html> (or any subtree) for the alternative. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --kv-bg: #070A12;
  --kv-surface: #0E1320;
  --kv-surface-2: #151B2B;
  --kv-text: #EEF1F7;
  --kv-text-2: #8E97AC;
  --kv-water: #35A7FF;
  --kv-fire: #FF6A3D;
  --kv-earth: #8FD334;
  --kv-wind: #A99BF5;
  --kv-on-tint: #070A12;
  --kv-line: color-mix(in oklch, var(--kv-text) 12%, transparent);
  --kv-line-strong: color-mix(in oklch, var(--kv-text) 24%, transparent);
  --kv-halo-opacity: 0.55;
  --kv-nav-solid: color-mix(in oklch, var(--kv-bg) 88%, transparent);
  --kv-cta: linear-gradient(100deg, var(--kv-water) 0%, var(--kv-wind) 100%);
  --kv-on-cta: #070A12;
  --kv-shadow-card: 0 24px 60px -24px rgb(0 0 0 / 0.7);
}
[data-theme="light"] {
  color-scheme: light;
  --kv-bg: #FBFCFE;
  --kv-surface: #F1F5FA;
  --kv-surface-2: #E6ECF4;
  --kv-text: #0F1320;
  --kv-text-2: #5A6276;
  --kv-water: #1478D4;
  --kv-fire: #E8431A;
  --kv-earth: #5FA314;
  --kv-wind: #7B6FC9;
  --kv-on-tint: #FFFFFF;
  --kv-halo-opacity: 0;
  --kv-cta: linear-gradient(100deg, var(--kv-water) 0%, var(--kv-wind) 100%);
  --kv-on-cta: #FFFFFF;
  --kv-shadow-card: 0 18px 40px -22px rgb(15 19 32 / 0.25);
}
/* One variable per component. Everything else derives from --tint. */
:root { --tint: var(--kv-text); }
[data-element="water"] { --tint: var(--kv-water); }
[data-element="fire"]  { --tint: var(--kv-fire); }
[data-element="earth"] { --tint: var(--kv-earth); }
[data-element="wind"]  { --tint: var(--kv-wind); }
:root {
  --tint-line: color-mix(in oklch, var(--tint) 32%, transparent);
  --tint-wash: color-mix(in oklch, var(--tint) 12%, transparent);
  --tint-glow: color-mix(in oklch, var(--tint) 55%, transparent);
}
[data-element] {
  --tint-line: color-mix(in oklch, var(--tint) 32%, transparent);
  --tint-wash: color-mix(in oklch, var(--tint) 12%, transparent);
  --tint-glow: color-mix(in oklch, var(--tint) 55%, transparent);
}

/* ---- typography.css ---- */
:root {
  --kv-font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --kv-font-body: "Nunito Sans", "Nunito", system-ui, sans-serif;
  --kv-fs-display: clamp(44px, 6.4vw, 96px);
  --kv-fs-h1: clamp(36px, 4.4vw, 64px);
  --kv-fs-h2: clamp(28px, 3.2vw, 44px);
  --kv-fs-h3: clamp(22px, 2vw, 28px);
  --kv-fs-lead: clamp(17px, 1.3vw, 20px);
  --kv-fs-body: 16px;
  --kv-fs-small: 14px;
  --kv-fs-label: 11px;
  --kv-lh-tight: 1.08;
  --kv-lh-heading: 1.18;
  --kv-lh-body: 1.6;
  --kv-ls-display: 0.01em;
  --kv-ls-label: 0.18em;
  --kv-ls-pill: 0.14em;
  --kv-ls-wide: 0.24em;
  --kv-fw-body: 400;
  --kv-fw-strong: 700;
  --kv-fw-label: 800;
}

/* ---- spacing.css ---- */
:root {
  --kv-space-1: 4px;
  --kv-space-2: 8px;
  --kv-space-3: 12px;
  --kv-space-4: 16px;
  --kv-space-5: 24px;
  --kv-space-6: 32px;
  --kv-space-7: 48px;
  --kv-space-8: 64px;
  --kv-space-9: 96px;
  --kv-space-10: 128px;
  --kv-gutter: clamp(20px, 4vw, 56px);
  --kv-max: 1280px;
  --kv-nav-h: 72px;
  --kv-r-0: 0;
  --kv-r-xs: 2px;
  --kv-r-sm: 4px;
  --kv-r-md: 8px;
  --kv-r-stack: 28px;
  --kv-r-pill: 999px;
}
@media (max-width: 899px) { :root { --kv-nav-h: 60px; } }

/* ---- motion.css ---- */
:root {
  --kv-dur-fast: 400ms;
  --kv-dur: 500ms;
  --kv-dur-slow: 600ms;
  --kv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kv-idle-water: 11s;
  --kv-idle-fire: 9s;
  --kv-idle-earth: 13s;
  --kv-idle-wind: 10.5s;
  --kv-float-amp: 10px;
  --kv-float-rot: 0.6deg;
}
@keyframes kv-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, calc(var(--kv-float-amp) * -1), 0) rotate(var(--kv-float-rot)); }
}
@keyframes kv-drift {
  0%, 100% { transform: translate3d(-3%, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.05); }
}
@keyframes kv-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ---- art.css ---- */
/* Brand artwork as variables. URLs resolve relative to this file, so any page that links styles.css can use them. */
:root {
  --kv-logo-dark: url("../assets/brand/logo-dark.png");
  --kv-logo-light: url("../assets/brand/logo-light.png");
  --kv-logo: var(--kv-logo-dark);
  --kv-art-water: url("../assets/art/water.webp");
  --kv-art-fire: url("../assets/art/fire.webp");
  --kv-art-earth: url("../assets/art/earth.webp");
  --kv-art-wind: url("../assets/art/wind.webp");
  --kv-art-ink: url("../assets/art/ink-panorama.png");
  --kv-texture: url("../assets/art/stone-dark.png");
  /* Procedural fog; swap for a real cloud photo (transparent PNG/WebP) when available */
  --kv-art-cloud: url("../assets/art/cloud.svg");
}
[data-theme="light"] { --kv-logo: var(--kv-logo-light); --kv-texture: none; }

/* ---- components.css ---- */
/* Krediverse component layer. Every component sets only --tint; the rest derives here. */
.kv-pill, .kv-btn, .kv-stack-card, .kv-char, .kv-hero-corner, .kv-sigil, .kv-region {
  --tint-line: color-mix(in oklch, var(--tint) 32%, transparent);
  --tint-wash: color-mix(in oklch, var(--tint) 12%, transparent);
  --tint-glow: color-mix(in oklch, var(--tint) 55%, transparent);
}
.kv-page {
  margin: 0; background: var(--kv-texture) top center / 100% auto repeat-y, var(--kv-bg); color: var(--kv-text);
  font: var(--kv-fw-body) var(--kv-fs-body)/var(--kv-lh-body) var(--kv-font-body);
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
.kv-page a { color: var(--tint, var(--kv-water)); }
.kv-page a:hover { color: var(--kv-text); }
.kv-page ::selection { background: color-mix(in oklch, var(--kv-water) 35%, transparent); }

/* Type */
.kv-display { font: 400 var(--kv-fs-display)/var(--kv-lh-tight) var(--kv-font-display); letter-spacing: var(--kv-ls-display); margin: 0; }
.kv-h1 { font: 400 var(--kv-fs-h1)/var(--kv-lh-heading) var(--kv-font-display); margin: 0; }
.kv-h2 { font: 400 var(--kv-fs-h2)/var(--kv-lh-heading) var(--kv-font-display); margin: 0; }
.kv-h3 { font: 400 var(--kv-fs-h3)/var(--kv-lh-heading) var(--kv-font-display); margin: 0; }
.kv-lead { font-size: var(--kv-fs-lead); line-height: 1.55; color: var(--kv-text-2); margin: 0; }
.kv-body { font-size: var(--kv-fs-body); line-height: var(--kv-lh-body); color: var(--kv-text-2); margin: 0; }
.kv-label {
  font: var(--kv-fw-label) var(--kv-fs-label)/1 var(--kv-font-body);
  letter-spacing: var(--kv-ls-label); text-transform: uppercase; color: var(--kv-text-2);
}
.kv-label-wide { letter-spacing: var(--kv-ls-wide); }

/* Pill */
.kv-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
  border-radius: var(--kv-r-pill); border: 1px solid var(--tint-line); background: var(--tint-wash);
  color: var(--tint); font: var(--kv-fw-label) var(--kv-fs-label)/1 var(--kv-font-body);
  letter-spacing: var(--kv-ls-pill); text-transform: uppercase; white-space: nowrap;
}
.kv-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 10px var(--tint-glow); }
.kv-pill-solid { background: var(--tint); color: var(--kv-on-tint); border-color: transparent; }

/* Button */
.kv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 28px; border-radius: var(--kv-r-sm); border: 1px solid transparent;
  font: var(--kv-fw-label) 12px/1 var(--kv-font-body); letter-spacing: var(--kv-ls-label); text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--kv-dur-fast) var(--kv-ease), color var(--kv-dur-fast) var(--kv-ease),
    border-color var(--kv-dur-fast) var(--kv-ease), transform var(--kv-dur-fast) var(--kv-ease), box-shadow var(--kv-dur) var(--kv-ease);
}
.kv-btn:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
.kv-btn:active { transform: translateY(1px) scale(0.985); }
.kv-btn[disabled] { opacity: 0.45; pointer-events: none; }
.kv-page .kv-btn-primary, .kv-btn-primary { background: var(--kv-text); color: var(--kv-bg); }
.kv-page .kv-btn-primary:hover, .kv-btn-primary:hover { background: color-mix(in oklch, var(--kv-text) 82%, var(--tint)); color: var(--kv-bg); box-shadow: 0 10px 30px -12px var(--tint-glow); }
.kv-page .kv-btn-ghost, .kv-btn-ghost { background: transparent; color: var(--kv-text); border-color: var(--kv-line-strong); }
.kv-page .kv-btn-ghost:hover, .kv-btn-ghost:hover { border-color: var(--tint); background: var(--tint-wash); color: var(--kv-text); }
.kv-page .kv-btn-tint, .kv-btn-tint { background: var(--tint); color: var(--kv-on-tint); }
.kv-page .kv-btn-tint:hover, .kv-btn-tint:hover { background: color-mix(in oklch, var(--tint) 86%, var(--kv-text)); color: var(--kv-on-tint); }
.kv-btn-sm { height: 38px; padding: 0 18px; font-size: 11px; }
.kv-btn-icon { width: 44px; padding: 0; }

/* Navbar */
.kv-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--kv-nav-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch;
  padding-left: var(--kv-gutter); background: transparent; border-bottom: 1px solid transparent;
  transition: background-color var(--kv-dur) var(--kv-ease), border-color var(--kv-dur) var(--kv-ease), backdrop-filter var(--kv-dur) var(--kv-ease);
}
.kv-nav[data-solid="true"] { background: var(--kv-nav-solid); border-bottom-color: var(--kv-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kv-nav-left { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); min-width: 0; overflow: hidden; }
.kv-nav-link {
  font: var(--kv-fw-label) 12px/1 var(--kv-font-body); letter-spacing: var(--kv-ls-label); text-transform: uppercase;
  color: var(--kv-text-2); text-decoration: none; white-space: nowrap; transition: color var(--kv-dur-fast) var(--kv-ease);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.kv-page .kv-nav-link { color: var(--kv-text-2); }
.kv-nav-link:hover, .kv-page .kv-nav-link:hover, .kv-nav-link[aria-current="page"] { color: var(--kv-text); }
.kv-nav-links-right { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); padding-right: var(--kv-space-5); }
.kv-nav-center { display: flex; align-items: center; justify-content: center; padding: 0 var(--kv-space-5); }
.kv-logo { display: block; aspect-ratio: 1324 / 372; background: var(--kv-logo) center / contain no-repeat; }
.kv-nav .kv-logo { height: calc(var(--kv-nav-h) * 0.56); }
.kv-nav-right { display: flex; align-items: stretch; justify-content: flex-end; min-width: 0; overflow: hidden; }
.kv-nav-group { display: flex; align-items: center; gap: var(--kv-space-5); padding: 0 var(--kv-space-5); }
.kv-nav-sep { width: 1px; align-self: center; height: 22px; background: var(--kv-line-strong); }
.kv-nav-cta {
  display: flex; align-items: center; gap: 10px; padding: 0 clamp(20px, 2.6vw, 40px); margin: 0; border: 0; border-radius: 0;
  background: var(--kv-cta); color: var(--kv-on-cta); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--kv-fw-label) 12px/1 var(--kv-font-body); letter-spacing: var(--kv-ls-label); text-transform: uppercase;
  background-size: 140% 100%; background-position: 0 0; transition: background-position var(--kv-dur-slow) var(--kv-ease);
}
.kv-page .kv-nav-cta, .kv-page .kv-nav-cta:hover { color: var(--kv-on-cta); }
.kv-nav-cta:hover { background-position: 100% 0; }
.kv-nav-cta:focus-visible, .kv-nav-link:focus-visible, .kv-nav-burger:focus-visible { outline: 2px solid var(--kv-water); outline-offset: -4px; }
.kv-nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; background: none; border: 0; color: var(--kv-text); cursor: pointer; font-size: 24px; }
.kv-nav-drawer {
  position: fixed; top: var(--kv-nav-h); left: 0; right: 0; z-index: 49; display: grid; gap: 4px; padding: var(--kv-space-5) var(--kv-gutter) var(--kv-space-6);
  background: var(--kv-bg); border-bottom: 1px solid var(--kv-line);
}
.kv-nav-drawer .kv-nav-link { padding: 14px 0; font-size: 13px; }
@media (max-width: 1239px) { .kv-nav-group, .kv-nav-sep { display: none; } .kv-nav-links-right { padding-right: 0; } }
@media (max-width: 1023px) {
  .kv-nav-left > .kv-nav-link, .kv-nav-links-right { display: none; }
  .kv-nav-burger { display: inline-flex; }
  .kv-nav-cta { padding: 0 18px; font-size: 11px; }
  .kv-nav-cta .ph { display: none; }
}

/* Halo — dark mode only (opacity token is 0 in light) */
.kv-halo {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--tint-glow) 0%, transparent 65%); filter: blur(40px);
  opacity: var(--kv-halo-opacity); transition: opacity var(--kv-dur-slow) var(--kv-ease);
}

/* Hero */
.kv-hero { position: relative; background: transparent; overflow: hidden; --p: 0; }
.kv-hero-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 520px; max-height: 100vh; }
.kv-hero-corner {
  position: absolute; inset: 0; pointer-events: none;
  transform: translate3d(calc(var(--dx) * var(--p) * 90px), calc(var(--dy) * var(--p) * 60px), 0) scale(calc(1 + var(--p) * 0.06));
  transform-origin: var(--ox) var(--oy); will-change: transform;
  scale: var(--kv-hero-corner-scale, 0.66);
}
.kv-hero-frame::before, .kv-hero-frame::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.kv-hero-frame::before { left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(180deg, color-mix(in oklch, var(--kv-bg) 75%, transparent) 0%, transparent 100%); }
.kv-hero-frame::after { inset: 0; background: radial-gradient(ellipse 46% 42% at 50% 54%, var(--kv-bg) 0%, color-mix(in oklch, var(--kv-bg) 80%, transparent) 40%, transparent 72%); }
.kv-hero-art {
  position: absolute; inset: 0; background-image: var(--art); background-size: cover; background-repeat: no-repeat;
  background-position: var(--ox) var(--oy);
  animation: kv-float var(--dur) var(--kv-ease) infinite; animation-delay: var(--delay, 0s);
}
.kv-hero-corner .kv-halo { left: calc(var(--ox) * 0.6 - 10%); top: calc(var(--oy) * 0.6 - 10%); width: 46%; }
.kv-hero-center {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--kv-space-5); padding: calc(var(--kv-nav-h) + 24px) var(--kv-gutter) var(--kv-space-7); text-align: center;
  opacity: calc(1 - max(0, var(--p) - 0.35) * 2.2); transform: translateY(calc(var(--p) * -40px));
}
.kv-hero-center .kv-logo { width: min(640px, 72vw); filter: drop-shadow(0 0 40px color-mix(in oklch, var(--kv-water) calc(var(--kv-halo-opacity) * 60%), transparent)); }
.kv-hero-tagline { max-width: 34ch; margin: 0; font: 400 var(--kv-fs-h3)/1.35 var(--kv-font-display); color: var(--kv-text); }
.kv-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kv-space-3); }
@media (max-width: 899px) {
  .kv-hero-frame { aspect-ratio: 3 / 4; min-height: 0; max-height: none; }
  .kv-hero { --kv-hero-corner-scale: 0.92; }
  .kv-hero-art { background-size: 190% auto; }
  .kv-hero-frame::after { background: radial-gradient(ellipse 70% 34% at 50% 52%, var(--kv-bg) 0%, color-mix(in oklch, var(--kv-bg) 80%, transparent) 45%, transparent 80%); }
}

.kv-hero-banner { position: absolute; inset: 0; overflow: hidden; background: #000;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgb(0 0 0 / 0.55) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgb(0 0 0 / 0.55) 82%, transparent 100%); }
.kv-hero[data-banner="true"] .kv-hero-frame::after { display: none; }
.kv-hero[data-banner="true"] .kv-hero-tagline { text-shadow: 0 2px 18px rgb(0 0 0 / 0.85); }
.kv-hero[data-banner="true"] .kv-hero-center { opacity: 1; transform: none; }

/* Card stack (pure CSS) */
.kv-stack { display: grid; gap: var(--kv-space-7); padding-bottom: var(--kv-space-8); }
.kv-stack-card {
  position: sticky; top: var(--top); z-index: var(--z); height: 460px; border-radius: var(--kv-r-stack); overflow: hidden;
  border: 1px solid var(--tint-line); background: var(--kv-surface); box-shadow: var(--kv-shadow-card); isolation: isolate;
}
.kv-stack-card:nth-child(1) { --top: 96px;  --z: 10; }
.kv-stack-card:nth-child(2) { --top: 122px; --z: 11; }
.kv-stack-card:nth-child(3) { --top: 148px; --z: 12; }
.kv-stack-card:nth-child(4) { --top: 174px; --z: 13; }
.kv-stack-art { position: absolute; inset: 0; z-index: -2; background-image: var(--art); background-size: cover; background-position: var(--pos, right center); transform: scaleX(var(--flip, 1)); }
.kv-stack-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--kv-surface) 0%, color-mix(in oklch, var(--kv-surface) 88%, transparent) 34%, transparent 72%),
    linear-gradient(0deg, var(--kv-surface) 0%, color-mix(in oklch, var(--kv-surface) 40%, transparent) 38%, transparent 70%);
}
.kv-stack-body { position: absolute; left: 0; bottom: 0; display: grid; justify-items: start; gap: var(--kv-space-3); max-width: 560px; padding: clamp(24px, 4vw, 48px); }
.kv-region { font: var(--kv-fw-label) var(--kv-fs-label)/1 var(--kv-font-body); letter-spacing: var(--kv-ls-wide); text-transform: uppercase; color: var(--tint); margin-top: var(--kv-space-2); }
.kv-stack-body .kv-body { max-width: 46ch; }
@media (max-width: 899px) {
  .kv-stack-card { height: 420px; }
  .kv-stack-card:nth-child(1) { --top: 84px; } .kv-stack-card:nth-child(2) { --top: 98px; }
  .kv-stack-card:nth-child(3) { --top: 112px; } .kv-stack-card:nth-child(4) { --top: 126px; }
  .kv-stack-scrim { background: linear-gradient(0deg, var(--kv-surface) 0%, color-mix(in oklch, var(--kv-surface) 85%, transparent) 50%, transparent 85%); }
}

/* Character carousel */
.kv-carousel { position: relative; overflow: hidden; padding: var(--kv-space-8, 64px) 0; }
.kv-carousel-track { display: flex; gap: var(--kv-space-5); transition: transform var(--kv-dur-slow) var(--kv-ease); will-change: transform; }
.kv-char {
  position: relative; flex: 0 0 var(--card-w); aspect-ratio: 2 / 3; border-radius: var(--kv-r-sm); overflow: hidden;
  background: var(--kv-surface); border: 1px solid var(--tint-line); cursor: pointer; padding: 0; color: inherit; text-align: center;
  opacity: 0.4; transform: scale(0.94);
  transition: opacity var(--kv-dur) var(--kv-ease), transform var(--kv-dur-slow) var(--kv-ease), border-color var(--kv-dur) var(--kv-ease);
}
.kv-char[data-near="true"] { opacity: 0.72; }
.kv-char { transform-origin: center !important; }
.kv-char[data-active="true"] { opacity: 1; transform: scale(1.18); z-index: 2; border-color: color-mix(in oklch, var(--tint) 60%, transparent); }
.kv-char:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
.kv-char-art { position: absolute; inset: 0; background-image: var(--art); background-size: cover; background-position: var(--pos, center); }
.kv-char-fit { position: absolute; background-image: var(--art); background-size: 100% 100%; background-repeat: no-repeat; animation: kv-float var(--dur, 11s) var(--kv-ease) infinite; }
.kv-char[data-centered="true"] .kv-char-scrim { inset: 0; height: auto; background: radial-gradient(ellipse 90% 26% at 50% 48%, color-mix(in oklch, var(--kv-bg) 88%, transparent) 0%, color-mix(in oklch, var(--kv-bg) 55%, transparent) 55%, transparent 100%), linear-gradient(0deg, color-mix(in oklch, var(--kv-bg) 55%, transparent), transparent 35%); }
.kv-char-art-slot { display: grid; place-items: center; background: linear-gradient(160deg, var(--tint-wash), transparent 70%); }
.kv-char-scrim { position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, var(--kv-bg) 10%, color-mix(in oklch, var(--kv-bg) 70%, transparent) 55%, transparent); }
.kv-char-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 6px; padding: 0 18px 18px; }
.kv-char[data-centered="true"] .kv-char-body { top: 0; align-content: center; padding-bottom: 0; }
.kv-char[data-centered="true"] .kv-char-name { font-size: 30px; }
.kv-char-name { font: 400 22px/1.1 var(--kv-font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint); margin: 0; }
.kv-char-desc { font-size: 13px; line-height: 1.5; color: var(--kv-text-2); margin: 2px 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kv-sigil {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--tint); font-size: 20px;
  border: 1px solid var(--tint-line); background: var(--tint-wash);
  box-shadow: 0 0 calc(24px * var(--kv-halo-opacity) + 2px) var(--tint-glow);
}
.kv-char[data-active="true"] .kv-sigil { animation: kv-pulse 3.2s var(--kv-ease) infinite; }
.kv-carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--kv-space-4); margin-top: var(--kv-space-6); }
.kv-dots { display: flex; gap: 8px; }
.kv-dot { width: 22px; height: 3px; border: 0; padding: 0; background: var(--kv-line-strong); cursor: pointer; transition: background-color var(--kv-dur) var(--kv-ease), width var(--kv-dur) var(--kv-ease); }
.kv-dot[aria-current="true"] { width: 40px; background: var(--tint); }

/* Numbered rules list: open 3-column grid, tinted top rule, no boxes */
.kv-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); row-gap: var(--kv-space-7); counter-reset: none; }
.kv-rule {
  --tint-line: color-mix(in oklch, var(--tint) 45%, transparent);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--kv-space-4); row-gap: 8px; align-content: start;
  padding-top: var(--kv-space-5); border-top: 1px solid var(--tint-line);
}
.kv-rule-num { grid-row: span 2; font: 400 44px/0.9 var(--kv-font-display); color: var(--tint); text-shadow: 0 0 calc(28px * var(--kv-halo-opacity)) color-mix(in oklch, var(--tint) 55%, transparent); }
.kv-rule .kv-region { margin-top: 4px; font: 400 clamp(20px, 1.8vw, 26px)/1.15 var(--kv-font-display); letter-spacing: 0.04em; text-transform: none; }
.kv-rule p { margin: 0; color: var(--kv-text); font-size: var(--kv-fs-body); line-height: 1.6; max-width: 40ch; }
@media (max-width: 1099px) { .kv-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) { .kv-rules { grid-template-columns: minmax(0, 1fr); row-gap: var(--kv-space-6); } }

/* Prize plate */
.kv-prize { position: relative; isolation: isolate; display: grid; justify-items: center; gap: var(--kv-space-5); padding: clamp(48px, 7vw, 96px) var(--kv-space-5); text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, color-mix(in oklch, var(--tint) 14%, transparent), transparent 70%);
  --tint-line: color-mix(in oklch, var(--tint) 32%, transparent); }
.kv-prize .kv-halo { left: 50%; top: 50%; width: min(70%, 640px); translate: -50% -50%; z-index: -1; }
.kv-prize-kicker { display: flex; align-items: center; gap: var(--kv-space-4); color: var(--tint); }
.kv-prize-figure { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); color: var(--kv-text); }
.kv-prize-num { font: 400 clamp(120px, 20vw, 280px)/0.8 var(--kv-font-display); color: var(--tint);
  text-shadow: 0 0 calc(60px * var(--kv-halo-opacity)) color-mix(in oklch, var(--tint) 70%, transparent); }
.kv-prize-unit { display: grid; gap: 10px; justify-items: start; text-align: left; }
.kv-prize-unit span:first-child { font: 400 clamp(28px, 4vw, 56px)/1 var(--kv-font-display); letter-spacing: 0.06em; }
.kv-prize-unit span:last-child { font: 400 clamp(28px, 4vw, 56px)/1 var(--kv-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.kv-prize-tag { margin: 0; font: 400 var(--kv-fs-h3)/1.3 var(--kv-font-display); color: var(--kv-text-2); }

/* Cloud overlay: drop inside any position:relative section */
.kv-cloud { position: absolute; z-index: 0; pointer-events: none; width: var(--w, 70%); aspect-ratio: 16 / 7; left: var(--x, 0); top: var(--y, 0);
  background: var(--kv-art-cloud) center / contain no-repeat; opacity: var(--a, 0.35); mix-blend-mode: screen;
  animation: kv-drift var(--dur, 40s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.kv-cloud[data-flip="true"] { scale: -1 1; }
[data-theme="light"] .kv-cloud { mix-blend-mode: normal; opacity: calc(var(--a, 0.35) * 0.6); filter: brightness(0.92); }
.kv-cloud-host { position: relative; isolation: isolate; }
.kv-cloud-host > :not(.kv-cloud) { position: relative; z-index: 1; }

/* Full-bleed ribbon */
.kv-ribbon {
  position: relative; width: 100%; height: clamp(180px, 24vw, 340px); overflow: hidden; --p: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.kv-ribbon-layer { position: absolute; inset: -18% -4%; transform: translate3d(0, calc((var(--p) - 0.5) * var(--speed) * 1px), 0); will-change: transform; }
.kv-ribbon-img {
  position: absolute; inset: 0; background-image: var(--art); background-size: var(--size, cover); background-position: var(--pos, center); background-repeat: no-repeat;
  opacity: var(--alpha, 1); animation: kv-float var(--dur, 12s) var(--kv-ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kv-hero-art, .kv-ribbon-img, .kv-char .kv-sigil, .kv-char-fit, .kv-cloud { animation: none !important; }
  .kv-hero, .kv-ribbon { --p: 0 !important; }
  .kv-ribbon { --p: 0.5 !important; }
  .kv-hero-center { opacity: 1 !important; transform: none !important; }
  .kv-carousel-track, .kv-char, .kv-nav, .kv-btn { transition: none !important; }
}

/* ---- font: option 6 (Cinzel Decorative + Nunito Sans) ---- */
:root { --kv-font-display: 'Cinzel Decorative', 'Cinzel', serif; --kv-font-body: 'Nunito Sans', sans-serif; }
body { margin: 0; }
@keyframes kv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { svg { animation: none !important; } }

/* ---- Laravel home additions ---- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kv-nav-h) + 8px); }
[hidden] { display: none !important; }
.kv-wrap { max-width: var(--kv-max); margin: 0 auto; padding: 0 var(--kv-gutter); }
.kv-section { max-width: var(--kv-max); margin: 0 auto; padding: var(--kv-space-9) var(--kv-gutter) var(--kv-space-8); display: grid; gap: var(--kv-space-8); }
.kv-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--kv-space-7); align-items: start; }
.kv-cta-section { overflow: hidden; max-width: var(--kv-max); margin: 0 auto; padding: var(--kv-space-10) var(--kv-gutter); display: grid; justify-items: center; text-align: center; gap: 24px; }
.kv-cta-map { width: min(100%, 680px); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.kv-footer { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; }

/* Navbar follows the content width: bar background stays full-bleed, the links align with the content edges */
.kv-nav {
  --kv-nav-inset: max(var(--kv-gutter), calc((100vw - var(--kv-max)) / 2 + var(--kv-gutter)));
  padding-left: var(--kv-nav-inset); padding-right: var(--kv-nav-inset);
}
.kv-nav-group { padding-right: 0; }
.kv-nav-user { display: flex; align-items: center; gap: 10px; font: var(--kv-fw-label) 12px/1 var(--kv-font-body); letter-spacing: var(--kv-ls-label); text-transform: uppercase; color: var(--kv-text-2); white-space: nowrap; }
.kv-nav-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--kv-line); color: var(--kv-text); }
.kv-nav-links-right { padding-right: var(--kv-space-5); }
@media (max-width: 1239px) { .kv-nav-group, .kv-nav-sep { display: flex; } .kv-nav-group { padding: 0; } .kv-nav-sep { display: none; } .kv-nav-links-right { padding-right: var(--kv-space-5); } }
@media (max-width: 1023px) { .kv-nav-group { display: none; } .kv-nav-links-right { display: none; } }
.kv-nav-drawer[hidden] { display: none !important; }

/* Prize (option C) */
.kv-prize-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; gap: var(--kv-space-7); padding: var(--kv-space-6) 0; }
.kv-prize-ring { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.kv-prize-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: kv-spin 60s linear infinite; }
.kv-prize-core { display: grid; justify-items: center; gap: 4px; }
.kv-prize-idr { font: 400 15px/1 'Cinzel'; letter-spacing: .3em; color: var(--kv-text-2); }
.kv-prize-50 { font: 700 clamp(88px, 10vw, 128px)/.9 'Cinzel'; color: var(--kv-water); text-shadow: 0 0 calc(40px * var(--kv-halo-opacity)) color-mix(in oklch, var(--kv-water) 60%, transparent); }
.kv-prize-mil { font: 400 17px/1 'Cinzel'; letter-spacing: .3em; color: var(--kv-text); }
.kv-prize-line { margin: 0; font: 400 clamp(30px, 3.2vw, 46px)/1.15 'Cinzel'; color: var(--kv-text); }

/* T&C accordion */
.kv-tnc-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--kv-line-strong); padding: 0 0 18px; color: var(--kv-text); cursor: pointer; font: 400 var(--kv-fs-h3)/1.2 var(--kv-font-display); }
.kv-tnc-mark { color: var(--kv-water); font-size: 28px; }
#tnc-body { display: grid; gap: 22px; padding-top: 28px; }
.kv-tnc-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 8px 24px; color: var(--kv-text); line-height: 1.6; }
.kv-tnc-row .kv-label { padding-top: 4px; }
@media (max-width: 759px) { .kv-tnc-row { grid-template-columns: minmax(0, 1fr); } }