/* Omniatix Holding — Brand System V2 */

:root {
   /* Brand Colors — Holding palette: navy + paper + white + mute */
   --navy:        #0B1426;
   --navy-2:      #142036;
   --paper:       #F4F1EA;
   --paper-2:     #EAE6DC;
   --white:       #FFFFFF;
   --mute:        #6B7280;
   --line:        #DCD6C9;
   --coral:       #F26522; /* Spark only — never as general accent */

   /* Semantic aliases (dark surface) */
   --color-bg-body:          var(--navy);
   --color-bg-card:          rgba(11, 20, 38, 0.7);
   --color-bg-glass:         rgba(255, 255, 255, 0.03);
   --color-border-subtle:    rgba(220, 214, 201, 0.12); /* --line at 12% */
   --color-text-primary:     var(--white);
   --color-text-secondary:   var(--mute);
   --color-text-dim:         rgba(107, 114, 128, 0.6);  /* mute at 60% */

   /* Typography — Geist only */
   --font-heading: 'Geist', system-ui, -apple-system, sans-serif;
   --font-body:    'Geist', system-ui, -apple-system, sans-serif;
   --font-mono:    'Geist Mono', ui-monospace, monospace;

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

   /* 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);
   font-size: 17px;
   line-height: 1.55;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

/* Typography — Brand scale */
h1, h2, h3, h4 {
   font-family: var(--font-heading);
   font-weight: 600;
   letter-spacing: -0.025em;
}

.text-hero {
   font-size: clamp(3rem, 8vw, 96px);
   line-height: 0.95;
   font-weight: 600;
   letter-spacing: -0.035em;
   color: var(--white);
}

.text-section {
   font-size: clamp(2rem, 4vw, 48px);
   line-height: 1.1;
   font-weight: 600;
   letter-spacing: -0.025em;
}

/* Eyebrow — Geist Mono 500 11px uppercase +14% spacing */
.text-label {
   font-family: var(--font-mono);
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 0.14em;
   font-weight: 500;
   line-height: 1;
}

/* UI / Caption — Geist 500 13px */
.nav-link, .btn {
   font-family: var(--font-mono);
   text-transform: uppercase;
   font-size: 13px;
   letter-spacing: 0.14em;
   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);
   border: 1px solid var(--color-border-subtle);
}

.bg-body {
   background-color: var(--color-bg-body);
}

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

/* Buttons */
.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);
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

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

.btn-tech-primary {
   background: var(--white);
   color: var(--navy);
   border-color: var(--white);
}

.btn-tech-primary:hover {
   background: var(--paper);
   border-color: var(--paper);
}

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

/* Card */
.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: var(--navy-2);
}

/* Animations */
.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 */
.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 */
.mobile-menu-overlay {
   display: none;
   position: fixed;
   top: var(--header-height);
   left: 0;
   width: 100%;
   height: calc(100vh - var(--header-height));
   background: rgba(11, 20, 38, 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 (max-width: 768px) {
   .mobile-menu-btn {
      display: flex;
   }

   .mobile-menu-overlay {
      display: flex;
   }

   :root {
      --header-height: 60px;
   }

   .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: 11px;
   }

   .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;
}