/* Omniatix Design System V2: Antigravity Aesthetic */

:root {
   /* Colors - Deep & Technical */
   --color-bg-body: #020617;
   /* Slate 950 */
   --color-bg-card: rgba(2, 6, 23, 0.7);
   --color-bg-glass: rgba(255, 255, 255, 0.03);

   --color-border-subtle: rgba(148, 163, 184, 0.1);
   /* Slate 400 at 10% */
   --color-border-highlight: rgba(99, 102, 241, 0.5);
   /* Indigo 500 at 50% */

   --color-text-primary: #f8fafc;
   /* Slate 50 */
   --color-text-secondary: #94a3b8;
   /* Slate 400 */
   --color-text-dim: #475569;
   /* Slate 600 */

   --color-accent: #6366f1;
   /* Electric Indigo */
   --color-accent-glow: rgba(99, 102, 241, 0.15);

   /* Typography */
   --font-heading: 'Inter', -apple-system, sans-serif;
   --font-body: 'Inter', -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   /* Tech feel */

   /* Spacing & Layout */
   --container-width: 1400px;
   --header-height: 80px;
   --grid-gap: 1px;
   /* Gap for border lines */

   /* Animation */
   --trans-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   --trans-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background-color: var(--color-bg-body);
   color: var(--color-text-primary);
   font-family: var(--font-body);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

/* Typography Overrides for V2 */
h1,
h2,
h3,
h4 {
   font-family: var(--font-heading);
   letter-spacing: -0.04em;
   /* Tight tracking */
   font-weight: 500;
}

.text-hero {
   font-size: clamp(3rem, 8vw, 6.5rem);
   line-height: 1.05;
   font-weight: 600;
   letter-spacing: -0.05em;
   background: linear-gradient(to bottom right, #fff 30%, #94a3b8 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.text-section {
   font-size: clamp(2rem, 4vw, 3.5rem);
   line-height: 1.1;
   letter-spacing: -0.03em;
}

.text-label,
.nav-link,
.btn {
   font-family: var(--font-mono);
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
   font-weight: 500;
}

/* Utilities */
.container {
   max-width: var(--container-width);
   margin: 0 auto;
   padding: 0 2rem;
   width: 100%;
}

.flex {
   display: flex;
}

.hidden-mobile {
   display: flex;
}

@media (max-width: 768px) {
   .hidden-mobile {
      display: none !important;
   }
}

.grid-tech {
   display: grid;
   gap: 1px;
   background-color: var(--color-border-subtle);
   /* Shows lines between cells */
   border: 1px solid var(--color-border-subtle);
}

.bg-body {
   background-color: var(--color-bg-body);
   /* To cover grid gap bg */
}

/* Header V2 */
.header-v2 {
   position: fixed;
   top: 0;
   width: 100%;
   height: var(--header-height);
   background: rgba(2, 6, 23, 0.8);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--color-border-subtle);
   z-index: 100;
   display: flex;
   align-items: center;
}

/* Buttons V2 (Technical) */
.btn-tech {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 40px;
   padding: 0 1.5rem;
   border: 1px solid var(--color-border-subtle);
   border-radius: 4px;
   background: transparent;
   color: var(--color-text-primary);
   transition: all var(--trans-fast);
   text-decoration: none;
   font-family: var(--font-mono);
}

.btn-tech:hover {
   border-color: var(--color-text-secondary);
   background: var(--color-bg-glass);
}

.btn-tech-primary {
   background: var(--color-text-primary);
   color: var(--color-bg-body);
   border-color: var(--color-text-primary);
}

.btn-tech-primary:hover {
   background: #e2e8f0;
}

/* Sections */
.section-v2 {
   padding: 8rem 0;
   border-bottom: 1px solid var(--color-border-subtle);
   position: relative;
}

/* Card V2 */
.card-v2 {
   background: var(--color-bg-body);
   padding: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 300px;
   transition: background var(--trans-smooth);
}

.card-v2:hover {
   background: linear-gradient(to bottom right, var(--color-bg-body), #0f172a);
}

/* Animations (Keep existing but refined) */
.fade-up {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
   opacity: 1;
   transform: translateY(0);
}

.blur-reveal {
   filter: blur(10px);
   opacity: 0;
   transform: scale(0.95);
   transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blur-reveal.visible {
   filter: blur(0);
   opacity: 1;
   transform: scale(1);
}

/* Mobile Menu Button - Base Styles (Hidden Desktop) */
.mobile-menu-btn {
   display: none;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 1px solid var(--color-border-subtle);
   color: var(--color-text-primary);
   width: 40px;
   height: 40px;
   border-radius: 4px;
   cursor: pointer;
   z-index: 101;
}

/* Mobile Menu Overlay - Base Styles (Hidden Desktop) */
.mobile-menu-overlay {
   display: none;
   position: fixed;
   top: var(--header-height);
   left: 0;
   width: 100%;
   height: calc(100vh - var(--header-height));
   background: rgba(2, 6, 23, 0.95);
   backdrop-filter: blur(16px);
   z-index: 99;
   transform: translateX(100%);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   flex-direction: column;
   padding: 2rem;
   border-top: 1px solid var(--color-border-subtle);
}

.mobile-menu-overlay.open {
   transform: translateX(0);
}

.mobile-nav-link {
   font-family: var(--font-heading);
   font-size: 2rem;
   color: var(--color-text-primary);
   text-decoration: none;
   margin-bottom: 2rem;
   font-weight: 500;
   opacity: 0;
   transform: translateX(20px);
   transition: all 0.4s ease;
}

.mobile-menu-overlay.open .mobile-nav-link {
   opacity: 1;
   transform: translateX(0);
}



/* Mobile Media Query Activations */
@media (max-width: 768px) {
   .mobile-menu-btn {
      display: flex;
      /* Show on mobile */
   }

   .mobile-menu-overlay {
      display: flex;
      /* Flex layout on mobile */
   }

   /* Mobile Header Adjustments */
   :root {
      --header-height: 60px;
   }

   /* ... (Rest of Mobile Styles) ... */
   .text-hero {
      font-size: 3.5rem;
      word-break: break-word;
   }

   .text-section {
      font-size: 1.75rem;
   }

   .container {
      padding: 0 1.25rem;
   }

   .section-v2 {
      padding: 4rem 0;
   }

   .grid-tech {
      grid-template-columns: 1fr !important;
   }

   .card-v2 {
      border-left: none !important;
      border-top: 1px solid var(--color-border-subtle) !important;
      padding: 2rem;
      min-height: auto;
   }

   .grid-tech>.card-v2:first-child {
      border-top: none !important;
   }

   .header-v2 .container {
      padding: 0 1rem;
   }

   .btn-tech {
      padding: 0 1rem;
      font-size: 0.7rem;
   }

   .hidden-mobile {
      display: none !important;
   }
}
/* WhatsApp Floating Button */
.wa-float {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   background-color: #25d366;
   color: white;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   z-index: 1000;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   text-decoration: none;
}

.wa-float:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.wa-float svg {
   width: 32px;
   height: 32px;
   fill: currentColor;
}