/* ============================================================
   AUTERRA — tokens
   ============================================================ */
:root{
  --black:#0A0A0B;
  --black-2:#101012;
  --black-3:#17171A;
  --white:#FFFFFF;
  --paper:#F4F4F2;
  --paper-2:#EAEAE6;
  --ink:#0A0A0B;
  --ink-muted:#56585C;
  --on-dark:#FFFFFF;
  --on-dark-muted:#9B9DA2;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(10,10,11,.14);

  --gutter:clamp(20px,5.2vw,64px);
  --maxw:1240px;
  --sect:clamp(76px,11vw,150px);
  --hdr:64px;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.7s;
}
@media (min-width:900px){ :root{ --hdr:78px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--black);
  color:var(--on-dark);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:"Archivo","Inter",sans-serif;
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,8.4vw,3.95rem);line-height:1;letter-spacing:-.034em}
h2{font-size:clamp(1.95rem,5.4vw,3.4rem);line-height:1.04;letter-spacing:-.032em}
h3{font-size:clamp(1.12rem,2.3vw,1.35rem);line-height:1.25;letter-spacing:-.018em;font-weight:600}
p{margin:0}

.eyebrow{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--on-dark-muted);
}
.eyebrow--ink{color:var(--ink-muted)}

.lead{font-size:clamp(1.02rem,1.9vw,1.24rem);line-height:1.6;color:var(--on-dark-muted);max-width:34ch}
.lead--ink{color:var(--ink-muted)}

/* ============================================================
   LOGO
   ============================================================ */
.logo{display:inline-flex;align-items:center;gap:11px;color:var(--white)}
.logo-lockup{display:inline-flex;align-items:center;gap:11px}
.logo-mark{height:28px;width:auto;display:block}
.logo-word{
  font-family:"Poppins",sans-serif;
  font-weight:300;
  font-size:.94rem;
  letter-spacing:.3em;
  text-indent:.3em;
  line-height:1;
  white-space:nowrap;
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--hdr);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
  padding-top:env(safe-area-inset-top);
}
.hdr.is-scrolled{
  background:rgba(10,10,11,.8);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border-bottom-color:var(--line-dark);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav{display:none;align-items:center;gap:34px}
@media (min-width:900px){ .nav{display:flex} }
.nav a{
  font-size:.83rem;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.72);
  padding:10px 0;
  transition:color .2s ease;
  position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:18px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--white); --fg:var(--black); --bd:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:2px;
  font-size:.88rem;font-weight:600;letter-spacing:.005em;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease-out,background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn:active{transform:scale(.975)}
.btn--sm{min-height:42px;padding:0 18px;font-size:.8rem}
.btn--ghost{--bg:transparent;--fg:var(--white);--bd:rgba(255,255,255,.28)}
.btn--ghost:hover{--bd:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btn--dark{--bg:var(--black);--fg:var(--white);--bd:var(--black)}
.btn--dark:hover{--bg:#26262A;--bd:#26262A}
.btn--white:hover{background:#DEDEDC;border-color:#DEDEDC}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:min(94svh,720px);
  padding-top:calc(var(--hdr) + clamp(48px,16vw,120px));
  padding-bottom:clamp(40px,9vw,88px);
}
.hero__bg{position:absolute;inset:0;z-index:-1;background:var(--black)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 56%}
/* scrim: dovoljno da tekst bude citljiv, dovoljno malo da se fotka i dalje vidi */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(10,10,11,.88) 0%, rgba(10,10,11,.78) 34%,
      rgba(10,10,11,.5) 62%, rgba(10,10,11,.3) 80%, rgba(10,10,11,.9) 100%);
}
.hero__in{width:100%}
.hero__copy{max-width:34rem}
.hero__copy>*+*{margin-top:clamp(16px,4.4vw,22px)}

/* trust strip — samo provjerljive cinjenice, bez izmisljenog social proofa */
.trust{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin-top:clamp(20px,5vw,30px);padding-top:clamp(16px,4vw,22px);
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.81rem;color:#B7B9BD;letter-spacing:.005em;
}
.trust span{display:inline-flex;align-items:center;gap:9px}
.trust span::before{content:"";width:4px;height:4px;border-radius:50%;background:#fff;opacity:.6;flex:none}
.trust a{color:#E4E5E7;border-bottom:1px solid rgba(255,255,255,.34);transition:color .2s ease,border-color .2s ease}
.trust a:hover{color:#fff;border-color:#fff}

@media (min-width:900px){
  .hero{min-height:min(88vh,820px);align-items:center}
  .hero__bg img{object-position:58% 52%}
  .hero__bg::after{
    background:
      linear-gradient(95deg,
        rgba(10,10,11,.95) 0%, rgba(10,10,11,.9) 26%,
        rgba(10,10,11,.66) 46%, rgba(10,10,11,.3) 68%, rgba(10,10,11,.42) 100%),
      linear-gradient(to bottom,
        rgba(10,10,11,.7) 0%, rgba(10,10,11,0) 22%,
        rgba(10,10,11,0) 68%, rgba(10,10,11,.85) 100%);
  }
  .hero__copy{max-width:32rem}
}
@media (min-width:1280px){ .hero__copy{max-width:36rem} }

/* ============================================================
   LIGHT SECTIONS
   ============================================================ */
.light{background:var(--paper);color:var(--ink)}
.sect{padding-block:var(--sect)}
.sect--tight{padding-block:clamp(56px,8vw,110px)}

.split{display:grid;gap:clamp(22px,4vw,64px)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
.split__body{max-width:56ch;color:var(--ink-muted);font-size:clamp(1rem,1.55vw,1.09rem);line-height:1.7}

/* three benefits */
.benefits{
  display:grid;gap:0;
  margin-top:clamp(52px,7vw,96px);
  border-top:1px solid var(--line-light);
}
.benefit{padding:clamp(28px,3.6vw,40px) 0;border-bottom:1px solid var(--line-light)}
.benefit h3{margin-bottom:10px}
.benefit p{color:var(--ink-muted);max-width:42ch;font-size:.98rem}
@media (min-width:840px){
  .benefits{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line-light)}
  .benefit{border-bottom:0;padding:clamp(30px,3vw,44px) clamp(26px,2.6vw,40px) clamp(34px,3.4vw,52px) 0;border-right:1px solid var(--line-light)}
  .benefit:last-child{border-right:0;padding-right:0}
  .benefit:not(:first-child){padding-left:clamp(26px,2.6vw,40px)}
}

/* ============================================================
   FEED — format sadržaja (zamjena za "proizvod u akciji")
   ============================================================ */
.feed{background:var(--black);color:var(--on-dark)}
.feed__head{display:grid;gap:18px}
@media (min-width:900px){
  .feed__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px}
}
.feed__sub{color:var(--on-dark-muted);max-width:46ch;margin-top:16px;font-size:1.02rem}

.feed__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:60vw;
  gap:12px;margin-top:clamp(38px,5vw,60px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
}
.feed__rail::-webkit-scrollbar{display:none}
@media (min-width:760px){
  .feed__rail{
    grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(12px,1.6vw,20px);overflow:visible;
    margin-inline:0;padding-inline:0;
  }
}
.feed__item{scroll-snap-align:start}
.feed__shot{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--line-dark);
  background:radial-gradient(120% 100% at 50% 30%, #232328 0%, #111114 60%, #0A0A0B 100%);
}
.feed__shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.92)}
.feed__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.6),rgba(10,10,11,0) 45%)}
.feed__cap{margin-top:14px;font-size:.85rem;color:var(--on-dark-muted)}
.feed__note{margin-top:clamp(28px,4vw,40px);font-size:.79rem;color:#75777C}

/* ============================================================
   FAQ
   ============================================================ */
.faq__list{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:60px;padding:18px 0;
  font-family:"Archivo",sans-serif;font-weight:600;
  font-size:clamp(1rem,1.9vw,1.12rem);letter-spacing:-.015em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:13px;height:13px;position:relative;
  background:
    linear-gradient(var(--ink),var(--ink)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 13px no-repeat;
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__a{padding:0 0 24px;color:var(--ink-muted);max-width:64ch;font-size:.99rem}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:14px;
  padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.94);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border-top:1px solid var(--line-dark);
  transform:translateY(115%);
  transition:transform .45s var(--ease);
}
.sticky.is-on{transform:none}
.sticky__t{font-size:.78rem;color:#9B9DA2;line-height:1.3;flex:1;min-width:0}
.sticky .btn{flex:none}
@media (min-width:900px){ .sticky{display:none} }
@media (prefers-reduced-motion:reduce){ .sticky{transition:none} }
@media (prefers-reduced-transparency:reduce){ .sticky{background:#0A0A0B;-webkit-backdrop-filter:none;backdrop-filter:none} }

/* ============================================================
   STEPS
   ============================================================ */
.steps{margin-top:clamp(48px,6.5vw,88px);border-top:1px solid var(--line-light)}
.step{
  display:grid;gap:6px 34px;
  padding:clamp(26px,3.4vw,40px) 0;
  border-bottom:1px solid var(--line-light);
  align-items:start;
}
@media (min-width:760px){
  .step{grid-template-columns:88px minmax(0,300px) minmax(0,1fr);gap:0 clamp(24px,4vw,64px);align-items:baseline}
}
.step__no{
  font-family:"Archivo",sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.14em;
  color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
}
.step__t{font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(1.12rem,2.2vw,1.4rem);letter-spacing:-.02em;line-height:1.25;margin:0}
.step__d{color:var(--ink-muted);max-width:46ch;font-size:.99rem;margin:0}
@media (max-width:759px){ .step__d{margin-top:8px} }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;overflow:hidden;color:var(--on-dark);
  background:radial-gradient(90% 70% at 78% 18%, #1B1B1F 0%, #121215 42%, #0A0A0B 100%)}
.final__bg{display:none}
.final__in{position:relative;z-index:1}
.final__head{max-width:20ch}
.final__lead{margin-top:20px;max-width:44ch;color:var(--on-dark-muted);font-size:clamp(1rem,1.7vw,1.15rem)}
.final__actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.contactline{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:34px;font-size:.92rem}
.contactline a{color:#D6D7D9;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.contactline a:hover{color:#fff;border-color:#fff}


/* brojac pregleda */
.stat{
  display:flex;align-items:center;gap:clamp(14px,2.2vw,20px);
  margin-top:clamp(30px,4.5vw,42px);
  padding-top:clamp(24px,3.4vw,30px);
  border-top:1px solid var(--line-dark);
  max-width:26rem;
}
.stat__icon{width:clamp(28px,3.6vw,36px);height:auto;flex:none;color:#fff;opacity:.85}
.stat__num{
  font-family:"Archivo","Inter",sans-serif;font-weight:600;
  font-size:clamp(2.4rem,6.6vw,3.6rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat__num span{display:inline-block;min-width:6.4ch}
.stat__lbl{
  margin-top:9px;font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-muted);
}
.final__actions{margin-top:clamp(28px,4vw,36px)}

/* ---------- form ---------- */
.form{
  margin-top:clamp(52px,7vw,84px);
  padding-top:clamp(40px,5vw,56px);
  border-top:1px solid var(--line-dark);
}
.form__grid{display:grid;gap:26px}
@media (min-width:760px){
  .form__grid{grid-template-columns:1fr 1fr;gap:30px 40px}
  .field--full{grid-column:1 / -1}
}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#8E9095}
.field label .req{color:#C9CACC}
.field input,.field textarea{
  width:100%;
  min-height:48px;
  background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.22);
  border-radius:0;
  color:#fff;
  font:inherit;font-size:1rem;
  padding:6px 0 12px;
  transition:border-color .25s ease;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#6E7075}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:#fff}
.field input:focus-visible,.field textarea:focus-visible{outline:0}
.form__foot{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.form__hint{font-size:.82rem;color:#8A8C91;max-width:40ch}
.form__status{font-size:.88rem;color:#C9CACC;min-height:1.2em}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--black);border-top:1px solid var(--line-dark);padding-block:clamp(48px,6vw,74px) calc(clamp(40px,5vw,60px) + env(safe-area-inset-bottom))}
.ftr__grid{display:grid;gap:32px}
@media (min-width:760px){ .ftr__grid{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px} }
.ftr__word{display:flex;align-items:center;gap:13px;font-family:"Poppins",sans-serif;font-weight:300;font-size:1.05rem;letter-spacing:.34em}
.ftr__word span{text-indent:.34em}
.ftr__mark{height:30px;width:auto;flex:none}
.ftr__tag{margin-top:14px;color:var(--on-dark-muted);font-size:.94rem;max-width:34ch}
.ftr__links{display:flex;flex-direction:column;gap:8px;font-size:.94rem}
.ftr__links a{color:#C4C5C8;transition:color .2s ease}
.ftr__links a:hover{color:#fff}
@media (min-width:760px){ .ftr__links{align-items:flex-end} }
.ftr__legal{margin-top:clamp(38px,5vw,56px);padding-top:22px;border-top:1px solid var(--line-dark);font-size:.78rem;color:#83858A;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}

/* ============================================================
   REVEAL
   ============================================================ */
.r{opacity:0;transform:translate3d(0,18px,0)}
.r.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .r,.r.in{opacity:1;transform:none;transition:none}
  .btn{transition:background-color .2s ease,color .2s ease}
  .btn:active{transform:none}
  *{scroll-behavior:auto!important}
}
@media (prefers-reduced-transparency:reduce){
  .hdr.is-scrolled{background:#0A0A0B;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .lead,.split__body,.benefit p,.step__d{color:#3A3C40}
  .final__lead,.ftr__tag{color:#E2E3E5}
  .field input,.field textarea{border-bottom-color:rgba(255,255,255,.55)}
}

/* ============================================================
   NAGOVJESTAJ KLIZANJA (samo mobitel)
   ============================================================ */
.rail-hint{display:flex;margin-top:18px}
@media (min-width:760px){ .rail-hint{display:none} }


.rail-hint__track{position:relative;flex:1;height:2px;background:rgba(255,255,255,.16);overflow:hidden}
.rail-hint__bar{
  position:absolute;top:0;left:0;bottom:0;width:34%;background:#fff;
  transform:translateX(0);will-change:transform;
}

/* desni rub trake blijedi dok ima jos sadrzaja */
@media (max-width:759px){
  .feed__rail{
    -webkit-mask-image:linear-gradient(to right,#000 78%,rgba(0,0,0,.12) 100%);
    mask-image:linear-gradient(to right,#000 78%,rgba(0,0,0,.12) 100%);
    transition:-webkit-mask-image .3s linear,mask-image .3s linear;
  }
  .feed__rail.is-end{-webkit-mask-image:none;mask-image:none}
}