/* ============================================
   MEDIKAUK — Professional Beauty Equipment
   Refined Luxury Beauty Aesthetic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&display=swap');

/* --- CSS Variables --- */
:root {
  --color-dark: #1D1D1B;
  --color-dark-90: rgba(29, 29, 27, 0.9);
  --color-dark-70: rgba(29, 29, 27, 0.7);
  --color-dark-50: rgba(29, 29, 27, 0.5);
  --color-dark-20: rgba(29, 29, 27, 0.2);
  --color-dark-10: rgba(29, 29, 27, 0.1);
  --color-dark-05: rgba(29, 29, 27, 0.05);
  --color-accent: #00A7CC;
  --color-accent-light: #00C2E8;
  --color-accent-dark: #008BA8;
  --color-accent-10: rgba(0, 167, 204, 0.1);
  --color-accent-20: rgba(0, 167, 204, 0.2);
  --color-white: #FFFFFF;
  --color-off-white: #F8F7F5;
  --color-cream: #F2F0EC;
  --color-warm-gray: #E8E5E0;
  --color-mid-gray: #B0ADA8;
  --color-text: #2C2C2A;
  --color-text-light: #6B6966;

  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(29,29,27,0.06);
  --shadow-md: 0 4px 20px rgba(29,29,27,0.08);
  --shadow-lg: 0 8px 40px rgba(29,29,27,0.1);
  --shadow-xl: 0 16px 60px rgba(29,29,27,0.12);

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  --header-height: 80px;
  --max-width: 1280px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

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

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 400;
}

h4 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 500;
}

p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-light);
}

.label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-3xl) 0;
}

.section--cream {
  background: var(--color-off-white);
}

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

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

.section--dark p {
  color: rgba(255,255,255,0.7);
}

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

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,167,204,0.3);
}

.btn--secondary {
  background: transparent;
  color: var(--color-dark);
  border: 1.5px solid var(--color-dark-20);
}

.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

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

.btn--white:hover {
  background: var(--color-off-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,255,255,0.2);
}

.btn--outline-white {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.3);
}

.btn--outline-white:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --- Header / Navigation --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  transition: all var(--transition-base);
  background: rgba(255,255,255,0.0);
}

.header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 20px rgba(29,29,27,0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.header__logo img {
  height: 28px;
  width: auto;
  transition: opacity var(--transition-fast);
}

.header__logo:hover img {
  opacity: 0.7;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav__link {
  padding: 0.5rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-dark-70);
  transition: color var(--transition-fast);
  position: relative;
}

.nav__link:hover,
.nav__link.active {
  color: var(--color-dark);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.2rem;
  right: 1.2rem;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  transform-origin: right;
}

.nav__link:hover::after,
.nav__link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Dropdown */
.nav__item {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
  border: 1px solid var(--color-dark-05);
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: 0.65rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-light);
  transition: all var(--transition-fast);
}

.nav__dropdown a:hover {
  color: var(--color-accent);
  background: var(--color-accent-10);
  padding-left: 1.8rem;
}

.nav__cta {
  margin-left: 0.8rem;
}

/* Mobile menu button */
.menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-dark);
  transition: all var(--transition-base);
  transform-origin: center;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__bg::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(0,167,204,0.08) 0%, transparent 60%);
  animation: heroGlow 8s ease-in-out infinite alternate;
}

.hero__bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, var(--color-dark), transparent);
}

@keyframes heroGlow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate(-5%, 5%) scale(1.1); opacity: 0.8; }
}

/* ORIGINAL hero__grid (kept for rollback):
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}
*/

/* --- Light Traces (abstract flowing lines) --- */
.hero__light-traces {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__light-traces svg {
  width: 100%;
  height: 100%;
}

.light-trace {
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.light-trace--1 {
  stroke: rgba(0, 194, 232, 0.15);
  stroke-width: 1.5;
  animation: traceReveal 4s ease-out 0.3s forwards, tracePulse 6s ease-in-out 4.3s infinite alternate;
}

.light-trace--2 {
  stroke: rgba(0, 167, 204, 0.10);
  stroke-width: 1;
  animation: traceReveal 3.5s ease-out 0.8s forwards, tracePulse 7s ease-in-out 4.3s infinite alternate;
}

.light-trace--3 {
  stroke: rgba(0, 194, 232, 0.07);
  stroke-width: 0.8;
  animation: traceReveal 3s ease-out 1.2s forwards, tracePulse 8s ease-in-out 4.2s infinite alternate;
}

.light-trace--4 {
  stroke: rgba(0, 167, 204, 0.12);
  stroke-width: 1;
  animation: traceReveal 4.5s ease-out 0.5s forwards, tracePulse 5s ease-in-out 5s infinite alternate;
}

@keyframes traceReveal {
  to { stroke-dashoffset: 0; }
}

@keyframes tracePulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--space-3xl)) var(--space-md) var(--space-3xl);
  width: 100%;
}

.hero__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero__label::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}

.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  line-height: 1.08;
  margin-bottom: var(--space-md);
  max-width: 700px;
}

.hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  max-width: 540px;
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.3);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* --- Product Hero (product pages) --- */
.product-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-dark);
}

.product-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.product-hero__bg::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(ellipse at center, rgba(0,167,204,0.06) 0%, transparent 60%);
}

.product-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.product-hero__text .label {
  margin-bottom: var(--space-sm);
}

.product-hero__text h1 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.product-hero__tagline {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-accent-light);
  margin-bottom: var(--space-md);
}

.product-hero__desc {
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-lg);
  max-width: 500px;
}

.product-hero__image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.product-hero__image img {
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.4));
  animation: productFloat 6s ease-in-out infinite;
}

@keyframes productFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.product-hero__image::before {
  content: '';
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0,167,204,0.2), transparent);
  filter: blur(15px);
}

/* --- Product Cards --- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-lg);
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-slow);
  border: 1px solid var(--color-dark-05);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-accent-20);
}

.product-card__image {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-off-white) 0%, var(--color-cream) 100%);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.product-card__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--color-white), transparent);
}

.product-card__image img {
  max-height: 240px;
  object-fit: contain;
  transition: transform var(--transition-slow);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.1));
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__category {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.product-card__desc {
  font-size: 0.92rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
  line-height: 1.65;
  flex: 1;
}

.product-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.product-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text);
}

.product-card__feature svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.product-card__link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--transition-base);
  margin-top: auto;
}

.product-card__link:hover {
  gap: 0.8rem;
}

.product-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.product-card__link:hover svg {
  transform: translateX(2px);
}

/* --- Advantage Cards (Why Choose) --- */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.advantage-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-dark-05);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.advantage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  transform-origin: left;
}

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

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

.advantage-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--color-accent);
}

.advantage-card__icon svg {
  width: 24px;
  height: 24px;
}

.advantage-card h4 {
  margin-bottom: 0.5rem;
}

.advantage-card p {
  font-size: 0.9rem;
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-xl);
}

.section-header .label {
  margin-bottom: var(--space-sm);
  display: block;
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

.section-header p {
  font-size: 1.05rem;
}

.section-header--left {
  text-align: left;
  max-width: none;
}

/* --- Training Section --- */
.training-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.training-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.training-feature {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.training-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.training-feature__icon svg {
  width: 20px;
  height: 20px;
}

.training-feature h4 {
  margin-bottom: 0.25rem;
  font-size: 1.05rem;
}

.training-feature p {
  font-size: 0.9rem;
}

.training-visual {
  position: relative;
  background: linear-gradient(135deg, var(--color-off-white) 0%, var(--color-cream) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.training-visual__content {
  text-align: center;
}

.training-visual__number {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1;
}

.training-visual__text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-dark);
  margin-top: 0.5rem;
}

.training-visual__sub {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: 0.5rem;
}

/* --- Brand Showcase (About section) --- */
.brand-showcase {
  position: relative;
  background: linear-gradient(135deg, var(--color-dark) 0%, #2a2a28 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}

.brand-showcase__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 194, 232, 0.15) 0%, transparent 70%);
  animation: brandGlow 4s ease-in-out infinite alternate;
}

@keyframes brandGlow {
  0% { width: 180px; height: 180px; opacity: 0.6; }
  100% { width: 280px; height: 280px; opacity: 1; }
}

.brand-showcase__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
}

.brand-showcase__rings svg {
  width: 100%;
  height: 100%;
}

.brand-ring {
  fill: none;
  stroke-dasharray: 12 18;
  stroke-linecap: round;
}

.brand-ring--1 {
  stroke: rgba(0, 194, 232, 0.15);
  stroke-width: 0.8;
  animation: ringRotate 30s linear infinite;
  transform-origin: 200px 200px;
}

.brand-ring--2 {
  stroke: rgba(0, 194, 232, 0.08);
  stroke-width: 0.6;
  stroke-dasharray: 8 24;
  animation: ringRotate 45s linear infinite reverse;
  transform-origin: 200px 200px;
}

.brand-ring--3 {
  stroke: rgba(0, 194, 232, 0.05);
  stroke-width: 0.5;
  stroke-dasharray: 16 30;
  animation: ringRotate 60s linear infinite;
  transform-origin: 200px 200px;
}

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

.brand-showcase__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.brand-showcase__logo {
  height: 42px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-md);
  animation: logoShine 5s ease-in-out infinite;
}

@keyframes logoShine {
  0%, 100% { filter: brightness(0) invert(1); }
  50% { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(0, 194, 232, 0.5)); }
}

.brand-showcase__location {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.brand-showcase__tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* --- Awards Section --- */
.section--awards {
  position: relative;
  overflow: hidden;
}

.awards-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.awards-bg svg {
  width: 100%;
  height: 100%;
}

.awards-arc {
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 8 16;
  filter: drop-shadow(0 0 6px rgba(0, 194, 232, 0.3));
}

.awards-arc--1 {
  stroke: rgba(0, 194, 232, 0.18);
  stroke-width: 1.2;
  animation: arcRotate 60s linear infinite;
  transform-origin: 0 350px;
}

.awards-arc--2 {
  stroke: rgba(0, 194, 232, 0.12);
  stroke-width: 1;
  stroke-dasharray: 12 22;
  animation: arcRotate 80s linear infinite reverse;
  transform-origin: 0 350px;
}

.awards-arc--3 {
  stroke: rgba(0, 194, 232, 0.08);
  stroke-width: 0.8;
  stroke-dasharray: 10 28;
  animation: arcRotate 100s linear infinite;
  transform-origin: 0 350px;
}

.awards-arc--4 {
  stroke: rgba(0, 194, 232, 0.18);
  stroke-width: 1.2;
  animation: arcRotate 70s linear infinite reverse;
  transform-origin: 1400px 350px;
}

.awards-arc--5 {
  stroke: rgba(0, 194, 232, 0.12);
  stroke-width: 1;
  stroke-dasharray: 12 22;
  animation: arcRotate 90s linear infinite;
  transform-origin: 1400px 350px;
}

.awards-arc--6 {
  stroke: rgba(0, 194, 232, 0.08);
  stroke-width: 0.8;
  stroke-dasharray: 10 28;
  animation: arcRotate 110s linear infinite reverse;
  transform-origin: 1400px 350px;
}

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

.section--awards .container {
  position: relative;
  z-index: 1;
}

.awards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.award-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: var(--space-md);
  min-width: 160px;
}

.award-badge__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-light);
}

.award-badge__icon svg {
  width: 28px;
  height: 28px;
}

.award-badge__title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-white);
}

.award-badge__desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
}

/* --- CTA Section --- */
.cta-section {
  padding: var(--space-3xl) 0;
  text-align: center;
  background: linear-gradient(135deg, var(--color-off-white) 0%, var(--color-cream) 100%);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, var(--color-accent-10), transparent 60%);
}

.cta-section h2 {
  margin-bottom: var(--space-sm);
  position: relative;
}

.cta-section p {
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto var(--space-lg);
  position: relative;
}

.cta-section .btn-group {
  justify-content: center;
  position: relative;
}

/* --- Footer --- */
.footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.7);
  padding: var(--space-3xl) 0 var(--space-lg);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer__brand p {
  font-size: 0.9rem;
  margin-top: var(--space-sm);
  color: rgba(255,255,255,0.5);
  max-width: 280px;
}

.footer__logo {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 0.5rem;
}

.footer h5 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.footer ul li {
  margin-bottom: 0.5rem;
}

.footer ul li a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  transition: color var(--transition-fast);
}

.footer ul li a:hover {
  color: var(--color-accent-light);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
}

.footer__contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.footer__contact-item a {
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.footer__contact-item a:hover {
  color: var(--color-accent-light);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: all var(--transition-fast);
}

.footer__social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(0,167,204,0.1);
}

.footer__social svg {
  width: 16px;
  height: 16px;
}

/* --- WhatsApp Floating Button --- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: all var(--transition-base);
  animation: whatsappPulse 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,0.5);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: white;
}

@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50% { box-shadow: 0 4px 30px rgba(37,211,102,0.6), 0 0 0 8px rgba(37,211,102,0.1); }
}

/* --- Contact Page --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
}

.contact-form {
  background: var(--color-white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-dark-05);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  margin-bottom: 0.4rem;
}

.form-group label .optional {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: 0.78rem;
}

.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-dark-10);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--color-dark);
  background: var(--color-white);
  transition: all var(--transition-fast);
  outline: none;
}

.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-10);
}

textarea.form-input {
  min-height: 140px;
  resize: vertical;
}

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

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

.contact-info-card {
  padding: var(--space-lg);
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.contact-info-card:hover {
  background: var(--color-cream);
}

.contact-info-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.contact-info-card__icon svg {
  width: 20px;
  height: 20px;
}

.contact-info-card h4 {
  margin-bottom: 0.25rem;
}

.contact-info-card p {
  font-size: 0.9rem;
}

.contact-info-card a {
  color: var(--color-accent);
  font-weight: 500;
}

.contact-info-card a:hover {
  color: var(--color-accent-dark);
}

/* --- Product Page Content Sections --- */
.product-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-dark-05);
  transition: all var(--transition-base);
}

.benefit-item:hover {
  border-color: var(--color-accent-20);
  box-shadow: var(--shadow-sm);
}

.benefit-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

.benefit-item__icon svg {
  width: 18px;
  height: 18px;
}

.benefit-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.benefit-item p {
  font-size: 0.85rem;
}

/* Tech / How it Works */
.tech-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.tech-content--reverse {
  direction: rtl;
}

.tech-content--reverse > * {
  direction: ltr;
}

.tech-visual {
  background: linear-gradient(135deg, var(--color-off-white), var(--color-cream));
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
}

.tech-visual img {
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.1));
}

/* Treatment Areas */
.treatment-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.treatment-area-group h4 {
  margin-bottom: var(--space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent-20);
}

.treatment-area-group ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.treatment-area-group ul li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--color-text-light);
  padding: 0.35rem 0;
}

.treatment-area-group ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Specs Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.specs-table tr {
  border-bottom: 1px solid var(--color-dark-05);
}

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

.specs-table td {
  padding: 0.85rem 0;
}

.specs-table td:first-child {
  font-weight: 500;
  color: var(--color-dark);
  width: 40%;
  padding-right: var(--space-md);
}

.specs-table td:last-child {
  color: var(--color-text-light);
}

/* Included List */
.included-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem var(--space-xl);
}

.included-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--color-text-light);
  padding: 0.5rem 0;
}

.included-list li svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Steps / Protocol --- */
.protocol-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  counter-reset: step;
}

.protocol-step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  counter-increment: step;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-dark-05);
  transition: all var(--transition-base);
}

.protocol-step:hover {
  border-color: var(--color-accent-20);
  box-shadow: var(--shadow-sm);
}

.protocol-step__number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  flex-shrink: 0;
}

.protocol-step h4 {
  margin-bottom: 0.25rem;
}

.protocol-step p {
  font-size: 0.88rem;
}

/* --- Module Cards (Premium) --- */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.module-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-dark-05);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-20);
}

.module-card__number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-accent-20);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.module-card h4 {
  margin-bottom: 0.5rem;
}

.module-card p {
  font-size: 0.85rem;
}

/* --- Configuration Compare --- */
.config-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.config-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 2px solid var(--color-dark-05);
  text-align: center;
  transition: all var(--transition-base);
}

.config-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.config-card img {
  max-height: 260px;
  margin: 0 auto var(--space-md);
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.1));
}

.config-card h3 {
  margin-bottom: 0.5rem;
}

.config-card p {
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.config-card__configs {
  font-size: 0.82rem;
  color: var(--color-text-light);
}

/* --- Comparison Table --- */
.comparison-table__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.comparison-table thead th {
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 500;
  padding: 1rem 1.25rem;
  text-align: left;
}

.comparison-table thead th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.comparison-table thead th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.comparison-table tbody td {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-warm-gray);
  vertical-align: top;
}

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

.comparison-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02);
}

.comparison-table tbody td:first-child {
  font-weight: 500;
  color: var(--color-dark);
  font-family: var(--font-display);
}

.comparison-table tbody td:nth-child(2) {
  color: var(--color-accent-dark);
  font-weight: 500;
}

/* --- Which Model --- */
.which-model__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.which-model__option {
  background: var(--color-white);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.which-model__option h4 {
  font-family: var(--font-display);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-xs);
}

.which-model__option p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 0;
}

/* --- Product Price --- */
.product-price {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.product-price__main {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-white);
}

.product-price__vat {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin-left: 0.3rem;
}

.product-price__excl {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.15rem;
}

/* --- Map Placeholder --- */
.map-embed {
  width: 100%;
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-embed iframe {
  display: block;
}

/* --- 404 Error Page --- */
.error-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-dark);
}

.error-page__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.error-page__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-md);
}

.error-page__title {
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 16rem);
  font-weight: 200;
  line-height: 1;
  color: var(--color-white);
  margin: var(--space-sm) 0 var(--space-md);
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-page__text {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 440px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

/* --- Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .product-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .product-hero__text {
    order: 1;
  }

  .product-hero__image {
    order: 0;
  }

  .product-hero__desc {
    margin: 0 auto var(--space-lg);
  }

  .product-hero__image img {
    max-height: 380px;
  }

  .tech-content {
    grid-template-columns: 1fr;
  }

  .tech-content--reverse {
    direction: ltr;
  }
}

@media (max-width: 768px) {
  :root {
    --space-3xl: 5rem;
  }

  /* Header always visible on mobile */
  .header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 20px rgba(29,29,27,0.06);
  }

  /* Mobile fullscreen menu */
  .nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #FFFFFF;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: calc(var(--header-height) + 1.5rem) var(--space-xl) var(--space-xl);
    z-index: 9998;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav.active {
    display: flex;
  }

  .nav__link {
    font-size: 1.15rem;
    padding: 0.9rem 1.2rem;
    color: var(--color-dark);
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(29,29,27,0.05);
  }

  .nav__link:hover,
  .nav__link:focus {
    background: var(--color-off-white);
  }

  .nav__item {
    width: 100%;
    text-align: center;
  }

  .nav__item .nav__link {
    font-size: 1.15rem;
    border-bottom: none;
  }

  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid rgba(29,29,27,0.05);
    padding: 0 0 0.5rem;
    min-width: 0;
    background: transparent;
  }

  .nav__dropdown a {
    font-size: 0.9rem;
    padding: 0.5rem 1.4rem;
    text-align: center;
    color: var(--color-text-light);
  }

  .nav__dropdown a:hover,
  .nav__dropdown a:focus {
    color: var(--color-accent);
  }

  .nav__cta {
    margin-left: 0;
    margin-top: var(--space-lg);
    width: auto;
    text-align: center;
    border-bottom: none !important;
  }

  .menu-toggle {
    display: flex;
    z-index: 9999;
    position: relative;
  }

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

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

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

  .training-visual {
    min-height: 280px;
  }

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

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

  .treatment-areas {
    grid-template-columns: 1fr;
  }

  .included-list {
    grid-template-columns: 1fr;
  }

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

  .config-compare {
    grid-template-columns: 1fr;
  }

  .comparison-table table {
    font-size: 0.82rem;
    min-width: 580px;
  }

  .comparison-table thead th,
  .comparison-table tbody td {
    padding: 0.7rem 0.9rem;
  }

  .which-model__options {
    grid-template-columns: 1fr;
  }

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

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .awards-row {
    gap: var(--space-sm);
  }

  .award-badge {
    min-width: 130px;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
  }

  .hero__content {
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group .btn {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .product-card__image {
    height: 240px;
  }

  .product-hero__image img {
    max-height: 280px;
  }

  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

/* ============================================
   Product Filter (homepage products section)
   ============================================ */
.product-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto var(--space-xl);
  max-width: 900px;
}

.product-filter-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1.5px solid var(--color-warm-gray);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: all var(--transition-base);
}

.product-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.product-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.product-card.is-hidden {
  display: none;
}

.products-grid {
  align-items: stretch;
}

/* ============================================
   Spec Table (new product pages)
   ============================================ */
.spec-table {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-dark-05);
}

.spec-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.spec-table tbody tr {
  border-bottom: 1px solid var(--color-warm-gray);
}

.spec-table tbody tr:last-child {
  border-bottom: none;
}

.spec-table tbody tr:nth-child(odd) {
  background: var(--color-off-white);
}

.spec-table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
  padding: 0.95rem 1.4rem;
  width: 42%;
  vertical-align: top;
}

.spec-table td {
  padding: 0.95rem 1.4rem;
  color: var(--color-text-light);
  vertical-align: top;
}

@media (max-width: 600px) {
  .spec-table table { font-size: 0.85rem; }
  .spec-table th, .spec-table td { padding: 0.7rem 0.9rem; }
  .spec-table th { width: 48%; }
}



/* ============================================
   Product Gallery (new product pages)
   ============================================ */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.product-gallery__item {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--color-off-white) 0%, var(--color-cream) 100%);
  border: 1px solid var(--color-dark-05);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.product-gallery__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--transition-slow);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
}

.product-gallery__item:hover img {
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}

/* ============================================
   Hero with photo background (light image, dark text)
   Applied via .hero.hero--photo on the homepage.
   ============================================ */
.hero--photo {
  background: var(--color-cream);
}

/* hide the cyan light-trace animation meant for the dark hero */
.hero--photo .hero__light-traces {
  display: none;
}

/* photo fills the hero at every width (scales via cover, like the reference
   landing page). Only a light left scrim lifts the text zone; the image stays
   crisp because it is naturally light and the text is dark. */
.hero--photo .hero__bg {
  background:
    linear-gradient(90deg,
      rgba(248,247,245,0.72) 0%,
      rgba(248,247,245,0.30) 38%,
      rgba(248,247,245,0.0) 62%),
    url('images/hero.jpg') center center / cover no-repeat;
}

/* remove the dark-hero decorative glow/grid layers */
.hero--photo .hero__bg::before,
.hero--photo .hero__bg::after {
  display: none;
}

/* dark text treatment for the light photo */
.hero--photo h1 {
  color: var(--color-dark);
}

.hero--photo h1 em {
  color: var(--color-accent-dark);
}

.hero--photo .hero__label {
  color: var(--color-accent-dark);
}

.hero--photo .hero__label::before {
  background: var(--color-accent-dark);
}

.hero--photo .hero__subtitle {
  color: var(--color-text);
}

.hero--photo .hero__scroll {
  color: var(--color-dark-50);
}

.hero--photo .hero__scroll-line {
  background: linear-gradient(to bottom, rgba(29,29,27,0.35), transparent);
}

/* The photo now stays at all widths and scales with the viewport (cover),
   matching the reference landing page. No separate mobile background. */

/* ============================================
   Cookie Consent Banner (GA4 Consent Mode)
   ============================================ */
.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: var(--space-md);
  transform: translate(-50%, 150%);
  z-index: 1200;
  width: calc(100% - 2 * var(--space-md));
  max-width: 680px;
  background: var(--color-white);
  border: 1px solid var(--color-warm-gray);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.cookie-consent.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.cookie-consent__text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.cookie-consent__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cookie-consent__btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.cookie-consent__btn--accept {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1.5px solid var(--color-accent);
}

.cookie-consent__btn--accept:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.cookie-consent__btn--decline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-dark-20);
}

.cookie-consent__btn--decline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 600px) {
  .cookie-consent {
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(120%);
  }
  .cookie-consent.is-visible {
    transform: translateY(0);
  }
  .cookie-consent__actions {
    justify-content: center;
  }
  .cookie-consent__btn {
    flex: 1;
  }
}

/* ============================================
   Catalogue link (Heyzine flipbook, opens in a new tab)
   ============================================ */
.catalogue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-md);
  padding-bottom: 2px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  border-bottom: 1.5px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.catalogue-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.catalogue-link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.catalogue-cta {
  margin-top: var(--space-xl);
  text-align: center;
}

@media (max-width: 600px) {
  .catalogue-cta .btn {
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* room for the Scroll hint below the catalogue link on phones */
  .hero--photo .hero__content {
    padding-bottom: 8rem;
  }
}

/* ============================================
   Pages with a dark first section (product pages, 404): while the header is
   still transparent at the top, show the logo and menu in white. Once the
   header turns white on scroll (.scrolled) they go back to dark. Phones are
   excluded because their header is always white.
   ============================================ */
.header--on-dark .header__logo img {
  transition: opacity var(--transition-fast), filter var(--transition-base);
}

@media (min-width: 769px) {
  .header--on-dark:not(.scrolled) .header__logo img {
    filter: brightness(0) invert(1);
  }

  .header--on-dark:not(.scrolled) .nav__link:not(.nav__cta) {
    color: rgba(255, 255, 255, 0.75);
  }

  .header--on-dark:not(.scrolled) .nav__link:not(.nav__cta):hover,
  .header--on-dark:not(.scrolled) .nav__link:not(.nav__cta).active {
    color: var(--color-white);
  }
}

/* ============================================
   Header "Book a Consultation" button: white text like every other primary
   button. It also carries .nav__link, whose dark text used to win on source
   order (and on phones its light hover/focus background).
   ============================================ */
.nav__link.nav__cta,
.nav__link.nav__cta:hover,
.nav__link.nav__cta:focus,
.nav__link.nav__cta.active {
  color: var(--color-white);
}

@media (max-width: 768px) {
  .nav__link.nav__cta:hover,
  .nav__link.nav__cta:focus {
    background: var(--color-accent-dark);
  }
}