/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* ==========================================================================
   Variables & Reset
   ========================================================================== */

:root {
  --bg-primary:    #1A1F2B;
  --bg-secondary:  #2A2F3B;
  --bg-card:       #2C2F36;
  --bg-card-hover: #2C2433;
  --bg-header:     #1A1F2B;
  --bg-canvas:     #0D1017;
  --sidebar-bg:    #212529;
  --border-color:  #6C4F9B;
  /* The app palette makes --border-color solid, which is the old
     --border-hover value, so hover stopped reading as a change. Lifted one
     step up the same purple ramp the wordmark uses to keep the state legible. */
  --border-hover:  #9C6FD6;

  --purple:        #6444B4;
  --purple-light:  #C9A0F0;
  --gold:          #5AD1E3;
  --gold-light:    #5AD1E3;
  --crimson:       #dc2626;
  --green:         #10b981;

  --text-primary:   #F5F5F5;
  --text-secondary: rgba(245, 245, 245, 0.7);
  --text-muted:     #B0B3C1;

  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius:    12px;
  --radius-lg: 20px;
  --transition: 0.25s ease;
  --shadow:     0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow-purple: 0 0 40px rgba(100, 68, 180, 0.3);
  --shadow-glow-gold:   0 0 40px rgba(90, 209, 227, 0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.gradient-text {
  background: linear-gradient(135deg, var(--purple-light), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
}

.section-title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 600px;
}

.section-header { text-align: center; margin-bottom: 4rem; }
.section-header .section-subtitle { margin: 0 auto; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
section { padding: 6rem 0; }

/* ==========================================================================
   Glass Cards
   ========================================================================== */

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition), background var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.glass-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-purple);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: var(--font-body);
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--gold));
  color: #fff;
  box-shadow: 0 4px 20px rgba(100, 68, 180, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(100, 68, 180, 0.55);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(90, 209, 227, 0.08);
}

.btn-small {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  background: rgba(100, 68, 180, 0.15);
  color: var(--purple-light);
  border: 1px solid rgba(100, 68, 180, 0.3);
  border-radius: 6px;
}

.btn-small:hover { background: rgba(100, 68, 180, 0.3); }
.btn-full { width: 100%; padding: 1rem; font-size: 1rem; }

.btn-logo {
  height: 20px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.25rem 0;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
  /* --bg-header, held slightly translucent so the blur behind it still reads.
     The literal is the fallback for browsers without color-mix(). */
  background: rgba(26, 31, 43, 0.94);
  background: color-mix(in srgb, var(--bg-header) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.75rem 0;
  box-shadow: 0 1px 0 var(--border-color);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* The nav brand lives in the "Navbar Logo Images" block further down. */

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

.nav-link {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }

.nav-cta {
  background: linear-gradient(135deg, var(--purple), var(--gold));
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  margin-left: 0.5rem;
}

.nav-cta:hover { box-shadow: 0 4px 16px rgba(100,68,180,0.4); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* The bottom padding is deliberately larger than the visual rhythm would
     suggest: .hero-scroll is absolutely positioned 2rem from the bottom and
     stands ~4rem tall, so it reaches ~6rem up into the section. Anything less
     here and the last flex child (the preview image) runs underneath the
     scroll cue. */
  padding: 7rem 1.5rem 7.5rem;
  gap: 3rem;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
#heroCanvas { width: 100%; height: 100%; }

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
}

.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.2s forwards;
  font-family: var(--font-body);
}

.hero-title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.4s forwards;
}

/* Reads as a second line of the headline rather than body copy, so it carries the
   display face and sits brighter than the paragraph beneath it. */
.hero-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  color: var(--text-primary);
  max-width: 620px;
  margin: 0 auto 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.55s forwards;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.7s forwards;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.85s forwards;
}

.hero-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 1.05s forwards;
}

/* Hero preview */
.hero-preview {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 1.1s, transform 0.8s ease 1.1s;
}

.hero-preview.visible {
  opacity: 1;
  transform: translateY(0);
}

/* The hero preview is a real screenshot of the app, and it arrives with its own
   window chrome and wordmark already inside it. So it gets framed, not dressed
   up: adding a mock title bar or window dots around it would stack a second app
   UI on top of the one in the picture and show the wordmark twice. The frame
   itself now sits on .hero-carousel-viewport, which is the element that clips
   the slides: a border and glow on each image would be cropped away by it.
   Intrinsic width/height stay on every tag so the hero does not reflow as the
   screenshots decode. */
.hero-preview-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Carousel shell. The viewport clips, the track slides one slide wide each,
   so the transform is a plain multiple of 100%. Controls are hidden entirely
   when only one screenshot has been uploaded (.is-single), which leaves the
   hero looking exactly like the single framed screenshot it used to be. */
.hero-carousel {
  position: relative;
}

.hero-carousel-viewport {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow-purple);
}

.hero-carousel-track {
  display: flex;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
  transition: opacity 0.5s ease;
}

/* Slides sit side by side in the track, so the neighbours are still painted
   while the track is mid-slide: fade them down so only the current screenshot
   reads at full strength. */
.hero-slide:not(.is-active) {
  opacity: 0.35;
}

.hero-slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(13, 16, 23, 0.9), transparent);
  color: var(--text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
}

/* A slot with no caption written for it yet shouldn't paint an empty scrim. */
.hero-slide-caption:empty {
  display: none;
}

/* Prev/next. Nudged inside the frame so they never widen the hero column, and
   sized for a finger on touch as well as a cursor. */
.hero-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: rgba(26, 31, 43, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text-primary);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition),
              border-color var(--transition);
}

.hero-carousel:hover .hero-carousel-nav,
.hero-carousel:focus-within .hero-carousel-nav {
  opacity: 1;
}

.hero-carousel-nav:hover {
  background: rgba(100, 68, 180, 0.8);
  border-color: var(--border-hover);
}

.hero-carousel-nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--purple-light);
  outline-offset: 2px;
}

.hero-carousel-prev { left: 0.75rem; }
.hero-carousel-next { right: 0.75rem; }

.hero-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.hero-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--transition), background var(--transition),
              transform var(--transition);
}

.hero-carousel-dot:hover { opacity: 0.75; }

.hero-carousel-dot.is-active {
  background: var(--purple-light);
  opacity: 1;
  transform: scale(1.35);
}

.hero-carousel-dot:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
}

/* One screenshot: no controls, nothing to navigate. */
.hero-carousel.is-single .hero-carousel-nav,
.hero-carousel.is-single .hero-carousel-dots {
  display: none;
}

/* Touch: the arrows only appear on hover, which a phone doesn't have, so the
   dots carry the affordance and swiping does the work. */
@media (hover: none) {
  .hero-carousel-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track { transition: none; }
  .hero-slide:not(.is-active) { opacity: 1; }
}

/* The pre-release caveat for product imagery, kept with the screenshot it
   qualifies rather than buried in the footer, because this is the most persuasive
   image on the page, so the caveat belongs where people actually see it. Worded
   to cover every screenshot on the site so one note does the job, instead of
   repeating it under each feature card. Sibling in spirit to .pricing-note,
   which does the same for prices. */
.hero-preview-note {
  margin: 0.9rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Hero scroll */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 0.8s ease 1.4s forwards;
}

.scroll-indicator {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Features
   ========================================================================== */

.features { background: var(--bg-secondary); }

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

/* --- Flip card shell ---------------------------------------------------- */

.feature-card {
  perspective: 1600px;
  cursor: pointer;
  outline: none;
}

.feature-card-inner {
  position: relative;
  height: 100%;
  /* The pointer only ever hits the card box, which never moves. Without this the
     rotating faces slide out from under the cursor and hover state thrashes. */
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.feature-card:hover .feature-card-inner,
.feature-card.is-flipped .feature-card-inner {
  transform: translateY(-4px) rotateY(180deg);
}

.feature-card-face {
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color var(--transition), background-color var(--transition),
              box-shadow var(--transition);
}

/* The front face sets the card height; the back is stretched over it. */
.feature-card-front {
  position: relative;
  height: 100%;
}

.feature-card-back {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Shown until the artwork for this feature is dropped into img/features/. */
  background-image: linear-gradient(150deg, rgba(100, 68, 180, 0.45), rgba(90, 209, 227, 0.22));
}

.feature-card:hover .feature-card-face,
.feature-card.is-flipped .feature-card-face,
.feature-card:focus-within .feature-card-face {
  /* background-color, not the shorthand: the back face keeps its gradient. */
  background-color: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow-purple);
}

.feature-card:focus-within .feature-card-face {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* --- Back face artwork -------------------------------------------------- */

.feature-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim so the caption stays readable over any artwork. */
.feature-card-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 15, 22, 0.92) 0%, rgba(12, 15, 22, 0.55) 38%, rgba(12, 15, 22, 0.05) 75%);
  pointer-events: none;
}

.feature-card-back-caption {
  position: relative;
  z-index: 1;
  padding: 1.5rem 2rem;
}

.feature-card-back-caption h3 {
  font-size: 1rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Front face --------------------------------------------------------- */

.feature-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  display: block;
}

/* Tokens & Characters stands its icon on a base, so the mark reads as a
   tabletop miniature rather than a floating figure, the same underline the
   app puts under the minotaur.

   The base is drawn inside the existing 52px block instead of being added
   below it: the six feature icons sit in a grid and every heading beneath
   them is aligned off this box, so growing it would drop this one card's
   title a few pixels out of line with its neighbours. The figure gives up
   the height rather than the layout. */
.feature-icon--mini {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon--mini .game-icon {
  height: auto;
  flex: 1;
  min-height: 0;
}

/* Wider than the minotaur's stance so it reads as standing on the base rather
   than balancing on it, and carrying the icon's own opacity and glow so the
   two read as one object rather than art plus a rule.

   minotaur.svg is cropped to its own artwork (the stock game-icons file frames
   the figure inside ~30 units of empty viewBox), so this gap is the whole gap:
   with the stock framing the figure floated well clear of its base and no
   margin here could be trusted to mean anything. */
.feature-icon--mini::after {
  content: '';
  width: 60%;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: #fff;
  opacity: 0.85;
  transition: opacity var(--transition), filter var(--transition);
  filter: drop-shadow(0 0 6px rgba(100, 68, 180, 0.25));
}

/* Matches the hover treatment .game-icon gets, so the base lights with the
   figure instead of staying behind. */
.feature-card:hover .feature-icon--mini::after {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(90, 209, 227, 0.4));
}

.feature-card h3 {
  font-size: 1rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.feature-flip-hint {
  display: block;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  margin-top: 1.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.55;
  transition: opacity var(--transition), color var(--transition);
}

.feature-card:hover .feature-flip-hint { opacity: 0.9; }

@media (hover: none) {
  .feature-card:hover .feature-card-inner { transform: none; }
  .feature-card.is-flipped .feature-card-inner { transform: rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card-inner { transition: none; }
  .feature-card:hover .feature-card-inner,
  .feature-card.is-flipped .feature-card-inner { transform: rotateY(180deg); }
}

/* How It Works */
.how-it-works { margin-top: 2rem; }

.steps-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 3rem;
}

.step {
  flex: 1;
  text-align: center;
  padding: 0 1.5rem;
}

.step-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-light);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 1rem;
}

.step h3 {
  font-size: 1rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.step p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.step-connector {
  flex-shrink: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, var(--purple-light), var(--gold-light));
  opacity: 0.3;
  margin-top: 1.5rem;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing { background: var(--bg-primary); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* stretch, not start: all three tiers match the tallest card. The cards
     distribute their own content so the extra height isn't dead space. */
  align-items: stretch;
}

/* Tier cards mirror the in-app billing view (Billing.js -> TierCard): same
   chrome, same running order (title row, blurb, price, limits panel, feature
   list), and each tier carries the accent color it has in the app, from
   src/utilities/tierMeta.js. */
.pricing-card {
  --tier-accent: #9C6FD6;
  /* App cards use a flat 20px. The extra top padding is the one deliberate
     departure: the site has a "Recommended" ribbon the billing view doesn't,
     and 20px lets it collide with the title row. Applied to all three so the
     title rows stay on a common baseline. */
  padding: 2rem 1.25rem 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(108, 79, 155, 0.35);
  border-radius: 12px;
}

.tier-adventurer  { --tier-accent: #7E8CA0; }
.tier-guildmaster { --tier-accent: #9C6FD6; }
.tier-dragonlord  { --tier-accent: #D4AF37; }

/* The app marks your current plan by filling the card and setting its border
   to the tier accent; the recommended tier borrows that treatment here. No
   resting lift: the app keeps its cards on one line, and the reveal animation
   ([data-animate].visible) resets transform anyway. */
.pricing-card.featured {
  border-color: var(--tier-accent);
  background: rgba(108, 79, 155, 0.18);
  box-shadow: var(--shadow-glow-purple);
}

/* Tier cards lift harder than a plain glass card: this is the one place on
   the page where hover is doing real comparison work, so the hovered tier
   should clearly separate from the two beside it. Must stay after
   .pricing-card.featured, which has equal specificity. */
/* Scoped through .pricing-grid purely for specificity: [data-animate].visible
   sets transform: translateY(0) later in this file at equal weight, and would
   otherwise cancel the hover lift as soon as the scroll observer reveals a
   card. Do not flatten this back to `.pricing-card:hover`. */
.pricing-grid .pricing-card:hover {
  transform: translateY(-8px) scale(1.025);
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--tier-accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), var(--shadow-glow-purple);
  z-index: 1;
}

.pricing-grid .pricing-card.featured:hover { background: rgba(108, 79, 155, 0.24); }

.pricing-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--purple), var(--gold));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-header { margin-bottom: 0.6rem; }

/* Icon rides beside the tier name, not stacked above it, as in the app. */
.pricing-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.3rem;
}

/* Masked rather than an <img> so each glyph takes its tier's accent color,
   the way the react-icons glyphs are tinted in the billing view. */
.pricing-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: var(--tier-accent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.tier-adventurer .pricing-icon {
  -webkit-mask-image: url('../img/icons/swords-power.svg');
          mask-image: url('../img/icons/swords-power.svg');
}

.tier-guildmaster .pricing-icon {
  -webkit-mask-image: url('../img/icons/crowned-skull.svg');
          mask-image: url('../img/icons/crowned-skull.svg');
}

.tier-dragonlord .pricing-icon {
  -webkit-mask-image: url('../img/icons/warlord-helmet.svg');
          mask-image: url('../img/icons/warlord-helmet.svg');
}

.pricing-header h3 {
  font-size: 1.25rem;
  margin: 0;
}

/* min-height keeps one- and two-line blurbs from shunting the prices out of
   alignment across the row, as the app's fixed 38px does. */
.pricing-desc {
  font-size: 0.8125rem;
  color: rgba(245, 245, 245, 0.55);
  min-height: 2.4rem;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0.6rem 0 1rem;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.price-period {
  font-size: 0.875rem;
  color: rgba(245, 245, 245, 0.5);
}

/* Each tier is a superset of the one below it, so the cards list only the delta and
   name their parent tier, matching how the in-app billing page reads. */
.pricing-rule {
  text-align: center;
  max-width: 46rem;
  margin: -2rem auto 3rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.pricing-rule strong { color: var(--gold-light); }

/* Grows to absorb the slack in an equal-height row, so the extra space in a
   short tier lands under its last feature instead of inside the card. */
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.pricing-features li.inherit {
  color: var(--tier-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(245, 245, 245, 0.85);
}

.pricing-features li.dim { color: var(--text-muted); }

.pricing-features .check { color: var(--tier-accent); font-weight: 700; flex-shrink: 0; }
.pricing-features li.dim span { color: var(--text-muted); flex-shrink: 0; }

/* The numeric half of a tier: a purple-washed strip above the feature list,
   matching the limit strip on the app's plan cards. Ceilings, not grants, so
   it stays visually separate from the ticked features below it. */
.pricing-limits {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.875rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(108, 79, 155, 0.25);
  border-radius: 8px;
  background: rgba(108, 79, 155, 0.12);
}

.pricing-limits li {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(245, 245, 245, 0.9);
}

/* One shared CTA for the whole grid. The tiers aren't separately purchasable
   yet, so three identical buttons only asked the same question three times. */
.pricing-cta {
  margin-top: 3rem;
  text-align: center;
}

.pricing-cta-note {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-note {
  text-align: center;
  max-width: 46rem;
  margin: 2.5rem auto 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.pricing-note strong { color: var(--gold-light); }

/* ==========================================================================
   About
   ========================================================================== */

.about { background: var(--bg-secondary); position: relative; overflow: hidden; }

.about::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(100,68,180,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-text .section-title { margin-bottom: 1.5rem; }

.about-body {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.about-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; }

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-light), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.about-visual { display: flex; flex-direction: column; gap: 1rem; }

.about-card {
  padding: 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.about-card-icon { width: 40px; height: 40px; flex-shrink: 0; }

.about-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.about-card p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }

/* ==========================================================================
   Team: Founder Spotlight
   ========================================================================== */

.team { background: var(--bg-primary); }

.founder-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3.5rem;
  padding: 3rem;
  max-width: 920px;
  margin: 0 auto;
}

.founder-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.founder-avatar-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 40px rgba(100, 68, 180, 0.5);
  border: 3px solid rgba(100, 68, 180, 0.4);
  margin-bottom: 0.25rem;
}

.founder-name {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}

.founder-title {
  font-size: 0.82rem;
  color: var(--gold-light);
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0.03em;
}

.founder-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.25rem;
}

.founder-role-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  background: rgba(100, 68, 180, 0.18);
  border: 1px solid rgba(100, 68, 180, 0.4);
  color: var(--purple-light);
}

.founder-social {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.founder-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: all var(--transition);
}

.founder-social a:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(90, 209, 227, 0.1);
}

.founder-right {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
}

.founder-right p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

.founder-quote {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: rgba(100, 68, 180, 0.08);
  border-left: 3px solid var(--purple);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 0.5rem;
}

.founder-quote-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.4; }

.founder-quote blockquote {
  font-style: italic;
  color: var(--purple-light);
  font-size: 0.97rem;
  line-height: 1.65;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact { background: var(--bg-secondary); position: relative; overflow: hidden; }

.contact::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(90,209,227,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}

.contact-info .section-title { margin-bottom: 1.25rem; }

.contact-body {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.contact-details { display: flex; flex-direction: column; gap: 1.25rem; }

.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-icon { width: 36px; height: 36px; flex-shrink: 0; }

.contact-item strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.contact-item a,
.contact-item span {
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.contact-item a:hover { color: var(--gold-light); }

.contact-form-wrap { padding: 2.5rem; position: relative; z-index: 1; }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }

/* Honeypot wrapper. Uses position/clip rather than `display: none` or
   `visibility: hidden`, because the better spam bots skip fields hidden the
   obvious ways. The point is that the field looks real to a script parsing
   the markup while never being reachable by a person. */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-group label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c5475' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-group select option { background: var(--bg-secondary); color: var(--text-primary); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(100,68,180,0.15);
}

.form-group textarea { resize: vertical; min-height: 110px; }

/* Open beta opt-in. Given its own card inside the form so it reads as a separate
   decision from the fields above it rather than one more input to tab past:
   it's the only control here that signs someone up for a second thing. The
   whole card is clickable because the <label> wraps the text and the native
   checkbox sits beside it. */
.form-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: rgba(100, 68, 180, 0.08);
  transition: border-color var(--transition), background var(--transition);
}

.form-optin:hover {
  border-color: var(--border-hover);
  background: rgba(100, 68, 180, 0.14);
}

/* accent-color keeps the platform checkbox, along with its focus ring, keyboard
   behavior and high-contrast handling, while tinting it to the brand. */
.form-optin input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--purple);
  cursor: pointer;
}

.form-optin label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
}

.form-optin-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-optin-hint {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* The card carries the focus ring on behalf of the checkbox inside it, so
   keyboard users see the whole target light up, not a 17px box. */
.form-optin:focus-within {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(100, 68, 180, 0.15);
}

/* Turnstile renders its own widget in an iframe and sizes itself; this just
   stops it butting against the submit button, and centers it at the widths
   where the flexible layout stops filling the column. */
.form-turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
}

/* Nothing to show while the challenge script is still loading. An empty box
   reserving 65px reads as a broken image until the iframe lands. */
.form-turnstile:empty {
  min-height: 0;
}

.form-note { font-size: 0.8rem; color: var(--text-muted); text-align: center; }

.form-note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--gold-light); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.7;
  max-width: 280px;
}

.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }

.footer-social a {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: all var(--transition);
}

.footer-social a:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(90,209,227,0.1);
}

.footer-links h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
}

.footer-links ul { display: flex; flex-direction: column; gap: 0.75rem; }

.footer-links a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--text-primary); }

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-bottom-logo {
  height: 128px;
  width: 128px;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity var(--transition);
}

.footer-bottom-logo:hover { opacity: 0.9; }

.footer-bottom p { font-size: 0.85rem; color: var(--text-muted); }

/* ==========================================================================
   Animations
   ========================================================================== */

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

@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%       { opacity: 0.4; transform: scaleY(0.7); }
}

[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate].visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .features-grid  { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid   { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .founder-card   { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  section { padding: 4rem 0; }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,31,43,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 999;
  }

  .nav-links.open { display: flex; }
  .nav-links .nav-link { font-size: 1.4rem; padding: 0.75rem 2rem; }
  .nav-toggle { display: flex; z-index: 1000; }

  /* Same clearance for the scroll cue as the desktop rule, on a tighter top. */
  .hero { padding: 7rem 1.5rem 6.5rem; }

  .steps-grid { flex-direction: column; align-items: center; }
  .step-connector { width: 1px; height: 40px; margin: 0; }

  .about-grid   { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-stats  { gap: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 580px) {
  .features-grid  { grid-template-columns: 1fr; }
  .founder-left   { gap: 0.75rem; }
  .hero-actions   { flex-direction: column; align-items: center; }
  .about-stats    { flex-direction: column; gap: 1rem; }
  .form-row       { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; }
  .footer-brand   { grid-column: span 1; }
}

/* ==========================================================================
   Navbar Logo Images
   ========================================================================== */

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.nav-ddrop-logo {
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(100, 68, 180, 0.3));
}

/* DropWyrmVTT wordmark, matched to the lockup used inside the application:
   plain white lettering with the VTT suffix set as a filled purple chip rather
   than a superscript. inline-flex (not flex) because the mark has to sit inside
   running copy and labels here as well as stand on its own in the nav, hero and
   footer. Only the size belongs to the context (nav, footer, inline); everything
   else lives here so the mark is identical everywhere it appears. */
.ddvtt-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.33em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  text-transform: none;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* The chip's padding and radius are expressed in em of the chip's own text, so
   they track the wordmark size instead of needing a value per context.

   The padding is asymmetric on both axes to optically center VTT in the chip,
   correcting two things that symmetric padding gets wrong. Horizontally, CSS
   emits a letter-space after the final T as well as between the letters, so the
   glyphs sit left of center; the extra 0.03em on the left cancels it.
   Vertically, the line box reserves Cinzel's full descender depth below the
   baseline even though VTT has no descenders, which floats the caps above
   center; the extra 0.04em on top pushes them back down. Both figures are the
   measured ink-vs-box offset for this face, so they hold at every chip size. */
.ddvtt-mark-vtt {
  display: inline-block;
  padding: 0.38em 0.64em 0.28em 0.86em;
  border-radius: 0.5em;
  background: #6C4F9B;
  color: #fff;
  font-size: var(--ddvtt-chip-size, 0.5em);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Inline occurrences sitting in a label or a run of body copy. The app sets the
   chip at 0.4em of a 30px lockup, i.e. about 12px of type; against these much
   smaller bases that same ratio lands under 6px, so the chip is scaled up here
   to stay legible at the size the surrounding text actually runs at. */
.ddvtt-mark--inline {
  font-size: 1.05em;
  --ddvtt-chip-size: 0.72em;
}

.nav-wordmark { font-size: 1.25rem; }

/* Studio attribution beside the product wordmark. Set as a separate,
   quieter line so the product reads first and the studio frames it. */
.nav-by {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 0.7rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--border-color);
  transition: color var(--transition);
}

.nav-brand:hover .nav-by { color: var(--text-secondary); }

/* ==========================================================================
   Hero Product Logo
   ========================================================================== */

.hero-product-logo {
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.05s forwards;
}

.hero-ddrop-logo {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  filter: drop-shadow(0 0 36px rgba(100, 68, 180, 0.55));
}

/* Studio attribution under the hero CTAs */
.hero-studio {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}

.hero-studio:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.06);
}

.hero-studio strong {
  font-weight: 600;
  color: var(--gold-light);
  transition: color var(--transition);
}

/* ==========================================================================
   Product Section
   ========================================================================== */

.product {
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.product-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(100,68,180,0.08) 0%, rgba(90,209,227,0.04) 50%, transparent 70%);
  pointer-events: none;
}

.product-header {
  text-align: center;
  margin-bottom: 4rem;
}

.product-logo-wrap {
  margin: 1.5rem auto;
  width: 200px;
  height: 200px;
}

.product-logo {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 0 52px rgba(100, 68, 180, 0.5));
}

.product-tagline {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  font-style: italic;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.product-feature {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.product-brand-mark {
  height: 44px;
  width: auto;
  align-self: flex-start;
  filter: drop-shadow(0 0 10px rgba(100, 68, 180, 0.35));
}

.product-feature h3 {
  font-size: 1.25rem;
}

.product-feature > p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
}

.product-stats-mini {
  display: flex;
  gap: 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.product-stats-mini div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.product-stats-mini strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--purple-light), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-stats-mini span {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-features-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-features-title {
  font-size: 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.product-diff-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.product-diff-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.diff-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.product-diff-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.product-diff-item p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.product-platform {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.platform-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.75rem 2rem;
  text-align: center;
  transition: background var(--transition);
}

.platform-item:hover { background: var(--bg-card-hover); }

.platform-icon { font-size: 1.75rem; }

.platform-item strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.platform-item span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.platform-divider {
  width: 1px;
  height: 60px;
  background: var(--border-color);
  flex-shrink: 0;
}


/* ==========================================================================
   Studio Mark (About section)
   ========================================================================== */

.about-studio-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

/* The one place the studio badge is shown large enough to actually read.
   It carries its own wordmark, so it turns to mush below ~80px. */
.about-studio-logo {
  height: 88px;
  width: auto;
  border-radius: 12px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 18px rgba(100, 68, 180, 0.4));
}

.about-studio-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 15rem;
}

/* ==========================================================================
   Footer Logo Images
   ========================================================================== */

.footer-logo-link { display: inline-block; }

.footer-studio {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer-studio strong { color: var(--gold-light); font-weight: 600; }
.footer-studio:hover { color: var(--text-secondary); }

.footer-wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  transition: opacity var(--transition);
}

.footer-wordmark:hover { opacity: 0.85; }

.footer-ddrop-logo {
  height: 44px;
  width: 44px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(100, 68, 180, 0.4));
}

.footer-wordmark-text { font-size: 1.4rem; }

/* Product section responsive additions */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: 1fr; }
  /* Drop the studio attribution before the brand and the nav links collide;
     the links only collapse to the hamburger at 768px. */
  .nav-by { display: none; }
}

@media (max-width: 768px) {
  .product-logo-wrap { width: 160px; height: 160px; }
  .product-logo { width: 160px; height: 160px; }
  .product-platform { flex-direction: column; }
  .platform-divider { width: 60%; height: 1px; }
  .about-studio-mark { flex-direction: row; }
}

@media (max-width: 580px) {
  .hero-ddrop-logo { width: 120px; height: 120px; }
  .product-stats-mini { gap: 1.25rem; }
  /* Chip ratio nudged up with the smaller nav type so the three letters stay
     above readable size once the wordmark drops to 1.05rem. */
  .nav-wordmark { font-size: 1.05rem; --ddvtt-chip-size: 0.6em; }
  .nav-ddrop-logo { height: 28px; }
  .hero-studio { font-size: 0.66rem; letter-spacing: 0.08em; }
  .about-studio-mark { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* ==========================================================================
   Game Icons (game-icons.net SVGs)
   ========================================================================== */

.game-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity var(--transition), filter var(--transition);
  filter: drop-shadow(0 0 6px rgba(100, 68, 180, 0.25));
}

/* Tier cards tint their own icon from --tier-accent and are not in this list. */
.feature-card:hover .game-icon,
.about-card:hover .game-icon {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(90, 209, 227, 0.4));
}

/* ==========================================================================
   Legal pages (privacy policy, and whatever joins it later)
   ==========================================================================
   Long-form reading rather than marketing: one narrow column, no animation,
   and a measure capped well below the .container width the sections use. */

.legal-page { padding: 7rem 0 5rem; }

.legal-wrap { max-width: 48rem; margin: 0 auto; }

.legal-back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.legal-back:hover { color: var(--gold-light); }

.legal-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.legal-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-color);
}

.legal-lede { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 2.5rem; }

.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.75rem 0 0.9rem;
  /* Anchored headings: keeps a linked section clear of the fixed navbar. */
  scroll-margin-top: 6rem;
}

.legal-body h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple-light);
  margin: 1.75rem 0 0.6rem;
}

.legal-body p { color: var(--text-secondary); margin-bottom: 1rem; }

.legal-body ul { list-style: none; margin: 0 0 1.25rem; }

.legal-body li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
}

.legal-body li::before {
  content: '\25C6';
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.7rem;
  color: var(--purple-light);
}

.legal-body a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }

.legal-body strong { color: var(--text-primary); font-weight: 600; }

.legal-note {
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--purple);
  background: rgba(255,255,255,0.03);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .legal-page { padding: 5.5rem 0 3.5rem; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.visually-hidden {
  border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
}

@media print {
  *, *::before, *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .navbar, .hero-bg, .hero-scroll, #heroCanvas { display: none; }
  section { padding: 2rem 0; }
}