:root{
    --primary:#0B1F3A;
    --accent:#26A69A;
    --bg:#F7F9FC;
    --text:#222;
    --muted:#6B7280;
    --gold:#C9A227;
    --card:#ffffff;
    --shadow: 0 8px 30px rgba(0,0,0,.06);
    --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    background:var(--bg);
    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
a{color:inherit; text-decoration:none}
.container{max-width:1140px; margin-inline:auto; padding:0 20px}

/* Header */
header{
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px}
.brand{display:flex; align-items:center; gap:12px}
.brand svg{width:40px; height:40px}
.brand .name{font-weight:700; letter-spacing:.2px}
.brand .sub{font-size:12px; color:var(--muted)}
nav ul{display:flex; list-style:none; padding:0; margin:0; gap:22px}
nav a{color:#0B1F3A; font-weight:600}
.ctas{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid transparent; font-weight:600; cursor:pointer}
.btn.primary{background:var(--accent); color:#fff}
.btn.outline{border-color:var(--accent); color:var(--accent); background:#fff}
.btn.secondary{background:var(--primary); color:#fff}
.mobile-menu{display:none}

@media (max-width:980px){
    nav ul{display:none}
    .mobile-menu{display:inline-flex}
}

/* Hero */
.hero{
    position:relative;
    isolation:isolate;
    color:#fff;
    background:linear-gradient(130deg, rgba(11,31,58,.85), rgba(38,166,154,.65)), url('https://images.unsplash.com/photo-1543443258-1c164c2f3abc?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
}
.hero .container{padding:90px 20px 80px}
.hero h1{font-size:42px; line-height:1.2; margin:0 0 14px}
.hero p{max-width:740px; margin:0 0 22px; font-size:18px; color:#EBF4F6}
.hero .chips{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0}
.chip{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px}

/* Sections */
section{padding:56px 0}
.section-title{font-size:28px; margin:0 0 8px}
.section-sub{color:var(--muted); margin:0 0 24px}

/* Cards grid */
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){
    .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .grid.cols-3,.grid.cols-4,.grid.cols-2{grid-template-columns:1fr}
}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.icon{
    width:40px;height:40px;border-radius:10px;
    display:inline-grid;
    place-items:center;
    background:rgba(38,166,154,.12);
    color:var(--accent);
    margin-bottom:10px
}

/* Blog specific styles */
.blog-post{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px;
    margin-bottom:24px;
    border-left:4px solid var(--accent);
}
.blog-post h3{
    margin:0 0 8px;
    color:var(--primary);
    cursor:pointer;
    transition:color 0.3s ease;
}
.blog-post h3:hover{
    color:var(--accent);
}
.blog-meta{
    color:var(--muted);
    font-size:14px;
    margin:0 0 16px;
}
.blog-excerpt{
    margin:0 0 16px;
    line-height:1.6;
}
.blog-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:16px 0;
}
.tag{
    background:rgba(38,166,154,.1);
    color:var(--accent);
    padding:4px 8px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
}
.share-buttons{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:16px;
}
.share-btn{
    padding:6px 12px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    transition:all 0.2s;
}
.share-twitter{
    background:#1DA1F2;
    color:white;
}
.share-linkedin{
    background:#0077B5;
    color:white;
}
.share-btn:hover{
    opacity:0.9;
    transform:translateY(-1px);
}

/* Full post view styles */
.full-post-view{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:32px;
    margin-bottom:24px;
}
.full-post-view h1{
    font-size:32px;
    margin:0 0 16px;
    color:var(--primary);
    line-height:1.3;
}
.full-post-content{
    font-size:18px;
    line-height:1.7;
    margin:24px 0;
}
.back-to-blog{
    margin-bottom:20px;
}

/* Pagination styles */
.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:32px 0;
}
.pagination button{
    padding:8px 16px;
    border:1px solid var(--accent);
    background:white;
    color:var(--accent);
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    transition:all 0.2s;
}
.pagination button:hover:not(:disabled){
    background:var(--accent);
    color:white;
}
.pagination button.active{
    background:var(--accent);
    color:white;
}
.pagination button:disabled{
    opacity:0.5;
    cursor:not-allowed;
}
.pagination .page-info{
    color:var(--muted);
    font-size:14px;
    margin:0 8px;
}

/* Blog controls */
.blog-controls{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    flex-wrap:wrap;
    gap:16px;
}
.posts-per-page{
    display:flex;
    align-items:center;
    gap:8px;
}
.posts-per-page select{
    padding:6px 8px;
    border:1px solid #e2e8f0;
    border-radius:6px;
    background:white;
}

/* Admin styles */
.admin-section{
    background:rgba(11,31,58,.05);
    border-radius:var(--radius);
    padding:20px;
    margin-top:32px;
}
.admin-form{
    display:grid;
    gap:16px;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.form-group label{
    font-weight:600;
    font-size:14px;
}
.form-group input,
.form-group textarea,
.form-group select{
    padding:12px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#fff;
}
.form-group textarea{
    min-height:100px;
    resize:vertical;
}

/* Customers carousel */
.marquee{overflow:hidden; mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent)}
.marquee-track{display:flex; gap:36px; align-items:center; animation:scroll 30s linear infinite}
.marquee img{height:44px; width:auto; opacity:.9}
/*.marquee img{height:44px; width:auto; filter:grayscale(100%); opacity:.9}*/
@keyframes scroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* Contact form */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.form .full{grid-column:1/-1}
.form label{font-weight:600; font-size:14px}
.form input,.form select,.form textarea{
    width:100%; padding:12px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#fff
}
.form textarea{min-height:120px; resize:vertical}
.notice{font-size:13px; color:var(--muted)}
.hidden{display:none !important}

/* Footer */
footer{background:#0B1F3A; color:#dbe5ee; padding:28px 0}
footer a{color:#c7e9e7; text-decoration:underline}
.subtle{color:#b9c5d0; font-size:13px}

/* Floating WA */
.float-wa{
    position:fixed; right:18px; bottom:18px; z-index:40; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 25px rgba(37,211,102,.4)
}

/* Mobile nav drawer */
.drawer{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none}
.drawer .panel{margin-left:auto; width:78%; max-width:360px; height:100%; background:#fff; padding:20px}
.drawer.open{display:block}
.drawer ul{list-style:none; padding:0; margin:20px 0; display:grid; gap:14px; font-weight:700}

/* Blog admin modal */
.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    display:none;
    z-index:100;
    align-items:center;
    justify-content:center;
}
.modal.open{
    display:flex;
}
.modal-content{
    background:white;
    border-radius:var(--radius);
    padding:24px;
    max-width:500px;
    width:90%;
    max-height:90vh;
    overflow-y:auto;
}