/* ============================================================================
   CHRONVALE — DIZAJN SISTEM (main.css)
   Premium cinematic watch microbrand. Void-black + champagne/rose gold +
   parchment + deep blue. Zlatni ljiljan u srcu identiteta.
   ----------------------------------------------------------------------------
   01 Tokeni · 02 Reset · 03 Tipografija · 04 Layout · 05 Grain/Vignette
   06 Cursor · 07 Scroll progress · 08 Header/Nav · 09 Dugmad · 10 Loader
   11 Ljiljan divider/watermark · 12 Reveal · 13 Hero · 14 Sekcije
   15 Footer · 16 Forme · 17 Responsive · 18 A11y · 19 Re-brief komponente
   ========================================================================== */

/* ============================== 01. TOKENI ============================== */
:root{
  --void:        #0A0A0C;
  --void-soft:   #0e0e12;
  --surface:     #141319;
  --surface-2:   #1b1a22;
  --gold:        #C9A86A;
  --gold-bright: #E7D3A8;
  --gold-deep:   #8a6f3f;
  /* Metalik "brušeno zlato" — dijagonalni sjaj za popunjena zlatna dugmad,
     umjesto ravne boje (traženo: "skupocjen gradient" umjesto flat gold). */
  --gold-gradient: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 32%, #F6E8C6 50%, var(--gold) 68%, var(--gold-deep) 100%);
  --champagne:   #D8C39A;
  --rose-gold:   #CBA98E;   /* markeri / kazaljke */
  --blue:        #16263F;   /* deep blue (302C) — ARC Origin */
  --blue-soft:   #20355A;
  --blue-line:   rgba(122,160,210,.22);
  --parchment:   #E7DCC2;   /* parchment (1485C) — topli akcent */
  --text:        #ECE7DD;
  --text-dim:    rgba(236,231,221,.62);
  --text-mute:   rgba(236,231,221,.38);
  --line:        rgba(201,168,106,.20);
  --line-soft:   rgba(236,231,221,.10);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-eyebrow: .72rem;
  --fs-body:    clamp(1rem, .96rem + .25vw, 1.18rem);
  --fs-lead:    clamp(1.15rem, 1rem + .8vw, 1.6rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --fs-h2:      clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-h1:      clamp(2.9rem, 2rem + 4.4vw, 5.6rem);
  --fs-display: clamp(3.4rem, 1.8rem + 7.5vw, 8.5rem);

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4rem; --sp-7:6rem; --sp-8:8rem;
  --section-y: clamp(5rem, 11vh, 9.5rem);

  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 88px;

  --ease-lux: cubic-bezier(.7, 0, .3, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .3s; --t-med: .6s; --t-slow: 1s;
  --t-menu: .32s;

  --z-header: 100;
  --z-cursor: 9800;
  --z-grain: 8000;
  --z-progress: 200;
  --z-loader: 10000;
}

/* ============================== 02. RESET / BASE ======================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
/* Offset za fiksni header kod sidrenih linkova (#id) */
[id]{ scroll-margin-top: calc(var(--header-h) + 1rem); }
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }

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

::selection{ background:var(--gold); color:var(--void); }

@media (pointer:fine){
  *{ scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:var(--void); }
  ::-webkit-scrollbar-thumb{ background:var(--gold-deep); border:3px solid var(--void); border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
}

/* ============================== 03. TIPOGRAFIJA ======================== */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.06;
  letter-spacing:-.01em; color:var(--text); text-wrap:balance; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:1.25rem; }

.display{ font-size:var(--fs-display); line-height:.98; font-weight:500; letter-spacing:-.02em; }

p{ color:var(--text-dim); }
.lead{ font-family:var(--serif); font-size:var(--fs-lead); line-height:1.5;
  color:var(--text); font-weight:400; }

strong{ color:var(--text); font-weight:600; }
em{ font-style:italic; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.eyebrow::before{
  content:""; width:clamp(20px,4vw,42px); height:1px; background:var(--gold);
  opacity:.7;
}
.eyebrow.is-centered::after{
  content:""; width:clamp(20px,4vw,42px); height:1px; background:var(--gold); opacity:.7;
}

.mono{ font-family:var(--mono); letter-spacing:.05em; }
.text-gold{ color:var(--gold); }
.text-dim{ color:var(--text-dim); }
.text-mute{ color:var(--text-mute); }

.link{
  position:relative; color:var(--text); font-family:var(--mono);
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:4px;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-med) var(--ease-out);
}
.link:hover{ color:var(--gold); }
.link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ============================== 04. LAYOUT ============================= */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:840px; }
.container--wide{ max-width:1500px; }

.section{ position:relative; padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(3rem,6vh,5rem); }

.section-head{ max-width:760px; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section-head.is-centered{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:1.4rem; }
.section-head h2{ margin-bottom:1.4rem; }
.section-head p{ font-size:var(--fs-lead); color:var(--text-dim); font-family:var(--serif); line-height:1.5; }

.grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.flow > * + *{ margin-top:1.2em; }

.section--lift{ background:
  radial-gradient(120% 80% at 50% -10%, rgba(201,168,106,.06), transparent 60%),
  var(--void); }

/* ====================== 05. TEKSTURA: GRAIN + VIGNETTE ================= */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 6s steps(5) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-3%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(2%,-4%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ============================== 06. CUSTOM CURSOR ===================== */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%); opacity:0;
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--gold);
  transition:opacity .3s, width .3s, height .3s; }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(201,168,106,.55);
  transition:opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out),
             border-color .35s, background .35s; }
.has-cursor.has-cursor *{ cursor:none; }
.has-cursor .cursor-dot,.has-cursor .cursor-ring{ opacity:1; }
.cursor-ring.is-active{ width:64px; height:64px; border-color:var(--gold);
  background:rgba(201,168,106,.06); }
.cursor-dot.is-active{ width:3px; height:3px; }

/* ============================== 07. SCROLL PROGRESS =================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));
  z-index:var(--z-progress); transition:width .1s linear;
}

/* ============================== 08. HEADER / NAV ===================== */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:var(--z-header);
  padding-block:clamp(1rem,2.4vw,1.6rem);
  transition:background var(--t-med) var(--ease-out),
             backdrop-filter var(--t-med), border-color var(--t-med),
             padding var(--t-med) var(--ease-out), box-shadow var(--t-med);
  border-bottom:1px solid transparent;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);
  opacity:0; transition:opacity var(--t-med);
}
.site-header.is-scrolled{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
  padding-block:.85rem;
  box-shadow:0 1px 32px -8px rgba(201,168,106,.18);
}
.site-header.is-scrolled::after{ opacity:.55; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

/* — Split layout: logo lijevo na mobitelu; centriran na desktopu — */
.nav--split{ position:relative; gap:clamp(1.2rem,3vw,2rem); }
.nav--split .nav-menu{ display:contents; }
.nav--split .brand{ flex:none; }
.nav--split .nav-cta{ margin-left:auto; }

@media(min-width:1501px){
  /* Header dobija širi radni prostor od ostatka sajta (koji je ograničen na --container)
     jer navigacija ima puno stavki (linkovi + dropdown + CTA) i treba joj disanja. */
  .nav--split{ max-width:1560px; }
  .nav--split .brand{ order:2; }
  .nav--split .nav-links--left{ order:1; flex:1 1 0; justify-content:flex-end; }
  .nav--split .nav-links--right{ order:3; flex:1 1 0; justify-content:flex-start; }
  .nav--split .nav-cta{ order:4; margin-left:0; }
}

.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand .mark{ width:40px; height:40px; color:var(--gold); flex:none;
  border-radius:50%; overflow:hidden; display:block;
  transition:transform var(--t-med) var(--ease-lux), filter var(--t-med); }
.brand:hover .mark{ transform:rotate(-4deg) scale(1.08);
  filter:drop-shadow(0 0 14px rgba(201,168,106,.85)); }
.brand .mark svg{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:'Cinzel',var(--serif); font-size:1.26rem; font-weight:600;
  letter-spacing:.16em; color:var(--text); transition:text-shadow var(--t-med);
  text-transform:uppercase; }
.brand:hover .brand-name{ text-shadow:0 0 18px rgba(201,168,106,.5); }
.brand-sub{ font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-top:4px;
  text-align:center; align-self:stretch; }

.nav-links{ display:flex; align-items:center; gap:clamp(1.5rem,2.4vw,2.4rem); }
.nav-links a{
  font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
  position:relative; padding:.5rem .15rem; transition:color var(--t-fast), text-shadow var(--t-med);
}
.nav-links a::before{
  content:""; position:absolute; left:50%; top:50%; width:130%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(201,168,106,.34), transparent 70%);
  transform:translate(-50%,-50%) scale(.4); opacity:0; z-index:-1; pointer-events:none;
  transition:opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
  filter:blur(2px);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  box-shadow:0 0 8px var(--gold);
  transition:transform var(--t-med) var(--ease-out);
}
.nav-links a:hover{ color:var(--gold-bright); text-shadow:0 0 14px rgba(201,168,106,.6); }
.nav-links a:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.nav-links a:hover::after,
.nav-links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.is-active{ color:var(--gold); }

/* — Dropdown nav item ("Special Thanks") — */
.nav-item--dropdown{ position:relative; list-style:none; }
.nav-dropdown-trigger{
  font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-dim); background:none; border:0;
  padding:.5rem 0; cursor:pointer; transition:color var(--t-fast), text-shadow var(--t-med);
  display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
}
.nav-dropdown-trigger::after{
  content:""; width:6px; height:6px; margin-top:-2px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform var(--t-fast) var(--ease-out), color var(--t-fast);
  opacity:.7;
}
.nav-item--dropdown.is-open .nav-dropdown-trigger::after,
.nav-item--dropdown:hover .nav-dropdown-trigger::after{ transform:rotate(-135deg); margin-top:2px; }
.nav-dropdown-trigger:hover{ color:var(--gold-bright); text-shadow:0 0 14px rgba(201,168,106,.6); }
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:220px; padding:.6rem 0; margin-top:.8rem; list-style:none;
  background:var(--surface); border:1px solid var(--line); z-index:20;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med), box-shadow var(--t-med);
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown.is-open .nav-dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s;
  box-shadow:0 8px 32px -8px rgba(201,168,106,.25);
}
.nav-dropdown a{
  display:block; padding:.6rem 1.2rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
  transition:color var(--t-fast), text-shadow var(--t-med), background var(--t-fast);
}
.nav-dropdown a:hover,
.nav-dropdown a.is-active{ color:var(--gold-bright); text-shadow:0 0 10px rgba(201,168,106,.55);
  background:rgba(201,168,106,.08); }

.nav-cta{ display:flex; align-items:center; gap:.55rem; }
.nav-cta .btn-gold{ transition:color var(--t-med) var(--ease-out), border-color var(--t-med),
             transform var(--t-fast) var(--ease-out), background var(--t-med), box-shadow var(--t-med); }
.nav-cta .btn-gold:hover{ box-shadow:0 0 22px 2px rgba(201,168,106,.55), 0 0 48px 6px rgba(201,168,106,.22); }

.burger{ display:none; width:30px; height:18px; position:relative; flex:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--text);
  transition:transform var(--t-menu) var(--ease-out), opacity var(--t-fast) var(--ease-out), background var(--t-fast);
  will-change:transform, opacity; }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:50%; transform:translateY(-50%); }
.burger span:nth-child(3){ bottom:0; }
.nav-open .burger span{ background:var(--gold-bright); }
.nav-open .burger span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; transform:translateY(-50%) scale(.4); }
.nav-open .burger span:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

/* ============================== 09. DUGMAD ============================ */
.btn{
  --btn-pad-y:1em; --btn-pad-x:2.1em;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border:1px solid var(--gold); color:var(--gold);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--t-med) var(--ease-out), border-color var(--t-med),
             transform var(--t-fast) var(--ease-out), background var(--t-med);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold-gradient);
  transform:translateY(101%); transition:transform var(--t-med) var(--ease-lux);
}
.btn:hover{ color:var(--void); border-color:var(--gold); }
.btn:hover::before{ transform:translateY(0); }

.btn-gold{ background:var(--gold-gradient); color:var(--void); border-color:var(--gold); }
.btn-gold::before{ background:var(--gold-bright); }
.btn-gold:hover{ color:var(--void); }

.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost::before{ background:var(--text); }
.btn-ghost:hover{ color:var(--void); border-color:var(--text); }

.btn-sm{ --btn-pad-y:.75em; --btn-pad-x:1.05em; font-size:.7rem; }
.btn[disabled],.btn.is-disabled{ opacity:.4; pointer-events:none; }
.btn .btn-ico{ width:1.05em; height:1.05em; }

.magnetic{ display:inline-block; will-change:transform; transition:transform .4s var(--ease-out); }

/* ============================== 10. LOADER =========================== */
.loader{
  position:fixed; inset:0; z-index:var(--z-loader);
  background:var(--void);
  display:grid; place-items:center;
  transition:transform 1.1s var(--ease-lux), visibility 0s linear 1.2s;
}
.loader__bg{ position:absolute; inset:0; overflow:hidden; opacity:.18; }
.loader__bg video,.loader__bg img{ width:100%; height:100%; object-fit:cover; }
.loader__bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, transparent 30%, var(--void) 72%); }

.loader__inner{ position:relative; display:flex; flex-direction:column;
  align-items:center; text-align:center; transition:opacity .8s var(--ease-out); }

.loader__emblem{ width:clamp(140px,20vw,200px); height:auto; border-radius:50%;
  filter:drop-shadow(0 0 32px rgba(201,168,106,.35));
  animation:emblem-in 1.4s var(--ease-out) .2s both; }
@keyframes emblem-in{
  from{ opacity:0; transform:scale(.82); filter:drop-shadow(0 0 0px rgba(201,168,106,0)); }
  to{ opacity:1; transform:scale(1); filter:drop-shadow(0 0 32px rgba(201,168,106,.35)); }
}
.loader .cv-monogram{ width:clamp(120px,17vw,168px); height:auto; color:var(--gold);
  filter:drop-shadow(0 0 24px rgba(201,168,106,.18)); }

.loader .cv-monogram .ring,
.loader .cv-monogram .m-lily path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.7s var(--ease-lux) forwards;
}
.loader .cv-monogram .ring{ animation-delay:.1s; }
.loader .cv-monogram .ring--inner{ animation-delay:.35s; }
.loader .cv-monogram .m-lily path{ animation-delay:.7s; }
.loader .cv-monogram .m-lily path:nth-child(2){ animation-delay:.8s; }
.loader .cv-monogram .m-lily path:nth-child(3){ animation-delay:.9s; }
.loader .cv-monogram .m-lily path:nth-child(4){ animation-delay:.95s; }
.loader .cv-monogram .m-lily path:nth-child(n+5){ animation-delay:1.05s; }
.loader .cv-monogram .m-dots .dot{ opacity:0; animation:fade-in .8s ease 1.4s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }

.loader__word{
  font-family:var(--serif); font-size:clamp(1.8rem,5vw,2.9rem); font-weight:500;
  letter-spacing:.6em; text-indent:.6em; color:var(--text);
  margin-top:2rem; opacity:0;
  animation:word-in 1.4s var(--ease-out) 1.1s forwards;
}
.loader__tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); margin-top:1rem; opacity:0;
  animation:fade-in 1s ease 1.6s forwards;
}
@keyframes word-in{
  from{ opacity:0; letter-spacing:1.1em; filter:blur(6px); }
  to{ opacity:1; letter-spacing:.6em; filter:blur(0); }
}

.loader__progress{ width:min(220px,52vw); height:1px; background:var(--line-soft);
  margin-top:2.6rem; overflow:hidden; }
.loader__bar{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transition:width .25s var(--ease-out); }
.loader__pct{ font-family:var(--mono); font-size:.62rem; letter-spacing:.3em;
  color:var(--text-mute); margin-top:1rem; }

.loader.is-done{ transform:translateY(-100%); visibility:hidden; }
.loader.is-done .loader__inner{ opacity:0; }

/* ====================== 11. LJILJAN: DIVIDER + WATERMARK ============== */
.divider{ display:flex; align-items:center; justify-content:center; gap:1.4rem;
  margin-block:clamp(3rem,7vw,5rem); color:var(--gold); }
.divider::before,.divider::after{ content:""; height:1px; width:min(120px,22vw);
  background:linear-gradient(90deg,transparent,var(--gold-deep)); }
.divider::after{ background:linear-gradient(90deg,var(--gold-deep),transparent); }
.divider .lily{ width:30px; height:30px; flex:none; border-radius:50%;
  background:url("../photos/chronvale-emblem.jpg") center 46%/235% no-repeat;
  filter:drop-shadow(0 0 6px rgba(201,168,106,.35)); }

/* Mali ljiljan-ikona (za pillare, liste) */
.lily-ico{ display:inline-block; width:34px; height:34px; flex:none; border-radius:50%;
  background:url("../photos/chronvale-emblem.jpg") center 46%/235% no-repeat;
  filter:drop-shadow(0 0 6px rgba(201,168,106,.35)); }

/* Page-hero: prva sekcija na podstranicama (razmak ispod fiksnog headera) */
.page-hero{ padding-top:calc(var(--header-h) + clamp(2.5rem,7vh,5rem));
  padding-bottom:clamp(1rem,4vw,3rem); position:relative; }

/* — Donation goal banner (support.html) — flowing gold gradient, dismissible — */
.donation-banner{
  margin-top:var(--header-h); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:1rem 3.2rem; text-align:center;
  background:linear-gradient(90deg, var(--surface-2), var(--surface) 60%);
  border-bottom:1px solid var(--gold-deep);
  box-shadow:0 1px 0 rgba(201,168,106,.15) inset, 0 6px 24px -10px rgba(201,168,106,.35);
  opacity:0; max-height:0; transition:opacity var(--t-med) var(--ease-out);
}
.donation-banner[hidden]{ display:flex; }
.donation-banner.is-visible{ opacity:1; max-height:none; }
.donation-banner__flow{
  position:absolute; inset:0; z-index:0;
  background-image:repeating-linear-gradient(70deg,
    rgba(201,168,106,.22) 0%, rgba(231,211,168,.30) 12%,
    rgba(138,111,63,.18) 24%, rgba(201,168,106,.22) 36%);
  background-size:200% 100%; filter:saturate(1.3);
  animation:donationFlow 16s linear infinite;
}
@keyframes donationFlow{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
.donation-banner__inner{
  position:relative; z-index:1; display:flex; align-items:center;
  flex-wrap:wrap; justify-content:center; gap:.95rem;
  font-family:var(--mono); font-size:.86rem; letter-spacing:.04em; color:var(--text);
}
.donation-banner__icon{ color:var(--gold); font-size:.75rem; }
.donation-banner__text strong{ color:var(--gold-bright); }
.donation-banner__track{
  position:relative; width:120px; height:5px; border-radius:99px;
  background:var(--line-soft); overflow:hidden; flex:none;
}
.donation-banner__fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  box-shadow:0 0 8px rgba(201,168,106,.6);
  transition:width 1.1s var(--ease-lux);
}
.donation-banner__pct{ color:var(--gold); font-weight:600; }
.donation-banner__close{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%); z-index:2;
  width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:none; border:1px solid transparent; color:var(--text-dim);
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.donation-banner__close:hover{ color:var(--gold-bright); border-color:var(--line); background:rgba(201,168,106,.1); }
@media(max-width:680px){
  .donation-banner{ padding:.9rem 2.6rem; }
  .donation-banner__inner{ font-size:.7rem; }
  .donation-banner__track{ width:80px; }
}

.has-watermark{ position:relative; overflow:hidden; }
.has-watermark::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(480px,65vw); aspect-ratio:1;
  top:50%; right:-4%; transform:translateY(-50%);
  border-radius:50%; opacity:.045;
  background:url("../photos/chronvale-emblem.jpg") center 46%/235% no-repeat;
}
.has-watermark > *{ position:relative; z-index:1; }

/* Nav/footer brand emblem (replaces inline lily SVG) */
.mark-emblem{ width:100%; height:100%;
  object-fit:cover; object-position:center 46%;
  transform:scale(2.35); display:block; }

/* ====================== 12. SCROLL-REVEAL ============================ */
.reveal{ opacity:0; transform:translateY(34px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms); will-change:opacity,transform; }
.reveal[data-reveal="left"]{ transform:translateX(-46px); }
.reveal[data-reveal="right"]{ transform:translateX(46px); }
.reveal[data-reveal="scale"]{ transform:scale(.94); }
.reveal.is-visible{ opacity:1; transform:none; }

.media{ overflow:hidden; }
.media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease-lux); }
.media:hover img{ transform:scale(1.04); }

/* ============================== 13. HERO ============================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; padding-top:var(--header-h); }

.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:
  radial-gradient(80% 60% at 72% 38%, rgba(201,168,106,.10), transparent 60%),
  radial-gradient(60% 80% at 12% 80%, rgba(201,168,106,.05), transparent 60%),
  linear-gradient(180deg, #0c0c11 0%, var(--void) 55%, #08080a 100%); }
.hero__bg video,.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,8,10,.85) 100%); }

.hero__inner{ position:relative; z-index:2; display:grid; gap:clamp(2rem,5vw,4rem);
  align-items:center; }
@media(min-width:920px){ .hero__inner{ grid-template-columns:1.05fr .95fr; } }
.hero__copy{ max-width:620px; }

.hero__product{ position:relative; justify-self:center; width:min(80%,400px); }
.hero__product .glow{ position:absolute; inset:-24%; z-index:-1;
  background:radial-gradient(circle, rgba(201,168,106,.22), transparent 62%);
  filter:blur(6px); }
.hero__product img{ width:100%; filter:drop-shadow(0 50px 90px rgba(0,0,0,.75));
  animation:float 8s var(--ease-lux) infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

.hero .eyebrow{ margin-bottom:1.8rem; }
.hero h1{ margin-bottom:1.8rem; }
/* Prevedeni naslovi (DE/BS) su duži od engleskog originala — blago smanjen
   font da "Schweizer Präzision." / duže riječi ostanu u dva reda kao na EN. */
:lang(de) .hero h1, :lang(bs) .hero h1{ font-size:clamp(2.3rem, 1.5rem + 3.4vw, 4.3rem); }
/* Prevedeni tekst dugmadi (DE/BS) je duži — malo manji razmak da oba
   dugmeta stanu u isti red kao na engleskom, bez lomljenja u dva reda. */
:lang(de) .hero__actions, :lang(bs) .hero__actions{ gap:.7rem; }
.hero__lede{ max-width:560px; font-size:var(--fs-lead); color:var(--text-dim);
  font-family:var(--serif); line-height:1.5; margin-bottom:2.6rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; }

/* Kratko objašnjenje razlike između dva "Join" dugmeta — First Series je
   besplatna, formalna prijava interesa; Founders Circle je stvarna €100
   rezervacija sata sa svim Founder pogodnostima. */
.actions-note{ font-size:.78rem; color:var(--text-mute); margin-top:.9rem;
  line-height:1.65; max-width:56ch; }
.actions-note strong{ color:var(--text-dim); font-weight:600; }

.hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:2rem; border-top:1px solid var(--line); }
.hero__meta div{ display:flex; flex-direction:column; gap:.3rem; }
.hero__meta strong{ font-family:var(--serif); font-size:1.6rem; color:var(--gold); font-weight:500; }
.hero__meta span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-mute); }

.scroll-cue{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--text-mute); }
.scroll-cue i{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent);
  position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--gold); animation:cue 2.4s var(--ease-lux) infinite; }
@keyframes cue{ 0%{ top:-50%; } 60%,100%{ top:100%; } }

/* ====================== 14. SEKCIJE & KOMPONENTE ===================== */
.split{ display:grid; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media(min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--media-left .split__media{ order:-1; }
}
.split__media{ position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(155deg, var(--surface), var(--void-soft));
  border:1px solid rgba(201,168,106,.3);
  box-shadow:0 0 0 1px rgba(201,168,106,.1), 0 0 34px -10px rgba(201,168,106,.35),
    inset 0 0 50px rgba(201,168,106,.05);
  transition:border-color var(--t-med), box-shadow var(--t-med); }
.split__media::before{
  content:""; position:absolute; top:-15%; left:-15%; width:65%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(201,168,106,.16), transparent 70%);
  pointer-events:none; z-index:0;
}
.split__media:hover{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 0 46px -8px rgba(201,168,106,.5),
    inset 0 0 60px rgba(201,168,106,.07);
}
.split__media img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; padding:8%;
  transition:transform 1.1s var(--ease-lux); }
.split__media:hover img{ transform:scale(1.03); }

.pullquote{ max-width:900px; margin-inline:auto; text-align:center; }
.pullquote q{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.8rem);
  line-height:1.3; color:var(--text); quotes:none; }
.pullquote q::before{ content:"“"; color:var(--gold); }
.pullquote q::after{ content:"”"; color:var(--gold); }
.pullquote cite{ display:block; margin-top:1.6rem; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-style:normal; }

.models{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media(min-width:840px){ .models{ grid-template-columns:1fr 1fr; } }
.model-card{ position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--void-soft));
  border:1px solid var(--line); padding:clamp(1.5rem,3vw,2.5rem);
  overflow:hidden; transition:border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.model-card:hover{ border-color:var(--gold-deep); transform:translateY(-4px); }
.model-card__logo{ position:absolute; top:1rem; left:1rem; width:16px; height:22px;
  background-color:var(--gold-bright); opacity:.85; pointer-events:none; z-index:2;
  -webkit-mask:url("../img/lily.svg") no-repeat center / contain;
  mask:url("../img/lily.svg") no-repeat center / contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); transition:opacity var(--t-fast), filter var(--t-med); }
.model-card__logo::before{
  content:""; position:absolute; left:50%; top:50%; width:320%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(201,168,106,.5), transparent 68%);
  filter:blur(2px); opacity:.6; transition:opacity var(--t-med);
}
.model-card:hover .model-card__logo{ opacity:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(231,211,168,.8)); }
.model-card:hover .model-card__logo::before{ opacity:1; }
.model-card__media{ aspect-ratio:1/1; display:grid; place-items:center; margin-bottom:1.5rem; }
.model-card__media img{ height:88%; width:auto; object-fit:contain;
  transition:transform 1.2s var(--ease-lux); }
.model-card:hover .model-card__media img{ transform:scale(1.05) rotate(-1deg); }
.model-card__tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); }
.model-card h3{ margin:.6rem 0 .4rem; }
.model-card__price{ font-family:var(--mono); font-size:.78rem; color:var(--text-mute);
  letter-spacing:.1em; margin-bottom:1rem; }
.model-card p{ margin-bottom:1.6rem; }
.model-card__foot{ margin-top:auto; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.status-chip{ font-family:var(--mono); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--line);
  padding:.4em .9em; border-radius:2px; }

.spec-list{ display:grid; gap:0; }
.spec-list div{ display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft); }
.spec-list dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute); }
.spec-list dd{ font-family:var(--serif); font-size:1.05rem; color:var(--text); text-align:right; }
.spec-list dd:empty::after{ content:"— TBA"; color:var(--text-mute);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; }

.timeline{ position:relative; display:grid; gap:clamp(2rem,4vw,3.5rem);
  padding-left:2rem; }
.timeline::before{ content:""; position:absolute; left:0; top:.4rem; bottom:.4rem;
  width:1px; background:linear-gradient(var(--gold-deep),transparent); }
.timeline__item{ position:relative; }
.timeline__item::before{ content:""; position:absolute; left:calc(-2rem - .5px);
  top:.55rem; width:9px; height:9px; border-radius:50%; background:var(--void);
  border:1px solid var(--gold); transform:translateX(-4px); }
.timeline__year{ font-family:var(--mono); font-size:.72rem; letter-spacing:.24em;
  color:var(--gold); }
.timeline__item h3{ margin:.5rem 0 .6rem; font-size:1.5rem; }

/* — Bento gallery: 3 kolone — lijevo (4 uspravne) / sredina (3 vodoravne, popunjava visinu) / desno (4 uspravne) — */
.gallery-grid{ display:grid; grid-template-columns:1fr 2fr 1fr;
  gap:clamp(.6rem,1.5vw,1rem); align-items:stretch; }
@media(max-width:680px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-col{ display:flex; flex-direction:column; gap:clamp(.6rem,1.5vw,1rem); height:100%; }
.gallery-item{ position:relative; width:100%; aspect-ratio:1/1; background:var(--surface);
  border:1px solid var(--line); overflow:hidden; cursor:pointer; padding:0;
  opacity:0; transform:translateY(22px) scale(.98);
  box-shadow:0 0 0 1px rgba(201,168,106,.12), 0 0 18px -4px rgba(201,168,106,.22);
  transition:opacity .7s var(--ease-lux), transform .7s var(--ease-lux),
    border-color var(--t-fast), box-shadow var(--t-med); }
/* Srednja kolona: slike se razdijele da popune cijelu visinu lijeve/desne kolone — nema praznog prostora */
.gallery-col--mid{ flex:1 1 auto; }
.gallery-col--mid .gallery-item{ aspect-ratio:auto; flex:1 1 0; min-height:0; }
/* Bottom red: puna širina ispod sve tri kolone — velika vodoravna slika */
.gallery-col--bottom{ grid-column:1/-1; height:auto; }
.gallery-col--bottom .gallery-item{ aspect-ratio:21/9; }
@media(max-width:680px){ .gallery-col--bottom .gallery-item{ aspect-ratio:16/9; } }
.gallery-item.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease-lux); }
.gallery-item:hover,.gallery-item:focus-visible{ border-color:var(--gold);
  animation:galleryGlow 1.6s ease-in-out infinite; }
@keyframes galleryGlow{
  0%,100%{ box-shadow:0 0 0 1px var(--gold), 0 0 16px 2px rgba(201,168,106,.28); }
  50%{ box-shadow:0 0 0 1px var(--gold-bright), 0 0 28px 6px rgba(201,168,106,.5); }
}
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item__overlay{ position:absolute; inset:0; display:flex; align-items:flex-end;
  padding:.9rem 1rem; background:linear-gradient(to top, rgba(8,8,9,.86) 0%, rgba(8,8,9,0) 60%);
  opacity:0; transition:opacity var(--t-med); }
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay{ opacity:1; }
.gallery-item__title{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  color:var(--gold-bright); line-height:1.4; text-align:left; }
.gallery-item__logo{ position:absolute; top:.7rem; left:.7rem; width:15px; height:20px;
  background-color:var(--gold-bright); opacity:.9; pointer-events:none; z-index:2;
  -webkit-mask:url("../img/lily.svg") no-repeat center / contain;
  mask:url("../img/lily.svg") no-repeat center / contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); transition:opacity var(--t-fast), filter var(--t-med); }
.gallery-item__logo::before{
  content:""; position:absolute; left:50%; top:50%; width:340%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(201,168,106,.55), transparent 68%);
  filter:blur(2px); opacity:.7; transition:opacity var(--t-med);
}
.gallery-item:hover .gallery-item__logo{ opacity:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(231,211,168,.85)); }
.gallery-item:hover .gallery-item__logo::before{ opacity:1; }

.lightbox{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center;
  background:rgba(6,6,8,.94); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity var(--t-med), visibility 0s linear var(--t-med); }
.lightbox.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.lightbox img{ max-width:90vw; max-height:74vh; object-fit:contain;
  border:1px solid var(--line); transform:scale(.96); transition:transform var(--t-med) var(--ease-out); }
.lightbox.is-open img{ transform:scale(1); }
.lightbox__close,.lightbox__nav{ position:absolute; color:var(--text);
  font-family:var(--mono); font-size:1.6rem; padding:1rem;
  transition:color var(--t-fast); }
.lightbox__close{ top:1.2rem; right:1.6rem; }
.lightbox__nav{ top:46%; transform:translateY(-50%); font-size:2.4rem; }
.lightbox__nav.prev{ left:1rem; } .lightbox__nav.next{ right:1rem; }
.lightbox__close:hover,.lightbox__nav:hover{ color:var(--gold); }
.lightbox__cap{ position:absolute; bottom:6.4rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--text-mute); }

/* — Lightbox dock: draggable-look filmstrip of thumbnails, fanned like a hand of cards — */
.lightbox__dock{ position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:0; max-width:92vw; padding:.5rem .7rem;
  background:rgba(20,18,14,.55); border:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(10px); overflow-x:auto; scrollbar-width:none; }
.lightbox__dock::-webkit-scrollbar{ display:none; }
.lightbox__dock-item{ position:relative; flex:0 0 auto; width:42px; height:42px;
  margin:0 -6px; border-radius:8px; overflow:hidden; border:1px solid var(--line);
  cursor:pointer; opacity:.6; transform:rotate(var(--tilt,0deg)) translateY(0) scale(1);
  transition:transform .25s var(--ease-out), opacity var(--t-fast), border-color var(--t-fast), z-index 0s; }
.lightbox__dock-item:nth-child(odd){ --tilt:-8deg; }
.lightbox__dock-item:nth-child(even){ --tilt:8deg; }
.lightbox__dock-item img{ width:100%; height:100%; object-fit:cover; }
.lightbox__dock-item:hover{ opacity:1; transform:rotate(0deg) translateY(-6px) scale(1.12); z-index:2; }
.lightbox__dock-item.is-active{ opacity:1; transform:rotate(0deg) translateY(-8px) scale(1.18);
  border-color:var(--gold); z-index:3; }
@media(max-width:560px){ .lightbox__dock-item{ width:34px; height:34px; } }

.countdown{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,4vw,3rem); }
.countdown__unit{ display:flex; flex-direction:column; align-items:center; min-width:80px; }
.countdown__num{ font-family:var(--serif); font-size:clamp(2.8rem,8vw,5rem);
  font-weight:500; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
.countdown__label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin-top:.8rem; }
.countdown__sep{ font-family:var(--serif); font-size:clamp(2rem,6vw,4rem);
  color:var(--gold-deep); align-self:flex-start; }

.newsletter{ text-align:center; }
.newsletter__form{ display:flex; gap:.6rem; max-width:520px; margin:2rem auto 0;
  border-bottom:1px solid var(--line); padding-bottom:.4rem; }
.newsletter__form input{ flex:1; background:none; border:none; color:var(--text);
  font-family:var(--sans); font-size:1rem; padding:.7rem .2rem; }
.newsletter__form input::placeholder{ color:var(--text-mute); }
.newsletter__form input:focus{ outline:none; }
.newsletter__form button{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); padding:.5rem 1rem; white-space:nowrap;
  transition:color var(--t-fast); }
.newsletter__form button:hover{ color:var(--gold-bright); }
.form-note{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  color:var(--text-mute); margin-top:1rem; min-height:1.2em; }
.form-note.is-ok{ color:var(--gold); }
.form-note.is-err{ color:#d98c7a; }

.ig-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media(min-width:680px){ .ig-grid{ grid-template-columns:repeat(4,1fr); } }
.ig-item{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); }
.ig-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-lux); }
.ig-item:hover img{ transform:scale(1.08); }
.ig-item::after{ content:""; position:absolute; inset:0; background:rgba(10,10,12,.0);
  transition:background var(--t-med); }
.ig-item:hover::after{ background:rgba(10,10,12,.25); }
.ig-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:1rem; margin-bottom:2rem; }

.contact-grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media(min-width:900px){ .contact-grid{ grid-template-columns:1.1fr .9fr; } }
.contact-info{ display:grid; gap:1.8rem; align-content:start; }
.contact-info .row{ border-top:1px solid var(--line); padding-top:1.2rem; }
.contact-info .row span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-mute); display:block; margin-bottom:.4rem; }
.contact-info .row a,.contact-info .row p{ font-family:var(--serif); font-size:1.3rem; color:var(--text); }
.contact-info .row a:hover{ color:var(--gold); }
.ig-link{ display:inline-flex; align-items:center; gap:.55rem; }
.ig-icon{ width:1.15em; height:1.15em; color:var(--gold); flex:none; vertical-align:middle; }

.cta-band{ text-align:center; }
.cta-band h2{ max-width:18ch; margin-inline:auto; margin-bottom:1.6rem; }

/* ============================== 15. FOOTER =========================== */
.site-footer{ background:var(--void-soft); border-top:1px solid var(--line);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; position:relative; }
.footer-grid{ display:grid; gap:clamp(2rem,5vw,3rem);
  grid-template-columns:1fr; }
@media(min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-brand .mark{ width:120px; height:120px; color:var(--gold); margin-bottom:1.2rem;
  border-radius:50%; overflow:hidden; display:block; }
.footer-brand p{ max-width:34ch; }
.footer-col h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; font-weight:500; }
.footer-col ul{ display:grid; gap:.8rem; }
.footer-col a{ color:var(--text-dim); font-size:.92rem; transition:color var(--t-fast); }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:center; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem;
  border-top:1px solid var(--line-soft); }
.footer-bottom p{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  color:var(--text-mute); }
.footer-social{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-social a{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim); }
.footer-social a:hover{ color:var(--gold); }

/* ============================== 16. FORME ============================ */
.field{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.field label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-mute); }
.field input,.field textarea,.field select{
  background:var(--void-soft); border:1px solid var(--line); color:var(--text);
  font-family:var(--sans); font-size:1rem; padding:.95rem 1.1rem;
  transition:border-color var(--t-fast), background var(--t-fast); width:100%; }
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:var(--surface); }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-mute); }
form .btn{ width:100%; }
@media(min-width:560px){ .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; } }

/* ============================== 17. RESPONSIVE ======================= */
@media(max-width:1500px){
  html.nav-open, body.nav-open{ overflow:hidden; overscroll-behavior:contain; }
  .burger{ display:block; z-index:calc(var(--z-header) + 2); }
  .nav-cta .btn{ display:none; }
  .nav--split .nav-menu{
    display:flex; position:fixed; inset:0; width:100vw; height:100vh; height:100dvh;
    z-index:calc(var(--z-header) + 1);
    flex-direction:column; align-items:center; justify-content:center; gap:1.9rem;
    padding:6rem 1.5rem 3rem; overflow-y:auto; overflow-x:hidden;
    background:
      radial-gradient(120% 55% at 12% 8%, rgba(201,168,106,.07), transparent 55%),
      radial-gradient(100% 65% at 92% 92%, rgba(201,168,106,.06), transparent 60%),
      linear-gradient(180deg, #0A0A0C, #131217);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    will-change:opacity, transform; pointer-events:none;
    transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out), visibility 0s linear var(--t-menu);
  }
  /* Dekorativni vodeni žig — veliki blijedi ljiljan iza cijelog menija, brand detalj umjesto praznog crnila */
  .nav--split .nav-menu::before{
    content:""; position:fixed; left:50%; top:50%; width:min(64vw,320px); aspect-ratio:493/506;
    transform:translate(-50%,-50%); pointer-events:none;
    background-color:var(--gold);
    -webkit-mask:url("../img/lily.svg") no-repeat center / contain;
    mask:url("../img/lily.svg") no-repeat center / contain;
    opacity:.05;
  }
  /* Tanka zlatna linija pri vrhu — uokviruje meni kao kod ostalih sekcija sajta */
  .nav--split .nav-menu::after{
    content:""; position:absolute; left:12%; right:12%; top:4.6rem; height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,168,106,.5), transparent);
  }
  .nav-open .nav-menu{
    opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;
  }
  .nav-links{ flex-direction:column; gap:1.7rem; flex:none; position:relative; }
  .nav-links a{
    font-family:var(--serif); font-size:1.9rem; letter-spacing:.03em; text-transform:none; color:var(--text);
    opacity:0; transform:translateY(10px);
    transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out), color var(--t-fast);
  }
  .nav-open .nav-links a{ opacity:1; transform:none; }
  .nav-links--right{ position:relative; }
  /* Suptilan razdjelnik između primarne i sekundarne grupe linkova — daje strukturu, ne izgleda kao goli spisak */
  .nav-links--right::before{
    content:""; position:absolute; top:-1.35rem; left:50%; transform:translateX(-50%);
    width:52px; height:1px; background:linear-gradient(90deg, transparent, rgba(201,168,106,.6), transparent);
  }
  .nav-links--right a{ transition-delay:.05s; }
  .nav-open .nav-links--right a{ transition-delay:.08s; }
  .nav-links a::after{ display:none; }
  .nav-links a.is-active{ color:var(--gold); }

  .nav-item--dropdown{ text-align:center; position:relative; }
  .nav-dropdown-trigger{ font-family:var(--serif); font-size:1.9rem; letter-spacing:.03em; text-transform:none; color:var(--text); }
  .nav-dropdown{
    position:static; transform:none; margin-top:0; padding:0; background:none; border:0; box-shadow:none;
    display:none; opacity:1; visibility:visible; text-align:center;
  }
  .nav-item--dropdown.is-open .nav-dropdown{ display:block; transform:none; box-shadow:none; }
  /* Tanka spojnica umjesto kutije — podstavke se osjećaju kao grana Special Thanks, ne kao zaseban box */
  .nav-item--dropdown.is-open .nav-dropdown::before{
    content:""; display:block; width:1px; height:16px; margin:0 auto .7rem;
    background:linear-gradient(180deg, rgba(201,168,106,.65), transparent);
  }
  .nav-dropdown li + li{ margin-top:.2rem; }
  .nav-dropdown a{
    font-family:var(--serif); font-size:1.1rem; letter-spacing:.02em; text-transform:none;
    color:var(--text-dim); opacity:1; transform:none;
    display:inline-block; padding:.4rem 1.3rem; border-radius:3px;
    transition:color var(--t-fast), background var(--t-fast);
  }
  .nav-dropdown a:hover, .nav-dropdown a.is-active{
    background:rgba(201,168,106,.12); color:var(--gold-bright);
  }
}
@media(max-width:1500px) and (prefers-reduced-motion: reduce){
  .nav-menu, .nav-links a, .burger span{ transition-duration:.01ms !important; }
}
@media(max-width:560px){
  :root{ --header-h:72px; }
  .hero__actions .btn{ width:100%; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .countdown__sep{ display:none; }
}

/* ====================== 18. REDUCED MOTION / A11Y ==================== */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .loader{ display:none; }
  .grain{ animation:none; }
}

.skip-link{ position:absolute; left:-9999px; top:0; z-index:10001;
  background:var(--gold); color:var(--void); padding:.8rem 1.2rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; }
.skip-link:focus{ left:1rem; top:1rem; }

.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================================
   19. ARC RE-BRIEF KOMPONENTE
   (three forces, signup, donacije, testimonijali, notice, prose, cookie, GDPR)
   ========================================================================== */

.forces{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; }
@media(min-width:760px){ .forces{ grid-template-columns:repeat(3,1fr); } }
.force{ padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--void-soft));
  transition:border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.force:hover{ border-color:var(--gold-deep); transform:translateY(-4px); }
.force h3{ margin:1.1rem 0 .7rem; font-size:1.45rem; }
.force .lily-ico{ width:32px; height:42px; }

.signup-card{ border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%, rgba(201,168,106,.06), transparent 60%),
             linear-gradient(180deg,var(--surface),var(--void-soft));
  padding:clamp(1.8rem,4vw,3rem); }

.check{ display:flex; align-items:flex-start; gap:.75rem; margin:1rem 0;
  font-size:.9rem; color:var(--text-dim); line-height:1.5; cursor:pointer; }
.check input[type="checkbox"]{ width:20px; height:20px; margin-top:.1rem; flex:none;
  accent-color:var(--gold); cursor:pointer; }
.check a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.req{ color:var(--gold); }

.tiers{ display:grid; gap:clamp(1.2rem,2.5vw,1.8rem); grid-template-columns:1fr; }
@media(min-width:680px){ .tiers{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .tiers{ grid-template-columns:repeat(4,1fr); } }
.tier{ display:flex; flex-direction:column; text-align:center; position:relative;
  padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--void-soft));
  transition:border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.tier:hover{ border-color:var(--gold-deep); transform:translateY(-4px); }
.tier--featured{ border-color:var(--gold-deep); }
.tier__badge{ position:absolute; top:-1px; left:50%; transform:translate(-50%,-50%);
  background:var(--gold-gradient); color:var(--void); font-family:var(--mono); font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; padding:.35em .8em; white-space:nowrap; }
.tier__amount{ font-family:var(--serif); font-size:clamp(2.4rem,5.5vw,3.2rem);
  color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
.tier__label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text); margin:1rem 0 .5rem; }
.tier__perk{ color:var(--text-dim); font-size:.88rem; margin-bottom:1.6rem;
  min-height:3.2em; line-height:1.5; }
.tier__perks{ list-style:none; text-align:left; color:var(--text-dim); font-size:.85rem;
  line-height:1.5; margin:0 0 1.6rem; padding:0; flex:1; }
.tier__perks li{ position:relative; padding-left:1.15rem; margin-bottom:.55rem; }
.tier__perks li::before{ content:"✦"; position:absolute; left:0; top:0;
  color:var(--gold); font-size:.7rem; line-height:1.9; }
.tier--patron{ border-color:var(--gold-deep); }
.tier .btn{ margin-top:auto; width:100%; }
.tier__input{ display:flex; align-items:center; gap:.4rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--line); }
.tier__input span{ font-family:var(--serif); font-size:1.6rem; color:var(--gold); }
.tier__input input{ width:100%; background:none; border:none; color:var(--text);
  font-family:var(--serif); font-size:1.6rem; padding:.3rem 0; text-align:center;
  font-variant-numeric:tabular-nums; }
.tier__input input:focus{ outline:none; }

/* — Founders Circle (founders.html) — */
.founders-counter{ display:inline-flex; flex-direction:column; align-items:center; gap:.4rem;
  border:1px solid var(--gold-deep); padding:1.1rem 2.2rem;
  background:linear-gradient(180deg,var(--surface),var(--void-soft)); }
.founders-counter__num{ font-size:1.6rem; color:var(--gold); letter-spacing:.12em;
  font-variant-numeric:tabular-nums; }
.founders-counter__label{ font-size:.6rem; letter-spacing:.3em; color:var(--text-mute); }
.founders-perks{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:.75rem; }
@media(min-width:680px){ .founders-perks{ grid-template-columns:1fr 1fr; } }
.founders-perks li{ position:relative; padding:.9rem 1rem .9rem 2.4rem;
  border:1px solid var(--line); background:var(--void-soft);
  color:var(--text-dim); font-size:.92rem; line-height:1.5; }
.founders-perks li::before{ content:"✦"; position:absolute; left:1rem; top:.95rem;
  color:var(--gold); font-size:.75rem; }
.founders-pay{ max-width:420px; margin-inline:auto; }

/* — Brojač prijava (reserve.html) — */
.reserve-counter{ margin-bottom:clamp(1.8rem,4vw,2.6rem); }
.reserve-counter__line{ font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.5rem);
  color:var(--text); }
.reserve-counter__line strong{ color:var(--gold); font-variant-numeric:tabular-nums; }
.reserve-counter__sub{ font-size:.88rem; margin-top:.45rem; }

.notice{ border:1px solid var(--line); border-left:3px solid var(--gold);
  background:var(--void-soft); padding:1.3rem 1.6rem; font-size:.92rem;
  color:var(--text-dim); line-height:1.6; }
.notice strong{ color:var(--text); }

/* — Bankovni transfer (SEPA) — */
.bank-card{ border:1px solid var(--line); background:var(--void-soft);
  padding:clamp(1.4rem,3vw,2.2rem); max-width:560px; margin-inline:auto; }
.bank-row{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.9rem 0; border-bottom:1px solid var(--line-soft); }
.bank-row:last-child{ border-bottom:none; }
.bank-row > span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-mute); flex:none; }
.bank-row strong{ font-family:var(--mono); font-size:.95rem; color:var(--text);
  text-align:right; letter-spacing:.04em; word-break:break-word; font-weight:500; }
.bank-copy{ font-family:var(--mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--line);
  padding:.25em .6em; margin-left:.5rem; border-radius:2px; vertical-align:middle; cursor:pointer;
  transition:border-color var(--t-fast), color var(--t-fast); }
.bank-copy:hover{ border-color:var(--gold); color:var(--gold-bright); }

.prose h3{ font-size:1.3rem; margin:2.2rem 0 .8rem; }
.prose h3:first-child{ margin-top:0; }
.prose p{ margin-bottom:1rem; max-width:68ch; }
.prose a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

.spec-note{ margin-top:1.6rem; font-family:var(--mono); font-size:.72rem; line-height:1.8;
  color:var(--text-mute); letter-spacing:.01em; }
.spec-note em{ color:var(--text-dim); font-style:italic; }

.footer-consent{ font-size:.72rem; color:var(--text-mute); margin-top:1rem; line-height:1.6; }
.footer-consent a{ color:var(--gold); }
.footer-disclaimer{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line-soft);
  font-size:.7rem; color:var(--text-mute); line-height:1.7; }
.footer-dev{ margin-top:.8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-mute); text-align:center; }
.footer-dev a{
  position:relative; color:var(--gold); text-decoration:none; letter-spacing:.14em;
  transition:color var(--t-fast), text-shadow var(--t-med);
}
.footer-dev a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-med) var(--ease-out);
}
.footer-dev a:hover{ color:var(--gold-bright); text-shadow:0 0 10px rgba(201,168,106,.5); }
.footer-dev a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ====================== JEZIK — PREKIDAČ (lang-switch) ======================
   Živi u headeru, u .nav-cta traci pored "First Series"/"Founders Circle"
   dugmadi (i pored burger ikonice na mobitelu) — primjetno mjesto koje je
   uvijek na ekranu, ne skriveni floating widget. Dugme je kompaktan kružni
   "čip" sa zastavicom trenutnog jezika (dovoljno prepoznatljivo samo po
   zastavici, bez teksta — štedi prostor u headeru); klikom se ispod otvara
   padajući meni sa sve tri opcije (zastavica + kod + naziv). JS (main.js)
   prebacuje .is-open klasu. */
.lang-switch{ position:relative; flex:none; }
.lang-switch__trigger{ display:flex; align-items:center; justify-content:center; gap:.25em;
  width:36px; height:36px; padding:0; background:var(--surface);
  border:1px solid var(--line); border-radius:50%;
  color:var(--text-dim); cursor:pointer;
  transition:border-color .2s, color .2s, background .2s, transform .2s; }
.lang-switch__trigger:hover, .lang-switch__trigger:focus-visible{
  border-color:var(--gold); color:var(--gold); background:var(--void-soft); transform:translateY(-1px); }
.lang-switch__trigger .lang-switch__flag{ width:18px; height:13px; }
.lang-switch__chevron{ width:7px; height:7px; flex:none; transition:transform .25s var(--ease-out); opacity:.75; }
.lang-switch.is-open .lang-switch__chevron{ transform:rotate(180deg); }

.lang-switch__panel{ position:absolute; top:calc(100% + .6rem); right:0; z-index:9400;
  display:flex; flex-direction:column; min-width:168px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s;
  overflow:hidden; }
.lang-switch.is-open .lang-switch__panel{
  opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.lang-switch__opt{ display:flex; align-items:center; gap:.7rem;
  padding:.75rem 1rem; font-family:var(--sans); font-size:.82rem;
  color:var(--text-dim); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid var(--line-soft); transition:color .2s, background .2s; }
.lang-switch__opt:last-child{ border-bottom:none; }
.lang-switch__opt:hover{ color:var(--gold); background:var(--void-soft); }
.lang-switch__opt.is-active{ color:var(--gold); }
.lang-switch__opt.is-active .lang-switch__text strong{ color:var(--gold); }
.lang-switch__flag{ width:22px; height:15px; border-radius:3px; flex:none;
  overflow:hidden; display:inline-block; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.lang-switch__flag svg{ display:block; width:100%; height:100%; }
.lang-switch__text strong{ color:var(--text-dim); font-weight:600; }

/* Mobitel: veći taster (puna 44px dodirna zona po iOS/Android smjernicama),
   meni ostaje unutar ekrana (right:0 relativno na dugme, koje je već blizu
   desne ivice, uz malu negativnu korekciju da ne dodiruje sam rub ekrana). */
@media(max-width:1500px){
  .lang-switch__trigger{ width:44px; height:44px; }
  .lang-switch__trigger .lang-switch__flag{ width:22px; height:16px; }
  .lang-switch__panel{ min-width:184px; right:-.4rem; }
  .lang-switch__opt{ padding:.95rem 1.15rem; font-size:.9rem; }
}
/* Na uskim ekranima (telefoni) sakrij podnaslov brenda u headeru — logo +
   "Chronvale" je dovoljno za prepoznatljivost, a oslobađa prostor da stanu
   i burger i prekidač jezika bez preklapanja. */
@media(max-width:700px){
  .brand-sub{ display:none; }
}

.cookie-consent{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:9700;
  max-width:580px; margin-inline:auto; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  background:rgba(14,14,18,.97); backdrop-filter:blur(14px);
  border:1px solid var(--line); padding:1.1rem 1.3rem;
  transform:translateY(160%); transition:transform .6s var(--ease-lux); }
.cookie-consent[hidden]{ display:none; }
.cookie-consent.is-visible{ transform:none; }
.cookie-consent p{ flex:1 1 240px; margin:0; font-size:.8rem; color:var(--text-dim); line-height:1.5; }
.cookie-consent a{ color:var(--gold); }
.cookie-consent__actions{ display:flex; gap:.6rem; }

.testimonials{ position:relative; width:min(380px,86vw);
  height:clamp(400px,64vw,440px); margin:0 auto; touch-action:pan-y; }
.tcard{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:1.4rem; padding:clamp(1.8rem,4vw,2.6rem);
  border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(180deg,var(--surface),var(--void-soft));
  box-shadow:0 30px 70px rgba(0,0,0,.55); user-select:none;
  transition:transform .4s var(--ease-out), opacity .4s; will-change:transform; }
.tcard[data-pos="front"]{  transform:rotate(-5deg);                z-index:3; cursor:grab; }
.tcard[data-pos="middle"]{ transform:rotate(0deg) translateX(7%);  z-index:2; }
.tcard[data-pos="back"]{   transform:rotate(5deg) translateX(14%); z-index:1; }
.tcard[data-pos="hidden"]{ transform:rotate(5deg) translateX(14%); z-index:0; opacity:0; }
.tcard.is-dragging{ transition:none; cursor:grabbing; }
.tcard__avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto;
  display:grid; place-items:center; border:1px solid var(--gold-deep);
  background:var(--void-soft); font-family:var(--serif); font-size:1.5rem; color:var(--gold); }
.tcard__quote{ font-family:var(--serif); font-size:1.28rem; line-height:1.45;
  text-align:center; color:var(--text); font-style:italic; }
.tcard__author{ text-align:center; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tcard__role{ display:block; color:var(--text-mute); margin-top:.45rem; letter-spacing:.1em; }
.testi-controls{ display:flex; gap:1rem; justify-content:center;
  margin-top:clamp(2rem,4vw,3rem); }
.testi-controls button{ width:48px; height:48px; border:1px solid var(--line);
  border-radius:50%; color:var(--gold); display:grid; place-items:center; font-size:1.2rem;
  transition:border-color var(--t-fast), background var(--t-fast); }
.testi-controls button:hover{ border-color:var(--gold); background:rgba(201,168,106,.08); }

.field input.invalid,.field textarea.invalid,.field select.invalid{ border-color:#d98c7a; }
.field .field-error{ color:#d98c7a; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.04em; margin-top:.1rem; }

@media (prefers-reduced-motion:reduce){
  .tcard{ transition:none; }
  .cookie-consent{ transition:none; }
}

/* ============================== INTERACTIVE SELECTOR ============================= */
.selector{ display:flex; width:100%; height:clamp(320px,46vw,460px); overflow:hidden; }
.selector-item{
  position:relative; flex:1 1 0%; min-width:46px; cursor:pointer;
  background-size:cover; background-position:center; background-color:var(--surface);
  border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:flex-grow 700ms var(--ease-lux), border-color 700ms var(--ease-lux), box-shadow 700ms var(--ease-lux);
}
.selector-item + .selector-item{ border-left:0; }
.selector-item.is-active{
  flex:7 1 0%; border-color:var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.5); z-index:2;
}
.selector-item__shadow{
  position:absolute; left:0; right:0; bottom:-40px; height:120px; pointer-events:none;
  transition:bottom 700ms var(--ease-lux), box-shadow 700ms var(--ease-lux);
}
.selector-item.is-active .selector-item__shadow{
  bottom:0; box-shadow:inset 0 -120px 120px -120px #000, inset 0 -120px 120px -80px #000;
}
.selector-item__label{
  position:absolute; left:0; right:0; bottom:1.1rem; z-index:3;
  display:flex; align-items:center; gap:.9rem; padding:0 1.1rem;
}
.selector-item__badge{
  flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(10,10,12,.75); backdrop-filter:blur(6px); border:1px solid var(--gold-deep);
  color:var(--gold); font-family:var(--mono); font-size:.85rem; letter-spacing:.04em;
}
.selector-item__info{
  color:var(--text); white-space:nowrap; opacity:0; transform:translateX(20px);
  transition:opacity 700ms var(--ease-lux), transform 700ms var(--ease-lux);
}
.selector-item.is-active .selector-item__info{ opacity:1; transform:translateX(0); }
.selector-item__info strong{ display:block; font-family:var(--serif); font-size:1.1rem; font-weight:500; }
.selector-item__info span{ font-size:.8rem; color:var(--text-mute); }
@media(max-width:760px){
  .selector{ flex-direction:column; height:auto; }
  .selector-item{ flex:none !important; height:64px; }
  .selector-item.is-active{ height:280px; }
  .selector-item__info{ white-space:normal; }
}

/* ==========================================================================
   FOUNDERS CIRCLE — high-end redesign (hero, trust, timeline, archive,
   FAQ, finale). Koristi se samo na founders.html.
   ========================================================================== */

/* — HERO: veliki vizual sata odmah ispod headera — */
.founders-hero{ padding-top:var(--header-h); }
.founders-hero__media{ position:relative; height:clamp(360px,64vh,760px); overflow:hidden; }
.founders-hero__media picture{ display:block; width:100%; height:100%; }
.founders-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.03); }
.founders-hero__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,12,.42) 0%, rgba(10,10,12,0) 26%,
    rgba(10,10,12,0) 52%, rgba(10,10,12,.66) 78%, var(--void) 100%); }
.founders-hero__glow{ position:absolute; inset:auto 0 -18%; height:60%; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%, rgba(201,168,106,.16), transparent 70%); }
.founders-hero__content{ position:relative; z-index:2; margin-top:clamp(-4.5rem,-7vw,-2.5rem);
  padding-bottom:clamp(2.5rem,6vh,4rem); }

/* — Trust badges ispod CTA — */
.founders-trust{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.65rem 1.8rem; margin:1.5rem 0 0; padding:0; }
.founders-trust li{ display:flex; align-items:center; gap:.55rem; font-family:var(--mono);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); }
.founders-trust li::before{ content:"\2726"; color:var(--gold); font-size:.72rem; }

/* — Social proof (pojavi se automatski od 10 Foundera) — */
.founders-socialproof{ margin:1.5rem auto 0; max-width:44ch; font-family:var(--serif);
  font-style:italic; font-size:1rem; color:var(--text-dim); }
.founders-socialproof::before{ content:"\2014\00a0"; color:var(--gold); }

/* — Timeline: Join → Group → Kickstarter → Production → Delivery — */
.founders-timeline{ list-style:none; margin:0 auto; padding:0; max-width:960px;
  counter-reset:ftl; display:grid; gap:1.9rem; }
.founders-timeline li{ counter-increment:ftl; position:relative; padding-left:3.4rem; }
.founders-timeline li::before{ content:counter(ftl,decimal-leading-zero); position:absolute;
  left:0; top:0; width:2.3rem; height:2.3rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.08em; color:var(--gold); background:var(--void-soft); }
.founders-timeline li:not(:last-child)::after{ content:""; position:absolute; left:1.15rem;
  top:2.5rem; bottom:-1.9rem; width:1px; background:var(--line); }
.founders-timeline strong{ display:block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-bright); padding-top:.45rem; }
.founders-timeline .t-desc{ display:block; margin-top:.45rem; font-size:.84rem;
  color:var(--text-mute); line-height:1.6; }
@media(min-width:860px){
  .founders-timeline{ grid-template-columns:repeat(5,1fr); gap:0 1.2rem; text-align:center; }
  .founders-timeline li{ padding-left:0; padding-top:3.4rem; }
  .founders-timeline li::before{ left:50%; transform:translateX(-50%); }
  .founders-timeline li:not(:last-child)::after{ left:calc(50% + 1.5rem); right:calc(-50% + 1.5rem);
    top:1.15rem; bottom:auto; width:auto; height:1px; }
}

/* — Founders Archive: vrijednost koju popust ne može zamijeniti — */
.founders-archive{ position:relative; text-align:center; border-block:1px solid var(--line);
  background:radial-gradient(70% 130% at 50% 0%, rgba(201,168,106,.08), transparent 68%), var(--void-soft);
  padding:clamp(3.2rem,9vw,5.5rem) 0; }
.founders-archive blockquote{ margin:1.6rem auto 0; max-width:26ch; font-family:var(--serif);
  font-size:clamp(1.45rem,3.4vw,2.1rem); font-weight:500; line-height:1.35; color:var(--text); }
.founders-archive blockquote em{ color:var(--gold-bright); font-style:normal; }
.founders-archive .archive-note{ margin-top:1.3rem; font-size:.9rem; color:var(--text-mute);
  max-width:52ch; margin-inline:auto; }

/* — FAQ — */
.founders-faq{ max-width:760px; margin-inline:auto; }
.founders-faq details{ border-bottom:1px solid var(--line-soft); }
.founders-faq details:first-of-type{ border-top:1px solid var(--line-soft); }
.founders-faq summary{ cursor:pointer; padding:1.2rem .2rem; display:flex; align-items:baseline;
  justify-content:space-between; gap:1.2rem; list-style:none;
  font-family:var(--serif); font-size:1.08rem; color:var(--text); }
.founders-faq summary::-webkit-details-marker{ display:none; }
.founders-faq summary::after{ content:"+"; flex:none; font-family:var(--mono);
  color:var(--gold); transition:transform 300ms var(--ease-lux); }
.founders-faq details[open] summary::after{ content:"\2212"; }
.founders-faq .faq-body{ padding:0 .2rem 1.3rem; font-size:.92rem; line-height:1.75;
  color:var(--text-dim); }

/* — FINALE: veliki završni vizual + CTA — */
.founders-finale{ position:relative; overflow:hidden; text-align:center; }
.founders-finale__media{ position:relative; height:clamp(520px,88vh,880px); }
.founders-finale__media picture{ display:block; width:100%; height:100%; }
.founders-finale__media img{ width:100%; height:100%; object-fit:cover; object-position:center 26%; }
.founders-finale__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--void) 0%, rgba(10,10,12,0) 20%,
    rgba(10,10,12,.3) 38%, rgba(10,10,12,.94) 58%, var(--void) 78%); }
.founders-finale__content{ position:absolute; z-index:2; inset:auto 0 clamp(2.4rem,7vh,4.5rem); }
.founders-finale__content h2{ max-width:22ch; margin-inline:auto; }
.founders-finale__content .finale-sub{ margin:1.2rem auto 2.2rem; max-width:44ch;
  font-family:var(--serif); font-size:1.05rem; color:var(--text-dim); }
.btn-xl{ padding:1.15rem 3rem; font-size:.8rem; letter-spacing:.28em; }
@media(max-width:560px){ .btn-xl{ width:min(100%,340px); padding-inline:1rem; } }