:root{
  --ink:#1a2433; --ink-soft:#3d4a5d; --muted:#6b7a8f;
  --accent:#0e5f6f; --accent-dark:#093f4a; --accent-light:#e6f2f4;
  --line:#e4e9ee; --bg:#ffffff; --bg-alt:#f6f8fa;
  --radius:10px; --maxw:1200px;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
h2.sec{font-size:2rem;line-height:1.2;margin:.35em 0 .5em}
h3.sec-sm{font-size:1.3rem;margin-bottom:.4em}
.lead{color:var(--muted);max-width:640px}
.center{text-align:center}
.center .lead{margin:0 auto}
.btn{display:inline-block;padding:.8em 1.6em;border-radius:6px;font-weight:600;transition:.2s;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-outline{border-color:var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent-light)}
.btn-sm{padding:.55em 1.1em;font-size:.85rem}

/* Top bar */
.topbar{background:var(--accent-dark);color:#cfe4e8;font-size:.82rem;padding:.45em 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.topbar a{color:#fff;margin-left:1.2em}
.topbar a:hover{text-decoration:underline}

/* Header */
header.site{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.logo span{color:var(--accent)}
.logo small{display:block;font-size:.6rem;font-weight:500;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:2px}
nav.main{display:flex;gap:1.6em;font-weight:600;font-size:.95rem}
nav.main a{padding:.4em 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.active{color:var(--accent);border-color:var(--accent)}
.header-cta{display:flex;gap:.8em;align-items:center}
.burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer}

/* Page hero (inner pages) */
.page-hero{background:linear-gradient(105deg,#0d2b33,#0e5f6f 70%,#128497);color:#fff;padding:56px 0}
.page-hero h1{font-size:2.2rem;margin:.3em 0 .4em;letter-spacing:-.02em}
.page-hero p{color:#cfe4e8;max-width:680px}
.crumb{font-size:.82rem;color:#9fd4dc}
.crumb a{color:#fff;opacity:.85}
.crumb a:hover{opacity:1}

/* Hero (home) */
.hero{background:linear-gradient(105deg,#0d2b33 0%,#0e5f6f 60%,#128497 100%);color:#fff;padding:92px 0 104px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:3rem;line-height:1.12;letter-spacing:-.02em;margin:.4em 0 .5em}
.hero p.sub{color:#d7e8ec;font-size:1.06rem;max-width:560px}
.hero .btns{margin-top:2em;display:flex;gap:1em;flex-wrap:wrap}
.hero .btn-primary{background:#fff;color:var(--accent-dark)}
.hero .btn-primary:hover{background:var(--accent-light)}
.hero .btn-outline{border-color:#8fc3cc;color:#fff}
.hero .btn-outline:hover{background:rgba(255,255,255,.1)}
.hero .kicker{color:#9fd4dc}
.hero-stats{display:flex;gap:2.4em;margin-top:2.6em;flex-wrap:wrap}
.hero-stats b{font-size:1.5rem;display:block}
.hero-stats span{font-size:.82rem;color:#bcd9df}

/* Sections */
section.block{padding:84px 0}
section.block.alt{background:var(--bg-alt)}
section.block.tight{padding:56px 0}

/* Image placeholders — replace with real photos later */
.ph{background:
  linear-gradient(135deg,rgba(14,95,111,.05),rgba(14,95,111,.1)),
  repeating-linear-gradient(45deg,#eef2f5,#eef2f5 10px,#e8eef2 10px,#e8eef2 20px);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:#8fa3b5;font-size:.78rem;letter-spacing:.12em;text-align:center;gap:.4em;
  border-radius:var(--radius);overflow:hidden;position:relative}
.ph::before{content:"📷";font-size:1.6rem;opacity:.55}
.ph.wide{aspect-ratio:16/9}
.ph.square{aspect-ratio:1/1}
.ph.tall{aspect-ratio:4/5}
.ph.hero-shot{aspect-ratio:4/3;box-shadow:0 24px 60px rgba(0,0,0,.35);border-radius:12px}
.ph.round{border-radius:50%;aspect-ratio:1/1}

/* Categories */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:3em}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6em 1.2em 2em;text-align:center;transition:.2s}
.cat:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 12px 30px rgba(14,95,111,.12)}
.cat .ico{font-size:2.2rem}
.cat h3{font-size:1rem;margin:.6em 0 .2em}
.cat p{font-size:.82rem;color:var(--muted)}
.cat .ph{aspect-ratio:1/.78;margin-bottom:1em}

/* Products */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:2.5em}
.prods.four{grid-template-columns:repeat(4,1fr);gap:22px}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.prod:hover{box-shadow:0 16px 40px rgba(26,36,51,.12);transform:translateY(-4px);border-color:#cfdae2}
.prod .ph{border-radius:0;aspect-ratio:1/1}
.prod .body{padding:1.3em 1.4em 1.5em;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:1.02rem;margin-bottom:.3em;line-height:1.35}
.prod .meta{font-size:.8rem;color:var(--muted);margin-bottom:.9em}
.prod .tags{display:flex;gap:.45em;flex-wrap:wrap;margin-bottom:1em}
.tag{font-size:.7rem;background:var(--accent-light);color:var(--accent-dark);padding:.25em .65em;border-radius:99px;font-weight:600;white-space:nowrap}
.tag.dark{background:#eef1f4;color:var(--ink-soft)}
.prod .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.prod a.view{color:var(--accent);font-weight:700;font-size:.88rem}
.prod .moq{font-size:.76rem;color:var(--muted)}

/* Filter bar */
.filters{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center;margin-top:2em}
.filters button{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.5em 1.2em;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Why us / feature cards */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:3em}
.why .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2em}
.why .ico{font-size:2rem}
.why h3{font-size:1.02rem;margin:.6em 0 .3em}
.why p{font-size:.88rem;color:var(--muted)}

/* Numbers */
.nums{background:var(--accent-dark);color:#fff;padding:64px 0}
.nums .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.nums b{font-size:2.6rem;display:block;letter-spacing:-.02em}
.nums span{color:#a9cdd4;font-size:.9rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:3em;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8em 1.4em;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-size:2rem;font-weight:800;color:var(--accent-light);-webkit-text-stroke:1px var(--accent);position:absolute;top:.55em;right:.65em;opacity:.75}
.step h3{font-size:.96rem;margin-bottom:.3em}
.step p{font-size:.82rem;color:var(--muted)}

/* Split / form */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
form.inquiry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.2em;box-shadow:0 18px 50px rgba(26,36,51,.08)}
form.inquiry label{font-size:.85rem;font-weight:700;display:block;margin:.9em 0 .3em}
form.inquiry label:first-child{margin-top:0}
form.inquiry input,form.inquiry select,form.inquiry textarea{width:100%;padding:.75em .9em;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.92rem;background:#fbfcfd;color:var(--ink)}
form.inquiry input:focus,form.inquiry textarea:focus,form.inquiry select:focus{outline:2px solid var(--accent);border-color:transparent;background:#fff}
form.inquiry button{margin-top:1.4em;width:100%;font-size:1rem}
.form-note{font-size:.75rem;color:var(--muted);margin-top:.8em;text-align:center}
.usp{list-style:none;margin-top:1.6em}
.usp li{padding:.5em 0 .5em 1.8em;position:relative;color:var(--ink-soft)}
.usp li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.contact-lines{margin-top:2em;display:flex;flex-direction:column;gap:.6em;font-weight:600}
.contact-lines a:hover{color:var(--accent)}

/* Specs table */
.specs{width:100%;border-collapse:collapse;font-size:.9rem}
.specs th,.specs td{border:1px solid var(--line);padding:.7em .9em;text-align:left;vertical-align:top}
.specs th{background:var(--bg-alt);font-weight:700;width:38%}
.specs tr:hover td{background:#fbfcfd}

/* Product detail */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.pd-gallery .ph{aspect-ratio:1/1;border-radius:12px}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.pd-thumbs .ph{aspect-ratio:1/1;cursor:pointer;border:2px solid transparent}
.pd-thumbs .ph:hover{border-color:var(--accent)}
.pd h1{font-size:1.9rem;line-height:1.25;margin-bottom:.4em}
.pd .subtitle{color:var(--muted);margin-bottom:1.2em}
.pd .keyfacts{display:flex;gap:.5em;flex-wrap:wrap;margin:1.2em 0 1.6em}
.pd .keyfacts .tag{font-size:.76rem;padding:.35em .8em}
.pd .actions{display:flex;gap:.8em;margin-top:1.8em;flex-wrap:wrap}
.pd h3{margin:2em 0 .8em;font-size:1.15rem}
.bullets{list-style:none;margin:.6em 0 0}
.bullets li{padding:.35em 0 .35em 1.6em;position:relative;color:var(--ink-soft);font-size:.92rem}
.bullets li::before{content:"▸";position:absolute;left:0;color:var(--accent)}

/* Two column content */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.two-col ul.bullets li{padding:.45em 0 .45em 1.6em}

/* Cert grid */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.5em}
.cert{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2em 1em;text-align:center}
.cert .badge{width:64px;height:64px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;margin:0 auto .9em}
.cert h3{font-size:.92rem}
.cert p{font-size:.78rem;color:var(--muted);margin-top:.2em}

/* Timeline */
.timeline{position:relative;margin-top:3em;padding-left:0}
.timeline .item{display:grid;grid-template-columns:110px 1fr;gap:28px;padding:1.4em 0;border-bottom:1px dashed var(--line)}
.timeline .year{font-size:1.3rem;font-weight:800;color:var(--accent)}
.timeline h3{font-size:1rem;margin-bottom:.2em}
.timeline p{font-size:.88rem;color:var(--muted)}

/* FAQ */
.faq{margin-top:2.5em;max-width:820px;margin-left:auto;margin-right:auto}
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:1.1em 1.4em;margin-bottom:.8em;background:#fff}
.faq summary{font-weight:700;cursor:pointer;font-size:.95rem}
.faq p{margin-top:.7em;color:var(--muted);font-size:.9rem}

/* Footer */
footer.site{background:#101823;color:#9fb0c3;padding:64px 0 0;font-size:.9rem}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:48px}
footer.site h4{color:#fff;font-size:.92rem;margin-bottom:1em}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none}
footer.site li{margin-bottom:.55em}
.fbottom{border-top:1px solid #233042;margin-top:48px;padding:1.4em 0;display:flex;justify-content:space-between;gap:1em;font-size:.8rem;color:#64798f;flex-wrap:wrap}
.lang-switch{display:flex;gap:.8em}
.lang-switch a.active{color:#fff;font-weight:700}

/* Floating contact — left bottom */
.float-contact{position:fixed;left:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px}
.float-contact a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.2s;position:relative}
.float-contact a svg{display:block}
.float-contact a:hover{transform:scale(1.08)}
.float-contact .tip{position:absolute;left:64px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-size:.74rem;font-weight:600;padding:.4em .8em;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.float-contact a:hover .tip{opacity:1}
.fc-wa{background:#25d366}
.fc-mail{background:#0e5f6f}
.fc-tel{background:#1a2433}
.to-top{background:#3d4a5d;font-size:1rem}

/* CTA band */
.cta-band{background:var(--accent);color:#fff;padding:56px 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:2em;flex-wrap:wrap}
.cta-band h2{font-size:1.7rem;margin-bottom:.2em}
.cta-band p{color:#cfe4e8}

@media(max-width:960px){
  .hero .wrap,.split,.two-col,.fgrid,.pd{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .prods,.prods.four{grid-template-columns:1fr 1fr;gap:16px}
  .why,.nums .grid,.steps,.certs{grid-template-columns:1fr 1fr}
  nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:1em 24px;border-bottom:1px solid var(--line);gap:.4em}
  nav.main.open{display:flex}
  .burger{display:block}
  .hero h1{font-size:2.1rem}
  .hero{padding:64px 0}
  .hero .wrap{gap:32px}
  section.block{padding:56px 0}
  .timeline .item{grid-template-columns:80px 1fr;gap:16px}
  .float-contact a{width:46px;height:46px;font-size:1.1rem}
}
@media(max-width:560px){
  .prods,.prods.four{grid-template-columns:1fr}
  .why,.nums .grid,.steps,.certs{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center;text-align:center}
}