/* ==========================================================================
   Žitopromet Kikinda — shared design system
   Linked from all 5 pages (index.html, 404.html, post-*.html). Page-specific
   CSS stays inline in each page's own <style> block — see CLAUDE.md
   "Architecture" for what lives where and why, and TOKENS.md for the full
   token inventory. Sections below are ordered roughly top-to-bottom as they
   appear on index.html; shared/global chrome (nav, buttons, motif, reveal
   utilities) comes first.
   ========================================================================== */

/* ---------- FONTS (self-hosted, SIL OFL — licence texts in fonts/OFL-*.txt) ----------
   Variable WOFF2 cut from the Google Fonts TTFs, subset to latin + latin-ext (Serbian č ć š ž đ).
   Inter: optical size pinned at 14 (exactly what the Google CSS API served before), weight 400–700;
   Inter italic: weight 400 only (the testimonial). Space Grotesk: weight 400–700.
   If a file is ever replaced, give it a new name (…-v2.woff2): .htaccess caches *.woff2 for a year.
   The "… Fallback" faces are Arial rescaled to the web font's metrics, so the swap from the system
   font to the web font doesn't shift the layout (they are the second name in every font stack). */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url(fonts/inter-var.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:italic; font-weight:400; font-display:swap;
    src:url(fonts/inter-italic-400.woff2) format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url(fonts/space-grotesk-var.woff2) format('woff2'); }
@font-face{ font-family:'Inter Fallback'; src:local('Arial');
    size-adjust:107.57%; ascent-override:90.06%; descent-override:22.42%; line-gap-override:0%; }
@font-face{ font-family:'Space Grotesk Fallback'; src:local('Arial');
    size-adjust:111.62%; ascent-override:88.15%; descent-override:26.16%; line-gap-override:0%; }

:root{
    /* ---- primitive tokens (raw values, no meaning attached) ---- */
    --green-deep:#0F2A14;
    --green:#316735;
    --green-mid:#3F7A3F;
    --gold:#FBD304;
    --gold-deep:#C9A400;
    --gold-soft:#F4DE7A;
    --cream:#F7F2E2;
    --paper:#FBF9F3;
    --ink:#1B2B1C;
    --ink-muted:#5B6B5C;
    --nav-h:80px;
    --maxw:1180px;

    --radius-sm:4px;
    --radius-md:8px;
    --radius-full:50%;

    --space-1:4px;   /* micro — tag/badge internal gaps */
    --space-2:8px;   /* compact — card-level heading→body */
    --space-3:12px;  /* standard — secondary paragraph after a heading */
    --space-4:16px;  /* major — section-head heading→body */

    --ease-standard:cubic-bezier(.22,.61,.36,1);   /* default motion curve — reveals, hovers, most transitions */
    --ease-bounce:cubic-bezier(.34,1.56,.64,1);    /* overshoot — .pop reveal, playful emphasis */
    --ease-sharp:cubic-bezier(.65,0,.28,1);        /* clip-path wipes */
    --ease-emphasized:cubic-bezier(.3,1,.8,1);     /* button fill sweep */

    --duration-fast:.25s;
    --duration-base:.35s;
    --duration-slow:.6s;
    --duration-slower:.8s;

    --z-base:0;
    --z-raised:1;
    --z-sticky:2;
    --z-overlay:200;
    --z-progress:300;
    --z-fab:150;

    /* ---- semantic tokens (purpose-named, built from primitives) ---- */
    --color-surface:var(--paper);
    --color-surface-alt:var(--cream);
    --color-text:var(--ink);
    --color-text-muted:var(--ink-muted);
    --color-accent:var(--gold);
    --color-accent-strong:var(--gold-deep);
    --color-brand:var(--green);
    --color-brand-strong:var(--green-deep);

    --overlay-ink-subtle:rgba(27,43,28,.08);   /* faint borders, card outlines */
    --overlay-ink-soft:rgba(27,43,28,.12);     /* default borders, dividers */
    --overlay-ink-strong:rgba(27,43,28,.25);   /* resting shadows */
    --overlay-brand-soft:rgba(49,103,53,.07);  /* decorative background washes */

    --danger:#B3261E;
    --color-danger:var(--danger);
    --danger-on-dark:#FFB4AB;
  }

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

html{scroll-behavior:smooth;}

.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; }

/* smooth cross-page transitions between same-origin pages (progressive enhancement — */
/* browsers without support just navigate normally, no JS needed) */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){
  animation-duration:.4s; animation-timing-function:var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

body{
    font-family:'Inter','Inter Fallback',sans-serif;
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
    position:relative;
  }

body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.025;
    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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(620px circle at -8% -8%, rgba(49,103,53,.07), transparent 62%),
      radial-gradient(720px circle at 108% 12%, rgba(49,103,53,.06), transparent 60%),
      radial-gradient(680px circle at -6% 82%, rgba(49,103,53,.06), transparent 60%),
      radial-gradient(640px circle at 106% 98%, rgba(49,103,53,.07), transparent 60%);
  }

img{ display:block; max-width:100%; }

a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px); position:relative; }

h1,h2{ font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-weight:700; letter-spacing:-.005em; color:var(--ink); text-wrap:balance; }

h3{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:700; letter-spacing:-.01em; color:var(--ink); }

.btn{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:14px 40px; font-size:.94rem; font-weight:600;
    color:var(--green-deep); background:var(--gold); border:none; border-radius:var(--radius-sm);
    cursor:pointer; text-decoration:none; overflow:hidden;
    transition:transform .35s var(--ease-standard), box-shadow .35s ease;
  }

.btn::before{
    content:""; position:absolute; top:0; left:-10%; width:120%; height:100%;
    background:var(--green); transform:skew(20deg) translate3d(-105%,0,0);
    transition:transform .45s var(--ease-emphasized); z-index:0;
  }

.btn span{ position:relative; z-index:1; transition:color .4s ease; }

.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(49,103,53,.35); }

.btn:hover::before{ transform:skew(20deg) translate3d(0,0,0); }

.btn:hover span{ color:var(--cream); }

.btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.btn-outline{ background:transparent; border:1.5px solid var(--green); color:var(--green); }

.btn-outline::before{ background:var(--green); }

.btn-outline:hover span{ color:var(--cream); }

.section-alt .btn-outline{ border-color:var(--gold-soft); color:var(--cream); }

.section-alt .btn-outline::before{ background:var(--gold); }

.section-alt .btn-outline:hover span{ color:var(--green-deep); }

/* ---------- BUTTON — icon-reveal (text/icon swap sides on hover) ---------- */
  .btn-reveal{
    position:relative; display:inline-flex; align-items:center;
    height:48px; padding:4px 56px 4px 24px; box-sizing:border-box;
    background:var(--gold); border-radius:var(--radius-md);
    font-size:.94rem; font-weight:600; color:var(--green-deep);
    text-decoration:none; cursor:pointer; overflow:hidden;
    transition:padding var(--duration-slow) var(--ease-standard);
  }

.btn-reveal:hover{ padding:4px 24px 4px 56px; }

.btn-reveal-text{ position:relative; z-index:1; }

.btn-reveal-icon{
    position:absolute; right:4px; top:4px;
    width:40px; height:40px; border-radius:var(--radius-md);
    background:var(--cream); color:var(--green-deep);
    display:flex; align-items:center; justify-content:center;
    transition:right var(--duration-slow) var(--ease-standard);
  }

.btn-reveal-icon svg{ width:16px; height:16px; stroke:currentColor; transition:transform var(--duration-slow) var(--ease-standard); }

.btn-reveal:hover .btn-reveal-icon{ right:calc(100% - 44px); }

.btn-reveal:hover .btn-reveal-icon svg{ transform:rotate(45deg); }

.btn-reveal:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* on the dark hero photo and the green contact banner the green ring disappears */
.hero .btn-reveal:focus-visible, .contact .btn-reveal:focus-visible{ outline-color:var(--cream); }

@media (prefers-reduced-motion:reduce){
    .btn-reveal, .btn-reveal-icon, .btn-reveal-icon svg, .btn-text, .btn-text svg{ transition:none; }
  }

/* ---------- reveal utilities ---------- */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-standard), transform .8s var(--ease-standard); }

.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-rotate{ opacity:0; transform:translateY(30px) rotate(-2deg); transition:opacity .8s var(--ease-standard), transform .8s var(--ease-standard); }

.reveal-rotate.in{ opacity:1; transform:translateY(0) rotate(0deg); }

.reveal-left{ opacity:0; transform:translateX(-36px); transition:opacity .8s var(--ease-standard), transform .8s var(--ease-standard); }

.reveal-left.in{ opacity:1; transform:translateX(0); }

.reveal-right{ opacity:0; transform:translateX(36px); transition:opacity .8s var(--ease-standard), transform .8s var(--ease-standard); }

.reveal-right.in{ opacity:1; transform:translateX(0); }

.clip-reveal{ clip-path:inset(0 0 0 100%); transition:clip-path 1.1s var(--ease-sharp); }

.clip-reveal.in{ clip-path:inset(0 0 0 0%); }

.clip-reveal-r{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease-sharp); }

.clip-reveal-r.in{ clip-path:inset(0 0% 0 0); }

.pop{ opacity:0; transform:scale(.9); transition:opacity .6s ease, transform .6s var(--ease-bounce); }

.pop.in{ opacity:1; transform:scale(1); }

@media (prefers-reduced-motion:reduce){
    .reveal,.reveal-rotate,.reveal-left,.reveal-right,.pop{ opacity:1 !important; transform:none !important; }
    .clip-reveal,.clip-reveal-r{ clip-path:inset(0) !important; }
  }

/* ---------- decorative wheat motif ---------- */
  .motif{ position:absolute; opacity:.055; stroke:var(--green); fill:none; stroke-width:1.1; pointer-events:none; z-index:0; }

.section-alt .motif{ stroke:var(--gold); opacity:.08; }

/* ---------- NAV — floating glass pill ---------- */
  nav{
    position:fixed; top:clamp(14px,2.2vw,24px); left:0; right:0;
    display:flex; justify-content:center; z-index:50;
    pointer-events:none;
  }

.nav-pill{
    position:relative;
    pointer-events:auto;
    display:flex; align-items:center; gap:clamp(24px,3.4vw,52px);
    background:rgba(15,42,20,.4); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid rgba(247,242,226,.2);
    border-radius:var(--radius-md); padding:10px clamp(22px,3.2vw,36px);
    box-shadow:0 6px 24px -8px rgba(15,42,20,.4);
    transition:background .4s ease, box-shadow .4s ease;
  }

nav.scrolled .nav-pill{ background:rgba(15,42,20,.8); box-shadow:0 8px 26px -8px rgba(15,42,20,.5); }

.brand{ display:flex; align-items:center; }

.brand img{ height:32px; width:auto; }

.nav-links{ display:flex; gap:clamp(16px,2.5vw,32px); list-style:none; }

.nav-links a{ color:var(--cream); opacity:.82; text-decoration:none; font-size:.88rem; font-weight:500; position:relative; padding-bottom:2px; transition:opacity .3s ease; }

.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0%; height:1px; background:var(--gold); transition:width .35s var(--ease-standard); }

.nav-links a:hover, .nav-links a.active{ opacity:1; }

.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-links a:focus-visible{ outline:1.5px solid var(--gold); outline-offset:4px; border-radius:2px; }

.nav-toggle{
    display:none; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; border:none; background:none; cursor:pointer; border-radius:var(--radius-sm);
  }

.nav-toggle svg{ width:22px; height:22px; stroke:var(--cream); }

.nav-toggle:focus-visible{ outline:1.5px solid var(--gold); outline-offset:2px; }

.nav-toggle .icon-close{ display:none; }

.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }

.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width:720px){
    .nav-toggle{ display:flex; }
    .nav-links{
      display:flex; flex-direction:column; gap:2px;
      position:absolute; top:calc(100% + 10px); left:0; right:0;
      background:var(--green-deep); border-radius:var(--radius-md);
      padding:10px; box-shadow:0 20px 40px -20px rgba(15,42,20,.5);
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s var(--duration-base);
    }
    .nav-links.open{
      opacity:1; visibility:visible; transform:translateY(0);
      transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
    }
    .nav-links a{ display:block; padding:14px; opacity:1; }
    .nav-links a::after{ display:none; }
    .nav-links a.active{ background:rgba(247,242,226,.1); border-radius:var(--radius-sm); }
  }

/* very narrow phones (320–360px): the pill's content is ~276px wide, so at 320 it touched both screen edges */
@media (max-width:360px){
    .nav-pill{ gap:14px; padding-left:16px; padding-right:16px; }
    .lang-switch{ padding-left:14px; }
  }

/* ---------- HERO — bottom-left, all Inter ---------- */
  .hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }

.hero-bg{ position:absolute; inset:0; z-index:1; transition:transform .6s var(--ease-standard); will-change:transform; }

/* the video moves by itself; the fixed 1.04 scale is only the bleed that the mouse/scroll parallax on .hero-bg needs */
.hero-bg video{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.04); }

/* the video sky is bright gold, so the text side needs a deeper scrim than the old photo did (cream text stays >=4.5:1 on every frame) */
.hero-scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(100deg, rgba(15,42,20,.92) 0%, rgba(15,42,20,.8) 36%, rgba(15,42,20,.26) 64%, rgba(15,42,20,.05) 100%); }

/* on phones the text spans the full width, so darken from the top down instead of left to right */
@media (max-width:720px){ .hero-scrim{ background:linear-gradient(180deg, rgba(15,42,20,.45) 0%, rgba(15,42,20,.72) 40%, rgba(15,42,20,.88) 100%); } }

.hero-content{ position:relative; z-index:3; padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,48px) clamp(56px,8vw,96px); max-width:660px; color:var(--cream); }

.hero .motif{ z-index:2; stroke:var(--gold-soft); opacity:.14; }

.hero .motif.motif-in{ opacity:.14; }

.eyebrow{ display:flex; align-items:center; gap:12px; font-size:.8rem; color:var(--gold-soft); letter-spacing:.08em; text-transform:uppercase; margin-top:0; margin-bottom:28px; opacity:0; transform:translateY(10px); animation:fadeUp .8s var(--ease-standard) .3s forwards; }

.eyebrow .dash{ width:26px; height:1px; background:var(--gold); display:inline-block; }

.hero-content h1{
    font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-weight:700; letter-spacing:-.005em;
    font-size:clamp(3.2rem,7.5vw,6.4rem); line-height:.98; color:var(--cream);
    opacity:0; transform:translateY(16px); animation:fadeUp .9s var(--ease-standard) .5s forwards;
  }

.hero-desc{ margin-top:22px; max-width:50ch; font-size:1.08rem; line-height:1.75; color:rgba(247,242,226,.85); opacity:0; transform:translateY(16px); animation:fadeUp .9s var(--ease-standard) .75s forwards; }

.hero-actions{ margin-top:32px; display:flex; align-items:center; gap:24px; opacity:0; transform:translateY(16px); animation:fadeUp .9s var(--ease-standard) .95s forwards; }

.location{ display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500; color:rgba(247,242,226,.78); flex-wrap:wrap; }

@media (max-width:720px){ .hero-actions{ flex-direction:column; align-items:flex-start; gap:16px; } }

/* phones: the full "Kikinda / date / time" line is too long, keep just "Kikinda / time" */
@media (max-width:720px){ .location .sep:first-of-type, #heroDate{ display:none; } }

.location svg{ width:14px; height:14px; stroke:var(--gold); flex-shrink:0; }

.location .sep{ color:rgba(247,242,226,.4); }

.live-clock{ display:inline-flex; align-items:center; gap:7px; }

.live-dot{ position:relative; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }

.live-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--gold); opacity:.55; animation:liveDotPulse 2.2s ease-in-out infinite; }

@keyframes liveDotPulse{ 0%{ transform:scale(.4); opacity:.55; } 70%{ transform:scale(1.7); opacity:0; } 100%{ transform:scale(1.7); opacity:0; } }

@media (prefers-reduced-motion:reduce){ .live-dot::after{ animation:none; opacity:0; } }

@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion:reduce){ .eyebrow,.hero-content h1,.hero-desc,.hero-actions{ animation:none; opacity:1; transform:none; } }

/* ---------- SECTION HEADERS ---------- */
  .section{ padding:clamp(56px,7vw,80px) 0; position:relative; overflow:hidden; }

.section-head{ max-width:640px; margin-bottom:clamp(48px,6vw,72px); position:relative; z-index:1; }

.section-head .kicker{ display:flex; align-items:center; gap:10px; font-size:.75rem; color:var(--green); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }

.section-head .kicker .dash{ width:22px; height:1px; background:var(--green); display:inline-block; }

.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.08; }

.section-head p{ margin-top:16px; color:var(--ink-muted); font-size:1.02rem; line-height:1.6; }

/* per-section .section-head spacing exceptions (scoped by section/parent, not inline) */
#o-nama .section-head{ margin-bottom:32px; }

#partneri .section-head{ margin-bottom:28px; }

.kulture-head .section-head{ margin-bottom:0; }

.section-alt{ background:var(--green-deep); color:var(--cream); }

.section-alt .section-head h2{ color:var(--cream); }

.section-alt .section-head p{ color:rgba(247,242,226,.72); }

.section-alt .section-head .kicker{ color:var(--gold-soft); }

.section-alt .section-head .kicker .dash{ background:var(--gold); }

/* ---------- PROIZVODNJA (services) — image+heading, then stat-style card row ---------- */
  .services-hero{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:center; position:relative; z-index:1; }

.services-hero-media{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3.4; }

.services-hero-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }

.services-hero-media:hover img{ transform:scale(1.05); }

.services-hero-text .kicker{ display:flex; align-items:center; gap:10px; font-size:.75rem; color:var(--green); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }

.services-hero-text .kicker .dash{ width:22px; height:1px; background:var(--green); display:inline-block; }

.services-hero-text h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.08; }

.services-hero-text p{ margin-top:16px; color:var(--ink-muted); font-size:1.02rem; line-height:1.65; max-width:46ch; }

.services-hero-text .btn, .services-hero-text .btn-reveal{ margin-top:28px; }

.btn-text{
    position:relative; display:inline-flex; align-items:center; overflow:hidden;
    margin-top:24px; padding:2px 22px 2px 0;
    color:var(--green); font-size:.92rem; font-weight:600; text-decoration:none;
    background:none; border:none; cursor:pointer;
    transition:padding var(--duration-slow) var(--ease-standard);
  }

.btn-text:hover{ padding:2px 0 2px 22px; }

.btn-text svg{
    position:absolute; right:3px; top:50%; width:15px; height:15px; stroke:currentColor;
    transform:translateY(-50%);
    transition:right var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
  }

.btn-text:hover svg{ right:calc(100% - 18px); transform:translateY(-50%) rotate(45deg); }

.btn-text:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }

.article-featured:focus-visible, .article-card:focus-visible{ outline:2px solid var(--green); outline-offset:4px; border-radius:var(--radius-md); }

.modal-close:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

.section-alt .btn-text{ color:var(--gold-soft); }

.stat-card-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(32px,4vw,48px); position:relative; z-index:1; }

.stat-card{
    background:var(--paper); border:1px solid var(--overlay-ink-subtle); border-radius:var(--radius-md);
    padding:clamp(22px,3vw,28px); min-height:250px; display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .4s var(--ease-standard), box-shadow .4s ease, border-color .4s ease;
  }

.stat-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -20px var(--overlay-ink-strong); border-color:rgba(49,103,53,.25); }

.sc-top{ display:flex; align-items:center; justify-content:space-between; }

.sc-icon{ width:46px; height:46px; border-radius:var(--radius-sm); background:rgba(49,103,53,.1); display:flex; align-items:center; justify-content:center; transition:background .4s ease, transform .4s ease; }

.stat-card:hover .sc-icon{ background:var(--green); transform:scale(1.06) rotate(-4deg); }

.sc-icon svg{ width:20px; height:20px; overflow:visible; }

.sc-icon svg path, .sc-icon svg circle{ stroke:var(--green); transition:stroke .4s ease; }

.stat-card:hover .sc-icon svg path, .stat-card:hover .sc-icon svg circle{ stroke:var(--gold); }

.sc-badge{ background:var(--paper); border:1px solid var(--overlay-ink-soft); border-radius:var(--radius-sm); padding:5px 10px; font-size:.75rem; font-weight:600; color:var(--ink-muted); letter-spacing:.03em; }

.sc-kicker{ font-size:.75rem; color:var(--green); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }

.stat-card h3{ font-size:1.25rem; font-weight:700; line-height:1.3; }

.sc-desc{
    font-size:.88rem; color:var(--ink-muted); line-height:1.55;
    max-height:0; opacity:0; margin-top:0; overflow:hidden; transform:translateY(6px);
    transition:max-height .45s var(--ease-standard), opacity .4s ease, margin-top .45s ease, transform .45s ease;
  }

.stat-card:hover .sc-desc{ max-height:100px; opacity:1; margin-top:8px; transform:translateY(0); }

@media (max-width:820px){
    .services-hero{ grid-template-columns:1fr; } .stat-card-row{ grid-template-columns:1fr; }
    .sc-desc{ max-height:none; opacity:1; margin-top:8px; transform:none; }
  }

/* ---------- TRI DECENIJE ---------- */
  .story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,72px); align-items:center; position:relative; z-index:1; }

.story-media{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3.1; margin-left:clamp(0px,-4vw,-32px); box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }

.story-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }

.story-media:hover img{ transform:scale(1.05); }

.story-text .kicker{ display:flex; align-items:center; gap:10px; font-size:.75rem; color:var(--gold); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }

.story-text .kicker .dash{ width:22px; height:1px; background:var(--gold); display:inline-block; }

.story-text h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); color:var(--cream); margin-bottom:22px; line-height:1.08; }

.story-text p{ color:rgba(247,242,226,.8); line-height:1.7; margin-bottom:16px; font-size:1.02rem; }

.story-text .btn{ margin-top:18px; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:clamp(48px,7vw,72px); border-top:1px solid rgba(247,242,226,.14); padding-top:clamp(36px,5vw,48px); position:relative; z-index:1; }

.stat{ text-align:left; }

.stat .num{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:700; font-size:clamp(2rem,4.2vw,3.1rem); color:var(--gold); line-height:1; }

.stat .label{ margin-top:8px; color:rgba(247,242,226,.72); font-size:.92rem; }

@media (max-width:820px){ .story{ grid-template-columns:1fr; } .story-media{ margin-left:0; } .stats{ grid-template-columns:repeat(2,1fr); gap:28px; } }

/* ---------- KULTURE — bento ---------- */
  .kulture-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; position:relative; z-index:1; }

.kulture-grid{
    display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,220px);
    gap:16px; margin-top:40px; position:relative; z-index:1;
  }

.k-wheat{ grid-column:1/3; grid-row:1/3; }

.k-corn{ grid-column:3/4; grid-row:1/2; }

.k-barley{ grid-column:4/5; grid-row:1/2; }

.k-beets{ grid-column:3/4; grid-row:2/3; }

.k-stat{ grid-column:4/5; grid-row:2/3; }

.k-sunflower{ grid-column:1/3; grid-row:3/4; }

.k-soy{ grid-column:3/5; grid-row:3/4; }

.kultura-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; }

.kultura-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-standard); }

.kultura-card:hover img{ transform:scale(1.08); }

.kultura-card .tag{ position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(180deg, transparent, rgba(15,42,20,.88)); }

.kultura-card .tag h3{ color:var(--cream); font-size:1.25rem; font-weight:700; }

.kultura-card .tag p{ color:rgba(247,242,226,.75); font-size:.85rem; font-weight:500; margin-top:4px; }

.k-wheat .tag h3{ font-size:1.6rem; }

.kultura-stat{ background:var(--green); border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); padding:16px; }

.kultura-stat .num{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:700; font-size:clamp(1.8rem,3.6vw,2.5rem); color:var(--gold); }

.kultura-stat .label{ margin-top:6px; font-size:.85rem; color:rgba(247,242,226,.85); }

@media (max-width:820px){
    .kulture-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,180px); }
    .k-wheat{ grid-column:1/3; grid-row:1/2; }
    .k-corn{ grid-column:1/2; grid-row:2/3; }
    .k-barley{ grid-column:2/3; grid-row:2/3; }
    .k-beets{ grid-column:1/2; grid-row:3/4; }
    .k-stat{ grid-column:2/3; grid-row:3/4; }
    .k-sunflower{ grid-column:1/3; grid-row:4/5; }
    .k-soy{ grid-column:1/3; grid-row:5/6; }
  }

.testi-card .who{ margin-top:48px; display:flex; align-items:center; gap:14px; }

.who .name{ font-weight:600; font-size:.85rem; }

/* ---------- ČLANCI — featured + list ---------- */
  .articles-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:40px; align-items:stretch; position:relative; z-index:1; }

.article-featured{
    text-decoration:none; display:flex; flex-direction:column; height:100%;
    background:var(--paper); border:1px solid var(--overlay-ink-subtle); border-radius:var(--radius-md); padding:18px;
  }

.article-featured .article-media{ flex:1; min-height:280px; }

.article-list{ display:flex; flex-direction:column; gap:16px; height:100%; }

.article-media{ position:relative; border-radius:var(--radius-md); overflow:hidden; }

.article-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.82); transition:transform .6s ease, filter .5s ease; }

.article-card:hover .article-media img, .article-featured:hover .article-media img{ transform:scale(1.06); filter:saturate(1) brightness(.72); }

.article-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(15,42,20,.55)); }

.article-featured h3{ margin-top:8px; font-size:1.35rem; font-weight:700; line-height:1.3; }

.article-featured p{ margin-top:12px; color:var(--ink-muted); font-size:.92rem; line-height:1.6; }

.article-featured .btn-text{ margin-top:12px; }

.article-list h3{ font-size:1.25rem; font-weight:700; line-height:1.3; }

@media (max-width:820px){ .articles-grid{ grid-template-columns:1fr; } }

/* tablet + mobile: the featured card drops its excerpt (desktop keeps it) */
@media (max-width:1024px){ .article-featured p{ display:none; } }

/* ---------- PARTNERI ---------- */
  .partners{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; position:relative; z-index:1; }

.partner-box{
    aspect-ratio:3/1.5; border:1px solid var(--overlay-ink-soft); border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center; padding:18px;
    transition:border-color .3s var(--ease-standard), transform .3s var(--ease-standard), background .3s var(--ease-standard);
    background:#fff;
  }

.partner-box img{
    max-width:100%; max-height:100%; object-fit:contain;
    filter:grayscale(1) opacity(.55);
    transition:filter .4s var(--ease-standard);
  }

.partner-box:hover img{ filter:grayscale(0) opacity(1); }

.partner-box:nth-child(2){ transform:translateY(14px); }

.partner-box:nth-child(4){ transform:translateY(14px); }

.partner-box:hover{ border-color:var(--gold-deep); background:#fff; transform:translateY(4px) scale(1.03); box-shadow:0 14px 28px -16px rgba(27,43,28,.25); }

@media (max-width:720px){ .partners{ grid-template-columns:repeat(2,1fr); } .partner-box:nth-child(2), .partner-box:nth-child(4){ transform:none; } }

.contact-bg img{ width:100%; height:100%; object-fit:cover; }

.contact::before{
    content:""; position:absolute; inset:0; opacity:.08; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 85 C42 60 48 40 45 10' stroke='%23F7F2E2' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-size:90px 90px;
  }

.contact::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(15,42,20,.94) 0%, rgba(15,42,20,.8) 45%, rgba(49,103,53,.65) 100%);
  }

.contact > *{ position:relative; z-index:2; }

.contact h2{ color:var(--cream); font-size:clamp(1.9rem,3.4vw,2.7rem); max-width:520px; }

.contact p{ margin-top:12px; color:rgba(247,242,226,.8); max-width:480px; line-height:1.6; font-size:.92rem; }

.contact-badge{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500; color:rgba(247,242,226,.75); }

.contact-badge svg{ width:14px; height:14px; stroke:var(--gold); }

footer{ position:relative; overflow:hidden; padding:32px clamp(20px,5vw,48px); text-align:center; color:var(--ink-muted); font-size:.85rem; }

footer p{ position:relative; z-index:1; }

.magnetic{ will-change:transform; }

.motif{ transition:opacity 1.2s ease, transform 1.2s var(--ease-standard); }

.motif.motif-in{ opacity:.055; }

.section-alt .motif.motif-in{ opacity:.08; }

.badge-cluster{ position:absolute; inset:0; pointer-events:none; z-index:2; }

.float-badge{
    position:absolute; background:var(--paper); color:var(--ink);
    border-radius:var(--radius-md); padding:10px 14px; box-shadow:0 14px 30px -10px rgba(0,0,0,.35);
    font-size:.82rem; font-weight:600; display:flex; align-items:baseline; gap:6px;
    opacity:0; transform:scale(.6) translateY(14px);
    transition:opacity .55s var(--ease-bounce), transform .55s var(--ease-bounce);
  }

.float-badge.in{ opacity:1; transform:scale(1) translateY(0); }

.float-badge .fb-num{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:700; color:var(--green); font-size:1.05rem; }

.fb-1{ top:-14px; left:-14px; }

.fb-2{ bottom:22%; right:-18px; }

.fb-3{ bottom:-16px; left:18%; }

@media (max-width:820px){ .badge-cluster{ display:none; } }



/* numbered editorial list (services) */
  .service-list{ display:flex; flex-direction:column; }

.service-row{
    display:grid; grid-template-columns:80px 1fr; gap:24px;
    padding:34px 0; border-top:1px solid var(--overlay-ink-soft);
    transition:padding-left .5s var(--ease-standard);
  }

.service-row:last-child{ border-bottom:1px solid var(--overlay-ink-soft); }

.service-row:hover{ padding-left:10px; }

.service-num{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:700; font-size:1.4rem; color:var(--gold-deep); }

.service-row h3{ font-size:1.25rem; font-weight:500; }

.service-row p{ margin-top:8px; font-size:.95rem; color:var(--ink-muted); line-height:1.6; max-width:48ch; }

/* ---------- KULTURE — flat accordion, matches card system ---------- */
  .hx-wrap{
    display:flex; flex-direction:column; height:560px;
    gap:10px; margin-top:40px; position:relative; z-index:1;
  }

.hx-row{
    position:relative; flex:1 1 0; min-height:70px; overflow:hidden; cursor:pointer;
    background:var(--paper); border:1px solid var(--overlay-ink-subtle); border-radius:var(--radius-md);
    transition:flex-grow .55s var(--ease-standard), box-shadow .45s ease, border-color .45s ease;
  }

.hx-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding:14px clamp(18px,3vw,26px); gap:8px; color:var(--ink); transition:padding .55s var(--ease-standard); }

.hx-head{ display:flex; align-items:center; gap:18px; width:100%; }

.hx-icon{ width:42px; height:42px; min-width:42px; border-radius:var(--radius-sm); background:rgba(49,103,53,.1); display:flex; align-items:center; justify-content:center; transition:background .45s ease, transform .45s var(--ease-standard); }

.hx-icon svg{ width:20px; height:20px; overflow:visible; }

.hx-icon svg path, .hx-icon svg circle, .hx-icon svg ellipse{ stroke:var(--green); transition:stroke .4s ease; }

.hx-badge{ margin-left:auto; background:var(--paper); border:1px solid var(--overlay-ink-soft); border-radius:var(--radius-sm); padding:5px 10px; font-size:.75rem; font-weight:600; color:var(--ink-muted); letter-spacing:.03em; }

.hx-chevron{ display:flex; align-items:center; justify-content:center; color:var(--ink-muted); transition:transform .45s var(--ease-standard), color .3s ease; }

.hx-chevron svg{ width:16px; height:16px; stroke:currentColor; }

.hx-row:hover .hx-chevron, .hx-row.active .hx-chevron{ transform:rotate(180deg); color:var(--green); }

@media (prefers-reduced-motion:reduce){ .hx-chevron{ transition:color .3s ease; } }

.hx-desc{
    font-size:.92rem; line-height:1.6; color:var(--ink-muted); width:100%; max-width:none;
    max-height:0; opacity:0; margin-top:0; overflow:hidden;
    transition:max-height .5s var(--ease-standard) .12s, opacity .4s ease .22s, margin-top .5s var(--ease-standard) .12s;
  }

@media (max-width:720px){
    .hx-wrap{ height:auto; }
    .hx-row{ flex:none !important; }
    .hx-desc{ opacity:1 !important; max-height:none !important; margin-top:8px !important; font-size:.88rem; }
  }

/* touch-primary devices (tablets etc.) have no hover at any viewport width — show
   descriptions without requiring the click/tap that opens .active, not just <720px */
@media (any-hover:none){
    .hx-desc{ opacity:1 !important; max-height:none !important; margin-top:8px !important; }
    .hx-chevron{ transform:rotate(180deg); color:var(--green); }
  }

/* ---------- HERO STRIP — scrolling crop marquee (links to Kulture accordion) ---------- */
  .hero-strip{
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    overflow:hidden; padding:18px 0;
    background:linear-gradient(180deg, transparent, rgba(15,42,20,.55));
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

.hero-strip-track{ display:flex; gap:14px; width:max-content; animation:marquee 34s linear infinite; }

.hero-strip:hover .hero-strip-track{ animation-play-state:paused; }

.hs-chip{
    display:flex; align-items:center; gap:10px; background:rgba(15,42,20,.28);
    border:1px solid rgba(247,242,226,.22); backdrop-filter:blur(6px);
    border-radius:var(--radius-sm); padding:6px 16px 6px 6px; white-space:nowrap;
    text-decoration:none; cursor:pointer; transition:background .25s ease, border-color .25s ease;
  }

.hs-chip:hover, .hs-chip:focus-visible{ background:rgba(15,42,20,.5); border-color:rgba(247,242,226,.4); }

.hs-chip:focus-visible{ outline:1.5px solid var(--gold); outline-offset:2px; }

.hs-chip img{ width:34px; height:34px; border-radius:var(--radius-full); object-fit:cover; }

.hs-chip span{ color:var(--cream); font-size:.86rem; font-weight:500; }

@keyframes marquee{ to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion:reduce){ .hero-strip-track{ animation:none; } }

/* ---------- STATS — number-card row (homepage counters, right after hero) ---------- */
  .num-card-section{ background:var(--paper); padding:clamp(56px,7vw,80px) 0; }

.num-card-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

.num-card{
    background:#fff; border:1px solid var(--overlay-ink-subtle); border-radius:var(--radius-md);
    padding:clamp(22px,2.6vw,28px); min-height:180px; display:flex; flex-direction:column; justify-content:space-between;
  }

.num-card .nc-num{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:700; color:var(--green); font-size:clamp(1.8rem,3vw,2.3rem); line-height:1; display:block; font-variant-numeric:tabular-nums; }

.num-card .nc-num.num-landed{ animation:numLand var(--duration-base) var(--ease-bounce); }

@keyframes numLand{ 0%{ transform:scale(1); } 40%{ transform:scale(1.08); } 100%{ transform:scale(1); } }

@media (prefers-reduced-motion:reduce){ .num-card .nc-num.num-landed{ animation:none; } }

.num-card .nc-label{ margin-top:8px; font-size:.92rem; font-weight:500; color:var(--ink); line-height:1.35; }

.num-card .nc-divider{ margin:18px 0 14px; border:none; border-top:1px dashed rgba(27,43,28,.22); }

.num-card p{ font-size:.92rem; font-weight:400; color:var(--ink-muted); line-height:1.55; }

@media (max-width:820px){ .num-card-row{ grid-template-columns:repeat(2,1fr); } }

@media (max-width:520px){ .num-card-row{ grid-template-columns:1fr; } }

/* ---------- ČLANCI — shared meta line (category · date), used by both card types above ---------- */
  .article-meta{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-muted); margin-top:14px; }

.article-meta .dot{ width:3px; height:3px; border-radius:var(--radius-full); background:var(--ink-muted); display:inline-block; }

.article-featured .article-meta{ margin-top:16px; }

/* ---------- TESTIMONIAL ---------- */
  .testi-card{
    display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4.5vw,52px); align-items:center;
    max-width:820px; margin:0 auto; text-align:left; position:relative; z-index:1;
  }

.testi-kicker{
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    font-size:.75rem; color:var(--green); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:14px;
  }

.testi-kicker .dash{ width:22px; height:1px; background:var(--green); display:inline-block; }

.testi-avatar{
    width:100px; height:100px; border-radius:var(--radius-full); overflow:hidden;
    border:2px solid var(--green); flex-shrink:0;
  }

.testi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:720px){
    .testi-card{ grid-template-columns:1fr; text-align:center; }
    .testi-kicker{ justify-content:center; }
    .testi-avatar{ margin:0 auto; }
  }

/* ---------- LANGUAGE SWITCHER (nav, wired up via initLangSwitcher() in script.js) ---------- */
  .lang-switch{ display:flex; align-items:center; gap:8px; padding-left:clamp(16px,2.5vw,28px); border-left:1px solid rgba(247,242,226,.2); }

.lang-switch svg{ width:16px; height:16px; stroke:var(--cream); opacity:.75; flex-shrink:0; }

.lang-switch .lang-opts{ display:flex; align-items:center; gap:4px; background:rgba(247,242,226,.1); border-radius:var(--radius-sm); padding:3px; }

.lang-btn{
    border:none; background:transparent; color:var(--cream); opacity:.6;
    font-family:'Inter','Inter Fallback',sans-serif; font-size:.78rem; font-weight:600;
    padding:10px 12px; min-width:44px; min-height:44px; border-radius:var(--radius-sm); cursor:pointer; transition:opacity .25s ease, background .25s ease;
  }

.lang-btn.active{ opacity:1; background:rgba(247,242,226,.18); }

.lang-btn:hover{ opacity:1; }

.lang-btn:focus-visible{ outline:1.5px solid var(--gold); outline-offset:2px; }

/* ---------- TRI DECENIJE — mirrored variant of the PROIZVODNJA image+heading layout ---------- */
  .story-swap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,64px); align-items:center; position:relative; z-index:1; }

.story-swap .services-hero-text{ order:1; position:relative; }

.story-swap .services-hero-media{ order:2; }

.story-year{
    position:absolute; top:-.6em; left:-.05em; z-index:-1;
    font-family:'Inter','Inter Fallback',sans-serif; font-weight:700;
    font-size:clamp(5rem,11vw,9rem); color:rgba(49,103,53,.07);
    line-height:1; user-select:none; pointer-events:none;
  }

@media (max-width:820px){ .story-swap{ grid-template-columns:1fr; } .story-swap .services-hero-text{ order:1; } .story-swap .services-hero-media{ order:2; } }

/* ---------- IZAZOVI / CHALLENGE — full-bleed photo with glass-card overlay ---------- */
  .challenge-wrap{
    position:relative; z-index:1; border-radius:var(--radius-md); overflow:hidden;
    height:clamp(620px,68vw,760px);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:clamp(16px,2.5vw,28px); gap:16px;
  }

.challenge-bg{ position:absolute; inset:0; z-index:0; }

.challenge-bg img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }

.challenge-wrap:hover .challenge-bg img{ transform:scale(1.04); }

.challenge-cards{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.challenge-cards.single{ grid-template-columns:1fr; }

.challenge-card{ background:rgba(255,255,255,.8); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border-radius:var(--radius-md); padding:clamp(18px,2.2vw,24px); box-shadow:0 20px 40px -20px rgba(27,43,28,.35); }

.challenge-card .sc-icon{ margin-bottom:12px; }

.challenge-card h3{ font-size:1.25rem; font-weight:700; line-height:1.3; }

.challenge-card p{ margin-top:8px; font-size:.92rem; font-weight:400; color:var(--ink-muted); line-height:1.6; }

.challenge-why{ position:relative; z-index:1; background:rgba(255,255,255,.8); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border-radius:var(--radius-md); padding:clamp(22px,2.8vw,30px); box-shadow:0 20px 40px -20px rgba(27,43,28,.35); }

.challenge-why h3{ font-size:1.2rem; font-weight:700; }

.challenge-why p{ margin-top:12px; font-size:.92rem; color:var(--ink-muted); line-height:1.6; }

@media (max-width:720px){
    .challenge-wrap{ height:auto; padding:16px; }
    .challenge-cards{ grid-template-columns:1fr; }
  }

.challenge-why .sc-icon{ margin-bottom:14px; }

.challenge-panels{ display:grid; grid-template-columns:1fr 1fr; gap:24px; position:relative; z-index:1; }

.challenge-card ul{ margin-top:8px; padding-left:18px; }

.challenge-card ul li{ font-size:.9rem; color:var(--ink-muted); line-height:1.6; margin-bottom:4px; }

@media (max-width:900px){ .challenge-panels{ grid-template-columns:1fr; } }

.challenge-card .sc-kicker, .challenge-why .sc-kicker{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--overlay-ink-strong); }

.challenge-card-dark{ background:rgba(15,42,20,.88); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); }

.challenge-card-dark .sc-kicker{ color:var(--gold-soft); border-bottom-color:rgba(247,242,226,.22); }

.challenge-card-dark h3{ color:var(--cream); }

.challenge-card-dark p{ color:rgba(247,242,226,.8); }

.challenge-card-dark ul li{ color:rgba(247,242,226,.8); }

/* ---------- KONTAKT — info row (Telefon / Email / Adresa) ---------- */
  .contact-info-item{
    display:flex; align-items:center; gap:12px;
    padding:10px clamp(16px,2.5vw,28px);
    border-left:1px solid rgba(247,242,226,.18);
  }

.contact-info-item:first-child{ border-left:none; padding-left:0; }

.contact-info-item .cii-icon{
    width:38px; height:38px; min-width:38px; border-radius:var(--radius-sm);
    background:rgba(247,242,226,.12); display:flex; align-items:center; justify-content:center;
  }

.contact-info-item .cii-icon svg{ width:17px; height:17px; stroke:var(--cream); }

.contact-info-item .cii-label{ font-size:.75rem; color:rgba(247,242,226,.65); text-transform:uppercase; letter-spacing:.06em; }

.contact-info-item .cii-value{ font-size:.92rem; font-weight:600; color:var(--cream); margin-top:2px; }

.contact-info-item .cii-value a{ position:relative; text-decoration:none; border-bottom:1px solid rgba(247,242,226,.35); transition:border-color .25s var(--ease-standard); }

.contact-info-item .cii-value a:hover{ border-bottom-color:var(--gold); }

/* invisible hit area: the links are 19px tall, phones need ~44px (tap-to-call is the conversion path) */
.contact-info-item .cii-value a::after{ content:""; position:absolute; inset:-13px -8px; }

.contact-info-item .cii-value a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

@media (max-width:720px){
    .contact-info-row{ flex-direction:column; }
    .contact-info-item{ border-left:none; border-top:1px solid rgba(247,242,226,.18); padding:16px 0 0; }
    .contact-info-item:first-child{ border-top:none; padding-top:0; }
  }

/* ---------- BACK TO TOP — floating action button (identical markup on all 5 pages) ---------- */
  .back-to-top-wrap{ position:fixed; right:20px; bottom:20px; z-index:var(--z-fab); margin:0; padding:0; }

.back-to-top-btn{
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:var(--radius-full);
    background-color:var(--green); border:none; cursor:pointer;
    box-shadow:0 10px 24px -6px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s var(--ease-standard), transform .3s var(--ease-standard), visibility .3s ease;
    padding:0; margin:0;
  }

.back-to-top-btn svg{ display:block; stroke:var(--gold); }

#backToTopBtn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- BROWSER SURFACES (themed from the palette) ---------- */
::selection{ background:var(--gold); color:var(--green-deep); }

html{ scrollbar-color:rgba(49,103,53,.55) transparent; }