/* =================================================================
   Chennai Web Design — Main Stylesheet
   Tokens > Base > Layout > Components > Sections > Utilities > Media
   ================================================================= */

:root{
  --primary:#16A34A;
  --primary-dark:#116C36;
  --secondary:#00C896;
  --accent:#FF6B35;
  --dark:#111827;
  --bg:#F8FAFC;
  --white:#FFFFFF;
  --muted:#5B6472;
  --border:#E5EAF1;

  --grad-primary: linear-gradient(135deg, var(--primary) 0%, #4ADE80 50%, var(--secondary) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, #FF9466 100%);
  --grad-dark: linear-gradient(180deg, #0B1220 0%, var(--dark) 100%);

  --shadow-sm: 0 4px 14px rgba(17,24,39,.06);
  --shadow-md: 0 12px 32px rgba(22,163,74,.14);
  --shadow-lg: 0 24px 60px rgba(22,163,74,.18);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;

  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); font-weight:700; color:var(--dark); letter-spacing:-0.02em;}
a{text-decoration:none; color:inherit; transition:color .25s ease;}
img{max-width:100%; display:block;}
::selection{background:var(--primary); color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------------- Loader ---------------- */
.loader-screen{
  position:fixed; inset:0; z-index:9999; background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader-screen.loaded{opacity:0; visibility:hidden;}
.loader-mark{opacity:0; transform:translateY(20px); animation:loaderIn .6s ease forwards;}
.loader-logo{height:56px; width:auto; margin:0 auto;}
@keyframes loaderIn{to{opacity:1; transform:translateY(0);}}

/* ---------------- Service detail: highlight panel ---------------- */
.service-highlight{
  position:relative; overflow:hidden; border-radius:var(--radius-md);
  padding:44px 36px; background:var(--grad-dark); color:#fff; box-shadow:var(--shadow-lg);
}
.service-highlight::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 15%, rgba(22,163,74,.4), transparent 45%),
             radial-gradient(circle at 85% 85%, rgba(0,200,150,.32), transparent 45%);
}
.service-highlight > *{position:relative; z-index:1;}
.service-highlight-icon{
  width:72px; height:72px; border-radius:20px; background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff;
  margin-bottom:22px; box-shadow:var(--shadow-md);
}
.service-highlight h3{color:#fff; font-size:1.3rem; margin-bottom:14px;}
.service-highlight p{color:rgba(255,255,255,.82); font-size:.96rem; margin-bottom:0;}
.service-highlight-divider{height:1px; background:rgba(255,255,255,.14); margin:28px 0;}
.service-highlight-badges{display:flex; flex-wrap:wrap; gap:12px;}
.service-highlight-badge{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:50px; padding:11px 18px;
  font-size:.84rem; font-weight:600; color:#fff; flex:1 1 auto; white-space:nowrap;
}
.service-highlight-badge i{color:var(--secondary); font-size:1rem;}

@media (max-width: 991.98px){
  .service-highlight{padding:36px 26px; margin-top:8px;}
  .service-highlight-badges{gap:10px;}
  .service-highlight-badge{flex:1 1 100%; justify-content:center;}
}
@media (max-width: 575.98px){
  .service-highlight{padding:28px 20px; border-radius:var(--radius-sm);}
  .service-highlight-icon{width:60px; height:60px; font-size:1.5rem; margin-bottom:16px;}
  .service-highlight h3{font-size:1.15rem;}
}


.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:2000;
  background:var(--grad-primary); transition:width .1s linear;
}

/* ---------------- Cursor glow ---------------- */
.cursor-glow{
  position:fixed; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(22,163,74,.10) 0%, rgba(0,200,150,.05) 45%, transparent 70%);
  transform:translate(-50%,-50%); left:-500px; top:-500px;
  transition:left .12s linear, top .12s linear; display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow{display:block;} }

/* ---------------- Top bar ---------------- */
.topbar{
  background:var(--dark); color:#C7D0DC; font-size:.85rem; padding:8px 0; position:relative; z-index:1001;
}
.topbar a{color:#C7D0DC; margin-right:20px;}
.topbar a:hover{color:var(--secondary);}
.topbar-right a{margin-left:14px; margin-right:0; font-size:.95rem;}

/* ---------------- Navbar ---------------- */
.site-navbar{
  position:sticky; top:0; z-index:5000; isolation:isolate;
  border-bottom:1px solid transparent;
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* Frosted-glass background lives on a separate, non-sticky layer.
   Chromium has a long-standing compositing bug where a `position:sticky`
   element combined with `backdrop-filter` directly on it can lose its
   correct paint order against later transformed/animated content
   (hero graphics, AOS scroll animations) — even though z-index and
   stacking contexts say it should stay on top. Moving the blur to a
   plain absolutely-positioned pseudo-element avoids the bug entirely. */
.site-navbar::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(248,250,252,0.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* Stacking-context safety net: every top-level section (and the footer)
   becomes its own isolated, low z-index layer. This guarantees that
   scroll-animated (AOS) content, floating decorative graphics, or any
   transformed element inside a section can never render above the
   sticky navbar's mega-menu, regardless of which section is on screen. */
body > section, body > footer{
  position:relative; z-index:0; isolation:isolate;
}
.site-navbar.scrolled{
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.site-navbar.scrolled::before{
  background:rgba(255,255,255,.92);
}
.site-navbar nav{height:86px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{height:56px; width:auto; display:block;}
.brand-dot{color:#FFE1A8;}
.brand-text{font-family:var(--font-display); font-size:1.05rem; color:var(--dark);}
.brand-text strong{color:var(--primary);}

.nav-links{gap:2px; list-style:none;}
.nav-links li{position:relative;}
.nav-links li a{
  display:inline-block; padding:10px 16px; border-radius:10px; font-weight:500; font-size:.95rem; color:var(--dark); position:relative;
}
.nav-links li a:hover, .nav-links li a.active{color:var(--primary); background:rgba(22,163,74,.08);}

/* ---------------- Mega menu (Services) ---------------- */
.nav-item-mega{position:static;}
.mega-caret{font-size:.65rem; margin-left:6px; transition:transform .25s ease;}
.nav-item-mega:hover .mega-caret{transform:rotate(180deg); color:var(--primary);}

.mega-menu{
  position:fixed; left:0; width:100%; top:0;
  background:#fff; border-top:3px solid var(--primary);
  box-shadow:var(--shadow-lg); border-radius:0 0 var(--radius-md) var(--radius-md);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:2147483647; pointer-events:none;
}
.mega-menu.is-open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.nav-item-mega.mega-open .mega-caret{transform:rotate(180deg); color:var(--primary);}
.mega-menu-inner{
  max-width:1280px; margin:0 auto; padding:40px 24px;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:24px;
}
.mega-col h6{
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--primary);
  margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--border);
}
.mega-col ul{list-style:none; padding:0; margin:0;}
.mega-col ul li{margin-bottom:4px;}
.mega-col ul li a{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
  font-size:.88rem; color:var(--muted); font-weight:500; white-space:nowrap;
}
.mega-col ul li a i{font-size:.62rem; color:var(--secondary); flex-shrink:0;}
.mega-col ul li a:hover{color:var(--primary); background:rgba(22,163,74,.06); transform:translateX(3px);}
.mega-col-promo{padding-left:20px; border-left:1px solid var(--border);}
.mega-promo{
  background:linear-gradient(160deg, #EAF8EE 0%, #E7FBF4 100%); border-radius:var(--radius-sm);
  padding:22px 20px; height:100%; display:flex; flex-direction:column;
}
.mega-promo-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;
}
.mega-promo h6{font-family:var(--font-display); font-size:1rem; color:var(--dark); margin-bottom:8px; border:none; padding:0;}
.mega-promo p{font-size:.85rem; color:var(--muted); margin-bottom:16px; line-height:1.5;}
.mega-promo .btn-sm{padding:9px 18px; font-size:.85rem; margin-top:auto;}

@media (max-width:1199px){
  .mega-menu-inner{grid-template-columns:repeat(2, 1fr); row-gap:28px;}
}

.btn-cwd-primary{
  background:var(--grad-primary); color:#fff !important; border:none; font-weight:600;
  padding:12px 26px; border-radius:50px; box-shadow:var(--shadow-md);
  display:inline-flex; align-items:center; transition:transform .3s ease, box-shadow .3s ease;
}
.btn-cwd-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.btn-cwd-outline{
  border:2px solid var(--dark); color:var(--dark) !important; font-weight:600; padding:11px 26px; border-radius:50px;
  display:inline-flex; align-items:center; transition:all .3s ease; background:transparent;
}
.btn-cwd-outline:hover{background:var(--dark); color:#fff !important; transform:translateY(-3px);}

/* Ripple effect */
.btn-ripple{position:relative; overflow:hidden;}
.btn-ripple .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform:scale(0); animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(3); opacity:0;}}

.nav-toggle{width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;}
.nav-toggle span{width:20px; height:2px; background:var(--dark); border-radius:2px; transition:all .3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-menu{
  max-height:0; overflow:hidden; background:#fff; border-top:1px solid var(--border);
  transition:max-height .4s ease; padding:0 20px;
}
.mobile-menu.open{
  max-height:calc(100vh - 70px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px;
  padding-bottom:32px;
}
.mobile-nav-links{list-style:none; padding:0; margin:0;}
.mobile-nav-links > li > a{display:block; padding:12px 4px; font-weight:500; border-bottom:1px solid var(--border);}
.mobile-nav-links > li > a.active{color:var(--primary);}
.mobile-contact{margin-top:16px; display:flex; flex-direction:column; gap:10px; font-size:.9rem;}

.mobile-has-sub .mobile-sub-toggle{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border);}
.mobile-has-sub .mobile-sub-toggle a{border-bottom:none; flex:1;}
.mobile-has-sub .mobile-sub-toggle button{
  width:36px; height:36px; border:none; background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:transform .25s ease;
}
.mobile-has-sub.open .mobile-sub-toggle button{transform:rotate(180deg); color:var(--primary);}
.mobile-sub-links{list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .35s ease;}
.mobile-has-sub.open .mobile-sub-links{max-height:3000px;}
.mobile-sub-links li a{display:block; padding:9px 4px 9px 16px; font-size:.88rem; color:var(--muted); border-bottom:1px solid var(--border);}
.mobile-sub-links li a:hover{color:var(--primary);}
.mobile-sub-heading{padding:12px 4px 4px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--primary);}

/* Level 2: service category rows inside the Services submenu */
.mobile-cat{border-bottom:1px solid var(--border);}
.mobile-cat:last-child{border-bottom:none;}
.mobile-cat-toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 4px; cursor:pointer;
}
.mobile-cat-toggle span{
  font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--primary);
}
.mobile-cat-toggle button{
  width:32px; height:32px; border:none; background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; transition:transform .25s ease;
}
.mobile-cat.open .mobile-cat-toggle button{transform:rotate(180deg); color:var(--primary);}

/* Level 3: individual service links inside each category */
.mobile-cat-links{list-style:none; margin:0; padding:0 0 0 10px; max-height:0; overflow:hidden; transition:max-height .35s ease;}
.mobile-cat.open .mobile-cat-links{max-height:600px; padding-bottom:6px;}
.mobile-cat-links li a{display:block; padding:8px 4px 8px 10px; font-size:.86rem; color:var(--muted); border-left:2px solid var(--border);}
.mobile-cat-links li a:hover{color:var(--primary); border-left-color:var(--primary);}

/* ---------------- Section basics ---------------- */
.section{padding:100px 0;}
.section-tight{padding:70px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--primary); background:rgba(22,163,74,.08); padding:7px 16px; border-radius:50px; margin-bottom:16px;
}
.eyebrow i{font-size:.7rem;}
.section-title{font-size:clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom:14px;}
.section-sub{color:var(--muted); font-size:1.05rem; max-width:640px;}
.text-gradient{background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; z-index:1; isolation:isolate; padding:70px 0 100px; overflow:hidden;
  background:linear-gradient(180deg, #EAF8EE 0%, var(--bg) 100%);
}
.hero-particles{position:absolute; inset:0; z-index:0;}
.hero-wave{position:absolute; bottom:-2px; left:0; width:100%; line-height:0; z-index:1;}
.hero-blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; z-index:0;}
.hero-blob.b1{width:340px; height:340px; background:var(--primary); top:-80px; left:-100px;}
.hero-blob.b2{width:260px; height:260px; background:var(--secondary); bottom:20px; right:-60px;}

.hero-content{position:relative; z-index:2;}
.hero h1{font-size:clamp(2.3rem, 4.4vw, 3.4rem); line-height:1.15; margin-bottom:20px;}
.hero-typed-wrap{font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,2vw,1.5rem); color:var(--primary); min-height:2em;}
.hero p.lead-text{color:var(--muted); font-size:1.1rem; max-width:520px; margin:18px 0 30px;}

.hero-stats{display:flex; gap:36px; margin-top:48px; flex-wrap:wrap;}
.hero-stats .stat h3{font-size:2.1rem; margin-bottom:2px; font-family:var(--font-display);}
.hero-stats .stat span{color:var(--muted); font-size:.9rem;}

.hero-visual{position:relative; z-index:2; min-height:460px;}

/* ---- Animated "web design in motion" hero visual ---- */
.design-glow{
  position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(22,163,74,.28), transparent 55%),
             radial-gradient(circle at 75% 70%, rgba(0,200,150,.24), transparent 55%);
  filter:blur(10px); animation:glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.05);}}

.design-scene{position:relative; z-index:2; max-width:460px; margin:0 auto; animation:sceneFloat 6s ease-in-out infinite;}
@keyframes sceneFloat{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-10px) rotate(.4deg);}}

.design-canvas{
  position:relative; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-lg); transform:rotate(-2.5deg); border:1px solid rgba(15,23,42,.06);
}
.canvas-topbar{display:flex; align-items:center; gap:5px; padding:10px 14px; background:#F1F5F9; border-bottom:1px solid var(--border);}
.canvas-topbar span{width:8px; height:8px; border-radius:50%; background:#D1D9E3;}
.canvas-topbar span:nth-child(1){background:#FF5F57;}
.canvas-topbar span:nth-child(2){background:#FEBC2E;}
.canvas-topbar span:nth-child(3){background:#28C840;}
.canvas-url{
  margin-left:auto; background:#fff; border:1px solid var(--border); border-radius:20px;
  padding:4px 14px; font-size:.68rem; color:var(--muted); display:flex; align-items:center; gap:6px;
}
.canvas-url i{font-size:.6rem; color:var(--primary);}

.canvas-body{padding:20px 22px 24px;}
.canvas-row{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.canvas-logo{width:28px; height:28px; border-radius:8px; background:var(--grad-primary); flex-shrink:0;}
.canvas-nav{display:flex; gap:9px; flex:1;}
.canvas-nav span{width:22px; height:7px; border-radius:4px; background:var(--border);}
.canvas-cta{width:50px; height:16px; border-radius:20px; background:var(--grad-primary); margin-left:auto;}

.canvas-hero{margin-bottom:22px;}
.canvas-line{height:9px; border-radius:5px; background:var(--border); margin-bottom:9px;}
.line-lg{width:88%; height:13px;}
.line-md{width:70%;}
.line-sm{width:52%;}
.line-xs{width:80%; height:7px;}
.line-xxs{width:55%; height:7px; margin-bottom:0;}
.canvas-btn{width:96px; height:24px; border-radius:20px; background:var(--grad-primary); margin-top:14px; opacity:0;}

.draw-line{position:relative; overflow:hidden; width:0 !important; animation:drawLine .7s ease forwards;}
.draw-line.delay-1{animation-delay:.35s;}
.draw-line.delay-2{animation-delay:.7s;}
@keyframes drawLine{
  0%{width:0 !important;}
  100%{width:var(--line-w, 70%) !important;}
}
.line-lg.draw-line{--line-w:88%;}
.line-md.draw-line{--line-w:70%;}
.line-sm.draw-line{--line-w:52%;}

.pop-in{animation:popIn .5s ease forwards; opacity:0; transform:scale(.85) translateY(6px);}
.pop-in.delay-2{animation-delay:.9s;}
.pop-in.delay-3{animation-delay:1.05s;}
.pop-in.delay-4{animation-delay:1.2s;}
@keyframes popIn{to{opacity:1; transform:scale(1) translateY(0);}}

.canvas-grid{display:flex; gap:10px;}
.grid-card{flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px;}
.grid-thumb{
  height:38px; border-radius:6px; margin-bottom:8px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(22,163,74,.16), rgba(0,200,150,.18));
}
.grid-thumb::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  animation:shimmerSweep 3.2s ease-in-out infinite;
}
.grid-card:nth-child(2) .grid-thumb::after{animation-delay:.6s;}
.grid-card:nth-child(3) .grid-thumb::after{animation-delay:1.2s;}
@keyframes shimmerSweep{0%{transform:translateX(-100%);} 50%,100%{transform:translateX(100%);}}

/* Animated design cursor "editing" the page */
.design-cursor{
  position:absolute; left:18%; top:22%; z-index:5; color:var(--primary); font-size:1.15rem;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); animation:cursorTravel 8s ease-in-out infinite;
}
.cursor-click{
  position:absolute; left:2px; top:2px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--primary); opacity:0; animation:cursorClick 8s ease-in-out infinite;
}
@keyframes cursorTravel{
  0%,6%{left:18%; top:24%;}
  22%,28%{left:62%; top:20%;}
  46%,52%{left:38%; top:52%;}
  70%,76%{left:70%; top:66%;}
  94%,100%{left:18%; top:24%;}
}
@keyframes cursorClick{
  0%,5%{opacity:0; transform:scale(.4);}
  8%{opacity:.9; transform:scale(1);}
  16%{opacity:0; transform:scale(1.6);}
  100%{opacity:0;}
}

/* Floating layers panel */
.floating-panel{
  position:absolute; right:-9%; top:8%; z-index:4; width:158px; background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6); border-radius:12px; box-shadow:var(--shadow-md);
  padding:12px 14px; animation:floatY 5.5s ease-in-out infinite;
}
.fp-head{font-size:.72rem; font-weight:700; color:var(--dark); display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.fp-head i{color:var(--primary); font-size:.72rem;}
.fp-row{display:flex; align-items:center; gap:7px; font-size:.68rem; color:var(--muted); padding:5px 0; font-weight:600;}
.fp-row.active{color:var(--dark);}
.fp-dot{width:8px; height:8px; border-radius:3px; flex-shrink:0;}
.dot-primary{background:var(--primary);} .dot-secondary{background:var(--secondary);} .dot-accent{background:var(--accent);}

/* Floating color palette */
.floating-palette{
  position:absolute; left:-8%; bottom:6%; z-index:4; display:flex; flex-direction:column; gap:8px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6);
  border-radius:14px; padding:10px; box-shadow:var(--shadow-md); animation:floatY 5s ease-in-out infinite; animation-delay:.6s;
}
.floating-palette span{width:16px; height:16px; border-radius:5px; display:block;}

.floating-card{
  position:absolute; background:rgba(255,255,255,.75); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  padding:14px 18px; display:flex; align-items:center; gap:12px; z-index:3;
  animation:floatY 4.5s ease-in-out infinite;
}
.floating-card .icon-badge{
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem;
}
.floating-card small{color:var(--muted); display:block; font-size:.72rem;}
.floating-card strong{font-size:1rem;}
.fc-analytics{top:0; left:-6%;}
.fc-analytics .icon-badge{background:var(--grad-primary);}
.fc-seo{bottom:-4%; left:-8%; animation-delay:1s;}
.fc-seo .icon-badge{background:var(--grad-accent);}
.fc-clients{top:10%; right:-4%; animation-delay:2s;}
.fc-clients .icon-badge{background:linear-gradient(135deg,var(--secondary),#00A67E);}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

@media (prefers-reduced-motion: reduce){
  .design-glow, .design-scene, .draw-line, .pop-in, .grid-thumb::after, .design-cursor, .cursor-click,
  .floating-panel, .floating-palette, .floating-card{animation:none !important; opacity:1; transform:none;}
  .draw-line{width:var(--line-w, 70%) !important;}
}

/* ---------------- Logos slider ---------------- */
.logos-strip{padding:50px 0; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.logos-strip .swiper-slide{display:flex; align-items:center; justify-content:center; filter:grayscale(1); opacity:.55; transition:all .3s ease;}
.logos-strip .swiper-slide:hover{filter:grayscale(0); opacity:1;}
.logos-strip .swiper-slide img{max-height:34px; width:auto;}

/* ---------------- Glass card ---------------- */
.glass-card{
  background:rgba(255,255,255,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}

/* ---------------- Service cards ---------------- */
.service-card{
  background:#fff; border-radius:var(--radius-md); padding:34px 28px; height:100%;
  border:1px solid var(--border); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative; overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0; background:var(--grad-primary); opacity:0; transition:opacity .35s ease; z-index:0;
}
.service-card:hover{transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent;}
.service-card:hover::before{opacity:1;}
.service-card > *{position:relative; z-index:1;}
.service-icon{
  width:60px; height:60px; border-radius:16px; background:rgba(22,163,74,.08); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:20px; transition:all .35s ease;
}
.service-card:hover .service-icon{background:rgba(255,255,255,.2); color:#fff; transform:rotate(-8deg) scale(1.05);}
.service-card h5{transition:color .35s ease;}
.service-card:hover h5, .service-card:hover p{color:#fff;}
.service-card p{color:var(--muted); font-size:.92rem; margin-bottom:0;}
.service-card .service-link{font-size:.85rem; font-weight:600; color:var(--primary); margin-top:16px; display:inline-flex; align-items:center; gap:6px;}
.service-card:hover .service-link{color:#fff;}

/* ---------------- Why choose us ---------------- */
.why-card{
  padding:30px 24px; border-radius:var(--radius-md); background:#fff; border:1px solid var(--border); height:100%;
  transition:all .3s ease;
}
.why-card:hover{border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-6px);}
.why-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grad-accent); color:#fff; font-size:1.2rem; margin-bottom:16px;
}

/* ---------------- Counters ---------------- */
.counter-section{
  background:var(--grad-dark); position:relative; overflow:hidden; color:#fff;
}
.counter-section::before{
  content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(22,163,74,.35), transparent 45%), radial-gradient(circle at 80% 70%, rgba(0,200,150,.3), transparent 45%);
}
.counter-item{position:relative; z-index:1; text-align:center;}
.counter-item h3{font-size:clamp(2.2rem,4vw,3rem); color:#fff; margin-bottom:4px;}
.counter-item > span{color:#AEB9C9; font-size:.95rem;}

/* ---------------- Portfolio ---------------- */
.portfolio-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.portfolio-filters button{
  padding:9px 20px; border-radius:50px; border:1px solid var(--border); background:#fff; font-weight:500; font-size:.88rem;
  transition:all .25s ease;
}
.portfolio-filters button.active, .portfolio-filters button:hover{background:var(--grad-primary); color:#fff; border-color:transparent;}

.portfolio-item.portfolio-item-noimg{
  border-radius:var(--radius-md); position:relative; box-shadow:var(--shadow-sm); cursor:pointer;
  background:#fff; border:1px solid var(--border); padding:32px 26px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex; flex-direction:column; align-items:center; height:100%;
}
.portfolio-item.portfolio-item-noimg:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;
}
.portfolio-card-icon{
  width:64px; height:64px; border-radius:18px; background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:18px;
  transition:transform .3s ease;
}
.portfolio-item.portfolio-item-noimg:hover .portfolio-card-icon{transform:scale(1.08) rotate(-4deg);}
.portfolio-card-type{color:var(--secondary); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
.portfolio-card-title{color:var(--dark); font-size:1.05rem; margin:0;}

.modal-body-icon-wrap{padding:36px 0 6px;}
.modal-body-icon{
  width:80px; height:80px; border-radius:22px; background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto;
}

@media (max-width: 575.98px){
  .portfolio-item.portfolio-item-noimg{padding:26px 18px;}
  .portfolio-card-icon{width:54px; height:54px; font-size:1.35rem; margin-bottom:14px;}
  .portfolio-card-title{font-size:.95rem;}
}

/* ---------------- Process timeline ---------------- */
.process-track{position:relative;}
.process-track::before{
  content:''; position:absolute; top:34px; left:0; right:0; height:2px; background:var(--border); z-index:0;
}
.process-step{text-align:center; position:relative; z-index:1;}
.process-num{
  width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--primary); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  margin:0 auto 18px; transition:all .3s ease;
}
.process-step:hover .process-num{background:var(--grad-primary); color:#fff; transform:scale(1.1);}
.process-step h6{font-size:1rem; margin-bottom:6px;}
.process-step p{font-size:.85rem; color:var(--muted);}

/* ---------------- Tech stack ---------------- */
.tech-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:24px 12px; text-align:center;
  transition:all .3s ease;
}
.tech-card:hover{transform:translateY(-8px) rotate(-2deg); box-shadow:var(--shadow-md); border-color:var(--primary);}
.tech-card i, .tech-card img{font-size:2.2rem; color:var(--primary); margin-bottom:10px;}
.tech-card span{display:block; font-size:.85rem; font-weight:600;}

/* ---------------- Awards & Certifications ---------------- */
.awards-section{background:linear-gradient(180deg, var(--bg) 0%, #fff 100%);}
.award-badge{
  position:relative; overflow:hidden; text-align:center; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); padding:26px 14px 20px; height:100%;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.award-badge::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%) skewX(-15deg);
  background:linear-gradient(100deg, transparent 30%, rgba(22,163,74,.12) 50%, transparent 70%);
  transition:transform .6s ease;
}
.award-badge:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent;}
.award-badge:hover::after{transform:translateX(120%) skewX(-15deg);}
.award-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem; position:relative; z-index:1;
  transition:transform .4s ease;
}
.award-badge:hover .award-icon{transform:scale(1.12) rotate(8deg);}
.award-badge h6{font-size:.88rem; margin-bottom:5px; position:relative; z-index:1;}
.award-badge p{font-size:.74rem; color:var(--muted); margin:0; position:relative; z-index:1; line-height:1.4;}

/* ---------------- Team ---------------- */
.team-card{
  position:relative; text-align:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:36px 24px 28px; height:100%; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.team-card::before{
  content:''; position:absolute; top:0; left:50%; width:0; height:4px; background:var(--grad-primary);
  transform:translateX(-50%); transition:width .35s ease; border-radius:0 0 4px 4px;
}
.team-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent;}
.team-card:hover::before{width:60%;}
.team-avatar{
  width:84px; height:84px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#fff; transition:transform .4s ease;
}
.team-card:hover .team-avatar{transform:scale(1.08) rotate(-4deg);}
.avatar-primary{background:var(--grad-primary);}
.avatar-secondary{background:linear-gradient(135deg,var(--secondary),#00A67E);}
.avatar-accent{background:var(--grad-accent);}
.team-card h6{font-size:1.05rem; margin-bottom:4px;}
.team-role{display:block; color:var(--muted); font-size:.85rem; margin-bottom:16px;}
.team-socials{display:flex; justify-content:center; gap:10px;}
.team-socials a{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--primary); font-size:.85rem; border:1px solid var(--border);
  transition:all .25s ease;
}
.team-socials a:hover{background:var(--grad-primary); color:#fff; border-color:transparent; transform:translateY(-3px);}

/* ---------------- Testimonials ---------------- */
.testimonial-card{padding:32px; height:100%;}
.testimonial-stars{color:#FFB020; margin-bottom:14px;}
.testimonial-quote{color:var(--dark); font-size:1rem; margin-bottom:22px;}
.testimonial-person{display:flex; align-items:center; gap:12px;}
.testimonial-person img{width:48px; height:48px; border-radius:50%; object-fit:cover;}
.testimonial-person strong{display:block; font-size:.95rem;}
.testimonial-person span{color:var(--muted); font-size:.8rem;}

/* ---------------- Pricing ---------------- */
.pricing-card{
  background:#fff; border-radius:var(--radius-md); padding:40px 32px; text-align:center; border:1px solid var(--border);
  transition:all .35s ease; height:100%; position:relative;
}
.pricing-card.featured{
  background:var(--grad-dark); color:#fff; transform:scale(1.05); box-shadow:var(--shadow-lg); border:none; z-index:2;
}
.pricing-card:hover{transform:translateY(-10px);}
.pricing-card.featured:hover{transform:scale(1.05) translateY(-10px);}
.pricing-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--grad-accent); color:#fff;
  font-size:.75rem; font-weight:700; padding:6px 18px; border-radius:50px; letter-spacing:.04em;
}
.price-value{font-family:var(--font-display); font-size:2.6rem; font-weight:800; margin:16px 0 4px;}
.price-value span{font-size:1rem; font-weight:500; color:var(--muted);}
.pricing-card.featured .price-value span{color:#AEB9C9;}
.pricing-list{list-style:none; padding:0; margin:24px 0; text-align:left;}
.pricing-list li{padding:9px 0; border-bottom:1px dashed var(--border); font-size:.92rem;}
.pricing-card.featured .pricing-list li{border-color:rgba(255,255,255,.15);}
.pricing-list li i{color:var(--secondary); margin-right:10px;}

/* ---------------- Brochure download CTA ---------------- */
.brochure-cta{
  display:flex; align-items:center; gap:22px; margin-top:44px; padding:26px 30px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(22,163,74,.06), rgba(0,200,150,.08)); border:1px solid rgba(22,163,74,.18);
}
.brochure-cta-icon{
  width:56px; height:56px; border-radius:14px; background:var(--grad-primary); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.brochure-cta-text{flex:1; min-width:0;}
.brochure-cta-text h5{margin-bottom:4px; font-size:1.05rem;}
.brochure-cta-text p{margin:0; color:var(--muted); font-size:.9rem;}
.brochure-cta-btn{white-space:nowrap; flex-shrink:0;}

@media (max-width: 767.98px){
  .brochure-cta{flex-direction:column; text-align:center; padding:24px 20px;}
  .brochure-cta-btn{width:100%;}
}

/* ---------------- FAQ ---------------- */
.faq-accordion .accordion-item{border:1px solid var(--border); border-radius:var(--radius-sm) !important; margin-bottom:14px; overflow:hidden;}
.faq-accordion .accordion-button{font-family:var(--font-display); font-weight:600; font-size:1rem; padding:20px 24px;}
.faq-accordion .accordion-button:not(.collapsed){background:rgba(22,163,74,.06); color:var(--primary); box-shadow:none;}
.faq-accordion .accordion-button:focus{box-shadow:none;}
.faq-accordion .accordion-body{color:var(--muted); padding:0 24px 22px;}

/* ---------------- CTA ---------------- */
.cta-section{
  background:var(--grad-primary); border-radius:var(--radius-lg); padding:70px 40px; text-align:center; color:#fff;
  position:relative; overflow:hidden; margin:0 auto;
}
.cta-section h2{color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem);}
.cta-section p{color:rgba(255,255,255,.85); max-width:520px; margin:12px auto 28px;}
.cta-section::before{content:''; position:absolute; width:300px; height:300px; background:rgba(255,255,255,.1); border-radius:50%; top:-120px; right:-80px;}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--dark); color:#AEB9C9; padding:80px 0 0; position:relative; overflow:hidden;}
.footer-glow{position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:300px; background:var(--primary); opacity:.15; filter:blur(100px);}
.site-footer .container{position:relative; z-index:1;}
.footer-heading{color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:18px;}
.footer-about{font-size:.9rem; line-height:1.7;}
.footer-brand{align-items:center;}
.footer-logo-chip{
  width:54px; height:54px; border-radius:14px; background:#fff; padding:6px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); flex-shrink:0;
}
.footer-logo-chip img{width:100%; height:100%; object-fit:contain;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:10px;}
.footer-links a{font-size:.9rem; color:#AEB9C9;}
.footer-links a:hover{color:var(--secondary);}
.footer-social{display:flex; gap:10px; margin-top:18px;}
.footer-social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;}
.footer-social a:hover{background:var(--grad-primary); color:#fff;}
.footer-map{border-radius:var(--radius-sm); overflow:hidden; border:1px solid rgba(255,255,255,.1);}
.footer-bottom-row{border-top:1px solid rgba(255,255,255,.08); margin-top:50px; padding-top:40px;}
.newsletter-form{display:flex; border:1px solid rgba(255,255,255,.15); border-radius:50px; overflow:hidden;}
.newsletter-form input{flex:1; background:transparent; border:none; padding:12px 18px; color:#fff; font-size:.88rem;}
.newsletter-form input::placeholder{color:#8290A1;}
.newsletter-form button{background:var(--grad-primary); border:none; color:#fff; padding:0 18px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding:22px 0; display:flex; justify-content:space-between;
  font-size:.82rem; flex-wrap:wrap; gap:8px;
}

/* ---------------- Floating buttons ---------------- */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:var(--shadow-lg); z-index:900;
  animation:pulseWA 2.4s infinite;
}
@keyframes pulseWA{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

.call-float{
  position:fixed; bottom:26px; left:26px; width:56px; height:56px; border-radius:50%; background:var(--grad-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:var(--shadow-lg); z-index:900;
  animation:pulseCall 2.4s infinite;
}
@keyframes pulseCall{0%{box-shadow:0 0 0 0 rgba(255,107,53,.5);}70%{box-shadow:0 0 0 16px rgba(255,107,53,0);}100%{box-shadow:0 0 0 0 rgba(255,107,53,0);}}
.back-to-top{
  position:fixed; bottom:94px; right:26px; width:48px; height:48px; border-radius:50%; background:var(--grad-primary); color:#fff;
  border:none; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); z-index:900;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}

/* ---------------- Breadcrumb (inner pages) ---------------- */
.page-hero{
  background:linear-gradient(180deg,#EAF8EE 0%, var(--bg) 100%); padding:60px 0 50px; position:relative; z-index:1; isolation:isolate; overflow:hidden;
}
.breadcrumb-nav{font-size:.88rem; color:var(--muted);}
.breadcrumb-nav a{color:var(--primary);}

/* ---------------- AOS-friendly transitions handled by lib ---------------- */

/* =================================================================
   RESPONSIVE — mobile-first overrides
   ================================================================= */
@media (max-width: 1199.98px){
  .floating-card, .floating-panel, .floating-palette{display:none;}
  .hero-visual{min-height:340px;}
}

@media (max-width: 767.98px){
  .service-tile{padding:22px 18px !important;}
  .service-tile .service-icon{width:46px; height:46px; font-size:1.15rem; margin-bottom:14px;}
  .service-tile h3{font-size:.98rem;}
  .service-tile .fw-semibold{font-size:.8rem;}
}
@media (max-width: 575.98px){
  .service-tile{padding:18px 14px !important;}
  .service-tile .service-icon{width:40px; height:40px; font-size:1rem; margin-bottom:10px; border-radius:12px;}
  .service-tile h3{font-size:.9rem; line-height:1.3;}
  .service-tile .fw-semibold{font-size:.74rem;}
}

@media (max-width: 991.98px){
  .section{padding:70px 0;}
  .hero{padding:36px 0 60px;}
  .hero-stats{gap:22px;}
  .process-track::before{display:none;}
  .pricing-card.featured{transform:none; margin-bottom:10px;}
  .site-navbar nav{height:68px;}
  .brand-logo{height:42px;}
}

@media (max-width: 767.98px){
  .section{padding:56px 0;}
  .section-tight{padding:44px 0;}
  .hero h1{font-size:2rem;}
  .hero p.lead-text{font-size:1rem;}
  .hero-visual{margin-top:36px;}
  .design-scene{max-width:340px;}
  .canvas-url{display:none;}
  .canvas-body{padding:16px 18px 20px;}
  .canvas-hero{margin-bottom:16px;}
  .canvas-grid{gap:8px;}
  .grid-thumb{height:30px; margin-bottom:6px;}
  .design-cursor{font-size:.95rem;}
  .cta-section{padding:50px 24px; border-radius:var(--radius-md);}
  .whatsapp-float{width:48px; height:48px; font-size:1.3rem; bottom:18px; right:18px;}
  .call-float{width:48px; height:48px; font-size:1.3rem; bottom:18px; left:18px;}
  .back-to-top{width:42px; height:42px; bottom:74px; right:18px;}
  .footer-bottom{flex-direction:column; text-align:center;}
}

@media (max-width: 575.98px){
  .eyebrow{font-size:.7rem;}
  .hero-stats{width:100%; justify-content:space-between; gap:12px;}
  .hero-stats .stat h3{font-size:1.6rem;}
  .portfolio-filters{gap:8px;}
  .portfolio-filters button{padding:7px 14px; font-size:.8rem;}

  .hero-content .d-flex.flex-wrap{flex-direction:column; align-items:stretch;}
  .hero-content .btn-cwd-primary, .hero-content .btn-cwd-outline{justify-content:center; width:100%;}
  .brand-text{font-size:.92rem;}
  .brand-logo{height:36px;}
  .section-title{font-size:1.6rem;}
  .footer-bottom-row .newsletter-form{margin-bottom:6px;}
  .mega-promo .btn-sm{width:100%;}
  .design-scene{max-width:270px;}
  .canvas-body{padding:14px 16px 18px;}
  .canvas-row{margin-bottom:16px;}
  .canvas-hero{margin-bottom:14px;}
  .line-lg{height:11px;}
  .canvas-btn{width:80px; height:20px;}
  .canvas-grid{gap:6px;}
  .grid-card{padding:6px;}
  .grid-thumb{height:24px; margin-bottom:5px;}
  .design-cursor{display:none;}

  .award-badge{padding:20px 10px 16px;}
  .award-icon{width:46px; height:46px; font-size:1.1rem; margin-bottom:10px;}
  .award-badge h6{font-size:.78rem;}
  .award-badge p{font-size:.68rem;}
  .team-card{padding:28px 18px 22px;}
  .team-avatar{width:70px; height:70px; font-size:1.25rem;}

  .service-card{padding:26px 20px;}
  .service-card .service-icon{width:50px; height:50px; font-size:1.25rem; margin-bottom:14px;}
  .why-card{padding:24px 18px;}
  .why-icon{width:44px; height:44px; font-size:1rem; margin-bottom:12px;}
  .pricing-card{padding:32px 22px;}
  .price-value{font-size:2.1rem;}
  .testimonial-card{padding:24px 20px;}
  .tech-card{padding:18px 10px;}
  .tech-card i, .tech-card img{font-size:1.7rem;}
  .brochure-cta-icon{width:48px; height:48px; font-size:1.25rem;}
  .modal-body-icon{width:64px; height:64px; font-size:1.6rem;}
}

/* Guarantee no horizontal scroll from decorative/floating elements on small screens */
@media (max-width: 480px){
  html, body{max-width:100%; overflow-x:hidden;}
  .footer-social{justify-content:center;}
  .footer-brand{flex-wrap:wrap;}
}

/* Larger, easier tap targets on touch devices */
@media (hover:none) and (pointer:coarse){
  .nav-links li a, .mobile-nav-links > li > a, .mobile-sub-links li a{padding-top:14px; padding-bottom:14px;}
  .nav-toggle{width:46px; height:46px;}
  .portfolio-filters button{padding:10px 18px;}
}

/* ---------------- Blog page ---------------- */
.blog-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; align-items:stretch;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);
  transition:transform .35s ease, box-shadow .35s ease;
}
.blog-featured:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); color:inherit;}
.blog-featured-img{position:relative; min-height:280px;}
.blog-featured-img img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-featured-badge{
  position:absolute; top:18px; left:18px; background:var(--grad-primary); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 14px; border-radius:50px;
}
.blog-featured-body{padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
.blog-featured-body h2{font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.3; margin:0;}
.blog-featured-body .btn{align-self:flex-start;}

.blog-card{background:#fff; border:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column;}
.blog-card-img-link{display:block; height:200px; overflow:hidden;}
.blog-card-img-link img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.blog-card:hover .blog-card-img-link img{transform:scale(1.06);}

.blog-pagination{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:40px; flex-wrap:wrap;}
.blog-pagination button{
  min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; font-weight:600; font-size:.9rem; transition:all .25s ease;
}
.blog-pagination button.active, .blog-pagination button:hover:not(:disabled){
  background:var(--grad-primary); color:#fff; border-color:transparent;
}
.blog-pagination button:disabled{opacity:.4; cursor:not-allowed;}

@media (max-width:991px){
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured-img{min-height:220px;}
  .blog-featured-body{padding:28px 24px;}
}

/* ---------------- Single blog article ---------------- */
.article-body{max-width:760px; margin:0 auto; font-size:1.02rem; line-height:1.75; color:var(--dark);}
.article-body h2{font-size:1.5rem; margin-top:40px; margin-bottom:14px;}
.article-body h3{font-size:1.2rem; margin-top:28px; margin-bottom:10px;}
.article-body p{color:var(--muted); margin-bottom:18px;}
.article-body img.article-cover{width:100%; border-radius:var(--radius-md); margin-bottom:8px; box-shadow:var(--shadow-sm);}
.article-body .article-cover-caption{display:block; text-align:center; font-size:.82rem; color:var(--muted); margin-bottom:32px;}
.article-meta-row{max-width:760px; margin:0 auto 28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.article-back-link{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--primary); text-decoration:none; margin-bottom:18px;}
.article-back-link:hover{color:var(--dark);}