/* ═══════════════════════════════════════════
   ROOT & RESET
═══════════════════════════════════════════ */
:root {
  --teal: #0b6e72;
  --teal-dark: #084e52;
  --teal-light: #12959b;
  --teal-pale: #e0f4f5;
  --amber: #d4821a;
  --amber-dark: #b36b10;
  --cream: #f8f5ef;
  --dark: #0e2428;
  --text: #2c3e35;
  --muted: #6a8080;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 6px 28px rgba(0, 0, 0, 0.1);
}
*, *::before, *::after { margin:0;padding:0;box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif;color:var(--text);background:var(--cream); }
h1,h2,h3,h4 { font-family:'Cormorant Garamond',serif; }
a { text-decoration:none;color:inherit; }
img { display:block;max-width:100%; }

/* TOPBAR */
.topbar { background:var(--teal-dark);color:rgba(255,255,255,.88);font-size:.82rem;padding:7px 40px;display:flex;justify-content:space-between;align-items:center;gap:12px; }
.topbar a { color:rgba(255,255,255,.88);transition:color .2s; }
.topbar a:hover { color:#fff; }
.topbar-left,.topbar-right { display:flex;align-items:center;gap:18px; }
.topbar-right a { background:var(--amber);color:#fff;padding:4px 12px;border-radius:4px;font-weight:500;transition:background .2s; }
.topbar-right a:hover { background:var(--amber-dark); }

/* NAVBAR */
#navbar { background:rgba(255,243,82,.72);backdrop-filter:blur(10px);box-shadow:0 2px 18px rgba(0,0,0,.09);position:sticky;top:0;z-index:500; }
.navbar-inner { display:flex;align-items:center;justify-content:space-between;padding:0 40px;margin:0 auto;height:100px; }
.logo-block { display:flex;align-items:center;gap:14px; }
.logo-icon { width:150px;height:100px;background:var(--teal);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;flex-shrink:0;overflow:hidden; }
.logo-icon img { width:100%;height:100%;object-fit:cover; }
.logo-text { line-height:1.3; }
.logo-text strong { display:block;font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--text);font-weight:700; }
.nav-phone { font-size:.8rem;color:var(--muted);text-align:right;line-height:1.5; }
.nav-phone strong { display:block;font-size:1rem;color:var(--teal-dark); }
nav.main-nav { display:flex;align-items:center;gap:2px; }
.nav-link { position:relative;padding:8px 13px;font-size:1.05rem;font-weight:500;color:var(--text);border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;display:flex;align-items:center;gap:4px; }
.nav-link:hover { background:var(--teal-pale);color:var(--teal-dark); }
.nav-link.active { color:var(--teal);font-weight:600; }
.has-drop .arrow { font-size:1rem;opacity:.8;transition:transform .2s; }
.has-drop:hover .arrow { transform:rotate(180deg); }
.dropdown { position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:var(--radius);box-shadow:0 12px 36px rgba(0,0,0,.14);min-width:210px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s;border-top:3px solid var(--teal);overflow:hidden;z-index:600; }
.has-drop:hover .dropdown { opacity:1;pointer-events:all;transform:translateY(0); }
.dropdown a { display:block;padding:11px 18px;font-size:.84rem;color:var(--text);border-bottom:1px solid #f0f0f0;transition:background .15s,color .15s; }
.dropdown a:last-child { border-bottom:none; }
.dropdown a:hover { background:var(--teal-pale);color:var(--teal-dark);padding-left:24px; }
.hamburger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px; }
.hamburger span { display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
#mobile-nav { display:none;flex-direction:column;background:#fff;border-top:2px solid var(--teal-pale);max-height:0;overflow:hidden;transition:max-height .4s ease; }
#mobile-nav.open { display:flex;max-height:500px; }
#mobile-nav a { padding:14px 28px;font-size:.95rem;border-bottom:1px solid #f0f0f0;color:var(--text);transition:background .15s; }
#mobile-nav a:hover { background:var(--teal-pale);color:var(--teal-dark); }

/* BLOG HERO */
.blog-hero { position:relative;height:520px;overflow:hidden;background:var(--dark); }
.blog-hero-img { position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);transition:transform 8s linear; }
.blog-hero-img.loaded { transform:scale(1); }
.blog-hero-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(8,78,82,.95) 0%,rgba(8,78,82,.5) 50%,rgba(8,78,82,.15) 100%); }
.blog-hero-content { position:absolute;bottom:0;left:0;right:0;padding:48px 56px;color:#fff; }
.breadcrumb { font-size:.8rem;color:rgba(255,255,255,.65);margin-bottom:16px;display:flex;align-items:center;gap:8px; }
.breadcrumb a { color:rgba(255,255,255,.7);transition:color .2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { color:rgba(255,255,255,.4); }
.blog-category-badge { display:inline-block;background:var(--amber);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:16px; }
.blog-hero-content h1 { font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.2;max-width:820px;margin-bottom:20px;text-shadow:0 2px 12px rgba(0,0,0,.25); }
.blog-hero-meta { display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:.83rem;color:rgba(255,255,255,.72); }
.blog-hero-meta span { display:flex;align-items:center;gap:6px; }

/* LAYOUT */
.blog-layout { max-width:1280px;margin:0 auto;padding:64px 40px;display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start; }

/* ARTICLE */
.blog-article { min-width:0; }
.article-intro { font-size:1.18rem;line-height:1.9;color:var(--teal-dark);font-weight:500;border-left:4px solid var(--amber);padding-left:20px;margin-bottom:40px; }
.blog-article h2 { font-size:1.9rem;color:var(--teal-dark);margin:48px 0 16px;line-height:1.25;padding-top:8px;border-top:2px solid var(--teal-pale); }
.blog-article h3 { font-size:1.35rem;color:var(--teal-dark);margin:32px 0 12px; }
.blog-article p { font-size:1rem;line-height:1.85;color:var(--muted);margin-bottom:18px; }
.blog-article ul,.blog-article ol { margin:0 0 20px 20px; }
.blog-article li { font-size:1rem;color:var(--muted);line-height:1.8;margin-bottom:8px; }
.blog-article li::marker { color:var(--teal);font-weight:700; }

.pull-quote { background:linear-gradient(135deg,var(--teal-dark),var(--teal));color:#fff;border-radius:14px;padding:36px 40px;margin:40px 0;position:relative;overflow:hidden; }
.pull-quote::before { content:'\201C';font-family:'Cormorant Garamond',serif;font-size:8rem;color:rgba(255,255,255,.15);position:absolute;top:-20px;left:20px;line-height:1;pointer-events:none; }
.pull-quote p { font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-style:italic;line-height:1.6;color:#fff;position:relative;margin:0; }

.info-box { border-radius:12px;padding:20px 24px;margin:28px 0;display:flex;gap:14px;align-items:flex-start; }
.info-box.warning { background:#fff8e6;border-left:4px solid var(--amber); }
.info-box.tip { background:var(--teal-pale);border-left:4px solid var(--teal); }
.info-box .ib-icon { font-size:1.4rem;flex-shrink:0;margin-top:2px; }
.info-box .ib-body p { font-size:.95rem;color:var(--text);line-height:1.7;margin:0; }
.info-box .ib-body strong { display:block;font-size:.9rem;margin-bottom:4px;color:var(--teal-dark); }

.key-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0; }
.kstat { background:#fff;border-radius:12px;padding:22px 18px;text-align:center;box-shadow:var(--shadow);border-top:4px solid var(--teal); }
.kstat .knum { font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:700;color:var(--teal-dark);line-height:1;margin-bottom:6px; }
.kstat .klabel { font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em; }

/* MYTH-FACT CARDS */
.myth-fact-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 32px; }
.myth-card { background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07);display:flex;flex-direction:column; }
.myth-part { background:#fff8f6;border-left:4px solid #c0392b;padding:14px 16px; }
.fact-part { background:var(--teal-pale);border-left:4px solid var(--teal);padding:14px 16px;flex:1; }
.myth-label { display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#c0392b;background:rgba(192,57,43,.1);padding:2px 9px;border-radius:50px;margin-bottom:6px; }
.fact-label { display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dark);background:rgba(11,110,114,.12);padding:2px 9px;border-radius:50px;margin-bottom:6px; }
.myth-part p { font-size:.92rem;color:#7b2d26;font-weight:600;margin:0;line-height:1.45; }
.fact-part p { font-size:.88rem;color:var(--teal-dark);margin:0;line-height:1.5; }
@media(max-width:768px){.myth-fact-grid{grid-template-columns:1fr}}

.signs-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 28px; }
.sign-item { background:#fff;border-radius:8px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.05);border-left:3px solid var(--teal); }
.sign-item .si-icon { color:var(--teal);font-size:1rem;flex-shrink:0;margin-top:1px; }

.article-cta { background:var(--dark);border-radius:16px;padding:36px 40px;margin:48px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.article-cta p { color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.6;max-width:500px;margin:0; }
.article-cta h3 { color:#fff;font-size:1.6rem;margin-bottom:8px; }
.article-cta .cta-btns { display:flex;gap:12px;flex-wrap:wrap; }
.btn-primary { background:var(--amber);color:#fff;padding:12px 26px;border-radius:8px;font-weight:600;font-size:.92rem;transition:background .2s,transform .15s;display:inline-block; }
.btn-primary:hover { background:var(--amber-dark);transform:translateY(-2px); }
.btn-outline-light { background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);padding:10px 24px;border-radius:8px;font-weight:500;font-size:.92rem;transition:all .2s;display:inline-block; }
.btn-outline-light:hover { background:rgba(255,255,255,.1);border-color:#fff; }

.article-tags-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid #e8e8e8; }
.article-tags-row span { font-size:.82rem;color:var(--muted);font-weight:600; }
.atag { background:var(--teal-pale);color:var(--teal-dark);font-size:.78rem;padding:5px 13px;border-radius:50px;font-weight:600;transition:background .2s;cursor:default; }
.atag:hover { background:var(--teal);color:#fff; }

.author-box { background:#fff;border-radius:14px;padding:28px;margin-top:40px;display:flex;gap:20px;align-items:flex-start;box-shadow:var(--shadow); }
.author-avatar { width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:700;flex-shrink:0; }
.author-info h4 { font-size:1.1rem;color:var(--teal-dark);margin-bottom:3px; }
.author-info .author-role { font-size:.78rem;color:var(--amber);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px; }
.author-info p { font-size:.88rem;color:var(--muted);line-height:1.65;margin:0; }

/* SIDEBAR */
.blog-sidebar { position:sticky;top:120px; }
.sidebar-widget { background:#fff;border-radius:14px;padding:24px;margin-bottom:24px;box-shadow:var(--shadow); }
.sidebar-widget h4 { font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:700;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--teal-pale); }
.toc-list { list-style:none; }
.toc-list li { margin-bottom:10px; }
.toc-list a { font-size:.88rem;color:var(--muted);display:flex;align-items:flex-start;gap:8px;transition:color .2s; }
.toc-list a:hover { color:var(--teal); }
.toc-num { flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--teal-pale);color:var(--teal);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px; }
.toc-list a.active { color:var(--teal);font-weight:600; }
.toc-list a.active .toc-num { background:var(--teal);color:#fff; }
.qfact { display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #f0f0f0; }
.qfact:last-child { margin-bottom:0;padding-bottom:0;border-bottom:none; }
.qfact .qf-icon { font-size:1.2rem;flex-shrink:0; }
.qfact .qf-text strong { display:block;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px; }
.qfact .qf-text span { font-size:.9rem;color:var(--teal-dark);font-weight:500; }
.sidebar-cta { background:linear-gradient(135deg,var(--teal-dark),var(--teal));border-radius:14px;padding:28px 24px;text-align:center;color:#fff;margin-bottom:24px;box-shadow:0 8px 32px rgba(11,110,114,.3); }
.sidebar-cta h4 { font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:8px;color:#fff; }
.sidebar-cta p { font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:20px; }
.sidebar-cta .cta-phone { font-size:1.2rem;font-family:'Cormorant Garamond',serif;font-weight:700;color:#fff;display:block;margin-bottom:14px; }
.sidebar-cta .btn-cta { display:block;background:var(--amber);color:#fff;padding:12px 20px;border-radius:8px;font-weight:600;font-size:.9rem;transition:background .2s,transform .15s; }
.sidebar-cta .btn-cta:hover { background:var(--amber-dark);transform:translateY(-2px); }
.related-post { display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #f0f0f0; }
.related-post:last-child { margin-bottom:0;padding-bottom:0;border-bottom:none; }
.related-post img { width:70px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0; }
.related-post .rp-info h5 { font-size:.88rem;color:var(--teal-dark);line-height:1.35;margin-bottom:4px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.related-post .rp-info span { font-size:.75rem;color:var(--muted); }
.related-post:hover .rp-info h5 { color:var(--teal); }

/* PROGRESS & BACK TO TOP */
#read-progress { position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--amber));width:0%;z-index:1000;transition:width .1s linear; }
#back-to-top { position:fixed;bottom:90px;right:20px;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 16px rgba(11,110,114,.4);opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;z-index:700; }
#back-to-top.visible { opacity:1;pointer-events:all; }
#back-to-top:hover { transform:translateY(-3px); }

/* FLOAT BUTTONS */
.float-btns { position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:800; }
.float-btn { display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:50px;color:#fff;font-weight:600;font-size:.85rem;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s;white-space:nowrap; }
.float-btn:hover { transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.3); }
.float-wa { background:#25d366; }
.float-call { background:var(--teal); }

/* FOOTER */
footer { background:var(--dark);color:rgba(255,255,255,.65);padding:60px 40px 0; }
.footer-inner { max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo { width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:700;margin-bottom:16px; }
.footer-brand p { font-size:.88rem;line-height:1.75;color:rgba(255,255,255,.55);margin-bottom:20px; }
.footer-social { display:flex;gap:10px; }
.social-btn { width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:background .2s; }
.social-btn:hover { background:var(--teal); }
.footer-col h4 { font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:.88rem;color:rgba(255,255,255,.55);transition:color .2s; }
.footer-col ul li a:hover { color:var(--teal-light); }
.footer-contact-item { display:flex;align-items:flex-start;gap:10px;margin-bottom:14px; }
.footer-contact-item .ico { color:var(--teal-light);font-size:1rem;margin-top:2px;flex-shrink:0; }
.footer-contact-item p { font-size:.86rem;color:rgba(255,255,255,.55);line-height:1.5; }
.footer-contact-item a { color:rgba(255,255,255,.75);transition:color .2s; }
.footer-contact-item a:hover { color:#fff; }
.footer-bottom { max-width:1280px;margin:0 auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(255,255,255,.35); }
.footer-bottom a { color:rgba(255,255,255,.45);transition:color .2s; }
.footer-bottom a:hover { color:rgba(255,255,255,.8); }

/* RESPONSIVE */
@media(max-width:1024px){.blog-layout{grid-template-columns:1fr}.blog-sidebar{position:static}.footer-inner{grid-template-columns:1fr 1fr}.toc-widget{display:none}}
@media(max-width:768px){.topbar{padding:7px 20px}.topbar-left{display:none}.navbar-inner{padding:0 20px}nav.main-nav{display:none}.hamburger{display:flex}.nav-phone{display:none}.blog-hero{height:420px}.blog-hero-content{padding:32px 24px}.blog-layout{padding:40px 20px}.key-stats{grid-template-columns:1fr 1fr}.signs-grid{grid-template-columns:1fr}.article-cta{flex-direction:column}.author-box{flex-direction:column}.footer-inner{grid-template-columns:1fr;gap:32px}footer{padding:48px 20px 0}.float-btn span{display:none}.float-btn{padding:14px}}
@media(max-width:480px){.key-stats{grid-template-columns:1fr}.blog-hero{height:360px}}