/* ===== Palisada mini-bager.com — soft lime-green system (kromsalon green hue-shifted −36° to the PALISADA logo green #70c040, H≈96°) ===== */
:root{
  /* core palette (per brand spec) */
  --bg:#c3deb0;        /* background = brand green, ~10% lighter, -20% saturation */
  --ink:#223a16;       /* headings */
  --ink-2:#223a16;
  --slate:#5e7055;     /* body text */
  --slate-2:#5e7055;
  --brand:#93cb6f;     /* accent teal — text accents (eyebrows, links, active) */
  --brand-light:#bbe1a0;
  --accent:#93cb6f;
  /* derived */
  --hairline:#e9f1e2;
  --line:#daeccf;
  --panel-border:rgba(187,225,160,.55);
  --panel-shadow:rgba(50,88,28,.22);
  --panel-radius:30px;
  --grad-btn:linear-gradient(180deg,#bbe1a0,#93cb6f);
  --grad-card:linear-gradient(165deg,#9acd79,#74ad4f);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Onest',-apple-system,sans-serif;}
img{display:block;}
a{text-decoration:none;color:inherit;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Presentation deck: every section is a fixed-size slide (1360x860) that is
   uniformly scaled to fit the viewport (see scaleSlides() in app.js), so the
   whole design grows/shrinks with the screen instead of reflowing. Each slide
   sits centered in a full-viewport frame. */
html{scroll-behavior:smooth;}

.field{
  position:relative;
  z-index:0;
  min-height:100vh;
  background:var(--bg);
  padding:0;
}
/* viewport-fixed brand-green field so the same soft tint sits behind every slide */
.field::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(125% 85% at 50% -8%, #d5eac6 0%, #c3deb0 45%, #b6d69e 100%);
}
.deck{display:flex;flex-direction:column;}
.slide-wrap{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.panel{
  width:1360px;
  height:860px;
  flex:none;
  border-radius:var(--panel-radius);
  border:1.5px solid var(--panel-border);
  /* small lift off the brand-teal field — applied to every section */
  box-shadow:0 18px 44px var(--panel-shadow);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- shared buttons / typography ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:none;font-family:inherit;font-size:15px;font-weight:600;border-radius:40px;
}
.btn-primary{
  padding:14px 26px 14px 16px;background:var(--grad-btn);color:var(--ink);
  box-shadow:0 12px 26px rgba(147,203,111,.5);
}
.btn-bubble{
  display:inline-flex;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.55);align-items:center;justify-content:center;font-size:14px;
}
.btn-secondary{
  padding:13px 22px;background:#ffffff;border:1.5px solid var(--line);color:var(--ink);
}

.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:600;color:var(--accent);}
.eyebrow.on-dark{color:rgba(255,255,255,.85);}

.section-head{text-align:center;}
.section-title{margin:10px 0 0;font-size:50px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.section-lead{margin:14px auto 0;max-width:540px;font-size:16px;line-height:1.55;color:var(--slate);}
.center-cta{text-align:center;margin-top:40px;}

.nav-circle{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  user-select:none;
}
.nav-circle.active{border-color:var(--accent);color:var(--accent);}
.counter{font-size:15px;color:var(--ink);font-weight:600;}

/* ---------- logo ---------- */
.logo{position:relative;width:30px;height:32px;display:inline-block;flex:none;}
.logo-leaf{position:absolute;}
.logo-leaf.a{left:0;top:2px;width:15px;height:28px;border-radius:50% 40% 45% 50%/55% 55% 45% 45%;background:linear-gradient(150deg,#bbe1a0,#93cb6f);}
.logo-leaf.b{right:0;top:0;width:15px;height:30px;border-radius:40% 50% 50% 45%/55% 55% 45% 45%;background:linear-gradient(150deg,#d5eec4,#a0d47c);}
.logo-spark{position:absolute;right:2px;top:5px;color:#ffffff;font-size:11px;}
.logo-lg{width:54px;height:58px;}
.logo-lg .logo-leaf.a{left:0;top:4px;width:26px;height:50px;background:linear-gradient(150deg,#d5eec4,#b7de9b);}
.logo-lg .logo-leaf.b{right:0;top:0;width:26px;height:54px;background:linear-gradient(150deg,#f1f9ea,#d2eabf);}
.logo-lg .logo-spark{right:5px;top:9px;font-size:18px;}

/* ================= HERO ================= */
.hero{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:34px 46px 0;justify-content:flex-start;}
.nav{display:flex;align-items:flex-start;position:relative;height:54px;}
.brand{display:flex;align-items:center;gap:10px;}
/* shown downscaled (≤ native 300x54) so it stays crisp even when the slide scales up */
.brand-logo{height:38px;width:auto;max-width:300px;max-height:54px;display:block;}
.brand-name{line-height:1.02;font-weight:700;color:var(--ink-2);font-size:15px;}
.nav-links{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  display:flex;gap:30px;font-size:15px;color:var(--ink);font-weight:500;
}
.nav-links a{cursor:pointer;}
.nav-contact{margin-left:auto;font-size:15px;color:var(--ink-2);font-weight:600;cursor:pointer;padding-top:8px;}

.hero-body{position:relative;flex:1;min-height:540px;}
.hero-title{
  position:absolute;left:6px;top:150px;width:760px;margin:0;z-index:2;
  font-size:60px;line-height:1.0;font-weight:800;letter-spacing:-0.02em;color:var(--ink);
}
.hero-lead{position:absolute;left:8px;top:450px;width:340px;margin:0;z-index:2;font-size:16px;line-height:1.5;color:var(--slate);}
/* fotografija psa kao zaobljena foto-kartica (nema prozirnog cutout rendera kao kod zuba) */
.hero-photo{
  position:absolute;left:435px;top:140px;width:505px;height:440px;object-fit:cover;z-index:1;
  border-radius:26px;box-shadow:0 24px 55px rgba(51,88,31,.32);
  filter:saturate(1.02);
  animation:floaty 7s ease-in-out infinite;
}
.hero-cta-block{position:absolute;right:6px;top:330px;width:380px;z-index:2;}
.hero-sub{font-size:50px;line-height:1.04;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.hero-cta-block .btn{margin-top:22px;}
.hero-watermark{
  position:absolute;left:0;bottom:-6px;width:100%;z-index:0;
  font-size:92px;font-weight:800;letter-spacing:-0.02em;color:rgba(67,110,40,.08);
  white-space:nowrap;overflow:hidden;pointer-events:none;
  /* font-size is fitted to the panel width by fitWatermark() in app.js */
}

/* ============ ABOUT + STATS ============ */
.about{border-color:var(--panel-border);display:flex;flex-direction:row;}
.about-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.about-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(31,52,20,.92) 0%,rgba(52,84,34,.66) 48%,rgba(73,112,50,.5) 100%);}
.about-inner{position:relative;flex:1;display:flex;flex-direction:column;padding:54px 56px;color:#ffffff;}
.about-eyebrow{position:absolute;right:56px;top:54px;}
.about-title{margin:0;width:640px;font-size:50px;line-height:1.04;font-weight:700;letter-spacing:-0.02em;}
.about-lead{margin:26px 0 0;width:540px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);}
.stats{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:48px;}
.stat{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);border-radius:14px;padding:22px;
}
.stat-num{font-size:50px;font-weight:700;line-height:1;}
.stat-label{margin-top:8px;font-size:15px;color:rgba(255,255,255,.82);}

/* ================= SERVICES ================= */
.services{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:54px 46px 50px;}
.service-row{display:flex;gap:16px;margin-top:42px;height:330px;}
.service-card{
  position:relative;flex:1;min-width:0;border-radius:18px;overflow:hidden;
  background:var(--grad-card);cursor:pointer;
  transition:flex .5s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.service-card.active{flex:2.4;box-shadow:0 18px 42px rgba(84,140,50,.4);}
.service-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.service-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,52,18,0) 38%,rgba(30,52,18,.82) 100%);}
.service-body{position:absolute;left:20px;right:20px;bottom:20px;color:#ffffff;}
.service-label{font-size:19px;font-weight:700;}
.service-desc{
  margin-top:8px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);
  max-height:0;opacity:0;overflow:hidden;transition:all .45s ease;
}
.service-card.active .service-desc{max-height:80px;opacity:1;}

/* ================= CJENIK ================= */
.pricing{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:54px 46px 50px;}
.price-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px;}
.price-card{
  background:linear-gradient(180deg,#f5faf2,#ecf5e7);border:1.5px solid var(--line);
  border-radius:18px;padding:24px 22px;
}
.price-name{font-size:19px;font-weight:700;color:var(--ink);}
.price-note{margin:6px 0 14px;font-size:13px;line-height:1.45;color:var(--slate);min-height:57px;}
.price-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 0;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--slate-2);
}
.price-line span:last-child{font-weight:700;color:var(--ink);white-space:nowrap;}
/* prva kartica (Kompletan tretman) je istaknuta brand gradijentom */
.price-card:first-child{background:var(--grad-card);border-color:transparent;box-shadow:0 18px 42px rgba(84,140,50,.35);}
.price-card:first-child .price-name{color:#ffffff;}
.price-card:first-child .price-note{color:rgba(255,255,255,.85);}
.price-card:first-child .price-line{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85);}
.price-card:first-child .price-line span:last-child{color:#ffffff;}

/* ================= TESTIMONIALS ================= */
.testimonials{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:54px 46px 50px;}
.tabs{display:flex;justify-content:center;gap:54px;margin-top:34px;border-bottom:1px solid var(--hairline);}
.tab{padding:0 4px 14px;cursor:pointer;font-size:16px;font-weight:600;color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}

.testimonial-grid{display:grid;grid-template-columns:1fr 360px 360px;gap:36px;margin-top:40px;align-items:start;}
.t-title{margin:0;font-size:32px;line-height:1.1;font-weight:700;color:var(--ink);}
.t-desc{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--slate);}
.t-didtitle{font-size:17px;font-weight:700;color:var(--ink);margin-top:26px;}
.t-bullets{margin-top:10px;}
.t-bullet{display:flex;gap:8px;font-size:14.5px;color:var(--slate-2);padding:4px 0;}
.t-bullet .dot{color:var(--accent);}

/* before/after — <img-comparison-slider> web component (assets/img-comparison-slider.js) */
.ba{position:relative;height:420px;border-radius:14px;overflow:hidden;user-select:none;}
.ba img-comparison-slider{
  display:block;width:100%;height:100%;
  --divider-width:2px;--divider-color:#ffffff;
  --default-handle-width:56px;--default-handle-opacity:.95;
}
.ba img-comparison-slider:not(:defined){visibility:hidden;}
.ba img-comparison-slider:focus{outline:none;}
.ba img{width:100%;height:420px;object-fit:cover;display:block;}
/* obje strane su ista placeholder fotka — "prije" strana je prigušena da usporedba ima smisla */
.ba img[slot="first"]{filter:grayscale(.85) brightness(.94);}
.ba-tag{position:absolute;top:12px;z-index:2;pointer-events:none;background:rgba(31,52,20,.55);color:#ffffff;font-size:12px;padding:3px 10px;border-radius:20px;}
.ba-tag-l{left:14px;}
.ba-tag-r{right:14px;}
.t-portrait{width:100%;height:300px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;}
.t-caption{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--slate);}
.t-controls{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:8px;}
.t-controls .nav-circle{width:40px;height:40px;}

/* ---------- branded image placeholders ---------- */
.ph{
  background:linear-gradient(150deg,#e6f4dc 0%,#c2e6a8 45%,#9acd79 100%);
  position:relative;
}
.ph::after{
  content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);opacity:.55;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='m21 15-5-5L5 21'/></svg>");
}

/* ================= FOOTER ================= */
.footer{border-color:var(--panel-border);background:linear-gradient(135deg,#74ad4f,#446d2c);padding:80px 56px;}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:22px;}
.footer-brand{display:flex;align-items:center;gap:16px;}
.footer-logo{height:64px;width:auto;display:block;background:#ffffff;padding:18px 30px;border-radius:18px;box-shadow:0 10px 30px rgba(39,72,20,.28);}
.footer-name{font-size:46px;line-height:1;font-weight:700;color:#f2f9ee;}
.footer-name .dim{opacity:.85;}
.footer-links{display:flex;gap:30px;font-size:15px;color:rgba(255,255,255,.85);flex-wrap:wrap;justify-content:center;}
.footer-links a{cursor:pointer;}
.footer-contact{display:flex;gap:12px;font-size:15px;color:rgba(255,255,255,.85);flex-wrap:wrap;justify-content:center;}
.footer-contact a{cursor:pointer;}
.footer-copy{font-size:13px;color:rgba(255,255,255,.6);}

/* ================= RESPONSIVE FALLBACK ================= */
@media (max-width:1100px){
  .field{padding:14px;}
  .deck{gap:16px;}
  .slide-wrap{height:auto;display:block;}
  .panel{width:auto;height:auto;min-height:0;display:block;zoom:1 !important;}
  .hero,.services,.pricing,.testimonials{padding:36px 22px 40px;}
  .about{display:flex;flex-direction:column;}
  .nav-links{display:none;}
  .nav-contact{display:none;}
  /* logo centriran, točno u širini sadržajnog kontejnera (kao naslov) — ne šire;
     theme switch u svom redu ISPOD logotipa (inače se sudaraju) */
  .nav{height:auto;flex-direction:column;align-items:center;gap:14px;}
  .theme-toggle{align-self:center;margin:0;}
  .brand{width:100%;justify-content:center;}
  /* border-box: i s dark pločicom (padding) logo ostaje unutar kontejnera */
  .brand-logo{width:100%;height:auto;max-width:none;max-height:none;box-sizing:border-box;}
  .hero-body{height:auto;flex:none;min-height:0;display:flex;flex-direction:column;gap:20px;padding-bottom:8px;}
  .hero-title,.hero-lead,.hero-photo,.hero-cta-block,.hero-watermark{position:static;width:auto;}
  /* long compound words (DE/HR) must wrap instead of clipping at the panel edge */
  .hero-title{font-size:34px;line-height:1.08;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;margin-top:26px;}
  .hero-title br{display:none;}
  .hero-sub{font-size:28px;}
  .hero-photo{width:100%;max-width:340px;height:auto;margin:0 auto;}
  .hero-watermark{display:none;}
  /* gumbi uvijek u JEDNOM redu — broj telefona se ne smije prelomiti */
  .btn{font-size:14px;white-space:nowrap;}
  .about-inner{padding:36px 22px 40px;}
  .about-title,.about-lead{width:auto;}
  .about-title{font-size:29px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;}
  .about-lead{font-size:15px;}
  .about-eyebrow{position:static;margin-bottom:14px;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:36px;}
  .stat{padding:16px;}
  .stat-num{font-size:30px;overflow-wrap:break-word;}
  .stat-label{font-size:13px;}
  .section-title{font-size:29px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;}
  .section-lead{font-size:15px;}
  .service-row{flex-direction:column;height:auto;margin-top:30px;}
  .service-card,.service-card.active{flex:none;height:200px;}
  .service-card .service-desc{max-height:90px;opacity:1;}
  .price-row{grid-template-columns:1fr;gap:12px;margin-top:26px;}
  .price-note{min-height:0;}
  .testimonial-grid{grid-template-columns:1fr;gap:26px;margin-top:26px;}
  .tabs{gap:18px;flex-wrap:wrap;justify-content:center;}
  .tab{font-size:14px;padding-bottom:10px;}
  .t-title{font-size:26px;}
  .ba{height:340px;}
  .ba img{height:340px;}
  /* the portrait repeats the before/after image on mobile — show only the caption */
  .t-portrait{display:none;}
  .t-caption{margin:0;}
  .t-controls{justify-content:center;margin-top:18px;}
  .footer{padding:48px 22px;}
  .footer-links{gap:14px 18px;}
  .footer-contact{flex-direction:column;gap:6px;align-items:center;text-align:center;}
  .footer-contact .sep{display:none;}
  .footer-copy{text-align:center;}
}

/* na najužim ekranima gumb se dodatno stisne umjesto da se prelomi ili izađe van */
@media (max-width:400px){
  .btn{font-size:13px;}
  .btn-primary{padding:12px 18px 12px 12px;}
  .btn .btn-bubble{width:26px;height:26px;font-size:12px;}
}

/* ===== GDPR-Privola (Cookie-Consent-Popup) ===== */
.consent-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(40,58,22,.45);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;transition:opacity .4s ease;
}
.consent-backdrop.show{opacity:1;}
.consent-card{
  background:#ffffff;border:1px solid var(--panel-border);border-radius:28px;
  box-shadow:0 40px 90px -30px var(--panel-shadow);
  max-width:520px;width:100%;padding:38px 40px 34px;text-align:center;
  transform:translateY(16px) scale(.97);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.consent-backdrop.show .consent-card{transform:none;}
.consent-icon{display:block;width:54px;height:54px;margin:0 auto 16px;}
.consent-title{color:var(--ink);font-size:22px;font-weight:800;margin:0 0 10px;}
.consent-text{color:var(--slate);font-size:14.5px;line-height:1.65;margin:0 0 22px;}
.consent-text a{color:var(--brand);font-weight:600;}
.consent-text a:hover{text-decoration:underline;}
.consent-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.consent-actions .btn-primary{padding:14px 26px;}
@media (max-width:640px){
  .consent-card{padding:30px 24px 26px;border-radius:22px;}
  .consent-title{font-size:19px;}
  .consent-actions{flex-direction:column;}
  .consent-actions .btn{justify-content:center;}
}

/* ===== Link- & Button-Animationen (Hover/Klick) ===== */
a{transition:color .22s ease,opacity .22s ease;}
a:active{opacity:.55;}
.nav-links a,.footer-links a,.footer-contact a,.footer-copy a{
  position:relative;
}
.nav-links a::after,.footer-links a::after,.footer-contact a::after,.footer-copy a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.nav-links a:hover::after,.footer-links a:hover::after,.footer-contact a:hover::after,.footer-copy a:hover::after{
  transform:scaleX(1);
}
.nav-links a:hover,.nav-contact:hover{color:var(--brand);}
.footer-links a:hover,.footer-contact a:hover,.footer-copy a:hover{color:var(--brand-light);}
.nav-contact{transition:color .22s ease,opacity .22s ease;}
.brand{transition:opacity .22s ease;}
.brand:hover{opacity:.75;}
.btn{
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,border-color .22s ease,color .22s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.965);opacity:1;}
.btn-primary:hover{box-shadow:0 16px 32px rgba(162,203,111,.6);}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand);}
.nav-circle{transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s ease,color .22s ease;}
.nav-circle:hover{transform:scale(1.1);border-color:var(--accent);color:var(--accent);}
.nav-circle:active{transform:scale(.9);}
.tab{transition:color .22s ease,border-bottom-color .22s ease;}
.tab:hover{color:var(--accent);}
.tab:active{opacity:.6;}

/* ===== Hell/Dunkel-Umschalter + Dark Mode ===== */
.theme-toggle{
  width:38px;height:20px;border-radius:999px;border:1.5px solid var(--line);
  background:#ffffff;cursor:pointer;position:relative;padding:0;flex-shrink:0;margin-left:18px;margin-top:6px;
  transition:background .25s ease,border-color .25s ease;
}
.theme-toggle .knob{
  position:absolute;top:1.5px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--grad-btn);display:flex;align-items:center;justify-content:center;
  font-size:8px;line-height:1;transition:left .25s cubic-bezier(.2,.8,.3,1);
}
.theme-toggle .knob::after{content:"🌙";}
html.dark .theme-toggle{background:#29411b;border-color:#3d592c;}
html.dark .theme-toggle .knob{left:19px;}
html.dark .theme-toggle .knob::after{content:"☀️";}

html.dark{
  --bg:#17280e;
  --ink:#eff8e9; --ink-2:#eff8e9;
  --slate:#b0c6a3; --slate-2:#b0c6a3;
  --brand:#a1d87d; --accent:#a1d87d;
  --hairline:#324e24; --line:#3d592c;
  --panel-border:rgba(110,165,80,.35);
  --panel-shadow:rgba(0,0,0,.55);
}
html.dark body{background:var(--bg);}
html.dark .field::before{
  background:radial-gradient(125% 85% at 50% -8%, #273f17 0%, #17280e 45%, #111f0a 100%);
}
html.dark .hero,
html.dark .services,
html.dark .pricing,
html.dark .testimonials{background:#1f3113;}
html.dark .price-card:not(:first-child){background:#29411b;border-color:#3d592c;}
html.dark .btn-secondary{background:#29411b;}
html.dark .btn-primary{color:#1b300f;}
html.dark .consent-card{background:#1f3113;}
html.dark .consent-backdrop{background:rgba(0,0,0,.55);}
html.dark .hero-watermark{color:rgba(206,240,180,.07);}
/* logo ima tamna slova -> u darku dobiva bijelu pločicu (footer je već ima);
   border-box (globalni default) da padding nikad ne gura logo izvan kontejnera,
   zato na desktopu veća visina (48 = 38 logo + 2×5 padding) */
html.dark .brand-logo{background:#ffffff;border-radius:12px;padding:5px 10px;height:48px;}
@media (max-width:1100px){
  html.dark .brand-logo{height:auto;}
}


/* ===== Schwebender Anruf-Button (CTA morpht beim Scrollen) ===== */
.cta-fab{
  position:fixed;right:26px;bottom:26px;z-index:900;
  width:60px;height:60px;border-radius:50%;
  background:var(--grad-btn);
  box-shadow:0 12px 26px rgba(147,203,111,.5);
  display:flex;align-items:center;justify-content:center;
  transform:translate(30px,90px) scale(.35);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .35s ease,box-shadow .22s ease;
}
.cta-fab .btn-bubble{width:34px;height:34px;font-size:17px;}
html.cta-floating .cta-fab{transform:none;opacity:1;pointer-events:auto;}
html.cta-floating .cta-fab:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(147,203,111,.65);}
html.cta-floating .cta-fab:active{transform:scale(.92);opacity:1;}
html.dark .cta-fab{box-shadow:0 12px 26px rgba(0,0,0,.5);}
@media (max-width:640px){
  .cta-fab{right:18px;bottom:18px;width:54px;height:54px;}
}