:root {
  --ink: #2f261d;
  --brown: #6d3418;
  --orange: #e46620;
  --orange-dark: #9a3517;
  --gold: #f5c354;
  --cream: #fff5dc;
  --parchment: #f4dfae;
  --parchment-light: #fff7de;
  --sky: #74b9df;
  --sky-deep: #397fac;
  --navy: #102d45;
  --green: #466f3e;
  --shadow: 0 22px 60px rgba(64, 35, 15, .22);
  --serif: "Libre Baskerville", Georgia, serif;
  --display: "Cinzel", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.95), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, #8dc7e6 0%, #d9eff6 34%, #f2e5bc 68%, #c99a55 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 70%);
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.section-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.sky-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .28;
  pointer-events: none;
  z-index: -1;
}
.sky-glow-one { width: 420px; height: 420px; background: #fff7ca; top: 90px; left: -120px; }
.sky-glow-two { width: 520px; height: 520px; background: #70b1d8; top: 420px; right: -160px; }

.topbar {
  width: min(1220px, calc(100% - 32px));
  margin: 18px auto 0;
  min-height: 72px;
  padding: 12px 14px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(255, 248, 224, .82);
  border: 1px solid rgba(112, 64, 24, .18);
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(47, 70, 80, .14);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 12px;
  z-index: 50;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
  color: var(--brown);
  letter-spacing: -.02em;
}
.brand-logo {
  width: 58px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 8px rgba(89, 40, 15, .18));
}

nav { display: flex; align-items: center; gap: 6px; }
nav a {
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  padding: 11px 13px;
  border-radius: 12px;
}
nav a:hover { background: rgba(228, 102, 32, .09); color: var(--orange-dark); }
nav .nav-cta { background: var(--brown); color: white; padding-inline: 18px; }
nav .nav-cta:hover { background: var(--orange-dark); color: white; }

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  padding-block: 78px 100px;
}

.parchment {
  position: relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,.5), transparent 28%),
    radial-gradient(circle at 50% 10%, #fff9df, transparent 50%),
    linear-gradient(160deg, var(--parchment-light), var(--parchment));
  border: 1px solid rgba(109, 52, 24, .22);
  box-shadow: var(--shadow), inset 0 0 45px rgba(132, 67, 18, .08);
}
.parchment::before,
.parchment::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 8px;
  border-radius: 50%;
  background: rgba(91, 47, 20, .08);
  filter: blur(3px);
}
.parchment::before { top: -4px; }
.parchment::after { bottom: -4px; }
.parchment-large {
  padding: 54px 50px 46px;
  border-radius: 6px 28px 7px 34px;
  transform: rotate(-.5deg);
}

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 800;
  color: var(--orange-dark);
  margin-bottom: 18px;
}
.eyebrow.light { color: #ffe4a2; }

h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 {
  font-size: clamp(3.1rem, 6vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.055em;
  color: #9f3516;
  text-shadow: 0 3px 0 #fff7df, 0 7px 0 rgba(93, 35, 13, .16);
  max-width: 780px;
}
h2 {
  font-size: clamp(2.25rem, 4.2vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--brown);
}
h3 { font-size: 1.28rem; letter-spacing: -.02em; }

.hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.8;
  margin: 28px 0 30px;
  max-width: 690px;
}

.hero-actions, .acquire-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 14px;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: white;
  background: linear-gradient(180deg, #f28b35, #cc4b17);
  border: 1px solid #9f3516;
  box-shadow: 0 7px 0 #8a2f15, 0 13px 25px rgba(112, 43, 17, .25);
}
.button-secondary {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(74, 43, 22, .35);
  color: var(--brown);
}
.button-gold {
  color: #3c260d;
  background: linear-gradient(180deg, #ffd773, #eaa82f);
  box-shadow: 0 7px 0 #9f681b, 0 13px 25px rgba(0,0,0,.18);
}

.seal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}
.seal-row span {
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(109,52,24,.18);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}

.hero-art { position: relative; min-height: 640px; display: grid; place-items: center; }
.poster-frame {
  position: relative;
  width: min(100%, 510px);
  border: 9px solid #f7d997;
  outline: 2px solid #8c4d21;
  box-shadow: 0 28px 70px rgba(38, 55, 57, .3), 0 8px 0 #7b411c;
  transform: rotate(2.2deg);
  overflow: hidden;
  border-radius: 8px;
}
.poster-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%);
  pointer-events: none;
}
.poster-frame img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.floating-card {
  position: absolute;
  z-index: 4;
  padding: 16px 18px;
  min-width: 220px;
  color: var(--ink);
  background: rgba(255, 247, 221, .94);
  border: 1px solid rgba(94, 50, 21, .26);
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(45, 40, 30, .22);
  backdrop-filter: blur(10px);
}
.floating-card strong { display: block; color: var(--brown); margin-top: 5px; }
.floating-card-one { left: -20px; top: 76px; transform: rotate(-4deg); }
.floating-card-two { right: -22px; bottom: 88px; transform: rotate(4deg); }
.mini-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; opacity: .66; }

.marquee {
  overflow: hidden;
  background: #6d3418;
  color: #ffe1a3;
  border-block: 1px solid #9f5f2a;
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 0 14px 35px rgba(71, 36, 16, .24);
}
.marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  animation: scroll 24s linear infinite;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .12em;
}
.marquee-track i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@keyframes scroll { to { transform: translateX(-50%); } }

.content-section { padding-block: 130px; }
.section-heading { max-width: 820px; margin-bottom: 48px; }
.section-heading p { font-size: 1.05rem; line-height: 1.85; max-width: 760px; }
.section-heading.centered { margin-inline: auto; text-align: center; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { padding: 32px; border-radius: 8px 24px 8px 24px; min-height: 250px; }
.feature-card p { line-height: 1.75; font-size: .94rem; }
.feature-number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  font-family: var(--display);
  font-weight: 800;
  box-shadow: 0 5px 0 #9a3517;
}

.world-section {
  padding-block: 110px;
  background:
    linear-gradient(90deg, rgba(16,45,69,.96), rgba(21,62,88,.88)),
    url("assets/bunny-kingdom-cover.png") center / cover fixed;
  position: relative;
}
.world-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 65% 40%, rgba(255,220,123,.18), transparent 34%);
}
.world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.world-image {
  overflow: hidden;
  border: 8px solid #efd39c;
  outline: 2px solid #72401f;
  box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 8px 0 #6d3418;
  border-radius: 8px;
  transform: rotate(-1.8deg);
}
.world-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.world-copy { padding: 48px; border-radius: 8px 30px 8px 30px; }
.world-copy p { line-height: 1.85; }
.kingdom-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.kingdom-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed rgba(109,52,24,.26); }
.kingdom-list span { font-family: var(--display); font-size: .72rem; color: var(--orange-dark); }

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 560px;
  overflow: hidden;
  background: rgba(248, 237, 205, .95);
  border: 1px solid rgba(84, 49, 24, .3);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(55, 57, 45, .25);
}
.dashboard-sidebar {
  padding: 28px 22px;
  background: linear-gradient(180deg, #173c58, #0b263b);
  color: #dcebf1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-logo-img {
  width: 74px;
  height: 66px;
  object-fit: contain;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.24));
}
.dashboard-sidebar a {
  padding: 12px 13px;
  border-radius: 10px;
  font-size: .82rem;
  text-decoration: none;
  opacity: .74;
}
.dashboard-sidebar a.active, .dashboard-sidebar a:hover { background: rgba(255,255,255,.1); opacity: 1; }
.dashboard-main { padding: 34px; }
.dashboard-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid rgba(75,45,24,.16); }
.dashboard-topline button {
  border: 0;
  border-radius: 12px;
  color: white;
  background: var(--orange);
  padding: 13px 18px;
  font-family: var(--display);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 #913116;
}
.dashboard-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding-top: 26px; }
.leaderboard-panel, .event-panel { background: rgba(255,255,255,.5); border: 1px solid rgba(90,53,27,.16); border-radius: 18px; padding: 22px; }
.panel-title { font-family: var(--display); font-weight: 800; color: var(--brown); margin-bottom: 14px; }
.leaderboard { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.leaderboard li { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 11px; border-radius: 12px; background: rgba(246,236,203,.78); }
.leaderboard strong, .leaderboard small { display: block; }
.leaderboard small { opacity: .58; margin-top: 3px; }
.hub-flow { display: grid; gap: 8px; }
.hub-step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: rgba(246,236,203,.78);
}
.hub-step strong, .hub-step small { display: block; }
.hub-step small { margin-top: 5px; opacity: .62; line-height: 1.45; }
.hub-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #f28b35, #cc4b17);
  color: white;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #8a2f15;
}
.hub-arrow {
  text-align: center;
  color: var(--orange-dark);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
}
.place { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #ddcfaa; font-family: var(--display); font-size: .72rem; font-weight: 800; }
.place.gold { background: #f4c650; }
.place.silver { background: #ccd3d8; }
.place.bronze { background: #c98d55; }
.event-panel { background: linear-gradient(160deg, #1e4f70, #102e46); color: white; }
.event-panel h3 { font-size: 1.7rem; margin: 12px 0; }
.event-panel p { line-height: 1.75; opacity: .82; }
.event-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.event-stats div { background: rgba(255,255,255,.08); padding: 14px 8px; text-align: center; border-radius: 12px; }
.event-stats strong, .event-stats span { display: block; }
.event-stats strong { font-family: var(--display); color: var(--gold); font-size: 1.2rem; }
.event-stats span { font-size: .66rem; margin-top: 4px; opacity: .7; }
.event-panel a { color: var(--gold); font-weight: 700; }

.acquire-section {
  padding-block: 110px;
  color: white;
  background:
    radial-gradient(circle at 80% 20%, rgba(245,195,84,.22), transparent 24%),
    linear-gradient(135deg, #7c2e19, #35170e 68%);
  border-block: 1px solid #a4582e;
}
.acquire-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.acquire-copy h2 { color: white; max-width: 700px; }
.acquire-copy p { max-width: 680px; line-height: 1.8; color: rgba(255,255,255,.78); }
.price-box { display: inline-flex; flex-direction: column; padding: 18px 22px; margin: 18px 0 26px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); border-radius: 16px; }
.price-box span { text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; opacity: .68; }
.price-box strong { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1; margin-top: 7px; color: #ffd778; }
.text-link { color: #ffe4a2; font-weight: 700; }
.castle-card {
  padding: 44px;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.8), transparent 26%),
    linear-gradient(160deg, #fff6d9, #e5bd75);
  border: 1px solid #8b4c25;
  border-radius: 12px 34px 12px 34px;
  box-shadow: 0 25px 70px rgba(0,0,0,.32), inset 0 0 50px rgba(118,55,21,.08);
  position: relative;
}
 .castle-card::before { content: none; }
.castle-logo {
  position: absolute;
  right: 24px;
  top: 18px;
  width: 74px;
  height: 62px;
  object-fit: contain;
  opacity: .95;
  filter: drop-shadow(0 5px 8px rgba(89, 40, 15, .16));
}
.castle-kicker { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--orange-dark); }
.castle-domain {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.75vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -.055em;
  color: var(--brown);
  margin: 18px 0 16px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.castle-domain span { color: var(--orange); }
.castle-card p { line-height: 1.7; }
.castle-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.castle-tags span { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.38); border: 1px solid rgba(109,52,24,.18); font-size: .72rem; font-weight: 700; }

.domain-note { padding-block: 70px; }
.note-card { padding: 30px 34px; border-radius: 8px 24px 8px 24px; }
.note-card p { margin-bottom: 0; line-height: 1.75; font-size: .87rem; }

footer { background: #102d45; color: #d8e8ef; }
.footer-inner { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner strong, .footer-inner span { display: block; }
.footer-inner strong { font-family: var(--display); }
.footer-inner span { font-size: .72rem; opacity: .65; margin-top: 4px; }
.footer-inner a { color: #ffd778; font-weight: 700; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  nav a:not(.nav-cta) { display: none; }
  .hero, .world-grid, .acquire-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 54px; }
  .hero-art { min-height: 560px; }
  .feature-grid { grid-template-columns: 1fr; }
  .dashboard { grid-template-columns: 1fr; }
  .dashboard-sidebar { flex-direction: row; overflow-x: auto; align-items: center; }
  .dashboard-logo-img { flex: 0 0 auto; margin: 0 10px 0 0; width: 62px; height: 54px; }
  .dashboard-sidebar a { flex: 0 0 auto; }
  .dashboard-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section-shell { width: min(100% - 24px, 1180px); }
  .topbar { width: calc(100% - 18px); margin-top: 9px; top: 6px; }
  .brand { font-size: .82rem; }
  .brand-logo { width: 48px; height: 38px; }
  nav .nav-cta { padding-inline: 13px; }
  .hero { gap: 28px; padding-block: 38px 68px; }
  .parchment-large, .world-copy, .castle-card { padding: 30px 24px; }
  .castle-domain { font-size: clamp(1.45rem, 7.3vw, 2.45rem); letter-spacing: -.065em; }
  h1 { font-size: 3.05rem; }
  h2 { font-size: 2.35rem; }
  .hero-art { min-height: auto; padding: 30px 0 90px; }
  .floating-card { min-width: 185px; font-size: .78rem; }
  .floating-card-one { left: -2px; top: 8px; }
  .floating-card-two { right: -2px; bottom: 8px; }
  .content-section { padding-block: 86px; }
  .world-section, .acquire-section { padding-block: 78px; }
  .dashboard-main { padding: 20px; }
  .dashboard-topline { align-items: flex-start; flex-direction: column; }
  .event-stats { grid-template-columns: 1fr; }
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
}