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

:root {
  --orange: #FF6B00;
  --wpp: #25D366;
  --wpp-dark: #1da851;
  --bg: #0a0a0a;
  --cream: #faf7f2;
  --text: #f5f0e8;
  --text-muted: rgba(245, 240, 232, .62);
  --surface: rgba(255, 255, 255, .05);
  --surface-strong: rgba(255, 255, 255, .08);
  --surface-border: rgba(255, 255, 255, .1);
  --footer-border: rgba(245, 240, 232, .08);
  --footer-text: rgba(245, 240, 232, .35);
  --footer-link: rgba(245, 240, 232, .55);
  --bg-grad-1: rgba(255, 107, 0, .12);
  --bg-grad-2: rgba(37, 211, 102, .06);
  --bg-grad-3: rgba(34, 158, 217, .06);
  --bg-grid: rgba(255, 255, 255, .032);
  --bg-line-a: rgba(255, 255, 255, .022);
  --bg-line-b: rgba(255, 255, 255, .014);
  --ring: rgba(255, 107, 0, .45);
}

html[data-theme="light"] {
  --bg: #f6f3ed;
  --cream: #141210;
  --text: #2a2622;
  --text-muted: rgba(42, 38, 34, .68);
  --surface: rgba(255, 255, 255, .88);
  --surface-strong: rgba(255, 255, 255, .96);
  --surface-border: rgba(0, 0, 0, .08);
  --footer-border: rgba(0, 0, 0, .08);
  --footer-text: rgba(0, 0, 0, .42);
  --footer-link: rgba(0, 0, 0, .58);
  --bg-grad-1: rgba(255, 107, 0, .07);
  --bg-grad-2: rgba(37, 211, 102, .05);
  --bg-grad-3: rgba(34, 158, 217, .05);
  --bg-grid: rgba(0, 0, 0, .045);
  --bg-line-a: rgba(0, 0, 0, .028);
  --bg-line-b: rgba(0, 0, 0, .018);
}

html { scroll-behavior: smooth; color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 31px, var(--bg-grid) 31px, var(--bg-grid) 32px),
    repeating-linear-gradient(90deg, transparent 0, transparent 31px, var(--bg-grid) 31px, var(--bg-grid) 32px),
    repeating-linear-gradient(45deg, transparent 0, transparent 15px, var(--bg-line-a) 15px, var(--bg-line-a) 16px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 15px, var(--bg-line-b) 15px, var(--bg-line-b) 16px),
    radial-gradient(ellipse 120% 80% at 50% -20%, var(--bg-grad-1), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 50%, var(--bg-grad-2), transparent),
    radial-gradient(ellipse 50% 40% at 0% 80%, var(--bg-grad-3), transparent);
}

.page-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1rem;
}

.back-link,
.theme-toggle,
.hero-mini-link,
.cta-general-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 600;
}

.back-link:hover,
.theme-toggle:hover,
.hero-mini-link:hover,
.cta-general-link:hover {
  color: var(--orange);
  border-color: rgba(255, 107, 0, .35);
}

.theme-toggle {
  padding: .55rem;
  min-width: 2.5rem;
  cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }

.hero {
  padding: clamp(1.2rem, 4vw, 2.4rem) 0 1.2rem;
}
.hero-compact {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.hero-compact .hero-eyebrow { margin-bottom: .55rem; }
.hero-compact .hero-title { margin-bottom: 1rem; }
.hero-card-center { max-width: 420px; margin: 0 auto; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
.hero-copy {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .7rem;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.85rem, 5vw, 3.4rem);
  line-height: 1.06;
  color: var(--cream);
  margin-bottom: .55rem;
}
.hero-title em { color: var(--orange); font-style: italic; font-weight: 400; }
.hero-lead {
  font-size: clamp(.92rem, 2.6vw, 1.02rem);
  color: var(--text-muted);
  margin-bottom: 1rem;
  max-width: 42rem;
}
.hero-mini-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
  background: var(--surface-strong);
  border: 1px solid var(--surface-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
}
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--ring);
  pointer-events: none;
}
.hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem .15rem;
}
.hero-art img {
  width: min(100%, 360px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22));
}
.hero-card-body {
  padding: 1rem 1rem 1.1rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .28));
}
html[data-theme="light"] .hero-card-body {
  background: linear-gradient(to top, rgba(255, 255, 255, .92), rgba(255, 255, 255, .4));
}
.hero-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: .25rem;
}
html[data-theme="light"] .hero-card-title { color: var(--cream); }
.hero-card-sub {
  font-size: .82rem;
  color: rgba(255, 255, 255, .72);
  margin-bottom: .8rem;
}
html[data-theme="light"] .hero-card-sub { color: var(--text-muted); }
.hero-btns,
.cta-group-btns {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.btn {
  flex: 1;
  min-width: 10rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .82rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-wpp { background: linear-gradient(135deg, var(--wpp), var(--wpp-dark)); }
.btn-tg { background: linear-gradient(135deg, #2AABEE, #1a7fb8); }
.btn-ig {
  background: linear-gradient(45deg, #f58529, #dd2a7b 40%, #8134af 70%, #515bd4);
  box-shadow: 0 4px 16px rgba(221, 42, 123, .28);
}
.btn-ghost {
  color: var(--cream);
  background: var(--surface);
  border: 1px solid var(--surface-border);
}
html[data-theme="light"] .btn-ghost { color: var(--cream); }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem auto 1.25rem;
}
.content-grid-single {
  grid-template-columns: 1fr;
  max-width: 640px;
}
.info-card,
.cta-card {
  padding: 1.15rem 1.2rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
}
.info-card h2,
.cta-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--cream);
  margin-bottom: .65rem;
}
.info-card p,
.cta-card p {
  color: var(--text-muted);
  font-size: .92rem;
}
.info-list {
  list-style: none;
  display: grid;
  gap: .55rem;
}
.info-list li {
  color: var(--text-muted);
  font-size: .92rem;
  padding-left: 1rem;
  position: relative;
}
.info-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
}

.cta-card {
  max-width: 1120px;
  margin: 0 auto 2rem;
}
.cta-card p + p { margin-top: .85rem; }
.cta-general-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

footer {
  text-align: center;
  padding: 0 0 2rem;
  font-size: .68rem;
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
  margin-top: 1.75rem;
  line-height: 1.8;
}
footer a { color: var(--footer-link); text-decoration: none; }
footer a:hover { color: var(--orange); }

@media (max-width: 860px) {
  .hero-grid,
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .top-bar { padding-top: .7rem; }
  .hero { padding-top: 1rem; }
  .hero-copy,
  .info-card,
  .cta-card { padding: .95rem 1rem; }
  .hero-title { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .hero-btns,
  .cta-group-btns,
  .cta-general-actions { flex-direction: column; }
  .btn { width: 100%; min-width: 0; }
}