/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-dark); }
h1 { font-size: var(--size-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--size-3xl); margin-bottom: var(--space-4); }
h3 { font-size: var(--size-2xl); margin-bottom: var(--space-3); }
p { margin-bottom: var(--space-4); }
ul, ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }

/* BWS Centering */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: left;
}
.container--narrow { max-width: var(--max-width-narrow); }
.container--wide { max-width: var(--max-width-wide); }

/* Demo Banner */
.demo-banner {
  background: var(--color-secondary);
  color: var(--color-dark);
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-sm);
  font-weight: 600;
  text-align: center;
}
.demo-banner a { color: var(--color-dark); text-decoration: underline; }

/* Header */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.site-logo {
  font-size: var(--size-xl);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-logo:hover { color: var(--color-primary-dark); }
.main-nav { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.main-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-size: var(--size-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 0.2s;
}
.main-nav a:hover { background: var(--color-light); color: var(--color-primary); }
.main-nav .nav-cta a {
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 600;
}
.main-nav .nav-cta a:hover { background: var(--color-accent-light); color: var(--color-white); }

/* Hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); font-size: var(--size-xl); }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-white);
  padding: var(--space-24) var(--space-6);
  text-align: center;
}
.hero h1 { color: var(--color-white); font-size: var(--size-5xl); margin-bottom: var(--space-4); }
.hero p { font-size: var(--size-xl); opacity: 0.9; max-width: 700px; margin: 0 auto var(--space-8); }
.hero .tagline { font-size: var(--size-2xl); font-weight: 300; opacity: 0.85; }

/* Section hero (inner pages) */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-white);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.page-hero h1 { color: var(--color-white); margin-bottom: var(--space-3); }
.page-hero p { opacity: 0.9; font-size: var(--size-lg); max-width: 600px; margin: 0 auto; }

/* Breadcrumbs */
.breadcrumbs {
  padding: var(--space-3) var(--space-6);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: left;
}
.breadcrumbs a { color: var(--color-primary); }
.breadcrumbs span { margin: 0 var(--space-1); }

/* Cards Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8);
  padding: var(--space-12) 0;
}
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: left;
  transition: all 0.3s;
  box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-icon { font-size: var(--size-4xl); margin-bottom: var(--space-4); }
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-text-light); margin-bottom: var(--space-4); }

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--size-base);
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); color: var(--color-white); }
.btn-secondary { background: var(--color-secondary); color: var(--color-dark); }
.btn-secondary:hover { background: var(--color-secondary-light); color: var(--color-dark); }
.btn-accent { background: var(--color-accent); color: var(--color-white); }
.btn-accent:hover { background: var(--color-accent-light); color: var(--color-white); }
.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: var(--color-white); }
.btn-white { background: var(--color-white); color: var(--color-primary); }
.btn-white:hover { background: var(--color-light); color: var(--color-primary-dark); }

/* Content sections */
.section { padding: var(--space-16) 0; }
.section--light { background: var(--color-light); }
.section--dark { background: var(--color-dark); color: var(--color-white); }
.section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--primary { background: var(--color-primary); color: var(--color-white); }
.section--primary h2 { color: var(--color-white); }
.section-title { text-align: center; margin-bottom: var(--space-12); }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-8); }
th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); }
th { background: var(--color-light); font-weight: 600; color: var(--color-dark); }
tr:hover { background: var(--color-light); }

/* Tier cards */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.tier-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: var(--color-white);
  transition: all 0.3s;
}
.tier-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-lg); transform: scale(1.02); }
.tier-card .tier-price { font-size: var(--size-4xl); font-weight: 700; color: var(--color-primary); margin: var(--space-4) 0; }
.tier-card ul { list-style: none; padding: 0; text-align: left; margin: var(--space-6) 0; }
.tier-card ul li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.tier-card ul li::before { content: "✓ "; color: var(--color-primary); font-weight: 700; }

/* Coco says callout */
.coco-says {
  background: var(--color-light);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  text-align: left;
}
.coco-says::before {
  content: "🥥 Coco says:";
  display: block;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* Feature list */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}
.feature-list li {
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* Footer */
.site-footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-16) 0 var(--space-8);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: left;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.footer-col h4 { color: var(--color-secondary); margin-bottom: var(--space-4); font-size: var(--size-base); }
.footer-col ul { list-style: none; padding: 0; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: var(--size-sm); display: block; padding: var(--space-1) 0; }
.footer-col a:hover { color: var(--color-white); }
.footer-col p { color: rgba(255,255,255,0.7); font-size: var(--size-sm); line-height: 1.8; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-6);
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--size-xs);
}
.footer-bottom a { color: var(--color-secondary); }

/* Responsive */
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); padding: var(--space-4); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
  .main-nav.active { display: flex; }
  .hero h1 { font-size: var(--size-3xl); }
  .hero p { font-size: var(--size-base); }
  h1 { font-size: var(--size-3xl); }
  h2 { font-size: var(--size-2xl); }
  .card-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .tier-card.featured { transform: none; }
}