/* style.css — shared by both pages */
:root{
  --bg-dark: #0f172a; /* Dark background */
  --card-light: #ffffff;
  --accent: #007bff; /* Brighter, professional blue */
  --accent-hover: #0056b3;
  --muted: #94a3b8; /* Light gray for subtle text */
  --text-light: #f8fafc; /* Near-white text */
  --text-heading: #ffffff;
  --radius: 18px;
  --max-width: 1200px;
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-sans);-webkit-font-smoothing:antialiased; color: var(--text-light);}
a{color:inherit;text-decoration:none}

/* ---------- Home page styles (hero minimal) ---------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 30px 20px;
  /* Premium Dark Gradient */
  background: linear-gradient(135deg, var(--bg-dark) 0%, #1e293b 100%);
  text-align:center;
}

.hero-content{
  max-width: 800px; /* Wider content area for a professional look */
  padding: 40px;
  background: rgba(255, 255, 255, 0.05); /* Subtle transparency */
  border-radius: var(--radius);
  /* Elegant box shadow */
  box-shadow: 0 25px 50px rgba(0,0,0,0.5); 
  backdrop-filter: blur(5px); /* Glassmorphism effect */
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  margin-bottom: 24px;
}

.logo{
  width: 72px; height: 72px; border-radius: 50%; /* Circular logo for premium feel */
  background: linear-gradient(45deg, var(--accent), #6aa1ff);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size: 24px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1), 0 10px 20px rgba(0,0,0,0.3);
  flex-shrink:0;
}

.text h1{ 
  margin:0; font-size: 2.2rem; 
  letter-spacing: 0.5px;
  color: var(--text-heading);
}
.sub{ 
  margin: 6px 0 0 0; color: var(--muted); 
  font-size: 1.1rem; 
  font-weight: 300;
}

/* lead */
.lead{ 
  color: var(--muted); 
  margin: 24px auto 32px auto; 
  font-size: 1.25rem;
  max-width: 600px;
  line-height: 1.6;
}

/* CTA */
.cta{
  display:inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--accent);
  color:#fff;
  border-radius: 8px;
  font-weight:700;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
  transition: all .2s ease;
}
.cta:active{ transform: translateY(2px); box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4); }
.cta:hover{ 
  background: var(--accent-hover); 
  box-shadow: 0 12px 30px rgba(0, 123, 255, 0.6); 
}
.cta-icon{
  width: 20px;
  height: 20px;
}

/* small footer text on card */
.small{ 
  margin-top: 30px; 
  color: var(--muted); 
  font-size: 0.9rem;
  opacity: 0.7;
}

/* ---------- Presentation page styles (No changes here, keeping the dark fullscreen look) ---------- */
.presentation-body{ margin:0; height:100vh; background:#000; overflow:hidden; color:#fff; }

/* back link */
.presentation-body > div:first-child {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10001;
}
.presentation-body > div:first-child a {
  color: #ffffff;
  background: rgba(0,0,0,0.4);
  padding:8px 14px;
  border-radius:8px;
  font-size: 1rem;
}

/* Fullscreen embed wrapper */
.fullscreen-embed{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:9999;
}
.fullscreen-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Responsive tweaks for mobile devices */
@media (max-width: 768px){
  .hero-content{ 
    padding: 30px 20px; 
    max-width: 100%; /* Use full width on smaller screens */
  }
  .logo{ width: 60px; height: 60px; font-size: 20px; }
  .text h1{ font-size: 1.8rem; }
  .sub{ font-size: 1rem; }
  .lead{ font-size: 1.1rem; margin: 20px auto 28px auto; }
  .cta{ padding: 14px 30px; font-size: 1rem; }
}

@media (max-width: 480px){
  .text h1{ font-size: 1.5rem; }
  .sub{ font-size: 0.9rem; }
}