:root {
  --cbf-cream: #f8f5f2;
  --cbf-paper: #ffffff;
  --cbf-ink: #2c241f;
  --cbf-warm: #6b5f57;
  --cbf-gold: #c9a227;
  --cbf-burgundy: #8b2635;
  --cbf-glass: rgba(255, 255, 255, 0.62);
  --cbf-shadow: 0 18px 60px rgba(44, 36, 31, 0.10);
  --cbf-radius: 1.75rem;
  --cbf-radius-sm: 1rem;
}

html {
  scroll-behavior: smooth;overflow-x: hidden;max-width: 100%;
}

body {
  background-color: var(--cbf-cream);
  color: var(--cbf-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  color: var(--cbf-burgundy);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover {
  color: var(--cbf-gold);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cbf-gold);
  font-weight: 700;
  line-height: 1.15;
}

/* Fluid headings using clamp() */
.h1-fluid { font-size: clamp(2.2rem, 5.2vw, 5rem); }
.h2-fluid { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
.h3-fluid { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.h4-fluid { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }

.text-gold { color: var(--cbf-gold) !important; }
.text-burgundy { color: var(--cbf-burgundy) !important; }
.text-warm { color: var(--cbf-warm) !important; }
.text-ink { color: var(--cbf-ink) !important; }

.bg-cream { background-color: var(--cbf-cream) !important; }
.bg-paper { background-color: var(--cbf-paper) !important; }
.bg-gold { background-color: var(--cbf-gold) !important; }
.bg-burgundy { background-color: var(--cbf-burgundy) !important; }

.border-gold { border-color: var(--cbf-gold) !important; }
.border-burgundy { border-color: var(--cbf-burgundy) !important; }

/* Buttons */
.btn-cbf {
  --bs-btn-bg: var(--cbf-burgundy);
  --bs-btn-border-color: var(--cbf-burgundy);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #6d1e29;
  --bs-btn-hover-border-color: #6d1e29;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #5c1922;
  --bs-btn-active-border-color: #5c1922;
  border-radius: 50rem;
  padding: 0.85rem 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cbf:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(139, 38, 53, 0.25);
}

.btn-cbf-outline {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--cbf-ink);
  --bs-btn-color: var(--cbf-ink);
  --bs-btn-hover-bg: var(--cbf-ink);
  --bs-btn-hover-border-color: var(--cbf-ink);
  --bs-btn-hover-color: var(--cbf-cream);
  border-radius: 50rem;
  padding: 0.85rem 2rem;
  font-weight: 600;
}

.btn-gold {
  background: var(--cbf-gold);
  color: var(--cbf-ink);
  border-radius: 50rem;
  padding: 0.85rem 2rem;
  font-weight: 700;
}

/* Sections */
.section-py { padding: 5.5rem 0; }
.section-py-lg { padding: 7rem 0; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cbf-burgundy);
  margin-bottom: 1rem;
}

.section-label::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--cbf-gold);
}

.section-title {
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  margin-bottom: 1.25rem;
  color: var(--cbf-ink);
}

.section-lead {
  color: var(--cbf-warm);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  max-width: 640px;
}

/* Cards */
.card-cbf {
  background: var(--cbf-paper);
  border: 1px solid rgba(44, 36, 31, 0.08);
  border-radius: var(--cbf-radius);
  box-shadow: var(--cbf-shadow);
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.card-cbf:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(44, 36, 31, 0.13);
}

.card-glass {
  background: var(--cbf-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--cbf-radius);
  padding: 2rem;
}

/* Decorative elements */
.deco-line {
  width: 70px;
  height: 4px;
  background: var(--cbf-gold);
  border-radius: 2px;
  margin: 1.25rem 0;
}

.deco-dot {
  width: 10px;
  height: 10px;
  background: var(--cbf-burgundy);
  border-radius: 50%;
}

.deco-ring {
  width: 120px;
  height: 120px;
  border: 2px solid var(--cbf-gold);
  border-radius: 50%;
  opacity: 0.35;
  position: absolute;
}

/* Background overlays */
.bg-overlay {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.bg-overlay > * {
  position: relative;
  z-index: 2;
}

.bg-overlay .section-title,
.bg-overlay h1,
.bg-overlay h2,
.bg-overlay h3,
.bg-overlay .lead {
  color: #fff;
}

/* Kinetic typography */
.kinetic-headline {
  font-size: clamp(2.4rem, 7vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--cbf-ink);
}

.kinetic-headline span {
  color: var(--cbf-gold);
}

/* Bento grid */
.bento-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}

.bento-item {
  border-radius: var(--cbf-radius);
  padding: 2rem;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bento-item-lg { grid-column: span 7; }
.bento-item-md { grid-column: span 5; }
.bento-item-full { grid-column: span 12; }

@media (max-width: 991.98px) {
  .bento-item { grid-column: span 12; min-height: 200px; }
}

/* Glass stats */
.stat-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--cbf-radius);
  padding: 2rem;
  color: #fff;
}

.stat-glass .stat-number {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--cbf-gold);
}

/* Pricing */
.pricing-card {
  background: var(--cbf-paper);
  border: 1px solid rgba(44, 36, 31, 0.08);
  border-radius: var(--cbf-radius);
  padding: 2.5rem 2rem;
  position: relative;
  transition: transform 0.3s ease;
}

.pricing-card.featured {
  border-color: var(--cbf-gold);
  box-shadow: 0 20px 60px rgba(201, 162, 39, 0.15);
  transform: scale(1.03);
  z-index: 2;
}

.pricing-card .price {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--cbf-ink);
}

/* Timeline */
.timeline {
  display: flex;
  position: relative;
  padding: 2rem 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cbf-gold);
  z-index: 0;
}

.timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.timeline-step .step-dot {
  width: 22px;
  height: 22px;
  background: var(--cbf-burgundy);
  border: 4px solid var(--cbf-cream);
  border-radius: 50%;
  margin: 0 auto 1rem;
}

@media (max-width: 767.98px) {
  .timeline { flex-direction: column; gap: 2rem; }
  .timeline::before { display: none; }
  .timeline-step { text-align: left; padding-left: 1.5rem; border-left: 2px solid var(--cbf-gold); }
  .timeline-step .step-dot { position: absolute; left: -11px; top: 0; margin: 0; }
}

/* Portfolio grid */
.portfolio-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}

.portfolio-item {
  grid-column: span 6;
  min-height: 320px;
  border-radius: var(--cbf-radius);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.portfolio-item:nth-child(1) { grid-column: span 7; }
.portfolio-item:nth-child(2) { grid-column: span 5; }
.portfolio-item:nth-child(3) { grid-column: span 5; }
.portfolio-item:nth-child(4) { grid-column: span 7; }

@media (max-width: 767.98px) {
  .portfolio-item,
  .portfolio-item:nth-child(n) { grid-column: span 12; min-height: 260px; }
}

/* FAQ */
.faq-accordion .accordion-button {
  background: transparent;
  color: var(--cbf-ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(44, 36, 31, 0.08);
  padding: 1.25rem 0;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--cbf-burgundy);
  background: transparent;
  box-shadow: none;
}

.faq-accordion .accordion-item {
  border: none;
  background: transparent;
}

.faq-accordion .accordion-body {
  padding: 1rem 0 1.5rem;
  color: var(--cbf-warm);
}

/* CTA banner */
.cta-banner {
  border-radius: var(--cbf-radius);
  padding: 5rem 2rem;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(44, 36, 31, 0.78), rgba(139, 38, 53, 0.65));
  border-radius: var(--cbf-radius);
  z-index: 0;
}

.cta-banner > * {
  position: relative;
  z-index: 1;
}

/* Marquee */
.marquee-track {
  display: flex;
  gap: 2.5rem;
  animation: marquee 32s linear infinite;
  width: max-content;
}

.marquee-track-reverse {
  animation-direction: reverse;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Game tabs */
.game-tabs .nav-link {
  border: 1px solid rgba(44, 36, 31, 0.12);
  border-radius: 50rem;
  color: var(--cbf-ink);
  padding: 0.7rem 1.5rem;
  margin: 0.25rem;
  font-weight: 600;
}

.game-tabs .nav-link.active {
  background: var(--cbf-burgundy);
  border-color: var(--cbf-burgundy);
  color: #fff;
}

.game-preview {
  min-height: 380px;
  border-radius: var(--cbf-radius);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: #fff;
}

/* Forms */
.form-cbf .form-control {
  border: 1px solid rgba(44, 36, 31, 0.14);
  border-radius: var(--cbf-radius-sm);
  padding: 0.95rem 1.25rem;
  background: var(--cbf-paper);
  color: var(--cbf-ink);
}

.form-cbf .form-control:focus {
  border-color: var(--cbf-gold);
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.15);
}

.form-cbf .form-label {
  font-weight: 600;
  color: var(--cbf-ink);
}

.form-notify {
  display: none;
  border-radius: var(--cbf-radius-sm);
  padding: 1rem;
  margin-top: 1rem;
}

.form-notify.show { display: block; }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 1080;
  background: var(--cbf-paper);
  border: 1px solid rgba(44, 36, 31, 0.1);
  border-radius: var(--cbf-radius);
  box-shadow: var(--cbf-shadow);
  padding: 1.25rem 1.5rem;
  display: none;
}

.cookie-banner.show { display: flex; }

/* Hotspots */
.hotspot-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cbf-gold);
  color: var(--cbf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  position: absolute;
  box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.25);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(201, 162, 39, 0); }
}

/* Comparison matrix */
.comparison-table th,
.comparison-table td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(44, 36, 31, 0.08);
  vertical-align: middle;
}

.comparison-table th {
  font-weight: 700;
  background: var(--cbf-paper);
}

.comparison-table tr:nth-child(even) td {
  background: rgba(44, 36, 31, 0.02);
}

/* Testimonials */
.testimonial-quote {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--cbf-ink);
}

/* Code snippet */
.code-snippet {
  background: #1a1513;
  color: #f8f5f2;
  border-radius: var(--cbf-radius);
  padding: 1.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  overflow-x: auto;
}

/* Navbar */
.navbar-cbf {
  background: var(--cbf-paper);
  box-shadow: 0 2px 24px rgba(44, 36, 31, 0.06);
  padding: 0.75rem 0;
}

.navbar-cbf .navbar-brand img {
  max-height: 48px;
}

.navbar-cbf .nav-link {
  color: var(--cbf-ink);
  font-weight: 600;
  margin: 0 0.4rem;
}

.navbar-cbf .nav-link:hover,
.navbar-cbf .nav-link.active {
  color: var(--cbf-burgundy);
}

.contact-bar {
  background: var(--cbf-ink);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding: 0.45rem 0;
}

.contact-bar a,
.contact-bar span {
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.contact-bar a:hover {
  color: var(--cbf-gold);
}

/* Footer */
.footer-cbf {
  background: var(--cbf-ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 5rem 0 2rem;
}

.footer-cbf h5,
.footer-cbf h6 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.footer-cbf a {
  color: rgba(255, 255, 255, 0.75);
}

.footer-cbf a:hover {
  color: var(--cbf-gold);
}

.footer-cbf .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 2rem;
  margin-top: 3rem;
}

/* Edges */
.rounded-xl { border-radius: var(--cbf-radius); }
.rounded-2xl { border-radius: 2.5rem; }

/* Brutalism highlight accents */
.brutal-card {
  background: var(--cbf-paper);
  border: 3px solid var(--cbf-ink);
  box-shadow: 8px 8px 0 var(--cbf-gold);
  border-radius: 0;
  padding: 2rem;
}

/* Roadmap / workflow cards */
.roadmap-card {
  background: var(--cbf-paper);
  border-radius: var(--cbf-radius);
  padding: 2rem;
  border: 1px solid rgba(44, 36, 31, 0.08);
}

.step-number {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cbf-gold);
}

/* Utility spacing */
.mt-6 { margin-top: 4rem; }
.mb-6 { margin-bottom: 4rem; }
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }