/* ═══════════════════════════════════════════════════════════
   SGT Presentation Design System (v3, legacy)
   Sergeant AG — sgt-presentation.css

   Central stylesheet for Reveal.js v3 presentations.
   Design tokens: SGT-2025-Rebranding (Figma) → tokens.css.

   v3 keeps local :root for backwards compatibility. tokens.css
   is loaded first; identical values cascade harmlessly.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens & Google Fonts ────────────────────────────────── */
@import url("./tokens.css");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --sgt-purple:       #754cff;
  --sgt-purple-light: #d2c1ff;

  /* Neutrals */
  --sgt-black:        #1e1e1e;
  --sgt-grey:         #767676;
  --sgt-grey-mid:     #cccccc;
  --sgt-grey-light:   #f5f5f5;
  --sgt-border:       #e0e0e0;
  --sgt-white:        #ffffff;

  /* Department Colors */
  --sgt-strategy:         #d9e530;
  --sgt-strategy-light:   #d3f030;
  --sgt-creativity:       #ffd129;
  --sgt-creativity-light: #ffc800;
  --sgt-technology:       #629cfa;
  --sgt-technology-light: #7dafff;

  /* System Colors */
  --sgt-green:        #1d862d;
  --sgt-red:          #ec1111;

  /* Typography Scale (Desktop) */
  --text-sm:   14px;
  --text-md:   18px;
  --text-lg:   24px;
  --text-xl:   30px;
  --text-2xl:  40px;
  --text-3xl:  50px;
  --text-4xl:  60px;
  --text-5xl:  70px;
  --text-6xl:  80px;
  --text-7xl: 120px;
  --text-8xl: 160px;

  --lh-sm:   22px;
  --lh-md:   26px;
  --lh-lg:   34px;
  --lh-xl:   40px;
  --lh-2xl:  52px;
  --lh-3xl:  63px;
  --lh-4xl:  75px;
  --lh-5xl:  88px;
  --lh-6xl: 100px;
  --lh-7xl: 120px;
  --lh-8xl: 160px;

  /* Spacing (4px base) */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-15: 60px;
  --sp-20: 80px;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Favicon (S. mark, dark bg) */
  --sgt-favicon: url("data:image/svg+xml,%3Csvg%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%22180%22%20height%3D%22180%22%20fill%3D%22%231E1E1E%22%2F%3E%0A%3Cpath%20d%3D%22M135.08%20131.809C136.445%20136.161%20133.998%20140.784%20129.646%20142.148C125.293%20143.513%20120.671%20141.067%20119.306%20136.715C117.941%20132.362%20120.387%20127.739%20124.74%20126.375C129.092%20125.01%20133.715%20127.456%20135.08%20131.809ZM76.5539%20119.768C93.4738%20119.768%20106.003%20109.686%20106.003%2095.7015C106.003%2063.0076%2058.0244%2080.095%2058.0244%2058.7712C58.0244%2051.9337%2064.6945%2047.3882%2074.2876%2047.3882C83.8807%2047.3882%2091.3749%2052.7449%2092.5081%2060.0846H104.548C102.771%2045.9331%2089.7396%2037.4732%2074.6353%2037.4732C57.535%2037.4732%2046.4997%2046.7315%2046.4997%2059.5953C46.4997%2090.1774%2094.4782%2073.7468%2094.4782%2096.0234C94.4782%20103.994%2087.1643%20109.518%2076.1032%20109.518C65.0421%20109.518%2057.0586%20103.659%2055.9383%2094.71H44.5425C46.1649%20110.149%2058.8613%20119.768%2076.5796%20119.768H76.5539Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}


/* ── Gradients & Glass (v2) ──────────────────────────────── */
:root {
  --sgt-gradient-purple: linear-gradient(135deg, #1e1e1e 0%, #2a1a4e 40%, #3d2480 70%, #754cff 100%);
  --sgt-gradient-dark: linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.1);
}


/* ═══════════════════════════════════════════════════════════
   Reveal.js Overrides (v2 — dark-first, larger type)
   ═══════════════════════════════════════════════════════════ */

.reveal {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.reveal .slides {
  text-align: left;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--sgt-white);
}

.reveal h1 {
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.reveal h2 {
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  margin-bottom: var(--sp-8);
}

.reveal h3 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 400;
}

.reveal h4 {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 400;
}

.reveal p {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.reveal ul,
.reveal ol {
  font-weight: 400;
}

.reveal li {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  margin-bottom: 0.4em;
  color: rgba(255, 255, 255, 0.6);
}

.reveal strong {
  font-weight: 700;
  color: var(--sgt-white);
}

.reveal a {
  color: var(--sgt-purple-light);
  text-decoration: none;
}

.reveal .small {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: rgba(255, 255, 255, 0.5);
}

.reveal .slide-number {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}


/* ═══════════════════════════════════════════════════════════
   1. Logo
   Logo is always an SVG <img>, never rendered as text.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   2. Cover Slide (dark)
   ═══════════════════════════════════════════════════════════ */

.cover-slide {
  color: var(--sgt-white);
}

.cover-slide h1 {
  font-size: var(--text-6xl);
  line-height: var(--lh-6xl);
  font-weight: 400;
  color: var(--sgt-white);
  margin-bottom: var(--sp-6);
  letter-spacing: 0.01em;
}

.cover-slide .subtitle {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.cover-slide .meta {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--sp-15);
}


/* ═══════════════════════════════════════════════════════════
   3. Section Slide (dark)
   ═══════════════════════════════════════════════════════════ */

.section-slide {
  color: var(--sgt-white);
}

.section-slide .section-num {
  font-size: var(--text-xl);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  margin-bottom: var(--sp-3);
  letter-spacing: 0;
}

.section-slide h2 {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 400;
  color: var(--sgt-white);
}

.section-slide .section-sub {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: rgba(255, 255, 255, 0.4);
  margin-top: var(--sp-4);
}


/* ═══════════════════════════════════════════════════════════
   4. End Slide (dark, centered)
   ═══════════════════════════════════════════════════════════ */

.end-slide {
  text-align: center;
  color: var(--sgt-white);
}

.end-slide h2 {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 400;
  color: var(--sgt-white);
}

.end-slide .contact {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--sp-15);
}


/* ═══════════════════════════════════════════════════════════
   5. Cards
   ═══════════════════════════════════════════════════════════ */

.sgt-card {
  background: var(--sgt-grey-light);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  border: none;
  text-align: left;
}

.sgt-card h4 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 500;
  margin-bottom: 0.3em;
  color: var(--sgt-black);
}

.sgt-card p {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--sgt-grey);
  margin: 0;
}

.sgt-card .card-icon {
  font-size: 1.4em;
  margin-bottom: 0.3em;
}

/* Card: Dark variant */
.sgt-card.dark {
  background: var(--sgt-black);
  color: var(--sgt-white);
}

.sgt-card.dark h4 {
  color: var(--sgt-white);
}

.sgt-card.dark p {
  color: rgba(255, 255, 255, 0.6);
}

.sgt-card.dark strong {
  color: var(--sgt-white);
}

/* Card: Accent-border variants */
.sgt-card.accent-strategy {
  border-left: 3px solid var(--sgt-strategy);
}

.sgt-card.accent-creativity {
  border-left: 3px solid var(--sgt-creativity);
}

.sgt-card.accent-green {
  border-left: 3px solid var(--sgt-green);
}

.sgt-card.accent-red {
  border-left: 3px solid var(--sgt-red);
}

.sgt-card.accent-blue {
  border-left: 3px solid var(--sgt-technology);
}

.sgt-card.accent-purple {
  border-left: 3px solid var(--sgt-purple);
}


/* ═══════════════════════════════════════════════════════════
   6. Card Grid
   ═══════════════════════════════════════════════════════════ */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  text-align: left;
}

.card-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.card-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.card-grid.cols-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}


/* ═══════════════════════════════════════════════════════════
   7. Tags
   ═══════════════════════════════════════════════════════════ */

.sgt-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sgt-tag-green {
  background: rgba(29, 134, 45, 0.12);
  color: var(--sgt-green);
}

.sgt-tag-red {
  background: rgba(236, 17, 17, 0.12);
  color: var(--sgt-red);
}

.sgt-tag-purple {
  background: rgba(117, 76, 255, 0.12);
  color: var(--sgt-purple);
}

.sgt-tag-blue {
  background: rgba(98, 156, 250, 0.12);
  color: var(--sgt-technology);
}

.sgt-tag-strategy {
  background: rgba(217, 229, 48, 0.15);
  color: #6b7300;
}

.sgt-tag-creativity {
  background: rgba(255, 209, 41, 0.15);
  color: #8a6a00;
}

.sgt-tag-grey {
  background: rgba(170, 170, 170, 0.12);
  color: var(--sgt-grey);
}


/* ═══════════════════════════════════════════════════════════
   8. Tables
   ═══════════════════════════════════════════════════════════ */

.sgt-table {
  font-size: var(--text-md);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.sgt-table th {
  background: var(--sgt-black);
  color: var(--sgt-white);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 1em;
}

.sgt-table th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}

.sgt-table th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

.sgt-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--sgt-border);
  color: var(--sgt-black);
}

.sgt-table td strong {
  font-weight: 600;
}

.sgt-table tr:nth-child(even) td {
  background: var(--sgt-grey-light);
}

.sgt-table tr:last-child td:first-child {
  border-radius: 0 0 0 var(--radius-sm);
}

.sgt-table tr:last-child td:last-child {
  border-radius: 0 0 var(--radius-sm) 0;
}


/* ═══════════════════════════════════════════════════════════
   9. Two-Column Split
   ═══════════════════════════════════════════════════════════ */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  text-align: left;
}


/* ═══════════════════════════════════════════════════════════
   10. Phase / Timeline
   ═══════════════════════════════════════════════════════════ */

.sgt-phase {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  text-align: left;
  margin-bottom: 0.8em;
}

.sgt-phase-marker {
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--sgt-white);
  background: var(--sgt-black);
  flex-shrink: 0;
}

.sgt-phase-content h4 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  margin-bottom: 0.15em;
}

.sgt-phase-content p {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--sgt-grey);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   11. Steps
   ═══════════════════════════════════════════════════════════ */

.sgt-step {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: 1.2em;
}

.sgt-step-num {
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sgt-black);
  color: var(--sgt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--text-md);
  flex-shrink: 0;
}

.sgt-step h3 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  margin-bottom: 0.15em;
}

.sgt-step p {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--sgt-grey);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   12. Highlight Box
   ═══════════════════════════════════════════════════════════ */

.sgt-highlight {
  background: var(--sgt-grey-light);
  border-left: 3px solid var(--sgt-strategy);
  padding: 14px 18px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  text-align: left;
  margin: 1em 0;
  color: var(--sgt-black);
}

.sgt-highlight p {
  font-size: var(--text-md);
  margin: 0;
  color: var(--sgt-black);
}

.sgt-highlight strong {
  color: var(--sgt-black);
}

.sgt-highlight.accent-creativity {
  border-left-color: var(--sgt-creativity);
}

.sgt-highlight.accent-green {
  border-left-color: var(--sgt-green);
}

.sgt-highlight.accent-red {
  border-left-color: var(--sgt-red);
}

.sgt-highlight.accent-blue {
  border-left-color: var(--sgt-technology);
}

.sgt-highlight.accent-purple {
  border-left-color: var(--sgt-purple);
}


/* ═══════════════════════════════════════════════════════════
   13. Architecture Boxes
   ═══════════════════════════════════════════════════════════ */

.sgt-arch-box {
  background: var(--sgt-white);
  border: 2px solid var(--sgt-black);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: var(--text-md);
  font-weight: 500;
  text-align: center;
  color: var(--sgt-black);
}

.sgt-arch-box.main {
  background: var(--sgt-black);
  color: var(--sgt-white);
  font-size: var(--text-lg);
}

.sgt-arch-box.accent-strategy {
  background: var(--sgt-strategy);
  color: var(--sgt-black);
  border-color: var(--sgt-strategy);
}

.sgt-arch-box.accent-creativity {
  background: var(--sgt-creativity);
  color: var(--sgt-black);
  border-color: var(--sgt-creativity);
}

.sgt-arch-sub {
  font-size: var(--text-md);
  font-weight: 400;
  display: block;
  margin-top: 2px;
  color: var(--sgt-grey);
}

.sgt-arch-box.main .sgt-arch-sub {
  color: rgba(255, 255, 255, 0.5);
}

.sgt-arrow {
  text-align: center;
  font-size: 1.2em;
  color: var(--sgt-border);
  margin: 0.3em 0;
}


/* ═══════════════════════════════════════════════════════════
   14. Pros / Cons Lists
   ═══════════════════════════════════════════════════════════ */

.sgt-pros li {
  list-style: none;
  position: relative;
  padding-left: 1.4em;
}

.sgt-pros li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sgt-green);
}

.sgt-cons li {
  list-style: none;
  position: relative;
  padding-left: 1.4em;
}

.sgt-cons li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sgt-red);
}


/* ═══════════════════════════════════════════════════════════
   15. Big Numbers / Stats
   ═══════════════════════════════════════════════════════════ */

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

.sgt-stat-number {
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sgt-black);
  margin-bottom: var(--sp-2);
}

.sgt-stat-label {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--sgt-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sgt-stat-desc {
  font-size: var(--text-md);
  color: var(--sgt-grey);
  margin-top: var(--sp-2);
}


/* ═══════════════════════════════════════════════════════════
   16. Verdict Badges
   ═══════════════════════════════════════════════════════════ */

.sgt-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-md);
  font-weight: 600;
}

.sgt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.sgt-dot-green  { background: var(--sgt-green); }
.sgt-dot-red    { background: var(--sgt-red); }
.sgt-dot-purple { background: var(--sgt-purple); }
.sgt-dot-blue   { background: var(--sgt-technology); }
.sgt-dot-grey   { background: var(--sgt-grey); }


/* ═══════════════════════════════════════════════════════════
   17. Buttons / CTA
   ═══════════════════════════════════════════════════════════ */

.sgt-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--sgt-black);
  color: var(--sgt-white);
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sgt-btn:hover {
  background: #333;
  color: var(--sgt-white);
}

.sgt-btn.btn-outline {
  background: transparent;
  color: var(--sgt-black);
  border: 2px solid var(--sgt-black);
}

.sgt-btn.btn-outline:hover {
  background: var(--sgt-black);
  color: var(--sgt-white);
}

.sgt-btn.btn-strategy {
  background: var(--sgt-strategy);
  color: var(--sgt-black);
}

.sgt-btn.btn-creativity {
  background: var(--sgt-creativity);
  color: var(--sgt-black);
}

.sgt-btn.btn-purple {
  background: var(--sgt-purple);
  color: var(--sgt-white);
}


/* ═══════════════════════════════════════════════════════════
   18. Divider
   ═══════════════════════════════════════════════════════════ */

.sgt-divider {
  width: 64px;
  height: 2px;
  background: var(--sgt-border);
  margin: var(--sp-6) 0;
}

.sgt-divider.center {
  margin-left: auto;
  margin-right: auto;
}

.sgt-divider.wide {
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════
   Dark Slide Utilities
   (applied via data-background-color on Reveal.js sections)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   19. Glass Card (Glassmorphism)
   ═══════════════════════════════════════════════════════════ */

.sgt-glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: left;
}

.sgt-glass h4 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 500;
  margin-bottom: 0.3em;
  color: var(--sgt-white);
}

.sgt-glass p {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.55;
}

.sgt-glass .card-icon {
  font-size: 1.4em;
  margin-bottom: 0.3em;
}

/* Glass accent border variants */
.sgt-glass.accent-purple {
  border-color: rgba(117, 76, 255, 0.3);
  background: rgba(117, 76, 255, 0.08);
}

.sgt-glass.accent-strategy {
  border-color: rgba(217, 229, 48, 0.3);
}

.sgt-glass.accent-technology {
  border-color: rgba(98, 156, 250, 0.3);
}


/* ═══════════════════════════════════════════════════════════
   20. Bento Grid (Apple-style feature grid)
   ═══════════════════════════════════════════════════════════ */

.bento-grid {
  display: grid;
  gap: var(--sp-4);
  text-align: left;
}

.bento-grid.cols-2x2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.bento-grid.cols-3x2 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

/* Span a cell across 2 columns */
.bento-grid .span-2 {
  grid-column: span 2;
}

/* Span a cell across 2 rows */
.bento-grid .span-row-2 {
  grid-row: span 2;
}

.bento-grid .sgt-glass {
  padding: var(--sp-8);
}

.bento-grid .sgt-glass h4 {
  font-size: var(--text-lg);
}

/* Bento stat cell — large number in glass card */
.bento-grid .bento-stat {
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sgt-white);
  margin-bottom: var(--sp-2);
}

.bento-grid .bento-stat-label {
  font-size: var(--text-md);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════════
   21. Impact Statement Slide
   ═══════════════════════════════════════════════════════════ */

.impact-slide h1 {
  font-size: var(--text-7xl);
  line-height: var(--lh-7xl);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--sgt-white);
}

.impact-slide h1 em {
  font-style: normal;
  color: var(--sgt-purple);
}

.impact-slide p {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-lg);
  margin-top: var(--sp-8);
}


/* ═══════════════════════════════════════════════════════════
   22. Stat Slide (One Big Number)
   ═══════════════════════════════════════════════════════════ */

.stat-slide {
  text-align: center;
  color: var(--sgt-white);
}

.stat-slide .stat-number {
  font-size: var(--text-8xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sgt-white);
}

.stat-slide .stat-number em {
  font-style: normal;
  color: var(--sgt-purple);
}

.stat-slide .stat-label {
  font-size: var(--text-xl);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--sp-4);
}

.stat-slide .stat-context {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--sp-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════
   23. Gradient Utilities
   ═══════════════════════════════════════════════════════════ */

.gradient-purple {
  background: var(--sgt-gradient-purple) !important;
}

.gradient-dark {
  background: var(--sgt-gradient-dark) !important;
}

/* Department Gradient Variants (v3) */
.gradient-strategy {
  background: linear-gradient(135deg, #1e1e1e 0%, #2a2e1a 35%, #4a5a18 65%, #d9e530 100%) !important;
}

.gradient-creativity {
  background: linear-gradient(135deg, #1e1e1e 0%, #2e2a1a 35%, #5a4a18 65%, #ffd129 100%) !important;
}

.gradient-technology {
  background: linear-gradient(135deg, #1e1e1e 0%, #1a2230 35%, #1e3a5a 65%, #629cfa 100%) !important;
}

/* Subtle purple glow behind content */
.glow::after {
  content: '';
  position: absolute;
  top: 30%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(117, 76, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════
   25. Pull Quote (Editorial)
   ═══════════════════════════════════════════════════════════ */

.sgt-pullquote {
  position: relative;
  padding: 0 0 0 40px;
  margin: 1.2em 0;
  text-align: left;
}

.sgt-pullquote::before {
  content: '\201C';
  position: absolute;
  left: -8px;
  top: -20px;
  font-size: 120px;
  line-height: 1;
  font-weight: 300;
  color: var(--sgt-purple);
  opacity: 0.35;
  pointer-events: none;
}

.sgt-pullquote p {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

.sgt-pullquote .pullquote-author {
  font-size: var(--text-md);
  font-weight: 500;
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--sp-4);
}

/* Light slide variant */
[data-background-color="#ffffff"] .sgt-pullquote p,
[data-background-color="#faf8f5"] .sgt-pullquote p {
  color: var(--sgt-black);
}

[data-background-color="#ffffff"] .sgt-pullquote .pullquote-author,
[data-background-color="#faf8f5"] .sgt-pullquote .pullquote-author {
  color: var(--sgt-grey);
}


/* ═══════════════════════════════════════════════════════════
   26. Editorial Subtitle (thin weight)
   ═══════════════════════════════════════════════════════════ */

.reveal .subtitle-thin {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

[data-background-color="#ffffff"] .subtitle-thin,
[data-background-color="#faf8f5"] .subtitle-thin {
  color: var(--sgt-grey);
}


/* ═══════════════════════════════════════════════════════════
   27. SGT Brand Divider (gradient accent line)
   ═══════════════════════════════════════════════════════════ */

.sgt-divider-brand {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--sgt-purple), var(--sgt-technology));
  margin: var(--sp-6) 0;
  border-radius: 2px;
}

.sgt-divider-brand.center {
  margin-left: auto;
  margin-right: auto;
}

.sgt-divider-brand.wide {
  width: 100%;
}

.sgt-divider-brand.tri {
  background: linear-gradient(90deg, var(--sgt-strategy), var(--sgt-creativity), var(--sgt-purple));
}


/* ═══════════════════════════════════════════════════════════
   28. Donut Chart (CSS-only, animated)
   ═══════════════════════════════════════════════════════════ */

.sgt-donut {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sgt-donut svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sgt-donut circle {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.sgt-donut .donut-track {
  stroke: rgba(255, 255, 255, 0.08);
}

.sgt-donut .donut-fill {
  stroke-dasharray: 0, 565;
  transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sgt-donut .donut-center {
  position: relative;
  z-index: 1;
  text-align: center;
}

.sgt-donut .donut-value {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--sgt-white);
  line-height: 1;
}

.sgt-donut .donut-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════
   29. Bar Chart (CSS-only, animated)
   ═══════════════════════════════════════════════════════════ */

.sgt-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  height: 240px;
  padding-top: var(--sp-4);
}

.sgt-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.sgt-bar-fill {
  width: 100%;
  max-width: 60px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--sgt-purple);
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
  height: 0;
}

.sgt-bar-fill.bar-strategy { background: var(--sgt-strategy); }
.sgt-bar-fill.bar-creativity { background: var(--sgt-creativity); }
.sgt-bar-fill.bar-technology { background: var(--sgt-technology); }
.sgt-bar-fill.bar-purple { background: var(--sgt-purple); }

.sgt-bar-value {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--sgt-white);
  margin-bottom: var(--sp-2);
  opacity: 0;
  transition: opacity 0.4s ease 0.8s;
}

.sgt-bar-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--sp-3);
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════
   24. Pill Tags (rounded, for dark slides)
   ═══════════════════════════════════════════════════════════ */

.sgt-pill {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sgt-pill-purple {
  background: rgba(117, 76, 255, 0.15);
  color: var(--sgt-purple-light);
}

.sgt-pill-green {
  background: rgba(29, 134, 45, 0.15);
  color: var(--sgt-green);
}

.sgt-pill-blue {
  background: rgba(98, 156, 250, 0.15);
  color: var(--sgt-technology);
}

.sgt-pill-strategy {
  background: rgba(217, 229, 48, 0.15);
  color: var(--sgt-strategy);
}


/* ═══════════════════════════════════════════════════════════
   Light Slide Overrides (use with data-background-color="#ffffff")
   ═══════════════════════════════════════════════════════════ */

[data-background-color="#ffffff"] h1,
[data-background-color="#ffffff"] h2,
[data-background-color="#ffffff"] h3,
[data-background-color="#ffffff"] h4,
[data-background-color="#faf8f5"] h1,
[data-background-color="#faf8f5"] h2,
[data-background-color="#faf8f5"] h3,
[data-background-color="#faf8f5"] h4 {
  color: var(--sgt-black);
}

[data-background-color="#ffffff"] p,
[data-background-color="#ffffff"] li,
[data-background-color="#faf8f5"] p,
[data-background-color="#faf8f5"] li {
  color: var(--sgt-grey);
}

[data-background-color="#ffffff"] strong,
[data-background-color="#faf8f5"] strong {
  color: var(--sgt-black);
}

[data-background-color="#ffffff"] .sgt-divider,
[data-background-color="#faf8f5"] .sgt-divider {
  background: var(--sgt-border);
}

[data-background-color="#ffffff"] .sgt-glass,
[data-background-color="#faf8f5"] .sgt-glass {
  background: var(--sgt-grey-light);
  border-color: var(--sgt-border);
}

[data-background-color="#ffffff"] .sgt-glass h4,
[data-background-color="#faf8f5"] .sgt-glass h4 {
  color: var(--sgt-black);
}

[data-background-color="#ffffff"] .sgt-glass p,
[data-background-color="#faf8f5"] .sgt-glass p {
  color: var(--sgt-grey);
}