/* ============================================
   Asistel - Stripe-Inspired Modern Design
   Purple & Black Theme with Modern UI
   ============================================ */

:root {
  --font-scale: 0.84;
  /* Professional Purple Palette - Softer & More Elegant */
  --primary-purple: #7C3AED;
  --primary-purple-dark: #5B21B6;
  --primary-purple-light: #8B5CF6;
  --primary-purple-soft: #A78BFA;
  --primary-purple-subtle: #C4B5FD;
  --secondary-black: #0F172A;
  --secondary-black-soft: #1E293B;
  --secondary-black-light: #334155;
  --accent-pink: #D946EF;
  --accent-cyan: #06B6D4;
  --text-light: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dark: #1E293B;
  --border-color: rgba(124, 58, 237, 0.12);
  --success-color: #10B981;
  --danger-color: #EF4444;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
}

/* ============================================
   Font Declarations
   ============================================ */

@font-face {
  font-family: 'Geist Mono';
  src: url('https://fonts.gstatic.com/s/geistmono/v1/GeistMonoVF.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'seasonSans', 'seasonSans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-nav: 'Manrope', 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono Fallback', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
}

/* ============================================
   Base Styles - Stripe Inspired
   ============================================ */

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

html {
  font-size: calc(16px * var(--font-scale));
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  line-height: 1.7;
  color: var(--text-light);
  background: #0A0E27;
  position: relative;
  overflow-x: hidden;
}

/* Subtle animated background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(217, 70, 239, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

body > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Typography - Large & Bold
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 30%, #C4B5FD 70%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

p {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.8;
}

.lead {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* ============================================
   Navbar - Minimal & Modern
   ============================================ */

.navbar {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 50%, #F1F5F9 100%) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.25rem 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.navbar.scrolled {
  background: rgba(10, 14, 39, 0.95) !important;
  border-bottom-color: rgba(124, 58, 237, 0.15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.navbar-logo {
  height: 62px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: none;
}

.navbar.scrolled .navbar-logo {
  filter: brightness(0) invert(1);
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.navbar-brand:hover .navbar-logo {
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.3));
}

.navbar.scrolled .navbar-brand:hover .navbar-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(167, 139, 250, 0.5));
}

.navbar-brand-text {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar.scrolled .navbar-brand-text {
  background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 50%, #D946EF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-link {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  color: rgba(30, 41, 59, 0.9) !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 12px;
  margin: 0 0.25rem;
  letter-spacing: 0.01em;
  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.navbar.scrolled .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-link:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.6), transparent);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled .nav-link:not(.dropdown-toggle)::after {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), transparent);
}

.nav-link:hover {
  color: #1E293B !important;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.navbar.scrolled .nav-link:hover {
  color: var(--text-light) !important;
  background: rgba(124, 58, 237, 0.25);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.nav-link:not(.dropdown-toggle):hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link.active {
  color: #1E293B !important;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.navbar.scrolled .nav-link.active {
  color: var(--text-light) !important;
  background: rgba(124, 58, 237, 0.3);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-link:not(.dropdown-toggle).active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Navbar Toggler */
.navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.375rem 0.75rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30, 41, 59, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2);
}

.navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Menu Styles */
.dropdown-toggle::after {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  border-top-color: rgba(30, 41, 59, 0.8);
}

.navbar.scrolled .dropdown-toggle::after {
  border-top-color: rgba(255, 255, 255, 0.7);
}

.dropdown-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-color: rgba(124, 58, 237, 0.6) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.navbar.scrolled .dropdown-toggle[aria-expanded="true"] {
  background: rgba(124, 58, 237, 0.35) !important;
  border-color: rgba(167, 139, 250, 0.6) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0, 0, 0, 0.05);
  min-width: 280px;
  animation: dropdownFadeIn 0.3s ease-out;
}

.navbar.scrolled .dropdown-menu {
  background: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid rgba(124, 58, 237, 0.25);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 40px rgba(124, 58, 237, 0.15);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  color: rgba(30, 41, 59, 0.8) !important;
  padding: 0.75rem 1.5rem !important;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
}

.navbar.scrolled .dropdown-item {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #7C3AED !important;
  border-left-color: #7C3AED;
  transform: translateX(4px);
}

.navbar.scrolled .dropdown-item:hover,
.navbar.scrolled .dropdown-item:focus {
  background: rgba(124, 58, 237, 0.15) !important;
  color: #A78BFA !important;
  border-left-color: #A78BFA;
}

.dropdown-item i {
  width: 20px;
  text-align: center;
  margin-right: 0.75rem;
  font-size: 1rem;
}

.dropdown-divider {
  border-color: rgba(0, 0, 0, 0.1) !important;
  margin: 0.5rem 0;
  opacity: 1;
}

.navbar.scrolled .dropdown-divider {
  border-color: rgba(124, 58, 237, 0.2) !important;
}

.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active {
  background: rgba(124, 58, 237, 0.15) !important;
  color: #7C3AED !important;
}

.navbar.scrolled .dropdown-menu-dark .dropdown-item.active,
.navbar.scrolled .dropdown-menu-dark .dropdown-item:active {
  background: rgba(124, 58, 237, 0.2) !important;
  color: #A78BFA !important;
}

/* ============================================
   Hero Section - Stripe Style
   ============================================ */

.hero-section,
.page-header {
  background: transparent;
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.page-header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Default page-header background (for hizmetler, iletisim, etc.) */
.page-header:not([data-bg-image]) {
  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&auto=format&fit=crop&q=80');
}

.hero-section {
  background-image: url('/img/4127298.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* CAPTCHA Styles */
.captcha-question {
  min-width: 120px;
  text-align: center;
  font-size: 1.25rem;
  user-select: none;
}

#refreshCaptcha {
  min-width: 45px;
}

@media (max-width: 576px) {
  .captcha-question {
    min-width: 100px;
    font-size: 1.1rem;
    padding: 0.75rem !important;
  }
  
  #captchaAnswer {
    max-width: 120px !important;
  }
  
  .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, rgba(10, 14, 39, 0.75) 0%, rgba(30, 41, 59, 0.65) 50%, rgba(10, 14, 39, 0.75) 100%),
    radial-gradient(circle at 30% 50%, rgba(124, 58, 237, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(217, 70, 239, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 50%, rgba(15, 23, 42, 0.85) 100%),
    radial-gradient(circle at 30% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(37, 99, 235, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-section .container,
.page-header .container {
  position: relative;
  z-index: 1;
}

.min-vh-50 {
  min-height: 60vh;
}

.hero-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-icon {
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.25));
  transition: all 0.3s ease;
}

.floating-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 30px rgba(167, 139, 250, 0.35));
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

/* ============================================
   Buttons - Modern & Smooth
   ============================================ */

.btn {
  font-family: var(--font-mono);
  border-radius: 12px;
  font-weight: 600;
  padding: 1rem 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  position: relative;
  overflow: hidden;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #C4B5FD 100%);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.btn-outline-primary {
  background: rgba(124, 58, 237, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 58, 237, 0.3);
  color: #A78BFA;
  position: relative;
  z-index: 1;
}

.btn-outline-primary:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(167, 139, 250, 0.6);
  color: #C4B5FD;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
}

.btn-light {
  background: rgba(255, 255, 255, 0.95);
  color: #1E293B;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.btn-light:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3);
}

.btn-lg {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
}

/* ============================================
   Cards - Modern Glassmorphism
   ============================================ */

.card {
  border-radius: 24px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

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

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(167, 139, 250, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.2);
  border-color: rgba(167, 139, 250, 0.3);
}

.card:hover::before {
  opacity: 1;
}

.feature-card,
.service-card {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 58, 237, 0.12);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Background Image Support */
.service-card[data-bg-image] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.service-card[data-bg-image]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.85) 0%, rgba(30, 41, 59, 0.75) 50%, rgba(10, 14, 39, 0.85) 100%);
  z-index: 0;
  pointer-events: none;
}

.service-card[data-bg-image]:hover::before {
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.75) 0%, rgba(30, 41, 59, 0.65) 50%, rgba(10, 14, 39, 0.75) 100%);
}

.feature-card > *,
.service-card > * {
  position: relative;
  z-index: 2;
}

.service-card .btn {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.feature-card::after,
.service-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.feature-card:hover,
.service-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 24px 64px rgba(124, 58, 237, 0.25);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(30, 41, 59, 0.6);
}

.feature-card:hover::after,
.service-card:hover::after {
  opacity: 1;
}

.service-card .service-icon {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.service-card:hover .service-icon {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.4));
}

/* ============================================
   Sections - Spacious Layout
   ============================================ */

.features-section,
.services-content,
.service-detail {
  background: transparent;
  padding: 6rem 0;
}

.services-preview {
  background: linear-gradient(to bottom, rgba(124, 58, 237, 0.02) 0%, transparent 100%);
  padding: 6rem 0;
}

/* ============================================
   Forms - Modern Inputs
   ============================================ */

.form-control,
.form-select {
  font-family: var(--font-mono);
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.15);
  padding: 1rem 1.25rem;
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(10px);
  color: var(--text-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 0 24px rgba(124, 58, 237, 0.15);
  background: rgba(30, 41, 59, 0.7);
  outline: none;
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

#contactForm .form-control {
  background: #FFFFFF;
  color: #111827;
}

#contactForm .form-control::placeholder {
  color: #475569;
  opacity: 1;
}

#contactForm .form-control:focus {
  background: #FFFFFF;
  color: #111827;
}

.form-label {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

.input-group-text {
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.15);
  color: #A78BFA;
  border-right: none;
}

.input-group .form-control {
  border-left: none;
}

.input-group .form-control:focus {
  border-left: 1px solid #8B5CF6;
}

/* ============================================
   Corporate Section
   ============================================ */

.corporate-content {
  background: transparent;
  padding: 6rem 0;
}

.corporate-hero-image {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.corporate-hero-image img {
  transition: transform 0.5s ease;
}

.corporate-hero-image:hover img {
  transform: scale(1.05);
}

.brand-card {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.brand-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(167, 139, 250, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.brand-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.25);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(30, 41, 59, 0.6);
}

.brand-card:hover::before {
  opacity: 1;
}

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

.brand-icon {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-card:hover .brand-icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.4));
}

/* Certification Cards */
.certification-card {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.certification-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(167, 139, 250, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.certification-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.3);
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(30, 41, 59, 0.65);
}

.certification-card:hover::before {
  opacity: 1;
}

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

.certification-icon {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.certification-card:hover .certification-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.5));
}

.certification-card h4 {
  color: var(--text-light);
  font-size: 1.5rem;
}

.certification-badge .badge {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.info-item {
  padding: 1.5rem 0;
}

.info-item h5 {
  color: var(--text-light);
  font-size: 1.25rem;
}

/* Sub Service Cards */
.sub-service-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(124, 58, 237, 0.1) !important;
}

.sub-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

.sub-service-icon {
  transition: all 0.3s ease;
}

.sub-service-card:hover .sub-service-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.3));
}

/* Pricing Cards */
.pricing-card {
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2) !important;
}

.info-item p {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
}

/* ============================================
   Contact Section
   ============================================ */

.map-container {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(20%) brightness(0.9);
  transition: filter 0.3s ease;
}

.map-container:hover iframe {
  filter: grayscale(0%) brightness(1);
}

@media (max-width: 768px) {
  .map-container {
    height: 350px;
  }
}

@media (max-width: 576px) {
  .map-container {
    height: 300px;
  }
}

.contact-info-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
  transition: all 0.3s ease;
}

.contact-info-item:last-child {
  border-bottom: none;
}

.contact-info-item:hover {
  padding-left: 0.5rem;
}

.contact-info-item i {
  min-width: 32px;
  color: #A78BFA;
  font-size: 1.25rem;
}

/* ============================================
   CTA Box - Stripe Style
   ============================================ */

.cta-box {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(167, 139, 250, 0.12) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 32px;
  box-shadow: 0 24px 80px rgba(124, 58, 237, 0.2);
  position: relative;
  overflow: hidden;
  padding: 4rem 3rem;
}

.cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
  animation: pulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

.cta-box > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Footer - Minimal
   ============================================ */

.footer {
  background: rgba(10, 14, 39, 0.95) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(124, 58, 237, 0.12);
  padding: 4rem 0 2rem;
}

.footer a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
  text-decoration: none;
}

.footer a:hover {
  color: #A78BFA !important;
  transform: translateX(4px);
}

/* ============================================
   Admin Dashboard
   ============================================ */

.admin-dashboard {
  background: transparent;
  min-height: calc(100vh - 200px);
  padding: 3rem 0;
}

.table {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.12);
}

.table thead {
  background: rgba(124, 58, 237, 0.12);
  color: var(--text-light);
}

.table-hover tbody tr {
  transition: all 0.3s ease;
}

.table-hover tbody tr:hover {
  background: rgba(124, 58, 237, 0.08);
  transform: scale(1.01);
}

.table td,
.table th {
  border-color: rgba(124, 58, 237, 0.12);
  color: var(--text-light);
  padding: 1.25rem;
}

/* ============================================
   Process Steps
   ============================================ */

.process-step {
  font-family: var(--font-mono);
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.25);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.35);
}

/* ============================================
   Tech Items
   ============================================ */

.tech-item {
  font-family: var(--font-mono);
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(124, 58, 237, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
}

.tech-item:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(167, 139, 250, 0.3);
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.2);
}

.tech-item i {
  color: #A78BFA;
  transition: all 0.3s ease;
}

.tech-item:hover i {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.4));
}

/* ============================================
   Alerts
   ============================================ */

.alert {
  border-radius: 16px;
  border: 1px solid;
  backdrop-filter: blur(10px);
  padding: 1.25rem 1.5rem;
}

.alert-success {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6EE7B7;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
}

.alert-info {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: #67E8F9;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FCD34D;
}

/* ============================================
   Breadcrumb
   ============================================ */

.breadcrumb {
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.breadcrumb-item a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
  color: #A78BFA;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Code & Technical Elements
   ============================================ */

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  overflow-x: auto;
  color: var(--text-light);
}

code {
  background: rgba(139, 92, 246, 0.2);
  padding: 0.25em 0.5em;
  border-radius: 6px;
  color: #A78BFA;
}

/* ============================================
   Lists - Readable Text
   ============================================ */

.card-body ul,
.card-body ol,
.card ul,
.card ol,
.list-unstyled {
  color: var(--text-light) !important;
}

.card-body li,
.card li,
.list-unstyled li {
  color: var(--text-light) !important;
}

.card-body li strong,
.card li strong,
.list-unstyled li strong {
  color: var(--text-light) !important;
  font-weight: 600;
}

.card-body p,
.card p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.card-body .text-muted,
.card .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* List items with icons */
.list-unstyled li i {
  color: var(--success-color) !important;
}

/* ============================================
   Utilities
   ============================================ */

.text-primary {
  color: #A78BFA !important;
}

.bg-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%) !important;
}

.bg-light {
  background: rgba(30, 41, 59, 0.5) !important;
  backdrop-filter: blur(10px);
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-white {
  color: var(--text-light) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-soft) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   Animations
   ============================================ */

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

.feature-card,
.service-card {
  animation: fadeInUp 0.8s ease-out backwards;
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }

/* ============================================
   Scrollbar Styling
   ============================================ */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #0A0E27;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
  border-radius: 6px;
  border: 2px solid #0A0E27;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #C4B5FD 100%);
}

/* ============================================
   Login Page
   ============================================ */

.login-container {
  background: #0A0E27;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 24px 80px rgba(139, 92, 246, 0.3);
  border-radius: 32px;
  padding: 3rem;
  width: 100%;
  max-width: 450px;
}

.login-box h1,
.login-box h2 {
  background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 50%, #D946EF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-mono);
}

.login-box label {
  font-family: var(--font-mono);
}

/* ============================================
   Service Detail Enhancements
   ============================================ */

.service-detail {
  background: transparent;
}

.service-detail .card {
  background: rgba(30, 41, 59, 0.4);
}

.service-detail .card h2,
.service-detail .card h3,
.service-detail .card h4 {
  color: var(--text-light);
}

.service-detail .card h2.text-primary,
.service-detail .card h3.text-primary,
.service-detail .card h4.text-primary {
  background: linear-gradient(135deg, #A78BFA 0%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   Stats Cards
   ============================================ */

.bg-primary.text-white {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%) !important;
}

.bg-success.text-white {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

.bg-info.text-white {
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 992px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-section,
  .page-header {
    padding: 5rem 0 4rem;
  }

  .hero-visual {
    height: 300px;
    margin-top: 2rem;
  }

  .floating-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 1rem;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 0;
    font-size: 0.9375rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Navbar */
  .navbar {
    padding: 0.75rem 0;
  }

  .navbar-brand {
    font-size: 1.25rem;
  }

  .navbar-logo {
    height: 32px;
    max-width: 140px;
  }

  .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
  }

  .dropdown-menu {
    min-width: 100%;
    margin-top: 0.25rem;
    border-radius: 12px;
  }

  /* Typography */
  h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    margin-bottom: 1.5rem;
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    margin-bottom: 1.25rem;
  }

  h3 {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }

  h4 {
    font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
  }

  .lead {
    font-size: clamp(1rem, 3vw, 1.125rem) !important;
    margin-bottom: 1.5rem;
  }

  p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  /* Hero Section */
  .hero-section,
  .page-header {
    padding: 3rem 0 2.5rem !important;
  }

  .hero-section {
    background-attachment: scroll;
  }

  .page-header {
    background-attachment: scroll;
  }

  .min-vh-50 {
    min-height: auto;
  }

  .hero-visual {
    height: 250px;
    margin-top: 2rem;
  }

  /* Buttons */
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    width: 100%;
    justify-content: center;
  }

  .btn-lg {
    padding: 1rem 1.75rem;
    font-size: 1rem;
  }

  .d-flex.gap-3 {
    flex-direction: column;
    gap: 1rem !important;
  }

  /* Cards */
  .card {
    border-radius: 16px;
    margin-bottom: 1.5rem;
  }

  .card-body {
    padding: 1.5rem !important;
  }

  .feature-card,
  .service-card {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem;
  }

  .feature-card i,
  .service-card i {
    font-size: 2.5rem !important;
  }

  /* Sections */
  .features-section,
  .services-content,
  .service-detail {
    padding: 3rem 0 !important;
  }

  .services-preview {
    padding: 3rem 0 !important;
  }

  /* CTA Box */
  .cta-box {
    padding: 2rem 1.5rem !important;
    border-radius: 20px;
  }

  .cta-box h2 {
    font-size: 1.5rem !important;
  }

  .cta-box .lead {
    font-size: 1rem !important;
  }

  /* Service Items */
  .service-item {
    padding: 1.5rem 1rem !important;
    margin-bottom: 1rem;
  }

  .service-item i {
    font-size: 2.5rem !important;
  }

  /* Forms */
  .form-control,
  .form-select {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }

  .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }

  /* Contact Info */
  .contact-info-item {
    padding: 1rem 0;
  }

  /* Footer */
  .footer {
    padding: 3rem 0 1.5rem !important;
  }

  .footer .row {
    margin-bottom: 2rem;
  }

  /* Admin Dashboard */
  .admin-dashboard {
    padding: 2rem 0 !important;
  }

  .table {
    font-size: 0.875rem;
  }

  .table td,
  .table th {
    padding: 0.75rem 0.5rem !important;
  }

  /* Process Steps */
  .process-step {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.25rem !important;
  }

  /* Tech Items */
  .tech-item {
    padding: 1rem !important;
    margin-bottom: 1rem;
  }

  .tech-item i {
    font-size: 2rem !important;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
  }

  /* Login Box */
  .login-box {
    padding: 2rem 1.5rem !important;
    margin: 1rem;
    border-radius: 20px;
  }

  /* Display sizes */
  .display-1 { font-size: 3rem !important; }
  .display-2 { font-size: 2.5rem !important; }
  .display-3 { font-size: 2rem !important; }
  .display-4 { font-size: 1.75rem !important; }
  .display-5 { font-size: 1.5rem !important; }
  .display-6 { font-size: 1.25rem !important; }
}

@media (max-width: 576px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Hero Section */
  .hero-section {
    background-attachment: scroll;
  }

  /* Navbar */
  .navbar {
    padding: 0.625rem 0;
  }

  .navbar-brand {
    font-size: 1.125rem;
  }

  .navbar-logo {
    height: 28px;
    max-width: 120px;
  }

  /* Hero Section */
  .hero-section,
  .page-header {
    padding: 2.5rem 0 2rem !important;
  }

  h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    margin-bottom: 1.25rem;
  }

  h2 {
    font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
  }

  .lead {
    font-size: 1rem !important;
    margin-bottom: 1.25rem;
  }

  /* Buttons */
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }

  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }

  /* Cards */
  .card-body {
    padding: 1.25rem !important;
  }

  .feature-card,
  .service-card {
    padding: 1.25rem !important;
  }

  /* Sections */
  .features-section,
  .services-content,
  .service-detail {
    padding: 2.5rem 0 !important;
  }

  .services-preview {
    padding: 2.5rem 0 !important;
  }

  /* CTA Box */
  .cta-box {
    padding: 1.5rem 1rem !important;
  }

  .cta-box h2 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem;
  }

  .cta-box .lead {
    font-size: 0.9375rem !important;
    margin-bottom: 1.5rem;
  }

  /* Service Items Grid */
  .col-md-6.col-lg-3,
  .col-md-6.col-lg-4 {
    margin-bottom: 1rem;
  }

  /* Service Detail Pages */
  .service-detail .row {
    margin-bottom: 2rem !important;
  }

  .service-detail .card {
    margin-bottom: 1.5rem;
  }

  .service-detail .mb-5 {
    margin-bottom: 2rem !important;
  }

  .service-detail .mb-4 {
    margin-bottom: 1.5rem !important;
  }

  .service-detail .mb-3 {
    margin-bottom: 1rem !important;
  }

  /* Table responsive */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  /* Modal */
  .modal-dialog {
    margin: 1rem;
  }

  .modal-content {
    border-radius: 16px;
  }

  /* Pagination */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Forms */
  .form-control,
  .form-select {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }

  /* Footer */
  .footer {
    padding: 2rem 0 1rem !important;
  }

  .footer h5 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .footer p,
  .footer a {
    font-size: 0.875rem;
  }

  /* Admin Dashboard */
  .admin-dashboard {
    padding: 1.5rem 0 !important;
  }

  .admin-dashboard h1 {
    font-size: 1.75rem !important;
  }

  .table-responsive {
    font-size: 0.8125rem;
  }

  .table td,
  .table th {
    padding: 0.625rem 0.375rem !important;
    white-space: nowrap;
  }

  /* Process Steps */
  .process-step {
    width: 50px !important;
    height: 50px !important;
    font-size: 1rem !important;
  }

  /* Tech Items */
  .tech-item {
    padding: 0.875rem !important;
  }

  .tech-item i {
    font-size: 1.75rem !important;
  }

  .tech-item h6 {
    font-size: 0.8125rem;
  }

  /* Login Box */
  .login-box {
    padding: 1.75rem 1.25rem !important;
    margin: 0.5rem;
  }

  .login-box h2 {
    font-size: 1.5rem !important;
  }

  /* Hero Visual */
  .hero-visual {
    height: 180px;
    margin-top: 1.5rem;
  }

  .floating-icon {
    display: inline-block;
    margin: 0.5rem;
  }

  .floating-icon i {
    font-size: 2rem !important;
  }

  .floating-icon[style*="position: absolute"] {
    position: relative !important;
  }

  /* Hide absolute positioned icons on mobile */
  .hero-visual .floating-icon[style*="position: absolute"] {
    display: none;
  }

  .hero-visual .floating-icon:first-child {
    display: block;
  }

  /* Display sizes */
  .display-1 { font-size: 2.5rem !important; }
  .display-2 { font-size: 2rem !important; }
  .display-3 { font-size: 1.75rem !important; }
  .display-4 { font-size: 1.5rem !important; }
  .display-5 { font-size: 1.25rem !important; }
  .display-6 { font-size: 1.125rem !important; }
}

@media (max-width: 400px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  .btn {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }

  .card-body {
    padding: 1rem !important;
  }

  .cta-box {
    padding: 1.25rem 0.875rem !important;
  }

  .navbar-collapse {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
  }

  .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* ============================================
   Mobile Specific Fixes
   ============================================ */

@media (max-width: 768px) {
  /* Ensure all content is visible */
  .row {
    margin-left: 0;
    margin-right: 0;
  }

  [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Fix overflow issues */
  body {
    overflow-x: hidden;
  }

  .container-fluid,
  .container {
    overflow-x: hidden;
  }

  /* Fix navbar on mobile */
  .navbar-collapse {
    background: rgba(10, 14, 39, 0.98);
    backdrop-filter: blur(20px);
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.15);
  }

  .navbar-nav {
    gap: 0.5rem;
  }

  /* Dropdown on mobile */
  .dropdown-menu {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid rgba(139, 92, 246, 0.3);
    margin-top: 0.5rem;
    margin-left: 0;
    width: 100%;
  }

  /* Fix text wrapping */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Fix long text */
  p, .lead {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Fix buttons */
  .btn {
    white-space: normal;
    word-wrap: break-word;
  }

  /* Fix cards */
  .card {
    word-wrap: break-word;
  }

  /* Fix tables - Mobile card view */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 600px;
  }

  /* Alternative: Card view for very small screens */
  @media (max-width: 576px) {
    .table thead {
      display: none;
    }

    .table,
    .table tbody,
    .table tr,
    .table td {
      display: block;
      width: 100%;
    }

    .table tr {
      margin-bottom: 1.5rem;
      border: 1px solid rgba(124, 58, 237, 0.15);
      border-radius: 12px;
      padding: 1rem;
      background: rgba(30, 41, 59, 0.5);
    }

    .table td {
      border: none;
      padding: 0.75rem 0 !important;
      text-align: left !important;
      position: relative;
      padding-left: 45% !important;
      border-bottom: 1px solid rgba(124, 58, 237, 0.08);
    }

    .table td:last-child {
      border-bottom: none;
    }

    .table td::before {
      content: attr(data-label) ": ";
      position: absolute;
      left: 0;
      width: 40%;
      font-weight: 600;
      color: #A78BFA;
      font-size: 0.875rem;
    }

    .table td[data-label="İşlemler"] {
      padding-left: 0 !important;
      padding-top: 1rem !important;
    }

    .table td[data-label="İşlemler"]::before {
      display: none;
    }
  }

  /* Fix service cards grid */
  .col-md-6.col-lg-4,
  .col-md-6.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  /* Fix hero visual */
  .hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .floating-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Fix breadcrumb */
  .breadcrumb {
    flex-wrap: wrap;
    font-size: 0.75rem;
  }

  .breadcrumb-item {
    white-space: nowrap;
  }

  /* Fix contact form */
  .contact-section .row {
    flex-direction: column-reverse;
  }

  .contact-section .col-lg-8,
  .contact-section .col-lg-4 {
    width: 100%;
    margin-bottom: 2rem;
  }

  /* Fix admin dashboard */
  .admin-dashboard .row {
    margin-bottom: 1.5rem;
  }

  .admin-dashboard .col-md-4 {
    margin-bottom: 1rem;
  }

  /* Fix process steps */
  .row.g-4 {
    gap: 1.5rem !important;
  }

  /* Fix CTA buttons */
  .cta-box .d-flex {
    flex-direction: column;
    gap: 1rem !important;
  }

  .cta-box .btn {
    width: 100%;
  }

  /* Fix service detail pages */
  .service-detail .row.g-4 {
    margin-left: 0;
    margin-right: 0;
  }

  .service-detail .col-md-6,
  .service-detail .col-lg-4,
  .service-detail .col-lg-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-bottom: 1.5rem;
  }

  /* Fix icon sizes */
  .service-icon i,
  .feature-card i {
    font-size: 2.5rem !important;
  }

  /* Fix list items */
  .list-unstyled li {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }

  /* Fix pagination */
  .pagination {
    font-size: 0.875rem;
  }

  .page-link {
    padding: 0.375rem 0.625rem;
  }

  /* Fix modal */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-body {
    padding: 1rem;
  }

  /* Fix stats cards */
  .admin-dashboard .col-md-4 {
    margin-bottom: 1rem;
  }

  .admin-dashboard .card-body h2 {
    font-size: 1.75rem !important;
  }

  .admin-dashboard .card-body h6 {
    font-size: 0.8125rem;
  }

  /* Fix breadcrumb on mobile */
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.5rem;
  }

  /* Ensure text doesn't overflow */
  * {
    max-width: 100%;
  }

  /* Certification cards on mobile */
  .certification-card {
    margin-bottom: 1.5rem;
  }

  .certification-card h4 {
    font-size: 1.25rem;
  }

  .certification-icon {
    font-size: 3rem !important;
  }

  .certification-badge .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }

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

  /* Fix input groups */
  .input-group {
    flex-wrap: wrap;
  }

  .input-group-text {
    width: 100%;
    border-right: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  .input-group .form-control {
    border-left: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-top: none;
    border-radius: 0 0 12px 12px;
  }

  /* Fix contact info items */
  .contact-info-item {
    padding: 1rem 0;
  }

  .contact-info-item h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .contact-info-item p {
    font-size: 0.875rem;
    margin-bottom: 0;
  }

  /* Corporate Section */
  .corporate-content {
    padding: 3rem 0 !important;
  }

  .corporate-hero-image img {
    height: 300px !important;
  }

  .brand-card {
    margin-bottom: 1.5rem;
  }

  .info-item {
    padding: 1rem 0;
  }

  .info-item h5 {
    font-size: 1.125rem;
  }

  .certification-card {
    margin-bottom: 1.5rem;
  }

  .certification-card h4 {
    font-size: 1.25rem;
  }

  .certification-icon {
    font-size: 3rem !important;
  }
}

/* ============================================
   Error Pages
   ============================================ */

.error-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding: 4rem 0;
}

.error-content {
  text-align: center;
}

.error-content i {
  animation: float 4s ease-in-out infinite;
}

/* ============================================
   Loading Spinner
   ============================================ */

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* Cookie consent */
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-banner { position: fixed; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; z-index: 1100; padding: 1.25rem 1.5rem; color: #17213e; background: rgba(247, 252, 255, 0.98); border: 1px solid rgba(23, 33, 62, 0.14); border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25); }
.cookie-banner-content { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1180px; margin: 0 auto; }
.cookie-banner h2 { margin: 0 0 0.35rem; color: #17213e; font-family: var(--font-nav); font-size: 1.05rem; letter-spacing: 0; }
.cookie-banner p { max-width: 720px; margin: 0; color: #526174; font-size: 0.95rem; line-height: 1.5; }
.cookie-banner-actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.cookie-banner-actions .btn { padding: 0.7rem 1.4rem; border-radius: 5px; }
.cookie-settings-link { padding: 0; color: #07576d; background: none; border: 0; font-family: var(--font-nav); font-weight: 700; text-decoration: underline; cursor: pointer; }
.cookie-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; }
.cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 25, 0.7); backdrop-filter: blur(4px); }
.cookie-modal-card { position: relative; width: min(100%, 560px); padding: 2rem; color: #17213e; background: #f7fcff; border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); }
.cookie-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cookie-modal-header h2 { margin: 0.5rem 0 0; color: #17213e; font-size: 1.7rem; letter-spacing: 0; }
.cookie-close { color: #526174; background: none; border: 0; cursor: pointer; font-size: 1.1rem; }
.cookie-modal-intro { margin: 1.25rem 0; color: #526174; font-size: 0.95rem; line-height: 1.6; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(23, 33, 62, 0.12); }
.cookie-option strong { display: block; font-family: var(--font-nav); font-size: 1rem; }
.cookie-option p { margin: 0.3rem 0 0; color: #617083; font-size: 0.88rem; line-height: 1.45; }
.cookie-status { flex: 0 0 auto; color: #07845d; font-family: var(--font-nav); font-size: 0.8rem; font-weight: 700; }
.cookie-option-toggle { position: relative; cursor: pointer; }
.cookie-option-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-toggle { position: relative; flex: 0 0 44px; width: 44px; height: 24px; background: #b8c4cf; border-radius: 999px; transition: background 0.2s ease; }
.cookie-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; }
.cookie-option-toggle input:checked + .cookie-toggle { background: #07845d; }
.cookie-option-toggle input:checked + .cookie-toggle::after { transform: translateX(20px); }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 1.5rem; margin-top: 0.5rem; }
.cookie-modal-actions .btn { border-radius: 5px; }
.cookie-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  .cookie-banner { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; padding: 1rem; }
  .cookie-banner-content { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .cookie-banner-actions { width: 100%; justify-content: flex-end; }
  .cookie-modal-card { padding: 1.4rem; }
  .cookie-option { align-items: flex-start; }
}

/* Homepage */
.home-hero {
  min-height: min(820px, calc(100vh - 78px));
  position: relative;
  display: flex;
  align-items: stretch;
  background: #070b1e url('/img/4127298.jpg') center/cover no-repeat;
  overflow: hidden;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 8, 25, 0.96) 0%, rgba(5, 8, 25, 0.78) 44%, rgba(5, 8, 25, 0.18) 100%), linear-gradient(135deg, rgba(7, 87, 109, 0.34), transparent 45%);
}

.home-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 0rem;
}

.home-hero-content::before {
  content: '';
  position: absolute;
  top: 12%;
  right: 7%;
  width: min(38vw, 540px);
  aspect-ratio: 1;
  border: 1px solid rgba(159, 232, 245, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(159, 232, 245, 0.04), 0 0 0 64px rgba(159, 232, 245, 0.025);
  pointer-events: none;
}

.hero-topline {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  margin-bottom: auto;
  color: rgba(255, 255, 255, 0.68);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.hero-topline i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.65rem 0.14rem;
  background: #81e5f2;
  border-radius: 50%;
}

.hero-kicker,
.section-label {
  color: #93e6f5;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hero-kicker span {
  width: 2.5rem;
  height: 1px;
  background: #52d5ed;
}

.home-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 5.8vw, 5.6rem);
  letter-spacing: 0;
  margin-bottom: 1.5rem;
}

.home-hero h1 em {
  color: #9fe8f5;
  font-style: normal;
}

.hero-copy {
  max-width: 650px;
  color: rgba(248, 250, 252, 0.78);
  font-size: 1.4rem;
  line-height: 1.75;
}

.hero-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.hero-capabilities span {
  padding: 0.45rem 0.7rem;
  color: #d9faff;
  border: 1px solid rgba(159, 232, 245, 0.34);
  border-radius: 3px;
  background: rgba(7, 33, 63, 0.38);
  font-family: var(--font-nav);
  font-size: 0.82rem;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.hero-actions .btn,
.home-cta .btn,
.operating-section .btn {
  border-radius: 6px;
}

.hero-text-link {
  color: #fff;
  font-family: var(--font-nav);
  font-weight: 700;
  text-decoration: none;
}

.hero-text-link i,
.home-cta .btn i,
.operating-section .btn i {
  margin-left: 0.55rem;
}

.hero-brief {
  position: relative;
  margin-bottom: 2rem;
  padding: 1.4rem;
  border: 1px solid rgba(159, 232, 245, 0.34);
  border-radius: 6px;
  background: rgba(5, 16, 40, 0.58);
  backdrop-filter: blur(14px);
}

.hero-brief-head,
.hero-brief-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-brief-head {
  color: #9fe8f5;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.hero-brief-head i { font-size: 1rem; }

.hero-signal {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.35rem 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 1px solid rgba(159, 232, 245, 0.45);
}

.signal-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #061020;
  background: #9fe8f5;
  border-radius: 50%;
}

.hero-signal span,
.hero-signal strong,
.hero-stat-line strong,
.hero-stat-line span {
  display: block;
}

.hero-signal span { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; }
.hero-signal strong { color: #fff; font-family: var(--font-nav); font-size: 1rem; }

.hero-brief-line {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
  border-top: 1px solid rgba(159, 232, 245, 0.18);
  font-size: 0.82rem;
}

.hero-brief-line strong { color: #e9fcff; font-family: var(--font-nav); font-size: 0.86rem; }

.hero-stat-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.hero-stat-line > div { padding: 1.5rem 1.5rem 1.5rem 0; }
.hero-stat-line > div + div { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.24); }
.hero-stat-line strong { color: #a8effa; font-family: var(--font-nav); font-size: 1.8rem; }
.hero-stat-line span { color: rgba(255, 255, 255, 0.65); font-size: 0.84rem; }

.solution-section { padding: 7rem 0; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-heading h2,
.operating-section h2,
.home-cta h2 {
  max-width: 700px;
  margin: 0.75rem 0 0;
  letter-spacing: 0;
}

.section-heading p { max-width: 420px; margin: 0; font-size: 1.18rem; line-height: 1.7; }

.solution-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(250px, auto));
  gap: 0.75rem;
}

.solution-tile {
  position: relative;
  min-height: 250px;
  padding: 1.75rem;
  overflow: hidden;
  color: #17213e;
  background-color: #eef7ff;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(23, 33, 62, 0.12);
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-tile:hover { transform: translateY(-6px); color: #17213e; box-shadow: 0 16px 28px rgba(5, 20, 56, 0.18); }
.solution-tile-wide { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; background-image: linear-gradient(rgba(232, 245, 255, 0.6), rgba(232, 245, 255, 0.91)), url('/img/solution-software.jpg'); }
.solution-tile-violet { background-image: linear-gradient(rgba(249, 241, 255, 0.61), rgba(249, 241, 255, 0.93)), url('/img/solution-crm.jpg'); }
.solution-tile-dark { background-image: linear-gradient(rgba(238, 253, 247, 0.61), rgba(238, 253, 247, 0.93)), url('/img/solution-contact.jpg'); }
.solution-tile-cyan { background-image: linear-gradient(rgba(237, 253, 255, 0.61), rgba(237, 253, 255, 0.93)), url('/img/solution-data.jpg'); }
.solution-tile > i { position: absolute; top: 1.6rem; right: 1.5rem; color: rgba(23, 33, 62, 0.64); font-size: 2rem; }
.solution-number { color: rgba(23, 33, 62, 0.54); font-family: var(--font-nav); font-size: 0.75rem; font-weight: 700; }
.solution-tile h3 { margin: 1rem 0 0.5rem; color: inherit; font-size: 1.5rem; }
.solution-tile p { max-width: 310px; margin: 0; color: rgba(23, 33, 62, 0.82); font-size: 1.15rem; line-height: 1.65; }
.solution-arrow { position: absolute; right: 1.5rem; bottom: 1.4rem; font-size: 1.2rem; }

.operating-section { padding: 7rem 0; background: #0d1430; }
.operating-section > .container > .row { min-height: 410px; }
.operating-section p { max-width: 500px; font-size: 1.2rem; line-height: 1.75; }
.operating-section .btn { margin-top: 1.5rem; }
.operating-flow { border-top: 1px solid rgba(159, 232, 245, 0.28); }
.flow-item { display: flex; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(159, 232, 245, 0.28); }
.flow-item > span { color: #79e1f0; font-family: var(--font-nav); font-size: 0.75rem; font-weight: 700; padding-top: 0.3rem; }
.flow-item h3 { margin: 0 0 0.25rem; color: #fff; font-size: 1.3rem; }
.flow-item p { margin: 0; font-size: 1.15rem; line-height: 1.65; }

.home-cta { padding: 7rem 0; background: #0a0e27; }
.home-cta-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr); gap: 3rem; padding: 3.5rem 4rem; background: linear-gradient(120deg, #07576d 0%, #0c496d 55%, #17265a 100%); border: 1px solid rgba(159, 232, 245, 0.32); border-radius: 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24); }
.home-cta .section-label { color: #d4fbff; }
.home-cta h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.6rem); }
.home-cta p { margin: 1rem 0 0; color: rgba(255, 255, 255, 0.8); font-size: 1.15rem; }
.cta-points { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.75rem; color: #e3fbff; font-family: var(--font-nav); font-size: 0.95rem; font-weight: 600; }
.cta-points i { color: #a8effa; margin-right: 0.35rem; }
.cta-action { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 2rem; color: #0e1c38; background: #e7fbff; border-radius: 6px; }
.cta-action-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.5rem; color: #07576d; background: #b8eff7; border-radius: 50%; font-size: 1.3rem; }
.cta-action strong { font-family: var(--font-nav); font-size: 1.35rem; }
.cta-action > span { margin: 0.35rem 0 1.5rem; color: #44556b; font-size: 1rem; }
.cta-action .btn { width: 100%; padding: 0.9rem 1.25rem; color: #fff; background: #17265a; box-shadow: none; }
.cta-action .btn:hover { background: #233873; }

@media (max-width: 991px) {
  .home-hero { min-height: auto; }
  .home-hero-content { padding-top: 5rem; }
  .home-hero-content::before { top: 20%; right: -8%; width: 52vw; }
  .hero-brief { margin-top: 2rem; max-width: 420px; }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-tile-wide { grid-row: auto; }
}

@media (max-width: 767px) {
  .home-hero { background-position: 63% center; }
  .home-hero-overlay { background: rgba(5, 8, 25, 0.82); }
  .home-hero-content { padding-top: 4rem; }
  .home-hero-content::before, .hero-topline { display: none; }
  .home-hero h1 { font-size: clamp(2.25rem, 9vw, 3.8rem) !important; overflow-wrap: normal; word-break: normal; }
  .hero-actions, .section-heading { align-items: flex-start; flex-direction: column; }
  .hero-actions { gap: 1.25rem; }
  .hero-actions .btn { width: auto; }
  .hero-brief { display: none; }
  .hero-stat-line { grid-template-columns: 1fr; margin-top: 3rem; }
  .hero-stat-line > div, .hero-stat-line > div + div { padding: 0.9rem 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .solution-section, .operating-section, .home-cta { padding: 4.5rem 0; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-tile { min-height: 190px; }
  .home-cta-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
  .cta-points { flex-direction: column; gap: 0.7rem; }
}

/* Blog */
.blog-header { padding: 8rem 0 4.5rem; }
.blog-header h1 { max-width: 760px; margin: 1rem 0; letter-spacing: 0; }
.blog-header .lead { max-width: 620px; }
.blog-listing { padding: 5rem 0 7rem; }
.blog-card { display: flex; flex-direction: column; padding: 2rem; background: rgba(30, 41, 59, 0.52); border: 1px solid rgba(159, 232, 245, 0.16); border-radius: 6px; }
.blog-date { color: #93e6f5; font-family: var(--font-nav); font-size: 0.82rem; font-weight: 700; }
.blog-card h2 { margin: 1rem 0; font-size: 1.7rem; letter-spacing: 0; }
.blog-card h2 a { color: #fff; text-decoration: none; }
.blog-card h2 a:hover { color: #a8effa; }
.blog-card p { margin-bottom: 1.5rem; font-size: 1.05rem; }
.blog-read-link, .blog-back { color: #a8effa; font-family: var(--font-nav); font-weight: 700; text-decoration: none; }
.blog-read-link { margin-top: auto; }
.blog-read-link i, .blog-back i { margin-left: 0.4rem; }
.blog-empty { max-width: 540px; padding: 4rem 2rem; margin: 0 auto; text-align: center; border: 1px solid rgba(159, 232, 245, 0.16); border-radius: 6px; background: rgba(30, 41, 59, 0.4); }
.blog-empty i { color: #93e6f5; font-size: 3rem; }
.blog-empty h2 { margin: 1.25rem 0 0.75rem; font-size: 1.8rem; }
.blog-article { padding: 8rem 0 7rem; }
.blog-article header { max-width: 850px; padding: 2.5rem 0; border-bottom: 1px solid rgba(159, 232, 245, 0.2); }
.blog-article h1 { margin: 1rem 0; letter-spacing: 0; }
.blog-article .blog-date { color: rgba(255, 255, 255, 0.62); }
.blog-article-content { max-width: 760px; padding-top: 3rem; }
.blog-lead { color: #d6e6ee; font-size: 1.4rem; line-height: 1.75; }
.blog-body { color: rgba(255, 255, 255, 0.82); font-size: 1.15rem; line-height: 1.9; white-space: pre-line; }
.admin-blog-list { display: grid; gap: 1rem; }
.admin-blog-item { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(159, 232, 245, 0.14); }
.admin-blog-item:last-child { border-bottom: 0; }
.admin-blog-item span { color: #93e6f5; font-size: 0.8rem; }
.admin-blog-item h3 { margin: 0.4rem 0; font-size: 1.2rem; }
.admin-blog-item h3 a { color: #fff; text-decoration: none; }
.admin-blog-item p { margin: 0; font-size: 0.95rem; }

/* Solution detail pages */
.solution-detail-hero {
  min-height: 560px;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
}
.solution-detail-hero-content { max-width: 820px; padding: 8rem 0 5rem; }
.solution-back-link { display: inline-block; margin-bottom: 3rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.solution-back-link i { margin-right: 0.4rem; }
.solution-detail-hero h1 { margin: 1rem 0 1.25rem; letter-spacing: 0; }
.solution-detail-hero h1 i { color: #9fe8f5; }
.solution-detail-hero p { max-width: 720px; color: rgba(255, 255, 255, 0.82); font-size: 1.35rem; line-height: 1.7; }
.solution-detail-body { padding: 7rem 0; }
.solution-detail-body h2 { max-width: 650px; margin: 0.75rem 0 1.5rem; letter-spacing: 0; }
.solution-summary { max-width: 700px; color: var(--text-muted); font-size: 1.2rem; line-height: 1.85; }
.solution-detail-body .btn { margin-top: 1rem; border-radius: 6px; }
.solution-feature-panel { padding: 2rem; background: rgba(30, 41, 59, 0.52); border: 1px solid rgba(159, 232, 245, 0.18); border-radius: 6px; }
.solution-feature-panel h3 { margin-bottom: 1.5rem; color: #fff; font-size: 1.4rem; }
.solution-feature-panel ul { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.solution-feature-panel li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; line-height: 1.5; }
.solution-feature-panel li i { flex: 0 0 auto; color: #8ce8f3; font-size: 1.2rem; }

/* WhatsApp Business product */
.whatsapp-product-hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(5, 8, 25, 0.94), rgba(5, 8, 25, 0.48)), url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1920&auto=format&fit=crop&q=85') center/cover;
}
.whatsapp-hero-content { max-width: 850px; padding: 8rem 0 5rem; }
.whatsapp-hero-content h1 { margin: 1rem 0 1.25rem; letter-spacing: 0; }
.whatsapp-hero-content h1 i { color: #68e29b; }
.whatsapp-hero-content > p { max-width: 760px; color: rgba(255, 255, 255, 0.84); font-size: 1.35rem; line-height: 1.75; }
.whatsapp-trust { display: inline-flex; align-items: center; gap: 0.5rem; color: #b8f4d1; font-family: var(--font-nav); font-weight: 600; }
.whatsapp-trust i { font-size: 1.2rem; }
.whatsapp-intro { padding: 7rem 0; }
.whatsapp-intro h2, .whatsapp-capabilities h2, .whatsapp-use-cases h2 { margin: 0.75rem 0 1.25rem; letter-spacing: 0; }
.whatsapp-intro p { max-width: 650px; font-size: 1.15rem; line-height: 1.8; }
.whatsapp-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.whatsapp-metric-grid div { padding: 1.5rem; background: rgba(30, 41, 59, 0.52); border: 1px solid rgba(159, 232, 245, 0.16); border-radius: 6px; }
.whatsapp-metric-grid strong, .whatsapp-metric-grid span { display: block; }
.whatsapp-metric-grid strong { color: #8ce8f3; font-family: var(--font-nav); font-size: 1.8rem; }
.whatsapp-metric-grid span { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.95rem; }
.whatsapp-capabilities { padding: 7rem 0; background: #0d1430; }
.whatsapp-capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.whatsapp-capability-grid article { min-height: 300px; padding: 1.5rem; background: rgba(30, 41, 59, 0.65); border: 1px solid rgba(159, 232, 245, 0.14); border-radius: 6px; }
.whatsapp-capability-grid article > i { color: #68e29b; font-size: 1.8rem; }
.whatsapp-capability-grid h3 { margin: 1.25rem 0 0.65rem; color: #fff; font-size: 1.2rem; }
.whatsapp-capability-grid p { min-height: 92px; margin-bottom: 1rem; font-size: 0.98rem; line-height: 1.6; }
.whatsapp-capability-grid ul { padding: 0; margin: 0; list-style: none; }
.whatsapp-capability-grid li { padding: 0.35rem 0; color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; }
.whatsapp-capability-grid li::before { content: '•'; margin-right: 0.45rem; color: #8ce8f3; }
.whatsapp-use-cases { padding: 7rem 0; }
.whatsapp-use-cases p { max-width: 480px; font-size: 1.15rem; line-height: 1.8; }
.whatsapp-use-case-list { border-top: 1px solid rgba(159, 232, 245, 0.2); }
.whatsapp-use-case-list > div { display: flex; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid rgba(159, 232, 245, 0.2); }
.whatsapp-use-case-list > div > i { flex: 0 0 2.5rem; color: #68e29b; font-size: 1.5rem; }
.whatsapp-use-case-list strong, .whatsapp-use-case-list small { display: block; }
.whatsapp-use-case-list strong { color: #fff; font-family: var(--font-nav); font-size: 1.05rem; }
.whatsapp-use-case-list small { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.98rem; line-height: 1.5; }
.whatsapp-cta { padding: 6rem 0; background: linear-gradient(120deg, #07576d, #0d1430); }
.whatsapp-cta .container { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.whatsapp-cta h2 { max-width: 750px; margin: 0.75rem 0 1rem; color: #fff; letter-spacing: 0; }
.whatsapp-cta p { max-width: 700px; margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 1.1rem; }
.whatsapp-cta .btn { flex: 0 0 auto; border-radius: 6px; }

@media (max-width: 991px) {
  .whatsapp-capability-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .whatsapp-product-hero { min-height: 560px; }
  .whatsapp-hero-content { padding: 6rem 0 3rem; }
  .whatsapp-hero-content h1 { font-size: 2.25rem !important; }
  .whatsapp-hero-content > p { font-size: 1.1rem; }
  .whatsapp-hero-content .hero-actions { align-items: flex-start; }
  .whatsapp-trust { font-size: 0.9rem; }
  .whatsapp-intro, .whatsapp-capabilities, .whatsapp-use-cases, .whatsapp-cta { padding: 4.5rem 0; }
  .whatsapp-capability-grid { grid-template-columns: 1fr; }
  .whatsapp-capability-grid article { min-height: auto; }
  .whatsapp-capability-grid p { min-height: auto; }
  .whatsapp-cta .container { align-items: flex-start; flex-direction: column; }
  .whatsapp-cta .btn { width: auto; }
}

@media (max-width: 767px) {
  .blog-header, .blog-article { padding: 5rem 0 3rem; }
  .blog-listing { padding: 3rem 0 4.5rem; }
  .blog-card { padding: 1.5rem; }
  .blog-article header { padding: 1.5rem 0; }
  .blog-article-content { padding-top: 2rem; }
  .blog-lead { font-size: 1.2rem; }
  .blog-body { font-size: 1.05rem; }
  .solution-detail-hero { min-height: 500px; }
  .solution-detail-hero-content { padding: 6rem 0 3rem; }
  .solution-back-link { margin-bottom: 2rem; }
  .solution-detail-hero h1 { font-size: 2.25rem !important; }
  .solution-detail-hero p { font-size: 1.1rem; }
  .solution-detail-body { padding: 4.5rem 0; }
}