/* =======================================================
   Zyphera Studios — style.css (clean)
   Purple neon + glassmorphism
   ======================================================= */

/* ---------- Theme vars ---------- */
:root{
  --bg:#0b0911;
  --bg-deep:#06050a;
  --surface:#151126;
  --surface-2:#1b1530;
  --text:#efeaff;
  --muted:#bcb3e8;
  --primary:#8b5cf6;
  --primary-2:#7c3aed;
  --accent:#a78bfa;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15);
  --font-base: 'Quicksand', sans-serif;

    --sb-size: 10px;
  --sb-track: rgba(255,255,255,.06);
  --sb-thumb: rgba(139,92,246,.65);
  --sb-thumb-hover: rgba(167,139,250,.9);
  --sb-thumb-border: rgba(15,12,24,.95);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;   
  scrollbar-width: thin;                    /* thin | auto */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-gutter: stable both-edges; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  scroll-snap-type:y mandatory; /* jedan skrol = jedna sekcija */
  overflow-y:scroll;
}
a{color:inherit; text-decoration:none}
.container{width:min(1120px,92%); margin-inline:auto}
.snap{min-height:100vh; display:flex; scroll-snap-align:start}

/* ---------- Fonts ---------- */

body,
p, li,
.mini, .chip,
.foot-note,
.work-card figcaption,
.card p, .feature p {
  font-family:var(--font-base);
  font-weight:400; line-height:1.7;
}

h1,h2,h3,h4,h5,h6,
.section-head h2,
.feature h3, .card h3,
.brand-text, .nav a,
.pill, .hero-cats a {
  font-family:var(--font-base);
  font-weight:700; letter-spacing:.2px;
}

/* =======================================================
   Scrollbar
   ======================================================= */

/* WebKit (Chrome/Edge/Safari) – globalno */
*::-webkit-scrollbar{
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid var(--sb-thumb-border); /* “kanal” oko palca */
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}

/* ==============================================
   Fini tonovi za specifične dijelove
   ============================================== */

/* Dropdown lista (select) – malo uži */
.cs-list{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
.cs-list::-webkit-scrollbar{ width: 10px; height: 10px; }
.cs-list::-webkit-scrollbar-thumb{
  border: 2px solid transparent;
  background: var(--sb-thumb);
}

/* Horizontalni scroller u “Services” karticama */
.cards-scroller{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
.cards-scroller::-webkit-scrollbar{ height: 10px; }
.cards-scroller::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border: 2px solid var(--sb-thumb-border);
  border-radius: 999px;
}


/* =======================================================
   Header 
   ======================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  backdrop-filter:blur(12px) saturate(150%);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
  text-transform: uppercase;
}
.site-header.solid{
  background:linear-gradient(180deg,rgba(11,9,17,.85),rgba(11,9,17,.55) 55%,rgba(11,9,17,.25));
  border-bottom-color:rgba(167,139,250,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* nav-wrap je i .container → ovime pregazimo globalna ograničenja */
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  width:100%;
  max-width:none;
  margin:0;                          /* nema centriranja */
  padding-inline:clamp(14px,4vw,32px); /* lijevi/desni odmak */
}

/* Logo & brand */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300; /* Light */
  text-decoration: none;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.brand-text {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: #ffffff;
  letter-spacing: 0.6px;
  font-weight: 300; /* Quicksand Light */
  transition: color 0.3s ease;
}

/* Separator */
.brand-text .sep1 {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  font-size: 1rem;
}

/* Hover efekti */
.brand:hover .brand-logo {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.7));
}

.brand:hover .brand-text {
  color: #c4b5fd; /* svjetlija ljubičasta */
}

.nav{
  display:flex; gap:1rem; align-items:center;
  margin-left:auto;                   /* gurni meni skroz desno */
}
.nav a{ padding:.6rem .9rem; border-radius:10px; color:var(--muted); transition:.2s; }
.nav a:hover{ color:var(--text); background:rgba(139,92,246,.12); }
.nav .cta{ border:1px solid var(--primary); }
.nav .cta:hover{ background:rgba(139,92,246,.12); }




/* =======================================================
   Mega-hero 
   ======================================================= */
.mega-hero{
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(1100px 600px at 15% 20%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(139,92,246,.10), transparent 70%),
    var(--bg-deep);
  padding-top:72px; /* prostor za fiksni header */
}
.bg-glow{position:absolute; inset:0; pointer-events:none}
.bg-glow .glow{
  position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  filter:blur(42px); opacity:.28; mix-blend-mode:screen;
  animation:float 14s ease-in-out infinite;
}
.bg-glow .g1{background:#7c3aed; top:10%; left:8%}
.bg-glow .g2{background:#a78bfa; bottom:12%; right:12%; animation-delay:-5s}
@keyframes float{0%,100%{transform:translate(0)} 50%{transform:translate(8px,-12px)}}

/* Centrirani sadržaj u heroju */
.hero-center{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; transform: translateY(-20px);
}

/* ===== Lockup: logo + divider + subtitle ===== */
.hero-lockup{
  margin:0 auto;
  width:clamp(300px, 60vw, 980px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hero-logo{
  width:100%; height:auto; display:block; object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  filter:
    drop-shadow(0 2px 12px rgba(139,92,246,.45))
    drop-shadow(0 0 32px rgba(124,58,237,.35))
    drop-shadow(0 0 70px rgba(167,139,250,.32));
}
.hero-divider{
  width:min(86%,760px); height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 8px rgba(167,139,250,.75), 0 0 16px rgba(124,58,237,.45);
  opacity:.9;
}
.hero-sub{
  margin:0;
  letter-spacing:.9ch; font-weight:700; color:#dcd4ff;
  font-family:var(--font-base);
  text-shadow:0 2px 8px rgba(124,58,237,.35), 0 0 18px rgba(167,139,250,.28);
  transform:translateY(2px);
}

/* ===== Kategorije: linkovi (bez gum/pill stila) ===== */
.hero-cats{
  display:flex; align-items:center; justify-content:center; text-transform: uppercase;
  gap:22px; flex-wrap:wrap; margin-top:0; transform: translateY(-60px);
}
.mega-hero .hero-cats a{
  padding:0; border:none; border-radius:0; background:transparent;
  color:var(--muted);
  font-family:var(--font-base); font-weight:700; letter-spacing:.2px;
  position:relative; transition:color .2s ease, transform .2s ease;
}
.mega-hero .hero-cats a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:999px;
  transform:scaleX(.6);
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 8px rgba(167,139,250,.7);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.mega-hero .hero-cats a:hover{ color:var(--text); transform:translateY(-1px); }
.mega-hero .hero-cats a:hover::after{ opacity:.9; transform:scaleX(1); }
.mega-hero .hero-cats .sep{ opacity:.28; color:#cfc7ff; user-select:none; transform:translateY(-1px); }


/* =======================================================
   Sections (generic)
   ======================================================= */
.section{
  width:100%;
  display:flex;
  align-items:center;                     /* vertikalno centrirano */
  padding:clamp(120px,16vh,220px) 0;      /* ugodan razmak gore/dolje */
}
.section .container{
  width:min(1040px,90%);
  margin-inline:auto;
  position:relative;
}

/* Head blok (naslov + opis + linije) */
.section-head{
  text-align:center;
  position:relative;
  margin:0 auto clamp(48px,6vh,72px);
}
.section-head h2{
  position:relative;
  display:inline-block;                   /* zbog preciznog centriranja crtice */
  margin:0 0 clamp(10px,1.8vh,16px);
  font-size:clamp(28px,3vw,40px);
  text-transform: uppercase;
}
.section-head p{
  margin-top:clamp(10px,1.5vh,14px);
  margin-bottom:0;
}

/* glow iza naslova */
.section-head::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:-40px; width:520px; height:220px;
  background:radial-gradient(300px 120px at 50% 40%, rgba(124,58,237,.18), transparent 70%);
  filter:blur(10px); pointer-events:none;
}

/* shimmer linija ispod opisa */
.section-head::after{
  content:"";
  display:block;
  width:min(760px,92%);
  height:2px;
  margin:18px auto 0;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(167,139,250,0) 0%,
      rgba(167,139,250,.35) 15%,
      rgba(255,255,255,.65) 50%,
      rgba(167,139,250,.35) 85%,
      rgba(167,139,250,0) 100%);
  background-size:200% 100%;
  animation:zy-shimmer 3.4s ease-in-out infinite;
  opacity:.75;
}
@keyframes zy-shimmer{0%{background-position:0% 50%;opacity:.55}50%{background-position:100% 50%;opacity:.85}100%{background-position:0% 50%;opacity:.55}}

/* neon crtica ispod naslova (precizno centrirana ispod teksta) */
.section-head h2::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-55%);
  bottom:-14px;
  width:110px; height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 10px rgba(167,139,250,.9), 0 0 24px rgba(124,58,237,.6);
}

/* =======================================================
   About — feature grid (radi za sve sekcije koje ga koriste)
   ======================================================= */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,minmax(260px,1fr));
  gap:clamp(18px,2.2vh,28px); align-items:stretch;
}
.feature{
  position:relative; display:grid; grid-template-columns:56px 1fr; grid-auto-rows:min-content;
  column-gap:14px; row-gap:10px; padding:24px;
  background:linear-gradient(160deg,rgba(139,92,246,.1),rgba(255,255,255,.02));
  border:1px solid rgba(167,139,250,.2); border-radius:18px; box-shadow:var(--shadow);
  transition:.25s transform,.25s box-shadow,.25s background-color; overflow:hidden;
}
.feature::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 300px at -10% -10%, rgba(167,139,250,.2), transparent 60%);
  opacity:.4; transition:opacity .25s;
}
.feature:hover{transform:translateY(-6px)}
.feature:hover::before{opacity:.7}
.icon-wrap{
  grid-column:1; grid-row:1; width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center; align-self:center;
  color:var(--accent); background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.22);
}
.feature h3{grid-column:2; grid-row:1; align-self:center; margin:0}
.feature p{grid-column:1 / -1; grid-row:2; margin:0; color:var(--muted); line-height:1.65}

/* =======================================================
   Services — base kartice (koristi se i drugdje)
   ======================================================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
  position:relative; padding:22px; border-radius:18px;
  background:linear-gradient(180deg,rgba(124,58,237,.10),rgba(255,255,255,.02));
  border:1px solid rgba(167,139,250,.20); box-shadow:var(--shadow);
  transition:.25s transform,.25s box-shadow,.25s background-color,border-color .25s; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:18px;
  background:linear-gradient(135deg,rgba(167,139,250,0),rgba(167,139,250,.15),rgba(124,58,237,0));
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; pointer-events:none;
}
.card:hover{ transform:translateY(-8px); border-color:rgba(167,139,250,.35); }
.pill{
  font-size:12px; text-transform:uppercase; font-weight:700; letter-spacing:.3px;
  display:inline-block; margin-bottom:10px; padding:.35rem .6rem; border-radius:999px;
  background:rgba(124,58,237,.18); border:1px solid rgba(167,139,250,.35); color:var(--accent);
}
.card h3{ margin:.2rem 0; }
.card p{ color:var(--muted); }
.chip-list{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:10px; padding:0; list-style:none; }
.chip{ padding:.35rem .55rem; border-radius:10px; border:1px solid rgba(167,139,250,.25); color:var(--muted); background:rgba(167,139,250,.10); font-size:13px; }

/* =======================================================
   USLUGE — override: 3 po stranici (1–3 | 4–6), strelice, fade
   ======================================================= */

/* malo širi container samo za Usluge */
#services .container{ width:min(1300px,94%); }

/* ===== Hover efekt za kartice ===== */
#services .card{
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
}
#services .card:hover{
  transform: translateY(5px) scale(1.02);
  box-shadow: 0 12px 32px rgba(139,92,246,.35), 0 0 20px rgba(124,58,237,.25);
  border-color: rgba(167,139,250,.45);
}

/* Fix za pill (kategoriju) da ostane kao prije */
#services .card .pill{
  align-self: flex-start; ;   
  width: auto;             
}


/* ===== Naslovi unutar kartica ===== */
#services .card h3{
  position: relative;
  text-align: center;         /* centriran */
  margin: 0 0 22px;           /* razmak ispod */
  font-size: 1.4rem;          /* malo veći font od default */
  color: var(--text);
}

/* linija ispod naslova */
#services .card h3::after{
  content:"";
  display:block;
  width: 150px;                /* širina crtice */
  height: 2px;
  margin: 6px auto 0;         /* centriraj ispod teksta */
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(167,139,250,.8), 0 0 18px rgba(124,58,237,.6);
}

/* Tekst raste normalno */
#services .card p{
  flex: 0 0 auto;
}

/* Lista tagova ide dolje */
#services .chip-list{
  margin-top: auto;   /* gura na dno kartice */
  padding-top: 10px;  /* mali razmak od teksta */
}


/* wrap i scroller */
#services .cards-wrap{
  position:relative;
  margin:0;
  padding:0;
  padding-left: 78px;  
  padding-right: 78px;
  overflow: visible;
}
#services .cards-scroller{
  position:relative;
  overflow:hidden;                      
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding-inline:10px;                   /* čuva lijevi/desni border (uklj. Fivem) */
}

/* fade rubovi lijevo/desno (ispod kartica) */
#services .cards-scroller::before,
#services .cards-scroller::after{
  content:"";
  position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;
}
#services .cards-scroller::before{
  left:0;  background:linear-gradient(90deg, var(--bg) 0%, rgba(11,9,17,0) 100%);
}
#services .cards-scroller::after{
  right:0; background:linear-gradient(270deg, var(--bg) 0%, rgba(11,9,17,0) 100%);
}

/* rail s karticama – nadjača globalni grid */
#services .cards{
  --gap:28px;
  display:flex !important;
  gap:var(--gap);
  padding:4px 0 12px;
  margin:0;
  position:relative;
  z-index:3;                              /* iznad fade-a */
}
#services .cards > .card{
  flex:0 0 calc((100% - 2*var(--gap)) / 3);   /* tri po širini viewporta */
  min-width:0;
  scroll-snap-align:start;
  position:relative;
  z-index:4;                              /* iznad fade-a */
}

/* strelice – izvan prve/treće kartice (JS dodaje .is-off kad treba sakriti) */
#services .cards-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(167,139,250,.35);
  background:rgba(139,92,246,.20);
  color:var(--text);
  box-shadow:var(--shadow);
  z-index:5;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

#services .cards-nav:hover{
  transform: translateY(-50%) scale(1.15) rotate(8deg);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #0b0911; /* tamna unutra kad se hovera */
  box-shadow: 0 0 15px rgba(167,139,250,.8),
              0 0 30px rgba(139,92,246,.6),
              0 0 45px rgba(124,58,237,.5);
}
#services .cards-nav.prev{ left:16px; }    /* izvan lijevog ruba */
#services .cards-nav.next{ right:16px; }   /* izvan desnog ruba */
#services .cards-nav.is-off{ display:none !important; } /* potpuno sakrij */



/* =======================================================
   Portfolio (teaser grid + modern cards + CTA)
   ======================================================= */

/* Grid: 3 u redu, uredni razmaci */
.work-grid.work-grid--teaser{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
  margin-top:24px;
}

/* ----- Kartica (scoped na sekciju #portfolio) ----- */
#portfolio .work-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(167,139,250,.18);
  background:#100d18;                    /* fallback ispod slike */
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor:pointer;
}
#portfolio .work-card:hover{
  transform:translateY(-8px);
  border-color:rgba(167,139,250,.45);
  box-shadow:0 14px 32px rgba(0,0,0,.5), 0 0 28px rgba(139,92,246,.25);
}

/* figure definira visinu kartice */
#portfolio .work-card figure{
  position:relative;
  margin:0;
  width:100%;
  aspect-ratio:16/10;                    /* promijeni po želji (npr. 4/3, 21/9) */
}

/* Slika ispunjava cijelu karticu */
#portfolio .work-card .thumb{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .5s ease, filter .5s ease;
}
#portfolio .work-card:hover .thumb{
  transform:scale(1.07);
  filter:brightness(1.08) saturate(115%);
}

/* Fallback pozadina ako nema slike */
#portfolio .work-card .thumb--fallback{
  background:
    radial-gradient(60% 80% at 75% 0%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(124,58,237,.12), transparent 60%),
    #151126;
}

/* Caption: pojavljuje se na hover kao overlay pri dnu */
#portfolio .work-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px;
  text-align:center;
  color:#fff;
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.3px;
  background:linear-gradient(to top, rgba(14,11,20,.9), rgba(14,11,20,0));
  backdrop-filter:blur(6px);
  opacity:0;
  transform:translateY(20%);
  transition:opacity .4s ease, transform .4s ease;
}
#portfolio .work-card:hover figcaption{
  opacity:1;
  transform:translateY(0);
}

/* ----- CTA ispod grida ----- */
.teaser-cta{
  margin-top:60px;
  display:flex;
  justify-content:center;
}
.btn.view-all{
  padding:14px 28px;
  border-radius:14px;
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  letter-spacing:.25px;
  color:var(--text);
  background:linear-gradient(180deg, rgba(124,58,237,.14), rgba(255,255,255,.04));
  border:1px solid rgba(167,139,250,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .25s, box-shadow .3s, border-color .3s, background-color .3s;
}
.btn.view-all:hover{
  transform:translateY(-3px);
  border-color:rgba(167,139,250,.6);
  background:linear-gradient(180deg, rgba(124,58,237,.22), rgba(255,255,255,.1));
  box-shadow:0 12px 26px rgba(124,58,237,.35), 0 0 26px rgba(167,139,250,.25);
}
.btn.view-all:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(167,139,250,.35), 0 12px 32px rgba(124,58,237,.28);
}

/* ===========================
   CONTACT 
   =========================== */

/* Fallback varijable (ako već nemaš definirano u temi) */
:root{
  --text: #eae4ff;
  --text-strong: #f3efff;
  --text-soft: rgba(231,225,255,.82);
  --field-bg: rgba(255,255,255,.03);
  --field-bg-hover: rgba(255,255,255,.05);
  --stroke: rgba(167,139,250,.25);
  --stroke-strong: rgba(167,139,250,.55);
  --stroke-focus: rgba(167,139,250,.65);
  --dash: rgba(167,139,250,.28);
}

/* ===== Kartica forme + pozadina iza “tag” labela ===== */
.contact-form.compact{
  width:min(820px,100%);
  margin:0 auto;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.06));
  border:1px solid rgba(167,139,250,.18);
  box-shadow:0 10px 26px rgba(0,0,0,.28);

  /* koristi se kao podloga ispod teksta labela (da presiječe border) */
  --contact-bg:#0f0c18;
}

/* ===== Layout: dvije kolone iznad textarea ===== */
.contact-form.compact .row.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.contact-form.compact .col{ display:grid; }

/* ===== Polje + fiksna “legend” labela na gornjoj crti ===== */
.contact-form.compact .field{
  position:relative;
  margin-bottom:18px;                 /* “air” između polja */
}
.contact-form.compact .row.two .field{ margin-bottom:20px; }

.contact-form.compact .field label.top{
  position:absolute;
  left:14px;
  top:-8px;                           /* sjedi na samoj crti bordera */
  padding:0 8px;                      /* mala pilula */
  line-height:1;
  font-size:.80rem;
  font-weight:600;
  color:rgba(231,225,255,.9);
  background:var(--contact-bg);
  z-index:2;
  pointer-events:none;
}

/* Input & Textarea (razmak ispod labele, fokus, hover) */
.contact-form.compact .field input,
.contact-form.compact .field textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:var(--field-bg);
  color:var(--text);
  padding:20px 14px 12px;             /* mjesto za labelu koja je na crti */
  font-size:.95rem;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.contact-form.compact .field textarea{
  min-height:130px;
  resize:vertical;
}
.contact-form.compact .field input:hover,
.contact-form.compact .field textarea:hover{
  background:var(--field-bg-hover);
  border-color:var(--stroke-strong);
}
.contact-form.compact .field input:focus,
.contact-form.compact .field textarea:focus{
  border-color:var(--stroke-focus);
  background:var(--field-bg-hover);
  box-shadow:0 0 0 3px rgba(167,139,250,.20);
  outline:none;
}

/* ===== Custom SELECT (isti look & feel kao input) ===== */
.contact-form.compact .field.select{ position:relative; }
.contact-form.compact .field.select label.top{
  position:absolute;
  left:14px;
  top:-9px;
  padding:0 8px;
  line-height:1;
  font-size:.80rem;
  font-weight:600;
  color:rgba(231,225,255,.9);
  background:var(--contact-bg);
  z-index:3;
}

.field.select .cs{ width:100%; position:relative; }
.field.select .cs-selected{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--stroke);
  background:var(--field-bg);
  color:var(--text);
  border-radius:10px;
  padding:20px 14px 12px;             /* usklađeno s input paddingom */
  font-size:.95rem;
  transition:border-color .25s, box-shadow .25s, background .25s;
  cursor:pointer;
}
.field.select .cs-selected:hover{ border-color:var(--stroke-strong); background:var(--field-bg-hover); }
.field.select .cs-selected[aria-expanded="true"]{
  border-color:var(--stroke-focus);
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
}

.cs-caret{ margin-left:10px; opacity:.75; }

.cs .cs-value.placeholder{ color:#cfc7ff; opacity:.7; }

/* Dropdown lista (bez plavog hovera, custom look) */
.cs-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  margin:0; padding:6px; list-style:none; max-height:280px; overflow:auto;
  background:#120f1f;
  border:1px solid var(--stroke);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}
.select-hide{ display:none; }
.cs-option{
  padding:10px 12px;
  color:#e9e4ff;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.cs-option:hover,
.cs-option[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(124,58,237,.22),rgba(255,255,255,.06));
}

/* Suptilan scrollbar u dropdownu */
.cs-list::-webkit-scrollbar{ width:10px; height:10px; }
.cs-list::-webkit-scrollbar-thumb{ background:var(--stroke); border-radius:999px; }
.cs-list::-webkit-scrollbar-track{ background:transparent; }

/* ===== Attach file ===== */
.file-row{ margin:10px 0 14px; }
.file-box{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px dashed var(--dash);
  background:rgba(14,11,20,.45);
}
.file-box input[type="file"]{ display:none; }
.file-cta{
  font-weight:600; color:var(--text);
  padding:8px 12px; border-radius:10px;
  border:1px solid rgba(167,139,250,.35);
  background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(255,255,255,.04));
  cursor:pointer; transition:transform .15s, box-shadow .25s, border-color .25s;
}
.file-cta:hover{
  transform:translateY(-1px);
  border-color:var(--stroke-focus);
  box-shadow:0 10px 22px rgba(124,58,237,.28), 0 0 18px rgba(167,139,250,.25);
}
.file-name{ color:rgba(231,225,255,.75); }

/* ===== Submit gumb ===== */
.contact-form.compact .btn.primary.send{
  margin-top:6px;
  padding:12px 18px;
  border-radius:14px;
  font-weight:700;
  color:var(--text);
  background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(255,255,255,.05));
  border:1px solid rgba(167,139,250,.40);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s, box-shadow .25s, border-color .25s, background .25s;
}
.contact-form.compact .btn.primary.send:hover{
  transform:translateY(-2px);
  border-color:var(--stroke-focus);
  background:linear-gradient(180deg,rgba(124,58,237,.24),rgba(255,255,255,.10));
  box-shadow:0 14px 32px rgba(124,58,237,.32),0 0 26px rgba(167,139,250,.28);
  cursor: pointer;
}



/* ===== CTA (Discord / Instagram) ===== */
.contact-actions{
  display:flex; gap:14px; justify-content:center; align-items:center;
  margin:18px auto 22px; flex-wrap:wrap;
}
.btn.contact-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:12px 18px; border-radius:14px; font-weight:600; letter-spacing:.2px;
  backdrop-filter:blur(6px);
  transition:transform .2s, box-shadow .25s, border-color .25s, background .25s;
}
.btn.contact-cta .ic{ font-size:1.05rem; line-height:1; transform:translateY(-1px); }
.btn.contact-cta.primary{
  color:var(--text);
  background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(255,255,255,.06));
  border:1px solid rgba(167,139,250,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.btn.contact-cta.ghost{
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(167,139,250,.22);
}
.btn.contact-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(124,58,237,.30), 0 0 22px rgba(167,139,250,.25);
  border-color:var(--stroke-strong);
}
/* ===== Error states ===== */
.contact-form.compact .field.error input,
.contact-form.compact .field.error textarea,
.contact-form.compact .field.error .cs-selected{
  border-color:#f43f5e !important;
  box-shadow:0 0 0 3px rgba(244,63,94,.22) !important;
}

.contact-form.compact .field .field-error{
  margin-top:6px;
  font-size:.82rem;
  color:#fda4af; /* light red */
  letter-spacing:.2px;
}

/* subtle shake for attention */
@keyframes shakeX{
  10%, 90%{ transform:translateX(-1px); }
  20%, 80%{ transform:translateX(2px); }
  30%, 50%, 70%{ transform:translateX(-3px); }
  40%, 60%{ transform:translateX(3px); }
}
.shake{ animation:shakeX .35s ease both; }

/* toast (ako ga već imaš, preskoči) */
#contactToast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg, rgba(124,58,237,.18), rgba(255,255,255,.06));
  border:1px solid rgba(167,139,250,.35);
  color:var(--text); padding:12px 16px; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
#contactToast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* zvjezdica uz obavezna polja */
.contact-form .req{
  margin-left:.35rem;
  font-weight:200;
  font-size:1.5em;         
  line-height:1;
  color:#ffffff;             
  text-shadow:0 0 .25em rgba(255,77,79,.45); 
  vertical-align:baseline;
}

/* screen-reader only tekst "(required)" */
.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;
}

/* kad je polje u grešci, još jače naglasi zvjezdicu */
.contact-form .field.error .req{
  color:#ff6b6e;
  text-shadow:0 0 .55em rgba(255,107,110,.6);
}


/* =======================================================
   Footer (clean)
   ======================================================= */

.site-footer{
  margin-top:48px;
  padding:28px 18px 16px;
  background:
    radial-gradient(1200px 400px at 80% -50%, rgba(124,58,237,.18), transparent),
    linear-gradient(180deg, rgba(124,58,237,.10), rgba(255,255,255,.02));
  border-top:1px solid rgba(167,139,250,.18);
  color:var(--text,#eae4ff);
}

/* Ako već imaš .container globalno, slobodno ukloni ovu liniju */
.container2{ max-width:1100px; margin:0 auto; }

/* Raspored: brand lijevo | social desno */
.footer-row{
  display:grid;
  grid-template-columns: 1fr auto;   /* left grows | right hugs content */
  align-items:center;
  gap:24px;
}

/* Brand (lijevo) */
.footer-brand{
  justify-self:start;
  text-align:left;
  margin:0;
  padding-left:0;
}
.brand-line{ display:inline-flex; align-items:center; gap:10px; }
.footer-logo{ width:28px; height:28px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(168,85,247,.45)); }
.brand-text{ font-size:1.08rem; letter-spacing:.3px; color:var(--text-strong,#f3efff); }
.brand-text span{ opacity:.95; }
.footer-text{ margin:.35rem 0 0; color:var(--text-soft, rgba(231,225,255,.82)); font-size:.95rem; line-height:1.35; }

/* Social (desno) */
.footer-social{
  justify-self:end;
  display:flex; align-items:center; gap:12px;
}
.sb{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  border:1px solid rgba(167,139,250,.55);
  background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(255,255,255,.07));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  color:var(--text-strong,#f3efff);
  text-decoration:none;
  transition: transform .15s, box-shadow .25s, border-color .25s, background .25s, opacity .2s;
}
.sb:hover{
  transform: translateY(-2px);
  border-color: rgba(167,139,250,.85);
  background: linear-gradient(180deg, rgba(139,92,246,.32), rgba(255,255,255,.12));
  box-shadow: 0 14px 32px rgba(139,92,246,.35), 0 0 22px rgba(167,139,250,.35);
}

/* Ikone – radi i za <img class="sb-ic" src="...svg"> i za inline <svg> */
.sb-ic{ width:20px; height:20px; display:block; filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(168,85,247,.35)); }
.sb svg{ width:20px; height:20px; display:block; }

/* Copyright red */
.footer-bottom{
  margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(167,139,250,.18);
  text-align:center; color:var(--text-soft, rgba(231,225,255,.82)); font-size:.92rem;
}


/* =======================================================
   Helpers
   ======================================================= */
.to-top{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:rgba(139,92,246,.20);
  border:1px solid rgba(167,139,250,.35); color:var(--text); cursor:pointer;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s;
}
.to-top.show{opacity:1; pointer-events:auto}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s, transform .6s}
.reveal.visible{opacity:1; transform:translateY(0)}


/* ===============================
   P O R T F O L I O   P A G E
   =============================== */
.portfolio-hero{
  padding: clamp(90px, 16vh, 160px) 0 clamp(36px, 8vh, 60px);
  background:
    radial-gradient(900px 540px at 15% 5%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(740px 520px at 85% 12%, rgba(167,139,250,.10), transparent 65%),
    var(--bg-deep, #0b0911);
  text-align:center;
}
.portfolio-hero .container{ width:min(1100px,92%); }
.portfolio-hero h1{
  margin:0 0 8px;
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:500;
  font-size: clamp(32px, 6vw, 64px);
  letter-spacing:.4px; color:#efeaff;
  text-shadow: 0 10px 50px rgba(139,92,246,.35);
  text-transform: uppercase;
}
.portfolio-hero p{ margin:0 0 16px; color:var(--muted, #bcb3e8); }
.portfolio-hero .shine-line{
  display:block; margin:12px auto 18px; width:min(720px,80%); height:2px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(167,139,250,.6), transparent);
  box-shadow:0 0 22px rgba(167,139,250,.45);
}

/* Filter pilule */
.pf-filters{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.pf-filter{
  padding:8px 14px; border-radius:999px; border:1px solid rgba(167,139,250,.22);
  background:linear-gradient(180deg, rgba(124,58,237,.10), rgba(255,255,255,.02));
  color:#dcd4ff; font-weight:600; letter-spacing:.2px; cursor:pointer;
  transition:.22s transform, .22s box-shadow, .22s border-color, .22s background-color, .22s color;
}
.pf-filter:hover{ transform:translateY(-1px); border-color:rgba(167,139,250,.45); color:#fff; }
.pf-filter.active{
  background:linear-gradient(180deg, rgba(124,58,237,.22), rgba(255,255,255,.06));
  border-color:rgba(167,139,250,.6);
  box-shadow:0 8px 26px rgba(124,58,237,.28), 0 0 18px rgba(167,139,250,.22);
  color:#fff;
}

/* GRID – 3 u redu, zračni razmaci */
.portfolio-page .container{ width:min(1200px,92%); }
.work-grid--full{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px, 2.2vw, 28px);
}

/* Kartice */
.portfolio-page .work-card{
  position:relative; display:block; overflow:hidden;
  border-radius:20px; border:1px solid rgba(167,139,250,.18);
  background:#100d18; aspect-ratio:16/10;
  box-shadow:0 8px 22px rgba(0,0,0,.40);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.portfolio-page .work-card:hover{
  transform:translateY(-8px);
  border-color:rgba(167,139,250,.45);
  box-shadow:0 16px 36px rgba(0,0,0,.5), 0 0 24px rgba(139,92,246,.25);
}
.portfolio-page .work-card figure{ margin:0; width:100%; height:100%; position:relative; }
.portfolio-page .work-card .thumb{
  position:absolute; inset:0; background:center / cover no-repeat;
  transition: transform .55s ease, filter .55s ease;
}
.portfolio-page .work-card:hover .thumb{ transform:scale(1.06); filter:brightness(1.06) saturate(112%); }
.portfolio-page .work-card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px; text-align:center; color:#fff;
  font-family:'Quicksand', sans-serif; font-weight:600; font-size:1rem; letter-spacing:.3px;
  background: linear-gradient(to top, rgba(14,11,20,.92), rgba(14,11,20,0));
  backdrop-filter: blur(6px);
  opacity:0; transform: translateY(22%); transition: opacity .4s ease, transform .4s ease;
}
.portfolio-page .work-card:hover figcaption{ opacity:1; transform:translateY(0); }


/* =========================================
   LIGHTBOX (clean • no-crop • shrink-wrap)
   Order: Counter → Stage → Thumbs
   ========================================= */
:root{
  --lb-maxw: min(1200px, 92vw);      /* hard cap width */
  --lb-maxh: 60vh;                   /* hard cap height */
  --lb-radius: 18px;                 /* frame radius */
  --lb-border: rgba(167,139,250,.18);
  --lb-glass: rgba(18,14,28,.78);
  --lb-gap: 10px;                    /* spacing between rows */
  --lb-gutter: 6px;                  /* inner padding (top/left/right) */
  --lb-gutter-b: 8px;                /* inner padding (bottom) */
  --lb-pos-y: 48%;                   /* object-position Y (0–100%) */
}

/* Overlay */
.lb{
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--lb-gap);
  padding: 12px 12px 24px;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(124,58,237,.08), transparent 60%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(5px) saturate(115%);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
  z-index: 9999;
}
.lb.show{ opacity:1; pointer-events:auto; }

/* Close */
.lb-close{
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,9,17,.75); color: #fff;
  border: 1px solid rgba(167,139,250,.35);
  font-size: 26px; line-height: 1; cursor: pointer; z-index: 30;
  transition: .2s transform, .2s background-color, .2s border-color;
}
.lb-close:hover{ transform: scale(1.06); background: rgba(124,58,237,.25); border-color: rgba(167,139,250,.65); }

/* ========== 1) COUNTER (first row) ========== */
.lb-meta{
  order: 1;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; color:#f3edff;
  width: fit-content; margin-inline: auto;
}
.lb-cap{ display:none; }
.lb-count{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  color:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.75);
  background: linear-gradient(180deg, rgba(18,14,28,.78), rgba(18,14,28,.62));
  border: 1px solid rgba(167,139,250,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 22px rgba(167,139,250,.35), inset 0 0 14px rgba(124,58,237,.18);
  backdrop-filter: blur(8px) saturate(130%);
}

/* ========== 2) STAGE (shrink-wrap • NO CROP) ========== */
.lb-stage{
  order: 2;
  position: relative;               /* for arrows */
  display: inline-flex;             /* shrink-wrap to media + gutter */
  align-items: center; justify-content: center;
  padding: var(--lb-gutter) var(--lb-gutter) var(--lb-gutter-b);
  background: var(--lb-glass);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.08);
  overflow: hidden; box-sizing: border-box; isolation: isolate;
  width: auto; height: auto;        /* key: no fixed stage size */
  transform: translateY(8px) scale(.965); opacity: 0;
}
.lb.show .lb-stage{ animation: lbZoomIn .28s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lbZoomIn{ 0%{ transform:translateY(8px) scale(.965); opacity:0 } 100%{ transform:translateY(0) scale(1); opacity:1 } }

/* Media sits fully inside (no crop), centered, and capped by viewport */
.lb-stage > img,
.lb-stage > video{
  display: block;
  width: auto; height: auto;
  max-width: var(--lb-maxw);
  max-height: calc(var(--lb-maxh) - var(--lb-gutter) - var(--lb-gutter-b));
  object-fit: contain;                  /* NO CROP */
  object-position: 50% var(--lb-pos-y);
  border-radius: 12px; outline: none;
}

/* Arrows over stage */
.lb-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(167,139,250,.35);
  background: rgba(11,9,17,.78); backdrop-filter: blur(4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  color:#fff; font-size: 28px; line-height: 1; cursor: pointer; z-index: 20;
  transition: .2s transform, .2s background-color, .2s border-color;
}
.lb-prev{ left: 18px; }
.lb-next{ right: 18px; }
.lb-nav:hover{ transform: translateY(-50%) scale(1.06); border-color: rgba(167,139,250,.65); background: rgba(124,58,237,.22); }

/* ========== 3) THUMBS (third row) ========== */
.lb-thumbs{
  order: 3;
  display: flex; gap: 12px; align-items: center;
  width: fit-content; max-width: var(--lb-maxw);
  margin-inline: auto;
  padding: 12px 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  border: 1px solid var(--lb-border);
  background: rgba(14,11,20,.55);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.lb-thumbs::-webkit-scrollbar{ height: 8px; }
.lb-thumbs::-webkit-scrollbar-thumb{ background: rgba(167,139,250,.25); border-radius: 999px; }

/* Thumb item + HOVER EFFECT */
.lb-thumb{
  position: relative;
  flex: 0 0 96px; height: 68px;
  border-radius: 12px;
  border: 1px solid rgba(167,139,250,.25);
  background: #0e0b14 center/cover no-repeat;
  opacity: .95;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease, opacity .2s ease;
  cursor: pointer;
}
.lb-thumb:hover,
.lb-thumb:focus-visible{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(167,139,250,.65);
  box-shadow: 0 10px 24px rgba(124,58,237,.35), 0 0 18px rgba(167,139,250,.35);
  opacity: 1;
  outline: none;
}
.lb-thumb[aria-selected="true"]{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(167,139,250,.85);
  box-shadow: 0 0 0 1px rgba(167,139,250,.65), 0 10px 24px rgba(124,58,237,.28);
}

/* Persistent play icon ONLY on video thumbs (stays on its thumb) */
.lb-thumb[data-kind="video"]::after{
  content:"▶";
  position:absolute; left:6px; bottom:6px; width:22px; height:22px;
  display:grid; place-items:center; font-size:12px; color:#fff;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.35); border-radius:50%;
  pointer-events:none;
}

/* Responsive height caps (keep some room for counter & thumbs) */
@media (max-width:1024px){
  :root{ --lb-maxh: 66vh; }
}
@media (max-width:768px){
  :root{ --lb-maxh: 62vh; }
  .lb-count{ padding: 9px 13px; font-size: 14px; }
}
@media (max-width:420px){
  :root{ --lb-maxh: 58vh; }
  .lb-count{ padding: 8px 11px; font-size: 13px; }
}


/* =======================================================
   Responsive Enhancements — CLEAN MERGE
   ======================================================= */

/* ---------- Global guard rails ---------- */
img,video,canvas,svg{ max-width:100%; height:auto; display:block; }
:where(.site-header,.mega-hero,.section,#services,#portfolio,.portfolio-page,
       .work-grid,.cards-wrap,.cards-scroller,.site-footer){ overflow-x:clip; }

/* Desktop hero baseline */
.mega-hero{ min-height: calc(100svh - 72px); }

/* ---------- ≤1280px: 3→2 kolone ---------- */
@media (max-width:1280px){
  .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid.work-grid--teaser{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid--full{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- ≤1024px: tablet baza ---------- */
@media (max-width:1024px){
  /* normalan scroll (bez snap-a) */
  body{ scroll-snap-type:none; }
  .snap{ min-height:auto; }

  /* hero preko cijelog ekrana i na tabletu */
  .mega-hero{ min-height: calc(100svh - 72px); }

  .nav-wrap{ padding:12px clamp(12px,4vw,28px); }
  .section{ padding:clamp(80px,12vh,140px) 0; }

  .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); --fg-gap:18px; gap:var(--fg-gap); }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid--full{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .contact-form.compact .row.two{ grid-template-columns:1fr; }

  /* About us: 3. blok centriran ali ISTE širine kao ostali (≈ jedna kolona) */
  #about .feature-grid > .feature:nth-child(3){
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--fg-gap)) / 2);
  }

  /* Portfolio teaser: default na tabletu = 1 po redu (kasnije pregazimo za 769–1024 i 768) */
  #portfolio .work-grid.work-grid--teaser{ grid-template-columns: 1fr; }
}

/* ---------- SERVICES: horizontalni scroller (SVE ŠIRINE) ---------- */
/* ≥768px: vodoravni rail s 2–3 kartice po pogledu */
@media (min-width:768px){
  #services .cards-scroller{
    overflow-x:hidden !important; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    scroll-snap-type:x proximity; padding-inline:10px;
  }
  #services .cards{
    display:flex !important; gap:var(--gap,22px);
    padding:4px 0 12px; margin:0;
  }
  #services .cards > .card{ min-width:0; scroll-snap-align:start; }

  /* 769–1024px: ~2 po pogledu + vidljive strelice */
  @media (max-width:1024px){
    #services .cards > .card{ flex:0 0 calc((100% - var(--gap,22px))/2); }
    #services .cards-nav{ display:grid !important; }
    #services .cards-nav.prev{ left:8px !important; }
    #services .cards-nav.next{ right:8px !important; }
  }
  /* 1025–1280px: ~3 po pogledu */
  @media (min-width:1025px) and (max-width:1280px){
    #services .cards > .card{ flex:0 0 calc((100% - 2*var(--gap,22px))/3); }
    #services .cards-nav{ display:grid !important; }
    #services .cards-nav.prev{ left:8px; }
    #services .cards-nav.next{ right:8px; }
  }
  /* ≥1281px: ~3 po pogledu */
  @media (min-width:1281px){
    #services .cards > .card{ flex:0 0 calc((100% - 2*var(--gap,22px))/3); }
    #services .cards-nav{ display:grid !important; }
    #services .cards-nav.prev{ left:8px; }
    #services .cards-nav.next{ right:8px; }
  }
}

/* ≤767px: Usluge – poliran mobilni izgled (1 kartica u pogledu) */
@media (max-width:767.98px){
  /* manji gutteri oko raila */
  #services .cards-wrap{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #services .cards-scroller{
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-inline: 0 !important; /* bez dodatnog unutarnjeg paddinga */
  }

  #services .cards{
    display: flex !important;
    gap: var(--gap,16px);
    padding: 4px 0 12px;
    margin: 0;
  }

  /* kartica punija i centrirana */
  #services .cards > .card{
    flex: 0 0 95% !important;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* lakši vizual kartice na malom ekranu */
  #services .card{
    padding: 16px 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(124,58,237,.06), rgba(255,255,255,.03)) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.28) !important;
  }

  /* manji naslov i kraća crtica */
  #services .card h3{
    font-size: 1.06rem !important;
    margin: 0 0 12px !important;
  }
  #services .card h3::after{
    width: 96px !important;
    margin: 4px auto 0 !important;
    box-shadow: 0 0 6px rgba(167,139,250,.65), 0 0 12px rgba(124,58,237,.45) !important;
    opacity: .9;
  }

  /* kompaktniji “pill” i tagovi */
  #services .card .pill{
    margin-bottom: 8px !important;
    font-size: 11px !important;
    padding: .3rem .55rem !important;
  }
  #services .chip{
    font-size: 12px !important;
    padding: .3rem .5rem !important;
  }

  /* na mobu bez strelica i fade rubova */
  #services .cards-nav{ display:none !important; }
  #services .cards-scroller::before,
  #services .cards-scroller::after{ display:none !important; }
}

/* ---------- PORTFOLIO: scroll 768/1024, bez scrolla <768 ---------- */
/* 769–1024px: jedan red + horizontalni scroll (sve 3 kartice su dostupne) */
@media (max-width:1024px) and (min-width:769px){
  #portfolio{ overflow-x:visible !important; }
  #portfolio .work-grid.work-grid--teaser{
    display:flex !important; gap:24px !important;
    overflow-x:auto !important; overflow-y:visible !important;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    padding:4px 12px 10px;
  }
  #portfolio .work-grid.work-grid--teaser > *{
    flex:0 0 calc(50% - 12px); min-width:0; scroll-snap-align:start;
  }
}

/* točno 768px: jedan red + horizontalni scroll (1–1.2 u pogledu) */
@media (width:768px){
  #portfolio{ overflow-x:visible !important; }
  #portfolio .work-grid.work-grid--teaser{
    display:flex !important; gap:16px !important;
    overflow-x:auto !important; overflow-y:visible !important;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    padding:4px 12px 10px;
  }
  #portfolio .work-grid.work-grid--teaser > *{
    flex:0 0 85%; min-width:0; scroll-snap-align:start;
  }
}

/* ≤767px: BEZ horiz. scrolla — slike jedna ispod druge */
@media (max-width:767.98px){
  #portfolio .work-grid.work-grid--teaser{
    display:grid !important; grid-auto-flow:row !important;
    grid-template-columns:1fr !important; gap:16px !important;
    overflow:visible !important; padding:0 !important;
  }
}

/* ---------- ≤768px: mobiteli (gutteri, hamburger, hero…) ---------- */
@media (max-width:768px){
  /* hero full-screen s nižim headerom */
  .mega-hero{ min-height: calc(100svh - 64px); padding-top:64px; }

  /* full-width s ugodnim gutterima */
  .container,.container2,.section .container,
  .portfolio-page .container,.portfolio-hero .container,
  #services .container,.nav-wrap{
    width:100% !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:16px !important; padding-right:16px !important;
  }

  /* hamburger drawer */
  .nav{ display:none; }
  .nav-toggle{ display:flex; width:42px; height:42px; border-radius:12px;
               border:1px solid rgba(167,139,250,.45);
               background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(255,255,255,.06));
               box-shadow:var(--shadow); align-items:center; justify-content:center; gap:6px; flex-direction:column; }
  .nav-toggle span{ width:22px; height:2px; border-radius:999px; background:var(--text,#efeaff);
                    box-shadow:0 0 8px rgba(167,139,250,.5); transition:transform .22s,opacity .22s,width .22s; }
  .site-header.menu-open .nav{
    position:fixed; left:12px; right:12px; top:calc(64px + 8px);
    bottom:auto; height:auto; max-height:none;
    display:grid; grid-auto-rows:min-content; gap:12px; padding:16px;
    background:linear-gradient(180deg,rgba(18,14,28,.95),rgba(10,8,16,.93));
    border:1px solid rgba(167,139,250,.28); border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.08); z-index:999; isolation:isolate;
  }
  .site-header.menu-open .nav a{
    display:block; width:100%; text-align:center;
    font-family:var(--font-base,'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,sans-serif);
    font-weight:700; font-size:17px; line-height:1.25; letter-spacing:.25px; text-transform:uppercase;
    color:#fff; -webkit-text-fill-color:#fff; text-decoration:none;
    padding:14px 16px; border-radius:12px;
    background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(255,255,255,.06));
    border:1px solid rgba(167,139,250,.35);
  }

  /* hero kategorije */
  .hero-cats{ transform:none !important; margin-top:14px !important; padding:0 16px; gap:12px;
              flex-wrap:wrap; justify-content:center; }

  /* footer: brand lijevo, social centar */
  .footer-row{ grid-template-columns:1fr; gap:16px; text-align:left; }
  .footer-brand{ justify-self:start; text-align:left; padding-left:0; }
  .footer-social{ justify-self:center; }
}

/* ===== About us @ <480px — force single column ===== */
@media (max-width: 480px){
  #about .feature-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #about .feature-grid > .feature{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- ≤480px ---------- */
@media (max-width:480px){
  .site-header.menu-open .nav{ left:8px; right:8px; top:calc(60px + 8px); }
  .hero-cats{ margin-top:18px !important; gap:10px; }
  .hero-cats a{ font-size:.88rem; letter-spacing:.1ch; }
}

/* ---------- ≤360px ---------- */
@media (max-width:360px){
  .nav-toggle{ width:38px; height:38px; }
  .nav-toggle span{ width:18px; }
  .brand-text{ display:none; }
  .section{ padding:56px 0; }
  .pill{ font-size:10px; }
  .chip{ font-size:11px; }
}

/* ---------- Contact form @ 1024px = 2 kolone kao desktop ---------- */
@media (width:1024px){
  #contact .container{
    width:100% !important; max-width:1100px !important;
    margin:0 auto !important; padding-left:24px !important; padding-right:24px !important;
  }
  .contact-form.compact{ width:100% !important; margin-left:0 !important; margin-right:0 !important; }
  .contact-form.compact .row.two{ grid-template-columns:1fr 1fr !important; gap:18px !important; }
  .contact-form.compact .col, .contact-form.compact .field{ width:100% !important; }
}



/* red s gumbom i porukom (po želji prilagodi) */
.form-actions, .contact-form .btn.primary.send + .form-msg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn.primary.send { position: relative; min-width: 110px; }
.btn.primary.send .btn-spinner {
  display: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.btn.primary.send.is-loading .btn-spinner { display: inline-block; }
.btn.primary.send.is-loading .btn-label { opacity: .6; }

.form-msg { font-size: 14px; line-height: 1.4; }
.form-msg.ok  { color: #57F287; }  /* zelena */
.form-msg.err { color: #FF6666; }  /* crvena */

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }