/* ==============================================
   SANDU MOTORS LIMITED
   Global Stylesheet — Design System Foundation
   Version: 1.0.0
   ============================================== */

/* ==============================================
   TABLE OF CONTENTS
   ----------------------------------------------
   1.  CSS Custom Properties (Variables)
   2.  Modern CSS Reset
   3.  Base / Root Styles
   4.  Typography
   5.  Spacing System
   6.  Container
   7.  Links
   8.  Images & Media
   9.  Lists
   10. Buttons
   11. Border Radius
   12. Shadows
   13. Transitions
   14. Selection
   15. Scrollbar
   16. Animations / Keyframes
   17. Utility Classes
   18. Section Spacing
   19. Responsive Typography
   20. Print Styles
   21. LUXURY PRELOADER
   22. PREMIUM NAVIGATION BAR
   23. CINEMATIC HERO SECTION
   24. PREMIUM TRANSITION STATEMENT
   25. SHOP BY CATEGORY
   26. FEATURED PRODUCTS
   27. WHY CHOOSE SANDU MOTORS
   28. HOW ORDERING WORKS
   29. FREQUENTLY ASKED QUESTIONS
   30. PREMIUM CONTACT CALL TO ACTION
   31. LUXURY FOOTER
   32. BACK TO TOP BUTTON
   33. SHOP PAGE
   33a. SHOP HERO
   33b. SHOP CONTENT — LAYOUT
   33c. SHOP SIDEBAR
   33d. SHOP PRODUCT CARDS
   33e. SHOP SEARCH & SORT TOOLBAR
   33f. SHOP EMPTY STATE
   33g. SHOP MOBILE SIDEBAR PANEL
   33h. SHOP PAGE — RESPONSIVE
   34. PRODUCT DETAIL PAGE
   34a. PRODUCT BREADCRUMB BAR
   34b. PRODUCT CONTENT — MAIN LAYOUT
   34c. PRODUCT IMAGE
   34d. PRODUCT INFO
   34e. QUANTITY SELECTOR
   34f. ACTION BUTTONS
   34g. PRODUCT INFO CARDS
   34h. RELATED PRODUCTS
   34i. PRODUCT PAGE — RESPONSIVE
   ============================================== */


/* ==============================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================== */

:root {
  /* --- Brand Colors --- */
  --color-primary-navy:      #0a1628;
  --color-primary-navy-rgb:  10, 22, 40;
  --color-preloader-bg:      #0A2342;

  --color-white:             #ffffff;
  --color-white-rgb:         255, 255, 255;

  --color-luxury-black:      #0d0d0d;
  --color-luxury-black-rgb:  13, 13, 13;

  --color-logo-gold:         #c9a84c;
  --color-logo-gold-rgb:     201, 168, 76;
  --color-logo-gold-light:   #dfc277;
  --color-logo-gold-dark:    #a88a35;

  --color-light-gray:        #f5f5f5;
  --color-light-gray-rgb:    245, 245, 245;

  --color-dark-gray:         #6b7280;
  --color-dark-gray-rgb:     107, 114, 128;

  /* --- Extended Palette --- */
  --color-success:           #10b981;
  --color-error:             #ef4444;
  --color-warning:           #f59e0b;
  --color-info:              #3b82f6;

  /* --- Semantic Colors --- */
  --color-body-bg:           var(--color-white);
  --color-body-text:         var(--color-luxury-black);
  --color-heading-text:      var(--color-primary-navy);
  --color-muted-text:        var(--color-dark-gray);
  --color-border:            #e5e7eb;
  --color-surface:           var(--color-light-gray);

  /* --- Typography --- */
  --font-family-primary:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-logo:        'Montserrat', 'Poppins', sans-serif;

  --font-weight-light:       300;
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;
  --font-weight-black:       900;

  --font-size-xs:            0.75rem;
  --font-size-sm:            0.875rem;
  --font-size-base:          1rem;
  --font-size-md:            1.125rem;
  --font-size-lg:            1.25rem;
  --font-size-xl:            1.5rem;
  --font-size-2xl:           2rem;
  --font-size-3xl:           2.5rem;
  --font-size-4xl:           3rem;
  --font-size-5xl:           3.5rem;

  --line-height-tight:       1.2;
  --line-height-snug:        1.375;
  --line-height-normal:      1.6;
  --line-height-relaxed:     1.75;

  --letter-spacing-tight:    -0.02em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.025em;
  --letter-spacing-wider:    0.05em;
  --letter-spacing-widest:   0.1em;

  /* --- Spacing Scale --- */
  --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-10:                2.5rem;
  --space-12:                3rem;
  --space-16:                4rem;
  --space-20:                5rem;
  --space-24:                6rem;
  --space-32:                8rem;
  --space-40:                10rem;

  /* --- Container --- */
  --container-max-width:     1280px;
  --container-padding:       1.5rem;

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

  /* --- Shadows --- */
  --shadow-xs:               0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:               0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:               0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:               0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl:              0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-gold:             0 4px 14px rgba(var(--color-logo-gold-rgb), 0.3);
  --shadow-gold-lg:          0 10px 30px rgba(var(--color-logo-gold-rgb), 0.25);

  /* --- Transitions --- */
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;
  --transition-slow:         350ms ease;
  --transition-slower:       500ms ease;
  --transition-spring:       400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index Scale --- */
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-fixed:                 300;
  --z-overlay:               400;
  --z-modal:                 500;
  --z-toast:                 600;
  --z-preloader:             9999;

  /* --- Section Spacing --- */
  --section-padding-y:       6rem;
  --section-padding-y-sm:    3rem;

  /* --- Navigation --- */
  --nav-height:               90px;
  --nav-height-scrolled:      72px;
  --nav-bg-transparent:       rgba(var(--color-primary-navy-rgb), 0);
  --nav-bg-glass:             rgba(var(--color-primary-navy-rgb), 0.25);
  --nav-bg-solid:             rgba(var(--color-primary-navy-rgb), 0.97);
  --nav-blur:                 12px;
  --nav-container-max:        1400px;
  --nav-link-font-size:       0.85rem;
  --nav-link-spacing:         0.12em;

  /* --- Selection Color --- */
  --selection-bg:            var(--color-logo-gold);
  --selection-text:          var(--color-primary-navy);
}


/* ==============================================
   2. MODERN CSS RESET
   ============================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: var(--line-height-normal);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  color: var(--color-body-text);
  background-color: var(--color-body-bg);
  overflow-x: hidden;
}

ul, ol {
  list-style: none;
}

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

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

pre, code, kbd, samp {
  font-family: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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


/* ==============================================
   3. BASE / ROOT STYLES
   ============================================== */

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ==============================================
   4. TYPOGRAPHY
   ============================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading-text);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-5xl); font-weight: var(--font-weight-black); letter-spacing: var(--letter-spacing-tight); line-height: 1.1; }
h2 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); }
h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-body-text);
  text-wrap: pretty;
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-muted-text);
}

strong, b { font-weight: var(--font-weight-semibold); }

blockquote {
  border-left: 4px solid var(--color-logo-gold);
  padding-left: var(--space-6);
  font-style: italic;
  color: var(--color-muted-text);
}

code {
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-8) 0;
}


/* ==============================================
   5. SPACING SYSTEM
   ============================================== */

/* Spacing is handled via CSS custom properties (see :root).
   Utility classes are defined in Section 17. */


/* ==============================================
   6. CONTAINER
   ============================================== */

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

.container--narrow { max-width: 800px; margin-inline: auto; padding-inline: var(--container-padding); }
.container--wide   { max-width: 1440px; margin-inline: auto; padding-inline: var(--container-padding); }
.container--fluid  { max-width: 100%; }


/* ==============================================
   7. LINKS
   ============================================== */

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

a:hover { color: var(--color-logo-gold); }

.link--gold { color: var(--color-logo-gold); }
.link--gold:hover { color: var(--color-logo-gold-dark); }

.link--underline { text-decoration: underline; text-underline-offset: 3px; }
.link--underline:hover { text-decoration-thickness: 2px; }


/* ==============================================
   8. IMAGES & MEDIA
   ============================================== */

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

img[loading="lazy"].is-loaded,
img[loading="lazy"][complete] {
  opacity: 1;
}

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

figure { margin: 0; }

figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-muted-text);
  margin-top: var(--space-2);
}


/* ==============================================
   9. LISTS
   ============================================== */

ul, ol { list-style: none; padding: 0; margin: 0; }

.list--unstyled { list-style: none; padding: 0; margin: 0; }

.list--inline { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.list--styled { list-style: none; padding-left: var(--space-6); }
.list--styled li { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-2); }
.list--styled li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--color-logo-gold);
  border-radius: var(--radius-full);
}


/* ==============================================
   10. BUTTONS
   ============================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background-color: var(--color-primary-navy);
  color: var(--color-white);
  border-color: var(--color-primary-navy);
}
.btn--primary:hover {
  background-color: var(--color-logo-gold);
  border-color: var(--color-logo-gold);
  color: var(--color-primary-navy);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--secondary {
  background-color: transparent;
  color: var(--color-logo-gold);
  border-color: var(--color-logo-gold);
}
.btn--secondary:hover {
  background-color: var(--color-logo-gold);
  color: var(--color-primary-navy);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}
.btn--secondary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary-navy);
  border-color: var(--color-white);
}
.btn--white:hover {
  background-color: var(--color-logo-gold);
  border-color: var(--color-logo-gold);
  color: var(--color-primary-navy);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover { color: var(--color-logo-gold); }

.btn--dark {
  background-color: var(--color-luxury-black);
  color: var(--color-white);
  border-color: var(--color-luxury-black);
}
.btn--dark:hover {
  background-color: var(--color-logo-gold);
  border-color: var(--color-logo-gold);
  color: var(--color-primary-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn--sm { font-size: var(--font-size-xs); padding: var(--space-2) var(--space-5); }
.btn--lg { font-size: var(--font-size-base); padding: var(--space-4) var(--space-10); }
.btn--full { width: 100%; }

.btn i { font-size: 1.15em; transition: transform var(--transition-fast); }
.btn:hover i { transform: translateX(3px); }

.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }


/* ==============================================
   11. BORDER RADIUS
   ============================================== */

.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-2xl   { border-radius: var(--radius-2xl); }
.rounded-full  { border-radius: var(--radius-full); }


/* ==============================================
   12. SHADOWS
   ============================================== */

.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-2xl  { box-shadow: var(--shadow-2xl); }


/* ==============================================
   13. TRANSITIONS
   ============================================== */

.transition-fast   { transition: all var(--transition-fast); }
.transition-base   { transition: all var(--transition-base); }
.transition-slow   { transition: all var(--transition-slow); }
.transition-slower { transition: all var(--transition-slower); }


/* ==============================================
   15. SCROLLBAR
   ============================================== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-light-gray); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb { background: var(--color-dark-gray); border-radius: var(--radius-full); border: 2px solid var(--color-light-gray); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-navy); }

* { scrollbar-width: thin; scrollbar-color: var(--color-dark-gray) var(--color-light-gray); }


/* ==============================================
   16. ANIMATIONS / KEYFRAMES
   =================================================
   Note: Section 14 (Selection) styles are defined
   in Section 3 (Base / Root Styles) above.
   ============================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { opacity: 0; transform: translateY(40px); }
.anim-fade-up.is-visible { animation: fadeUp 0.7s var(--transition-base) forwards; }

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-fade-left { opacity: 0; transform: translateX(-40px); }
.anim-fade-left.is-visible { animation: fadeLeft 0.7s var(--transition-base) forwards; }

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-fade-right { opacity: 0; transform: translateX(40px); }
.anim-fade-right.is-visible { animation: fadeRight 0.7s var(--transition-base) forwards; }

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.anim-scale { opacity: 0; transform: scale(0.9); }
.anim-scale.is-visible { animation: scaleIn 0.6s var(--transition-base) forwards; }

@keyframes hoverLift {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }


/* ==============================================
   17. UTILITY CLASSES
   ============================================== */

/* --- Flex --- */
.flex            { display: flex; }
.flex-inline     { display: inline-flex; }
.flex-col        { flex-direction: column; }
.flex-row        { flex-direction: row; }
.flex-wrap       { flex-wrap: wrap; }
.flex-nowrap     { flex-wrap: nowrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }
.justify-center  { justify-content: center; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* --- Grid --- */
.grid          { display: grid; }
.grid-cols-1   { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4   { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6   { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12  { grid-template-columns: repeat(12, 1fr); }

/* --- Centering --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.mx-auto     { margin-inline: auto; }

/* --- Visibility --- */
.hidden  { display: none !important; }
.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;
}

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* --- Dimensions --- */
.w-full      { width: 100%; }
.h-full      { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* --- Opacity --- */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* --- Background --- */
.bg-white  { background-color: var(--color-white); }
.bg-navy   { background-color: var(--color-primary-navy); }
.bg-black  { background-color: var(--color-luxury-black); }
.bg-gold   { background-color: var(--color-logo-gold); }
.bg-light  { background-color: var(--color-light-gray); }

/* --- Text Color --- */
.text-primary { color: var(--color-primary-navy); }
.text-white   { color: var(--color-white); }
.text-black   { color: var(--color-luxury-black); }
.text-gold    { color: var(--color-logo-gold); }
.text-muted   { color: var(--color-muted-text); }

/* --- Font Weight --- */
.font-light     { font-weight: var(--font-weight-light); }
.font-regular   { font-weight: var(--font-weight-regular); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black     { font-weight: var(--font-weight-black); }

/* --- Text Transform --- */
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* --- Letter Spacing --- */
.tracking-tight  { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide   { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider  { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* --- Margin --- */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

/* --- Padding --- */
.p-0   { padding: 0; }
.p-2   { padding: var(--space-2); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }
.px-4  { padding-inline: var(--space-4); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }
.py-4  { padding-block: var(--space-4); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }


/* ==============================================
   18. SECTION SPACING
   ============================================== */

.section { padding-block: var(--section-padding-y); }
.section--sm { padding-block: var(--section-padding-y-sm); }

.section--dark {
  background-color: var(--color-primary-navy);
  color: var(--color-white);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--color-white); }
.section--dark p { color: rgba(var(--color-white-rgb), 0.8); }

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

.section--black {
  background-color: var(--color-luxury-black);
  color: var(--color-white);
}
.section--black h1, .section--black h2, .section--black h3,
.section--black h4, .section--black h5, .section--black h6 { color: var(--color-white); }
.section--black p { color: rgba(var(--color-white-rgb), 0.7); }

.section__header {
  text-align: center;
  margin-bottom: var(--space-16);
  max-width: 700px;
  margin-inline: auto;
}

.section__subtitle {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-logo-gold);
  margin-bottom: var(--space-3);
}

.section__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-heading-text);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

.section__description {
  font-size: var(--font-size-md);
  color: var(--color-muted-text);
  line-height: var(--line-height-normal);
}

.section__accent {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-logo-gold), var(--color-logo-gold-light));
  margin: var(--space-4) auto 0;
  border-radius: var(--radius-full);
}


/* ==============================================
   19. RESPONSIVE TYPOGRAPHY
   ============================================== */

@media (max-width: 768px) {
  :root {
    --section-padding-y:    4rem;
    --section-padding-y-sm: 2.5rem;
  }
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
  h4 { font-size: var(--font-size-lg); }
  .section__title { font-size: var(--font-size-2xl); }
  .section__header { margin-bottom: var(--space-10); }
}

@media (max-width: 480px) {
  :root {
    --container-padding:    1rem;
    --section-padding-y:    3rem;
    --section-padding-y-sm: 2rem;
  }
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
  .btn { padding: var(--space-3) var(--space-6); font-size: var(--font-size-xs); }
  .btn--lg { padding: var(--space-3) var(--space-8); font-size: var(--font-size-sm); }
}

@media (min-width: 1440px) {
  h1 { font-size: 4rem; }
  h2 { font-size: 3.25rem; }
  :root { --section-padding-y: 8rem; }
}


/* ==============================================
   20. PRINT STYLES
   ============================================== */

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { font-size: 12pt; line-height: 1.5; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  img { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
}


/* ==============================================================
   21. LUXURY PRELOADER
   ----------------------------------------------------------------
   A full-viewport overlay that displays during initial page load.
   Animations use only transform and opacity for GPU-accelerated
   60 fps performance. No layout-triggering properties are animated.
   ============================================================== */

/* --- Preloader Overlay --- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-preloader-bg);
  overflow: hidden;
  will-change: transform, opacity;
  transition:
    transform 0.8s cubic-bezier(0.76, 0, 0.24, 1),
    opacity   0.8s cubic-bezier(0.76, 0, 0.24, 1);
  /* CSS-only safety fallback: auto-hides preloader if JS fails */
  animation: preloaderAutoHide 4.5s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Auto-hide keyframes: wait 2.5s then slide up and fade out */
@keyframes preloaderAutoHide {
  0%, 55% {
    transform: translateY(0);
    opacity: 1;
  }
  75% {
    transform: translateY(-30%);
    opacity: 0;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* Exit state — slides up and fades out */
/* Cancels CSS animation when JS takes over */
.preloader.is-done,
.preloader.is-exiting {
  animation: none;
}

.preloader.is-done {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


/* --- Subtle Background Ambient Effect ---
   A very faint radial glow that slowly breathes.
   Barely noticeable — adds depth without distraction. */

.preloader__bg-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background: radial-gradient(
    ellipse 600px 600px at 50% 50%,
    rgba(var(--color-logo-gold-rgb), 0.25) 0%,
    transparent 70%
  );
  animation: preloaderBreath 4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes preloaderBreath {
  0%, 100% {
    transform: scale(1);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.08;
  }
}


/* --- Inner Content Container --- */

.preloader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  will-change: transform, opacity;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo fades out before the overlay exits */
.preloader.is-exiting .preloader__inner {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- Logo --- */

.preloader__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
  /* Start invisible; JS adds .is-visible to animate in */
  opacity: 0;
  transform: scale(0.95);
  will-change: transform, opacity;
  transition:
    opacity   0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo appears */
.preloader__logo.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Very soft gold glow behind the logo */
.preloader__logo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(var(--color-logo-gold-rgb), 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  will-change: opacity;
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Logo image — placed above the text */
.preloader__logo-img {
  width: clamp(80px, 15vw, 120px);
  height: auto;
  object-fit: contain;
  margin-bottom: 1rem;
  opacity: 0.95;
  position: relative;
  z-index: 1;
}

/* "SANDU" — primary word, gold — Montserrat for automotive luxury feel */
.preloader__logo-sandu {
  font-family: var(--font-family-logo);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--color-logo-gold);
  text-indent: 0.3em; /* balance letter-spacing visually */
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* "MOTORS" — secondary word, white, lighter weight — Montserrat medium */
.preloader__logo-motors {
  font-family: var(--font-family-logo);
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.55em;
  color: rgba(var(--color-white-rgb), 0.75);
  text-indent: 0.55em;
  text-transform: uppercase;
  margin-top: 0.6rem;
  position: relative;
  z-index: 1;
}


/* --- Loading Line --- */

.preloader__line {
  width: clamp(160px, 30vw, 240px);
  height: 1px;
  background-color: rgba(var(--color-white-rgb), 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

/* The gold fill — uses scaleX for GPU-accelerated animation */
.preloader__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-logo-gold) 15%,
    var(--color-logo-gold-light) 50%,
    var(--color-logo-gold) 85%,
    transparent 100%
  );
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  /* Animation is triggered by JS adding .is-loading */
  transition: none;
}

/* Line animates from 0 to full width */
.preloader__line-fill.is-loading {
  animation: lineFill 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes lineFill {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}


/* --- Body Scroll Lock While Preloader Active --- */

body.is-loading {
  overflow: hidden;
  /* CSS-only safety: restore scrolling after preloader would be gone */
  animation: bodyRestoreScroll 4.5s ease forwards;
}

@keyframes bodyRestoreScroll {
  0%, 55% { overflow: hidden; }
  100% { overflow: visible; }
}

/* When JS removes is-loading, cancel the CSS animation */
body:not(.is-loading) {
  animation: none;
  overflow: visible;
}


/* --- Preloader Responsive Adjustments --- */

@media (max-width: 768px) {
  .preloader__logo::before {
    width: 220px;
    height: 220px;
  }

  .preloader__logo-img {
    width: clamp(60px, 12vw, 90px);
  }

  .preloader__inner {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .preloader__logo::before {
    width: 180px;
    height: 180px;
  }

  .preloader__logo-img {
    width: clamp(50px, 12vw, 70px);
    margin-bottom: 0.75rem;
  }

  .preloader__inner {
    gap: 1.25rem;
  }

  .preloader__line {
    width: clamp(120px, 40vw, 180px);
  }
}

@media (min-width: 1440px) {
  .preloader__logo::before {
    width: 260px;
    height: 260px;
  }
}


/* ==============================================================
   22. PREMIUM NAVIGATION BAR
   ----------------------------------------------------------------
   Sticky luxury navbar with:
   - Transparent glass effect at top, solid navy on scroll
   - Logo left, links center, actions right
   - Fullscreen mobile menu (slide from right)
   - Fullscreen search overlay
   ============================================================== */

/* --- Navbar Container --- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: var(--z-fixed);
  background-color: var(--nav-bg-transparent);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background-color 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    box-shadow 0.4s ease,
    height 0.4s ease;
  /* Hidden on load — fades in after preloader */
  opacity: 0;
  transform: translateY(-10px);
  will-change: transform, opacity, background-color;
  /* CSS-only safety: show nav after preloader would be gone */
  animation: navAutoShow 3.5s ease forwards;
}

/* Nav auto-show keyframes */
@keyframes navAutoShow {
  0%, 55% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cancel CSS animation when JS takes over */
.nav.is-visible {
  animation: none;
}

/* Visible state — added by JS after preloader completes */
.nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease 0.1s,
    transform 0.6s ease 0.1s,
    background-color 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    box-shadow 0.4s ease,
    height 0.4s ease;
}

/* Scrolled state — solid background + shadow */
.nav.is-scrolled {
  background-color: var(--nav-bg-solid);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
  height: var(--nav-height-scrolled);
}

/* --- Nav Inner Container --- */

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--nav-container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}


/* --- Logo --- */

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.4s ease, opacity 0.3s ease;
  will-change: transform;
}

/* Scrolled — logo shrinks slightly */
.nav.is-scrolled .nav__logo {
  transform: scale(0.88);
}

.nav__logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease, height 0.4s ease;
}

.nav__logo:hover .nav__logo-img {
  opacity: 0.85;
  /* Subtle fade on hover */
}

/* Scrolled state — slightly smaller logo */
.nav.is-scrolled .nav__logo-img {
  height: 32px;
}


/* --- Desktop Navigation Links --- */

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  font-family: var(--font-family-primary);
  font-size: var(--nav-link-font-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--nav-link-spacing);
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.85);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color 0.3s ease;
}

/* Hover — text turns gold */
.nav__link:hover {
  color: var(--color-logo-gold);
}

/* Animated underline — grows from center */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: var(--color-logo-gold);
  border-radius: var(--radius-full);
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

.nav__link:hover::after {
  width: 100%;
}

/* Active link — gold text + persistent underline */
.nav__link.is-active {
  color: var(--color-logo-gold);
}

.nav__link.is-active::after {
  width: 100%;
}

/* Focus visible for keyboard navigation */
.nav__link:focus-visible {
  outline: none;
  color: var(--color-logo-gold);
}

.nav__link:focus-visible::after {
  width: 100%;
}


/* --- Right Actions --- */

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav__action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: rgba(var(--color-white-rgb), 0.85);
  font-size: 1.3rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  text-decoration: none;
}

.nav__action-btn:hover {
  color: var(--color-logo-gold);
  transform: scale(1.1);
}

.nav__action-btn:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Cart Badge */
.nav__cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--font-family-primary);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  text-align: center;
  color: var(--color-primary-navy);
  background-color: var(--color-logo-gold);
  border-radius: var(--radius-full);
  pointer-events: none;
  /* Hidden by default when cart is empty */
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show badge only when it has items */
.nav__cart-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}


/* --- Hamburger Toggle (hidden on desktop) --- */

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.nav__toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Hamburger → X animation when menu is open */
.nav__toggle.is-active .nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle.is-active .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-active .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav__toggle:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}


/* ==============================================================
   MOBILE FULLSCREEN MENU
   ============================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-fixed) + 10);
  background-color: var(--color-primary-navy);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  will-change: opacity, visibility;
}

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

/* Header row: logo + close */
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(var(--color-white-rgb), 0.06);
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mobile-menu__logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  color: var(--color-white);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.mobile-menu__close:hover {
  color: var(--color-logo-gold);
  background-color: rgba(var(--color-white-rgb), 0.05);
}

.mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Links list */
.mobile-menu__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-8);
  gap: var(--space-1);
  list-style: none;
  margin: 0;
}

.mobile-menu__link {
  display: block;
  font-family: var(--font-family-logo);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.5);
  text-decoration: none;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(var(--color-white-rgb), 0.04);
  /* Staggered entrance animation */
  opacity: 0;
  transform: translateX(30px);
  transition:
    color 0.3s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
  will-change: transform, opacity;
}

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for each link */
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.26s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.34s; }

.mobile-menu__link:hover {
  color: var(--color-logo-gold);
}

.mobile-menu__link.is-active {
  color: var(--color-logo-gold);
}

.mobile-menu__link:focus-visible {
  outline: none;
  color: var(--color-logo-gold);
}

/* Footer — cart link */
.mobile-menu__footer {
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid rgba(var(--color-white-rgb), 0.06);
}

.mobile-menu__cart-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.mobile-menu__cart-link:hover {
  color: var(--color-logo-gold);
}

.mobile-menu__cart-link i {
  font-size: 1.2rem;
}

.mobile-menu__badge {
  /* Overrides for mobile menu context */
  top: -4px;
  right: -8px;
}


/* ==============================================================
   SEARCH OVERLAY
   ============================================================== */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-fixed) + 20);
  background-color: rgba(var(--color-primary-navy-rgb), 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  will-change: opacity, visibility;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-overlay__inner {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  padding: var(--space-6);
  position: relative;
}

.search-overlay__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  color: rgba(var(--color-white-rgb), 0.6);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.search-overlay__close:hover {
  color: var(--color-logo-gold);
  background-color: rgba(var(--color-white-rgb), 0.05);
}

.search-overlay__close:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

.search-overlay__content {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease 0.1s, opacity 0.5s ease 0.1s;
}

.search-overlay.is-open .search-overlay__content {
  transform: translateY(0);
  opacity: 1;
}

.search-overlay__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-logo-gold);
  margin-bottom: var(--space-6);
}

.search-overlay__input-wrap {
  position: relative;
  border-bottom: 2px solid rgba(var(--color-white-rgb), 0.15);
  transition: border-color 0.3s ease;
}

.search-overlay__input-wrap:focus-within {
  border-color: var(--color-logo-gold);
}

.search-overlay__icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: rgba(var(--color-white-rgb), 0.35);
  transition: color 0.3s ease;
}

.search-overlay__input-wrap:focus-within .search-overlay__icon {
  color: var(--color-logo-gold);
}

.search-overlay__input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
  font-family: var(--font-family-primary);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: var(--font-weight-light);
  color: var(--color-white);
  background: none;
  border: none;
  outline: none;
  caret-color: var(--color-logo-gold);
}

.search-overlay__input::placeholder {
  color: rgba(var(--color-white-rgb), 0.25);
  font-weight: var(--font-weight-light);
}

/* Search results placeholder */
.search-overlay__results {
  margin-top: var(--space-8);
  min-height: 100px;
}


/* --- Body scroll lock when mobile menu or search is open --- */

body.is-menu-open,
body.is-search-open {
  overflow: hidden;
}


/* --- Navigation Responsive --- */

/* Tablet and below — show hamburger, hide desktop links */
@media (max-width: 1024px) {
  .nav__menu {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height:           72px;
    --nav-height-scrolled:  64px;
  }

  .nav__container {
    padding-inline: var(--space-4);
  }

  .nav__logo-img {
    height: 32px;
  }

  .nav.is-scrolled .nav__logo-img {
    height: 28px;
  }

  .nav__action-btn {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  :root {
    --nav-height:           64px;
    --nav-height-scrolled:  58px;
  }

  .nav__logo-img {
    height: 28px;
  }

  .nav.is-scrolled .nav__logo-img {
    height: 24px;
  }

  .mobile-menu__links {
    padding: var(--space-6) var(--space-6);
  }

  .mobile-menu__footer {
    padding: var(--space-4) var(--space-6);
  }
}

@media (min-width: 1440px) {
  .nav__menu {
    gap: 3rem;
  }
}


/* ==============================================================
   23. CINEMATIC HERO SECTION
   ----------------------------------------------------------------
   Full-viewport hero with:
   - Left: headline, description, CTAs, trust badges
   - Right: premium image with floating product cards
   - Deep navy layered background for cinematic depth
   - Subtle gold atmospheric lighting
   - Multiple visual depth layers (bg → gradient → glow → grid → image → cards → content)
   - Dark navy glass floating cards with gold accents
   - Staggered entrance animations (transform + opacity only)
   - Refined scroll indicator
   ============================================================== */

/* --- Hero Container --- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-height);
  /* Deep navy base — dominant, automotive, premium
     Color balance: Navy dominates, white for text, gold for accents, black for depth */
  background-color: var(--color-primary-navy);
  background-image:
    /* Subtle lighter navy center — creates depth without being flat */
    radial-gradient(
      ellipse 80% 55% at 30% 50%,
      rgba(15, 30, 60, 0.9) 0%,
      transparent 70%
    ),
    /* Very faint diagonal tech lines — industrial precision texture */
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 60px,
      rgba(var(--color-logo-gold-rgb), 0.018) 60px,
      rgba(var(--color-logo-gold-rgb), 0.018) 61px
    );
}


/* --- Background Glow Effects --- */

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Subtle tech grid pattern overlay — industrial precision */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.025) 1px,
      transparent 1px
    );
  background-size: 80px 80px;
  mask-image: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
  opacity: 0.5;
}

/* Top-left navy atmospheric glow — depth in upper portion */
.hero__glow--top {
  position: absolute;
  top: -200px;
  left: -150px;
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(20, 45, 85, 0.6) 0%,
    rgba(var(--color-primary-navy-rgb), 0.25) 40%,
    transparent 65%
  );
  border-radius: 50%;
}

/* Right-side warm gold glow — luxury warmth near the image area */
.hero__glow--right {
  position: absolute;
  top: 15%;
  right: -120px;
  width: 750px;
  height: 750px;
  background: radial-gradient(
    circle,
    rgba(var(--color-logo-gold-rgb), 0.14) 0%,
    rgba(var(--color-logo-gold-rgb), 0.06) 30%,
    rgba(var(--color-logo-gold-rgb), 0.02) 50%,
    transparent 65%
  );
  border-radius: 50%;
}

/* Bottom-left depth glow — dark anchor for grounding */
.hero__glow--depth {
  position: absolute;
  bottom: -180px;
  left: 5%;
  width: 1000px;
  height: 600px;
  background: radial-gradient(
    ellipse,
    rgba(3, 8, 18, 0.7) 0%,
    rgba(var(--color-primary-navy-rgb), 0.2) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Center-right gold ambient — subtle cinematic warmth */
.hero__glow--gold-ambient {
  position: absolute;
  top: 30%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(var(--color-logo-gold-rgb), 0.06) 0%,
    transparent 60%
  );
  border-radius: 50%;
}


/* --- Hero Inner Container --- */

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* --- Two-Column Grid --- */

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}


/* ==============================================================
   LEFT COLUMN — Content
   ============================================================== */

.hero__content {
  position: relative;
  z-index: 2;
  /* All children start invisible; JS adds .is-ready to animate in */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  /* CSS-only safety: show hero content after preloader would be gone */
  animation: heroContentAutoShow 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Hero content auto-show keyframes */
@keyframes heroContentAutoShow {
  0%, 50% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero child auto-show keyframes (actions, trust) */
@keyframes heroChildAutoShow {
  0%, 55% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero visual auto-show keyframes */
@keyframes heroVisualAutoShow {
  0%, 50% {
    opacity: 0;
    transform: scale(0.96) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero.is-ready .hero__content {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}


/* --- Headline --- */

.hero__title {
  font-family: var(--font-family-primary);
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  font-weight: var(--font-weight-black);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin-bottom: var(--space-8);
}

.hero__title-accent {
  color: var(--color-logo-gold);
  position: relative;
  display: inline-block;
}

/* Premium gold underline — gradient fades to transparent */
.hero__title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-logo-gold-dark) 0%,
    var(--color-logo-gold) 30%,
    var(--color-logo-gold-light) 60%,
    transparent 100%
  );
  border-radius: var(--radius-full);
}


/* --- Description --- */

.hero__description {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  color: rgba(var(--color-white-rgb), 0.6);
  max-width: 500px;
  margin-bottom: var(--space-10);
}


/* --- CTA Buttons --- */

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
  /* Stagger entrance: appears after content */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  /* CSS-only safety fallback */
  animation: heroChildAutoShow 4.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero.is-ready .hero__actions {
  animation: none;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* Primary CTA — gold gradient with luxury glow shadow */
.btn--hero-primary {
  background: linear-gradient(
    135deg,
    var(--color-logo-gold-light) 0%,
    var(--color-logo-gold) 50%,
    var(--color-logo-gold-dark) 100%
  );
  color: var(--color-primary-navy);
  border-color: var(--color-logo-gold);
  box-shadow:
    0 2px 8px rgba(var(--color-logo-gold-rgb), 0.25),
    0 6px 24px rgba(var(--color-logo-gold-rgb), 0.18),
    0 12px 40px rgba(var(--color-logo-gold-rgb), 0.1);
  transition:
    background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--hero-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-logo-gold) 0%,
    var(--color-logo-gold-dark) 100%
  );
  border-color: var(--color-logo-gold-dark);
  color: var(--color-primary-navy);
  box-shadow:
    0 4px 12px rgba(var(--color-logo-gold-rgb), 0.35),
    0 10px 36px rgba(var(--color-logo-gold-rgb), 0.25),
    0 20px 60px rgba(var(--color-logo-gold-rgb), 0.15);
  transform: translateY(-3px);
}

.btn--hero-primary:active {
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(var(--color-logo-gold-rgb), 0.3),
    0 4px 12px rgba(var(--color-logo-gold-rgb), 0.15);
  transition-duration: 0.1s;
}

.btn--hero-primary:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 4px;
}

/* Secondary CTA — dark navy with thin gold border */
.btn--hero-secondary {
  background-color: rgba(var(--color-primary-navy-rgb), 0.6);
  color: var(--color-white);
  border-color: rgba(var(--color-logo-gold-rgb), 0.35);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.05);
  transition:
    background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s ease,
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--hero-secondary:hover {
  background-color: rgba(var(--color-primary-navy-rgb), 0.9);
  border-color: var(--color-logo-gold);
  color: var(--color-white);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.08),
    inset 0 1px 0 rgba(var(--color-white-rgb), 0.08);
  transform: translateY(-3px);
}

.btn--hero-secondary:active {
  transform: translateY(-1px);
  transition-duration: 0.1s;
}

.btn--hero-secondary:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 4px;
}


/* --- Trust Badges --- */

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  /* Stagger entrance: appears last */
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* CSS-only safety fallback */
  animation: heroChildAutoShow 4.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero.is-ready .hero__trust {
  animation: none;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.65);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.hero__trust-item i {
  font-size: 1.15rem;
  color: var(--color-logo-gold);
  filter: drop-shadow(0 1px 3px rgba(var(--color-logo-gold-rgb), 0.4));
}


/* ==============================================================
   RIGHT COLUMN — Visual (Image + Floating Cards)
   ============================================================== */

.hero__visual {
  position: relative;
  /* Entrance animation — refined easing */
  opacity: 0;
  transform: scale(0.96) translateY(24px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  /* CSS-only safety fallback */
  animation: heroVisualAutoShow 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero.is-ready .hero__visual {
  animation: none;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.12s;
}


/* --- Main Image --- */

.hero__image-wrap {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: visible;
  /* Five-layer dramatic shadow system for depth on dark bg */
  box-shadow:
    /* Near — tight shadow for edge definition */
    0 4px 12px rgba(0, 0, 0, 0.4),
    /* Mid — adds volume */
    0 16px 48px rgba(0, 0, 0, 0.35),
    /* Far — grounds the element */
    0 32px 80px rgba(0, 0, 0, 0.25),
    /* Gold ambient glow — luxury halo */
    0 0 60px rgba(var(--color-logo-gold-rgb), 0.08),
    0 0 120px rgba(var(--color-logo-gold-rgb), 0.04);
  /* Gold accent outline */
  outline: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
  outline-offset: 4px;
  /* Fallback: premium gradient if image fails to load */
  background:
    linear-gradient(
      135deg,
      rgba(15, 25, 50, 0.95) 0%,
      rgba(20, 35, 65, 0.85) 50%,
      rgba(10, 18, 35, 0.95) 100%
    );
}

/* Inner container for image overflow clipping */
.hero__image-inner {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* Vignette overlay — cinematic edge darkening */
.hero__image-wrap::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(
    180deg,
    rgba(var(--color-primary-navy-rgb), 0.15) 0%,
    transparent 25%,
    transparent 70%,
    rgba(var(--color-primary-navy-rgb), 0.25) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Soft gold ambient glow behind the image */
.hero__image-wrap::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--color-logo-gold-rgb), 0.1) 0%,
    rgba(var(--color-logo-gold-rgb), 0.03) 40%,
    transparent 65%
  );
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.hero__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-2xl);
  position: relative;
  z-index: 0;
}

/* Decorative fallback when image fails to load */
.hero__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl);
  z-index: 0;
  color: rgba(var(--color-logo-gold-rgb), 0.2);
  font-size: 4rem;
}


/* --- Floating Product Cards --- */

.hero__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Dark navy glass morphism — premium on dark background */
  background: rgba(var(--color-primary-navy-rgb), 0.7);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl);
  /* Multi-layer shadow for depth on dark bg */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 24px rgba(var(--color-logo-gold-rgb), 0.04);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  z-index: 3;
  /* Entrance animation — starts hidden */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  /* CSS-only safety fallback */
  animation: heroChildAutoShow 5.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered delays for CSS fallback animations */
.hero__card--1 { animation-delay: 0s; }
.hero__card--2 { animation-delay: 0.15s; }
.hero__card--3 { animation-delay: 0.3s; }

/* Hover effect — subtle lift with gold glow */
.hero__card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(var(--color-logo-gold-rgb), 0.08);
  border-color: rgba(var(--color-logo-gold-rgb), 0.3);
}

.hero.is-ready .hero__card {
  animation: heroFloat 6s ease-in-out infinite;
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for each card entrance */
.hero.is-ready .hero__card--1 { transition-delay: 0.5s; }
.hero.is-ready .hero__card--2 { transition-delay: 0.65s; }
.hero.is-ready .hero__card--3 { transition-delay: 0.8s; }

/* Different float timing per card — organic, not synchronized */
.hero__card--1 { animation-delay: 0s; }
.hero__card--2 { animation-delay: 2s; }
.hero__card--3 { animation-delay: 4s; }

/* Card positions — placed around the image */
.hero__card--1 {
  top: 8%;
  left: -30px;
}

.hero__card--2 {
  bottom: 18%;
  right: -20px;
}

.hero__card--3 {
  bottom: 5%;
  left: 15%;
}

/* Smooth, organic float — slower and more subtle */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Card icon circle — premium gold gradient on dark */
.hero__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    145deg,
    rgba(var(--color-logo-gold-rgb), 0.25) 0%,
    rgba(var(--color-logo-gold-rgb), 0.08) 100%
  );
  color: var(--color-logo-gold);
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 2px rgba(var(--color-logo-gold-rgb), 0.15),
    0 0 12px rgba(var(--color-logo-gold-rgb), 0.08);
}

.hero__card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.hero__card-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.hero__card-sub {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.5);
}


/* ==============================================================
   SCROLL INDICATOR
   ============================================================== */

.hero__scroll {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 2;
  /* Fades in last */
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.8s ease;
}

.hero.is-ready .hero__scroll {
  opacity: 1;
  transition-delay: 1.4s;
}

/* Thin decorative line above the arrow — gold tinted */
.hero__scroll::before {
  content: '';
  width: 1px;
  height: 32px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--color-logo-gold-rgb), 0.3)
  );
  margin-bottom: var(--space-1);
}

.hero__scroll-label {
  font-family: var(--font-family-primary);
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(var(--color-logo-gold-rgb), 0.4);
}

.hero__scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgba(var(--color-logo-gold-rgb), 0.4);
  /* Subtle, refined bounce */
  animation: scrollBounce 2.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}


/* ==============================================================
   HERO RESPONSIVE
   ============================================================== */

/* Tablet — stack vertically */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    text-align: center;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__title {
    font-size: clamp(2rem, 5vw, 2.8rem);
  }

  .hero__description {
    max-width: 560px;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__trust {
    justify-content: center;
  }

  /* Center the visual column */
  .hero__visual {
    max-width: 520px;
    margin-inline: auto;
  }

  /* Reposition floating cards for centered layout */
  .hero__card--1 {
    top: 5%;
    left: -15px;
  }

  .hero__card--2 {
    bottom: 15%;
    right: -10px;
  }

  .hero__card--3 {
    bottom: 2%;
    left: 8%;
  }

  /* Adjust glows for single-column */
  .hero__glow--gold-ambient {
    right: 5%;
    top: 40%;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: var(--nav-height);
    min-height: auto;
    padding-block-end: var(--space-20);
  }

  .hero__grid {
    gap: var(--space-10);
  }

  .hero__title {
    font-size: clamp(1.75rem, 6vw, 2.4rem);
  }

  .hero__description {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-8);
  }

  .hero__actions {
    margin-bottom: var(--space-10);
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
  }

  .hero__trust {
    gap: var(--space-5);
  }

  .hero__visual {
    max-width: 420px;
  }

  /* Smaller cards on tablet */
  .hero__card {
    padding: var(--space-2) var(--space-4);
  }

  .hero__card-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .hero__card-label {
    font-size: var(--font-size-xs);
  }

  .hero__scroll {
    bottom: var(--space-6);
  }

  /* Reduce glow intensity on mobile for performance */
  .hero__glow--top {
    width: 500px;
    height: 500px;
  }

  .hero__glow--right {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: var(--nav-height);
    padding-block-end: var(--space-16);
  }

  .hero__title {
    font-size: clamp(1.5rem, 7vw, 2rem);
    margin-bottom: var(--space-5);
  }

  .hero__description {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
  }

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

  .hero__visual {
    max-width: 100%;
  }

  /* Hide floating cards on very small screens */
  .hero__card {
    display: none;
  }

  .hero__scroll {
    bottom: var(--space-4);
  }

  /* Hide grid pattern on mobile for performance */
  .hero__bg::after {
    display: none;
  }
}

/* Large screens — wider spacing, more presence */
@media (min-width: 1440px) {
  .hero__grid {
    gap: 6rem;
  }

  .hero__title {
    font-size: clamp(2.8rem, 3.5vw, 4rem);
  }

  .hero__description {
    font-size: 1.2rem;
    max-width: 560px;
    line-height: 1.9;
  }

  .hero__card--1 {
    left: -40px;
  }

  .hero__card--2 {
    right: -30px;
  }

  .hero__glow--top {
    width: 1100px;
    height: 1100px;
  }

  .hero__glow--right {
    width: 900px;
    height: 900px;
  }

  .hero__glow--depth {
    width: 1200px;
    height: 700px;
  }

  .hero__glow--gold-ambient {
    width: 650px;
    height: 650px;
  }
}


/* ==============================================================
   24. PREMIUM TRANSITION STATEMENT
   ----------------------------------------------------------------
   Luxury breathing-space section between Hero and Shop:
   - Deep navy layered background with subtle gold glow
   - Faint blueprint/grid pattern (engineering-inspired)
   - Small label, bold heading, gold expanding line, short paragraph
   - Intersection Observer entrance animations (transform + opacity)
   - Plays only once, respects prefers-reduced-motion
   ============================================================== */

/* --- Section Container --- */

.transition-statement {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Deep navy base — visually connects with Hero */
  background-color: #081220;
  background-image:
    /* Subtle vertical gradient — adds depth without being flat */
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.3) 0%,
      transparent 15%,
      transparent 85%,
      rgba(5, 10, 20, 0.5) 100%
    );
}


/* --- Background Effects --- */

.transition-statement__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Center gold glow — appears on scroll via IntersectionObserver */
.transition-statement__glow--center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.07) 0%,
    rgba(var(--color-logo-gold-rgb), 0.03) 40%,
    transparent 65%
  );
  border-radius: 50%;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.transition-statement.is-visible .transition-statement__glow--center {
  opacity: 1;
}

/* Blueprint grid pattern — extremely faint engineering aesthetic */
.transition-statement__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    /* Major grid lines */
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.025) 1px,
      transparent 1px
    ),
    /* Minor grid lines — more subtle */
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    );
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  /* Fade out toward edges — only visible in center */
  mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    rgba(0, 0, 0, 0.35) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    rgba(0, 0, 0, 0.35) 0%,
    transparent 70%
  );
}

/* Faint circuit/technical lines — decorative engineering detail */
.transition-statement__blueprint::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.04) 20%,
    rgba(var(--color-logo-gold-rgb), 0.06) 50%,
    rgba(var(--color-logo-gold-rgb), 0.04) 80%,
    transparent 100%
  );
}

.transition-statement__blueprint::after {
  content: '';
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.03) 30%,
    rgba(var(--color-logo-gold-rgb), 0.05) 50%,
    rgba(var(--color-logo-gold-rgb), 0.03) 70%,
    transparent 100%
  );
}


/* --- Content Container --- */

.transition-statement__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: var(--space-16);
}

.transition-statement__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* --- Small Label --- */

.transition-statement__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-8);
  /* Start invisible — animate in via IntersectionObserver */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.transition-statement.is-visible .transition-statement__label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}


/* --- Main Heading --- */

.transition-statement__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: var(--font-weight-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-8);
  /* Start invisible — animate in via IntersectionObserver */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.transition-statement.is-visible .transition-statement__heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}


/* --- Gold Decorative Line --- */

.transition-statement__line {
  width: 80px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-logo-gold-dark) 15%,
    var(--color-logo-gold) 50%,
    var(--color-logo-gold-light) 85%,
    transparent 100%
  );
  margin-bottom: var(--space-8);
  border-radius: var(--radius-full);
  /* Expand from center — GPU accelerated */
  transform: scaleX(0);
  transform-origin: center;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.transition-statement.is-visible .transition-statement__line {
  transform: scaleX(1);
  transition-delay: 0.35s;
}


/* --- Paragraph --- */

.transition-statement__text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 520px;
  /* Start invisible — animate in via IntersectionObserver */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.transition-statement.is-visible .transition-statement__text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}


/* ==============================================================
   TRANSITION STATEMENT — RESPONSIVE
   ============================================================== */

@media (max-width: 1024px) {
  .transition-statement {
    min-height: 40vh;
  }

  .transition-statement__heading {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
  }

  .transition-statement__container {
    padding-block: var(--space-12);
  }
}

@media (max-width: 768px) {
  .transition-statement {
    min-height: 35vh;
  }

  .transition-statement__heading {
    font-size: clamp(1.4rem, 5vw, 2rem);
    margin-bottom: var(--space-6);
  }

  .transition-statement__label {
    margin-bottom: var(--space-6);
    font-size: 0.65rem;
  }

  .transition-statement__line {
    margin-bottom: var(--space-6);
  }

  .transition-statement__text {
    font-size: var(--font-size-sm);
    max-width: 440px;
  }

  .transition-statement__container {
    padding-block: var(--space-10);
  }

  /* Hide minor grid on mobile for cleaner look */
  .transition-statement__blueprint {
    background-image:
      linear-gradient(
        rgba(var(--color-logo-gold-rgb), 0.025) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(var(--color-logo-gold-rgb), 0.025) 1px,
        transparent 1px
      );
    background-size: 60px 60px, 60px 60px;
  }
}

@media (max-width: 480px) {
  .transition-statement {
    min-height: auto;
  }

  .transition-statement__heading {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
  }

  .transition-statement__text {
    line-height: 1.7;
  }

  .transition-statement__container {
    padding-block: var(--space-12);
  }

  /* Hide blueprint decorative lines on very small screens */
  .transition-statement__blueprint::before,
  .transition-statement__blueprint::after {
    display: none;
  }
}

/* Large screens — wider presence */
@media (min-width: 1440px) {
  .transition-statement__heading {
    font-size: clamp(2.2rem, 2.8vw, 3.2rem);
  }

  .transition-statement__text {
    font-size: var(--font-size-md);
    max-width: 580px;
    line-height: 1.9;
  }

  .transition-statement__glow--center {
    width: 900px;
    height: 500px;
  }

  .transition-statement__line {
    width: 100px;
    height: 2px;
  }
}


/* ==============================================================
   25. SHOP BY CATEGORY
   ----------------------------------------------------------------
   Premium category browsing section with:
   - Deep navy layered background (subtle gradient + blueprint + gold glow)
   - Centered section header (label, heading, description)
   - 8 dark navy glass cards with thin gold border in a responsive grid
   - Intersection Observer staggered entrance (header + cards sequentially)
   - Hover: card lift, gold border glow, icon scale, arrow slide, deeper shadow
   - Grid: 4 cols desktop → 2 cols tablet → 1 col mobile
   - GPU-accelerated only (transform + opacity), plays once
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Section Container --- */

.shop-category {
  position: relative;
  overflow: hidden;
  /* Deep navy base — continues the dark visual language */
  background-color: #070e1a;
  background-image:
    /* Subtle vertical gradient — depth without flatness */
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 8%,
      transparent 92%,
      rgba(5, 10, 20, 0.6) 100%
    );
  padding-block: var(--space-24);
}


/* --- Background Effects --- */

.shop-category__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Top-center gold glow — subtle ambient warmth */
.shop-category__glow--top {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.05) 0%,
    rgba(var(--color-logo-gold-rgb), 0.02) 40%,
    transparent 65%
  );
  border-radius: 50%;
}

/* Bottom-center faint glow — visual anchor */
.shop-category__glow--bottom {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-primary-navy-rgb), 0.6) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint / circuit grid pattern — extremely faint */
.shop-category__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    /* Major grid lines */
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.018) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  /* Fade out toward edges — center-only visibility */
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.shop-category__container {
  position: relative;
  z-index: 2;
}


/* --- Section Header --- */

.shop-category__header {
  text-align: center;
  margin-bottom: var(--space-16);
  /* Start invisible — animate in via IntersectionObserver */
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-category.is-visible .shop-category__header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Small label */
.shop-category__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

/* Main heading */
.shop-category__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Description */
.shop-category__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 480px;
  margin-inline: auto;
}


/* --- Category Grid --- */

.shop-category__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}


/* --- Category Card — Dark Navy Glass --- */

.shop-category__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-8) var(--space-6);
  /* Dark navy glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  border-radius: var(--radius-xl);
  /* Soft shadow */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 1px 4px rgba(0, 0, 0, 0.15);
  /* Remove default link styling */
  text-decoration: none;
  color: inherit;
  outline: none;
  cursor: pointer;
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
  /* Staggered entrance — each card starts hidden */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Staggered entrance via inline --card-delay set by JS */
.shop-category.is-visible .shop-category__card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}

/* --- Card Hover Effects --- */

.shop-category__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.35);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(var(--color-logo-gold-rgb), 0.06);
  background: rgba(var(--color-primary-navy-rgb), 0.75);
}

/* Visible focus state for keyboard navigation */
.shop-category__card:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}


/* --- Card Icon --- */

.shop-category__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-5);
  /* Subtle icon background */
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: var(--radius-lg);
  /* GPU-accelerated icon hover */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s ease,
              border-color 0.4s ease;
}

.shop-category__card:hover .shop-category__card-icon {
  transform: scale(1.12);
  background: rgba(var(--color-logo-gold-rgb), 0.14);
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
}

.shop-category__card-icon i {
  font-size: 1.6rem;
  color: var(--color-logo-gold);
  transition: color 0.4s ease;
}

.shop-category__card:hover .shop-category__card-icon i {
  color: var(--color-logo-gold-light);
}


/* --- Card Body --- */

.shop-category__card-body {
  flex: 1;
  min-height: 52px;
}

.shop-category__card-name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  transition: color 0.4s ease;
}

.shop-category__card:hover .shop-category__card-name {
  color: var(--color-logo-gold-light);
}

.shop-category__card-desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), 0.4);
  margin-bottom: 0;
  transition: color 0.4s ease;
}

.shop-category__card:hover .shop-category__card-desc {
  color: rgba(var(--color-white-rgb), 0.55);
}


/* --- Card Arrow --- */

.shop-category__card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: var(--space-4);
  color: rgba(var(--color-white-rgb), 0.25);
  /* GPU-accelerated arrow slide */
  transform: translate(0, 0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.4s ease;
}

.shop-category__card:hover .shop-category__card-arrow {
  transform: translate(4px, -4px);
  color: var(--color-logo-gold);
}

.shop-category__card-arrow i {
  font-size: 1.25rem;
}


/* ==============================================================
   SHOP BY CATEGORY — RESPONSIVE
   ============================================================== */

/* Tablet — 2 columns */
@media (max-width: 1024px) {
  .shop-category {
    padding-block: var(--space-20);
  }

  .shop-category__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .shop-category__header {
    margin-bottom: var(--space-12);
  }

  .shop-category__heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  }

  .shop-category__card {
    padding: var(--space-7) var(--space-5);
  }
}

/* Mobile — 1 column */
@media (max-width: 768px) {
  .shop-category {
    padding-block: var(--space-16);
  }

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

  .shop-category__header {
    margin-bottom: var(--space-10);
  }

  .shop-category__heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .shop-category__description {
    font-size: var(--font-size-sm);
    max-width: 400px;
  }

  .shop-category__card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  .shop-category__card-icon {
    margin-bottom: 0;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .shop-category__card-icon i {
    font-size: 1.35rem;
  }

  .shop-category__card-body {
    min-height: auto;
    flex: 1;
  }

  .shop-category__card-arrow {
    margin-top: 0;
    flex-shrink: 0;
  }

  /* Simpler hover on touch devices — less dramatic lift */
  .shop-category__card:hover {
    transform: translateY(-3px);
  }

  /* Hide blueprint pattern on mobile */
  .shop-category__blueprint {
    display: none;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .shop-category {
    padding-block: var(--space-12);
  }

  .shop-category__heading {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .shop-category__card {
    padding: var(--space-4) var(--space-5);
  }

  .shop-category__card-icon {
    width: 42px;
    height: 42px;
  }

  .shop-category__card-icon i {
    font-size: 1.15rem;
  }

  .shop-category__card-name {
    font-size: var(--font-size-base);
  }

  .shop-category__card-desc {
    font-size: var(--font-size-xs);
  }
}

/* Ultra-wide — wider container, larger cards */
@media (min-width: 1440px) {
  .shop-category {
    padding-block: var(--space-32);
  }

  .shop-category__heading {
    font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  }

  .shop-category__description {
    font-size: var(--font-size-md);
    max-width: 540px;
  }

  .shop-category__grid {
    gap: var(--space-8);
  }

  .shop-category__card {
    padding: var(--space-10) var(--space-8);
  }

  .shop-category__card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-6);
  }

  .shop-category__card-icon i {
    font-size: 1.8rem;
  }

  .shop-category__card-name {
    font-size: var(--font-size-lg);
  }

  .shop-category__glow--top {
    width: 1200px;
    height: 600px;
  }
}


/* ==============================================================
   26. FEATURED PRODUCTS
   ----------------------------------------------------------------
   Premium product showcase section with:
   - Dark navy gradient background with blueprint pattern and gold glow
   - Centered section header (label, heading, description)
   - 8 dark navy glass product cards in a responsive grid
   - Each card: image placeholder, name, description, price, 2 buttons
   - Intersection Observer staggered entrance (header + cards)
   - Hover: card lift, gold border glow, image zoom, button animation
   - Grid: 4 cols desktop → 2 cols tablet → 1 col mobile
   - Add to Cart button triggers JS (localStorage)
   - View All Products centered CTA below grid
   - GPU-accelerated only (transform + opacity), plays once
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Section Container --- */

.featured-products {
  position: relative;
  overflow: hidden;
  /* Deep navy base — slightly different shade for visual separation */
  background-color: #080f1e;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.5) 0%,
      transparent 6%,
      transparent 94%,
      rgba(4, 8, 16, 0.6) 100%
    );
  padding-block: var(--space-24);
}


/* --- Background Effects --- */

.featured-products__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Left gold glow */
.featured-products__glow--left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 600px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Right gold glow */
.featured-products__glow--right {
  position: absolute;
  bottom: 10%;
  right: -100px;
  width: 500px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint grid pattern — extremely faint */
.featured-products__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.featured-products__container {
  position: relative;
  z-index: 2;
}


/* --- Section Header --- */

.featured-products__header {
  text-align: center;
  margin-bottom: var(--space-16);
  /* Start invisible — animate in via IntersectionObserver */
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-products.is-visible .featured-products__header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Small label */
.featured-products__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

/* Main heading */
.featured-products__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Description */
.featured-products__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 520px;
  margin-inline: auto;
}


/* --- Product Grid --- */

.featured-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}


/* --- Product Card — Dark Navy Glass --- */

.featured-products__card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Dark navy glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  /* GPU-accelerated transitions */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  /* Staggered entrance */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Visible state — transition set by JS inline delay */
.featured-products.is-visible .featured-products__card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}


/* --- Card Hover Effects --- */

.featured-products__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.3);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.05);
}

/* Visible focus for keyboard */
.featured-products__card:focus-within {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}


/* --- Card Image Area --- */

.featured-products__card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Subtle inner glow at bottom for depth */
  background: linear-gradient(
    180deg,
    rgba(var(--color-primary-navy-rgb), 0.4) 0%,
    rgba(var(--color-primary-navy-rgb), 0.8) 100%
  );
  /* GPU-accelerated zoom on hover */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-products__card:hover .featured-products__card-image {
  transform: scale(1.03);
}

/* Image placeholder — shows when no real image exists */
.featured-products__card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle icon styling */
  color: rgba(var(--color-logo-gold-rgb), 0.15);
  font-size: 3rem;
  transition: color 0.4s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-products__card:hover .featured-products__card-placeholder {
  color: rgba(var(--color-logo-gold-rgb), 0.25);
  transform: scale(1.08);
}

/* If a real image is added later */
.featured-products__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-products__card:hover .featured-products__card-image img {
  transform: scale(1.08);
}


/* --- Card Body --- */

.featured-products__card-body {
  padding: var(--space-5) var(--space-6) var(--space-3);
  flex: 1;
}

.featured-products__card-name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.4s ease;
}

.featured-products__card:hover .featured-products__card-name {
  color: var(--color-logo-gold-light);
}

.featured-products__card-desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), 0.4);
  margin-bottom: var(--space-3);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.4s ease;
}

.featured-products__card:hover .featured-products__card-desc {
  color: rgba(var(--color-white-rgb), 0.55);
}

.featured-products__card-price {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-logo-gold);
  letter-spacing: var(--letter-spacing-wide);
}


/* --- Card Action Buttons --- */

.featured-products__card-actions {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-6);
}

.featured-products__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  /* GPU-accelerated button hover */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

/* View Details — outlined style */
.featured-products__btn--details {
  background: transparent;
  color: rgba(var(--color-white-rgb), 0.7);
  border: 1px solid rgba(var(--color-white-rgb), 0.15);
}

.featured-products__btn--details:hover {
  color: var(--color-white);
  border-color: rgba(var(--color-white-rgb), 0.3);
  background: rgba(var(--color-white-rgb), 0.05);
}

.featured-products__btn--details:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Add to Cart — gold filled style */
.featured-products__btn--cart {
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  color: var(--color-logo-gold);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
}

.featured-products__btn--cart:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.25);
  border-color: rgba(var(--color-logo-gold-rgb), 0.35);
  transform: translateY(-1px);
  color: var(--color-logo-gold-light);
}

.featured-products__btn--cart:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Add to Cart — success state (brief flash after click) */
.featured-products__btn--cart.is-added {
  background: rgba(var(--color-logo-gold-rgb), 0.3);
  color: var(--color-logo-gold-light);
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
}

.featured-products__btn--cart i {
  font-size: 0.95rem;
}


/* --- View All Products CTA --- */

.featured-products__cta {
  text-align: center;
  margin-top: var(--space-16);
  /* Entrance animation — follows header timing */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s;
}

.featured-products.is-visible .featured-products__cta {
  opacity: 1;
  transform: translateY(0);
}

.featured-products__btn-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  color: var(--color-white);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.2) 0%,
    rgba(var(--color-logo-gold-rgb), 0.1) 100%
  );
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.3);
  border-radius: var(--radius-full);
  text-decoration: none;
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.featured-products__btn-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.3) 0%,
    rgba(var(--color-logo-gold-rgb), 0.15) 100%
  );
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  box-shadow: 0 8px 24px rgba(var(--color-logo-gold-rgb), 0.12);
}

.featured-products__btn-cta:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}

.featured-products__btn-cta i {
  font-size: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-products__btn-cta:hover i {
  transform: translateX(4px);
}


/* ==============================================================
   FEATURED PRODUCTS — RESPONSIVE
   ============================================================== */

/* Tablet — 2 columns */
@media (max-width: 1024px) {
  .featured-products {
    padding-block: var(--space-20);
  }

  .featured-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .featured-products__header {
    margin-bottom: var(--space-12);
  }

  .featured-products__heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  }

  .featured-products__cta {
    margin-top: var(--space-12);
  }
}

/* Mobile — 1 column */
@media (max-width: 768px) {
  .featured-products {
    padding-block: var(--space-16);
  }

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

  .featured-products__header {
    margin-bottom: var(--space-10);
  }

  .featured-products__heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .featured-products__description {
    font-size: var(--font-size-sm);
    max-width: 400px;
  }

  .featured-products__card-body {
    padding: var(--space-4) var(--space-5) var(--space-3);
  }

  .featured-products__card-actions {
    padding: 0 var(--space-5) var(--space-5);
  }

  .featured-products__cta {
    margin-top: var(--space-10);
  }

  /* Simpler hover on touch */
  .featured-products__card:hover {
    transform: translateY(-3px);
  }

  .featured-products__card:hover .featured-products__card-image {
    transform: none;
  }

  /* Hide blueprint on mobile */
  .featured-products__blueprint {
    display: none;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .featured-products {
    padding-block: var(--space-12);
  }

  .featured-products__heading {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .featured-products__card-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .featured-products__btn {
    justify-content: center;
    padding: var(--space-3) var(--space-4);
  }

  .featured-products__btn-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Ultra-wide */
@media (min-width: 1440px) {
  .featured-products {
    padding-block: var(--space-32);
  }

  .featured-products__heading {
    font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  }

  .featured-products__description {
    font-size: var(--font-size-md);
    max-width: 560px;
  }

  .featured-products__grid {
    gap: var(--space-8);
  }

  .featured-products__card-body {
    padding: var(--space-6) var(--space-8) var(--space-4);
  }

  .featured-products__card-actions {
    padding: 0 var(--space-8) var(--space-8);
  }

  .featured-products__card-name {
    font-size: var(--font-size-md);
  }

  .featured-products__card-price {
    font-size: var(--font-size-lg);
  }

  .featured-products__btn {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-5);
  }

  .featured-products__cta {
    margin-top: var(--space-20);
  }

  .featured-products__glow--left {
    width: 800px;
    height: 600px;
  }

  .featured-products__glow--right {
    width: 700px;
    height: 550px;
  }
}


/* ==============================================================
   27. WHY CHOOSE SANDU MOTORS
   ----------------------------------------------------------------
   Trust-building split-layout section with:
   - Deep navy gradient background with blueprint pattern & gold glow
   - Centered section header (label, heading, description)
   - Left (55%): premium automotive image with rounded corners & luxury shadow
   - Right (45%): four dark navy glass feature cards
   - Intersection Observer: image from left, cards from right (staggered)
   - Hover: card lift, gold border glow, icon scale, shadow deepens
   - Gold CTA button → shop.html
   - Responsive: desktop/laptop 2-col → tablet/mobile stacked & centered
   - GPU-accelerated only (transform + opacity), plays once
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Section Container --- */

.why-choose {
  position: relative;
  overflow: hidden;
  /* Deep navy base with subtle gradient variation */
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}


/* --- Background Effects --- */

.why-choose__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Left gold ambient glow */
.why-choose__glow--left {
  position: absolute;
  top: 10%;
  left: -80px;
  width: 500px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Right gold ambient glow */
.why-choose__glow--right {
  position: absolute;
  bottom: 5%;
  right: -60px;
  width: 450px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint grid pattern — extremely faint */
.why-choose__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.why-choose__container {
  position: relative;
  z-index: 2;
}


/* --- Section Header --- */

.why-choose__header {
  text-align: center;
  margin-bottom: var(--space-16);
  /* Entrance animation — starts hidden */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-choose.is-visible .why-choose__header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Small label */
.why-choose__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

/* Main heading */
.why-choose__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Description */
.why-choose__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 520px;
  margin-inline: auto;
}


/* --- Two-Column Content Layout --- */

.why-choose__content {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}


/* --- Left — Premium Image --- */

.why-choose__image-wrapper {
  /* 55% width */
  flex: 0 0 55%;
  max-width: 55%;
  /* Entrance animation — slides in from the left */
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-choose.is-visible .why-choose__image-wrapper {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.25s;
}

.why-choose__image {
  display: block;
  width: 100%;
  height: auto;
  /* Rounded corners */
  border-radius: var(--radius-2xl);
  /* Luxury shadow with navy and gold tint — enhanced for visibility */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(var(--color-logo-gold-rgb), 0.08),
    0 0 120px rgba(var(--color-logo-gold-rgb), 0.04);
  /* Visible gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
  /* GPU-accelerated */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s ease;
  object-fit: cover;
}

.why-choose__image:hover {
  transform: scale(1.02);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(var(--color-logo-gold-rgb), 0.06),
    inset 0 0 0 1px rgba(var(--color-logo-gold-rgb), 0.12);
}


/* --- Right — Feature Cards Column --- */

.why-choose__features {
  /* 45% width */
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Entrance animation — slides in from the right */
  opacity: 0;
  transform: translateX(40px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-choose.is-visible .why-choose__features {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.35s;
}


/* --- Feature Card — Dark Navy Glass --- */

.why-choose__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  /* Dark navy glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.15);
  /* GPU-accelerated transitions */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
  /* Staggered entrance — each card starts hidden */
  opacity: 0;
  transform: translateX(30px);
  will-change: transform, opacity;
}

/* Visible state — transition delay set by JS inline style */
.why-choose.is-visible .why-choose__card {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}


/* --- Card Hover Effects --- */

.why-choose__card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.3);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 28px rgba(var(--color-logo-gold-rgb), 0.05);
  background: rgba(var(--color-primary-navy-rgb), 0.7);
}

/* Visible focus state for keyboard navigation */
.why-choose__card:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}


/* --- Card Icon --- */

.why-choose__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  /* Subtle icon background */
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: var(--radius-lg);
  color: var(--color-logo-gold);
  font-size: 1.4rem;
  /* GPU-accelerated icon hover */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s ease,
              border-color 0.4s ease,
              color 0.4s ease;
}

.why-choose__card:hover .why-choose__card-icon {
  transform: scale(1.1);
  background: rgba(var(--color-logo-gold-rgb), 0.14);
  border-color: rgba(var(--color-logo-gold-rgb), 0.2);
  color: var(--color-logo-gold-light);
}


/* --- Card Body (text) --- */

.why-choose__card-body {
  flex: 1;
  min-width: 0;
}

.why-choose__card-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  margin-bottom: var(--space-1);
  transition: color 0.4s ease;
}

.why-choose__card:hover .why-choose__card-title {
  color: var(--color-logo-gold-light);
}

.why-choose__card-desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: rgba(var(--color-white-rgb), 0.45);
  transition: color 0.4s ease;
}

.why-choose__card:hover .why-choose__card-desc {
  color: rgba(var(--color-white-rgb), 0.6);
}


/* --- CTA Button (Gold filled) --- */

.why-choose__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  /* Gold background — dark navy text */
  color: var(--color-primary-navy);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold) 0%,
    var(--color-logo-gold-light) 100%
  );
  border: none;
  border-radius: var(--radius-full);
  text-decoration: none;
  /* Luxury shadow */
  box-shadow:
    0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3),
    0 1px 4px rgba(var(--color-logo-gold-rgb), 0.15);
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background 0.4s ease;
  /* Entrance animation — follows the features column timing */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.why-choose.is-visible .why-choose__btn {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background 0.4s ease;
  /* Delay after last card: 0.35 + (3 × 0.12) + 0.15 ≈ 0.86s */
  transition-delay: 0.86s;
}

.why-choose__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold-light) 0%,
    var(--color-logo-gold) 100%
  );
  box-shadow:
    0 8px 28px rgba(var(--color-logo-gold-rgb), 0.4),
    0 2px 8px rgba(var(--color-logo-gold-rgb), 0.2);
}

.why-choose__btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.why-choose__btn i {
  font-size: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-choose__btn:hover i {
  transform: translateX(4px);
}


/* ==============================================================
   WHY CHOOSE SANDU MOTORS — RESPONSIVE
   ============================================================== */

/* Laptop — slightly tighter spacing */
@media (max-width: 1280px) {
  .why-choose {
    padding-block: var(--space-20);
  }

  .why-choose__content {
    gap: var(--space-8);
  }

  .why-choose__image-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .why-choose__features {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Tablet — 2 columns stack to 1 column */
@media (max-width: 1024px) {
  .why-choose {
    padding-block: var(--space-20);
  }

  .why-choose__header {
    margin-bottom: var(--space-12);
  }

  .why-choose__heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  }

  .why-choose__content {
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
  }

  .why-choose__image-wrapper {
    flex: 0 0 auto;
    max-width: 480px;
    width: 100%;
  }

  .why-choose__features {
    flex: 0 0 auto;
    max-width: 560px;
    width: 100%;
  }
}

/* Mobile — centered single column */
@media (max-width: 768px) {
  .why-choose {
    padding-block: var(--space-16);
  }

  .why-choose__header {
    margin-bottom: var(--space-10);
  }

  .why-choose__heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .why-choose__description {
    font-size: var(--font-size-sm);
    max-width: 400px;
  }

  .why-choose__content {
    gap: var(--space-8);
  }

  .why-choose__image-wrapper {
    max-width: 360px;
  }

  .why-choose__features {
    max-width: 100%;
  }

  /* Cards slightly more compact */
  .why-choose__card {
    padding: var(--space-4) var(--space-5);
  }

  .why-choose__card-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
  }

  /* Simpler hover on touch */
  .why-choose__card:hover {
    transform: translateY(-2px);
  }

  .why-choose__image:hover {
    transform: none;
  }

  /* Hide blueprint on mobile */
  .why-choose__blueprint {
    display: none;
  }

  /* Button full width */
  .why-choose__btn {
    width: 100%;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .why-choose {
    padding-block: var(--space-12);
  }

  .why-choose__heading {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .why-choose__image-wrapper {
    max-width: 300px;
  }

  .why-choose__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
  }

  .why-choose__btn {
    justify-content: center;
    padding: var(--space-4) var(--space-6);
  }
}

/* Ultra-wide */
@media (min-width: 1440px) {
  .why-choose {
    padding-block: var(--space-32);
  }

  .why-choose__heading {
    font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  }

  .why-choose__description {
    font-size: var(--font-size-md);
    max-width: 560px;
  }

  .why-choose__content {
    gap: var(--space-16);
  }

  .why-choose__card {
    padding: var(--space-6) var(--space-8);
    gap: var(--space-5);
  }

  .why-choose__card-icon {
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
  }

  .why-choose__card-title {
    font-size: var(--font-size-md);
  }

  .why-choose__card-desc {
    font-size: var(--font-size-base);
  }

  .why-choose__btn {
    font-size: var(--font-size-base);
    padding: var(--space-5) var(--space-10);
  }

  .why-choose__glow--left {
    width: 700px;
    height: 600px;
  }

  .why-choose__glow--right {
    width: 600px;
    height: 500px;
  }
}


/* ==============================================================
   28. HOW ORDERING WORKS
   ----------------------------------------------------------------
   Four-step process timeline with:
   - Deep navy gradient background with blueprint pattern & gold glow
   - Centered section header (label, heading, description)
   - 4 dark navy glass step cards in a horizontal grid (desktop)
   - Gold connecting line that expands left→right on scroll
   - Each card: large step number, outline icon, title, description
   - Hover: lift, gold border glow, icon scale, shadow deepens
   - Gold CTA button → shop.html
   - Desktop: 4-col horizontal → Tablet: 2×2 grid → Mobile: vertical timeline
   - GPU-accelerated only (transform + opacity), plays once
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Section Container --- */

.ordering-steps {
  position: relative;
  overflow: hidden;
  /* Deep navy base with subtle gradient */
  background-color: #070e1c;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.45) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.55) 100%
    );
  padding-block: var(--space-24);
}


/* --- Background Effects --- */

.ordering-steps__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.ordering-steps__glow--left {
  position: absolute;
  top: 15%;
  left: -100px;
  width: 550px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.ordering-steps__glow--right {
  position: absolute;
  bottom: 10%;
  right: -80px;
  width: 500px;
  height: 420px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint grid — extremely faint */
.ordering-steps__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.ordering-steps__container {
  position: relative;
  z-index: 2;
}


/* --- Section Header --- */

.ordering-steps__header {
  text-align: center;
  margin-bottom: var(--space-16);
  /* Entrance animation — starts hidden */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ordering-steps.is-visible .ordering-steps__header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.ordering-steps__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

.ordering-steps__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.ordering-steps__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 520px;
  margin-inline: auto;
}


/* --- Timeline Grid (holds cards + connecting line) --- */

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


/* --- Gold Connecting Line --- */

.ordering-steps__line {
  position: absolute;
  /* Horizontally centered, vertically aligned to card icon centers */
  top: 56px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(var(--color-logo-gold-rgb), 0.5) 0%,
    rgba(var(--color-logo-gold-rgb), 0.25) 100%
  );
  border-radius: var(--radius-full);
  /* Starts at 0 width, expands to full */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ordering-steps.is-visible .ordering-steps__line {
  transform: scaleX(1);
  /* Delay: after header, before cards */
  transition-delay: 0.2s;
}


/* --- Step Card — Dark Navy Glass --- */

.ordering-steps__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5) var(--space-6);
  /* Dark navy glass */
  background: rgba(var(--color-primary-navy-rgb), 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.15);
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
  /* Staggered entrance */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Visible state — delay set by JS inline style */
.ordering-steps.is-visible .ordering-steps__card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}


/* --- Card Hover --- */

.ordering-steps__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.35);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 28px rgba(var(--color-logo-gold-rgb), 0.06);
  background: rgba(var(--color-primary-navy-rgb), 0.75);
}

.ordering-steps__card:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}


/* --- Step Number --- */

.ordering-steps__number {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: rgba(var(--color-logo-gold-rgb), 0.07);
  pointer-events: none;
  user-select: none;
  transition: color 0.4s ease;
}

.ordering-steps__card:hover .ordering-steps__number {
  color: rgba(var(--color-logo-gold-rgb), 0.12);
}


/* --- Card Icon --- */

.ordering-steps__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  /* Icon background */
  background: rgba(var(--color-logo-gold-rgb), 0.06);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  border-radius: var(--radius-xl);
  color: var(--color-logo-gold);
  font-size: 1.5rem;
  /* GPU-accelerated */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s ease,
              border-color 0.4s ease,
              color 0.4s ease;
}

.ordering-steps__card:hover .ordering-steps__card-icon {
  transform: scale(1.1);
  background: rgba(var(--color-logo-gold-rgb), 0.12);
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
  color: var(--color-logo-gold-light);
}


/* --- Card Body --- */

.ordering-steps__card-body {
  flex: 1;
}

.ordering-steps__card-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  transition: color 0.4s ease;
}

.ordering-steps__card:hover .ordering-steps__card-title {
  color: var(--color-logo-gold-light);
}

.ordering-steps__card-desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: rgba(var(--color-white-rgb), 0.45);
  transition: color 0.4s ease;
}

.ordering-steps__card:hover .ordering-steps__card-desc {
  color: rgba(var(--color-white-rgb), 0.6);
}


/* --- Bottom CTA (Gold filled) --- */

.ordering-steps__cta {
  text-align: center;
  /* Entrance animation */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ordering-steps.is-visible .ordering-steps__cta {
  opacity: 1;
  transform: translateY(0);
  /* Delay after all cards: 0.4 + (3 × 0.12) + 0.2 ≈ 0.96s */
  transition-delay: 0.96s;
}

.ordering-steps__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  /* Gold background — dark navy text */
  color: var(--color-primary-navy);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold) 0%,
    var(--color-logo-gold-light) 100%
  );
  border: none;
  border-radius: var(--radius-full);
  text-decoration: none;
  /* Luxury shadow */
  box-shadow:
    0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3),
    0 1px 4px rgba(var(--color-logo-gold-rgb), 0.15);
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.ordering-steps__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold-light) 0%,
    var(--color-logo-gold) 100%
  );
  box-shadow:
    0 8px 28px rgba(var(--color-logo-gold-rgb), 0.4),
    0 2px 8px rgba(var(--color-logo-gold-rgb), 0.2);
}

.ordering-steps__btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.ordering-steps__btn i {
  font-size: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ordering-steps__btn:hover i {
  transform: translateX(4px);
}


/* ==============================================================
   HOW ORDERING WORKS — RESPONSIVE
   ============================================================== */

/* Laptop */
@media (max-width: 1280px) {
  .ordering-steps {
    padding-block: var(--space-20);
  }

  .ordering-steps__timeline {
    gap: var(--space-5);
  }
}

/* Tablet — 2×2 grid + vertical line */
@media (max-width: 1024px) {
  .ordering-steps {
    padding-block: var(--space-20);
  }

  .ordering-steps__header {
    margin-bottom: var(--space-12);
  }

  .ordering-steps__heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  }

  .ordering-steps__timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* Reposition line for 2-col layout */
  .ordering-steps__line {
    display: none;
  }

  .ordering-steps__cta {
    margin-top: var(--space-8);
  }
}

/* Mobile — vertical timeline */
@media (max-width: 768px) {
  .ordering-steps {
    padding-block: var(--space-16);
  }

  .ordering-steps__header {
    margin-bottom: var(--space-10);
  }

  .ordering-steps__heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .ordering-steps__description {
    font-size: var(--font-size-sm);
    max-width: 400px;
  }

  .ordering-steps__timeline {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 400px;
    margin-inline: auto;
    margin-bottom: var(--space-12);
  }

  /* Vertical connecting line on mobile */
  .ordering-steps__line {
    display: block;
    top: 32px;
    bottom: 32px;
    left: 32px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
    background: linear-gradient(
      180deg,
      rgba(var(--color-logo-gold-rgb), 0.5) 0%,
      rgba(var(--color-logo-gold-rgb), 0.15) 100%
    );
  }

  .ordering-steps.is-visible .ordering-steps__line {
    transform: scaleY(1);
  }

  /* Cards become horizontal (icon left, text right) */
  .ordering-steps__card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12);
    border-radius: var(--radius-xl);
  }

  .ordering-steps__card-icon {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }

  /* Reposition step number */
  .ordering-steps__number {
    top: var(--space-4);
    right: auto;
    left: var(--space-1);
    font-size: var(--font-size-2xl);
  }

  /* Simpler hover on touch */
  .ordering-steps__card:hover {
    transform: translateY(-3px);
  }

  /* Hide blueprint on mobile */
  .ordering-steps__blueprint {
    display: none;
  }

  /* Button full width */
  .ordering-steps__btn {
    width: 100%;
    max-width: 400px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .ordering-steps {
    padding-block: var(--space-12);
  }

  .ordering-steps__heading {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .ordering-steps__timeline {
    max-width: 100%;
  }

  .ordering-steps__card {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
  }

  .ordering-steps__card-icon {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }

  .ordering-steps__btn {
    padding: var(--space-4) var(--space-6);
  }
}

/* Ultra-wide */
@media (min-width: 1440px) {
  .ordering-steps {
    padding-block: var(--space-32);
  }

  .ordering-steps__heading {
    font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  }

  .ordering-steps__description {
    font-size: var(--font-size-md);
    max-width: 560px;
  }

  .ordering-steps__timeline {
    gap: var(--space-8);
  }

  .ordering-steps__card {
    padding: var(--space-10) var(--space-6) var(--space-8);
  }

  .ordering-steps__card-icon {
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
    margin-bottom: var(--space-6);
  }

  .ordering-steps__card-title {
    font-size: var(--font-size-md);
  }

  .ordering-steps__card-desc {
    font-size: var(--font-size-base);
  }

  .ordering-steps__btn {
    font-size: var(--font-size-base);
    padding: var(--space-5) var(--space-10);
  }

  .ordering-steps__cta {
    margin-top: var(--space-4);
  }

  .ordering-steps__glow--left {
    width: 700px;
    height: 550px;
  }

  .ordering-steps__glow--right {
    width: 600px;
    height: 500px;
  }
}


/* ==============================================================
   29. FREQUENTLY ASKED QUESTIONS
   ----------------------------------------------------------------
   Two-column FAQ layout with:
   - Left: heading, description, decorative illustration
   - Right: interactive accordion (one-at-a-time open)
   - Smooth height animation via grid-template-rows
   - Dark navy glass cards with thin gold borders
   - Chevron rotation on open/close
   - IntersectionObserver staggered entrance
   - Keyboard-accessible, ARIA-compliant
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Section Base --- */

.faq {
  position: relative;
  overflow: hidden;
  /* Deep navy base with subtle gradient variation */
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}


/* --- Background Effects --- */

.faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Left gold ambient glow */
.faq__glow--left {
  position: absolute;
  top: 15%;
  left: -80px;
  width: 500px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Right gold ambient glow */
.faq__glow--right {
  position: absolute;
  bottom: 10%;
  right: -60px;
  width: 450px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint grid pattern — extremely faint */
.faq__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.faq__container {
  position: relative;
  z-index: 2;
}


/* --- Section Header (within .faq__info) --- */

.faq__info {
  /* Entrance animation — slides in from the left */
  opacity: 0;
  transform: translateX(-30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq.is-visible .faq__info {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Small label */
.faq__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

/* Main heading */
.faq__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Description */
.faq__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 400px;
  margin-bottom: var(--space-8);
}


/* --- Decorative Illustration (left side) --- */

.faq__illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  margin-top: var(--space-4);
  /* Gentle pulse */
  animation: faq-illustration-pulse 4s ease-in-out infinite;
}

@keyframes faq-illustration-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Outer ring */
.faq__illustration-ring--outer {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: 50%;
  animation: faq-ring-spin 20s linear infinite;
}

/* Inner ring */
.faq__illustration-ring--inner {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border: 1px dashed rgba(var(--color-logo-gold-rgb), 0.08);
  border-radius: 50%;
  animation: faq-ring-spin 15s linear infinite reverse;
}

@keyframes faq-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Center icon */
.faq__illustration-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: rgba(var(--color-logo-gold-rgb), 0.06);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  border-radius: 50%;
  color: var(--color-logo-gold);
  font-size: 2rem;
}

/* Decorative floating dots */
.faq__illustration-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(var(--color-logo-gold-rgb), 0.25);
  border-radius: 50%;
}

.faq__illustration-dot--1 {
  top: 12px;
  right: 30px;
  animation: faq-dot-float 3s ease-in-out infinite;
}

.faq__illustration-dot--2 {
  bottom: 20px;
  left: 18px;
  width: 4px;
  height: 4px;
  animation: faq-dot-float 3.5s ease-in-out infinite 0.5s;
}

.faq__illustration-dot--3 {
  top: 50%;
  right: 8px;
  width: 5px;
  height: 5px;
  animation: faq-dot-float 2.8s ease-in-out infinite 1s;
}

@keyframes faq-dot-float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(-8px); opacity: 1; }
}

/* Reduced motion — stop illustration animations */
@media (prefers-reduced-motion: reduce) {
  .faq__illustration {
    animation: none;
  }
  .faq__illustration-ring--outer,
  .faq__illustration-ring--inner {
    animation: none;
  }
  .faq__illustration-dot {
    animation: none;
  }
}


/* --- Two-Column Layout --- */

.faq__layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

/* Left info column */
.faq__info {
  flex: 0 0 38%;
  max-width: 38%;
}

/* Right accordion column — entrance animation */
.faq__accordion {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Entrance — fades in from the right with slight delay */
  opacity: 0;
  transform: translateX(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq.is-visible .faq__accordion {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}


/* --- Accordion Item --- */

.faq__item {
  /* Dark navy glass card */
  background: rgba(var(--color-primary-navy-rgb), 0.6);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(var(--color-logo-gold-rgb), 0.02);
  /* Entrance — each card fades in with stagger (set via JS) */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}

.faq.is-visible .faq__item {
  opacity: 1;
  transform: translateY(0);
}

/* Hover — subtle glow on closed items */
.faq__item:hover {
  border-color: rgba(var(--color-logo-gold-rgb), 0.2);
  background: rgba(var(--color-primary-navy-rgb), 0.7);
}

/* Open item — stronger gold border */
.faq__item.is-open {
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(var(--color-logo-gold-rgb), 0.04);
}


/* --- Accordion Question (Button) --- */

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  /* Text styling */
  text-align: left;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  /* Transition for text color */
  transition: color 0.3s ease;
}

/* Question text color on hover / open */
.faq__item:hover .faq__question,
.faq__item.is-open .faq__question {
  color: var(--color-logo-gold-light);
}

/* Chevron icon */
.faq__chevron {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--color-logo-gold);
  /* Smooth rotation */
  transform: rotate(0deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.3s ease;
}

/* Rotate chevron when open */
.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
  color: var(--color-logo-gold-light);
}

/* Focus visible — keyboard accessibility */
.faq__question:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: -2px;
  border-radius: var(--radius-xl);
}


/* --- Accordion Answer (smooth height via grid) --- */

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  /* Smooth height transition */
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq__answer-text {
  padding: 0 var(--space-6) var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.55);
}


/* --- Bottom CTA Button --- */

.faq__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
  /* Entrance animation */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* Delay after accordion finishes: ~0.2s base + 0.8s cards = 1.0s */
  transition-delay: 1s;
}

.faq.is-visible .faq__cta {
  opacity: 1;
  transform: translateY(0);
}

.faq__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  /* Gold background — dark navy text */
  color: var(--color-primary-navy);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold) 0%,
    var(--color-logo-gold-light) 100%
  );
  border: none;
  border-radius: var(--radius-full);
  text-decoration: none;
  /* Luxury shadow */
  box-shadow:
    0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3),
    0 1px 4px rgba(var(--color-logo-gold-rgb), 0.15);
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.faq__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold-light) 0%,
    var(--color-logo-gold) 100%
  );
  box-shadow:
    0 8px 28px rgba(var(--color-logo-gold-rgb), 0.4),
    0 2px 8px rgba(var(--color-logo-gold-rgb), 0.2);
}

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

.faq__btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
}

.faq__btn-arrow i {
  font-size: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__btn:hover .faq__btn-arrow i {
  transform: translateX(4px);
}


/* ==============================================================
   FAQ — RESPONSIVE
   ============================================================== */

/* Laptop — slightly tighter spacing */
@media (max-width: 1280px) {
  .faq {
    padding-block: var(--space-20);
  }

  .faq__layout {
    gap: var(--space-10);
  }

  .faq__info {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .faq__illustration {
    width: 180px;
    height: 180px;
  }

  .faq__illustration-icon {
    width: 68px;
    height: 68px;
    font-size: 1.7rem;
  }
}

/* Tablet — single column, illustration stacks above */
@media (max-width: 1024px) {
  .faq {
    padding-block: var(--space-20);
  }

  .faq__heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  }

  .faq__layout {
    flex-direction: column;
    gap: var(--space-10);
  }

  .faq__info {
    flex: 0 0 auto;
    max-width: 100%;
    text-align: center;
  }

  .faq__description {
    margin-inline: auto;
  }

  /* Center the illustration */
  .faq__illustration {
    margin-inline: auto;
    margin-top: var(--space-6);
    width: 160px;
    height: 160px;
  }

  .faq__illustration-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  /* Accordion takes full width */
  .faq__accordion {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }

  /* Center CTA */
  .faq__cta {
    margin-top: var(--space-10);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .faq {
    padding-block: var(--space-16);
  }

  .faq__heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .faq__description {
    font-size: var(--font-size-sm);
    max-width: 360px;
  }

  .faq__layout {
    gap: var(--space-8);
  }

  .faq__illustration {
    width: 140px;
    height: 140px;
    margin-top: var(--space-4);
  }

  .faq__illustration-ring--inner {
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .faq__illustration-icon {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }

  .faq__question {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
  }

  .faq__chevron {
    font-size: 1.2rem;
  }

  .faq__answer-text {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--font-size-sm);
    line-height: 1.65;
  }

  .faq__accordion {
    max-width: 100%;
  }

  /* Hide blueprint on mobile */
  .faq__blueprint {
    display: none;
  }

  /* Button slightly smaller */
  .faq__btn {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-xs);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .faq {
    padding-block: var(--space-12);
  }

  .faq__heading {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .faq__description {
    font-size: var(--font-size-xs);
  }

  .faq__illustration {
    width: 110px;
    height: 110px;
  }

  .faq__illustration-ring--inner {
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .faq__illustration-icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .faq__question {
    padding: var(--space-3) var(--space-4);
    font-size: 0.8125rem;
    gap: var(--space-3);
  }

  .faq__chevron {
    font-size: 1.1rem;
  }

  .faq__answer-text {
    padding: 0 var(--space-4) var(--space-4);
    font-size: var(--font-size-xs);
  }

  .faq__btn {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
  .faq {
    padding-block: var(--space-32);
  }

  .faq__heading {
    font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  }

  .faq__description {
    font-size: var(--font-size-md);
    max-width: 440px;
  }

  .faq__layout {
    gap: var(--space-20);
  }

  .faq__info {
    flex: 0 0 36%;
    max-width: 36%;
  }

  .faq__question {
    font-size: var(--font-size-md);
    padding: var(--space-6) var(--space-8);
  }

  .faq__answer-text {
    padding: 0 var(--space-8) var(--space-8);
    font-size: var(--font-size-base);
  }

  .faq__illustration {
    width: 260px;
    height: 260px;
  }

  .faq__illustration-icon {
    width: 96px;
    height: 96px;
    font-size: 2.4rem;
  }

  .faq__btn {
    font-size: var(--font-size-base);
    padding: var(--space-5) var(--space-10);
  }

  .faq__glow--left {
    width: 700px;
    height: 550px;
  }

  .faq__glow--right {
    width: 600px;
    height: 500px;
  }
}


/* ==============================================================
   30. PREMIUM CONTACT CALL TO ACTION
   ----------------------------------------------------------------
   High-conversion CTA section with:
   - Deep navy background with gold glows and blueprint pattern
   - Centered premium card (glass effect, gold border, luxury shadow)
   - Animated automotive circuit/geometry decoration
   - Two CTA buttons: gold primary (Shop Now) + outlined secondary (Contact Us)
   - IntersectionObserver staggered entrance (label → heading → desc → buttons)
   - Background glow slowly fades in
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Section Base --- */

.contact-cta {
  position: relative;
  overflow: hidden;
  /* Deep navy base with subtle gradient variation */
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}


/* --- Background Effects --- */

.contact-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Left gold ambient glow — fades in when section is visible */
.contact-cta__glow--left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.05) 0%,
    rgba(var(--color-logo-gold-rgb), 0.02) 45%,
    transparent 70%
  );
  border-radius: 50%;
  /* Starts invisible, fades in */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Right gold ambient glow */
.contact-cta__glow--right {
  position: absolute;
  bottom: 15%;
  right: -80px;
  width: 450px;
  height: 380px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.2s ease 0.15s, transform 1.2s ease 0.15s;
}

/* Glows appear when section is visible */
.contact-cta.is-visible .contact-cta__glow--left,
.contact-cta.is-visible .contact-cta__glow--right {
  opacity: 1;
  transform: scale(1);
}

/* Blueprint grid pattern — extremely faint */
.contact-cta__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.contact-cta__container {
  position: relative;
  z-index: 2;
}


/* --- Premium Card (centered, glass, gold border) --- */

.contact-cta__card {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-12);
  /* Glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.5);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  border-radius: var(--radius-2xl);
  /* Luxury shadow */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 80px rgba(var(--color-logo-gold-rgb), 0.04),
    inset 0 1px 0 rgba(var(--color-logo-gold-rgb), 0.06);
  /* Text alignment */
  text-align: center;
  /* Entrance animation — fades up */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.contact-cta.is-visible .contact-cta__card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}


/* --- Animated Circuit / Geometry Decoration --- */

.contact-cta__decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Circuit lines — thin gold traces */
.contact-cta__circuit {
  position: absolute;
  background: rgba(var(--color-logo-gold-rgb), 0.04);
  border-radius: 1px;
}

/* Top-left to center horizontal line */
.contact-cta__circuit--1 {
  top: 35%;
  left: 0;
  width: 25%;
  height: 1px;
  animation: contact-cta-pulse-line 6s ease-in-out infinite;
}

/* Bottom-right horizontal line */
.contact-cta__circuit--2 {
  bottom: 30%;
  right: 0;
  width: 20%;
  height: 1px;
  animation: contact-cta-pulse-line 6s ease-in-out infinite 1.5s;
}

/* Left vertical line */
.contact-cta__circuit--3 {
  top: 25%;
  left: 8%;
  width: 1px;
  height: 30%;
  animation: contact-cta-pulse-line 7s ease-in-out infinite 3s;
}

/* Right vertical line */
.contact-cta__circuit--4 {
  bottom: 20%;
  right: 10%;
  width: 1px;
  height: 25%;
  animation: contact-cta-pulse-line 7s ease-in-out infinite 4.5s;
}

@keyframes contact-cta-pulse-line {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

/* Circuit nodes — small dots at line endpoints */
.contact-cta__node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--color-logo-gold-rgb), 0.12);
}

.contact-cta__node--1 {
  top: calc(35% - 2px);
  left: 25%;
  animation: contact-cta-pulse-node 5s ease-in-out infinite;
}

.contact-cta__node--2 {
  bottom: calc(30% - 2px);
  right: 20%;
  animation: contact-cta-pulse-node 5s ease-in-out infinite 1.5s;
}

.contact-cta__node--3 {
  top: calc(25% - 2px);
  left: calc(8% - 2px);
  animation: contact-cta-pulse-node 6s ease-in-out infinite 3s;
}

.contact-cta__node--4 {
  bottom: calc(20% - 2px);
  right: calc(10% - 2px);
  animation: contact-cta-pulse-node 6s ease-in-out infinite 4.5s;
}

@keyframes contact-cta-pulse-node {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50%      { transform: scale(1.5); opacity: 0.7; }
}

/* Reduced motion — stop decoration animations */
@media (prefers-reduced-motion: reduce) {
  .contact-cta__circuit,
  .contact-cta__node {
    animation: none;
    opacity: 0.5;
  }
}


/* --- Section Content --- */

.contact-cta__content {
  position: relative;
  z-index: 1;
}


/* --- Small Label --- */

.contact-cta__label {
  display: inline-block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
  /* Staggered entrance — delay set via JS */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta.is-visible .contact-cta__label {
  opacity: 1;
  transform: translateY(0);
}


/* --- Main Heading --- */

.contact-cta__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  /* Staggered entrance */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta.is-visible .contact-cta__heading {
  opacity: 1;
  transform: translateY(0);
}


/* --- Description --- */

.contact-cta__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 500px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  /* Staggered entrance */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta.is-visible .contact-cta__description {
  opacity: 1;
  transform: translateY(0);
}


/* --- CTA Buttons --- */

.contact-cta__buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  /* Staggered entrance — buttons appear last */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta.is-visible .contact-cta__buttons {
  opacity: 1;
  transform: translateY(0);
}


/* --- Primary Button (Gold filled — Shop Now) --- */

.contact-cta__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  /* Gold background — dark navy text */
  color: var(--color-primary-navy);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold) 0%,
    var(--color-logo-gold-light) 100%
  );
  border: none;
  border-radius: var(--radius-full);
  text-decoration: none;
  /* Luxury shadow */
  box-shadow:
    0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3),
    0 1px 4px rgba(var(--color-logo-gold-rgb), 0.15);
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.contact-cta__btn--primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--color-logo-gold-light) 0%,
    var(--color-logo-gold) 100%
  );
  box-shadow:
    0 8px 28px rgba(var(--color-logo-gold-rgb), 0.4),
    0 2px 8px rgba(var(--color-logo-gold-rgb), 0.2);
}

.contact-cta__btn--primary:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.contact-cta__btn--primary i {
  font-size: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta__btn--primary:hover i {
  transform: translateX(4px);
}


/* --- Secondary Button (Outlined — Contact Us) --- */

.contact-cta__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  /* White text */
  color: var(--color-white);
  /* Dark navy background with thin gold border */
  background: rgba(var(--color-primary-navy-rgb), 0.8);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.35);
  border-radius: var(--radius-full);
  text-decoration: none;
  /* Subtle shadow */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* GPU-accelerated hover */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.contact-cta__btn--secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.6);
  background: rgba(var(--color-primary-navy-rgb), 0.6);
  color: var(--color-logo-gold-light);
  box-shadow:
    0 4px 16px rgba(var(--color-logo-gold-rgb), 0.15),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.contact-cta__btn--secondary:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}


/* ==============================================================
   CONTACT CTA — RESPONSIVE
   ============================================================== */

/* Laptop */
@media (max-width: 1280px) {
  .contact-cta {
    padding-block: var(--space-20);
  }

  .contact-cta__card {
    padding: var(--space-14) var(--space-10);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .contact-cta {
    padding-block: var(--space-20);
  }

  .contact-cta__heading {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  }

  .contact-cta__card {
    max-width: 640px;
    padding: var(--space-12) var(--space-8);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .contact-cta {
    padding-block: var(--space-16);
  }

  .contact-cta__heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .contact-cta__description {
    font-size: var(--font-size-sm);
    max-width: 400px;
    margin-bottom: var(--space-8);
  }

  .contact-cta__card {
    padding: var(--space-10) var(--space-6);
  }

  /* Buttons stack vertically */
  .contact-cta__buttons {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Both buttons full width */
  .contact-cta__btn--primary,
  .contact-cta__btn--secondary {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Hide blueprint on mobile */
  .contact-cta__blueprint {
    display: none;
  }

  /* Simplify decoration on mobile */
  .contact-cta__decoration {
    display: none;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .contact-cta {
    padding-block: var(--space-12);
  }

  .contact-cta__heading {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .contact-cta__description {
    font-size: var(--font-size-xs);
  }

  .contact-cta__card {
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-xl);
  }

  .contact-cta__btn--primary,
  .contact-cta__btn--secondary {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-xs);
    max-width: 100%;
  }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
  .contact-cta {
    padding-block: var(--space-32);
  }

  .contact-cta__heading {
    font-size: clamp(2.4rem, 2.8vw, 3.4rem);
  }

  .contact-cta__description {
    font-size: var(--font-size-md);
    max-width: 560px;
  }

  .contact-cta__card {
    max-width: 860px;
    padding: var(--space-20) var(--space-16);
  }

  .contact-cta__btn--primary,
  .contact-cta__btn--secondary {
    font-size: var(--font-size-base);
    padding: var(--space-5) var(--space-10);
  }

  .contact-cta__glow--left {
    width: 700px;
    height: 550px;
  }

  .contact-cta__glow--right {
    width: 600px;
    height: 500px;
  }
}


/* ==============================================================
   31. LUXURY FOOTER
   ----------------------------------------------------------------
   4-column footer with:
   - Deep navy background with gold glows and blueprint pattern
   - Brand column (logo, description, social icons)
   - Quick Links + Product Categories navigation columns
   - Contact Information column
   - Bottom bar with gold separator, copyright, tagline
   - IntersectionObserver staggered column entrance
   - Respects prefers-reduced-motion
   ============================================================== */

/* --- Footer Base --- */

.footer {
  position: relative;
  overflow: hidden;
  /* Deep navy with subtle black gradient at bottom */
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.5) 0%,
      transparent 10%,
      transparent 85%,
      rgba(2, 4, 10, 0.6) 100%
    );
  padding-top: var(--space-20);
}


/* --- Background Effects --- */

.footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Left gold ambient glow */
.footer__glow--left {
  position: absolute;
  top: 10%;
  left: -100px;
  width: 450px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Right gold ambient glow */
.footer__glow--right {
  position: absolute;
  bottom: 20%;
  right: -80px;
  width: 400px;
  height: 350px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.03) 0%,
    rgba(var(--color-logo-gold-rgb), 0.008) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint grid — extremely faint */
.footer__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.008) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.008) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 40%,
    rgba(0, 0, 0, 0.12) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 40%,
    rgba(0, 0, 0, 0.12) 0%,
    transparent 70%
  );
}


/* --- Content Container --- */

.footer__container {
  position: relative;
  z-index: 2;
}


/* --- 4-Column Grid --- */

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-12);
}


/* --- Column Base --- */

.footer__col {
  /* Staggered entrance — delay set via JS */
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer.is-visible .footer__col {
  opacity: 1;
  transform: translateY(0);
}


/* --- Column Heading --- */

.footer__col-heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-5);
}


/* --- Column 1: Brand --- */

.footer__logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: var(--space-5);
  transition: opacity 0.3s ease;
}

.footer__logo:hover {
  opacity: 0.85;
}

.footer__logo-text {
  display: block;
  font-family: var(--font-family-logo);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--color-white);
  line-height: 1;
}

.footer__logo-text--accent {
  color: var(--color-logo-gold);
}

.footer__brand-desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.45);
  max-width: 280px;
  margin-bottom: var(--space-6);
}


/* --- Social Icons --- */

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
  border-radius: var(--radius-lg);
  color: rgba(var(--color-white-rgb), 0.5);
  font-size: 1.1rem;
  text-decoration: none;
  /* Smooth hover */
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.footer__social-link:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  color: var(--color-logo-gold);
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  box-shadow: 0 4px 12px rgba(var(--color-logo-gold-rgb), 0.15);
}

.footer__social-link:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}


/* --- Footer Links (shared by Quick Links, Categories, Contact) --- */

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  display: inline-block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.45);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer__link:hover {
  color: var(--color-logo-gold-light);
}

.footer__link:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
  border-radius: 2px;
}


/* --- Contact Information --- */

.footer__contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: rgba(var(--color-white-rgb), 0.45);
  line-height: 1.6;
}

.footer__contact-item i {
  flex-shrink: 0;
  color: var(--color-logo-gold);
  font-size: 1rem;
  margin-top: 2px;
}

.footer__contact-item .footer__link {
  display: inline;
}


/* --- Bottom Bar --- */

.footer__bottom {
  position: relative;
  z-index: 2;
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  /* Thin gold separator line at top */
  border-top: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
  /* Entrance */
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer.is-visible .footer__bottom {
  opacity: 1;
  transform: translateY(0);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-8);
}

.footer__copyright {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.35);
}

.footer__tagline {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  font-style: italic;
  color: rgba(var(--color-white-rgb), 0.25);
}


/* ==============================================================
   FOOTER — RESPONSIVE
   ============================================================== */

/* Laptop */
@media (max-width: 1280px) {
  .footer {
    padding-top: var(--space-16);
  }

  .footer__grid {
    gap: var(--space-10);
  }

  .footer__col--brand {
    max-width: 260px;
  }
}

/* Tablet — 2 columns */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .footer__col--brand {
    grid-column: 1 / -1;
    max-width: 400px;
    text-align: center;
  }

  .footer__brand-desc {
    margin-inline: auto;
  }

  .footer__social {
    justify-content: center;
  }
}

/* Mobile — single column, centered */
@media (max-width: 768px) {
  .footer {
    padding-top: var(--space-12);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

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

  .footer__brand-desc {
    max-width: 320px;
    margin-inline: auto;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__links {
    align-items: center;
  }

  .footer__contact {
    align-items: center;
  }

  .footer__contact-item {
    justify-content: center;
  }

  .footer__bottom {
    margin-top: var(--space-10);
  }

  .footer__bottom-inner {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
    padding-bottom: var(--space-6);
  }

  /* Hide blueprint on mobile */
  .footer__blueprint {
    display: none;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .footer {
    padding-top: var(--space-10);
  }

  .footer__grid {
    gap: var(--space-8);
  }

  .footer__logo-text {
    font-size: 1.3rem;
  }

  .footer__brand-desc {
    font-size: var(--font-size-xs);
  }

  .footer__bottom-inner {
    padding-bottom: var(--space-5);
  }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
  .footer {
    padding-top: var(--space-28);
  }

  .footer__grid {
    gap: var(--space-16);
  }

  .footer__brand-desc {
    max-width: 320px;
  }

  .footer__logo-text {
    font-size: 1.7rem;
  }

  .footer__col-heading {
    font-size: var(--font-size-base);
  }

  .footer__link,
  .footer__contact-item,
  .footer__brand-desc {
    font-size: var(--font-size-base);
  }

  .footer__glow--left {
    width: 600px;
    height: 500px;
  }

  .footer__glow--right {
    width: 550px;
    height: 450px;
  }
}


/* ==============================================================
   32. BACK TO TOP BUTTON
   ----------------------------------------------------------------
   Floating circular button, bottom-right corner:
   - Dark navy background, gold icon
   - Appears after scrolling down (toggled via JS)
   - Hover: soft glow + slight scale
   - Smooth scroll to top on click
   - Respects prefers-reduced-motion
   ============================================================== */

.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  /* Dark navy background */
  background: rgba(var(--color-primary-navy-rgb), 0.92);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.3);
  border-radius: 50%;
  color: var(--color-logo-gold);
  font-size: 1.25rem;
  cursor: pointer;
  /* Subtle shadow */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(var(--color-logo-gold-rgb), 0.06);
  /* Hidden by default — JS toggles .is-visible */
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Visible state — toggled by JS after scroll threshold */
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hover: soft glow + slight scale */
.back-to-top:hover {
  transform: translateY(-2px) scale(1.08);
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  background: rgba(var(--color-primary-navy-rgb), 0.97);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.12);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}

/* Active press */
.back-to-top:active {
  transform: translateY(0) scale(0.98);
}

/* Mobile — slightly smaller, more padding from edge */
@media (max-width: 768px) {
  .back-to-top {
    bottom: var(--space-6);
    right: var(--space-6);
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* Reduced motion — instant show/hide, no scroll animation */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  }
}


/* ==============================================================
   33. SHOP PAGE
   ----------------------------------------------------------------
   Full-featured shop page with:
   - Premium shop hero with breadcrumb
   - Left sidebar with category + price filters
   - Right product grid with search, sort, and live filtering
   - Product cards (dark navy glass, gold borders, hover effects)
   - Mobile: sidebar becomes slide-out filter panel
   - IntersectionObserver staggered card entrance
   - GPU-accelerated animations only (transform + opacity)
   - Respects prefers-reduced-motion
   ============================================================== */


/* ==============================================================
   33a. SHOP HERO
   ----------------------------------------------------------------
   Dark navy hero banner with luxury gold lighting.
   Contains: label, heading, description, breadcrumb.
   ============================================================== */

.shop-hero {
  position: relative;
  overflow: hidden;
  /* Deep navy base */
  background-color: var(--color-primary-navy);
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 8, 16, 0.4) 0%,
      transparent 50%,
      rgba(var(--color-primary-navy-rgb), 0.6) 100%
    );
  padding-block: var(--space-24) var(--space-16);
}


/* --- Hero Background Effects --- */

.shop-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Top-left gold glow */
.shop-hero__glow--left {
  position: absolute;
  top: -80px;
  left: -120px;
  width: 550px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.06) 0%,
    rgba(var(--color-logo-gold-rgb), 0.02) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Bottom-right gold glow */
.shop-hero__glow--right {
  position: absolute;
  bottom: -100px;
  right: -80px;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.05) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Blueprint grid — extremely faint */
.shop-hero__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.018) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
}


/* --- Hero Content --- */

.shop-hero__container {
  position: relative;
  z-index: 2;
}

/* Small label */
.shop-hero__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

/* Main heading */
.shop-hero__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Description */
.shop-hero__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 520px;
  margin-bottom: var(--space-8);
}

/* Breadcrumb */
.shop-hero__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shop-hero__breadcrumb-item {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.shop-hero__breadcrumb-link {
  color: rgba(var(--color-white-rgb), 0.45);
  transition: color 0.3s ease;
}

.shop-hero__breadcrumb-link:hover {
  color: var(--color-logo-gold);
}

.shop-hero__breadcrumb-sep {
  color: rgba(var(--color-white-rgb), 0.25);
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.shop-hero__breadcrumb-item[aria-current="page"] span {
  color: var(--color-logo-gold);
  font-weight: var(--font-weight-medium);
}


/* ==============================================================
   33b. SHOP CONTENT — LAYOUT
   ----------------------------------------------------------------
   Two-column layout: left sidebar (260px) + right product area.
   Mobile: sidebar becomes slide-out panel.
   ============================================================== */

.shop-content {
  position: relative;
  overflow: hidden;
  /* Slightly different navy shade for depth */
  background-color: #080f1e;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.5) 0%,
      transparent 4%,
      transparent 96%,
      rgba(4, 8, 16, 0.6) 100%
    );
  padding-block: var(--space-12) var(--space-24);
}


/* --- Background Effects --- */

.shop-content__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.shop-content__glow--left {
  position: absolute;
  top: 15%;
  left: -120px;
  width: 550px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.03) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.shop-content__glow--right {
  position: absolute;
  bottom: 10%;
  right: -100px;
  width: 500px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.025) 0%,
    rgba(var(--color-logo-gold-rgb), 0.008) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.shop-content__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
}


/* --- Layout Container --- */

.shop-content__container {
  position: relative;
  z-index: 2;
}

/* Mobile toolbar (filter button + sort) — hidden on desktop */
.shop-content__mobile-toolbar {
  display: none;
}

/* Two-column layout */
.shop-content__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}


/* ==============================================================
   33c. SHOP SIDEBAR
   ----------------------------------------------------------------
   Desktop: static left column.
   Mobile: slide-out overlay panel.
   ============================================================== */

.shop-sidebar {
  position: sticky;
  top: calc(var(--nav-height-scrolled) + var(--space-8));
}

/* Mobile header (close button) — hidden on desktop */
.shop-sidebar__mobile-header {
  display: none;
}

/* Section title */
.shop-sidebar__section {
  margin-bottom: var(--space-8);
}

.shop-sidebar__section:last-child {
  margin-bottom: 0;
}

.shop-sidebar__section-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
}


/* --- Category List --- */

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

.shop-sidebar__cat-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.55);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  /* GPU-accelerated hover */
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
}

.shop-sidebar__cat-btn i {
  font-size: 1rem;
  color: rgba(var(--color-logo-gold-rgb), 0.4);
  flex-shrink: 0;
  transition: color 0.25s ease;
}

.shop-sidebar__cat-label {
  flex: 1;
  line-height: var(--line-height-snug);
}

.shop-sidebar__cat-count {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(var(--color-white-rgb), 0.3);
  background: rgba(var(--color-white-rgb), 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 24px;
  text-align: center;
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

/* Hover */
.shop-sidebar__cat-btn:hover {
  color: rgba(var(--color-white-rgb), 0.85);
  background: rgba(var(--color-white-rgb), 0.03);
  border-color: rgba(var(--color-white-rgb), 0.06);
  transform: translateX(2px);
}

.shop-sidebar__cat-btn:hover i {
  color: rgba(var(--color-logo-gold-rgb), 0.65);
}

/* Active state */
.shop-sidebar__cat-btn.is-active {
  color: var(--color-white);
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  border-color: rgba(var(--color-logo-gold-rgb), 0.2);
  font-weight: var(--font-weight-medium);
}

.shop-sidebar__cat-btn.is-active i {
  color: var(--color-logo-gold);
}

.shop-sidebar__cat-btn.is-active .shop-sidebar__cat-count {
  color: var(--color-logo-gold);
  background: rgba(var(--color-logo-gold-rgb), 0.15);
}

/* Focus visible */
.shop-sidebar__cat-btn:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}


/* --- Price Filter --- */

.shop-sidebar__price-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shop-sidebar__price-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.shop-sidebar__price-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.5);
  letter-spacing: 0.02em;
}

.shop-sidebar__price-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  background: rgba(var(--color-white-rgb), 0.04);
  border: 1px solid rgba(var(--color-white-rgb), 0.1);
  border-radius: var(--radius-md);
  outline: none;
  /* Smooth focus transition */
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.shop-sidebar__price-input::placeholder {
  color: rgba(var(--color-white-rgb), 0.25);
}

.shop-sidebar__price-input:focus {
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
  background: rgba(var(--color-white-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--color-logo-gold-rgb), 0.06);
}

/* Apply Filter button */
.shop-sidebar__price-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* GPU-accelerated hover */
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.shop-sidebar__price-btn:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.25);
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--color-logo-gold-rgb), 0.1);
}

.shop-sidebar__price-btn:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

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


/* ==============================================================
   33d. SHOP PRODUCT CARDS
   ----------------------------------------------------------------
   Premium dark navy glass cards with gold accents.
   Same design language as Featured Products cards.
   ============================================================== */

.shop-content__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Individual product card */
.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Dark navy glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  /* GPU-accelerated transitions */
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.5s ease;
  /* Staggered entrance — set by JS */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Visible state */
.shop-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card hover */
.shop-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.3);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.05);
}

/* Focus within for keyboard */
.shop-card:focus-within {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Hidden cards when filtered out */
.shop-card.is-hidden {
  display: none;
}


/* --- Card Image Area --- */

.shop-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(var(--color-primary-navy-rgb), 0.4) 0%,
    rgba(var(--color-primary-navy-rgb), 0.8) 100%
  );
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-card:hover .shop-card__image-wrap {
  transform: scale(1.03);
}

/* Clickable image link */
.shop-card__image-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
  cursor: pointer;
}

/* Placeholder icon — hidden by default, shown only when image fails */
.shop-card__image-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(var(--color-logo-gold-rgb), 0.15);
  font-size: 3rem;
  z-index: 1;
  transition: color 0.4s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Show placeholder when image fails to load */
.shop-card__image-placeholder.is-visible {
  display: flex;
}

.shop-card:hover .shop-card__image-placeholder.is-visible {
  color: rgba(var(--color-logo-gold-rgb), 0.25);
  transform: scale(1.08);
}

/* Product images */
.shop-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hide image when it fails to load */
.shop-card__image-wrap img.is-error {
  display: none;
}

.shop-card:hover .shop-card__image-wrap img:not(.is-error) {
  transform: scale(1.08);
}


/* --- Card Body --- */

.shop-card__body {
  padding: var(--space-5) var(--space-6) var(--space-3);
  flex: 1;
}

.shop-card__name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.4s ease;
}

.shop-card:hover .shop-card__name {
  color: var(--color-logo-gold-light);
}

.shop-card__desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), 0.4);
  margin-bottom: var(--space-3);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.4s ease;
}

.shop-card:hover .shop-card__desc {
  color: rgba(var(--color-white-rgb), 0.55);
}

.shop-card__price {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-logo-gold);
  letter-spacing: var(--letter-spacing-wide);
}


/* --- Card Action Buttons --- */

.shop-card__actions {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-6);
}

.shop-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  /* GPU-accelerated button hover */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

/* View Details — outlined dark navy style */
.shop-card__btn--details {
  background: transparent;
  color: rgba(var(--color-white-rgb), 0.7);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
}

.shop-card__btn--details:hover {
  color: var(--color-white);
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  transform: translateY(-1px);
}

.shop-card__btn--details:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Add to Cart — gold filled style */
.shop-card__btn--cart {
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  color: var(--color-logo-gold);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
}

.shop-card__btn--cart:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.25);
  border-color: rgba(var(--color-logo-gold-rgb), 0.35);
  transform: translateY(-1px);
  color: var(--color-logo-gold-light);
}

.shop-card__btn--cart:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}

/* Added state (brief flash after click) */
.shop-card__btn--cart.is-added {
  background: rgba(var(--color-logo-gold-rgb), 0.3);
  color: var(--color-logo-gold-light);
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
}

.shop-card__btn i {
  font-size: 0.95rem;
}


/* ==============================================================
   33e. SHOP SEARCH & SORT TOOLBAR
   ----------------------------------------------------------------
   Premium search bar + sort dropdown above the grid.
   ============================================================== */

.shop-content__products {
  min-width: 0; /* Prevent grid blowout */
}

.shop-content__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Search input */
.shop-content__search {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.shop-content__search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--color-white-rgb), 0.3);
  font-size: 1.1rem;
  pointer-events: none;
  transition: color 0.3s ease;
}

.shop-content__search-input {
  width: 100%;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-12);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  background: rgba(var(--color-white-rgb), 0.04);
  border: 1px solid rgba(var(--color-white-rgb), 0.1);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.shop-content__search-input::placeholder {
  color: rgba(var(--color-white-rgb), 0.25);
}

.shop-content__search-input:focus {
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
  background: rgba(var(--color-white-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--color-logo-gold-rgb), 0.06);
}

.shop-content__search-input:focus ~ .shop-content__search-icon {
  color: var(--color-logo-gold);
}

/* Clear search button */
.shop-content__search-clear {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(var(--color-white-rgb), 0.4);
  background: rgba(var(--color-white-rgb), 0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.shop-content__search-clear:hover {
  color: var(--color-white);
  background: rgba(var(--color-white-rgb), 0.12);
}

/* Sort dropdown */
.shop-content__sort-wrap {
  flex-shrink: 0;
}

.shop-content__sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.7);
  background: rgba(var(--color-white-rgb), 0.04) 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='rgba(201,168,76,0.6)' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid rgba(var(--color-white-rgb), 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  outline: none;
  min-width: 180px;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.shop-content__sort-select:hover {
  border-color: rgba(var(--color-white-rgb), 0.2);
  color: var(--color-white);
}

.shop-content__sort-select:focus {
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--color-logo-gold-rgb), 0.06);
  color: var(--color-white);
}

.shop-content__sort-select option {
  background: var(--color-primary-navy);
  color: var(--color-white);
}

/* Results count */
.shop-content__results-bar {
  margin-bottom: var(--space-6);
}

.shop-content__results-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.4);
}

.shop-content__results-text strong {
  color: rgba(var(--color-white-rgb), 0.7);
  font-weight: var(--font-weight-semibold);
}


/* ==============================================================
   33f. SHOP EMPTY STATE
   ----------------------------------------------------------------
   Shown when no products match current filters/search.
   ============================================================== */

.shop-content__empty {
  text-align: center;
  padding: var(--space-20) var(--space-8);
}

.shop-content__empty-icon {
  font-size: 3.5rem;
  color: rgba(var(--color-logo-gold-rgb), 0.15);
  margin-bottom: var(--space-6);
}

.shop-content__empty-heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: rgba(var(--color-white-rgb), 0.7);
  margin-bottom: var(--space-3);
}

.shop-content__empty-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.4);
  margin-bottom: var(--space-8);
}

.shop-content__empty-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-content__empty-reset-btn:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.25);
  border-color: rgba(var(--color-logo-gold-rgb), 0.4);
  transform: translateY(-1px);
}

.shop-content__empty-reset-btn:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 2px;
}


/* ==============================================================
   33g. SHOP MOBILE SIDEBAR PANEL
   ----------------------------------------------------------------
   On mobile, the sidebar slides in from the left
   as an overlay panel with a dark backdrop.
   ============================================================== */

/* Sidebar overlay backdrop */
.shop-sidebar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shop-sidebar__overlay.is-active {
  opacity: 1;
}


/* ==============================================================
   33h. SHOP PAGE — RESPONSIVE
   ============================================================== */

/* Ultra-wide screens */
@media (min-width: 1440px) {
  .shop-hero__heading {
    font-size: 3.5rem;
  }

  .shop-content__layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-10);
  }

  .shop-content__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Laptop — 1024px */
@media (max-width: 1280px) {
  .shop-content__layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
  }
}

/* Tablet — 768px: 2-col grid, sidebar hidden (becomes mobile panel) */
@media (max-width: 1024px) {
  .shop-content__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .shop-content__layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
  }
}

/* Mobile — sidebar becomes slide-out panel */
@media (max-width: 768px) {
  /* Show mobile toolbar */
  .shop-content__mobile-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .shop-content__mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background: rgba(var(--color-logo-gold-rgb), 0.12);
    border: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease;
  }

  .shop-content__mobile-filter-btn:hover {
    background: rgba(var(--color-logo-gold-rgb), 0.2);
    border-color: rgba(var(--color-logo-gold-rgb), 0.4);
  }

  .shop-content__mobile-sort-wrap {
    flex: 1;
  }

  .shop-content__mobile-sort-wrap .shop-content__sort-select {
    width: 100%;
    min-width: 0;
  }

  /* Layout — single column (products only) */
  .shop-content__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Sidebar becomes slide-out panel */
  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: calc(var(--z-overlay) + 1);
    background: rgba(8, 15, 30, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
    padding: var(--space-6);
    overflow-y: auto;
    /* Slide from left */
    transform: translateX(-100%);
    opacity: 0;
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease;
  }

  .shop-sidebar.is-open {
    transform: translateX(0);
    opacity: 1;
  }

  /* Show mobile header in sidebar */
  .shop-sidebar__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  }

  .shop-sidebar__mobile-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }

  .shop-sidebar__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(var(--color-white-rgb), 0.6);
    background: rgba(var(--color-white-rgb), 0.06);
    border: 1px solid rgba(var(--color-white-rgb), 0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .shop-sidebar__close-btn:hover {
    color: var(--color-white);
    background: rgba(var(--color-white-rgb), 0.12);
  }

  /* Show overlay */
  .shop-sidebar__overlay {
    display: block;
    pointer-events: none;
  }

  .shop-sidebar__overlay.is-active {
    pointer-events: auto;
  }

  /* Toolbar — stack vertically */
  .shop-content__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-content__search {
    max-width: none;
  }

  .shop-content__sort-wrap .shop-content__sort-select {
    width: 100%;
    min-width: 0;
  }

  /* Hide desktop sort (use mobile sort) */
  .shop-content__sort-wrap {
    display: none;
  }

  /* Grid: 2 columns */
  .shop-content__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* Card adjustments */
  .shop-card__body {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .shop-card__actions {
    padding: 0 var(--space-4) var(--space-4);
  }

  .shop-card__btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.7rem;
  }

  /* Hero adjustments */
  .shop-hero {
    padding-block: var(--space-16) var(--space-10);
  }

  .shop-hero__heading {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .shop-hero__description {
    font-size: var(--font-size-base);
  }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .shop-hero {
    padding-block: var(--space-12) var(--space-8);
  }

  .shop-content {
    padding-block: var(--space-8) var(--space-16);
  }

  /* Grid: 1 column */
  .shop-content__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Card adjustments */
  .shop-card__name {
    font-size: var(--font-size-base);
  }

  .shop-card__desc {
    font-size: var(--font-size-xs);
  }

  /* Search adjustments */
  .shop-content__search-input {
    padding: var(--space-3) var(--space-8) var(--space-3) var(--space-10);
    font-size: var(--font-size-xs);
  }

  .shop-content__search-icon {
    left: var(--space-3);
  }

  .shop-content__mobile-toolbar {
    flex-direction: column;
  }
}

/* Reduced motion — instant visibility */
@media (prefers-reduced-motion: reduce) {
  .shop-card {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.4s ease,
      box-shadow 0.4s ease;
  }

  .shop-sidebar {
    transition: none;
  }

  .shop-sidebar__overlay {
    transition: none;
  }
}


/* ==============================================================
   34. PRODUCT DETAIL PAGE
   ----------------------------------------------------------------
   Dynamic product detail page loaded via ?id= query param.
   - Compact breadcrumb bar with back link
   - Two-column layout: image + product info
   - Large product image with slow premium zoom on hover
   - Quantity selector (+ / -)
   - Add to Cart + Order on WhatsApp buttons
   - Product information cards (category, availability, shipping, support)
   - Related products grid (4 items, same category)
   - GPU-accelerated animations (transform + opacity only)
   - Respects prefers-reduced-motion
   ============================================================== */


/* ==============================================================
   34a. PRODUCT BREADCRUMB BAR
   ----------------------------------------------------------------
   Slim dark bar with breadcrumb + back-to-shop link.
   ============================================================== */

.pd-breadcrumb {
  position: relative;
  background: rgba(6, 12, 24, 0.95);
  border-bottom: 1px solid rgba(var(--color-logo-gold-rgb), 0.08);
  padding-block: var(--space-4);
  z-index: 2;
}

.pd-breadcrumb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Breadcrumb list */
.pd-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pd-breadcrumb__item {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.pd-breadcrumb__link {
  color: rgba(var(--color-white-rgb), 0.45);
  transition: color 0.3s ease;
}

.pd-breadcrumb__link:hover {
  color: var(--color-logo-gold);
}

.pd-breadcrumb__sep {
  color: rgba(var(--color-white-rgb), 0.2);
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.pd-breadcrumb__item[aria-current="page"] span {
  color: var(--color-logo-gold);
  font-weight: var(--font-weight-medium);
}

/* Back to Shop link */
.pd-breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.5);
  white-space: nowrap;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-breadcrumb__back:hover {
  color: var(--color-logo-gold);
  transform: translateX(-3px);
}

.pd-breadcrumb__back i {
  font-size: 1.1rem;
}


/* ==============================================================
   34b. PRODUCT CONTENT — MAIN LAYOUT
   ----------------------------------------------------------------
   Two-column: image (left) + info (right).
   Deep navy background with subtle gold lighting + blueprint.
   ============================================================== */

.pd-content {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  padding-block: var(--space-16);
}

/* Background effects */
.pd-content__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pd-content__glow--left {
  position: absolute;
  top: 10%;
  left: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.pd-content__glow--right {
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.pd-content__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    );
  background-size: 80px 80px;
  mask-image: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
}

.pd-content__container {
  position: relative;
  z-index: 1;
}

/* Two-column layout */
.pd-content__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Entrance animation */
.pd-content__layout > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.pd-content__layout > *:nth-child(1) { transition-delay: 0.1s; }
.pd-content__layout > *:nth-child(2) { transition-delay: 0.25s; }

.pd-content__layout.is-ready > * {
  opacity: 1;
  transform: translateY(0);
}


/* ==============================================================
   34c. PRODUCT IMAGE
   ----------------------------------------------------------------
   Large single image with slow premium zoom on hover.
   Dark navy glass container with gold border.
   ============================================================== */

.pd-image {
  position: relative;
}

.pd-image__wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  /* Dark navy glass */
  background: rgba(var(--color-primary-navy-rgb), 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin gold border */
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  /* Luxury shadow */
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.2);
  /* Slow premium zoom on hover */
  transition:
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.pd-image__wrap:hover {
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 50px rgba(var(--color-logo-gold-rgb), 0.04);
}

/* Icon placeholder */
.pd-image__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--color-logo-gold-rgb), 0.1);
  font-size: 7rem;
  /* Slow zoom on hover */
  transition: color 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-image__wrap:hover .pd-image__placeholder {
  color: rgba(var(--color-logo-gold-rgb), 0.18);
  transform: scale(1.08);
}

/* Real image (if added later) */
.pd-image__wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slow premium zoom */
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-image__wrap:hover img {
  transform: scale(1.06);
}


/* ==============================================================
   34d. PRODUCT INFO
   ----------------------------------------------------------------
   Name, price, description, separator.
   ============================================================== */

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

/* Product Name */
.pd-info__name {
  font-family: var(--font-family-primary);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
}

/* Pricing Breakdown — Net Price, VAT, Total */
.pd-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(var(--color-white-rgb), 0.02);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.08);
}

.pd-pricing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.pd-pricing__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.45);
  letter-spacing: 0.02em;
}

.pd-pricing__value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: rgba(var(--color-white-rgb), 0.75);
}

/* Gold divider between items and total */
.pd-pricing__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--color-logo-gold-rgb), 0.3),
    rgba(var(--color-logo-gold-rgb), 0.08)
  );
  margin-block: var(--space-2);
}

/* Total row — premium emphasis */
.pd-pricing__row--total .pd-pricing__label {
  font-weight: var(--font-weight-semibold);
  color: rgba(var(--color-white-rgb), 0.7);
}

.pd-pricing__value--total {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-logo-gold);
  letter-spacing: var(--letter-spacing-wide);
}

/* Product Description */
.pd-info__desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.75;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 560px;
}

/* Gold separator */
.pd-info__sep {
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(var(--color-logo-gold-rgb), 0.5),
    rgba(var(--color-logo-gold-rgb), 0.1)
  );
  border-radius: var(--radius-full);
  margin-block: var(--space-2);
}


/* ==============================================================
   34e. QUANTITY SELECTOR
   ----------------------------------------------------------------
   Clean + / - control with centered number input.
   ============================================================== */

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

.pd-qty__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pd-qty__control {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(var(--color-white-rgb), 0.03);
  width: fit-content;
}

.pd-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: rgba(var(--color-white-rgb), 0.6);
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  background: transparent;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.pd-qty__btn:hover {
  color: var(--color-white);
  background: rgba(var(--color-logo-gold-rgb), 0.1);
}

.pd-qty__btn:active {
  background: rgba(var(--color-logo-gold-rgb), 0.18);
}

.pd-qty__btn:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: -2px;
}

.pd-qty__input {
  width: 56px;
  height: 48px;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background: transparent;
  border: none;
  border-left: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  border-right: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
  outline: none;
}

/* Hide spinner arrows in Chrome/Safari/Edge */
.pd-qty__input::-webkit-outer-spin-button,
.pd-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ==============================================================
   34f. ACTION BUTTONS
   ----------------------------------------------------------------
   Add to Cart (gold filled) + Order on WhatsApp (green filled).
   ============================================================== */

.pd-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.pd-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-lg);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  /* GPU-accelerated transitions */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.pd-actions__btn i {
  font-size: 1.15rem;
}

/* Add to Cart — gold filled */
.pd-actions__btn--cart {
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  color: var(--color-logo-gold);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
}

.pd-actions__btn--cart:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.28);
  border-color: rgba(var(--color-logo-gold-rgb), 0.45);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
  color: var(--color-logo-gold-light);
}

.pd-actions__btn--cart:active {
  transform: translateY(0);
}

.pd-actions__btn--cart:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}

/* Added flash state */
.pd-actions__btn--cart.is-added {
  background: rgba(var(--color-logo-gold-rgb), 0.35);
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  color: var(--color-logo-gold-light);
}

/* WhatsApp — green accent */
.pd-actions__btn--whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.25);
}

.pd-actions__btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.22);
  border-color: rgba(37, 211, 102, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.15);
  color: #4aedc4;
}

.pd-actions__btn--whatsapp:active {
  transform: translateY(0);
}

.pd-actions__btn--whatsapp:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 3px;
}


/* ==============================================================
   34g. PRODUCT INFO CARDS
   ----------------------------------------------------------------
   Small icon + label + value cards below the actions.
   ============================================================== */

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

.pd-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(var(--color-white-rgb), 0.025);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.06);
  /* GPU transition */
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-card:hover {
  border-color: rgba(var(--color-logo-gold-rgb), 0.15);
  background: rgba(var(--color-white-rgb), 0.04);
  transform: translateY(-2px);
}

.pd-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  color: var(--color-logo-gold);
  font-size: 1.1rem;
}

.pd-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pd-card__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pd-card__value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: rgba(var(--color-white-rgb), 0.8);
}

/* Green "In Stock" indicator */
.pd-card__value--in-stock {
  color: var(--color-success);
}

/* Gold "Total Price" emphasis in cards */
.pd-card__value--total {
  color: var(--color-logo-gold);
  font-weight: var(--font-weight-bold);
}


/* ==============================================================
   34h. RELATED PRODUCTS
   ----------------------------------------------------------------
   Section with label, heading, and 4-column grid.
   Uses same card design as shop cards.
   ============================================================== */

.pd-related {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0) 0%,
      rgba(var(--color-primary-navy-rgb), 0.4) 30%,
      rgba(var(--color-primary-navy-rgb), 0.6) 100%
    );
  padding-block: var(--space-16) var(--space-20);
}

/* Background effect */
.pd-related__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pd-related__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
}

.pd-related__container {
  position: relative;
  z-index: 1;
}

/* Section header */
.pd-related__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.pd-related__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-3);
}

.pd-related__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
}

/* Related products grid — 4 columns */
.pd-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Related product cards — reuse shop-card styles */
.pd-related__grid .shop-card {
  /* Reset opacity/transform from shop-card default (already visible here) */
  opacity: 0;
  transform: translateY(24px);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-related__grid .shop-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* VAT-included total line on related cards */
.shop-card__price-vat {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-logo-gold);
  margin-top: 2px;
  letter-spacing: 0.01em;
}


/* ==============================================================
   34i. PRODUCT PAGE — RESPONSIVE
   ----------------------------------------------------------------
   Desktop (1024+) : 2-col layout, 4-col related
   Tablet  (768-1023) : 2-col layout, 2-col related
   Mobile  (<768) : single column, 2-col related
   Small   (<480) : single column, 1-col related
   Ultra-wide (1440+): wider gaps
   ============================================================== */

/* Laptop / small desktop */
@media (max-width: 1200px) {
  .pd-content__layout {
    gap: var(--space-10);
  }

  .pd-related__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

/* Tablet */
@media (max-width: 1023px) {
  .pd-content {
    padding-block: var(--space-10);
  }

  .pd-content__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .pd-image__placeholder {
    font-size: 5rem;
  }

  .pd-related {
    padding-block: var(--space-12) var(--space-16);
  }

  .pd-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .pd-breadcrumb__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .pd-breadcrumb__back {
    align-self: flex-end;
    margin-top: calc(-1 * var(--space-6));
  }

  .pd-content {
    padding-block: var(--space-8);
  }

  /* Single column layout */
  .pd-content__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Image square — slightly smaller on mobile */
  .pd-image__placeholder {
    font-size: 5rem;
  }

  /* Product info adjustments */
  .pd-info {
    gap: var(--space-4);
  }

  .pd-info__name {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .pd-pricing__value--total {
    font-size: var(--font-size-xl);
  }

  .pd-pricing {
    padding: var(--space-4);
  }

  /* Info cards — stack 1 column on very small */
  .pd-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  /* Action buttons — full width */
  .pd-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .pd-actions__btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-sm);
  }

  /* Related section */
  .pd-related {
    padding-block: var(--space-10) var(--space-12);
  }

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

  .shop-card__body {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .shop-card__actions {
    padding: 0 var(--space-4) var(--space-4);
  }

  .shop-card__btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.7rem;
  }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .pd-content {
    padding-block: var(--space-6);
  }

  .pd-image__placeholder {
    font-size: 4rem;
  }

  /* Info cards — 1 column */
  .pd-cards {
    grid-template-columns: 1fr;
  }

  /* Related — 1 column */
  .pd-related__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .pd-related__heading {
    font-size: var(--font-size-xl);
  }

  .pd-qty__btn {
    width: 42px;
    height: 42px;
  }

  .pd-qty__input {
    width: 48px;
    height: 42px;
    font-size: var(--font-size-base);
  }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
  .pd-content {
    padding-block: var(--space-20);
  }

  .pd-content__layout {
    gap: var(--space-20);
  }

  .pd-image__placeholder {
    font-size: 8rem;
  }

  .pd-info__name {
    font-size: var(--font-size-3xl);
  }

  .pd-pricing__value--total {
    font-size: var(--font-size-2xl);
  }

  .pd-pricing {
    padding: var(--space-6);
  }

  .pd-related__grid {
    gap: var(--space-8);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pd-content__layout > * {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .pd-image__placeholder {
    transition: none;
  }

  .pd-image__wrap {
    transition: none;
  }

  .pd-image__wrap img {
    transition: none;
  }

  .pd-related__grid .shop-card {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.4s ease,
      box-shadow 0.4s ease;
  }

  .pd-toast {
    transition: none;
  }
}


/* ==============================================================
   34j. ADD-TO-CART TOAST NOTIFICATION
   ----------------------------------------------------------------
   Slides up from bottom-right when item is added.
   Premium dark glass with gold accent.
   ============================================================== */

.pd-toast {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-6);
  z-index: calc(var(--z-fixed) + 100);
  pointer-events: none;
  /* Hidden by default — slides up when .is-visible */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.pd-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pd-toast__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(var(--color-primary-navy-rgb), 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.06);
  white-space: nowrap;
}

.pd-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  color: var(--color-logo-gold);
  font-size: 1rem;
}

.pd-toast__msg {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  letter-spacing: 0.01em;
}

/* Toast — responsive */
@media (max-width: 767px) {
  .pd-toast {
    bottom: var(--space-6);
    right: var(--space-4);
    left: var(--space-4);
  }

  .pd-toast__inner {
    white-space: normal;
  }
}


/* ==============================================
   35. CART PAGE
   ============================================== */

/* 35a. Cart Breadcrumb */
.cart-breadcrumb {
  padding-top: calc(var(--nav-height, 72px) + var(--space-8));
  padding-bottom: var(--space-2);
  background: transparent;
}

.cart-breadcrumb .breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-breadcrumb .breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cart-breadcrumb .breadcrumb__link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cart-breadcrumb .breadcrumb__link:hover {
  color: var(--color-logo-gold);
}

.cart-breadcrumb .breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.875rem;
  opacity: 1;
}

.cart-breadcrumb .breadcrumb__item--active span {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-logo-gold);
}

/* 35b. Cart Main */
.cart-main {
  min-height: 60vh;
  padding-bottom: var(--space-16);
  padding-top: var(--space-8);
}

/* 35c. Cart Header */
.cart-header {
  margin-bottom: var(--space-10);
}

.cart-header__title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2) 0;
}

.cart-header__subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* 35d. Cart Layout — 2-column */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1023px) {
  .cart-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* 35e. Cart Item Card */
.cart-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base),
    opacity var(--transition-base),
    box-shadow var(--transition-base);
  will-change: transform, opacity;
}

.cart-item + .cart-item {
  margin-top: var(--space-4);
}

.cart-item:hover {
  border-color: rgba(var(--color-logo-gold-rgb), 0.2);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 40px rgba(var(--color-logo-gold-rgb), 0.04);
}

/* Entrance animation */
.cart-item {
  opacity: 0;
  transform: translateY(20px);
}

.cart-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 35f. Cart Item — Product Image */
.cart-item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: rgba(var(--color-logo-gold-rgb), 0.06);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  color: var(--color-logo-gold);
  font-size: 2.5rem;
  transition: transform var(--transition-base), border-color var(--transition-base);
  overflow: hidden;
  position: relative;
}

/* Real product image inside cart item */
.cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.cart-item:hover .cart-item__image {
  transform: scale(1.03);
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
}

/* 35g. Cart Item — Info */
.cart-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cart-item__name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin: 0;
  line-height: 1.3;
}

/* Price breakdown rows */
.cart-item__detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.cart-item__detail-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.7);
}

/* Product Total label — bolder & white for emphasis */
.cart-item__detail-label--total {
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.cart-item__detail-value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.cart-item__detail-value--gold {
  color: var(--color-logo-gold);
}

.cart-item__detail-value--large {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-logo-gold);
}

/* Divider inside card */
.cart-item__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  margin: var(--space-1) 0;
}

/* 35h. Cart Item — Quantity Controls */
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.cart-item__qty-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.7);
  margin-right: var(--space-1);
}

.cart-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.cart-item__qty-btn:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.15);
  border-color: rgba(var(--color-logo-gold-rgb), 0.35);
  color: var(--color-logo-gold);
  transform: scale(1.08);
}

.cart-item__qty-btn:active {
  transform: scale(0.95);
}

.cart-item__qty-input {
  width: 48px;
  height: 36px;
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast);
}

.cart-item__qty-input::-webkit-inner-spin-button,
.cart-item__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-item__qty-input:focus {
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
}

/* 35i. Cart Item — Actions (right column) */
.cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 60, 60, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 60, 60, 0.06);
  color: #ff6b6b;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  letter-spacing: 0.02em;
}

.cart-item__remove:hover {
  background: rgba(255, 60, 60, 0.18);
  border-color: rgba(255, 60, 60, 0.45);
  color: #ff4444;
  transform: translateY(-1px);
}

.cart-item__remove:active {
  transform: translateY(0) scale(0.97);
}

.cart-item__remove i {
  font-size: 1rem;
}

/* 35j. Cart Item — Responsive */
@media (max-width: 767px) {
  .cart-item {
    grid-template-columns: 88px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
  }

  .cart-item__image {
    width: 88px;
    height: 88px;
    font-size: 1.8rem;
  }

  .cart-item__name {
    font-size: var(--font-size-base);
  }

  .cart-item__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* 35k. Cart Summary (Sidebar) */
.cart-summary {
  position: sticky;
  top: calc(var(--nav-height, 72px) + var(--space-6));
}

.cart-summary__inner {
  position: relative;
  padding: var(--space-7) var(--space-6);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(var(--color-logo-gold-rgb), 0.04);
  overflow: visible;
}

/* Gold accent bar at top of summary card */
.cart-summary__inner::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-logo-gold) 30%, var(--color-logo-gold) 70%, transparent 100%);
  border-radius: 0 0 4px 4px;
  z-index: 1;
  animation: cart-summary-bar-glow 3s ease-in-out infinite;
}

@keyframes cart-summary-bar-glow {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 8px rgba(var(--color-logo-gold-rgb), 0.3); }
  50% { opacity: 1; box-shadow: 0 0 18px rgba(var(--color-logo-gold-rgb), 0.6); }
}

.cart-summary__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: 0 0 var(--space-5) 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* 35k-2. Summary Counts */
.cart-summary__counts {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cart-summary__count-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-summary__count-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cart-summary__count-value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

/* 35l. Summary Breakdown */
.cart-summary__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: visible;
}

.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
}

.cart-summary__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible;
}

.cart-summary__value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible;
  margin-left: auto;
}

.cart-summary__row--total {
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid rgba(var(--color-logo-gold-rgb), 0.25);
}

.cart-summary__row--total .cart-summary__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  font-size: var(--font-size-base);
}

.cart-summary__row--total .cart-summary__value {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  color: var(--color-logo-gold);
  text-shadow: 0 0 28px rgba(var(--color-logo-gold-rgb), 0.5);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              text-shadow 0.3s ease;
  letter-spacing: -0.01em;
}

/* Value-change pulse animation */
.cart-summary__value.is-changed {
  animation: cart-value-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cart-value-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); text-shadow: 0 0 28px rgba(var(--color-logo-gold-rgb), 0.6); }
  100% { transform: scale(1); text-shadow: 0 0 20px rgba(var(--color-logo-gold-rgb), 0.35); }
}

/* Enhanced pulse for Grand Total */
.cart-summary__row--total .cart-summary__value.is-changed {
  animation: cart-total-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cart-total-pulse {
  0% { transform: scale(1); text-shadow: 0 0 28px rgba(var(--color-logo-gold-rgb), 0.5); }
  35% { transform: scale(1.06); text-shadow: 0 0 44px rgba(var(--color-logo-gold-rgb), 0.75); }
  100% { transform: scale(1); text-shadow: 0 0 28px rgba(var(--color-logo-gold-rgb), 0.5); }
}

/* 35m. ORDER ON WHATSAPP — Premium Gold Checkout Button */
.cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-navy);
  background: linear-gradient(135deg, var(--color-logo-gold), #e6c36a, var(--color-logo-gold));
  background-size: 200% 200%;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 6px 24px rgba(var(--color-logo-gold-rgb), 0.35),
    0 0 60px rgba(var(--color-logo-gold-rgb), 0.1);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background-position 0.5s ease;
  animation: cart-gold-shimmer 3s ease-in-out infinite;
}

@keyframes cart-gold-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.cart-summary__checkout:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 10px 36px rgba(var(--color-logo-gold-rgb), 0.45),
    0 0 80px rgba(var(--color-logo-gold-rgb), 0.15);
}

.cart-summary__checkout:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3);
}

.cart-summary__checkout i {
  font-size: 1.5rem;
}

/* 35n. Summary Note */
.cart-summary__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  line-height: 1.5;
}

.cart-summary__note i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* 35o. Premium Buttons — CONTINUE SHOPPING (Dark Navy) & CLEAR CART (Red) */
.cart-summary__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  flex: 1;
}

/* Side-by-side button row for secondary actions */
.cart-summary__actions-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cart-summary__actions-row .cart-summary__btn {
  flex: 1;
  min-width: 0;
}

.cart-summary__btn i {
  font-size: 1rem;
}

/* Dark Navy variant */
.cart-summary__btn--navy {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-summary__btn--navy:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cart-summary__btn--navy:active {
  transform: translateY(0);
}

/* Red Outline variant */
.cart-summary__btn--red {
  color: #ff6b6b;
  background: transparent;
  border: 1.5px solid rgba(255, 60, 60, 0.35);
}

.cart-summary__btn--red:hover {
  background: rgba(255, 60, 60, 0.1);
  border-color: rgba(255, 60, 60, 0.6);
  color: #ff4444;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 60, 60, 0.15);
}

.cart-summary__btn--red:active {
  transform: translateY(0);
}

.cart-summary__note + .cart-summary__actions-row,
.cart-summary__checkout + .cart-summary__note,
.cart-summary__actions-row + .cart-summary__actions-row {
  margin-top: var(--space-4);
}

/* 35p. Empty Cart State */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  min-height: 50vh;
}

.cart-empty__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: rgba(var(--color-logo-gold-rgb), 0.06);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  margin-bottom: var(--space-8);
  animation: cart-empty-pulse 3s ease-in-out infinite;
}

@keyframes cart-empty-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-logo-gold-rgb), 0.1); }
  50% { box-shadow: 0 0 0 20px rgba(var(--color-logo-gold-rgb), 0); }
}

.cart-empty__icon {
  font-size: 2.5rem;
  color: var(--color-logo-gold);
  opacity: 0.6;
}

.cart-empty__title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: 0 0 var(--space-3) 0;
}

.cart-empty__desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.6);
  max-width: 420px;
  line-height: 1.7;
  margin: 0 0 var(--space-8) 0;
}

.cart-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  background: var(--color-logo-gold);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: 0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3);
}

.cart-empty__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--color-logo-gold-rgb), 0.4);
}

.cart-empty__btn:active {
  transform: translateY(0);
}

/* 35q. Cart Page — Responsive */
@media (max-width: 767px) {
  .cart-main {
    padding-top: var(--space-6);
    padding-bottom: var(--space-12);
  }

  .cart-header {
    margin-bottom: var(--space-6);
  }

  .cart-summary {
    position: static;
  }

  .cart-summary__inner {
    padding: var(--space-5) var(--space-4);
  }

  .cart-summary__checkout {
    font-size: var(--font-size-sm);
    padding: var(--space-3) var(--space-4);
  }

  .cart-summary__actions-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cart-summary__actions-row .cart-summary__btn {
    flex: none;
    width: 100%;
  }

  .cart-empty {
    padding: var(--space-10) var(--space-4);
  }
}

/* 35r. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .cart-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cart-empty__icon-wrap {
    animation: none;
  }

  .cart-summary__inner::before {
    animation: none;
    opacity: 1;
  }

  .cart-summary__checkout,
  .cart-summary__btn,
  .cart-empty__btn {
    transition: none;
    animation: none;
  }

  .cart-summary__value.is-changed,
  .cart-summary__row--total .cart-summary__value.is-changed {
    animation: none;
  }
}


/* ==============================================================
   36. ABOUT PAGE
   ----------------------------------------------------------------
   Premium About page with 6 sections:
   1. Hero — dark navy, gold glows, blueprint, breadcrumb
   2. Who We Are — two-column (image + text), stats bar
   3. What We Offer — grid of 5 premium animated cards
   4. Why Choose Us — grid of 5 feature cards
   5. Our Commitment — centered luxury card with pillars
   6. Call To Action — centered card, two CTA buttons
   ============================================================== */


/* ==============================================================
   36a. ABOUT HERO
   ----------------------------------------------------------------
   Dark navy hero banner with luxury gold lighting.
   Contains: label, heading, description, breadcrumb, gold line.
   ============================================================== */

.about-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 8, 16, 0.5) 0%,
      transparent 40%,
      rgba(var(--color-primary-navy-rgb), 0.7) 100%
    );
  padding-block: var(--space-32) var(--space-20);
}

/* --- Background Effects --- */

.about-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-hero__glow--left {
  position: absolute;
  top: -100px;
  left: -150px;
  width: 600px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.07) 0%,
    rgba(var(--color-logo-gold-rgb), 0.025) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-hero__glow--right {
  position: absolute;
  bottom: -120px;
  right: -100px;
  width: 550px;
  height: 420px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.055) 0%,
    rgba(var(--color-logo-gold-rgb), 0.02) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-hero__glow--center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.03) 0%,
    transparent 60%
  );
  border-radius: 50%;
}

.about-hero__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
}

/* --- Hero Content --- */

.about-hero__container {
  position: relative;
  z-index: 2;
}

.about-hero__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-hero__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-5);
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.about-hero__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 600px;
  margin-bottom: var(--space-8);
  opacity: 0;
  transform: translateY(25px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* --- Breadcrumb --- */

.about-hero__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.about-hero__breadcrumb-item {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.about-hero__breadcrumb-link {
  color: rgba(var(--color-white-rgb), 0.45);
  transition: color 0.3s ease;
}

.about-hero__breadcrumb-link:hover {
  color: var(--color-logo-gold);
}

.about-hero__breadcrumb-sep {
  color: rgba(var(--color-white-rgb), 0.25);
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.about-hero__breadcrumb-item[aria-current="page"] span {
  color: var(--color-logo-gold);
  font-weight: var(--font-weight-medium);
}

/* Trigger entrance animations */
.about-hero.is-visible .about-hero__label,
.about-hero.is-visible .about-hero__heading,
.about-hero.is-visible .about-hero__description,
.about-hero.is-visible .about-hero__breadcrumb-list {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative Gold Line at bottom of hero */
.about-hero__gold-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.3) 30%,
    rgba(var(--color-logo-gold-rgb), 0.5) 50%,
    rgba(var(--color-logo-gold-rgb), 0.3) 70%,
    transparent 100%
  );
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.about-hero.is-visible .about-hero__gold-line {
  width: 80%;
}


/* ==============================================================
   36b. WHO WE ARE
   ----------------------------------------------------------------
   Two-column layout: image (left) + text with stats (right).
   IntersectionObserver entrance — image from left, text from right.
   ============================================================== */

.about-who {
  position: relative;
  overflow: hidden;
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.about-who__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-who__glow--left {
  position: absolute;
  top: 10%;
  left: -80px;
  width: 500px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-who__glow--right {
  position: absolute;
  bottom: 5%;
  right: -60px;
  width: 450px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-who__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 70%
  );
}

/* --- Content Container --- */

.about-who__container {
  position: relative;
  z-index: 2;
}

/* --- Section Header --- */

.about-who__header {
  text-align: center;
  margin-bottom: var(--space-16);
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-who.is-visible .about-who__header {
  opacity: 1;
  transform: translateY(0);
}

.about-who__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

.about-who__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
}

/* --- Two-Column Content --- */

.about-who__content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

/* --- Left: Image Frame --- */

.about-who__image-wrapper {
  flex: 0 0 45%;
  max-width: 45%;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.about-who.is-visible .about-who__image-wrapper {
  opacity: 1;
  transform: translateX(0);
}

.about-who__image-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(var(--color-logo-gold-rgb), 0.06);
}

.about-who__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-navy-rgb), 0.8) 0%,
    rgba(4, 8, 16, 0.9) 100%
  );
}

.about-who__image-placeholder i {
  font-size: 6rem;
  color: rgba(var(--color-logo-gold-rgb), 0.15);
}

/* --- Right: Text Content --- */

.about-who__text {
  flex: 1;
  opacity: 0;
  transform: translateX(40px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.about-who.is-visible .about-who__text {
  opacity: 1;
  transform: translateX(0);
}

.about-who__paragraph {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  color: rgba(var(--color-white-rgb), 0.6);
  margin-bottom: var(--space-5);
}

.about-who__paragraph:last-of-type {
  margin-bottom: var(--space-10);
}

/* --- Stats Bar --- */

.about-who__stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-top: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
}

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

.about-who__stat-number {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-logo-gold);
}

.about-who__stat-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.about-who__stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.2) 50%,
    transparent 100%
  );
}


/* ==============================================================
   36c. WHAT WE OFFER
   ----------------------------------------------------------------
   Grid of 5 premium animated cards.
   IntersectionObserver staggered entrance.
   ============================================================== */

.about-offer {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.5) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.6) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.about-offer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-offer__glow--left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-offer__glow--right {
  position: absolute;
  bottom: 15%;
  right: -80px;
  width: 480px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-offer__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.012) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
}

/* --- Content Container --- */

.about-offer__container {
  position: relative;
  z-index: 2;
}

/* --- Section Header --- */

.about-offer__header {
  text-align: center;
  margin-bottom: var(--space-16);
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-offer.is-visible .about-offer__header {
  opacity: 1;
  transform: translateY(0);
}

.about-offer__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

.about-offer__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.about-offer__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 520px;
  margin-inline: auto;
}

/* --- Offer Cards Grid --- */

.about-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* --- Offer Card — Dark Navy Glass --- */

.about-offer__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8);
  /* Glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.6);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.08);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  /* GPU-accelerated entrance */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
  /* Stagger delay set via JS inline style */
}

/* Last 2 cards span 1.5 cols (center them in 3-col grid) */


.about-offer.is-visible .about-offer__card {
  opacity: 1;
  transform: translateY(0);
}

/* Card Hover Effects */
.about-offer__card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(var(--color-logo-gold-rgb), 0.06);
  background: rgba(var(--color-primary-navy-rgb), 0.75);
}

/* Focus visible for keyboard */
.about-offer__card:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}

/* --- Card Icon --- */

.about-offer__card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.15) 0%,
    rgba(var(--color-logo-gold-rgb), 0.05) 100%
  );
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  transition: transform 0.35s ease, background 0.35s ease;
}

.about-offer__card:hover .about-offer__card-icon {
  transform: scale(1.08);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.2) 0%,
    rgba(var(--color-logo-gold-rgb), 0.08) 100%
  );
}

.about-offer__card-icon i {
  font-size: 1.4rem;
  color: var(--color-logo-gold);
}

/* --- Card Body --- */

.about-offer__card-body {
  flex: 1;
  min-width: 0;
}

.about-offer__card-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.about-offer__card-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.45);
}

/* --- Card Arrow --- */

.about-offer__card-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(var(--color-logo-gold-rgb), 0.06);
  align-self: center;
  transition: transform 0.35s ease, background 0.35s ease;
}

.about-offer__card:hover .about-offer__card-arrow {
  transform: translate(3px, -3px);
  background: rgba(var(--color-logo-gold-rgb), 0.12);
}

.about-offer__card-arrow i {
  font-size: 1.1rem;
  color: var(--color-logo-gold);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.about-offer__card:hover .about-offer__card-arrow i {
  opacity: 1;
}


/* ==============================================================
   36d. WHY CHOOSE US
   ----------------------------------------------------------------
   Grid of 5 feature cards.
   IntersectionObserver staggered entrance.
   ============================================================== */

.about-why {
  position: relative;
  overflow: hidden;
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.about-why__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-why__glow--left {
  position: absolute;
  top: 15%;
  left: -80px;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.012) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-why__glow--right {
  position: absolute;
  bottom: 10%;
  right: -60px;
  width: 450px;
  height: 380px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.03) 0%,
    rgba(var(--color-logo-gold-rgb), 0.01) 45%,
    transparent 70%
  );
  border-radius: 50%;
}

.about-why__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    );
  background-size: 120px 120px;
  mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 45% 45% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
}

/* --- Content Container --- */

.about-why__container {
  position: relative;
  z-index: 2;
}

/* --- Section Header --- */

.about-why__header {
  text-align: center;
  margin-bottom: var(--space-16);
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-why.is-visible .about-why__header {
  opacity: 1;
  transform: translateY(0);
}

.about-why__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
}

.about-why__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.about-why__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 520px;
  margin-inline: auto;
}

/* --- Feature Cards Grid --- */

.about-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Last 2 cards: center them in 3-col grid */
.about-why__card:nth-child(4) {
  grid-column: 1 / 2;
  justify-self: end;
  max-width: calc(100% - var(--space-3));
}

.about-why__card:nth-child(5) {
  grid-column: 3 / 4;
  justify-self: start;
  max-width: calc(100% - var(--space-3));
}

/* --- Feature Card — Dark Navy Glass --- */

.about-why__card {
  position: relative;
  padding: var(--space-8);
  text-align: center;
  /* Glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.6);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.08);
  border-radius: var(--radius-xl);
  /* Luxury shadow */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  /* GPU-accelerated entrance */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
  /* Stagger delay set via JS inline style */
}

.about-why.is-visible .about-why__card {
  opacity: 1;
  transform: translateY(0);
}

/* Card Hover */
.about-why__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 50px rgba(var(--color-logo-gold-rgb), 0.06);
  background: rgba(var(--color-primary-navy-rgb), 0.75);
}

/* Focus visible */
.about-why__card:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}

/* --- Card Icon --- */

.about-why__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.15) 0%,
    rgba(var(--color-logo-gold-rgb), 0.05) 100%
  );
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  margin-inline: auto;
  margin-bottom: var(--space-5);
  transition: transform 0.35s ease, background 0.35s ease;
}

.about-why__card:hover .about-why__card-icon {
  transform: scale(1.1);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.22) 0%,
    rgba(var(--color-logo-gold-rgb), 0.08) 100%
  );
}

.about-why__card-icon i {
  font-size: 1.6rem;
  color: var(--color-logo-gold);
}

/* --- Card Body --- */



.about-why__card-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.about-why__card-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.45);
  max-width: 320px;
  margin-inline: auto;
}


/* ==============================================================
   36e. OUR COMMITMENT
   ----------------------------------------------------------------
   Centered luxury card with circuit decorations and commitment pillars.
   IntersectionObserver entrance — card fades up, content staggered.
   ============================================================== */

.about-commitment {
  position: relative;
  overflow: hidden;
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.about-commitment__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-commitment__glow--left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.about-commitment__glow--right {
  position: absolute;
  bottom: 15%;
  right: -80px;
  width: 450px;
  height: 380px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    rgba(var(--color-logo-gold-rgb), 0.012) 45%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.2s ease 0.15s, transform 1.2s ease 0.15s;
}

.about-commitment.is-visible .about-commitment__glow--left,
.about-commitment.is-visible .about-commitment__glow--right {
  opacity: 1;
  transform: scale(1);
}

.about-commitment__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
}

/* --- Content Container --- */

.about-commitment__container {
  position: relative;
  z-index: 2;
}

/* --- Premium Card --- */

.about-commitment__card {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-12);
  /* Glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.5);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  border-radius: var(--radius-2xl);
  /* Luxury shadow */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 80px rgba(var(--color-logo-gold-rgb), 0.04),
    inset 0 1px 0 rgba(var(--color-logo-gold-rgb), 0.06);
  text-align: center;
  /* Entrance animation */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.about-commitment.is-visible .about-commitment__card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* --- Circuit Decoration --- */

.about-commitment__decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-commitment__circuit {
  position: absolute;
  background: rgba(var(--color-logo-gold-rgb), 0.04);
  border-radius: 1px;
}

.about-commitment__circuit--1 {
  top: 35%;
  left: 0;
  width: 25%;
  height: 1px;
  animation: commitment-pulse-line 6s ease-in-out infinite;
}

.about-commitment__circuit--2 {
  bottom: 30%;
  right: 0;
  width: 20%;
  height: 1px;
  animation: commitment-pulse-line 6s ease-in-out infinite 1.5s;
}

.about-commitment__circuit--3 {
  left: 15%;
  top: 0;
  width: 1px;
  height: 25%;
  animation: commitment-pulse-line 6s ease-in-out infinite 3s;
}

.about-commitment__circuit--4 {
  right: 12%;
  bottom: 0;
  width: 1px;
  height: 20%;
  animation: commitment-pulse-line 6s ease-in-out infinite 4.5s;
}

.about-commitment__node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--color-logo-gold-rgb), 0.12);
}

.about-commitment__node--1 {
  top: 35%;
  left: 25%;
  animation: commitment-pulse-dot 4s ease-in-out infinite;
}

.about-commitment__node--2 {
  bottom: 30%;
  right: 20%;
  animation: commitment-pulse-dot 4s ease-in-out infinite 1s;
}

.about-commitment__node--3 {
  left: 15%;
  top: 25%;
  animation: commitment-pulse-dot 4s ease-in-out infinite 2s;
}

.about-commitment__node--4 {
  right: 12%;
  bottom: 20%;
  animation: commitment-pulse-dot 4s ease-in-out infinite 3s;
}

@keyframes commitment-pulse-line {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes commitment-pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
}

/* --- Card Content --- */

.about-commitment__content {
  position: relative;
  z-index: 2;
}

.about-commitment__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.about-commitment__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

/* Gold decorative line */
.about-commitment__gold-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-logo-gold) 50%,
    transparent 100%
  );
  margin-inline: auto;
  margin-bottom: var(--space-8);
  opacity: 0;
  transform: scaleX(0);
  will-change: transform, opacity;
  transition: opacity 0.6s ease 0.4s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.about-commitment__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.about-commitment__description:last-of-type {
  margin-bottom: var(--space-10);
}

/* Staggered content reveal */
.about-commitment.is-visible .about-commitment__label,
.about-commitment.is-visible .about-commitment__heading,
.about-commitment.is-visible .about-commitment__gold-line,
.about-commitment.is-visible .about-commitment__description {
  opacity: 1;
  transform: translateY(0) scaleX(1);
}

/* --- Commitment Pillars --- */

.about-commitment__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.about-commitment.is-visible .about-commitment__pillars {
  opacity: 1;
  transform: translateY(0);
}

.about-commitment__pillar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.about-commitment__pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(var(--color-logo-gold-rgb), 0.15) 0%,
    rgba(var(--color-logo-gold-rgb), 0.05) 100%
  );
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.1);
}

.about-commitment__pillar-icon i {
  font-size: 1.1rem;
  color: var(--color-logo-gold);
}

.about-commitment__pillar-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.7);
  white-space: nowrap;
}


/* ==============================================================
   36f. CALL TO ACTION
   ----------------------------------------------------------------
   Centered card with heading, description, two CTA buttons.
   Primary: gold filled (Shop Products).
   Secondary: outlined (Contact Us — WhatsApp).
   IntersectionObserver entrance — card fades up, content staggered.
   ============================================================== */

.about-cta {
  position: relative;
  overflow: hidden;
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.about-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-cta__glow--left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 500px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.05) 0%,
    rgba(var(--color-logo-gold-rgb), 0.02) 45%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.about-cta__glow--right {
  position: absolute;
  bottom: 15%;
  right: -80px;
  width: 450px;
  height: 380px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    rgba(var(--color-logo-gold-rgb), 0.015) 45%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.2s ease 0.15s, transform 1.2s ease 0.15s;
}

.about-cta.is-visible .about-cta__glow--left,
.about-cta.is-visible .about-cta__glow--right {
  opacity: 1;
  transform: scale(1);
}

.about-cta__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.01) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 40% 40% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    transparent 70%
  );
}

/* --- Content Container --- */

.about-cta__container {
  position: relative;
  z-index: 2;
}

/* --- Premium Card --- */

.about-cta__card {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-12);
  /* Glass effect */
  background: rgba(var(--color-primary-navy-rgb), 0.5);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  border-radius: var(--radius-2xl);
  /* Luxury shadow */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 80px rgba(var(--color-logo-gold-rgb), 0.04),
    inset 0 1px 0 rgba(var(--color-logo-gold-rgb), 0.06);
  text-align: center;
  /* Entrance animation */
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.about-cta.is-visible .about-cta__card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* --- Circuit Decoration --- */

.about-cta__decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-cta__circuit {
  position: absolute;
  background: rgba(var(--color-logo-gold-rgb), 0.04);
  border-radius: 1px;
}

.about-cta__circuit--1 {
  top: 35%;
  left: 0;
  width: 25%;
  height: 1px;
  animation: about-cta-pulse-line 6s ease-in-out infinite;
}

.about-cta__circuit--2 {
  bottom: 30%;
  right: 0;
  width: 20%;
  height: 1px;
  animation: about-cta-pulse-line 6s ease-in-out infinite 1.5s;
}

.about-cta__circuit--3 {
  left: 15%;
  top: 0;
  width: 1px;
  height: 25%;
  animation: about-cta-pulse-line 6s ease-in-out infinite 3s;
}

.about-cta__circuit--4 {
  right: 12%;
  bottom: 0;
  width: 1px;
  height: 20%;
  animation: about-cta-pulse-line 6s ease-in-out infinite 4.5s;
}

.about-cta__node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--color-logo-gold-rgb), 0.12);
}

.about-cta__node--1 {
  top: 35%;
  left: 25%;
  animation: about-cta-pulse-dot 4s ease-in-out infinite;
}

.about-cta__node--2 {
  bottom: 30%;
  right: 20%;
  animation: about-cta-pulse-dot 4s ease-in-out infinite 1s;
}

.about-cta__node--3 {
  left: 15%;
  top: 25%;
  animation: about-cta-pulse-dot 4s ease-in-out infinite 2s;
}

.about-cta__node--4 {
  right: 12%;
  bottom: 20%;
  animation: about-cta-pulse-dot 4s ease-in-out infinite 3s;
}

@keyframes about-cta-pulse-line {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes about-cta-pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
}

/* --- Card Content --- */

.about-cta__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.about-cta__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.about-cta__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.5);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

/* Staggered content reveal */
.about-cta.is-visible .about-cta__label,
.about-cta.is-visible .about-cta__heading,
.about-cta.is-visible .about-cta__description {
  opacity: 1;
  transform: translateY(0);
}

/* --- CTA Buttons --- */

.about-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

.about-cta.is-visible .about-cta__buttons {
  opacity: 1;
  transform: translateY(0);
}

/* Primary Button — Gold filled */
.about-cta__btn--primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-primary-navy);
  background: var(--color-logo-gold);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(var(--color-logo-gold-rgb), 0.3);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.about-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(var(--color-logo-gold-rgb), 0.4);
  background: var(--color-logo-gold-light);
}

.about-cta__btn--primary:active {
  transform: translateY(0);
}

.about-cta__btn--primary i {
  font-size: 1.1rem;
}

/* Secondary Button — Outlined */
.about-cta__btn--secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-logo-gold);
  background: transparent;
  border: 1.5px solid rgba(var(--color-logo-gold-rgb), 0.3);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.about-cta__btn--secondary:hover {
  transform: translateY(-2px);
  background: rgba(var(--color-logo-gold-rgb), 0.06);
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  box-shadow: 0 4px 16px rgba(var(--color-logo-gold-rgb), 0.15);
}

.about-cta__btn--secondary:active {
  transform: translateY(0);
}

.about-cta__btn--secondary i {
  font-size: 1.1rem;
}

/* Focus visible for keyboard */
.about-cta__btn--primary:focus-visible,
.about-cta__btn--secondary:focus-visible {
  outline: 2px solid var(--color-logo-gold);
  outline-offset: 3px;
}


/* ==============================================================
   36g. ABOUT PAGE — RESPONSIVE
   ============================================================== */

@media (max-width: 1199px) {
  /* Laptop */
  .about-who__content {
    gap: var(--space-10);
  }
}

@media (max-width: 1023px) {
  /* Tablet */
  .about-hero {
    padding-block: var(--space-20) var(--space-16);
  }

  .about-who {
    padding-block: var(--space-16);
  }

  .about-who__content {
    flex-direction: column;
    gap: var(--space-10);
  }

  .about-who__image-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }

  .about-who.is-visible .about-who__image-wrapper {
    opacity: 1;
    transform: translateY(0);
  }

  .about-who__text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
  }

  .about-who.is-visible .about-who__text {
    opacity: 1;
    transform: translateY(0);
  }

  .about-offer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-offer__card:nth-child(4),
  .about-offer__card:nth-child(5) {
    grid-column: auto;
    justify-self: auto;
    max-width: none;
  }

  .about-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-why__card:nth-child(4),
  .about-why__card:nth-child(5) {
    grid-column: auto;
    justify-self: auto;
    max-width: none;
  }

  .about-why__card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 400px;
    margin-inline: auto;
  }

  .about-commitment__card {
    padding: var(--space-12) var(--space-8);
  }

  .about-commitment__pillars {
    flex-direction: column;
    gap: var(--space-5);
  }

  .about-cta__card {
    padding: var(--space-12) var(--space-8);
  }
}

@media (max-width: 767px) {
  /* Mobile */
  .about-hero {
    padding-block: var(--space-20) var(--space-12);
  }

  .about-hero__heading {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .about-who {
    padding-block: var(--space-12);
  }

  .about-who__stats {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .about-who__stat-divider {
    width: 40px;
    height: 1px;
  }

  .about-offer__grid {
    grid-template-columns: 1fr;
  }

  .about-why__grid {
    grid-template-columns: 1fr;
  }

  .about-why__card:nth-child(5) {
    max-width: none;
  }

  .about-commitment {
    padding-block: var(--space-12);
  }

  .about-commitment__card {
    padding: var(--space-10) var(--space-6);
  }

  .about-cta {
    padding-block: var(--space-12);
  }

  .about-cta__card {
    padding: var(--space-10) var(--space-6);
  }

  .about-cta__buttons {
    flex-direction: column;
    gap: var(--space-4);
  }

  .about-cta__btn--primary,
  .about-cta__btn--secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  /* Small mobile */
  .about-hero {
    padding-block: var(--space-16) var(--space-10);
  }

  .about-offer__card {
    padding: var(--space-6);
    flex-direction: column;
    align-items: flex-start;
  }

  .about-offer__card-arrow {
    align-self: flex-end;
  }

  .about-why__card {
    padding: var(--space-6);
  }

  .about-why__card-icon {
    width: 52px;
    height: 52px;
  }

  .about-why__card-icon i {
    font-size: 1.3rem;
  }

  .about-commitment__pillars {
    align-items: flex-start;
  }

  .about-commitment__pillar {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    background: rgba(var(--color-primary-navy-rgb), 0.4);
    border: 1px solid rgba(var(--color-logo-gold-rgb), 0.06);
    border-radius: var(--radius-lg);
  }
}

@media (min-width: 1440px) {
  /* Ultra-wide */
  .about-hero {
    padding-block: 10rem 6rem;
  }

  .about-who,
  .about-offer,
  .about-why,
  .about-commitment,
  .about-cta {
    padding-block: 8rem;
  }

  .about-offer__grid {
    gap: var(--space-8);
  }

  .about-why__grid {
    gap: var(--space-8);
  }
}


/* ==============================================================
   36h. ABOUT PAGE — REDUCED MOTION
   ============================================================== */

@media (prefers-reduced-motion: reduce) {
  .about-hero__label,
  .about-hero__heading,
  .about-hero__description,
  .about-hero__breadcrumb-list,
  .about-hero__gold-line {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .about-hero__gold-line {
    width: 80%;
  }

  .about-who__header,
  .about-who__image-wrapper,
  .about-who__text {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .about-offer__header,
  .about-offer__card {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .about-why__header,
  .about-why__card {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .about-commitment__glow--left,
  .about-commitment__glow--right,
  .about-commitment__card,
  .about-commitment__label,
  .about-commitment__heading,
  .about-commitment__gold-line,
  .about-commitment__description,
  .about-commitment__pillars {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .about-commitment__gold-line {
    transform: scaleX(1);
  }

  .about-cta__glow--left,
  .about-cta__glow--right,
  .about-cta__card,
  .about-cta__label,
  .about-cta__heading,
  .about-cta__description,
  .about-cta__buttons {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .about-commitment__circuit,
  .about-commitment__node,
  .about-cta__circuit,
  .about-cta__node {
    animation: none;
  }
}


/* ==============================================================
   37. CONTACT PAGE
   ----------------------------------------------------------------
   Premium Contact page with 5 sections:
   1. Hero — dark navy, gold glows, blueprint, breadcrumb
   2. Contact Information — 4 premium glass cards (Location, Phone, Email, Hours)
   3. Google Maps — embedded map with luxury frame
   4. Contact Form — Web3Forms-compatible form with validation
   5. Quick Contact — Call, Email, WhatsApp action buttons
   ============================================================== */


/* ==============================================================
   37a. CONTACT HERO
   ----------------------------------------------------------------
   Dark navy hero banner matching About page pattern.
   ============================================================== */

.contact-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 8, 16, 0.5) 0%,
      transparent 40%,
      rgba(var(--color-primary-navy-rgb), 0.7) 100%
    );
  padding-block: var(--space-32) var(--space-20);
}

/* --- Background Effects --- */

.contact-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.contact-hero__glow--left {
  position: absolute;
  top: -100px;
  left: -150px;
  width: 600px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.07) 0%,
    rgba(var(--color-logo-gold-rgb), 0.025) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.contact-hero__glow--right {
  position: absolute;
  bottom: -120px;
  right: -100px;
  width: 550px;
  height: 420px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.055) 0%,
    rgba(var(--color-logo-gold-rgb), 0.02) 50%,
    transparent 70%
  );
  border-radius: 50%;
}

.contact-hero__glow--center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.03) 0%,
    transparent 60%
  );
  border-radius: 50%;
}

.contact-hero__blueprint {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--color-logo-gold-rgb), 0.015) 1px,
      transparent 1px
    );
  background-size: 100px 100px;
  mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 70%
  );
}

/* --- Hero Content --- */

.contact-hero__container {
  position: relative;
  z-index: 2;
}

.contact-hero__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-hero__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: var(--space-5);
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.contact-hero__description {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 650px;
  margin-bottom: var(--space-8);
  opacity: 0;
  transform: translateY(25px);
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* --- Breadcrumb --- */

.contact-hero__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.contact-hero__breadcrumb-item {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.contact-hero__breadcrumb-link {
  color: rgba(var(--color-white-rgb), 0.45);
  transition: color 0.3s ease;
}

.contact-hero__breadcrumb-link:hover {
  color: var(--color-logo-gold);
}

.contact-hero__breadcrumb-sep {
  color: rgba(var(--color-white-rgb), 0.25);
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.contact-hero__breadcrumb-item[aria-current="page"] span {
  color: var(--color-logo-gold);
  font-weight: var(--font-weight-medium);
}

/* Trigger entrance animations */
.contact-hero.is-visible .contact-hero__label,
.contact-hero.is-visible .contact-hero__heading,
.contact-hero.is-visible .contact-hero__description,
.contact-hero.is-visible .contact-hero__breadcrumb-list {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative Gold Line */
.contact-hero__gold-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.3) 30%,
    rgba(var(--color-logo-gold-rgb), 0.5) 50%,
    rgba(var(--color-logo-gold-rgb), 0.3) 70%,
    transparent 100%
  );
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.contact-hero.is-visible .contact-hero__gold-line {
  width: 80%;
}


/* ==============================================================
   37b. CONTACT INFORMATION — INFO CARDS
   ----------------------------------------------------------------
   4 premium glass-effect cards: Location, Phone, Email, Hours.
   ============================================================== */

.contact-info {
  position: relative;
  overflow: hidden;
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.contact-info__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.contact-info__glow--left {
  position: absolute;
  top: 10%;
  left: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    transparent 65%
  );
  border-radius: 50%;
}

.contact-info__glow--right {
  position: absolute;
  bottom: 5%;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    transparent 65%
  );
  border-radius: 50%;
}

.contact-info__container {
  position: relative;
  z-index: 2;
}

/* --- Section Header --- */

.contact-info__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.contact-info__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.contact-info__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.contact-info__desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 550px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.contact-info.is-visible .contact-info__label,
.contact-info.is-visible .contact-info__heading,
.contact-info.is-visible .contact-info__desc {
  opacity: 1;
  transform: translateY(0);
}

/* --- Cards Grid --- */

.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* --- Individual Card --- */

.contact-info__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.contact-info__card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.5) 50%,
    transparent 100%
  );
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-info__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.2);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(var(--color-logo-gold-rgb), 0.05);
}

.contact-info__card:hover::before {
  opacity: 1;
}

/* Staggered entrance */
.contact-info.is-visible .contact-info__card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-info.is-visible .contact-info__card:nth-child(1) { transition-delay: 0.2s; }
.contact-info.is-visible .contact-info__card:nth-child(2) { transition-delay: 0.3s; }
.contact-info.is-visible .contact-info__card:nth-child(3) { transition-delay: 0.4s; }
.contact-info.is-visible .contact-info__card:nth-child(4) { transition-delay: 0.5s; }

/* Card Icon */
.contact-info__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: rgba(var(--color-logo-gold-rgb), 0.08);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.15);
  color: var(--color-logo-gold);
  font-size: 1.5rem;
  margin-bottom: var(--space-5);
  transition: transform 0.3s ease, background 0.3s ease;
}

.contact-info__card:hover .contact-info__card-icon {
  transform: scale(1.08);
  background: rgba(var(--color-logo-gold-rgb), 0.12);
}

/* Card Title */
.contact-info__card-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

/* Card Body */
.contact-info__card-body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.6);
}

.contact-info__card-body p {
  margin: 0;
}

/* Card Link */
.contact-info__card-link {
  color: rgba(var(--color-white-rgb), 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info__card-link:hover {
  color: var(--color-logo-gold);
}

/* --- Responsive: Info Cards --- */

@media (max-width: 1023px) {
  .contact-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .contact-info__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .contact-info {
    padding-block: var(--space-16);
  }

  .contact-info__card {
    padding: var(--space-6) var(--space-5);
  }
}


/* ==============================================================
   37c. GOOGLE MAP
   ----------------------------------------------------------------
   Embedded Google Maps iframe with luxury styling.
   ============================================================== */

.contact-map {
  position: relative;
  background-color: var(--color-primary-navy);
  padding-block: var(--space-16);
}

.contact-map__container {
  position: relative;
  z-index: 2;
}

.contact-map__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.12);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.04);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.contact-map.is-visible .contact-map__frame {
  opacity: 1;
  transform: translateY(0);
}

.contact-map__frame iframe {
  display: block;
  width: 100%;
  height: 450px;
  filter: grayscale(0.3) brightness(0.85) contrast(1.1);
  transition: filter 0.3s ease;
}

.contact-map__frame:hover iframe {
  filter: grayscale(0) brightness(0.9) contrast(1.05);
}

/* Gold accent bar at top of map */
.contact-map__frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-logo-gold-rgb), 0.4) 50%,
    transparent 100%
  );
  z-index: 3;
}

@media (max-width: 767px) {
  .contact-map {
    padding-block: var(--space-10);
  }

  .contact-map__frame iframe {
    height: 300px;
  }
}


/* ==============================================================
   37d. CONTACT FORM
   ----------------------------------------------------------------
   Web3Forms-compatible form with premium styling, validation, and
   notification cards.
   ============================================================== */

.contact-form-section {
  position: relative;
  overflow: hidden;
  background-color: #060d1a;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-navy-rgb), 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(4, 8, 16, 0.5) 100%
    );
  padding-block: var(--space-24);
}

/* --- Background Effects --- */

.contact-form-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.contact-form-section__glow--left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.04) 0%,
    transparent 65%
  );
  border-radius: 50%;
}

.contact-form-section__glow--right {
  position: absolute;
  bottom: 10%;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--color-logo-gold-rgb), 0.035) 0%,
    transparent 65%
  );
  border-radius: 50%;
}

.contact-form-section__container {
  position: relative;
  z-index: 2;
}

/* --- Section Header --- */

.contact-form-section__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.contact-form-section__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.contact-form-section__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.contact-form-section__desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.55);
  max-width: 500px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.contact-form-section.is-visible .contact-form-section__label,
.contact-form-section.is-visible .contact-form-section__heading,
.contact-form-section.is-visible .contact-form-section__desc {
  opacity: 1;
  transform: translateY(0);
}

/* --- Form Card Container --- */

.contact-form-card {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--color-logo-gold-rgb), 0.04);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.contact-form-section.is-visible .contact-form-card {
  opacity: 1;
  transform: translateY(0);
}

/* Gold accent bar at top */
.contact-form-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-logo-gold) 30%, var(--color-logo-gold) 70%, transparent 100%);
  border-radius: 0 0 4px 4px;
}

/* --- Form Grid --- */

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-6);
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

/* --- Form Fields --- */

.contact-form__field {
  position: relative;
}

.contact-form__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(var(--color-white-rgb), 0.7);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: rgba(var(--color-white-rgb), 0.25);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: rgba(var(--color-logo-gold-rgb), 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(var(--color-logo-gold-rgb), 0.08);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

/* Error state */
.contact-form__input.is-error,
.contact-form__textarea.is-error {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error message */
.contact-form__error {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: #ef4444;
  margin-top: var(--space-1);
  min-height: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contact-form__error:empty {
  opacity: 0;
}

.contact-form__error:not(:empty) {
  opacity: 1;
}

/* Honeypot — hidden */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* --- Submit Button --- */

.contact-form__submit-wrap {
  margin-top: var(--space-8);
  text-align: center;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-10);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-navy);
  background: linear-gradient(135deg, var(--color-logo-gold), #e6c36a, var(--color-logo-gold));
  background-size: 200% 200%;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow:
    0 6px 24px rgba(var(--color-logo-gold-rgb), 0.35),
    0 0 60px rgba(var(--color-logo-gold-rgb), 0.1);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background-position 0.5s ease;
  animation: contact-form-btn-shimmer 3s ease-in-out infinite;
}

@keyframes contact-form-btn-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.contact-form__submit:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 10px 36px rgba(var(--color-logo-gold-rgb), 0.45),
    0 0 80px rgba(var(--color-logo-gold-rgb), 0.15);
}

.contact-form__submit:active {
  transform: translateY(-1px) scale(0.98);
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contact-form__submit i {
  font-size: 1.25rem;
}

/* --- Notification Cards --- */

.contact-form__notification {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  animation: contact-notif-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.contact-form__notification--success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.contact-form__notification--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* --- Responsive: Form --- */

@media (max-width: 639px) {
  .contact-form__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .contact-form-card {
    padding: var(--space-6) var(--space-4);
  }

  .contact-form-section {
    padding-block: var(--space-16);
  }

  .contact-form__submit {
    width: 100%;
    padding: var(--space-4) var(--space-6);
  }
}


/* ==============================================================
   37e. QUICK CONTACT BUTTONS
   ----------------------------------------------------------------
   Premium action buttons: Call, Email, WhatsApp.
   ============================================================== */

.contact-quick {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary-navy);
  padding-block: var(--space-24);
}

.contact-quick__container {
  position: relative;
  z-index: 2;
}

/* --- Header --- */

.contact-quick__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.contact-quick__label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-logo-gold);
  margin-bottom: var(--space-3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.contact-quick__heading {
  font-family: var(--font-family-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.contact-quick.is-visible .contact-quick__label,
.contact-quick.is-visible .contact-quick__heading {
  opacity: 1;
  transform: translateY(0);
}

/* --- Buttons Container --- */

.contact-quick__buttons {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Individual Button --- */

.contact-quick__btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  min-width: 280px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  opacity: 0;
  transform: translateY(25px);
}

.contact-quick.is-visible .contact-quick__btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-quick.is-visible .contact-quick__btn:nth-child(1) { transition-delay: 0.2s; }
.contact-quick.is-visible .contact-quick__btn:nth-child(2) { transition-delay: 0.3s; }
.contact-quick.is-visible .contact-quick__btn:nth-child(3) { transition-delay: 0.4s; }

.contact-quick__btn:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--color-logo-gold-rgb), 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 20px rgba(var(--color-logo-gold-rgb), 0.05);
}

.contact-quick__btn:active {
  transform: translateY(-2px);
}

/* Button Icon */
.contact-quick__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.contact-quick__btn:hover .contact-quick__btn-icon {
  transform: scale(1.08);
}

/* Call variant */
.contact-quick__btn--call .contact-quick__btn-icon {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.contact-quick__btn--call:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.25);
}

/* Email variant */
.contact-quick__btn--email .contact-quick__btn-icon {
  background: rgba(var(--color-logo-gold-rgb), 0.1);
  border: 1px solid rgba(var(--color-logo-gold-rgb), 0.2);
  color: var(--color-logo-gold);
}

.contact-quick__btn--email:hover {
  background: rgba(var(--color-logo-gold-rgb), 0.04);
  border-color: rgba(var(--color-logo-gold-rgb), 0.25);
}

/* WhatsApp variant */
.contact-quick__btn--whatsapp .contact-quick__btn-icon {
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.2);
  color: #25d366;
}

.contact-quick__btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.05);
  border-color: rgba(37, 211, 102, 0.25);
}

/* Button Text */
.contact-quick__btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-quick__btn-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: 0.02em;
}

.contact-quick__btn-desc {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(var(--color-white-rgb), 0.5);
}

/* Button Arrow */
.contact-quick__btn-arrow {
  margin-left: auto;
  font-size: 1.25rem;
  color: rgba(var(--color-white-rgb), 0.3);
  transition: transform 0.3s ease, color 0.3s ease;
}

.contact-quick__btn:hover .contact-quick__btn-arrow {
  transform: translate(3px, -3px);
  color: rgba(var(--color-white-rgb), 0.6);
}

/* --- Responsive: Quick Buttons --- */

@media (max-width: 1023px) {
  .contact-quick__buttons {
    gap: var(--space-4);
  }

  .contact-quick__btn {
    min-width: 260px;
    padding: var(--space-4) var(--space-5);
  }
}

@media (max-width: 639px) {
  .contact-quick {
    padding-block: var(--space-16);
  }

  .contact-quick__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-quick__btn {
    min-width: auto;
  }
}


/* ==============================================================
   37f. CONTACT PAGE — REDUCED MOTION
   ============================================================== */

@media (prefers-reduced-motion: reduce) {
  .contact-hero__label,
  .contact-hero__heading,
  .contact-hero__description,
  .contact-hero__breadcrumb-list,
  .contact-hero__gold-line {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .contact-hero__gold-line {
    width: 80%;
  }

  .contact-info__label,
  .contact-info__heading,
  .contact-info__desc,
  .contact-info__card {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .contact-map__frame {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .contact-form-section__label,
  .contact-form-section__heading,
  .contact-form-section__desc,
  .contact-form-card {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .contact-form__submit {
    transition: none;
    animation: none;
  }

  .contact-form__notification {
    animation: none;
  }

  .contact-quick__label,
  .contact-quick__heading,
  .contact-quick__btn {
    transition: none;
    opacity: 1;
    transform: none;
  }
}