/* ===== Tokens ===== */
:root{
--green-900:#0f3d2e;
--green-800:#155641;
--green-700:#1f7a53;
--green-600:#279463;
--green-500:#2fa76f;
--mint-100:#dce9e0;
--mint-50:#e2ede6;
--blue-700:#1f6f94;
--blue-600:#2687af;
--blue-500:#3aa0c9;
--blue-100:#d3e7f0;
--slate-900:#16211c;
--slate-600:#4b5a53;
--slate-400:#7c8b83;
--border:#cddad2;
--bg:#dde8e0;
--white:#ffffff;
--logo-green:#38ac22;
--logo-green-dark:#2c8a1a;
--footer-bg:#16300f;
--footer-bg-rgb:22,48,15;
--footer-text:#dcecd2;
--shadow-sm:0 2px 10px rgba(15,61,46,0.08);
--shadow-md:0 12px 32px rgba(15,61,46,0.14);
--radius:16px;
--font-head:'Poppins',system-ui,sans-serif;
--font-body:'Inter',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Len na body: overflow-x na vie rozbit position:sticky hlavicku. */
body{overflow-x:hidden;}
body{
margin:0;
font-family:var(--font-body);
color:var(--slate-900);
background:var(--bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;margin:0 0 .5em;color:var(--green-900);}
p{margin:0 0 1em;color:var(--slate-600);}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
.accent{color:var(--green-600);}
.eyebrow{
display:inline-block;
font-size:.8rem;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--green-600);
margin-bottom:.6em;
}
/* ===== Buttons ===== */
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:14px 26px;
border-radius:999px;
font-weight:600;
font-size:.95rem;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
border:1.5px solid transparent;
cursor:pointer;
white-space:nowrap;
}
.btn-primary{background:var(--green-600);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:var(--green-800);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--green-500);background:var(--mint-50);}
.btn-outline{background:transparent;border-color:var(--border);color:var(--green-800);}
.btn-outline:hover{border-color:var(--green-500);background:var(--mint-50);}
.btn-sm{padding:9px 16px;font-size:.85rem;}
/* ===== Header ===== */
.site-header{
position:sticky;top:0;z-index:100;
background:rgba(var(--footer-bg-rgb),.96);
backdrop-filter:blur(10px);
border-bottom:1px solid transparent;
transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled{border-color:rgba(255,255,255,.08);box-shadow:0 4px 20px rgba(0,0,0,.18);}
.header-inner{
display:flex;align-items:center;justify-content:space-between;
height:76px;
}
.logo{
display:flex;align-items:center;gap:8px;
font-family:var(--font-head);font-weight:700;font-size:1.15rem;
color:var(--footer-text);
}
.logo em{font-style:normal;color:var(--logo-green);}
.logo-mark{
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:50%;
overflow:hidden;flex-shrink:0;
}
.logo-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.nav{display:flex;align-items:center;gap:32px;}
.nav a{font-size:.95rem;font-weight:500;color:var(--footer-text);opacity:.8;position:relative;}
.nav a:hover{opacity:1;color:var(--logo-green);}
.header-actions{display:flex;align-items:center;gap:14px;}
.header-call{border-color:rgba(255,255,255,.25);color:var(--footer-text);}
.header-call:hover{border-color:var(--logo-green);background:rgba(255,255,255,.06);}
.header-call svg{color:var(--logo-green);}
.nav-toggle{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:38px;height:38px;border:none;background:none;cursor:pointer;padding:0;
}
.nav-toggle span{width:100%;height:2px;background:var(--footer-text);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:72px 0 90px;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;}
.blob-1{width:480px;height:480px;background:var(--green-500);top:-180px;right:-120px;}
.blob-2{width:360px;height:360px;background:var(--blue-500);bottom:-160px;left:-100px;opacity:.22;}
.blob-3{width:280px;height:280px;background:var(--blue-500);top:20%;left:36%;opacity:.12;}
.hero-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.hero-text h1{font-size:clamp(2.1rem,4vw,3.2rem);letter-spacing:-.01em;}
.hero-lead{font-size:1.08rem;max-width:520px;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin:28px 0 40px;}
.hero-trust{display:flex;gap:32px;flex-wrap:wrap;}
.trust-item{display:flex;flex-direction:column;}
.trust-item strong{font-family:var(--font-head);color:var(--green-700);font-size:1.15rem;}
.trust-item span{font-size:.82rem;color:var(--slate-400);}
.hero-visual{position:relative;height:360px;}
.visual-card{
position:absolute;
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
padding:20px;
width:150px;text-align:center;
color:var(--green-600);
animation:float 6s ease-in-out infinite;
}
.visual-card p{margin:10px 0 0;color:var(--slate-900);font-size:.85rem;font-weight:600;font-family:var(--font-head);}
.card-1{top:0;left:10%;animation-delay:0s;}
.card-2{top:38%;right:0;animation-delay:1.2s;color:var(--blue-700);}
.card-3{bottom:0;left:22%;animation-delay:2.4s;}
@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-14px);}
}
/* ===== Trust bar ===== */
.trust-bar{background:var(--green-900);padding:26px 0;}
.trust-bar-title{
margin:0 0 16px;text-align:center;
font-family:var(--font-head);font-weight:700;font-size:1.1rem;
color:#fff;
}
.trust-bar-inner{
display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.12);
}
.tb-item{color:var(--mint-100);font-size:.9rem;font-weight:500;opacity:.9;}
.tb-item span{color:var(--green-500);}
/* ===== Sections ===== */
.section{padding:96px 0;}
.section-alt{background:var(--mint-50);}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.section-lead{font-size:1.02rem;}
.section-head .section-lead{margin:0 auto;}
/* ===== About ===== */
.about-grid{display:grid;grid-template-columns:.5fr 1fr;gap:56px;align-items:center;}
.about-shape{
aspect-ratio:1/1;border-radius:28px;
overflow:hidden;
border:1px solid var(--border);
box-shadow:var(--shadow-md);
}
.about-shape img{
width:100%;height:100%;object-fit:cover;
}
.about-content h2{font-size:clamp(1.5rem,3vw,2rem);}
.check-list{margin-top:20px;display:flex;flex-direction:column;gap:12px;}
.check-list li{position:relative;padding-left:30px;color:var(--slate-900);font-weight:500;font-size:.95rem;}
.check-list li::before{
content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
background:var(--mint-100);
box-shadow:inset 0 0 0 1.5px var(--green-500);
}
.check-list li::after{
content:"";position:absolute;left:6px;top:7px;width:9px;height:5px;
border-left:2px solid var(--green-600);border-bottom:2px solid var(--green-600);
transform:rotate(-45deg);
}
/* ===== Services ===== */
.service-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch;}
.service-group{
display:flex;flex-direction:column;
position:relative;
background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
padding:30px 26px 24px;box-shadow:var(--shadow-sm);
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-group::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:var(--green-500);
}
.service-group:nth-child(even)::before{background:var(--blue-500);}
.service-group:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.sg-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.sg-icon{
display:inline-flex;align-items:center;justify-content:center;
width:50px;height:50px;border-radius:14px;
background:var(--mint-100);color:var(--green-600);flex-shrink:0;
}
.service-group:nth-child(even) .sg-icon{background:var(--blue-100);color:var(--blue-700);}
.service-group:nth-child(even):hover{border-color:var(--blue-500);}
.sg-head h3{margin:0;font-size:1.08rem;line-height:1.3;}
.service-list{display:flex;flex-direction:column;gap:12px;margin:0;flex:1;}
.service-list li{
position:relative;padding-left:18px;font-size:.92rem;color:var(--slate-600);
}
.service-list li::before{
content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green-500);
}
.service-group:nth-child(even) .service-list li::before{background:var(--blue-500);}
.sg-foot{
margin-top:20px;padding-top:16px;
border-top:1px dashed var(--border);
font-size:.82rem;font-weight:600;
color:var(--green-700);
}
.service-group:nth-child(even) .sg-foot{color:var(--blue-700);}
/* ===== Gallery – dlazdice kategorii ===== */
.cat-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
.cat-tile{
position:relative;
display:block;
flex:1 1 250px;max-width:280px;
padding:0;border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
background:var(--white);
box-shadow:var(--shadow-sm);
cursor:pointer;
font-family:inherit;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-tile:hover,.cat-tile:focus-visible{
transform:translateY(-5px);
box-shadow:var(--shadow-md);
border-color:var(--green-500);
}
.cat-tile img{
width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
transition:transform .5s ease;
}
.cat-tile:hover img,.cat-tile:focus-visible img{transform:scale(1.07);}
.cat-overlay{
position:absolute;left:0;right:0;bottom:0;
display:flex;flex-direction:column;gap:2px;
padding:16px 18px;
text-align:left;
background:linear-gradient(180deg, rgba(15,61,46,0) 0%, rgba(15,61,46,.85) 100%);
pointer-events:none;
}
.cat-name{
color:#fff;font-weight:700;font-size:.95rem;line-height:1.25;
font-family:var(--font-head);
}
.cat-count{color:rgba(255,255,255,.8);font-size:.78rem;font-weight:500;}
/* ===== Gallery – okno kategorie ===== */
body.no-scroll{overflow:hidden;}
.gal-modal{
position:fixed;inset:0;z-index:320;
display:flex;align-items:center;justify-content:center;
padding:20px;
}
.gal-modal[hidden]{display:none;}
.gal-modal-overlay{position:absolute;inset:0;background:rgba(8,20,12,.72);}
.gal-modal-panel{
position:relative;z-index:1;
width:100%;max-width:1000px;max-height:88vh;
display:flex;flex-direction:column;
background:var(--white);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
overflow:hidden;
}
.gal-modal-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:22px 24px 16px;
border-bottom:1px solid var(--border);
}
.gal-modal-head h3{margin:0;font-size:1.15rem;}
.gal-modal-sub{margin:2px 0 0;font-size:.82rem;color:var(--slate-400);}
.gal-close{
flex-shrink:0;
width:38px;height:38px;border-radius:50%;
border:1px solid var(--border);background:var(--white);
color:var(--slate-600);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.gal-close:hover{background:var(--green-600);color:#fff;border-color:var(--green-600);}
.gal-thumbs{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
grid-auto-rows:max-content;
align-content:start;
gap:12px;
padding:20px 24px 24px;
overflow-y:auto;
}
.gal-thumb{
display:block;
padding:0;border:1px solid var(--border);border-radius:12px;
overflow:hidden;cursor:pointer;background:var(--mint-50);
transition:transform .2s ease, border-color .2s ease;
}
.gal-thumb:hover,.gal-thumb:focus-visible{transform:scale(1.03);border-color:var(--green-500);}
/* Pomer strán patrí na ![]()
, nie na