/**
 * styles.css
 * Premium Design System for Reshine International
 * Elegant, Professional, Modern UI/UX
 * 
 * Architecture:
 * - Design System Foundation (CSS Variables)
 * - Base Styles (Reset, Typography, Layout)
 * - Component Styles (Modular, Reusable)
 * - Utility Classes
 * - Responsive Design (Mobile-First)
 * - Accessibility Enhancements
 * - Performance Optimizations
 */

/* ============================================
   DESIGN SYSTEM - FOUNDATION
   ============================================ */

:root{
  /* ===== COLOR SYSTEM ===== */
  /* Primary - Navy */
  --navy-50: #f0f4f8;
  --navy-100: #d9e2ec;
  --navy-200: #bcccdc;
  --navy-300: #9fb3c8;
  --navy-400: #829ab1;
  --navy-500: #627d98;
  --navy-600: #486581;
  --navy-700: #334e68;
  --navy-800: #243b53;
  --navy-900: #0b2545;
  --navy: var(--navy-900);
  
  /* Primary - Teal */
  --teal-50: #e0f7f7;
  --teal-100: #b3ebeb;
  --teal-200: #80dede;
  --teal-300: #4dd1d1;
  --teal-400: #26c4c4;
  --teal-500: #0aa3a3;
  --teal-600: #088a8a;
  --teal-700: #067171;
  --teal-800: #045858;
  --teal-900: #023f3f;
  --teal: var(--teal-500);
  --teal-light: var(--teal-300);
  --teal-dark: var(--teal-700);
  
  /* Neutral Grays */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Semantic Colors */
  --success: #10b981;
  --success-light: #34d399;
  --success-dark: #059669;
  --error: #ef4444;
  --error-light: #f87171;
  --error-dark: #dc2626;
  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --warning-dark: #d97706;
  --info: #3b82f6;
  --info-light: #60a5fa;
  --info-dark: #2563eb;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-overlay: rgba(11, 37, 69, 0.6);
  --bg-overlay-light: rgba(11, 37, 69, 0.1);
  
  /* Text Colors */
  --text-primary: var(--navy-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-500);
  --text-muted: var(--gray-400);
  --text-inverse: #ffffff;
  --text-link: var(--teal-600);
  --text-link-hover: var(--teal-700);
  
  /* Border Colors */
  --border-light: var(--gray-200);
  --border-medium: var(--gray-300);
  --border-dark: var(--gray-400);
  --border-focus: var(--teal-500);
  --border-error: var(--error);
  
  /* ===== SPACING SYSTEM (8px base) ===== */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  
  /* ===== TYPOGRAPHY ===== */
  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* ===== BORDER RADIUS ===== */
  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;
  --radius: var(--radius-lg);
  --radius-lg: var(--radius-xl);
  
  /* ===== SHADOWS & ELEVATION ===== */
  --shadow-xs: 0 1px 2px 0 rgba(11, 37, 69, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(11, 37, 69, 0.1), 0 1px 2px 0 rgba(11, 37, 69, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(11, 37, 69, 0.1), 0 2px 4px -1px rgba(11, 37, 69, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(11, 37, 69, 0.1), 0 4px 6px -2px rgba(11, 37, 69, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(11, 37, 69, 0.1), 0 10px 10px -5px rgba(11, 37, 69, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(11, 37, 69, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(11, 37, 69, 0.06);
  --shadow-colored: 0 10px 15px -3px rgba(10, 163, 163, 0.3), 0 4px 6px -2px rgba(10, 163, 163, 0.2);
  
  /* ===== LAYOUT ===== */
  --max-width-xs: 20rem;    /* 320px */
  --max-width-sm: 24rem;    /* 384px */
  --max-width-md: 28rem;    /* 448px */
  --max-width-lg: 32rem;    /* 512px */
  --max-width-xl: 36rem;    /* 576px */
  --max-width-2xl: 42rem;   /* 672px */
  --max-width-3xl: 48rem;   /* 768px */
  --max-width-4xl: 56rem;   /* 896px */
  --max-width-5xl: 64rem;   /* 1024px */
  --max-width-6xl: 72rem;   /* 1152px */
  --max-width-7xl: 80rem;   /* 1280px */
  --max-width: var(--max-width-7xl);
  
  /* ===== BREAKPOINTS ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ===== Z-INDEX SCALE ===== */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== LEGACY VARIABLES (for compatibility) ===== */
  --muted: var(--gray-500);
  --muted-light: var(--gray-400);
  --bg: var(--bg-secondary);
  --bg-light: var(--bg-primary);
  --card: var(--bg-primary);
  --gutter: var(--space-4);
}

/* ============================================
   BASE STYLES
   ============================================ */

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

html{
  scroll-behavior:smooth;
  height:100%;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  font-weight:var(--font-normal);
  line-height:var(--leading-normal);
  color:var(--text-primary);
  background-color:var(--bg-secondary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100%;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(10, 163, 163, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(11, 37, 69, 0.02) 0%, transparent 50%);
  background-attachment:fixed;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6{
  margin:0;
  font-weight:var(--font-bold);
  line-height:var(--leading-tight);
  color:var(--text-primary);
  letter-spacing:var(--tracking-tight);
}

h1{
  font-size:var(--text-4xl);
  font-weight:var(--font-extrabold);
  line-height:var(--leading-none);
  letter-spacing:var(--tracking-tighter);
}

h2{
  font-size:var(--text-3xl);
  font-weight:var(--font-bold);
  line-height:var(--leading-tight);
}

h3{
  font-size:var(--text-2xl);
  font-weight:var(--font-semibold);
  line-height:var(--leading-snug);
}

h4{
  font-size:var(--text-xl);
  font-weight:var(--font-semibold);
}

h5{
  font-size:var(--text-lg);
  font-weight:var(--font-medium);
}

h6{
  font-size:var(--text-base);
  font-weight:var(--font-medium);
}

p{
  margin:0 0 var(--space-4);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}

a{
  color:var(--text-link);
  text-decoration:none;
  transition:color var(--transition-fast);
}

a:hover{
  color:var(--text-link-hover);
}

a:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

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

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

ul, ol{
  list-style:none;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.skip-link{
  position:absolute;
  top:-100px;
  left:var(--space-4);
  background:var(--navy-900);
  color:var(--text-inverse);
  padding:var(--space-3) var(--space-4);
  text-decoration:none;
  z-index:var(--z-50);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  font-weight:var(--font-semibold);
  transition:top var(--transition-fast);
  box-shadow:var(--shadow-lg);
}

.skip-link:focus{
  top:var(--space-4);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--space-4);
}

@media(min-width:640px){
  .container{
    padding:0 var(--space-6);
  }
}

@media(min-width:1024px){
  .container{
    padding:0 var(--space-8);
  }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header{
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  position:sticky;
  top:0;
  z-index:var(--z-40);
  box-shadow:0 2px 20px rgba(11, 37, 69, 0.08);
  border-bottom:2px solid rgba(10, 163, 163, 0.1);
  transition:all var(--transition-base);
}

.site-header.scrolled{
  box-shadow:0 4px 30px rgba(11, 37, 69, 0.12);
  background:rgba(255, 255, 255, 0.98);
  border-bottom-color:var(--teal-200);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-4) var(--space-4);
  gap:var(--space-4);
  position:relative;
  max-width:var(--max-width);
  margin:0 auto;
}

@media(min-width:1024px){
  .nav-inner{
    padding:var(--space-5) var(--space-8);
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  text-decoration:none;
  color:var(--text-primary);
  transition:transform var(--transition-fast);
}

.brand:hover{
  transform:translateY(-1px);
}

.logo{
  width:48px;
  height:48px;
  border-radius:var(--radius-lg);
  display:inline-block;
  transition:all var(--transition-base);
  filter:drop-shadow(var(--shadow-sm));
  flex-shrink:0;
}

.brand:hover .logo{
  transform:scale(1.05) rotate(3deg);
  filter:drop-shadow(var(--shadow-md));
}

.company-name{
  font-weight:var(--font-bold);
  font-size:var(--text-lg);
  background:linear-gradient(135deg, var(--navy-900), var(--teal-700));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:all var(--transition-base);
  letter-spacing:var(--tracking-tight);
}

.brand:hover .company-name{
  background:linear-gradient(135deg, var(--teal-500), var(--navy-700));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.nav-links{
  display:none;
  list-style:none;
  margin:0;
  padding:0;
  gap:var(--space-2);
  flex-direction:column;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--bg-primary);
  box-shadow:var(--shadow-lg);
  padding:var(--space-4);
  z-index:var(--z-30);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  border-top:1px solid var(--border-light);
}

@media(min-width:768px){
  .nav-links{
    display:flex !important;
    position:static;
    flex-direction:row;
    box-shadow:none;
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
  }
}

.nav-link{
  display:block;
  padding:var(--space-2) var(--space-4);
  text-decoration:none;
  color:var(--text-primary);
  border-radius:var(--radius-md);
  transition:all var(--transition-fast);
  font-weight:var(--font-medium);
  font-size:var(--text-sm);
  position:relative;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:var(--space-1);
  left:50%;
  transform:translateX(-50%) scaleX(0);
  width:calc(100% - var(--space-4));
  height:2px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  border-radius:var(--radius-full);
  transition:transform var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after{
  transform:translateX(-50%) scaleX(1);
}

.nav-link.active{
  color:var(--teal-700);
  font-weight:var(--font-semibold);
}

.nav-link:focus-visible,
.nav-link:hover{
  background:var(--teal-50);
  color:var(--teal-700);
  outline:none;
}

.cta{
  background:linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color:var(--text-inverse);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-lg);
  text-decoration:none;
  font-weight:var(--font-semibold);
  font-size:var(--text-sm);
  transition:all var(--transition-base);
  box-shadow:var(--shadow-sm);
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  white-space:nowrap;
}

.cta:hover{
  background:linear-gradient(135deg, var(--teal-700), var(--teal-600));
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.cta:active{
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

.cta:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

/* Hamburger Menu */
.hamburger{
  background:none;
  border:0;
  padding:var(--space-2);
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  transition:all var(--transition-fast);
  border-radius:var(--radius-md);
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
}

.hamburger span{
  width:24px;
  height:2.5px;
  background:var(--navy-900);
  display:block;
  border-radius:var(--radius-full);
  transition:all var(--transition-base);
  transform-origin:center;
}

.hamburger:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

.hamburger:hover{
  background:var(--gray-100);
}

.hamburger:hover span{
  background:var(--teal-600);
}

.hamburger[aria-expanded="true"] span:nth-child(1){
  transform:rotate(45deg) translate(6px, 6px);
}

.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}

.hamburger[aria-expanded="true"] span:nth-child(3){
  transform:rotate(-45deg) translate(6px, -6px);
}

@media(min-width:768px){
  .hamburger{
    display:none;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero{
  padding:var(--space-24) 0 var(--space-32);
  background:linear-gradient(135deg, 
    var(--teal-50) 0%, 
    rgba(10, 163, 163, 0.05) 25%,
    rgba(10, 163, 163, 0.02) 50%,
    var(--bg-secondary) 75%, 
    transparent 100%);
  position:relative;
  overflow:hidden;
  min-height:750px;
  display:flex;
  align-items:center;
  border-bottom:2px solid var(--border-light);
  background-attachment:fixed;
}

.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:900px;
  height:900px;
  background:radial-gradient(circle, rgba(10, 163, 163, 0.15) 0%, rgba(10, 163, 163, 0.05) 40%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 25s ease-in-out infinite, pulse 8s ease-in-out infinite;
  filter:blur(40px);
}

.hero::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:700px;
  height:700px;
  background:radial-gradient(circle, rgba(11, 37, 69, 0.08) 0%, rgba(11, 37, 69, 0.03) 40%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 30s ease-in-out infinite reverse, pulse 10s ease-in-out infinite 2s;
  filter:blur(50px);
}

.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:800px;
  height:800px;
  background:radial-gradient(circle, rgba(10, 163, 163, 0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 20s ease-in-out infinite;
}

.hero::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(11, 37, 69, 0.05) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 25s ease-in-out infinite reverse;
}

@keyframes float{
  0%, 100%{
    transform:translate(0, 0) scale(1) rotate(0deg);
    opacity:0.8;
  }
  25%{
    transform:translate(40px, -40px) scale(1.05) rotate(5deg);
    opacity:1;
  }
  50%{
    transform:translate(30px, -30px) scale(1.1) rotate(0deg);
    opacity:0.9;
  }
  75%{
    transform:translate(-20px, 20px) scale(1.05) rotate(-5deg);
    opacity:0.85;
  }
}

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

@keyframes shimmer{
  0%{
    background-position:-1000px 0;
  }
  100%{
    background-position:1000px 0;
  }
}

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

@keyframes fadeInScale{
  from{
    opacity:0;
    transform:scale(0.9);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes rotate{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:var(--space-8);
  padding:0 var(--space-4);
  position:relative;
  z-index:1;
  max-width:var(--max-width);
  margin:0 auto;
}

@media(min-width:1024px){
  .hero-inner{
    grid-template-columns:1.1fr 1fr;
    gap:var(--space-12);
    padding:0 var(--space-8);
  }
}

.hero-content{
  text-align:center;
  animation:slideInUp 0.8s ease-out;
  position:relative;
  z-index:2;
}

@media(min-width:1024px){
  .hero-content{
    text-align:left;
    animation:slideInUp 1s ease-out;
  }
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
  justify-content:center;
}

@media(min-width:1024px){
  .hero-badges{
    justify-content:flex-start;
  }
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  background:linear-gradient(135deg, var(--teal-100), var(--teal-50));
  color:var(--navy-800);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-full);
  font-weight:var(--font-semibold);
  font-size:var(--text-sm);
  border:2px solid var(--teal-200);
  box-shadow:var(--shadow-md), 0 0 20px rgba(10, 163, 163, 0.1);
  letter-spacing:var(--tracking-wide);
  transition:all var(--transition-base);
  position:relative;
  overflow:visible;
  backdrop-filter:blur(10px);
  animation:fadeInScale 0.6s ease-out backwards;
}

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

.badge::before{
  content:'✓';
  background:linear-gradient(135deg, var(--teal-600), var(--teal-500));
  color:var(--text-inverse);
  width:20px;
  height:20px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--text-xs);
  font-weight:var(--font-bold);
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
  transition:all var(--transition-base);
}

.badge:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg), 0 0 25px rgba(10, 163, 163, 0.25);
  border-color:var(--teal-400);
  background:linear-gradient(135deg, var(--teal-200), var(--teal-100));
}

.badge:hover::before{
  transform:scale(1.15);
  box-shadow:var(--shadow-md), 0 0 15px rgba(10, 163, 163, 0.4);
}

.badge-certified{
  background:linear-gradient(135deg, var(--navy-100), var(--navy-50));
  border-color:var(--navy-200);
  color:var(--navy-900);
}

.badge-certified::before{
  content:'🏆';
  background:linear-gradient(135deg, var(--navy-700), var(--navy-600));
}

.badge-licensed{
  background:linear-gradient(135deg, var(--success-light), #d1fae5);
  border-color:var(--success);
  color:var(--success-dark);
}

.badge-licensed::before{
  content:'🏛️';
  background:linear-gradient(135deg, var(--success), var(--success-dark));
}

.hero-trust-indicators{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin:var(--space-6) 0;
  justify-content:center;
}

@media(min-width:1024px){
  .hero-trust-indicators{
    justify-content:flex-start;
  }
}

.trust-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md), 0 0 20px rgba(10, 163, 163, 0.05);
  border:2px solid var(--border-light);
  transition:all var(--transition-base);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
  animation:fadeInScale 0.8s ease-out backwards;
}

.trust-item:nth-child(1){animation-delay:0.4s;}
.trust-item:nth-child(2){animation-delay:0.5s;}
.trust-item:nth-child(3){animation-delay:0.6s;}

.trust-item::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg, var(--teal-500), var(--teal-300));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--transition-base);
}

.trust-item:hover::before{
  transform:scaleY(1);
}

.trust-item:hover{
  box-shadow:var(--shadow-xl), 0 0 30px rgba(10, 163, 163, 0.15);
  transform:translateY(-4px) scale(1.02);
  border-color:var(--teal-300);
  background:linear-gradient(135deg, #ffffff 0%, rgba(10, 163, 163, 0.02) 100%);
}

.trust-icon{
  font-size:var(--text-xl);
  line-height:1;
}

.trust-text{
  font-size:var(--text-sm);
  color:var(--text-secondary);
}

.trust-text strong{
  color:var(--text-primary);
  font-weight:var(--font-bold);
  display:block;
  font-size:var(--text-base);
}

.hero h1{
  font-size:var(--text-4xl);
  margin:var(--space-6) 0 var(--space-8);
  line-height:var(--leading-tight);
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 50%, var(--teal-700) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:var(--font-extrabold);
  letter-spacing:var(--tracking-tighter);
  text-shadow:0 2px 20px rgba(10, 163, 163, 0.1);
  position:relative;
}

.hero h1::after{
  content:'';
  position:absolute;
  bottom:-12px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--teal-500), transparent);
  border-radius:var(--radius-full);
}

@media(min-width:768px){
  .hero h1{
    font-size:var(--text-5xl);
    margin:var(--space-8) 0 var(--space-10);
  }
  
  .hero h1::after{
    width:150px;
  }
}

@media(min-width:1024px){
  .hero h1{
    font-size:var(--text-6xl);
    margin:var(--space-10) 0 var(--space-12);
    line-height:1.1;
  }
  
  .hero h1::after{
    width:180px;
    height:5px;
  }
}

.key-message{
  color:var(--text-secondary);
  margin-bottom:var(--space-10);
  font-size:var(--text-lg);
  line-height:var(--leading-relaxed);
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
  font-weight:var(--font-normal);
  letter-spacing:var(--tracking-normal);
}

@media(min-width:768px){
  .key-message{
    font-size:var(--text-xl);
    line-height:var(--leading-loose);
  }
}

@media(min-width:1024px){
  .key-message{
    margin-left:0;
    margin-right:0;
    margin-bottom:var(--space-12);
    font-size:var(--text-xl);
  }
}

.hero-image{
  position:relative;
  border-radius:var(--radius-2xl);
  overflow:hidden;
  box-shadow:var(--shadow-2xl), 0 0 60px rgba(10, 163, 163, 0.2);
  /* Removed 3D transform for flatter, cleaner look */
  animation:fadeInScale 1.2s ease-out 0.3s backwards;
  border:4px solid rgba(255, 255, 255, 0.3);
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--navy-900); /* Fallback color */
}

.hero-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-image::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(10, 163, 163, 0.1) 0%, transparent 60%);
  z-index:1;
  pointer-events:none;
  transition:opacity var(--transition-base);
}

.hero-image::after{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  animation:shimmer 3s infinite;
  pointer-events:none;
  z-index:2;
}

.hero:hover .hero-image{
  box-shadow:var(--shadow-2xl), 0 0 80px rgba(10, 163, 163, 0.3);
}

.hero:hover .hero-image::before{
  opacity:0.5;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius:var(--radius-2xl);
}
/* ============================================
   BUTTONS
   ============================================ */

.hero-cta{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-top:var(--space-8);
  justify-content:center;
}

@media(min-width:1024px){
  .hero-cta{
    justify-content:flex-start;
  }
}

.btn-whatsapp{
  background:linear-gradient(135deg, #25D366, #128C7E) !important;
  color:var(--text-inverse) !important;
  border-color:transparent !important;
}

.btn-whatsapp:hover{
  background:linear-gradient(135deg, #128C7E, #075E54) !important;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-8);
  border-radius:var(--radius-xl);
  text-decoration:none;
  border:2px solid transparent;
  font-weight:var(--font-semibold);
  font-size:var(--text-base);
  line-height:var(--leading-none);
  transition:all var(--transition-base);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  font-size:var(--text-sm);
  box-shadow:var(--shadow-md);
}

.btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255, 255, 255, 0.3);
  transform:translate(-50%, -50%);
  transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:0;
}

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

.btn:hover::before{
  width:400px;
  height:400px;
}

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

.btn > *{
  position:relative;
  z-index:2;
}

.btn.primary{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-800));
  color:var(--text-inverse);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

.btn.primary::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255, 255, 255, 0.2);
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}

.btn.primary:hover::after{
  width:300px;
  height:300px;
}

.btn.primary:hover{
  background:linear-gradient(135deg, var(--navy-800), var(--navy-700));
  box-shadow:var(--shadow-xl);
  transform:translateY(-3px);
}

.btn.primary:active{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.btn.primary:active{
  transform:translateY(0);
  box-shadow:var(--shadow-md);
}

.btn.primary:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:3px;
  box-shadow:var(--shadow-lg), 0 0 0 3px rgba(10, 163, 163, 0.2);
}

.btn.ghost{
  background:var(--bg-primary);
  color:var(--text-primary);
  border-color:var(--border-medium);
  box-shadow:var(--shadow-sm);
}

.btn.ghost:hover{
  background:var(--gray-50);
  border-color:var(--teal-300);
  color:var(--teal-700);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.btn.ghost:active{
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

.btn.ghost:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
  filter:grayscale(0.3);
}

/* ============================================
   SECTIONS
   ============================================ */

section{
  padding:var(--space-20) 0;
  position:relative;
}

section:nth-child(even){
  background:var(--bg-primary);
}

section:nth-child(odd):not(.hero):not(.stats){
  background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.section-intro{
  font-size:var(--text-lg);
  color:var(--text-tertiary);
  text-align:center;
  max-width:700px;
  margin:0 auto var(--space-12);
  line-height:var(--leading-relaxed);
  font-weight:var(--font-normal);
}

section h2{
  font-size:var(--text-3xl);
  margin:0 0 var(--space-8);
  font-weight:var(--font-extrabold);
  color:var(--text-primary);
  position:relative;
  display:block;
  text-align:center;
  width:100%;
  letter-spacing:var(--tracking-tight);
  animation:slideInUp 0.8s ease-out backwards;
  text-shadow:0 2px 10px rgba(11, 37, 69, 0.1);
}

section h2::after{
  content:'';
  position:absolute;
  bottom:calc(var(--space-3) * -1);
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:5px;
  background:linear-gradient(90deg, transparent, var(--teal-500), var(--teal-300), transparent);
  border-radius:var(--radius-full);
  box-shadow:0 2px 8px rgba(10, 163, 163, 0.3);
}

@media(min-width:768px){
  section h2::after{
    width:120px;
    height:6px;
  }
}

@media(min-width:768px){
  section h2{
    font-size:var(--text-4xl);
  }
}

section h3{
  font-size:var(--text-2xl);
  margin:0 0 var(--space-3);
  font-weight:var(--font-bold);
  color:var(--text-primary);
  line-height:var(--leading-tight);
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about{
  position:relative;
  background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.about-content{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  margin-top:var(--space-8);
}

@media(min-width:1024px){
  .about-content{
    grid-template-columns:2fr 1fr;
    gap:var(--space-12);
  }
}

.about-main h3{
  margin-top:var(--space-10);
  margin-bottom:var(--space-5);
  color:var(--navy-800);
  font-size:var(--text-2xl);
  position:relative;
  padding-bottom:var(--space-3);
  border-bottom:2px solid var(--border-light);
}

.about-main h3:first-child{
  margin-top:0;
}

.about-main h3::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:60px;
  height:2px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  border-radius:var(--radius-full);
}

.about-main p{
  color:var(--text-secondary);
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-6);
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-6);
  margin-top:var(--space-6);
}

@media(min-width:768px){
  .values-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

.value-item{
  background:var(--bg-primary);
  padding:var(--space-6);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-base);
  text-align:center;
}

.value-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--teal-200);
}

.value-icon{
  font-size:var(--text-4xl);
  margin-bottom:var(--space-3);
  display:block;
  filter:grayscale(0.2);
  transition:all var(--transition-base);
}

.value-item:hover .value-icon{
  filter:grayscale(0);
  transform:scale(1.1) rotate(5deg);
}

.value-item h4{
  margin:0 0 var(--space-2);
  color:var(--text-primary);
  font-size:var(--text-lg);
}

.value-item p{
  color:var(--text-secondary);
  font-size:var(--text-sm);
  margin:0;
  line-height:var(--leading-relaxed);
}

.about-sidebar{
  position:relative;
}

.certifications-box{
  background:linear-gradient(135deg, var(--navy-50), var(--teal-50));
  padding:var(--space-8);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-light);
  position:sticky;
  top:100px;
}

.certifications-box h3{
  margin:0 0 var(--space-6);
  color:var(--navy-800);
  font-size:var(--text-xl);
  text-align:center;
}

.certifications-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.certifications-list li{
  display:flex;
  align-items:flex-start;
  gap:var(--space-4);
  padding:var(--space-4);
  background:var(--bg-primary);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
  transition:all var(--transition-base);
}

.certifications-list li:hover{
  transform:translateX(4px);
  box-shadow:var(--shadow-md);
  border-color:var(--teal-200);
}

.cert-icon{
  /* Fixed dimensions   height:24p48
  min-width:48px;
  min-height484px;

  /* Flexb48 centering */
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* Font properties */
  font-size:40px;
  line-heigh4:1;
  text-align:center;
  vertical-align:middle;

  /* Layout control */
  box-sizing:border-box;
  overflow:hidden;
  contain:strict;
  flex-shrink:0;

  /* Visual styling */
  background:linear-gradient(135deg, var(--teal-100), var(--teal-50));
  border-radius:var(--radius-lg);
}

.certifications-list li strong{
  display:block;
  color:var(--navy-800);
  font-size:var(--text-base);
  margin-bottom:var(--space-1);
  font-weight:var(--font-semibold);
}

.certifications-list li span{
  color:var(--text-secondary);
  font-size:var(--text-sm);
  display:block;
}



/* ============================================
   STATS SECTION
   ============================================ */

.stats{
  background:var(--navy-900);
  color:var(--text-inverse);
  padding:var(--space-20) 0;
  position:relative;
  overflow:hidden;
}

.stats::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 50% 50%, rgba(10, 163, 163, 0.1) 0%, transparent 70%);
  pointer-events:none;
}

.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  position:relative;
  z-index:1;
}

@media(min-width:640px){
  .stats-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-6);
  }
}

@media(min-width:1024px){
  .stats-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-8);
  }
}

.stat-card{
  text-align:center;
  padding:var(--space-8) var(--space-6);
  background:var(--navy-800);
  border-radius:var(--radius-xl);
  border:1px solid var(--navy-700);
  box-shadow:var(--shadow-md);
  transition:all var(--transition-base);
  position:relative;
  overflow:hidden;
  animation:fadeInScale 0.8s ease-out backwards;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
}

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

/* Hover effect - Top Border Slide */
.stat-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-400), var(--teal-300));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--transition-base);
}

.stat-card:hover::before{
  transform:scaleX(1);
}

.stat-card:hover{
  transform:translateY(-8px);
  background:var(--navy-700);
  border-color:var(--teal-500);
  box-shadow:var(--shadow-xl), 0 0 20px rgba(10, 163, 163, 0.15);
}

.stat-card:focus-visible{
  outline:2px solid var(--teal-400);
  outline-offset:2px;
}

.stat-number{
  font-size:var(--text-4xl);
  font-weight:var(--font-extrabold);
  color:var(--teal-300);
  margin-bottom:var(--space-2);
  line-height:1.2;
  letter-spacing:var(--tracking-tight);
  display:block;
  transition:all var(--transition-base);
}

@media(min-width:768px){
  .stat-number{
    font-size:var(--text-5xl);
  }
}

@media(min-width:1024px){
  .stat-number{
    font-size:var(--text-6xl);
  }
}

.stat-label{
  font-size:var(--text-sm);
  color:var(--gray-200);
  font-weight:var(--font-medium);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  line-height:var(--leading-relaxed);
  transition:color var(--transition-base);
  max-width:80%;
  margin:0 auto;
}

.stat-card:hover .stat-label{
  color:var(--text-inverse);
}

/* ============================================
   CARDS
   ============================================ */

.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-8);
}

@media(min-width:640px){
  .cards{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(min-width:1024px){
  .cards{
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-8);
  }
}

.card{
  background:var(--bg-primary);
  padding:var(--space-8) var(--space-10);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  transition:all var(--transition-base);
  border:2px solid var(--border-light);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:6px;
  height:100%;
  background:linear-gradient(180deg, var(--teal-500), var(--teal-400), var(--teal-300));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--transition-slow);
  box-shadow:0 0 20px rgba(10, 163, 163, 0.4);
  z-index:1;
}

.card::after{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(10, 163, 163, 0.08) 0%, transparent 70%);
  opacity:0;
  transition:opacity var(--transition-base);
  z-index:0;
}

.card:hover::before{
  transform:scaleY(1);
  box-shadow:0 0 30px rgba(10, 163, 163, 0.6);
}

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

.card:hover{
  transform:translateY(-16px) scale(1.03);
  box-shadow:var(--shadow-2xl), 0 20px 60px rgba(10, 163, 163, 0.15);
  border-color:var(--teal-400);
  background:linear-gradient(135deg, #ffffff 0%, rgba(10, 163, 163, 0.03) 100%);
}

.card:active{
  transform:translateY(-8px) scale(1.01);
}

.card:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:3px;
  box-shadow:var(--shadow-lg);
}

.card-icon{
  font-size:4rem;
  margin-bottom:var(--space-6);
  display:block;
  transition:all var(--transition-base);
  line-height:1;
  filter:grayscale(0.3) brightness(0.95);
  position:relative;
  z-index:2;
  text-shadow:0 4px 12px rgba(10, 163, 163, 0.2);
  animation:fadeInScale 0.6s ease-out backwards;
  transform-origin:center center;
}

.card:nth-child(1) .card-icon{animation-delay:0.1s;}
.card:nth-child(2) .card-icon{animation-delay:0.2s;}
.card:nth-child(3) .card-icon{animation-delay:0.3s;}
.card:nth-child(4) .card-icon{animation-delay:0.4s;}
.card:nth-child(5) .card-icon{animation-delay:0.5s;}
.card:nth-child(6) .card-icon{animation-delay:0.6s;}

.card:hover .card-icon{
  transform:scale(1.1) rotate(5deg);
  filter:grayscale(0) brightness(1.15);
  text-shadow:0 6px 18px rgba(10, 163, 163, 0.3);
}

.card h3{
  margin-top:0;
  margin-bottom:var(--space-4);
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
  color:var(--navy-800);
  position:relative;
  z-index:1;
  transition:color var(--transition-base);
}

.card:hover h3{
  color:var(--teal-700);
}

.card p{
  color:var(--text-secondary);
  margin-bottom:0;
  line-height:var(--leading-relaxed);
  flex-grow:1;
  font-size:var(--text-base);
  position:relative;
  z-index:1;
}

/* ============================================
   SERVICES SECTION
   ============================================ */

.service-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-10);
}

@media(min-width:640px){
  .service-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-8);
  }
}

@media(min-width:1024px){
  .service-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

.service{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-8);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl), 0 0 25px rgba(10, 163, 163, 0.06);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  align-items:flex-start;
  transition:all var(--transition-base);
  border:2px solid var(--border-light);
  position:relative;
  overflow:hidden;
  animation:fadeInScale 0.6s ease-out backwards;
  height:100%;
}

.service:nth-child(1){animation-delay:0.1s;}
.service:nth-child(2){animation-delay:0.2s;}
.service:nth-child(3){animation-delay:0.3s;}
.service:nth-child(4){animation-delay:0.4s;}
.service:nth-child(5){animation-delay:0.5s;}
.service:nth-child(6){animation-delay:0.6s;}

.service::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}

.service:hover::before{
  transform:scaleX(1);
}

.service::after{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(10, 163, 163, 0.08) 0%, transparent 70%);
  opacity:0;
  transition:opacity var(--transition-base);
}

.service:hover::after{
  opacity:1;
}

.service:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:var(--teal-300);
}

/* Service Card Image Configuration */
.service-icon-wrapper {
  display: block;
  width: 100%;
  flex: 1;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  z-index: 2;
  transition: all var(--transition-base);
}

.service-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service:hover .service-icon-wrapper {
  transform: scale(1.02);
}

.service-icon-wrapper img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.service-icon-wrapper img[loading="lazy"].loaded {
  opacity: 1;
}

.service h3{
  margin-top:0;
  margin-bottom:0;
  color:var(--navy-800);
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
  position:relative;
  z-index:1;
  transition:color var(--transition-base);
  line-height:var(--leading-tight);
}

.service:hover h3{
  color:var(--teal-700);
}

/* ============================================
   SERVICE DETAILS SECTION
   ============================================ */

.service-details{
  margin-top:var(--space-20);
  padding-top:var(--space-16);
  border-top:2px solid var(--border-light);
}

/* Accordion */
.accordion .accordion-toggle{
  width:100%;
  text-align:left;
  padding:var(--space-5) var(--space-6);
  border:2px solid var(--border-light);
  border-radius:var(--radius-lg);
  background:var(--bg-primary);
  margin-top:var(--space-3);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  font-weight:var(--font-semibold);
  transition:all var(--transition-base);
  position:relative;
  padding-right:var(--space-12);
  color:var(--navy-800);
  font-size:var(--text-base);
}

.accordion .accordion-toggle::after{
  content:'+';
  position:absolute;
  right:var(--space-6);
  top:50%;
  transform:translateY(-50%);
  font-size:var(--text-2xl);
  font-weight:var(--font-bold);
  color:var(--teal-600);
  transition:all var(--transition-base);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--teal-50);
}

.accordion .accordion-toggle[aria-expanded="true"]::after{
  transform:translateY(-50%) rotate(45deg);
  background:var(--teal-100);
  color:var(--teal-700);
}

.accordion .accordion-toggle:hover{
  background:var(--gray-50);
  box-shadow:var(--shadow-md);
  border-color:var(--teal-200);
  transform:translateX(4px);
}

.accordion .accordion-toggle[aria-expanded="true"]{
  background:var(--teal-50);
  border-color:var(--teal-300);
  box-shadow:var(--shadow-md);
}

.accordion .accordion-toggle:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

.accordion .accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--transition-base), padding var(--transition-base);
  padding:0 var(--space-4);
}

.accordion .accordion-toggle[aria-expanded="true"] + .accordion-panel{
  padding:var(--space-4) var(--space-4) var(--space-6);
  max-height:500px;
}

.accordion .accordion-panel ul{
  list-style:none;
  padding-left:0;
  margin:0;
}

.accordion .accordion-panel li{
  padding:var(--space-2) 0 var(--space-2) var(--space-6);
  position:relative;
  color:var(--text-secondary);
  line-height:var(--leading-relaxed);
}

.accordion .accordion-panel li::before{
  content:'→';
  position:absolute;
  left:0;
  color:var(--teal-500);
  font-weight:var(--font-bold);
}

/* Testimonials carousel */
.testimonials{
  background:linear-gradient(135deg, rgba(10,163,163,0.03) 0%, rgba(11,37,69,0.02) 100%);
}
.testimonials .carousel{
  position:relative;
  padding:2rem 0;
}
.carousel-track{
  display:flex;
  gap:1.5rem;
  transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial{
  min-width:340px;
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.98) 100%);
  padding:var(--space-10) var(--space-12);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl), 0 0 30px rgba(10, 163, 163, 0.08);
  border:2px solid var(--border-light);
  position:relative;
  transition:all var(--transition-base);
  overflow:hidden;
  backdrop-filter:blur(10px);
  animation:fadeInScale 0.8s ease-out backwards;
}

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

.testimonial::before{
  content:'"';
  position:absolute;
  top:var(--space-4);
  left:var(--space-6);
  font-size:5rem;
  color:var(--teal-300);
  opacity:0.15;
  font-family:Georgia, serif;
  line-height:1;
  font-weight:var(--font-bold);
  z-index:0;
}

.testimonial::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg, var(--teal-500), var(--teal-300));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--transition-base);
}

.testimonial:hover::after{
  transform:scaleY(1);
}

.testimonial:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:var(--teal-300);
}
.testimonial-rating{
  color:#fbbf24;
  font-size:var(--text-xl);
  margin-bottom:var(--space-4);
  letter-spacing:4px;
  text-shadow:0 2px 8px rgba(251, 191, 36, 0.3);
  position:relative;
  z-index:1;
  filter:drop-shadow(0 2px 4px rgba(251, 191, 36, 0.2));
}
.testimonial p{
  font-style:italic;
  color:var(--text-secondary);
  margin-bottom:var(--space-6);
  position:relative;
  z-index:1;
  line-height:var(--leading-loose);
  font-size:var(--text-lg);
  font-weight:var(--font-normal);
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:1.5rem;
}
.author-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal-500), var(--teal-400), var(--teal-300));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:var(--font-bold);
  font-size:var(--text-lg);
  flex-shrink:0;
  box-shadow:var(--shadow-md), 0 0 20px rgba(10, 163, 163, 0.3);
  border:3px solid rgba(255, 255, 255, 0.3);
  transition:all var(--transition-base);
  position:relative;
  z-index:1;
}

.testimonial:hover .author-avatar{
  transform:scale(1.1) rotate(5deg);
  box-shadow:var(--shadow-lg), 0 0 30px rgba(10, 163, 163, 0.4);
  border-color:rgba(255, 255, 255, 0.5);
}
.testimonial-author strong{
  display:block;
  color:var(--navy);
  font-size:1rem;
  margin-bottom:0.25rem;
}
.testimonial-author span{
  color:var(--muted);
  font-size:0.9rem;
}
.testimonial footer{
  border-top:1px solid rgba(11,37,69,0.1);
  padding-top:1rem;
}
.carousel-dots{
  display:flex;
  gap:0.5rem;
  align-items:center;
}
.carousel-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gray-300);
  border:2px solid transparent;
  cursor:pointer;
  transition:all var(--transition-base);
  padding:0;
  box-shadow:var(--shadow-sm);
}

.carousel-dot:hover{
  background:var(--teal-300);
  transform:scale(1.2);
  box-shadow:var(--shadow-md);
}

.carousel-dot.active{
  background:linear-gradient(135deg, var(--teal-500), var(--teal-600));
  width:32px;
  border-radius:var(--radius-full);
  border-color:var(--teal-400);
  box-shadow:var(--shadow-md), 0 0 15px rgba(10, 163, 163, 0.4);
}
.carousel-controls{
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  align-items:center;
  margin-top:var(--space-6);
}

.carousel-controls button{
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg);
  border:2px solid var(--border-light);
  background:var(--bg-primary);
  cursor:pointer;
  transition:all var(--transition-base);
  font-size:var(--text-xl);
  line-height:1;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
  color:var(--navy-800);
}

.carousel-controls button:hover{
  background:var(--teal-50);
  border-color:var(--teal-300);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px) scale(1.05);
  color:var(--teal-700);
}

.carousel-controls button:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

.carousel-controls button:active{
  transform:translateY(0) scale(0.95);
}

.carousel-controls button:disabled{
  opacity:0.4;
  cursor:not-allowed;
  transform:none;
}

/* Contact form */
.contact{
  background:linear-gradient(135deg, rgba(10,163,163,0.02) 0%, rgba(11,37,69,0.01) 100%);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-top:2rem;
}
.form-header{
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:2px solid rgba(10,163,163,0.1);
}
.form-header h3{
  margin:0 0 0.5rem;
  color:var(--navy);
  font-size:1.5rem;
}
.form-header p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}
.contact-info{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-10);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl);
  border:2px solid var(--border-light);
  height:fit-content;
  position:relative;
  overflow:hidden;
}

.contact-info::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
}
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
  margin-bottom:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(11,37,69,0.05);
}
.contact-item:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}
.contact-icon{
  font-size:2rem;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(10,163,163,0.1), rgba(10,163,163,0.05));
  border-radius:var(--radius);
  flex-shrink:0;
}
.contact-item strong{
  display:block;
  color:var(--navy);
  font-size:1.1rem;
  margin-bottom:0.5rem;
  font-weight:700;
}
.contact-item p{
  color:var(--muted);
  margin:0;
  line-height:1.6;
}
.contact-item a{
  color:var(--teal);
  text-decoration:none;
  transition:color 0.2s ease;
}
.contact-item a:hover{
  color:var(--teal-dark);
  text-decoration:underline;
}
.field{
  margin-bottom:1.25rem;
}
.field label{
  display:block;
  margin-bottom:0.5rem;
  font-weight:600;
  color:var(--navy);
  font-size:0.95rem;
}
.required{
  color:#b91c1c;
  font-weight:bold;
}
.field input,.field textarea,.field select{
  width:100%;
  padding:1.125rem 1.5rem;
  border-radius:var(--radius-xl);
  border:2px solid var(--border-medium);
  background:var(--bg-primary);
  transition:all var(--transition-base);
  font-family:inherit;
  font-size:var(--text-base);
  color:var(--navy-800);
  box-shadow:var(--shadow-sm), inset 0 1px 3px rgba(0, 0, 0, 0.05);
  backdrop-filter:blur(10px);
}

.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--teal-500);
  outline:none;
  box-shadow:0 0 0 4px rgba(10, 163, 163, 0.15), var(--shadow-lg), inset 0 1px 3px rgba(0, 0, 0, 0.05);
  background:#ffffff;
  transform:translateY(-2px);
  border-width:3px;
}

.field input:valid:not(:placeholder-shown),
.field textarea:valid:not(:placeholder-shown){
  border-color:var(--success);
  background:linear-gradient(to right, #ffffff, rgba(16, 185, 129, 0.02));
}

.field input:valid:not(:placeholder-shown):focus,
.field textarea:valid:not(:placeholder-shown):focus{
  border-color:var(--success-dark);
  box-shadow:0 0 0 4px rgba(16, 185, 129, 0.15), var(--shadow-lg);
}
.field select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230b2545' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.field input:hover,.field textarea:hover,.field select:hover{
  border-color:var(--teal-300);
  box-shadow:var(--shadow-sm);
}
.field input:invalid:not(:focus):not(:placeholder-shown),.field textarea:invalid:not(:focus):not(:placeholder-shown){
  border-color:#b91c1c;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field input.error-field,.field textarea.error-field{
  border-color:#b91c1c;
  background:#fef2f2;
}
.field input::placeholder,.field textarea::placeholder{
  color:#9ca3af;
}
.error{
  color:#b91c1c;
  font-size:0.85rem;
  display:block;
  min-height:1.25rem;
  margin-top:0.5rem;
  font-weight:500;
}
.success{
  color:#064e3b;
  background:linear-gradient(135deg, #d1fae5, #a7f3d0);
  padding:1rem 1.25rem;
  margin-top:1rem;
  border-radius:var(--radius);
  border:2px solid #86efac;
  font-weight:600;
  box-shadow:var(--shadow-sm);
  animation:slideIn 0.3s ease;
}
@keyframes slideIn{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer{
  background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 50%, #0a1f3a 100%);
  color:#fff;
  padding:var(--space-16) 0 var(--space-8);
  margin-top:var(--space-20);
  border-top:5px solid var(--teal-500);
  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--teal-300), transparent);
}

.site-footer::after{
  content:'';
  position:absolute;
  bottom:-50%;
  right:-20%;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(10, 163, 163, 0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.footer-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:1fr;
  align-items:start;
  margin-bottom:2rem;
}
.site-footer h4{
  color:#fff;
  margin-bottom:1rem;
  font-size:1.1rem;
  font-weight:700;
}
.site-footer p{
  color:rgba(255,255,255,0.8);
  line-height:1.7;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.footer-links a{
  color:rgba(255,255,255,0.8);
  text-decoration:none;
  transition:all 0.2s ease;
  display:inline-block;
  position:relative;
  padding-left:1rem;
}
.footer-links a::before{
  content:'→';
  position:absolute;
  left:0;
  color:var(--teal);
  transition:transform 0.2s ease;
}
.footer-links a:hover{
  color:#fff;
  transform:translateX(4px);
}
.footer-links a:hover::before{
  transform:translateX(4px);
}
.social{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.social a{
  background:rgba(255,255,255,0.12);
  color:#fff;
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-lg);
  text-decoration:none;
  font-weight:var(--font-semibold);
  transition:all var(--transition-base);
  border:2px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}

.social a::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255, 255, 255, 0.2);
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}

.social a:hover::before{
  width:200px;
  height:200px;
}

.social a:hover{
  background:linear-gradient(135deg, var(--teal-500), var(--teal-600));
  border-color:var(--teal-400);
  transform:translateY(-4px) scale(1.05);
  box-shadow:var(--shadow-lg), 0 0 20px rgba(10, 163, 163, 0.4);
}

.social a:active{
  transform:translateY(-2px) scale(1.02);
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:1.5rem;
  text-align:center;
}
.footer-bottom small{
  color:rgba(255,255,255,0.6);
  font-size:0.85rem;
}

/* ============================================
   INDUSTRIES SECTION
   ============================================ */

.industries{
  background:var(--bg-primary);
}

.industries-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-8);
}

@media(min-width:640px){
  .industries-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(min-width:1024px){
  .industries-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

.industry-card{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-10);
  border-radius:var(--radius-2xl);
  border:2px solid var(--border-light);
  box-shadow:var(--shadow-xl), 0 0 25px rgba(10, 163, 163, 0.06);
  transition:all var(--transition-base);
  text-align:center;
  position:relative;
  overflow:hidden;
  animation:fadeInScale 0.6s ease-out backwards;
}

.industry-card:nth-child(1){animation-delay:0.1s;}
.industry-card:nth-child(2){animation-delay:0.2s;}
.industry-card:nth-child(3){animation-delay:0.3s;}
.industry-card:nth-child(4){animation-delay:0.4s;}
.industry-card:nth-child(5){animation-delay:0.5s;}
.industry-card:nth-child(6){animation-delay:0.6s;}

.industry-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}

.industry-card:hover::before{
  transform:scaleX(1);
}

.industry-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:var(--teal-300);
}

.industry-icon{
  font-size:var(--text-6xl);
  margin-bottom:var(--space-6);
  display:block;
  filter:grayscale(0.3) brightness(0.95);
  transition:all var(--transition-base);
  text-shadow:0 4px 12px rgba(10, 163, 163, 0.2);
  position:relative;
  z-index:1;
}

.industry-card:hover .industry-icon{
  filter:grayscale(0) brightness(1.1);
  transform:scale(1.15) rotate(8deg) translateY(-4px);
  text-shadow:0 8px 24px rgba(10, 163, 163, 0.4);
}

.industry-card h3{
  margin:0 0 var(--space-3);
  font-size:var(--text-xl);
  color:var(--text-primary);
}

.industry-card > p{
  color:var(--text-secondary);
  margin-bottom:var(--space-4);
  line-height:var(--leading-relaxed);
}

.industry-benefits{
  list-style:none;
  padding:0;
  margin:var(--space-4) 0 0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.industry-benefits li{
  padding-left:var(--space-5);
  position:relative;
  color:var(--text-secondary);
  font-size:var(--text-sm);
}

.industry-benefits li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--teal-600);
  font-weight:var(--font-bold);
}

/* ============================================
   PORTS & LOCATIONS SECTION
   ============================================ */

.ports{
  background:linear-gradient(135deg, var(--teal-50), var(--bg-secondary));
}

.ports-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-8);
}

@media(min-width:640px){
  .ports-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(min-width:1024px){
  .ports-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

.port-card{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-10);
  border-radius:var(--radius-2xl);
  border:2px solid var(--border-light);
  box-shadow:var(--shadow-xl), 0 0 25px rgba(10, 163, 163, 0.06);
  transition:all var(--transition-base);
  text-align:center;
  position:relative;
  overflow:hidden;
  animation:fadeInScale 0.6s ease-out backwards;
}

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

.port-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}

.port-card:hover::before{
  transform:scaleX(1);
}

.port-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:var(--shadow-2xl);
  border-color:var(--teal-300);
}

.port-icon{
  font-size:var(--text-5xl);
  margin-bottom:var(--space-6);
  display:block;
  filter:grayscale(0.2) brightness(0.95);
  transition:all var(--transition-base);
  text-shadow:0 4px 12px rgba(10, 163, 163, 0.2);
  position:relative;
  z-index:1;
}

.port-card:hover .port-icon{
  filter:grayscale(0) brightness(1.1);
  transform:scale(1.15) rotate(8deg) translateY(-4px);
  text-shadow:0 8px 24px rgba(10, 163, 163, 0.4);
}

.port-card h3{
  margin:0 0 var(--space-2);
  font-size:var(--text-lg);
  color:var(--text-primary);
}

.port-card > p{
  color:var(--text-secondary);
  margin-bottom:var(--space-4);
  font-size:var(--text-sm);
}

.port-services{
  list-style:none;
  padding:0;
  margin:var(--space-4) 0 0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.port-services li{
  padding-left:var(--space-5);
  position:relative;
  color:var(--text-secondary);
  font-size:var(--text-sm);
}

.port-services li::before{
  content:'→';
  position:absolute;
  left:0;
  color:var(--teal-600);
  font-weight:var(--font-bold);
}

/* ============================================
   QUICK QUOTE SECTION
   ============================================ */

.quick-quote{
  background:linear-gradient(135deg, var(--navy-50), var(--teal-50));
  position:relative;
  overflow:hidden;
}

.quick-quote::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(10, 163, 163, 0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.quick-quote-form{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-10) var(--space-8);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-2xl);
  max-width:850px;
  margin:var(--space-10) auto 0;
  position:relative;
  z-index:1;
  border:2px solid var(--border-light);
  transition:all var(--transition-base);
}

.quick-quote-form:hover{
  box-shadow:0 30px 60px rgba(11, 37, 69, 0.15);
  border-color:var(--teal-200);
}

.form-row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
}

@media(min-width:640px){
  .form-row{
    grid-template-columns:repeat(2, 1fr);
  }
}

.quick-quote-form .field{
  margin-bottom:var(--space-4);
}

.quick-quote-form .field:last-child{
  margin-bottom:var(--space-6);
}

.form-note{
  text-align:center;
  color:var(--text-tertiary);
  font-size:var(--text-sm);
  margin-top:var(--space-4);
  font-style:italic;
}

/* ============================================
   RESOURCE CENTER
   ============================================ */

.resources{
  background:var(--bg-primary);
}

.resources-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-8);
}

@media(min-width:640px){
  .resources-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(min-width:1024px){
  .resources-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

.resource-card{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-10) var(--space-8) var(--space-20);
  border-radius:var(--radius-2xl);
  border:3px dashed var(--border-medium);
  text-align:center;
  transition:all var(--transition-base);
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:fadeInScale 0.6s ease-out backwards;
  min-height:340px;
}

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

.resource-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}

.resource-card:hover::before{
  transform:scaleX(1);
}

.resource-card:hover{
  border-color:var(--teal-400);
  border-style:solid;
  border-width:3px;
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-xl);
  background:linear-gradient(135deg, #ffffff 0%, rgba(10, 163, 163, 0.02) 100%);
}

.resource-icon{
  font-size:var(--text-6xl);
  margin-bottom:var(--space-6);
  display:block;
  filter:grayscale(0.2) brightness(0.95);
  transition:all var(--transition-base);
  text-shadow:0 4px 12px rgba(10, 163, 163, 0.2);
  position:relative;
  z-index:1;
}

.resource-card:hover .resource-icon{
  filter:grayscale(0) brightness(1.1);
  transform:scale(1.15) rotate(8deg) translateY(-4px);
  text-shadow:0 8px 24px rgba(10, 163, 163, 0.4);
}


.resource-download{
  margin-top:auto;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-width:160px;
}

.resource-download.downloading{
  pointer-events:none;
  opacity:0.7;
}

.resource-download.downloading::before{
  display:none;
}

.download-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid rgba(10, 163, 163, 0.3);
  border-top-color:var(--teal-600);
  border-radius:50%;
  animation:spin 0.6s linear infinite;
  margin-right:var(--space-2);
}

.download-success{
  position:absolute;
  bottom:var(--space-6);
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, var(--success), var(--success-dark));
  color:#fff;
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  font-weight:var(--font-semibold);
  z-index:10;
  animation:slideInUp 0.4s ease-out;
  white-space:nowrap;
  max-width:calc(100% - var(--space-8));
}

.download-success .success-icon{
  width:20px;
  height:20px;
  background:rgba(255, 255, 255, 0.3);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:var(--font-bold);
  font-size:var(--text-xs);
}

.resource-card h3{
  margin-bottom:var(--space-4);
  color:var(--navy-800);
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
}

.resource-card > p{
  color:var(--text-secondary);
  margin-bottom:var(--space-4);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  flex-grow:1;
  max-width:280px;
}

.resource-card .btn{
  margin-top:var(--space-4);
  width:100%;
  max-width:200px;
}

.resource-card .btn.ghost{
  background:linear-gradient(135deg, var(--teal-50), var(--bg-primary));
  border-color:var(--teal-300);
  color:var(--teal-700);
  font-weight:var(--font-semibold);
}

.resource-card .btn.ghost:hover{
  background:linear-gradient(135deg, var(--teal-100), var(--teal-50));
  border-color:var(--teal-500);
  color:var(--teal-800);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg), 0 0 20px rgba(10, 163, 163, 0.2);
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */

.whatsapp-float{
  position:fixed;
  bottom:var(--space-8);
  left:var(--space-6);
  background:linear-gradient(135deg, #25D366, #128C7E, #075E54);
  color:var(--text-inverse);
  padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-full);
  box-shadow:var(--shadow-2xl), 0 0 30px rgba(37, 211, 102, 0.3);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  z-index:var(--z-40);
  transition:all var(--transition-base);
  font-weight:var(--font-semibold);
  font-size:var(--text-sm);
  border:2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter:blur(10px);
  animation:pulse 2s ease-in-out infinite;
}

.whatsapp-float::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg, #25D366, #128C7E);
  opacity:0;
  transition:opacity var(--transition-base);
  z-index:-1;
  filter:blur(10px);
}

.whatsapp-float:hover{
  transform:translateY(-6px) scale(1.08);
  box-shadow:var(--shadow-2xl), 0 0 40px rgba(37, 211, 102, 0.5);
  border-color:rgba(255, 255, 255, 0.5);
  animation:none;
}

.whatsapp-float:hover::before{
  opacity:0.7;
}

.whatsapp-float:active{
  transform:translateY(-3px) scale(1.05);
}

.whatsapp-icon{
  font-size:var(--text-xl);
  line-height:1;
}

.whatsapp-text{
  display:inline;
  white-space:nowrap;
}

@media(max-width:639px){
  .whatsapp-text{
    font-size:var(--text-xs);
  }
  .whatsapp-float{
    padding:var(--space-3) var(--space-4);
    font-size:var(--text-xs);
  }
}

@media(max-width:480px){
  .whatsapp-float{
    padding:var(--space-2) var(--space-3);
    gap:var(--space-2);
  }
  .whatsapp-text{
    font-size:0.7rem;
  }
}

@media(min-width:768px){
  .whatsapp-float{
    left:var(--space-6);
    bottom:var(--space-8);
  }
}

/* ============================================
   PROCESS SECTION
   ============================================ */

.process{
  background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  position:relative;
  overflow:hidden;
}

.process::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--teal-300), transparent);
}

.process-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-12);
  position:relative;
}

@media(min-width:640px){
  .process-steps{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(min-width:1024px){
  .process-steps{
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-8);
  }
}

.process-step{
  background:linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding:var(--space-10);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl), 0 0 30px rgba(10, 163, 163, 0.08);
  border:2px solid var(--border-light);
  position:relative;
  transition:all var(--transition-base);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  animation:fadeInScale 0.8s ease-out backwards;
}

.process-step:nth-child(1){animation-delay:0.1s;}
.process-step:nth-child(2){animation-delay:0.2s;}
.process-step:nth-child(3){animation-delay:0.3s;}
.process-step:nth-child(4){animation-delay:0.4s;}

.process-step::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}

.process-step:hover::before{
  transform:scaleX(1);
}

.process-step::after{
  content:'';
  position:absolute;
  top:50%;
  right:-20px;
  width:40px;
  height:40px;
  background:var(--teal-50);
  border-radius:50%;
  transform:translateY(-50%);
  opacity:0;
  transition:all var(--transition-base);
}

@media(min-width:1024px){
  .process-step::after{
    opacity:1;
  }
  
  .process-step:not(:last-child)::after{
    content:'→';
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--text-xl);
    color:var(--teal-500);
    font-weight:var(--font-bold);
    right:-40px;
  }
}

.process-step:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-2xl);
  border-color:var(--teal-300);
}

.step-number{
  width:90px;
  height:90px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal-500), var(--teal-600), var(--teal-700));
  color:var(--text-inverse);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--text-3xl);
  font-weight:var(--font-extrabold);
  margin-bottom:var(--space-8);
  box-shadow:var(--shadow-xl), 0 0 30px rgba(10, 163, 163, 0.4);
  position:relative;
  z-index:2;
  transition:all var(--transition-base);
  border:4px solid rgba(255, 255, 255, 0.3);
  text-shadow:0 2px 10px rgba(0, 0, 0, 0.2);
}

.step-number::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal-300), var(--teal-500));
  opacity:0;
  transition:opacity var(--transition-base);
  z-index:-1;
  filter:blur(10px);
}

.process-step:hover .step-number{
  transform:scale(1.15) rotate(10deg) translateY(-4px);
  box-shadow:var(--shadow-2xl), 0 0 40px rgba(10, 163, 163, 0.5);
  border-color:rgba(255, 255, 255, 0.5);
}

.process-step:hover .step-number::before{
  opacity:0.6;
}

.step-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

.step-content h3{
  margin:0 0 var(--space-3);
  color:var(--navy-800);
  font-size:var(--text-xl);
  font-weight:var(--font-bold);
}

.step-content p{
  color:var(--text-secondary);
  margin:0;
  line-height:var(--leading-relaxed);
  font-size:var(--text-base);
}

/* ============================================
   MOBILE ENHANCEMENTS
   ============================================ */

@media(max-width:639px){
  .hero{
    min-height:600px;
    padding:var(--space-16) 0 var(--space-20);
  }
  
  .hero-badges{
    flex-direction:column;
    align-items:stretch;
  }
  
  .badge{
    justify-content:center;
    width:100%;
  }
  
  .hero-cta{
    flex-direction:column;
    width:100%;
  }
  
  .hero-cta .btn{
    width:100%;
    justify-content:center;
  }
  
  .trust-item{
    flex-direction:column;
    text-align:center;
  }
  
  .card{
    padding:var(--space-6) var(--space-8);
  }
  
  .process-step{
    padding:var(--space-8);
  }
  
  .step-number{
    width:70px;
    height:70px;
    font-size:var(--text-2xl);
  }
  
  .service{
    grid-template-columns:80px 1fr;
    gap:var(--space-4);
    padding:var(--space-6);
  }
  
  .service img{
    width:80px;
    height:80px;
  }
  
  .testimonial{
    min-width:280px;
    padding:var(--space-6) var(--space-8);
  }
}

/* Touch device optimizations */
@media(hover:none) and (pointer:coarse){
  .card:hover,
  .service:hover,
  .testimonial:hover,
  .industry-card:hover,
  .port-card:hover{
    transform:none;
  }
  
  .card:active,
  .service:active,
  .testimonial:active{
    transform:scale(0.98);
  }
  
  .btn:active{
    transform:scale(0.95);
  }
}

/* Responsive: from 700px up */
@media(min-width:700px){
  .nav-links{display:flex;align-items:center}
  .hamburger{display:none}
  .hero{
    padding:var(--space-20) 0 var(--space-24);
  }
  .hero-inner{
    grid-template-columns:1fr 480px;
    padding:2rem;
    gap:3rem;
  }
  h1{
    font-size:2.5rem;
  }
  .key-message{
    font-size:1.1rem;
  }
  .cards{
    grid-template-columns:repeat(2,1fr);
  }
  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .contact-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-grid{
    grid-template-columns:2fr 1fr 1fr;
  }
  section{
    padding:var(--space-20) 0;
  }
  h2{
    font-size:2.25rem;
  }
  .stats-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* Larger screens */
@media(min-width:1100px){
  .container{
    padding:0 var(--space-10);
  }
  .hero-inner{
    gap:var(--space-16);
  }
  h1{
    font-size:var(--text-6xl);
  }
  .cards{
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-10);
  }
  .service-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-10);
  }
  .testimonial{
    min-width:380px;
  }
  .process-steps{
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-10);
  }
  .process-step{
    flex-direction:column;
    text-align:center;
    padding:var(--space-10) var(--space-8);
  }
  .step-content h3{
    font-size:var(--text-xl);
  }
  section{
    padding:var(--space-24) 0;
  }
}

/* Print styles */
@media print{
  .site-header,.site-footer,.hamburger,.carousel-controls,.btn,.skip-link{display:none}
  body{background:#fff;color:#000}
  section{padding:1rem 0;page-break-inside:avoid}
  a{color:#000;text-decoration:underline}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,.accordion .accordion-panel,.carousel-track,.btn,.card,.service,.hamburger span{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* Animations */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.fade-in{
  animation:fadeIn 0.6s ease forwards;
}
.fade-in-up{
  animation:fadeInUp 0.6s ease forwards;
}

/* Scroll animations */
.scroll-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

/* ============================================
   LOADING STATES & SKELETON SCREENS
   ============================================ */

.loading{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}

.loading::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation:shimmer 1.5s infinite;
}

@keyframes shimmer{
  0%{
    background-position:-200% 0;
    left:-100%;
  }
  100%{
    background-position:200% 0;
    left:100%;
  }
}

/* Skeleton loader for images */
.skeleton{
  background:linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-lg);
}

/* Loading spinner */
.spinner{
  width:40px;
  height:40px;
  border:4px solid var(--teal-100);
  border-top-color:var(--teal-500);
  border-radius:50%;
  animation:rotate 0.8s linear infinite;
}

/* Pulse animation for loading states */
@keyframes pulse{
  0%, 100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:0.7;
    transform:scale(1.05);
  }
}

.pulse{
  animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Back to Top Button */
.back-to-top{
  position:fixed;
  bottom:var(--space-8);
  right:var(--space-8);
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal-500), var(--teal-600));
  color:#fff;
  border:3px solid rgba(255, 255, 255, 0.3);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:var(--shadow-xl), 0 0 20px rgba(10, 163, 163, 0.3);
  opacity:0;
  visibility:hidden;
  transition:all var(--transition-base);
  z-index:var(--z-50);
  backdrop-filter:blur(10px);
}

.back-to-top::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal-300), var(--teal-500));
  opacity:0;
  transition:opacity var(--transition-base);
  z-index:-1;
  filter:blur(8px);
}

.back-to-top.visible{
  opacity:1;
  visibility:visible;
  animation:fadeInScale 0.4s ease-out;
}

.back-to-top:hover{
  transform:translateY(-8px) scale(1.1);
  box-shadow:var(--shadow-2xl), 0 0 30px rgba(10, 163, 163, 0.5);
  border-color:rgba(255, 255, 255, 0.5);
}

.back-to-top:hover::before{
  opacity:0.6;
}

.back-to-top:active{
  transform:translateY(-4px) scale(1.05);
}

.back-to-top:focus-visible{
  outline:3px solid var(--teal-300);
  outline-offset:3px;
}

/* Button Loading State */
.btn-loader{
  display:none;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.btn:disabled .btn-text{
  opacity:0;
}

.btn:disabled .btn-loader{
  display:inline-block;
}

/* Utility */
/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Visually hidden but accessible to screen readers */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
  clip-path:inset(50%);
}

/* Skip link for accessibility */
.skip-link{
  position:absolute;
  top:-100px;
  left:0;
  z-index:var(--z-50);
  padding:var(--space-3) var(--space-4);
  background:var(--navy-900);
  color:var(--text-inverse);
  text-decoration:none;
  font-weight:var(--font-semibold);
  border-radius:0 0 var(--radius-md) 0;
  transition:top var(--transition-base);
}

.skip-link:focus{
  top:0;
  outline:2px solid var(--teal-500);
  outline-offset:2px;
}

/* Performance optimizations */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Reduce motion for users who prefer it */
@media(prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Focus visible for better keyboard navigation */
:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible){
  outline:none;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.text-center{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}