/* ============================================================
   GIMME FIVE — style.css  v11
   Paleta: Burgundy #581000 · Navy #151D51 · Pearl #F9F9F9
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Outfit:wght@100..900&display=swap');

/* ── TOKEN LAYER ─────────────────────────────────────────── */
:root {
  --bg-page:    #F3EEE6;
  --bg-warm:    #E8E1D6;
  --bg-surface: #FDFAF6;
  --bg-subtle:  #EBE4D8;

  --border:       #D4CAB8;
  --border-light: #E0D9CC;

  --text-strong:  #1A1008;
  --text-body:    #2E2016;
  --text-muted:   #7A6E62;
  --text-faint:   #B5AA98;

  --prim:       #581000;
  --prim-deep:  #3D0B00;
  --prim-a05:   rgba(88,16,0,0.05);
  --prim-a08:   rgba(88,16,0,0.08);
  --prim-a12:   rgba(88,16,0,0.12);
  --prim-a20:   rgba(88,16,0,0.20);
  --prim-a30:   rgba(88,16,0,0.30);

  --accent:      #581000;
  --accent-deep: #3D0B00;
  --accent-a05:  rgba(88,16,0,0.05);
  --accent-a08:  rgba(88,16,0,0.08);
  --accent-a12:  rgba(88,16,0,0.12);
  --accent-a20:  rgba(88,16,0,0.20);
  --accent-a30:  rgba(88,16,0,0.30);

  /* Legacy vars — kept so older inline styles still work */
  --neon:        #581000;
  --neon-dim:    #3D0B00;
  --orange:      #3D0B00;
  --orange-dim:  #2A0800;
  --purple:      #581000;
  --purple-dim:  #3D0B00;
  --teal:        #581000;
  --black:       #F3EEE6;
  --black-light: #E8E1D6;
  --black-card:  #FDFAF6;
  --black-border:#D4CAB8;
  --gray-dark:   #B5AA98;
  --gray:        #8A7F70;
  --gray-light:  #581000;
  --off-white:   #2E2016;
  --pure-white:  #1A1008;
  --c-neon-04:   rgba(88,16,0,0.04);
  --c-neon-05:   rgba(88,16,0,0.05);
  --c-neon-08:   rgba(88,16,0,0.08);
  --c-neon-10:   rgba(88,16,0,0.10);
  --c-neon-15:   rgba(88,16,0,0.15);
  --c-neon-20:   rgba(88,16,0,0.20);
  --c-neon-30:   rgba(88,16,0,0.30);
  --c-purple-08: rgba(88,16,0,0.08);
  --c-purple-10: rgba(88,16,0,0.10);
  --c-purple-15: rgba(88,16,0,0.15);
  --c-purple-30: rgba(88,16,0,0.30);
  --c-orange-08: rgba(88,16,0,0.08);
  --c-orange-10: rgba(88,16,0,0.10);
  --c-orange-15: rgba(88,16,0,0.15);
  --c-orange-30: rgba(88,16,0,0.30);
  --c-teal-05:   rgba(88,16,0,0.05);
  --c-teal-08:   rgba(88,16,0,0.08);
  --c-teal-10:   rgba(88,16,0,0.10);
  --c-teal-15:   rgba(88,16,0,0.15);
  --c-teal-20:   rgba(88,16,0,0.20);
  --c-teal-30:   rgba(88,16,0,0.30);

  --gold: #D4A017;

  --font-head: "Manrope", sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'Manrope', sans-serif;
  --font-display: "Manrope", sans-serif;

  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --r-xs: 6px;  --radius-sm: 8px;
  --r-sm: 10px; --radius-md: 14px;
  --r-md: 16px; --radius-lg: 22px;
  --r-lg: 24px; --radius-xl: 32px;
  --r-xl: 36px;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-body);line-height:1.65;overflow-x:hidden;}
body.no-scroll{overflow:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
strong{font-weight:600;}
::selection{background:var(--prim);color:#fff;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg-warm);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ── LAYOUT ───────────────────────────────────────────────── */
.container,.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 28px;}

/* ── TYPOGRAPHY HELPERS ───────────────────────────────────── */
.eyebrow,.section-label{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--prim);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:600;
}
.eyebrow::before,.section-label::before{
  content:'';
  width:40px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--prim));
  flex-shrink:0;border-radius:1px;
}
.eyebrow--center{justify-content:center;}

.hdg-display,.section-title{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.03em;
  color: #000;
  margin-bottom:18px;
}
.hdg-display--center{text-align:center;}

.hdg-sub,.section-subtitle{
  font-size:1.1rem;
  color:var(--text-muted);
  max-width:600px;
  font-weight:300;
  line-height:1.7;
}
.hdg-sub--center{text-align:center;margin:0 auto;}

.section-head,.section-header{margin-bottom:72px;}
.section-head--center{text-align:center;}

.gradient-green,.grad-primary{background:linear-gradient(135deg,var(--prim),#8B1500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gradient-orange,.grad-accent{background:linear-gradient(135deg,var(--accent),#2E3E9B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gradient-purple,.grad-mix{background:linear-gradient(135deg,var(--prim),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.body-text,.text{font-size:1rem;color:var(--text-body);margin-bottom:14px;font-weight:300;line-height:1.75;}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;font-family:var(--font-body);font-size:0.9rem;font-weight:600;border-radius:100px;border:none;cursor:pointer;transition:all 0.3s var(--ease);white-space:nowrap;letter-spacing:0.01em;}

.btn-primary,.btn-fill{background:var(--prim);color:#fff;}
.btn-primary:hover,.btn-fill:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 12px 36px var(--prim-a30);}

.btn-accent-fill{background:var(--accent);color:#fff;}
.btn-accent-fill:hover{background:var(--prim);transform:translateY(-2px);}

.btn-outline,.btn-ghost{background:transparent;color:var(--text-body);border:1.5px solid var(--border);}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

.btn-sm{padding:9px 22px;font-size:0.82rem;}

.btn-arrow,.btn-icon{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border);background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;}
.btn-arrow:hover,.btn-icon:hover{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}

/* ── FADE-IN ANIMATION ────────────────────────────────────── */
.fade-in,.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.fade-in.shown,.reveal.visible{opacity:1;transform:translateY(0);}
.fade-in-d1,.reveal-d1{transition-delay:0.1s;}
.fade-in-d2,.reveal-d2{transition-delay:0.2s;}
.fade-in-d3,.reveal-d3{transition-delay:0.3s;}
.fade-in-d4,.reveal-d4{transition-delay:0.4s;}

/* ── NAVBAR ───────────────────────────────────────────────── */
.nav-bar,.navbar{position:fixed;top:0;left:0;right:0;z-index:9000;padding:20px 0;transition:all 0.4s var(--ease);}
.nav-bar.nav-scrolled,.navbar.scrolled{
  background:rgba(243,238,230,0.97) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:13px 0;
  box-shadow:0 2px 20px var(--prim-a08);
  z-index:9000 !important;
}
.nav-bar .container,.nav-bar .wrap,.navbar .container{display:flex;align-items:center;justify-content:space-between;}

.brand,.nav-logo{
  font-family:var(--font-body);
  font-size:1.35rem;
  font-weight:800;
  color:var(--accent);
  letter-spacing:-0.5px;
  display:flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase;
  flex-shrink:0;
}
.brand-icon,.logo-icon{
  width:36px;height:36px;
  background:var(--prim);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);
  font-weight:800;
  font-size:2rem;
  color:#fff;
  transition:transform 0.3s;
  flex-shrink:0;
}
.brand:hover .brand-icon,.nav-logo:hover .logo-icon{transform:rotate(-8deg) scale(1.05);}

.nav-end,.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0;}

.nav-cta,.nav-contact-btn{
  padding:10px 24px;
  background:var(--prim);
  color:#fff;
  border-radius:100px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.82rem;
  transition:all 0.3s;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
}
.nav-cta:hover,.nav-contact-btn:hover{background:var(--accent);transform:translateY(-1px);}

.lang-toggle,.lang-switcher{
  display:flex;align-items:center;gap:2px;
  background:var(--prim-a05);
  border:1px solid var(--border);
  border-radius:100px;padding:3px;
}
.lang-opt,.lang-btn{
  padding:5px 11px;border-radius:100px;border:none;
  background:transparent;color:rgba(88,16,0,0.4);
  font-family:var(--font-mono);font-size:0.64rem;
  letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all 0.25s;font-weight:600;
}
.lang-opt:hover,.lang-btn:hover{color:rgba(88,16,0,0.7);}
.lang-opt.lang-active,.lang-btn.lang-active{background:var(--prim);color:#fff;}

/* Burger ─ MOBILE HAMBURGER FIX */
.burger,.menu-toggle{
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:transparent;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;
  position:relative;
  z-index:9500;
  flex-shrink:0;
}
.burger:hover,.menu-toggle:hover{border-color:var(--prim);}
.burger-lines,.menu-toggle-inner{width:20px;height:14px;position:relative;}
.burger-lines span,.menu-toggle-inner span{position:absolute;left:0;display:block;width:100%;height:2px;background:var(--accent);transition:transform 0.4s var(--ease),opacity 0.4s var(--ease),top 0.4s var(--ease);transform-origin:center;border-radius:1px;}
.burger-lines span:nth-child(1),.menu-toggle-inner span:nth-child(1){top:0;}
.burger-lines span:nth-child(2),.menu-toggle-inner span:nth-child(2){top:6px;}
.burger-lines span:nth-child(3),.menu-toggle-inner span:nth-child(3){top:12px;}
.burger.is-open,.menu-toggle.active{border-color:var(--prim);}
.burger.is-open .burger-lines span:nth-child(1),.menu-toggle.active .menu-toggle-inner span:nth-child(1){top:6px;transform:rotate(45deg);}
.burger.is-open .burger-lines span:nth-child(2),.menu-toggle.active .menu-toggle-inner span:nth-child(2){opacity:0;transform:scaleX(0);}
.burger.is-open .burger-lines span:nth-child(3),.menu-toggle.active .menu-toggle-inner span:nth-child(3){top:6px;transform:rotate(-45deg);}

/* ── OVERLAY MENU ─────────────────────────────────────────── */
.overlay-menu,.fullscreen-menu{
  position:fixed;inset:0;
  z-index:8000;
  background:var(--bg-page);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity 0.45s var(--ease),visibility 0.45s;
  overflow-y:auto;
}
.overlay-menu.is-open,.fullscreen-menu.active{opacity:1;visibility:visible;}

.overlay-pattern,.menu-bg-pattern{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--prim-a05) 1px,transparent 1px),linear-gradient(90deg,var(--prim-a05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);
  pointer-events:none;
}
.overlay-glow-1,.menu-gradient{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,var(--prim-a08) 0%,transparent 70%);bottom:-100px;right:0;pointer-events:none;}
.overlay-glow-2,.menu-gradient-2{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--accent-a05) 0%,transparent 70%);top:-50px;left:-50px;pointer-events:none;}

.overlay-body,.menu-content{
  flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;
  padding:120px 60px 60px;position:relative;z-index:2;
  max-width:1400px;margin:0 auto;width:100%;align-items:center;
}

.overlay-nav,.menu-nav{display:flex;flex-direction:column;gap:0;}
.overlay-link,.menu-nav-item{
  max-width:430px;display:flex;align-items:center;gap:20px;
  padding:12px 0;cursor:pointer;text-decoration:none;
  transition:all 0.8s;opacity:0;transform:translateX(-30px);
}
.overlay-menu.is-open .overlay-link,.fullscreen-menu.active .menu-nav-item{opacity:1;transform:translateX(0);}
.overlay-menu.is-open .overlay-link:nth-child(1),.fullscreen-menu.active .menu-nav-item:nth-child(1){transition-delay:0.1s;}
.overlay-menu.is-open .overlay-link:nth-child(2),.fullscreen-menu.active .menu-nav-item:nth-child(2){transition-delay:0.15s;}
.overlay-menu.is-open .overlay-link:nth-child(3),.fullscreen-menu.active .menu-nav-item:nth-child(3){transition-delay:0.2s;}
.overlay-menu.is-open .overlay-link:nth-child(4),.fullscreen-menu.active .menu-nav-item:nth-child(4){transition-delay:0.25s;}
.overlay-menu.is-open .overlay-link:nth-child(5),.fullscreen-menu.active .menu-nav-item:nth-child(5){transition-delay:0.3s;}
.overlay-menu.is-open .overlay-link:nth-child(6),.fullscreen-menu.active .menu-nav-item:nth-child(6){transition-delay:0.35s;}

.overlay-num,.menu-nav-number{font-family:var(--font-mono);font-size:1.6rem;color:var(--text-faint);letter-spacing:2px;min-width:28px;}
.overlay-label,.menu-nav-text{font-family:var(--font-head);font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;color:#1A1008;line-height:1.1;transition:all 0.8s;}
.overlay-link:hover .overlay-label,.menu-nav-item:hover .menu-nav-text{color:var(--prim);transform:translateX(12px);}
.overlay-line,.menu-nav-line{flex:0;height:2px;background:var(--border);transition:all 0.9s var(--ease);border-radius:1px;}
.overlay-link:hover .overlay-line,.menu-nav-item:hover .menu-nav-line{flex:1;background:linear-gradient(90deg,var(--accent),var(--prim));max-width:80px;}

.overlay-sidebar,.menu-info{
  display:flex;flex-direction:column;gap:40px;
  padding-left:40px;border-left:1px solid var(--border);
  opacity:0;transform:translateY(20px);
  transition:all 0.5s var(--ease) 0.2s;
}
.overlay-menu.is-open .overlay-sidebar,.fullscreen-menu.active .menu-info{opacity:1;transform:translateY(0);}
.sidebar-brand,.menu-info-brand{font-family:var(--font-head);font-size:0.85rem;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:3px;}
.sidebar-group,.menu-info-section{display:flex;flex-direction:column;gap:12px;}
.sidebar-label,.menu-info-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--prim);margin-bottom:4px;}
.sidebar-row,.menu-info-item{display:flex;align-items:center;gap:14px;color:var(--text-muted);font-size:0.92rem;transition:color 0.3s;}
.sidebar-row:hover,.menu-info-item:hover{color:var(--accent);}
.sidebar-row svg,.menu-info-item svg{flex-shrink:0;color:var(--prim);opacity:0.6;}
.overlay-socials,.menu-socials{display:flex;gap:12px;}
.overlay-socials a,.menu-socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);transition:all 0.3s;}
.overlay-socials a:hover,.menu-socials a:hover{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}
.overlay-foot,.menu-bottom{padding:0 60px 40px;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity 0.5s 0.35s;}
.overlay-menu.is-open .overlay-foot,.fullscreen-menu.active .menu-bottom{opacity:1;}
.overlay-tagline,.menu-tagline{font-size:0.8rem;color:var(--text-faint);font-style:italic;}
.overlay-cta-link,.menu-cta{font-family:var(--font-mono);font-size:0.7rem;color:var(--prim);letter-spacing:2px;text-transform:uppercase;}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px;background:var(--bg-page);}
/* Gradient overlay: 90% opaque #f9f9f9 on left, fully transparent at top-right — reveals background image on right */
.hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(249,249,249,1) 20%, rgba(249,249,249,0.90) 35%, rgba(249,249,249,0.55) 65%, rgba(249,249,249,0) 100%);pointer-events:none;}
.hero-canvas,.hero-bg{z-index:0;}
.hero-body,.hero-content{position:relative;z-index:2;}
.glow-1,.hero-gradient-1,.glow-2,.hero-gradient-2,.glow-3,.hero-gradient-3,.hero-grid{z-index:0;}
.hero-bg,.hero-canvas{position:absolute;inset:0;z-index:0;}
.hero-bg::before,.hero-canvas::before{content:'';position:absolute;inset:0;background-image:url('../img/bg7.jpg');background-size:100% auto;background-position:right -200px top 0px;background-repeat:no-repeat;opacity:1;z-index:0;}
.glow-1,.hero-gradient-1{position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,var(--prim-a08) 0%,transparent 70%);top:-220px;right:-120px;animation:glow-float 16s ease-in-out infinite;}
.glow-2,.hero-gradient-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,var(--accent-a05) 0%,transparent 70%);bottom:-120px;left:-120px;animation:glow-float 20s ease-in-out infinite reverse;}
.glow-3,.hero-gradient-3{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,var(--prim-a05) 0%,transparent 70%);top:40%;left:35%;animation:glow-float 13s ease-in-out infinite;}
@keyframes glow-float{0%,100%{transform:translate(0,0)}33%{transform:translate(24px,-20px)}66%{transform:translate(-16px,16px)}}
.hero-grid{}
.hero-body,.hero-content{position:relative;z-index:2;max-width:880px;}

.hero-pill,.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;background:var(--accent-a08);border:1px solid var(--accent-a20);border-radius:100px;font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);letter-spacing:3px;text-transform:uppercase;margin-bottom:36px;animation:rise 0.8s var(--ease) both;}
.pill-dot,.badge-dot{width:6px;height:6px;background:var(--prim);border-radius:50%;animation:dot-pulse 1.5s infinite;}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}

.hero-body h1,.hero h1{font-family:var(--font-head);font-size:clamp(2.8rem,7.5vw,6rem);font-weight:800;line-height:1.02;color:var(--accent);margin-bottom:28px;animation:rise 0.8s var(--ease) 0.1s both;}
.hero-sub,.hero-desc{font-size:clamp(1rem,2vw,1.2rem);color:var(--text-muted);margin-bottom:44px;font-weight:300;line-height:1.75;animation:rise 0.8s var(--ease) 0.2s both;}
.hero-btns,.hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:rise 0.8s var(--ease) 0.3s both;}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.hero-metrics,.hero-stats{display:flex;gap:52px;margin-top:90px;padding-top:44px;border-top:1px solid var(--border);animation:rise 0.8s var(--ease) 0.4s both;}
.metric-val,.stat-number{font-family:var(--font-mono);font-size:2.2rem;font-weight:700;color:var(--accent);line-height:1;}
.metric-val .hi,.stat-number .accent{color:var(--prim);}
.metric-lbl,.stat-label{font-size:0.78rem;color:var(--text-faint);margin-top:6px;letter-spacing:0.02em;}

/* ── TICKER ───────────────────────────────────────────────── */
.ticker,.marquee-section{padding:34px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--bg-warm);}
.ticker-track,.marquee-track{display:flex;animation:ticker-scroll 28s linear infinite;gap:52px;width:max-content;}
.ticker-item,.marquee-item{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:4px;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;display:flex;align-items:center;gap:52px;font-weight:500;}
.ticker-item::after,.marquee-item::after{content:'✦';color:var(--prim);font-size:0.55rem;}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero{padding:160px 0 80px;position:relative;overflow:hidden;}
.page-hero .hero-gradient{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,var(--prim-a08) 0%,transparent 70%);top:-200px;right:-100px;pointer-events:none;}
.page-hero .section-label,.page-hero .eyebrow{animation:rise 0.7s var(--ease) 0.05s both;}
.page-hero h1.section-title,.page-hero h1.hdg-display{animation:rise 0.8s var(--ease) 0.15s both;}
.page-hero .section-subtitle,.page-hero .hdg-sub{animation:rise 0.8s var(--ease) 0.25s both;}
.page-hero .hero-cta{animation:rise 0.8s var(--ease) 0.35s both;}

/* ── ABOUT SECTION ────────────────────────────────────────── */
.about-section,.home-services-preview{padding:100px 0;}
.about-layout,.aboutus{display:flex;align-items:center;gap:4rem;}
.about-layout .about-img,.aboutus .left{flex-shrink:0;}
.about-layout .about-text,.aboutus .right{flex:1;}

/* ── SERVICE CARDS (legacy, homepage) ─────────────────────── */
.services-section,.svc-overview{padding:120px 0;}
.services-grid,.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;}

.card-svc,.service-card{
  background:var(--bg-surface);
  border:1.5px solid var(--border-light);
  border-radius:var(--r-lg);
  padding:36px 30px;
  transition:all 0.4s var(--ease);
  position:relative;overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;
  box-shadow:0 2px 16px var(--prim-a05);
}
.card-svc::before,.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--prim));opacity:0;transition:opacity 0.4s;}
.card-svc:hover,.service-card:hover{border-color:var(--border);transform:translateY(-5px);box-shadow:0 20px 60px var(--prim-a12);}
.card-svc:hover::before,.service-card:hover::before{opacity:1;}

.card-icon,.service-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);margin-bottom:26px;}
.card-icon.prim,.service-icon.green{background:var(--prim-a08);color:var(--prim);}
.card-icon.nav,.service-icon.purple{background:var(--accent-a08);color:var(--accent);}
.card-icon.warm,.service-icon.orange{background:var(--prim-a12);color:var(--prim-deep);}

.card-svc h3,.service-card h3{font-family:var(--font-head);font-size:1.2rem;font-weight:700;color:var(--accent);margin-bottom:10px;}
.card-svc p,.service-card p{color:var(--text-muted);font-size:0.88rem;line-height:1.65;margin-bottom:24px;flex:1;}
.card-cta,.service-card .card-link{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--prim);display:flex;align-items:center;gap:8px;transition:gap 0.3s;}
.card-svc:hover .card-cta,.service-card:hover .card-link{gap:14px;}

.detail-box,.service-detail-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:48px;margin-bottom:24px;}
.detail-box h3,.service-detail-card h3{font-family:var(--font-head);font-size:1.6rem;font-weight:700;color:var(--accent);margin-bottom:14px;}
.detail-box>p,.service-detail-card>p{color:var(--text-muted);line-height:1.75;margin-bottom:28px;font-size:0.95rem;}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.feature-list li{display:flex;align-items:flex-start;gap:14px;font-size:0.92rem;color:var(--text-body);line-height:1.5;}
.feature-list li svg{flex-shrink:0;margin-top:3px;color:var(--prim);}

/* ── CATEGORY BADGES ──────────────────────────────────────── */
.cat-badge{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:4px;text-transform:uppercase;padding:7px 18px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;font-weight:600;}
.cat-brend,.cat-warm{background:var(--prim-a08);color:var(--prim);border:1px solid var(--prim-a20);}
.cat-web,.cat-cool{background:var(--accent-a08);color:var(--accent);border:1px solid var(--accent-a20);}

/* ── PLANS PREVIEW (Homepage) ─────────────────────────────── */
.plans-preview-section,.home-packages-section{padding:100px 0 70px;position:relative;}
.plans-preview-section::before,.home-packages-section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:280px;background:radial-gradient(ellipse at top center,var(--accent-a05) 0%,transparent 70%);pointer-events:none;z-index:0;}
.plans-preview-section .container,.plans-preview-section .wrap,.home-packages-section .container{position:relative;z-index:1;}
.plans-preview-section .section-title::after,.home-packages-section .section-title::after{content:'';display:block;width:56px;height:3px;background:linear-gradient(90deg,var(--accent),var(--prim));border-radius:2px;margin:14px auto 0;}

.plan-previews,.preview-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}

.plan-preview,.preview-pkg-card{
  display:block;text-decoration:none;color:#fff;
  background:var(--bg-surface);
  border-radius:var(--r-lg);
  padding:34px 28px 28px;
  position:relative;overflow:hidden;
  transition:transform 0.4s var(--ease),box-shadow 0.5s ease,border-color 0.4s;
  cursor:pointer;
  box-shadow:0 2px 16px var(--prim-a05);
  min-height: 280px;
      flex-direction: column;
    display: flex;
    justify-content: space-between;
}
/* Solid colour backgrounds per package */
.plan-preview.plan-prim,.preview-pkg-card.pkg-green{background:var(--prim) !important;color:#fff !important;}
.plan-preview.plan-nav,.preview-pkg-card.pkg-purple{background:var(--accent) !important;color:#fff !important;}
.plan-preview.plan-auth,.preview-pkg-card.pkg-orange{background:var(--prim) !important;color:#fff !important;}
/* Icon wrapper */
.preview-pkg-card .p-icon{background:rgba(255,255,255,0.18) !important;}
/* "Recommended" badge inside growth card */
.pkg-purple-badge{position:absolute;top:16px;right:16px;z-index:10;padding:4px 14px;background:#fff;border-radius:100px;font-size:0.6rem;font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--accent);}
.plan-preview.plan-prim,.preview-pkg-card.pkg-green{border:none;animation:breathe-prim 4s ease-in-out infinite;}
.plan-preview.plan-nav,.preview-pkg-card.pkg-purple{border:none;animation:breathe-nav 4s ease-in-out infinite 0.8s;}
.plan-preview.plan-auth,.preview-pkg-card.pkg-orange{border:none;animation:breathe-auth 4s ease-in-out infinite 1.6s;}

@keyframes breathe-prim{0%,100%{box-shadow:0 8px 32px rgba(88,16,0,0.35)}50%{box-shadow:0 8px 40px rgba(88,16,0,0.50)}}
@keyframes breathe-nav{0%,100%{box-shadow:0 8px 32px rgba(21,29,81,0.35)}50%{box-shadow:0 8px 40px rgba(21,29,81,0.50)}}
@keyframes breathe-auth{0%,100%{box-shadow:0 8px 32px rgba(88,16,0,0.35)}50%{box-shadow:0 8px 40px rgba(88,16,0,0.50)}}

.plan-preview:hover,.preview-pkg-card:hover{transform:translateY(-10px);animation:none;}
.plan-preview.plan-prim:hover,.preview-pkg-card.pkg-green:hover{box-shadow:0 22px 55px rgba(88,16,0,0.45);}
.plan-preview.plan-nav:hover,.preview-pkg-card.pkg-purple:hover{box-shadow:0 22px 55px rgba(21,29,81,0.45);}
.plan-preview.plan-auth:hover,.preview-pkg-card.pkg-orange:hover{box-shadow:0 22px 55px rgba(88,16,0,0.45);}

.plan-preview .p-icon,.preview-pkg-card .p-icon{width:50px;height:50px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.plan-preview-label,.pkg-card-badge{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;}
.plan-preview h4,.preview-pkg-card h4{font-family:var(--font-head);font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.2;}
.plan-preview>p,.preview-pkg-card>p{font-size:0.85rem;color:rgba(255,255,255,0.75);line-height:1.6;margin-bottom:0;}
.plan-preview-link,.pkg-card-link{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:0.83rem;font-weight:600;color:#fff;transition:gap 0.3s var(--ease);}
.plan-preview:hover .plan-preview-link,.preview-pkg-card:hover .pkg-card-link{gap:14px;}

/* ── ALL SERVICES (usluge.php) ────────────────────────────── */
.all-services-section,.services-cards-section{padding:80px 0 120px;}
.svcs-grid,.services-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}

.svc-card,.service-card-new{
  background:var(--bg-surface);
  border:1.5px solid var(--border-light);
  border-radius:var(--r-lg);
  padding:36px 28px;
  transition:all 0.4s var(--ease);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 14px var(--prim-a05);
}
.svc-card::after,.service-card-new::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--prim),transparent);opacity:0;transition:opacity 0.4s;}
.svc-card.card-warm.service-card-new.orange-card::after{background:linear-gradient(90deg,transparent,var(--prim),transparent);}
.svc-card.card-cool,.service-card-new.purple-card::after{background:linear-gradient(90deg,transparent,var(--accent),transparent);}
.svc-card:hover,.service-card-new:hover{transform:translateY(-6px);box-shadow:0 20px 50px var(--prim-a12);}
.svc-card:hover::after,.service-card-new:hover::after{opacity:1;}

.svc-icon,.sc-icon{width:62px;height:62px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;margin-bottom:22px;padding:0;}
.svc-icon.prim,.sc-icon.green{background:transparent;color:var(--prim);}
.svc-icon.nav,.sc-icon.purple{background:transparent;color:var(--accent);}
.svc-icon.warm,.sc-icon.orange{background:transparent;color:var(--prim-deep);}

.svc-label,.sc-label{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;}
.svc-title,.sc-title{font-family:var(--font-head);font-size:1.2rem;font-weight:700;color:var(--accent);margin-bottom:12px;}
.svc-body,.sc-desc{font-size:0.85rem;color:var(--text-muted);line-height:1.65;flex:1;}
.svc-link,.sc-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:0.82rem;font-weight:600;color:var(--prim);text-decoration:none;transition:gap 0.3s;}
.svc-card.card-warm .svc-link,.service-card-new.orange-card .sc-link{color:var(--prim);}
.svc-card.card-cool .svc-link,.service-card-new.purple-card .sc-link{color:var(--accent);}
.svc-link:hover,.sc-link:hover{gap:14px;}

/* ── PLANS (paketi.php) ───────────────────────────────────── */
.plans-section,.packages-section{padding:120px 0;}
.plans-grid,.packages-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;align-items:start;}

.plan-card,.pkg-card{background:var(--bg-surface);border:1.5px solid var(--border-light);border-radius:var(--r-xl);overflow:hidden;transition:all 0.4s var(--ease);box-shadow:0 2px 16px var(--prim-a05);}
.plan-card:hover,.pkg-card:hover{transform:translateY(-8px);box-shadow:0 28px 70px var(--prim-a12);}
.plan-card.featured,.pkg-card.popular{border-color:var(--accent-a20);box-shadow:0 4px 40px var(--accent-a08);}

.plan-header,.pkg-header{padding:32px 32px 24px;position:relative;}
.plan-label,.pkg-badge-top{display:inline-block;padding:4px 14px;border-radius:100px;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:20px;}
.plan-label.prim,.pkg-badge-top.green{background:var(--prim-a08);color:var(--prim);border:1px solid var(--prim-a20);}
.plan-label.nav,.pkg-badge-top.purple{background:var(--accent-a08);color:var(--accent);border:1px solid var(--accent-a20);}
.plan-label.warm,.pkg-badge-top.orange{background:var(--prim-a08);color:var(--prim-deep);border:1px solid var(--prim-a20);}

.plan-name,.pkg-name{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--accent);letter-spacing:-0.04em;margin-bottom:8px;}
.plan-tagline,.pkg-tagline{font-size:0.82rem;color:var(--text-muted);line-height:1.5;}
.plan-divider,.pkg-divider{height:1px;background:var(--border-light);}

.plan-body,.pkg-body{padding:28px 32px;}
.plan-goal,.pkg-goal{background:var(--prim-a05);border:1px solid var(--border-light);border-radius:var(--r-xs);padding:14px 18px;margin-bottom:24px;}
.plan-goal-label,.pkg-goal-label{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:3px;color:var(--accent);text-transform:uppercase;margin-bottom:6px;font-weight:600;}
.plan-goal p,.pkg-goal p{font-size:0.82rem;color:var(--text-body);line-height:1.5;}

.plan-features,.pkg-features-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.plan-features li,.pkg-features-list li{display:flex;align-items:flex-start;gap:10px;font-size:0.85rem;color:var(--text-body);line-height:1.5;}
.plan-features li svg,.pkg-features-list li svg{flex-shrink:0;margin-top:2px;}

.plan-extras,.pkg-addons{border-top:1px solid var(--border-light);padding:20px 32px 24px;}
.extras-title,.pkg-addons-title{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px;font-weight:600;}
.extras-title::after,.pkg-addons-title::after{content:'';flex:1;height:1px;background:var(--border-light);}

.extra-item,.addon-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-xs);cursor:pointer;transition:background 0.2s;user-select:none;margin-bottom:4px;}
.extra-item:hover,.addon-row:hover{background:var(--prim-a05);}
.extra-item.active,.addon-row.active{background:var(--prim-a08);}
.extra-item.active-alt,.addon-row.active-purple{background:var(--accent-a05);}
.extra-item.active-orange,.addon-row.active-orange{background:var(--prim-a08);}
.extra-item.disabled,.addon-row.disabled{opacity:0.3;pointer-events:none;}

.extra-check{width:20px;height:20px;border:1.5px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;}
.extra-item.active .extra-tick,.extra-item.active-alt .extra-tick,.extra-item.active-orange .extra-tick,
/* addon-cb-icon unused */
.extra-label,.addon-text{font-size:0.82rem;color:var(--text-muted);flex:1;line-height:1.4;}
.extra-item.active .extra-label,.extra-item.active-alt .extra-label,.extra-item.active-orange .extra-label,
.addon-row.active .addon-text,.addon-row.active-purple .addon-text,.addon-row.active-orange .addon-text{color:var(--text-strong);}

.plan-cta,.pkg-cta{padding:0 32px 32px;}
.plan-btn,.pkg-select-btn-new{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border:none;border-radius:var(--r-sm);font-family:var(--font-body);font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.3s;}
.plan-btn.prim,.pkg-select-btn-new.green{background:var(--prim);color:#fff;}
.plan-btn.nav,.pkg-select-btn-new.purple{background:var(--accent);color:#fff;}
.plan-btn.warm,.pkg-select-btn-new.orange{background:var(--prim-deep);color:#fff;}
.plan-btn:hover,.pkg-select-btn-new:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,0.25);filter:brightness(1.08);}

/* ── REVIEWS ──────────────────────────────────────────────── */
.reviews-section,.testimonials-section{padding:60px 0 80px;position:relative;overflow:hidden;}
.reviews-section::before,.testimonials-section::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--accent-a05) 0%,transparent 70%);top:-200px;right:-200px;pointer-events:none;}
.reviews-grid,.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;}

.review-card,.testi-card{background:var(--bg-surface);border:1.5px solid var(--border-light);border-radius:var(--r-lg);padding:28px 24px;position:relative;transition:all 0.4s var(--ease);overflow:hidden;box-shadow:0 2px 12px var(--prim-a05);}
.review-card::before,.testi-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--prim-a05) 0%,transparent 60%);opacity:0;transition:opacity 0.4s;}
.review-card:hover,.testi-card:hover{border-color:var(--prim-a20);transform:translateY(-6px);box-shadow:0 16px 44px var(--prim-a12);}
.review-card:hover::before,.testi-card:hover::before{opacity:1;}

.review-quote,.testi-quote{font-size:5rem;font-family:Georgia,serif;color:var(--prim);line-height:0.7;margin-bottom:20px;opacity:0.25;display:block;}
.review-stars,.testi-stars{display:flex;gap:4px;margin-bottom:18px;}
.review-stars svg,.testi-stars svg{color:var(--gold);fill:var(--gold);}
.review-body,.testi-text{font-size:0.88rem;color:var(--text-muted);line-height:1.75;margin-bottom:20px;font-weight:300;}
.review-author,.testi-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border-light);padding-top:16px;}
.review-avatar,.testi-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:1rem;color:#fff;flex-shrink:0;}
.review-avatar.prim,.testi-avatar.green{background:var(--prim);}
.review-avatar.nav,.testi-avatar.purple{background:var(--accent);}
.review-avatar.warm,.testi-avatar.orange{background:var(--prim-deep);}
.review-name,.testi-name{font-weight:700;color:var(--accent);font-size:0.9rem;}
.review-role,.testi-role{font-size:0.75rem;color:var(--text-faint);margin-top:2px;font-family:var(--font-mono);letter-spacing:1px;}
.review-tag,.testi-tag{display:inline-block;padding:4px 12px;background:var(--accent-a05);border:1px solid var(--accent-a20);border-radius:100px;font-size:0.68rem;color:var(--accent);font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;margin-left:auto;}

/* ── WHY US ───────────────────────────────────────────────── */
.reasons-section,.whyus-section{padding:80px 0;background:var(--bg-warm);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.reasons-grid,.whyus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:60px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;}
.reason,.whyus-item{background:white;padding:40px 32px;transition:background 0.3s;}
.reason:hover,.whyus-item:hover{background:var(--bg-surface); opacity: 0.9;}
.reason-num,.whyus-num{font-family:var(--font-head);font-size:3.5rem;font-weight:800;color:var(--prim);opacity:0.15;line-height:1;margin-bottom:16px;}
.reason-title,.whyus-title{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:10px;}
.reason-body,.whyus-desc{font-size:0.83rem;color:var(--text-muted);line-height:1.65;}

/* ── PROCESS ──────────────────────────────────────────────── */
.process-section{padding:80px 0 80px;}
.steps-grid,.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative;}
.steps-grid::before,.process-grid::before{content:'';position:absolute;top:40px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border),var(--text-faint),var(--border),transparent);}
.step,.process-step{text-align:center;padding:0 20px;position:relative;}
.step-num,.process-num{width:80px;height:80px;border-radius:50%;border:1px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--text-faint);transition:all 0.4s var(--ease);position:relative;z-index:2;}
.step:hover .step-num,.process-step:hover .process-num{border-color:var(--accent);color:white;background:var(--accent);box-shadow:0 0 28px var(--accent-a12);}
.step-icon,.process-icon{width:32px;height:32px;margin:0 auto 14px;color:var(--prim);opacity:0.7;}
.step-title,.process-title{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:10px;}
.step-body,.process-desc{font-size:0.82rem;color:var(--text-muted);line-height:1.65;}

/* ── SERVICE DETAIL PAGES ─────────────────────────────────── */
.svc-hero,.service-hero{padding:160px 0 80px;position:relative;overflow:hidden;}
.svc-hero .hero-gradient,.service-hero .hero-gradient{position:absolute;width:500px;height:500px;border-radius:50%;top:-200px;right:-100px;pointer-events:none;}
.svc-content,.service-content-section{padding:0 0 80px;}
.svc-content-grid,.service-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.svc-text h2,.service-content-text h2{font-family:var(--font-head);font-size:1.8rem;font-weight:800;color:var(--accent);margin-bottom:18px;letter-spacing:-0.02em;}
.svc-text p,.service-content-text p{color:var(--text-muted);line-height:1.75;margin-bottom:16px;font-size:0.95rem;}
.svc-features,.service-features-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;}
.svc-features h3,.service-features-box h3{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--prim);margin-bottom:20px;font-weight:700;}
.feature-row,.service-feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-light);}
.feature-row:last-child,.service-feature-item:last-child{border-bottom:none;}
.feature-row svg,.service-feature-item svg{flex-shrink:0;margin-top:2px;}
.feature-row span,.service-feature-item span{font-size:0.88rem;color:var(--text-body);line-height:1.55;}
.svc-form-section,.service-form-section{padding:80px 0 120px;background:var(--bg-warm);border-top:1px solid var(--border);}
.svc-form-box,.service-form-box{max-width:720px;margin:0 auto;}
.svc-form-box .form-card,.service-form-box .contact-form{border-radius:var(--r-xl);padding:48px;}

/* ── PORTFOLIO ────────────────────────────────────────────── */
.work-section,.portfolio-section{padding:80px 0 120px;}
.work-filters,.portfolio-filters{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;}
.filter-pill,.filter-btn{padding:9px 22px;border:1.5px solid var(--border);background:transparent;border-radius:100px;font-family:var(--font-body);font-size:0.8rem;color:var(--text-faint);cursor:pointer;transition:all 0.3s;}
.filter-pill:hover,.filter-btn:hover{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}
.filter-pill.active,.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

.work-grid,.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.work-item,.portfolio-item{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;}
.work-item img,.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease);}
.work-item:hover img,.portfolio-item:hover img{transform:scale(1.08);}
.work-overlay,.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(21,29,81,0.92) 0%,rgba(21,29,81,0.3) 60%,transparent 100%);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity 0.4s;}
.work-item:hover .work-overlay,.portfolio-item:hover .portfolio-overlay{opacity:1;}
.work-client,.client-name{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;color:#9BBFF0;margin-bottom:6px;}
.work-overlay h3,.portfolio-overlay h3{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:6px;}
.work-overlay p,.portfolio-overlay p{font-size:0.78rem;color:rgba(255,255,255,0.7);line-height:1.5;margin-bottom:12px;}
.work-tags,.portfolio-tags{display:flex;gap:6px;flex-wrap:wrap;}
.work-tags span,.portfolio-tags span{padding:4px 10px;background:rgba(255,255,255,0.12);border-radius:100px;font-size:0.68rem;color:rgba(255,255,255,0.85);}

/* ── CTA SECTION ──────────────────────────────────────────── */
.cta-section,.home-cta{padding:120px 0;text-align:center;position:relative;overflow:hidden;}
.cta-bg,.cta-animated-bg{position:absolute;inset:0;background:var(--bg-warm);}
.cta-bg::before,.cta-animated-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 70% at 12% 50%,var(--prim-a08) 0%,transparent 65%),radial-gradient(ellipse 65% 70% at 88% 50%,var(--accent-a08) 0%,transparent 65%);animation:cta-breathe 8s ease-in-out infinite alternate;}
@keyframes cta-breathe{0%{opacity:0.5}100%{opacity:1}}
.cta-edge-top,.cta-border-top,.cta-edge-bottom,.cta-border-bottom{position:absolute;left:0;right:0;height:1.5px;animation:edge-fade 5s ease-in-out infinite alternate;}
.cta-edge-top,.cta-border-top{top:0;background:linear-gradient(90deg,transparent,var(--accent-a30),var(--prim-a30),transparent);}
.cta-edge-bottom,.cta-border-bottom{bottom:0;background:linear-gradient(90deg,transparent,var(--prim-a30),var(--accent-a30),transparent);animation-direction:reverse;}
.cta-edge-left,.cta-border-left,.cta-edge-right,.cta-border-right{position:absolute;top:0;bottom:0;width:1.5px;animation:edge-fade 7s ease-in-out infinite alternate;}
.cta-edge-left,.cta-border-left{left:0;background:linear-gradient(180deg,transparent,var(--prim-a20),transparent);}
.cta-edge-right,.cta-border-right{right:0;background:linear-gradient(180deg,transparent,var(--accent-a20),transparent);animation-direction:reverse;}
@keyframes edge-fade{0%{opacity:0.4}100%{opacity:1}}
.cta-section .container,.cta-section .wrap,.home-cta .container{position:relative;z-index:2;}
.cta-section h2,.home-cta h2{font-family:var(--font-head);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:#000;margin-bottom:18px;letter-spacing:-0.03em;line-height:1.3em;}
.cta-section p,.home-cta p{color:var(--text-muted);font-size:1.05rem;max-width:500px;margin:0 auto 36px;}

/* ── CONTACT / BOOKING / FORM ─────────────────────────────── */
.booking-section{padding-top:40px; padding-bottom:40px;}
.booking-layout,.booking-wrapper{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start;}
.contact-list,.contact-details{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;}
.contact-row,.contact-detail-item{display:flex;align-items:center;gap:14px;color:var(--text-body);font-size:0.9rem;}
.icon-box,.icon-wrap{width:42px;height:42px;border-radius:var(--r-xs);background:var(--accent-a08);border:1px solid var(--accent-a20);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);}

.cal-box,.booking-calendar-box{background:var(--bg-surface);border:1.5px solid var(--border-light);border-radius:var(--r-xl);padding:40px;box-shadow:0 2px 16px var(--prim-a05);}
.cal-head,.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.cal-month-label,.cal-month{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--accent);}
.cal-nav,.cal-nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}
.cal-nav:hover,.cal-nav-btn:hover{border-color:var(--prim);color:var(--prim);}
.cal-days,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day-hd,.cal-day-name{text-align:center;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);padding:8px 0;}
.cal-cell,.cal-day{text-align:center;padding:10px 4px;font-size:0.82rem;border-radius:var(--r-xs);cursor:pointer;transition:all 0.2s;color:var(--text-muted);border:1px solid transparent;}
.cal-cell.cal-other,.cal-day.other-month{color:var(--border);cursor:default;}
.cal-cell.cal-today,.cal-day.today{color:var(--accent);border-color:var(--accent-a20);font-weight:600;}
.cal-cell.cal-open:hover,.cal-day.available:hover{background:var(--accent-a08);border-color:var(--accent-a20);color:var(--accent);}
.cal-cell.selected,.cal-day.selected{background:var(--prim);color:#fff;font-weight:700;border-color:var(--prim);}
.cal-cell.cal-past,.cal-day.past,.cal-cell.cal-wknd,.cal-day.weekend{color:var(--border);cursor:not-allowed;}

.slots,.time-slots{margin-top:28px;}
.slots-label,.time-slots-label{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;}
.slots-grid,.time-slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.slot-btn,.time-slot-btn{padding:10px 8px;background:transparent;border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text-muted);font-size:0.78rem;cursor:pointer;transition:all 0.2s;text-align:center;font-family:var(--font-mono);}
.slot-btn:hover,.time-slot-btn:hover{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}
.slot-btn.selected,.time-slot-btn.selected{background:var(--prim);border-color:var(--prim);color:#fff;font-weight:700;}
.slot-btn.loading,.time-slot-btn.loading{animation:pulse-slot 1s infinite;}
@keyframes pulse-slot{0%,100%{opacity:.4}50%{opacity:1}}

.booking-form,.booking-form-box{background:var(--bg-surface);border:1.5px solid var(--border-light);border-radius:var(--r-xl);padding:40px;box-shadow:0 2px 16px var(--prim-a05);}
.booking-display,.booking-selected-display{background:var(--accent-a05);border:1px solid var(--accent-a20);border-radius:var(--r-sm);padding:14px 18px;margin-bottom:24px;font-size:0.85rem;color:var(--accent);font-family:var(--font-mono);letter-spacing:1px;display:none;}
.booking-display.visible,.booking-selected-display.visible{display:block;}
.method-group,.contact-method-group{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.method-btn,.contact-method-btn{padding:14px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.3s;text-align:center;font-size:0.82rem;display:flex;flex-direction:column;align-items:center;gap:6px;}
.method-btn svg,.contact-method-btn svg{width:20px;height:20px;}
.method-btn.active,.contact-method-btn.active{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}
.method-btn span,.contact-method-btn span{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:1px;text-transform:uppercase;}

.contact-section{padding:80px 0 120px;}
.contact-layout,.contact-wrapper{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;}
.contact-meta,.contact-info{} 
.contact-meta h2,.contact-info h2{font-family:var(--font-head);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.08;color:var(--accent);margin-bottom:20px;letter-spacing:-0.02em;}
.contact-meta>p,.contact-info>p{color:var(--text-muted);font-size:1rem;line-height:1.75;margin-bottom:44px;}

.form-card,.contact-form{background:var(--bg-surface);border:1.5px solid var(--border-light);border-radius:var(--r-xl);padding:44px;box-shadow:0 2px 20px var(--prim-a05);}
.field-row,.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-wrap,.form-group{margin-bottom:16px;}
.field-wrap label,.form-group label{display:block;font-family:var(--font-mono);font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.field-wrap input,.field-wrap select,.field-wrap textarea,
.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 16px;background:var(--bg-page);border:1.5px solid var(--border);border-radius:var(--r-xs);color:var(--text-body);font-family:var(--font-body);font-size:0.9rem;transition:border-color 0.3s,box-shadow 0.3s;outline:none;}
.field-wrap input:focus,.field-wrap select:focus,.field-wrap textarea:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--prim);box-shadow:0 0 0 3px var(--prim-a08);}
.field-wrap textarea,.form-group textarea{height:110px;resize:vertical;}
.field-wrap select,.form-group select{appearance:none;cursor:pointer;}
.field-wrap select option,.form-group select option{background:var(--bg-surface);}

.form-btn,.form-submit{width:100%;padding:16px;background:var(--prim);color:#fff;font-family:var(--font-body);font-size:0.95rem;font-weight:700;border:none;border-radius:var(--r-sm);cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;}
.form-btn:hover,.form-submit:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 12px 36px var(--prim-a30);}
.form-status,.form-message{margin-top:16px;padding:14px;border-radius:var(--r-xs);font-size:0.88rem;text-align:center;display:none;}
.form-status.success,.form-message.success{display:block;background:var(--accent-a05);border:1px solid var(--accent-a20);color:var(--accent);}
.form-status.error,.form-message.error{display:block;background:rgba(200,40,40,0.06);border:1px solid rgba(200,40,40,0.2);color:#c43030;}

.selected-svcs,.form-selected-services{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:32px;}
.svc-tag,.selected-service-tag{padding:6px 14px;background:var(--prim-a08);border:1px solid var(--prim-a20);border-radius:100px;font-size:0.78rem;color:var(--prim);display:flex;align-items:center;gap:8px;}

/* ── CHIPS ────────────────────────────────────────────────── */
.chip,.svc-chip{display:inline-flex !important;align-items:center !important;gap:8px !important;padding:8px 16px !important;border:1.5px solid var(--border);border-radius:100px;cursor:pointer;font-size:0.8rem;color:var(--text-faint);transition:all .25s;user-select:none;margin-bottom:4px;line-height:1;vertical-align:middle;}
.chip:hover,.svc-chip:hover{border-color:var(--border);color:var(--text-muted);}
.chip.chip-on,.svc-chip.on{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}
.chip-check,.chip-box{width:16px !important;height:16px !important;min-width:16px !important;border:1.5px solid var(--border);border-radius:4px;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0;transition:all .2s;}
.chip.chip-on .chip-check,.svc-chip.on .chip-box{background:var(--prim);border-color:var(--prim);}
.chip.chip-on .chip-check svg,.svc-chip.on .chip-box svg{display:block !important;}
.chip-check svg,.chip-box svg{display:none !important;}
.chip-cb{display:none;}
.chip-list,.chips-wrap{display:flex;flex-wrap:wrap;gap:8px;}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer,.footer{padding:72px 0 36px;border-top:1px solid var(--border);background:var(--bg-page);}
.footer-grid,.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px;}
.footer-about .footer-brand p,.footer-brand p{color:var(--accent);font-size:0.88rem;line-height:1.65;max-width:300px;margin-top:18px;opacity:0.7;}
.footer-nav h4,.footer-col h4{font-size:0.68rem;font-family:var(--font-mono);letter-spacing:3px;text-transform:uppercase;color:var(--prim);margin-bottom:22px;font-weight:700;}
.footer-nav a,.footer-col a{display:block;color:var(--accent);font-size:0.88rem;margin-bottom:12px;transition:color 0.3s;opacity:0.75;}
.footer-nav a:hover,.footer-col a:hover{color:var(--prim);opacity:1;}
.footer-bar,.footer-bottom{padding-top:32px;border-top:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center;}
.footer-bar p,.footer-bottom p{font-size:0.78rem;color:var(--accent);opacity:0.6;}
.social-links,.footer-socials{display:flex;gap:12px;}
.social-links a,.footer-socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:0.6;transition:all 0.3s;}
.social-links a:hover,.footer-socials a:hover{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);opacity:1;}

/* ── MISC / LEGACY ────────────────────────────────────────── */
.noise{display:none;}
.accent-green,.accent-primary{color:var(--prim);}
.accent-teal,.accent-secondary{color:var(--accent);}
.accent-orange,.accent-dark{color:var(--prim-deep);}

/* legacy packages (old paketi) */
.packages-section-index{padding:60px 0;position:relative;}
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:72px;position:relative;z-index:1;}
.package-card{background:var(--bg-surface);border:2px solid var(--border-light);border-bottom:0 !important;border-radius:32px 32px 0 0;padding:44px 32px;position:relative;transition:all 0.4s var(--ease);display:flex;flex-direction:column;}
.package-addon{background:var(--bg-subtle);border:2px solid var(--border-light);border-radius:0 0 32px 32px;padding:44px 32px;position:relative;transition:all 0.4s var(--ease);display:flex;flex-direction:column;}
.package-card:hover{transform:translateY(-6px);box-shadow:0 28px 80px var(--prim-a12);}
.package-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 22px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:0.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:100px;}
.package-name{font-family:var(--font-head);font-size:2.5rem;font-weight:700;margin-bottom:8px;}
.package-subtitle{font-size:0.88rem;color:var(--text-muted);margin-bottom:24px;line-height:1.5;min-height:44px;}
.package-price-note{font-size:0.82rem;color:var(--text-faint);margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.package-features{list-style:none;flex:1;display:flex;flex-direction:column;gap:13px;margin-bottom:36px;}
.package-features li{font-size:0.88rem;color:var(--text-body);display:flex;align-items:flex-start;gap:12px;line-height:1.45;}
.package-select-btn{width:100%;padding:16px;border-radius:var(--r-sm);font-family:var(--font-body);font-weight:600;font-size:0.92rem;cursor:pointer;transition:all 0.3s var(--ease);text-align:center;border:none;letter-spacing:0.01em;}
.package-select-btn.outline{background:transparent;border:1px solid var(--border);color:var(--text-body);}
.package-select-btn.outline:hover{border-color:var(--prim);color:var(--prim);background:var(--prim-a05);}
.package-select-btn.filled{color:#fff;border:none;}
.package-select-btn.selected{background:var(--prim) !important;color:#fff !important;border-color:var(--prim) !important;}
.addons-area{padding-top:56px;border-top:1px solid var(--border);position:relative;z-index:1;}
.addons-title{font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--accent);margin-bottom:8px;}
.addons-subtitle{color:var(--text-muted);margin-bottom:36px;font-size:0.92rem;}
.addons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.addon-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:22px 24px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:16px;}
.addon-card:hover{border-color:var(--border);}
.addon-card.selected{border-color:var(--prim);background:var(--prim-a05);}
.addon-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s;}
.addon-card.selected .addon-check{background:var(--prim);border-color:var(--prim);}
.addon-info h4{font-size:0.92rem;font-weight:600;color:var(--accent);margin-bottom:2px;}
.addon-info p{font-size:0.75rem;color:var(--text-faint);}

/* Preview grid (home small cards) */
.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;}
.preview-item,.preview-card{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--r-lg);padding:32px 24px;transition:all 0.35s;text-align:center;box-shadow:0 2px 10px var(--prim-a05);}
.preview-item:hover,.preview-card:hover{border-color:var(--border);transform:translateY(-4px);}
.preview-item .p-icon,.preview-card .p-icon{width:50px;height:50px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.preview-item h4,.preview-card h4{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--accent);margin-bottom:6px;}
.preview-item p,.preview-card p{font-size:0.8rem;color:var(--text-muted);line-height:1.5;}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1200px){
  .plan-previews,.preview-pkg-grid{grid-template-columns:1fr 1fr;}
  .plan-previews .plan-preview:last-child,.preview-pkg-grid .preview-pkg-card:last-child{grid-column:span 2;max-width:440px;margin:0 auto;}
}
@media(max-width:1100px){
  .reviews-grid,.testimonials-grid{grid-template-columns:1fr 1fr;}
  .svcs-grid,.services-cards-grid{grid-template-columns:1fr 1fr;}
  .plans-grid,.packages-grid-new{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}
  .booking-layout,.booking-wrapper{grid-template-columns:1fr;}
  .steps-grid,.process-grid{grid-template-columns:1fr 1fr;gap:40px;}
  .steps-grid::before,.process-grid::before{display:none;}
  .svc-content-grid,.service-content-grid{grid-template-columns:1fr;}
  .reasons-grid,.whyus-grid{grid-template-columns:1fr 1fr;}
  .lang-toggle,.lang-switcher{display:none;}
  .contact-layout,.contact-wrapper{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .plan-previews,.preview-pkg-grid{grid-template-columns:1fr;}
  .plan-previews .plan-preview:last-child,.preview-pkg-grid .preview-pkg-card:last-child{grid-column:span 1;max-width:100%;}
  .footer-grid,.footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
.hero-bg::before,.hero-canvas::before{background-size: cover !important;background-position:top left;}
  .reviews-grid,.testimonials-grid{grid-template-columns:1fr;}
  .svcs-grid,.services-cards-grid{grid-template-columns:1fr;}
  .steps-grid,.process-grid{grid-template-columns:1fr 1fr;}
  .booking-layout,.booking-wrapper{grid-template-columns:1fr;}
  .cal-box,.booking-calendar-box,.booking-form,.booking-form-box{padding:24px 18px;}
  .form-card,.contact-form{padding:28px 20px;}
  .svc-form-box .form-card,.service-form-box .contact-form{padding:28px 20px;}
  .field-row,.form-row{grid-template-columns:1fr;}
  .work-grid,.portfolio-grid{grid-template-columns:1fr 1fr;}
  .reasons-grid,.whyus-grid{grid-template-columns:1fr;}
  .plan-header,.pkg-header,.plan-body,.pkg-body,.plan-extras,.pkg-addons,.plan-cta,.pkg-cta{padding-left:20px;padding-right:20px;}
  .nav-cta,.nav-contact-btn{display:none;}
  .method-group,.contact-method-group{grid-template-columns:1fr 1fr;}
  .slots-grid,.time-slots-grid{grid-template-columns:repeat(3,1fr);}
  .about-layout,.aboutus{flex-direction:column !important;}
  .about-layout .about-img,.aboutus .left{width:100% !important;}
  .about-layout .about-text,.aboutus .right{width:100% !important;}
  .overlay-body,.menu-content{grid-template-columns:1fr;padding:100px 24px 40px;gap:24px;}
  .overlay-sidebar,.menu-info{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:24px;}
  .overlay-foot,.menu-bottom{padding:0 24px 28px;}
  .overlay-label,.menu-nav-text{font-size:2rem;}
  .overlay-num,.menu-nav-number{font-size:1rem;}
  .nav-bar.nav-scrolled,.navbar.scrolled{background:rgba(243,238,230,0.97) !important;z-index:9000 !important;}
  .preview-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .container,.wrap{padding:0 16px;}
  .hero{padding:100px 0 60px;}
  .section-head,.section-header{margin-bottom:44px;}
  .overlay-foot,.menu-bottom{flex-direction:column;gap:12px;}
  .slots-grid,.time-slots-grid{grid-template-columns:repeat(2,1fr);}
  .method-group,.contact-method-group{grid-template-columns:1fr;}
  .plan-previews,.preview-pkg-grid{grid-template-columns:1fr;}
  .plan-preview,.preview-pkg-card{padding:24px 18px;}
  .chip-list,.chips-wrap{gap:6px;}
  .chip,.svc-chip{padding:7px 12px !important;font-size:0.75rem !important;}
  .hero-metrics,.hero-stats{gap:24px;flex-wrap:wrap;}
  /* HAMBURGER FIX */
  .nav-end,.nav-right{gap:10px;}
  .lang-toggle,.lang-switcher{display:none !important;}
  .burger,.menu-toggle{width:40px;height:40px;}
  .work-grid,.portfolio-grid{grid-template-columns:1fr;}
  .steps-grid,.process-grid{grid-template-columns:1fr;}
  .footer-grid,.footer-top{grid-template-columns:1fr;}
  .footer-bar,.footer-bottom{flex-direction:column;gap:16px;text-align:center;}
  .preview-grid{grid-template-columns:1fr;}
  .packages-grid{grid-template-columns:1fr;max-width:500px;margin-left:auto;margin-right:auto;}
}

/* menu-open body lock (JS uses this class) */
body.menu-open { overflow: hidden; }

/* ============================================================
   MOBILE OPTIMIZATION — Kompletna mobilna prilagodba
   ============================================================ */

/* ── HERO — mobilna pozadinska slika ──────────────────────── */
@media(max-width:768px){
  .hero-bg::before,.hero-canvas::before{
    background-size:cover !important;
    background-position:center top !important;
    opacity:0.25 !important;
  }
  .hero h1,.hero-body h1{font-size:clamp(2rem,8vw,3.2rem);}
  .hero-desc,.hero-sub{font-size:0.92rem;}
  .hero-actions,.hero-btns{flex-direction:column;align-items:flex-start;}
  .hero-actions .btn,.hero-btns .btn{width:100%;justify-content:center;}
}

/* ── ABOUT — slika i tekst na mobilu ─────────────────────── */
@media(max-width:768px){
  .aboutus,.about-layout{
    flex-direction:column !important;
    gap:2rem !important;
  }
  .aboutus .left,.about-layout .about-img{
    width:100% !important;
    max-height:280px;
    overflow:hidden;
    border-radius:var(--r-lg);
  }
  .aboutus .left img,.about-layout .about-img img{
    width:100%;
    height:280px;
    object-fit:cover;
    object-position:center top;
    border-radius:var(--r-lg);
  }
  .aboutus .right,.about-layout .about-text{
    width:100% !important;
    padding-bottom:40px !important;
    padding-top:0px !important;
  }
}

/* ── PACKAGE PREVIEW CARDS — mobilna slika pozadine ──────── */
@media(max-width:768px){
  .preview-pkg-card{
    min-height:200px;
    padding:24px 20px 24px !important;
  }
  .preview-pkg-card .pkg-bg-img{
    object-position:center center !important;
  }
  .preview-pkg-card > div[style*="max-width"]{
    max-width:100% !important;
  }
}

/* ── SECTION TITLES — mobilna veličina ───────────────────── */
@media(max-width:600px){
  .section-title{font-size:clamp(1.6rem,6vw,2.2rem);}
  .page-hero{padding:120px 0 50px;}
  .page-hero h1{font-size:clamp(1.8rem,7vw,2.5rem);}
}

/* ── PACKAGES PAGE — paket kartice na mobilu ─────────────── */
@media(max-width:600px){
  .packages-grid-new,.plans-grid{
    grid-template-columns:1fr !important;
    max-width:100% !important;
  }
  .pkg-card,.plan-card{border-radius:var(--r-lg);}
}

/* ── BOOKING / CONTACT FORM na mobilu ────────────────────── */
@media(max-width:600px){
  .booking-wrapper,.booking-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:32px;
  }
  .booking-info,.booking-form-box,.cal-box{width:100% !important;}
  .booking-section{padding:40px 0 60px;}
}

/* ── TESTIMONIALS — centriranje kontrola ─────────────────── */
@media(max-width:580px){
  .testi-slider-controls{gap:10px;margin-top:28px;}
  .testi-card{padding:22px 18px;}
  .testi-quote{font-size:3rem;top:12px;right:16px;}
}

/* ── FOOTER na mobilu ────────────────────────────────────── */
@media(max-width:480px){
  .footer-grid,.footer-top{gap:32px;}
  .footer-brand{margin-bottom:8px;}
}

/* ── CTA SEKCIJA na mobilu ────────────────────────────────── */
@media(max-width:600px){
  .home-cta{padding:60px 0;}
  .home-cta h2{font-size:clamp(1.8rem,7vw,2.4rem);}
  .home-cta > .container > div[style*="flex"]{flex-direction:column;align-items:center;}
  .home-cta .btn{width:100%;max-width:320px;justify-content:center;}
}

/* ── NAV na mobilu — konzistentan brend ───────────────────── */
@media(max-width:768px){
  .navbar{padding:10px 0 !important;background:rgba(243,238,230,0.97) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
  .navbar .container{padding:0 28px;}
  .nav-logo img{height:32px;}
}

/* ── HERO METRICS — statistike na mobilu ─────────────────── */
@media(max-width:480px){
  .hero-metrics,.hero-stats{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:16px !important;
    margin-top:40px;
  }
  .metric,.stat-item{text-align:center;}
}

/* ── USLUGE PAGE — service cards na mobilu ───────────────── */
@media(max-width:600px){
  .svcs-grid,.services-cards-grid{grid-template-columns:1fr !important;}
  .svc-card,.service-card-full{padding:24px 20px;}
}

/* ── WHY US GRID na mobilu ───────────────────────────────── */
@media(max-width:600px){
  .reasons-grid,.whyus-grid{grid-template-columns:1fr !important;}
}

/* ── PROCESS STEPS na mobilu ─────────────────────────────── */
@media(max-width:600px){
  .steps-grid,.process-grid{grid-template-columns:1fr !important;}
}

/* ── KONTAKT PAGE — select styling ───────────────────────── */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23581000' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px !important;
}
select:focus{
  outline:none;
  border-color:var(--prim) !important;
  box-shadow:0 0 0 3px var(--prim-a12) !important;
}

/* ============================================================
   HERO / SLIDER — v15 RUSTIC LOOK OVERRIDE
   Paleta: Floral White ivory · Carbon Black · Maroon-only gradients
   ============================================================ */
.hero{
  background:#F3EEE6 !important;        /* Floral White / ivory */
}
.hero::after{display:none !important;}  /* Remove right-side fade overlay */
.hero-bg::before,.hero-canvas::before{
  background-image:url('../img/bg7.jpg') !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  opacity:0.4 !important;
}
@media(min-width:1200px){
  .hero-bg::before,.hero-canvas::before{
    background-size:100% auto !important;
    background-position:top left !important;
  }
}
.hero-grid{
  background-image:linear-gradient(rgba(26,16,8,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(26,16,8,0.018) 1px,transparent 1px) !important;
}
/* Glow / radial gradients — sve maroon tonove */
.hero-gradient-1,.glow-1{background:radial-gradient(circle,rgba(88,16,0,0.10) 0%,transparent 70%) !important;}
.hero-gradient-2,.glow-2{background:radial-gradient(circle,rgba(88,16,0,0.06) 0%,transparent 70%) !important;}
.hero-gradient-3,.glow-3{background:radial-gradient(circle,rgba(88,16,0,0.05) 0%,transparent 70%) !important;}

/* H1 i tekst — tamna toplo crna kao u v15 */
.hero h1,.hero-body h1{
  color:#1A1008 !important;             /* Carbon Black warm */
}
.hero-desc,.hero-sub{
  color:#000 !important;
  opacity:1 !important;
  font-weight: 500;
}

/* Gradijenti unutar hera — ISKLJUČIVO maroon paleta (kao v15) */
.hero .gradient-green{
  background:linear-gradient(135deg,#581000,#7A1800) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.hero .gradient-orange{
  background:linear-gradient(135deg,#7A1800,#3D0B00) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.hero .gradient-purple{
  background:linear-gradient(135deg,#581000,#7A1800) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

/* Hero btn-primary — maroon na ivory */
.hero .btn-primary{
  background:#581000 !important;
  color:#F3EEE6 !important;
}
.hero .btn-primary:hover{
  background:#1A1008 !important;
  box-shadow:0 14px 44px rgba(88,16,0,0.20) !important;
}


/* ── LOGO SVG ────────────────────────────────────────────── */
.nav-logo { display:flex; align-items:center; }
.logo-img { display:block; height:36px; width:auto; object-fit:contain; }

/* Logo in the fullscreen menu (dark background) — invert to white */
.menu-logo-img {
  height:32px; width:auto; max-width:160px; display:block;
}

/* ── PKG CARD BACKGROUND IMAGES ─────────────────────────── */
.preview-pkg-card {
  position:relative !important;
  overflow:hidden !important;
}
.preview-pkg-card .pkg-bg-img {
  position:absolute;
  inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0.8;
  transition:opacity 0.4s;
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:0;
}
.preview-pkg-card:hover .pkg-bg-img { opacity:0.32; }
.preview-pkg-card > *:not(.pkg-bg-img) {z-index:1; }
/* badge must always be on top */
.preview-pkg-card .pkg-purple-badge { z-index:10; }

/* ── TESTIMONIALS SLIDER ─────────────────────────────────── */
.testi-slider-wrap { position:relative; }
.testi-track {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.testi-slide { min-width:0; display:flex; flex-direction:column; }
.testi-slide.testi-hidden { display:none; }
.testi-slide .testi-card {
  height:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}
.testi-slide .testi-text { flex:1; }
.testi-slide .testi-author { margin-top:auto; }

@media(max-width:900px){
  .testi-track { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:580px){
  .testi-track { grid-template-columns:1fr; }
}

.testi-slider-controls {
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:40px;
}
.testi-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--border); border:none; cursor:pointer;
  padding:0; transition:all 0.3s; flex-shrink:0;
}
.testi-dot.active {
  background:var(--prim); width:28px; border-radius:4px;
}
.testi-nav-btn {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--border); background:transparent;
  color:var(--text-muted); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s;
}
.testi-nav-btn:hover { border-color:var(--prim); color:var(--prim); }


/* ── LUCIDE ICON SIZING ───────────────────────────────────── */
[data-lucide] { display:inline-block; vertical-align:middle; flex-shrink:0; }
.icon-wrap [data-lucide] { display:block; }
.pkg-features-list [data-lucide] { margin-top:2px; }

/* ── ADDON CHECKBOX — native checkbox, uniform across all packages ── */
.addon-cb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; min-width: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}
.addon-cb:checked {
  background: var(--prim);
  border-color: var(--prim);
}
.addon-cb:checked::after {
  content: '';
  display: block;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
  position: absolute;
}
.addon-row { cursor: pointer; }
/* addon-cb-box unused — native checkbox used instead */
.addon-cb-icon { display:none !important; }

/* ── GF SELECT ────────────────────────────────────────────── */
.gf-select {
  width:100%;padding:12px 40px 12px 16px;
  background:var(--bg-subtle);
  border:1.5px solid var(--border-light);
  border-radius:var(--r-sm);
  color:var(--text-body);
  font-family:var(--font-body);font-size:0.9rem;
  cursor:pointer;transition:border-color 0.2s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline points='1 1 6 7 11 1' fill='none' stroke='%23581000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.gf-select:focus { outline:none; border-color:var(--prim); box-shadow:0 0 0 3px var(--prim-a12); }

/* ============================================================
   DODATNE MOBILNE OPTIMIZACIJE — v12
   ============================================================ */

/* ── Booking wrapper na mobilnom ─────────────────────────── */
@media(max-width:768px){
  .booking-wrapper[style*="grid-template-columns:1fr 1.4fr"]{
    display:flex !important;
    flex-direction:column !important;
    gap:32px;
  }
}

/* ── Service card icon na mobilnom ────────────────────────── */
@media(max-width:480px){
  .svc-icon,.sc-icon{width:52px;height:52px;padding:8px;}
  .service-card-new{padding:24px 20px;}
}

/* ── Page hero padding na mobilnom ────────────────────────── */
@media(max-width:480px){
  .page-hero{padding:100px 0 40px;}
  .page-hero .section-title{font-size:clamp(1.7rem,7vw,2.4rem);}
  .page-hero .section-subtitle{font-size:0.9rem;}
}

/* ── Services cards section na mobilnom ───────────────────── */
@media(max-width:480px){
  .services-cards-section .container{padding:0 14px;}
  .services-cards-grid{gap:16px !important;}
}

/* ── Paketi na mobilnom ────────────────────────────────────── */
@media(max-width:480px){
  .pkg-name{font-size:clamp(1.4rem,6vw,2rem);}
  .pkg-cta .btn, .pkg-select-btn-new{width:100%;justify-content:center;}
}

/* ── Kontakt forma na mobilnom ─────────────────────────────── */
@media(max-width:600px){
  .contact-detail-item{font-size:0.88rem;}
  .booking-form-box{padding:24px 18px !important;}
}

/* ── Menu na mobilnom — font veličina ──────────────────────── */
@media(max-width:400px){
  .menu-nav-text{font-size:1.7rem !important;}
  .menu-nav-number{font-size:0.9rem;}
}

/* ── Ensure proper lang switcher za mali ekran ─────────────── */
@media(max-width:768px){
  .lang-switcher{display:flex !important;}
}
@media(max-width:380px){
  .lang-switcher{display:none !important;}
}


/* ============================================================
   MOBILNE OPTIMIZACIJE v13 — razmaci i paddinge
   ============================================================ */

/* ── Konzistentni section paddinge na mobilnom ────────────── */
@media(max-width:768px){
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
  .services-cards-section { padding: 60px 0 !important; }
  .booking-section { padding: 60px 0 !important; }
  .packages-section { padding: 0 0 60px !important; }
  .service-form-section { padding: 60px 0 !important; }
  .page-hero { padding: 120px 0 50px !important; }
}
@media(max-width:480px){
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .page-hero { padding: 100px 0 40px !important; }
  .home-cta { padding: 48px 0 !important; }
}

/* ── Section header margin ────────────────────────────────── */
@media(max-width:600px){
  .section-header, .section-head { margin-bottom: 40px !important; }
}

/* ── Service content grid gap na mobilnom ─────────────────── */
@media(max-width:1100px){
  .service-content-grid { gap: 40px; }
}
@media(max-width:768px){
  .service-content-grid { gap: 32px; }
  .service-features-box { margin-top: 0 !important; }
}

/* ── Why-us grid na mobilnom ──────────────────────────────── */
@media(max-width:768px){
  .service-content-text > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
}

/* ── PKG card konzistentnost na mobilnom ──────────────────── */
@media(max-width:600px){
  .pkg-card { border-radius: 16px !important; }
  .pkg-header { padding: 28px 20px 20px !important; }
  .pkg-body, .pkg-addons, .pkg-cta { padding: 16px 20px !important; }
}

/* ── Footer grid na mobilnom ──────────────────────────────── */
@media(max-width:600px){
  .footer-top, .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom, .footer-bar {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
}

/* ── Usluge sekcija header margin ─────────────────────────── */
@media(max-width:768px){
  .services-cards-section .section-header { margin-top: 0 !important; margin-bottom: 40px !important; }
}

/* ── Buttons na mobilnom — puni width za male ekrane ──────── */
@media(max-width:480px){
  .pkg-cta .pkg-select-btn-new { width: 100%; justify-content: center; }
  .home-cta .btn { max-width: 100%; }
}

/* ── Service page intro tekst ─────────────────────────────── */
@media(max-width:768px){
  .service-content-text h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); margin-bottom: 16px; }
  .service-content-text p  { font-size: 0.9rem; }
}


/* ── Aboutus split layout (O nama / Zasto mi) ─────────────── */
.aboutus-split-section { overflow: hidden; }

.aboutus-split {
  display: flex;
  min-height: 600px;
}

.aboutus-split__img {
  width: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

.aboutus-split__content {
  width: 50%;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tablet */
@media (max-width: 900px) {
  .aboutus-split__content {
    padding: 60px 36px;
  }
}

/* Mobile — slaganje na vertikalno, slika gore, tekst dole */
@media (max-width: 768px) {
  .aboutus-split {
    flex-direction: column;
    min-height: unset;
  }
  .aboutus-split__img {
    width: 100%;
    height: 260px;
    min-height: 220px;
  }
  .aboutus-split__content {
    width: 100%;
    padding: 48px 24px;
  }
  .aboutus-split__content h4.section-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ABOUTUS FULL-BG SECTION (O nama / Zasto mi)
   ════════════════════════════════════════════════════════════ */
.aboutus-fullbg-section {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  overflow: hidden;
  padding: 0;
}

/* Gradient overlay — iz desne strane ide prema providnom */
.aboutus-fullbg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(243,238,230,0.55) 35%,
    rgba(243,238,230,0.92) 58%,
    rgba(243,238,230,1) 72%,
    rgba(243,238,230,1) 100%
  );
  z-index: 1;
}

.aboutus-fullbg-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-left: auto;
  padding: 100px 0 100px;
}

.aboutus-label {
  color: var(--prim) !important;
}
.aboutus-title {
  color: var(--text-strong) !important;
}
.aboutus-text {
  color: var(--text-body) !important;
}
.aboutus-text strong {
  color: var(--prim) !important;
}

/* Mobile — overlay postaje odozgo prema dolje */
@media (max-width: 768px) {
  .aboutus-fullbg-section {
    background-attachment: scroll;
  }
  .aboutus-fullbg-overlay {
    background: linear-gradient(
      to bottom,
      rgba(243,238,230,0.15) 0%,
      rgba(243,238,230,0.75) 30%,
      rgba(243,238,230,0.97) 55%,
      rgba(243,238,230,1) 70%,
      rgba(243,238,230,1) 100%
    );
  }
  .aboutus-fullbg-content {
    max-width: 100%;
    padding: 260px 0 60px;
  }
}

/* ════════════════════════════════════════════════════════════
   PARTNERS TICKER SECTION
   ════════════════════════════════════════════════════════════ */
.partners-section {
  padding: 48px 0 44px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-warm);
  overflow: hidden;
}

.partners-label {
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 28px;
}

.partners-track-wrap {
  overflow: hidden;
  width: 100%;
  /* Fade rubovi */
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.partners-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: partnerScroll 32s linear infinite;
}

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

@keyframes partnerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  height: 56px;
  flex-shrink: 0;
  /* Jednobojno — desaturirano */
  filter: saturate(0) opacity(0.35);
  color: var(--text-body);
  transition: filter 0.35s ease, color 0.35s ease;
  cursor: default;
}

.partner-item svg {
  height: 28px;
  width: auto;
  display: block;
}

.partner-item svg text {
  fill: currentColor;
}

/* Hover — prava boja iz data-color */
.partner-item:hover {
  filter: saturate(1) opacity(1);
}

/* JS postavlja --hover-color pa koristimo CSS var za boju */
.partner-item:hover svg text {
  fill: var(--partner-color, var(--prim));
}

@media (max-width: 600px) {
  .partner-item { padding: 0 24px; }
  .partners-track { animation-duration: 22s; }
}