:root {
  /* Dark Theme (Default) */
  --bg-color: #0a0a0a;
  --text-color: #ffffff;
  --accent-color: #64ffda;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --card-text: #e0e0e0;
  --button-bg: #ffffff;
  --button-text: #000000;
  --nav-bg: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
  --bg-color: #f0f2f5;
  --text-color: #1a1a1a;
  --accent-color: #007bff;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --card-text: #333333;
  --button-bg: #1a1a1a;
  --button-text: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden; /* Prevent horizontal scroll */
  transition: background-color 0.5s ease, color 0.5s ease;
}

body.no-scroll {
  overflow: hidden;
}

#globe-viz {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Globe at base level */
}

/* Canvas generated by globe.gl needs to blend */
#globe-viz canvas {
  outline: none;
  opacity: 0; /* Hidden initially, fades in */
  transition: opacity 1.5s ease;
}

#globe-viz.loaded canvas {
  opacity: 1; /* Fade in when loaded */
}

[data-theme="dark"] #globe-viz canvas {
  opacity: 1;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000; /* Ensure Top level */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  pointer-events: none; /* Let clicks pass through navbar container */
}

.navbar > * {
  pointer-events: auto; /* Re-enable clicks for logo and button */
  display: flex;
  flex-direction: column;
}

.logo-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.logo {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e0e0e0 50%,
    var(--accent-color) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.logo-slug {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--accent-color);
  opacity: 0.9;
  margin-top: 6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-slug::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--accent-color);
  opacity: 0.5;
}

#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  transition: transform 0.3s ease;
  padding: 0.5rem;
  border-radius: 50%;
}

#theme-toggle:hover {
  background: var(--glass-bg);
  transform: rotate(15deg);
}

.sun-icon {
  display: none;
}

[data-theme="light"] .sun-icon {
  display: none;
}
[data-theme="light"] .moon-icon {
  display: block;
}

/* Default is dark, so show sun to switch to light? No, usually show current state or target state. 
   Let's show the icon of the mode we are switching TO.
   If Dark -> Show Sun (to switch to Light).
   If Light -> Show Moon (to switch to Dark).
*/
[data-theme="dark"] .sun-icon {
  display: block;
}
[data-theme="dark"] .moon-icon {
  display: none;
}
[data-theme="light"] .sun-icon {
  display: none;
}
[data-theme="light"] .moon-icon {
  display: block;
}

/* Nav Links */
.nav-links {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent-color);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--accent-color);
  width: 100%;
}

.nav-links a.active {
  color: var(--accent-color);
}

.nav-links a.active::after {
  width: 100%;
}

/* Burger Menu */
.burger-menu {
  display: none;
  cursor: pointer;
  z-index: 1001;
}

.burger-icon {
  font-size: 1.5rem;
  color: var(--text-color);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .burger-menu {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 70%;
    max-width: 300px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: right 0.4s ease;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }

  .nav-links.nav-active {
    right: 0;
  }

  .nav-links li {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s ease;
  }

  .nav-links.nav-active li {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Main Content */
.content {
  position: fixed;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-left: 10%;
  z-index: 5; /* Above globe, below navbar */
  pointer-events: none; /* Let clicks pass through layout */
}

.glass-card {
  pointer-events: auto; /* Re-enable clicks for the card */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 3rem;
  max-width: 500px;
  box-shadow: var(--glass-shadow);
  transform: translateY(20px);
  opacity: 0;
  animation: floatUp 1s ease-out forwards 0.5s;
}

@keyframes floatUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.card-title {
  font-size: 3.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.1;
  background: linear-gradient(
    135deg,
    var(--text-color) 0%,
    var(--accent-color) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-subtitle {
  font-size: 1.1rem;
  color: var(--card-text);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.cta-button {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  background-color: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cta-button i {
  font-size: 1.1em;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Loader Styles */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  z-index: 2; /* Content is 5, Navbar is 1000. Globe is 1. This sits between Globe and Content. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease, visibility 0.5s;
}

#loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--accent-color);
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-family: "Outfit", sans-serif;
  letter-spacing: 2px;
  font-size: 0.9rem;
  opacity: 0.7;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.btn-phone {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
}

.btn-bip {
  background: linear-gradient(135deg, #00a4e4, #0088cc);
  color: white;
}

.contact-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .content {
    padding: 0;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 3rem;
  }

  .glass-card {
    margin: 0 1.5rem;
    padding: 2rem;
    text-align: center;
  }

  .card-title {
    font-size: 2.5rem;
  }
}

/* Simple Page Layout (No Globe) */
.page-container {
  max-width: 900px;
  margin: 100px auto 4rem auto; /* Top margin guarantees clearance from fixed navbar */
  padding: 2rem;
  background: rgba(
    0,
    0,
    0,
    0.4
  ); /* Slight background to improve readability on dark theme */
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow-y: auto;
  pointer-events: auto; /* Enable interaction */
  z-index: 20; /* Above everything */
  position: relative;
}

.page-container h1 {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.page-container h2 {
  font-size: 1.5rem;
  color: var(--text-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.5rem;
}

.page-container p {
  line-height: 1.8;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  color: #d1d5db;
}

.page-container strong {
  color: #fff;
  font-weight: 600;
}

.signature {
  margin-top: 3rem;
  font-style: italic;
  text-align: right;
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
}

/* Contact Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  transition: transform 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.06);
}

/* Modern Layout Styles */

/* Page Hero */
.page-hero {
  position: relative;
  height: 50vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-top: 0;
  padding-top: 80px; /* Offset for navbar */
}

.page-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3),
    var(--bg-color)
  );
  z-index: 2;
}

.page-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.6);
}

.page-hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  padding: 2rem;
}

.page-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fff 0%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Modern Content Container */
.modern-container {
  max-width: 1200px;
  margin: -50px auto 8rem auto; /* Overlap hero, increased bottom space */
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}

.product-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-color),
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.product-card:hover::before {
  opacity: 1;
}

.product-icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--accent-color);
}

.product-card h2 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
}

.product-card p {
  color: #aaa;
  line-height: 1.6;
  flex-grow: 1; /* Pushes button (if needed in future) down */
}

/* About Section Styles */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 4rem;
}

.about-text {
  background: rgba(255, 255, 255, 0.02);
  padding: 2.5rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #d1d5db;
}

.about-signature {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: right;
}

.about-signature strong {
  color: var(--accent-color);
  font-size: 1.2rem;
  display: block;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .page-hero {
    height: 40vh;
  }
  .page-hero h1 {
    font-size: 2.5rem;
  }
  .about-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Floating Contact Buttons */
.floating-contact-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.floating-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease;
  font-size: 30px;
}

.floating-btn:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.float-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.float-bip {
  background: linear-gradient(135deg, #00a4ef 0%, #0078d7 100%);
}

@media (max-width: 768px) {
  .floating-contact-container {
    bottom: 20px;
    right: 20px;
    gap: 10px;
  }

  .floating-btn {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}