:root{
  --green:#0f3d3e;          /* butelkowa zieleń */
  --green-2:#145252;        /* jaśniejszy odcień */
  --accent:#1f6e5c;         /* akcent */
  --text:#0a0f0f;
  --muted:#516667;
  --bg:#f6fbfa;
  --card:#ffffff;
  --ring: 0 0 0 8px rgb(31 110 92 / 10%);
  --radius:22px;
  --shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif; color:var(--text); background:var(--bg)}
a{color:var(--accent); text-decoration:none; transition:all 0.2s ease}
img{max-width:100%; display:block}

/* Layout */
.container{max-width:1100px; margin-inline:auto; padding:0 20px}
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(0,0,0,.06); transition:box-shadow 0.3s ease}
header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; transition:transform 0.2s ease}
.brand:hover{transform:scale(1.02)}
.brand img{width:44px; height:44px; border-radius:12px}
.brand .name{font-weight:800; letter-spacing:.4px; background:linear-gradient(135deg, var(--green), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0}
nav a{padding:8px 12px; border-radius:12px; font-weight:500}
nav a:hover{background:rgba(15,61,62,.08); transform:translateY(-1px)}
.dropdown{position:relative}
.dropdown-toggle{display:inline-flex; align-items:center; gap:4px; line-height:normal; vertical-align:middle}
.dropdown-toggle::after{content:'▼'; font-size:10px; position:relative; top:-1px; transition:transform 0.2s ease}
.dropdown:hover .dropdown-toggle::after{transform:rotate(180deg)}
.dropdown-menu{display:none; position:absolute; top:100%; right:0; background:#fff; border:1px solid #dbe9e6; border-radius:12px; box-shadow:var(--shadow-lg); min-width:200px; z-index:10; opacity:0; transform:translateY(-10px); transition:opacity 0.2s ease, transform 0.2s ease}
.dropdown:hover .dropdown-menu{display:block; opacity:1; transform:translateY(0)}
.dropdown-menu a{display:block; padding:12px 16px; border-radius:0; font-weight:500}
.dropdown-menu a:first-child{border-radius:11px 11px 0 0}
.dropdown-menu a:last-child{border-radius:0 0 11px 11px}
.dropdown-menu a:hover{background:rgba(15,61,62,.08); padding-left:20px}
.menu-btn{display:none}
.mobile{display:none !important}

.hero{position:relative; overflow:hidden; background: radial-gradient(1000px 600px at 90% -10%, #cfe7e1 0%, transparent 60%), linear-gradient(180deg,#ffffff, #f3f9f7)}
.hero::before{content:''; position:absolute; top:10%; right:5%; width:150px; height:150px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%231f6e5c' stroke-width='2' opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%231f6e5c' stroke-width='2' opacity='0.15'/%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='%230f3d3e' stroke-width='3' opacity='0.2'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%230f3d3e' opacity='0.25'/%3E%3C/svg%3E") center/contain no-repeat; animation:float 6s ease-in-out infinite; opacity:0.6}
.hero::after{content:''; position:absolute; bottom:15%; left:8%; width:120px; height:120px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 20l5 15h16l-13 10 5 15-13-10-13 10 5-15-13-10h16z' fill='%231f6e5c' opacity='0.12'/%3E%3C/svg%3E") center/contain no-repeat; animation:float 8s ease-in-out infinite reverse; opacity:0.5}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(10deg)}}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; padding:64px 0; align-items:center; position:relative; z-index:1}
.badge{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, #e6f3f0, #d9f0eb); border:1px solid #d3ebe6; color:#20564f; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:600; box-shadow:0 2px 8px rgba(31,110,92,.08); animation:fadeInDown 0.6s ease; position:relative; overflow:hidden}
.badge::before{content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); animation:shimmer 3s infinite}
@keyframes shimmer{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)} 100%{transform:translateX(100%) translateY(100%) rotate(45deg)}}
.hero h1{font-size:clamp(28px,4vw,46px); line-height:1.1; margin:12px 0 16px; animation:fadeInUp 0.6s ease 0.1s both}
.hero p{font-size:18px; color:var(--muted); line-height:1.6; animation:fadeInUp 0.6s ease 0.2s both}
.cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; animation:fadeInUp 0.6s ease 0.3s both}
.btn{appearance:none; border:none; background:linear-gradient(135deg, var(--green), var(--green-2)); color:#fff; font-weight:700; padding:14px 24px; border-radius:16px; cursor:pointer; box-shadow:var(--shadow); transition:all 0.3s ease; position:relative; overflow:hidden}
.btn::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:left 0.5s ease}
.btn:hover::before{left:100%}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:#fff; color:var(--green); border:2px solid #d3ebe6}
.btn.secondary:hover{background:#f2fbf7; border-color:var(--accent)}

.logo-card{background:var(--card); border:1px solid #e8f0ee; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; animation:fadeIn 0.6s ease 0.4s both; transition:all 0.3s ease}
.logo-card:hover{transform:scale(1.05) rotate(2deg); box-shadow:var(--shadow-lg)}
.logo-card img{width:120px; height:auto; margin:auto; filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}

@keyframes fadeInUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes fadeInDown{
  from{opacity:0; transform:translateY(-20px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* Offer */
section{scroll-margin-top:84px; position:relative}
.section{padding:64px 0}
.section h2{font-size:clamp(24px,3vw,34px); margin:0 0 10px; background:linear-gradient(135deg, var(--green), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:800; position:relative; display:inline-block}
.section h2::after{content:''; position:absolute; bottom:-8px; left:0; width:60px; height:4px; background:linear-gradient(90deg, var(--green), var(--accent)); border-radius:2px}
.section p.lead{color:var(--muted); margin-top:20px; font-size:18px; line-height:1.6}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--card); border:1px solid #e8f0ee; border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; display:flex; flex-direction:column; transition:all 0.3s ease; position:relative; overflow:hidden}
.card::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--green), var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:#c8e4de}
.card:hover .card-icon{transform:scale(1.1) rotate(5deg)}
.card .cta{margin-top:auto; padding-top:16px}
.card .btn{font-size:14px; width:100%}
.card h3{margin:12px 0 8px; font-size:22px; color:var(--green)}
.card p{line-height:1.6; color:var(--muted)}
.card-icon{width:80px; height:80px; margin-bottom:16px; transition:transform 0.4s ease; filter:drop-shadow(0 4px 12px rgba(15,61,62,.15))}
.pill{display:inline-block; font-size:12px; background:linear-gradient(135deg, #eef7f5, #e1f3ef); color:#1b5e55; border:1px solid #d7ebe7; padding:6px 12px; border-radius:999px; font-weight:600; box-shadow:0 2px 4px rgba(0,0,0,.04)}
.list{margin:16px 0 0; padding:0; list-style:none; color:#2d3b3b; line-height:1.8}
.list li{margin-bottom:10px; padding-left:28px; position:relative}
.list li::before{content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800; font-size:16px}
.feature-list li{background:rgba(230,243,240,.3); padding:12px 12px 12px 36px; border-radius:8px; margin-bottom:8px; transition:all 0.3s ease; border-left:3px solid transparent}
.feature-list li:hover{background:rgba(230,243,240,.6); border-left-color:var(--accent); transform:translateX(4px)}

/* Schedule / highlight */
.highlight{background:linear-gradient(180deg,#f0faf6,#ffffff); position:relative}
.highlight .box{display:grid; gap:20px; grid-template-columns:2fr 1fr; align-items:center; border:2px dashed #b7d6cf; border-radius:20px; padding:28px; background:rgba(255,255,255,.6); backdrop-filter:blur(10px); transition:all 0.3s ease}
.highlight .box > div{display:flex; gap:20px; align-items:flex-start}
.highlight .box:hover{border-color:var(--accent); background:rgba(255,255,255,.8)}
.highlight .box:hover .highlight-icon{transform:scale(1.1) rotate(-5deg)}
.highlight strong{color:var(--green); font-size:20px}
.highlight p{line-height:1.7; font-size:17px; margin:0}
.highlight-icon{width:80px; height:80px; flex-shrink:0; transition:transform 0.4s ease; filter:drop-shadow(0 4px 12px rgba(15,61,62,.15))}

/* About */
#onas{overflow:hidden}
#onas::before{content:''; position:absolute; top:20%; right:-5%; width:200px; height:200px; background:radial-gradient(circle, rgba(31,110,92,.08) 0%, transparent 70%); border-radius:50%; animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1); opacity:0.5} 50%{transform:scale(1.2); opacity:0.3}}
.about{display:grid; gap:30px; grid-template-columns:1.1fr .9fr; align-items:center}
.about .stat{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.kpi{background:linear-gradient(135deg, #0f3d3e, #1f6e5c); color:#fff; padding:24px; border-radius:18px; text-align:center; box-shadow:var(--shadow); transition:all 0.3s ease; position:relative; overflow:hidden}
.kpi::before{content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); opacity:0; transition:opacity 0.3s ease}
.kpi:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.kpi:hover::before{opacity:1}
.kpi:hover .kpi-icon{transform:scale(1.15) rotate(5deg)}
.kpi small{display:block; opacity:.85; font-size:13px; margin-top:6px}
.kpi > div{font-size:32px; font-weight:800}
.kpi-icon{width:40px; height:40px; margin:0 auto 12px; opacity:0.9; transition:transform 0.4s ease}

/* Contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:24px}
form{background:var(--card); border:1px solid #e8f0ee; border-radius:var(--radius); box-shadow:var(--shadow); padding:28px}
label{font-weight:600; font-size:14px; display:block; margin-bottom:8px; color:var(--green)}
input, textarea{width:100%; padding:14px 16px; border-radius:12px; border:2px solid #dbe9e6; outline:none; font-family:inherit; transition:all 0.3s ease; font-size:15px}
input:focus, textarea:focus{box-shadow:var(--ring); border-color:var(--accent); transform:translateY(-2px)}
textarea{min-height:120px; resize:vertical}
form .btn{width:100%; margin-top:12px}
.contact-item{display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; padding:16px; border-radius:12px; transition:all 0.3s ease}
.contact-item:hover{background:rgba(15,61,62,.04); transform:translateX(4px)}
.contact-icon{width:36px; height:36px; flex-shrink:0; transition:transform 0.3s ease}
.contact-item:hover .contact-icon{transform:scale(1.15) rotate(5deg)}
.contact-item strong{color:var(--green); display:block; margin-bottom:4px}

footer{padding:32px 0 52px; border-top:1px solid #e5efec; color:#4b5d5d; background:linear-gradient(180deg, var(--bg), #ffffff)}
footer a{font-weight:600}
footer a:hover{color:var(--green)}

/* Responsive */
@media (max-width: 920px){
  .hero .wrap{grid-template-columns:1fr; padding:40px 0; gap:40px}
  .hero::before, .hero::after{width:100px; height:100px}
  .about, .contact, .highlight .box{grid-template-columns:1fr}
  .highlight .box > div{flex-direction:column; align-items:center; text-align:center}
  .highlight-icon{width:64px; height:64px}
  .grid{grid-template-columns:1fr; gap:16px}
  .about .stat{grid-template-columns:1fr; gap:10px}
  .section{padding:48px 0}
  nav ul{display:none !important}
  .dropdown{display:none}
  .menu-btn{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #d7ebe7; padding:10px 16px; border-radius:12px; cursor:pointer; font-size:15px; font-weight:600; transition:all 0.2s ease}
  .menu-btn:hover{background:rgba(15,61,62,.08)}
  header{position:relative}
  .mobile{display:none; position:absolute; left:20px; right:20px; top:100%; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border:1px solid #eef4f3; border-radius:14px; box-shadow:var(--shadow-lg); margin-top:8px; z-index:100; overflow:hidden}
  .mobile a{display:block; padding:16px 20px; border-bottom:1px solid #f5f9f8; font-weight:500; transition:all 0.2s ease}
  .mobile a:first-child{border-radius:13px 13px 0 0}
  .mobile a:last-child{border-bottom:none; border-radius:0 0 13px 13px}
  .mobile a:hover{background:linear-gradient(90deg, rgba(15,61,62,.08), transparent); padding-left:24px}
  .cta{flex-direction:column}
  .btn{width:100%; text-align:center}
  .card{padding:20px}
  .card-icon{width:64px; height:64px}
  .contact-item{flex-direction:row; padding:12px}
  .contact-icon{width:32px; height:32px}
}