/* Viasz Infotech — Premium Design System */



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



/* ─── CSS Variables ─── */

:root {

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --font-display: 'Plus Jakarta Sans', var(--font-sans);



  --color-bg: #fafbfc;

  --color-bg-elevated: #ffffff;

  --color-bg-subtle: #f1f5f9;

  --color-surface: rgba(255, 255, 255, 0.72);

  --color-surface-hover: rgba(255, 255, 255, 0.88);

  --color-border: rgba(15, 23, 42, 0.08);

  --color-border-strong: rgba(15, 23, 42, 0.14);



  --color-text: #0f172a;

  --color-text-secondary: #475569;

  --color-text-muted: #94a3b8;



  --color-primary: #6366f1;

  --color-primary-light: #818cf8;

  --color-primary-dark: #4f46e5;

  --color-accent: #8b5cf6;

  --color-accent-2: #06b6d4;

  --color-success: #10b981;

  --color-warning: #f59e0b;



  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);

  --gradient-hero: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 40%, #ecfeff 100%);

  --gradient-mesh: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99, 102, 241, 0.15), transparent),

                   radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139, 92, 246, 0.12), transparent),

                   radial-gradient(ellipse 50% 40% at 50% 80%, rgba(6, 182, 212, 0.1), transparent);



  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);

  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);

  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);

  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.16);

  --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.25);



  --glass-bg: rgba(255, 255, 255, 0.65);

  --glass-border: rgba(255, 255, 255, 0.5);

  --glass-blur: 20px;



  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 24px;

  --radius-2xl: 32px;

  --radius-full: 9999px;



  --header-height: 72px;

  --container-max: 1280px;

  --section-py: clamp(4rem, 8vw, 7rem);



  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

}



[data-theme="dark"] {

  --color-bg: #030712;

  --color-bg-elevated: #0f172a;

  --color-bg-subtle: #1e293b;

  --color-surface: rgba(15, 23, 42, 0.72);

  --color-surface-hover: rgba(30, 41, 59, 0.88);

  --color-border: rgba(255, 255, 255, 0.08);

  --color-border-strong: rgba(255, 255, 255, 0.14);



  --color-text: #f8fafc;

  --color-text-secondary: #cbd5e1;

  --color-text-muted: #64748b;



  --gradient-hero: linear-gradient(135deg, #030712 0%, #0f172a 40%, #1e1b4b 100%);

  --gradient-mesh: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99, 102, 241, 0.2), transparent),

                   radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139, 92, 246, 0.15), transparent),

                   radial-gradient(ellipse 50% 40% at 50% 80%, rgba(6, 182, 212, 0.12), transparent);



  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);

  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

  --shadow-glow: 0 0 80px rgba(99, 102, 241, 0.3);



  --glass-bg: rgba(15, 23, 42, 0.65);

  --glass-border: rgba(255, 255, 255, 0.08);

}



/* ─── Reset & Base ─── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



html {

  scroll-behavior: smooth;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  font-family: var(--font-sans);

  font-size: 16px;

  line-height: 1.6;

  color: var(--color-text);

  background: var(--color-bg);

  overflow-x: hidden;

  transition: background var(--transition-slow), color var(--transition-slow);

}



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

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

button { font-family: inherit; cursor: pointer; border: none; background: none; }

ul, ol { list-style: none; }



::selection {

  background: rgba(99, 102, 241, 0.3);

  color: var(--color-text);

}



:focus-visible {

  outline: 2px solid var(--color-primary);

  outline-offset: 3px;

}



/* ─── Layout ─── */

.container {

  width: 100%;

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 clamp(1rem, 4vw, 2rem);

}



.section {

  padding: var(--section-py) 0;

  position: relative;

}



.section-header {

  text-align: center;

  max-width: 720px;

  margin: 0 auto clamp(2.5rem, 5vw, 4rem);

}



.section-label {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.8125rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--color-primary);

  margin-bottom: 1rem;

}



.section-label::before,

.section-label::after {

  content: '';

  width: 24px;

  height: 1px;

  background: var(--color-primary);

  opacity: 0.5;

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(2rem, 4.5vw, 3.25rem);

  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -0.03em;

  color: var(--color-text);

  margin-bottom: 1rem;

}



.section-subtitle {

  font-size: clamp(1rem, 2vw, 1.1875rem);

  color: var(--color-text-secondary);

  line-height: 1.7;

}



.gradient-text {

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* ─── Scroll Progress ─── */

.scroll-progress {

  position: fixed;

  top: 0;

  left: 0;

  height: 3px;

  width: 0%;

  background: var(--gradient-primary);

  z-index: 10001;

  transition: width 50ms linear;

}



/* ─── Page Loader ─── */

.page-loader {

  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-bg);

  transition: opacity 0.5s ease, visibility 0.5s ease;

}



.page-loader.hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.loader-ring {

  width: 48px;

  height: 48px;

  border: 3px solid var(--color-border);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

}



/* ─── Cursor Glow ─── */

.cursor-glow {

  position: fixed;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);

  pointer-events: none;

  z-index: 0;

  transform: translate(-50%, -50%);

  transition: opacity 0.3s ease;

  opacity: 0;

}



@media (hover: hover) and (pointer: fine) {

  .cursor-glow { opacity: 1; }

}



/* ─── Background Effects ─── */

.bg-mesh {

  position: absolute;

  inset: 0;

  background: var(--gradient-mesh);

  pointer-events: none;

  z-index: 0;

}



.bg-grid {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(var(--color-border) 1px, transparent 1px),

    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);

  background-size: 64px 64px;

  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);

  pointer-events: none;

  z-index: 0;

  opacity: 0.5;

}



.particles-canvas {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 0;

}



/* ─── Glass Panel ─── */

.glass {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border: 1px solid var(--glass-border);

}



.glass-card {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-xl);

  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);

}



.glass-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

  border-color: rgba(99, 102, 241, 0.3);

}



/* ─── Buttons ─── */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.75rem 1.5rem;

  font-size: 0.9375rem;

  font-weight: 600;

  border-radius: var(--radius-full);

  transition: all var(--transition-base);

  position: relative;

  overflow: hidden;

  white-space: nowrap;

}



.btn-primary {

  background: var(--gradient-primary);

  color: #fff;

  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);

}



.btn-primary:hover {

  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.45);

  transform: translateY(-2px);

}



.btn-secondary {

  background: var(--color-bg-elevated);

  color: var(--color-text);

  border: 1px solid var(--color-border-strong);

}



.btn-secondary:hover {

  border-color: var(--color-primary);

  background: var(--color-bg-subtle);

}



.btn-ghost {

  color: var(--color-text-secondary);

  padding: 0.5rem 1rem;

}



.btn-ghost:hover { color: var(--color-primary); }



.btn-lg {

  padding: 1rem 2rem;

  font-size: 1.0625rem;

}



.btn-icon {

  width: 44px;

  height: 44px;

  padding: 0;

  border-radius: var(--radius-md);

}



.btn-magnetic {

  will-change: transform;

}



/* Ripple */

.btn .ripple {

  position: absolute;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);

  transform: scale(0);

  animation: ripple 0.6s ease-out;

  pointer-events: none;

}



/* ─── Header / Nav ─── */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  height: var(--header-height);

  transition: background var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);

}



.site-header.scrolled {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border-bottom: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

}



.nav-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: var(--header-height);

  gap: 2rem;

}



.nav-logo {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-shrink: 0;

}



.nav-logo img {

  width: 44px;

  height: 44px;

  border-radius: var(--radius-md);

}



.nav-logo-text h1 {

  font-family: var(--font-display);

  font-size: 1.0625rem;

  font-weight: 700;

  line-height: 1.2;

}



.nav-logo-text span {

  font-size: 0.75rem;

  color: var(--color-text-muted);

  font-weight: 500;

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 0.25rem;

}



.nav-item {

  position: relative;

}



.nav-link {

  display: flex;

  align-items: center;

  gap: 0.25rem;

  padding: 0.5rem 0.875rem;

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--color-text-secondary);

  border-radius: var(--radius-md);

  transition: color var(--transition-fast), background var(--transition-fast);

}



.nav-link:hover,

.nav-link.active {

  color: var(--color-text);

  background: var(--color-bg-subtle);

}



.nav-link .underline {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 0;

  height: 2px;

  background: var(--gradient-primary);

  border-radius: 1px;

  transition: width var(--transition-base), left var(--transition-base);

}



.nav-link:hover .underline,

.nav-link.active .underline {

  width: 60%;

  left: 20%;

}



.nav-actions {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



/* Mega Menu */

.mega-menu {

  position: absolute;

  top: calc(100% + 8px);

  left: 50%;

  transform: translateX(-50%) translateY(8px);

  min-width: 640px;

  padding: 1.5rem;

  background: var(--glass-bg);

  backdrop-filter: blur(24px);

  -webkit-backdrop-filter: blur(24px);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-xl);

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-base);

  pointer-events: none;

}



.nav-item:hover .mega-menu,

.nav-item:focus-within .mega-menu {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

  pointer-events: auto;

}



.mega-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.5rem;

}



.mega-link {

  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  padding: 0.875rem;

  border-radius: var(--radius-md);

  transition: background var(--transition-fast);

}



.mega-link:hover { background: var(--color-bg-subtle); }



.mega-link-icon {

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-sm);

  background: rgba(99, 102, 241, 0.1);

  color: var(--color-primary);

  flex-shrink: 0;

}



.mega-link-text strong {

  display: block;

  font-size: 0.875rem;

  font-weight: 600;

  margin-bottom: 0.125rem;

}



.mega-link-text span {

  font-size: 0.75rem;

  color: var(--color-text-muted);

  line-height: 1.4;

}



/* Search */

.nav-search {

  position: relative;

}



.search-toggle { color: var(--color-text-secondary); }



.search-panel {

  position: absolute;

  top: calc(100% + 12px);

  right: 0;

  width: 320px;

  padding: 1rem;

  background: var(--glass-bg);

  backdrop-filter: blur(24px);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  opacity: 0;

  visibility: hidden;

  transform: translateY(8px);

  transition: all var(--transition-base);

}



.search-panel.open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.search-input {

  width: 100%;

  padding: 0.75rem 1rem 0.75rem 2.5rem;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-bg-elevated);

  color: var(--color-text);

  font-size: 0.875rem;

}



.search-input:focus {

  outline: none;

  border-color: var(--color-primary);

}



.theme-toggle {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-md);

  color: var(--color-text-secondary);

  transition: background var(--transition-fast), color var(--transition-fast);

}



.theme-toggle:hover {

  background: var(--color-bg-subtle);

  color: var(--color-text);

}



/* Mobile Nav */

.mobile-toggle {

  display: none;

  width: 44px;

  height: 44px;

  align-items: center;

  justify-content: center;

  color: var(--color-text);

}



.mobile-drawer {

  position: fixed;

  inset: 0;

  z-index: 10000;

  visibility: hidden;

  pointer-events: none;

}



.mobile-drawer.open {

  visibility: visible;

  pointer-events: auto;

}



.mobile-drawer-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.5);

  opacity: 0;

  transition: opacity var(--transition-base);

}



.mobile-drawer.open .mobile-drawer-backdrop { opacity: 1; }



.mobile-drawer-panel {

  position: absolute;

  top: 0;

  right: 0;

  width: min(360px, 90vw);

  height: 100%;

  background: var(--color-bg-elevated);

  padding: 1.5rem;

  transform: translateX(100%);

  transition: transform var(--transition-base);

  overflow-y: auto;

}



.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }



.mobile-nav-link {

  display: block;

  padding: 0.875rem 0;

  font-size: 1rem;

  font-weight: 500;

  color: var(--color-text);

  border-bottom: 1px solid var(--color-border);

}



.mobile-nav-group-title {

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--color-text-muted);

  padding: 1rem 0 0.5rem;

}



/* ─── Hero ─── */

.hero {

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  align-items: center;

  padding-top: var(--header-height);

  position: relative;

  overflow: hidden;

}



.hero-content {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(2rem, 5vw, 4rem);

  align-items: center;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.375rem 1rem 0.375rem 0.375rem;

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-full);

  font-size: 0.8125rem;

  font-weight: 500;

  color: var(--color-text-secondary);

  margin-bottom: 1.5rem;

  backdrop-filter: blur(12px);

}



.hero-badge-dot {

  width: 8px;

  height: 8px;

  background: var(--color-success);

  border-radius: 50%;

  animation: pulse-dot 2s ease infinite;

}



.hero-title {

  font-family: var(--font-display);

  font-size: clamp(2.5rem, 5.5vw, 4rem);

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -0.04em;

  margin-bottom: 1.5rem;

}



.hero-rotating {

  display: inline-block;

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  min-width: 200px;

}



.hero-desc {

  font-size: clamp(1rem, 2vw, 1.25rem);

  color: var(--color-text-secondary);

  line-height: 1.7;

  margin-bottom: 2rem;

  max-width: 540px;

}



.hero-cta {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-bottom: 2.5rem;

}



.hero-trust {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  flex-wrap: wrap;

}



.hero-trust-avatars {

  display: flex;

}



.hero-trust-avatars img {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 2px solid var(--color-bg-elevated);

  margin-left: -8px;

}



.hero-trust-avatars img:first-child { margin-left: 0; }



.hero-trust-text {

  font-size: 0.875rem;

  color: var(--color-text-muted);

}



.hero-trust-text strong { color: var(--color-text); }



.hero-visual {

  position: relative;

  z-index: 2;

}



.hero-dashboard {

  position: relative;

  border-radius: var(--radius-2xl);

  overflow: hidden;

  box-shadow: var(--shadow-xl), var(--shadow-glow);

  border: 1px solid var(--color-border);

  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}



.hero-dashboard:hover {

  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);

}



.hero-dashboard img { width: 100%; }



.hero-float-card {

  position: absolute;

  padding: 0.875rem 1.25rem;

  background: var(--glass-bg);

  backdrop-filter: blur(16px);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-md);

  font-size: 0.8125rem;

  animation: float 6s ease-in-out infinite;

}



.hero-float-card.card-1 { top: 10%; left: -10%; animation-delay: 0s; }

.hero-float-card.card-2 { bottom: 15%; right: -8%; animation-delay: -2s; }

.hero-float-card.card-3 { top: 50%; left: -15%; animation-delay: -4s; }



/* ─── Logo Marquee ─── */

.logo-marquee {

  padding: 3rem 0;

  border-top: 1px solid var(--color-border);

  border-bottom: 1px solid var(--color-border);

  overflow: hidden;

  background: var(--color-bg-subtle);

}



.logo-marquee-label {

  text-align: center;

  font-size: 0.8125rem;

  font-weight: 500;

  color: var(--color-text-muted);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 2rem;

}



.marquee-track {

  display: flex;

  width: max-content;

  animation: marquee 40s linear infinite;

}



.marquee-track:hover { animation-play-state: paused; }



.marquee-content {

  display: flex;

  align-items: center;

  gap: 4rem;

  padding: 0 2rem;

}



.marquee-logo {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--color-text-muted);

  white-space: nowrap;

  opacity: 0.6;

  transition: opacity var(--transition-fast);

}



.marquee-logo:hover { opacity: 1; }



/* ─── Stats ─── */

.stats-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 1.5rem;

}



.stat-card {

  text-align: center;

  padding: 2rem 1rem;

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-xl);

  backdrop-filter: blur(12px);

}



.stat-number {

  font-family: var(--font-display);

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 800;

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  line-height: 1;

  margin-bottom: 0.5rem;

}



.stat-label {

  font-size: 0.875rem;

  color: var(--color-text-muted);

  font-weight: 500;

}



/* ─── Feature Cards ─── */

.features-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.feature-card {

  padding: 2rem;

  position: relative;

  overflow: hidden;

}



.feature-card::before {

  content: '';

  position: absolute;

  inset: 0;

  background: var(--gradient-primary);

  opacity: 0;

  transition: opacity var(--transition-base);

  border-radius: inherit;

  z-index: 0;

}



.feature-card:hover::before { opacity: 0.03; }



.feature-card > * { position: relative; z-index: 1; }



.feature-icon {

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-lg);

  background: rgba(99, 102, 241, 0.1);

  color: var(--color-primary);

  margin-bottom: 1.25rem;

  transition: transform var(--transition-base), background var(--transition-base);

}



.feature-card:hover .feature-icon {

  transform: scale(1.1) rotate(-3deg);

  background: rgba(99, 102, 241, 0.18);

}



.feature-card h3 {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 0.75rem;

}



.feature-card p {

  font-size: 0.9375rem;

  color: var(--color-text-secondary);

  line-height: 1.65;

}



/* ─── Solutions / Industries Grid ─── */

.solutions-grid,

.industries-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.25rem;

}



.solution-card,

.industry-card {

  padding: 1.75rem;

  border-radius: var(--radius-xl);

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: all var(--transition-base);

  cursor: pointer;

}



.solution-card:hover,

.industry-card:hover {

  border-color: rgba(99, 102, 241, 0.4);

  box-shadow: var(--shadow-md);

  transform: translateY(-4px);

}



.solution-card .icon,

.industry-card .icon {

  font-size: 2rem;

  margin-bottom: 1rem;

}



.solution-card h3,

.industry-card h3 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.solution-card p,

.industry-card p {

  font-size: 0.8125rem;

  color: var(--color-text-muted);

  line-height: 1.5;

}



/* ─── Products Showcase ─── */

.products-showcase {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

}



.product-card {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  border-radius: var(--radius-2xl);

  overflow: hidden;

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: box-shadow var(--transition-base);

}



.product-card:hover { box-shadow: var(--shadow-lg); }



.product-card-content {

  padding: 2.5rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.product-card-visual {

  position: relative;

  min-height: 280px;

  background: var(--gradient-mesh);

  overflow: hidden;

}



.product-card-visual img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-tag {

  display: inline-block;

  padding: 0.25rem 0.75rem;

  background: rgba(99, 102, 241, 0.1);

  color: var(--color-primary);

  font-size: 0.75rem;

  font-weight: 600;

  border-radius: var(--radius-full);

  margin-bottom: 1rem;

  width: fit-content;

}



/* ─── Timeline ─── */

.timeline {

  position: relative;

  max-width: 800px;

  margin: 0 auto;

}



.timeline::before {

  content: '';

  position: absolute;

  left: 24px;

  top: 0;

  bottom: 0;

  width: 2px;

  background: linear-gradient(to bottom, var(--color-primary), var(--color-accent), transparent);

}



.timeline-item {

  position: relative;

  padding-left: 64px;

  padding-bottom: 3rem;

}



.timeline-dot {

  position: absolute;

  left: 16px;

  top: 4px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--gradient-primary);

  border: 3px solid var(--color-bg);

  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);

}



.timeline-step {

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--color-primary);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin-bottom: 0.5rem;

}



.timeline-item h3 {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.timeline-item p {

  color: var(--color-text-secondary);

  font-size: 0.9375rem;

}



/* ─── Case Studies ─── */

.case-studies-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.case-card {

  border-radius: var(--radius-xl);

  overflow: hidden;

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: transform var(--transition-base), box-shadow var(--transition-base);

}



.case-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}



.case-card-image {

  height: 200px;

  overflow: hidden;

}



.case-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.case-card:hover .case-card-image img { transform: scale(1.05); }



.case-card-body { padding: 1.5rem; }



.case-card-tag {

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--color-primary);

  margin-bottom: 0.5rem;

}



.case-card h3 {

  font-size: 1.125rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.case-card p {

  font-size: 0.875rem;

  color: var(--color-text-muted);

}



/* ─── Testimonials ─── */

.testimonials-slider {

  position: relative;

  max-width: 800px;

  margin: 0 auto;

  overflow: hidden;

}



.testimonial-track {

  display: flex;

  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}



.testimonial-slide {

  flex: 0 0 100%;

  padding: 0 1rem;

}



.testimonial-card {

  text-align: center;

  padding: 3rem 2rem;

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-2xl);

  backdrop-filter: blur(16px);

}



.testimonial-quote {

  font-size: 1.25rem;

  font-weight: 500;

  line-height: 1.7;

  color: var(--color-text);

  margin-bottom: 2rem;

  font-style: italic;

}



.testimonial-author {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

}



.testimonial-avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  object-fit: cover;

}



.testimonial-info strong {

  display: block;

  font-size: 0.9375rem;

}



.testimonial-info span {

  font-size: 0.8125rem;

  color: var(--color-text-muted);

}



.testimonial-dots {

  display: flex;

  justify-content: center;

  gap: 0.5rem;

  margin-top: 2rem;

}



.testimonial-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--color-border-strong);

  transition: all var(--transition-fast);

  cursor: pointer;

}



.testimonial-dot.active {

  width: 24px;

  border-radius: 4px;

  background: var(--color-primary);

}



/* ─── Awards ─── */

.awards-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 2rem;

}



.award-item {

  text-align: center;

  padding: 1.5rem 2rem;

}



.award-icon {

  font-size: 2.5rem;

  margin-bottom: 0.75rem;

}



.award-item h4 {

  font-size: 0.9375rem;

  font-weight: 700;

}



.award-item p {

  font-size: 0.8125rem;

  color: var(--color-text-muted);

}



/* ─── Tech Stack ─── */

.tech-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;

}



.tech-badge {

  padding: 0.625rem 1.25rem;

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-full);

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--color-text-secondary);

  transition: all var(--transition-fast);

}



.tech-badge:hover {

  border-color: var(--color-primary);

  color: var(--color-primary);

  transform: translateY(-2px);

}



/* ─── FAQ Accordion ─── */

.faq-list {

  max-width: 800px;

  margin: 0 auto;

}



.faq-item {

  border-bottom: 1px solid var(--color-border);

}



.faq-question {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.25rem 0;

  font-size: 1.0625rem;

  font-weight: 600;

  text-align: left;

  color: var(--color-text);

  transition: color var(--transition-fast);

}



.faq-question:hover { color: var(--color-primary); }



.faq-icon {

  width: 24px;

  height: 24px;

  flex-shrink: 0;

  transition: transform var(--transition-base);

}



.faq-item.open .faq-icon { transform: rotate(45deg); }



.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease, padding 0.4s ease;

}



.faq-item.open .faq-answer {

  max-height: 300px;

  padding-bottom: 1.25rem;

}



.faq-answer p {

  color: var(--color-text-secondary);

  font-size: 0.9375rem;

  line-height: 1.7;

}



/* ─── CTA Section ─── */

.cta-section {

  position: relative;

  overflow: hidden;

  border-radius: var(--radius-2xl);

  padding: clamp(3rem, 6vw, 5rem);

  text-align: center;

  background: var(--gradient-primary);

  color: #fff;

  margin: 0 clamp(1rem, 4vw, 2rem);

}



.cta-section h2 {

  font-family: var(--font-display);

  font-size: clamp(2rem, 4vw, 2.75rem);

  font-weight: 800;

  margin-bottom: 1rem;

}



.cta-section p {

  font-size: 1.125rem;

  opacity: 0.9;

  margin-bottom: 2rem;

  max-width: 560px;

  margin-left: auto;

  margin-right: auto;

}



.cta-section .btn-secondary {

  background: #fff;

  color: var(--color-primary-dark);

  border: none;

}



/* ─── Footer ─── */

.site-footer {

  background: var(--color-bg-elevated);

  border-top: 1px solid var(--color-border);

  padding: 4rem 0 2rem;

  margin-top: var(--section-py);

}



.footer-grid {

  display: grid;

  grid-template-columns: 2fr repeat(4, 1fr);

  gap: 3rem;

  margin-bottom: 3rem;

}



.footer-brand p {

  font-size: 0.875rem;

  color: var(--color-text-muted);

  line-height: 1.7;

  margin: 1rem 0 1.5rem;

  max-width: 280px;

}



.footer-social {

  display: flex;

  gap: 0.75rem;

}



.footer-social a {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-md);

  background: var(--color-bg-subtle);

  color: var(--color-text-secondary);

  transition: all var(--transition-fast);

}



.footer-social a:hover {

  background: var(--color-primary);

  color: #fff;

}



.footer-col h4 {

  font-size: 0.8125rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin-bottom: 1.25rem;

  color: var(--color-text);

}



.footer-col a {

  display: block;

  font-size: 0.875rem;

  color: var(--color-text-muted);

  padding: 0.375rem 0;

  transition: color var(--transition-fast);

}



.footer-col a:hover { color: var(--color-primary); }



.footer-newsletter {

  display: flex;

  gap: 0.5rem;

  margin-top: 1rem;

}



.footer-newsletter input {

  flex: 1;

  padding: 0.75rem 1rem;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-bg);

  color: var(--color-text);

  font-size: 0.875rem;

}



.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 2rem;

  border-top: 1px solid var(--color-border);

  font-size: 0.8125rem;

  color: var(--color-text-muted);

  flex-wrap: wrap;

  gap: 1rem;

}



.footer-locations {

  display: flex;

  gap: 2rem;

  flex-wrap: wrap;

}



.footer-location {

  font-size: 0.8125rem;

}



.footer-location strong {

  display: block;

  color: var(--color-text-secondary);

  margin-bottom: 0.25rem;

}



/* ─── Floating Buttons ─── */

.floating-actions {

  position: fixed;

  right: 20px;

  bottom: 20px;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.floating-btn {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-lg);

  transition: transform var(--transition-base), box-shadow var(--transition-base);

}



.floating-btn:hover {

  transform: scale(1.1);

  box-shadow: var(--shadow-xl);

}



.floating-btn.whatsapp { background: #25D366; }

.floating-btn.email { background: var(--color-primary); }

.floating-btn img, .floating-btn svg { width: 24px; height: 24px; }



/* ─── Page Hero (inner pages) ─── */

.page-hero {

  padding: calc(var(--header-height) + 4rem) 0 4rem;

  position: relative;

  overflow: hidden;

  background: var(--gradient-hero);

}



.page-hero .section-title { text-align: center; }

.page-hero .section-subtitle { text-align: center; margin: 0 auto; }



.breadcrumb {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  font-size: 0.875rem;

  color: var(--color-text-muted);

  margin-bottom: 1.5rem;

}



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

.breadcrumb span { color: var(--color-text-secondary); }



/* ─── Pricing ─── */

.pricing-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  align-items: start;

}



.pricing-card {

  padding: 2.5rem 2rem;

  border-radius: var(--radius-2xl);

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: transform var(--transition-base), box-shadow var(--transition-base);

}



.pricing-card.featured {

  border-color: var(--color-primary);

  box-shadow: var(--shadow-glow);

  transform: scale(1.03);

}



.pricing-card:hover { box-shadow: var(--shadow-lg); }



.pricing-name {

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--color-primary);

  margin-bottom: 0.5rem;

}



.pricing-price {

  font-family: var(--font-display);

  font-size: 3rem;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 0.25rem;

}



.pricing-price span {

  font-size: 1rem;

  font-weight: 500;

  color: var(--color-text-muted);

}



.pricing-features {

  margin: 2rem 0;

}



.pricing-features li {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.5rem 0;

  font-size: 0.9375rem;

  color: var(--color-text-secondary);

}



.pricing-features li::before {

  content: '✓';

  color: var(--color-success);

  font-weight: 700;

}



/* ─── Blog ─── */

.blog-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



.blog-card {

  border-radius: var(--radius-xl);

  overflow: hidden;

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: transform var(--transition-base), box-shadow var(--transition-base);

}



.blog-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

}



.blog-card-image {

  height: 200px;

  overflow: hidden;

}



.blog-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.blog-card:hover .blog-card-image img { transform: scale(1.05); }



.blog-card-body { padding: 1.5rem; }



.blog-meta {

  display: flex;

  gap: 1rem;

  font-size: 0.75rem;

  color: var(--color-text-muted);

  margin-bottom: 0.75rem;

}



.blog-card h3 {

  font-size: 1.125rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

  line-height: 1.4;

}



.blog-card p {

  font-size: 0.875rem;

  color: var(--color-text-muted);

  line-height: 1.6;

}



/* ─── Contact ─── */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

}



.contact-info-card {

  padding: 2rem;

  border-radius: var(--radius-xl);

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  margin-bottom: 1.5rem;

}



.contact-info-card h3 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.contact-info-card p,

.contact-info-card a {

  font-size: 0.9375rem;

  color: var(--color-text-secondary);

}



.contact-form {

  padding: 2.5rem;

  border-radius: var(--radius-2xl);

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

}



.form-group {

  margin-bottom: 1.25rem;

}



.form-group label {

  display: block;

  font-size: 0.875rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: var(--color-text);

}



.form-group input,

.form-group textarea,

.form-group select {

  width: 100%;

  padding: 0.875rem 1rem;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-bg);

  color: var(--color-text);

  font-size: 0.9375rem;

  transition: border-color var(--transition-fast);

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

  outline: none;

  border-color: var(--color-primary);

}



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



.form-error {

  font-size: 0.75rem;

  color: #ef4444;

  margin-top: 0.25rem;

  display: none;

}



.form-group.invalid .form-error { display: block; }

.form-group.invalid input,

.form-group.invalid textarea { border-color: #ef4444; }



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}



.contact-map {

  border-radius: var(--radius-xl);

  overflow: hidden;

  height: 400px;

  border: 1px solid var(--color-border);

  margin-top: 3rem;

}



.contact-map iframe {

  width: 100%;

  height: 100%;

  border: 0;

}



/* Success Modal */

.modal-overlay {

  position: fixed;

  inset: 0;

  z-index: 100000;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.5);

  backdrop-filter: blur(4px);

  opacity: 0;

  visibility: hidden;

  transition: all var(--transition-base);

}



.modal-overlay.open {

  opacity: 1;

  visibility: visible;

}



.modal-content {

  background: var(--color-bg-elevated);

  border-radius: var(--radius-2xl);

  padding: 3rem;

  text-align: center;

  max-width: 440px;

  margin: 1rem;

  transform: scale(0.9);

  transition: transform var(--transition-base);

}



.modal-overlay.open .modal-content { transform: scale(1); }



.modal-icon {

  width: 64px;

  height: 64px;

  margin: 0 auto 1.5rem;

  background: rgba(16, 185, 129, 0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-success);

  font-size: 2rem;

}



/* ─── Video Modal ─── */

.video-modal .modal-content {

  max-width: 900px;

  padding: 0;

  overflow: hidden;

}



.video-wrapper {

  position: relative;

  padding-bottom: 56.25%;

}



.video-wrapper iframe {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}



/* ─── 404 ─── */

.error-page {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 2rem;

}



.error-code {

  font-family: var(--font-display);

  font-size: clamp(6rem, 15vw, 12rem);

  font-weight: 800;

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  line-height: 1;

}



/* ─── Tabs ─── */

.tabs-nav {

  display: flex;

  gap: 0.5rem;

  justify-content: center;

  margin-bottom: 3rem;

  flex-wrap: wrap;

}



.tab-btn {

  padding: 0.625rem 1.25rem;

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--color-text-muted);

  border-radius: var(--radius-full);

  transition: all var(--transition-fast);

}



.tab-btn:hover { color: var(--color-text); }



.tab-btn.active {

  background: var(--color-primary);

  color: #fff;

}



.tab-panel { display: none; }

.tab-panel.active { display: block; }



/* ─── Team Cards ─── */

.team-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

}



.team-card {

  text-align: center;

  padding: 2rem 1.5rem;

  border-radius: var(--radius-xl);

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: transform var(--transition-base);

}



.team-card:hover { transform: translateY(-4px); }



.team-avatar {

  width: 96px;

  height: 96px;

  border-radius: 50%;

  margin: 0 auto 1rem;

  object-fit: cover;

  border: 3px solid var(--color-border);

}



.team-card h3 {

  font-size: 1rem;

  font-weight: 700;

}



.team-card span {

  font-size: 0.8125rem;

  color: var(--color-text-muted);

}



/* ─── Skeleton Loading ─── */

.skeleton {

  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-border) 50%, var(--color-bg-subtle) 75%);

  background-size: 200% 100%;

  animation: skeleton 1.5s ease infinite;

  border-radius: var(--radius-md);

}



/* ─── Reveal Animations (initial state) ─── */

.reveal {

  opacity: 0;

  transform: translateY(32px);

}



.reveal-left {

  opacity: 0;

  transform: translateX(-32px);

}



.reveal-right {

  opacity: 0;

  transform: translateX(32px);

}



.reveal-scale {

  opacity: 0;

  transform: scale(0.92);

}



.reveal-blur {

  opacity: 0;

  filter: blur(8px);

}



/* ─── Why Choose Us ─── */

.why-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

}



.why-card {

  display: flex;

  gap: 1.25rem;

  padding: 2rem;

  border-radius: var(--radius-xl);

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: all var(--transition-base);

}



.why-card:hover {

  border-color: rgba(99, 102, 241, 0.3);

  box-shadow: var(--shadow-md);

}



.why-number {

  font-family: var(--font-display);

  font-size: 2.5rem;

  font-weight: 800;

  background: var(--gradient-primary);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  line-height: 1;

  flex-shrink: 0;

}



.why-card h3 {

  font-size: 1.125rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.why-card p {

  font-size: 0.9375rem;

  color: var(--color-text-secondary);

}



/* ─── Auto Feature Cards ─── */

.feature-carousel {

  position: relative;

  overflow: hidden;

}



.feature-carousel-track {

  display: flex;

  gap: 1.5rem;

  animation: feature-scroll 30s linear infinite;

}



.feature-carousel-track:hover { animation-play-state: paused; }



.feature-carousel .feature-card {

  flex: 0 0 340px;

}



/* ─── Legal Pages ─── */

.legal-content {

  max-width: 800px;

  margin: 0 auto;

  padding: 2rem 0 4rem;

}



.legal-content h2 {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 700;

  margin: 2.5rem 0 1rem;

}



.legal-content p,

.legal-content li {

  color: var(--color-text-secondary);

  line-height: 1.8;

  margin-bottom: 1rem;

}



.legal-content ul {

  list-style: disc;

  padding-left: 1.5rem;

  margin-bottom: 1rem;

}



/* ─── Career ─── */

.job-list {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.job-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.5rem 2rem;

  border-radius: var(--radius-xl);

  background: var(--color-bg-elevated);

  border: 1px solid var(--color-border);

  transition: all var(--transition-base);

  gap: 1rem;

  flex-wrap: wrap;

}



.job-card:hover {

  border-color: var(--color-primary);

  box-shadow: var(--shadow-md);

}



.job-card h3 {

  font-size: 1.0625rem;

  font-weight: 700;

}



.job-meta {

  display: flex;

  gap: 1rem;

  font-size: 0.8125rem;

  color: var(--color-text-muted);

  margin-top: 0.25rem;

}



/* ─── Support ─── */

.support-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.support-card {

  padding: 2rem;

  text-align: center;

  border-radius: var(--radius-xl);

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  transition: transform var(--transition-base);

}



.support-card:hover { transform: translateY(-4px); }



.support-card .icon {

  font-size: 2.5rem;

  margin-bottom: 1rem;

}



.support-card h3 {

  font-size: 1.125rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.support-card p {

  font-size: 0.875rem;

  color: var(--color-text-muted);

  margin-bottom: 1rem;

}