/* ============================================================
   Uniflo palette applied to the Aigocy template (override layer)
   Maps Aigocy's brand tokens -> Uniflo Mobile UI Kit v1.0.
   Brand: #FD3A25 (red)  ->  #8c5cff -> #5b8dff (violet→blue gradient)
   To revert: delete this file and its <link> in the HTML pages.
   ============================================================ */

:root {
  /* Brand: Aigocy red -> Uniflo violet (gradient stop A) */
  --brand: #8c5cff !important;
  --brand-deep: #6e43dd;
  --brand-darker: #4f2bb8;
  --uf-blue: #5b8dff;
  --uf-violet-soft: #efe8ff;
  --uf-gradient: linear-gradient(135deg, #8c5cff 0%, #5b8dff 100%);
  --uf-gradient-160: linear-gradient(160deg, #8c5cff 0%, #5b8dff 100%);

  /* Ink scale -> Uniflo ink */
  --primary: #11131a;
  --secondary: #5b6172;
  --dark: #11131a;
  --main: #8c5cff;

  /* Neutral ramp -> Uniflo paper / ink */
  --neutral-50: #fdfdfd;
  --neutral-100: #f7f8fc;
  --neutral-200: #eef0f6;
  --neutral-300: #d8dbe7;
  --neutral-400: #c6cad6;
  --neutral-500: #98a0b3;
  --neutral-600: #5b6172;
  --neutral-700: #374957;
  --neutral-800: #2a2c33;
  --neutral-900: #11131a;
  --neutral-950: #0b0d12;

  /* Page background -> Uniflo pastel */
  --body: #f1f0fa;

  /* helper vars referenced across the sheet */
  --line: rgba(17, 19, 26, 0.08);
  --line-2: rgba(17, 19, 26, 0.08);
  --white-16: rgba(255, 255, 255, 0.16);
  --primary-rgb: 17, 19, 26;
  --brand-rgb: 140, 92, 255;
}

/* Pastel wallpaper behind everything */
body {
  background-color: #f1f0fa;
}

/* Hero backdrop: swap the photo for the Uniflo pastel wallpaper + soft brand blobs */
.section-hero .hero-image {
  background-image:
    radial-gradient(42% 52% at 84% 10%, rgba(140, 92, 255, 0.28) 0%, rgba(140, 92, 255, 0) 70%),
    radial-gradient(46% 56% at 10% 92%, rgba(91, 141, 255, 0.24) 0%, rgba(91, 141, 255, 0) 70%),
    linear-gradient(180deg, #f1f0fa 0%, #ebe7f8 100%) !important;
  background-attachment: scroll !important;
}

/* Primary (.tf-btn, dark) and secondary (.tf-btn-2, light) buttons:
   left exactly as the template defaults. */

/* Tertiary button (.tf-btn-3) -> the Uniflo brand-gradient "colored" style.
   Self-contained like .tf-btn / .tf-btn-2 — add the class to any <a>/<button>. */
.tf-btn-3 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  border: 0;
  border-radius: 99px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  cursor: pointer;
  background:
    radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, #8c5cff 0%, #5b8dff 100%);
  box-shadow:
    0px 18px 32px 0px rgba(140, 92, 255, 0.30),
    0px 1px 0px 0px rgba(255, 255, 255, 0.40) inset;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.tf-btn-3:hover {
  transform: translateY(-1px);
  box-shadow:
    0px 22px 40px 0px rgba(140, 92, 255, 0.42),
    0px 1px 0px 0px rgba(255, 255, 255, 0.50) inset;
}
.tf-btn-3:active {
  transform: translateY(0);
  box-shadow: 0px 8px 16px 0px rgba(140, 92, 255, 0.28);
}

/* Big hero pill blob behind "on Demand" -> brand gradient */
.section-hero .content-wrap .title-icon .box {
  background: linear-gradient(160deg, #8c5cff 0%, #5b8dff 100%) !important;
  box-shadow:
    0px 22px 44px 0px rgba(140, 92, 255, 0.45),
    0px 8px 18px 0px rgba(91, 141, 255, 0.25) !important;
}

/* Process-card icon tile (was red) -> brand gradient */
.process-card .icon {
  background: linear-gradient(160deg, #8c5cff 0%, #5b8dff 100%) !important;
  box-shadow: 0px 18px 32px 0px rgba(140, 92, 255, 0.30) !important;
}

/* Pricing billing toggle (ON state only) -> violet gradient + violet glow */
.tf-switch-check:checked {
  background: linear-gradient(180deg, #8c5cff 0%, #5b8dff 100%) !important;
  box-shadow: 0px 8px 18px 0px rgba(140, 92, 255, 0.35) !important;
}

/* "Features" highlight tile (208x160, was red) -> brand gradient */
.features-center {
  background:
    linear-gradient(180deg, #8c5cff 0%, #5b8dff 100%),
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: 0px 22px 44px 0px rgba(140, 92, 255, 0.30) !important;
}

/* Animated progress-bar fill glow -> violet */
.progressbar-line .progressbar-inner {
  box-shadow: 0px 2px 12px 0px rgba(140, 92, 255, 0.55) !important;
}

/* About-us eyebrow pulse dot -> violet */
.section-about-us .col-left .sub .dot::before {
  background-color: rgba(140, 92, 255, 0.25) !important;
}

/* --- Uniflo hero tuning ---------------------------------------------------
   Uniflo headlines are far wordier than Aigocy's short punchy ones, so cap the
   hero display size and guarantee spacing below the title so the lede never
   overlaps the headline. Applies to every Uniflo marketing hero. */
.section-hero .title {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem) !important;
  line-height: 1.07 !important;
}
.section-hero .content-wrap .text,
.section-hero .text {
  margin-top: 1.75rem !important;
}

/* --- Logo sizing -----------------------------------------------------------
   On the live platform the header/footer logo src is swapped for the tenant's
   configured branding logo (which can be a large ~250x200 PNG). The Aigocy
   header doesn't constrain the logo <img>, so constrain it here to fit the bar
   and never overlap the nav. */
.tf-header .logo-site img {
  height: 38px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}
.footer-content .footer-logo img {
  height: 40px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
}

/* --- Case-study + works fixes ---------------------------------------------
   1) featured-works card covers have no intrinsic height outside the Aigocy
      carousel, so in grid context (case-studies hub) they render at the image's
      natural (huge) size. Constrain to a card thumbnail aspect.
   2) .section-work-single uses a large negative margin-top to overlap Aigocy's
      TALL hero; the Uniflo .v1 hero is short, so it pulled content up over the
      hero text. Reset it so the editorial content flows below the hero. */
.featured-works-item .image {
  aspect-ratio: 4 / 3;
}
.section-work-single {
  margin-top: 0 !important;
}

/* featured-works cards on the case-studies hub stack full-width, so a 4:3 aspect
   is still ~950px tall. Cap to a banner height instead (img object-fit:cover). */
.featured-works-item .image {
  aspect-ratio: auto !important;
  height: 320px !important;
}

/* ============================================================
   Uniflo homepage fidelity upgrade
   Hero featured-illustration figure, Cohesion-Loop pictograms,
   section illustrations, and the hero scroll cue.
   Appended 2026-06-02.
   ============================================================ */

/* The hero becomes a positioning context for the scroll cue */
.section-hero.v1 { position: relative; }

/* --- Hero featured-illustration figure (Team Rowing centerpiece) --- */
.uf-hero-figure {
  position: relative;
  width: min(560px, 86%);
  margin: 40px auto 84px;
}
.uf-hero-figure::before {                 /* soft brand glow behind the card */
  content: "";
  position: absolute;
  inset: -44px -34px -22px;
  background: radial-gradient(60% 68% at 50% 42%,
    rgba(140, 92, 255, 0.40) 0%,
    rgba(91, 141, 255, 0.14) 56%,
    rgba(91, 141, 255, 0) 74%);
  filter: blur(6px);
  z-index: 0;
}
.uf-hero-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px;
  box-shadow:
    0px 34px 76px rgba(91, 60, 160, 0.22),
    0px 10px 24px rgba(17, 19, 26, 0.08);
}
.uf-hero-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.uf-hero-tile {
  position: absolute;
  z-index: 3;
  width: 86px;
  height: 86px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0px 18px 36px rgba(17, 19, 26, 0.16),
    0px 3px 8px rgba(17, 19, 26, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.uf-hero-tile img { width: 52px; height: 52px; object-fit: contain; }
.uf-hero-tile.t1 { left: -28px;  top: 46px;  rotate: -8deg; animation: uf-float 4.2s ease-in-out infinite; }
.uf-hero-tile.t2 { right: -28px; top: 172px; rotate:  8deg; animation: uf-float 4.8s ease-in-out infinite 0.5s; }
@keyframes uf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* --- Hero scroll cue (sits at the foot of the hero) --- */
.uf-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 24px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 40px 40px 0 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--neutral-900);
  text-decoration: none;
  box-shadow: 0 -2px 18px rgba(91, 60, 160, 0.10);
  z-index: 4;
}
.uf-scroll-cue:hover { color: var(--brand); }
.uf-scroll-cue__mouse {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1.5px solid var(--neutral-300);
  border-radius: 99px;
  flex: none;
}
.uf-scroll-cue__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 99px;
  background: var(--brand);
  animation: uf-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes uf-scroll-dot {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(11px); }
}

/* --- Cohesion-Loop pictograms: light violet tile (not the dark gradient) --- */
.process-card .icon.uf-pic {
  background: var(--uf-violet-soft) !important;   /* #efe8ff */
  box-shadow: inset 0 0 0 1px rgba(140, 92, 255, 0.14) !important;
  border-radius: 22px;
}
.process-card .icon.uf-pic img { width: 46px; height: 46px; object-fit: contain; }

/* --- Reusable section illustration frame (Benefits etc.) --- */
.uf-section-figure {
  position: relative;
  width: min(460px, 80%);
  margin: 0 auto 56px;
}
.uf-section-figure::before {
  content: "";
  position: absolute;
  inset: -30px -24px -16px;
  background: radial-gradient(58% 66% at 50% 44%,
    rgba(140, 92, 255, 0.26) 0%,
    rgba(91, 141, 255, 0.10) 58%,
    rgba(91, 141, 255, 0) 74%);
  filter: blur(6px);
  z-index: 0;
}

/* --- Final-CTA floating pictograms: keep them subtle/decorative --- */
.section-tools img[class*="img-grow-"] { opacity: 0.92; }

/* --- Responsive: shrink the hero furniture on phones --- */
@media (max-width: 767px) {
  .uf-hero-figure { width: 90%; margin-top: 28px; margin-bottom: 76px; }
  .uf-hero-tile { width: 62px; height: 62px; border-radius: 16px; }
  .uf-hero-tile img { width: 36px; height: 36px; }
  .uf-hero-tile.t1 { left: -12px; top: 28px; }
  .uf-hero-tile.t2 { right: -12px; top: 116px; }
  .uf-scroll-cue { font-size: 12px; padding: 10px 18px; }
}

/* ============================================================
   Homepage layout fixes (verified live 2026-06-02)
   ============================================================ */

/* Pricing cards — Uniflo prices ("R129 / user/month") and CTA labels
   ("Start from R69") are far wider than the Aigocy originals, so the
   side-by-side heading row overflowed the 4-across card and clipped the
   button past the card edge. Stack the price over a full-width button. */
.pricing-item .heading {
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
}
.pricing-item .heading > .d-flex {
  flex-wrap: wrap;
  align-items: baseline;
}
.pricing-item .heading .price-number {
  font-size: clamp(2.25rem, 2.6vw, 3rem) !important;   /* was a fixed 72px */
  line-height: 1.04 !important;
}
.pricing-item .heading .tf-btn {
  width: 100%;
  justify-content: center;
}

/* About / ROI / Cohesion-check headings — Aigocy pulls the content up under
   the heading (margin-bottom:-17px), which collides with Uniflo's taller
   two-line headings. Give the content room to clear the heading. */
.section-about-us .heading-section {
  margin-bottom: 32px !important;
}

/* Pricing card body — Aigocy split the description and benefits into a 50/50
   two-column row, which is far too cramped in a 4-across card. Stack them:
   description on top, full-width benefits list underneath. */
.pricing-item .content {
  flex-direction: column;
}
.pricing-item .content > * {
  width: 100%;
}

/* ------------------------------------------------------------
   Pricing — 4-card target (added 2026-06-02)
   ------------------------------------------------------------ */

/* "Most popular" pill on the highlighted (Business Standard) dark card.
   The base .pricing-item has no positioning context, so anchor it here. */
.pricing-item.is-popular {
  position: relative;
}
.pricing-item.is-popular .popular-label {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  background:
    radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, #8c5cff 0%, #5b8dff 100%);
  box-shadow: 0px 6px 16px 0px rgba(140, 92, 255, 0.35),
              0px 1px 0px 0px rgba(255, 255, 255, 0.40) inset;
}

/* Hollow radio-dot bullets (Business Standard) — same grid/layout as the
   check list, but the icon reads as an outline ring instead of a soft
   circle with a tick. Tuned to stay crisp on the dark .style-black bg. */
.list-text.type-dot {
  display: grid;
  gap: 8px;
}
.list-text.type-dot li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.list-text.type-dot li .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 99px;
  background: transparent;
  border: 2px solid currentColor;
  box-sizing: border-box;
}
/* On the dark card give the ring a touch more presence + an inner dot. */
.pricing-item.style-black .list-text.type-dot li {
  color: var(--white);
}
.pricing-item.style-black .list-text.type-dot li .icon {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
  position: relative;
}
.pricing-item.style-black .list-text.type-dot li .icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
}