:root{
  --bg:#f5fbfb;
  --surface:#ffffff;
  --surface-2:#ebf8f8;
  --ink:#10343b;
  --muted:#50757c;
  --brand:#15aeb8;
  --brand-dark:#0e7f86;
  --accent:#74d9dc;
  --border:#d5ecec;
  --shadow:0 12px 30px rgba(8, 62, 68, .08);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f7ffff 0%, #f4fafb 100%);
  line-height:1.65;
}
a{color:var(--brand-dark); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.topbar{
  background:#0a4f56; color:#eafcfd; font-size:.95rem;
}
.topbar .container{display:flex; gap:16px; justify-content:space-between; align-items:center; padding:10px 0; flex-wrap:wrap}
.topbar a{color:#fff}
header.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(19,123,131,.12);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.logo{
  display:flex; align-items:center; gap:12px; font-weight:800; color:var(--ink); text-decoration:none
}
.logo-badge{
  width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--brand),#49cfd5);
  color:white; display:grid; place-items:center; box-shadow:var(--shadow); font-weight:800
}
nav ul{display:flex; list-style:none; gap:18px; padding:0; margin:0; align-items:center; flex-wrap:wrap}
nav a{font-weight:600; color:var(--ink)}
.btn,.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:14px; font-weight:700; transition:.2s ease; text-decoration:none
}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn-outline{border:1px solid var(--border); color:var(--ink); background:#fff}
.hero{
  padding:72px 0 48px;
}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.hero-card, .card{
  background:var(--surface); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow)
}
.hero-copy{padding:34px}
.badge{
  display:inline-flex; padding:7px 12px; border-radius:999px;
  background:#def7f8; color:#0b6e74; font-size:.9rem; font-weight:700; margin-bottom:14px
}
h1,h2,h3{line-height:1.2; margin:0 0 14px}
h1{font-size:clamp(2rem, 4vw, 3.4rem)}
h2{font-size:clamp(1.55rem, 2.2vw, 2.25rem)}
h3{font-size:1.15rem}
.lead{font-size:1.08rem; color:var(--muted)}
.hero-aside{padding:24px}
.kpi-list, .icon-list, .contact-list, .feature-list{list-style:none; padding:0; margin:0}
.kpi-list li,.contact-list li{padding:14px 0; border-bottom:1px solid var(--border)}
.kpi-list li:last-child,.contact-list li:last-child{border-bottom:0}
.section{padding:28px 0 18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.card-pad{padding:24px}
.service-card p,.blog-card p{color:var(--muted)}
.section-title-row{display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.pill{display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:700; background:#edfafa; color:#0b7077; font-size:.85rem}
.stats-strip{
  margin:20px 0 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px
}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px}
.stat strong{display:block; font-size:1.4rem}
.notice{
  background:linear-gradient(135deg, #09393e, #0f6770);
  color:#fff; border-radius:28px; padding:28px; box-shadow:var(--shadow)
}
.notice a{color:#fff}
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:18px}
table{width:100%; border-collapse:collapse; background:#fff}
th,td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--border)}
th{background:#edfafa}
.steps{counter-reset:step}
.steps li{
  list-style:none; position:relative; padding-left:56px; margin-bottom:16px
}
.steps li:before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:38px; height:38px; display:grid; place-items:center;
  border-radius:12px; background:linear-gradient(135deg,var(--brand), var(--brand-dark)); color:#fff; font-weight:800
}
.cover{
  aspect-ratio: 16/10; overflow:hidden; border-radius:22px; border:1px solid var(--border); background:linear-gradient(135deg,#e8fafb,#d5f4f5);
}
.cover img{width:100%; height:100%; object-fit:cover}
.logo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.logo-box{
  border:1px solid var(--border); background:#fff; border-radius:18px; padding:18px;
  min-height:86px; display:grid; place-items:center; font-weight:800; color:#2a4f56; box-shadow:var(--shadow)
}
.cta-band{margin:24px 0; padding:26px; border-radius:24px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.breadcrumbs{font-size:.95rem; color:var(--muted); margin-bottom:16px}
.breadcrumbs a{color:var(--muted)}
.article{background:#fff; border:1px solid var(--border); border-radius:26px; padding:28px; box-shadow:var(--shadow)}
.article h2{margin-top:34px}
.article p,.article li{font-size:1.02rem}
.article ul{padding-left:20px}
.article .summary{
  background:#f2fbfb; border:1px solid var(--border); border-radius:18px; padding:16px 18px; margin:18px 0 20px
}
.article .quick-answer{
  font-weight:700; color:#0b5f65; margin-top:-2px
}
.sidebar-sticky{position:sticky; top:100px}
.aside-box{background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:20px}
.blog-list{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
footer{
  margin-top:40px;
  background:linear-gradient(180deg,#0c3036,#092429);
  color:#fff;
}
.footer-main{padding:42px 0 24px}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:28px}
.footer-main a{color:#fff}
.footer-note{padding:14px 0 32px; color:rgba(255,255,255,.72); font-size:.95rem}
.floating-actions{
  position:fixed; right:14px; bottom:14px; z-index:60; display:flex; flex-direction:column; gap:10px
}
.float-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:999px; color:#fff; box-shadow:0 14px 30px rgba(4,30,33,.22); font-weight:800; text-decoration:none
}
.float-btn.call{background:#0f8b92}
.float-btn.wa{background:#25D366}
.small{font-size:.94rem; color:var(--muted)}
.area-list{columns:2; padding-left:18px}
.anchor-nav{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.anchor-nav a{padding:10px 12px; border-radius:999px; background:#edfafa; font-weight:700}
@media (max-width:980px){
  .hero-grid,.grid-3,.grid-2,.footer-grid,.blog-list,.logo-grid,.stats-strip{grid-template-columns:1fr}
  .sidebar-sticky{position:static}
  nav ul{display:none}
}