/*
 * Skayl Brand Theme for Reveal.js
 * Sharp lines, angular forms, no curves, no clutter.
 */

:root {
  --sk-dark: #0A1011;
  --sk-light: #FAFAFA;
  --sk-accent: #3FCCE2;
  --sk-accent-dim: rgba(63, 204, 226, 0.15);
  --sk-mid: #1A2A2E;
  --sk-mid-light: #2A3A3E;
  --sk-text-muted: #8A9A9E;
  --sk-font-heading: 'N27', 'Inter', 'Helvetica Neue', sans-serif;
  --sk-font-body: 'Aileron', 'Inter', 'Helvetica Neue', sans-serif;
  --sk-font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --sk-pad: 80px;
}

@font-face { font-family: 'N27'; src: url('../fonts/N27-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* N27 Bold: add N27-Bold.woff2 to fonts/ if purchased */
@font-face { font-family: 'Aileron'; src: url('../fonts/Aileron-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('../fonts/Aileron-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

.reveal-viewport { background: var(--sk-dark); }
.reveal { font-family: var(--sk-font-body); font-size: 28px; font-weight: 300; color: var(--sk-light); }
.reveal .slides { text-align: left; }
.reveal .slides section { padding: var(--sk-pad); box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: center; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: var(--sk-font-heading); font-weight: 400; color: var(--sk-light); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; margin-bottom: 0.6em; }
.reveal h1 { font-size: 3.6em; }
.reveal h2 { font-size: 2.4em; }
.reveal h3 { font-size: 1.6em; }
.reveal h4 { font-size: 1.2em; color: var(--sk-accent); }
.reveal p { line-height: 1.6; margin-bottom: 1em; max-width: 75ch; }
.reveal .mono { font-family: var(--sk-font-mono); font-size: 0.85em; color: var(--sk-accent); }
.reveal .muted { color: var(--sk-text-muted); }
.reveal strong { color: var(--sk-accent); font-weight: 400; }

.reveal .accent-line { width: 120px; height: 3px; background: var(--sk-accent); margin-bottom: 2em; }

.reveal ul { list-style: none; padding-left: 0; }
.reveal ul li { position: relative; padding-left: 1.8em; margin-bottom: 0.8em; line-height: 1.5; }
.reveal ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--sk-accent); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.reveal ol { list-style: none; padding-left: 0; counter-reset: sk-counter; }
.reveal ol li { position: relative; padding-left: 2.4em; margin-bottom: 0.8em; counter-increment: sk-counter; }
.reveal ol li::before { content: counter(sk-counter, decimal-leading-zero); position: absolute; left: 0; font-family: var(--sk-font-mono); font-size: 0.85em; color: var(--sk-accent); }

.slide-title { justify-content: flex-end !important; padding-bottom: 120px !important; }
.slide-title h1 { font-size: 4.2em; margin-bottom: 0.3em; }
.slide-title .subtitle { font-family: var(--sk-font-mono); font-size: 1.1em; color: var(--sk-accent); letter-spacing: 0.08em; text-transform: uppercase; }
.slide-title .client-name { font-family: var(--sk-font-heading); font-size: 1.4em; color: var(--sk-text-muted); margin-top: 1em; }

.slide-section { justify-content: center !important; }
.slide-section h2 { font-size: 3.2em; }
.slide-section .section-number { font-family: var(--sk-font-mono); font-size: 6em; color: var(--sk-accent-dim); position: absolute; right: var(--sk-pad); bottom: var(--sk-pad); line-height: 1; }

.slide-statement { justify-content: center !important; align-items: center; text-align: center; }
.slide-statement .stat { font-family: var(--sk-font-heading); font-size: 7em; color: var(--sk-accent); line-height: 1; margin-bottom: 0.2em; }
.slide-statement .stat-label { font-size: 1.4em; color: var(--sk-text-muted); }

.slide-two-col { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 0 80px; align-items: start; }
.slide-two-col .col-header { grid-column: 1 / -1; margin-bottom: 1em; }
.slide-two-col .col--bordered { border-left: 2px solid var(--sk-accent); padding-left: 40px; }

.slide-three-col { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 0 60px; align-items: start; }
.slide-three-col .col-header { grid-column: 1 / -1; margin-bottom: 1.5em; }
.slide-three-col .card { background: var(--sk-mid); padding: 40px; border-left: 3px solid var(--sk-accent); }
.slide-three-col .card h4 { margin-bottom: 0.4em; }

.slide-process { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: auto 1fr; gap: 0 40px; align-items: start; }
.slide-process .col-header { grid-column: 1 / -1; margin-bottom: 1.5em; }
.slide-process .step { position: relative; padding-top: 2em; }
.slide-process .step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sk-accent), transparent); }
.slide-process .step-number { font-family: var(--sk-font-mono); font-size: 0.9em; color: var(--sk-accent); margin-bottom: 0.5em; }

.slide-case-study { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: center; }
.slide-case-study .quote { font-size: 1.6em; line-height: 1.4; border-left: 3px solid var(--sk-accent); padding-left: 40px; }
.slide-case-study .attribution { font-family: var(--sk-font-mono); font-size: 0.8em; color: var(--sk-accent); margin-top: 1.5em; padding-left: 40px; }
.slide-case-study .results { display: flex; flex-direction: column; gap: 30px; }
.slide-case-study .result-item { border-left: 2px solid var(--sk-mid-light); padding-left: 30px; }
.slide-case-study .result-item .stat { font-family: var(--sk-font-heading); font-size: 2.4em; color: var(--sk-accent); line-height: 1; }
.slide-case-study .result-item .stat-label { font-size: 0.9em; color: var(--sk-text-muted); }

.slide-pricing { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 0 40px; align-items: start; }
.slide-pricing .col-header { grid-column: 1 / -1; margin-bottom: 1.5em; }
.slide-pricing .package { background: var(--sk-mid); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.slide-pricing .package--featured { border: 2px solid var(--sk-accent); background: rgba(63, 204, 226, 0.05); }
.slide-pricing .package .price { font-family: var(--sk-font-heading); font-size: 2.4em; color: var(--sk-accent); }
.slide-pricing .package .price-period { font-family: var(--sk-font-mono); font-size: 0.5em; color: var(--sk-text-muted); }

.slide-team { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: auto 1fr; gap: 40px; align-items: start; }
.slide-team .col-header { grid-column: 1 / -1; }
.slide-team .member { text-align: center; }
.slide-team .member-photo { width: 160px; height: 160px; background: var(--sk-mid); margin: 0 auto 20px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow: hidden; }
.slide-team .member-photo img { width: 100%; height: 100%; object-fit: cover; }
.slide-team .member-name { font-family: var(--sk-font-heading); font-size: 1.1em; margin-bottom: 0.2em; }
.slide-team .member-role { font-family: var(--sk-font-mono); font-size: 0.8em; color: var(--sk-accent); }

.slide-cta { justify-content: center !important; align-items: center; text-align: center; }
.slide-cta h2 { font-size: 3em; margin-bottom: 0.5em; }
.slide-cta .cta-action { display: inline-block; font-family: var(--sk-font-mono); font-size: 1.1em; color: var(--sk-dark); background: var(--sk-accent); padding: 16px 48px; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 1.5em; text-decoration: none; }
.slide-cta .contact-info { font-family: var(--sk-font-mono); font-size: 0.9em; color: var(--sk-text-muted); margin-top: 2em; }

.bg-mid { background: var(--sk-mid) !important; }
.bg-accent { background: var(--sk-accent) !important; color: var(--sk-dark) !important; }
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent p, .bg-accent li { color: var(--sk-dark) !important; }
.bg-accent li::before { background: var(--sk-dark) !important; }
.text-accent { color: var(--sk-accent); }
.text-center { text-align: center; }

.slide-pattern::after { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; opacity: 0.03; background-image: repeating-linear-gradient(-45deg, var(--sk-accent), var(--sk-accent) 1px, transparent 1px, transparent 40px); pointer-events: none; }

.reveal .slide-number { font-family: var(--sk-font-mono); font-size: 14px; color: var(--sk-text-muted); background: none; }
.reveal .progress { height: 3px; color: var(--sk-accent); }
.slide-logo { position: absolute; bottom: 40px; left: var(--sk-pad); height: 24px; opacity: 0.5; }

@media print {
  .reveal-viewport { background: var(--sk-dark) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .reveal .slides section { page-break-after: always; page-break-inside: avoid; }
}