/* VECTOR Light Theme (White + Blue + Green) */
:root{
  --bg:#ffffff; --ink:#1890B6; --muted:#2FA86F; --brand:#29B36C; --brand2:#1890B6;
  --card:#f7fafc; --accent:#1890B6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);scroll-behavior:smooth}
a{color:var(--brand2);text-decoration:none} a:hover{color:#11789a}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}
.flex{display:flex;gap:1rem;align-items:center}
.btn{display:inline-block;padding:.85rem 1.1rem;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:600;box-shadow:0 6px 20px rgba(24,144,182,.25)}
.btn.outline{background:transparent;border:2px solid var(--brand2);color:var(--brand2)} .btn.outline:hover{background:#eaf6ff}

/* Header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #e6eef5}
nav{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0}
.brand{gap:.6rem}
.brand .logo{width:71px;height:51px;)}
.brand b{letter-spacing:.5px;color:var(--ink)}
ul.menu{list-style:none;margin:0;padding:0;display:flex;gap:.9rem;align-items:center}
ul.menu>li{position:relative}
ul.menu>li>a{display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;border-radius:12px;transition:.2s ease}
ul.menu>li>a:hover{background:#eaf6ff}
.caret{width:10px;height:10px;display:inline-block;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:.15rem;transition:.2s}
li:hover>.caret{transform:rotate(225deg)}
.dropdown{position:absolute;top:110%;left:0;min-width:260px;background:#ffffff;border:1px solid #e6eef5;border-radius:14px;padding:.4rem;display:none;box-shadow:0 18px 36px rgba(0,0,0,.08)}
.menu li:hover .dropdown{display:block}
.dropdown a{display:flex;align-items:center;gap:.6rem;padding:.6rem;border-radius:12px;color:var(--ink)}
.dropdown a:hover{background:#f2fbf6}
.icon{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;font-weight:800;color:#fff}

/* Burger */
.hamburger{display:none;width:44px;height:38px;border-radius:12px;border:1px solid #e1edf5;position:relative;cursor:pointer}
.hamburger span,.hamburger:before,.hamburger:after{content:"";position:absolute;left:8px;right:8px;height:2px;background:#1890B6;transition:.25s}
.hamburger span{top:18px} .hamburger:before{top:10px} .hamburger:after{bottom:10px}
.hamburger.active span{opacity:0} .hamburger.active:before{transform:translateY(8px) rotate(45deg)} .hamburger.active:after{transform:translateY(-8px) rotate(-45deg)}

/* Mobile panel */
.mobile-panel{display:none;position:absolute;top:100%;left:0;right:0;background:#ffffff;border-bottom:1px solid #e6eef5;padding:1rem;z-index:55}
.mobile-panel a{display:block;padding:.65rem 0;border-bottom:1px dashed #e6eef5;color:var(--ink)}
.m-has-children{display:block;padding:.65rem 0;border-bottom:1px dashed #e6eef5;font-weight:700;color:var(--ink)}
.m-sublist{display:none;padding-left:.6rem} .m-sublist a{border-bottom:none;padding:.45rem 0;color:#208f72}

/* Hero */
.hero{position:relative;height:60vh;display:grid;place-items:center;overflow:hidden}
.hero .bg{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:brightness(.92) saturate(1.02)}
.hero .layer-gradient{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%,rgba(24,144,182,.22),transparent 60%)}
.hero .grid{position:absolute;inset:0;background-image:radial-gradient(rgba(24,144,182,.06) 1px,transparent 1px);background-size:24px 24px}
.hero .content{position:relative;text-align:center;z-index:2}
h1{font-size:clamp(34px,5vw,60px);line-height:1.05;margin:.2rem 0;color:var(--brand2)}
.lead{color:var(--brand);font-size:clamp(15px,2.3vw,19px)}
.badges{margin-top:1rem;gap:.6rem;flex-wrap:wrap}
.badge{padding:.4rem .7rem;background:#f0fbf5;border:1px solid #e6f5ec;border-radius:999px;font-size:.9rem;color:#1a8b5d}

/* Sections */
section{padding:56px 0;border-top:1px solid #eef4f8}
h2{font-size:clamp(26px,3.6vw,42px);margin:0 0 .6rem;color:var(--brand2)} p{color:#0d5274}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.card{background:var(--card);border:1px solid #e6eef5;padding:1rem;border-radius:16px;color:var(--ink)}
.card h3{margin:.2rem 0 .4rem;color:var(--brand2)}
.small{font-size:.95rem;color:#2a9a69}
figure.banner{margin:0;overflow:hidden;border-radius:16px;border:1px solid #e6eef5} figure.banner img{width:100%;height:320px;object-fit:cover}
.thumb{width:100%;height:150px;object-fit:cover;border-radius:12px;border:1px solid #e6eef5;margin:.3rem 0}

/* Catalog pills + 4-col grid */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.pill{padding:.45rem .9rem;border:1px solid #e0ecf3;border-radius:999px;background:#ffffff;color:#1890B6;cursor:pointer;font-weight:600}
.pill.active,.pill:hover{background:#eaf6ff}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1100px){.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.products{grid-template-columns:1fr}}
.product-card{background:#ffffff;border:1px solid #e6eef5;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.product-card img{width:100%;height:180px;object-fit:cover}
.product-body{padding:1rem;flex:1}
.product-title{font-size:1.05rem;color:#1890B6;margin:0 0 .35rem}
.product-meta{font-size:.9rem;color:#2FA86F;margin:.2rem 0}
.product-actions{display:flex;gap:.5rem;align-items:center;padding:1rem;border-top:1px solid #e6eef5}
.product-actions .btn{padding:.6rem .9rem;border-radius:10px}
.hide{display:none !important}

/* Table & inputs */
.table{width:100%;border-collapse:collapse;background:#ffffff;border:1px solid #e4edf4;border-radius:14px;overflow:hidden}
.table th,.table td{padding:.75rem;border-bottom:1px solid #eef4f8;text-align:left}
.table th{color:#2b9a6e;font-weight:600} .table tbody tr:nth-child(odd){background:#fbfeff}
.searchbar{display:flex;gap:.6rem;margin:.6rem 0}
input[type="search"],select,textarea{width:100%;padding:.7rem .9rem;border-radius:12px;border:1px solid #e0ecf3;background:#ffffff;color:var(--ink)}
input[type="search"]::placeholder,textarea::placeholder{color:#7fb8cf}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100}
.modal{width:min(520px,92%);background:var(--bg);border:1px solid #e6eef5;border-radius:16px;overflow:hidden;box-shadow:0 18px 36px rgba(0,0,0,.25)}
.modal header{padding:1rem;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:0;position:unset}
.modal .content{padding:1rem}
.modal .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.modal .opt{flex:1;display:flex;align-items:center;gap:.5rem;border:1px solid #e6eef5;border-radius:12px;padding:.6rem .8rem;background:var(--card);cursor:pointer}
.modal .opt input{accent-color:var(--brand2)}
.modal footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem;border-top:1px solid #e6eef5;background:var(--card)}
.modal .close{background:transparent;border:1px solid #e6eef5;color:var(--ink)}

/* Footer */
footer{padding:36px 0;color:#5d89a0;border-top:1px solid #e6eef5;background:#ffffff}
.kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--brand);font-weight:700;font-size:.8rem}

/* Responsive */
@media (max-width:900px){.grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr 1fr} .hero{height:52vh} ul.menu{display:none} .hamburger{display:block}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}