:root{
  --navy:#0d1b2a;--navy2:#1b263b;--gold:#c9a227;--gold2:#e0b83d;
  --text:#2b2f36;--muted:#6b7280;--bg:#ffffff;--light:#f5f7fa;
  --radius:12px;--shadow:0 8px 30px rgba(13,27,42,.08);
  --font:'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.7;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none;transition:.25s}
a:hover{color:var(--gold)}
.container{width:min(1180px,92%);margin:0 auto}

/* Top bar */
.topbar{background:var(--navy);color:#cbd5e1;font-size:.85rem;padding:6px 0}
.topbar .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Header */
header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo img{height:52px}
nav ul{display:flex;list-style:none;gap:8px}
nav a{padding:10px 16px;font-weight:600;font-size:.95rem;border-radius:6px;display:block}
nav a:hover,nav a.active{background:var(--light);color:var(--gold)}
.menu-btn{display:none;font-size:1.6rem;background:none;border:none;color:var(--navy);cursor:pointer}

/* Hero */
.hero{position:relative;min-height:520px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url('/img/banner.jpg') center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,27,42,.88) 0%,rgba(13,27,42,.55) 55%,rgba(13,27,42,.25) 100%)}
.hero .container{position:relative;z-index:2}
.hero h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;line-height:1.2;max-width:720px}
.hero p{margin:18px 0 30px;font-size:1.15rem;max-width:600px;color:#dbe2ea}
.btn{display:inline-block;padding:14px 34px;border-radius:50px;font-weight:700;letter-spacing:.5px;transition:.25s;cursor:pointer;border:none;font-size:1rem}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;box-shadow:0 6px 20px rgba(201,162,39,.4)}
.btn-gold:hover{transform:translateY(-2px);color:#fff;box-shadow:0 10px 26px rgba(201,162,39,.55)}
.btn-outline{border:2px solid #fff;color:#fff;background:transparent;margin-left:12px}
.btn-outline:hover{background:#fff;color:var(--navy)}

/* Sections */
section{padding:80px 0}
.section-head{text-align:center;max-width:700px;margin:0 auto 50px}
.section-head .tag{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:3px;font-size:.8rem}
.section-head h2{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--navy);margin:8px 0 12px}
.section-head p{color:var(--muted)}
.bg-light{background:var(--light)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(13,27,42,.14)}
.card img{height:230px;object-fit:cover;width:100%}
.card-body{padding:22px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:1.15rem;color:var(--navy);margin-bottom:8px}
.card-body p{color:var(--muted);font-size:.92rem;flex:1}
.card-body .more{margin-top:14px;font-weight:700;color:var(--gold);font-size:.9rem}

.feature{background:#fff;padding:34px 26px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}
.feature .num{font-size:2.4rem;font-weight:800;color:var(--gold)}
.feature h3{color:var(--navy);margin:6px 0}

.about-img{border-radius:var(--radius);box-shadow:var(--shadow)}
.checklist{list-style:none;margin-top:20px}
.checklist li{padding-left:30px;position:relative;margin-bottom:12px;color:var(--text)}
.checklist li::before{content:"✔";position:absolute;left:0;color:var(--gold);font-weight:700}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;text-align:center;padding:70px 0}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:12px}
.cta-band p{color:#b8c2ce;margin-bottom:26px}

/* Page banner */
.page-banner{background:linear-gradient(100deg,rgba(13,27,42,.9),rgba(27,38,59,.75)),url('/img/banner.jpg') center/cover;color:#fff;text-align:center;padding:90px 0}
.page-banner h1{font-size:clamp(1.8rem,3.5vw,2.8rem)}
.page-banner p{color:#c8d1db;margin-top:8px}
.breadcrumb{font-size:.85rem;color:#9fb0c0;margin-top:14px}
.breadcrumb a{color:var(--gold)}

/* FAQ */
.faq-item{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.faq-item h2{padding:20px 24px;font-size:1.08rem;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-item h2::after{content:"+";color:var(--gold);font-size:1.4rem}
.faq-item.open h2::after{content:"–"}
.faq-body{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 24px;color:var(--muted)}
.faq-item.open .faq-body{max-height:1400px;padding-bottom:22px}
.faq-body ol,.faq-body ul{margin:10px 0 10px 20px}
.faq-body li{margin-bottom:6px}

/* Forms */
.form-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:40px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
label{font-weight:600;margin-bottom:6px;color:var(--navy);font-size:.92rem}
input,textarea,select{padding:13px 15px;border:1px solid #d7dee6;border-radius:8px;font-size:1rem;font-family:inherit;transition:.2s;background:#fbfcfe}
input:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.form-msg{display:none;margin-top:18px;padding:16px 20px;border-radius:8px;background:#e8f7ee;color:#1a7f4b;border:1px solid #bfe8cf;font-weight:600}
.form-msg.err{background:#fdecec;color:#b02a2a;border-color:#f3c1c1}

.contact-info-card{background:var(--navy);color:#dbe2ea;border-radius:var(--radius);padding:40px}
.contact-info-card h3{color:#fff;margin-bottom:20px;font-size:1.3rem}
.contact-info-card p{margin-bottom:16px}

/* Footer */
footer{background:var(--navy);color:#9aa8b6;padding:60px 0 0;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px}
footer h4{color:#fff;margin-bottom:16px;font-size:1.05rem}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:#9aa8b6}
footer a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:.85rem}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* WhatsApp-like float CTA */
.float-cta{position:fixed;right:22px;bottom:22px;z-index:200}
.float-cta a{display:block;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;padding:14px 22px;border-radius:50px;font-weight:700;box-shadow:0 8px 24px rgba(201,162,39,.5)}

/* Breadcrumbs page */
.crumbs{font-size:.88rem;color:var(--muted);padding:18px 0}
.crumbs a{color:var(--muted)}

/* product detail */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.detail-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid #eef1f5}
.detail-img img{width:100%}
.detail-info h1{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--navy);margin-bottom:8px}
.detail-info .sub{color:var(--gold);font-weight:600;margin-bottom:18px}
.spec-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem}
.spec-table th,.spec-table td{padding:11px 14px;border:1px solid #e6ebf0;text-align:left}
.spec-table th{background:var(--light);color:var(--navy);width:38%}
.prose h2{font-size:1.35rem;color:var(--navy);margin:34px 0 14px}
.prose p{margin-bottom:14px;color:#3c434c}
.prose ul{margin:0 0 14px 22px;color:#3c434c}
.prose li{margin-bottom:8px}

@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2,.detail-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .menu-btn{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:10px 0;box-shadow:0 12px 20px rgba(0,0,0,.08)}
  nav ul.show{display:flex}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid-3,.grid-4,.footer-grid{grid-template-columns:1fr}
  section{padding:56px 0}
  .btn-outline{margin-left:0;margin-top:12px}
  .hero{min-height:440px}
}