/* ============================================================
   COSMETICS BY SM55 BERLIN – Premium Stylesheet v2
   Fonts: Local WOFF2 (no Google Fonts CDN)
   ============================================================ */

/* ── @FONT-FACE – LOCAL WOFF2 ───────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  --c-black:       #0f0f0f;
  --c-dark:        #1a1a1a;
  --c-mid:         #3a3a3a;
  --c-text:        #2d2d2d;
  --c-muted:       #7a7a7a;
  --c-rule:        #e0dbd4;
  --c-bg:          #faf8f5;
  --c-bg-alt:      #f3ede6;
  --c-crème:       #f5f0ea;
  --c-accent:      #c8a97e;
  --c-accent-dark: #a8865a;
  --c-white:       #ffffff;

  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Montserrat', Helvetica, sans-serif;

  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     16px;

  --shadow-sm:     0 2px 12px rgba(0,0,0,0.06);
  --shadow:        0 8px 40px rgba(0,0,0,0.10);
  --shadow-lg:     0 24px 80px rgba(0,0,0,0.14);

  --nav-h:         72px;
  --transition:    0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: 0.2s ease;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: var(--font-body); color: var(--c-text); outline: none; }

/* ── CONTAINER ──────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25,0.1,0.25,1),
              transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.15s; }
.reveal--delay-2 { transition-delay: 0.3s; }
.reveal--delay-3 { transition-delay: 0.45s; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-body); font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0; transition: opacity var(--transition-fast);
}
.btn:hover::after { opacity: 1; }
.btn--primary { background: var(--c-dark); color: var(--c-white); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.btn--primary:hover { background: var(--c-black); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.28); }
.btn--ghost { background: transparent; color: var(--c-white); border: 1px solid rgba(255,255,255,0.4); }
.btn--ghost:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.btn--full { width: 100%; justify-content: center; }

/* ── SECTION COMMONS ────────────────────────────────────────── */
.section { padding: 120px 0; }
.section__header { text-align: center; margin-bottom: 80px; }
.section__label {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 16px;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 400; line-height: 1.15;
  color: var(--c-dark); letter-spacing: -0.01em;
}
.section__title em { font-style: italic; color: var(--c-accent-dark); }
.section__title--light { color: var(--c-white); }
.section__sub { margin-top: 20px; font-size: 0.95rem; color: var(--c-muted); max-width: 540px; margin-left: auto; margin-right: auto; }

/* ── NAV ────────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); transition: background var(--transition), box-shadow var(--transition); }
.nav.scrolled { background: rgba(15,15,15,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__logo img,
.nav__logo .nav__logo-svg {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(10);
  opacity: 0.95;
}
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); transition: color var(--transition-fast); }
.nav__links a:hover { color: var(--c-white); }
.nav__cta { background: var(--c-accent) !important; color: var(--c-white) !important; padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600 !important; }
.nav__cta:hover { background: var(--c-accent-dark) !important; }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav__burger span { display: block; width: 24px; height: 1.5px; background: var(--c-white); transition: var(--transition); }
.nav__mobile { display: none; flex-direction: column; background: rgba(15,15,15,0.98); padding: 24px 40px; border-top: 1px solid rgba(255,255,255,0.06); }
.nav__mobile a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color var(--transition-fast); }
.nav__mobile a:hover { color: var(--c-white); }
.nav__mobile.open { display: flex; }
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { padding: 0 20px; }
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; background: var(--c-black); display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
}
.hero__glow { position: absolute; top: -200px; right: -100px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(200,169,126,0.12) 0%, transparent 65%); pointer-events: none; }
.hero__content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 40px; padding-top: var(--nav-h); flex: 1; }
.hero__label { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 24px; }
.hero__headline { font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 4.4rem); font-weight: 300; line-height: 1.08; color: var(--c-white); letter-spacing: -0.02em; margin-bottom: 28px; }
.hero__headline em { font-style: italic; color: var(--c-accent); }
.hero__sub { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 460px; margin-bottom: 48px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__bottle { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); z-index: 2; }
.hero__bottle-wrap { width: 240px; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.5)); animation: bottleFloat 5s ease-in-out infinite; }
.hero__bottle-wrap .bottle-svg { width: 100%; }
@keyframes bottleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.hero__scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.3); font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; }
.hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 900px) {
  .hero { min-height: 100svh; flex-direction: column; justify-content: center; }
  .hero__content { padding: 120px 20px 40px; }
  .hero__bottle { position: relative; right: auto; top: auto; transform: none; display: flex; justify-content: center; width: 100%; padding-bottom: 40px; }
  .hero__bottle-wrap { width: 140px; }
  .hero__sub { max-width: 100%; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── PRODUCT ────────────────────────────────────────────────── */
.product { background: var(--c-bg); position: relative; }
.product::after { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: linear-gradient(to left, var(--c-crème), transparent); pointer-events: none; z-index: 0; }
.product .container { position: relative; z-index: 1; }
.product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.product__intro { font-size: 1.05rem; line-height: 1.85; color: var(--c-text); margin-bottom: 40px; font-weight: 300; }
.product__features { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.product__features li { display: flex; gap: 16px; align-items: flex-start; }
.product__feature-icon { flex-shrink: 0; width: 40px; height: 40px; background: var(--c-crème); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.product__feature-icon svg { width: 18px; height: 18px; color: var(--c-accent-dark); }
.product__features strong { display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 2px; color: var(--c-dark); }
.product__features span { font-size: 0.85rem; color: var(--c-muted); }
.product__variants { display: flex; flex-direction: column; gap: 16px; }
.product__variant-card { background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 28px 32px; position: relative; transition: var(--transition); }
.product__variant-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow); transform: translateY(-3px); }
.product__variant-icon { font-size: 1.2rem; color: var(--c-accent); margin-bottom: 12px; }
.product__variant-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; margin-bottom: 8px; color: var(--c-dark); }
.product__variant-card p { font-size: 0.85rem; color: var(--c-muted); line-height: 1.7; }
.product__variant-tag { position: absolute; top: 20px; right: 20px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; background: var(--c-accent); color: var(--c-white); padding: 4px 10px; border-radius: 20px; }
@media (max-width: 900px) {
  .product__grid { grid-template-columns: 1fr; gap: 48px; }
  .product::after { display: none; }
}

/* ── CONFIGURATOR ───────────────────────────────────────────── */
.configurator { position: relative; background: var(--c-dark); padding: 120px 0; overflow: hidden; }
.configurator__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%, rgba(200,169,126,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(200,169,126,0.05) 0%, transparent 50%); pointer-events: none; }
.configurator .section__label { color: var(--c-accent); }
.configurator .section__title { color: var(--c-white); }
.configurator .section__sub { color: rgba(255,255,255,0.5); }
.configurator__layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }

/* Bottle preview */
.configurator__preview { position: sticky; top: calc(var(--nav-h) + 40px); }
.configurator__preview-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* The bottle scene: SVG + label image + logo overlaid */
.configurator__bottle-scene {
  position: relative;
  width: 220px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  transition: filter var(--transition);
  animation: bottleFloat 5s ease-in-out infinite;
}
.configurator__bottle-scene:hover {
  filter: drop-shadow(0 40px 80px rgba(200,169,126,0.2)) drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}

/* SVG base */
.config-bottle-svg { width: 100%; display: block; }

/* Real label photo – overlaid exactly on the SVG's label rect area.
   SVG viewBox: 0 0 200 460
   Label rect: x=46 y=170 w=108 h=180
   As % of 200w × 460h */
.config-label-img {
  position: absolute;
  left:   23%;      /* 46/200 */
  top:    36.96%;   /* 170/460 */
  width:  54%;      /* 108/200 */
  height: 39.13%;   /* 180/460 */
  object-fit: cover;
  border-radius: 3px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* User logo – bottom quarter of the label */
.config-logo-overlay {
  position: absolute;
  left:   28%;      /* 56/200 */
  top:    67%;      /* ~308/460 – lower part of label */
  width:  44%;      /* 88/200 */
  height: 9%;       /* ~41/460 */
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.config-logo-overlay.visible { opacity: 1; }

.configurator__preview-badge {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); display: flex; align-items: center; gap: 8px;
}
.configurator__preview-badge::before, .configurator__preview-badge::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); width: 40px;
}

/* Controls */
.configurator__controls { display: flex; flex-direction: column; gap: 32px; }
.config-step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 32px; transition: border-color var(--transition); }
.config-step:hover { border-color: rgba(200,169,126,0.3); }
.config-step__header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.config-step__num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 300; color: var(--c-accent); line-height: 1; opacity: 0.7; min-width: 36px; }
.config-step h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--c-white); }

/* Upload zone */
.upload-zone { position: relative; }
.upload-zone__inner { border: 1.5px dashed rgba(255,255,255,0.15); border-radius: var(--radius); padding: 40px 24px; text-align: center; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.upload-zone__inner:hover { border-color: var(--c-accent); background: rgba(200,169,126,0.05); }
.upload-zone__inner svg { width: 36px; height: 36px; color: rgba(255,255,255,0.3); margin-bottom: 4px; }
.upload-zone__inner span { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.upload-zone__inner small { font-size: 0.72rem; color: rgba(255,255,255,0.3); }
.upload-zone__preview { position: relative; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); min-height: 100px; }
.upload-zone__preview img { max-height: 72px; max-width: 100%; object-fit: contain; }
.upload-zone__remove { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: rgba(255,255,255,0.1); border-radius: 50%; color: var(--c-white); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); }
.upload-zone__remove:hover { background: rgba(255,50,50,0.4); }
.hidden { display: none !important; }

/* Config fields */
.config-fields { display: flex; flex-direction: column; gap: 20px; }
.config-field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.config-field input, .config-field select { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--c-white); font-size: 0.9rem; transition: border-color var(--transition-fast); }
.config-field input::placeholder { color: rgba(255,255,255,0.25); }
.config-field input:focus, .config-field select:focus { border-color: var(--c-accent); }
.config-field select option { background: var(--c-dark); }
.qty-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.qty-btn { padding: 8px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 500; font-family: var(--font-body); transition: var(--transition-fast); }
.qty-btn:hover { border-color: var(--c-accent); color: var(--c-white); }
.qty-btn--active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.config-summary { background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); padding: 20px; margin-bottom: 20px; }
.config-summary__line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.83rem; color: rgba(255,255,255,0.5); }
.config-summary__line:last-child { border-bottom: none; }
.config-summary__line span:last-child { color: var(--c-white); font-weight: 500; }
.config-summary__price { color: var(--c-accent) !important; font-size: 1.1rem !important; font-family: var(--font-display); }
.config-cta svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--transition-fast); }
.config-cta:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .configurator__layout { grid-template-columns: 1fr; gap: 48px; }
  .configurator__preview { position: relative; top: auto; }
  .configurator__bottle-scene { width: 180px; }
  .configurator__controls .config-step { padding: 24px; }
}

/* ── BENEFITS ───────────────────────────────────────────────── */
.benefits { background: var(--c-bg-alt); }
.benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.benefit-card { background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 40px; position: relative; transition: var(--transition); overflow: hidden; }
.benefit-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(135deg, rgba(200,169,126,0.06) 0%, transparent 60%); opacity: 0; transition: opacity var(--transition); }
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit-card:hover::before { opacity: 1; }
.benefit-card__icon { width: 52px; height: 52px; background: var(--c-crème); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background var(--transition); }
.benefit-card:hover .benefit-card__icon { background: var(--c-accent); }
.benefit-card__icon svg { width: 22px; height: 22px; color: var(--c-accent-dark); transition: color var(--transition); }
.benefit-card:hover .benefit-card__icon svg { color: var(--c-white); }
.benefit-card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--c-dark); margin-bottom: 12px; line-height: 1.3; }
.benefit-card p { font-size: 0.87rem; color: var(--c-muted); line-height: 1.8; }
.benefit-card__highlight { display: inline-block; margin-top: 16px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: var(--c-accent); color: var(--c-white); padding: 5px 12px; border-radius: 20px; }
@media (max-width: 768px) {
  .benefits__grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 28px; }
}

/* ── PRICING ────────────────────────────────────────────────── */
.pricing { background: var(--c-bg); }
.pricing__table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 40px; }
.pricing__table { width: 100%; border-collapse: collapse; background: var(--c-white); min-width: 600px; }
.pricing__table thead tr { background: var(--c-dark); }
.pricing__table th { padding: 18px 24px; text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.pricing__table th:last-child { text-align: center; }
.pricing__table tbody tr { border-bottom: 1px solid var(--c-rule); transition: background var(--transition-fast); }
.pricing__table tbody tr:hover { background: var(--c-crème); }
.pricing__table td { padding: 20px 24px; font-size: 0.9rem; color: var(--c-text); vertical-align: middle; }
.qty-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; padding: 4px 10px; background: var(--c-crème); border-radius: 4px; font-weight: 700; font-size: 0.85rem; color: var(--c-dark); margin-right: 8px; }
.qty-badge--highlight { background: var(--c-dark); color: var(--c-white); }
.badge-popular { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--c-accent); color: var(--c-white); padding: 3px 8px; border-radius: 20px; vertical-align: middle; }
.price-cell { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--c-dark); }
.price-cell--highlight { color: var(--c-accent-dark); }
.savings-cell { font-size: 0.82rem; color: var(--c-muted); }
.savings--good { color: #7a9a5a; font-weight: 600; }
.savings--best { color: #5a8a4a; font-weight: 700; }
.pricing__row--highlight { background: linear-gradient(90deg, rgba(200,169,126,0.06) 0%, transparent 100%); border-left: 3px solid var(--c-accent); }
.table-cta { display: inline-block; padding: 8px 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--c-rule); border-radius: var(--radius-sm); color: var(--c-dark); transition: var(--transition-fast); white-space: nowrap; }
.table-cta:hover { border-color: var(--c-dark); background: var(--c-dark); color: var(--c-white); }
.table-cta--highlight { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-white); }
.table-cta--highlight:hover { background: var(--c-accent); border-color: var(--c-accent); }
.pricing__table td:last-child { text-align: center; }
.pricing__note { font-size: 0.78rem; color: var(--c-muted); text-align: center; padding: 0 20px; }
.pricing__features { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; padding: 32px; background: var(--c-white); border: 1px solid var(--c-rule); border-radius: var(--radius); }
.pricing__feature { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--c-text); font-weight: 500; }
.pricing__feature svg { width: 18px; height: 18px; color: var(--c-accent); flex-shrink: 0; }

/* ── CONTACT ────────────────────────────────────────────────── */
.contact { position: relative; background: var(--c-black); overflow: hidden; padding: 120px 0; }
.contact__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(200,169,126,0.1) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(200,169,126,0.06) 0%, transparent 50%); pointer-events: none; }
.contact__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; align-items: start; }
.contact__text { color: var(--c-white); }
.contact__text .section__header { text-align: left; margin-bottom: 24px; }
.contact__text p { color: rgba(255,255,255,0.5); font-size: 0.95rem; line-height: 1.85; margin-bottom: 40px; }
.contact__info { display: flex; flex-direction: column; gap: 16px; }
.contact__info-item { display: flex; align-items: center; gap: 14px; font-size: 0.88rem; color: rgba(255,255,255,0.5); }
.contact__info-item svg { width: 18px; height: 18px; color: var(--c-accent); flex-shrink: 0; }
.contact__form-wrap { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 48px; }
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { display: flex; flex-direction: column; }
.form__field label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.form__field input, .form__field select, .form__field textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--c-white); font-size: 0.9rem; transition: border-color var(--transition-fast); resize: vertical; }
.form__field input::placeholder, .form__field textarea::placeholder { color: rgba(255,255,255,0.2); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { border-color: var(--c-accent); background: rgba(255,255,255,0.08); }
.form__field select option { background: #1a1a1a; }
.form__field--check { flex-direction: row; }
.checkbox-label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.checkbox-label input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--c-accent); }
.checkbox-label span { font-size: 0.78rem; color: rgba(255,255,255,0.4); line-height: 1.6; }
.checkbox-label a { color: var(--c-accent); text-decoration: underline; }
.btn--submit { position: relative; overflow: hidden; background: var(--c-accent); border: none; }
.btn--submit:hover { background: var(--c-accent-dark); transform: translateY(-2px); }
.btn-icon svg { width: 18px; height: 18px; }
.form__success { display: flex; align-items: center; gap: 16px; background: rgba(100,170,100,0.12); border: 1px solid rgba(100,170,100,0.3); border-radius: var(--radius); padding: 20px 24px; color: #8dc88d; }
.form__success svg { width: 24px; height: 24px; flex-shrink: 0; }
.form__success p { font-size: 0.9rem; }
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; gap: 48px; }
  .contact__form-wrap { padding: 28px; }
  .form__row { grid-template-columns: 1fr; }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer { background: var(--c-black); border-top: 1px solid rgba(255,255,255,0.06); padding: 48px 0 32px; }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.footer__brand { max-width: 280px; }
.footer__logo {
  width: 160px;          /* fixed width, height auto = natural aspect ratio */
  height: auto;
  display: block;
  margin-bottom: 16px;
  opacity: 0.7;
}
.footer__brand p { font-size: 0.8rem; color: rgba(255,255,255,0.3); line-height: 1.7; }
.footer__links { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding-top: 8px; }
.footer__links a { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); transition: color var(--transition-fast); }
.footer__links a:hover { color: rgba(255,255,255,0.7); }
.footer__bottom { padding-top: 24px; text-align: center; }
.footer__bottom p { font-size: 0.72rem; color: rgba(255,255,255,0.2); letter-spacing: 0.08em; }

/* ── MISC ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 80px 0; }
  .section__header { margin-bottom: 48px; }
  .pricing__features { gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADDITIONS v3 – product tiles, bottle PNG, benefits 6-grid,
   hero trust bar, configurator canvas mockup, misc new elements
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO: Real bottle image + trust bar ──────────────────────── */
.hero__bottle-img {
  width: 100%;
  max-width: 300px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.55));
  animation: bottleFloat 5s ease-in-out infinite;
}
.hero__trust {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
}
.hero__trust-item svg { width: 15px; height: 15px; color: var(--c-accent); flex-shrink: 0; }
@media (max-width: 900px) {
  .hero__trust { gap: 16px; }
  .hero__trust-item { font-size: 0.7rem; }
}

/* ── PRODUCT: new tile variants ──────────────────────────────── */
.product__variant-card--list {
  padding: 28px 32px;
}
.product__variant-card-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.product__variant-card-head .product__variant-icon {
  font-size: 1.4rem;
  color: var(--c-accent);
  margin-top: 4px;
  flex-shrink: 0;
}
.product__variant-card-head h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--c-dark);
  margin-bottom: 4px;
}
.product__variant-desc {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.6;
}

/* Scent list */
.product__scent-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border-top: 1px solid var(--c-rule);
  padding-top: 16px;
}
.product__scent-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-crème);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--c-rule);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.product__scent-list li:hover {
  background: var(--c-white);
  border-color: var(--c-accent);
}
.scent-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--c-accent);
  color: var(--c-white);
  padding: 2px 6px;
  border-radius: 20px;
}

/* "More products" tile */
.product__variant-card--more {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-mid) 100%);
  border-color: transparent;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.product__variant-card--more .product__variant-icon--accent {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--c-accent);
  line-height: 1;
}
.product__variant-card--more h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--c-white);
}
.product__variant-card--more p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}
.btn--sm {
  padding: 10px 22px;
  font-size: 0.72rem;
}

/* ── CONFIGURATOR: real PNG bottle (365×1200) + cylindrical warp canvas ── */
/*
   v7 – Full scanline-based cylindrical warp engine (JS).
   CSS role:
   - Position the canvas over the lower label zone.
   - mix-blend-mode: multiply  → logo pigment merges with warm label colour.
   - image-rendering: pixelated disabled (we want smooth interpolation
     across our scanline strips for the warp to look fluid, not blocky).
   Lighting gradients are now painted directly in JS (drawLogo),
   so the CSS .config-curve-overlay is kept only as a subtle vignette
   for the bottle edges (not the logo zone).

   Canvas zone in bottle-space:
     top:    78.0%  (936 / 1200)  – lower white area of label
     height: 18.3%  (220 / 1200)
     left:   11.0%  ( 40 /  365)
     width:  78.1%  (285 /  365)
*/
.configurator__bottle-scene {
  position: relative;
  width: 220px;
  display: block;
  margin: 0 auto;
  animation: bottleFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.50));
  transition: filter var(--transition), transform var(--transition);
}
.configurator__bottle-scene:hover {
  filter: drop-shadow(0 32px 64px rgba(200,169,126,0.20))
          drop-shadow(0 24px 48px rgba(0,0,0,0.50));
}
.config-bottle-png {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.config-logo-canvas {
  position: absolute;
  top:    78.0%;
  left:   11.0%;
  width:  78.1%;
  height: 18.3%;
  pointer-events: none;
  /*
    multiply: logo darkens warm label surface – realistic ink-on-paper feel.
    For very light or white logos on a light label, consider 'normal' with
    lower opacity in JS (LOGO_OPACITY constant).
  */
  mix-blend-mode: multiply;
  /* smooth interpolation between scanline strips */
  image-rendering: auto;
  -webkit-image-rendering: auto;
}
/* Subtle bottle-edge vignette – just darkens the extreme left/right
   rim of the bottle slightly, independent of the logo. */
.config-curve-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62% 100% at 50% 50%,
    transparent 58%,
    rgba(0,0,0,0.05) 100%
  );
}

/* Step hint text */
.config-step__hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-bottom: 16px;
  margin-top: -12px;
}
/* CTA note */
.config-cta-note {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .configurator__bottle-scene { width: 160px; }
}

/* ── BENEFITS: 6-card grid ────────────────────────────────────── */
.benefits__grid--6 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .benefits__grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .benefits__grid--6 { grid-template-columns: 1fr; }
}
.benefits__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.benefits__cta p {
  font-size: 1rem;
  color: var(--c-muted);
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}
.btn--outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  background: transparent;
  color: var(--c-dark);
  border: 1.5px solid var(--c-dark);
}
.btn--outline-dark:hover {
  background: var(--c-dark);
  color: var(--c-white);
}

/* ── FORM note ───────────────────────────────────────────────── */
.form__note {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.08em;
  margin-top: -10px;
}

/* ── HERO bottle wrap override for real image ────────────────── */
.hero__bottle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   LOGO SIZE SLIDER (v6)
   ═══════════════════════════════════════════════════════════════ */

/* Container für Schritt 02 im Konfigurator */
.config-step--slider { }

.logo-size-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Track-Zeile: kleines A — Slider — großes A */
.logo-size-control__track {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-size-control__icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.35);
  line-height: 1;
  user-select: none;
}
.logo-size-control__icon--large { color: rgba(255,255,255,0.65); }

/* ── Der eigentliche Range-Input ────────────────────────────── */
.logo-size-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  outline: none;
  cursor: pointer;
  /* Filled portion via JS (gradient set on input style) */
  background-image: linear-gradient(
    to right,
    var(--c-accent) 0%,
    var(--c-accent) var(--slider-fill, 62%),
    rgba(255,255,255,0.12) var(--slider-fill, 62%),
    rgba(255,255,255,0.12) 100%
  );
  transition: background-image 0.05s linear;
}

/* Thumb – WebKit */
.logo-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.logo-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 14px rgba(0,0,0,0.45);
}
.logo-size-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(200,169,126,0.25);
}

/* Thumb – Firefox */
.logo-size-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  cursor: grab;
  transition: transform 0.15s ease;
}
.logo-size-slider::-moz-range-thumb:hover { transform: scale(1.2); }
.logo-size-slider::-moz-range-thumb:active { cursor: grabbing; transform: scale(1.25); }

/* Track – Firefox */
.logo-size-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
}
.logo-size-slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--c-accent);
}

/* Focus ring */
.logo-size-slider:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Prozentwert-Ausgabe rechts neben dem Slider */
.logo-size-control__output {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  font-family: var(--font-body);
  user-select: none;
  min-width: 40px;
}

/* Disabled state (solange kein Logo hochgeladen) */
.logo-size-slider:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.config-step--slider.is-disabled .logo-size-control__icon,
.config-step--slider.is-disabled .logo-size-control__output {
  opacity: 0.3;
}

/* Feedback-Label beim Ziehen */
.logo-size-slider:active ~ .logo-size-control__output {
  color: var(--c-white);
}