/* =====================================================
   VIOFIDE SOLUTIONS — MAIN STYLESHEET (LIGHT THEME)
   =====================================================
   HOW TO EDIT COLORS / FONTS:
   Sabhi colors neeche ":root" me variables ki tarah diye
   hain. Sirf yahan value change karo, pure website me
   apne aap update ho jayega.
   ===================================================== */

:root{
  /* Brand Colors */
  --color-navy: #0A1930;        /* Dark navy — footer, stats bar, hero visual card, form panel */
  --color-navy-light: #0F2647;  /* Slightly lighter navy for nested cards on dark panels */
  --color-green: #17A363;       /* Primary brand green (buttons, links, highlights) */
  --color-green-dark: #0F7F4C;  /* Darker green for hover states */
  --color-green-light: #E7F7EF; /* Very light green background for icon circles */

  /* Neutrals */
  --color-text: #16202E;        /* Main body text */
  --color-text-light: #5B6675;  /* Secondary / paragraph gray text */
  --color-bg-light: #F4F7FA;    /* Light section background (alternate sections) */
  --color-white: #FFFFFF;
  --color-border: #E4E9EF;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Spacing / Layout */
  --container-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 10px 30px rgba(10, 25, 48, 0.08);
  --shadow-card: 0 4px 18px rgba(10, 25, 48, 0.06);
  --shadow-glow: 0 0 0 1px rgba(23,163,99,0.18), 0 14px 34px rgba(23,163,99,0.14);
  --transition: all 0.3s ease;
}

/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-white);
  overflow-x: hidden;
}
img{ max-width: 100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family: var(--font-heading); color: var(--color-navy); line-height:1.25; font-weight:600; }

.container{
  width:100%;
  max-width: var(--container-width);
  margin:0 auto;
  padding: 0 24px;
}

section{ padding: 90px 0; position:relative; }
@media(max-width:768px){ section{ padding: 56px 0; } }

.alt-bg{ background: var(--color-bg-light); }

/* =====================================================
   REDUCED MOTION SUPPORT
   ===================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================
   PRELOADER — logo centered, animates, then reveals site
   ===================================================== */
#preloader{
  position: fixed; inset:0; z-index: 99999;
  background: var(--color-white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-logo{
  display:flex; align-items:center; gap:4px;
  opacity:0; transform: scale(0.75);
  animation: logoPop 0.9s cubic-bezier(.34,1.56,.64,1) forwards;
}
.preloader-logo-img{ height:52px; width:auto; }
.preloader-tagline{
  color: var(--color-text-light); font-size:0.8rem; letter-spacing:3px; text-transform:uppercase;
  margin-top:10px; opacity:0; animation: fadeIn 0.8s ease forwards 0.5s;
}
.preloader-bar{ width:180px; height:3px; background: var(--color-border); border-radius:4px; margin-top:28px; overflow:hidden; opacity:0; animation: fadeIn 0.6s ease forwards 0.7s; }
.preloader-bar span{ display:block; width:35%; height:100%; background: var(--color-green); border-radius:4px; animation: loadSlide 1.3s ease-in-out infinite; }

@keyframes logoPop{ to{ opacity:1; transform:scale(1); } }
@keyframes arrowFloat{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-4px) rotate(6deg);} }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes loadSlide{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(380%);} }

body.loading{ overflow:hidden; }

/* =====================================================
   UTILITY / TEXT
   ===================================================== */
.eyebrow{
  display:inline-block; color: var(--color-green); font-weight:600; font-size: 0.85rem;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px;
}
.section-title{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; }
.section-sub{ color: var(--color-text-light); font-size: 1.02rem; max-width: 620px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.text-green{ color: var(--color-green); }
.underline-accent{ display:inline-block; position:relative; }
.underline-accent::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:4px;
  background: var(--color-green); border-radius: 4px;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 26px; border-radius: 8px; font-weight:600; font-size: 0.95rem;
  transition: var(--transition); white-space:nowrap;
}
.btn svg, .btn i{ transition: transform 0.25s ease; }
.btn:hover svg, .btn:hover i{ transform: translateX(4px); }

.btn-primary{ background: var(--color-green); color:#fff; box-shadow: 0 8px 20px rgba(23,163,99,0.28); }
.btn-primary:hover{ background: var(--color-green-dark); transform: translateY(-2px); }

.btn-outline{ background: transparent; border: 1.5px solid var(--color-border); color: var(--color-navy); }
.btn-outline:hover{ background: var(--color-navy); border-color: var(--color-navy); color:#fff; transform: translateY(-2px); }

/* =====================================================
   HEADER / NAVIGATION
   ===================================================== */
.site-header{
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}
.site-header.scrolled{ box-shadow: 0 6px 20px rgba(10,25,48,0.08); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding: 6px 24px; max-width: var(--container-width); margin:0 auto; }
.logo{ font-family: var(--font-heading); font-weight:700; font-size:1.5rem; color: var(--color-navy); display:flex; align-items:center; gap:2px; flex-shrink:0; }
.logo .accent{ color: var(--color-green); }
.logo-img{ height:24px; width:auto; display:block; aspect-ratio:861/274; }
@media(max-width:600px){ .logo-img{ height:22px; } }

.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links > li{ position:relative; }
.nav-links a{ font-weight:500; font-size:0.92rem; color: var(--color-text); padding: 8px 0; transition: var(--transition); position:relative; }
.nav-links a:hover, .nav-links a.active{ color: var(--color-green); }
.nav-links a.active::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background: var(--color-green); border-radius:2px; }

.nav-cta{ display:flex; align-items:center; gap:16px; }
/* Header CTA button — kept compact by default (not just on mobile) so the
   whole nav bar reads slim on every screen size */
.nav-cta .btn-primary{ padding:9px 16px; font-size:0.82rem; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; z-index:1200; }
.menu-toggle span{ width:24px; height:2.5px; background: var(--color-navy); border-radius:2px; transition: var(--transition); }

@media(max-width: 992px){
  .nav-links{
    position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:340px;
    background:#fff; flex-direction:column; justify-content:flex-start;
    padding: 100px 32px; gap:22px; transition: right 0.35s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
  }
  .nav-links.open{ right:0; }
  .menu-toggle{ display:flex; }
  .nav-cta .btn-primary{ padding:8px 14px; font-size:0.78rem; }
  .overlay{ position:fixed; inset:0; background:rgba(10,25,48,0.5); opacity:0; visibility:hidden; transition: var(--transition); z-index:999; }
  .overlay.show{ opacity:1; visibility:visible; }
}
.menu-toggle.active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  padding: 70px 0 90px;
  background: linear-gradient(180deg, #FBFCFE 0%, #F2F6F9 100%);
  overflow:hidden; position:relative;
}
.hero .container{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center; }
.hero h1{ font-size: clamp(2.1rem, 4.2vw, 3.15rem); margin-bottom:20px; }
.hero p{ color:var(--color-text-light); font-size:1.08rem; max-width:520px; margin-bottom:28px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 26px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:22px; color:var(--color-text-light); font-size:0.92rem; }
.hero-tags span{ display:flex; align-items:center; gap:7px; }
.hero-tags i{ color: var(--color-green); }

.hero-visual{ position:relative; animation: heroFloat 6s ease-in-out infinite; }
@keyframes heroFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.hero-form-panel{ background: var(--color-navy); border-radius:20px; padding:32px; box-shadow: var(--shadow-soft); }
@media(max-width:480px){ .hero-form-panel{ padding:24px 20px; } }
.floating-card{
  position:absolute; background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding: 14px 18px; animation: float 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

@media(max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order:1; }
}

/* =====================================================
   CARDS / GRIDS
   ===================================================== */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-6{ grid-template-columns: repeat(6,1fr); }
@media(max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-6{grid-template-columns:repeat(3,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-2, .grid-3, .grid-4, .grid-6{ grid-template-columns: 1fr; } }

/* About section's 4-feature grid: stay 2x2 on mobile instead of 1 long column */
@media(max-width:600px){
  .about-features-grid{ grid-template-columns: repeat(2, 1fr) !important; gap:14px !important; }
  .about-features-grid .icon-circle{ width:46px; height:46px; font-size:1.1rem; }
  .about-features-grid p{ font-size:0.82rem !important; }
}

.card{ background:#fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px 26px; transition: var(--transition); }
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-glow); border-color: transparent; }
.icon-circle{
  width:58px; height:58px; border-radius:50%; background: var(--color-green-light);
  display:flex; align-items:center; justify-content:center; color: var(--color-green);
  font-size:1.4rem; margin-bottom:18px; transition: var(--transition);
}
.card:hover .icon-circle{ background: var(--color-green); color:#fff; transform: rotate(-8deg) scale(1.08); }
.card h3{ font-size:1.15rem; margin-bottom:10px; }
.card p{ color: var(--color-text-light); font-size:0.95rem; margin-bottom:14px; }
.card .learn-more{ color: var(--color-green); font-weight:600; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px; }
.card .learn-more i{ transition: transform 0.25s ease; }
.card:hover .learn-more i{ transform: translateX(4px); }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonial-card{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 32px 28px; position:relative; transition: var(--transition);
}
.testimonial-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-glow); border-color:transparent; }
.testimonial-card .stars{ color:#F5A623; font-size:0.85rem; letter-spacing:3px; margin-bottom:14px; }
.testimonial-card .quote-icon{ position:absolute; top:26px; right:26px; color: var(--color-green-light); font-size:1.8rem; }
.testimonial-text{ color: var(--color-text-light); font-size:0.95rem; line-height:1.7; margin-bottom:22px; position:relative; z-index:1; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.testimonial-author .avatar{
  width:42px; height:42px; border-radius:50%; background: var(--color-green-light); color: var(--color-green);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-heading); flex-shrink:0;
}
.testimonial-author h4{ font-size:0.95rem; margin:0; }
.testimonial-author span{ font-size:0.8rem; color: var(--color-text-light); }

/* =====================================================
   STATS BAR (count-up animated numbers via JS)
   ===================================================== */
.stats-bar{
  background: var(--color-navy); border-radius: var(--radius-lg); padding: 40px 34px;
  display:flex; flex-wrap:wrap; gap: 34px; justify-content:space-between; align-items:center; color:#fff;
}
.stat{ display:flex; align-items:center; gap:14px; flex:1; min-width:150px; }
.stat i{
  width:52px; height:52px; border-radius:50%; background: rgba(23,163,99,0.18); color: var(--color-green);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.stat .num{ font-family: var(--font-heading); font-size:1.55rem; font-weight:700; }
.stat .label{ font-size:0.85rem; color: rgba(255,255,255,0.7); }

/* =====================================================
   PROCESS TIMELINE
   ===================================================== */
.process-track{ position:relative; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.process-step{ flex:1; min-width:150px; text-align:center; position:relative; }
.process-step .icon-circle{ margin:0 auto 16px; background:#fff; box-shadow: var(--shadow-card); }
.process-num{ color: var(--color-green); font-weight:700; font-size:0.95rem; }
.process-step h3{ font-size:1.02rem; margin:6px 0 8px; }
.process-step p{ color: var(--color-text-light); font-size:0.88rem; }
.process-line{
  position:absolute; top:29px; left:8%; right:8%; height:2px;
  background-image: linear-gradient(to right, var(--color-border) 50%, transparent 0%);
  background-size: 12px 2px; background-repeat: repeat-x; z-index:0;
}
@media(max-width:900px){ .process-track{ flex-direction:column; } .process-line{ display:none; } }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{ background: var(--color-navy); color: rgba(255,255,255,0.75); padding-top: 70px; }
.footer-brand .logo-img{ height:30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 46px; }
.footer-brand p{ margin: 14px 0 20px; font-size:0.92rem; line-height:1.7; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; transition: var(--transition);
}
.footer-social a:hover{ background: var(--color-green); }
.site-footer h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.site-footer ul li{ margin-bottom:11px; }
.site-footer ul li a{ font-size:0.92rem; display:flex; align-items:center; gap:8px; transition: var(--transition); }
.site-footer ul li a:hover{ color: var(--color-green); padding-left:3px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; }
.footer-contact i{ color: var(--color-green); margin-top:3px; }
.newsletter-form{ display:flex; margin-top:14px; border-radius:8px; overflow:hidden; }
.newsletter-form input{ flex:1; padding:12px 14px; border:none; font-family:inherit; font-size:0.88rem; }
.newsletter-form button{ background: var(--color-green); color:#fff; padding:0 18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding: 20px 0; text-align:center; font-size:0.85rem; }
@media(max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   CTA BANNER
   ===================================================== */
.cta-banner{
  background: var(--color-green); border-radius: var(--radius-lg); padding: 40px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff;
}
.cta-banner h3{ color:#fff; font-size:1.4rem; }
.cta-banner p{ color: rgba(255,255,255,0.9); font-size:0.95rem; }
.cta-banner .btn-primary{ background:#fff; color: var(--color-green); box-shadow:none; }
.cta-banner .btn-primary:hover{ background: rgba(255,255,255,0.9); }
.cta-contacts{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; font-size:0.92rem; }
.cta-contacts span{ display:flex; align-items:center; gap:8px; }

/* =====================================================
   FORMS
   ===================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column: 1/-1; }
input.form-control, textarea.form-control{
  width:100%; padding:14px 16px; border:1.5px solid var(--color-border); border-radius:8px;
  font-family:inherit; font-size:0.95rem; background:#fff; transition: var(--transition);
}
input.form-control:focus, textarea.form-control:focus{ outline:none; border-color: var(--color-green); box-shadow:0 0 0 3px rgba(23,163,99,0.14); }
textarea.form-control{ resize:vertical; min-height:120px; }
@media(max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--color-green); outline-offset:2px;
}

.about-office-img{ width:100%; height:340px; object-fit:cover; display:block; }
@media(max-width:900px){ .about-office-img{ height:280px; } }
@media(max-width:600px){ .about-office-img{ height:220px; } }

/* =====================================================
   BRAND MARQUEE (moving client logos + names — "Why Choose Us")
   ===================================================== */
.brand-marquee{
  position:relative; overflow:hidden;
  background: var(--color-bg-light); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 26px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  touch-action: pan-y; /* let vertical page-scroll pass through, no gesture interference */
}
.brand-heading{ font-size:1.3rem; margin-bottom:16px; }
.brand-track{
  display:flex; align-items:center; gap:42px; width:max-content;
  animation: brandScroll 14s linear infinite;
  animation-play-state: running !important; /* never pause, on hover, tap or focus */
  pointer-events: none; /* purely decorative — no tap/hover state can ever touch it */
  -webkit-tap-highlight-color: transparent;
}
.brand-item{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-heading); font-weight:700; font-size:1.02rem;
  color: var(--color-navy); white-space:nowrap;
}
.brand-icon{
  width:38px; height:38px; border-radius:10px; object-fit:cover;
  box-shadow: 0 2px 8px rgba(10,25,48,0.12);
  flex-shrink:0;
}
@keyframes brandScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .brand-track{ animation:none; } }
@media(max-width:600px){
  .brand-heading{ font-size:1.1rem; }
  .brand-marquee{ padding:14px 0; }
  .brand-track{ gap:16px; }
  .brand-item{ font-size:0.7rem; gap:6px; }
  .brand-icon{ width:18px; height:18px; border-radius:5px; }
}
@media(max-width:400px){
  .brand-marquee{ padding:12px 0; }
  .brand-track{ gap:12px; }
  .brand-item{ font-size:0.62rem; gap:5px; }
  .brand-icon{ width:15px; height:15px; border-radius:4px; }
}

/* =====================================================
   SCROLL REVEAL ANIMATION
   ===================================================== */
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
[data-reveal].in-view{ opacity:1; transform:none; }
[data-reveal="left"]{ transform: translateX(-30px); }
[data-reveal="left"].in-view{ transform:none; }
[data-reveal="right"]{ transform: translateX(30px); }
[data-reveal="right"].in-view{ transform:none; }
[data-reveal="scale"]{ transform: scale(0.94); }
[data-reveal="scale"].in-view{ transform:none; }

[data-stagger] > *{ opacity:0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-stagger].in-view > *{ opacity:1; transform:none; }
[data-stagger].in-view > *:nth-child(1){ transition-delay:0.05s; }
[data-stagger].in-view > *:nth-child(2){ transition-delay:0.14s; }
[data-stagger].in-view > *:nth-child(3){ transition-delay:0.23s; }
[data-stagger].in-view > *:nth-child(4){ transition-delay:0.32s; }
[data-stagger].in-view > *:nth-child(5){ transition-delay:0.41s; }
[data-stagger].in-view > *:nth-child(6){ transition-delay:0.5s; }

/* Back to top button */
#backToTop{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background: var(--color-green); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: var(--transition); z-index:900;
}
#backToTop.show{ opacity:1; visibility:visible; transform:none; }
#backToTop:hover{ transform: translateY(-3px); }

/* WhatsApp Floating Button */
.whatsapp-float{
  position:fixed; left:22px; bottom:22px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: 0 8px 22px rgba(37,211,102,0.4); z-index:900;
  animation: pulse 2.4s infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.5);} 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

.dots-pattern{
  position:absolute; width:140px; height:140px; opacity:0.15;
  background-image: radial-gradient(circle, var(--color-green) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}

/* Filter buttons (Portfolio) */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin: 40px 0 10px; }
.filter-btn{ padding:10px 22px; border-radius:30px; border:1.5px solid var(--color-border); font-weight:500; font-size:0.9rem; transition:var(--transition); }
.filter-btn.active, .filter-btn:hover{ background:var(--color-green); color:#fff; border-color:var(--color-green); }

.portfolio-card{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; transition:var(--transition); }
.portfolio-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-glow); }
.portfolio-thumb{ height:170px; background:linear-gradient(135deg,var(--color-navy),#12335e); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; }
.portfolio-body{ padding:22px; }
.portfolio-tag{ display:inline-block; background:var(--color-green-light); color:var(--color-green); font-size:0.78rem; font-weight:600; padding:4px 12px; border-radius:20px; margin-bottom:10px; }
.portfolio-stats{ display:flex; gap:10px; margin-top:16px; }
.portfolio-stats div{ flex:1; background:var(--color-green-light); border-radius:10px; padding:10px; text-align:center; }
.portfolio-stats strong{ display:block; color:var(--color-navy); font-size:0.98rem; }
.portfolio-stats span{ font-size:0.72rem; color:var(--color-text-light); }

/* FAQ */
.faq-item{ border:1px solid var(--color-border); border-radius:12px; margin-bottom:14px; overflow:hidden; background:#fff; }
.faq-question{ padding:18px 22px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; }
.faq-question i{ transition: transform 0.3s ease; color: var(--color-green); }
.faq-item.open .faq-question i{ transform: rotate(180deg); }
.faq-answer{ padding:0 22px; max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; color:var(--color-text-light); font-size:0.92rem; }

/* Service detail (kept for future use) */
.service-detail{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:60px 0; border-bottom:1px solid var(--color-border); }
.service-detail:last-child{ border-bottom:none; }
.service-detail.reverse .service-text{ order:2; }
.service-detail.reverse .service-visual{ order:1; }
@media(max-width:900px){ .service-detail, .service-detail.reverse{ grid-template-columns:1fr; } .service-detail.reverse .service-text{ order:0;} .service-detail.reverse .service-visual{ order:0;} }
.service-visual-box{ background: var(--color-bg-light); border-radius:20px; padding:50px; text-align:center; transition: var(--transition); }
.service-visual-box:hover{ transform: scale(1.03) rotate(-1deg); }
.check-list li{ display:flex; gap:10px; margin-bottom:12px; font-size:0.95rem; color: var(--color-text-light); }
.check-list i{ color:var(--color-green); margin-top:4px; }

/* Contact page bits */
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.contact-info-item .ic{ width:46px;height:46px;border-radius:10px;background: rgba(23,163,99,0.15); color:var(--color-green);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.contact-info-item h4{ color: var(--color-text-light); font-size:0.85rem; font-weight:500; }
.contact-info-item p{ color: var(--color-navy); font-weight:600; }
#formSuccess{ display:none; background: var(--color-green-light); color: var(--color-green-dark); padding:12px 16px; border-radius:8px; font-size:0.9rem; margin-top:14px; }

/* =====================================================
   CONTACT SECTION 3-COLUMN GRID
   (moved out of inline style so mobile media queries below
   can actually override it — inline styles beat media queries)
   ===================================================== */
.contact-grid{ grid-template-columns:0.95fr 1fr; }
@media(max-width:700px){ .contact-grid{ grid-template-columns:1fr; } }

/* =====================================================
   HERO FLOATING STAT CARDS
   Desktop position (unchanged from original design)
   ===================================================== */
.fc-roi{ top:-20px; right:-10px; }
.fc-leads{ bottom:-20px; right:10%; }

/* =====================================================
   MOBILE-ONLY CTA (hidden on desktop, shown inside the
   slide-out menu once the header button is hidden on very
   small screens — so the "Get Free Consultation" action is
   never lost, just relocated)
   ===================================================== */
.mobile-only-cta{ display:none; }

/* =====================================================================
   ===================================================================
   FULLY RESPONSIVE MOBILE SYSTEM — 320px to 768px
   Design, colors and functionality are unchanged below; this section
   only fixes layout, overflow, spacing, sizing and touch targets so
   the site works cleanly on every phone (Android + iPhone).
   ===================================================================
   ===================================================================== */

/* ---------- Prevent ANY horizontal scrolling, globally ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, iframe{ max-width:100%; height:auto; }
.container{ max-width:100%; }
* { min-width:0; } /* stops flex/grid children from forcing overflow via intrinsic content width */

/* Long unbroken strings (emails, links) should wrap instead of overflowing */
p, a, span, li, h1, h2, h3, h4{ overflow-wrap:break-word; word-break:break-word; }

/* =====================================================
   TABLET / LARGE MOBILE — 768px and below
   ===================================================== */
@media(max-width:768px){
  html{ font-size:15.5px; }               /* scales every rem-based size down slightly and consistently */
  .container{ padding:0 20px; }
  section{ padding:56px 0; }

  .hero{ padding:40px 0 60px; }
  .hero .container{ gap:36px; }
  .hero-visual{ max-width:420px; margin:0 auto; }

  .grid{ gap:20px; }
  .stats-bar{ gap:24px; }

  .footer-grid{ gap:28px; }
}

/* =====================================================
   STANDARD MOBILE — 600px and below
   ===================================================== */
@media(max-width:600px){
  html{ font-size:15px; }
  .container{ padding:0 18px; }
  section{ padding:48px 0; }

  /* ---- Buttons: full readable size, comfortable tap area ---- */
  .btn{ padding:13px 20px; font-size:0.9rem; min-height:44px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; text-align:center; justify-content:center; }
  .hero-tags{ flex-direction:column; gap:10px; }

  /* ---- Header / nav ---- */
  .nav-wrap{ padding:12px 16px; }
  .logo{ font-size:1.25rem; }
  .nav-cta{ gap:12px; }

  /* ---- Hero floating stat cards: keep inside viewport, shrink a bit ---- */
  .fc-roi{ top:-14px; right:6px; padding:10px 12px; }
  .fc-leads{ bottom:-14px; right:6%; padding:10px 12px; }
  .fc-roi h3, .fc-leads h3{ font-size:1.05rem; }

  /* ---- Contact "Send message" columns / info boxes stack cleanly ---- */
  .contact-info-item{ gap:12px; }

  /* ---- CTA banner ---- */
  .cta-banner{ padding:28px 22px; flex-direction:column; align-items:flex-start; text-align:left; }
  .cta-banner .btn{ width:100%; justify-content:center; }
  .cta-contacts{ flex-direction:column; align-items:flex-start; gap:12px; }

  /* ---- Stats bar ---- */
  .stats-bar{ padding:26px 20px; flex-direction:column; align-items:stretch; gap:22px; }
  .stat{ min-width:0; }

  /* ---- Portfolio / blog stat pills wrap safely ---- */
  .portfolio-stats{ flex-wrap:wrap; }

  /* ---- Floating action buttons stay comfortably tappable ---- */
  .whatsapp-float, #backToTop{ width:48px; height:48px; font-size:1.3rem; }
  .whatsapp-float{ left:16px; bottom:16px; }
  #backToTop{ right:16px; bottom:16px; }

  /* ---- Footer ---- */
  .footer-social a{ width:42px; height:42px; }
  .newsletter-form input{ padding:13px 14px; min-height:44px; }
  .newsletter-form button{ min-width:48px; }
}

/* =====================================================
   SMALL MOBILE — 480px and below (iPhone SE, small Android)
   ===================================================== */
@media(max-width:480px){
  html{ font-size:14.5px; }
  .container{ padding:0 16px; }
  section{ padding:44px 0; }

  h1{ font-size:1.85rem; line-height:1.3; }
  .section-title{ font-size:1.45rem; }

  /* Header: logo + hamburger only — the consultation button moves
     into the slide-out menu so nothing gets squeezed or clipped */
  .nav-cta .btn-primary{ display:none; }
  .mobile-only-cta{ display:block; margin-top:10px; }
  .mobile-only-cta a{ min-height:46px; }

  /* Enlarge the hamburger's tap area without changing its look */
  .menu-toggle{ min-width:44px; min-height:44px; align-items:center; justify-content:center; margin:-9px; }

  .card{ padding:24px 20px; }
  .icon-circle{ width:50px; height:50px; font-size:1.2rem; }

  .hero-visual{ max-width:100%; }
  .fc-roi, .fc-leads{ position:static; margin-top:12px; width:100%; box-sizing:border-box; }
  .floating-card{ animation:none; }

  .process-step{ min-width:100%; }
  .stat{ flex-direction:row; }

  .filter-bar{ gap:8px; }
  .filter-btn{ padding:10px 16px; font-size:0.82rem; min-height:44px; }

  .faq-question{ padding:16px 18px; min-height:44px; }
  .faq-answer{ padding-left:18px; padding-right:18px; }

  .footer-grid{ grid-template-columns:1fr; gap:30px; text-align:left; }
  .footer-social a{ width:44px; height:44px; }
}

/* =====================================================
   EXTRA SMALL MOBILE — 375px and below (iPhone SE 1st gen etc.)
   ===================================================== */
@media(max-width:375px){
  .container{ padding:0 14px; }
  h1{ font-size:1.65rem; }
  .eyebrow{ font-size:0.78rem; }
  .card{ padding:20px 16px; }
  .cta-banner h3{ font-size:1.2rem; }
  .stat i{ width:46px; height:46px; font-size:1.1rem; }
  .contact-info-item .ic{ width:40px; height:40px; }
}

/* =====================================================
   VERY SMALL MOBILE — 320px (smallest common width)
   ===================================================== */
@media(max-width:320px){
  .container{ padding:0 12px; }
  .logo{ font-size:1.1rem; }
  h1{ font-size:1.5rem; }
  .btn{ padding:12px 16px; font-size:0.85rem; }
}

/* =====================================================
   TOUCH TARGET GUARANTEE — applies at all mobile widths
   Ensures every clickable control is at least 44x44px,
   per WCAG / Apple / Android accessibility guidelines.
   ===================================================== */
@media(max-width:768px){
  .nav-links a{ display:block; padding:13px 4px; min-height:44px; }
  .footer-social a{ min-width:42px; min-height:42px; }
  .faq-question{ min-height:44px; }
  .filter-btn{ min-height:42px; display:inline-flex; align-items:center; }
  .btn{ min-height:44px; }
  #backToTop, .whatsapp-float{ min-width:44px; min-height:44px; }
}