/* ===== Base ===== */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#f7fbfe; --ink:#0f172a; --muted:#5b6b7e;
  --primary:#1ea0e6; --primary-600:#167ec0;
  --card:#ffffff; --border:#e6eef6; --shadow:0 10px 24px rgba(14,30,55,.08);
  --radius:18px;
}
html,body{ height:100%; }
body{
  font-family:"Prompt","Noto Sans Thai",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}
.container{ width:min(1180px,90%); margin:0 auto; }
h1,h2,h3{ line-height:1.3; }
h2{ margin-bottom:12px; }
.blue{ color:var(--primary); }
p{ color:var(--muted); }
/* ===== End Base ===== */

/* ===== Navbar ===== */
.navbar{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); position:sticky; top:0; z-index:10; }
.navbar .container{ display:flex; justify-content:space-between; align-items:center; padding:0; }
.logo{ font-weight:700; color:var(--primary); font-size:20px; }
.navbar nav a{ margin-left:20px; color:#333; text-decoration:none; padding:8px 14px; border-radius:10px; }
.navbar nav a:hover{ background:#eaf6fb; color:var(--primary); }
.navbar-nav {white-space: nowrap;}

/* ===== End Navbar ===== */

/* ===== Buttons ===== */
.btn-overwhite,.btn-white,.btn-small,.btn-wide,.btn-bluecurb{
  display:inline-block; text-decoration:none; font-weight:600; border-radius:14px; transition:.2s ease;
}

.btn-overwhite{ color:var(--primary); background:#fff; padding:12px 18px; }
.btn-white{ border:2px solid #fff; color:#fff; padding:10px 16px; }
.btn-white:hover{ background:rgba(255,255,255,.15); }
.btn-bluecurb{ border:2px solid #1ea0e6; color:#1ea0e6; padding:10px 16px; }
.btn-bluecurb:hover{ background:rgba(255,255,255,.15); }

.btn-small{ background:#eaf6fb; color:var(--primary); padding:8px 12px; }
.btn-small:hover{ background:#d6effc; }
.btn-wide{ display:block; text-align:center; background:var(--primary); color:#fff; padding:12px 14px; border-radius:10px; }
.btn-wide:hover{ background:var(--primary-600); }
/* ===== End Buttons ===== */

/* ===== Hero ===== */
.hero{ padding:60px 0; background: #e7fdff; }
.hero-flex{ display:flex; align-items:center; gap:40px; }
.hero-text{ flex:1; }
.hero-img{ flex:1; }
.hero-img img{ width:100%; border-radius:18px; box-shadow:0 6px 18px rgba(0,0,0,.1); }
.tag{ display:inline-block; background:#eaf6fb; padding:6px 12px; border-radius:12px; font-size:14px; margin-bottom:16px; }
.hero h2{ font-size:36px; margin-bottom:12px; }
.hero-btns{ margin-top:20px; display:flex; gap:14px; }

@media (max-width:900px){
  .hero-flex{ flex-direction:column; text-align:center; }
  .hero-btns{ justify-content:center; }
}
/* ===== End Hero ===== */

/* ===== Footer ===== */
.site-footer{
  padding:48px 0 26px;
  color:#eaf6ff;
  background: linear-gradient(180deg, #095f88 0%, #0b5676 50%, #1a4290 100%);
}

.site-footer h4{ color:#ffffff; margin:0 0 10px; font-size:22px; }
.site-footer p{ color:#cfe8fa; }

.f-list{ list-style:none; padding:0; margin:0; }
.f-list li{
  display:grid; grid-template-columns:26px 1fr; gap:10px;
  align-items:start; margin:10px 0; color:#d7edfd;
}
.ficon{
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
}
.ficon svg{ width:16px; height:16px; fill:none; stroke:#cfe8fa; stroke-width:1.8; }

.f-divider{
  margin:26px 0 16px; border:0; border-top:1px solid rgba(255,255,255,.25);
}

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:#cfe8fa;
}
.copy{ white-space:nowrap; }
.f-links{ list-style:none; padding:0; margin:0; display:flex; gap:22px; flex-wrap:wrap; }
.f-links a{ color:#cfe8fa; text-decoration:none; }
.f-links a:hover{ text-decoration:underline; }

.fcol p, .fcol ul, .fcol li, .fcol span {
  white-space: normal;
  word-break: normal;    
  overflow-wrap: anywhere;
}
/* ===== END Footer ===== */

/* ===== Features ===== */
.features{
  padding: 64px 0 48px;
  background:
    #fff;
}
.features .feat-title{
  text-align:center; font-size:32px; margin-bottom:4px;
}
.features .feat-sub{
  text-align:center; font-weight:700; font-size:24px; color:#1f2b45; margin:0 0 10px;
}
.features .feat-desc{
  text-align:center; color:var(--muted); max-width:820px; margin:0 auto 22px;
}

.feature-list{
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.feature-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-card:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(14,30,55,.10); }

.feature-card > summary{
  list-style: none;
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.feature-card > summary::-webkit-details-marker{ display:none; }

.feature-card .i{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--border);
}
.feature-card .i svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
}
.feature-card .i svg path{ fill:currentColor; opacity:.14; }

.feature-card .t{ font-weight:700; color:var(--ink); }

.feature-card > summary::after{
  content:"";
  width: 10px; height: 10px;
  border: 2px solid #94a3b8;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
  justify-self: end;
  transition: transform .15s ease, border-color .15s ease;
}

.feature-card .content{
  color: var(--muted);
  padding: 10px 4px 2px 40px;
}

.feature-card[open] > summary::after{
  transform: rotate(-135deg);
  border-color: #64748b;
}

.feature-card.red .i     { color:#e11d48; border-color:#fecdd3; background:#fff5f5; }
.feature-card.orange .i  { color:#f59e0b; border-color:#fde68a; background:#fffaf0; }
.feature-card.purple .i  { color:#8b5cf6; border-color:#e9d5ff; background:#fbf7ff; }
/* ===== End Features ===== */

/* ===== Products ===== */
.products{ padding:64px 0; text-align:center; background: #e7fdff; }
.products h2{ color:#0c4680; margin-bottom:8px; }
.products-sub{ color:var(--muted); margin:0 auto 24px; max-width:820px; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.product-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; text-align:left;
}

.pc-img{ aspect-ratio:16/10; overflow:hidden; }
.pc-img img{
  /* width:100%; height:100%; */
  /* object-fit:cover; */
  /* object-position:center 20%; */
  /* display:block; */
      max-width: 355px;
        max-height: 250px;
}

.pc-body{ padding:16px; }
.pc-body h3{ margin:6px 0; font-size:18px; color:#0c4680; }
.pc-body p{ margin-bottom:12px; color:var(--muted); }

/* ===== End Products ===== */

/* ===== ERV info section ===== */
.erv-info{ padding:28px 0 56px;
background: #fff; }
.erv-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:28px;
  align-items:center;
  margin-bottom:32px;
}

.erv-col{ min-width:0; }

.img-frame{ border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(14,30,55,.08); }
.img-frame img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 28%;
}
.img-frame.lg{ aspect-ratio:16/9; }
.img-frame.sm{ aspect-ratio:16/10; }

.sun-title{ color:#0c4680; margin-bottom:8px; }
.tech-title{ color:#0c4680; margin-bottom:6px; }
.erv-col p{ color:#5b6b7e; margin:0 0 10px; }

.checklist{ list-style:none; padding:0; margin:10px 0 0; }
.checklist li{
  position:relative; padding-left:28px; margin:8px 0; color:#364a63;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:6px;
  width:18px; height:18px; border-radius:50%;
  border:2px solid #19a0d8;
}
.checklist li::after{
  content:""; position:absolute; left:5px; top:10px;
  width:6px; height:10px; border-right:2px solid #19a0d8; border-bottom:2px solid #19a0d8;
  transform:rotate(45deg);
}

.bullet-amber{ list-style:none; padding:0; margin:10px 0 0; }
.bullet-amber li{
  position:relative; padding-left:26px; margin:8px 0; color:#364a63;
}
.bullet-amber li::before{
  content:""; position:absolute; left:0; top:4px;
  width:16px; height:16px; border-radius:50%;
  background:#fff8e1; border:1px solid #ffd58a; box-shadow:inset 0 0 0 2px #f59e0b;
}

.img-stack{ display:grid; gap:12px; }

@media (max-width: 980px){
  .erv-row{ grid-template-columns:1fr; }
  .erv-row:first-child .erv-col:first-child{ order:-1; }
  .img-frame.lg{ aspect-ratio:16/10; }
}

/* ===== End ERV info section ===== */

/* ===== Benefit cards ===== */
.benefits{ padding:32px 0 72px; }
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.benefit-card{
  background:#eaf6fb;
  border:1px solid #dcecf7;
  border-radius:18px;
  padding:22px;
  text-align:center;
  box-shadow:0 10px 24px rgba(14,30,55,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.benefit-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(14,30,55,.09);
}

.benefit-icon{
  width:48px; height:48px;
  margin:0 auto 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e7f2fb;
  display:grid; place-items:center;
  color:#1ea0e6;
}
.benefit-icon svg{
  width:26px; height:26px;
  stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.benefit-icon.green{ color:#18a17a; }
.benefit-icon.purple{ color:#7c5ce6; }
.benefit-icon.amber{ color:#f59e0b; }

.benefit-card h3{
  margin:6px 0 4px;
}
.benefit-card p{
  margin:0;
  color:#5b6b7e;
  font-size:14.5px;
}

@media (max-width:1024px){
  .benefit-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .benefit-grid{ grid-template-columns:1fr; }
}
/* ===== END Benefit cards ===== */

/* ===== Audiences ===== */
.audiences{
  padding:44px 0 64px;
  background: linear-gradient(180deg, #eaf6fb 0%, #eef9ff 100%);
  text-align:center;
}
.audiences h2{ color:#0c4680; margin-bottom:6px; }
.aud-sub{ color:#5b6b7e; margin:0 auto 24px; max-width:760px; }

.aud-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

.aud-card{
  background:#ffffff;
  border:1px solid #e6eef6;
  border-radius:16px;
  padding:20px 18px;
  box-shadow:0 10px 24px rgba(14,30,55,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.aud-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 28px rgba(14,30,55,.09);
}

.aud-icon{
  width:56px; height:56px; margin:0 auto 10px;
  border-radius:999px;
  background:#dff1fb;
  border:1px solid #cfe7f5;
  display:grid; place-items:center;
}
.aud-icon svg{
  width:26px; height:26px;
  fill:none; stroke:#1ea0e6; stroke-width:1.8;
}

.aud-card h3{ margin:6px 0 4px; font-size:18px; color:#0c4680; }
.aud-card p{ margin:0; color:#5b6b7e; font-size:14.5px; }

/* Responsive */
@media (max-width: 1024px){
  .aud-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .aud-grid{ grid-template-columns: 1fr; }
}

/* ===== End Audiences ===== */

/* ===== Contact ===== */
.contact{ padding:60px 0; background:linear-gradient(180deg,#1ea0e6,#167ec0); text-align:center; color:#fff; }
.contact p{ color:#eaf6ff; margin-bottom:18px; }
.contact-btns{ display:flex; justify-content:center; gap:14px; }
/* ===== End Contact ===== */