/* HeroUI-Inspired Theme System */
:root {
  /* Light Theme - Semantic Color Tokens */
  --background: 255 255 255; /* #ffffff */
  --foreground: 11 15 25; /* #0b0f19 */

  /* Content colors */
  --content1: 255 255 255; /* #ffffff */
  --content2: 249 250 251; /* #f9fafb */
  --content3: 243 244 246; /* #f3f4f6 */
  --content4: 229 231 235; /* #e5e7eb */

  /* Default colors */
  --default: 244 244 245; /* #f4f4f5 */
  --default-50: 250 250 250; /* #fafafa */
  --default-100: 244 244 245; /* #f4f4f5 */
  --default-200: 228 228 231; /* #e4e4e7 */
  --default-300: 212 212 216; /* #d4d4d8 */
  --default-400: 161 161 170; /* #a1a1aa */
  --default-500: 113 113 122; /* #71717a */
  --default-600: 82 82 91; /* #52525b */
  --default-700: 63 63 70; /* #3f3f46 */
  --default-800: 39 39 42; /* #27272a */
  --default-900: 24 24 27; /* #18181b */
  --default-foreground: 11 15 25; /* #0b0f19 */

  /* Primary colors */
  --primary: 0 111 238; /* #006fee */
  --primary-50: 240 249 255; /* #f0f9ff */
  --primary-100: 224 242 254; /* #e0f2fe */
  --primary-200: 186 230 253; /* #bae6fd */
  --primary-300: 125 211 252; /* #7dd3fc */
  --primary-400: 56 189 248; /* #38bdf8 */
  --primary-500: 14 165 233; /* #0ea5e9 */
  --primary-600: 2 132 199; /* #0284c7 */
  --primary-700: 3 105 161; /* #0369a1 */
  --primary-800: 7 89 133; /* #075985 */
  --primary-900: 12 74 110; /* #0c4a6e */
  --primary-foreground: 255 255 255; /* #ffffff */

  /* Secondary colors */
  --secondary: 113 113 122; /* #71717a */
  --secondary-50: 250 250 250; /* #fafafa */
  --secondary-100: 244 244 245; /* #f4f4f5 */
  --secondary-200: 228 228 231; /* #e4e4e7 */
  --secondary-300: 212 212 216; /* #d4d4d8 */
  --secondary-400: 161 161 170; /* #a1a1aa */
  --secondary-500: 113 113 122; /* #71717a */
  --secondary-600: 82 82 91; /* #52525b */
  --secondary-700: 63 63 70; /* #3f3f46 */
  --secondary-800: 39 39 42; /* #27272a */
  --secondary-900: 24 24 27; /* #18181b */
  --secondary-foreground: 255 255 255; /* #ffffff */

  /* Success colors */
  --success: 34 197 94; /* #22c55e */
  --success-50: 240 253 244; /* #f0fdf4 */
  --success-100: 220 252 231; /* #dcfce7 */
  --success-200: 187 247 208; /* #bbf7d0 */
  --success-300: 134 239 172; /* #86efac */
  --success-400: 74 222 128; /* #4ade80 */
  --success-500: 34 197 94; /* #22c55e */
  --success-600: 22 163 74; /* #16a34a */
  --success-700: 21 128 61; /* #15803d */
  --success-800: 22 101 52; /* #166534 */
  --success-900: 20 83 45; /* #14532d */
  --success-foreground: 255 255 255; /* #ffffff */

  /* Warning colors */
  --warning: 245 158 11; /* #f59e0b */
  --warning-50: 255 251 235; /* #fffbeb */
  --warning-100: 254 243 199; /* #fef3c7 */
  --warning-200: 253 230 138; /* #fde68a */
  --warning-300: 252 211 77; /* #fcd34d */
  --warning-400: 251 191 36; /* #fbbf24 */
  --warning-500: 245 158 11; /* #f59e0b */
  --warning-600: 217 119 6; /* #d97706 */
  --warning-700: 180 83 9; /* #b45309 */
  --warning-800: 146 64 14; /* #92400e */
  --warning-900: 120 53 15; /* #78350f */
  --warning-foreground: 255 255 255; /* #ffffff */

  /* Danger colors */
  --danger: 239 68 68; /* #ef4444 */
  --danger-50: 254 242 242; /* #fef2f2 */
  --danger-100: 254 226 226; /* #fee2e2 */
  --danger-200: 254 202 202; /* #fecaca */
  --danger-300: 252 165 165; /* #fca5a5 */
  --danger-400: 248 113 113; /* #f87171 */
  --danger-500: 239 68 68; /* #ef4444 */
  --danger-600: 220 38 38; /* #dc2626 */
  --danger-700: 185 28 28; /* #b91c1c */
  --danger-800: 153 27 27; /* #991b1b */
  --danger-900: 127 29 29; /* #7f1d1d */
  --danger-foreground: 255 255 255; /* #ffffff */

  /* Focus and overlay */
  --focus: 0 111 238; /* #006fee */
  --overlay: 0 0 0; /* #000000 */
  --divider: 0 0 0; /* #000000 */

  /* Opacity values */
  --divider-opacity: 0.15;
  --overlay-opacity: 0.5;

  /* Layout tokens */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 14px;
  --border-width: 2px;
  --disabled-opacity: 0.5;

  /* Shadow tokens */
  --shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
  --shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
  --shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
}

/* Dark Theme */
[data-theme="dark"] {
  /* Dark Theme - Semantic Color Tokens */
  --background: 0 0 0; /* #000000 */
  --foreground: 255 255 255; /* #ffffff */

  /* Content colors */
  --content1: 24 24 27; /* #18181b */
  --content2: 39 39 42; /* #27272a */
  --content3: 63 63 70; /* #3f3f46 */
  --content4: 82 82 91; /* #52525b */

  /* Default colors */
  --default: 39 39 42; /* #27272a */
  --default-50: 250 250 250; /* #fafafa */
  --default-100: 244 244 245; /* #f4f4f5 */
  --default-200: 228 228 231; /* #e4e4e7 */
  --default-300: 212 212 216; /* #d4d4d8 */
  --default-400: 161 161 170; /* #a1a1aa */
  --default-500: 113 113 122; /* #71717a */
  --default-600: 82 82 91; /* #52525b */
  --default-700: 63 63 70; /* #3f3f46 */
  --default-800: 39 39 42; /* #27272a */
  --default-900: 24 24 27; /* #18181b */
  --default-foreground: 250 250 250; /* #fafafa */

  /* Primary colors remain the same but with adjusted foreground */
  --primary: 0 111 238; /* #006fee */
  --primary-foreground: 255 255 255; /* #ffffff */

  /* Secondary colors adjusted for dark theme */
  --secondary: 82 82 91; /* #52525b */
  --secondary-foreground: 255 255 255; /* #ffffff */

  /* Success, Warning, Danger colors remain the same */

  /* Focus and overlay for dark theme */
  --focus: 0 111 238; /* #006fee */
  --overlay: 255 255 255; /* #ffffff */
  --divider: 255 255 255; /* #ffffff */

  /* Opacity values for dark theme */
  --divider-opacity: 0.15;
  --overlay-opacity: 0.5;

  /* Enhanced shadows for dark theme */
  --shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), 0px 0px 1px 0px rgb(0 0 0 / 0.4);
  --shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), 0px 0px 1px 0px rgb(0 0 0 / 0.4);
  --shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), 0px 0px 1px 0px rgb(0 0 0 / 0.4);
}
/* Base Styles with Semantic Colors */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  transition: background-color 0.2s ease, color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}

.center {
  text-align: center;
}

.tiny {
  font-size: 0.8125rem;
}

.muted {
  color: rgb(var(--default-500));
}

.eyebrow {
  font-weight: 600;
  color: rgb(var(--default-500));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

/* Buttons with HeroUI-inspired styling */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid rgb(var(--default-200));
  padding: 0.625rem 1rem;
  border-radius: var(--radius-medium);
  gap: 0.5rem;
  transition: all 0.25s ease;
  cursor: pointer;
  background: rgb(var(--content1));
  color: rgb(var(--foreground));
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
  border-color: rgb(var(--default-300));
}

.btn:focus-visible {
  outline: 2px solid rgb(var(--focus));
  outline-offset: 2px;
}

.btn.big {
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  border-radius: var(--radius-large);
}

.btn.ghost {
  background: transparent;
  border-color: rgb(var(--default-200));
}

.btn.ghost:hover {
  background: rgb(var(--default-100));
  box-shadow: var(--shadow-small);
}

.btn.primary {
  background: rgb(var(--primary));
  color: rgb(var(--primary-foreground));
  border-color: rgb(var(--primary));
}

.btn.primary:hover {
  background: rgb(var(--primary-600));
  border-color: rgb(var(--primary-600));
  transform: translateY(-1px);
  box-shadow: var(--shadow-large);
}

.btn.full {
  width: 100%;
}

.nav-cta .btn {
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
}

.link-muted {
  opacity: 0.8;
}

/* Cards with HeroUI-inspired styling */
.card {
  background: rgb(var(--content1));
  border: var(--border-width) solid rgb(var(--default-200));
  border-radius: var(--radius-large);
  overflow: hidden;
  transition: all 0.25s ease;
}

.card:hover {
  box-shadow: var(--shadow-medium);
  border-color: rgb(var(--default-300));
}

.card.small {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-medium);
}

.shadow {
  box-shadow: var(--shadow-medium);
}

.hero .card {
  overflow: visible;
}

/* Navigation with enhanced styling */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--background), 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--border-width) solid rgba(var(--divider), var(--divider-opacity));
  transition: all 0.25s ease;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: rgb(var(--foreground));
}

.brand-logo {
  width: 40px;
  height: 40px;
}

.nav-links {
  display: flex;
  gap: 1rem;
}

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

/* HeroUI-inspired Theme Switch */
.theme-switch-container {
  display: flex;
  align-items: center;
}

.theme-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.theme-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.theme-switch-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 36px;
  background: rgb(var(--default-200));
  border-radius: 18px;
  padding: 4px;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

.theme-switch:hover .theme-switch-track {
  background: rgb(var(--default-300));
}

.theme-switch-input:focus-visible + .theme-switch-track {
  outline: none;
  border-color: rgb(var(--success));
  box-shadow: 0 0 0 3px rgba(var(--success), 0.2);
}

.theme-switch-input:checked + .theme-switch-track {
  background: rgb(var(--success));
}

.theme-switch-input:checked:hover + .theme-switch-track {
  background: rgb(var(--success-600));
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  background: rgb(var(--content1));
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-small);
  z-index: 2;
}

.theme-switch-input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(28px);
}

.theme-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  color: rgb(var(--default-600));
  transition: all 0.25s ease;
  z-index: 1;
}

.sun-icon {
  left: 6px;
  opacity: 1;
}

.moon-icon {
  right: 6px;
  opacity: 0.5;
}

.theme-switch-input:checked + .theme-switch-track .sun-icon {
  opacity: 0.5;
  color: rgb(var(--success-foreground));
}

.theme-switch-input:checked + .theme-switch-track .moon-icon {
  opacity: 1;
  color: rgb(var(--success-foreground));
}



/* Dark theme adjustments */
[data-theme="dark"] .theme-switch-track {
  background: rgb(var(--default-300));
}

[data-theme="dark"] .theme-switch:hover .theme-switch-track {
  background: rgb(var(--default-400));
}

[data-theme="dark"] .theme-switch-input:checked + .theme-switch-track {
  background: rgb(var(--success));
  box-shadow: 0 0 20px rgba(var(--success), 0.2);
}

/* Dark theme modal and form adjustments */
[data-theme="dark"] .form-group input {
  background: rgb(var(--content2));
  border-color: rgb(var(--default-300));
}

[data-theme="dark"] .form-group input:focus {
  background: rgb(var(--content1));
  border-color: rgb(var(--primary));
}

[data-theme="dark"] .country-button {
  background: rgb(var(--content2));
  border-color: rgb(var(--default-300));
}

[data-theme="dark"] .country-button:hover {
  background: rgb(var(--content1));
  border-color: rgb(var(--default-400));
}

[data-theme="dark"] .country-dropdown {
  background: rgb(var(--content2));
  border-color: rgb(var(--default-300));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .country-search input {
  background: rgb(var(--content3));
  border-color: rgb(var(--default-300));
}

[data-theme="dark"] .country-search input:focus {
  background: rgb(var(--content2));
}

[data-theme="dark"] .country-item:hover {
  background: rgb(var(--default-200));
}

[data-theme="dark"] .country-flag {
  background: rgb(var(--default-200));
  color: rgb(var(--default-700));
}

/* Dark theme divider adjustments */
[data-theme="dark"] .divider {
  color: rgb(var(--default-400));
}

[data-theme="dark"] .divider::before {
  background: rgb(var(--default-300));
}

[data-theme="dark"] .divider span {
  background: rgb(var(--content1));
}

/* Sign in toggle buttons */
.signin-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgb(var(--default-200));
}

.toggle-btn {
  flex: 1;
  padding: 10px 16px;
  background: rgb(var(--content2));
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--default-600));
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  border-radius: 0;
}

.toggle-btn.active {
  background: rgb(var(--primary));
  color: rgb(var(--primary-foreground));
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(var(--primary), 0.2);
  transform: translateY(-1px);
}

.toggle-btn:hover:not(.active) {
  background: rgb(var(--default-100));
  color: rgb(var(--foreground));
  transform: translateY(-0.5px);
}

/* Dark theme toggle adjustments */
[data-theme="dark"] .signin-toggle {
  border-color: rgb(var(--default-300));
}

[data-theme="dark"] .toggle-btn {
  background: rgb(var(--content3));
  color: rgb(var(--default-400));
}

[data-theme="dark"] .toggle-btn.active {
  background: rgb(var(--primary));
  color: rgb(var(--primary-foreground));
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--primary), 0.3);
  transform: translateY(-1px);
}

[data-theme="dark"] .toggle-btn:hover:not(.active) {
  background: rgb(var(--content2));
  color: rgb(var(--foreground));
  transform: translateY(-0.5px);
}

/* GitHub icon color adjustment for dark theme */
[data-theme="dark"] .github-icon {
  fill: rgb(var(--foreground)) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .theme-switch-container {
    order: -1;
    margin-right: auto;
  }
}

/* Ensure proper display */
.theme-switch-container {
  display: flex;
  align-items: center;
}

.theme-switch-track {
  min-width: 64px;
  min-height: 36px;
}

.theme-switch-thumb {
  display: block;
}

.theme-icon {
  display: block;
}

/* Hero Section with enhanced styling */
.section {
  padding: 72px 0;
}

.section.pricing {
  padding: 40px 0 72px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 0.25rem 0 1rem;
  font-weight: 900;
  color: rgb(var(--foreground));
  background: linear-gradient(135deg, rgb(var(--foreground)), rgb(var(--primary)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .sub {
  color: rgb(var(--default-500));
  max-width: 42ch;
  line-height: 1.6;
}

.hero .hero-media {
  overflow: visible;
  transform: translateX(-20px);
}

.hero .hero-media img {
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-large);
}

.cta-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  max-width: 280px;
}

/* Section Headers */
.section-head{text-align:center;margin-bottom:28px}

/* Hero Video */
.demo-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.demo-video:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Video Fullscreen Modal */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.video-modal-overlay.active {
  display: flex;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90%;
}

.video-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2001;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.fullscreen-video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Dark theme video modal adjustments */
[data-theme="dark"] .video-modal-close {
  background: rgba(var(--content1), 0.9);
  color: rgb(var(--foreground));
}

[data-theme="dark"] .video-modal-close:hover {
  background: rgb(var(--content1));
}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.price{padding:20px;position:relative}
.price .badge{position:absolute;top:12px;right:12px;background:#111827;color:#fff;border-radius:999px;padding:.25rem .5rem;font-size:.75rem}
.price.highlight{border-color:#111827;box-shadow:0 10px 30px rgba(17,24,39,.15)}
.price-num{font-size:2rem;font-weight:800;margin:.25rem 0}
.price-num span{font-size:1rem;color:var(--muted);font-weight:500}
.price ul{margin:.5rem 0 1rem 1.2rem}



/* CTA */
.cta .cta-box{padding:24px;display:grid;gap:6px;place-items:center;text-align:center}

/* Footer Divider */
.footer-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--default-200)), transparent);
  margin: 2rem 0 0 0;
}

[data-theme="dark"] .footer-divider {
  background: linear-gradient(90deg, transparent, rgb(var(--default-300)), transparent);
}

/* Enhanced Footer with semantic colors */
.footer {
  border-top: var(--border-width) solid rgba(var(--divider), var(--divider-opacity));
  padding: 28px 0 40px;
  background: rgb(var(--background));
}

.foot-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 20px;
}

.foot-brand {
  flex-shrink: 0;
}

.foot-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

.foot-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.foot-social {
  display: flex;
  gap: 12px;
}

.foot-social a {
  color: rgb(var(--default-500));
  transition: color 0.25s ease;
}

.foot-social a:hover {
  color: rgb(var(--foreground));
}

.foot-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.local-clock {
  background: linear-gradient(135deg, rgb(var(--content1)) 0%, rgb(var(--content2)) 100%);
  border: var(--border-width) solid rgb(var(--default-200));
  border-radius: var(--radius-medium);
  padding: 8px 12px;
  box-shadow: var(--shadow-small);
  transition: all 0.25s ease;
}

.local-clock:hover {
  box-shadow: var(--shadow-medium);
  border-color: rgb(var(--default-300));
}

.clock-display {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: system-ui, -apple-system, sans-serif;
}

.clock-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 24px;
}

.clock-segment:first-child {
  min-width: 36px; /* Year segment needs more space */
}

.clock-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--foreground));
  line-height: 1;
}

.clock-label {
  font-size: 0.625rem;
  color: rgb(var(--default-500));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.clock-separator {
  font-size: 0.875rem;
  color: rgb(var(--default-500));
  margin: 0 1px;
  align-self: flex-start;
  line-height: 1.2;
}

.language-select {
  padding: 4px 8px;
  border: var(--border-width) solid rgb(var(--default-200));
  border-radius: var(--radius-small);
  background: rgb(var(--content1));
  color: rgb(var(--foreground));
  font-size: 0.875rem;
  transition: all 0.25s ease;
}

.language-select:hover {
  border-color: rgb(var(--default-300));
  box-shadow: var(--shadow-small);
}

.language-select:focus {
  outline: none;
  border-color: rgb(var(--focus));
  box-shadow: 0 0 0 3px rgba(var(--focus), 0.2);
}

/* Enhanced Animations and Transitions */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Theme transition optimization */
* {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Prevent transitions during theme initialization */
.no-transition * {
  transition: none !important;
}

/* Enhanced focus styles for accessibility */
*:focus-visible {
  outline: 2px solid rgb(var(--focus));
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Enhanced hover effects */
.card:hover:not(.hero-media),
.btn:hover,
.auth-btn:hover {
  transform: translateY(-2px);
}

/* Prevent hero media card from moving */
.hero-media.card:hover {
  transform: translateX(-20px); /* Keep original position */
}

/* Loading state styles */
.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Theme-aware selection colors */
::selection {
  background: rgba(var(--primary), 0.2);
  color: rgb(var(--foreground));
}

::-moz-selection {
  background: rgba(var(--primary), 0.2);
  color: rgb(var(--foreground));
}


/* Enhanced Modal Styles with HeroUI design */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--overlay), var(--overlay-opacity));
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: rgb(var(--content1));
  border: var(--border-width) solid rgb(var(--default-200));
  border-radius: var(--radius-large);
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-large);
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.25s ease;
}

.modal-header {
  padding: 24px 24px 16px;
  text-align: center;
  position: relative;
  border-bottom: var(--border-width) solid rgba(var(--divider), var(--divider-opacity));
}

.modal-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: rgb(var(--foreground));
}

.modal-subtitle {
  color: rgb(var(--default-500));
  font-size: 0.875rem;
  margin: 0;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: rgb(var(--default-500));
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.modal-close:hover {
  background: rgb(var(--default-100));
  color: rgb(var(--foreground));
  transform: scale(1.1);
}

.modal-body {
  padding: 24px;
}
.auth-btn {
  width: 100%;
  padding: 12px 16px;
  border: var(--border-width) solid rgb(var(--default-200));
  border-radius: var(--radius-medium);
  background: rgb(var(--content1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 16px;
  color: rgb(var(--foreground));
}

.auth-btn:hover {
  box-shadow: var(--shadow-medium);
  border-color: rgb(var(--default-300));
  transform: translateY(-1px);
}

.google-icon, .github-icon {
  flex-shrink: 0;
}

.github-btn {
  border-color: rgb(var(--default-300));
  background: rgb(var(--content2));
}
.github-btn:hover{border-color:#333;box-shadow:0 2px 8px rgba(0,0,0,.15);background:#f6f8fa}
.divider{text-align:center;margin:20px 0;position:relative;color:rgb(var(--default-500));font-size:.875rem}
.divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgb(var(--default-200));z-index:1}
.divider span{background:rgb(var(--content1));padding:0 16px;position:relative;z-index:2}
.signin-form{margin-top:8px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.875rem;font-weight:500;color:rgb(var(--foreground));margin-bottom:6px}
.form-group input{width:100%;padding:12px 16px;border:1px solid rgb(var(--default-200));border-radius:8px;font-size:.875rem;background:rgb(var(--content1));color:rgb(var(--foreground));transition:border-color .2s ease}
.form-group input:focus{outline:none;border-color:rgb(var(--primary));box-shadow:0 0 0 3px rgba(var(--primary), 0.1)}
.form-group input::placeholder{color:rgb(var(--default-500))}
.phone-input{display:flex;gap:8px;position:relative}
.phone-input input{flex:1}

/* Country Selector */
.country-selector{position:relative;min-width:120px}
.country-button{width:100%;padding:12px 16px;border:1px solid rgb(var(--default-200));border-radius:8px;background:rgb(var(--content1));display:flex;align-items:center;gap:8px;font-size:.875rem;cursor:pointer;transition:all .2s ease}
.country-button:hover{border-color:rgb(var(--default-300));box-shadow:var(--shadow-small)}
.country-button:focus{outline:none;border-color:rgb(var(--primary));box-shadow:0 0 0 3px rgba(var(--primary), 0.1)}
.country-flag{font-size:.75rem;line-height:1;font-weight:600;color:rgb(var(--default-600));background:rgb(var(--default-100));padding:2px 6px;border-radius:4px;min-width:24px;text-align:center}
.country-code{color:rgb(var(--foreground));font-weight:500;flex:1;text-align:left}
.dropdown-arrow{color:rgb(var(--default-500));transition:transform .2s ease;margin-left:auto}
.country-button.open .dropdown-arrow{transform:rotate(180deg)}

/* Country Dropdown */
.country-dropdown{position:absolute;top:100%;left:0;min-width:300px;background:rgb(var(--content1));border:1px solid rgb(var(--default-200));border-radius:8px;box-shadow:var(--shadow-large);z-index:1001;max-height:180px;overflow:hidden;display:none;margin-top:4px}
.country-dropdown.open{display:block;animation:dropdownSlide .2s ease-out}
@keyframes dropdownSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.country-search{padding:12px;border-bottom:1px solid rgb(var(--default-200))}
.country-search input{width:100%;padding:8px 12px;border:1px solid rgb(var(--default-200));border-radius:6px;font-size:.875rem;background:rgb(var(--content2));color:rgb(var(--foreground))}
.country-search input:focus{outline:none;border-color:rgb(var(--primary));background:rgb(var(--content1))}
.country-list{max-height:96px;overflow-y:auto}
.country-list::-webkit-scrollbar{width:6px}
.country-list::-webkit-scrollbar-track{background:rgb(var(--default-100));border-radius:3px}
.country-list::-webkit-scrollbar-thumb{background:rgb(var(--default-300));border-radius:3px}
.country-list::-webkit-scrollbar-thumb:hover{background:rgb(var(--default-400))}
.country-item{padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background-color .2s ease;font-size:.875rem}
.country-item:hover{background:rgb(var(--default-100))}
.country-item.selected{background:rgb(var(--primary-100));color:rgb(var(--primary))}
.country-item .country-flag{font-size:.75rem;width:32px;text-align:center;font-weight:600;color:rgb(var(--default-600));background:rgb(var(--default-100));padding:2px 4px;border-radius:3px}
.country-item .country-name{flex:1;color:rgb(var(--foreground));font-weight:400;font-size:.875rem}
.country-item .country-code{color:rgb(var(--default-500));font-weight:500;font-family:ui-monospace,SFMono-Regular,'SF Mono',Monaco,Inconsolata,'Roboto Mono',monospace;font-size:.8125rem;min-width:40px;text-align:right}
.country-item.selected .country-code{color:rgb(var(--primary))}
.country-item.selected .country-name{font-weight:500}
.continue-btn{width:100%;padding:12px 16px;background:#8B5CF6;color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:8px}
.continue-btn:hover{background:#7C3AED;transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,.3)}
.modal-footer{margin-top:24px;text-align:center;font-size:.875rem}
.modal-footer p{margin:0 0 16px;color:rgb(var(--default-500))}
.modal-footer a{color:rgb(var(--primary));text-decoration:none;font-weight:500}
.modal-footer a:hover{text-decoration:underline}
.secured-by{color:rgb(var(--default-500));font-size:.75rem}
.secured-by strong{color:rgb(var(--foreground))}

@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .hero .hero-media{transform:none}
  .demo-video{width:100%}
  .video-modal-content{width:95%;max-height:85%}
  .video-modal-close{top:-40px;width:36px;height:36px;font-size:20px}
  .pricing-grid{grid-template-columns:1fr}
  .nav-left{flex-direction:column;gap:.5rem;align-items:flex-start}
  .nav-links{display:none}
  .foot-content{flex-direction:column;gap:20px}
  .foot-sections{align-items:flex-start}
  .foot-controls{flex-direction:column;gap:8px;align-items:flex-start}
  .clock-display{gap:1px}
  .clock-segment{min-width:20px}
  .clock-segment:first-child{min-width:32px}
  .clock-value{font-size:.75rem}
  .clock-label{font-size:.5rem}
  .modal-content{width:95%;margin:20px}
  .modal-header{padding:20px 20px 16px}
  .modal-body{padding:20px}
  .country-selector{min-width:100px}
  .country-button{padding:10px 12px}
  .country-dropdown{max-height:160px}
  .country-list{max-height:80px}
}