/* ════════════════════════════════════════════════════════════════
   Theme additions (loaded after app.css)
   1. Pink added to the brand palette
   2. Light colour shades on every card
   Delete this file (and its <link> in includes/layout-top.php) to
   return to the original look.
   ════════════════════════════════════════════════════════════════ */

:root {
  --color-pink: #EC4899;
  --color-pink-dark: #DB2777;
  --color-pink-light: #F9A8D4;
  --color-pink-50: #FDF2F8;
  --color-pink-100: #FCE7F3;
  --color-indigo-50: #F3F4FF;
  --card-tint-a: #F4F5FF;   /* light indigo */
  --card-tint-b: #FDF2F8;   /* light pink   */
  --card-tint-c: #EEFBFE;   /* light cyan   */
}

/* pink utilities for future use */
.text-pink { color: var(--color-pink); }
.bg-pink { background-color: var(--color-pink); }
.bg-pink-50 { background-color: var(--color-pink-50); }
.border-pink { border-color: var(--color-pink); }

/* ── Brand gradient now runs indigo → cyan → pink ── */
.gradient-brand {
  background: linear-gradient(135deg, #3B47EE 0%, #03B2D7 55%, #EC4899 100%);
}
.gradient-brand-text {
  background: linear-gradient(135deg, #3B47EE 0%, #03B2D7 50%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* soft pink glow in dark hero sections */
.gradient-hero-bg[class~="relative"]::before {
  content: "";
  position: absolute;
  right: -8%;
  top: 8%;
  width: 520px;
  height: 520px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.20) 0%, rgba(236, 72, 153, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* ── Light shades on every card ──
   A "card" = rounded-xl/2xl/3xl block with a white or gray-50 background
   (inputs, buttons and gradient blocks excluded). The tint sits in
   background-image so the original background colour is still underneath. */
:is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"]):is([class~="bg-gray-50"], [class~="bg-white"], [class~="bg-gray-100"]):not(input, select, textarea, button, [class*="gradient"], [class*="backdrop-blur"]) {
  background-image: linear-gradient(145deg, var(--card-tint-a) 0%, #FFFFFF 48%, var(--card-tint-b) 100%);
}
/* alternate the tint so grids feel lively, not uniform */
:is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"]):is([class~="bg-gray-50"], [class~="bg-white"]):not(input, select, textarea, button, [class*="gradient"]):nth-child(3n+2) {
  background-image: linear-gradient(145deg, var(--card-tint-b) 0%, #FFFFFF 48%, var(--card-tint-c) 100%);
}
:is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"]):is([class~="bg-gray-50"], [class~="bg-white"]):not(input, select, textarea, button, [class*="gradient"]):nth-child(3n) {
  background-image: linear-gradient(145deg, var(--card-tint-c) 0%, #FFFFFF 48%, var(--card-tint-a) 100%);
}

/* dark mode: same idea, kept subtle */
.dark :is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"]):is([class*="dark:bg-dark-card"], [class*="dark:bg-dark-bg"]):not(input, select, textarea, button, [class*="gradient"], [class*="backdrop-blur"]) {
  background-image: linear-gradient(145deg, rgba(59, 71, 238, 0.10) 0%, rgba(18, 18, 26, 0) 55%, rgba(236, 72, 153, 0.08) 100%);
}

/* pink touch on card hover */
:is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"]):is([class~="bg-gray-50"], [class~="bg-white"]):not(input, select, textarea, button):hover {
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 14px 34px -14px rgba(236, 72, 153, 0.30);
}

/* text selection + keyboard focus use the new accent */
::selection { background: rgba(236, 72, 153, 0.25); }

/* ── Marquee strip directly below the home hero ── */
.hero-marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  background: linear-gradient(90deg, #3B47EE 0%, #03B2D7 55%, #EC4899 100%);
  color: #fff;
}
.hero-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}
.hero-marquee:hover .hero-marquee__track { animation-play-state: paused; }
.hero-marquee__group { display: flex; flex-shrink: 0; align-items: center; }
.hero-marquee__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-poppins), Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 28px;
  background: rgba(255, 255, 255, 0.85);
  transform: rotate(45deg);
  border-radius: 1px;
}
@media (max-width: 640px) {
  .hero-marquee { padding: 11px 0; }
  .hero-marquee__item { font-size: 11px; }
  .hero-marquee__item::after { margin: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee__track { animation-duration: 120s; }
}

/* ── "Trusted by" logo marquee: every logo is shown at the same height ── */
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 70s linear infinite;
}
.logo-marquee__track:hover { animation-play-state: paused; }
.logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 0 26px;
  margin-right: 14px;            /* margin (not gap) keeps the -50% loop seamless */
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.dark .logo-marquee__item { border-color: rgba(255, 255, 255, 0.14); }
.logo-marquee__item img {
  display: block;
  height: 60px;                  /* the one height every logo shares */
  width: auto;
  max-width: none;
}
@media (max-width: 640px) {
  .logo-marquee__item { height: 76px; padding: 0 20px; margin-right: 12px; }
  .logo-marquee__item img { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .logo-marquee__track { animation-duration: 160s; } }

/* ── Google rating badge (testimonials) ── */
.g-badge {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 10px 22px 10px 16px;
  background: #fff; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 9999px;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.10);
  text-align: left; text-decoration: none; color: inherit;
}
a.g-badge:hover { box-shadow: 0 8px 22px -8px rgba(236, 72, 153, 0.35); border-color: rgba(236, 72, 153, 0.35); }
.dark .g-badge { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.g-badge__logo { display: flex; flex: none; width: 30px; height: 30px; }
.g-badge__logo svg { width: 30px; height: 30px; }
.g-badge__body { display: flex; flex-direction: column; gap: 2px; }
.g-badge__row { display: flex; align-items: center; gap: 10px; }
.g-badge__score { font-family: var(--font-poppins), Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1; color: #111827; }
.dark .g-badge__score { color: #fff; }
.g-badge__label { font-size: 12px; color: #6B7280; }
.dark .g-badge__label { color: #9CA3AF; }
.g-stars { position: relative; display: inline-block; line-height: 0; }
.g-stars__row { display: flex; gap: 2px; }
.g-stars__row svg { width: 17px; height: 17px; flex: none; stroke: none; }
.g-stars__row--base svg { fill: #D1D5DB; }
.dark .g-stars__row--base svg { fill: #4B5563; }
.g-stars__row--fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.g-stars__row--fill svg { fill: #FBBC05; }

/* ── Technology Stack: a different light shade behind each category ──
   Each block (.ts-cat) gets its own tint; tiles inside turn white so they stand out. */
.ts-cat {
  --ts-bg: #EEF2FF; --ts-line: #C7D2FE; --ts-dk: 99, 102, 241;
  background: var(--ts-bg);
  border: 1px solid var(--ts-line);
  border-radius: 1.5rem;
  padding: 1.5rem;
}
.ts-cat + .ts-cat { margin-top: 2rem !important; }
.ts-cat--frontend { --ts-bg: #EEF2FF; --ts-line: #C7D2FE; --ts-dk: 99, 102, 241; }   /* indigo  */
.ts-cat--backend  { --ts-bg: #ECFEFF; --ts-line: #A5F3FC; --ts-dk: 6, 182, 212; }    /* cyan    */
.ts-cat--database { --ts-bg: #ECFDF5; --ts-line: #A7F3D0; --ts-dk: 16, 185, 129; }   /* emerald */
.ts-cat--bi       { --ts-bg: #FFFBEB; --ts-line: #FDE68A; --ts-dk: 245, 158, 11; }   /* amber   */
.ts-cat--mobile   { --ts-bg: #FDF2F8; --ts-line: #FBCFE8; --ts-dk: 236, 72, 153; }   /* pink    */
.ts-cat--cloud    { --ts-bg: #F0F9FF; --ts-line: #BAE6FD; --ts-dk: 14, 165, 233; }   /* sky     */
.ts-cat--ai       { --ts-bg: #F5F3FF; --ts-line: #DDD6FE; --ts-dk: 139, 92, 246; }   /* violet  */

.ts-cat .group { background-color: #FFFFFF !important; background-image: none !important; border-color: rgba(0, 0, 0, 0.06); }
.ts-cat .group:hover { border-color: rgba(var(--ts-dk), 0.45); }

.dark .ts-cat { background: rgba(var(--ts-dk), 0.08); border-color: rgba(var(--ts-dk), 0.28); }
.dark .ts-cat .group { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.10); }
@media (max-width: 640px) { .ts-cat { padding: 1rem; border-radius: 1.25rem; } }

/* ── Technology Stack: light page background instead of white (light mode only) ── */
html:not(.dark) .ts-page { background: #F6F7FF; }
html:not(.dark) .ts-page > section.bg-white {
  background: linear-gradient(180deg, #F3F5FF 0%, #F8F4FF 45%, #F2F9FF 100%);   /* indigo → violet → sky */
}
html:not(.dark) .ts-page > section.bg-gray-50 {
  background: linear-gradient(135deg, #FDF2F8 0%, #F5F3FF 100%);                /* pink → violet */
}