/* ============================================================
   Gletus – Global Animation & Design-System layer
   Loaded on every page (via header.php). SAFE: all reveal
   effects are scoped under html.js-anim, so if JS is off or
   fails, everything stays fully visible. A JS safety-timeout
   also force-reveals after 2.5s.
   ============================================================ */

:root{
  --g-primary:#004b9e;
  --g-accent:#00bcd4;
  --g-dark:#061429;
  --g-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Smooth base polish (always on, cannot hide content) ---------- */
html{scroll-behavior:smooth;}

img{transition:transform .5s var(--g-ease), box-shadow .4s ease;}

a{transition:color .2s ease;}

/* Buttons & CTA-like elements get a gentle lift on hover */
.btn, button, .submit-btn, .submit-button,
input[type="submit"], .read-more, .btn-primary{
  transition:transform .22s var(--g-ease), box-shadow .25s ease, background-color .25s ease, color .25s ease !important;
}
.btn:hover, button:hover, .submit-btn:hover, .submit-button:hover,
input[type="submit"]:hover, .read-more:hover, .btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,75,158,.28);
}

/* Cards / boxes: subtle hover lift + shadow. Targets the common
   card-ish classes used across the service pages. */
.card, .service-box, .service-card, .feature-box, .feature-card,
.expertise-item, .box, .industry-box, .process-box, .step-box,
.portfolio-item, .team-card, .price-box, .pricing-card, .info-box,
.owl-item .item, .blog-card, .why-box, .counter-box{
  transition:transform .3s var(--g-ease), box-shadow .3s ease, border-color .3s ease;
  will-change:transform;
}
.card:hover, .service-box:hover, .service-card:hover, .feature-box:hover,
.feature-card:hover, .expertise-item:hover, .box:hover, .industry-box:hover,
.process-box:hover, .step-box:hover, .portfolio-item:hover, .team-card:hover,
.price-box:hover, .pricing-card:hover, .info-box:hover, .blog-card:hover,
.why-box:hover, .counter-box:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(6,20,41,.14);
}

/* Zoom images inside cards / portfolio on hover */
.card:hover img, .service-box:hover img, .portfolio-item:hover img,
.feature-box:hover img, .blog-card:hover img{
  transform:scale(1.06);
}

/* Animated gradient underline for section headings (h2) */
.gletus-underline, .services-size, .section-title h2{
  position:relative;display:inline-block;
}
.gletus-underline::after, .services-size::after, .section-title h2::after{
  content:"";position:absolute;left:0;bottom:-10px;height:4px;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--g-primary),var(--g-accent));
  transition:width .8s var(--g-ease);
}
html.js-anim .gletus-underline.in::after,
html.js-anim .services-size.in::after,
html.js-anim .section-title h2.in::after{width:70px;}
/* No-JS fallback: show the underline */
html:not(.js-anim) .gletus-underline::after,
html:not(.js-anim) .services-size::after,
html:not(.js-anim) .section-title h2::after{width:70px;}

/* ---------- Scroll-reveal (scoped to .js-anim only) ---------- */
html.js-anim .reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity .7s var(--g-ease), transform .7s var(--g-ease);
  will-change:opacity,transform;
}
html.js-anim .reveal.in{opacity:1;transform:none;}

/* Direction / style variants */
html.js-anim .reveal.rev-left{transform:translateX(-40px);}
html.js-anim .reveal.rev-right{transform:translateX(40px);}
html.js-anim .reveal.rev-zoom{transform:scale(.9);}
html.js-anim .reveal.rev-left.in,
html.js-anim .reveal.rev-right.in,
html.js-anim .reveal.rev-zoom.in{transform:none;}

/* Stagger helper (JS sets --i on grouped children) */
html.js-anim .reveal[style*="--i"]{transition-delay:calc(var(--i,0) * .08s);}

/* Respect reduced-motion: no reveal hiding, no transforms */
@media (prefers-reduced-motion: reduce){
  html.js-anim .reveal{opacity:1 !important;transform:none !important;}
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}

/* ---------- Reusable modern components for redesigned pages ---------- */

/* Hero */
/* Light hero. Every colour below is set for a white ground and checked for
   contrast (h1 16.5:1, accent 5.0:1, body 6.9:1 - AA or better). The tinted
   gradient and the soft radial glows keep some depth so the band still reads
   as a hero rather than blank page. */
.g-hero{
  position:relative;overflow:hidden;color:#1a2b45;text-align:center;
  padding:96px 20px 84px;
  background:linear-gradient(135deg,#ffffff 0%,#f5faff 55%,#e9f2fd 120%);
  border-bottom:1px solid #e4edf8;
}
.g-hero::before{
  content:"";position:absolute;inset:0;opacity:.85;pointer-events:none;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(0,188,212,.13), transparent 60%),
    radial-gradient(500px 260px at 85% 80%, rgba(0,75,158,.10), transparent 60%);
  animation:gHeroFloat 12s ease-in-out infinite alternate;
}
@keyframes gHeroFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-18px,0)}}
.g-hero>*{position:relative;z-index:1;}
.g-hero .g-eyebrow{
  display:inline-block;background:rgba(0,188,212,.12);border:1px solid rgba(0,105,122,.32);
  color:#00697a;padding:7px 18px;border-radius:30px;font-size:.85rem;font-weight:600;
  letter-spacing:.3px;margin-bottom:20px;
}
/* color/display are set explicitly, not inherited from .g-hero, on purpose:
   several service pages carry an unscoped `h1{color:#2c3e50;display:inline-block}`
   in their own inline <style> (written for one section, never scoped to it). A
   directly-applied rule always beats an inherited value no matter how weak its
   specificity, so without these the hero headline renders dark-on-dark and is
   effectively invisible. The ::after reset kills the stray underline bar that
   same stray rule adds. */
.g-hero h1{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;line-height:1.2;max-width:960px;margin:0 auto 18px;
  color:#0b1f3a;display:block;}
.g-hero h1::after{display:none;}
.g-hero h1 span{color:#0b6fd1;}
.g-hero p{font-size:1.08rem;color:#4a5b73;max-width:820px;margin:0 auto 30px;line-height:1.75;}
.g-hero p strong{color:#0b1f3a;}

/* Buttons and stat cards are shared components styled for a dark ground, so the
   light-hero versions are scoped to .g-hero and leave every other usage alone.
   Without these the ghost button (white text + white border) and the white stat
   cards would disappear into the background. */
.g-hero .g-btn-primary{background:var(--g-accent);color:#04222b;}
.g-hero .g-btn-primary:hover{background:#00a5bb;color:#04222b;box-shadow:0 12px 28px rgba(0,188,212,.35);}
.g-hero .g-btn-ghost{background:transparent;border:1px solid rgba(11,31,58,.28);color:#0b1f3a;}
.g-hero .g-btn-ghost:hover{background:rgba(11,31,58,.06);border-color:rgba(11,31,58,.45);}
.g-hero .g-stat{background:#fff;border:1px solid #dde8f5;box-shadow:0 6px 18px rgba(9,30,62,.06);}
.g-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.g-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:9px;font-weight:600;
  text-decoration:none;font-size:1rem;transition:transform .22s var(--g-ease),box-shadow .25s ease,background .25s ease,color .25s;}
.g-btn-primary{background:var(--g-accent);color:var(--g-dark);}
.g-btn-primary:hover{background:#fff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,188,212,.4);}
.g-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;}
.g-btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);}
.g-btn-wa{background:#25d366;color:#fff;}
.g-btn-wa:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(37,211,102,.4);}

/* Generic section wrapper */
.g-section{max-width:1180px;margin:0 auto;padding:70px 20px;}
.g-section-head{text-align:center;max-width:820px;margin:0 auto 46px;}
.g-section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--g-dark);margin:0 0 14px;}
.g-section-head h2 span{color:var(--g-primary);}
.g-section-head p{color:#54617a;line-height:1.75;font-size:1.02rem;}

/* Feature/service grid */
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.g-card{background:#fff;border:1px solid #e7edf4;border-radius:16px;padding:30px 26px;text-decoration:none;display:block;}
.g-card .g-ico{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--g-primary),var(--g-accent));color:#fff;font-size:1.4rem;margin-bottom:18px;}
.g-card h3{font-size:1.15rem;color:var(--g-dark);margin:0 0 9px;font-weight:700;}
.g-card p{color:#5a6a7e;font-size:.94rem;line-height:1.6;margin:0;}
.g-card:hover{border-color:var(--g-accent);box-shadow:0 20px 44px rgba(6,20,41,.12);transform:translateY(-8px);}

/* Stat / counter strip */
.g-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;
  max-width:1000px;margin:0 auto;}
.g-stat{background:#fff;border:1px solid #e7edf4;border-radius:14px;padding:26px 18px;text-align:center;}
.g-stat b{display:block;font-size:2.1rem;color:var(--g-primary);font-weight:800;line-height:1;}
.g-stat span{color:#657186;font-size:.9rem;margin-top:8px;display:block;}

@media(max-width:768px){
  .g-hero{padding:70px 18px 60px;}
  .g-section{padding:50px 18px;}
}