/* Modern CSS Reset & Variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

:root {
  --primary: #ffffff;
  --primary-dark: #0e0e0e;
  --primary-light: #818cf8;
  --secondary: #8b5cf6;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white: #ffffff;
  --radius: 8px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--gray-800);
  background: #000000;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.1) 0%, 
    rgba(0, 0, 0, 0.3) 50%, 
    rgba(0, 0, 0, 0.7) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  text-decoration: none;
}

.logo-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  justify-content: flex-start;
gap: 6rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {

  color: #d4d4d4;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:not(.btn-login) {
  color: #d4d4d4;
}

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

.nav-links a:not(.btn-login):hover {
  color: var(--primary);
  background: transparent;
}

/* Hamburger Menu Button */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  margin-left: auto; /* Always push to right */
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray-700);
  transition: all 0.3s ease;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Brand Name */
.brand-name {
  transition: font-size 0.3s ease;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: white;
  z-index: 1000;
  transition: right 0.3s ease;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.mobile-menu-content {
  padding: 1rem 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.mobile-menu-item:hover {
  background: var(--gray-50);
  color: var(--primary);
  border-left-color: var(--primary);
}

.mobile-menu-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

.mobile-menu-item span:first-child {
  font-size: 1.25rem;
  width: 28px;
  height: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-menu-item span:first-child i {
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
  color: currentColor;
}

.mobile-menu-item span:first-child i::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Buttons */
.btn {
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: #000000;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.btn-secondary:hover {
  background: var(--gray-200);
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-contact {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-contact:hover {
  background: var(--primary);
  color: var(--white);
}

.btn-login {
  background: white !important;
  color: #000000 !important;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-login:hover {
  background: var(--primary-dark) !important;
  color: #ffffff !important;
}

/* Hero Section */
.hero {
  padding: 5rem 2rem;
  text-align: center;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: var(--white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-container {
  max-width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(2, 2, 2, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  background: rgba(2, 2, 2, 0.2);
  padding: 1rem;
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

.gradient-text {
  background: linear-gradient(to right, #a8edea, #fed6e3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.95;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-hero {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 8px;
  font-weight: 600;
}

/* Container */
.container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Cards */
.card {
  background: rgba(7, 7, 7, 0.5);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  border: 1px solid var(--gray-200);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.95);
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: all 0.2s;
  font-family: inherit;
  color: #111827 !important;
  background-color: white !important;
}

select.form-select {
  color: #111827 !important;
  background-color: white !important;
}

select.form-select option,
.form-select option {
  color: #111827 !important;
  background-color: white !important;
  padding: 0.5rem;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Tables */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

table {
  width: 100%;
  min-width: 995px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.6);
}

thead {
  background: rgba(249, 250, 251, 0.5);
  border-bottom: 2px solid var(--gray-200);
}

th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--gray-700);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

th:nth-child(1) { width: 90px; } /* Permit # */
th:nth-child(2) { width: 90px; } /* Issued Date */
th:nth-child(3) { width: 160px; } /* Address */
th:nth-child(4) { width: 70px; } /* Value */
th:nth-child(5) { width: 95px; } /* Phone */
th:nth-child(6) { width: 220px; } /* Description */
th:nth-child(7) { width: 130px; } /* Source */
th:nth-child(8) { width: 50px; } /* Link */
th:nth-child(9) { width: 90px; } /* Date Added */

td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.875rem;
}

tr:hover {
  background: rgba(249, 250, 251, 0.5);
}

/* Layout */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 5rem;
}

.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem;
}

.auth-box {
  background: var(--white);
  border-radius: 16px;
  padding: 3rem;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}

.auth-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
  color: var(--gray-900);
}

.auth-subtitle {
  text-align: center;
  color: var(--gray-600);
  margin-bottom: 2rem;
}

.auth-link {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--gray-600);
}

.auth-link a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.auth-link a:hover {
  text-decoration: underline;
}

/* Dashboard */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.dashboard-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
}

.filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter-group {
  flex: 1;
  min-width: 200px;
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: white;
}

/* Contact Section Card with Starfield Background */
.contact-card-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.contact-card-container .card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
  margin: 0;
}

.stars {
  width: 2px;
  height: 2px;
  position: absolute;
  background: white;
  border-radius: 50%;
  box-shadow: 2vw 5vh 3px 1px rgba(255,255,255,0.9), 10vw 8vh 2px 1px rgba(255,255,255,0.8), 
    15vw 15vh 3px 1px rgba(255,255,255,0.9), 22vw 22vh 2px 1px rgba(255,255,255,0.8),
    28vw 12vh 3px 1px rgba(255,255,255,0.9), 32vw 32vh 2px 1px rgba(255,255,255,0.8),
    38vw 18vh 3px 1px rgba(255,255,255,0.9), 42vw 35vh 2px 1px rgba(255,255,255,0.8),
    48vw 25vh 3px 1px rgba(255,255,255,0.9), 53vw 42vh 2px 1px rgba(255,255,255,0.8),
    58vw 15vh 3px 1px rgba(255,255,255,0.9), 63vw 38vh 2px 1px rgba(255,255,255,0.8),
    68vw 28vh 3px 1px rgba(255,255,255,0.9), 73vw 45vh 2px 1px rgba(255,255,255,0.8);
  animation: twinkle 8s infinite linear;
  z-index: 10;
  pointer-events: none;
}

.shooting-star {
  position: absolute;
  width: 150px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  animation: shoot 3s infinite ease-in;
  z-index: 10;
  pointer-events: none;
}

.shooting-star:nth-child(1) {
  top: 20%;
  left: -100px;
  animation-delay: 0s;
}

.shooting-star:nth-child(2) {
  top: 35%;
  left: -100px;
  animation-delay: 1s;
}

.shooting-star:nth-child(3) {
  top: 50%;
  left: -100px;
  animation-delay: 2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(120vw) translateY(50vh) rotate(25deg);
    opacity: 0;
  }
}

/* Additional twinkling stars with different animation timing */
.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

/* Alert */
.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  display: none;
}

.alert.show {
  display: flex;
}

.alert-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid var(--success);
}

.alert-error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid var(--danger);
}

.alert-info {
  background: #dbeafe;
  color: #1e40af;
  border-left: 4px solid var(--primary);
}

/* Loading */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s ease-in-out infinite;
}

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

.text-center {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 768px) {
  /* Navigation */
  .nav-container {
    padding: 0.75rem 1rem !important;
    justify-content: space-between !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Logo stays on left */
  .nav-logo {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin-right: 0 !important;
  }
  
  /* Make brand name smaller on mobile */
  .brand-name {
    font-size: 1rem !important;
  }
  
  /* Show hamburger on far right */
  .hamburger {
    display: flex !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    order: 3 !important;
    position: relative !important;
  }
  
  /* Hide desktop nav completely */
  .desktop-nav {
    display: none !important;
  }
  
  .nav-links {
    display: none !important;
  }
  
  /* Hero Section */
  .hero {
    padding: 5rem 1rem !important;
    overflow-x: hidden !important;
  }
  
  .hero-container {
    max-width: 95% !important;
    width: 100% !important;
  }
  
  .hero-title {
    font-size: 1.75rem;
    padding: 0.75rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.875rem;
  }
  
  .hero-cta {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  /* Container */
  .container {
    padding: 1rem;
    margin-top: 5rem;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Auth Box */
  .auth-box {
    padding: 1.5rem;
    width: 90%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  .auth-title {
    font-size: 1.5rem !important;
  }
  
  .auth-subtitle {
    font-size: 0.875rem !important;
  }
  
  /* Forms */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.625rem;
  }
  
  .btn {
    padding: 0.75rem 1rem;
    width: 100%;
    font-size: 0.875rem;
  }
  
  /* Filters */
  .filters {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .filter-group {
    min-width: 100%;
  }
  
  /* Dashboard */
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Cards */
  .card {
    padding: 1.25rem;
  }
  
  .card-title {
    font-size: 1.25rem;
  }
  
  /* Tables */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100vw;
    margin: 0;
  }
  
  table {
    font-size: 0.75rem;
    min-width: 600px; /* Allows horizontal scroll */
  }
  
  th, td {
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }
  
  /* Hide less important columns on mobile */
  .hide-mobile {
    display: none !important;
  }
  
  /* Buttons in nav */
  .nav-container button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    width: 100%;
  }
}

/* Extra small devices (phones, less than 400px) */
@media (max-width: 400px) {
  .hero-title {
    font-size: 1.5rem;
  }
  
  .auth-box {
    padding: 1rem;
  }
  
  .container {
    padding: 0.75rem;
  }
  
  .card {
    padding: 1rem;
  }
  
  table {
    font-size: 0.625rem;
  }
}

/* Medium phones (iPhone 12, 13, 14 standard, Galaxy S20) */
@media (max-width: 425px) {
  .nav-container {
    padding: 0.625rem 0.875rem;
  }
  
  .brand-name {
    font-size: 0.875rem !important;
  }
  
  .hamburger {
    padding: 6px;
  }
  
  .hamburger span {
    width: 20px;
  }
  
  .hero-title {
    font-size: 1.375rem;
  }
  
  .container {
    padding: 0.875rem;
  }
  
  .auth-box {
    padding: 1.25rem;
  }
  
  .card {
    padding: 1rem;
  }
  
  .mobile-menu {
    width: 85%;
  }
}

/* Small phones (iPhone SE, older iPhones) */
@media (max-width: 375px) {
  .nav-container {
    padding: 0.5rem 0.75rem;
  }
  
  .brand-name {
    font-size: 0.813rem !important;
  }
  
  .navbar {
    min-height: 56px;
  }
  
  .hero-title {
    font-size: 1.25rem;
  }
  
  .hero-subtitle {
    font-size: 0.813rem;
  }
  
  .container {
    padding: 0.75rem;
  }
  
  .auth-box {
    padding: 1rem;
  }
  
  .card {
    padding: 0.875rem;
  }
  
  table {
    font-size: 0.563rem;
  }
  
  .mobile-menu {
    width: 90%;
  }
}

/* Very small phones (Galaxy Fold, 320px width) */
@media (max-width: 320px) {
  .nav-container {
    padding: 0.5rem 0.5rem;
  }
  
  .brand-name {
    font-size: 0.75rem !important;
  }
  
  .hamburger {
    padding: 4px;
  }
  
  .hamburger span {
    width: 18px;
    height: 1.5px;
  }
  
  .hero-title {
    font-size: 1.125rem;
  }
  
  .container {
    padding: 0.5rem;
  }
  
  .auth-box {
    padding: 0.875rem;
  }
  
  .mobile-menu {
    width: 95%;
  }
  
  .mobile-menu-item {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
  
  .mobile-menu-item span:first-child {
    font-size: 1.125rem;
  }
}

/* 3D Box Animation */
.box-3d-container {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  z-index: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

.box-card {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
  animation: rotate3d 8s infinite linear;
  transition: all 0.4s ease;
}

/* Smaller box when scrolled - applies to all screen sizes */
.box-3d-container.scrolled {
  top: 10%;
  transform: translateX(-50%) scale(0.5);
}

.box-3d-container.scrolled .box-card {
  width: 150px;
  height: 150px;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  backface-visibility: visible;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.face::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
  top: -100%;
  left: -100%;
  transition: all 0.5s ease;
  transform: translateZ(20px);
}

.face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.face:hover::before {
  top: 100%;
  left: 100%;
}

.face:hover::after {
  opacity: 1;
}

.front {
  transform: translateZ(100px);
  border-color: #646cff;
  background: linear-gradient(145deg, rgba(100, 108, 255, 0.2), rgba(100, 108, 255, 0.1));
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
  border-color: #00bcd4;
  background: linear-gradient(145deg, rgba(0, 188, 212, 0.2), rgba(0, 188, 212, 0.1));
}

.right {
  transform: translateX(100px) rotateY(90deg);
  border-color: #4caf50;
  background: linear-gradient(145deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
  border-color: #ff4081;
  background: linear-gradient(145deg, rgba(255, 64, 129, 0.2), rgba(255, 64, 129, 0.1));
}

.top {
  transform: translateY(-100px) rotateX(90deg);
  border-color: #ffc107;
  background: linear-gradient(145deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
  border-color: #9c27b0;
  background: linear-gradient(145deg, rgba(156, 39, 176, 0.2), rgba(156, 39, 176, 0.1));
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* 3D Box Responsive */
@media (max-width: 768px) {
  .box-card {
    width: 150px;
    height: 150px;
  }
  
  .front { transform: translateZ(75px); }
  .back { transform: translateZ(-75px) rotateY(180deg); }
  .right { transform: translateX(75px) rotateY(90deg); }
  .left { transform: translateX(-75px) rotateY(-90deg); }
  .top { transform: translateY(-75px) rotateX(90deg); }
  .bottom { transform: translateY(75px) rotateX(-90deg); }
  
  .face {
    font-size: 1rem;
  }
}

/* ========================================
   ANIMATED STARFIELD BACKGROUND
   ======================================== */

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1789px 1912px #FFF, 1456px 234px #FFF, 892px 1567px #FFF, 234px 789px #FFF, 1678px 456px #FFF, 
    456px 1234px #FFF, 1890px 678px #FFF, 123px 1456px #FFF, 567px 234px #FFF, 1234px 1890px #FFF,
    789px 456px #FFF, 1567px 1234px #FFF, 345px 1678px #FFF, 1901px 890px #FFF, 678px 1567px #FFF,
    1234px 234px #FFF, 890px 1890px #FFF, 1567px 678px #FFF, 234px 1234px #FFF, 1678px 1456px #FFF,
    456px 789px #FFF, 1890px 1567px #FFF, 123px 345px #FFF, 567px 1901px #FFF, 1234px 678px #FFF,
    789px 1234px #FFF, 1567px 890px #FFF, 345px 456px #FFF, 1901px 1678px #FFF, 678px 123px #FFF;
  animation: animStar 50s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1789px 1912px #FFF, 1456px 234px #FFF, 892px 1567px #FFF, 234px 789px #FFF, 1678px 456px #FFF, 
    456px 1234px #FFF, 1890px 678px #FFF, 123px 1456px #FFF, 567px 234px #FFF, 1234px 1890px #FFF,
    789px 456px #FFF, 1567px 1234px #FFF, 345px 1678px #FFF, 1901px 890px #FFF, 678px 1567px #FFF,
    1234px 234px #FFF, 890px 1890px #FFF, 1567px 678px #FFF, 234px 1234px #FFF, 1678px 1456px #FFF,
    456px 789px #FFF, 1890px 1567px #FFF, 123px 345px #FFF, 567px 1901px #FFF, 1234px 678px #FFF,
    789px 1234px #FFF, 1567px 890px #FFF, 345px 456px #FFF, 1901px 1678px #FFF, 678px 123px #FFF;
}

#stars2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1678px 1345px #FFF, 234px 1789px #FFF, 1234px 567px #FFF, 789px 1890px #FFF, 1567px 234px #FFF,
    456px 1678px #FFF, 1890px 890px #FFF, 123px 1234px #FFF, 678px 456px #FFF, 1456px 1567px #FFF,
    890px 678px #FFF, 1789px 1234px #FFF, 345px 890px #FFF, 1567px 1456px #FFF, 234px 123px #FFF,
    1234px 1789px #FFF, 567px 345px #FFF, 1890px 1567px #FFF, 789px 1234px #FFF, 1678px 678px #FFF;
  animation: animStar 100s linear infinite;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  /* Touch-friendly buttons */
  button, .btn, a.btn {
    min-height: 44px; /* iOS recommended touch target */
    min-width: 44px;
  }
  
  /* Better spacing for mobile */
  .stats-grid {
    gap: 0.75rem;
  }
  
  /* Optimize card layouts */
  .card > div[style*="flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .card a.btn,
  .card button.btn {
    width: 100%;
    margin-top: 1rem;
  }
  
  /* Mobile-friendly source cards */
  .card h3 {
    font-size: 1.125rem !important;
  }
  
  .card p {
    font-size: 0.813rem !important;
  }
  
  /* Scrollable tables */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;
    padding: 0 1rem;
  }
  
  /* Mobile navbar improvements */
  @supports (-webkit-touch-callout: none) {
    /* iOS specific */
    .navbar {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* Landscape phone orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .container {
    margin-top: 4rem;
  }
  
  .auth-box {
    max-height: 85vh;
    overflow-y: auto;
  }
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1678px 1345px #FFF, 234px 1789px #FFF, 1234px 567px #FFF, 789px 1890px #FFF, 1567px 234px #FFF,
    456px 1678px #FFF, 1890px 890px #FFF, 123px 1234px #FFF, 678px 456px #FFF, 1456px 1567px #FFF,
    890px 678px #FFF, 1789px 1234px #FFF, 345px 890px #FFF, 1567px 1456px #FFF, 234px 123px #FFF,
    1234px 1789px #FFF, 567px 345px #FFF, 1890px 1567px #FFF, 789px 1234px #FFF, 1678px 678px #FFF;
}

#stars3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1456px 1123px #FFF, 456px 1567px #FFF, 1789px 789px #FFF, 234px 1345px #FFF, 1567px 456px #FFF,
    890px 1789px #FFF, 1234px 234px #FFF, 678px 1456px #FFF, 1890px 1234px #FFF, 123px 678px #FFF;
  animation: animStar 150s linear infinite;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1456px 1123px #FFF, 456px 1567px #FFF, 1789px 789px #FFF, 234px 1345px #FFF, 1567px 456px #FFF,
    890px 1789px #FFF, 1234px 234px #FFF, 678px 1456px #FFF, 1890px 1234px #FFF, 123px 678px #FFF;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* 3D Marquee Text Effect for About Section */
.box-3d-text {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  height: 200px;
  overflow: hidden;
}

.box-3d-text .inner-text {
  width: 400px;
  height: 200px;
  line-height: 200px;
  font-size: 4em;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.box-3d-text .inner-text:first-child {
  background-color: rgba(0, 0, 0, 0.8);
  color: #000;
  transform-origin: right;
  transform: perspective(100px) rotateY(-15deg);
}

.box-3d-text .inner-text:last-child {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.3);
  transform-origin: left;
  transform: perspective(100px) rotateY(15deg);
}

.box-3d-text .inner-text span {
  position: absolute;
  animation: marquee3d 5s linear infinite;
}

.box-3d-text .inner-text:first-child span {
  animation-delay: 2.5s;
  left: -100%;
}

@keyframes marquee3d {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

/* 3D Rotating Button Effect */
.btn-3d {
  position: relative;
  width: 100%;
  height: 50px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg);
  border: none;
  overflow: visible;
  animation: rotate3d 4s linear infinite;
}

.btn-3d.stopped {
  animation: none;
  transition: 0.5s;
}

.btn-3d.stopped:hover {
  transform: perspective(1000px) rotateX(360deg);
  transition: 4s;
}

@keyframes rotate3d {
  from {
    transform: perspective(1000px) rotateX(0deg);
  }
  to {
    transform: perspective(1000px) rotateX(360deg);
  }
}

.btn-3d span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary-dark);
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: 0.5s;
  border: 2px solid var(--primary-dark);
  box-sizing: border-box;
  box-shadow: inset 0 20px 50px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
}

.btn-3d:hover span {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-light), var(--secondary));
  border-color: var(--secondary);
}

.btn-3d span:nth-child(1) {
  transform: rotateX(0deg) translateZ(25px);
}

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

.btn-3d span:nth-child(2) {
  transform: rotateX(90deg) translateZ(25px);
}

.btn-3d span:nth-child(3) {
  transform: rotateX(180deg) translateZ(25px);
}

.btn-3d span:nth-child(4) {
  transform: rotateX(270deg) translateZ(25px);
}