/* =============================================
   RunBeat Media – Business Deck Stylesheet
   Presentation-style slide layout
   ============================================= */

/* ── DECK HERO (Title Slide) ─────────────── */
.deck-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  overflow: hidden;
  text-align: center;
}

.deck-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.deck-hero-logo {
  margin-bottom: 2rem;
}

.deck-hero-logo img {
  height: 80px;
  width: auto;
  margin: 0 auto;
}

.deck-hero-text {
  margin-bottom: 2rem;
}

.deck-company {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.deck-hero-text h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.1;
}

.deck-hero-meta p {
  font-size: 1.15rem;
  color: #bbb;
  margin-bottom: 0.5rem;
}

.deck-meta-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--dark3);
  padding: 0.35rem 1rem;
  border-radius: 20px;
  margin-top: 0.5rem;
}

/* ── DECK SLIDES ─────────────────────────── */
.deck-slide {
  padding: 5rem 0;
  border-top: 1px solid #2a2c30;
}

.deck-slide-dark {
  background: var(--dark2);
}

.deck-slide-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 900;
  text-align: center;
  margin-bottom: 0.5rem;
}

.deck-slide-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.deck-prose {
  text-align: center;
  color: #bbb;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 3rem;
}

/* ── VALUES GRID ─────────────────────────── */
.deck-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.deck-value-card {
  background: var(--dark2);
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.deck-value-card:hover {
  transform: translateY(-4px);
  border-color: #444;
}

.deck-value-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
}

.deck-value-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--light);
}

.deck-value-card p {
  font-size: 0.92rem;
  color: #999;
  line-height: 1.6;
}

/* ── PRODUCTS GRID ───────────────────────── */
.deck-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.deck-product-card {
  background: var(--dark3);
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 1.75rem;
  transition: border-color 0.3s, transform 0.3s;
}

.deck-product-card:hover {
  transform: translateY(-4px);
  border-color: var(--pink);
}

.deck-product-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
}

.deck-product-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--cyan);
}

.deck-product-card p {
  font-size: 0.9rem;
  color: #999;
  line-height: 1.6;
}

/* ── PROPOSITION GRID ────────────────────── */
.deck-proposition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.deck-proposition-card {
  background: var(--dark2);
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 2rem;
  transition: border-color 0.3s, transform 0.3s;
}

.deck-proposition-card:hover {
  transform: translateY(-4px);
  border-color: #444;
}

.deck-proposition-card h3 {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.deck-proposition-card h4 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.deck-proposition-card p {
  font-size: 0.92rem;
  color: #bbb;
  line-height: 1.65;
}

/* ── PRICING GRID ────────────────────────── */
.deck-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.deck-pricing-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.deck-pricing-card {
  background: var(--dark3);
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.deck-pricing-card:hover {
  transform: translateY(-4px);
  border-color: #444;
}

.deck-pricing-highlight {
  border-color: var(--cyan);
  box-shadow: 0 0 30px rgba(0, 174, 239, 0.08);
}

.deck-pricing-free {
  border-color: var(--green);
  box-shadow: 0 0 30px rgba(141, 198, 63, 0.08);
}

.deck-pricing-amount {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--light);
  margin-bottom: 0.5rem;
}

.deck-pricing-amount span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

.deck-pricing-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--cyan);
}

.deck-pricing-free h3 {
  color: var(--green);
}

.deck-pricing-card p {
  font-size: 0.88rem;
  color: #999;
  line-height: 1.5;
}

.deck-pricing-extras {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.deck-pricing-extra {
  background: var(--dark3);
  border: 1px solid #2a2c30;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.deck-pricing-extra strong {
  font-size: 0.9rem;
  color: var(--light);
}

.deck-pricing-extra span {
  font-size: 0.9rem;
  color: var(--cyan);
  font-weight: 700;
}

/* ── MARKET GRID ─────────────────────────── */
.deck-market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.deck-market-card {
  background: var(--dark2);
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 2rem;
  transition: border-color 0.3s, transform 0.3s;
}

.deck-market-card:hover {
  transform: translateY(-4px);
  border-color: #444;
}

.deck-market-card h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  margin-bottom: 0.25rem;
}

.deck-market-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--light);
  margin-bottom: 0.75rem;
}

.deck-market-card p {
  font-size: 0.9rem;
  color: #999;
  line-height: 1.6;
}

.deck-market-segments {
  margin-top: 3rem;
  text-align: center;
}

.deck-market-segments h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.deck-segments-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.deck-segment {
  background: var(--dark2);
  border: 1px solid #2a2c30;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.2s;
}

.deck-segment:hover {
  border-color: var(--cyan);
}

.deck-segment span {
  font-size: 1.3rem;
}

/* ── GTM GRID ────────────────────────────── */
.deck-gtm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.deck-gtm-card {
  background: var(--dark3);
  border: 1px solid #2a2c30;
  border-radius: 12px;
  padding: 2rem;
  transition: border-color 0.3s, transform 0.3s;
}

.deck-gtm-card:hover {
  transform: translateY(-4px);
  border-color: #444;
}

.deck-gtm-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--light);
  margin-bottom: 1rem;
}

.deck-gtm-card ul {
  list-style: none;
  padding: 0;
}

.deck-gtm-card li {
  font-size: 0.9rem;
  color: #999;
  line-height: 1.6;
  padding: 0.4rem 0;
  padding-left: 1.3rem;
  position: relative;
}

.deck-gtm-card li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 700;
}

/* ── CLOSING SLIDE ───────────────────────── */
.deck-closing {
  background: var(--dark);
  text-align: center;
  padding: 6rem 0;
  border-top: none;
  position: relative;
  overflow: hidden;
}

.deck-closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(236, 0, 140, 0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(0, 174, 239, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.deck-closing-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.deck-closing-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}

.deck-closing h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.deck-closing p {
  font-size: 1.05rem;
  color: #bbb;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.deck-closing-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.deck-stat {
  text-align: center;
}

.deck-stat-number {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.deck-stat-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 0.35rem;
}

/* ── SLIDE NAVIGATION ────────────────────── */
.deck-slide-nav {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 200;
  background: rgba(17, 18, 20, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid #2a2c30;
  border-radius: 30px;
  padding: 0.5rem 1rem;
}

.deck-nav-btn {
  background: none;
  border: 1px solid #444;
  color: var(--light);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.deck-nav-btn:hover {
  border-color: var(--cyan);
  background: rgba(0, 174, 239, 0.1);
}

.deck-nav-counter {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 40px;
  text-align: center;
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 1024px) {
  .deck-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .deck-pricing-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .deck-hero { min-height: 60vh; padding: 3rem 1rem; }
  .deck-logo-mark { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 14px; }
  .deck-slide { padding: 3rem 0; }

  .deck-values-grid,
  .deck-products-grid,
  .deck-market-grid { grid-template-columns: 1fr; }

  .deck-proposition-grid,
  .deck-gtm-grid,
  .deck-pricing-grid { grid-template-columns: 1fr; }

  .deck-closing-stats { gap: 2rem; }
  .deck-stat-number { font-size: 1.6rem; }

  .deck-slide-nav { bottom: 1rem; right: 1rem; padding: 0.4rem 0.75rem; }
  .deck-nav-btn { width: 30px; height: 30px; font-size: 1rem; }

  .deck-pricing-extras { flex-direction: column; align-items: center; }
}

/* ── PRINT / PDF STYLES ──────────────────── */
@media print {
  nav, footer, .deck-slide-nav { display: none !important; }

  body {
    background: #111214 !important;
    color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .deck-hero {
    min-height: auto;
    padding: 3rem 2rem;
    page-break-after: always;
  }

  .deck-slide {
    page-break-after: always;
    page-break-inside: avoid;
    padding: 2.5rem 0;
  }

  .deck-closing {
    page-break-after: avoid;
  }

  .deck-value-card:hover,
  .deck-product-card:hover,
  .deck-proposition-card:hover,
  .deck-pricing-card:hover,
  .deck-market-card:hover,
  .deck-gtm-card:hover {
    transform: none;
  }
}