/* ═══════════════════════════════════════════════════
   CALITÉ — Dark Cinematic
   ═══════════════════════════════════════════════════ */

:root{
  --ink:      #060709;
  --ink-2:    #0c0e13;
  --ink-3:    #14171e;
  --paper:    #f2f3f0;
  --smoke:    #8b9099;
  --volt:     #d9ff3d;
  --ember:    #ff4b1f;
  --line:     rgba(255,255,255,.10);

  --display: 'Anton', Impact, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{ -webkit-text-size-adjust:100% }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }

::selection{ background:var(--volt); color:var(--ink) }

/* Scrollbar */
::-webkit-scrollbar{ width:9px }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:#2a2e37; border-radius:9px }
::-webkit-scrollbar-thumb:hover{ background:var(--volt) }

/* ─────────── Film-Korn + Vignette ─────────── */
.grain{
  position:fixed; inset:-150%; z-index:9998; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}      10%{transform:translate(-5%,-10%)}
  20%{transform:translate(-15%,5%)}       30%{transform:translate(7%,-25%)}
  40%{transform:translate(-5%,25%)}       50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)}         70%{transform:translate(0,15%)}
  80%{transform:translate(3%,35%)}        90%{transform:translate(-10%,10%)}
}
.vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%);
}

/* ─────────── Custom Cursor ─────────── */
.cursor{ display:none }
@media (pointer:fine){
  .cursor{ display:block; position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference }
  .cursor__dot,.cursor__ring{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) }
  .cursor__dot{ width:6px; height:6px; background:#fff }
  .cursor__ring{ width:38px; height:38px; border:1px solid rgba(255,255,255,.55); transition:width .3s var(--ease), height .3s var(--ease) }
  body.is-hovering .cursor__ring{ width:70px; height:70px }
}

/* ─────────── Loader ─────────── */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
}
/* kein overflow:hidden — hier gleitet nichts herein, es würde nur den
   Akzent von "CALITÉ" abschneiden */
.loader__inner{ display:flex; align-items:baseline; gap:1rem }
.loader__word{
  font-family:var(--display); font-size:clamp(3rem,12vw,9rem);
  letter-spacing:.02em; line-height:1; display:block;
}
.loader__count{ font-family:var(--display); font-size:clamp(1rem,3vw,2rem); color:var(--volt) }
.loader__count::after{ content:'%' ; font-size:.6em; margin-left:.15em }
.loader__bar{ width:min(340px,60vw); height:2px; background:rgba(255,255,255,.14); overflow:hidden }
.loader__bar i{ display:block; height:100%; width:0; background:var(--volt) }

/* ─────────── Nav ─────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.1rem var(--pad);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(6,7,9,.72); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line); padding-block:.75rem;
}
.nav__logo{ font-family:var(--display); font-size:1.4rem; letter-spacing:.04em }
.nav__links{ display:flex; gap:2rem; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke) }
.nav__links a{ position:relative; transition:color .3s }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background:var(--volt); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--paper) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
.nav__cta{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.6rem 1.1rem; border:1px solid var(--line); border-radius:100px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav__cta i{ font-style:normal; transition:transform .35s var(--ease) }
.nav__cta:hover{ background:var(--volt); color:var(--ink); border-color:var(--volt) }
.nav__cta:hover i{ transform:translateX(4px) }
@media (max-width:760px){ .nav__links{ display:none } }

/* ─────────── Buttons ─────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.9rem; border-radius:100px; overflow:hidden; isolation:isolate;
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.btn span{ position:relative; z-index:2; transition:color .4s var(--ease) }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn--solid{ background:var(--volt); color:var(--ink) }
.btn--solid::before{ background:var(--paper) }
.btn--solid:hover::before{ transform:translateY(0) }
.btn--ghost{ border:1px solid var(--line); color:var(--paper) }
.btn--ghost::before{ background:var(--paper) }
.btn--ghost:hover span{ color:var(--ink) }
.btn--ghost:hover::before{ transform:translateY(0) }
.btn--lg{ padding:1.25rem 2.6rem; font-size:.95rem }

/* ─────────── Labels ─────────── */
.section-label{
  display:flex; align-items:center; gap:.75rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--smoke);
  margin-bottom:2.5rem;
}
.section-label span{ color:var(--volt); font-weight:600 }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--smoke);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--volt); animation:pulse 2s infinite }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.75)} }

/* ═══════════ 1 · HERO ═══════════ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(3rem,8vh,6rem); overflow:hidden;
}
.hero__vanta{
  position:absolute; inset:0; z-index:0;
  /* Fallback, falls Vanta nicht lädt oder auf Mobile deaktiviert ist */
  background:
    radial-gradient(70% 55% at 20% 15%, #1b2330 0%, transparent 60%),
    radial-gradient(60% 60% at 85% 80%, #221a2b 0%, transparent 65%),
    var(--ink);
}
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, var(--ink) 2%, rgba(6,7,9,.55) 45%, rgba(6,7,9,.15) 100%);
}
.hero__media{
  position:absolute; z-index:1; right:-4%; bottom:0; width:min(48vw,620px);
  /* zwei Verläufe kombiniert (oben/unten + linke Kante), damit das Bild
     nirgends hart abbricht */
  --fade:
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 38%);
  mask-image:var(--fade);          -webkit-mask-image:var(--fade);
  mask-composite:intersect;        -webkit-mask-composite:source-in;
  opacity:.55; filter:grayscale(.35) contrast(1.15);
}
.hero__content{ position:relative; z-index:3; max-width:min(1100px,100%) }
.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3rem,11.5vw,10.5rem); line-height:.88; letter-spacing:-.01em;
  text-transform:uppercase; margin:1.5rem 0 2rem;
  /* flow-root verhindert, dass das negative margin-top der ersten Zeile
     (siehe .line unten) nach außen kollabiert und den Abstand zur
     Eyebrow auffrisst */
  display:flow-root;
}
/* padding-top + negatives margin: macht die Maske oben höher, ohne das Layout
   zu verschieben — sonst schneidet overflow:hidden den Akzent von "É" ab.
   Gemessen: das É ragt 0.238em über die Zeilenbox (Anton, line-height .88),
   0.28em lässt etwas Reserve. Wert nicht verkleinern. */
.hero__title .line{ display:block; overflow:hidden; padding-top:.28em; margin-top:-.28em }
.hero__title .line > span{ display:block }
.hero__title .accent > span{
  color:transparent; -webkit-text-stroke:1.5px var(--volt);
  paint-order:stroke fill;
}
.hero__sub{ font-size:clamp(1rem,1.5vw,1.2rem); color:var(--smoke); max-width:46ch; font-weight:300 }
.hero__sub strong{ color:var(--paper); font-weight:600 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem }
.hero__scroll{
  position:absolute; z-index:3; right:var(--pad); bottom:clamp(3rem,8vh,6rem);
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  font-size:.65rem; letter-spacing:.28em; text-transform:uppercase; color:var(--smoke);
}
.hero__scroll span{ writing-mode:vertical-rl }
.hero__scroll i{ display:block; width:1px; height:60px; background:linear-gradient(var(--volt), transparent); animation:scrollLine 2.2s infinite }
@keyframes scrollLine{ 0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }
@media (max-width:760px){ .hero__media{ width:80vw; right:-15%; opacity:.32 } .hero__scroll{ display:none } }

/* ═══════════ 2 · MARQUEE ═══════════ */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2); padding:1.1rem 0 }
.marquee__track{ display:flex; width:max-content; will-change:transform }
.marquee__track span{
  font-family:var(--display); font-size:clamp(1.4rem,3.2vw,2.4rem); text-transform:uppercase;
  letter-spacing:.02em; padding-right:2rem; white-space:nowrap; color:var(--paper);
}
.marquee__track b{ color:var(--volt); font-weight:400 }

/* ═══════════ 3 · MANIFEST ═══════════ */
.manifest{ padding:clamp(7rem,18vh,14rem) var(--pad); max-width:1400px; margin-inline:auto }
.manifest__text{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.7rem,5.2vw,4.6rem); line-height:1.08; letter-spacing:-.005em;
}
.manifest__text .w{ display:inline-block; color:rgba(242,243,240,.14); transition:none }

/* ═══════════ 4 · SHOWCASE (horizontal) ═══════════ */
.showcase{ overflow:hidden; background:var(--ink-2); border-block:1px solid var(--line) }
.showcase__track{ display:flex; height:100svh; align-items:center; width:max-content; will-change:transform }
.panel{
  position:relative; flex:0 0 auto; width:min(88vw,900px); height:100%;
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,4rem);
  padding:0 clamp(1.25rem,4vw,4rem); border-right:1px solid var(--line);
}
.panel--intro{ flex-direction:column; align-items:flex-start; justify-content:center; width:min(80vw,640px) }
.panel__lead{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2.6rem,8vw,6.5rem); line-height:.9;
}
.panel__hint{ margin-top:2rem; color:var(--volt); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase }
.panel__num{
  position:absolute; top:clamp(3rem,10vh,6rem); left:clamp(1.25rem,4vw,4rem);
  font-family:var(--display); font-size:clamp(4rem,10vw,9rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13);
}
.panel__img{ flex:0 0 44%; aspect-ratio:3/4; overflow:hidden; border-radius:4px }
.panel__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.1); transform:scale(1.12) }
.panel__body{ flex:1 }
.panel__body h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.8rem); line-height:.92; margin-bottom:1.25rem;
}
.panel__body p{ color:var(--smoke); font-weight:300; max-width:38ch }
@media (max-width:760px){
  /* Volle Bildschirmbreite: ein Panel = ein Screen. Vorher 86vw, dadurch war
     immer ein Stück vom nächsten Panel im Bild und beide waren angeschnitten. */
  .panel, .panel--intro{
    width:100vw; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.25rem;
    /* oben Platz für die fixierte Navigation (76px), sonst deckt sie das Bild ab */
    padding:5.5rem clamp(1.25rem,4vw,4rem) 2rem;
  }
  /* Hochformat statt Querformat — zeigt bei Kleidung deutlich mehr vom Produkt.
     flex:0 1 auto + min-height:0 heißt: 4/5 ist die Wunschgröße, aber auf
     kleinen Displays darf das Bild schrumpfen, statt den Text rauszudrücken.
     Ohne min-height:0 verweigern Flex-Elemente das Schrumpfen. */
  .panel__img{ flex:0 1 auto; min-height:0; width:100%; aspect-ratio:4/5; max-height:44svh }

  /* WICHTIG: flex:1 gilt nur für die Desktop-Anordnung (nebeneinander = restliche
     Breite). Hier stehen die Elemente untereinander, dort würde flex:1 die
     restliche HÖHE schlucken — der Textblock wäre 612px statt 180px hoch und
     das Bild würde an den oberen Rand gedrückt. */
  .panel__body{ flex:0 0 auto }
  .panel__body p{ max-width:none }

  .panel__num{ display:none }
}

/* ═══════════ 5 · PRODUKT ═══════════ */
.product{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem);
  padding:clamp(6rem,14vh,11rem) var(--pad); max-width:1500px; margin-inline:auto; align-items:start;
}
.product__sticky{ position:sticky; top:16vh }
.product__plate{
  border-radius:10px; overflow:hidden; background:linear-gradient(150deg,#e9eae6,#c9cbc4);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85); aspect-ratio:1;
}
.product__plate img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply }
.product__name{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.8rem,7vw,6rem); line-height:.88; margin-bottom:1.5rem;
}
.product__price{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:3rem }
.price{ font-family:var(--display); font-size:clamp(2rem,4vw,3rem); color:var(--volt) }
.price--old{ color:var(--smoke); text-decoration:line-through; font-size:1.1rem }
.badge{
  background:var(--ember); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  padding:.35rem .7rem; border-radius:100px;
}
.specs{ border-top:1px solid var(--line); margin-bottom:3rem }
.specs li{
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:1.1rem 0; border-bottom:1px solid var(--line);
}
.specs b{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke); font-weight:500 }
.specs span{ font-weight:300; text-align:right }
.trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1.5rem; margin-top:3.5rem }
.trust div{ border-left:2px solid var(--volt); padding-left:.9rem }
.trust b{ display:block; font-family:var(--display); font-size:1.35rem; letter-spacing:.01em }
.trust span{ font-size:.78rem; color:var(--smoke) }
@media (max-width:900px){
  .product{ grid-template-columns:1fr }
  .product__sticky{ position:static }
}

/* ═══════════ 6 · STATS ═══════════ */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-block:1px solid var(--line); background:var(--ink-2);
}
.stat{ padding:clamp(2.5rem,6vw,4.5rem) 1.5rem; text-align:center; border-right:1px solid var(--line) }
.stat:last-child{ border-right:none }
.stat b{ display:block; font-family:var(--display); font-size:clamp(2.4rem,5vw,4rem); line-height:1; color:var(--volt) }
.stat span{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke) }

/* ═══════════ 7 · REVIEWS ═══════════ */
.reviews{ padding:clamp(6rem,14vh,11rem) var(--pad); max-width:1500px; margin-inline:auto }
.reviews__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem }
.reviews blockquote{
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  padding:2rem; transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.reviews blockquote:hover{ transform:translateY(-8px); border-color:rgba(217,255,61,.4); background:var(--ink-3) }
.stars{ color:var(--volt); letter-spacing:.18em; margin-bottom:1.25rem; font-size:.9rem }
.reviews p{ font-weight:300; font-size:1.02rem; margin-bottom:1.5rem }
.reviews cite{
  font-style:normal; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke);
}

/* ═══════════ 8 · FINALE ═══════════ */
.finale{
  min-height:80svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.75rem; text-align:center; padding:clamp(5rem,12vh,9rem) var(--pad);
  background:radial-gradient(60% 70% at 50% 50%, #12151c 0%, var(--ink) 70%);
}
.finale__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(4rem,17vw,15rem); line-height:.85; overflow:hidden;
  /* gemessener Beschnitt bei line-height .85: 0.08em oben, 0.006em unten.
     Padding macht die Maske größer, negatives Margin hält das Layout gleich. */
  padding:.14em 0 .06em; margin:-.14em 0 -.06em;
}
.finale__title span{ display:block }
.finale p{ color:var(--smoke); font-weight:300 }

/* ═══════════ FOOTER ═══════════ */
.footer{ border-top:1px solid var(--line); padding:clamp(3rem,7vw,5rem) var(--pad) 2rem; overflow:hidden }
.footer__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.5rem; margin-bottom:clamp(3rem,8vw,6rem) }
.footer__cols h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--volt); margin-bottom:1.25rem; font-weight:600 }
.footer__cols a{ display:block; color:var(--smoke); padding:.3rem 0; transition:color .3s, transform .3s var(--ease) }
.footer__cols a:hover{ color:var(--paper); transform:translateX(5px) }
.news{ display:flex; border-bottom:1px solid var(--line); padding-bottom:.6rem }
.news input{
  flex:1; background:none; border:none; color:var(--paper); font-family:var(--body); font-size:.95rem; outline:none;
}
.news input::placeholder{ color:#555a63 }
.news button{
  background:none; border:none; color:var(--volt); font-size:1.2rem; cursor:pointer;
  transition:transform .3s var(--ease);
}
.news button:hover{ transform:translateX(4px) }
.footer__note{ font-size:.75rem; color:#555a63; margin-top:.75rem }
.footer__wordmark{
  font-family:var(--display); text-transform:uppercase; text-align:center; line-height:.8;
  font-size:clamp(4rem,20vw,18rem); color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.12);
  margin-bottom:2rem; user-select:none;
}
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--line); padding-top:1.5rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#555a63;
}

/* ═══════════ Reveal-Ausgangszustand ═══════════ */
[data-reveal]{ opacity:0; transform:translateY(28px) }
.no-motion [data-reveal]{ opacity:1; transform:none }

/* ═══════════ Reduced Motion ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .grain{ display:none }
  [data-reveal]{ opacity:1; transform:none }
  .manifest__text .w{ color:var(--paper) }
}