/* ==========================================================================
   TedCleaning Corporate Website — main.css
   Complete production stylesheet
   ========================================================================== */

/* ==========================================================================
   01. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* --- Colors --- */
  --color-primary:        #0B1D3A;
  --color-secondary:      #0077CC;
  --color-accent:         #00B4E6;
  --color-accent-light:   #4DD6F5;
  --color-silver:         #BDD8EF;
  --color-dark:           #060E20;
  --color-dark-alt:       #0D1E38;
  --color-light:          #F0F6FA;
  --color-white:          #FFFFFF;
  --color-text-primary:   #0B1D3A;
  --color-text-secondary: #3A5273;
  --color-text-muted:     #6B8299;
  --color-text-dim:       #9BB3C8;
  --color-border:         #D4E4F0;
  --color-border-dark:    rgba(255, 255, 255, 0.08);

  /* --- Fonts --- */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- Font Sizes --- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --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 */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */

  /* --- Font Weights --- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;

  /* --- Section Spacing --- */
  --section-padding:    8rem;
  --section-padding-sm: 5rem;

  /* --- Layout --- */
  --container-max: 1400px;
  --container-pad: 2rem;

  /* --- Border Radii --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:   0 10px 30px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.09);
  --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-blue: 0 8px 32px rgba(0, 119, 204, 0.40), 0 2px 8px rgba(0, 119, 204, 0.20);

  /* --- Easing --- */
  --ease-standard:    cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-decelerate:  cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-accelerate:  cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1.0);

  /* --- Duration --- */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* --- Header --- */
  --header-height:    80px;
  --header-height-sm: 64px;

  /* --- Z-index --- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-header:  500;
  --z-modal:   800;
  --z-toast:   1000;
}


/* ==========================================================================
   02. CSS Reset & Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  font-size:       16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@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;
  }
}

body {
  font-family:              var(--font-body);
  font-size:                var(--text-base);
  font-weight:              var(--weight-regular);
  color:                    var(--color-text-primary);
  background-color:         var(--color-white);
  line-height:              1.6;
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  overflow-x:               hidden;
}

/* Skip link for accessibility */
.skip-link {
  position:        absolute;
  top:             -100%;
  left:            var(--space-4);
  z-index:         var(--z-toast);
  display:         inline-block;
  padding:         var(--space-3) var(--space-6);
  background:      var(--color-secondary);
  color:           var(--color-white);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  text-decoration: none;
  border-radius:   0 0 var(--radius-md) var(--radius-md);
  transition:      top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: 0;
}

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

a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--duration-normal) var(--ease-standard);
}

ul,
ol {
  list-style: none;
}

button {
  display:    inline-block;
  cursor:     pointer;
  border:     none;
  background: none;
  font:       inherit;
  color:      inherit;
}

input,
textarea,
select {
  font:   inherit;
  color:  inherit;
  border: none;
  outline: none;
  background: none;
}

address {
  font-style: normal;
}

svg {
  display:        block;
  vertical-align: middle;
}


/* ==========================================================================
   03. Typography
   ========================================================================== */

/* --- Section Eyebrow --- */
.section-eyebrow {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  font-family:     var(--font-body);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--color-secondary);
}

.section-eyebrow::before {
  content:          '';
  display:          block;
  width:            40px;
  height:           1.5px;
  background-color: var(--color-secondary);
  flex-shrink:      0;
}

.section-eyebrow--light {
  color: var(--color-accent-light);
}

.section-eyebrow--light::before {
  background-color: var(--color-accent-light);
}

/* --- Section Heading --- */
.section-heading {
  font-family:    var(--font-display);
  font-size:      clamp(2.5rem, 4vw, 4rem);
  font-weight:    var(--weight-black);
  line-height:    1.05;
  letter-spacing: -0.01em;
  color:          var(--color-text-primary);
  text-transform: uppercase;
}

.section-heading--light {
  color: var(--color-white);
}

/* --- Section Subheading --- */
.section-subheading {
  font-size:   var(--text-lg);
  line-height: 1.7;
  color:       var(--color-text-muted);
  max-width:   640px;
  margin-left:  auto;
  margin-right: auto;
}

.section-subheading--light {
  color: rgba(255, 255, 255, 0.65);
}

/* --- Section Header (centered group) --- */
.section-header {
  text-align:    center;
  margin-bottom: var(--space-16);
}

.section-header .section-eyebrow {
  justify-content: center;
}

.section-header .section-eyebrow::before {
  display: none;
}

.section-header .section-eyebrow::after {
  content:          '';
  display:          block;
  width:            40px;
  height:           1.5px;
  background-color: var(--color-secondary);
  flex-shrink:      0;
}

.section-header .section-eyebrow--light::after {
  background-color: var(--color-accent-light);
}

.section-header .section-heading {
  margin-top:    var(--space-4);
  margin-bottom: var(--space-4);
}

.section-header .section-subheading {
  margin-top: var(--space-4);
}


/* ==========================================================================
   04. Layout
   ========================================================================== */

.container {
  width:        100%;
  max-width:    var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--container-pad);
  padding-right: var(--container-pad);
}

.container--full {
  max-width: 1600px;
}

.section {
  position:       relative;
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
  overflow:       hidden;
}

.section--light {
  background-color: var(--color-light);
}

.section--dark {
  background-color: var(--color-dark);
}


/* ==========================================================================
   05. Buttons
   ========================================================================== */

.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         0.875rem 2rem;
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.10em;
  text-transform:  uppercase;
  border-radius:   0;
  border:          2px solid transparent;
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;
  text-decoration: none;
  white-space:     nowrap;
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    color            var(--duration-normal) var(--ease-standard),
    border-color     var(--duration-normal) var(--ease-standard),
    box-shadow       var(--duration-normal) var(--ease-standard),
    transform        var(--duration-normal) var(--ease-standard);
}

/* Shimmer overlay on hover */
.btn::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      60%;
  height:     100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  transform:   skewX(-20deg);
  transition:  left var(--duration-slow) var(--ease-standard);
}

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

.btn:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-secondary);
  border-color:     var(--color-secondary);
  color:            var(--color-white);
}

.btn-primary:hover {
  background-color: #005FA3;
  border-color:     #005FA3;
  transform:        translateY(-1px);
  box-shadow:       var(--shadow-blue);
}

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

/* Secondary Button */
.btn-secondary {
  background-color: transparent;
  border-color:     var(--color-secondary);
  color:            var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
  color:            var(--color-white);
  transform:        translateY(-1px);
  box-shadow:       var(--shadow-blue);
}

.btn-secondary:active {
  transform:  translateY(0);
  box-shadow: none;
}

/* Outline Button (white) */
.btn-outline {
  background-color: transparent;
  border-color:     rgba(255, 255, 255, 0.6);
  color:            var(--color-white);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color:     rgba(255, 255, 255, 0.9);
  transform:        translateY(-1px);
}

.btn-outline:active {
  transform: translateY(0);
}

/* Outline Light (smaller variant) */
.btn-outline-light {
  background-color: transparent;
  border-color:     rgba(255, 255, 255, 0.4);
  color:            rgba(255, 255, 255, 0.75);
  padding:          0.625rem 1.25rem;
  font-size:        var(--text-xs);
  letter-spacing:   0.12em;
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color:     rgba(255, 255, 255, 0.7);
  color:            var(--color-white);
}

/* Large Modifier */
.btn--large {
  padding:     1.125rem 2.5rem;
  font-size:   var(--text-base);
  letter-spacing: 0.12em;
}

/* Full-width Modifier */
.btn--full {
  width:           100%;
  justify-content: center;
}


/* ==========================================================================
   06. Forms
   ========================================================================== */

.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

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

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.form-label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.75);
}

.form-input {
  display:          block;
  width:            100%;
  padding:          0.875rem 1rem;
  background-color: rgba(255, 255, 255, 0.06);
  border:           1.5px solid rgba(255, 255, 255, 0.12);
  border-radius:    0;
  color:            var(--color-white);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  transition:
    border-color     var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.form-input:focus {
  border-color:     var(--color-accent);
  background-color: rgba(0, 180, 230, 0.06);
  outline:          none;
}

/* Custom select arrow */
.form-select {
  display:              block;
  width:                100%;
  padding:              0.875rem 2.5rem 0.875rem 1rem;
  background-color:     rgba(255, 255, 255, 0.06);
  border:               1.5px solid rgba(255, 255, 255, 0.12);
  border-radius:        0;
  color:                var(--color-white);
  font-family:          var(--font-body);
  font-size:            var(--text-sm);
  cursor:               pointer;
  -webkit-appearance:   none;
  appearance:           none;
  background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:    no-repeat;
  background-position:  right 0.875rem center;
  background-size:      16px;
  transition:
    border-color     var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard);
}

.form-select option {
  background-color: var(--color-primary);
  color:            var(--color-white);
}

.form-select:focus {
  border-color:     var(--color-accent);
  background-color: rgba(0, 180, 230, 0.06);
  outline:          none;
}

.form-textarea {
  display:          block;
  width:            100%;
  padding:          0.875rem 1rem;
  background-color: rgba(255, 255, 255, 0.06);
  border:           1.5px solid rgba(255, 255, 255, 0.12);
  border-radius:    0;
  color:            var(--color-white);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  resize:           vertical;
  min-height:       140px;
  line-height:      1.6;
  transition:
    border-color     var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard);
}

.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.form-textarea:focus {
  border-color:     var(--color-accent);
  background-color: rgba(0, 180, 230, 0.06);
  outline:          none;
}


/* ==========================================================================
   07. Header / Navigation
   ========================================================================== */

.site-header {
  position:          fixed;
  top:               0;
  left:              0;
  right:             0;
  width:             100%;
  height:            var(--header-height);
  display:           flex;
  align-items:       center;
  z-index:           var(--z-header);
  background-color:  transparent;
  box-shadow:        none;
  backdrop-filter:   none;
  -webkit-backdrop-filter: none;
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    box-shadow       var(--duration-normal) var(--ease-standard),
    height           var(--duration-normal) var(--ease-standard),
    backdrop-filter  var(--duration-normal) var(--ease-standard);
}

/* Scroll progress bar */
.site-header::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  height:     2px;
  width:      calc(var(--scroll-progress, 0) * 100%);
  background: linear-gradient(
    90deg,
    var(--color-secondary) 0%,
    var(--color-accent)    100%
  );
  pointer-events: none;
  z-index:        2;
}

/* Scrolled state */
.site-header.header--scrolled {
  background-color:        rgba(11, 29, 58, 0.97);
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:              0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.30);
  height:                  var(--header-height-sm);
}

.nav {
  display:     flex;
  align-items: center;
  gap:         var(--space-8);
  width:       100%;
}

/* Logo */
.nav-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo img {
  height:     72px;
  width:      auto;
  object-fit: contain;
  transition:
    height  var(--duration-normal) var(--ease-standard),
    opacity var(--duration-fast)   var(--ease-standard);
}

.nav-logo img:hover {
  opacity: 0.90;
}

.site-header.header--scrolled .nav-logo img {
  height: 56px;
}

/* Navigation Links */
.nav-links {
  display:         flex;
  align-items:     center;
  gap:             var(--space-1);
  margin-left:     auto;
}

.nav-link {
  position:        relative;
  display:         inline-block;
  padding:         var(--space-2) var(--space-4);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition:      color var(--duration-normal) var(--ease-standard);
}

.nav-link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             var(--space-4);
  right:            var(--space-4);
  height:           1.5px;
  background-color: var(--color-accent);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform var(--duration-normal) var(--ease-standard);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-white);
}

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

/* Navigation Actions */
.nav-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

/* Hamburger Toggle */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           40px;
  height:          40px;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         var(--space-2);
  flex-shrink:     0;
}

.hamburger-line {
  display:          block;
  width:            100%;
  height:           1.5px;
  background-color: var(--color-white);
  border-radius:    var(--radius-full);
  transform-origin: center;
  transition:
    transform  var(--duration-normal) var(--ease-standard),
    opacity    var(--duration-normal) var(--ease-standard),
    top        var(--duration-normal) var(--ease-standard);
}

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

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

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ==========================================================================
   08. Mobile Menu
   ========================================================================== */

.mobile-menu {
  position:         fixed;
  inset:            0;
  width:            100%;
  height:           100%;
  background-color: var(--color-dark);
  display:          flex;
  flex-direction:   column;
  opacity:          0;
  visibility:       hidden;
  z-index:          calc(var(--z-header) - 1);
  transition:
    opacity    var(--duration-slow) var(--ease-standard),
    visibility var(--duration-slow) var(--ease-standard);
}

.mobile-menu.is-open {
  opacity:    1;
  visibility: visible;
}

.mobile-menu-inner {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  height:         100%;
  padding:        calc(var(--header-height) + var(--space-8)) var(--container-pad) var(--space-12);
  overflow-y:     auto;
}

.mobile-nav-links {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-bottom:  var(--space-10);
}

.mobile-nav-link {
  display:         block;
  font-family:     var(--font-display);
  font-size:       clamp(2rem, 8vw, 3.5rem);
  font-weight:     var(--weight-black);
  color:           rgba(255, 255, 255, 0.70);
  text-transform:  uppercase;
  text-decoration: none;
  border-bottom:   1px solid rgba(255, 255, 255, 0.06);
  padding:         var(--space-3) 0;
  line-height:     1.1;
  transition:
    color        var(--duration-normal) var(--ease-standard),
    padding-left var(--duration-normal) var(--ease-standard);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color:        var(--color-white);
  padding-left: var(--space-4);
}

.mobile-lang-selector {
  display: flex;
  gap:     var(--space-3);
}

.mobile-lang-btn {
  padding:          var(--space-2) var(--space-4);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  color:            rgba(255, 255, 255, 0.55);
  border:           1.5px solid rgba(255, 255, 255, 0.15);
  border-radius:    0;
  background:       none;
  cursor:           pointer;
  transition:
    color        var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    background   var(--duration-normal) var(--ease-standard);
}

.mobile-lang-btn:hover,
.mobile-lang-btn.active {
  color:            var(--color-white);
  border-color:     var(--color-accent);
  background-color: rgba(0, 180, 230, 0.10);
}


/* ==========================================================================
   09. Language Selector
   ========================================================================== */

.lang-selector {
  position: relative;
}

.lang-current {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  color:           var(--color-white);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-bold);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  padding:         0.5rem 1rem;
  border:          1.5px solid rgba(255, 255, 255, 0.35);
  border-radius:   var(--radius-full);
  cursor:          pointer;
  background:      rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  transition:
    border-color     var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard);
}

.lang-current:hover {
  border-color:     rgba(255, 255, 255, 0.70);
  background-color: rgba(255, 255, 255, 0.15);
}

/* Inline flags in button - show both active lang and dropdown hint */
.lang-inline-options {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lang-sep {
  color: rgba(255,255,255,0.3);
  font-weight: 300;
  font-size: 0.7rem;
}

.lang-chevron {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.lang-selector.is-open .lang-chevron {
  transform: rotate(180deg);
}

.lang-dropdown {
  position:         absolute;
  top:              calc(100% + 8px);
  right:            0;
  background-color: var(--color-dark-alt);
  border:           1.5px solid rgba(255, 255, 255, 0.10);
  border-radius:    var(--radius-sm);
  min-width:        100px;
  opacity:          0;
  visibility:       hidden;
  transform:        translateY(-8px);
  transition:
    opacity    var(--duration-normal) var(--ease-standard),
    visibility var(--duration-normal) var(--ease-standard),
    transform  var(--duration-normal) var(--ease-standard);
  overflow:         hidden;
}

.lang-selector.is-open .lang-dropdown {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.lang-option {
  display:         flex;
  align-items:     center;
  width:           100%;
  padding:         var(--space-3) var(--space-4);
  color:           rgba(255, 255, 255, 0.70);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  cursor:          pointer;
  border:          none;
  background:      none;
  text-align:      left;
  text-decoration: none;
  transition:
    color            var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.lang-option:hover,
.lang-option.active {
  color:            var(--color-white);
  text-decoration:  none;
  background-color: rgba(0, 119, 204, 0.20);
}

.lang-flag-img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lang-option .lang-flag-img {
  margin-right: 0.5rem;
}

.mobile-lang-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  text-decoration:  none;
}

.mobile-lang-btn:hover,
.mobile-lang-btn.active {
  color:            var(--color-white);
  text-decoration:  none;
}

.footer-lang-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  text-decoration:  none;
}

.footer-lang-btn:hover,
.footer-lang-btn.active {
  color:            var(--color-white);
  text-decoration:  none;
}

.mobile-lang-btn .lang-flag-img {
  margin-right: 0.35rem;
}

.footer-lang-btn .lang-flag-img {
  margin-right: 0.35rem;
}


/* ==========================================================================
   10. Hero Section
   ========================================================================== */

.section-hero {
  position:       relative;
  min-height:     100svh;
  display:        flex;
  align-items:    center;
  overflow:       hidden;
  padding-top:    var(--header-height);
  background-color: var(--color-dark);
}

/* Background Layer */
.hero-bg {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
}

.hero-bg-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center right;
  opacity:         0.45;
  filter:          contrast(1.08) brightness(0.92);
  z-index:         0;
}

.hero-bg-overlay {
  position: absolute;
  inset:    0;
  background:
    linear-gradient(90deg, rgba(6, 14, 32, 0.96) 0%, rgba(6, 14, 32, 0.75) 45%, rgba(6, 14, 32, 0.35) 100%),
    linear-gradient(180deg, rgba(6, 14, 32, 0.85) 0%, rgba(6, 14, 32, 0.20) 45%, rgba(6, 14, 32, 0.95) 100%);
  z-index: 1;
}

.hero-bg::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  2;
  background:
    radial-gradient(ellipse 80% 60% at 60% 20%, rgba(0, 119, 204, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(0, 180, 230, 0.15) 0%, transparent 55%);
}

/* Grid pattern */
.hero-grid {
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image:      radial-gradient(ellipse 70% 80% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 0%, transparent 80%);
}

/* Orbs */
.hero-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(60px);
  animation:     orbFloat 12s ease-in-out infinite;
  pointer-events: none;
}

.hero-orb:first-child {
  width:      600px;
  height:     600px;
  background: radial-gradient(circle, rgba(0, 119, 204, 0.25) 0%, transparent 70%);
  top:        -100px;
  right:      -100px;
}

.hero-orb--2 {
  width:               400px;
  height:              400px;
  background:          radial-gradient(circle, rgba(0, 180, 230, 0.20) 0%, transparent 70%);
  bottom:              -50px;
  left:                20%;
  animation-delay:     -6s;
  animation-duration:  16s;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -30px) scale(1.05);
  }
  66% {
    transform: translate(-15px, 20px) scale(0.97);
  }
}

/* Scanlines */
.hero-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
}

/* Hero Content */
.hero-content {
  position:   relative;
  z-index:    1;
  max-width:  900px;
  padding-top:    5rem;
  padding-bottom: 5rem;
}

/* Hero Eyebrow */
.hero-eyebrow {
  display:        flex;
  align-items:    center;
  gap:            var(--space-4);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-6);
  opacity:        0;
  animation:      heroReveal var(--duration-slow) var(--ease-decelerate) 0.3s forwards;
}

.eyebrow-line {
  display:          block;
  width:            48px;
  height:           1.5px;
  background-color: var(--color-accent);
  flex-shrink:      0;
}

/* Hero Headline */
.hero-headline {
  font-family:    var(--font-display);
  font-size:      clamp(3.5rem, 9vw, 8rem);
  font-weight:    var(--weight-black);
  line-height:    1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color:          var(--color-white);
  margin-bottom:  var(--space-6);
}

.headline-word {
  display:   block;
  opacity:   0;
  transform: translateY(40px);
  animation: heroReveal var(--duration-slow) var(--ease-decelerate) forwards;
}

.headline-word:nth-child(1) { animation-delay: 0.5s; }
.headline-word:nth-child(2) { animation-delay: 0.65s; }
.headline-word:nth-child(3) { animation-delay: 0.8s; }

.headline-word--accent {
  color: var(--color-accent);
}

@keyframes heroReveal {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Hero Subline */
.hero-subline {
  font-size:     clamp(1.125rem, 2vw, 1.25rem);
  color:         rgba(255, 255, 255, 0.65);
  line-height:   1.7;
  max-width:     560px;
  margin-bottom: var(--space-10);
  opacity:       0;
  animation:     heroReveal var(--duration-slow) var(--ease-decelerate) 1s forwards;
}

/* Hero CTAs */
.hero-ctas {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--space-4);
  opacity:        0;
  animation:      heroReveal var(--duration-slow) var(--ease-decelerate) 1.2s forwards;
}

/* Scroll Indicator */
.hero-scroll-indicator {
  position:       absolute;
  bottom:         2rem;
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  z-index:        1;
  opacity:        0;
  animation:      heroReveal var(--duration-slow) var(--ease-decelerate) 1.8s forwards;
}

.scroll-label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.40);
}

.scroll-line {
  position:   relative;
  width:      1px;
  height:     48px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.50) 100%
  );
  overflow:   hidden;
}

.scroll-line::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     50%;
  background: var(--color-accent);
  animation:  scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}


/* ==========================================================================
   11. About Section
   ========================================================================== */

.about-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   5rem;
  align-items:           center;
  margin-bottom:         5rem;
}

.about-content {
  max-width: 540px;
}

.about-content .section-eyebrow {
  margin-bottom: var(--space-5);
}

.about-content .section-heading {
  margin-bottom: var(--space-6);
}

.about-body {
  margin-bottom: var(--space-8);
}

.about-body p {
  font-size:     var(--text-base);
  color:         var(--color-text-secondary);
  line-height:   1.75;
  margin-bottom: var(--space-4);
}

.about-body p:last-child {
  margin-bottom: 0;
}

.about-image-wrapper {
  position: relative;
}

.about-image-placeholder {
  position:     relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-dark-alt);
  overflow:     hidden;
}

.image-placeholder-fallback {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
}

.placeholder-orb {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  background:    radial-gradient(
    circle,
    rgba(0, 180, 230, 0.50) 0%,
    rgba(0, 119, 204, 0.20) 60%,
    transparent 100%
  );
  animation: orbFloat 8s ease-in-out infinite;
}

.about-badge {
  position:         absolute;
  bottom:           -1.5rem;
  right:            -1.5rem;
  background-color: var(--color-secondary);
  color:            var(--color-white);
  padding:          var(--space-5) var(--space-6);
  box-shadow:       var(--shadow-lg);
}

.badge-year {
  display:        block;
  font-size:      var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.70);
  margin-bottom:  var(--space-1);
}

.badge-number {
  display:     block;
  font-family: var(--font-display);
  font-size:   var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1;
}


/* ==========================================================================
   12. Stats
   ========================================================================== */

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  border:                1px solid var(--color-border);
  background-color:      var(--color-border);
}

.stat-item {
  position:         relative;
  background-color: var(--color-white);
  padding:          2.5rem 2rem;
  text-align:       center;
  overflow:         hidden;
  transition:       background-color var(--duration-normal) var(--ease-standard);
}

.stat-item::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(
    90deg,
    var(--color-secondary) 0%,
    var(--color-accent) 100%
  );
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform var(--duration-normal) var(--ease-standard);
}

.stat-item:hover::after {
  transform: scaleX(1);
}

.stat-number {
  display:        block;
  font-family:    var(--font-display);
  font-size:      clamp(3rem, 5vw, 5rem);
  font-weight:    var(--weight-black);
  line-height:    1.0;
  color:          var(--color-primary);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-2);
}

.stat-suffix {
  font-size:   0.7em;
  font-weight: var(--weight-black);
  color:       var(--color-secondary);
}

.stat-label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-top:     var(--space-2);
}


/* ==========================================================================
   13. Manufacturing / Production
   ========================================================================== */

.production-timeline {
  display:        flex;
  flex-direction: column;
  position:       relative;
}

.production-step {
  display:               grid;
  grid-template-columns: 80px 1fr 1fr;
  gap:                   2rem;
  align-items:           center;
  padding:               3rem 0;
  border-top:            1px solid rgba(255, 255, 255, 0.08);
}

.production-step:first-child {
  border-top: none;
}

.production-step--reverse .step-content {
  order: 2;
}

.production-step--reverse .step-visual {
  order: 1;
}

.step-indicator {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
}

.step-number {
  font-family:    var(--font-display);
  font-size:      3rem;
  font-weight:    var(--weight-black);
  line-height:    1;
  color:          var(--color-secondary);
}

.step-line {
  width:      1px;
  flex:       1;
  background: linear-gradient(
    to bottom,
    var(--color-secondary) 0%,
    transparent 100%
  );
  min-height: 40px;
}

.step-icon {
  width:  48px;
  height: 48px;
  color:  var(--color-accent);
}

.step-content {
  padding: var(--space-4) 0;
}

.step-title {
  font-family:   var(--font-display);
  font-size:     var(--text-2xl);
  font-weight:   var(--weight-bold);
  color:         var(--color-white);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height:   1.1;
  margin-bottom: var(--space-4);
}

.step-description {
  font-size:  var(--text-base);
  color:      rgba(255, 255, 255, 0.60);
  line-height: 1.75;
  max-width:   420px;
}

.step-visual {
  position:     relative;
  aspect-ratio: 16 / 10;
  overflow:     hidden;
  border:       1px solid rgba(255, 255, 255, 0.08);
}

.step-img-placeholder {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    var(--step-color, var(--color-primary)) 0%,
    rgba(0, 0, 0, 0.30) 100%
  );
}

.step-img-placeholder::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.step-img-placeholder::after {
  content:        attr(data-label);
  position:       absolute;
  bottom:         var(--space-4);
  left:           var(--space-4);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.50);
}


/* ==========================================================================
   13B. Category Groups Grid
   ========================================================================== */

.section-categories {
  position: relative;
  background-color: var(--color-light);
  border-bottom: 1px solid var(--color-border);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
  width: 100%;
}

.category-card {
  position: relative;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(11, 29, 58, 0.04);
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.category-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 180, 230, 0.6);
  box-shadow: 0 16px 36px rgba(11, 29, 58, 0.10);
}

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

.category-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 180, 230, 0.12), rgba(0, 119, 204, 0.18));
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  margin-bottom: var(--space-4);
  transition: all var(--duration-normal) var(--ease-standard);
}

.category-card:hover .category-icon-wrapper {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  color: #ffffff;
  transform: scale(1.06);
}

.category-card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: 1.25;
}

.category-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-5);
  flex-grow: 1;
}

.category-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: auto;
}

.category-count-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.category-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-standard);
}

.category-action-link svg {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.category-card:hover .category-action-link {
  color: var(--color-accent);
}

.category-card:hover .category-action-link svg {
  transform: translateX(4px);
}

/* ==========================================================================
   14. Products / Catalog Grid (Dinamik Ürünler)
   ========================================================================== */

.catalog-filters-wrapper {
  margin: var(--space-6) auto var(--space-8) auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.375rem;
  background: rgba(212, 228, 240, 0.45);
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  max-width: 100%;
}

.catalog-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.catalog-filter-btn:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.7);
}

.catalog-filter-btn.active {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(11, 29, 58, 0.18);
}

.catalog-filter-btn .filter-count {
  font-size: var(--text-xs);
  opacity: 0.75;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
  margin: var(--space-4) auto 0 auto;
  width: 100%;
}

.catalog-card {
  position: relative;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(11, 29, 58, 0.04);
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.catalog-card.is-hidden {
  display: none !important;
}

.catalog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11, 29, 58, 0.12);
  border-color: rgba(0, 180, 230, 0.7);
}

.catalog-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(216, 230, 240, 0.60);
}

.catalog-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(11, 29, 58, 0.88);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.catalog-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--ease-standard);
}

.catalog-card:hover .catalog-card-img {
  transform: scale(1.08);
}

.catalog-card-body {
  padding: var(--space-4);
  background-color: #ffffff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.catalog-card-code {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.catalog-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.catalog-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 0;
}

.catalog-card-action {
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAFCFF;
  border-top: 1px solid rgba(216, 230, 240, 0.50);
}

.btn-catalog-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.btn-catalog-contact:hover {
  background-color: var(--color-secondary);
  box-shadow: 0 4px 14px rgba(0, 119, 204, 0.40);
  color: var(--color-white);
}

.btn-catalog-contact svg {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.btn-catalog-contact:hover svg {
  transform: translateX(4px);
}

.products-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  border:                1px solid var(--color-border);
  background-color:      var(--color-border);
  margin-bottom:         var(--space-8);
}

.product-card {
  background-color: var(--color-white);
  overflow:         hidden;
}

.product-card-inner {
  position:        relative;
  padding:         2rem;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  min-height:      320px;
  transition:      background-color var(--duration-normal) var(--ease-standard);
}

.product-card-bg {
  position:   absolute;
  inset:      0;
  background: var(--card-color, var(--color-primary));
  opacity:    0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.product-card:hover .product-card-bg {
  opacity: 1;
}

.product-card-icon {
  position:      relative;
  z-index:       1;
  width:         48px;
  height:        48px;
  color:         var(--color-secondary);
  margin-bottom: var(--space-5);
  transition:    color var(--duration-normal) var(--ease-standard);
}

.product-card:hover .product-card-icon {
  color: var(--color-white);
}

.product-card-title {
  position:      relative;
  z-index:       1;
  font-family:   var(--font-display);
  font-size:     var(--text-xl);
  font-weight:   var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color:         var(--color-primary);
  margin-bottom: var(--space-3);
  transition:    color var(--duration-normal) var(--ease-standard);
}

.product-card:hover .product-card-title {
  color: var(--color-white);
}

.product-card-desc {
  position:      relative;
  z-index:       1;
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  line-height:   1.65;
  margin-bottom: var(--space-5);
  flex:          1;
  transition:    color var(--duration-normal) var(--ease-standard);
}

.product-card:hover .product-card-desc {
  color: rgba(255, 255, 255, 0.70);
}

.product-card-tags {
  position:      relative;
  z-index:       1;
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
  margin-bottom: var(--space-5);
}

.product-tag {
  display:        inline-block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border:         1px solid var(--color-border);
  padding:        var(--space-1) var(--space-3);
  color:          var(--color-text-muted);
  transition:
    color        var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

.product-card:hover .product-tag {
  color:        rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.20);
}

.product-card-link {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--color-secondary);
  text-decoration: none;
  margin-top:      auto;
  transition:      color var(--duration-normal) var(--ease-standard);
}

.product-card-link svg {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
  transition:  transform var(--duration-normal) var(--ease-standard);
}

.product-card:hover .product-card-link {
  color: var(--color-white);
}

.product-card:hover .product-card-link svg {
  transform: translateX(4px);
}

.products-cta {
  text-align:       center;
  padding:          var(--space-10);
  border:           1px solid var(--color-border);
  background-color: var(--color-white);
}

.products-cta p {
  font-size:     var(--text-base);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-6);
}


/* ==========================================================================
   15. Quality & Innovation
   ========================================================================== */

.quality-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   5rem;
  align-items:           center;
}

.quality-content .section-eyebrow {
  margin-bottom: var(--space-5);
}

.quality-content .section-heading {
  margin-bottom: var(--space-6);
}

.quality-body {
  font-size:     var(--text-base);
  color:         rgba(255, 255, 255, 0.65);
  line-height:   1.75;
  margin-bottom: var(--space-8);
}

.quality-certifications {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
}

.cert-item {
  display:          flex;
  align-items:      center;
  gap:              var(--space-4);
  padding:          var(--space-4) var(--space-5);
  border:           1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.04);
}

.cert-icon {
  width:      28px;
  height:     28px;
  color:      var(--color-accent);
  flex-shrink: 0;
}

.cert-label {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  color:          rgba(255, 255, 255, 0.80);
  letter-spacing: 0.04em;
}

.quality-metrics {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  z-index:        1;
}

.quality-metric {
  display:          flex;
  align-items:      center;
  gap:              var(--space-5);
  padding:          var(--space-5) var(--space-6);
  border:           1px solid rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.03);
  transition:
    border-color     var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard);
}

.quality-metric:hover {
  border-color:     rgba(0, 180, 230, 0.30);
  background-color: rgba(0, 119, 204, 0.08);
}

.metric-circle {
  width:            80px;
  height:           80px;
  border-radius:    50%;
  border:           1.5px solid rgba(0, 180, 230, 0.30);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: rgba(0, 119, 204, 0.10);
  flex-shrink:      0;
}

.metric-number {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    var(--weight-black);
  color:          var(--color-accent);
  line-height:    1;
}

.metric-info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.metric-info strong {
  font-size:   var(--text-base);
  font-weight: var(--weight-semibold);
  color:       var(--color-white);
}

.metric-info span {
  font-size:  var(--text-sm);
  color:      rgba(255, 255, 255, 0.50);
  line-height: 1.5;
}

.quality-orb {
  position:      absolute;
  top:           50%;
  right:         -100px;
  transform:     translateY(-50%);
  width:         300px;
  height:        300px;
  border-radius: 50%;
  background:    radial-gradient(
    circle,
    rgba(0, 180, 230, 0.15) 0%,
    transparent 70%
  );
  filter:        blur(40px);
  animation:     orbFloat 10s ease-in-out infinite;
  pointer-events: none;
  z-index:       0;
}


/* ==========================================================================
   16. Sustainability
   ========================================================================== */

.section--sustainability {
  background: linear-gradient(
    160deg,
    #F0F8FF 0%,
    #E8F4F8 50%,
    #EEF7F0 100%
  );
}

.sustainability-pillars {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-6);
  margin-bottom:         var(--space-16);
}

.pillar {
  padding:              var(--space-8) var(--space-6);
  border:               1px solid rgba(0, 119, 204, 0.10);
  background-color:     rgba(255, 255, 255, 0.60);
  backdrop-filter:      blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform  var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.pillar:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pillar-icon {
  width:         48px;
  height:        48px;
  color:         var(--color-secondary);
  margin-bottom: var(--space-5);
}

.pillar-title {
  font-family:   var(--font-display);
  font-size:     var(--text-lg);
  font-weight:   var(--weight-bold);
  text-transform: uppercase;
  color:         var(--color-primary);
  margin-bottom: var(--space-3);
}

.pillar-desc {
  font-size:  var(--text-sm);
  color:      var(--color-text-secondary);
  line-height: 1.65;
}

/* Sustainability Statement */
.sustainability-statement {
  position:       relative;
  text-align:     center;
  padding:        var(--space-12) var(--space-8);
  border-top:     1.5px solid rgba(0, 119, 204, 0.15);
  border-bottom:  1.5px solid rgba(0, 119, 204, 0.15);
  overflow:       hidden;
}

.sustainability-statement::before {
  content:         '\201C';
  position:        absolute;
  top:             -0.3em;
  left:            50%;
  transform:       translateX(-50%);
  font-family:     var(--font-display);
  font-size:       clamp(10rem, 20vw, 18rem);
  font-weight:     var(--weight-black);
  line-height:     1;
  color:           rgba(0, 119, 204, 0.06);
  pointer-events:  none;
  user-select:     none;
  z-index:         0;
}

.sustainability-statement blockquote {
  position:       relative;
  z-index:        1;
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, 2.5rem);
  font-weight:    var(--weight-bold);
  color:          var(--color-primary);
  line-height:    1.3;
  max-width:      860px;
  margin:         0 auto;
  text-transform: uppercase;
}

.sustainability-statement cite {
  display:        block;
  margin-top:     var(--space-5);
  font-style:     normal;
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
}


/* ==========================================================================
   17. Group Companies
   ========================================================================== */

.section--group {
  background-color: var(--color-dark);
  padding-bottom:   0;
}

.group-header {
  text-align:    center;
  padding-bottom: var(--space-12);
  padding-left:  var(--container-pad);
  padding-right: var(--container-pad);
}

.group-panels {
  display:    flex;
  min-height: 500px;
  overflow:   hidden;
}

.group-panel {
  flex:          1;
  position:      relative;
  cursor:        pointer;
  overflow:      hidden;
  border-right:  1px solid rgba(255, 255, 255, 0.06);
  transition:    flex var(--duration-slow) cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group-panel:last-child {
  border-right: none;
}

.group-panel:hover {
  flex: 2.5;
}

.panel-bg {
  position:   absolute;
  inset:      0;
  background: var(--panel-color, var(--color-primary));
  transition: background var(--duration-slow) var(--ease-standard);
}

.group-panel:hover .panel-bg {
  background: linear-gradient(
    160deg,
    var(--panel-color, var(--color-primary)) 0%,
    var(--panel-color-light, var(--color-secondary)) 100%
  );
}

.panel-bg::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity:    0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.group-panel:hover .panel-bg::before {
  opacity: 1;
}

.panel-content {
  position:        relative;
  z-index:         1;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         2.5rem 2rem;
}

.panel-logo-area {
  margin-bottom: var(--space-4);
  opacity:       0;
  transform:     translateY(20px);
  transition:
    opacity   var(--duration-normal) var(--ease-decelerate),
    transform var(--duration-normal) var(--ease-decelerate);
}

.group-panel:hover .panel-logo-area {
  opacity:   1;
  transform: translateY(0);
}

.company-logo-placeholder {
  width:            64px;
  height:           64px;
  border:           1.5px solid rgba(255, 255, 255, 0.25);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: rgba(255, 255, 255, 0.08);
}

.company-initials {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    var(--weight-black);
  color:          rgba(255, 255, 255, 0.70);
  letter-spacing: 0.08em;
  line-height:    1;
}

.panel-info {
  transform:  translateY(20px);
  transition:
    transform var(--duration-normal) var(--ease-decelerate);
}

.group-panel:hover .panel-info {
  transform: translateY(0);
}

.panel-tag {
  display:        block;
  font-size:      var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.50);
  margin-bottom:  var(--space-2);
}

.panel-company-name {
  font-family:     var(--font-display);
  font-size:       clamp(var(--text-xl), 2.5vw, 2.5rem);
  font-weight:     var(--weight-black);
  color:           var(--color-white);
  text-transform:  uppercase;
  letter-spacing:  -0.01em;
  line-height:     1.05;
  margin-bottom:   var(--space-3);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.panel-company-desc {
  font-size:   var(--text-sm);
  color:       rgba(255, 255, 255, 0.60);
  line-height: 1.65;
  max-width:   320px;
  opacity:     0;
  transform:   translateY(12px);
  transition:
    opacity   var(--duration-normal) var(--ease-decelerate) 0.1s,
    transform var(--duration-normal) var(--ease-decelerate) 0.1s;
}

.group-panel:hover .panel-company-desc {
  opacity:   1;
  transform: translateY(0);
}

.panel-btn {
  margin-top: var(--space-5);
  opacity:    0;
  transform:  translateY(12px);
  transition:
    opacity   var(--duration-normal) var(--ease-decelerate) 0.15s,
    transform var(--duration-normal) var(--ease-decelerate) 0.15s;
}

.group-panel:hover .panel-btn {
  opacity:   1;
  transform: translateY(0);
}

.panel-number {
  position:       absolute;
  top:            var(--space-6);
  right:          var(--space-6);
  font-family:    var(--font-display);
  font-size:      clamp(4rem, 8vw, 8rem);
  font-weight:    var(--weight-black);
  color:          rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select:    none;
  line-height:    1;
  transition:     color var(--duration-slow) var(--ease-standard);
}

.group-panel:hover .panel-number {
  color: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   18. Location / Map
   ========================================================================== */

.location-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           stretch;
}

.location-info {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding-right:  2rem;
}

.location-info .section-eyebrow {
  margin-bottom: var(--space-5);
}

.location-info .section-heading {
  margin-bottom: var(--space-8);
}

.location-details {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
  margin-bottom:  var(--space-8);
}

.location-item {
  display:     flex;
  gap:         var(--space-4);
  align-items: flex-start;
}

.location-icon {
  width:       24px;
  height:      24px;
  color:       var(--color-secondary);
  flex-shrink: 0;
  margin-top:  2px;
}

.location-item-body {}

.location-item strong {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-1);
}

.location-item address {
  font-size:   var(--text-base);
  color:       var(--color-text-primary);
  line-height: 1.65;
}

.location-link {
  display:         inline;
  font-size:       var(--text-base);
  color:           var(--color-text-primary);
  text-decoration: none;
  transition:      color var(--duration-normal) var(--ease-standard);
}

.location-link:hover {
  color: var(--color-secondary);
}

/* UK Badge */
.location-uk-badge {
  display:          flex;
  align-items:      center;
  gap:              var(--space-4);
  padding:          var(--space-4) var(--space-5);
  border:           1px solid var(--color-border);
  background-color: rgba(0, 119, 204, 0.03);
}

.uk-flag {
  position:     relative;
  width:         32px;
  height:        20px;
  overflow:      hidden;
  flex-shrink:   0;
  border:        1px solid rgba(0, 0, 0, 0.10);
}

.uk-flag-inner {
  position:   absolute;
  inset:      0;
  background:
    linear-gradient(
      0deg,
      transparent 42%,
      #C8102E 42%,
      #C8102E 58%,
      transparent 58%
    ),
    linear-gradient(
      90deg,
      transparent 42%,
      #C8102E 42%,
      #C8102E 58%,
      transparent 58%
    ),
    linear-gradient(
      -45deg,
      transparent 40%,
      #C8102E 40%,
      #C8102E 60%,
      transparent 60%
    ),
    linear-gradient(
      45deg,
      transparent 40%,
      #C8102E 40%,
      #C8102E 60%,
      transparent 60%
    ),
    #012169;
}

.location-uk-badge span {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-secondary);
  letter-spacing: 0.06em;
}

/* Map */
.map-container {
  position:         relative;
  width:            100%;
  height:           100%;
  min-height:       480px;
  overflow:         hidden;
  background-color: var(--color-primary);
}

.map-overlay-label {
  position:         absolute;
  top:              var(--space-4);
  left:             var(--space-4);
  z-index:          10;
  display:          flex;
  align-items:      center;
  gap:              var(--space-2);
  background-color: var(--color-white);
  color:            var(--color-primary);
  padding:          var(--space-2) var(--space-4);
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  box-shadow:       var(--shadow-md);
}

.map-overlay-label svg {
  width:      16px;
  height:     16px;
  color:      var(--color-secondary);
  flex-shrink: 0;
}

.map-iframe {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  border:     none;
  filter:     grayscale(30%);
  transition: filter var(--duration-slow) var(--ease-standard);
}

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


/* ==========================================================================
   19. Contact / CTA Section
   ========================================================================== */

.section--contact {
  background: linear-gradient(
    135deg,
    var(--color-dark) 0%,
    var(--color-primary) 100%
  );
  position: relative;
  overflow: hidden;
}

.section--contact::before {
  content:    '';
  position:   absolute;
  top:        -200px;
  right:      -200px;
  width:      600px;
  height:     600px;
  background: radial-gradient(
    circle,
    rgba(0, 119, 204, 0.20) 0%,
    transparent 65%
  );
  border-radius:  50%;
  pointer-events: none;
  z-index:        0;
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           start;
  position:              relative;
  z-index:               1;
}

.contact-heading {
  font-family:    var(--font-display);
  font-size:      clamp(3rem, 6vw, 6.5rem);
  font-weight:    var(--weight-black);
  line-height:    0.95;
  text-transform: uppercase;
  color:          var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-6);
}

.contact-body {
  font-size:     var(--text-base);
  color:         rgba(255, 255, 255, 0.60);
  line-height:   1.75;
  margin-bottom: var(--space-8);
  max-width:     440px;
}

.contact-details {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  margin-bottom:  var(--space-8);
}

.contact-detail-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
}

.contact-detail-icon {
  width:      20px;
  height:     20px;
  color:      var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-link {
  font-size:       var(--text-md);
  font-weight:     var(--weight-medium);
  color:           var(--color-accent);
  text-decoration: none;
  transition:      color var(--duration-normal) var(--ease-standard);
}

.contact-link:hover {
  color: var(--color-white);
}

.contact-social {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-3);
}

.social-link {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  border:           1.5px solid rgba(255, 255, 255, 0.20);
  color:            rgba(255, 255, 255, 0.60);
  text-decoration:  none;
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    border-color     var(--duration-normal) var(--ease-standard),
    color            var(--duration-normal) var(--ease-standard),
    transform        var(--duration-normal) var(--ease-standard);
}

.social-link svg {
  width:  18px;
  height: 18px;
}

.social-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color:     rgba(255, 255, 255, 0.50);
  color:            var(--color-white);
  transform:        translateY(-2px);
}

.social-link--sm {
  width:  36px;
  height: 36px;
}

.social-link--sm svg {
  width:  15px;
  height: 15px;
}


/* ==========================================================================
   20. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-dark);
  color:            rgba(255, 255, 255, 0.70);
  position:         relative;
  overflow:         hidden;
}

.footer-top {
  padding:        5rem 0;
  border-bottom:  1px solid rgba(255, 255, 255, 0.07);
  position:       relative;
  z-index:        1;
}

.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap:                   3rem;
}

.footer-brand {
  max-width: 340px;
}

.footer-logo {
  display:       block;
  height:        56px;
  width:         auto;
  object-fit:    contain;
  opacity:       0.90;
  margin-bottom: var(--space-5);
  transition:    opacity var(--duration-normal) var(--ease-standard);
}

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

.footer-tagline {
  font-size:     var(--text-sm);
  color:         rgba(255, 255, 255, 0.50);
  line-height:   1.75;
  margin-bottom: var(--space-6);
}

.footer-social {
  display: flex;
  gap:     var(--space-3);
}

.footer-nav-title {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--color-white);
  margin-bottom:  var(--space-5);
}

.footer-nav-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.footer-nav-list a {
  display:         inline-block;
  font-size:       var(--text-sm);
  color:           rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition:
    color        var(--duration-normal) var(--ease-standard),
    padding-left var(--duration-normal) var(--ease-standard);
}

.footer-nav-list a:hover {
  color:        var(--color-white);
  padding-left: var(--space-2);
}

.footer-address {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.footer-contact-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--text-sm);
  color:       rgba(255, 255, 255, 0.50);
}

.footer-contact-item svg {
  width:      16px;
  height:     16px;
  flex-shrink: 0;
  color:       var(--color-accent);
  margin-top:  2px;
}

.footer-contact-item a {
  color:           rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition:      color var(--duration-normal) var(--ease-standard);
}

.footer-contact-item a:hover {
  color: var(--color-white);
}

.footer-lang {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  font-size:   var(--text-xs);
  color:       rgba(255, 255, 255, 0.40);
  margin-top:  var(--space-6);
  flex-wrap:   wrap;
}

.footer-lang-buttons {
  display: flex;
  gap:     var(--space-2);
}

.footer-lang-btn {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.40);
  border:         1px solid transparent;
  padding:        var(--space-1) var(--space-3);
  background:     none;
  cursor:         pointer;
  transition:
    color        var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

.footer-lang-btn:hover,
.footer-lang-btn.active {
  color:        var(--color-white);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Footer Bottom */
.footer-bottom {
  padding: 1.25rem 0;
}

.footer-bottom-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-4);
}

.footer-legal {
  display:     flex;
  align-items: center;
  gap:         var(--space-5);
  flex-wrap:   wrap;
}

.footer-legal a {
  font-size:       var(--text-xs);
  color:           rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition:      color var(--duration-normal) var(--ease-standard);
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.70);
}

.footer-legal-separator {
  display:          inline-block;
  width:            1px;
  height:           12px;
  background-color: rgba(255, 255, 255, 0.15);
}

.footer-copyright {
  font-size: var(--text-xs);
  color:     rgba(255, 255, 255, 0.30);
}

/* Background decorative text */
.footer-bg-text {
  position:       absolute;
  bottom:         -0.1em;
  right:          -0.05em;
  font-family:    var(--font-display);
  font-size:      clamp(4rem, 12vw, 11rem);
  font-weight:    var(--weight-black);
  color:          rgba(255, 255, 255, 0.02);
  pointer-events: none;
  user-select:    none;
  text-transform: uppercase;
  line-height:    1;
  white-space:    nowrap;
  z-index:        0;
}


/* ==========================================================================
   21. Utilities
   ========================================================================== */

/* Reveal on scroll */
.reveal-element {
  opacity:    0;
  transform:  translateY(30px);
  transition:
    opacity   var(--duration-slow) var(--ease-decelerate),
    transform var(--duration-slow) var(--ease-decelerate);
}

.reveal-element.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Staggered animation for stats-grid children */
.stats-grid .stat-item:nth-child(1) { transition-delay: 0ms; }
.stats-grid .stat-item:nth-child(2) { transition-delay: 80ms; }
.stats-grid .stat-item:nth-child(3) { transition-delay: 160ms; }
.stats-grid .stat-item:nth-child(4) { transition-delay: 240ms; }

/* Staggered animation for products-grid children */
.products-grid .product-card:nth-child(1) { transition-delay: 0ms; }
.products-grid .product-card:nth-child(2) { transition-delay: 90ms; }
.products-grid .product-card:nth-child(3) { transition-delay: 180ms; }
.products-grid .product-card:nth-child(4) { transition-delay: 270ms; }
.products-grid .product-card:nth-child(5) { transition-delay: 360ms; }
.products-grid .product-card:nth-child(6) { transition-delay: 450ms; }

/* Staggered animation for sustainability-pillars children */
.sustainability-pillars .pillar:nth-child(1) { transition-delay: 0ms; }
.sustainability-pillars .pillar:nth-child(2) { transition-delay: 100ms; }
.sustainability-pillars .pillar:nth-child(3) { transition-delay: 200ms; }
.sustainability-pillars .pillar:nth-child(4) { transition-delay: 300ms; }

/* Screen reader only */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Focus styles */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
}


/* ==========================================================================
   22. Media Queries
   ========================================================================== */

/* ---- 1280px ---- */
@media (max-width: 1280px) {
  :root {
    --section-padding: 6rem;
  }

  .catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   2.5rem;
  }

  .about-grid {
    gap: 3rem;
  }

  .quality-layout {
    gap: 3rem;
  }
}

/* ---- 1024px ---- */
@media (max-width: 1024px) {
  :root {
    --section-padding: 5rem;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Header */
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-actions .btn {
    display: none;
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }

  .about-content {
    max-width: 100%;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Production */
  .production-step {
    grid-template-columns: 60px 1fr;
    gap:                   1.5rem;
  }

  .step-visual {
    display: none;
  }

  .production-step--reverse .step-content {
    order: unset;
  }

  .production-step--reverse .step-visual {
    order:   unset;
    display: none;
  }

  /* Products */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Quality */
  .quality-layout {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }

  .quality-certifications {
    grid-template-columns: 1fr;
  }

  /* Sustainability */
  .sustainability-pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }

  /* Location */
  .location-grid {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }

  .location-info {
    padding-right: 0;
  }

  .map-container {
    min-height: 380px;
    height:     380px;
  }
}

/* ---- 768px ---- */
@media (max-width: 768px) {
  :root {
    --header-height:  var(--header-height-sm);
    --section-padding: 4rem;
    --container-pad:  1.25rem;
  }

  /* Hero CTAs */
  .hero-ctas {
    flex-direction: column;
    align-items:    flex-start;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .categories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Products / Catalog */
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  /* Sustainability */
  .sustainability-pillars {
    grid-template-columns: 1fr;
  }

  /* Group panels - stack vertically */
  .group-panels {
    flex-direction: column;
    min-height:     unset;
  }

  .group-panel {
    flex:      unset;
    min-height: 280px;
    border-right:  none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .group-panel:last-child {
    border-bottom: none;
  }

  .group-panel:hover {
    flex:       unset;
    min-height: 380px;
  }

  /* On mobile, show logo/desc/btn without hover */
  .panel-logo-area {
    opacity:   1;
    transform: translateY(0);
  }

  .panel-info {
    transform: translateY(0);
  }

  .panel-company-desc {
    opacity:   1;
    transform: translateY(0);
  }

  .panel-btn {
    opacity:   1;
    transform: translateY(0);
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap:                   2.5rem;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3);
  }

  /* Location */
  .map-container {
    min-height: 300px;
    height:     300px;
  }
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  :root {
    --section-padding: 3rem;
    --container-pad:   1rem;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  /* Production */
  .production-step {
    grid-template-columns: 48px 1fr;
    gap:                   1rem;
    padding:               2rem 0;
  }

  .step-number {
    font-size: 2rem;
  }

  /* Contact social */
  .contact-social {
    flex-wrap: wrap;
  }

  /* Footer bg text – hide on very small screens */
  .footer-bg-text {
    display: none;
  }

  /* Stat grid on very small */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* About badge repositioned */
  .about-badge {
    bottom: -1rem;
    right:  -0.5rem;
    padding: var(--space-4) var(--space-5);
  }
}