/* ============================================================
   Mimex Group, luxury dark + gold one-pager
   ============================================================ */

/* ---------- Metric-matched fallback fonts ----------
   These fallback faces are scaled (size-adjust) and their vertical metrics
   overridden so they occupy the EXACT same space as the real web fonts.
   When Cormorant Garamond / Inter finish loading and swap in, there is no
   reflow — eliminating the load-time text "jump" (FOUT layout shift).
   Override values were measured empirically against the real fonts. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 80.34%;
  ascent-override: 114.52%;
  descent-override: 36.10%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 104.25%;
  ascent-override: 93.05%;
  descent-override: 23.02%;
  line-gap-override: 0%;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #0b0b0d;
  --bg-soft: #101013;
  --surface: #15151a;
  --surface-2: #1b1b22;
  --border: rgba(201, 165, 92, 0.16);
  --border-strong: rgba(201, 165, 92, 0.35);

  --gold: #c9a55c;
  --gold-bright: #e6c982;
  --gold-deep: #a9863f;
  --gold-grad: linear-gradient(135deg, #e6c982 0%, #c9a55c 45%, #a9863f 100%);

  --text: #f4f1ea;
  --text-soft: #b9b3a6;
  --text-mute: #807a6e;

  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* ---------- Bilingual switching ---------- */
body.lang-sr .lang-en { display: none !important; }
body:not(.lang-sr) .lang-sr { display: none !important; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.5rem, 4vw, 3.5rem); position: relative; }

.section-head { max-width: 720px; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

.section-eyebrow,
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
}

.section-title em {
  font-style: italic;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.78rem; }
.btn-block { width: 100%; }

.btn-gold {
  background: var(--gold-grad);
  color: #1a1408;
  font-weight: 600;
  box-shadow: 0 14px 40px -16px rgba(201, 165, 92, 0.7);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 22px 55px -18px rgba(201, 165, 92, 0.85); }

.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
    border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 78px;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled .header-inner { height: 64px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gold-grad);
  color: #1a1408;
  font-weight: 700;
  font-size: 1.3rem;
  box-shadow: 0 6px 20px -8px rgba(201, 165, 92, 0.8);
}
.brand-text { font-size: 1.32rem; font-weight: 600; letter-spacing: 0.01em; }
.brand-accent { color: var(--gold); margin-left: 0.15rem; }

.nav-desktop { display: flex; gap: 2.2rem; }
.nav-desktop a {
  position: relative;
  font-size: 0.86rem;
  color: var(--text-soft);
  transition: color 0.3s var(--ease);
  padding-block: 0.3rem;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-desktop a:hover { color: var(--text); }
.nav-desktop a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.lang-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; }
.lt-opt {
  color: var(--text-mute);
  padding: 0.15rem 0.05rem;
  transition: color 0.3s var(--ease);
}
.lt-opt:hover { color: var(--text); }
.lt-opt.active { color: var(--gold); }
.lt-sep { color: var(--text-mute); opacity: 0.5; font-weight: 400; }

.menu-btn { display: none; flex-direction: column; gap: 5px; width: 38px; height: 38px; justify-content: center; align-items: center; }
.menu-btn span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: 78px 0 auto 0;
  background: rgba(11, 11, 13, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter) 1.6rem;
  gap: 0.3rem;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}
.nav-mobile.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-mobile a { padding: 0.95rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-soft); font-size: 1.05rem; }
.nav-mobile a:hover { color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Content-driven height with airy, viewport-scaled padding.
     A forced 100svh vertically-centered the content and left a
     large empty band above and below it — worst on wide/short
     displays — so the hero now sizes to its content. */
  display: flex;
  align-items: center;
  padding-top: clamp(116px, 15vh, 178px);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  overflow: hidden;
}

/* atmosphere */
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.orb-1 { width: 640px; height: 640px; top: -16%; right: -8%; background: radial-gradient(circle, rgba(201, 165, 92, 0.38), transparent 68%); }
.orb-2 { width: 520px; height: 520px; bottom: -22%; left: -10%; background: radial-gradient(circle, rgba(169, 134, 63, 0.26), transparent 68%); }
.orb-3 { width: 380px; height: 380px; top: 26%; left: 42%; background: radial-gradient(circle, rgba(230, 201, 130, 0.16), transparent 70%); }
.hero-grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner { position: relative; width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-content { max-width: 640px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow-line { width: 38px; height: 1px; background: var(--gold-grad); display: inline-block; }

.hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 0.99;
  letter-spacing: -0.02em;
  margin: 1rem 0 1.6rem;
}
.hero-title em {
  font-style: italic;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The Serbian headline ("Premium kozmetika …") is a touch wider than the
   English one, so at the largest size it wrapped to four lines. Cap the
   Serbian title slightly smaller on big screens to keep it to three clean
   lines, matching the English layout. English keeps its larger size. */
body.lang-sr .hero-title { font-size: clamp(2.4rem, 5.6vw, 4.3rem); }

.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--text-soft);
  max-width: 540px;
  margin-bottom: 1.8rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* trust strip */
.hero-trust {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.trust-label { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); }
.trust-brands { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.trust-brands li { font-family: var(--serif); font-size: 1.08rem; color: var(--text-soft); opacity: 0.85; }

/* hero media (video) */
.hero-media {
  position: relative;
  max-width: 480px;
  width: 100%;
  margin-left: auto;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  background: radial-gradient(circle at 55% 42%, rgba(201, 165, 92, 0.30), transparent 62%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.media-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 13, 0) 60%, rgba(11, 11, 13, 0.4) 100%);
  pointer-events: none;
}


.scroll-hint {
  /* Hidden: only made sense with the old full-viewport hero.
     A compact, content-sized hero doesn't need a scroll cue. */
  display: none;
  position: absolute;
  bottom: 1.8rem; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  place-items: start center;
  padding-top: 7px;
}
.scroll-hint span { width: 3px; height: 8px; border-radius: 3px; background: var(--gold); animation: scrolldot 1.8s infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.about-copy p { color: var(--text-soft); margin-bottom: 1rem; font-size: 1.02rem; }
.about-list { margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.about-list li { display: flex; align-items: center; gap: 0.8rem; color: var(--text); font-size: 0.98rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-grad); flex: none; box-shadow: 0 0 0 4px rgba(201,165,92,0.12); }

/* ---------- Card grid (categories) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.cat-card {
  position: relative;
  padding: 1.8rem 1.5rem;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(201,165,92,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.cat-card:hover::before { opacity: 1; }
.cat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  color: var(--gold);
  margin-bottom: 1.3rem;
  background: rgba(201,165,92,0.06);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin-bottom: 0.5rem; position: relative; }
.cat-card p { color: var(--text-soft); font-size: 0.94rem; position: relative; }

/* ---------- Brands ---------- */
.brands { background: var(--bg-soft); }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
}
.brand-tile {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 92px;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.brand-tile:hover {
  color: var(--gold-bright);
  border-color: var(--border-strong);
  background: rgba(201,165,92,0.06);
  transform: translateY(-3px);
}
.brand-note { text-align: center; margin-top: 1.5rem; color: var(--text-mute); font-size: 0.9rem; }

/* ---------- Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.why-item {
  padding: 1.5rem 1.3rem;
  border-top: 1px solid var(--border);
  position: relative;
  transition: border-color 0.4s var(--ease);
}
.why-item:hover { border-top-color: var(--gold); }
.why-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1.4rem;
}
.why-item h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin-bottom: 0.6rem; }
.why-item p { color: var(--text-soft); font-size: 0.93rem; }

/* ---------- Contact ---------- */
.contact { background: var(--bg-soft); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.contact-lead { color: var(--text-soft); margin-top: 1rem; max-width: 460px; }
.contact-details { margin-top: 1.75rem; display: grid; gap: 1.2rem; }
.contact-details li { display: grid; gap: 0.25rem; }
.ci-label { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute); }
.contact-details a { color: var(--text); font-size: 1.05rem; transition: color 0.3s var(--ease); }
.contact-details a:hover { color: var(--gold-bright); }

.contact-form {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text-soft); margin-bottom: 0.45rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.4); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a55c' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }
.field select option { background: var(--surface); color: var(--text); }
.form-note { margin-top: 0.9rem; font-size: 0.88rem; min-height: 1.2em; color: var(--gold-bright); text-align: center; }
.form-note.error { color: #e08a7a; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg); padding-block: 2.25rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.footer-brand { max-width: 320px; }
.footer-brand p { color: var(--text-mute); font-size: 0.9rem; margin-top: 0.8rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-nav a { color: var(--text-soft); font-size: 0.9rem; transition: color 0.3s var(--ease); }
.footer-nav a:hover { color: var(--gold); }
.footer-meta { width: 100%; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 0.5rem; }
.footer-meta p { color: var(--text-mute); font-size: 0.82rem; }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Stacked hero sizes to its content instead of filling the viewport,
     which removes the large dead space around the title and video. */
  .hero { min-height: auto; padding-top: 104px; padding-bottom: 2.5rem; }
  .hero-grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .hero-media { max-width: 380px; margin-inline: auto; }
  .hero-content { max-width: none; margin-inline: auto; text-align: center; }
  .eyebrow, .hero-trust { justify-content: center; }
  .hero-cta { justify-content: center; }
  .hero-sub { margin-inline: auto; }
}

@media (max-width: 980px) {
  .nav-desktop { display: none; }
  .header-actions .header-cta { display: none; }
  .menu-btn { display: flex; }

  .about-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding-top: 86px; padding-bottom: 1.5rem; }
  .hero-title { margin: 0.85rem 0 1.2rem; }
  .hero-sub { margin-bottom: 1.4rem; }
  .hero-trust { margin-top: 1.35rem; }
  .hero-media { max-width: 360px; }
  .card-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav { gap: 1rem 1.3rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}