/**
 * VarkaSolar Industrial-Elite Design System (v62.2)
 * Architecture: Component-First / Token-Driven / Ultra-Premium.
 * Hardened: Refined Density / Optimized Spacing / Visual Elevation.
 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* High-Fidelity Palette (Gold & Obsidian) — Synced with design-tokens.css */
  --vs-brand: var(--color-brand-yellow-hsl);
  --vs-brand-rgb: var(--color-primary-rgb);
  --vs-brand-deep: 47, 100%, 45%;
  --vs-obsidian: var(--color-brand-black-hsl);
  --vs-slate: 215, 25%, 27%; /* #334155 */
  --vs-bg: 210, 40%, 99%; /* Pearl */
  --vs-bg-soft: 210, 40%, 98%;
  --vs-border: 210, 40%, 96%;
  --vs-border-hover: 214, 32%, 91%;
  
  /* Precision Spacing (Hardened Density) */
  --vs-gutter: clamp(16px, 4vw, 32px);
  --vs-container: 1200px; /* High-density workspace width */
  --vs-radius-xl: 24px;
  --vs-radius-lg: 16px;
  --vs-radius-md: 10px;
  --vs-section-y: clamp(64px, 12vh, 100px);
  
  /* Layered Shadows (Apple-Elite Spec) */
  --vs-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.02);
  --vs-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.06);
  --vs-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08);
  --vs-shadow-elite: 0 30px 60px -15px rgba(15, 23, 42, 0.12), 0 0 1px rgba(15, 23, 42, 0.08);
  
  /* Navigation & UI Tokens */
  --vs-topbar-h: 40px;
  --vs-header-h: 80px;
  --vs-header-h-scrolled: 64px;
  --vs-app-nav-h: 72px;
  --vs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vs-mobile-nav-bg: rgba(255,255,255,0.92);
  --vs-mobile-nav-blur: blur(20px) saturate(180%);
  --vs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vs-transition: 0.4s var(--vs-ease);
  --vs-transition-slow: 0.8s var(--vs-ease);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

/* 1. RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { 
  font-family: 'Inter', -apple-system, sans-serif; 
  color: hsl(var(--vs-slate)); 
  background: hsl(var(--vs-bg));
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, h4, .vs-h1, .vs-h2, .vs-h3 { font-family: 'Outfit', sans-serif; color: hsl(var(--vs-obsidian)); }

/* 2. TYPOGRAPHY - FLUID & PREMIUM */
.vs-h1 { font-size: clamp(1.85rem, 5vw, 3rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
.vs-h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.vs-h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.vs-lead { font-size: clamp(0.9rem, 0.8vw + 0.4rem, 1rem); color: hsl(var(--vs-slate)); opacity: 0.7; max-width: 60ch; line-height: 1.6; text-wrap: pretty; font-weight: 500; }
.vs-text-brand { color: hsl(var(--vs-brand)); text-shadow: 0 0 20px hsla(var(--vs-brand), 0.1); }

/* 3. LAYOUT ENGINE */
.vs-container { width: 92%; max-width: var(--vs-container); margin: 0 auto; }
.vs-section { padding: var(--vs-section-y) 0; }
.vs-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--vs-gutter); width: 100%; }

/* 4. COMPONENTS - THE NODE-ELITE SPEC */
.vs-card {
  background: #FFF;
  border: 1px solid hsl(var(--vs-border));
  border-radius: var(--vs-radius-lg);
  padding: 32px;
  transition: all 0.5s var(--vs-ease);
  position: relative;
  overflow: hidden;
  box-shadow: var(--vs-shadow-sm);
}
.vs-card:hover { 
  transform: translateY(-6px); 
  border-color: hsla(var(--vs-brand), 0.3); 
  box-shadow: var(--vs-shadow-elite); 
}
.vs-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, hsla(var(--vs-brand), 0.5), transparent);
  transform: translateX(-100%); transition: transform 0.6s var(--vs-ease);
}
.vs-card:hover::before { transform: translateX(100%); }

.vs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 28px; border-radius: 12px;
  font-weight: 900; text-decoration: none;
  transition: all 0.4s var(--vs-ease);
  cursor: pointer; border: 2px solid transparent;
  font-size: 0.8rem; user-select: none;
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.vs-btn:active { transform: scale(0.96) translateY(2px); }

/* Varka Gold (Signature CTA) */
.vs-btn-primary, .vs-btn-varka, .vs-btn--primary, .vs-btn--varka { 
  background: hsl(var(--vs-brand)); 
  color: #000; 
  box-shadow: 0 10px 25px -5px hsla(var(--vs-brand), 0.4);
}
.vs-btn-primary:hover, .vs-btn-varka:hover, .vs-btn--primary:hover, .vs-btn--varka:hover { 
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px -10px hsla(var(--vs-brand), 0.6);
  background: hsl(var(--vs-brand-deep));
}

/* Obsidian (Premium Alternative) */
.vs-btn-obsidian, .vs-btn--obsidian {
  background: hsl(var(--vs-obsidian));
  color: #FFF;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
}
.vs-btn-obsidian:hover, .vs-btn--obsidian:hover {
  transform: translateY(-3px) scale(1.02);
  background: #000;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
}

/* Outline (Ghost State) */
.vs-btn-outline, .vs-btn--outline { 
  background: transparent; 
  border: 2px solid hsl(var(--vs-border-hover)); 
  color: hsl(var(--vs-obsidian)); 
}
.vs-btn-outline:hover, .vs-btn--outline:hover { 
  background: hsl(var(--vs-bg-soft)); 
  border-color: hsl(var(--vs-obsidian)); 
  transform: translateY(-3px); 
}

/* Button with Icon Animation */
.vs-btn svg { width: 18px; height: 18px; transition: transform 0.4s var(--vs-ease); }
.vs-btn:hover svg { transform: translateX(5px); }

/* 5. NAVIGATION - THEME ENGINE */
.vs-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 5000;
  transition: all 0.5s var(--vs-ease);
}
.vs-header.theme-dark .vs-nav-link { color: #FFF; opacity: 0.8; }
.vs-header.theme-light .vs-nav-link { color: #000; opacity: 1; }

.vs-header.is-scrolled, .vs-header.vs-header-glass {
  background: rgba(255,255,255,0.85); 
  backdrop-filter: blur(20px) saturate(180%);
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.vs-header.is-scrolled .vs-nav-link, .vs-header.vs-header-glass .vs-nav-link { color: #000 !important; opacity: 1 !important; }

/* Visibility Insurance for Logo */
.theme-light .vs-logo-dark, .is-scrolled .vs-logo-dark {
   filter: drop-shadow(0 2px 10px rgba(0,0,0,0.05));
}
.theme-dark .vs-logo-light {
   filter: drop-shadow(0 2px 15px rgba(255,255,255,0.1));
}

.vs-nav-menu { display: flex; align-items: center; gap: 24px; list-style: none; }
.vs-nav-link { 
  font-weight: 800; font-size: 0.7rem; text-transform: uppercase; 
  letter-spacing: 1px; color: hsl(var(--vs-obsidian)); text-decoration: none;
  transition: all 0.3s; position: relative; opacity: 0.5;
  font-family: 'Outfit', sans-serif;
}
.vs-nav-link:hover { color: hsl(var(--vs-brand-deep)); opacity: 1; }
.vs-nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: hsl(var(--vs-brand)); transition: width 0.3s var(--vs-ease);
}
.vs-nav-link:hover::after { width: 100%; }

/* Mobile Navigation Staggered Hub */
.vs-mobile-link {
   display: flex; align-items: center; gap: 20px;
   font-size: 1.85rem; font-weight: 900;
   color: hsl(var(--vs-obsidian));
   text-decoration: none;
   margin-bottom: 24px;
   letter-spacing: -0.5px;
   transition: all 0.4s var(--vs-ease);
   font-family: 'Outfit';
   opacity: 0; transform: translateX(20px);
}
.vs-mobile-overlay.is-open .vs-mobile-link {
   opacity: 1; transform: translateX(0);
}
.vs-mobile-link:nth-child(1) { transition-delay: 0.1s; }
.vs-mobile-link:nth-child(2) { transition-delay: 0.15s; }
.vs-mobile-link:nth-child(3) { transition-delay: 0.2s; }
.vs-mobile-link:nth-child(4) { transition-delay: 0.25s; }
.vs-mobile-link:nth-child(5) { transition-delay: 0.3s; }
.vs-mobile-link:nth-child(6) { transition-delay: 0.35s; }

.vs-mobile-link:hover {
   color: hsl(var(--vs-brand-deep));
   transform: translateX(12px) !important;
}

/* 6. UTILITIES */
.vs-glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,0.2); }
.vs-badge-elite {
  display: inline-block;
  background: rgba(var(--vs-brand-rgb), 0.1);
  color: hsl(var(--vs-brand-deep)); padding: 6px 14px; border-radius: 100px;
  font-weight: 900; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.5px;
  border: none; font-family: 'Outfit', sans-serif;
}

/* 7. REVEAL ENGINE v3 - ULTRA SMOOTH */
.vs-reveal { opacity: 1; transform: none; transition: 0.8s var(--vs-ease); }
.js-anim-ready .vs-reveal:not(.is-visible) { opacity: 0; transform: translateY(15px); }
.js-anim-ready .vs-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Header Branding Spacing Fix (Desktop Sovereignty) */
.vs-header .vs-nav-link { white-space: nowrap !important; }
.vs-header .vs-container { max-width: var(--vs-container); }
.vs-logo { max-width: 180px; width: 100%; height: auto; }

/* 8. MOBILE ADAPTATIONS - HARDENING */
@media (max-width: 1200px) {
  :root { --vs-container: 960px; }
}

@media (max-width: 1024px) {
  :root { --vs-container: 720px; --vs-gutter: 24px; }
  .vs-grid-12 { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .vs-nav-menu { display: none; }
  .vs-header { padding: 16px 0; }
  .vs-logo { max-width: 140px; }
  
  /* Hardened Stacking for Mid-size tablets */
  [style*="grid-column: span"] { 
    grid-column: span 6 !important; 
  }
  [style*="grid-column: span 12"], [style*="grid-column: span 8"], [style*="grid-column: span 7"] { 
    grid-column: span 12 !important; 
  }
}

@media (max-width: 768px) {
  :root { --vs-container: 100%; --vs-section-y: 64px; }
  .vs-grid-12 { grid-template-columns: repeat(12, 1fr); gap: 32px; }
  .vs-section { padding: 48px 0; }
  .vs-h1 { font-size: 2.1rem; line-height: 1.1; }
  .vs-h2 { font-size: 1.65rem; }
  .vs-card { padding: 24px; border-radius: 16px; }
  .vs-btn { width: 100%; padding: 0 16px; min-height: 48px; font-size: 0.85rem; }
  
  /* Forced Full-Width for all grid spans on Mobile */
  div[style*="grid-column: span"], 
  section[style*="grid-column: span"],
  aside[style*="grid-column: span"],
  article[style*="grid-column: span"] { 
    grid-column: span 12 !important; 
    width: 100% !important; 
    margin: 0 !important; 
  }

  .vs-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 769px) {
    .vs-form-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  }

  .vs-grid-reverse-mobile { display: flex; flex-direction: column-reverse; }
  
  /* Precision Input Hardening for XS Devices */
  .vs-input-elite { font-size: 16px !important; padding: 12px 16px !important; }
}

/* 11. ANIMATION ENGINE - SOVEREIGN SPEC */
@keyframes vs-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vs-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes vs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vs-anim-slide-up { animation: vs-slide-up 0.6s var(--vs-ease) forwards; }
.vs-anim-fade-in { animation: vs-fade-in 0.5s var(--vs-ease) forwards; }

/* 12. MOBILE UTILITIES - PRECISION HARDENING */
@media (max-width: 768px) {
  .vs-mobile-1col { grid-template-columns: 1fr !important; }
  .vs-mobile-text-center { text-align: center !important; }
  .vs-mobile-hide { display: none !important; }
  .vs-mobile-p-sm { padding: 16px !important; }
  .vs-mobile-gap-sm { gap: 16px !important; }
  .vs-mobile-mb-sm { margin-bottom: 16px !important; }
  .vs-mobile-mb-md { margin-bottom: 32px !important; }
  
  /* Resetting nested grids */
  .vs-grid-12 > div { width: 100% !important; }
}

.vs-haptic { transition: transform 0.1s var(--vs-ease); cursor: pointer; }
.vs-haptic:active { transform: scale(0.94) !important; }

.vs-trust-strip {
  display: flex; justify-content: center; align-items: center; gap: 48px;
  padding: 40px 0; opacity: 0.4; filter: grayscale(1);
  transition: opacity 0.4s; flex-wrap: wrap;
}
.vs-trust-strip:hover { opacity: 0.8; filter: grayscale(0); }
.vs-trust-logo { height: 32px; width: auto; object-fit: contain; }


@media (max-width: 480px) {
  .vs-h1 { font-size: 1.85rem; }
  .vs-lead { font-size: 0.95rem; }
  .vs-container { width: 90%; }
}
/* Responsive Flex Utilities */
.vs-flex-stack { flex-direction: row; }
@media (max-width: 768px) {
  .vs-flex-stack { flex-direction: column !important; align-items: stretch !important; text-align: center; }
  .vs-flex-stack > div { width: 100% !important; max-width: 100% !important; }
}

.vs-img-fallback { filter: grayscale(1) sepia(1) hue-rotate(180deg); opacity: 0.3; }

/* 9. IMAGE ENGINE */
.vs-img-zoom { transition: transform 0.8s var(--vs-ease); }
.vs-card:hover .vs-img-zoom { transform: scale(1.05); }

/* 10. INTERACTIVE ELEMENTS */
input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--vs-brand)) !important; background: #FFF !important; }

/* 11. LIVE PULSE & INTERACTIVE ENGINE */
.vs-card, .vs-mini-card, .vs-visual-card {
  transition: all 0.5s var(--vs-ease);
  will-change: transform, box-shadow;
}
.vs-card:hover, .vs-mini-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 60px -12px rgba(var(--vs-brand-rgb), 0.15);
  border-color: hsla(var(--vs-brand), 0.2);
}
@keyframes vs-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.vs-pulse-active { animation: vs-pulse 2s infinite; }

.vs-whatsapp-float {
  position: fixed; bottom: 100px; right: 32px;
  width: 60px; height: 60px; background: #25D366;
  border-radius: 50%; display: flex !important; align-items: center; justify-content: center;
  z-index: 5400 !important; transition: all 0.4s var(--vs-ease);
  animation: vs-pulse 2s infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  overflow: hidden;
}
.vs-whatsapp-float:hover { transform: scale(1.1) translateY(-5px); }
.vs-whatsapp-float svg { 
  width: 32px !important; height: 32px !important; 
  min-width: 32px; min-height: 32px; 
  fill: #FFF; display: block; 
}


@media (max-width: 768px) {
  :root { --vs-topbar-h: 32px; }
  .vs-whatsapp-float { bottom: 100px; right: 20px !important; width: 56px !important; height: 56px !important; }
  .vs-h1 { letter-spacing: -0.02em !important; }

  /* 12. MOBILE APP-LIKE EXPERIENCE LAYER */
  .vs-mobile-app-nav {
    position: fixed; bottom: 0; left: 0; width: 100%;
    height: calc(var(--vs-app-nav-h) + var(--vs-safe-bottom));
    background: var(--vs-mobile-nav-bg);
    backdrop-filter: var(--vs-mobile-nav-blur);
    -webkit-backdrop-filter: var(--vs-mobile-nav-blur);
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex; justify-content: space-around; align-items: center;
    padding-bottom: var(--vs-safe-bottom);
    z-index: 9998;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
  }
  
  .vs-app-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-decoration: none; color: hsl(var(--vs-obsidian)); opacity: 0.6;
    transition: all 0.3s var(--vs-ease); width: 20%; height: 100%;
  }
  
  .vs-app-nav-item svg { width: 22px; height: 22px; stroke-width: 2; transition: transform 0.3s var(--vs-ease); }
  .vs-app-nav-item span { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Outfit'; }
  
  .vs-app-nav-item.active { opacity: 1; color: hsl(var(--vs-brand-deep)); }
  .vs-app-nav-item.active svg { transform: translateY(-2px); stroke-width: 2.5; }
  .vs-app-nav-item.active span { color: hsl(var(--vs-brand-deep)); }

  /* Haptic Feedback Simulation */
  .vs-haptic { transition: transform 0.1s var(--vs-ease); }
  .vs-haptic:active { transform: scale(0.92) !important; }

  /* Sticky ROI result bar for mobile */
  .vs-calc-sticky-bar {
    position: fixed; bottom: calc(var(--vs-app-nav-h) + var(--vs-safe-bottom));
    left: 0; width: 100%; background: hsl(var(--vs-obsidian)); color: #FFF;
    padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;
    z-index: 9997; border-top: 1px solid rgba(255,255,255,0.1);
    transform: translateY(100%); transition: transform 0.5s var(--vs-ease);
  }
  .vs-calc-sticky-bar.is-visible { transform: translateY(0); }
  
  /* Layout Padding adjustment for bottom nav */
  body.has-mobile-nav { padding-bottom: calc(var(--vs-app-nav-h) + var(--vs-safe-bottom) + 20px); }
}

@media (min-width: 769px) {
  .vs-mobile-app-nav, .vs-calc-sticky-bar { display: none !important; }
}

/* Phase 3: Specific Page Hardening */
.vs-lifecycle-grid { gap: 48px; }
@media (max-width: 1024px) {
   .vs-lifecycle-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
   .vs-lifecycle-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
}

.vs-study-card { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 991px) {
   .vs-study-card { grid-template-columns: 1fr !important; gap: 40px !important; }
   .vs-study-card > div:nth-child(1) { order: 2; }
   .vs-study-card > div:nth-child(2) { order: 1; }
}

/* Footer Hardening */
@media (max-width: 768px) {
   .vs-foot-main { gap: 48px !important; }
   .vs-foot-list { gap: 12px !important; }
   .vs-foot-list a { font-size: 0.85rem !important; }
   .vs-contact-value { font-size: 1.25rem !important; }
}

/* 10. FORM HARDENING & RESPONSIVENESS */
.vs-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .vs-form-row {
    grid-template-columns: 1fr;
  }
}

.vs-input:focus {
  border-color: hsl(var(--vs-brand)) !important;
  box-shadow: 0 0 0 4px hsla(var(--vs-brand-rgb), 0.1);
}

.vs-haptic {
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.vs-haptic:active {
  transform: scale(0.97);
}