/**
 * Islah Data Consultancy — Premium Presentation Layer
 * ---------------------------------------------------
 * Loaded AFTER main.css. This file changes ONLY presentation:
 * colour, type, spacing, depth, motion. It adds no content and
 * removes no content. Every headline, paragraph, price and phone
 * number in the HTML is untouched.
 *
 * Palette is derived from the actual brand logo:
 *   royal blue wordmark  -> --brand-500
 *   coral chart mark     -> --coral-500
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand — the 500 steps are pixel-sampled from assets/img/logo.png, not
     approximated: #597CFE is the dominant wordmark blue and #FF3131 the chart
     mark red. The 600/700 steps stay darker on purpose — they carry the text
     and button duties where the raw logo colours would fail AA on white. */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #7E9AFF;
  --brand-500: #597CFE;   /* logo blue, exact */
  --brand-600: #3B5BDB;   /* AA on white */
  --brand-700: #2F49B2;

  --coral-50:  #FFF5F5;
  --coral-400: #FF6B63;
  --coral-500: #FF3131;   /* logo mark, exact */
  --coral-600: #E03131;   /* AA on white */
  --coral-700: #C92A2A;

  /* Neutral ink scale */
  --ink-950: #05070F;
  --ink-900: #0A0F1F;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #4B5563;
  --ink-400: #6B7280;
  --ink-300: #9CA3AF;
  --ink-200: #D1D5DB;
  --ink-100: #E5E7EB;
  --ink-50:  #F3F4F6;

  /* Surfaces. The ground is deliberately NOT white: every tint below is the
     logo blue (#597CFE) desaturated down, so the page reads as the brand's own
     colour rather than as unstyled paper. Cards stay --paper (true white) so
     they lift off that ground instead of dissolving into it — that contrast is
     what gives the layout depth, and it is lost the moment the ground is white
     too. Text stays on the ink scale, so contrast ratios are unaffected. */
  --paper:   #FFFFFF;   /* cards, panels — the raised layer */
  --paper-2: #EDF1FB;   /* alternating section bands */
  --ground:  #E7EDF9;   /* the page itself */
  --ground-2:#DCE5F6;   /* deepest band, for section alternation */

  /* Typography */
  --font-display: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacious scale — marketing density */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Layered elevation — soft, Stripe-like */
  --sh-xs: 0 1px 2px rgba(10, 15, 31, .05);
  --sh-sm: 0 1px 3px rgba(10, 15, 31, .06), 0 1px 2px rgba(10, 15, 31, .04);
  --sh-md: 0 4px 12px rgba(10, 15, 31, .06), 0 2px 4px rgba(10, 15, 31, .04);
  --sh-lg: 0 18px 40px -12px rgba(10, 15, 31, .16), 0 4px 12px rgba(10, 15, 31, .05);
  --sh-xl: 0 32px 64px -16px rgba(10, 15, 31, .22), 0 8px 20px rgba(10, 15, 31, .06);
  --sh-brand: 0 12px 28px -8px rgba(89, 124, 254, .38);
  --sh-coral: 0 12px 28px -8px rgba(255, 49, 49, .36);

  /* Hairlines — tinted with the logo blue rather than neutral black, so edges
     belong to the palette instead of greying it down. */
  --line: rgba(45, 66, 130, .12);
  --line-strong: rgba(45, 66, 130, .20);

  /* Motion — durations/easings per UX guideline: 150–300ms, meaning-bearing */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .16s;
  --t-base: .26s;
  --t-slow: .5s;

  /* Remap template variables so untouched components inherit the new brand */
  --heading-color: var(--ink-900);
  --default-color: var(--ink-500);
  --accent-color: var(--brand-600);
  --background-color: var(--ground);
  --surface-color: var(--paper);
  --contrast-color: #ffffff;
  --nav-hover-color: var(--brand-500);
  --nav-dropdown-hover-color: var(--brand-600);
}

/* Alternating band. Goes DEEPER than the default ground, not lighter — the
   template used this class to lift sections towards white, which is precisely
   what made the page read as one flat white sheet. */
.light-background {
  --background-color: var(--ground-2);
  --surface-color: var(--paper);
}

/* The template marks the hero and footer .dark-background. This site now runs
   a light theme end to end, so those sections are remapped to light surfaces
   with ink text rather than inverted ones. */
.dark-background {
  --background-color: var(--ground-2);
  --default-color: var(--ink-600);
  --heading-color: var(--ink-900);
  --surface-color: var(--paper);
  --contrast-color: var(--ink-900);
}

.scrolled .header {
  --background-color: transparent;
}

/* ==========================================================================
   2. FOUNDATION — typography, rhythm, focus
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar track permanently. The intro curtain locks scrolling,
     which removes the scrollbar; without a stable gutter the whole page jumps
     ~15px sideways the moment the curtain lifts. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  color: var(--ink-500);
  background-color: var(--ground);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem); letter-spacing: -0.034em; }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -0.024em; }

p { text-wrap: pretty; }

strong, b { font-weight: 650; color: var(--ink-700); }

.dark-background strong,
.dark-background b { color: var(--ink-800); }

a { transition: color var(--t-fast) var(--ease-out); }

/* Visible, on-brand focus for keyboard users (never removed) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--brand-500);
  color: #fff;
}

img { max-width: 100%; }

/* Generous marketing rhythm */
section,
.section {
  padding: clamp(56px, 7vw, 104px) 0;
  position: relative;
}

/* ==========================================================================
   3. SECTION TITLES — replaces the dated double-underline treatment
   ========================================================================== */

.section-title {
  text-align: center;
  padding-bottom: var(--space-5);
  max-width: 760px;
  margin-inline: auto;
}

.section-title h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem);
  font-weight: 700;
  margin-bottom: var(--space-3);
  padding-bottom: 0;
}

/* Kill the template's line + dash under every heading */
.section-title h2:before,
.section-title h2::after {
  display: none;
  content: none;
}

.section-title p {
  font-size: 1.075rem;
  color: var(--ink-400);
  margin-bottom: 0;
}

.dark-background .section-title p { color: var(--ink-400); }

/* ==========================================================================
   4. HEADER — glass, sticky, brand-aware
   ========================================================================== */

.header {
  padding: 8px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              padding var(--t-base) var(--ease-out);
}

.scrolled .header {
  padding: 5px 0;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

/* The logo file carries generous internal whitespace, so the rendered mark
   reads noticeably smaller than its box — sized up to compensate. */
.header .logo img {
  height: 76px;
  width: auto;
  max-width: none;
  transition: height var(--t-base) var(--ease-out);
}

.scrolled .header .logo img { height: 62px; }

@media (max-width: 575px) {
  .header .logo img { height: 58px; }
  .scrolled .header .logo img { height: 50px; }
}

/* Nav links: white over the dark hero, ink once the glass bar kicks in */
/* Every section the bar can sit over is light, so nav links are always ink.
   (White links here made Home/Services/Contact invisible on inner pages.) */
@media (min-width: 1200px) {
  .navmenu ul { gap: 4px; }

  .navmenu a,
  .navmenu a:focus {
    position: relative;
    padding: 9px 16px;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--ink-600);
    border-radius: var(--r-pill);
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
  }

  .navmenu a:hover,
  .navmenu li:hover > a {
    color: var(--ink-900);
    background: var(--ink-50);
  }

  .navmenu .active,
  .navmenu .active:focus {
    color: var(--brand-600);
    background: var(--brand-50);
    font-weight: 600;
  }
}

.mobile-nav-toggle {
  color: var(--ink-800);
  font-size: 30px;
  transition: color var(--t-fast) var(--ease-out);
}

@media (max-width: 1199px) {
  .navmenu ul {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--sh-xl);
    padding: 12px;
  }

  .navmenu a,
  .navmenu a:focus {
    font-family: var(--font-display);
    font-weight: 500;
    border-radius: var(--r-md);
    padding: 12px 16px;
    min-height: 44px;      /* touch target */
  }

  .navmenu a:hover,
  .navmenu .active {
    background: var(--brand-50);
    color: var(--brand-600);
  }
}

/* ==========================================================================
   5. HERO — aurora mesh, grid overlay, editorial type
   ========================================================================== */

/* The ground is deliberately tinted rather than near-white. The previous
   #FBFCFE -> #FFFFFF ramp was so close to paper that the hero read as an empty
   unstyled area on large screens, especially on the carousel slides that carry
   no heading. This keeps the light, editorial feel but gives the section an
   actual edge against the white content below it. */
.hero {
  min-height: min(88vh, 860px);
  padding: 150px 0 110px;
  background: linear-gradient(180deg, #D7E1F7 0%, #C9D7F3 48%, #E7EDF9 100%);
  isolation: isolate;
}

/* Neutralise the template's rotated pseudo-element "swoosh" */
.hero::before,
.hero::after {
  content: none;
  display: none;
}

/* Layered aurora blobs (injected wrapper .pm-hero-bg) */
.pm-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pm-hero-bg .pm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .46;
  will-change: transform;
}

.pm-hero-bg .pm-orb-1 {
  width: 620px; height: 620px;
  top: -200px; left: -120px;
  background: radial-gradient(circle, var(--brand-400) 0%, transparent 68%);
  animation: pm-drift-a 22s ease-in-out infinite alternate;
}

.pm-hero-bg .pm-orb-2 {
  width: 540px; height: 540px;
  top: 18%; right: -160px;
  background: radial-gradient(circle, var(--coral-400) 0%, transparent 68%);
  opacity: .2;
  animation: pm-drift-b 26s ease-in-out infinite alternate;
}

.pm-hero-bg .pm-orb-3 {
  width: 700px; height: 700px;
  bottom: -340px; left: 34%;
  background: radial-gradient(circle, #A78BFA 0%, transparent 70%);
  opacity: .22;
  animation: pm-drift-a 30s ease-in-out infinite alternate-reverse;
}

/* Connected-node network (canvas injected by premium.js).
   Sits above the orbs but below .pm-veil, so the veil still lifts contrast
   behind the headline and the lines never fight the copy for attention. */
.pm-hero-bg .pm-net {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.pm-hero-bg .pm-veil { z-index: 2; }

/* Faint engineering grid — ink hairlines on the light ground */
.pm-hero-bg .pm-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 15, 31, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 15, 31, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 76% 62% at 50% 40%, #000 28%, transparent 76%);
  mask-image: radial-gradient(ellipse 76% 62% at 50% 40%, #000 28%, transparent 76%);
}

/* Soft white wash so copy always clears contrast over the orbs.
   Held back from the old .78/.85 opacities: at those values the veil bleached
   the orbs out completely and the whole hero flattened to white. It now lifts
   contrast behind the copy without erasing the colour underneath. */
.pm-hero-bg .pm-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 46% at 50% 46%, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .14) 62%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, transparent 34%, rgba(255, 255, 255, .62) 100%);
}

@keyframes pm-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 44px, 0) scale(1.12); }
}

@keyframes pm-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-56px, 40px, 0) scale(1); }
}

.hero .container { position: relative; z-index: 3; }

.hero .carousel { z-index: 3; }

.hero .carousel-container {
  text-align: center;
  max-width: 940px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.hero h1 {
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1.06;
  margin-bottom: var(--space-4);
}

.hero h2 {
  color: var(--ink-900);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  animation: none;               /* template's fadeInDown replaced by JS reveal */
}

.hero p {
  color: var(--ink-500);
  font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem);
  line-height: 1.7;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  animation: none;
}

/* The ✔ feature line reads as a capability chip row */
.hero p b {
  display: inline-block;
  color: var(--ink-700);
  font-weight: 550;
  letter-spacing: -0.008em;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-sm);
}

/* Buttons */
.hero .btn-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  min-height: 52px;
  padding: 15px 32px;
  margin: var(--space-2) 6px 0;
  border: 0;
  border-radius: var(--r-pill);
  /* brand-600, not brand-500: white type on brand-500 measures 4.32:1 */
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--sh-brand);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.hero .btn-get-started:hover {
  background: var(--brand-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -10px rgba(76, 110, 245, .5);
}

.hero .btn-get-started:active { transform: translateY(0); }

/* Second CTA in a pair becomes the quiet secondary variant */
.hero .btn-get-started + .btn-get-started {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-800);
  box-shadow: var(--sh-sm);
}

.hero .btn-get-started + .btn-get-started:hover {
  background: var(--paper);
  border-color: var(--brand-300);
  color: var(--brand-700);
  box-shadow: var(--sh-md);
}

/* Carousel chrome — restrained */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 52px;
  height: 52px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.hero:hover .carousel-control-prev,
.hero:hover .carousel-control-next { opacity: 1; }

.hero .carousel-control-prev:focus-visible,
.hero .carousel-control-next:focus-visible { opacity: 1; }

.hero .carousel-control-prev { left: max(16px, 3vw); }
.hero .carousel-control-next { right: max(16px, 3vw); }

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover { background: #fff; border-color: var(--brand-200); }

.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  font-size: 20px;
  width: auto;
  height: auto;
  background: none;
  color: var(--ink-700);
}

.hero .carousel-indicators {
  bottom: -8px;
  gap: 8px;
  align-items: center;
}

.hero .carousel-indicators li {
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink-200);
  opacity: 1;
  transition: width var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.hero .carousel-indicators li.active {
  width: 30px;
  background: var(--brand-500);
}

/* Scroll cue injected by premium.js */
.pm-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-300);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}

.pm-scroll-cue span {
  width: 24px;
  height: 38px;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-pill);
  position: relative;
}

.pm-scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: var(--r-pill);
  background: var(--ink-400);
  animation: pm-wheel 1.9s var(--ease-out) infinite;
}

@keyframes pm-wheel {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

@media (max-width: 767px) {
  .hero { padding: 116px 0 92px; min-height: auto; }
  .pm-scroll-cue { display: none; }
  .hero .carousel-control-prev,
  .hero .carousel-control-next { display: none; }
}

/* ==========================================================================
   6. SERVICE CARDS — the core content surface
   ========================================================================== */

.featured-services { background: var(--ground); }

/* The 2nd services block sits on tinted paper for rhythm */
.featured-services + .featured-services {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.featured-services .service-item {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  isolation: isolate;   /* keeps the z-index:-1 glow inside this card */
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

/* Cursor-following spotlight (coords set by premium.js) */
.featured-services .service-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;          /* above the card background, beneath the copy */
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--pm-mx, 50%) var(--pm-my, 50%),
    color-mix(in srgb, var(--pm-accent, var(--brand-500)) 9%, transparent) 0%,
    transparent 62%
  );
  transition: opacity var(--t-base) var(--ease-out);
}

.featured-services .service-item:hover::after { opacity: 1; }

/* Accent hairline that fills in on hover */
.featured-services .service-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pm-accent, var(--brand-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}

.featured-services .service-item:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--sh-lg);
}

.featured-services .service-item:hover::before { transform: scaleX(1); }

.featured-services .service-item .icon {
  width: 54px;
  height: 54px;
  min-width: 54px;
  margin-bottom: var(--space-3);
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--pm-accent-soft, var(--brand-50));
  color: var(--pm-accent, var(--brand-600));
  transition: transform var(--t-base) var(--ease-spring),
              background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

.featured-services .service-item .icon::before { content: none; }

.featured-services .service-item .icon i {
  font-size: 25px;
  line-height: 1;
  color: inherit;
  transition: color var(--t-base) var(--ease-out);
}

.featured-services .service-item:hover .icon {
  transform: translateY(-2px) scale(1.06);
  background: var(--pm-accent, var(--brand-500));
  color: #fff;
}

.featured-services .service-item:hover .icon i { color: #fff; }

.featured-services .service-item h3 {
  font-size: 1.16rem;
  font-weight: 650;
  color: var(--ink-900);
  letter-spacing: -0.024em;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  transition: color var(--t-base) var(--ease-out);
}

.featured-services .service-item:hover h3 { color: var(--pm-accent, var(--brand-600)); }

.featured-services .service-item p {
  font-size: .93rem;
  line-height: 1.68;
  color: var(--ink-400);
  margin-bottom: 10px;
}

/* "✔ Best for…" / "✔ Starting from…" lines become quiet spec rows */
.featured-services .service-item p b {
  display: block;
  font-size: .84rem;
  font-weight: 550;
  color: var(--ink-600);
  letter-spacing: -0.008em;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--ink-50);
  border: 1px solid var(--line);
}

/* Price line gets the brand tint. --pm-accent-strong is a darker variant for
   text use, since some accents pass on a fill but not as type on their tint. */
.featured-services .service-item p:last-of-type b {
  color: var(--pm-accent-strong, var(--pm-accent, var(--brand-700)));
  background: var(--pm-accent-soft, var(--brand-50));
  border-color: transparent;
  font-weight: 650;
}

/* CTA inside the card — pushed to the bottom so cards align */
.featured-services .service-item .btn {
  position: relative;
  z-index: 3;             /* CRITICAL: clears .stretched-link's ::after overlay */
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;       /* touch target */
  padding: 11px 20px;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 0;
  border-radius: var(--r-pill);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.featured-services .service-item .btn-danger {
  background: var(--coral-600);
  color: #fff;
  box-shadow: var(--sh-coral);
}

.featured-services .service-item .btn-danger:hover {
  background: var(--coral-500);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(245, 68, 59, .48);
}

/* The whole-card stretched link stays intact underneath the CTA */
.featured-services .service-item .stretched-link::after { z-index: 1; }

/* Per-card accent tokens (replaces the template's cyan/orange/teal/red) */
.featured-services .service-item.item-cyan   { --pm-accent: var(--brand-600); --pm-accent-soft: var(--brand-50); }
.featured-services .service-item.item-orange { --pm-accent: #B45309; --pm-accent-soft: #FEF3C7; }
.featured-services .service-item.item-teal   { --pm-accent: #0F766E; --pm-accent-soft: #CCFBF1; }
.featured-services .service-item.item-red    { --pm-accent: var(--coral-600); --pm-accent-soft: var(--coral-50); --pm-accent-strong: var(--coral-700); }

/* Neutralise the template's hover colour-flood on these variants */
.featured-services .service-item.item-cyan:hover,
.featured-services .service-item.item-orange:hover,
.featured-services .service-item.item-teal:hover,
.featured-services .service-item.item-red:hover {
  background: var(--paper);
}

/* ==========================================================================
   7. ABOUT / FEATURES
   ========================================================================== */

.about img,
.features img {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.features img { box-shadow: none; }

.about .content h3 {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  letter-spacing: -0.032em;
  margin-bottom: var(--space-3);
}

.about .content p.fst-italic {
  font-style: normal !important;
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--ink-400);
  padding-left: var(--space-3);
  border-left: 3px solid var(--brand-500);
  margin-bottom: var(--space-4);
}

.about .content ul,
.features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.about .content ul li,
.features ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-600);
  font-size: .96rem;
  line-height: 1.6;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.about .content ul li:hover,
.features ul li:hover {
  transform: translateX(4px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
}

.about .content ul i,
.features ul i {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  font-size: 13px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
}

.features-item h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  margin-bottom: var(--space-3);
}

.features .features-item {
  padding: var(--space-5) 0;
}

.features .features-item + .features-item {
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   8. CTA BAND + trust strip
   ========================================================================== */

/* The "Ready to Grow Your Business?" band */
#features #contact.bg-light {
  background: linear-gradient(160deg, #F5F8FF 0%, #EEF3FE 48%, #FFF4F3 100%) !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xl);
  margin: var(--space-5) 0;
  padding: clamp(48px, 6vw, 80px) var(--space-4) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#features #contact.bg-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 100% at 18% 0%, rgba(76, 110, 245, .16) 0%, transparent 62%),
    radial-gradient(ellipse 50% 90% at 88% 100%, rgba(245, 68, 59, .12) 0%, transparent 62%);
}

#features #contact.bg-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(10, 15, 31, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 15, 31, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
}

#features #contact.bg-light h2 {
  color: var(--ink-900);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  margin-bottom: var(--space-3);
}

#features #contact.bg-light p {
  color: var(--ink-500);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

#features #contact.bg-light p.fw-bold {
  color: var(--ink-900);
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
}

#features #contact.bg-light .btn {
  min-height: 52px;
  padding: 15px 32px;
  margin-top: var(--space-3);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

/* Both CTAs carry white type, so the fills are chosen to clear 4.5:1 in the
   rest state AND on hover — the lighter brand tints fail that as text. */
#features #contact.bg-light .btn-danger {
  background: var(--coral-600);
  color: #fff;
  box-shadow: var(--sh-coral);
}

#features #contact.bg-light .btn-danger:hover {
  background: var(--coral-700);
  transform: translateY(-2px);
}

#features #contact.bg-light .btn-success {
  background: #0B7A43;
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(11, 122, 67, .34);
}

#features #contact.bg-light .btn-success:hover {
  background: #096536;
  transform: translateY(-2px);
}

/* Closing "Software Company in Pune You Can Trust" band */
main > section:last-of-type .container.text-center p {
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.06rem;
  color: var(--ink-400);
}

/* ==========================================================================
   9. PAGE TITLE (inner pages)
   ========================================================================== */

.page-title {
  padding: 150px 0 70px;
  background: linear-gradient(180deg, #FAFCFF 0%, #F2F6FD 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-title:before {
  background: none;
  inset: 0;
  z-index: -1;
  opacity: 1;
  background-image:
    radial-gradient(ellipse 55% 90% at 12% 0%, rgba(76, 110, 245, .16) 0%, transparent 60%),
    radial-gradient(ellipse 45% 80% at 90% 100%, rgba(245, 68, 59, .1) 0%, transparent 60%),
    linear-gradient(rgba(10, 15, 31, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 15, 31, .035) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}

.page-title h1 {
  color: var(--ink-900);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  letter-spacing: -0.038em;
  margin-bottom: var(--space-3);
}

.page-title .breadcrumbs ol {
  justify-content: flex-start;
  gap: 8px;
  font-size: .9rem;
  color: var(--ink-400);
}

.page-title .breadcrumbs ol a { color: var(--brand-600); }
.page-title .breadcrumbs ol a:hover { color: var(--brand-700); }

/* ==========================================================================
   10. PORTFOLIO
   ==========================================================================
   The work shown here is under NDA, so the screenshots are deliberately
   low-detail and cannot carry the page on their own. The module is therefore
   built so the CARD does the selling, not the picture: every tile states its
   sector, system type and what the system actually does, permanently visible
   rather than hidden behind a hover overlay.

   Each category also gets its own frame — browser chrome for portals, a
   handset bezel for apps, a shelf for books — so the grid reads as three
   kinds of product instead of one undifferentiated wall of screenshots.
   ========================================================================== */

/* --- 10.1 NDA notice ------------------------------------------------------
   Turns the confidentiality caveat from an apology into a credential: it is
   the reason the artwork is thin, so it should look deliberate. */
.page-title .pm-nda {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 640px;
  margin: var(--space-3) auto 0;
  padding: 12px 18px;
  text-align: left;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--coral-700);
  background: var(--coral-50);
  border: 1px solid color-mix(in srgb, var(--coral-500) 22%, transparent);
  border-radius: var(--r-md);
}

.page-title .pm-nda i {
  flex: none;
  margin-top: 2px;
  font-size: 1rem;
  color: var(--coral-600);
}

/* --- 10.2 Scale band ------------------------------------------------------
   Three numbers above the grid so the page states its scale before a visitor
   has to count tiles. */
.portfolio .pm-scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.portfolio .pm-scale div {
  flex: 1 1 150px;
  max-width: 220px;
  padding: var(--space-3);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.portfolio .pm-scale strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}

.portfolio .pm-scale span {
  display: block;
  margin-top: 6px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --- 10.3 Toolbar: filters + live result count ---------------------------
   Sticky below the fixed header so the category you are in stays legible
   while you scroll a 20-tile grid. */
.portfolio .pm-toolbar {
  margin-bottom: var(--space-5);
}

@media (min-width: 992px) {
  /**
   * Opaque, not translucent. A blurred 86% ground still let card titles and
   * eyebrow rules read through the bar as it passed over the grid, which made
   * a working sticky element look like a rendering fault. Cards must pass
   * cleanly underneath, so the bar gets a solid ground, a full-bleed backing
   * that covers the container gutters, and a soft shadow to sit above.
   */
  .portfolio .pm-toolbar {
    position: sticky;
    top: 92px;
    z-index: 4;
    padding: var(--space-3) 0;
    background: var(--paper);
  }

  .portfolio .pm-toolbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 20px -14px rgba(10, 15, 31, .3);
  }
}

.portfolio .isotope-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.portfolio .isotope-filters li {
  margin: 0;
  padding: 9px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 550;
  line-height: 1;
  color: var(--ink-500);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.portfolio .isotope-filters li:hover {
  color: var(--brand-600);
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.portfolio .isotope-filters li.filter-active {
  color: #fff;
  background: var(--ink-900);
  border-color: var(--ink-900);
  box-shadow: var(--sh-md);
}

/* Counts are injected by premium.js from the DOM, so they cannot drift out of
   sync with the number of tiles actually present. */
.portfolio .isotope-filters .pm-count {
  padding: 3px 7px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
  background: var(--ink-50);
  transition: color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.portfolio .isotope-filters li.filter-active .pm-count {
  color: #fff;
  background: rgba(255, 255, 255, .2);
}

.portfolio .pm-result {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: .84rem;
  color: var(--ink-400);
}

.portfolio .pm-result b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}

/* --- 10.4 Card shell ------------------------------------------------------
   .portfolio-item is the Bootstrap grid COLUMN — the visible card is
   .portfolio-content inside it. Styling the column left the artwork
   unconstrained, so a portrait book cover stretched its whole masonry row
   and blew a large hole in the grid. */
.portfolio .portfolio-item {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.portfolio .portfolio-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.portfolio .portfolio-content:hover {
  transform: translateY(-6px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-lg);
}

/* premium.js forwards a click anywhere on the card to the lightbox link */
.portfolio .portfolio-content.pm-clickable { cursor: zoom-in; }

/* --- 10.5 Shot region — shared -------------------------------------------- */
.portfolio .pm-shot {
  position: relative;
  flex: none;
  overflow: hidden;
}

.portfolio .pm-shot img {
  display: block;
  width: 100%;
  transition: transform var(--t-slow) var(--ease-out);
}

/* --- 10.6 Web portal: browser chrome --------------------------------------
   A titlebar and a masked address bar reframe a bare crop as a deployed
   system, and give the NDA somewhere to live visually instead of only in the
   page intro. object-fit is `cover` anchored to the top rather than `contain`:
   inside a browser frame the tile should read as a page scrolled to the top,
   and the header/nav/first data rows — the part worth seeing — are all there.
   The lightbox still opens the complete uncropped screenshot. */
.portfolio .pm-shot--browser {
  /* All three frame types are locked to the same 4:3 tile so a mixed "All"
     view lines up instead of stepping up and down by frame type. The chrome
     bar is a fixed strip and the screenshot flexes into whatever is left. */
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px;
  background: linear-gradient(165deg, var(--brand-50) 0%, var(--paper-2) 62%);
}

.portfolio .pm-chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding-right: 4px;
}

.portfolio .pm-chrome i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-200);
}

.portfolio .pm-chrome .pm-url {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--ink-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio .pm-chrome .pm-url::before {
  content: "\F47A"; /* bi-lock-fill */
  font-family: "bootstrap-icons";
  font-size: .66rem;
  letter-spacing: 0;
  color: var(--ink-200);
}

.portfolio .pm-shot--browser img {
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* --- 10.7 Mobile app: handset bezel ---------------------------------------
   These screenshots are ~9:16 portrait captures. The previous single 4:3
   `contain` tile shrank each one to a narrow strip stranded between two wide
   bands of empty background — the main reason the Mobile App tab read as
   empty. A device frame gives the portrait ratio a reason to exist and fills
   the tile. */
.portfolio .pm-shot--phone {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: end center;
  padding-top: var(--space-3);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--brand-100) 0%, transparent 62%),
    var(--paper-2);
}

.portfolio .pm-device {
  position: relative;
  width: 138px;
  max-width: 46%;
  padding: 6px 6px 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(158deg, var(--ink-700) 0%, var(--ink-950) 70%);
  box-shadow: 0 16px 32px -12px rgba(10, 15, 31, .55),
              0 0 0 1px rgba(255, 255, 255, .06) inset;
}

/* Earpiece notch */
.portfolio .pm-device::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 50%;
  width: 44px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 0 0 7px 7px;
  background: var(--ink-950);
}

.portfolio .pm-shot--phone img {
  aspect-ratio: 9 / 17;
  object-fit: cover;
  object-position: top center;
  border-radius: 17px 17px 0 0;
  background: #fff;
}

/* --- 10.8 Books: cover on a shelf ----------------------------------------- */
/**
 * A stretch-aligned flex row, not a centred grid: a grid item centred with
 * place-items has an auto height, so `height: 100%` on the cover had nothing
 * to resolve against and the image fell back to its natural size — a 2:3
 * portrait cover overflowing the 4:3 tile by ~160px. Stretch gives .pm-book a
 * definite height for the cover to fill, while .pm-book itself still shrinks
 * to the cover's width so the spine lands on the artwork rather than out in
 * the surrounding space.
 */
.portfolio .pm-shot--book {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--space-4) var(--space-3) var(--space-5);
  background: radial-gradient(120% 85% at 50% 8%, #FFF7ED 0%, var(--paper-2) 65%);
}

.portfolio .pm-book {
  position: relative;
  display: flex;
}

.portfolio .pm-shot--book img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 20px 34px -14px rgba(10, 15, 31, .5),
              0 3px 8px rgba(10, 15, 31, .14);
}

/* Spine highlight — the detail that reads as "book" rather than "image" */
.portfolio .pm-book::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg,
              rgba(10, 15, 31, .34) 0%,
              rgba(255, 255, 255, .18) 62%,
              rgba(10, 15, 31, .06) 100%);
}

/* Shelf edge under the cover */
.portfolio .pm-shot--book::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.portfolio .portfolio-content:hover .pm-shot img { transform: scale(1.03); }

/* --- 10.9 Card body — always visible -------------------------------------
   The old markup kept every title and description inside the hover overlay,
   so the grid was silent until you moved a mouse over it and said nothing at
   all on touch. This is the block that stops the module reading as a
   contact sheet. */
.portfolio .pm-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}

.portfolio .pm-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portfolio .pm-eyebrow .pm-sector { color: var(--brand-600); }
.portfolio .pm-eyebrow .pm-kind { color: var(--ink-300); }

.portfolio .pm-eyebrow::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--line);
}

.portfolio .pm-eyebrow .pm-kind { order: 2; }

/**
 * Titles and descriptions are clamped AND floored to the same number of
 * lines. Without the min-height a one-line title next to a three-line one
 * left the grid stepping up and down by ~40px per card; pinning both to a
 * fixed line budget is what makes 24 tiles of uneven copy read as a grid.
 */
.portfolio .pm-body h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  background: none;
  padding: 0;
  min-height: calc(2 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio .pm-body p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-400);
  min-height: calc(4 * 1.6em);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * The floor is exactly two chip rows: 4px padding + 26 + 6 gap + 26 = 62.
 * Cards whose chips fit on one line still reserve the second, which is what
 * holds all 24 tiles at one identical height. Box-sizing is border-box here,
 * so the padding has to be counted inside the min-height — leaving it out was
 * what left a 4px split across the grid.
 */
.portfolio .pm-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  min-height: 62px;
  margin-top: auto;
  padding-top: 4px;
}

/* Explicit height rather than padding + line-height: the derived value came
   out fractional (~27.5px), so a two-row chip block was 61px against the 58px
   floor above and reintroduced a 3px height split across the grid. */
.portfolio .pm-tags span,
.portfolio .pm-tags .pm-out {
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 550;
  color: var(--ink-500);
  background: var(--ink-50);
  border: 1px solid var(--line);
}

/* An outbound link styled as a chip so it sits in the tag row rather than
   adding a fifth line only one card in twenty-four has. */
.portfolio .pm-tags .pm-out {
  gap: 6px;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border-color: var(--brand-100);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.portfolio .pm-tags .pm-out:hover {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.portfolio .pm-tags .pm-out i { font-size: .8rem; }

/* --- 10.10 Hover overlay --------------------------------------------------
   Now that the copy lives in .pm-body, the overlay only has one job: signal
   that the tile opens a full-size view. */
.portfolio .pm-shot .portfolio-info {
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: linear-gradient(180deg, rgba(10, 15, 31, .3) 0%, rgba(10, 15, 31, .6) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.portfolio .pm-shot .portfolio-info .preview-link,
.portfolio .pm-shot .portfolio-info .details-link {
  position: static;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  transform: none;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.portfolio .pm-shot .portfolio-info .preview-link:hover,
.portfolio .pm-shot .portfolio-info .details-link:hover {
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
}

/* There is no hover on touch, so the overlay would never appear and the zoom
   affordance would be invisible. premium.js already makes the whole card open
   the lightbox, so hide the overlay entirely rather than pin it open over the
   artwork. */
@media (hover: none) {
  .portfolio .pm-shot .portfolio-info { display: none; }
}

/* --- 10.11 Closing CTA ---------------------------------------------------- */
.portfolio .pm-cta {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--ink-900) 0%, var(--brand-700) 130%);
  box-shadow: var(--sh-lg);
}

.portfolio .pm-cta h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}

.portfolio .pm-cta p {
  max-width: 560px;
  margin: 0 auto var(--space-4);
  color: var(--ink-200);
}

.portfolio .pm-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  background: #fff;
  border: 0;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.portfolio .pm-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-xl);
}

/* --- 10.12 Narrow screens ------------------------------------------------- */
@media (max-width: 575px) {
  .portfolio .pm-device { width: 120px; max-width: 52%; }
  .portfolio .pm-scale strong { font-size: 1.55rem; }
  .portfolio .pm-body h4 { font-size: .96rem; }
}

/* ==========================================================================
   11. STATS / CLIENTS / TESTIMONIALS / SKILLS
   ========================================================================== */

.stats .stats-item {
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  height: 100%;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.stats .stats-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.stats .stats-item span {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stats .stats-item p {
  font-size: .95rem;
  color: var(--ink-400);
}

.stats .stats-item i {
  color: var(--brand-500);
  font-size: 30px;
}

.clients .client-logo img,
.clients img {
  filter: grayscale(1);
  opacity: .5;
  transition: filter var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}

.clients img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.testimonials .testimonial-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--space-4);
}

.testimonials .testimonial-item img {
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow: var(--sh-md);
}

.testimonials .testimonial-item h3 {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.testimonials .testimonial-item h4 {
  font-size: .86rem;
  color: var(--ink-400);
  font-weight: 500;
}

/**
 * .skills .progress is the 60px WRAPPER holding the label + the track —
 * not the track itself. Giving it a background or radius paints a grey slab
 * behind the label, and Bootstrap's overflow:hidden then clips the first and
 * last characters off every skill name. Keep the wrapper neutral and style
 * .progress-bar-wrap (the real track) instead.
 */
.skills .progress {
  height: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: var(--space-3);
}

.skills .progress .skill {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-700);
  margin-bottom: 10px;
}

.skills .progress .skill .val {
  color: var(--brand-600);
  font-weight: 650;
}

.skills .progress-bar-wrap {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  overflow: hidden;
}

.skills .progress-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
  transition: width 1.1s var(--ease-out);
}

/* ==========================================================================
   12. CONTACT + FORMS
   ========================================================================== */

.contact .info-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--space-4);
  height: 100%;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.contact .info-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.contact .info-item i {
  color: var(--brand-600);
  background: var(--brand-50);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-size: 22px;
}

.contact .info-item h3 {
  font-size: 1.05rem;
  font-weight: 650;
}

.php-email-form,
.contact form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: var(--space-4);
}

/* Scoped with .contact to beat main.css's own .contact-prefixed rules */
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea,
.php-email-form input[type=text],
.php-email-form input[type=email],
.php-email-form textarea,
.contact input,
.contact textarea,
.form-control {
  font-family: var(--font-body);
  font-size: .96rem;
  padding: 13px 16px;
  min-height: 48px;
  color: var(--ink-800);
  background: var(--paper-2);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus,
.php-email-form input:focus,
.php-email-form textarea:focus,
.form-control:focus {
  background: var(--paper);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(76, 110, 245, .14);
  outline: none;
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder,
.php-email-form input::placeholder,
.php-email-form textarea::placeholder { color: var(--ink-300); }

.contact .php-email-form button[type=submit],
.php-email-form button[type=submit],
.contact button[type=submit] {
  min-height: 52px;
  padding: 15px 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -0.012em;
  box-shadow: var(--sh-brand);
  transition: transform var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.contact .php-email-form button[type=submit]:hover,
.php-email-form button[type=submit]:hover,
.contact button[type=submit]:hover {
  background: var(--brand-700);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -10px rgba(76, 110, 245, .5);
}

/* ==========================================================================
   13. SERVICE DETAILS
   ========================================================================== */

.service-details .services-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--space-3);
}

.service-details .services-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 16px;
  margin-bottom: 6px;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-600);
  transition: all var(--t-base) var(--ease-out);
}

.service-details .services-list a:hover {
  background: var(--brand-50);
  color: var(--brand-600);
}

.service-details .services-list a.active {
  background: var(--ink-900);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-md);
}

/**
 * The page's inline CSS hides every .service-content and only reveals the
 * one matching :target. Arriving without a hash (e.g. the "Read More" links
 * on the home page) therefore leaves the content column completely empty.
 * When nothing is targeted, show the pane whose nav link is already marked
 * .active in the markup. Reveals existing content only — adds nothing.
 */
body:not(:has(.service-content:target)) #Data-Analysis {
  display: block;
}

.service-details .services-img,
.service-details img {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.service-details h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin-bottom: var(--space-3);
}

.service-details ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.service-details ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-600);
}

.service-details ul i {
  color: var(--brand-500);
  margin-top: 4px;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

/* The footer is the one genuinely dark band on the site. It anchors the page,
   stops the layout reading as an endless white sheet, and matches the template's
   original .dark-background intent. The navy is the logo blue driven down to
   near-ink, so it belongs to the brand rather than being a neutral black slab.
   Every text colour below is remapped for contrast on this ground. */
.footer {
  background: linear-gradient(180deg, #131C33 0%, #0B1226 100%);
  color: #B9C4DC;
  position: relative;
  padding-top: var(--space-6);
  border-top: 0;
}

/* Local token override so nested template components inherit sane values. */
.footer.dark-background {
  --background-color: #0F1730;
  --default-color: #B9C4DC;
  --heading-color: #FFFFFF;
  --contrast-color: #FFFFFF;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-500), var(--coral-500), transparent);
  opacity: .5;
}

.footer .footer-about img { filter: none; opacity: 1; }

.footer .sitename {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.footer h4 {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8FA3C8;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--space-3);
}

.footer .footer-contact p { color: #B9C4DC; font-size: .93rem; line-height: 1.7; }
.footer .footer-contact strong { color: #FFFFFF; }

.footer .footer-links ul li { padding: 7px 0; display: flex; align-items: center; }
.footer .footer-links ul i { color: var(--brand-400); font-size: 12px; }

.footer .footer-links ul a {
  color: #B9C4DC;
  font-size: .93rem;
  transition: color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  display: inline-block;
}

.footer .footer-links ul a:hover {
  color: #FFFFFF;
  transform: translateX(3px);
}

.footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
  font-size: .88rem;
  color: #8FA3C8;
}

.footer .copyright .sitename { font-size: .88rem; color: #FFFFFF; }
.footer .credits { font-size: .85rem; color: #8FA3C8; }

/* ==========================================================================
   15. UTILITIES — scroll-top, preloader, progress bar, reveals
   ========================================================================== */

.scroll-top {
  width: 46px;
  height: 46px;
  right: 22px;
  bottom: 22px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--sh-lg);
  transition: transform var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out),
              visibility var(--t-base) var(--ease-out);
}

.scroll-top i { color: #fff; font-size: 26px; }
.scroll-top:hover { background: var(--brand-500); transform: translateY(-3px); }

/* Reading-progress bar injected by premium.js */
.pm-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--brand-500), var(--coral-500));
  z-index: 1000;
  pointer-events: none;
}

#preloader {
  background: var(--paper);
}

/* ==========================================================================
   15b. INTRO / WELCOME CURTAIN
   Injected by premium.js. Because it is JS-created, a visitor with JS
   disabled — and every crawler — simply gets the page with no curtain at all,
   so content is never gated behind the animation.
   ========================================================================== */

.pm-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: linear-gradient(170deg, #FFFFFF 0%, #F4F7FD 55%, #FFFFFF 100%);
  overflow: hidden;
  transition: opacity .6s var(--ease-out), visibility .6s var(--ease-out);
}

/**
 * Photo layer. Deliberately faint: the logo and slogan are the message, the
 * photograph is only atmosphere. Kept desaturated and low-opacity so the
 * wordmark never has to compete with facial detail or background clutter.
 */
.pm-intro-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(.55) contrast(.95);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease-out);
}

.pm-intro-bg.pm-intro-bg-in {
  opacity: .16;
  animation: pm-intro-kenburns 6s var(--ease-out) both;
}

/**
 * White wash sitting ABOVE the photo, not inside it — nesting this in
 * .pm-intro-bg would inherit that layer's 0.16 opacity and do nothing.
 */
.pm-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 56% at 50% 50%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .3) 58%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 38%, rgba(255, 255, 255, .65) 100%);
}

@keyframes pm-intro-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Soft brand bloom behind the mark */
.pm-intro::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 110, 245, .16) 0%, transparent 68%);
  filter: blur(70px);
  animation: pm-intro-bloom 2.2s var(--ease-out) both;
}

.pm-intro-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: var(--space-3);
  text-align: center;
}

.pm-intro-logo {
  width: clamp(150px, 34vw, 230px);
  height: auto;
  opacity: 0;
  transform: scale(.9);
  filter: blur(6px);
  animation: pm-intro-logo .9s var(--ease-out) .1s both;
}

.pm-intro-slogan {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .85rem + 1.1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-800);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .34em;
}

.pm-intro-slogan span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: pm-intro-word .6s var(--ease-out) both;
  animation-delay: var(--pm-w, 0ms);
}

/* "Data" carries the brand gradient */
.pm-intro-slogan span:last-child {
  background: linear-gradient(100deg, var(--brand-600), var(--coral-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pm-intro-rule {
  width: min(260px, 56vw);
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  overflow: hidden;
  opacity: 0;
  animation: pm-intro-fade .4s var(--ease-out) .9s both;
}

.pm-intro-rule::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), var(--coral-500));
  transform: scaleX(0);
  transform-origin: left;
  animation: pm-intro-load 1.05s var(--ease-out) .95s both;
}

/* Exit */
.pm-intro.pm-intro-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pm-intro.pm-intro-out .pm-intro-inner {
  transform: translateY(-10px) scale(.985);
  transition: transform .6s var(--ease-out);
}

/* Freeze the page behind the curtain, without a layout-shifting scrollbar jump */
html.pm-intro-lock,
body.pm-intro-lock {
  overflow: hidden;
}

@keyframes pm-intro-logo {
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes pm-intro-word {
  to { opacity: 1; transform: none; }
}

@keyframes pm-intro-fade {
  to { opacity: 1; }
}

@keyframes pm-intro-load {
  to { transform: scaleX(1); }
}

@keyframes pm-intro-bloom {
  from { opacity: 0; transform: scale(.85); }
  60%  { opacity: 1; }
  to   { opacity: .9; transform: scale(1); }
}

/* Anyone who asks for less motion gets the page immediately, no curtain. */
@media (prefers-reduced-motion: reduce) {
  .pm-intro { display: none; }
}

#preloader:before {
  border-color: var(--brand-500) transparent var(--brand-500) transparent;
}

/* Scroll reveal — element starts hidden, JS adds .pm-in */
.pm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ease-out),
              transform .62s var(--ease-out);
  transition-delay: var(--pm-delay, 0ms);
  will-change: opacity, transform;
}

.pm-reveal.pm-in {
  opacity: 1;
  transform: none;
}

/* AOS is disabled by premium.js; make sure nothing stays stuck invisible */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   16. ACCESSIBILITY — reduced motion
   ========================================================================== */

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

  .pm-reveal { opacity: 1; transform: none; }
  .pm-hero-bg .pm-orb { animation: none; }
  .pm-scroll-cue span::after { animation: none; }
}

/* ==========================================================================
   17. RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 991px) {
  .featured-services .service-item { padding: var(--space-4); }
  .page-title { padding: 128px 0 56px; }
}

@media (max-width: 575px) {
  body { font-size: 15.5px; }

  .hero .btn-get-started {
    width: 100%;
    margin-inline: 0;
    margin-bottom: 10px;
  }

  .hero p b { padding: 9px 16px; font-size: .88rem; }

  #features #contact.bg-light {
    border-radius: var(--r-lg);
    /* stays inside the Bootstrap container gutter — a negative margin here
       overshoots the padding and pushes the band past the viewport edge */
    margin-inline: 0;
  }

  #features #contact.bg-light .btn { width: 100%; margin-inline: 0 !important; }

  .scroll-top { right: 14px; bottom: 14px; }
}