@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --white:   #ffffff;
  --off:     #FAF7F9;
  --blush:   #F7EDF3;
  --blush2:  #F0DAE8;
  --magenta: #C8185E;
  --magenta-dark: #9E1049;
  --magenta-light: #F2689C;
  --gold:    #E8960C;
  --ink:     #0F0710;
  --ink-2:   #3A1428;
  --ink-3:   #7A4060;
  --border:  rgba(200,24,94,0.14);
  --border-soft: rgba(200,24,94,0.08);
  --radius:  20px;
  --radius-sm: 12px;
  --display: 'Cabinet Grotesk', sans-serif;
  --body:    'Plus Jakarta Sans', sans-serif;
  --shadow-sm: 0 2px 12px rgba(15,7,16,0.08);
  --shadow-md: 0 8px 32px rgba(15,7,16,0.12);
  --shadow-lg: 0 24px 64px rgba(15,7,16,0.18);
  --dark-bg:  #100812;
  --dark-surface: rgba(255,255,255,0.04);
  --dark-border:  rgba(255,255,255,0.08);
  --dark-border2: rgba(200,24,94,0.3);
}

/* ─── RESET ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; scrollbar-gutter:stable; overflow-y:scroll; }
body {
  font-family: var(--body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.container { width:100%; max-width:1160px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }

/* ─── TYPOGRAPHY ──────────────────────────────────────── */
h1,h2,h3,h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h1 { font-size: clamp(40px, 5.8vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { font-size: 22px; font-weight: 700; }
em { font-style: italic; color: var(--magenta); }
strong { font-weight: 600; }

/* ─── EYEBROW ─────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items:center; gap:8px;
  font-family: var(--body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 16px;
}
.eyebrow::before {
  content:''; width:20px; height:2px;
  background: var(--magenta); border-radius:2px; flex-shrink:0;
}

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 26px; border-radius:100px;
  font-family: var(--body); font-weight:600; font-size:14.5px;
  transition: all .22s ease; cursor:pointer; position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background: rgba(255,255,255,0.12);
  opacity:0; transition: opacity .2s;
  border-radius:inherit;
}
.btn:hover::after { opacity:1; }

.btn-primary {
  background: var(--magenta);
  color:#fff;
  box-shadow: 0 8px 28px -6px rgba(200,24,94,0.45);
}
.btn-primary:hover {
  background: var(--magenta-dark);
  box-shadow: 0 14px 36px -6px rgba(200,24,94,0.60);
  transform: translateY(-2px);
}
.btn-outline {
  background:transparent;
  border:1.5px solid var(--magenta);
  color: var(--magenta);
  box-shadow: 0 4px 16px -4px rgba(200,24,94,0.25);
}
.btn-outline:hover {
  background: var(--magenta);
  color:#fff; transform:translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(200,24,94,0.40);
}
.btn-white {
  background:#fff; color:var(--magenta);
  box-shadow: var(--shadow-md);
}
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-ghost {
  background: rgba(255,255,255,0.1);
  color:#fff; border:1.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(15,7,16,0.20);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  transform:translateY(-2px);
  box-shadow: 0 8px 32px rgba(15,7,16,0.30);
}
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ─── NAV ─────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 20px 0;
  transition: all .3s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
  padding:12px 0;
  box-shadow: 0 4px 24px rgba(15,7,16,0.06);
}
.nav.dark-nav.scrolled {
  background: rgba(11,5,14,0.88);
  border-bottom: 1px solid var(--dark-border);
}
.nav .container { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo {
  font-family: var(--display); font-weight:900; font-size:22px;
  color:var(--ink); letter-spacing:-0.04em; flex-shrink:0;
}
.logo span { color:var(--magenta); }
.logo-suffix {
  font-family: var(--body);
  font-weight:600; font-size:0.72em; letter-spacing:0.01em;
  color:var(--ink-3); margin-left:1px; vertical-align:middle;
}
.dark-page .logo, .dark-nav .logo { color:#fff; }
.dark-page .logo .logo-suffix, .dark-nav .logo .logo-suffix { color:rgba(255,255,255,0.55); }
.footer-brand .logo .logo-suffix { color:rgba(255,255,255,0.55); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a {
  font-size:14px; font-weight:500; color:var(--ink-2);
  transition:color .2s; position:relative;
}
.dark-page .nav-links a, .dark-nav .nav-links a { color:rgba(255,255,255,0.65); }
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:2px; background:var(--magenta);
  border-radius:2px; transition:width .2s;
}
.nav-links a:hover { color:var(--magenta); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--magenta); }
.nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-actions .btn { padding:10px 20px; font-size:13.5px; }

/* Mobile burger */
.burger { display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; }
.burger span { height:2px; width:100%; background:var(--ink); border-radius:2px; transition:.3s; }
.dark-page .burger span, .dark-nav .burger span { background:#fff; }
.mobile-menu {
  position:fixed; inset:0; background:var(--ink); z-index:110;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateX(100%); transition:transform .35s ease;
}
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a { font-family:var(--display); font-size:30px; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.mobile-menu a:hover { color:var(--magenta); }
.mobile-close {
  position:absolute; top:22px; right:28px;
  font-size:28px; color:rgba(255,255,255,0.6);
}

/* ─── FOOTER ──────────────────────────────────────────── */
footer {
  background: var(--dark-bg);
  color:rgba(255,255,255,0.8);
  padding: 72px 0 0;
  position:relative; overflow:hidden;
}
footer::before {
  content:''; position:absolute; top:-200px; right:-200px;
  width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,24,94,0.06), transparent 70%);
  pointer-events:none;
}
.footer-top {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px; padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo { color:#fff; margin-bottom:14px; }
.footer-brand p { font-size:13.5px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:230px; }
.footer-col h4 {
  font-family: var(--body); font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.30); margin-bottom:18px;
}
.footer-col a {
  display:block; font-size:14px; color:rgba(255,255,255,0.60);
  margin-bottom:11px; transition:color .2s;
}
.footer-col a:hover { color:var(--magenta-light); }
.footer-contact p { font-size:13.5px; color:rgba(255,255,255,0.50); margin-bottom:8px; }
.footer-contact a { font-size:13.5px; color:rgba(255,255,255,0.65); display:block; margin-bottom:8px; }
.footer-social { display:flex; gap:10px; margin-top:22px; }
.footer-social a {
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:rgba(255,255,255,0.6);
  transition:all .2s;
}
.footer-social a:hover { background:var(--magenta); border-color:var(--magenta); color:#fff; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; font-size:12.5px; color:rgba(255,255,255,0.28);
  flex-wrap:wrap; gap:12px;
}
.footer-bottom a { color:rgba(255,255,255,0.28); }
.footer-bottom a:hover { color:var(--magenta-light); }

/* ─── SECTION base ────────────────────────────────────── */
.section { padding:110px 0; }
.section-header { margin-bottom:60px; }
.section-header .lede { font-size:17px; color:var(--ink-3); max-width:540px; margin-top:14px; line-height:1.7; }
.section-header.centered { text-align:center; }
.section-header.centered .lede { margin:14px auto 0; }
.section-header.centered .eyebrow { justify-content:center; }

/* ─── PAGE HERO (inner pages) ─────────────────────────── */
.page-hero {
  background-color: #FFF8FB;
  background-image:
    linear-gradient(rgba(200,24,94,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,24,94,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  padding:160px 0 90px;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; top:0; right:0;
  width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,24,94,0.10), transparent 65%);
  transform:translate(30%,-30%); filter:blur(60px);
}
.page-hero::after {
  content:''; position:absolute; bottom:0; left:0;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(247,141,183,0.14), transparent 70%);
  transform:translate(-40%, 40%); filter:blur(50px);
}
.page-hero h1 { margin-bottom:18px; color:var(--ink); position:relative; z-index:1; }
.page-hero .lede { font-size:18px; color:var(--ink-3); max-width:580px; position:relative; z-index:1; }
.page-hero .eyebrow { position:relative; z-index:1; }

/* ─── CARDS & UTILS ────────────────────────────────────── */
.card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(200,24,94,0.25);
}

.tag {
  display:inline-flex; align-items:center;
  background:var(--blush); color:var(--magenta);
  font-size:12px; font-weight:600; letter-spacing:0.06em;
  padding:4px 12px; border-radius:100px;
  border:1px solid var(--border);
}



.dark-section {
  background: var(--dark-bg);
  color:#fff;
}
.dark-section .eyebrow { color:var(--magenta-light); }
.dark-section .eyebrow::before { background:var(--magenta-light); }
.dark-section h2 { color:#fff; }
.dark-section .lede { color:rgba(255,255,255,0.55); }

/* ─── GLASS CARD ──────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius);
  backdrop-filter: blur(12px);
  transition: background .25s, border-color .25s, transform .25s;
}
.glass-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(200,24,94,0.35);
  transform:translateY(-5px);
}

/* ─── CTA STRIP ───────────────────────────────────────── */
.cta-strip {
  background: linear-gradient(135deg, #8C1040 0%, #C8185E 50%, #9E1049 100%);
  padding:90px 0;
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-strip::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.cta-strip::after {
  content:''; position:absolute; bottom:-80px; left:-80px;
  width:320px; height:320px; border-radius:50%;
  background:rgba(255,255,255,0.04);
}
.cta-noise {
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.6; pointer-events:none;
}
.cta-strip h2 { color:#fff; margin-bottom:14px; position:relative; z-index:1; }
.cta-strip p { color:rgba(255,255,255,0.75); font-size:17px; max-width:500px; margin:0 auto; position:relative; z-index:1; }
.cta-strip .btn-row { justify-content:center; position:relative; z-index:1; }
.cta-strip .eyebrow-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
  margin-bottom:16px; position:relative; z-index:1;
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:980px) {
  .nav-links { display:none; }
  .nav-actions { display:none; }
  .burger { display:flex; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .section { padding:80px 0; }
  .page-hero { padding:140px 0 64px; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
}

/* ─── AMBIENT SECTION BACKGROUNDS (auto-injected, see main.js) ──
   Perf note: blur() + animated transform is one of the most expensive
   things a browser can paint, because every frame has to be re-rasterized
   rather than just composited. We keep the blur but (a) drop scale() from
   the keyframes so the rasterized layer never changes size, (b) promote
   the orb to its own GPU layer with will-change/translateZ, and (c) pause
   the animation outright via .amb-paused while the section is off-screen
   (toggled by the IntersectionObserver in main.js). */
.amb-host { position:relative; overflow:hidden; }
.amb { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.amb-orb {
  position:absolute; border-radius:50%; filter:blur(70px);
  animation:ambFloat 17s ease-in-out infinite;
  will-change:transform; transform:translateZ(0);
}
.amb-orb.a {
  width:380px; height:380px; top:-110px; right:-70px;
  background:radial-gradient(circle, rgba(200,24,94,0.11) 0%, transparent 70%);
}
.amb-orb.b {
  width:300px; height:300px; bottom:-90px; left:-60px;
  background:radial-gradient(circle, rgba(232,150,12,0.08) 0%, transparent 70%);
  animation-delay:-7s; animation-direction:reverse;
}
.amb-host.amb-paused .amb-orb,
.hero.amb-paused .hero-orb { animation-play-state:paused; }
.amb-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(200,24,94,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,24,94,0.045) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 25%, transparent 100%);
}
@keyframes ambFloat {
  0%,100% { transform:translate3d(0,0,0); }
  33% { transform:translate3d(22px,-16px,0); }
  66% { transform:translate3d(-16px,12px,0); }
}
/* On colored/dark backgrounds (e.g. magenta stats strip) swap orbs to a light tint */
.amb-on-color .amb-orb { background:radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%) !important; }
.amb-on-color .amb-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
}
/* Service-themed tints (Meta = purple, Strategija = green) */
.amb-purple .amb-orb.a { background:radial-gradient(circle, rgba(107,74,232,0.12) 0%, transparent 70%); }
.amb-purple .amb-orb.b { background:radial-gradient(circle, rgba(59,26,140,0.09) 0%, transparent 70%); }
.amb-green .amb-orb.a { background:radial-gradient(circle, rgba(46,168,120,0.12) 0%, transparent 70%); }
.amb-green .amb-orb.b { background:radial-gradient(circle, rgba(13,87,64,0.09) 0%, transparent 70%); }

@media (max-width:980px) {
  .amb-orb.a { width:260px; height:260px; }
  .amb-orb.b { width:200px; height:200px; }
}

/* ─── CARD SPOTLIGHT + DEPTH ───────────────────────────── */
.srv-card, .testi-card, .pkg-card, .value-card, .why-card, .contact-card, .step, .ps-item {
  position:relative;
}
.srv-card::after, .testi-card::after, .pkg-card::after, .value-card::after,
.why-card::after, .contact-card::after, .step::after, .ps-item::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(200,24,94,0.10), transparent 70%);
  opacity:0; transition:opacity .3s ease;
}
.srv-card:hover::after, .testi-card:hover::after, .pkg-card:hover::after, .value-card:hover::after,
.why-card:hover::after, .contact-card:hover::after, .step:hover::after, .ps-item:hover::after {
  opacity:1;
}
.pkg-card.featured::after { background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.16), transparent 70%); }

/* Decorative quote watermark on testimonial cards */
.testi-card { overflow:hidden; }
.testi-card::before {
  content:'"'; position:absolute; top:-30px; right:14px; z-index:-1;
  font-family:var(--display); font-size:120px; font-weight:900;
  color:rgba(200,24,94,0.05); line-height:1; pointer-events:none;
}

/* Gradient-text treatment for big stat numbers on light tiles */
.stat-box .num {
  background:linear-gradient(135deg, var(--magenta), var(--magenta-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─── PRIMARY BUTTON SHIMMER ───────────────────────────── */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::before {
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.40), transparent);
  transform:skewX(-18deg); transition:left .55s ease; z-index:2; pointer-events:none;
}
.btn-primary:hover::before { left:130%; }

/* ─── SCROLL PROGRESS BAR (injected by main.js) ───────────── */
#scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--magenta), var(--magenta-light), var(--gold));
  z-index:300; pointer-events:none;
}

/* ─── MOTION SAFETY ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .amb-orb, .hero-orb, .marquee-track, .reel-like-fx, .reel-music-disc { animation:none !important; }
  [data-reveal] { transition:opacity .25s linear !important; transform:none !important; filter:none !important; }
}

/* ─── ICON SYSTEM (replaces emoji glyphs) ──────────────────
   Custom line-icon set, sized in em so it inherits whatever
   font-size the original emoji container already declared. */
.ic-svg {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.14em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.srv-icon, .value-icon, .wic, .about-badge .ic, .trust-item .ic,
.float-card .ic, .pkg-card .ic { color: var(--magenta); }
.fic { color: var(--magenta); display:flex; align-items:center; justify-content:center; }
.cc-icon { color: var(--magenta); }
.big-icon { color: #fff; }
footer .ic-svg, .footer-contact .ic-svg { color: rgba(255,255,255,0.55); margin-right: 2px; }
.client-pill .ic-svg { color: var(--magenta); }
.pkg-card.featured .value-icon,
.pkg-card.featured .ic-svg { color: #fff; }

/* Portrait monogram — replaces the emoji placeholder with a quieter,
   more on-brand mark for the founder portrait blocks. */
.portrait-mono {
  display:flex; align-items:center; justify-content:center;
  position:relative; width:100%; height:100%;
}
.portrait-mono span {
  font-family: var(--display); font-weight:800; font-size:96px;
  color:rgba(255,255,255,0.9); line-height:1;
  text-shadow: 0 14px 40px rgba(0,0,0,0.18);
}
.portrait-mono::before {
  content:''; position:absolute; width:148px; height:148px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.35);
}
.portrait-mono::after {
  content:''; position:absolute; width:188px; height:188px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
}

/* ─── FILMSTRIP DIVIDER (signature motif) ───────────────────
   A recurring nod to the agency's craft: a thin perforated strip,
   like a frame of 35mm film, used between sections instead of a
   plain hairline. Pure CSS, static (no animation cost). */
.film-divider {
  height: 22px; position: relative; z-index: 2;
  background-image:
    radial-gradient(circle, var(--border) 2.1px, transparent 2.3px);
  background-size: 26px 100%;
  background-position: center;
  background-color: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.film-divider.on-off { background-color: var(--off); }
.film-divider.on-dark {
  background-color: var(--dark-bg);
  border-color: var(--dark-border);
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 2.1px, transparent 2.3px);
}

/* ─── MOBILE OPTIMIZACIJA ─────────────────────────────── */
@media (max-width:640px) {

  /* Container padding */
  .container { padding:0 18px; }

  /* Sekcije — manji padding */
  .section { padding:64px 0; }
  .section-header { margin-bottom:40px; }

  /* BTN ROW — centrirani */
  .btn-row {
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:22px;
  }
  .btn-row .btn { width:100%; justify-content:center; text-align:center; }

  /* Dugmad — puna širina na mobilnom */
  .btn { padding:14px 22px; font-size:14px; }

  /* Hero — stilovi za hero su u index.html inline <style> bloku
     da bi imali viši prioritet od ovog fajla */
  .fc-a, .fc-b { display:none !important; }

  /* Marquee */
  .marquee-item { font-size:12px; padding:0 24px; gap:10px; }

  /* Services grid */
  .srv-grid {
    grid-template-columns:1fr;
    max-width:100%;
    gap:16px;
  }
  .srv-card {
    padding:28px 22px;
    text-align:center;
  }
  .srv-icon { margin-left:auto; margin-right:auto; }
  .srv-link { justify-content:center; }

  /* About preview */
  .about-preview .container {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:36px;
    text-align:center;
  }
  .about-image {
    width:100%;
    max-width:340px;
    aspect-ratio:4/5;
  }
  .about-preview .container > div:last-child {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }
  .about-stats {
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:24px;
    width:100%;
  }
  .stat-box { padding:18px 14px; text-align:center; }
  .stat-box .num { font-size:28px; }

  /* Process grid */
  .process-grid {
    grid-template-columns:1fr;
    gap:12px;
    margin-top:36px;
  }
  .step { padding:24px 18px; }

  /* Testimonials */
  .testi-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .testi-card { padding:24px 20px; }
  .testi-text { font-size:14px; }

  /* CTA Strip */
  .cta-strip { padding:64px 0; }
  .cta-strip h2 { font-size:clamp(26px, 8vw, 38px); }
  .cta-strip p { font-size:14px; }
  .cta-strip .btn-row {
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:0 18px;
  }
  .cta-strip .btn-row .btn { width:100%; justify-content:center; }

  /* Footer */
  .footer-top {
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:36px;
  }
  footer { padding:52px 0 0; }
  .footer-bottom {
    flex-direction:column;
    text-align:center;
    gap:8px;
    padding:18px 0;
  }

  /* Mobile menu */
  .mobile-menu a { font-size:26px; }
  .mobile-menu { gap:22px; }

  /* Section header */
  .section-header h2 { font-size:clamp(26px, 7.5vw, 36px); }

  /* About badge */
  .about-badge { padding:12px 14px; gap:10px; }
  .about-badge strong { font-size:13px; }
}

/* Tablet (641–980) dopune */
@media (min-width:641px) and (max-width:980px) {

  .srv-grid {
    grid-template-columns:repeat(2,1fr);
    max-width:100%;
  }
  .testi-grid { grid-template-columns:repeat(2,1fr); }

  .about-preview .container {
    gap:48px;
  }
  .about-preview .container > div:last-child {
    text-align:left;
  }
}