/* ==========================================================================
   FINAL CONSOLIDATED STYLESHEET
   - Main site styles + mobile/overlay styles
   - Includes stability & accessibility patches
   ========================================================================== */

/* CSS Custom Properties and Base Styles */
:root {
  /* Colors */
  --royal: #4169E1;
  --purple: #7C3AED;
  --purple-2: #6D28D9;
  --bg: #0f1220;
  --panel: #12162A;
  --muted: #94a3b8;
  --text: #E6E8EE;
  --gold: #F5C451;
  --white: #ffffff;
  --black: #000000;

  /* Gradients */
  --grad: linear-gradient(135deg, var(--royal), var(--purple));
  --grad-soft: linear-gradient(180deg, rgba(124,58,237,.12), rgba(65,105,225,.06));
  --grad-gold: linear-gradient(180deg, #FFE08A, #F5C451);

  /* Shadows */
  --ring: 0 0 0 3px rgba(245,196,81,.18);
  --shadow-1: 0 10px 25px rgba(0,0,0,.25);
  --shadow-2: 0 20px 50px rgba(65,105,225,.25);
  --shadow-3: 0 30px 60px rgba(0,0,0,.4);

  /* Border Radius */
  --radius: 18px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-xl: 32px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography */
  --font-xs: clamp(0.75rem, 2vw, 0.875rem);
  --font-sm: clamp(0.875rem, 2.2vw, 1rem);
  --font-base: clamp(1rem, 2.5vw, 1.125rem);
  --font-md: var(--font-base); /* patch: ensure references resolve */
  --font-lg: clamp(1.125rem, 3vw, 1.25rem);
  --font-xl: clamp(1.25rem, 3.5vw, 1.5rem);
  --font-2xl: clamp(1.5rem, 4vw, 2rem);
  --font-3xl: clamp(2rem, 5vw, 3rem);
  --font-4xl: clamp(2.5rem, 6vw, 4rem);

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Z-Index */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;

  /* Additional tokens (patch) */

      --primary-color: #6a82fb; /* Soft purple/blue */
    --accent-color: #fc5c7d; /* Pink/red accent */
  --secondary: var(--purple);
  --success: #10B981;
  --error: #EF4444;
  --z-overlay: 1000;
  --z-drawer: 1100;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
html, body, .page-wrapper{
  max-width: 100%;
  overflow-x: hidden;  /* fallback */
  overflow-x: clip;    /* modern (patch) */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(124,58,237,.18), transparent 50%),
    radial-gradient(900px 600px at -10% 20%, rgba(65,105,225,.18), transparent 40%),
    var(--bg);
  color: var(--text);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--font-4xl); }
h2 { font-size: var(--font-3xl); }
h3 { font-size: var(--font-2xl); }
h4 { font-size: var(--font-xl); }
h5 { font-size: var(--font-lg); }
h6 { font-size: var(--font-base); }

p {
  line-height: var(--leading-relaxed);
  color: var(--muted);
}
a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}
img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Accessible focus outline (patch) */
a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,105,225,.45);
  border-radius: 10px;
}

/* Container and Layout */
.container {
  max-width: min(1200px, 100% - 2rem);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  position: relative;
  background-blend-mode: overlay;
  background-color: rgba(15,18,32,0.85);
}

/* Activate container queries where used (patch) */
.card, .course-card, .product-card, .section { container-type: inline-size; }

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.section-header h2 {
  margin: var(--space-lg) 0 var(--space-md);
  color: var(--white);
}
.section-header .lead {
  font-size: var(--font-lg);
  color: var(--muted);
  margin: 0;
}

/* Grid Systems */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

/* Header Styles */
header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(18,22,42,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); /* patch */
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: all 0.3s ease;
  will-change: backdrop-filter, transform; /* patch */
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  min-height: 70px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--white);
}
.brand-text {
  font-size: var(--font-lg);
  display: none;
}
.logo {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.logo::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    transparent 0 280deg,
    rgba(255,255,255,.22) 320deg 360deg
  );
  animation: spin 6s linear infinite;
}
.menu-wrapper {
  display: none;
  align-items: center;
  gap: var(--space-xl);
}
.menu {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.menu a {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: #cbd5e1;
  font-weight: 500;
  transition: all 0.2s ease;
}
.menu a:hover,
.menu a:focus {
  background: rgba(124,58,237,.12);
  color: var(--white);
  transform: translateY(-1px);
}
.menu .active{
  background: rgba(124,58,237,.12);
  color: var(--white);
  transform: translateY(-1px);
}
.cta { display: flex; gap: var(--space-sm); }
.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}
.mobile-menu-toggle:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  font-size: var(--font-sm);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--grad);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.btn-primary:hover { box-shadow: var(--shadow-3); }
.btn-ghost {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}
.btn-gold { background: var(--grad-gold); color: #111827; font-weight: 700; }
.btn-small { padding: var(--space-xs) var(--space-sm); font-size: var(--font-xs); min-height: 36px; }
.btn-large { padding: var(--space-md) var(--space-lg); font-size: var(--font-base); min-height: 52px; }
.btn-full { width: 100%; }

/* Hero Section */
.hero {
  position: relative;
  overflow: hidden;
  background-image: url('https://images.unsplash.com/photos/futuristic-earth-map-technology-abstract-background-represent-global-connection-concept-m2pxgGc1Yas?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* patch */
  min-height: 100dvh;  /* patch */
  display: flex;
  align-items: center;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  position: relative;
  z-index: 2;
}
.hero-content { text-align: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(124,58,237,.16);
  border: 1px solid rgba(124,58,237,.3);
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: #E0E7FF;
  margin-bottom: var(--space-lg);
}
.headline {
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-lg);
  color: var(--white);
}
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.sub {
  font-size: var(--font-lg);
  color: #cbd5e1;
  margin: 0 0 var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  max-width: 800px;
  margin: 0 auto;
}
.chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-sm);
  justify-content: center;
}
.chip:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.hero-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
   max-width: 400px;

}
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-1);
  text-align: center;
  transition: all 0.3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card-icon { font-size: 2rem; color: var(--gold); margin-bottom: var(--space-sm); }
.card h3 { margin-bottom: var(--space-xs); color: var(--white); }
.card p { font-size: var(--font-sm); color: var(--muted); }

/* Orb Animations */
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.orb {
  position: absolute;
  filter: blur(32px);
  opacity: 0.6;
  border-radius: 999px;
  mix-blend-mode: screen;
}
.orb.one {
  width: 380px; height: 380px;
  background: radial-gradient(circle at 30% 30%, #7C3AED, transparent 60%);
  top: -60px; left: -40px;
  animation: float 12s ease-in-out infinite;
}
.orb.two {
  width: 420px; height: 420px;
  background: radial-gradient(circle at 70% 30%, #4169E1, transparent 60%);
  bottom: -90px; right: -60px;
  animation: float 14s ease-in-out infinite reverse;
}

/* Pills and Tags */
.pill {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  background: rgba(245,196,81,.14);
  border: 1px solid rgba(245,196,81,.35);
  color: #FFE6A7;
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--font-sm);
  margin-bottom: var(--space-lg);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-xs);
  color: #cbd5e1;
  background: rgba(124,58,237,.16);
  border: 1px solid rgba(124,58,237,.3);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
}
.badge {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--font-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

/* Solutions Section */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}
.solution-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-1);
  transition: all 0.3s ease;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.solution-icon {
  width: 60px; height: 60px; border-radius: var(--radius-sm);
  background: var(--grad); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-lg); font-size: 1.5rem; color: var(--white);
}
.solution-card h3 { margin-bottom: var(--space-md); color: var(--white); }
.solution-card p { margin-bottom: var(--space-lg); line-height: var(--leading-relaxed); }
.solution-features { list-style: none; margin-bottom: var(--space-lg); }
.solution-features li {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-sm); color: var(--muted); font-size: var(--font-sm);
}
.solution-features li i { color: var(--gold); }

/* EmployeeForm Styles */
.input, select, textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: var(--font-sm);
  transition: all 0.2s ease;
  min-height: 44px;
}
.input:focus, select:focus, textarea:focus { border-color: var(--royal); box-shadow: var(--ring); }
.filters { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-lg) 0 var(--space-xl); }

/* Background Images for Sections */


#talent {
  background-image:  url('{{ asset('public/frontend/images/t1.jpg') }}');
  background-size: cover; background-position: center; background-attachment: fixed;
}

#testimonials {
  background-image: url('{{ asset('public/frontend/images/t2.jpg') }}');

  background-size: cover; background-position: center; background-attachment: fixed;
}

#about {
  background-image: url('{{ asset('public/frontend/images/t1.jpg') }}');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#case-studies {
  background-image: url('{{ asset('public/frontend/images/t2.jpg') }}');
  background-size: cover; background-position: center; background-attachment: fixed;
}

/* Training Section */
.training-filters { margin-bottom: var(--space-2xl); }
.carousel { position: relative; }
.scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--space-lg);
  overflow-x: auto;
  padding: var(--space-xs);
  scroll-snap-type: x mandatory;
  scroll-padding: var(--space-xs);
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.4) transparent;
}
.scroll::-webkit-scrollbar { height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(124,58,237,.4), rgba(65,105,225,.4));
  border-radius: 999px;
}
.slide { scroll-snap-align: start; }
.course { display: flex; flex-direction: column; gap: var(--space-md); height: 100%; }
.course-thumb {
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  background: var(--grad);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.course-icon { font-size: 3rem; color: var(--white); }
.course-price {
  position: absolute; bottom: var(--space-sm); left: var(--space-sm);
  background: rgba(17,24,39,.9);
  border: 1px solid rgba(255,255,255,.12);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px; font-weight: 700; font-size: var(--font-sm); color: var(--white);
}
.course-content { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); }
.course h4 { margin: 0; color: var(--white); }
.course p { flex: 1; font-size: var(--font-sm); }
.course-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-xs); color: var(--muted); }
.rating { display: flex; align-items: center; gap: var(--space-xs); }
.rating i { color: var(--gold); }
.carousel-nav {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; padding: 0 var(--space-md);
}
.carousel-btn {
  pointer-events: auto; backdrop-filter: blur(6px); width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: var(--white);
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.carousel-btn:hover { background: rgba(0,0,0,.5); transform: scale(1.05); }

/* Talent Section */
.talent-content h3 { margin-bottom: var(--space-lg); color: var(--white); }
.list { display: grid; gap: var(--space-lg); }
.item {
  display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-lg);
  border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: all 0.3s ease;
}
.item:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.avatar {
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0;
}
.item h4 { margin-bottom: var(--space-xs); color: var(--white); }
.item p { font-size: var(--font-sm); }
.talent-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-1);
}
.stat-number {
  font-size: var(--font-3xl); font-weight: 800; color: var(--white);
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: var(--space-xs);
}
.stat-label { font-size: var(--font-sm); color: var(--muted); font-weight: 600; }

/* Jobs Section */
.job-filters { margin-bottom: var(--space-2xl); }
.jobs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl);
}
.job-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-1);
  transition: all 0.3s ease;
}
.job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.job-header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-lg); gap: var(--space-md);
}
.job-company { display: flex; gap: var(--space-md); align-items: flex-start; }
.company-logo {
  width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem; flex-shrink: 0;
}
.job-company h3 { margin-bottom: var(--space-xs); color: var(--white); }
.job-company p { font-size: var(--font-sm); color: var(--muted); }
.job-salary { font-weight: 700; color: var(--gold); font-size: var(--font-lg); }
.job-description { margin-bottom: var(--space-lg); }
.job-description p { font-size: var(--font-sm); line-height: var(--leading-relaxed); }
.job-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.job-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.job-type { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-sm); color: var(--muted); }

/* Testimonials Section */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-xl); }
.testimonial-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-1);
  transition: all 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.quote { position: relative; margin-bottom: var(--space-lg); }
.quote-icon { position: absolute; top: -10px; left: -6px; color: rgba(245,196,81,.8); font-size: 1.5rem; }
.quote p { padding-left: var(--space-lg); font-style: italic; line-height: var(--leading-relaxed); color: var(--text); }
.testimonial-author {
  display: flex; gap: var(--space-md); align-items: center; margin-bottom: var(--space-md);
}
.author-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--white);
}
.testimonial-author h4 { margin-bottom: var(--space-xs); color: var(--white); }
.testimonial-author p { font-size: var(--font-sm); color: var(--muted); }
.testimonial-rating { display: flex; gap: var(--space-xs); }
.testimonial-rating i { color: var(--gold); }

/* Case Studies Section */
.case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); }
.case-study-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: all 0.3s ease;
}
.case-study-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.case-study-image {
  aspect-ratio: 16/9; background: var(--grad); display: flex; align-items: center; justify-content: center; position: relative;
}
.case-study-icon { font-size: 3rem; color: var(--white); }
.case-study-content { padding: var(--space-xl); }
.case-study-content h3 { margin-bottom: var(--space-md); color: var(--white); }
.case-study-content p { margin-bottom: var(--space-lg); line-height: var(--leading-relaxed); }
.case-study-metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg);
}
.metric { text-align: center; padding: var(--space-md); background: rgba(255,255,255,.04); border-radius: var(--radius-sm); }
.metric-value { display: block; font-size: var(--font-2xl); font-weight: 800; color: var(--gold); line-height: 1; }
.metric-label { font-size: var(--font-xs); color: var(--muted); margin-top: var(--space-xs); }

/* About Section */
.about-content { display: grid; gap: var(--space-3xl); }
.about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); }
.stat-item {
  text-align: center; padding: var(--space-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.about-mission { max-width: 800px; margin: 0 auto; text-align: center; }
.about-mission h3 { margin-bottom: var(--space-lg); color: var(--white); }
.about-mission p { margin-bottom: var(--space-xl); font-size: var(--font-lg); line-height: var(--leading-relaxed); }
.mission-points { display: grid; gap: var(--space-md); text-align: left; }
.mission-point {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm);
}
.mission-point i { color: var(--gold); font-size: 1.25rem; }

/* Support Section */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); }
.support-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-1);
}
.support-icon { font-size: 2.5rem; color: var(--gold); margin-bottom: var(--space-lg); }
.support-card h3 { margin-bottom: var(--space-md); color: var(--white); }
.support-card p { margin-bottom: var(--space-lg); line-height: var(--leading-relaxed); }
.faq-list { display: grid; gap: var(--space-sm); }
details {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}
summary { cursor: pointer; font-weight: 600; color: var(--white); padding: var(--space-sm) 0; }
details[open] summary { margin-bottom: var(--space-sm); }
details p { padding-left: var(--space-md); font-size: var(--font-sm); }
.resource-links { display: grid; gap: var(--space-sm); }
.resource-link {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); transition: all 0.2s ease;
}
.resource-link:hover { background: rgba(255,255,255,.08); transform: translateX(4px); }
.resource-link i { color: var(--gold); }
.contact-methods { display: grid; gap: var(--space-lg); }
.contact-method { display: flex; gap: var(--space-md); align-items: center; }
.contact-method i {
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0;
}
.contact-method h4 { margin-bottom: var(--space-xs); color: var(--white); }
.contact-method p { font-size: var(--font-sm); color: var(--muted); }

/* Contact Section */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); }
.contact-info h3 { margin-bottom: var(--space-lg); color: var(--white); }
.contact-info p { margin-bottom: var(--space-xl); font-size: var(--font-lg); line-height: var(--leading-relaxed); }
.contact-details { display: grid; gap: var(--space-lg); }
.contact-detail { display: flex; gap: var(--space-md); align-items: flex-start; }
.contact-detail i {
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0; margin-top: var(--space-xs);
}
.contact-detail h4 { margin-bottom: var(--space-xs); color: var(--white); }
.contact-detail p { font-size: var(--font-sm); color: var(--muted); margin: 0; }
.contact-form {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-1);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.form-group { margin-bottom: var(--space-lg); }
.form-group label {
  display: block; margin-bottom: var(--space-xs); font-weight: 600; color: var(--white); font-size: var(--font-sm);
}
.form-group .input, .form-group select, .form-group textarea { width: 100%; }
textarea { resize: vertical; min-height: 120px; }

/* Footer */
footer {
  margin-top: var(--space-3xl);
  padding: var(--space-3xl) 0 var(--space-xl);
  border-top: 1px solid rgba(255,255,255,.08);
  color: #cbd5e1;
  background: rgba(12,14,26,0.8);
}
.footer-content {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl);
}
.footer-section .brand { margin-bottom: var(--space-lg); }
.footer-section p { margin-bottom: var(--space-lg); line-height: var(--leading-relaxed); }
.social-links { display: flex; gap: var(--space-sm); }
.social-links a {
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all 0.2s ease;
}
.social-links a:hover { background: var(--grad); color: var(--white); transform: translateY(-2px); }
.footer-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-xl);
}
.footer-column h4 { margin-bottom: var(--space-lg); color: var(--white); font-size: var(--font-base); }
.footer-column a { display: block; margin-bottom: var(--space-sm); color: var(--muted); font-size: var(--font-sm); transition: all 0.2s ease; }
.footer-column a:hover { color: var(--white); transform: translateX(4px); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; gap: var(--space-md);
}
.footer-legal { display: flex; gap: var(--space-sm); }
.footer-legal a { color: var(--muted); font-size: var(--font-sm); transition: all 0.2s ease; }
.footer-legal a:hover { color: var(--white); }

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.reveal.show { opacity: 1; transform: translateY(0); }

/* Responsive Design - Tablet */
@media (min-width: 768px) {
  .brand-text { display: block; }
  .menu-wrapper { display: flex; }
  .mobile-menu-toggle { display: none; }
  .hero-inner { grid-template-columns: 1.2fr 0.8fr; text-align: left; }
  .hero-content { text-align: left; }
  .sub { margin-left: 0; margin-right: 0; }
  .quick-grid { margin: 0; grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1.2fr 0.8fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .footer-content { grid-template-columns: 1fr 2fr; }
  .list { grid-template-columns: repeat(2, 1fr); }
  .scroll { grid-auto-columns: calc((100% - 40px) / 3); }
}

/* Responsive Design - Desktop */
@media (min-width: 1024px) {
  .container { max-width: min(1200px, 100% - 4rem); }
  .scroll { grid-auto-columns: calc((100% - 60px) / 4); }
  .about-mission { text-align: left; }
  .mission-points { grid-template-columns: repeat(3, 1fr); }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .container { max-width: 1400px; }
}

/* Courses Grid Layout */
.courses-grid-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-xl); margin-bottom: var(--space-2xl);
}
.course-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.15); }
.course-card.featured { border: 1px solid var(--primary); box-shadow: 0 0 0 1px rgba(65,105,225,.3); }
.course-badge {
  position: absolute; top: var(--space-md); left: var(--space-md);
  background: var(--grad); color: var(--white);
  padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-size: var(--font-xs); font-weight: 600; z-index: 2;
  display: flex; align-items: center; gap: var(--space-xs);
}
.course-image {
  height: 200px; background: var(--grad); position: relative; display: flex; align-items: center; justify-content: center;
}
.course-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.course-icon { font-size: 3rem; color: var(--white); opacity: 0.9; }
.course-content { padding: var(--space-xl); flex: 1; display: flex; flex-direction: column; gap: var(--space-md); }
.course-meta { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.course-category { background: rgba(65,105,225,.15); color: var(--primary); padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-size: var(--font-xs); font-weight: 500; }
.course-level { background: rgba(124,58,237,.15); color: var(--secondary); padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-size: var(--font-xs); font-weight: 500; }
.course-card h3 { color: var(--white); margin: 0 0 var(--space-sm) 0; font-size: var(--font-xl); line-height: 1.3; }
.course-card p { color: var(--muted); flex: 1; margin-bottom: var(--space-lg); line-height: 1.6; }
.course-stats { display: flex; gap: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.stat { display: flex; align-items: center; gap: var(--space-xs); color: var(--muted); font-size: var(--font-sm); }
.stat i { color: var(--primary); }
.course-features { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.feature { color: var(--muted); font-size: var(--font-sm); }
.course-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,.08); }
.course-price { display: flex; align-items: center; gap: var(--space-sm); }
.price-current { font-size: var(--font-xl); font-weight: 700; color: var(--white); }
.price-original { font-size: var(--font-md); color: var(--muted); text-decoration: line-through; }
.load-more-section { text-align: center; margin-top: var(--space-2xl); }

/* Learning Paths Grid */
.learning-paths-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-xl); }
.learning-path-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all 0.3s ease;
}
.learning-path-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: rgba(255,255,255,.15); }
.path-header { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
.path-icon {
  width: 48px; height: 48px; background: var(--grad); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; flex-shrink: 0;
}
.path-info h3 { color: var(--white); margin: 0 0 var(--space-xs) 0; }
.path-info p { color: var(--muted); margin: 0; font-size: var(--font-sm); }
.path-progress { margin-bottom: var(--space-lg); }
.progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-sm); }
.progress-fill { height: 100%; background: var(--grad); border-radius: 999px; transition: width 0.3s ease; }
.progress-text { color: var(--muted); font-size: var(--font-sm); }
.path-courses { margin-bottom: var(--space-xl); }
.path-course {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.path-course:last-child { border-bottom: none; }
.course-number {
  width: 24px; height: 24px; background: var(--grad); color: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: var(--font-xs); font-weight: 600; flex-shrink: 0;
}
.course-name { color: var(--muted); font-size: var(--font-sm); }

/* Course Filters */
.course-filters-section { margin-bottom: var(--space-2xl); }
.filters-header { text-align: center; margin-bottom: var(--space-xl); }
.filters-header h2 { color: var(--white); margin-bottom: var(--space-sm); }
.filters-header p { color: var(--muted); }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); }
.filter-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.filter-group label { color: var(--white); font-weight: 500; font-size: var(--font-sm); }
.search-bar { display: flex; gap: var(--space-md); align-items: center; max-width: 600px; margin: 0 auto; }
.search-input-wrapper { position: relative; flex: 1; }
.search-input-wrapper i { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input { padding-left: calc(var(--space-md) + 24px); }
.search-btn { flex-shrink: 0; }

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
  .courses-grid-container { grid-template-columns: 1fr; }
  .learning-paths-grid { grid-template-columns: 1fr; }
  .filters-grid { grid-template-columns: 1fr; }
  .search-bar { flex-direction: column; }
  .course-stats { gap: var(--space-md); }
  .course-footer { flex-direction: column; gap: var(--space-md); align-items: stretch; }
}
@media (min-width: 1024px) {
  .courses-grid-container { grid-template-columns: repeat(3, 1fr); }
  .learning-paths-grid { grid-template-columns: repeat(3, 1fr); }
  .filters-grid { grid-template-columns: repeat(4, 1fr); }
}

/* About Page Professional Layouts */
/* Team Grid Professional */
.team-grid-professional {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl);
}
.team-card {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex; flex-direction: column;
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.2); border-color: rgba(255,255,255,.2); }
.team-card-header {
  padding: var(--space-xl); display: flex; align-items: center; gap: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.team-card .member-avatar {
  width: 64px; height: 64px; background: var(--grad); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; flex-shrink: 0;
}
.member-info h4 { margin: 0 0 var(--space-xs) 0; color: var(--white); font-size: var(--font-lg); font-weight: 600; }
.member-role { margin: 0; color: var(--primary); font-size: var(--font-sm); font-weight: 500; }
.team-card-content { padding: var(--space-xl); flex: 1; }
.member-bio { color: var(--muted); line-height: 1.6; margin-bottom: var(--space-lg); }
.member-highlights { display: flex; flex-direction: column; gap: var(--space-xs); }
.highlight { color: var(--muted); font-size: var(--font-sm); }
.team-card-footer { padding: var(--space-lg) var(--space-xl); border-top: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02); }
.team-card .member-social { display: flex; gap: var(--space-md); }
.social-link {
  width: 36px; height: 36px; background: rgba(255,255,255,.1); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all 0.2s ease; text-decoration: none;
}
.social-link:hover { background: var(--grad); color: var(--white); transform: translateY(-2px); }

/* Mission & Vision Professional Grid */
.mission-vision-grid-professional {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-2xl); margin: var(--space-2xl) 0;
}
.mission-vision-card {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.mission-vision-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad); }
.mission-vision-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,.15); border-color: rgba(255,255,255,.2); }
.card-icon-header { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.mission-icon, .vision-icon {
  width: 56px; height: 56px; background: var(--grad); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem;
}
.card-icon-header h3 { margin: 0; color: var(--white); font-size: var(--font-2xl); }
.card-content p { color: var(--muted); line-height: 1.7; margin-bottom: var(--space-lg); font-size: var(--font-md); }
.mission-points-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.mission-points-list .point { color: var(--muted); font-size: var(--font-sm); }

/* Certifications Professional Grid */
.certifications-grid-professional {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl);
}
.certification-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}
.certification-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,.1); border-color: rgba(255,255,255,.15); }
.cert-card-header {
  padding: var(--space-xl); text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02);
}
.cert-icon {
  width: 48px; height: 48px; background: var(--grad); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem;
  margin: 0 auto var(--space-md) auto;
}
.cert-card-header h3 { margin: 0 0 var(--space-xs) 0; color: var(--white); font-size: var(--font-lg); }
.cert-category-desc { margin: 0; color: var(--muted); font-size: var(--font-sm); }
.cert-card-content { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.cert-item-modern {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md);
  background: rgba(255,255,255,.03); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.05); transition: all 0.2s ease;
}
.cert-item-modern:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.cert-badge { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1rem; flex-shrink: 0; }
.cert-badge.aws { background: linear-gradient(135deg, #FF9900, #FF6B00); }
.cert-badge.microsoft { background: linear-gradient(135deg, #00A1F1, #0078D4); }
.cert-badge.google { background: linear-gradient(135deg, #4285F4, #34A853); }
.cert-badge.security { background: linear-gradient(135deg, #10B981, #059669); }
.cert-badge.industry { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.cert-details { display: flex; flex-direction: column; gap: var(--space-xs); }
.cert-name { color: var(--white); font-weight: 500; font-size: var(--font-sm); }
.cert-level { color: var(--muted); font-size: var(--font-xs); }

/* About Page Responsive Adjustments */
@media (max-width: 768px) {
  .team-grid-professional { grid-template-columns: 1fr; }
  .mission-vision-grid-professional { grid-template-columns: 1fr; gap: var(--space-xl); }
  .certifications-grid-professional { grid-template-columns: 1fr; }
  .team-card-header { flex-direction: column; text-align: center; gap: var(--space-md); }
  .cert-item-modern { flex-direction: column; text-align: center; gap: var(--space-sm); }
}
@media (min-width: 1024px) {
  .team-grid-professional { grid-template-columns: repeat(2, 1fr); }
  .certifications-grid-professional { grid-template-columns: repeat(3, 1fr); }
}

/* Shop Pages Styling */
/* Shop Filters */
.shop-filters-section {
  padding: var(--space-xl) 0;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.filters-header { text-align: center; margin-bottom: var(--space-xl); }
.shop-filters-container { max-width: 1000px; margin: 0 auto; }
.filters-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); }

/* Cart Button */
.cart-btn { position: relative; display: flex; align-items: center; gap: var(--space-xs); }
.cart-count {
  background: var(--grad); color: var(--white); border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; font-size: var(--font-xs); font-weight: 600;
}

/* Products Grid Container */
.products-grid-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-2xl);
}
.product-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.15); }
.product-card.featured { border: 1px solid var(--primary); box-shadow: 0 0 0 1px rgba(65,105,225,.3); }
.product-badge {
  position: absolute; top: var(--space-md); left: var(--space-md);
  background: var(--grad); color: var(--white);
  padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-size: var(--font-xs); font-weight: 600; z-index: 2;
  display: flex; align-items: center; gap: var(--space-xs);
}
.product-image { height: 200px; background: var(--grad); position: relative; display: flex; align-items: center; justify-content: center; }
.product-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.product-icon { font-size: 3rem; color: var(--white); opacity: 0.9; }
.product-content { padding: var(--space-xl); flex: 1; display: flex; flex-direction: column; gap: var(--space-md); }
.product-meta { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.product-category { background: rgba(65,105,225,.15); color: var(--primary); padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-size: var(--font-xs); font-weight: 500; }
.product-type { background: rgba(124,58,237,.15); color: var(--secondary); padding: var(--space-xs) var(--space-sm); border-radius: 999px; font-size: var(--font-xs); font-weight: 500; }
.product-card h3 { color: var(--white); margin: 0 0 var(--space-sm) 0; font-size: var(--font-xl); line-height: 1.3; }
.product-card p { color: var(--muted); flex: 1; margin-bottom: var(--space-lg); line-height: 1.6; }
.product-features { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.product-features .feature { color: var(--muted); font-size: var(--font-sm); }
.product-pricing { margin-bottom: var(--space-lg); }
.price-main { display: flex; align-items: baseline; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.price-current { font-size: var(--font-2xl); font-weight: 700; color: var(--white); }
.price-period { font-size: var(--font-md); color: var(--muted); }
.price-details { display: flex; flex-direction: column; gap: var(--space-xs); }
.price-original { font-size: var(--font-md); color: var(--muted); text-decoration: line-through; }
.price-setup, .price-note { font-size: var(--font-sm); color: var(--muted); }
.savings { color: var(--success); font-size: var(--font-sm); font-weight: 500; }
.product-actions { display: flex; gap: var(--space-md); margin-top: auto; }
.product-actions .btn { flex: 1; }

/* Cart Sidebar */
.cart-sidebar {
  position: fixed; top: 0; right: calc(-1 * min(400px, 100dvw));
  width: min(400px, 100dvw); height: 100vh;
  background: rgba(17,24,39,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,.1);
  z-index: var(--z-drawer);
  transition: right 0.3s ease;
  display: flex; flex-direction: column;
}
.cart-sidebar.active { right: 0; }
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: var(--z-overlay);
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.cart-overlay.active { opacity: 1; visibility: visible; }
.cart-header {
  padding: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between;
}
.cart-header h3 { margin: 0; color: var(--white); }
.cart-close {
  background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer;
  padding: var(--space-xs); border-radius: var(--radius-sm); transition: all 0.2s ease;
}
.cart-close:hover { color: var(--white); background: rgba(255,255,255,.1); }
.cart-content { flex: 1; overflow-y: auto; padding: var(--space-xl); }
.cart-empty { text-align: center; padding: var(--space-2xl) 0; color: var(--muted); }
.cart-empty i { font-size: 3rem; margin-bottom: var(--space-md); opacity: 0.5; }
.cart-empty-sub { font-size: var(--font-sm); margin-top: var(--space-xs); }
.cart-item {
  display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-info h4 { margin: 0 0 var(--space-xs) 0; color: var(--white); font-size: var(--font-md); }
.cart-item-info p { margin: 0 0 var(--space-sm) 0; color: var(--muted); font-size: var(--font-sm); }
.cart-item-quantity { display: flex; align-items: center; gap: var(--space-sm); }
.cart-item-quantity button {
  width: 24px; height: 24px; background: rgba(255,255,255,.1); border: none;
  border-radius: var(--radius-sm); color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.cart-item-quantity button:hover { background: var(--grad); }
.cart-item-quantity span { color: var(--white); font-weight: 500; min-width: 20px; text-align: center; }
.cart-item-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); }
.cart-item-price span { color: var(--white); font-weight: 600; }
.remove-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: var(--space-xs); border-radius: var(--radius-sm); transition: all 0.2s ease;
}
.remove-btn:hover { color: var(--error); background: rgba(239,68,68,.1); }
.cart-footer { padding: var(--space-xl); border-top: 1px solid rgba(255,255,255,.1); }
.cart-total { margin-bottom: var(--space-lg); }
.total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); color: var(--muted); }
.total-row.total-main {
  color: var(--white); font-weight: 600; font-size: var(--font-lg);
  padding-top: var(--space-sm); border-top: 1px solid rgba(255,255,255,.1);
}
.cart-actions { display: flex; flex-direction: column; gap: var(--space-md); }

/* Product Details Page */
.breadcrumb-section {
  padding: var(--space-lg) 0; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.05);
}
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-sm); color: var(--muted); font-size: var(--font-sm);
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb i { font-size: var(--font-xs); }
.product-details-section { padding: var(--space-2xl) 0; }
.product-details-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start;
}
.product-media { position: sticky; top: var(--space-xl); }
.product-main-image {
  position: relative; height: 400px; background: var(--grad); border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg); display: flex; align-items: center; justify-content: center;
}
.product-image-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg);
}
.product-badges { position: absolute; top: var(--space-lg); left: var(--space-lg); }
.product-thumbnails { display: flex; gap: var(--space-md); }
.thumbnail {
  width: 80px; height: 80px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: var(--muted);
}
.thumbnail:hover, .thumbnail.active { border-color: var(--primary); background: rgba(65,105,225,.1); color: var(--primary); }
.product-info { display: flex; flex-direction: column; gap: var(--space-xl); }
.product-header { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: var(--space-xl); }
.product-header h1 { margin: var(--space-sm) 0 var(--space-md) 0; color: var(--white); font-size: var(--font-3xl); line-height: 1.2; }
.product-rating { display: flex; align-items: center; gap: var(--space-md); }
.stars { display: flex; gap: var(--space-xs); color: var(--gold); }
.rating-text { color: var(--muted); font-size: var(--font-sm); }
.product-description { font-size: var(--font-lg); line-height: 1.6; color: var(--muted); }
.product-pricing-section {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: var(--space-xl);
}
.pricing-main { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.pricing-main .price-current { font-size: var(--font-4xl); font-weight: 800; color: var(--white); }
.pricing-main .price-period { font-size: var(--font-xl); color: var(--muted); }
.product-features-list h3 { margin: 0 0 var(--space-lg) 0; color: var(--white); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-md); }
.feature-item { display: flex; align-items: center; gap: var(--space-sm); color: var(--muted); }
.feature-item i { color: var(--success); flex-shrink: 0; }
.product-actions {
  display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
}
.quantity-selector { display: flex; align-items: center; gap: var(--space-md); }
.quantity-controls { display: flex; align-items: center; gap: var(--space-sm); }
.quantity-controls button {
  width: 32px; height: 32px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.quantity-controls button:hover { background: var(--grad); border-color: transparent; }
.quantity-controls input {
  width: 60px; text-align: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm); color: var(--white); padding: var(--space-xs);
}
.action-buttons { display: flex; gap: var(--space-md); }
.action-buttons .btn { flex: 1; }
.product-meta {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-xl); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius);
}
.meta-item { display: flex; justify-content: space-between; align-items: center; }
.meta-label { color: var(--muted); font-size: var(--font-sm); }
.meta-value { color: var(--white); font-weight: 500; font-size: var(--font-sm); }

/* Tabs */
.tabs-container { margin-top: var(--space-3xl); }
.tabs-nav { display: flex; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: var(--space-2xl); overflow-x: auto; }
.tab-btn {
  background: none; border: none; color: var(--muted); padding: var(--space-lg) var(--space-xl); cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
  border-bottom: 2px solid transparent; font-size: var(--font-md);
}
.tab-btn:hover, .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-2xl); }
.spec-category h3 { margin: 0 0 var(--space-lg) 0; color: var(--white); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255,255,255,.1); }
.spec-list { display: flex; flex-direction: column; gap: var(--space-md); }
.spec-item { display: flex; align-items: flex-start; gap: var(--space-md); }
.spec-label { color: var(--muted); font-size: var(--font-sm); min-width: 120px; flex-shrink: 0; }
.spec-value { color: var(--white); font-size: var(--font-sm); line-height: 1.5; }

/* Requirements Tab */
.requirements-content { display: flex; flex-direction: column; gap: var(--space-2xl); }
.requirement-section h3 { margin: 0 0 var(--space-lg) 0; color: var(--white); }
.requirement-list { display: flex; flex-direction: column; gap: var(--space-md); padding-left: var(--space-lg); }
.requirement-list li { color: var(--muted); line-height: 1.6; }

/* Support Tab */
.support-content { display: flex; flex-direction: column; gap: var(--space-2xl); }
.support-tier h3 { margin: 0 0 var(--space-lg) 0; color: var(--white); }
.support-features { display: flex; flex-direction: column; gap: var(--space-lg); }
.support-feature { display: flex; gap: var(--space-lg); align-items: flex-start; }
.support-feature i { color: var(--primary); font-size: 1.5rem; margin-top: var(--space-xs); flex-shrink: 0; }
.support-feature h4 { margin: 0 0 var(--space-xs) 0; color: var(--white); }
.support-feature p { margin: 0; color: var(--muted); line-height: 1.6; }
.sla-section h3 { margin: 0 0 var(--space-lg) 0; color: var(--white); }
.sla-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-lg); }
.sla-item {
  text-align: center; padding: var(--space-lg); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
}
.sla-metric { font-size: var(--font-2xl); font-weight: 700; color: var(--primary); margin-bottom: var(--space-xs); }
.sla-label { color: var(--muted); font-size: var(--font-sm); }

/* Reviews Tab */
.reviews-content { display: flex; flex-direction: column; gap: var(--space-2xl); }
.reviews-summary {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xl);
  padding: var(--space-xl); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
}
.rating-overview { text-align: center; }
.rating-score { font-size: var(--font-4xl); font-weight: 800; color: var(--white); margin-bottom: var(--space-sm); }
.rating-details .stars { justify-content: center; margin-bottom: var(--space-xs); }
.rating-count { color: var(--muted); font-size: var(--font-sm); }
.rating-breakdown { display: flex; flex-direction: column; gap: var(--space-sm); }
.rating-bar { display: flex; align-items: center; gap: var(--space-md); font-size: var(--font-sm); color: var(--muted); }
.rating-bar .bar { flex: 1; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.rating-bar .fill { height: 100%; background: var(--grad); border-radius: 4px; }
.reviews-list { display: flex; flex-direction: column; gap: var(--space-xl); }
.review-item {
  padding: var(--space-xl); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
}
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
.reviewer-info { display: flex; align-items: center; gap: var(--space-md); }
.reviewer-avatar {
  width: 48px; height: 48px; background: var(--grad); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem;
}
.reviewer-details h4 { margin: 0 0 var(--space-xs) 0; color: var(--white); }
.reviewer-details p { margin: 0; color: var(--muted); font-size: var(--font-sm); }
.review-rating { text-align: right; }
.review-date { color: var(--muted); font-size: var(--font-sm); margin-top: var(--space-xs); }
.review-content p { margin: 0; color: var(--muted); line-height: 1.6; font-style: italic; }

/* Related Products */
.related-products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-xl); }

/* Checkout Page */
.checkout-progress-section {
  padding: var(--space-xl) 0; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.05);
}
.checkout-progress {
  display: flex; align-items: center; justify-content: center; max-width: 600px; margin: 0 auto;
}
.progress-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); position: relative; }
.step-number {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-weight: 600; transition: all 0.3s ease;
}
.progress-step.active .step-number { background: var(--grad); color: var(--white); }
.progress-step.completed .step-number { background: var(--success); color: var(--white); }
.step-label { color: var(--muted); font-size: var(--font-sm); transition: color 0.3s ease; }
.progress-step.active .step-label { color: var(--white); }
.progress-line { width: 100px; height: 2px; background: rgba(255,255,255,.1); transition: all 0.3s ease; }
.progress-line.active { background: var(--grad); }
.checkout-section { padding: var(--space-2xl) 0; }
.checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3xl); align-items: start; }
.checkout-form-container {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: var(--space-2xl);
}
.checkout-step { display: block; }
.checkout-step.hidden { display: none; }
.step-header { margin-bottom: var(--space-2xl); text-align: center; }
.step-header h2 { margin: 0 0 var(--space-sm) 0; color: var(--white); }
.step-header p { margin: 0; color: var(--muted); }
.checkout-form { display: flex; flex-direction: column; gap: var(--space-2xl); }
.form-section { display: flex; flex-direction: column; gap: var(--space-lg); }
.form-section h3 {
  margin: 0; color: var(--white); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255,255,255,.1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-group label { color: var(--white); font-weight: 500; font-size: var(--font-sm); }
.checkbox-group { display: flex; align-items: flex-start; gap: var(--space-md); }
.checkbox-label {
  display: flex; align-items: flex-start; gap: var(--space-sm); cursor: pointer; color: var(--muted); font-size: var(--font-sm); line-height: 1.5;
}
.checkbox-label input[type="checkbox"] { display: none; }
.checkmark {
  width: 18px; height: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm); position: relative; flex-shrink: 0; margin-top: 2px; transition: all 0.2s ease;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark { background: var(--grad); border-color: transparent; }
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--white); font-size: var(--font-xs); font-weight: 600;
}
.form-actions {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg);
  margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid rgba(255,255,255,.1);
}

/* Payment Methods */
.payment-methods { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.payment-method { border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden; transition: all 0.2s ease; }
.payment-method.active { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(65,105,225,.3); }
.method-header { padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); cursor: pointer; background: rgba(255,255,255,.02); }
.method-radio { position: relative; }
.method-radio input[type="radio"] { display: none; }
.radio-mark { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; position: relative; transition: all 0.2s ease; }
.method-radio input[type="radio"]:checked + .radio-mark { border-color: var(--primary); }
.method-radio input[type="radio"]:checked + .radio-mark::after {
  content: ''; width: 8px; height: 8px; background: var(--primary); border-radius: 50%;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.method-info h3 { margin: 0 0 var(--space-xs) 0; color: var(--white); }
.method-info p { margin: 0; color: var(--muted); font-size: var(--font-sm); }
.method-details { padding: var(--space-lg); border-top: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.01); }
.method-details.hidden { display: none; }
.billing-info { display: flex; flex-direction: column; gap: var(--space-md); }
.info-item { display: flex; align-items: center; gap: var(--space-sm); color: var(--muted); font-size: var(--font-sm); }
.info-item i { color: var(--primary); }
.credit-card-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.wire-info { color: var(--muted); line-height: 1.6; }
.wire-benefits { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.benefit { color: var(--success); font-size: var(--font-sm); }

/* Order Summary */
.order-summary-container { position: sticky; top: var(--space-xl); }
.order-summary {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl);
}
.order-summary h3 { margin: 0 0 var(--space-lg) 0; color: var(--white); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255,255,255,.1); }
.summary-items { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.summary-item { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); }
.item-info h4 { margin: 0 0 var(--space-xs) 0; color: var(--white); font-size: var(--font-md); }
.item-info p { margin: 0 0 var(--space-xs) 0; color: var(--muted); font-size: var(--font-sm); }
.item-quantity { color: var(--muted); font-size: var(--font-xs); }
.item-price { color: var(--white); font-weight: 600; flex-shrink: 0; }
.summary-calculations { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--space-lg); margin-bottom: var(--space-xl); }
.calc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); color: var(--muted); }
.calc-row.discount { color: var(--success); }
.calc-row.total {
  color: var(--white); font-weight: 600; font-size: var(--font-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--space-md);
}
.summary-notes {
  display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xl);
  padding: var(--space-lg); background: rgba(255,255,255,.02); border-radius: var(--radius);
}
.note { display: flex; align-items: center; gap: var(--space-sm); color: var(--muted); font-size: var(--font-sm); }
.note i { color: var(--primary); flex-shrink: 0; }
.trust-badges { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); color: var(--muted); font-size: var(--font-xs); text-align: center; }
.badge i { color: var(--primary); font-size: var(--font-md); }
.contact-support {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-lg); padding: var(--space-xl);
}
.contact-support h4 { margin: 0 0 var(--space-sm) 0; color: var(--white); }
.contact-support p { margin: 0 0 var(--space-lg) 0; color: var(--muted); font-size: var(--font-sm); }
.contact-options { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-option {
  display: flex; align-items: center; gap: var(--space-sm); color: var(--primary);
  text-decoration: none; font-size: var(--font-sm); padding: var(--space-sm); border-radius: var(--radius-sm); transition: all 0.2s ease;
}
.contact-option:hover { background: rgba(65,105,225,.1); }

/* Confirmation */
.confirmation-content { text-align: center; padding: var(--space-2xl); }
.confirmation-icon {
  width: 80px; height: 80px; background: var(--grad); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-xl) auto; color: var(--white); font-size: 2rem;
}
.confirmation-content h2 { margin: 0 0 var(--space-lg) 0; color: var(--white); }
.confirmation-content p {
  margin: 0 0 var(--space-2xl) 0; color: var(--muted); line-height: 1.6; max-width: 500px; margin-left: auto; margin-right: auto;
}
.order-details {
  display: flex; justify-content: center; gap: var(--space-2xl); margin-bottom: var(--space-2xl);
  padding: var(--space-xl); background: rgba(255,255,255,.03); border-radius: var(--radius);
}
.order-number, .order-date { text-align: center; }
.order-details .label { display: block; color: var(--muted); font-size: var(--font-sm); margin-bottom: var(--space-xs); }
.order-details .value { display: block; color: var(--white); font-weight: 600; }
.next-steps { margin-bottom: var(--space-2xl); }
.next-steps h3 { margin: 0 0 var(--space-xl) 0; color: var(--white); }
.steps-list { display: flex; flex-direction: column; gap: var(--space-xl); }
.next-step { display: flex; gap: var(--space-lg); text-align: left; }
.step-icon {
  width: 48px; height: 48px; background: var(--grad); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem; flex-shrink: 0;
}
.step-content h4 { margin: 0 0 var(--space-xs) 0; color: var(--white); }
.step-content p { margin: 0; color: var(--muted); }
.confirmation-actions { display: flex; justify-content: center; gap: var(--space-lg); }

/* Responsive Design */
@media (max-width: 1024px) {
  .product-details-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .checkout-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .order-summary-container { position: static; }
}
@media (max-width: 768px) {
  .products-grid-container { grid-template-columns: 1fr; }
  .filters-row { grid-template-columns: 1fr; }
  .search-bar { flex-direction: column; }
  .product-actions { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .checkout-progress { flex-direction: column; gap: var(--space-lg); }
  .progress-line { width: 2px; height: 40px; }
  .form-actions { flex-direction: column; }
  .order-details { flex-direction: column; gap: var(--space-lg); }
  .confirmation-actions { flex-direction: column; }
  .cart-sidebar { width: 100%; right: -100%; }
  .specs-grid { grid-template-columns: 1fr; }
  .reviews-summary { grid-template-columns: 1fr; gap: var(--space-lg); }
  .related-products-grid { grid-template-columns: 1fr; }
}

/* Notification Animation */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Missing animations (patch) */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }

/* Print Styles (global) */
@media print {
  .orbs, .mobile-menu-overlay, .bottom-nav, .carousel-nav, .cart-sidebar, .cart-overlay { display: none !important; }
  .section { background: none !important; }
  body { background: white !important; color: black !important; }
}

/* === TRAINING SECTION POLISH (scoped) ============================== */
#training .section-header h2{ max-width: 22ch; margin-inline: auto; }
#training .section-header .lead{ max-width: 70ch; margin-inline: auto; }
/* grid */
#training .courses-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); align-items: stretch; }
/* card */
#training .course{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
#training .course:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.15); }
/* thumbnail */
#training .course-thumb{ position: relative; aspect-ratio: 16/9; overflow: hidden; }
#training .course-thumb .course-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#training .course-thumb::after{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); z-index:1;
}
/* tag */
#training .course-thumb .course-tag{
  position:absolute; z-index:2; top: var(--space-sm); left: var(--space-sm);
  padding: 6px 10px; border-radius: 999px; font-size: var(--font-xs); font-weight: 600; color: var(--white);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
}
/* price badge */
#training .course-thumb .course-price{
  position:absolute; z-index:2; bottom: var(--space-sm); left: var(--space-sm);
  background: rgba(17,24,39,.9); border:1px solid rgba(255,255,255,.18); padding: var(--space-xs) var(--space-sm);
  border-radius: 999px; font-weight: 700; font-size: var(--font-sm); color: var(--white);
}
/* content */
#training .course-content{ display:flex; flex-direction:column; gap: var(--space-md); padding: var(--space-xl); flex: 1; }
#training .course h3{
  margin:0; color: var(--white);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em;
}
#training .course-content .btn{ margin-top: auto; }
/* bottom CTA */
#training .section-actions{ margin-top: var(--space-2xl); text-align: center; }
@media (max-width: 768px){ #training .courses-grid{ grid-template-columns: 1fr; } }

/* =========================
   TRAINING — MODAL (scoped)
   ========================= */
#training .modal[hidden] { display: none !important; }
#training .modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; background: transparent; overscroll-behavior: contain;
}
#training .modal-overlay {
  position: absolute; inset: 0; background: rgba(5, 8, 20, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .2s ease-out both;
}
#training .modal-content {
  position: relative; width: min(720px, calc(100% - 2rem));
  max-height: calc(100dvh - 4rem); overflow: auto; padding: var(--space-2xl); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-3); animation: modalIn .24s cubic-bezier(.2,.6,.2,1) both;
  scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.4) transparent;
}
#training .modal-content::-webkit-scrollbar{ width:8px; }
#training .modal-content::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(124,58,237,.4), rgba(65,105,225,.4)); border-radius: 999px;
}
#training .modal-content h3 { margin: 0 0 var(--space-sm); color: var(--white); font-size: var(--font-2xl); }
#training #inquiryDesc { color: var(--muted); margin-bottom: var(--space-xl); }
#training .modal-close{
  position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; color:#e2e8f0; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  font-size: 1.35rem; line-height: 1; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
#training .modal-close:hover{ background: rgba(255,255,255,.12); transform: rotate(90deg); }
#training .modal-close:focus-visible{ outline: none; box-shadow: var(--ring); }
#training #courseInquiryModal .form-row{ display:flex; flex-direction:column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
#training #courseInquiryModal label{ font-weight:600; color:var(--white); font-size:var(--font-sm); }
#training #courseInquiryModal input[type="text"],
#training #courseInquiryModal input[type="email"],
#training #courseInquiryModal input[type="tel"],
#training #courseInquiryModal select,
#training #courseInquiryModal textarea{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  outline: none; font-size: var(--font-sm); min-height: 44px;
}
#training #courseInquiryModal textarea{ min-height: 140px; resize: vertical; }
#training #courseInquiryModal input:focus,
#training #courseInquiryModal select:focus,
#training #courseInquiryModal textarea:focus{ border-color: var(--royal); box-shadow: var(--ring); }
#training #courseSelected[readonly]{ background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.3); }
#training #courseInquiryModal .form-actions{
  display:flex; justify-content:flex-end; gap: var(--space-md); margin-top: var(--space-xl);
}
#training #courseInquiryModal .form-actions .btn{
  background: var(--grad); color: var(--white); font-weight: 700; padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(124,58,237,.35);
}
#training #courseInquiryModal .form-actions .btn:hover{ transform: translateY(-2px); }
@media (max-width: 640px){
  #training .modal{ align-items: end; }
  #training .modal-content{
    width: 100%; max-height: 92dvh; margin: 0; border-radius: 20px 20px 0 0; animation: sheetIn .24s cubic-bezier(.2,.6,.2,1) both;
  }
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes modalIn{ from{ opacity:0; transform: translateY(10px) scale(.98);} to{ opacity:1; transform: none; } }
@keyframes sheetIn{ from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  #training .modal-overlay, #training .modal-content { animation: none !important; }
}

/* Company (About) */
.company-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-3xl); align-items:start;
}
.company-intro{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: var(--space-2xl); box-shadow: var(--shadow-1);
}
.company-intro h3{ color: var(--white); margin-bottom: var(--space-sm); }
.about-badges{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin: var(--space-lg) 0; }
.about-badges .badge{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); }
.milestones-title{ margin-top: var(--space-xl); color: var(--white); }
.milestones{
  list-style:none; margin: var(--space-md) 0 0; padding-left: var(--space-xl);
  border-left:2px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap: var(--space-lg);
}
.milestones li{ position:relative; }
.milestones li::before{
  content:''; position:absolute; left:-11px; top:.25rem; width:12px; height:12px; border-radius:999px; background: var(--grad);
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}
.milestone-year{ font-weight:700; color:var(--white); margin-right:.5rem; }
/* Projects grid */
.projects-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--space-xl); }
/* Responsive */
@media (max-width: 1024px){ .company-grid{ grid-template-columns: 1fr; gap: var(--space-2xl); } }

/* =============================
   BLOG — LIST & DETAIL (scoped)
   ============================= */
.blog-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); }
.post-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.15); }
.post-media{ position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--grad); }
.post-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.post-card:hover .post-media img{ transform: scale(1.04); }
.post-badge{
  position:absolute; top: var(--space-sm); left: var(--space-sm);
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color: var(--white);
  padding: 6px 10px; border-radius: 999px; font-size: var(--font-xs); font-weight: 700; backdrop-filter: blur(6px);
}
.post-badge.draft{ background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); }
.post-content{ padding: var(--space-xl); display:flex; flex-direction:column; gap: var(--space-md); flex:1; }
.post-meta{ display:flex; gap: var(--space-md); flex-wrap: wrap; color: var(--muted); font-size: var(--font-xs); }
.post-meta i{ color: var(--gold); }
.post-title{ margin:0; color: var(--white); font-size: var(--font-xl); line-height:1.25; }
.post-title a{ color: inherit; text-decoration: none; }
.post-excerpt{
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-actions{ margin-top: auto; }
.empty-state{ text-align:center; padding: var(--space-2xl); border:1px dashed rgba(255,255,255,.15); border-radius: var(--radius); }
.empty-state i{ font-size:2rem; opacity:.6; display:block; margin-bottom: var(--space-sm); }
.pagination-wrap{ display:flex; justify-content:center; margin-top: var(--space-2xl); }
.pagination-wrap nav{ display:inline-flex; gap:.5rem; }
.pagination-wrap .page-link, .pagination-wrap a, .pagination-wrap span{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color: var(--text);
  padding: .5rem .75rem; border-radius: 10px; font-size: var(--font-sm);
}
.pagination-wrap .active span{ background: var(--grad); border-color: transparent; }
/* Detail hero */
.blog-hero{
  position: relative; padding: clamp(6rem, 12vw, 9rem) 0;
  /* override to a single background declaration (patch) */
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(124,58,237,.18), transparent 50%),
    radial-gradient(900px 600px at -10% 20%, rgba(65,105,225,.18), transparent 40%),
    var(--bg);
}
.blog-hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)),
    var(--cover, none);
  background-repeat:no-repeat; background-size: cover; background-position: center;
  filter: saturate(1.1); z-index:0;
}
.blog-hero-overlay{ position:absolute; inset:0; box-shadow: inset 0 -80px 120px rgba(0,0,0,.4); z-index: 0; }
.blog-hero .container{ position:relative; z-index:1; }
.blog-hero-inner{ max-width: 900px; }
.blog-title{ margin: var(--space-md) 0 var(--space-md); color: var(--white); font-size: clamp(2rem, 6vw, 3rem); }
.blog-meta{ display:flex; gap: var(--space-md); color:#E6E8EE; opacity:.9; flex-wrap: wrap; }
.blog-cta{ display:flex; gap: var(--space-sm); margin-top: var(--space-md); }
.article{ max-width: 900px; margin: 0 auto; }
.article-lead{
  font-size: var(--font-xl); color: #d1d5db; line-height: 1.7;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  padding: var(--space-lg); border-radius: var(--radius); margin-bottom: var(--space-xl);
}
.article-body{ color: var(--text); }
.article-body img{ border-radius: var(--radius-sm); margin: var(--space-lg) 0; }
.article-body blockquote{
  border-left: 3px solid var(--royal); padding-left: var(--space-lg);
  color: #e5e7eb; font-style: italic; background: rgba(255,255,255,.03);
}
.article-body table{ width:100%; border-collapse: collapse; margin: var(--space-xl) 0; font-size: var(--font-sm); }
.article-body table th, .article-body table td{
  border:1px solid rgba(255,255,255,.08); padding: .75rem; vertical-align: top;
}
.article-body pre{
  background: #0b1020; border:1px solid rgba(255,255,255,.08);
  padding: var(--space-lg); border-radius: var(--radius-sm); overflow:auto;
}
.article-share{
  display:flex; align-items:center; gap: var(--space-sm); margin-top: var(--space-2xl);
  border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--space-lg);
}
.article-share .share-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color: var(--text);
}
.article-share .share-btn:hover{ background: var(--grad); color: var(--white); border-color: transparent; }
.article-nav{
  display:flex; justify-content:space-between; align-items:center; gap: var(--space-md);
  margin-top: var(--space-xl);
}
.article-nav .nav-link{
  display:flex; align-items:center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md);
  border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); background: rgba(255,255,255,.04); color: var(--text);
}
.article-nav .nav-link:hover{ background: rgba(255,255,255,.08); }
@media (max-width: 768px){ .article-nav{ flex-direction: column; align-items: stretch; } }

/* ---------- Mobile Menu Overlay ---------- */
.mobile-menu-overlay {
  position: fixed; inset: 0; background: rgba(12, 14, 26, 0.95); backdrop-filter: blur(20px);
  z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu-content { display: flex; flex-direction: column; height: 100%; padding: var(--space-lg); }
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu-close {
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06);
  color: var(--white); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; transition: all 0.2s ease;
}
.mobile-menu-close:hover { background: rgba(255, 255, 255, 0.1); transform: rotate(90deg); }
.mobile-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); }
.mobile-nav-link {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg);
  border-radius: var(--radius); color: var(--text); font-weight: 500; font-size: var(--font-lg);
  transition: all 0.2s ease; border: 1px solid transparent;
}
.mobile-nav-link:hover, .mobile-nav-link:focus {
  background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.3); color: var(--white); transform: translateX(8px);
}
.mobile-nav-link i { font-size: 1.25rem; width: 24px; text-align: center; }
.mobile-cta { display: flex; flex-direction: column; gap: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* ---------- Bottom Navigation (Mobile) ---------- */
.bottom-nav {
  position: fixed; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  z-index: var(--z-fixed); display: flex; gap: var(--space-xs);
  background: rgba(18, 22, 42, 0.9); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: var(--space-sm);
  box-shadow: var(--shadow-2);
  width: auto; max-width: min(720px, calc(100dvw - 2rem));
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); /* patch */
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav-link {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); color: #e2e8f0; transition: all 0.2s ease;
  min-width: 60px; font-size: var(--font-xs); text-align: center; white-space: nowrap;
}
.bottom-nav-link.active, .bottom-nav-link:hover {
  background: rgba(124, 58, 237, 0.18); color: var(--white); transform: translateY(-2px);
}
.bottom-nav-link i { font-size: 1.125rem; }

/* ---------- Mobile-Specific Adjustments ---------- */
@media (max-width: 767px) {
  .menu-wrapper { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
  .bottom-nav { display: flex !important; }

  .container { padding: 0 var(--space-md); max-width: 100%; }
  .section { padding: clamp(2rem, 6vw, 3rem) 0; }
  .section-header { margin-bottom: var(--space-2xl); text-align: center; }

  .hero { min-height: 100svh; background-attachment: scroll; }
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-2xl) 0; }
  .hero-content { text-align: center; }
  .hero-actions { flex-direction: column; align-items: center; }
  .btn-large { width: 100%; max-width: 280px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .hero-cards { order: -1; grid-template-columns: 1fr; gap: var(--space-sm); }

  .card { padding: var(--space-md); }
  .headline { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: var(--space-md); }
  .sub { font-size: var(--font-base); margin-bottom: var(--space-lg); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--space-lg); }
  .solutions-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .solution-card { padding: var(--space-lg); }

  .scroll { grid-auto-columns: minmax(280px, 1fr); gap: var(--space-md); }
  .carousel-nav { display: none; }

  .course { min-width: 280px; }

  .talent-stats { grid-template-columns: 1fr; gap: var(--space-lg); }
  .stat-card { padding: var(--space-lg); }
  .list { grid-template-columns: 1fr; gap: var(--space-md); }
  .item { padding: var(--space-md); }

  .jobs-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .job-card { padding: var(--space-lg); }
  .job-header { flex-direction: column; gap: var(--space-md); align-items: flex-start; }
  .job-footer { flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
  .job-footer .btn { width: 100%; }

  .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .testimonial-card { padding: var(--space-lg); }

  .case-studies-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .case-study-card { margin-bottom: var(--space-md); }
  .case-study-content { padding: var(--space-lg); }
  .case-study-metrics { grid-template-columns: 1fr; }

  .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stat-item { padding: var(--space-lg); }
  .mission-points { grid-template-columns: 1fr; gap: var(--space-sm); }
  .mission-point { padding: var(--space-md); }

  .support-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .support-card { padding: var(--space-lg); }

  .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .contact-form { padding: var(--space-lg); }
  .form-row { grid-template-columns: 1fr; }

  .footer-content { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-sm); }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: var(--space-md); }

  .filters { flex-direction: column; gap: var(--space-sm); }
  .btn { min-height: 48px; }
  .input, select, textarea { min-height: 48px; font-size: 16px; }

  .section { background-attachment: scroll !important; }
  .orb { animation-duration: 20s; }

  /* Product media: avoid fixed height on small screens (patch) */
  .product-main-image{ aspect-ratio: 16/10; height: auto; }
}

/* High contrast on mobile */
@media (max-width: 767px) and (prefers-contrast: high) {
  .card, .solution-card, .job-card, .testimonial-card, .case-study-card, .support-card { border-width: 2px; }
  .btn { border: 2px solid currentColor; }
}
/* Dark mode adjustments for the mobile UI surfaces */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .mobile-menu-overlay { background: rgba(0, 0, 0, 0.95); }
  .bottom-nav { background: rgba(0, 0, 0, 0.9); }
}
/* Small mobile devices */
@media (max-width: 375px) {
  .container { padding: 0 var(--space-sm); }
  .hero-inner { padding: var(--space-lg) 0; }
  .card, .solution-card, .job-card, .testimonial-card, .case-study-content, .support-card { padding: var(--space-md); }
  .quick-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr; }
  .form-group { margin-bottom: var(--space-md); }
  .bottom-nav { padding: var(--space-xs); gap: 2px; }
  .bottom-nav-link { padding: var(--space-xs) var(--space-sm); min-width: 50px; }
  .bottom-nav-link span { font-size: 10px; }
}
/* Landscape mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero-inner { padding: var(--space-lg) 0; }
  .section { padding: var(--space-xl) 0; }
}
/* Tablet portrait adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .grid-2 { grid-template-columns: 1fr; gap: var(--space-xl); }
  .solutions-grid, .jobs-grid, .testimonials-grid, .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
  .scroll { grid-auto-columns: calc((100% - 20px) / 2); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; }
}
/* Container queries fallback guard */
@container (max-width: 400px) {
  .card { padding: var(--space-md); }
  .btn { padding: var(--space-sm); font-size: var(--font-sm); }
}
/* Print styles (mobile context) */
@media print {
  .mobile-menu-overlay, .mobile-menu-toggle, .bottom-nav { display: none !important; }
  .hero { min-height: auto; background: none !important; }
  .section { padding: var(--space-lg) 0; background: none !important; }
}

/* =====================================================================
   Horizontal Overflow & Robustness Patch (global)
   ===================================================================== */
.container,
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.job-header > *, .item > *,
.product-details-grid > *,
.tabs-nav, .scroll { min-width: 0; }
.carousel { overflow: hidden; }
.carousel .scroll, .tabs-nav {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
@supports not (width: 1dvw) { .bottom-nav { max-width: calc(100% - 2rem); } }
@media (max-width: 480px) {
  .courses-grid-container, .products-grid-container, .learning-paths-grid { grid-template-columns: 1fr !important; }
  .course-card, .product-card { min-width: 0; }
}
.orbs, .orb { overflow: clip; max-width: 100%; }
.breadcrumb, .meta-value, .product-header h1, .job-company p, .feature, .note {
  min-width: 0; word-wrap: break-word; overflow-wrap: anywhere;
}
@media (max-width: 375px) {
  #training .courses-grid { grid-template-columns: 1fr !important; }
  .scroll { grid-auto-columns: minmax(240px, 1fr) !important; }
}

/* =====================================================================
   Reduced Motion & Data (performance-friendly)
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .orb, .logo::after{ animation: none !important; }
}
@media (prefers-reduced-data: reduce){
  .hero, #solutions, #training, #talent, #jobs, #testimonials, #support, #about, #case-studies{
    background-image: none !important;
  }
  .card, .solution-card, .job-card, .testimonial-card, .case-study-card, .support-card{
    box-shadow: var(--shadow-1);
  }
}