/* ── Utility classes used by home.php ─── */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.flex{display:flex}
.inline-flex{display:inline-flex}
.hidden{display:none}
.block{display:block}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-shrink-0{flex-shrink:0}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}
.min-h-screen{min-height:100vh}
.w-full{width:100%}
.h-full{height:100%}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}
.text-center{text-align:center}
.text-left{text-align:left}
.overflow-hidden{overflow:hidden}
.overflow-visible{overflow:visible}
.pointer-events-none{pointer-events:none}
.z-10{z-index:10}
.z-\[1\]{z-index:1}
.z-\[2\]{z-index:2}
.select-none{user-select:none}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:w-auto{width:auto}.sm\:text-base{font-size:1rem}.sm\:p-16{padding:4rem}}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:p-8{padding:2rem}}
@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:col-span-2{grid-column:span 2}.lg\:p-10{padding:2.5rem}}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-28{padding-top:7rem;padding-bottom:7rem}
.p-8{padding:2rem}
.mb-6{margin-bottom:1.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mt-12{margin-top:3rem}
.space-y-8>*+*{margin-top:2rem}
.grid{display:grid}
.place-content-center{place-content:center}
.rounded-3xl{border-radius:1.5rem}
.rounded-xl{border-radius:.75rem}
.noise-overlay::before{content:'';position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
/*
Theme Name:   Embrace Digital
Theme URI:    https://apifeldigi.com
Description:  A premium WordPress theme designed and developed by Apifel Digi. Full conversion of a React/Supabase application into a complete WordPress theme with admin panel, dynamic content management, and pixel-perfect frontend design.
Version:      1.0.45
Requires at least: 5.8
Requires PHP: 7.4
Author:       Apifel Digi
Author URI:   https://apifeldigi.com
Developer:    Jahid Hasan
Developer URI:https://jahid.us
Text Domain:  embrace
License:      Proprietary
License URI:  https://apifeldigi.com/license
Tags:         digital-agency, dark-mode, responsive, portfolio, blog, career

Minimum Requirements:
  WordPress:  5.8+
  PHP:        7.4+
  MySQL:      5.7+

Credits:
  - Designed & Developed by Jahid Hasan (https://jahid.us)
  - Powered by Apifel Digi (https://apifeldigi.com)
  - Icons: Lucide Icons (MIT License)
  - Fonts: Syne, Space Grotesk via Google Fonts (OFL License)
  - Images: Unsplash (Unsplash License)

Copyright 2025 Apifel Digi. All Rights Reserved.
Unauthorized copying, modification, distribution or use of this
theme is strictly prohibited without written permission from Apifel Digi.
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   CSS VARIABLES — exact from index.css
═══════════════════════════════════════════ */
:root {
  --background:220 20% 8%;
  --foreground:0 0% 98%;
  --card:220 18% 12%;
  --card-foreground:0 0% 98%;
  --primary:0 85% 55%;
  --primary-foreground:0 0% 100%;
  --secondary:220 10% 85%;
  --secondary-foreground:220 20% 10%;
  --muted:220 15% 18%;
  --muted-foreground:220 10% 60%;
  --accent:0 75% 50%;
  --border:220 15% 22%;
  --input:220 15% 22%;
  --ring:0 85% 55%;
  --radius:0.75rem;
  --gradient-primary:linear-gradient(135deg,hsl(0,85%,55%) 0%,hsl(350,80%,50%) 50%,hsl(0,90%,60%) 100%);
  --gradient-mesh:
    radial-gradient(at 40% 20%,hsl(0,85%,55%,0.12) 0px,transparent 50%),
    radial-gradient(at 80% 0%,hsl(0,75%,50%,0.08) 0px,transparent 50%),
    radial-gradient(at 0% 50%,hsl(0,85%,55%,0.06) 0px,transparent 50%),
    radial-gradient(at 80% 50%,hsl(350,80%,50%,0.08) 0px,transparent 50%);
  --shadow-primary:0 0 60px hsl(0,85%,55%,0.2);
  --shadow-card:0 4px 40px hsl(0,0%,0%,0.3);
}

/* Light mode override */
html.light {
  --background:0 0% 100%;
  --foreground:220 20% 10%;
  --card:0 0% 98%;
  --card-foreground:220 20% 10%;
  --secondary:220 15% 20%;
  --secondary-foreground:0 0% 100%;
  --muted:220 10% 94%;
  --muted-foreground:220 10% 45%;
  --border:220 10% 88%;
  --input:220 10% 88%;
  --gradient-mesh:
    radial-gradient(at 40% 20%,hsl(0,85%,55%,0.15) 0px,transparent 50%),
    radial-gradient(at 80% 0%,hsl(0,75%,50%,0.10) 0px,transparent 50%),
    radial-gradient(at 0% 50%,hsl(0,85%,55%,0.08) 0px,transparent 50%),
    radial-gradient(at 80% 50%,hsl(350,80%,50%,0.10) 0px,transparent 50%);
  --shadow-card:0 4px 40px hsl(220,20%,10%,0.08);
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-color:hsl(var(--border))}
html{scroll-behavior:smooth}
html{
  overflow-x:clip; /* clip prevents scrollbar issues unlike hidden */
  overflow-y:scroll; /* always show scrollbar to prevent layout shift */
  scrollbar-gutter:stable; /* reserve space for scrollbar */
}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;line-height:1.6;min-height:100vh}
/* Scrollbar — normal: #666b74, hover/click: primary red */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#666b74;border-radius:9999px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:hsl(var(--primary))}
::-webkit-scrollbar-thumb:active{background:hsl(var(--primary))}
::-webkit-scrollbar-corner{background:transparent}
/* Firefox */
html{scrollbar-width:thin;scrollbar-color:#666b74 transparent}
h1,h2,h3,h4,h5,h6{font-family:'Syne',system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}
::selection{background:hsl(0,85%,55%,0.2);color:hsl(220,20%,10%)}


/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

/* py-20 md:py-28 px-4 sm:px-6 lg:px-8 */
.section-padding{padding:5rem 1rem}
@media(min-width:640px){.section-padding{padding:5rem 1.5rem}}
@media(min-width:1024px){.section-padding{padding:7rem 2rem}}

/* ═══════════════════════════════════════════
   UTILITY CLASSES — from index.css @layer components
═══════════════════════════════════════════ */

/* mesh-background — fixed so it stays behind everything */
.mesh-background{
  position:fixed;inset:0;
  background-image:var(--gradient-mesh);
  pointer-events:none;z-index:0;
}

/* gradient-text — bg-clip-text text-transparent + gradient-primary */
.gradient-text{
  background-image:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* text-outline */
.text-outline{-webkit-text-stroke:2px hsl(220,15%,20%);-webkit-text-fill-color:transparent}
html.dark .text-outline{-webkit-text-stroke:2px hsl(0,0%,70%)}

/* glass-card — bg-card border border-border rounded-2xl + shadow-card */
.glass-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;box-shadow:var(--shadow-card)}

/* btn-glow */
.btn-glow{box-shadow:0 4px 20px hsl(0,85%,55%,0.35)}
.btn-glow:hover{box-shadow:0 8px 30px hsl(0,85%,55%,0.5)}

/* floating / floating-slow */
.floating{animation:floating 6s ease-in-out infinite}
.floating-slow{animation:floating 8s ease-in-out infinite}

/* noise-overlay */
.noise-overlay{position:relative}
.noise-overlay::before{
  content:'';position:absolute;inset:0;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat:repeat;pointer-events:none;z-index:1;border-radius:inherit;
}

/* card-shine */
.card-shine{position:relative;overflow:hidden}
.card-shine::after{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(135deg,transparent 40%,hsl(var(--primary),0.04) 45%,hsl(var(--primary),0.08) 50%,hsl(var(--primary),0.04) 55%,transparent 60%);
  transform:translateX(-100%);transition:transform .8s ease;pointer-events:none;z-index:1;
}
.card-shine:hover::after{transform:translateX(30%)}

/* particle-bg */
.particle-bg{position:relative}
.particle-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 20% 30%,hsl(var(--primary),0.08) 1px,transparent 1px),
    radial-gradient(circle at 80% 20%,hsl(var(--primary),0.06) 1px,transparent 1px),
    radial-gradient(circle at 40% 70%,hsl(var(--primary),0.05) 1px,transparent 1px),
    radial-gradient(circle at 60% 50%,hsl(var(--primary),0.07) 1px,transparent 1px),
    radial-gradient(circle at 90% 80%,hsl(var(--primary),0.04) 1px,transparent 1px);
  background-size:120px 120px,180px 180px,150px 150px,200px 200px,160px 160px;
  animation:particle-drift 20s linear infinite;
}

/* glow-dot */
.glow-dot{width:.5rem;height:.5rem;border-radius:9999px;background:hsl(var(--primary));box-shadow:0 0 8px hsl(var(--primary),0.6),0 0 20px hsl(var(--primary),0.3);animation:glow-pulse 2s ease-in-out infinite;display:inline-block;flex-shrink:0}

/* section-divider */
.section-divider{width:100%;height:1px;position:relative;background:linear-gradient(90deg,transparent,hsl(var(--primary),0.3),transparent)}
.section-divider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:.5rem;height:.5rem;border-radius:9999px;background:hsl(var(--primary));box-shadow:0 0 12px hsl(var(--primary),0.5)}

/* ═══════════════════════════════════════════
   BUTTON VARIANTS — from button.tsx
   base: rounded-full text-sm font-semibold transition-all duration-300
═══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;border-radius:9999px;
  font-size:.875rem;font-weight:600;font-family:'Space Grotesk',sans-serif;
  transition:all .3s;cursor:pointer;border:none;text-decoration:none;
  height:2.75rem;padding:.5rem 1.5rem;
}
.btn:disabled{pointer-events:none;opacity:.5}
/* default */
.btn-default{background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:0 4px 20px hsl(0,85%,55%,0.35)}
.btn-default:hover{background:hsl(0,85%,50%)}
/* hero: bg-primary font-bold btn-glow hover:scale-105 active:scale-95 */
.btn-hero{background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:700;box-shadow:0 4px 20px hsl(0,85%,55%,0.35)}
.btn-hero:hover{transform:scale(1.05);box-shadow:0 8px 30px hsl(0,85%,55%,0.5)}
.btn-hero:active{transform:scale(.95)}
/* outline: border-2 border-secondary bg-transparent hover:bg-secondary */
.btn-outline{border:2px solid hsl(var(--secondary));background:transparent;color:hsl(var(--secondary))}
.btn-outline:hover{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
html.dark .btn-outline{border-color:hsl(0,0%,85%);color:hsl(0,0%,85%)}
html.dark .btn-outline:hover{background:hsl(0,0%,85%);color:hsl(220,20%,10%)}
/* ghost */
.btn-ghost{background:transparent;color:hsl(var(--foreground))}
.btn-ghost:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
/* glass: bg-secondary/10 border border-secondary/30 text-secondary */
.btn-glass{background:hsl(var(--secondary),0.1);border:1px solid hsl(var(--secondary),0.3);color:hsl(var(--secondary))}
.btn-glass:hover{background:hsl(var(--secondary),0.2)}
/* nav: border-2 border-primary */
.btn-nav{border:2px solid hsl(var(--primary));background:transparent;color:hsl(var(--primary))}
.btn-nav:hover{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
/* sizes: h-11=2.75rem h-12=3rem h-14=3.5rem h-9=2.25rem h-10=2.5rem */
.btn-sm{height:2.25rem;padding:.5rem 1rem;font-size:.875rem}
.btn-lg{height:3rem;padding:.5rem 2rem;font-size:1rem}
.btn-xl{height:3.5rem;padding:.5rem 2.5rem;font-size:1.125rem}
.btn-icon{height:2.5rem;width:2.5rem;padding:0}

/* ═══════════════════════════════════════════
   HEADER — from Header.tsx
   fixed top-0 left-0 right-0 z-50 transition-all duration-500
   scrolled: bg-background/95 backdrop-blur-xl border-b border-border shadow-sm
═══════════════════════════════════════════ */
#site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .5s;background:transparent}
body.modal-open #site-header{z-index:1!important}
#site-header.scrolled{background:hsl(var(--background),0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid hsl(var(--border));box-shadow:0 1px 8px rgba(0,0,0,.05)}
/* container mx-auto px-4 sm:px-6 py-3 */
.header-wrap{max-width:1400px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.header-wrap{padding:0 1.5rem}}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
/* Logo: h-10 sm:h-12 w-auto */
.header-logo{display:flex;align-items:center;position:relative;z-index:50;text-decoration:none}
.header-logo img{height:2.5rem;width:auto}
@media(min-width:640px){.header-logo img{height:3rem}}
.header-logo-text{font-family:'Syne',sans-serif;font-size:1.375rem;font-weight:800}
/* Desktop nav: hidden lg:flex items-center gap-6 xl:gap-8 */
.header-nav{display:none;align-items:center;gap:1.5rem}
@media(min-width:1024px){.header-nav{display:flex}}
@media(min-width:1280px){.header-nav{gap:2rem}}
/* nav links: text-sm font-medium relative group */
.header-nav a{font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));transition:color .3s;position:relative;text-decoration:none}
.header-nav a::after{content:'';position:absolute;bottom:-4px;left:0;height:2px;width:0;background:hsl(var(--primary));transition:width .3s;border-radius:9999px}
.header-nav a:hover{color:hsl(var(--foreground))}
.header-nav a:hover::after,.header-nav a.active::after{width:100%}
.header-nav a.active{color:hsl(var(--primary))}
/* hidden lg:flex items-center gap-3 */
.header-actions{display:none;align-items:center;gap:.75rem}
@media(min-width:1024px){.header-actions{display:flex}}
/* theme toggle: relative h-9 w-9 rounded-full ghost */
.theme-btn{position:relative;height:2.25rem;width:2.25rem;border-radius:9999px;border:none;background:transparent;color:hsl(var(--foreground));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.theme-btn:hover{background:hsl(var(--muted))}
/* Sun hidden in dark, Moon hidden in light */
/* Theme toggle icons
   Dark mode  = show Sun  (click → go light)
   Light mode = show Moon (click → go dark)  */
html.dark  .theme-btn .i-sun,
html:not(.light) .theme-btn .i-sun { display:block }
html.dark  .theme-btn .i-moon,
html:not(.light) .theme-btn .i-moon { display:none }
html.light .theme-btn .i-sun  { display:none  }
html.light .theme-btn .i-moon { display:block }
/* flex lg:hidden items-center gap-2 */
.header-mob{display:flex;align-items:center;gap:.5rem}
@media(min-width:1024px){.header-mob{display:none}}
/* hamburger: relative z-50 p-2 rounded-lg */
.ham-btn{position:relative;z-index:50;padding:.5rem;color:hsl(var(--foreground));border-radius:.5rem;background:none;border:none;cursor:pointer;transition:background .2s}
.ham-btn:hover{background:hsl(var(--muted),0.5)}
.ham-wrap{width:1.5rem;height:1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
.ham-line{display:block;width:1.25rem;height:2px;background:currentColor;border-radius:9999px;position:absolute;transition:all .3s}
/* Mobile menu: absolute inset-x-0 top-full ... bg-background border-t border-border */
.mob-menu{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - 100%);background:hsl(var(--background));border-top:1px solid hsl(var(--border));display:none;z-index:60;overflow-y:auto}
.mob-menu.open{display:block;animation:menuSlideDown .3s cubic-bezier(.32,.72,0,1)}
/* inner bg effects */
.mob-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mob-bg::before{content:'';position:absolute;top:-8rem;right:-8rem;width:16rem;height:16rem;background:hsl(var(--primary),0.05);border-radius:9999px;filter:blur(3rem)}
.mob-bg::after{content:'';position:absolute;top:50%;left:-5rem;width:12rem;height:12rem;background:hsl(var(--primary),0.03);border-radius:9999px;filter:blur(3rem)}
/* container mx-auto px-5 pt-6 pb-10 min-h-full flex flex-col relative z-10 */
.mob-nav{max-width:1400px;margin:0 auto;padding:1.5rem 1.25rem 2.5rem;min-height:100%;display:flex;flex-direction:column;position:relative;z-index:10}
/* flex flex-col gap-1 flex-1 */
.mob-items{display:flex;flex-direction:column;gap:.25rem;flex:1}
/* link: flex items-center justify-between py-3.5 px-4 rounded-xl text-base font-semibold */
.mob-link{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;border-radius:.75rem;font-size:1rem;font-weight:600;color:hsl(var(--foreground));text-decoration:none;transition:all .2s}
.mob-link:hover{background:hsl(var(--muted),0.5)}
.mob-link.active{color:hsl(var(--primary));background:hsl(var(--primary),0.1)}
.mob-dot{width:.375rem;height:.375rem;border-radius:9999px;background:hsl(var(--primary));flex-shrink:0}
/* footer: mt-auto pt-6 border-t border-border */
.mob-foot{margin-top:auto;padding-top:1.5rem;border-top:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:.75rem}

/* ═══════════════════════════════════════════
   HERO — from HeroSection.tsx
   relative min-h-screen flex items-center justify-center overflow-hidden noise-overlay
═══════════════════════════════════════════ */
/* ── Global Mobile Fixes ─────────────────────────────── */
@media(max-width:639px){
  /* Reduce hero padding on mobile */
  section[style*="padding:8rem"]{padding-top:6.5rem!important;padding-bottom:3rem!important}
  /* Smaller font for h1 on very small screens */
  .sld-h1,.pd-hero-title,.bld-title{letter-spacing:-.01em!important}
  /* Ensure no horizontal overflow */
  .pd-container,.bld-container,.bld-body-container,.sld-container{padding-left:1rem!important;padding-right:1rem!important}
}

/* Project detail: hero not too tall on mobile */
@media(max-width:767px){
  .pd-hero{height:55vh!important;min-height:380px!important}
  .pd-stats{grid-template-columns:repeat(2,1fr)!important}
  .pd-stats-wrap{margin-top:-1rem!important}
  .pd-section{margin-top:3.5rem!important}
  .pd-cs-grid{grid-template-columns:1fr!important}
  .pd-sol-offset{margin-top:0!important}
  .pd-cs-card{padding:1.5rem!important}
  .pd-nav-grid{grid-template-columns:1fr!important}
  .pd-results{grid-template-columns:repeat(2,1fr)!important}
}

/* Blog detail: reduce top padding breadcrumb */
@media(max-width:767px){
  .bld-breadcrumb{padding-top:5.5rem!important}
  .bld-hero{padding:.75rem 1rem 1.5rem!important}
  .bld-img-sec{padding:.5rem 1rem 1.5rem!important}
  .bld-body-sec{padding:1.5rem 1rem 3rem!important}
  .bld-related-sec{padding:3rem 1rem!important}
  .bld-title{font-size:1.5rem!important}
}

/* Solution detail: compact on mobile */
@media(max-width:767px){
  .sld-hero-sec{padding:6.5rem 1rem 3rem!important}
  .sld-ben-sec,.sld-proc-sec,.sld-cta-sec{padding:3rem 1rem!important}
  .sld-h1{font-size:2rem!important}
  .sld-proc-grid{grid-template-columns:repeat(2,1fr)!important}
  .sld-ben-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* About page mobile */
@media(max-width:767px){
  .ab-story-grid{gap:2rem!important}
  .ab-stats-grid{gap:1rem!important}
  .ab-values-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* Solutions page mobile */
@media(max-width:767px){
  .sl-grid{gap:1.5rem!important}
  .sl-form-grid{gap:2rem!important}
}

/* Career page mobile */
@media(max-width:767px){
  .cr-perks-grid{gap:1rem!important}
  .cr-job-inner{flex-direction:column!important}
  /* Modal full screen on small mobile */
  #cr-modal{padding:.5rem!important;align-items:flex-start!important;overflow-y:auto!important}
  #cr-modal>div{max-width:100%!important;margin-top:1rem!important}
}

/* Blog filter mobile */
@media(max-width:639px){
  div.bl-filter-row{flex-direction:column!important;align-items:stretch!important}
  div.bl-search-wrap{max-width:100%!important;width:100%!important}
  div.bl-sel-wrap,.bl-sel{width:100%!important}
  div.bl-date-wrap{width:100%!important}
  .bl-date-inp{min-width:0!important;width:100%!important}
  .bl-date-ph{font-size:.75rem!important}
}

/* Contact page mobile */
@media(max-width:767px){
  .cp-main-grid{gap:2rem!important}
  .cp-card{padding:1rem!important}
}

/* Projects page mobile */
@media(max-width:767px){
  .pj-grid{gap:1.25rem!important}
}

/* Blogs grid mobile */
@media(max-width:767px){
  .bl-grid{gap:1.25rem!important}
}

/* Footer mobile */
@media(max-width:767px){
  .ft-grid{grid-template-columns:1fr!important}
  .ft-main{padding:2rem 1rem!important}
  .ft-bot-in{flex-direction:column!important;gap:.75rem!important;text-align:center!important}
}

/* ── Home Page Mobile Fixes ──────────────────────── */
@media(max-width:767px){
  /* Hero */
  .hero{min-height:100svh!important}
  .h-content{padding:3.5rem 1rem 0!important}
  .h-scroll{margin-top:2.5rem!important}

  /* Logos / Partners marquee */
  .logos-sec,.ptn-sec{padding:2rem 0!important}
  .logos-grad-l,.logos-grad-r,.ptn-fl,.ptn-fr{width:3rem!important}

  /* Services */
  .svc-grid{gap:1rem!important}
  .svc-card{padding:1.5rem!important}
  .svc-icon{width:3rem!important;height:3rem!important;margin-bottom:1rem!important}
  .svc-title{font-size:1.125rem!important}

  /* Portfolio */
  .pf-grid{gap:1rem!important}
  .pf-content{padding:1rem!important}
  .pf-title{font-size:1.0625rem!important}
  .pf-filters{gap:.5rem!important;margin-bottom:2rem!important}

  /* Stats */
  .stats-grid{gap:.875rem!important}
  .st-card{padding:1.25rem!important}
  .st-icon{width:2.5rem!important;height:2.5rem!important;margin-bottom:.875rem!important}
  .st-val{font-size:2rem!important}

  /* Testimonials */
  .tst-item{width:calc(100% - 0px)!important}
  .tst-track{gap:1rem!important}
  .tst-card{padding:1.25rem!important}

  /* Blog */
  .blog-grid{gap:1.25rem!important}
  .bl-card{border-radius:.875rem!important}
  .bl-title{font-size:1.0625rem!important}

  /* FAQ */
  .faq-list{gap:.75rem!important}
  .faq-btn{padding:1rem!important;font-size:.9375rem!important}
  .faq-ans{padding:0 1rem 1rem!important}

  /* CTA */
  .cta-inner{padding:2.5rem 1.25rem!important}
  .cta-title{font-size:clamp(1.5rem,6vw,2.25rem)!important}
  .cta-btns{flex-direction:column!important;align-items:stretch!important}
  .cta-btns a{width:100%!important;justify-content:center!important}

  /* Contact */
  .ct-grid{grid-template-columns:1fr!important;gap:2rem!important}
  .ct-form-card{padding:1.25rem!important}
  .ct-row{grid-template-columns:1fr!important!important}

  /* Section headings */
  .sec-title{font-size:clamp(1.75rem,6vw,2.5rem)!important}
}

@media(max-width:479px){
  .h-title-size{font-size:2rem!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}
  .pf-grid{grid-template-columns:1fr!important}
  .blog-grid{grid-template-columns:1fr!important}
  .svc-grid{grid-template-columns:1fr!important}
}

.logos-track-wrap:hover .animate-marquee-left{animation-play-state:paused}

/* ══ Footer ════════════════════════════════════════════════ */
footer{background:hsl(var(--muted)/.3);border-top:1px solid hsl(var(--border));position:relative;z-index:10;overflow:hidden}
.ft-main{padding:4rem 0 2.5rem}
.ft-grid{display:grid;grid-template-columns:4fr 5fr 3fr;gap:2rem;align-items:start}
.ft-logo-lnk{display:inline-block;margin-bottom:1.25rem;text-decoration:none}
.ft-logo-lnk img{height:2.75rem;width:auto;object-fit:contain}
.ft-logo-txt{font-family:'Syne',sans-serif;font-size:1.375rem;font-weight:700;color:hsl(var(--foreground))}
.ft-desc{color:hsl(var(--muted-foreground));font-size:.9375rem;line-height:1.7;margin-bottom:1.75rem;max-width:24rem}
.ft-soc{display:flex;gap:.75rem;flex-wrap:wrap}
.ft-soc-btn{width:2.625rem;height:2.625rem;border-radius:.75rem;background:hsl(var(--background));border:1px solid hsl(var(--border));display:inline-flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));text-decoration:none;transition:all .3s}
.ft-soc-btn:hover{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary));transform:translateY(-2px);box-shadow:0 4px 12px hsl(var(--primary)/.3)}
.ft-nav-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ft-col-h{font-family:'Syne',sans-serif;font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--foreground));margin-bottom:1.25rem}
.ft-col-links{display:flex;flex-direction:column;gap:.625rem}
.ft-lnk{display:inline-flex;align-items:center;gap:.25rem;color:hsl(var(--muted-foreground));font-size:.875rem;text-decoration:none;transition:all .3s;padding:.1875rem 0;width:fit-content;line-height:1.4}
.ft-lnk:hover{color:hsl(var(--primary));transform:translateX(3px)}
.ft-lnk-arrow{width:.875rem;height:.875rem;opacity:0;transition:opacity .2s}
.ft-lnk:hover .ft-lnk-arrow{opacity:1}
.ft-ct-h{font-family:'Syne',sans-serif;font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--foreground));margin-bottom:1.25rem}
.ft-ct-items{display:flex;flex-direction:column;gap:1rem}
.ft-ct-item{display:flex;align-items:flex-start;gap:.875rem;text-decoration:none;transition:color .2s}
.ft-ct-item:hover .ft-ct-val{color:hsl(var(--primary))}
.ft-ct-icon{width:2rem;height:2rem;border-radius:.5rem;background:hsl(var(--primary)/.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.125rem}
.ft-ct-lbl{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--muted-foreground));margin-bottom:.125rem}
.ft-ct-val{font-size:.875rem;font-weight:500;color:hsl(var(--foreground));transition:color .2s;word-break:break-word}
.ft-bot{border-top:1px solid hsl(var(--border));padding:1.25rem 0;position:relative;z-index:10}
.ft-bot-in{max-width:1400px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.ft-copy{font-size:.8125rem;color:hsl(var(--muted-foreground))}
.ft-bot-links{display:flex;align-items:center;gap:1.5rem}
.ft-bot-links a{font-size:.8125rem;color:hsl(var(--muted-foreground));text-decoration:none;transition:color .2s}
.ft-bot-links a:hover{color:hsl(var(--primary))}

@media(min-width:640px) and (max-width:1023px){.ft-grid{grid-template-columns:1fr 1fr;gap:2.5rem}.ft-nav-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){
  .ft-grid{grid-template-columns:1fr!important;gap:2.5rem!important}
  .ft-main{padding:2.5rem 0 1.5rem!important}
  .ft-bot-in{flex-direction:column!important;text-align:center!important;gap:.625rem!important}
  .ft-nav-cols{grid-template-columns:repeat(2,1fr)!important}
}

/* ── Back to Top Button ── */
#back-to-top{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  z-index:50;
  width:3rem;
  height:3rem;
  border-radius:9999px;
  background:hsl(var(--primary));
  color:#fff;
  border:none;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px hsl(var(--primary)/.4);
  transition:all .3s;
}
#back-to-top:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px hsl(var(--primary)/.5);
  opacity:.9;
}
#back-to-top.visible{display:flex}