@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* ============================================================
   ekran.studio — editorial / architectural
   Ground: warm paper · Ink near-black · One accent: oxblood
   ============================================================ */

:root{
  --paper:      #F4F2ED;
  --paper-2:    #EEEBE3;
  --ink:        #16130F;
  --ink-2:      #4A443B;   /* secondary text */
  --ink-3:      #5F584D;   /* faint (AA kontrast na papiru) */
  --line:       rgba(22,19,15,.14);
  --line-soft:  rgba(22,19,15,.08);
  --oxblood:    #6E2436;
  --oxblood-2:  #8A2E44;

  --dark:       #16130F;
  --on-dark:    #EDE9E0;
  --on-dark-2:  #A39C8E;

  --f-display:  'Archivo', system-ui, sans-serif;
  --f-serif:    'Newsreader', Georgia, serif;

  --pad:        clamp(1.25rem, 5vw, 6rem);
  --maxw:       1320px;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; }
html.js body{ /* nothing hidden globally; per-element hides below */ }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

::selection{ background:var(--oxblood); color:var(--paper); }

a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* scroll progress bar */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background:var(--oxblood); transform-origin:left; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  mix-blend-mode:normal;
  transition:padding .5s var(--ease-out), background .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding-top:.7rem; padding-bottom:.7rem;
  background:rgba(244,242,237,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.nav__mark{
  font-weight:800; font-size:1.06rem; letter-spacing:-.02em;
}
.nav__mark .dot{ color:var(--oxblood); }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-size:.82rem; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
  position:relative; padding:.2rem 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:700;
  padding:.55rem .95rem; border:1px solid var(--line);
  border-radius:100px; transition:.4s var(--ease-out);
}
.nav__cta svg{ transition:transform .4s var(--ease-out); }
.nav__cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.nav__cta:hover svg{ transform:translate(2px,-2px); }

/* ============ shared bits ============ */
.eyebrow, .sec-label{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:.7rem;
}
.eyebrow__idx, .sec-label span{ color:var(--oxblood); font-variant-numeric:tabular-nums; }
.sec-label--light, .sec-label--light span{ color:var(--on-dark-2); }
.sec-label--light span{ color:var(--oxblood-2); }

.accent-dot{
  display:inline-block; width:.5rem; height:.5rem; flex:0 0 auto;
  background:var(--oxblood); border-radius:50%; margin-top:.55rem;
}

/* ============ 01 · HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:8rem; padding-bottom:2.5rem; }
.hero .eyebrow{ margin-bottom:clamp(1.4rem,4vh,2.8rem); }

.hero__title{
  font-weight:900;
  font-size:clamp(2.9rem, 11.5vw, 11rem);
  line-height:.92;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line--accent{ color:var(--oxblood); }
.hero__title .line--accent em{
  font-family:var(--f-serif); font-weight:500; font-style:italic;
  letter-spacing:-.01em; font-size:.96em;
}

.hero__foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;
  margin-top:clamp(2rem,6vh,4.5rem);
}
.hero__lede{
  max-width:34ch; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.55;
  color:var(--ink-2); font-weight:500; display:flex; gap:.8rem; align-items:flex-start;
}
.scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
}
.scrollcue svg{ animation:bob 2.4s var(--ease-inout) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

.hero__rule{ position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--line);
  transform:scaleX(0); transform-origin:left; }

/* ============ 02 · MANIFEST ============ */
.manifest{ padding-block:clamp(6rem,15vh,12rem); }
.grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:clamp(2rem,6vw,6rem); }
.manifest__body{ max-width:24ch; } /* fixed below */
.manifest__body{ max-width:none; }

.statement{
  font-size:clamp(1.6rem,3.4vw,3.1rem); line-height:1.18; letter-spacing:-.02em; font-weight:600;
  text-wrap:balance;
}
.statement em{ font-family:var(--f-serif); font-weight:500; color:var(--oxblood); }

.manifest__note{
  margin-top:2.5rem; display:flex; gap:.9rem; align-items:flex-start; max-width:46ch;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.manifest__note p{ color:var(--ink-2); font-size:1rem; line-height:1.55; }

/* ============ 03 · PROCES ============ */
.proces{ padding-block:clamp(5rem,12vh,9rem); }
.proces__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  flex-wrap:wrap; padding-bottom:clamp(2.5rem,6vh,4rem); border-bottom:1px solid var(--line); }
.proces__title{ font-size:clamp(1.8rem,4.5vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1; }

.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); }
.step{ padding:clamp(2rem,4vh,3.4rem) clamp(1.4rem,2.5vw,2.4rem) clamp(2rem,4vh,3.4rem) 0;
  border-right:1px solid var(--line); }
.step:last-child{ border-right:none; padding-right:0; }
.step:not(:first-child){ padding-left:clamp(1.4rem,2.5vw,2.4rem); }
.step__num{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem,5vw,4.2rem); color:var(--oxblood); line-height:1; display:block; margin-bottom:1.4rem;
}
.step h3{ font-size:1.32rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.7rem; }
.step p{ color:var(--ink-2); font-size:.98rem; line-height:1.55; max-width:34ch; }

/* ============ 04 · PROOF (dark) ============ */
.proof{ position:relative; background:var(--dark); color:var(--on-dark);
  padding-block:clamp(6rem,16vh,13rem); margin-top:clamp(3rem,8vh,6rem);
  border-radius:clamp(18px,2.5vw,34px); }
.proof .sec-label{ color:var(--on-dark-2); }
.proof__body{ }
.proof__kicker{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--on-dark-2); margin-bottom:1.2rem;
}
.meter{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:2.4rem; }
.meter__num{
  font-weight:900; font-size:clamp(5rem,20vw,17rem); line-height:.82; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums; display:flex; align-items:flex-start;
}
.meter__unit{ font-size:.24em; font-weight:700; color:var(--on-dark-2); margin-top:.9em; margin-left:.15em; letter-spacing:0; }
.meter__label{ font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2); }
.proof__sub{ max-width:52ch; font-size:clamp(1rem,1.5vw,1.24rem); line-height:1.6; color:var(--on-dark); }
.proof__sub strong{ color:#fff; font-weight:700; }
.proof__rule{ display:none; }

/* ============ 03 · USLUGE ============ */
.usluge{ padding-block:clamp(5rem,12vh,9rem); }
.usluge__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;
  padding-bottom:clamp(1.6rem,4vh,2.6rem); }
.usluge__title{ font-size:clamp(1.8rem,4.5vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1; }

.svc{ list-style:none; border-top:1px solid var(--line); }
.svc__row{ display:grid; grid-template-columns:auto minmax(8rem,1.2fr) minmax(0,1.9fr) auto;
  gap:clamp(1rem,3vw,3rem); align-items:center;
  padding:clamp(1.5rem,3.2vh,2.5rem) 0; border-bottom:1px solid var(--line); }
.svc__num{ font-family:var(--f-serif); font-style:italic; color:var(--oxblood);
  font-size:1.1rem; font-variant-numeric:tabular-nums; }
.svc__name{ font-size:clamp(1.4rem,2.6vw,2.15rem); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  transition:transform .5s var(--ease-out), color .4s var(--ease-out); }
.svc__desc{ color:var(--ink-2); font-size:.98rem; line-height:1.5; max-width:42ch; }
.svc__arrow{ color:var(--ink-3); display:inline-flex; justify-self:end;
  opacity:0; transform:translate(-8px,8px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), color .4s var(--ease-out); }
.svc__row:hover .svc__name{ transform:translateX(12px); color:var(--oxblood); }
.svc__row:hover .svc__arrow{ opacity:1; transform:none; color:var(--oxblood); }

/* ============ 06 · FAQ ============ */
.faq{ padding-block:clamp(5rem,12vh,9rem); }
.faq__title{ font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:800; letter-spacing:-.02em;
  line-height:1.06; margin-top:1.1rem; }
.faq__list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; padding:clamp(1.15rem,2.6vh,1.75rem) 0;
  font-size:clamp(1.08rem,1.8vw,1.4rem); font-weight:600; letter-spacing:-.01em;
  transition:color .3s var(--ease-out); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--oxblood); }
.qa__ico{ position:relative; flex:0 0 auto; width:18px; height:18px; }
.qa__ico::before,.qa__ico::after{ content:""; position:absolute; top:50%; left:50%;
  background:var(--oxblood); border-radius:2px; transform:translate(-50%,-50%);
  transition:transform .4s var(--ease-out); }
.qa__ico::before{ width:18px; height:2px; }
.qa__ico::after{ width:2px; height:18px; }
.qa[open] .qa__ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.qa__body p{ padding-bottom:clamp(1.15rem,2.6vh,1.75rem); max-width:62ch;
  color:var(--ink-2); font-size:1rem; line-height:1.62; }
.qa[open] .qa__body{ animation:qaOpen .45s var(--ease-out); }
@keyframes qaOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

@media (max-width:760px){
  .svc__row{ grid-template-columns:auto 1fr; column-gap:1rem; row-gap:.55rem; }
  .svc__num{ align-self:start; padding-top:.35rem; }
  .svc__name{ font-size:1.5rem; }
  .svc__desc{ grid-column:1 / -1; max-width:none; }
  .svc__arrow{ display:none; }
}

/* ============ 05 · CTA ============ */
.cta{ padding-block:clamp(6rem,16vh,13rem); }
.cta .sec-label{ margin-bottom:2rem; }
.cta__title{ font-weight:900; font-size:clamp(2.4rem,8.5vw,8rem); line-height:.95; letter-spacing:-.035em; }
.cta__title .line{ display:block; overflow:hidden; }
.cta__title .line--accent{ color:var(--oxblood); }
.cta__title .line--accent em{ font-family:var(--f-serif); font-weight:500; letter-spacing:-.01em; }

.cta__row{ margin-top:clamp(2.4rem,6vh,4rem); display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--ink); color:var(--paper);
  font-weight:700; font-size:1.02rem; padding:1.05rem 1.7rem; border-radius:100px;
  transition:.45s var(--ease-out); will-change:transform;
}
.btn svg{ transition:transform .45s var(--ease-out); }
.btn:hover{ background:var(--oxblood); transform:translateY(-3px); }
.btn:hover svg{ transform:translate(3px,-3px); }
.mail{ font-size:1.02rem; font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:.35s var(--ease-out); }
.mail:hover{ color:var(--oxblood); border-color:var(--oxblood); }

/* ============ FOOTER ============ */
.foot{ border-top:1px solid var(--line); padding-block:2.4rem; }
.foot__grid{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.foot__mark{ font-weight:800; font-size:1.02rem; letter-spacing:-.02em; }
.foot__mark .dot{ color:var(--oxblood); }
.foot__tag{ font-family:var(--f-serif); font-style:italic; color:var(--ink-2); font-size:1rem; }
.foot__meta{ font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; }

/* ============ reveal states (CSS transitions, JS toggles .in) ============ */
.js [data-reveal]{ opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].in{ opacity:1; transform:none; }

.js [data-step]{ opacity:0; transform:translateY(40px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-step].in{ opacity:1; transform:none; }

/* word split (hero + cta) */
.word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.04em; margin-bottom:-.04em; }
.word-in{ display:inline-block; }
.js [data-split] .word-in{ transform:translateY(110%);
  transition:transform 1s var(--ease-out); transition-delay:var(--d,0s); }
.js [data-split].in .word-in{ transform:none; }

/* line split for statement */
.rl-line{ display:block; overflow:hidden; }
.rl-inner{ display:block; }
.js [data-reveal-lines] .rl-inner{ transform:translateY(105%); opacity:0;
  transition:transform .95s var(--ease-out), opacity .95s var(--ease-out); transition-delay:var(--d,0s); }
.js [data-reveal-lines].in .rl-inner{ transform:none; opacity:1; }

/* hairline rules */
.js [data-rule]{ transition:transform 1.2s var(--ease-out); }
.js [data-rule].in{ transform:scaleX(1); }

/* safety / instant-reveal (watchdog, reduced motion, ?nomotion) — snaps, no transition */
.js.reveal-all [data-reveal], .js.reveal-all [data-step],
.js.reveal-all [data-split] .word-in, .js.reveal-all [data-reveal-lines] .rl-inner,
.js.reveal-all [data-rule]{ transition:none !important; }
.js.reveal-all [data-reveal], .js.reveal-all [data-step]{ opacity:1 !important; transform:none !important; }
.js.reveal-all [data-split] .word-in,
.js.reveal-all [data-reveal-lines] .rl-inner{ transform:none !important; opacity:1 !important; }
.js.reveal-all [data-rule]{ transform:scaleX(1) !important; }

/* ============ responsive ============ */
@media (max-width:900px){
  .nav__links{ display:none; }
  .grid{ grid-template-columns:1fr; gap:1.6rem; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--line); padding-left:0 !important;
    padding-block:2rem; }
  .step:last-child{ border-bottom:none; }
  .hero__foot{ align-items:flex-start; }
  .scrollcue{ flex-direction:row; align-items:center; }
  .scrollcue svg{ transform:rotate(-90deg); width:20px; }
}

@media (max-width:560px){
  .hero{ padding-top:6.5rem; }
  .hero__title{ line-height:.98; }
  .nav__cta span{ display:none; }
  .nav__cta{ padding:.5rem; }
  .cta__row{ gap:1.2rem; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}