:root {
      --bg-main: radial-gradient(circle at top, #101633 0, #050814 45%, #02030a 100%);
      --card-bg: rgba(10, 16, 40, 0.8);
      --card-border: rgba(0, 238, 255, 0.35);
      --accent: #00e0ff;
      --accent-soft: rgba(0, 224, 255, 0.2);
      --accent-magenta: #ff3df5;
      --accent-green: #7bff9b;
      --text-main: #f6fbff;
      --text-muted: #9ca8c7;
      --danger: #ff4b81;
      --success: #4dffb5;
      --shadow-soft: 0 0 40px rgba(0, 224, 255, 0.08);
      --radius-lg: 24px;
      --radius-pill: 999px;
      --blur-glass: 18px;
      --transition-fast: 0.18s ease-out;
      --transition-med: 0.28s ease-out;
    }
    /* Quote Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
}

.modal-content {
    background: rgba(10,15,35,0.95);
    margin: 8% auto;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0px 0px 30px rgba(0,255,255,0.4);
    border: 1px solid rgba(0,255,255,0.3);
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.close {
    float: right;
    font-size: 28px;
    cursor: pointer;
    color: #fff;
}

.modal-content h2 {
    text-align: center;
    color: #00eaff;
    letter-spacing: 1px;
}

.quote-sub {
    text-align: center;
    color: #b6c2e1;
    margin-bottom: 15px;
}

#quoteForm input,
#quoteForm select,
#quoteForm textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,255,255,0.3);
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    color: purple;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(90deg,#00eaff,#0075ff);
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.submit-btn:hover {
    opacity: 0.8;
}

    

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

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-main);
      color: var(--text-main);
      min-height: 100vh;
      line-height: 1.5;
      overflow-x: hidden;
    }

    /* Global Layout */
    .page-shell {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.25rem 4rem;
      position: relative;
    }

    /* Futuristic orbiting dots in background */
    .orb {
      position: fixed;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 224, 255, 0.16), transparent 65%);
      filter: blur(2px);
      z-index: -1;
      pointer-events: none;
      animation: float 15s infinite alternate ease-in-out;
    }

    .orb.orb-1 { top: -80px; left: -40px; }
    .orb.orb-2 { bottom: -120px; right: -60px; animation-delay: 3s; }
    .orb.orb-3 { top: 40%; right: 20%; width: 260px; height: 260px; animation-delay: 7s; }

    @keyframes float {
      from { transform: translate3d(0, 0, 0); opacity: 0.9; }
      to   { transform: translate3d(30px, -40px, 0); opacity: 0.4; }
    }

    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(24px);
      background: linear-gradient(to bottom, rgba(2, 4, 15, 0.92), rgba(2, 4, 15, 0.4));
      border-bottom: 1px solid rgba(0, 224, 255, 0.22);
    }

    .nav {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0.75rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 1.0rem;
    }

    .logo-symbol {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: radial-gradient(circle at 20% 20%, #00e0ff, #051838 60%, #02030b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f6fbff;
      font-family: "Orbitron", monospace;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      box-shadow: 0 0 18px rgba(0, 224, 255, 0.55);
    }

    .logo-text-main {
      font-family: "Orbitron", system-ui;
      font-size: 1.1rem;
      letter-spacing: 0.30em;
      text-transform: uppercase;
    }

    .logo-sub {
      font-size: 0.68rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.20em;
      margin-top: 2px;
    }

    .nav-links {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      font-size: 1.1rem;
    }

    .nav-links a {
      color: var(--text-muted);
      text-decoration: none;
      position: relative;
      padding-bottom: 4px;
      transition: color var(--transition-fast);
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 0;
      background: linear-gradient(90deg, var(--accent), var(--accent-magenta));
      transition: width var(--transition-fast);
      border-radius: 999px;
    }

    .nav-links a:hover {
      color: var(--text-main);
    }

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

    .nav-cta {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .btn {
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: visible;  /* FIX clipping */
}

.logo-text-main,
.logo-sub {
    margin-left: 14px;   /* adjust x-axis movement */
}


/* ==== NAV DROPDOWN PANELS ==== */
.nav-item {
  position: relative;
}

.nav-link-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  padding-bottom: 4px;
  position: relative;
}

.nav-link-btn:hover {
  color: var(--text-main);
}

/* first level panel */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  min-width: 300px;
  padding: 0.7rem 0.9rem;
  border-radius: 16px;

  background: rgba(3, 9, 30, 0.98);
  border: 1px solid rgba(0, 224, 255, 0.4);
  box-shadow: 0 0 30px rgba(0, 224, 255, 0.4);

  z-index: 200;
}

/* show when .open is set on nav-item */
.nav-item.open > .dropdown-menu {
  display: block;
}

/* groups inside panel */
.dropdown-group {
  margin-bottom: 0.45rem;
}

.dropdown-parent {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 0.8rem;
  padding: 0.25rem 0.2rem;
  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-parent::after {
  content: "▸";
  font-size: 0.7rem;
  color: var(--accent);
}

/* second-level submenu */
.dropdown-sub {
  display: none;
  padding-left: 0.8rem;
  padding-bottom: 0.3rem;
}

.dropdown-sub a {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.15rem 0;
}

.dropdown-sub a:hover {
  color: var(--accent);
}

/* when group is open, show submenu and rotate arrow */
.dropdown-group.open .dropdown-sub {
  display: block;
}

.dropdown-group.open .dropdown-parent::after {
  content: "▾";
}


/* =========================
   MOBILE DROPDOWN PERFECT FIX
   ========================= */
@media (max-width: 900px) {

  /* Make dropdown panel viewport-based (fixes Products overflow 100%) */
  .dropdown-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;

    /* Change this top if needed depending on your header height */
    top: 110px !important;

    width: auto !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    transform: none !important;

    /* Premium mobile usability */
    max-height: calc(100vh - 150px) !important;
    overflow: auto !important;

    z-index: 9999 !important;
  }

  /* Keep submenu INSIDE (stacked) */
  .dropdown-sub {
    padding-left: 0.6rem !important;
  }

  /* Make buttons/links full width */
  .dropdown-menu a,
  .dropdown-menu button {
    width: 100%;
  }
}


/* Prevent scroll chaining to body when scrolling inside dropdown */
.dropdown-menu {
  max-height: min(70vh, 420px);   /* adjust as you like */
  overflow: auto;
  overscroll-behavior: contain;    /* IMPORTANT */
  -webkit-overflow-scrolling: touch;
}

/* When dropdown open: lock page scroll */
body.nav-lock {
  overflow: hidden;
  height: 100%;
  touch-action: none; /* helps mobile */
}

/* Keep page from shifting when scrollbar disappears (desktop) */
@media (min-width: 901px) {
  body.nav-lock {
    padding-right: var(--sbw, 0px);
  }
}


 


/* OUTLINE BUTTON (CALL NOW) – GIVE SAME BACKGROUND AS PRIMARY */
.btn-outline {
    background: radial-gradient(circle at 10% 0, #00f7ff, #0070ff 45%, #5b29ff);
    color: #02030a;
    border: none;
    
}

/* REMOVE BLUE BORDER INSIDE */
.btn-outline:hover {
    transform: translateY(-1px) scale(1.02);
}



/* PRIMARY BUTTON (GET A QUOTE) */
.btn-primary {
    background: radial-gradient(circle at 10% 0, #00f7ff, #0070ff 45%, #5b29ff);
    color: #02030a;
    border: none;
    box-shadow: 0 0 28px rgba(0, 224, 255, 0.9);
}

.btn-primary:hover {
    transform: translateY(-1px) scale(1.03);
}






    /* Hero */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
      gap: 2.5rem;
      padding: 3rem 0 3.5rem;
      align-items: center;
    }

    .eyebrow {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--accent-green);
      margin-bottom: 0.75rem;
    }

    .hero-title {
      font-family: "Orbitron", system-ui;
      font-size: clamp(2.2rem, 3.2vw + 1.5rem, 3.4rem);
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 1rem;
    }

    .hero-title span {
      background: linear-gradient(120deg, #00f7ff, #4dffb5, #ff3df5);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-sub {
      font-size: 0.98rem;
      color: var(--text-muted);
      max-width: 480px;
      margin-bottom: 1.5rem;
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.75rem;
    }

    .hero-meta {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .hero-meta-item {
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .hero-meta-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent), transparent);
      box-shadow: 0 0 12px rgba(0, 224, 255, 0.8);
    }

    .hero-right {
  position: relative;
  display: flex;
  flex-direction: column;   /* stack HUD and strip vertically */
  align-items: center;      /* center horizontally */
  gap: 1rem;                /* space between HUD and strip */
}



    .hud {
      width: 100%;
      max-width: 420px;
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(6, 12, 40, 0.92), rgba(4, 8, 24, 0.98));
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow-soft);
      padding: 1.1rem 1.1rem 1.4rem;
      position: relative;
      overflow: hidden;
    }

    .hud::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(0, 224, 255, 0.18), transparent 55%);
      opacity: 0.7;
      pointer-events: none;
    }

    .hud-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      position: relative;
      z-index: 1;
    }

    .hud-title {
      font-family: "Orbitron";
      font-size: 0.8rem;
      letter-spacing: 0.17em;
      text-transform: uppercase;
      opacity: 0.9;
    }

    .hud-badges {
      display: flex;
      gap: 0.3rem;
    }

    .badge {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      padding: 0.18rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(0, 224, 255, 0.4);
      background: rgba(2, 9, 28, 0.9);
      color: var(--accent);
    }

    .badge-alt {
      border-color: rgba(255, 61, 245, 0.6);
      color: var(--accent-magenta);
    }

    .hud-main {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 1.1rem;
      align-items: center;
    }

    .hud-orbit {
      position: relative;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 1px dashed rgba(0, 224, 255, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      box-shadow: 0 0 22px rgba(0, 224, 255, 0.35);
    }

    .hud-orbit-inner {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 0, #00e0ff, #002966);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.3rem;
    }

    .hud-orbit-inner span {
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .hud-orbit-inner strong {
      font-size: 0.85rem;
      margin-top: 0.2rem;
    }

    .hud-orbit-dot {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.9);
    }

    .dot-1 { top: -6px; left: 50%; transform: translateX(-50%); }
    .dot-2 { bottom: -6px; left: 16%; }
    .dot-3 { right: -6px; top: 45%; }

    .hud-list {
      font-size: 0.78rem;
      color: var(--text-muted);
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .hud-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.4rem 0.55rem;
      border-radius: 12px;
      background: rgba(0, 10, 34, 0.95);
      border: 1px solid rgba(0, 224, 255, 0.2);
    }

    .hud-room {
      font-size: 0.75rem;
      color: var(--text-main);
    }

    .hud-status {
      font-size: 0.72rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .status-pill {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: radial-gradient(circle, var(--success), transparent);
      box-shadow: 0 0 10px rgba(77, 255, 181, 0.9);
    }

    .hud-footer {
      margin-top: 1.1rem;
      display: flex;
      justify-content: space-between;
      font-size: 0.7rem;
      color: var(--text-muted);
      position: relative;
      z-index: 1;
    }

    .hud-footer span strong {
      color: var(--accent);
    }

    .hud-ring {
      position: absolute;
      inset: -40%;
      border-radius: 50%;
      border: 1px solid rgba(0, 224, 255, 0.09);
      filter: blur(1px);
    }
    
    
    /* ===== HERO PRODUCT STRIP (under HUD) ===== */
.hero-product-strip {
  margin-top: 1.3rem;
  width: 100%;
  max-width: 420px;

  /* allow swipe / drag scrolling */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  border-radius: 18px;
  border: 1px solid rgba(0, 224, 255, 0.35);
  background: radial-gradient(circle at 0 0,
              rgba(0, 224, 255, 0.2),
              rgba(2, 7, 26, 0.95));
  box-shadow: 0 0 24px rgba(0, 224, 255, 0.25);
  padding: 0.5rem 0;

  /* hide scrollbar */
  scrollbar-width: none;              /* Firefox */
}
.hero-product-strip::-webkit-scrollbar {
  display: none;                      /* Chrome / Edge */
}

.hero-product-track {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  min-width: max-content;             /* make it scrollable */

  /* auto-slide */
  animation: heroProductsMarquee 20s linear infinite;
}

/* Make it continuous loop from right → left */
@keyframes heroProductsMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hero-product-item {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 0px;
  overflow: hidden;
  border: 1px solid rgba(0, 224, 255, 0.4);
  background: #050a1c;
  box-shadow: 0 0 16px rgba(0, 224, 255, 0.35);
  display: block;                     /* important when it's an <a> */
  cursor: pointer;
}

.hero-product-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* no stretching */
}

/* subtle floating on hover */
.hero-product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(0, 224, 255, 0.6);
}

/* mobile tweak – a bit slower and smaller */
@media (max-width: 768px) {
  .hero-product-strip {
    max-width: 360px;
    margin: 1rem auto 0;
  }
  .hero-product-item {
    width: 90px;
    height: 90px;
  }
  .hero-product-track {
    animation-duration: 20s;
  }
}


.hero-product-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-product-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


    
    /* PRODUCT STRIP UNDER OS */
.product-strip {
  width: 100%;
  overflow: hidden;
  margin-top: 26px;
}

.product-track {
  display: flex;
  gap: 20px;
  animation: scroll 18s linear infinite;
}

.product-track img {
  width: 150px;
  height: 90px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,255,255,0.35);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

    
    
    

    /* Sections */
    section {
      margin-bottom: 3.5rem;
    }

    .section-heading {
      margin-bottom: 1.8rem;
      text-align: left;
    }

    .section-kicker {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--accent-green);
      margin-bottom: 0.35rem;
    }

    .section-title {
      font-family: "Orbitron";
      font-size: 1.3rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .section-subtitle {
      font-size: 0.9rem;
      color: var(--text-muted);
      max-width: 520px;
      margin-top: 0.4rem;
    }

    /* Timeline */
    .timeline-strip {
      border-radius: var(--radius-lg);
      padding: 1.1rem 1.3rem;
      background: linear-gradient(120deg, rgba(0, 224, 255, 0.1), rgba(255, 61, 245, 0.06));
      border: 1px solid rgba(0, 224, 255, 0.35);
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
    }

    .timeline-line {
      position: relative;
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .timeline-line::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(0, 224, 255, 0.7), rgba(255, 61, 245, 0.7));
      opacity: 0.4;
      transform: translateY(-50%);
    }

    .timeline-node {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .timeline-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, #00f7ff, #0070ff);
      box-shadow: 0 0 16px rgba(0, 224, 255, 0.9);
      border: 2px solid #02030a;
      margin-bottom: 0.4rem;
    }

    .timeline-time {
      font-size: 0.75rem;
      color: var(--accent-green);
      margin-bottom: 0.2rem;
    }

    .timeline-label {
      font-size: 0.8rem;
    }

    .timeline-desc {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 0.15rem;
      max-width: 160px;
    }

    /* Command Center */
    .flex-split {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr);
      gap: 2rem;
      align-items: center;
    }

    .list-bullets {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .list-item {
      display: flex;
      gap: 0.7rem;
      align-items: flex-start;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .list-icon {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      background: radial-gradient(circle, var(--accent), #04142e);
      flex-shrink: 0;
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
    }

    .panel {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow-soft);
      padding: 1rem 1.2rem;
      backdrop-filter: blur(var(--blur-glass));
    }

    .panel-title {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin-bottom: 0.8rem;
    }

    .panel-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 0.8rem;
    }

    .tag {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      border: 1px solid rgba(0, 224, 255, 0.3);
      color: var(--text-muted);
    }

    .tag-primary { color: var(--accent); }

    .panel-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
      gap: 0.8rem;
    }

    .panel-item {
      padding: 0.45rem 0.5rem;
      border-radius: 12px;
      background: rgba(2, 9, 28, 0.9);
      border: 1px solid rgba(0, 224, 255, 0.2);
      font-size: 0.78rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text-muted);
    }

    .panel-item span:first-child {
      color: var(--text-main);
    }

    /* Room Explorer (simple version) */
    .room-explorer {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr);
      gap: 2rem;
      align-items: center;
    }

    .room-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1rem;
    }

    .tab {
      border-radius: var(--radius-pill);
      padding: 0.35rem 0.9rem;
      font-size: 0.78rem;
      border: 1px solid rgba(0, 224, 255, 0.3);
      cursor: pointer;
      color: var(--text-muted);
      background: rgba(1, 6, 22, 0.9);
      transition: all var(--transition-fast);
    }

    .tab.active {
      background: radial-gradient(circle at 10% 0, #00f7ff, #0070ff 45%, #ff3df5);
      color: #02030a;
      border-color: transparent;
      box-shadow: 0 0 18px rgba(0, 224, 255, 0.7);
    }

    .holo-house {
      position: relative;
      border-radius: 24px;
      border: 1px solid rgba(0, 224, 255, 0.3);
      background: radial-gradient(circle at 10% 0, rgba(0, 224, 255, 0.09), rgba(3, 12, 44, 0.95));
      padding: 2rem 1.5rem;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    .holo-core {
      width: 150px;
      height: 120px;
      border-radius: 18px;
      border: 1px solid rgba(0, 224, 255, 0.65);
      margin: 0 auto;
      position: relative;
      box-shadow: 0 0 24px rgba(0, 224, 255, 0.7);
      background: linear-gradient(145deg, rgba(2, 10, 38, 0.95), rgba(4, 18, 64, 0.97));
    }

    .holo-core::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 14px;
      border: 1px dashed rgba(0, 224, 255, 0.45);
    }

    .holo-level {
      position: absolute;
      font-size: 0.7rem;
      color: var(--accent);
    }

    .holo-level.l1 { top: 8px; left: 12px; }
    .holo-level.l2 { bottom: 10px; right: 14px; }

    .holo-node {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(0, 224, 255, 0.9);
    }

    .holo-node.n1 { top: 14px; right: 24px; }
    .holo-node.n2 { bottom: 20px; left: 18px; }
    .holo-node.n3 { bottom: 44px; right: -6px; }

    .holo-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.7;
      border-radius: inherit;
      border: 1px solid rgba(0, 224, 255, 0.15);
    }

    .holo-features {
      margin-top: 1.3rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 0.65rem;
      font-size: 0.78rem;
    }

    .holo-chip {
      border-radius: 999px;
      background: rgba(1, 6, 22, 0.92);
      border: 1px solid rgba(0, 224, 255, 0.4);
      padding: 0.35rem 0.7rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      color: var(--text-muted);
    }

    .holo-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-magenta), transparent);
      box-shadow: 0 0 12px rgba(255, 61, 245, 0.9);
    }

    /* Layers */
    .layers {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
    }

    .layer-card {
      padding: 0.9rem 0.9rem 1rem;
      border-radius: 20px;
      background: rgba(3, 9, 30, 0.95);
      border: 1px solid rgba(0, 224, 255, 0.28);
      font-size: 0.82rem;
      color: var(--text-muted);
      box-shadow: 0 0 20px rgba(0, 224, 255, 0.1);
    }

    .layer-title {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--accent);
      margin-bottom: 0.4rem;
    }

    .layer-tags {
      font-size: 0.7rem;
      margin-bottom: 0.4rem;
      color: var(--accent-magenta);
    }

    /* Before / After */
    .compare {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 1rem;
    }

    .compare-card {
      padding: 1rem;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(0, 224, 255, 0.25);
      background: radial-gradient(circle at 0 0, rgba(255, 61, 245, 0.12), rgba(2, 7, 26, 0.95));
      font-size: 0.8rem;
    }

    .compare-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      margin-bottom: 0.6rem;
    }

    .pill {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.17em;
      padding: 0.18rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .pill-before {
      border-color: rgba(255, 75, 129, 0.7);
      color: var(--danger);
    }

    .pill-after {
      border-color: rgba(77, 255, 181, 0.7);
      color: var(--success);
    }

    ul.clean-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      color: var(--text-muted);
    }

    ul.clean-list li::before {
      content: "•";
      margin-right: 0.4rem;
      color: var(--accent);
    }

    /* Map */
    .map-panel {
      border-radius: var(--radius-lg);
      padding: 1rem 1.2rem 1.2rem;
      background: rgba(3, 8, 28, 0.95);
      border: 1px solid rgba(0, 224, 255, 0.35);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
      gap: 1rem;
      font-size: 0.78rem;
    }

    .map-visual {
      position: relative;
      border-radius: 18px;
      border: 1px solid rgba(0, 224, 255, 0.35);
      background: radial-gradient(circle at 30% 0, rgba(0, 224, 255, 0.3), rgba(2, 5, 20, 1));
      min-height: 170px;
      overflow: hidden;
    }

    .map-outline {
      position: absolute;
      inset: 16px;
      border-radius: 18px;
      border: 1px dashed rgba(0, 8, 28, 0.5);
      box-shadow: 0 0 40px rgba(0, 224, 255, 0.25);
    }

    .map-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: radial-gradient(circle, #00f7ff, transparent);
      box-shadow: 0 0 20px rgba(0, 224, 255, 0.9);
    }

    .map-dot.kolkata { left: 60%; top: 55%; }
    .map-dot.bangalore { left: 50%; bottom: 20%; }
    .map-dot.delhi { left: 48%; top: 30%; }

    .map-stats {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .map-stat-main {
      font-size: 0.85rem;
      color: var(--accent-green);
    }

    .map-stat-main strong {
      font-size: 1rem;
      color: var(--accent);
    }

    .map-project {
      padding: 0.4rem 0.55rem;
      border-radius: 12px;
      background: rgba(1, 6, 22, 0.9);
      border: 1px solid rgba(0, 224, 255, 0.2);
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .map-project span:first-child {
      color: var(--text-main);
    }

    /* Testimonials */
    .testimonials {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1rem;
    }

    .t-card {
      position: relative;
      padding: 1rem 1rem 1.1rem;
      border-radius: 20px;
      background: rgba(5, 10, 32, 0.96);
      border: 1px solid rgba(0, 224, 255, 0.3);
      box-shadow: 0 0 26px rgba(0, 224, 255, 0.15);
      font-size: 0.8rem;
      overflow: hidden;
    }

    .t-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      border-radius: inherit;
      border: 1px solid rgba(0, 224, 255, 0.12);
      filter: blur(1px);
    }

    .t-header {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.55rem;
      position: relative;
      z-index: 1;
    }

    .t-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 0, #00e0ff, #002966);
      border: 1px solid rgba(0, 224, 255, 0.6);
      box-shadow: 0 0 16px rgba(0, 224, 255, 0.7);
    }

    .t-name {
      font-size: 0.8rem;
    }

    .t-location {
      font-size: 0.68rem;
      color: var(--text-muted);
    }

    .t-quote {
      position: relative;
      z-index: 1;
      color: var(--text-muted);
    }

    .t-stars {
      position: relative;
      z-index: 1;
      margin-top: 0.5rem;
      font-size: 0.7rem;
      color: #ffd66b;
    }

    /* Pricing */
    .pricing {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1rem;
    }

    .price-card {
      border-radius: 24px;
      padding: 1rem 1rem 1.2rem;
      background: rgba(4, 10, 30, 0.96);
      border: 1px solid rgba(0, 224, 255, 0.35);
      box-shadow: 0 0 24px rgba(0, 224, 255, 0.14);
      font-size: 0.8rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .price-title {
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .price-tagline {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .price-amount {
      font-size: 1rem;
      color: var(--accent);
      margin: 0.5rem 0;
    }

    .price-amount span {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .price-features {
      list-style: none;
      color: var(--text-muted);
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .price-features li::before {
      content: "✓";
      margin-right: 0.4rem;
      color: var(--accent-green);
    }

    .price-pill {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      align-self: flex-start;
      color: var(--accent-green);
    }

    .price-card.highlight {
      border-color: rgba(255, 61, 245, 0.6);
      box-shadow: 0 0 32px rgba(255, 61, 245, 0.4);
    }

    /* CTA Band */
    .cta-band {
      margin-top: 1rem;
      border-radius: 28px;
      padding: 1.5rem 1.3rem;
      background: linear-gradient(135deg, rgba(0, 224, 255, 0.22), rgba(255, 61, 245, 0.14));
      border: 1px solid rgba(0, 224, 255, 0.55);
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      align-items: flex-start;
      box-shadow: 0 0 34px rgba(0, 224, 255, 0.3);
    }

    .cta-band-title {
      font-family: "Orbitron";
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .cta-band-sub {
      font-size: 0.85rem;
      color: #041024;
    }

    .cta-band-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    .btn-ghost-dark {
      background: rgba(0, 8, 28, 0.9);
      border-color: rgba(0, 224, 255, 0.5);
      color: var(--accent);
    }

    .btn-ghost-dark:hover {
      background: rgba(2, 16, 60, 0.9);
    }

    /* Footer */
    footer {
      border-top: 1px solid rgba(0, 224, 255, 0.25);
      padding-top: 1.8rem;
      padding-bottom: 2.4rem;
      background: radial-gradient(circle at top, rgba(0, 224, 255, 0.12), rgba(3, 6, 20, 1));
      margin-top: 1rem;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.25rem;
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
      gap: 2rem;
      font-size: 0.78rem;
    }

    .footer-logo {
      margin-bottom: 0.5rem;
    }

    .footer-logo span {
      font-family: "Orbitron";
      font-size: 0.9rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .footer-note {
      color: var(--text-muted);
      max-width: 360px;
      margin-bottom: 0.7rem;
    }

    .footer-status {
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-green), transparent);
      box-shadow: 0 0 16px rgba(123, 255, 155, 0.9);
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
    }

    .footer-col-title {
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-size: 0.7rem;
      margin-bottom: 0.4rem;
      color: var(--text-muted);
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      color: var(--text-muted);
    }

    .footer-col a {
      text-decoration: none;
      color: inherit;
      transition: color var(--transition-fast);
    }

    .footer-col a:hover {
      color: var(--accent);
    }
    .footer-col ul li {
  display: flex;
  align-items: flex-start;  /* icon stays at top when text wraps */
  gap: 0.5rem;
}
.footer-col li.address-item {
    align-items: flex-start !important; /* icon stays top-aligned */
}

.footer-col li.address-item span {
    display: inline-block;
    line-height: 1.4;
}

.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;          /* keeps column straight */
  font-size: 0.9rem;
}

.footer-text {
  flex: 1;
  line-height: 1.4;
}

    .footer-bottom {
      max-width: 1200px;
      margin: 1.5rem auto 0;
      padding: 0 1.25rem;
      font-size: 0.7rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      gap: 0.7rem;
      flex-wrap: wrap;
    }

    /* ===== MOBILE LAYOUT (<= 900px) ===== */
@media (max-width: 900px) {
  .hero,
  .flex-split,
  .room-explorer,
  .map-panel,
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-top: 2.3rem;
  }

  .hero-right {
    order: -1;
  }

  /* Header can wrap into multiple rows */
  .nav {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
  }

  /* Row 1: logo left, text centre */
  .logo-wrap {
    flex: 1 0 100%;
    position: relative;
    justify-content: center;
  }

  .logo-wrap img {
    position: absolute;
    left: 0;         /* logo fixed at left edge */
  }

  /* Row 2: SOLUTIONS / PROJECTS / PRODUCTS – ek hi line me */
  .nav-links {
    order: 2;                      /* logo ke turant baad */
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .nav-item {
    flex: 0 0 auto;                /* width jitni zarurat ho utni */
  }

  .nav-link-btn {
    width: auto;
    min-width: 70px;
    text-align: center;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 8, 28, 0.9);
    border: 1px solid rgba(0, 224, 255, 0.4);
  }

  /* Row 3: CALL NOW + GET A QUOTE – neeche centre me */
  .nav-cta {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
  }

  .nav-cta .btn {
    padding: 0.25rem 1.8rem;
    font-size: 0.75rem;
    flex: 0 1 auto;
  }
}





.review-btn-container {
   text-align: center;
   margin-top: 2rem;
}

.review-btn {
   background-color: #00eaff; /* Accent color */
   color: #02030a; /* Dark text */
   padding: 12px 24px;
   font-size: 1rem;
   border: none;
   border-radius: 50px;
   cursor: pointer;
   font-weight: bold;
   box-shadow: 0 0 12px rgba(0, 224, 255, 0.5);
   transition: background-color 0.3s ease;
}

.review-btn:hover {
   background-color: #0075ff; /* Darker accent on hover */
}





/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 22px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #3cff9f, #25D366 60%, #128C7E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 0 32px rgba(0, 255, 128, 0.9);
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  opacity: 0.7;
}

.whatsapp-float img {
  width: 48px;
  height: 48px;
  border-radius: 50%;      /* ⬅️ This removes the white square corners */
  object-fit: cover;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 40px rgba(0, 255, 160, 1);
}
/* Video Modal */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
}

.video-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 680px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,224,255,0.4);
}

.video-modal video {
  width: 100%;
  height: auto;
}

.video-close {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 28px;
  color: white;
  cursor: pointer;
  z-index: 10;
}

/* ==== PROFILE BUTTON – DESKTOP ==== */
.profile-card {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: transparent; /* No background color */
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none; /* Remove border */
  box-shadow: none; /* Remove box-shadow */
  cursor: pointer;
  transition: 0.3s ease;
  z-index: 999;
}

.profile-avatar {
  font-size: 2.0rem;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 1; /* Ensure emoji is fully visible */
}

.profile-text {
  color: #f6fbff; /* White text color */
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 2px;
}

.profile-card:hover {
  transform: scale(1.05); /* Slight scaling effect */
}

/* Mobile tweaks for profile card */
@media (max-width: 768px) {
  .profile-card {
    width: 30px;
    height: 35px;
    padding: 6px;
  }

  .profile-avatar {
    font-size: 1.2rem;
  }

  .profile-text {
    font-size: 0.5rem;
    margin-top: 0;
  }
}


/* ========= PROFILE POPUP MODAL ========= */
.profile-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  z-index: 9999;
}

.profile-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  background: radial-gradient(circle at 0 0, rgba(0, 255, 255, 0.18), #050a1c);
  border-radius: 22px;
  border: 1px solid rgba(0, 255, 255, 0.35);
  box-shadow: 0 0 32px rgba(0, 255, 255, 0.5);
  padding: 22px 20px 18px;
  color: #f6fbff;
}

.profile-close {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
  color: #ffffff;
  opacity: 0.8;
  transition: 0.2s;
}

.profile-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.profile-modal-content h2 {
  font-family: "Orbitron", system-ui;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}

.profile-sub {
  font-size: 0.8rem;
  color: #a8b3d4;
  margin-bottom: 14px;
}

.profile-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-option {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  text-align: left;
  color: #02030a;
  font-weight: 500;
  background: linear-gradient(90deg, #00f7ff, #0070ff, #ff3df5);
  box-shadow: 0 0 20px rgba(0, 224, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.profile-option:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 26px rgba(0, 255, 255, 0.9);
  opacity: 0.95;
}

@media (max-width: 768px) {
  .profile-modal-content {
    padding: 18px 16px 14px;
  }

  .profile-modal-content h2 {
    font-size: 1rem;
  }

  .profile-option {
    font-size: 0.78rem;
    padding: 9px 12px;
  }
}

/* Center the top title inside the intro modal */
.intro-modal-content h2 {
    text-align: center !important;
    width: 100%;
    display: block;
}

/* ========= INTRODUCTION / WHAT WE DO FULL SCREEN MODAL ========= */
.intro-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  z-index: 9999;
}

.intro-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  background: radial-gradient(circle at 0 0, rgba(0,255,255,0.15), #050816);
  border-radius: 24px;
  border: 1px solid rgba(0,255,255,0.4);
  padding: 24px 26px 22px;
  box-shadow: 0 0 40px rgba(0,255,255,0.6);
}

.intro-close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 26px;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.85;
}

.intro-close:hover {
  opacity: 1;
  transform: scale(1.05);
}

.intro-modal-content h2 {
  font-family: "Orbitron", system-ui;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

.intro-directors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.intro-director {
  text-align: center;
}

.intro-director img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0,255,255,0.7);
  box-shadow: 0 0 24px rgba(0,255,255,0.7);
  margin-bottom: 8px;
}

.intro-director h3 {
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.intro-director p {
  font-size: 0.75rem;
  color: #a8b3d4;
}

.intro-text {
  font-size: 0.86rem;
  color: #c1cae8;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 768px) {
  .intro-modal-content {
    width: 94%;
    padding: 18px 16px 16px;
  }
  .intro-directors {
    grid-template-columns: 1fr;
  }
}


.live-review {
    text-align: center;
    margin-top: 2rem;
}

.live-review .btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    background-color: #00eaff;
    color: #fff;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.6);
}

.live-review .btn:hover {
    background-color: #0070ff;
}


.nav-cta a.btn-primary {
    color: #000 !important;
}


.nav-cta .btn:hover,
.nav-cta .btn:focus {
    border: none !important;
    outline: none !important;
}



/* Remove underline / bottom line for the CALL NOW anchor button */
.nav-cta a[href^="tel:"] {
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* Also kill any hover / focus decorations & pseudo-elements */
.nav-cta a[href^="tel:"]:hover,
.nav-cta a[href^="tel:"]:focus,
.nav-cta a[href^="tel:"]:active {
  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
}

.nav-cta a[href^="tel:"]::before,
.nav-cta a[href^="tel:"]::after {
  content: none !important;
  display: none !important;
}

.nav-cta .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1;        /* prevents text shifting */
    padding-top: 0.4rem;   /* adjust until perfectly centered */
    padding-bottom: 0.4rem;
}



.live-map-card {
  position: relative;
  width: 100%;
  height: 220px;              /* keep your existing height */
  border-radius: 24px;
  padding: 18px;
  background: radial-gradient(circle at 10% 0, #00e0ff22, #02101f 60%, #01030a);
  box-shadow: 0 0 28px rgba(0, 224, 255, 0.35);
  overflow: hidden;
}

/* India map image */
.india-map {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(0, 224, 255, 0.5));
}

/* Generic glowing dots */
.map-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ff0000;
  box-shadow: 0 0 16px rgba(0, 255, 168, 0.9);
}

/* Example locations – tweak these % to match your map */
.dot-kolkata {
  top: 49%;
  left: 58%;
}

.dot-bokaro {
  top: 47%;
  left: 53%;
}

.dot-assam {
  top: 39%;
  left: 64%;
}






/* ---------- FOOTER UPGRADE (DESKTOP) ---------- */
.site-footer{
  padding: 40px 0 18px;
}

.footer-grid{
  max-width: 1200px;          /* keeps footer content centered */
  margin: 0 auto;
  padding: 0 28px;            /* IMPORTANT: fixes right edge issue */
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 46px;
  align-items: start;
}

/* Headings consistent */
.site-footer h4{
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Body text polish */
.site-footer p,
.site-footer a{
  font-size: 13.8px;
  line-height: 1.65;
  color: rgba(215, 228, 240, 0.82);
  text-decoration: none;
}

/* Remove default browser blue/purple links */
.site-footer a:visited{ color: rgba(215, 228, 240, 0.82); }
.site-footer a:hover{ color: #3cff8f; }

/* LEFT section */
.footer-about p{
  max-width: 380px;
  margin: 0 0 12px;
}

/* Status line */
.footer-status{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(215, 228, 240, 0.78);
}
.status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3cff8f;
  box-shadow: 0 0 12px rgba(60,255,143,0.55);
}

/* MIDDLE column */
.footer-bank p{
  margin: 7px 0;
}
.footer-bank strong{
  color: rgba(235, 245, 255, 0.95);
  font-weight: 600;
}

/* RIGHT column */
.footer-contact{
  text-align: right;
  padding-right: 6px; /* tiny extra breathing */
}
.contact-title{
  color: #3cff8f;
}

/* Contact rows align nicely */
.footer-contact p{
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

/* Vertical separators between columns */
.footer-about,
.footer-bank{
  position: relative;
}
.footer-about::after,
.footer-bank::after{
  content:"";
  position: absolute;
  top: 6px;
  right: -23px;
  width: 1px;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(0,255,255,0),
    rgba(0,255,255,0.18),
    rgba(255,0,255,0.14),
    rgba(0,255,255,0)
  );
}

/* Bottom line */
.footer-bottom{
  max-width: 1200px;
  margin: 26px auto 0;
  padding: 14px 28px 0;
  border-top: 1px solid rgba(0,255,255,0.12);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(215, 228, 240, 0.65);
  font-size: 12.8px;
}
.footer-love{
  opacity: 0.85;
}


@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0 18px;
  }

  .footer-about::after,
  .footer-bank::after{
    display:none;
  }

  .footer-about,
  .footer-bank,
  .footer-contact{
    text-align: center;
  }

  .footer-contact p{
    justify-content: center;
  }

  .footer-bottom{
    justify-content: center;
    text-align: center;
  }
}










  

/* ===== Rebuild additions: modular layout, auth, dashboards ===== */
:root{--panel:rgba(8,14,35,.82);--line:rgba(124,238,255,.22);--gold:#d6b25e;--cyan:#00eaff;--ink:#f8fbff;--muted2:#a6b2d5}
.skip-link{position:absolute;left:-999px;top:auto}.skip-link:focus{left:16px;top:16px;z-index:9999;background:#fff;color:#000;padding:10px 14px;border-radius:10px}
.nav a{color:inherit;text-decoration:none}.employee-link{display:flex;align-items:center;gap:8px}.mobile-menu-btn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:14px;padding:10px 12px}
.auth-body,.dashboard-body{background:radial-gradient(circle at 15% 5%,rgba(0,234,255,.22),transparent 30%),radial-gradient(circle at 85% 5%,rgba(214,178,94,.18),transparent 28%),#050814;min-height:100vh;color:#fff}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:32px 18px}.auth-card{width:min(1120px,100%);display:grid;grid-template-columns:1fr 1.05fr;gap:22px}.auth-hero,.auth-panel,.dash-card,.admin-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 24px 80px rgba(0,0,0,.35);border-radius:28px;backdrop-filter:blur(20px)}.auth-hero{padding:38px}.auth-hero img{width:96px;margin-bottom:24px}.auth-hero h1{font-size:clamp(2rem,4vw,4rem);line-height:1.02;margin-bottom:16px}.auth-hero p{color:var(--muted2);max-width:560px}.auth-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.auth-badges span,.chip{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.06);color:#dce9ff;font-size:.86rem}.auth-panel{padding:28px}.auth-tabs{display:flex;gap:10px;margin-bottom:22px}.auth-tab{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:14px;padding:12px;font-weight:800;cursor:pointer}.auth-tab.active{background:linear-gradient(90deg,var(--cyan),#5ddcff);color:#001017}.auth-form{display:none}.auth-form.active{display:block}.field{display:grid;gap:7px;margin-bottom:14px}.field label{font-size:.85rem;color:#b7c7e9}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(124,238,255,.28);border-radius:14px;background:rgba(0,0,0,.25);color:#fff;padding:13px 14px;outline:none}.field textarea{min-height:96px;resize:vertical}.primary-action{width:100%;border:0;border-radius:16px;padding:14px 18px;font-weight:900;cursor:pointer;background:linear-gradient(90deg,var(--cyan),#d6b25e);color:#001017}.link-btn{border:0;background:transparent;color:#8defff;cursor:pointer;padding:0}.auth-note{margin-top:14px;color:#9eabcc;font-size:.9rem}.dashboard-shell{max-width:1420px;margin:0 auto;padding:24px}.dash-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.dash-brand{display:flex;align-items:center;gap:14px}.dash-brand img{width:66px}.dash-title h1{font-size:clamp(1.7rem,3vw,3rem)}.dash-actions{display:flex;gap:10px;flex-wrap:wrap}.ghost-btn,.danger-btn{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;padding:11px 14px;cursor:pointer}.danger-btn{border-color:rgba(255,75,129,.5);color:#ffd4df}.dash-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.dash-card,.admin-card{padding:22px}.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric{border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.055);padding:18px}.metric strong{display:block;font-size:1.8rem}.task-item,.project-item,.schedule-item,.status-item,.upload-item,.employee-row{display:flex;justify-content:space-between;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);border-radius:18px;padding:14px;margin-top:10px}.pill{border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:800}.pill.ok{background:rgba(77,255,181,.14);color:#83ffc9}.pill.warn{background:rgba(255,202,87,.14);color:#ffe195}.pill.bad{background:rgba(255,75,129,.16);color:#ffb3c6}.app-table{width:100%;border-collapse:collapse;margin-top:12px}.app-table th,.app-table td{text-align:left;border-bottom:1px solid rgba(255,255,255,.09);padding:12px}.admin-layout{display:grid;grid-template-columns:270px 1fr;gap:18px}.admin-nav{position:sticky;top:20px;height:max-content}.admin-nav button{display:block;width:100%;margin:8px 0;text-align:left}.panel-section{display:none}.panel-section.active{display:block}.image-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px}.image-preview-grid img{width:100%;height:100px;object-fit:cover;border-radius:14px;border:1px solid var(--line)}.map-note{font-size:.86rem;color:#a9b7dc;margin-top:8px}.profile-option.featured{background:linear-gradient(120deg,rgba(0,234,255,.18),rgba(214,178,94,.16));border-color:rgba(214,178,94,.45)}
@media(max-width:900px){.auth-card,.dash-grid,.admin-layout{grid-template-columns:1fr}.metric-row{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.mobile-menu-btn{display:block}.nav-links.mobile-open{display:flex;position:absolute;left:12px;right:12px;top:72px;flex-direction:column;background:rgba(2,4,15,.98);border:1px solid var(--line);border-radius:22px;padding:16px}.nav-cta{display:none}}
@media(max-width:560px){.metric-row{grid-template-columns:1fr}.dash-top{align-items:flex-start;flex-direction:column}.task-item,.project-item,.schedule-item,.status-item,.upload-item,.employee-row{align-items:flex-start;flex-direction:column}.auth-hero,.auth-panel,.dash-card,.admin-card{padding:18px}}

/* ===== Production polish update ===== */
body{scroll-padding-top:96px}header,.site-freeze-header{position:fixed!important;top:0;left:0;right:0;z-index:9998;background:linear-gradient(to bottom,rgba(2,4,15,.96),rgba(2,4,15,.72))!important;backdrop-filter:blur(24px);box-shadow:0 12px 34px rgba(0,0,0,.28)}#site-header+*,body:not(.auth-body):not(.dashboard-body) main.page-shell{padding-top:92px}.profile-card{top:96px!important;right:18px!important;z-index:9997!important}.portal-menu{min-width:260px}.portal-switch{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.portal-switch .ghost-btn{ text-decoration:none}.portal-switch .active,.admin-link{border-color:rgba(214,178,94,.68)!important;background:linear-gradient(120deg,rgba(214,178,94,.2),rgba(0,234,255,.12))!important}.portal-kicker{display:inline-flex;border:1px solid rgba(214,178,94,.42);border-radius:999px;padding:7px 12px;color:#ffe3a3!important;background:rgba(214,178,94,.09);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.admin-hero{background:radial-gradient(circle at 0 0,rgba(214,178,94,.18),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))}.secure-box{margin-top:18px;border:1px solid rgba(214,178,94,.32);border-radius:18px;padding:16px;background:rgba(214,178,94,.08);color:#dbe8ff}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.tool-grid button{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.06);color:#fff;padding:13px;cursor:pointer;text-align:left}.emp-tool{display:none}.emp-tool.active{display:block}.admin-profile{background:linear-gradient(90deg,#d6b25e,#00eaff)!important}.dashboard-body .dashboard-shell{padding-top:30px}.dashboard-body header{position:relative!important}.profile-modal-content{max-width:560px!important}.profile-option{text-decoration:none}.profile-option.admin-profile{color:#02030a!important;font-weight:900!important}.nav-links .dropdown-menu.portal-menu{right:0;left:auto}.auth-panel h2{margin-bottom:8px}
@media(max-width:900px){#site-header+*,body:not(.auth-body):not(.dashboard-body) main.page-shell{padding-top:84px}.profile-card{top:86px!important}.tool-grid{grid-template-columns:1fr}.portal-switch{flex-direction:column}.nav-links.mobile-open{position:fixed!important;top:78px!important}}

/* =========================================================
   Premium organised header + modern dropdown/mobile rebuild
   ========================================================= */
.site-freeze-header{position:fixed!important;top:0;left:0;right:0;z-index:99999!important;background:linear-gradient(180deg,rgba(3,7,20,.96),rgba(3,7,20,.84))!important;border-bottom:1px solid rgba(124,238,255,.16);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 14px 42px rgba(0,0,0,.35)}
.premium-nav{max-width:1440px;margin:0 auto;height:86px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 28px!important}
.logo-wrap{display:flex!important;align-items:center!important;gap:12px;text-decoration:none;min-width:238px;flex-shrink:0}.nav-logo-img{width:74px!important;height:auto;display:block}.brand-copy{line-height:1}.logo-text-main{margin-left:0!important;font-size:1.02rem;letter-spacing:.13em;font-weight:900;color:#fff}.logo-sub{margin-left:0!important;margin-top:3px;font-size:.62rem;letter-spacing:.18em;color:#a9b8d8}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.nav-item{position:relative}.nav-link-btn,.nav-single{height:42px;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;padding:0 14px!important;border-radius:999px!important;border:1px solid transparent!important;background:transparent;color:#d7e5ff!important;text-decoration:none!important;font-size:.84rem!important;font-weight:800!important;letter-spacing:.03em;white-space:nowrap;line-height:1!important;transition:.25s ease}.nav-link-btn:hover,.nav-single:hover,.nav-item.open>.nav-link-btn{background:rgba(124,238,255,.09)!important;border-color:rgba(124,238,255,.28)!important;color:#fff!important;box-shadow:0 10px 28px rgba(0,234,255,.08)}.chev{font-size:.68rem;opacity:.8}.nav-cta{display:flex;align-items:center;gap:8px;margin-left:4px;flex-shrink:0}.nav-cta .btn{height:42px;padding:0 15px!important;font-size:.72rem!important;letter-spacing:.08em}.profile-header-btn{background:linear-gradient(120deg,rgba(214,178,94,.2),rgba(0,234,255,.12))!important;border-color:rgba(214,178,94,.36)!important;color:#fff7da!important}.profile-nav-item{order:20}.nav-cta{order:21}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 14px);left:0;min-width:330px;max-height:min(72vh,520px);overflow:auto;padding:12px;border-radius:24px;background:linear-gradient(145deg,rgba(8,16,38,.98),rgba(4,8,22,.96))!important;border:1px solid rgba(124,238,255,.22)!important;box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08)!important;z-index:999999!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.nav-item.open>.dropdown-menu{display:block;animation:smartDrop .18s ease-out}.compact-menu{min-width:285px}.mega-menu{display:none;grid-template-columns:repeat(3,minmax(190px,1fr));gap:10px;width:min(760px,calc(100vw - 44px))}.nav-item.open>.mega-menu{display:grid}.portal-menu,.profile-header-menu{right:0;left:auto}.dropdown-group{margin:0;border-radius:18px;padding:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.dropdown-parent{width:100%;padding:8px 9px!important;border:0;background:transparent;color:#fff!important;display:flex;align-items:center;justify-content:space-between;font-size:.82rem!important;font-weight:900!important;letter-spacing:.02em}.dropdown-parent::after{content:"▾"!important;color:#d6b25e!important}.dropdown-sub{display:block!important;padding:4px 0 0!important}.dropdown-sub ul{list-style:none;margin:0;padding:0}.dropdown-sub a{display:flex!important;align-items:center;min-height:36px;padding:9px 10px!important;border-radius:13px;color:#b9c9e8!important;text-decoration:none;font-size:.82rem!important;font-weight:700;line-height:1.25;transition:.22s ease}.dropdown-sub a:hover{background:linear-gradient(90deg,rgba(0,234,255,.12),rgba(214,178,94,.08));color:#fff!important;transform:translateX(3px)}.dropdown-sub a.admin-menu-link{color:#ffe6a8!important;background:rgba(214,178,94,.1)}@keyframes smartDrop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.profile-card{display:none!important}body{scroll-padding-top:96px!important}#site-header+*,body:not(.auth-body):not(.dashboard-body) main.page-shell{padding-top:96px!important}.auth-home-shortcut{position:fixed;top:18px;left:18px;z-index:10;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(124,238,255,.25);background:rgba(4,9,24,.74);color:#eaf7ff;text-decoration:none;font-weight:900;box-shadow:0 14px 36px rgba(0,0,0,.28);backdrop-filter:blur(16px)}.auth-home-shortcut:hover{background:rgba(0,234,255,.14);color:#fff}.auth-card{margin-top:26px}
@media(max-width:1180px){.premium-nav{padding:0 18px!important}.logo-wrap{min-width:206px}.nav-link-btn,.nav-single{padding:0 10px!important;font-size:.78rem!important}.nav-cta .btn{padding:0 12px!important}.call-btn{display:none!important}}
@media(max-width:900px){.premium-nav{height:76px;padding:0 15px!important}.nav-logo-img{width:62px!important}.logo-text-main{font-size:.86rem}.logo-sub{font-size:.52rem}.logo-wrap{min-width:auto}.mobile-menu-btn{display:inline-flex!important;width:46px;height:46px;border-radius:15px;border:1px solid rgba(124,238,255,.26);background:rgba(255,255,255,.06);align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#fff;z-index:100000}.mobile-menu-btn span{width:21px;height:2px;border-radius:3px;background:#fff;transition:.25s}.mobile-menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-btn.active span:nth-child(2){opacity:0}.mobile-menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-links{display:none!important;position:fixed!important;top:76px!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100vh - 94px);overflow:auto;flex-direction:column;align-items:stretch;gap:8px;padding:14px;border-radius:24px;background:linear-gradient(145deg,rgba(8,16,38,.98),rgba(3,7,20,.98));border:1px solid rgba(124,238,255,.18);box-shadow:0 28px 90px rgba(0,0,0,.52);z-index:99998!important}.nav-links.mobile-open{display:flex!important}.nav-link-btn,.nav-single{width:100%!important;height:46px!important;justify-content:space-between!important;padding:0 14px!important;border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.035)!important}.profile-header-btn{background:linear-gradient(120deg,rgba(214,178,94,.22),rgba(0,234,255,.12))!important}.nav-cta{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 0}.nav-cta .btn{width:100%;height:44px}.call-btn{display:inline-flex!important}.dropdown-menu,.portal-menu,.profile-header-menu,.compact-menu,.mega-menu{position:static!important;display:none!important;width:100%!important;min-width:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:8px!important;border-radius:18px!important;box-shadow:none!important;background:rgba(0,0,0,.18)!important;grid-template-columns:1fr!important}.nav-item.open>.dropdown-menu,.nav-item.open>.mega-menu{display:grid!important}.dropdown-group{padding:8px}.dropdown-sub a{min-height:38px;font-size:.84rem!important}.nav-item{width:100%}#site-header+*,body:not(.auth-body):not(.dashboard-body) main.page-shell{padding-top:82px!important}.auth-home-shortcut{top:10px;left:10px;padding:9px 12px;font-size:.82rem}.auth-card{grid-template-columns:1fr!important;margin-top:48px}.auth-shell{padding:18px 12px!important}}

/* Live restricted login / approval UI */
.auth-modal-backdrop{position:fixed;inset:0;background:rgba(2,8,23,.62);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:99999;padding:18px}
.auth-modal{width:min(420px,100%);background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid rgba(15,23,42,.12);border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.28);padding:28px;position:relative;text-align:center;color:#111827}
.auth-modal h3{margin:0 0 10px;font-size:24px;color:#0f172a}.auth-modal p{margin:0 0 22px;line-height:1.55;color:#475569}.auth-modal-close{position:absolute;top:10px;right:14px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#64748b}.auth-modal-ok{width:auto;min-width:120px}.employee-approval{align-items:center;gap:18px;margin:12px 0}.employee-approval.pending{border-left:4px solid #f59e0b}.employee-approval.active{border-left:4px solid #22c55e}.employee-approval.rejected{border-left:4px solid #ef4444}.approval-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.compact{padding:9px 14px!important;font-size:13px!important;border-radius:999px!important}.panel-section h3{margin:20px 0 10px;color:#0f172a}.auth-tabs + .auth-note{margin-top:12px}


/* =========================================
   FINAL MOBILE HEADER ALIGNMENT FIX
========================================= */
@media (max-width: 900px) {

  .premium-nav {
    height: 74px !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    position: relative;
  }

  /* Logo area */
  .logo-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    min-width: unset !important;
    flex: 1;
  }

  .nav-logo-img {
    width: 52px !important;
    height: auto !important;
    flex-shrink: 0;
  }

  .brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    line-height: 1.1;
  }

  .logo-text-main {
    font-size: 0.82rem !important;
    letter-spacing: 0.10em !important;
    margin: 0 !important;
  }

  .logo-sub {
    font-size: 0.48rem !important;
    letter-spacing: 0.14em !important;

    margin: 2px 0 0 0 !important;
  }

  /* Hamburger perfectly aligned */
  .mobile-menu-btn {
    width: 46px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    position: relative !important;
    top: 0 !important;
    left: 0 !important;

    flex-shrink: 0;

    border-radius: 16px !important;
  }

  /* Header spacing fix */
  #site-header + *,
  body:not(.auth-body):not(.dashboard-body) main.page-shell {
    padding-top: 82px !important;
  }
}











/* ===== FINAL INLINE SUBMENU FIX - MOBILE ONLY ===== */
@media only screen and (max-width:900px){

  /* Every menu item must stack its own submenu underneath */
  .nav-links .nav-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  /* Main menu button stays first row */
  .nav-links .nav-item > .nav-link-btn{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
  }

  /* Kill all older desktop/fixed/absolute dropdown behavior on mobile */
  .nav-links .nav-item > .dropdown-menu,
  .nav-links .nav-item > .mega-menu,
  .nav-links .nav-item > .compact-menu,
  .nav-links .nav-item > .portal-menu,
  .nav-links .nav-item > .profile-header-menu{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;
    translate:none !important;

    float:none !important;
    clear:both !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    max-height:none !important;

    margin:10px 0 0 0 !important;
    padding:12px !important;

    box-sizing:border-box !important;
    overflow:visible !important;

    opacity:1 !important;
    visibility:visible !important;

    display:none !important;

    border-radius:18px !important;
    background:rgba(8,14,28,.98) !important;
    border:1px solid rgba(0,224,255,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.22) !important;
    z-index:5 !important;
  }

  .nav-links .nav-item.open > .dropdown-menu,
  .nav-links .nav-item.open > .mega-menu,
  .nav-links .nav-item.open > .compact-menu,
  .nav-links .nav-item.open > .portal-menu,
  .nav-links .nav-item.open > .profile-header-menu{
    display:block !important;
  }

  /* Submenu inner rows also same width, same line/stack */
  .dropdown-menu .dropdown-group,
  .mega-menu .dropdown-group,
  .compact-menu .dropdown-group,
  .portal-menu .dropdown-group,
  .profile-header-menu .dropdown-group{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 9px 0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .dropdown-menu .dropdown-parent,
  .mega-menu .dropdown-parent,
  .compact-menu .dropdown-parent,
  .portal-menu .dropdown-parent,
  .profile-header-menu .dropdown-parent{
    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    box-sizing:border-box !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .dropdown-menu .dropdown-sub,
  .mega-menu .dropdown-sub,
  .compact-menu .dropdown-sub,
  .portal-menu .dropdown-sub,
  .profile-header-menu .dropdown-sub{
    position:static !important;
    inset:auto !important;
    transform:none !important;

    display:block !important;
    width:100% !important;
    max-width:100% !important;

    margin:8px 0 0 0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .dropdown-sub ul{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .dropdown-sub li{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    box-sizing:border-box !important;
  }

  .dropdown-sub a{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;

    display:flex !important;
    align-items:center !important;

    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;

    margin:0 !important;
    padding:12px 14px !important;

    box-sizing:border-box !important;
    border-radius:12px !important;

    white-space:normal !important;
    overflow:visible !important;

    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.06) !important;
    color:#eef7ff !important;
    text-decoration:none !important;
  }

  .dropdown-sub a::after{
    display:none !important;
  }
}