/* ==========================================================================
   Neo Smile Dental — Site Design System
   ========================================================================== */
:root{
  --ink:#0F2E34;
  --ink-soft:#3C5A5E;
  --base:#F7FBFA;
  --mint:#E7F5F2;
  --mint-deep:#D6EEE8;
  --teal:#12888A;
  --teal-deep:#0B5F63;
  --coral:#FF6B54;
  --coral-deep:#E5533D;
  --line:#D9E8E4;
  --white:#FFFFFF;
  --danger:#D6493A;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --radius:18px;
  --shadow:0 20px 50px -25px rgba(15,46,52,.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--ink); background:var(--base); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
.eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; color:var(--teal-deep); font-weight:600; display:inline-flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--coral); display:inline-block;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; color:var(--ink); line-height:1.1;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:100px; font-weight:600; font-size:15px; cursor:pointer; border:1.5px solid transparent; transition:.25s ease; white-space:nowrap;}
.btn-coral{background:var(--coral); color:#fff;}
.btn-coral:hover{background:var(--coral-deep); transform:translateY(-2px);}
.btn-outline{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12); transform:translateY(-2px);}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:var(--teal-deep); transform:translateY(-2px);}
.btn-ghost{border-color:var(--teal); color:var(--teal-deep); background:transparent;}
.btn-ghost:hover{background:var(--mint);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:#081c20;}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:13px;}

/* ===== Topbar / Header ===== */
.topbar{background:var(--ink); color:#CFE6E4; font-size:13px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 28px; flex-wrap:wrap; gap:6px;}
.topbar .tb-item{display:inline-flex; align-items:center; gap:7px; margin-right:22px; font-family:var(--font-mono); letter-spacing:.02em;}
.topbar .tb-item:last-child{margin-right:0;}
.topbar a:hover{color:#fff;}
header.site-header{background:var(--base); position:sticky; top:0; z-index:200; border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; gap:24px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{height:46px; width:auto;}
.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks > li{position:relative;}
.navlinks a.top-link{font-weight:600; font-size:15px; color:var(--ink); padding:8px 0; display:inline-block;}
.navlinks a.top-link:hover, .navlinks a.top-link.active{color:var(--teal-deep);}
.has-drop > a.top-link::after{content:"⌄"; margin-left:5px; font-size:13px; opacity:.6;}
.dropdown{position:absolute; top:100%; left:-16px; background:#fff; min-width:270px; max-height:360px; overflow-y:auto; border-radius:12px; box-shadow:var(--shadow); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s ease; border:1px solid var(--line); z-index:50;}
.has-drop:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:block; padding:10px 14px; border-radius:8px; font-size:14px; color:var(--ink-soft); font-weight:500;}
.dropdown a:hover{background:var(--mint); color:var(--teal-deep);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.icon-btn{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mint); color:var(--teal-deep); flex-shrink:0;}
.icon-btn:hover{background:var(--mint-deep);}
.burger{display:none; width:42px; height:42px; border-radius:50%; background:var(--mint); align-items:center; justify-content:center; border:none; flex-shrink:0;}
.burger span, .burger span::before, .burger span::after{content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s;}
.burger span::before{position:absolute; top:-6px;}
.burger span::after{position:absolute; top:6px;}
.mobile-panel{position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:#fff; z-index:400; height:100vh; box-shadow:-20px 0 50px rgba(0,0,0,.25); transform:translateX(100%); transition:.3s ease; padding:26px 24px; overflow-y:auto;}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel .mp-close{width:36px; height:36px; border-radius:50%; background:var(--mint); display:flex; align-items:center; justify-content:center; margin-left:auto; margin-bottom:20px; cursor:pointer; border:none;}
.mobile-panel a, .mobile-panel button{display:block; width:100%; text-align:left; padding:12px 4px; font-weight:600; font-size:15.5px; border-bottom:1px solid var(--line); background:none; border-left:none; border-right:none; border-top:none;}
.mobile-panel .sub-link{padding-left:16px; font-weight:500; font-size:14px; color:var(--ink-soft); border-bottom:none;}
.scrim{position:fixed; inset:0; background:rgba(11,26,29,.5); z-index:399; opacity:0; visibility:hidden; transition:.3s;}
.scrim.show{opacity:1; visibility:visible;}

/* ===== Page hero (inner pages) ===== */
.page-hero{background:var(--ink); color:#fff; padding:78px 0 54px; text-align:center; position:relative; overflow:hidden;}
.page-hero::before{content:""; position:absolute; right:-100px; top:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(255,107,84,.22), transparent 70%);}
.page-hero h1{position:relative; color:#fff; font-size:clamp(32px,4.4vw,50px); margin-bottom:12px;}
.page-hero .crumbs{position:relative; font-family:var(--font-mono); font-size:13px; color:#9FC9C4; letter-spacing:.03em;}
.page-hero .crumbs a{color:#9FC9C4;}
.page-hero .crumbs a:hover{color:#fff;}
.page-hero .crumbs .sep{margin:0 8px; opacity:.5;}

/* ===== Home hero (carousel) ===== */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden;}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease;}
.hero-slide.active{opacity:1;}
.hero-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(11,26,29,.92) 20%, rgba(11,26,29,.55) 60%, rgba(11,26,29,.35) 100%);}
.hero-inner{position:relative; z-index:2; padding:110px 28px 150px; max-width:1240px; margin:0 auto;}
.hero-content{max-width:640px;}
.hero-content .eyebrow{color:#8FE1D9;}
.hero-content .eyebrow::before{background:var(--coral);}
.hero-content h1{font-size:clamp(34px,5vw,56px); color:#fff; margin:18px 0 22px; letter-spacing:-.01em;}
.hero-content p{font-size:16.5px; color:#D6E7E4; max-width:520px; margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-actions .btn-whatsapp{background:#25D366; color:#fff;}
.hero-actions .btn-whatsapp:hover{background:#1eb958; transform:translateY(-2px);}
.hero-dots{position:absolute; bottom:36px; left:28px; z-index:3; display:flex; gap:8px;}
.hero-dots button{width:26px; height:4px; border-radius:2px; background:rgba(255,255,255,.35); border:none; cursor:pointer; transition:.2s; padding:0;}
.hero-dots button.active{background:var(--coral); width:38px;}
.hero-arrows{position:absolute; right:28px; bottom:36px; z-index:3; display:flex; gap:8px;}
.hero-arrows button{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; display:flex; align-items:center; justify-content:center;}
.hero-arrows button:hover{background:rgba(255,255,255,.26);}

/* ===== Before/After signature widget ===== */
.ba-float{position:absolute; right:6%; bottom:-90px; z-index:5; width:330px; background:#fff; border-radius:20px; padding:16px; box-shadow:var(--shadow);}
.ba-label{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.ba-label span{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-deep); font-weight:600;}
.ba-slider{position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; cursor:ew-resize; user-select:none;}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba-after{clip-path:inset(0 0 0 50%);}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%); pointer-events:none;}
.ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:0; width:2.5px; background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.08);}
.ba-handle .knob{position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.25); pointer-events:none;}
.ba-tag{position:absolute; top:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; padding:4px 9px; border-radius:100px; background:rgba(15,46,52,.65); color:#fff; pointer-events:none;}
.ba-tag.left{left:10px;} .ba-tag.right{right:10px;}
.ba-block{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
@media(max-width:900px){ .ba-float{display:none;} }

/* ===== Quick strip ===== */
.quick-strip{background:var(--mint); padding-top:130px; padding-bottom:60px;}
.quick-strip.static{padding-top:60px;}
@media(max-width:900px){ .quick-strip{padding-top:60px;} }
.quick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:860px){ .quick-grid{grid-template-columns:1fr;} }
.quick-card{background:#fff; border-radius:16px; padding:26px; box-shadow:0 12px 30px -20px rgba(15,46,52,.25); border:1px solid var(--line);}
.quick-card h4{font-size:19px; margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.quick-card h4 .dot{width:9px; height:9px; border-radius:50%; background:var(--coral); flex-shrink:0;}
.hours-row{display:flex; justify-content:space-between; font-size:14.5px; padding:7px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft);}
.hours-row:last-of-type{border-bottom:none;}
.hours-row b{color:var(--ink); font-weight:600;}
.emergency-card{background:var(--ink); color:#fff; border:none;}
.emergency-card p{color:#B9D6D3; font-size:14px; margin-bottom:14px;}
.emergency-num{font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--coral); margin-bottom:16px; display:block;}
.emergency-actions{display:flex; gap:10px;}
.emergency-actions .btn{flex:1; padding:12px 14px; font-size:14px;}

/* ===== Form fields ===== */
.field{width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:#fff; margin-bottom:14px;}
.field:focus{outline:2px solid var(--teal); border-color:var(--teal);}
textarea.field{resize:vertical;}
label.field-label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){ .field-row{grid-template-columns:1fr;} }
.alert{border-radius:12px; padding:14px 18px; font-size:14px; margin-bottom:18px;}
.alert-danger{background:#FBEAE7; color:#9B3A2E; border:1px solid #F2C7BE;}
.alert-info{background:var(--mint); color:var(--teal-deep); border:1px solid var(--mint-deep);}
.alert ul{list-style:disc; padding-left:20px;}
.alert li{margin-bottom:2px;}

/* ===== Section shells ===== */
section, .section{padding:90px 0;}
.section-tight{padding:60px 0;}
.section-head{max-width:640px; margin-bottom:50px;}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.section-head h2{font-size:clamp(28px,3.6vw,42px); margin-top:16px;}
.section-head p{color:var(--ink-soft); margin-top:14px; font-size:16px;}
.bg-mint{background:var(--mint);}
.bg-ink{background:var(--ink); color:#fff;}
.bg-ink h2, .bg-ink h3, .bg-ink h4{color:#fff;}
.bg-ink .eyebrow{color:#8FE1D9;}
.bg-ink .eyebrow::before{background:var(--coral);}

/* ===== About / two-col ===== */
.two-col{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center;}
.two-col.reverse{grid-template-columns:1.15fr .85fr;}
.two-col.reverse .media-col{order:2;}
@media(max-width:900px){ .two-col, .two-col.reverse{grid-template-columns:1fr; gap:36px;} .two-col.reverse .media-col{order:0;} }
.media-col{position:relative;}
.media-col img{border-radius:22px; width:100%; height:460px; object-fit:cover;}
.media-badge{position:absolute; bottom:-24px; left:-24px; background:#fff; border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; max-width:220px; border:1px solid var(--line);}
@media(max-width:560px){ .media-badge{left:0; bottom:-18px; padding:14px 16px;} }
.media-badge .num{font-family:var(--font-display); font-size:32px; color:var(--teal-deep); line-height:1;}
.media-badge .lbl{font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:4px;}
.copy-col p{color:var(--ink-soft); margin:16px 0 24px; font-size:16px;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px;}
.stat-item{padding:16px 18px; background:var(--mint); border-radius:14px;}
.stat-item .n{font-family:var(--font-mono); font-weight:700; font-size:14.5px; color:var(--teal-deep);}
.stat-item .l{font-size:13px; color:var(--ink-soft); margin-top:3px;}

/* ===== Value / feature cards ===== */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:960px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .card-grid{grid-template-columns:1fr;} }
.value-card{background:#fff; border-radius:18px; padding:34px 26px; text-align:center; border:1px solid var(--line); transition:.25s ease;}
.value-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.value-icon{width:60px; height:60px; border-radius:16px; background:var(--mint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:24px;}
.value-card h4{font-size:18px; margin-bottom:10px;}
.value-card p{font-size:14.5px; color:var(--ink-soft);}

/* ===== Mission / checklist ===== */
.check-list{display:flex; flex-direction:column; gap:20px; margin-top:24px;}
.check-row{display:flex; gap:16px; align-items:flex-start;}
.check-row .tick{width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px;}
.check-row h5{font-size:16.5px; margin-bottom:4px;}
.check-row p{font-size:14.5px; color:var(--ink-soft);}

/* ===== Services ===== */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:960px){ .svc-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line); transition:.25s ease; display:flex; flex-direction:column; height:100%;}
.svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.svc-card .svc-media{height:200px; overflow:hidden;}
.svc-card .svc-media img{width:100%; height:100%; object-fit:cover; transition:.4s ease;}
.svc-card:hover .svc-media img{transform:scale(1.06);}
.svc-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex-grow:1;}
.svc-body h4{font-size:18.5px; margin-bottom:8px;}
.svc-body p{font-size:14.5px; color:var(--ink-soft); margin-bottom:16px; flex-grow:1;}
.svc-link{font-size:13.5px; font-weight:600; color:var(--coral-deep); display:inline-flex; align-items:center; gap:5px; margin-top:auto;}
.svc-link:hover{gap:8px;}
.svc-icon-card{background:#fff; border-radius:18px; padding:30px 24px; text-align:center; border:1px solid var(--line);}
.svc-icon-card i, .svc-icon-card .icon{width:56px; height:56px; border-radius:14px; background:var(--mint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:22px;}

/* ===== Service detail page ===== */
.service-desc{color:var(--ink-soft); font-size:16px; line-height:1.85; margin-bottom:28px;}
.service-media-stack{position:relative; min-height:420px; border-radius:var(--radius); overflow:hidden;}
.service-media-stack img{position:absolute; width:100%; object-fit:cover; border-radius:14px;}
.step-row{display:flex; gap:18px; align-items:flex-start; margin-bottom:26px;}
.step-num{width:44px; height:44px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-display); font-weight:600; font-size:17px;}
.step-row h5{font-size:16px; margin-bottom:4px;}
.step-row p{font-size:14.5px; color:var(--ink-soft);}

/* ===== CTA banner ===== */
.cta-banner{background:var(--ink); color:#fff; position:relative; overflow:hidden;}
.cta-banner::before{content:""; position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,107,84,.28), transparent 70%);}
.cta-inner{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.cta-inner h3{color:#fff; font-size:clamp(24px,3vw,34px); max-width:480px;}
.cta-inner p{color:#B9D6D3; margin-top:10px; max-width:480px;}
.cta-right{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.cta-phone{font-family:var(--font-mono); font-size:22px; color:#8FE1D9; font-weight:600;}
.cta-form-panel{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:32px; position:relative; z-index:2;}
.cta-form-panel h3{color:#fff; margin-bottom:20px; text-align:center;}
.cta-form-panel .field{background:rgba(255,255,255,.94); border:none;}

/* ===== Team ===== */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:900px){ .team-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .team-grid{grid-template-columns:1fr;} }
.team-card{background:#fff; border-radius:20px; overflow:hidden; border:1px solid var(--line);}
.team-photo{height:280px; overflow:hidden;}
.team-photo img{width:100%; height:100%; object-fit:cover;}
.team-info{padding:20px 22px;}
.team-info h4{font-size:19px;}
.team-info .role{color:var(--coral-deep); font-weight:600; font-size:13px; margin:6px 0 4px;}
.team-info .cred{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:.03em;}
.team-social{display:flex; gap:10px; margin-top:14px;}
.team-social a{width:32px; height:32px; border-radius:50%; background:var(--mint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-size:12px;}
.team-social a:hover{background:var(--teal); color:#fff;}
.spec-card{background:#fff; border-radius:16px; padding:22px; display:flex; gap:18px; border:1px solid var(--line);}
.spec-photo{width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.spec-card h5{font-size:16.5px; margin-bottom:4px;}
.spec-card .spec-role{color:var(--teal-deep); font-weight:600; font-size:13.5px; margin-bottom:4px;}
.spec-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:2px;}

/* ===== Gallery ===== */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:900px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.gallery-item{position:relative; border-radius:14px; overflow:hidden; cursor:pointer; aspect-ratio:1/1;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:.35s ease;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item::after{content:"⤢"; position:absolute; inset:0; background:rgba(15,46,52,.55); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; opacity:0; transition:.25s ease;}
.gallery-item:hover::after{opacity:1;}

/* ===== FAQ accordion ===== */
.faq-filter{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
.faq-filter .field{margin-bottom:0;}
.faq-filter input.field{flex:1; min-width:200px;}
.faq-category h3{font-size:22px; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid var(--mint-deep);}
.faq-item{border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:#fff; overflow:hidden;}
.faq-q{padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; font-weight:600; font-size:15.5px;}
.faq-q .chev{transition:.25s ease; flex-shrink:0; color:var(--teal-deep);}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a-inner{padding:0 22px 20px; color:var(--ink-soft); font-size:14.5px; line-height:1.7;}
.faq-item.open .faq-a{max-height:600px;}

/* ===== Blog ===== */
.blog-layout{display:grid; grid-template-columns:2fr 1fr; gap:44px; align-items:flex-start;}
@media(max-width:900px){ .blog-layout{grid-template-columns:1fr;} }
.blog-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:700px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line);}
.blog-card .thumb{height:190px; overflow:hidden;}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover;}
.blog-body{padding:20px 22px;}
.blog-meta{display:flex; gap:12px; align-items:center; font-family:var(--font-mono); font-size:11px; color:var(--teal-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.blog-card h4{font-size:17px; margin-bottom:8px;}
.blog-card p{font-size:14px; color:var(--ink-soft); margin-bottom:14px;}
.blog-sidebar{background:var(--mint); border-radius:18px; padding:26px;}
.blog-sidebar h4{font-size:16px; margin-bottom:18px;}
.recent-post{display:flex; gap:12px; margin-bottom:16px;}
.recent-post img{width:64px; height:64px; border-radius:10px; object-fit:cover; flex-shrink:0;}
.recent-post h6{font-size:13.5px; line-height:1.4; margin-bottom:4px;}
.recent-post .date{font-size:11.5px; color:var(--ink-soft); font-family:var(--font-mono);}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.pagination a, .pagination span{padding:9px 15px; border-radius:8px; font-size:13.5px; border:1px solid var(--line); background:#fff;}
.pagination a:hover{background:var(--mint);}
.pagination .active{background:var(--teal); color:#fff; border-color:var(--teal);}
.article-hero{background:var(--ink); color:#fff; padding:70px 0 44px;}
.article-hero .blog-meta{color:#8FE1D9;}
.article-hero h1{color:#fff; font-size:clamp(28px,4vw,44px); margin:14px 0;}
.article-body{color:var(--ink-soft); font-size:16.5px; line-height:1.85;}
.article-body p{margin-bottom:20px;}
.tag-pill{display:inline-block; background:var(--mint); color:var(--teal-deep); font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:100px; margin:0 8px 8px 0;}
.share-row{display:flex; gap:10px; margin-top:28px;}
.share-row a{width:40px; height:40px; border-radius:50%; background:var(--mint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center;}
.share-row a:hover{background:var(--teal); color:#fff;}

/* ===== Testimonials ===== */
.testi-wrap{position:relative; max-width:760px; margin:0 auto;}
.testi-slide{display:none; text-align:center;}
.testi-slide.active{display:block;}
.testi-slide p{font-size:19px; color:#fff; font-style:italic; margin-bottom:20px;}
.testi-slide h4{color:#fff; font-size:17px;}
.testi-dots{display:flex; justify-content:center; gap:8px; margin-top:26px;}
.testi-dots button{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0;}
.testi-dots button.active{background:var(--coral); width:24px; border-radius:5px;}

/* ===== Footer ===== */
footer.site-footer{background:#0B2429; color:#B9D6D3; padding-top:80px;}
.newsletter-band{background:var(--ink); padding:44px 0; text-align:center;}
.newsletter-band h3{color:#fff; margin-bottom:8px;}
.newsletter-band p{color:#B9D6D3; margin-bottom:22px;}
.newsletter-form{display:flex; gap:10px; max-width:520px; margin:0 auto;}
.newsletter-form input{flex:1; padding:14px 16px; border-radius:100px; border:none; font-size:14px;}
.newsletter-form button{border-radius:100px;}
@media(max-width:560px){ .newsletter-form{flex-direction:column;} }
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.08);}
@media(max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
.foot-logo{height:42px; margin-bottom:16px; filter:brightness(0) invert(1);}
.foot-about p{font-size:14px; line-height:1.7; max-width:280px; color:#8FADA9;}
.foot-social{display:flex; gap:10px; margin-top:18px;}
.foot-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:13px; color:#B9D6D3;}
.foot-social a:hover{background:var(--coral); color:#fff;}
footer h5{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:#8FE1D9; margin-bottom:18px; font-weight:600;}
footer ul li{margin-bottom:11px;}
footer ul li a{font-size:14.5px; color:#B9D6D3;}
footer ul li a:hover{color:#fff;}
.foot-contact li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; margin-bottom:14px; color:#B9D6D3;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:13px; color:#7C9C97; flex-wrap:wrap; gap:8px;}

/* ===== Floating WhatsApp + modals ===== */
.float-wa{position:fixed; bottom:24px; right:24px; z-index:300; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.4); animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

.modal-overlay{position:fixed; inset:0; background:rgba(11,26,29,.6); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff; border-radius:20px; max-width:620px; width:100%; max-height:90vh; overflow-y:auto; padding:32px; position:relative; box-shadow:var(--shadow); margin:auto;}
.modal-box.modal-sm{max-width:460px; text-align:center;}
.modal-box.modal-lg{max-width:900px; padding:16px;}
.modal-close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:var(--mint); display:flex; align-items:center; justify-content:center; border:none; z-index:2;}
.modal-close:hover{background:var(--mint-deep);}
.modal-box h3{font-size:22px; margin-bottom:6px; display:flex; align-items:center; gap:10px;}
.modal-sub{color:var(--ink-soft); font-size:14px; margin-bottom:22px;}
.modal-success-icon{width:64px; height:64px; border-radius:50%; background:var(--mint); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 20px;}
.lightbox-img{width:100%; border-radius:14px; display:block;}

.toast-wrap{position:fixed; top:20px; right:20px; z-index:600; display:flex; flex-direction:column; gap:10px;}
.toast{background:var(--ink); color:#fff; padding:14px 20px; border-radius:12px; font-size:14px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; min-width:260px; opacity:0; transform:translateY(-8px); transition:.25s ease;}
.toast.show{opacity:1; transform:translateY(0);}
.toast.error{background:var(--danger);}

@media(max-width:980px){ .navlinks{display:none;} .burger{display:flex;} }
@media(max-width:600px){
  .wrap{padding:0 18px;}
  .nav{padding:12px 18px;}
  .logo img{height:32px;}
  .nav-cta{gap:8px;}
  .nav-cta > a.btn.btn-teal, .nav-cta > button.btn.btn-teal{display:none;}
  .topbar .tb-item{margin-right:14px; font-size:11.5px;}
  section, .section{padding:60px 0;}
  .hero-inner{padding:80px 22px 130px;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
}