/* Layout safety: prevent horizontal scrolling and overflow glitches */
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.slide-container {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  padding: 4px 12px 24px; /* very minimal top padding */
  box-sizing: border-box;
}

.slide-content {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 0;
}/* Ensure images and placeholders do not exceed viewport */
img, .chart-placeholder, .vision-banner, .callout, .team-grid, .stat-grid, .loop-diagram, .grid {
    max-width: 100%;
}

/* Defensive grid min sizing to avoid overflow on small screens */
.grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Reusable compact 2x2 tile layout */
.tiles-2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 860px) { .tiles-2x2 { grid-template-columns: 1fr; } }
.tile { position: relative; }
.tile .badge { position: absolute; top: -10px; left: -10px; background: var(--accent); color: #fff; font-size: .65rem; padding: .3rem .5rem; border-radius: 8px; font-weight: 600; letter-spacing: .5px; }

/* Headings spacing: keep top lines visible */
.slide-content h1 { margin: 0 0 .5rem 0; line-height: 1.15; padding-top: 2px; }
.slide-content h2 { margin: 0 0 1rem 0; line-height: 1.25; }

/* Background logo as watermark, behind content */
.bg-logo {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: .03;
    max-width: 30vw;
    height: auto;
    z-index: 0;
    pointer-events: none;
}
/*
This CSS file is designed to provide a professional, full-screen, and aesthetically pleasing experience for the investor slide deck. It replaces the previous viewport-limited styling with a flexible, modern design system.

Key features:
- **Full-Screen Layout**: Slides now utilize the entire viewport, creating a more immersive presentation.
- **Modern Aesthetics**: A dark theme with a subtle gradient, clean typography, and accent colors provides a professional look suitable for a tech company.
- **Responsive Design**: Flexbox and grid layouts ensure content adapts gracefully to different screen sizes.
- **Improved Readability**: Clear typography choices and spacing make the content easy to read.
- **Consistent Branding**: A background logo provides consistent branding across all slides.
- **Component-Based Styling**: Styles for common elements like cards, grids, and headers are defined for easy reuse.
*/

:root {
    --accent-color: #4A90E2; /* Syntropy Blue */
    --accent-color-alt: #6DCCFF;
    --danger-color: #FF3D5A;
    --success-color: #35D587;
    --warning-color: #FFB347;
    --text-color: #eaeef6;
    --text-dim: #a7b3c8;
    --background-start: #06070b;
    --background-mid: #0f141d;
    --background-end: #1b2331;
    --gradient-accent: linear-gradient(135deg,#4A90E2 0%,#6DCCFF 50%,#4A90E2 100%);
    --gradient-danger: linear-gradient(135deg,#FF3D5A,#FF7A5F);
    --gradient-success: linear-gradient(135deg,#1fae66,#35D587);
    --gradient-overlay: radial-gradient(800px 500px at 55% -5%, rgba(74,144,226,.18), transparent 70%);
    --card-background: rgba(255, 255, 255, 0.05);
    --card-background-strong: rgba(255,255,255,0.08);
    --card-border: rgba(74, 144, 226, 0.25);
    --card-border-strong: rgba(255,255,255,0.18);
    --divider: rgba(255,255,255,0.08);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --shadow-elevate: 0 2px 4px -1px rgba(0,0,0,0.4), 0 8px 24px -4px rgba(0,0,0,0.55);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars on the body itself */
}

body {
    font-family: var(--font-sans);
    background:
        var(--gradient-overlay),
        linear-gradient(160deg,var(--background-start) 0%, var(--background-mid) 40%, var(--background-end) 100%);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.25px;
    -webkit-font-smoothing: antialiased;
}

.slide-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4vh 6vw;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    overflow-y: auto; /* Allow scrolling within the slide if content overflows */
}

.bg-logo {
    position: absolute;
    top: 4vh;
    right: 6vw;
    width: 100px;
    height: auto;
    opacity: 0.2;
    pointer-events: none;
}

.slide-content {
    width: 100%;
    max-width: 1200px; /* Increased max-width for better use of space */
}

h1 {
    font-size: clamp(2.6rem, 5.4vw, 4rem);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 1.1rem;
}

h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 400;
    color: var(--text-dim);
    margin: 0 0 1.9rem;
    line-height: 1.45;
    max-width: 90ch;
}

p, .lede {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    opacity: .9;
    line-height: 1.7;
    max-width: 80ch; /* Improve readability */
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 2rem;
    width: 100%;
}

.card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1.4rem 1.5rem 1.5rem;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.card:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,0.07), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.card:hover {
    background: var(--card-background-strong);
    border-color: var(--card-border-strong);
    transform: translateY(-2px);
}
.card:hover:before { opacity: 1; }

.card strong {
    color: var(--accent-color);
    font-weight: 500;
    display: block;
    margin-bottom: 1rem;
}

ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.65;
    list-style: none;
}
ul li { position: relative; padding-left: 12px; }
ul li:before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 3px rgba(74,144,226,0.25); }

li {
    margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .slide-container {
        padding: 5vh 5vw;
        text-align: left;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar styling for better UX */
.slide-container::-webkit-scrollbar {
    width: 8px;
}

.slide-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.slide-container::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

/* STAT BLOCKS */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 28px; margin-top: 10px; }
.stat { background: var(--card-background); border:1px solid var(--card-border); padding:18px 18px 20px; border-radius:18px; position:relative; overflow:hidden; }
.stat h3 { margin:0 0 6px; font-size: clamp(1.6rem,3vw,2.2rem); font-weight:600; background: var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px; }
.stat p { margin:0; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); font-weight:500; }
.stat .delta { position:absolute; top:12px; right:14px; font-size:.7rem; padding:4px 8px; border-radius:40px; background: var(--card-background-strong); color: var(--success-color); letter-spacing:.5px; font-weight:600; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px 7px; background: var(--card-background); border:1px solid var(--card-border); border-radius:40px; font-size:.7rem; text-transform:uppercase; letter-spacing:.9px; font-weight:600; color: var(--text-dim); }
.badge-accent { background: var(--gradient-accent); color:#08101a; border:none; }
.badge-danger { background: var(--gradient-danger); color:#fff; border:none; }
.badge-success { background: var(--gradient-success); color:#061b11; border:none; }

/* SYSTEM LOOP VISUAL */
.loop-diagram { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:20px; }
.loop-node { position:relative; padding:18px 16px 20px; border:1px solid var(--card-border); background: var(--card-background); border-radius:14px; font-size:.9rem; line-height:1.4; }
.loop-node:after { content:''; position:absolute; top:50%; right:-10px; width:18px; height:18px; background: var(--gradient-accent); filter: blur(6px) brightness(1.3); border-radius:50%; opacity:.6; }
.loop-node:last-child:after { display:none; }
@media (max-width:800px){ .loop-node:after { display:none; } }

/* VISION BANNER */
.vision-banner { margin: 0 0 1.8rem; padding: 18px 22px 20px; border:1px solid var(--card-border); background: linear-gradient(145deg, rgba(74,144,226,0.15), rgba(74,144,226,0.04)); border-radius: 18px; backdrop-filter: blur(10px); box-shadow: var(--shadow-elevate); }
.vision-banner strong { display:block; font-size:.7rem; letter-spacing:1.6px; text-transform:uppercase; color: var(--accent-color); margin-bottom:6px; }
.vision-banner p { margin:0; font-size: clamp(.95rem,1.3vw,1.05rem); line-height:1.55; }

/* CALLOUT */
.callout { margin-top:2.2rem; padding:22px 24px 24px; border:1px solid var(--card-border-strong); background: linear-gradient(130deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius:20px; position:relative; overflow:hidden; }
.callout:before { content:''; position:absolute; inset:0; background: radial-gradient(600px 300px at 80% 20%, rgba(74,144,226,0.18), transparent 70%); opacity:.8; pointer-events:none; }
.callout h3 { margin:0 0 10px; font-size: clamp(1.4rem,3vw,1.9rem); font-weight:600; letter-spacing:.5px; }
.callout p { margin:0; font-size: .95rem; line-height:1.55; color: var(--text-dim); }

/* CTA PANEL */
.cta-panel { margin-top:2.4rem; padding: 26px 30px 30px; background: linear-gradient(145deg,#132436,#0b121c); border:1px solid var(--card-border); border-radius:22px; position:relative; overflow:hidden; }
.cta-panel:before { content:''; position:absolute; inset:0; background: linear-gradient(120deg, rgba(74,144,226,0.28), rgba(74,144,226,0.05)); opacity:.55; }
.cta-panel h2 { margin:0 0 10px; background: var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; font-size: clamp(1.8rem,3.3vw,2.4rem); font-weight:600; }
.cta-panel p { margin:0; font-size: .95rem; line-height:1.55; }

/* TEAM GRID */
.team-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin-top: 10px; }
.member { background: var(--card-background); border:1px solid var(--card-border); padding:18px 18px 20px; border-radius:18px; position:relative; overflow:hidden; }
.member h4 { margin:0 0 4px; font-size:1rem; font-weight:600; letter-spacing:.4px; }
.member p { margin:0; font-size:.75rem; line-height:1.4; color: var(--text-dim); letter-spacing:.3px; }

/* FINANCIAL CHART PLACEHOLDER */
.chart-placeholder { margin-top: 22px; border:2px dashed var(--card-border); border-radius:18px; padding:40px 20px; text-align:center; font-size:.85rem; letter-spacing:.8px; text-transform:uppercase; color: var(--text-dim); }

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform:none; } }