/* =====================================================================
   REDESIGN.CSS — Suresh TechLabs visual refresh
   ---------------------------------------------------------------------
   This file is 100% ADDITIVE. It is loaded AFTER style.css and only
   targets classes that already exist in the PHP templates
   (.card, .service-card, .site-hero, .btn, .navbar, .nav-menu, etc.)
   No PHP, routes, forms, DB logic, or existing class names were
   touched — this only changes how things look/animate.
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Cohesive blue/teal palette on white/grey, layered over whatever
     navy/red variables style.css already defines */
  --rd-primary:#0b5fa5;
  --rd-primary-dark:#083d6b;
  --rd-teal:#0fa3a3;
  --rd-teal-dark:#0c7f7f;
  --rd-ink:#0f2337;
  --rd-grey-50:#f6f9fc;
  --rd-grey-100:#eef2f7;
  --rd-glass-bg:rgba(255,255,255,0.55);
  --rd-glass-border:rgba(255,255,255,0.35);
  --rd-glass-bg-dark:rgba(11,29,49,0.45);
  --rd-shadow-sm:0 4px 14px rgba(15,35,55,.08);
  --rd-shadow-md:0 12px 30px rgba(15,35,55,.14);
  --rd-shadow-lg:0 24px 60px rgba(15,35,55,.20);
  --rd-radius:16px;
  --rd-ease:cubic-bezier(.22,.9,.32,1);
}

/* ---------- 2. Typography upgrade ---------- */
/* Poppins for headings, Inter for body — loaded via <link> in header.php */
h1,h2,h3,h4, .site-hero h1, .section-header h2{
  font-family:'Poppins','Mulish',sans-serif !important;
  letter-spacing:-.01em;
}
body, p, a, span, li, input, textarea, select, button{
  font-family:'Inter','Mulish',sans-serif;
}

/* ---------- 3. Scroll-reveal animation system ---------- */
/* redesign.js adds .rd-in-view when an .rd-reveal element enters the
   viewport. Until then it's invisibly offset. Respects reduced motion. */
.rd-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--rd-ease), transform .7s var(--rd-ease);
  will-change:opacity, transform;
}
.rd-reveal.rd-from-left{ transform:translateX(-32px); }
.rd-reveal.rd-from-right{ transform:translateX(32px); }
.rd-reveal.rd-in-view{
  opacity:1;
  transform:translate(0,0);
}
@media (prefers-reduced-motion: reduce){
  .rd-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* stagger children of a grid automatically (set via JS custom property) */
.rd-reveal{ transition-delay: calc(var(--rd-delay, 0) * 80ms); }

/* ---------- 4. Section headings — small entrance flourish ---------- */
.section-header{ position:relative; }
.section-header h2{
  display:inline-block;
  position:relative;
}
.section-header h2::after{
  content:"";
  display:block;
  height:3px;
  width:56px;
  margin-top:10px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--rd-primary),var(--rd-teal));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--rd-ease) .1s;
}
.rd-in-view .section-header h2::after,
.section-header.rd-in-view h2::after{ transform:scaleX(1); }

/* ---------- 5. Cards: hover lift, shadow, tilt-ready ---------- */
.card, .service-card, .stat-card, .why-card, .workflow-card, .blog-card, .contact-info-card{
  transition:transform .45s var(--rd-ease), box-shadow .45s var(--rd-ease), border-color .3s ease;
  will-change:transform;
}
.card:hover, .service-card:hover, .why-card:hover, .workflow-card:hover, .blog-card:hover{
  box-shadow:var(--rd-shadow-md);
}
/* When redesign.js applies a live 3D tilt, it sets these custom props */
.rd-tilt{
  transform:
    perspective(900px)
    rotateX(var(--rd-tilt-x,0deg))
    rotateY(var(--rd-tilt-y,0deg))
    translateZ(0) scale(var(--rd-tilt-scale,1));
  transition:transform .15s ease-out, box-shadow .3s ease;
}
.rd-tilt:hover{ box-shadow:var(--rd-shadow-lg); }

/* ---------- 6. Service card hover overlay/icon reveal ---------- */
.service-card{ position:relative; overflow:hidden; }
.service-card .card-icon{
  transition:transform .5s var(--rd-ease), color .3s ease;
}
.service-card:hover .card-icon{
  transform:translateY(-4px) scale(1.12) rotate(-4deg);
}
.service-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(11,95,165,.06), rgba(15,163,163,.10));
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
  border-radius:inherit;
}
.service-card:hover::before{ opacity:1; }
.service-card .card-tag{
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.service-card:hover .card-tag{ transform:translateY(-2px); }

/* ---------- 7. Buttons: scale, shadow, underline-draw ---------- */
.btn{
  position:relative;
  overflow:hidden;
  transition:transform .3s var(--rd-ease), box-shadow .3s var(--rd-ease), background .3s ease, color .3s ease;
}
.btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:var(--rd-shadow-sm);
}
.btn:active{ transform:translateY(0) scale(.98); }
/* underline-draw for outline / text-style links */
.btn-outline, .btn-outline-light, .btn-hero-outline{
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 2px;
  transition:background-size .35s var(--rd-ease), transform .3s var(--rd-ease), box-shadow .3s var(--rd-ease);
}
.btn-outline:hover, .btn-outline-light:hover, .btn-hero-outline:hover{
  background-size:100% 2px;
}
.nav-menu a{
  position:relative;
}
.nav-menu a::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  height:2px; width:0;
  background:linear-gradient(90deg,var(--rd-primary),var(--rd-teal));
  transition:width .3s var(--rd-ease);
}
.nav-menu a:hover::after, .nav-menu a.active::after{ width:100%; }

/* ---------- 8. Glassmorphism ---------- */
/* Applied to: hero overlay content, feature/why cards flagged .rd-glass,
   testimonial cards, and the sticky navbar once scrolled */
.rd-glass{
  background:var(--rd-glass-bg);
  border:1px solid var(--rd-glass-border);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--rd-shadow-sm);
  border-radius:var(--rd-radius);
}
.rd-glass-dark{
  background:var(--rd-glass-bg-dark);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  color:#fff;
  border-radius:var(--rd-radius);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  /* graceful degrade on low-end / unsupported browsers */
  .rd-glass{ background:rgba(255,255,255,.92); }
  .rd-glass-dark{ background:rgba(11,29,49,.92); }
}

/* Hero gets a gradient + glass content panel */
.site-hero, .hero, .hero-home{ position:relative; overflow:hidden; }
.site-hero::before, .hero-home::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(15,163,163,.25), transparent 60%),
    linear-gradient(120deg, var(--rd-primary-dark), var(--rd-primary) 55%, var(--rd-teal-dark));
  z-index:0;
}
.site-hero > .container, .hero-home > .container{ position:relative; z-index:1; }
.site-hero-badge{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
}

/* ---------- 9. Navbar: smooth sticky glass on scroll ---------- */
.navbar{
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.navbar.rd-scrolled{
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  background:rgba(255,255,255,.85);
  box-shadow:var(--rd-shadow-sm);
}

/* ---------- 10. Images: consistent framing across all content pages ---------- */
.rd-media{
  border-radius:var(--rd-radius);
  overflow:hidden;
  box-shadow:var(--rd-shadow-sm);
  position:relative;
  /* CSS-safe fallback: shows even if the <img> hasn't loaded yet or
     its onerror swap is still in flight, so a card never shows a
     blank white box or a broken-image glyph. */
  background:linear-gradient(135deg, var(--rd-primary), var(--rd-teal));
}
.rd-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .6s var(--rd-ease);
}
.rd-media:hover img{ transform:scale(1.06); }
.rd-media-16x9{ aspect-ratio:16/9; }
.rd-media-4x3{ aspect-ratio:4/3; }
.rd-media-square{ aspect-ratio:1/1; }

.rd-media-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  background:linear-gradient(0deg, rgba(8,20,33,.75), transparent);
  color:#fff;
  font-size:.9rem;
  transform:translateY(8px);
  opacity:0;
  transition:transform .35s var(--rd-ease), opacity .35s var(--rd-ease);
}
.rd-media:hover .rd-media-caption{ transform:translateY(0); opacity:1; }

/* ---------- 11. Accessibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--rd-teal);
  outline-offset:2px;
}
img{ max-width:100%; }

/* ---------- 12. Mobile-first refinements ---------- */
@media (max-width:900px){
  .rd-reveal{ transform:translateY(16px); }
  .rd-media{ box-shadow:none; }
}

/* Low-end device degrade: a class redesign.js adds when it detects
   coarse pointer / reduced hardware, to drop the heavier effects */
.rd-reduced-fx .rd-tilt{ transform:none !important; }
.rd-reduced-fx .rd-glass, .rd-reduced-fx .rd-glass-dark{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}