/* ============================================================
   TanmayiSoft 2.0 – Premium Stylesheet (Light + Dark Accent Mix)
   ============================================================ */

:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #3B82F6;
  --purple: #8B5CF6;
  --pink: #EC4899;
  --orange: #F97316;
  --cyan: #0EA5E9;
  --green: #16A34A;
  --accent: #2563EB;
  --accent-light: #EFF4FF;
  --text-dark: #0F172A;
  --text-mid: #475569;
  --text-light: #64748B;
  --bg-white: #FFFFFF;
  --bg-off: #FAFBFF;
  --bg-section: #F4F7FF;
  --bg-dark: #0B1120;
  --bg-dark-raised: #131B30;
  --border: #E6EBF7;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 4px 20px rgba(15,23,42,0.06);
  --shadow-hover: 0 16px 44px rgba(15,23,42,0.12);
  --shadow-card: 0 6px 24px rgba(15,23,42,0.05);
  --success: #16A34A;
  --warning: #EA580C;
  --grad-primary: linear-gradient(135deg, #2563EB, #4F46E5);
  --grad-warm: linear-gradient(135deg, #EC4899, #F97316);
  --grad-text: linear-gradient(135deg, #2563EB, #4F46E5);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; color:var(--text-dark); background:var(--bg-white); font-size:16px; line-height:1.7; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; line-height:1.22; letter-spacing:-0.02em; color:var(--text-dark); }
a { color:var(--primary); text-decoration:none; transition:all .2s; }
a:hover { color:var(--primary-dark); }
img { max-width:100%; height:auto; display:block; }
.navbar-brand img, .site-logo { max-width:170px; height:auto; width:auto; }
p { margin-bottom:1rem; }
ul { margin:0; padding:0; }

.gradient-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── Image fallback (colorful, not gray) ─────────────────── */
.img-fallback { position:relative; background:linear-gradient(135deg, #EFF4FF, #F3EEFF); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.img-fallback::before { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(37,99,235,0.12) 1.5px, transparent 1.5px); background-size:22px 22px; }
.img-fallback i { position:relative; z-index:1; font-size:38px; color:var(--primary); opacity:0.45; }

/* ── Topbar (dark accent strip) ──────────────────────────── */
.topbar { background:var(--bg-dark); color:rgba(255,255,255,0.75); font-size:13px; padding:9px 0; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:0; }
.topbar a { color:rgba(255,255,255,0.75); } .topbar a:hover { color:#fff; }
.topbar-sep { color:rgba(255,255,255,0.2); margin:0 12px; }

/* ── Navbar (clean light, sticky) ────────────────────────── */
.navbar { background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); padding:8px 0; z-index:1000; position:sticky; top:0; transition:all .3s; }
.navbar.scrolled { box-shadow:0 4px 24px rgba(15,23,42,0.08); }
.navbar-brand .brand-text { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:22px; color:var(--text-dark); }
.navbar-toggler { border:none; padding:8px; } .navbar-toggler:focus { box-shadow:none; }
.navbar-toggler i { font-size:20px; color:var(--text-dark); }
.nav-link { font-size:14.5px; font-weight:600; color:var(--text-dark) !important; padding:22px 13px !important; position:relative; transition:color .2s; }
.nav-link:hover,.nav-link.active { color:var(--primary) !important; }
.nav-link.active::after { content:''; position:absolute; bottom:8px; left:13px; right:13px; height:2.5px; background:var(--grad-primary); border-radius:2px; }
.dropdown-menu { border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-hover); padding:8px; min-width:210px; }
.dropdown-item { border-radius:9px; padding:10px 14px; font-size:14px; font-weight:500; }
.dropdown-item:hover { background:var(--accent-light); color:var(--primary); }

.nav-actions { display:flex; align-items:center; gap:10px; }
.btn-wa-nav { display:flex; align-items:center; gap:6px; color:#25D366 !important; font-size:14px; font-weight:700; padding:9px 14px; border-radius:10px; border:1px solid rgba(37,211,102,0.3); transition:all .2s; }
.btn-wa-nav:hover { background:rgba(37,211,102,0.08); color:#25D366 !important; }
@media (max-width:991px) { .btn-wa-nav { display:none; } }

.nav-cta-btn { background:var(--grad-primary); color:#fff !important; padding:10px 22px !important; border-radius:11px !important; font-weight:700 !important; font-size:14px; box-shadow:0 8px 20px rgba(37,99,235,0.25); transition:all .25s; }
.nav-cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,99,235,0.34); color:#fff !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary-main { background:var(--grad-primary); color:#fff; padding:14px 30px; border-radius:13px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; box-shadow:0 12px 28px rgba(37,99,235,0.28); transition:all .25s; }
.btn-primary-main:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(37,99,235,0.36); color:#fff; }
.btn-outline-main { background:#fff; border:1.5px solid var(--border); color:var(--text-dark); padding:14px 30px; border-radius:13px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:all .25s; }
.btn-outline-main:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.btn-on-dark { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:#fff; padding:14px 30px; border-radius:13px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px; backdrop-filter:blur(10px); transition:all .25s; }
.btn-on-dark:hover { background:rgba(255,255,255,0.14); transform:translateY(-3px); color:#fff; }

/* ── Hero (LIGHT, with colorful soft mesh) ───────────────── */
.hero { padding:64px 0 60px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-160px; right:-120px; width:480px; height:480px; background:radial-gradient(circle, rgba(37,99,235,0.10) 0%, transparent 70%); filter:blur(40px); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-200px; left:-150px; width:420px; height:420px; background:radial-gradient(circle, rgba(236,72,153,0.07) 0%, transparent 70%); filter:blur(40px); pointer-events:none; }
.hero .container { position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--accent-light); border:1px solid rgba(37,99,235,0.16); padding:8px 18px; border-radius:50px; font-size:13.5px; font-weight:700; color:var(--primary); margin-bottom:26px; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.18); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.hero h1 { font-size:52px; margin-bottom:22px; letter-spacing:-0.03em; }
.hero .lead { font-size:18.5px; color:var(--text-mid); margin-bottom:36px; max-width:560px; line-height:1.65; }
.hero-stats { display:flex; gap:14px; margin-top:48px; flex-wrap:wrap; }
.hero-stat { background:#fff; border:1px solid var(--border); border-radius:17px; padding:18px 22px; box-shadow:var(--shadow-card); flex:1; min-width:120px; transition:transform .25s; }
.hero-stat:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.hero-stat h3 { font-size:26px; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:2px; }
.hero-stat p { font-size:12.5px; color:var(--text-light); margin:0; font-weight:600; }

.hero-img-frame { position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-hover); }
.hero-img-frame img { width:100%; height:100%; object-fit:cover; min-height:340px; }
.hero-img-frame.img-fallback { min-height:380px; }
.hero-img-frame.img-fallback i { font-size:64px; }

.hero-float-card { position:absolute; background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-hover); animation:float 6s ease-in-out infinite; z-index:2; }
.hfc-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hfc-text h5 { font-size:13px; font-weight:700; color:var(--text-dark); margin-bottom:2px; }
.hfc-text p { font-size:11.5px; color:var(--text-light); margin:0; }
.hfc-1 { top:-16px; left:-16px; animation-delay:0s; }
.hfc-2 { bottom:-16px; right:-16px; animation-delay:1.5s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@media (max-width:768px) { .hero-float-card { display:none; } }

/* ── Trust strip (client count, like TechGemini "300+ clients") ── */
.trust-strip { background:var(--bg-section); padding:22px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-strip-inner { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; font-size:14.5px; font-weight:600; color:var(--text-mid); }
.trust-strip-inner strong { color:var(--primary); font-size:17px; }

/* ── Page Hero (inner pages, LIGHT) ───────────────────────── */
.page-hero { padding:50px 0 44px; position:relative; background:var(--bg-section); overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-140px; right:-100px; width:360px; height:360px; background:radial-gradient(circle, rgba(37,99,235,0.10) 0%, transparent 70%); filter:blur(30px); pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-size:36px; margin-bottom:0; }
.breadcrumb { font-size:13.5px; margin-bottom:14px; }
.breadcrumb-item a { color:var(--text-light); font-weight:500; }
.breadcrumb-item.active { color:var(--primary); font-weight:700; }
.breadcrumb-item+.breadcrumb-item::before { color:var(--text-light); }

/* ── Section ─────────────────────────────────────────────── */
section { padding:84px 0; }
.section-bg { background:var(--bg-section); }
.section-label { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:14px; }
.section-label::before { content:''; width:24px; height:2.5px; background:var(--grad-primary); border-radius:2px; }
.section-title { font-size:34px; margin-bottom:16px; }
.section-sub { font-size:17px; color:var(--text-light); max-width:560px; margin:0 auto; }

/* ── Service Cards (light, colorful icon chips) ──────────── */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 26px; transition:all .3s; position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-primary); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); border-color:transparent; }
.service-card:hover::before { transform:scaleX(1); }
.svc-icon { width:56px; height:56px; border-radius:16px; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:23px; color:var(--primary); margin-bottom:18px; transition:all .3s; }
.service-card:nth-child(6n+1) .svc-icon { background:#EFF4FF; color:#2563EB; }
.service-card:nth-child(6n+2) .svc-icon { background:#F3EEFF; color:#8B5CF6; }
.service-card:nth-child(6n+3) .svc-icon { background:#FFF1F5; color:#EC4899; }
.service-card:nth-child(6n+4) .svc-icon { background:#FFF4ED; color:#F97316; }
.service-card:nth-child(6n+5) .svc-icon { background:#ECFDF5; color:#16A34A; }
.service-card:nth-child(6n+6) .svc-icon { background:#ECFEFF; color:#0EA5E9; }
.service-card:hover .svc-icon { transform:scale(1.08) rotate(-4deg); box-shadow:0 8px 20px rgba(15,23,42,0.12); }
.service-card h4 { font-size:18px; margin-bottom:10px; }
.service-card p { font-size:14.5px; color:var(--text-light); margin-bottom:16px; }
.service-link { font-size:14px; font-weight:700; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.service-link i { transition:transform .25s; font-size:12px; }
.service-card:hover .service-link i { transform:translateX(4px); }

/* ── Why Choose / Value Cards ────────────────────────────── */
.why-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 26px; text-align:center; height:100%; transition:all .3s; }
.why-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.why-icon { width:60px; height:60px; border-radius:16px; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin:0 auto 18px; box-shadow:0 10px 24px rgba(37,99,235,0.22); }
.why-card h4 { font-size:16.5px; margin-bottom:10px; }
.why-card p { font-size:14px; color:var(--text-light); margin:0; }

/* ── Portfolio ───────────────────────────────────────────── */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.portfolio-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all .3s; }
.portfolio-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); }
.portfolio-thumb { height:200px; overflow:hidden; position:relative; background:linear-gradient(135deg, #EFF4FF, #F3EEFF); display:flex; align-items:center; justify-content:center; }
.portfolio-thumb::before { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(37,99,235,0.12) 1.5px, transparent 1.5px); background-size:22px 22px; }
.portfolio-thumb i { position:relative; z-index:1; font-size:38px; color:var(--primary); opacity:0.45; }
.portfolio-thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.portfolio-card:hover .portfolio-thumb img { transform:scale(1.06); }
.portfolio-body { padding:22px 24px; }
.portfolio-cat { font-size:12px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.portfolio-body h4 { font-size:17px; margin-bottom:8px; }
.portfolio-body p { font-size:14px; color:var(--text-light); margin:0; }

/* ── Testimonials ────────────────────────────────────────── */
.testi-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 26px; height:100%; position:relative; transition:all .3s; }
.testi-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.testi-stars { color:#F59E0B; font-size:15px; margin-bottom:14px; letter-spacing:2px; }
.testi-text { font-size:14.5px; color:var(--text-mid); line-height:1.75; margin-bottom:20px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:44px; height:44px; border-radius:50%; background:var(--grad-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; overflow:hidden; flex-shrink:0; }
.testi-name { font-size:14.5px; font-weight:700; }
.testi-role { font-size:12.5px; color:var(--text-light); }

/* ── Blog ────────────────────────────────────────────────── */
.blog-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; height:100%; transition:all .3s; }
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.blog-thumb { height:180px; overflow:hidden; position:relative; background:linear-gradient(135deg, #EFF4FF, #F3EEFF); display:flex; align-items:center; justify-content:center; }
.blog-thumb::before { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(37,99,235,0.12) 1.5px, transparent 1.5px); background-size:22px 22px; }
.blog-thumb i { position:relative; z-index:1; font-size:32px; color:var(--primary); opacity:0.45; }
.blog-thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.blog-body { padding:22px; }
.blog-cat { font-size:11.5px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }
.blog-body h4 { font-size:16.5px; margin-bottom:10px; line-height:1.4; }
.blog-body h4 a { color:var(--text-dark); }
.blog-body h4 a:hover { color:var(--primary); }
.blog-body p { font-size:13.5px; color:var(--text-light); margin-bottom:14px; }
.blog-meta { font-size:12.5px; color:var(--text-light); font-weight:600; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item { background:#fff; border:1px solid var(--border); border-radius:16px; margin-bottom:12px; overflow:hidden; transition:border-color .25s; }
.faq-item:hover { border-color:rgba(37,99,235,0.25); }
.faq-q { padding:20px 24px; font-size:15.5px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-arrow { transition:transform .3s; color:var(--primary); }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 24px; }
.faq-item.open .faq-a { max-height:400px; padding-bottom:20px; }
.faq-a div, .faq-a { font-size:14.5px; color:var(--text-light); line-height:1.7; }

/* ── CTA Band (DARK accent section) ──────────────────────── */
.cta-band { background:linear-gradient(135deg, #0B1120 0%, #1A1438 100%); border-radius:28px; padding:64px 50px; text-align:center; margin:0 auto; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:-100px; right:-80px; width:320px; height:320px; background:var(--grad-primary); border-radius:50%; filter:blur(80px); opacity:0.4; }
.cta-band::after { content:''; position:absolute; bottom:-100px; left:-80px; width:280px; height:280px; background:var(--grad-warm); border-radius:50%; filter:blur(80px); opacity:0.22; }
.cta-band-content { position:relative; z-index:1; }
.cta-band h2 { color:#fff; font-size:32px; margin-bottom:14px; }
.cta-band p { color:rgba(255,255,255,0.6); font-size:16.5px; margin-bottom:32px; max-width:480px; margin-left:auto; margin-right:auto; }

/* ── Stats Band (DARK accent section, like enterprise sites) ── */
.stats-band { background:var(--bg-dark); padding:60px 0; position:relative; overflow:hidden; }
.stats-band::before { content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:700px; height:300px; background:var(--grad-primary); filter:blur(100px); opacity:0.18; }
.stats-band-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; z-index:1; text-align:center; }
.stats-band-item h3 { font-size:38px; color:#fff; margin-bottom:6px; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stats-band-item p { font-size:14px; color:rgba(255,255,255,0.55); margin:0; font-weight:600; }
@media (max-width:768px) { .stats-band-grid { grid-template-columns:repeat(2,1fr); gap:32px 16px; } }

/* ── Footer (DARK, matches accent sections) ──────────────── */
.site-footer { background:var(--bg-dark); color:rgba(255,255,255,0.55); padding:70px 0 0; position:relative; overflow:hidden; }
.site-footer::before { content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:600px; height:300px; background:var(--grad-primary); filter:blur(100px); opacity:0.1; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:16px; position:relative; z-index:1; }
.footer-brand img { height:36px; }
.footer-logo-text { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:21px; color:#fff; }
.footer-about { font-size:14px; line-height:1.75; color:rgba(255,255,255,0.4); margin-bottom:20px; position:relative; z-index:1; }
.footer-social { display:flex; gap:10px; position:relative; z-index:1; }
.footer-social a { width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); transition:all .25s; }
.footer-social a:hover { background:var(--grad-primary); border-color:transparent; color:#fff; transform:translateY(-3px); }
.footer-heading { color:#fff; font-size:14.5px; font-weight:700; margin-bottom:20px; text-transform:uppercase; letter-spacing:0.6px; position:relative; z-index:1; }
.footer-links { list-style:none; position:relative; z-index:1; }
.footer-links li { margin-bottom:11px; }
.footer-links a { color:rgba(255,255,255,0.45); font-size:14px; transition:all .2s; }
.footer-links a:hover { color:#fff; padding-left:4px; }
.footer-contact-item { display:flex; gap:12px; margin-bottom:16px; font-size:14px; color:rgba(255,255,255,0.5); position:relative; z-index:1; }
.footer-contact-item i { color:var(--primary-light); margin-top:3px; flex-shrink:0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); margin-top:50px; padding:24px 0; font-size:13px; color:rgba(255,255,255,0.35); position:relative; z-index:1; }
.footer-bottom a { color:rgba(255,255,255,0.5); }
.footer-bottom a:hover { color:#fff; }

/* ── WhatsApp Float ──────────────────────────────────────── */
.wa-float { position:fixed; bottom:26px; right:26px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; box-shadow:0 12px 32px rgba(37,211,102,0.4); z-index:999; transition:transform .25s; }
.wa-float:hover { transform:scale(1.1); color:#fff; }

/* ── Sticky bottom call bar (mobile, like TechGemini) ─────── */
.sticky-call-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(15,23,42,0.08); z-index:998; padding:10px 16px; }
.sticky-call-bar-inner { display:flex; gap:10px; }
.sticky-call-bar a { flex:1; text-align:center; padding:11px; border-radius:10px; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; }
.sticky-call-bar .call-btn { background:var(--grad-primary); color:#fff; }
.sticky-call-bar .wa-btn { background:#25D366; color:#fff; }
@media (max-width:768px) { .sticky-call-bar { display:block; } body { padding-bottom:64px; } .wa-float { bottom:90px; } }

/* ── Service Detail Page ─────────────────────────────────── */
.service-detail-content { font-size:16px; line-height:1.85; color:var(--text-mid); }
.service-detail-content h2 { font-size:26px; margin:36px 0 16px; color:var(--text-dark); }
.service-detail-content h3 { font-size:21px; margin:28px 0 12px; color:var(--text-dark); }
.service-detail-content ul { padding-left:22px; margin-bottom:20px; }
.service-detail-content li { margin-bottom:8px; }
.service-sidebar { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card); }
.service-sidebar h4 { font-size:16px; margin-bottom:16px; }
.tech-tags { display:flex; flex-wrap:wrap; gap:8px; }
.tech-tags .tag { background:var(--accent-light); color:var(--primary); padding:5px 13px; border-radius:50px; font-size:12.5px; font-weight:700; }

/* ── Hero highlight span ─────────────────────────────────── */
.hl { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── Industry Grid ───────────────────────────────────────── */
.industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.industry-item { background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px 16px; text-align:center; transition:all .25s; color:var(--text-dark); }
.industry-item:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:transparent; color:var(--primary); }
.industry-item i { font-size:26px; color:var(--primary); margin-bottom:10px; display:block; }
.industry-item span { font-size:13.5px; font-weight:700; display:block; }
@media (max-width:768px) { .industry-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Portfolio Filter Buttons ─────────────────────────────── */
.portfolio-filters { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.filter-btn { background:#fff; border:1px solid var(--border); padding:9px 20px; border-radius:50px; font-size:13.5px; font-weight:700; color:var(--text-mid); cursor:pointer; transition:all .2s; }
.filter-btn:hover { border-color:var(--primary); color:var(--primary); }
.filter-btn.active { background:var(--grad-primary); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(37,99,235,0.25); }
@media (max-width: 991px) {
  .hero h1 { font-size:36px; }
  .hero { padding:48px 0 40px; }
  .service-grid, .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .section-title { font-size:27px; }
  .cta-band { padding:44px 28px; border-radius:24px; }
  .cta-band h2 { font-size:24px; }
}
@media (max-width: 576px) {
  .hero h1 { font-size:28px; }
  .service-grid, .portfolio-grid { grid-template-columns:1fr; }
  .hero-stats { gap:10px; }
  .hero-stat { padding:14px 16px; min-width:auto; }
  .hero-stat h3 { font-size:20px; }
  .page-hero { padding:34px 0 30px; }
  .page-hero h1 { font-size:26px; }
}