/* =========================================================
   RankMeOnTop — Public Design System
   ---------------------------------------------------------
   Layered on top of Bootstrap 5. Bootstrap supplies the grid,
   modal, accordion and offcanvas primitives; everything visual
   below is ours.

   Contents
     01  Design tokens
     02  Base & typography
     03  Layout primitives
     04  Buttons
     05  Navbar
     06  Hero (aurora, SERP card)
     07  Marquee
     08  Statistics
     09  Services
     10  Why choose us
     11  Process
     12  Portfolio
     13  Testimonials
     14  FAQ
     15  Final CTA
     16  Footer
     17  Floating actions
     18  Forms
     19  Flash messages
     20  Page shells (about / legal / thank-you / error)
     21  Motion & reveal
     22  Responsive
     23  Reduced motion & print
   ========================================================= */

/* =========================================================
   01  DESIGN TOKENS
   ========================================================= */
:root {
  /* ---- Brand ----------------------------------------- */
  /* Primary and secondary are the client's brand colours; the
     remaining shades are generated around them to give the
     palette enough range for states, depth and accents.      */
  --brand-700: #1E3FA8;
  --brand-600: #2A55D8;
  --brand-500: #3D6FFF; /* PRIMARY */
  --brand-400: #5F87FF;
  --brand-300: #8FAAFF;

  --sky-500: #3FC2FF;
  --sky-400: #70D3FF;   /* SECONDARY */
  --sky-300: #A2E4FF;

  --violet-500: #7C5CFF; /* Accent — depth in gradients      */
  --emerald-500: #2DD4A7;/* Accent — results, growth, success */
  --amber-500: #FFB84D;  /* Accent — ratings                  */
  --rose-500: #FF6B81;   /* Accent — errors                   */

  /* ---- Surfaces -------------------------------------- */
  --bg: #060917;
  --bg-elev: #0A0F26;
  --bg-deep: #04060F;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --glass: rgba(10, 15, 38, 0.66);
  --line: rgba(140, 160, 220, 0.16);
  --line-strong: rgba(140, 160, 220, 0.32);

  /* ---- Ink ------------------------------------------- */
  --ink: #EEF2FF;
  --muted: #9AA7D4;
  --dim: #61709F;

  /* ---- Typography ------------------------------------ */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Fluid type scale — clamp() removes the need for font-size
     media queries and keeps headings readable at every width. */
  --fs-display: clamp(2.6rem, 7.2vw, 5.6rem);
  --fs-h1: clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.75rem, 3.8vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.9vw, 1.45rem);
  --fs-lead: clamp(1rem, 1.4vw, 1.15rem);

  /* ---- Gradients ------------------------------------- */
  --grad-brand: linear-gradient(100deg, var(--brand-500) 0%, var(--sky-400) 58%, var(--violet-500) 100%);
  --grad-brand-soft: linear-gradient(140deg, rgba(61, 111, 255, 0.14), rgba(112, 211, 255, 0.05));
  --grad-text: linear-gradient(96deg, var(--brand-400) 5%, var(--sky-400) 55%, var(--violet-500) 100%);

  /* ---- Effects --------------------------------------- */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.28);
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --glow-brand: 0 0 42px rgba(61, 111, 255, 0.45);
  --glow-sky: 0 0 42px rgba(112, 211, 255, 0.35);

  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --dur: 0.42s;

  /* ---- Bootstrap overrides --------------------------- */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-primary: var(--brand-500);
  --bs-link-color: var(--sky-400);
  --bs-link-hover-color: var(--sky-300);
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--ink);
}

/* =========================================================
   02  BASE & TYPOGRAPHY
   ========================================================= */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keeps anchored sections clear of the sticky navbar. */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Guards against any wide child (marquee, aurora) creating a
     horizontal scrollbar on the whole document. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--sky-400);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}
a:hover { color: var(--sky-300); }

img { max-width: 100%; height: auto; display: block; }

/* Visible, on-brand focus ring. Never remove this: keyboard users
   rely on it entirely to know where they are on the page. */
:focus-visible {
  outline: 2px solid var(--sky-400);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Screen-reader-only text that stays available to assistive tech. */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Skip link — first tab stop, lets keyboard users bypass the nav. */
.skip-link {
  position: fixed;
  top: -80px; left: 16px;
  z-index: 2000;
  padding: 0.7rem 1.2rem;
  background: var(--brand-500);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

::selection { background: rgba(61, 111, 255, 0.42); color: #fff; }

/* Slim, on-brand scrollbar (WebKit only; harmless elsewhere). */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand-600), var(--brand-500));
  border-radius: 99px;
  border: 3px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-400); }

/* =========================================================
   03  LAYOUT PRIMITIVES
   ========================================================= */
.container,
.container-lg { max-width: 1220px; }

.section {
  position: relative;
  padding: clamp(64px, 9vw, 118px) 0;
}
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

/* Hairline divider between sections, faded at both ends. */
.section-line {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-strong), transparent) 1;
}

/* ---- Section heading kit ---------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-400);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--brand-500), var(--sky-400));
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::after {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--sky-400), var(--brand-500));
}

.section-title { margin-bottom: 1rem; }

.section-sub {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 62ch;
}
.section-head-center { text-align: center; }
.section-head-center .section-sub { margin-inline: auto; }

/* ---- Text effects ----------------------------------- */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Descenders (g, y) get clipped without a little breathing room. */
  padding-bottom: 0.08em;
}

/* Outlined "ghost" type — a deliberate echo of the reference's
   stacked hero, rebuilt in our own palette and rhythm. */
.text-ghost {
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(154, 167, 212, 0.62);
}

.text-muted-soft { color: var(--muted) !important; }
.text-dim { color: var(--dim) !important; }

/* ---- Surfaces --------------------------------------- */
.glass-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Glassmorphism: the blur is what sells the depth against the
     aurora behind it. */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Reusable chip/pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.chip i { color: var(--sky-400); }
.chip-accent {
  border-color: rgba(45, 212, 167, 0.36);
  background: rgba(45, 212, 167, 0.1);
  color: var(--emerald-500);
}
.chip-accent i { color: var(--emerald-500); }

/* =========================================================
   04  BUTTONS
   ========================================================= */
.btn {
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(61, 111, 255, 0.28);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.005em;
  border-radius: var(--radius-pill);
  padding: 0.82rem 1.7rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-position var(--dur) var(--ease), border-color 0.25s, color 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

/* Primary — the gradient shifts on hover rather than swapping
   colour, which reads as motion without a layout change. */
.btn-brand {
  background: var(--grad-brand);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: 0 10px 30px rgba(61, 111, 255, 0.36);
}
.btn-brand:hover,
.btn-brand:focus {
  color: #fff;
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(61, 111, 255, 0.5);
}
.btn-brand:active { transform: translateY(0); }

/* Secondary — outlined glass */
.btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover,
.btn-ghost:focus {
  color: #fff;
  border-color: var(--brand-400);
  background: rgba(61, 111, 255, 0.14);
  transform: translateY(-2px);
  box-shadow: var(--glow-brand);
}

/* Tertiary — text + arrow */
.btn-link-arrow {
  padding: 0;
  color: var(--sky-400);
  font-weight: 600;
  background: none;
  border: 0;
  border-radius: 0;
}
.btn-link-arrow i { transition: transform 0.3s var(--ease); }
.btn-link-arrow:hover { color: var(--sky-300); }
.btn-link-arrow:hover i { transform: translateX(5px); }

.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.86rem; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* =========================================================
   05  NAVBAR
   ========================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(6, 9, 23, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
/* .is-scrolled is toggled by JS past ~24px so the bar only gains
   weight once it actually overlaps content. */
.site-nav.is-scrolled {
  background: rgba(6, 9, 23, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* The logo is a neon line-mark; a matching glow keeps it from
     looking flat against the dark bar. */
  filter: drop-shadow(0 0 10px rgba(61, 111, 255, 0.6));
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand-mark { transform: scale(1.07) rotate(-4deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-tagline {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sky-400);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links > li { position: relative; }
.nav-link-item {
  position: relative;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.4rem 0;
  transition: color 0.22s var(--ease);
}
.nav-link-item::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.34s var(--ease);
}
.nav-link-item:hover,
.nav-link-item.active { color: var(--ink); }
.nav-link-item:hover::after,
.nav-link-item.active::after { transform: scaleX(1); transform-origin: left; }

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  cursor: pointer;
  width: 44px;  /* 44px is the minimum comfortable touch target. */
  height: 44px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   06  HERO
   ========================================================= */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Aurora backdrop -------------------------------- */
/* Fixed, pointer-events:none, behind everything. Three blurred
   radial blobs drifting on long, offset cycles read as organic
   rather than looping. */
.aurora {
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(36% 40% at 20% 24%, rgba(61, 111, 255, 0.34), transparent 68%),
    radial-gradient(32% 36% at 80% 16%, rgba(124, 92, 255, 0.22), transparent 68%),
    radial-gradient(38% 42% at 66% 76%, rgba(112, 211, 255, 0.17), transparent 68%),
    radial-gradient(30% 34% at 14% 82%, rgba(61, 111, 255, 0.16), transparent 68%);
  animation: aurora-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurora-drift {
  0%   { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(6deg) scale(1.14); }
}

/* Faint grid overlay — adds the "engineered" texture that
   separates a technical agency from a generic gradient site.
   Masked to fade out toward the bottom. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(140, 160, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 160, 220, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 20%, transparent 78%);
}

/* Cursor spotlight — only enabled by JS on fine pointers. */
.spotlight {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    380px 380px at var(--mx, 50%) var(--my, 24%),
    rgba(61, 111, 255, 0.13),
    transparent 68%
  );
  transition: background 0.14s linear;
}

/* ---- Hero layout ------------------------------------ */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-headline {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -0.035em;
  margin-bottom: 1.6rem;
}
.hero-headline .line { display: block; }

.hero-sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  max-width: 52ch;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ---- SERP rank card --------------------------------- */
/* The signature hero element: a mock search result climbing from
   #7 to #1. It states the value proposition visually in the two
   seconds before anyone reads a word of copy. */
.rank-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(12, 18, 46, 0.9), rgba(8, 12, 30, 0.86));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Gradient hairline border via a masked pseudo-element — richer
   than a flat 1px border and impossible with border alone. */
.rank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(61, 111, 255, 0.6), transparent 42%, rgba(112, 211, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.rank-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.rank-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.rank-card-title i { color: var(--sky-400); }

.rank-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--emerald-500);
  text-transform: uppercase;
}
.rank-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 0 rgba(45, 212, 167, 0.7);
  animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(45, 212, 167, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(45, 212, 167, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 167, 0); }
}

.rank-rows { display: grid; gap: 0.45rem; }

.rank-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.62rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              transform 0.5s var(--ease);
}
.rank-row .rank-pos {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dim);
  text-align: center;
}
.rank-row .rank-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(154, 167, 212, 0.16);
}
.rank-row .rank-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--dim);
  letter-spacing: 0.08em;
}

/* The client's row. .is-top is applied by JS at the end of the climb. */
.rank-row.is-you {
  background: rgba(61, 111, 255, 0.1);
  border-color: rgba(61, 111, 255, 0.34);
}
.rank-row.is-you .rank-pos { color: var(--sky-400); font-weight: 700; }
.rank-row.is-you .rank-bar { background: var(--grad-brand); }
.rank-row.is-you .rank-tag { color: var(--sky-400); }

.rank-row.is-top {
  background: rgba(45, 212, 167, 0.12);
  border-color: rgba(45, 212, 167, 0.42);
  box-shadow: 0 0 30px rgba(45, 212, 167, 0.18);
  transform: scale(1.03);
}
.rank-row.is-top .rank-pos { color: var(--emerald-500); }
.rank-row.is-top .rank-bar { background: linear-gradient(90deg, var(--emerald-500), var(--sky-400)); }
.rank-row.is-top .rank-tag { color: var(--emerald-500); }

.rank-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.rank-metric { display: flex; flex-direction: column; gap: 0.1rem; }
.rank-metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--emerald-500);
}
.rank-metric-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Floating badge on the rank card */
.rank-badge {
  position: absolute;
  top: -14px; right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--grad-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(61, 111, 255, 0.5);
  animation: float-y 4.5s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* =========================================================
   07  MARQUEE
   ========================================================= */
.marquee {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(4, 6, 15, 0.55);
  /* Fade the ends so items enter and leave instead of popping. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-item i { color: var(--brand-400); font-size: 0.7rem; }
/* The track holds two identical copies; translating exactly -50%
   lands copy 2 where copy 1 started, so the loop is seamless. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   08  STATISTICS
   ========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.stat-card {
  position: relative;
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--grad-brand-soft);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.stat-card::after {
  /* Sheen that sweeps across on hover. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(112, 211, 255, 0.09), transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.75s var(--ease);
}
.stat-card:hover {
  transform: translateY(-7px);
  border-color: rgba(61, 111, 255, 0.5);
  box-shadow: 0 22px 50px rgba(61, 111, 255, 0.18);
}
.stat-card:hover::after { transform: translateX(100%); }

.stat-icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(61, 111, 255, 0.14);
  border: 1px solid rgba(61, 111, 255, 0.3);
  color: var(--sky-400);
  margin-bottom: 1rem;
  font-size: 1rem;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  background: linear-gradient(96deg, var(--brand-400), var(--sky-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Reserve height so the count-up doesn't reflow the card. */
  min-height: 1em;
}
.stat-label {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

/* =========================================================
   09  SERVICES
   ========================================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.15rem;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  width: 100%;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Radial glow that follows the pointer. --gx/--gy are written by
   JS on mousemove; the default keeps it centred. */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    340px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(61, 111, 255, 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(61, 111, 255, 0.5);
  background: rgba(12, 18, 46, 0.7);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(61, 111, 255, 0.12);
}
.service-card:hover::before,
.service-card:focus-visible::before { opacity: 1; }

.service-icon {
  position: relative;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.2rem;
  color: var(--sky-400);
  background: linear-gradient(150deg, rgba(61, 111, 255, 0.2), rgba(112, 211, 255, 0.07));
  border: 1px solid rgba(61, 111, 255, 0.28);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.service-card:hover .service-icon {
  transform: scale(1.08) rotate(-6deg);
  color: #fff;
  box-shadow: var(--glow-brand);
}

.service-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.service-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.62;
  margin: 0;
  flex: 1;
}

.service-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sky-400);
  margin-top: 0.2rem;
}
.service-more i { transition: transform 0.3s var(--ease); font-size: 0.7rem; }
.service-card:hover .service-more i { transform: translate(4px, -4px); }

.service-featured-flag {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--emerald-500);
  border: 1px solid rgba(45, 212, 167, 0.35);
  background: rgba(45, 212, 167, 0.1);
  padding: 0.18rem 0.5rem;
  border-radius: 99px;
}

/* ---- Service modal ---------------------------------- */
/* One modal reused for all 17 services, populated by JS from the
   clicked card's data-* attributes — 17 modals in the DOM would be
   a needless page-weight cost. */
.modal-content.service-modal {
  background: linear-gradient(160deg, #0B1029, #070A1B);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.service-modal .modal-header,
.service-modal .modal-footer { border-color: var(--line); }
.service-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: 0.65;
}
.service-modal .btn-close:hover { opacity: 1; }
.service-modal-icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 1.35rem;
  color: var(--sky-400);
  background: linear-gradient(150deg, rgba(61, 111, 255, 0.22), rgba(112, 211, 255, 0.08));
  border: 1px solid rgba(61, 111, 255, 0.3);
  flex: 0 0 auto;
}
.service-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.service-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.service-feature-list i {
  color: var(--emerald-500);
  margin-top: 0.32rem;
  font-size: 0.78rem;
  flex: 0 0 auto;
}

/* =========================================================
   10  WHY CHOOSE US
   ========================================================= */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* Sticky headline: the reasons scroll past a fixed argument,
   which keeps the claim on screen while the evidence moves. */
.why-sticky { position: sticky; top: 112px; }

.why-list { display: grid; gap: 0.7rem; }

.why-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.42);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.why-item:hover {
  transform: translateX(8px);
  border-color: rgba(61, 111, 255, 0.45);
  background: rgba(61, 111, 255, 0.07);
}
.why-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brand-400);
  border: 1px solid rgba(61, 111, 255, 0.3);
  background: rgba(61, 111, 255, 0.1);
  border-radius: 9px;
  padding: 0.3rem 0.55rem;
  line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.why-item:hover .why-num { background: var(--brand-500); color: #fff; }
.why-item-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}
.why-item-desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.62;
}

/* =========================================================
   11  PROCESS
   ========================================================= */
.process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
}
/* Connector line behind the nodes. Insetting by 10% keeps it from
   protruding past the first and last node centres. */
.process-track::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(61, 111, 255, 0.12),
    var(--brand-500) 22%,
    var(--sky-400) 62%,
    var(--violet-500));
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0.4rem;
}
.process-node {
  width: 56px; height: 56px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sky-400);
  background: var(--bg-elev);
  border: 2px solid rgba(61, 111, 255, 0.4);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.process-step:hover .process-node {
  transform: translateY(-6px) scale(1.08);
  border-color: var(--sky-400);
  color: #fff;
  box-shadow: var(--glow-sky);
}
/* The final step is the payoff — it gets a permanent glow. */
.process-step.is-final .process-node {
  border-color: var(--emerald-500);
  color: var(--emerald-500);
  box-shadow: 0 0 30px rgba(45, 212, 167, 0.32);
}
.process-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.process-desc {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   12  PORTFOLIO
   ========================================================= */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.3rem;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.5);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(61, 111, 255, 0.5);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
}

.project-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(140deg, var(--brand-700), var(--brand-500) 45%, var(--violet-500));
}
.project-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.project-card:hover .project-media img { transform: scale(1.07); }

/* Placeholder shown when no image is uploaded: a branded
   monogram beats a broken-image icon or a grey box. */
.project-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(140deg, var(--brand-600), var(--violet-500));
}
.project-media-fallback i {
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.5);
}
.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 9, 23, 0.86));
}

.project-category {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.66rem;
  border-radius: 99px;
  background: rgba(6, 9, 23, 0.8);
  border: 1px solid var(--line-strong);
  color: var(--sky-400);
  backdrop-filter: blur(8px);
}

.project-result {
  position: absolute;
  bottom: 0.9rem; left: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.36rem 0.8rem;
  border-radius: 99px;
  background: rgba(45, 212, 167, 0.16);
  border: 1px solid rgba(45, 212, 167, 0.42);
  color: var(--emerald-500);
  backdrop-filter: blur(8px);
}

.project-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.project-client {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.project-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.35; }
.project-summary { color: var(--muted); font-size: 0.88rem; margin: 0; flex: 1; }

/* =========================================================
   13  TESTIMONIALS
   ========================================================= */
.testimonial-swiper { padding: 0.5rem 0.25rem 3.5rem; }

.testimonial-card {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 92, 255, 0.45);
}
/* Oversized decorative quote glyph. */
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem; right: 1.2rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(61, 111, 255, 0.14);
  pointer-events: none;
}

.testimonial-stars { display: flex; gap: 0.2rem; color: var(--amber-500); font-size: 0.82rem; }

.testimonial-quote {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.testimonial-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  flex: 0 0 auto;
}
.testimonial-monogram {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--grad-brand);
  flex: 0 0 auto;
}
.testimonial-name { font-weight: 700; font-size: 0.92rem; line-height: 1.3; }
.testimonial-role { color: var(--dim); font-size: 0.78rem; font-family: var(--font-mono); }

/* Swiper chrome */
.swiper-pagination-bullet {
  background: var(--dim);
  opacity: 0.45;
  transition: width 0.3s var(--ease), opacity 0.3s var(--ease);
}
.swiper-pagination-bullet-active {
  background: var(--sky-400);
  opacity: 1;
  width: 26px;
  border-radius: 99px;
}
.swiper-button-next,
.swiper-button-prev {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(10px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 1rem; font-weight: 700; }

/* =========================================================
   14  FAQ
   ========================================================= */
.faq-wrap { max-width: 860px; margin-inline: auto; }

.accordion-item.faq-item {
  background: rgba(10, 15, 38, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.accordion-item.faq-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(61, 111, 255, 0.45);
}

.faq-item .accordion-button {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 1.25rem 1.4rem;
  box-shadow: none;
  gap: 1rem;
}
.faq-item .accordion-button:not(.collapsed) {
  background: rgba(61, 111, 255, 0.07);
  color: var(--sky-400);
  box-shadow: none;
}
.faq-item .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(61, 111, 255, 0.28);
}
/* Replace Bootstrap's chevron bitmap with a themed one. */
.faq-item .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2370D3FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: transform 0.32s var(--ease);
}
.faq-item .accordion-body {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.75;
  padding: 0 1.4rem 1.4rem;
}

/* =========================================================
   15  FINAL CTA
   ========================================================= */
.cta-panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(61, 111, 255, 0.17), rgba(124, 92, 255, 0.09) 55%, rgba(112, 211, 255, 0.07));
  border: 1px solid rgba(61, 111, 255, 0.3);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
/* Slow rotating conic sheen behind the panel content. */
.cta-panel::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(61, 111, 255, 0.14) 60deg,
    transparent 140deg,
    rgba(112, 211, 255, 0.12) 220deg,
    transparent 320deg);
  animation: cta-spin 22s linear infinite;
}
@keyframes cta-spin { to { transform: rotate(360deg); } }

.cta-title {
  font-size: clamp(1.8rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.cta-sub {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 62ch;
  margin: 0 auto 2rem;
}
.cta-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cta-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* =========================================================
   16  FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(4, 6, 15, 0.6), var(--bg-deep));
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 3rem;
}

.footer-about p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 1.1rem 0 1.3rem;
  max-width: 40ch;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.2rem;
}

.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.footer-list a,
.footer-list li {
  color: var(--muted);
  font-size: 0.89rem;
  transition: color 0.22s var(--ease), transform 0.22s var(--ease);
}
.footer-list a { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-list a:hover { color: var(--sky-400); transform: translateX(4px); }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.89rem;
}
.footer-contact i {
  color: var(--brand-400);
  margin-top: 0.35rem;
  width: 14px;
  flex: 0 0 auto;
}
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--sky-400); }

.social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.92rem;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.social-btn:hover {
  transform: translateY(-3px);
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 8px 22px rgba(61, 111, 255, 0.4);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--dim);
}
.footer-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-legal a { color: var(--dim); }
.footer-legal a:hover { color: var(--sky-400); }

/* Build credit — deliberately quiet so it sits below the client's own
   copyright and legal links in the hierarchy. */
.footer-credit { color: var(--dim); }
.footer-credit a {
  color: var(--muted);
  font-weight: 600;
  transition: color 0.22s var(--ease);
}
.footer-credit a:hover {
  color: var(--sky-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   17  FLOATING ACTIONS
   ========================================================= */
/* Two clusters pinned to opposite bottom corners. They deliberately share
   the same `bottom` value and the same button size, so the WhatsApp button
   and the scroll-to-top arrow sit level with each other across the viewport.
   Keep these offsets in sync if either is ever changed. */
.float-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

/* Left corner — scroll to top. */
.float-stack-left {
  position: fixed;
  left: 20px;
  bottom: 20px;   /* Must match .float-stack to stay parallel. */
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.float-btn {
  position: relative;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              opacity 0.3s var(--ease), visibility 0.3s;
}
.float-btn:hover { transform: scale(1.1) translateY(-2px); }

/* WhatsApp — official brand green; recognisability is the point. */
.float-whatsapp {
  background: linear-gradient(150deg, #25D366, #128C7E);
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45);
}
.float-whatsapp:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, 0.6); }
/* Expanding ring to draw the eye without being obnoxious. */
.float-whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: ring-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes ring-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  100% { transform: scale(1.65); opacity: 0; }
}

.float-top {
  background: var(--grad-brand);
  box-shadow: 0 8px 26px rgba(61, 111, 255, 0.45);
  /* Hidden until JS says the visitor has scrolled past 70%. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  pointer-events: none;
}
.float-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hover label */
.float-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 0.42rem 0.8rem;
  border-radius: 9px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.float-btn:hover .float-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* The left-corner button's label has to open to its right, or it would
   slide off the edge of the screen. */
.float-stack-left .float-label {
  right: auto;
  left: calc(100% + 12px);
  transform: translateY(-50%) translateX(-8px);
}
.float-stack-left .float-btn:hover .float-label {
  transform: translateY(-50%) translateX(0);
}

/* =========================================================
   18  FORMS
   ========================================================= */
.form-panel {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
  letter-spacing: 0.01em;
}
.form-label .req { color: var(--rose-500); margin-left: 0.15rem; }

.form-control,
.form-select {
  background: rgba(6, 9, 23, 0.65);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 0.82rem 1rem;
  font-size: 0.94rem;
  font-family: var(--font-body);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease);
}
.form-control::placeholder { color: var(--dim); }
.form-control:focus,
.form-select:focus {
  background: rgba(6, 9, 23, 0.9);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(61, 111, 255, 0.18);
  color: var(--ink);
  outline: none;
}
/* Native select options render with the OS palette; force ours. */
.form-select option { background: var(--bg-elev); color: var(--ink); }

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 4px rgba(255, 107, 129, 0.14);
  background-image: none; /* Drop Bootstrap's icon; the border says enough. */
}
.invalid-feedback {
  display: block;
  color: var(--rose-500);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}
.form-text { color: var(--dim); font-size: 0.78rem; }

.form-check-input {
  background-color: rgba(6, 9, 23, 0.8);
  border-color: var(--line-strong);
  width: 1.1em; height: 1.1em;
  margin-top: 0.22em;
}
.form-check-input:checked {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(61, 111, 255, 0.28); }
.form-check-label { color: var(--muted); font-size: 0.88rem; }

/* Honeypot — visually gone but still submitted by bots. Kept out of
   the tab order and hidden from screen readers so it never confuses
   a real user. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* Contact info cards */
.contact-info-card {
  display: flex;
  gap: 1rem;
  padding: 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.45);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 111, 255, 0.42);
}
.contact-info-icon {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--sky-400);
  background: rgba(61, 111, 255, 0.14);
  border: 1px solid rgba(61, 111, 255, 0.28);
}
.contact-info-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.2rem;
}
.contact-info-value { font-size: 0.94rem; font-weight: 600; color: var(--ink); word-break: break-word; }
.contact-info-value a { color: var(--ink); }
.contact-info-value a:hover { color: var(--sky-400); }

/* =========================================================
   19  FLASH MESSAGES
   ========================================================= */
.flash-stack {
  position: fixed;
  top: 92px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(400px, calc(100vw - 40px));
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(10, 15, 38, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  font-size: 0.89rem;
  color: var(--ink);
  animation: flash-in 0.42s var(--ease);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}
.flash.is-leaving { opacity: 0; transform: translateX(30px); transition: all 0.35s var(--ease); }

.flash-icon { flex: 0 0 auto; margin-top: 0.15rem; }
.flash-body { flex: 1; }
.flash-close {
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.15rem;
  transition: color 0.2s;
}
.flash-close:hover { color: var(--ink); }

.flash-success { border-left: 3px solid var(--emerald-500); }
.flash-success .flash-icon { color: var(--emerald-500); }
.flash-danger, .flash-error { border-left: 3px solid var(--rose-500); }
.flash-danger .flash-icon, .flash-error .flash-icon { color: var(--rose-500); }
.flash-warning { border-left: 3px solid var(--amber-500); }
.flash-warning .flash-icon { color: var(--amber-500); }
.flash-info { border-left: 3px solid var(--sky-400); }
.flash-info .flash-icon { color: var(--sky-400); }

/* =========================================================
   20  PAGE SHELLS
   ========================================================= */
.page-hero {
  position: relative;
  padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 48px);
  text-align: center;
}
.page-hero .page-title {
  font-size: var(--fs-h1);
  margin-bottom: 0.8rem;
}
.page-hero .page-sub {
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 68ch;
  margin-inline: auto;
}

.breadcrumb-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 1.4rem;
}
.breadcrumb-bar a { color: var(--dim); }
.breadcrumb-bar a:hover { color: var(--sky-400); }
.breadcrumb-bar .sep { color: var(--line-strong); }

/* ---- About ------------------------------------------ */
.value-card {
  height: 100%;
  padding: 1.7rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.45);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(61, 111, 255, 0.45);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4);
}
.value-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.1rem;
  color: var(--sky-400);
  background: linear-gradient(150deg, rgba(61, 111, 255, 0.2), rgba(112, 211, 255, 0.06));
  border: 1px solid rgba(61, 111, 255, 0.28);
  margin-bottom: 1.1rem;
}

.mv-card {
  height: 100%;
  padding: 2rem 1.8rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--grad-brand-soft);
  position: relative;
  overflow: hidden;
}
.mv-card .mv-glyph {
  position: absolute;
  bottom: -18px; right: -8px;
  font-size: 6rem;
  color: rgba(61, 111, 255, 0.08);
  pointer-events: none;
}

.team-card {
  height: 100%;
  padding: 1.8rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.45);
  text-align: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.team-card:hover { transform: translateY(-6px); border-color: rgba(124, 92, 255, 0.45); }
.team-avatar {
  width: 76px; height: 76px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 10px 30px rgba(61, 111, 255, 0.35);
}
.team-name { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.2rem; }
.team-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sky-400);
  letter-spacing: 0.06em;
  margin-bottom: 0.8rem;
}
.team-bio { color: var(--muted); font-size: 0.86rem; margin: 0; }

/* Achievements timeline */
.timeline { position: relative; padding-left: 2.4rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-500), var(--sky-400), transparent);
}
.timeline-item { position: relative; padding-bottom: 2.2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.4rem; top: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--brand-500);
  box-shadow: 0 0 0 4px rgba(61, 111, 255, 0.12);
}
.timeline-item:last-child::before {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(45, 212, 167, 0.15);
}
.timeline-year {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--sky-400);
  margin-bottom: 0.3rem;
}
.timeline-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.4rem; }
.timeline-desc { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---- Legal pages ------------------------------------ */
.legal-body {
  max-width: 860px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.85;
}
.legal-body h2 {
  font-size: 1.35rem;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; color: var(--ink); margin: 1.6rem 0 0.6rem; }
.legal-body ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.legal-body li { margin-bottom: 0.5rem; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--dim);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  margin-bottom: 2rem;
}

/* ---- Thank you / error ------------------------------ */
.centered-shell {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 0;
}
.big-glyph {
  width: 96px; height: 96px;
  margin: 0 auto 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 2.4rem;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 18px 50px rgba(61, 111, 255, 0.45);
}
.big-glyph.is-success {
  background: linear-gradient(150deg, var(--emerald-500), #14B8A6);
  box-shadow: 0 18px 50px rgba(45, 212, 167, 0.42);
}
.error-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 9rem);
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}

.next-steps {
  display: grid;
  gap: 0.8rem;
  max-width: 520px;
  margin: 2.4rem auto 0;
  text-align: left;
}
.next-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(10, 15, 38, 0.45);
}
.next-step-num {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-500);
}
.next-step span { color: var(--muted); font-size: 0.9rem; }

/* =========================================================
   21  MOTION & REVEAL
   ========================================================= */
/* Fallback reveal for elements not driven by AOS. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* AOS respects its own duration/easing; these just align it
   with the rest of the system. */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* =========================================================
   22  RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer-services-col { display: none; } /* Least useful column first. */
}

@media (max-width: 991.98px) {
  /* ---- Mobile navigation ---- */
  .nav-toggle { display: block; }

  /* Slide-down panel. max-height animates; height:auto cannot. */
  .nav-menu {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 1029;
    background: rgba(4, 6, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s var(--ease);
  }
  .nav-menu.is-open { max-height: 460px; overflow-y: auto; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1.2rem;
  }
  .nav-links > li { border-top: 1px solid var(--line); }
  .nav-link-item {
    display: block;
    padding: 1rem 1.4rem;
    font-size: 1rem;
  }
  .nav-link-item::after { display: none; }
  .nav-link-item.active { color: var(--sky-400); background: rgba(61, 111, 255, 0.07); }
  .nav-menu .nav-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.4rem 0;
  }
  .nav-menu .nav-actions .btn { width: 100%; }
  .nav-actions-desktop { display: none; }

  /* ---- Hero ---- */
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { max-width: 520px; margin-inline: auto; width: 100%; }

  /* ---- Why ---- */
  .why-grid { grid-template-columns: 1fr; }
  .why-sticky { position: static; }

  /* ---- Process: horizontal rail becomes a vertical list ---- */
  .process-track { grid-template-columns: 1fr; gap: 0; }
  .process-track::before {
    top: 10px; bottom: 10px;
    left: 27px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--brand-500), var(--sky-400), var(--violet-500));
  }
  .process-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.2rem;
    text-align: left;
    padding: 0 0 2rem;
  }
  .process-node { margin: 0; }

  /* ---- Footer ---- */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  html { scroll-padding-top: 84px; }
  .section { padding: 56px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-card { padding: 1.4rem 1.1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-services-col { display: block; }
  .footer-bottom-inner { justify-content: center; text-align: center; }

  .flash-stack {
    top: auto;
    bottom: 90px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  /* Both corners drop to the same tighter offset so they stay level. */
  .float-stack { right: 14px; bottom: 14px; }
  .float-stack-left { left: 14px; bottom: 14px; }
  .float-btn { width: 50px; height: 50px; font-size: 1.2rem; }
  /* Touch devices have no hover, so the label would never show. */
  .float-label { display: none; }

  .timeline { padding-left: 2rem; }
  .timeline-item::before { left: -2rem; width: 16px; height: 16px; }
}

@media (max-width: 575.98px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .rank-card { padding: 1.15rem; }
  .rank-card-foot { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* =========================================================
   23  REDUCED MOTION & PRINT
   ========================================================= */
/* Honour the OS-level preference. Vestibular disorders make large
   parallax and drift genuinely unpleasant — this is accessibility,
   not a nice-to-have. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .aurora,
  .marquee-track,
  .cta-panel::before,
  .rank-badge,
  .rank-live-dot,
  .float-whatsapp::after { animation: none !important; }
  .spotlight { display: none; }
}

@media print {
  .site-nav, .float-stack, .flash-stack, .marquee,
  .aurora, .grid-overlay, .spotlight, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
  .text-gradient { -webkit-text-fill-color: #000; color: #000; }
  a { color: #000; text-decoration: underline; }
}