/* ============================================================
   CözümTesisat — Custom Design System  v1.0
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  --primary:        #0c2461;
  --primary-light:  #1a3c85;
  --primary-dark:   #071840;
  --accent:         #f97316;
  --accent-dark:    #ea580c;
  --accent-light:   #fff7ed;
  --white:          #ffffff;
  --gray-50:        #f8fafc;
  --gray-100:       #f1f5f9;
  --gray-200:       #e2e8f0;
  --gray-400:       #94a3b8;
  --gray-600:       #475569;
  --gray-800:       #1e293b;
  --gray-900:       #0f172a;
  --bg:             #f0f4f8;
  --surface:        #ffffff;
  --text:           #0f172a;
  --text-sm:        #475569;
  --border:         #e2e8f0;
  --success:        #10b981;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.08);
  --shadow-md:      0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.16);
  --shadow-xl:      0 20px 60px rgba(0,0,0,.2);
  --radius-sm:      6px;
  --radius:         14px;
  --radius-lg:      22px;
  --ease:           cubic-bezier(.4,0,.2,1);
  --t:              all .3s var(--ease);
  --container:      1200px;
  --nav-h:          72px;
}

/* ── 2. Reset & Base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.65;color:var(--text);background:var(--bg);overflow-x:hidden;margin:0;padding:0!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ── 3. Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:'Poppins','Segoe UI',system-ui,sans-serif;font-weight:700;line-height:1.2;color:var(--text)}
p{margin-bottom:1rem;color:var(--text-sm)}
p:last-child{margin-bottom:0}

.section-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:var(--accent-light);border:1px solid #fed7aa;padding:.32rem .9rem;border-radius:99px;margin-bottom:1rem}
.section-title{font-size:clamp(1.6rem,3.5vw,2.5rem);color:var(--text);margin-bottom:.75rem}
.section-title span{color:var(--accent)}
.section-subtitle{font-size:1.05rem;color:var(--text-sm);max-width:600px;margin:0 auto 3rem}
.text-center{text-align:center}

/* ── 4. Layout ─────────────────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section-light{background:var(--white)}
.section-gray{background:var(--gray-100)}
.section-dark{background:var(--primary)}

/* ── 5. Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.8rem;border-radius:50px;font-family:'Poppins',sans-serif;font-size:.95rem;font-weight:600;border:2px solid transparent;cursor:pointer;transition:var(--t);text-decoration:none;white-space:nowrap;line-height:1}
.btn-primary{background:var(--accent);color:var(--white);border-color:var(--accent);box-shadow:0 4px 15px rgba(249,115,22,.35)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(249,115,22,.45);color:var(--white)}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-outline:hover{background:var(--white);color:var(--primary);border-color:var(--white)}
.btn-outline-primary{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary);color:var(--white)}
.btn-white{background:var(--white);color:var(--primary);border-color:var(--white)}
.btn-white:hover{background:transparent;color:var(--white);transform:translateY(-2px)}
.btn-sm{padding:.5rem 1.2rem;font-size:.85rem}
.btn-lg{padding:1rem 2.2rem;font-size:1.05rem}

/* ── 6. Top Bar ────────────────────────────────────────────── */
.top-bar{background:var(--primary-dark);color:rgba(255,255,255,.8);font-size:.82rem;padding:.45rem 0}
.top-bar a{color:rgba(255,255,255,.8);transition:var(--t)}
.top-bar a:hover{color:var(--accent)}
.top-bar .container{display:flex;align-items:center;justify-content:space-between}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:1.5rem}
.top-bar-item{display:flex;align-items:center;gap:.4rem}
.top-bar-item svg{width:14px;height:14px;flex-shrink:0}

/* ── 7. Navigation ─────────────────────────────────────────── */
.navbar-ct{position:sticky;top:0;z-index:1000;background:var(--white);box-shadow:var(--shadow-sm);transition:var(--t)}
.navbar-ct.scrolled{backdrop-filter:blur(12px);background:rgba(255,255,255,.95);box-shadow:var(--shadow-md)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.navbar-brand-ct{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-icon svg{width:24px;height:24px;color:var(--white)}
.brand-name{display:block;font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:800;color:var(--primary);line-height:1}
.brand-tagline{display:block;font-size:.68rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.nav-links-ct{display:flex;align-items:center;gap:.2rem}
.nav-link-ct{padding:.5rem .9rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--gray-800);transition:var(--t)}
.nav-link-ct:hover,.nav-link-ct.active{color:var(--primary);background:var(--gray-100)}
.nav-cta-ct{display:flex;align-items:center;gap:.75rem}
.nav-phone-ct{display:flex;align-items:center;gap:.4rem;font-family:'Poppins',sans-serif;font-size:.95rem;font-weight:700;color:var(--primary)}
.nav-phone-ct svg{width:18px;color:var(--accent)}
.navbar-toggle-ct{display:none;flex-direction:column;gap:5px;width:36px;cursor:pointer;padding:.4rem;background:none;border:none}
.navbar-toggle-ct span{display:block;height:2.5px;background:var(--primary);border-radius:99px;transition:var(--t)}
.mobile-menu-ct{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);box-shadow:var(--shadow-lg);padding:1rem 1.5rem 1.5rem;border-top:2px solid var(--accent)}
.mobile-menu-ct.open{display:block}
.mobile-menu-ct .nav-link-ct{display:block;padding:.85rem 0;border-bottom:1px solid var(--border);border-radius:0;font-size:1rem}
.mobile-menu-ct .btn{width:100%;margin-top:.75rem;justify-content:center}

/* ── 8. Hero ───────────────────────────────────────────────── */
.hero{position:relative;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--primary-light) 100%);padding:5.5rem 0 7rem;overflow:hidden}
.hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:90px;background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fed7aa;padding:.5rem 1rem;border-radius:99px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.5rem;backdrop-filter:blur(8px)}
.hero-badge-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:pulseDot 2s infinite}
.hero-title{font-size:clamp(2.2rem,5vw,3.8rem);color:var(--white);line-height:1.1;margin-bottom:1.25rem}
.hero-title span{color:var(--accent)}
.hero-subtitle{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:520px;margin-bottom:2rem;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.5rem}
.hero-trust-item{display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.8);font-size:.85rem}
.hero-trust-item svg{width:16px;color:var(--success);flex-shrink:0}
.hero-card{background:rgba(255,255,255,.11);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);padding:2rem;color:var(--white)}
.hero-card-title{font-size:1rem;font-weight:700;margin-bottom:1.25rem;color:rgba(255,255,255,.9)}
.hero-card-item{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.875rem;color:rgba(255,255,255,.8)}
.hero-card-item:last-child{border:none}
.status-badge{padding:.2rem .7rem;border-radius:99px;font-size:.75rem;font-weight:700}
.status-active{background:rgba(16,185,129,.2);color:#6ee7b7}
.status-fast{background:rgba(249,115,22,.2);color:#fdba74}

/* ── 9. Stats ──────────────────────────────────────────────── */
.stats-section{background:var(--white);padding:3.5rem 0;border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-item{padding:1.5rem 2rem;border-right:1px solid var(--border);text-align:center}
.stat-item:last-child{border-right:none}
.stat-number{font-family:'Poppins',sans-serif;font-size:2.6rem;font-weight:800;color:var(--primary);line-height:1;margin-bottom:.2rem}
.stat-number span{color:var(--accent)}
.stat-label{font-size:.85rem;color:var(--text-sm);font-weight:500}

/* ── 10. Service Cards ─────────────────────────────────────── */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.service-card{background:var(--white);border-radius:var(--radius);padding:2rem;border:1px solid var(--border);transition:var(--t);position:relative;overflow:hidden;display:block;color:inherit;text-decoration:none}
.service-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:var(--t)}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;color:inherit}
.service-card:hover::before{transform:scaleY(1)}
.service-icon{width:58px;height:58px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;transition:var(--t)}
.service-card:hover .service-icon{background:linear-gradient(135deg,var(--primary),var(--primary-light))}
.service-icon svg{width:28px;color:var(--primary);transition:var(--t)}
.service-card:hover .service-icon svg{color:var(--white)}
.service-card h3{font-size:1.12rem;margin-bottom:.45rem;color:var(--text)}
.service-card p{font-size:.87rem;color:var(--text-sm);margin:0}
.service-card-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--primary);font-size:.85rem;font-weight:600;margin-top:.9rem;transition:var(--t)}
.service-card-link svg{width:14px;transition:var(--t)}
.service-card:hover .service-card-link{color:var(--accent)}
.service-card:hover .service-card-link svg{transform:translateX(4px)}

/* ── 11. About ─────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-image-placeholder{background:linear-gradient(135deg,var(--primary),var(--primary-light));height:440px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;position:relative}
.about-badge-float{position:absolute;bottom:2rem;left:-1.5rem;background:var(--white);border-radius:var(--radius);padding:1rem 1.5rem;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:1rem}
.about-badge-icon{width:46px;height:46px;background:linear-gradient(135deg,var(--accent-light),#fed7aa);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.about-badge-icon svg{width:22px;color:var(--accent)}
.about-badge-text strong{display:block;font-size:1.05rem;color:var(--primary)}
.about-badge-text span{font-size:.78rem;color:var(--text-sm)}
.about-features{margin:1.5rem 0 2rem}
.about-feature{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1rem}
.about-feature-icon{width:36px;height:36px;flex-shrink:0;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.about-feature-icon svg{width:18px;color:var(--primary)}
.about-feature-text strong{display:block;font-size:.95rem;color:var(--text);margin-bottom:.12rem}
.about-feature-text span{font-size:.85rem;color:var(--text-sm)}

/* ── 12. Blog Cards ────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.blog-card{background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:var(--t)}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.blog-card-image{height:200px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.blog-card-cat{position:absolute;top:1rem;left:1rem;background:var(--accent);color:var(--white);font-size:.73rem;font-weight:700;padding:.25rem .75rem;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.blog-card-body{padding:1.5rem}
.blog-card-meta{display:flex;align-items:center;gap:.75rem;font-size:.78rem;color:var(--text-sm);margin-bottom:.7rem}
.blog-card-meta span{display:flex;align-items:center;gap:.3rem}
.blog-card-meta svg{width:13px}
.blog-card h3{font-size:1.08rem;margin-bottom:.45rem;line-height:1.35}
.blog-card h3 a{color:var(--text);transition:var(--t)}
.blog-card h3 a:hover{color:var(--primary)}
.blog-card p{font-size:.875rem;color:var(--text-sm)}
.blog-card-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.read-more{display:flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--primary);transition:var(--t)}
.read-more svg{width:14px;transition:var(--t)}
.read-more:hover{color:var(--accent)}
.read-more:hover svg{transform:translateX(4px)}

/* ── 13. Testimonials ──────────────────────────────────────── */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.testimonial-card{background:var(--white);border-radius:var(--radius);padding:2rem;border:1px solid var(--border);position:relative;transition:var(--t)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testimonial-quote-icon{position:absolute;top:1.25rem;right:1.25rem;width:38px;height:38px;background:var(--accent-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.testimonial-quote-icon svg{width:18px;color:var(--accent)}
.stars-ct{color:#f59e0b;font-size:1.1rem;letter-spacing:.1rem;margin-bottom:1rem;display:block}
.testimonial-text{font-size:.91rem;color:var(--text-sm);margin-bottom:1.25rem;line-height:1.75;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:var(--white);font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;flex-shrink:0}
.testimonial-name{font-weight:700;font-size:.95rem;color:var(--text)}
.testimonial-location{font-size:.78rem;color:var(--text-sm)}

/* ── 14. CTA Band ──────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,var(--accent-dark),var(--accent));padding:4.5rem 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40' fill='%23fff' fill-opacity='0.05'/%3E%3C/svg%3E")}
.cta-band h2{color:var(--white);font-size:clamp(1.6rem,3.5vw,2.5rem);margin-bottom:.7rem;position:relative}
.cta-band p{color:rgba(255,255,255,.88);font-size:1.1rem;margin-bottom:2rem;position:relative}
.cta-band-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;position:relative}

/* ── 15. Contact ───────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:start}
.contact-info-cards{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.contact-info-card{background:var(--white);border-radius:var(--radius);padding:1.4rem 1.5rem;border:1px solid var(--border);display:flex;align-items:center;gap:1rem;transition:var(--t)}
.contact-info-card:hover{box-shadow:var(--shadow-md);border-color:transparent}
.contact-info-icon{width:50px;height:50px;flex-shrink:0;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.contact-info-icon.blue{background:linear-gradient(135deg,var(--primary),var(--primary-light))}
.contact-info-icon.orange{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
.contact-info-icon.green{background:linear-gradient(135deg,#059669,#10b981)}
.contact-info-icon.purple{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.contact-info-icon svg{width:22px;color:var(--white)}
.contact-info-label{font-size:.75rem;color:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem}
.contact-info-value{font-size:.97rem;font-weight:700;color:var(--text)}
.contact-info-value a{color:var(--primary)}
.contact-info-value a:hover{color:var(--accent)}
.contact-form-card{background:var(--white);border-radius:var(--radius-lg);padding:2.5rem;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.contact-form-card h3{font-size:1.4rem;margin-bottom:.4rem;color:var(--text)}
.contact-form-card p{font-size:.9rem;color:var(--text-sm);margin-bottom:1.75rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.2rem}
.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.45rem}
.form-control-ct{width:100%;padding:.8rem 1rem;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;color:var(--text);background:var(--white);transition:var(--t);font-family:inherit;outline:none}
.form-control-ct:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(12,36,97,.1)}
.form-control-ct::placeholder{color:var(--gray-400)}
textarea.form-control-ct{resize:vertical;min-height:130px}

/* ── 16. Footer ────────────────────────────────────────────── */
.footer-ct{background:var(--primary-dark);color:rgba(255,255,255,.72);padding:4.5rem 0 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand-name{font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:800;color:var(--white);margin-bottom:.5rem}
.footer-brand-desc{font-size:.875rem;line-height:1.75;margin-bottom:1.5rem}
.footer-socials{display:flex;gap:.65rem}
.social-link{width:38px;height:38px;background:rgba(255,255,255,.08);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:var(--t)}
.social-link:hover{background:var(--accent)}
.social-link svg{width:18px;color:var(--white)}
.footer-heading{font-size:.82rem;font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.25rem}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-link{font-size:.875rem;color:rgba(255,255,255,.62);transition:var(--t);display:flex;align-items:center;gap:.4rem}
.footer-link:hover{color:var(--accent);padding-left:4px}
.footer-link svg{width:12px;flex-shrink:0}
.footer-contact-item{display:flex;align-items:flex-start;gap:.7rem;font-size:.875rem;color:rgba(255,255,255,.62);margin-bottom:.8rem}
.footer-contact-item svg{width:15px;flex-shrink:0;margin-top:.25rem;color:var(--accent)}
.footer-bottom{padding:1.3rem 0;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.42)}
.footer-bottom a{color:rgba(255,255,255,.55)}
.footer-bottom a:hover{color:var(--accent)}
.footer-bottom-links{display:flex;gap:1rem}

/* ── 17. WhatsApp ──────────────────────────────────────────── */
.whatsapp-float{position:fixed;bottom:2rem;right:2rem;z-index:9999}
.whatsapp-btn{display:flex;align-items:center;gap:.65rem;background:#25D366;color:var(--white);padding:.85rem 1.4rem .85rem 1rem;border-radius:50px;box-shadow:0 4px 20px rgba(37,211,102,.4);font-family:'Poppins',sans-serif;font-size:.88rem;font-weight:700;transition:var(--t);animation:floatBtn 3.5s ease-in-out infinite}
.whatsapp-btn:hover{transform:scale(1.06);box-shadow:0 8px 30px rgba(37,211,102,.5);color:var(--white)}
.whatsapp-btn svg{width:22px;flex-shrink:0}

/* ── 18. Page Hero ─────────────────────────────────────────── */
.page-hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));padding:4rem 0 5.5rem;text-align:center;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:70px;background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%)}
.page-hero h1{color:var(--white);margin-bottom:.7rem}
.page-hero p{color:rgba(255,255,255,.75);font-size:1.1rem;margin:0}
.breadcrumb-ct{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.83rem;color:rgba(255,255,255,.55);margin-bottom.8rem}
.breadcrumb-ct a{color:rgba(255,255,255,.55)}
.breadcrumb-ct a:hover{color:var(--accent)}
.breadcrumb-ct svg{width:12px}

/* ── 19. About Page Extras ─────────────────────────────────── */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.value-card{background:var(--white);border-radius:var(--radius);padding:2rem;border:1px solid var(--border);text-align:center;transition:var(--t)}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.value-icon{width:64px;height:64px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.value-icon svg{width:30px;color:var(--white)}
.value-card h3{font-size:1.1rem;margin-bottom:.5rem}
.value-card p{font-size:.87rem}
.timeline{position:relative;padding:0}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--primary))}
.timeline-item{display:flex;gap:1.5rem;margin-bottom:2.5rem;position:relative}
.timeline-dot{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.timeline-dot svg{width:20px;color:var(--white)}
.timeline-content h4{font-size:1.05rem;margin-bottom:.3rem}
.timeline-content p{font-size:.87rem;margin:0}
.timeline-year{font-size:.78rem;font-weight:700;color:var(--accent);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.08em}

/* ── 20. Map ───────────────────────────────────────────────── */
.map-placeholder{height:360px;background:linear-gradient(135deg,var(--gray-100),var(--gray-200));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);flex-direction:column;gap:1rem;color:var(--text-sm)}
.map-placeholder svg{width:48px;color:var(--gray-400)}

/* ── 21. Animations ────────────────────────────────────────── */
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
@keyframes floatBtn{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── 22. Responsive ────────────────────────────────────────── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-image-placeholder{height:300px}
  .about-badge-float{left:1rem}
}
@media(max-width:768px){
  .section{padding:3.5rem 0}
  .nav-links-ct,.nav-cta-ct{display:none}
  .navbar-toggle-ct{display:flex}
  .navbar-ct{position:relative}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(2){border-right:none}
  .contact-grid{grid-template-columns:1fr}
  .top-bar-left{display:none}
  .hero{padding:3.5rem 0 5.5rem}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--border)}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .whatsapp-btn span{display:none}
  .footer-grid{grid-template-columns:1fr}
  .cta-band-actions .btn{width:100%;justify-content:center}
}
}

/* ── Article Detail ─────────────────────────────────────────── */
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:start}
.article-cover{width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin-bottom:2rem;display:block}
.article-cover-placeholder{width:100%;height:280px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:16px;margin-bottom:2rem;display:flex;align-items:center;justify-content:center}
.article-meta-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.article-cat-badge{background:var(--accent-light);color:var(--accent-dark);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .8rem;border-radius:20px;border:1px solid var(--accent)}
.article-date-meta{display:flex;align-items:center;gap:.35rem;color:var(--text-sm);font-size:.85rem}
.article-date-meta svg{width:15px;flex-shrink:0}
.prose{color:var(--text);line-height:1.85;font-size:1.0625rem}
.prose h2{font-size:1.5rem;font-weight:700;color:var(--primary);margin:2.2rem 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}
.prose h3{font-size:1.2rem;font-weight:700;color:var(--primary-light);margin:1.8rem 0 .7rem}
.prose h4{font-size:1.05rem;font-weight:700;margin:1.5rem 0 .5rem}
.prose p{margin:0 0 1.2rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.4rem;padding:0}
.prose li{margin-bottom:.4rem}
.prose blockquote{margin:1.5rem 0;padding:.9rem 1.4rem;border-left:4px solid var(--accent);background:var(--accent-light);border-radius:0 8px 8px 0;font-style:italic;color:var(--gray-800)}
.prose blockquote p{margin:0}
.prose a{color:var(--accent-dark);text-decoration:underline}
.prose a:hover{color:var(--primary)}
.prose img{max-width:100%;border-radius:10px;margin:1rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
.prose th{background:var(--primary);color:var(--white);padding:.65rem 1rem;text-align:left;font-weight:600}
.prose td{padding:.6rem 1rem;border-bottom:1px solid var(--border)}
.prose tr:nth-child(even) td{background:var(--gray-50)}
.prose strong{color:var(--gray-900)}
.prose code{background:var(--gray-100);color:var(--accent-dark);padding:.1rem .4rem;border-radius:4px;font-size:.88em}
.prose pre{background:var(--gray-900);color:#e2e8f0;padding:1.2rem 1.5rem;border-radius:10px;overflow-x:auto;margin:1.2rem 0}
.prose pre code{background:none;color:inherit;padding:0}
/* Article sidebar */
.article-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:1.5rem}
.article-sidebar-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow-sm)}
.article-sidebar-card h4{font-size:.9rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--border)}
.article-service-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--gray-100);color:var(--gray-800);font-size:.82rem;font-weight:600;padding:.35rem .8rem;border-radius:20px;text-decoration:none;margin:.3rem .2rem 0 0;transition:all .2s}
.article-service-tag:hover{background:var(--primary);color:var(--white)}
.article-cta-sidebar{background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:16px;padding:1.8rem;text-align:center}
.article-cta-sidebar h4{color:var(--white);font-size:1rem;margin-bottom:.6rem}
.article-cta-sidebar p{color:rgba(255,255,255,.85);font-size:.85rem;margin-bottom:1.2rem}
.article-cta-sidebar .btn-white{background:var(--white);color:var(--primary);font-size:.9rem;padding:.7rem 1.4rem}
.article-cta-sidebar .btn-white:hover{background:var(--accent-light);color:var(--accent-dark)}
/* Related articles */
.related-articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static}
}
@media(max-width:600px){
  .article-cover{max-height:220px}
  .article-cover-placeholder{height:160px}
  .related-articles-grid{grid-template-columns:1fr}
}

/* ── 20. Mobile Bottom Bar ─────────────────────────────────── */
.mobile-bottom-bar{display:none}
@media(max-width:768px){
  .mobile-bottom-bar{
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    position:fixed;bottom:0;left:0;right:0;z-index:9998;
    background:#fff;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    box-shadow:0 -2px 16px rgba(0,0,0,.12);border-top:1px solid #e2e8f0;
  }
  .mobile-bottom-bar-label{font-size:.72rem;font-weight:600;color:#64748b;text-align:center;line-height:1}
  .mobile-bottom-bar-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%}
  .mobile-bottom-btn{
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.7rem .5rem;border-radius:.65rem;font-family:'Poppins',sans-serif;
    font-size:.88rem;font-weight:700;text-decoration:none;transition:opacity .15s;
  }
  .mobile-bottom-btn:active{opacity:.8}
  .mobile-bottom-btn-phone{background:#0ea5e9;color:#fff}
  .mobile-bottom-btn-wp{background:#25d366;color:#fff}
  /* push page content above the bar so it doesn't hide behind it */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  /* hide the desktop whatsapp float on mobile (bar replaces it) */
  .whatsapp-float{display:none}
}