/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,'SF Pro Display','PingFang SC','Segoe UI','Microsoft YaHei',sans-serif;color:#0f172a;background:#fff;line-height:1.6}
h1{font-size:clamp(36px,5vw,64px);font-weight:700;line-height:1.08;letter-spacing:-1.5px}
h2{font-size:clamp(24px,3.5vw,44px);font-weight:700;line-height:1.12;letter-spacing:-1px}
h3{font-size:18px;font-weight:600}
p{color:#475569}
a{color:#0284c7;text-decoration:none}
a:hover{color:#0369a1}
img{display:block;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
.wrap-w{max-width:1240px;margin:0 auto;padding:0 40px}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:0 40px;height:56px}
.nav-logo{font-size:14px;font-weight:700;letter-spacing:-.2px;color:#0f172a;text-decoration:none}
.nav-logo span{color:#0284c7}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:13px;color:#64748b;text-decoration:none;transition:color .15s}.nav-links a:hover{color:#0f172a}
.nav-cta{background:#0f172a;color:#fff!important;padding:6px 16px;border-radius:7px;font-size:13px;font-weight:600;transition:opacity .15s}.nav-cta:hover{opacity:.8}
.loc-bar{display:flex;gap:6px;margin-left:14px;align-items:center}
.loc-select{padding:3px 6px;border:1px solid #e2e8f0;border-radius:5px;font-size:11px;font-weight:600;color:#64748b;background:#f8fafc;cursor:pointer;appearance:auto;-webkit-appearance:auto;min-width:60px}
.loc-select:hover{border-color:#94a3b8}.loc-select:focus{outline:none;border-color:#0284c7}

/* ===== HERO ===== */
.hero{background:#070f1e;position:relative;overflow:hidden;min-height:80vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.18}
.hero-grad{position:absolute;inset:0;background:linear-gradient(105deg,#070f1e 45%,rgba(7,15,30,.55) 75%,rgba(7,15,30,.2) 100%)}
.hero-content{position:relative;z-index:2;padding:88px 0 80px}
.hero-sm{min-height:50vh}
.hero-sm .hero-content{padding:64px 0 56px}
.eyebrow-h{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#38bdf8;margin-bottom:24px}
.eyebrow-h::before{content:'';display:block;width:24px;height:1px;background:#38bdf8}
.hero h1{color:#fff;max-width:660px;margin-bottom:20px}.hero h1 em{font-style:normal;color:#38bdf8}
.hero-sub{font-size:17px;color:#94a3b8;max-width:520px;margin-bottom:40px;line-height:1.75}
.btn-p{background:#0284c7;color:#fff;padding:13px 30px;border-radius:9px;font-size:15px;font-weight:600;display:inline-block;transition:background .15s;text-decoration:none}.btn-p:hover{background:#0369a1;color:#fff}
.btn-g{color:#94a3b8;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;transition:color .15s;text-decoration:none}.btn-g:hover{color:#fff}
.hero-kpi{display:flex;gap:48px;margin-top:64px;border-top:1px solid rgba(255,255,255,.07);padding-top:36px;flex-wrap:wrap}
.kpi-n{font-size:32px;font-weight:700;color:#fff;letter-spacing:-1px}
.kpi-u{font-size:32px;font-weight:700;color:#38bdf8;letter-spacing:-1px}
.kpi-l{font-size:12px;color:#64748b;margin-top:4px}

/* ===== SECTIONS ===== */
.section{padding:88px 0}
.sec-gray{background:#f8fafc}
.sec-dark{background:#0a0f1e}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#0284c7;margin-bottom:16px}.eyebrow::before{content:'';display:block;width:18px;height:1px;background:#0284c7}
.eyebrow-lt{color:#38bdf8}.eyebrow-lt::before{background:#38bdf8}
.sec-title{color:#0f172a;margin-bottom:12px}
.sec-title-w{color:#f8fafc;margin-bottom:12px}
.sec-desc{font-size:16px;color:#64748b;max-width:560px;margin-bottom:48px;line-height:1.75}

/* ===== GRID CARDS ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid #e2e8f0;border-radius:11px;padding:28px 24px;background:#fff;transition:border-color .15s,box-shadow .15s}.card:hover{border-color:#0284c7;box-shadow:0 4px 24px rgba(2,132,199,.08)}
.card-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#0284c7;margin-bottom:10px}
.card h3{margin-bottom:8px;font-size:16px;color:#0f172a}.card p{font-size:14px;color:#64748b;line-height:1.7}
.card-dark{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.card-dark:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.card-dark h3{color:#f1f5f9}.card-dark .card-tag{color:#38bdf8}

/* ===== TABLES ===== */
.tbl-wrap{border:1px solid #e2e8f0;border-radius:10px;overflow-x:auto;margin:20px 0}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead tr{background:#0f172a}
thead th{padding:12px 16px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.5px;color:#94a3b8;white-space:nowrap}
tbody td{padding:11px 16px;border-bottom:1px solid #f1f5f9;color:#334155}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f8fafc}
.g-name{font-weight:700;color:#0f172a;font-size:14px}
.g-sub{font-size:11px;color:#94a3b8;margin-top:1px}
.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600}
.bd-g{background:#f0fdf4;color:#166534}.bd-b{background:#eff6ff;color:#1d4ed8}.bd-y{background:#fefce8;color:#854d0e}.bd-gray{background:#f8fafc;color:#64748b}

/* ===== SPLIT LAYOUT ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split-img{overflow:hidden}.split-img img{width:100%;height:100%;object-fit:cover;display:block}
.split-body{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.split.rev .split-img{order:2}.split.rev .split-body{order:1}

/* ===== BREADCRUMB ===== */
.bread{font-size:12px;color:#94a3b8;margin-bottom:24px;display:flex;gap:6px;flex-wrap:wrap}
.bread a{color:#64748b;text-decoration:none}.bread a:hover{color:#0f172a}
.bread span{color:#cbd5e1}

/* ===== SPEC BOX ===== */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:24px 0}
.spec-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:16px 18px}
.spec-label{font-size:11px;color:#94a3b8;margin-bottom:4px;font-weight:500;letter-spacing:.3px}
.spec-val{font-size:16px;font-weight:700;color:#0f172a}

/* ===== COMPARISON BAR ===== */
.cmp-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #f1f5f9}
.cmp-row:last-child{border-bottom:none}
.cmp-label{min-width:120px;font-size:13px;color:#64748b;font-weight:500}
.cmp-bar{flex:1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;position:relative}
.cmp-fill{height:100%;border-radius:4px;transition:width .4s ease}
.cmp-fill-a{background:#94a3b8}
.cmp-fill-b{background:#0284c7}
.cmp-vals{display:flex;gap:16px;min-width:140px;font-size:13px;font-weight:600}
.cmp-va{color:#94a3b8}.cmp-vb{color:#0284c7}

/* ===== TOOL ===== */
.tool-box{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:36px;margin:32px 0}
.tool-box label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px}
.tool-box select,.tool-box input[type=number]{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;color:#0f172a;background:#f8fafc;margin-bottom:18px}
.tool-box select:focus,.tool-box input:focus{outline:none;border-color:#0284c7;box-shadow:0 0 0 3px rgba(2,132,199,.1)}
.tool-result{background:#0f172a;border-radius:10px;padding:28px;margin-top:20px;color:#f8fafc}
.tool-result h3{color:#38bdf8;margin-bottom:12px;font-size:16px}
.tool-result p{color:#94a3b8;font-size:14px;line-height:1.7}
.tool-result .rec{font-size:20px;font-weight:700;color:#fff;margin:8px 0}

/* ===== BLOG ===== */
.blog-card{display:grid;grid-template-columns:280px 1fr;gap:0;border:1px solid #e2e8f0;border-radius:11px;overflow:hidden;transition:box-shadow .15s}
.blog-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.06)}
.blog-thumb{overflow:hidden}.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-body{padding:28px 28px}
.blog-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#0284c7;margin-bottom:8px}
.blog-body h3{font-size:18px;color:#0f172a;margin-bottom:8px;line-height:1.35}
.blog-body p{font-size:14px;color:#64748b;line-height:1.7}
.blog-meta{font-size:12px;color:#94a3b8;margin-top:12px}
.article{max-width:760px;margin:0 auto}
.article h2{font-size:clamp(20px,3vw,30px);margin:40px 0 16px}
.article h3{font-size:20px;margin:32px 0 12px}
.article p{font-size:15.5px;line-height:1.85;margin-bottom:18px;color:#334155}
.article ul,.article ol{margin:0 0 18px 24px;font-size:15px;color:#334155;line-height:1.85}
.article table{margin:24px 0}
.article blockquote{border-left:3px solid #0284c7;padding:12px 20px;margin:24px 0;background:#f0f9ff;border-radius:0 8px 8px 0;font-size:15px;color:#334155}

/* ===== CTA ===== */
.cta-sec{background:#070f1e;padding:96px 0;text-align:center;position:relative;overflow:hidden}
.cta-sec h2{color:#fff;margin-bottom:12px;position:relative}
.cta-sub{font-size:17px;color:#64748b;margin-bottom:40px;position:relative}
.cta-pills{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;position:relative}
.cta-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:14px 24px;min-width:145px}
.pill-l{font-size:11px;color:#64748b;margin-bottom:4px;font-weight:500}.pill-v{font-size:15px;font-weight:700;color:#f1f5f9}

/* ===== FOOTER ===== */
.footer{background:#020617;padding:48px 40px 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer h4{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#475569;margin-bottom:16px}
.footer a{font-size:13px;color:#64748b;text-decoration:none;display:block;margin-bottom:8px;transition:color .15s}.footer a:hover{color:#f8fafc}
.footer-brand{font-size:13px;font-weight:600;color:#475569;margin-bottom:6px}
.footer-copy{font-size:12px;color:#1e293b}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.04);padding-top:20px;flex-wrap:wrap;gap:8px}

/* ===== WHATSAPP FLOAT ===== */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:300;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);transition:transform .15s;text-decoration:none;font-size:28px}
.wa-float:hover{transform:scale(1.08);color:#fff}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){
.card-grid{grid-template-columns:repeat(2,1fr)}
.split{grid-template-columns:1fr}.split-img{height:280px}.split.rev .split-img,.split.rev .split-body{order:unset}
.footer-grid{grid-template-columns:1fr 1fr}
.blog-card{grid-template-columns:1fr}.blog-thumb{height:200px}
}
@media(max-width:640px){
.wrap,.wrap-w{padding:0 20px}.nav-inner{padding:0 20px}
.nav-links a:not(.nav-cta){display:none}.loc-bar{margin-left:8px}
.card-grid{grid-template-columns:1fr}
.hero-kpi{gap:20px}
.footer-grid{grid-template-columns:1fr}
.spec-grid{grid-template-columns:1fr 1fr}
.split-body{padding:40px 24px}
h1{letter-spacing:-.5px}
}