/* ===========================================================
   Bizniaga Technologies — Home Page Stylesheet
   Only sections unique to index.html live here. Shared chrome
   (header, mega menu, footer, buttons) is in css/base.css.
   =========================================================== */

/* ---------------- Hero slider (full screen + one-time entry animation) ---------------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: var(--slide-bg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transform: scale(1.04);
  transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 6s cubic-bezier(0,0,.2,1);
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  transform: scale(1);
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px);
  opacity: 0.6;
}
.hero-slide::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 60%;
  height: 90%;
  z-index: 2;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.12), transparent 60%);
}

/* Replaceable background media — swap the <img src> (or use a <video>,
   see the HTML comment on each slide) with the real photo/footage. If
   no media file is present, the slide's --slide-bg gradient shows through. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media-img,
.hero-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Entry zoom/fade for the first slide's media — part of the intro
   sequence (see "Intro sequence" below and initIntro in script/home.js) */
.intro-pending .hero-slide.is-active .hero-media-img { opacity: 0; transform: scale(1.18); }
.intro-play .hero-slide.is-active .hero-media-img {
  animation: heroMediaIn 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes heroMediaIn {
  from { opacity: 0; transform: scale(1.18); }
  to { opacity: 1; transform: scale(1); }
}

/* Dark gradient over the media so text stays legible regardless of
   what image or video is dropped in */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,12,36,0.5) 0%, rgba(10,12,36,0.55) 55%, rgba(10,12,36,0.92) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  padding-bottom: 40px;
  width: 100%;
}

/* ---- Intro sequence (first visit) + per-slide text animation ----
   Intro timeline, 1s total, while scrolling is briefly held:
     nav bar drops in + slide tabs rise one by one → background zooms
     out → headline, tagline and description fade up word by word →
     button.
   script/home.js splits each slide's text into .hero-word spans, sets
   each one's --d delay (timings in INTRO), and adds .text-in to a slide
   every time it becomes active, so every slide gets the same word-by-word
   entrance. Before the intro starts, .intro-pending (set by the small
   script in <head>) keeps the first slide's text hidden. */
.hero-word { display: inline-block; }

.intro-pending:not(.intro-play) .hero-slide.is-active .hero-word,
.intro-pending:not(.intro-play) .hero-slide.is-active .btn {
  opacity: 0;
}
.hero-slide.text-in .hero-word,
.hero-slide.text-in .btn {
  animation: heroRiseIn 0.4s cubic-bezier(.22,.9,.32,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes heroRiseIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Nav bar drops in from the top of the screen */
.intro-pending .site-header-wrap { transform: translateY(-130%); }
.intro-play .site-header-wrap {
  animation: navDropIn 0.6s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--nav-d, 0s);
}
@keyframes navDropIn {
  from { transform: translateY(-130%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.text-in .hero-word,
  .hero-slide.text-in .btn { animation: none; }
  .intro-pending:not(.intro-play) .hero-slide.is-active .hero-word,
  .intro-pending:not(.intro-play) .hero-slide.is-active .btn,
  .intro-pending .hero-slide.is-active .hero-media-img,
  .intro-pending .site-header-wrap,
  .intro-pending .hero-tab { opacity: 1; transform: none; filter: none; animation: none; }
}

.hero-eyebrow {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 0 10px;
}
.hero h1 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.15;
  margin: 0 0 6px;
  font-weight: 300;
}
.hero h1 strong {
  display: block;
  font-weight: 700;
}
.hero-tagline {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  margin: 14px 0 10px;
  letter-spacing: 0.5px;
}
.hero-desc {
  color: rgba(255,255,255,0.72);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 0 22px;
}

/* Slide tabs (also acts as the manual slider control) */
.hero-tabs {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding-left: 24px;
}
.hero-tab {
  position: relative;
  background: rgba(10, 12, 36, 0.35);
  color: rgba(255,255,255,0.75);
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 26px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease;
  flex: 0 0 auto;
  white-space: nowrap;
}
.intro-pending .hero-tab { opacity: 0; transform: translateY(16px); }
.intro-play .hero-tab {
  animation: heroTabIn 0.45s cubic-bezier(.22,.9,.32,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes heroTabIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .hero-tabs { padding-left: 16px; }
  .hero-tab { padding: 12px 16px; font-size: 12.5px; }
}
.hero-tab:hover { color: #fff; }
.hero-tab.is-active {
  background: #fff;
  color: var(--navy);
}
.hero-tab.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(228,32,48,0.14), transparent);
  animation: tabSweep 0.6s ease;
}
@keyframes tabSweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
.hero-tab-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
  width: 0%;
}
.hero-tab.is-active .hero-tab-progress { transition: width 15s linear; }

/* ---------------- Reusable: section scaffolding + scroll-reveal ---------------- */
.section { padding: 64px 0; overflow-x: clip; }
.section-mist { background: var(--mist); }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--purple-start);
  margin: 0 0 8px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--navy);
}

/* Scroll-in "pop" animation — items inside a [data-pop-group] appear one
   after another when the group scrolls into view (see initPopIn in
   script/home.js). Uses a keyframe animation with backwards fill only, so
   once it has played, hover effects (e.g. the Why Choose Us card lift)
   work normally. */
.pop { opacity: 0; }
.pop.pop-in {
  opacity: 1;
  animation: popIn 0.7s cubic-bezier(.22,.9,.32,1) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.pop-left.pop-in  { animation-name: popInLeft; }
.pop-right.pop-in { animation-name: popInRight; }
@keyframes popInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}
@keyframes popInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pop { opacity: 1; }
  .pop.pop-in { animation: none; }
}

/* ---------------- Why Choose Us — bento grid of image tiles ----------------
   Layout (desktop):  [ feature (tall) ][ wide ............ ]
                      [ feature (tall) ][ small ][ small    ]
   Feature + wide tiles always show their description; small tiles show
   the title only and reveal the description on hover (desktop), keyboard
   focus, or tap (touch, via .is-open from script/home.js).
   Desktop extras: mouse-follow glow + subtle 3D tilt (shared .tilt, initTilt). */
.why-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.why-card--feature { grid-column: 1; grid-row: 1 / span 2; }
.why-card--wide    { grid-column: 2 / span 2; grid-row: 1; }

.why-card {
  position: relative;
  min-height: 240px;
  border-radius: 20px;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  /* Fallback colour shows until the real photo is in place */
  background: linear-gradient(150deg, var(--purple-start), var(--navy));
  -webkit-tap-highlight-color: transparent;
}
.why-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
}
/* Always-on bottom gradient so the title stays legible on any photo */
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgba(10,12,36,0.82) 100%);
}
/* Full dark layer that fades in when a small tile's description is shown */
.why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10,12,36,0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.why-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 22px;
  color: #fff;
}
.why-card-body h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}
.why-card--feature .why-card-body { padding: 30px; }
.why-card--feature .why-card-body h4 { font-size: clamp(24px, 2.4vw, 32px); }
.why-card--wide .why-card-body { padding: 26px; }
.why-card--wide .why-card-body h4 { font-size: clamp(20px, 2vw, 26px); }

/* Small chevron hinting that there's more to see (small tiles only) */
.why-card-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  position: relative;
  transition: transform 0.4s ease, background 0.4s ease;
}
.why-card-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 7px;
  height: 7px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.why-card--feature .why-card-toggle,
.why-card--wide .why-card-toggle { display: none; }

/* Description: collapsed on small tiles, slides up when opened */
.why-card-desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(.4,0,.2,1);
}
.why-card-desc p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.4,0,.2,1), padding 0.45s ease;
}
/* Feature + wide tiles: description always visible */
.why-card--feature .why-card-desc,
.why-card--wide .why-card-desc { grid-template-rows: 1fr; }
.why-card--feature .why-card-desc p,
.why-card--wide .why-card-desc p { opacity: 1; transform: none; padding-top: 10px; }
.why-card--feature .why-card-desc p { font-size: 15.5px; }

/* Open state for small tiles — shared by keyboard focus and tap */
.why-card.is-open::after,
.why-card:focus-visible::after { opacity: 1; }
.why-card.is-open .why-card-desc,
.why-card:focus-visible .why-card-desc { grid-template-rows: 1fr; }
.why-card.is-open .why-card-desc p,
.why-card:focus-visible .why-card-desc p { opacity: 1; transform: none; padding-top: 10px; }
.why-card.is-open .why-card-toggle,
.why-card:focus-visible .why-card-toggle { transform: rotate(180deg); background: rgba(255,255,255,0.15); }
.why-card.is-open .why-card-img { transform: scale(1.06); }

/* Hover only on devices that really hover, so taps don't get "stuck" */
@media (hover: hover) {
  .why-card:hover .why-card-img { transform: scale(1.06); }
  .why-card:not(.why-card--feature):not(.why-card--wide):hover::after { opacity: 1; }
  .why-card:hover .why-card-desc { grid-template-rows: 1fr; }
  .why-card:hover .why-card-desc p { opacity: 1; transform: none; padding-top: 10px; }
  .why-card:hover .why-card-toggle { transform: rotate(180deg); background: rgba(255,255,255,0.15); }
}

/* Tablet: feature + wide tiles full width, small tiles side by side */
@media (max-width: 860px) {
  .why-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(220px, auto);
  }
  .why-card--feature { grid-column: 1 / span 2; grid-row: auto; min-height: 320px; }
  .why-card--wide    { grid-column: 1 / span 2; grid-row: auto; }
}
/* Phone: single column */
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; gap: 14px; }
  .why-card--feature,
  .why-card--wide { grid-column: auto; }
  .why-card--feature { min-height: 300px; }
}

/* ---------------- Shared 3D hover tilt + mouse-follow glow ----------------
   Any element with class "tilt" (Why Choose Us tiles, Services/Products
   visuals) lifts, tilts toward the cursor and shows a soft glow on hover.
   script/home.js (initTilt) animates the tilt and adds the glow; the CSS
   variables below are the fallback when that script isn't running. */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.45s cubic-bezier(.22,.9,.32,1), box-shadow 0.35s ease;
}
/* When script/home.js drives the tilt (.tilt-js), it animates the transform
   itself every frame, so CSS only animates the shadow */
.tilt.tilt-js { transition: box-shadow 0.35s ease; will-change: transform; }
.tilt.tilt-js:hover { --lift: 0px; }
/* Glow: a fixed-size soft light moved with transform (cheap to animate) */
.tilt-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 720px;
  height: 720px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 50%);
  transform: translate3d(-360px, -360px, 0);
  will-change: transform;
  transition: opacity 0.35s ease;
}
@media (hover: hover) {
  .tilt:hover { --lift: -6px; box-shadow: 0 22px 44px rgba(18,22,58,0.22); }
  .tilt:hover .tilt-glow { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
}

/* ---------------- bg-home: textured background layer wrapping the About summary ---------------- */
.bg-home {
  position: relative;
  overflow: hidden;
  background: #fbfaf7;
}
/* Placeholder texture standing in for a real assets/home/bg-home.jpg
   (or SVG/pattern) — soft color washes + a fine dot grid. Swap this
   block out for a real background image/pattern whenever ready. */
.bg-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(18,22,58,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
}
.bg-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(480px 320px at 8% 10%, rgba(75, 63, 176, 0.10), transparent 60%),
    radial-gradient(520px 360px at 95% 30%, rgba(228, 32, 48, 0.06), transparent 60%),
    radial-gradient(420px 300px at 50% 100%, rgba(75, 63, 176, 0.08), transparent 60%);
}
.bg-home > * {
  position: relative;
  z-index: 1;
}

/* ---------------- About (brief summary) ---------------- */
.about {
  background: transparent;
  padding: 44px 0 48px;
}

.about-head-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.about-mark-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
}
.about-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--purple-start);
  margin: 0 0 2px;
  letter-spacing: 0.2px;
}
.about-heading {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: var(--navy);
  line-height: 1.15;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 22px;
}
@media (min-width: 900px) {
  .about-layout { grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.1fr); }
}

.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.about-copy p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
  max-width: 460px;
  margin: 0;
}
/* Larger, darker lead line so the summary reads as a statement */
.about-copy .about-lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  margin-bottom: 16px;
}

/* Highlighter sweep: a soft band grows left-to-right behind each
   keyword once its .about-slide gets .hl-on (set by script/home.js
   when the section scrolls into view and every time a page appears). Each keyword starts a little after the previous one. */
.hl {
  color: inherit;
  background-color: transparent; /* override the browser's default yellow <mark> */
  padding: 0 2px;
  margin: 0 -2px;
  background-image: linear-gradient(100deg, rgba(228,32,48,0.22), rgba(75,63,176,0.28));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 42%;
  transition: background-size 0.8s cubic-bezier(.65,0,.35,1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl-on .hl { background-size: 100% 42%; }
.hl-on .hl:nth-of-type(1) { transition-delay: 0.15s; }
.hl-on .hl:nth-of-type(2) { transition-delay: 0.65s; }
.hl-on .hl:nth-of-type(3) { transition-delay: 1.15s; }
.hl-on .hl:nth-of-type(n+4) { transition-delay: 1.65s; }

/* ---- About text slider: pages stack in one grid cell so the block
   keeps the height of the tallest page (no layout jump on change) ---- */
.about-slides {
  display: grid;
  touch-action: pan-y; /* horizontal swipes change page, vertical still scrolls */
}
.about-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(.22,.9,.32,1),
              transform 0.6s cubic-bezier(.22,.9,.32,1),
              visibility 0s linear 0.6s;
}
.about-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.15s, 0.15s, 0s; /* let the old page clear first */
}
.about-slide.is-leaving { transform: translateY(-18px); }

/* Dots — the active one stretches into a pill that fills up over the
   auto-advance interval (duration set by --about-interval from JS) */
.about-dots {
  display: flex;
  gap: 8px;
  margin-top: 26px;
}
.about-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(18,22,58,0.18);
  overflow: hidden;
  transition: width 0.4s cubic-bezier(.4,0,.2,1), background 0.3s ease;
}
.about-dot::after { /* hit area larger than the visible dot */
  content: "";
  position: absolute;
  inset: -10px -4px;
}
.about-dot:hover { background: rgba(18,22,58,0.32); }
.about-dot.is-active { width: 34px; background: rgba(75,63,176,0.2); }
.about-dot-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--purple-start));
}
.about-dot.is-active .about-dot-fill {
  animation: aboutDotFill var(--about-interval, 8s) linear forwards;
}
.about-copy.is-paused .about-dot-fill,
.about-copy.is-idle .about-dot-fill { animation-play-state: paused; }
@keyframes aboutDotFill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .about-slide { transform: none !important; }
}

/* Rotating photo stack (scalable — see script/home.js) */
.about-photo-stack {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-width: 420px;
  margin: 0 auto;
}
.stack-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(18, 22, 58, 0.06);
  box-shadow: 0 20px 44px rgba(18, 22, 58, 0.22);
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  background: var(--mist);
}

@media (max-width: 640px) {
  .about-photo-stack { height: 280px; min-height: 0; margin-top: 8px; }
}

/* ---------------- Section backgrounds (Services / Products) ----------------
   Placeholder palettes for now. To use a real image later, set
   --section-bg-image on the section's class, e.g.
     .bg-services { --section-bg-image: url('../assets/home/bg-services.jpg'); }
   The base colour shows while the image loads; the wash sits on top
   as a soft tint (set --section-bg-wash: none to remove it). */
.section-bg {
  position: relative;
  background-color: var(--section-bg-color, var(--mist));
  background-image: var(--section-bg-image, none);
  background-size: cover;
  background-position: center;
}
.section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--section-bg-wash, none);
  pointer-events: none;
}
.section-bg > * { position: relative; z-index: 1; }

/* Services: cool lavender wash (placeholder) */
.bg-services {
  --section-bg-color: #f3f1fb;
  --section-bg-wash:
    radial-gradient(560px 380px at 0% 0%, rgba(75, 63, 176, 0.14), transparent 65%),
    radial-gradient(480px 340px at 100% 100%, rgba(28, 37, 80, 0.08), transparent 60%);
}

/* Products: warm rose wash (placeholder) */
.bg-products {
  --section-bg-color: #fbf3f3;
  --section-bg-wash:
    radial-gradient(560px 380px at 100% 0%, rgba(228, 32, 48, 0.10), transparent 65%),
    radial-gradient(480px 340px at 0% 100%, rgba(110, 20, 20, 0.06), transparent 60%);
}

/* ---------------- Services / Products: plain text + visual, no cards
   (full interactive detail lives on services.html / products.html) ---------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
/* Desktop: image column narrower than the text column so the copy
   fills its space instead of floating in empty room */
@media (min-width: 820px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 80px);
  }
  .feature .visual { justify-self: start; }          /* Services: hug the left edge */
  .feature.reverse .visual { order: 2; justify-self: end; } /* Products: hug the right edge */
  .feature.reverse .copy { order: 1; }
}
/* Visual = rounded frame (tilts on hover, see .tilt) holding the image */
.visual {
  display: block;
  width: 100%;
  max-width: 480px; /* image size cap — raise/lower to resize both visuals */
  aspect-ratio: 3 / 2; /* matches the 1536 × 1024 artwork, so nothing is cropped */
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
  .visual:hover .visual-img { transform: scale(1.05); }
}
.visual.services-visual { background: linear-gradient(135deg, #4b3fb0, #1c2550); }
.visual.products-visual { background: linear-gradient(135deg, #e42030, #6e1414); }

.feature .section-title {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.15;
  margin-bottom: 18px;
}
.feature .eyebrow { font-size: 14px; }
.feature .copy p {
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.75;
  margin: 0 0 32px;
  max-width: 560px;
}
.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--purple-start);
  color: var(--purple-start);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--purple-start);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.btn-outline:hover { color: #fff; }
.btn-outline:hover::before { transform: scaleX(1); }

/* ---------------- Trusted-by carousel ---------------- */
.trusted {
  position: relative;
  background: linear-gradient(100deg, var(--purple-start), var(--purple-end));
  padding: 46px 0;
  overflow: hidden;
}
.trusted-label {
  color: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 22px;
}

.trusted-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* Horizontal drags page the carousel; vertical swipes still scroll the page */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.trusted-carousel.is-dragging { cursor: grabbing; }
.trusted-carousel.is-dragging .trusted-track { transition: none; }
.trusted-logo { -webkit-user-drag: none; pointer-events: none; }
.trusted-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.trusted-page {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 2px;
}
.trusted-logo {
  height: 58px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 8px 16px;
  box-sizing: content-box;
}

/* Hover zones span the FULL section edges (not the cards/container),
   so hovering the purple margin on either side darkens it and pages
   the carousel — the cards themselves are never covered. */
.trusted-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(70px, calc((100% - 1200px) / 2 + 90px));
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.4s ease;
  z-index: 4;
}
.trusted-arrow:hover { opacity: 1; }
.trusted-arrow-left {
  left: 0;
  background: linear-gradient(to right, var(--purple-end), transparent);
}
.trusted-arrow-right {
  right: 0;
  background: linear-gradient(to left, var(--purple-start), transparent);
}

@media (max-width: 640px) {
  .trusted-logo { height: 40px; padding: 6px 10px; }
  .trusted-page { gap: 10px; }
}

/* Touch devices can't hover, so the edge zones would only block swipes there */
@media (hover: none) {
  .trusted-arrow { display: none; }
}

/* ---------------- Gleam: a metallic shine sweeping left → right across section titles ----------------
   Wrap any title text in <span class="gleam">…</span>. The text is painted
   with a gradient (base colour + a bright band) clipped to the letters; the
   band slides across, then rests before the next pass. It lives on its own
   span so it never clashes with the title's scroll-in "pop" animation.
   Tweak speed with --gleam-duration, colours with --gleam-base / --gleam-shine,
   start offset with --gleam-delay. */
.gleam {
  --gleam-base: var(--navy);
  --gleam-shine: #cfd2ff;
  --gleam-duration: 5s;
  --gleam-delay: 0s;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gleam {
    background-image: linear-gradient(
      110deg,
      var(--gleam-base) 0%,
      var(--gleam-base) 40%,
      var(--gleam-shine) 47%,
      #ffffff 50%,
      var(--gleam-shine) 53%,
      var(--gleam-base) 60%,
      var(--gleam-base) 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: gleamSweep var(--gleam-duration) ease-in-out var(--gleam-delay) infinite;
  }
}
/* White title on the purple Trusted By band: shine a touch brighter */
.trusted-label .gleam { --gleam-base: rgba(255, 255, 255, 0.82); --gleam-shine: #ffffff; }
/* Stagger so the titles don't all flash in sync */
.trusted-label .gleam      { --gleam-delay: 0.6s; }
#why-choose .gleam         { --gleam-delay: 1.2s; }
.bg-services .gleam        { --gleam-delay: 1.8s; }
.bg-products .gleam        { --gleam-delay: 2.4s; }

@keyframes gleamSweep {
  0%   { background-position: 100% 0; }
  45%  { background-position: 0% 0; }   /* sweep takes ~45% of the cycle… */
  100% { background-position: 0% 0; }   /* …then rests before the next pass */
}
@media (prefers-reduced-motion: reduce) {
  .gleam { animation: none; }
}


/* ---------------- Smooth momentum scrolling (Lenis) + parallax ----------------
   Base styles Lenis needs (from lenis.css), plus a hint to the browser that
   [data-speed] elements move. Parallax uses the separate CSS "translate"
   property so it stacks with the tilt / pop-in "transform" animations. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
[data-speed] { will-change: translate; }
@media (prefers-reduced-motion: reduce) {
  [data-speed] { translate: none !important; will-change: auto; }
}

/* ---------------- Viewport-responsive sections ("scenes") ----------------
   Each main section is one screen tall so the page can snap section by
   section (see initSectionSnap in script/home.js). Top padding clears the
   fixed nav bar (--nav-space), and sizes are tied to the window height so
   each section's content fits on one screen without big empty gaps.
   svh = "small viewport height" (ignores mobile browser bars); vh = fallback. */
:root { --nav-space: 92px; } /* 16px offset + 76px nav bar */

.about,
#why-choose,
.bg-services,
.bg-products {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-space) + 2vh);
  padding-bottom: 4vh;
}
.about > .container,
#why-choose > .container,
.bg-services > .container,
.bg-products > .container { width: 100%; }

/* Trusted By: a band between scenes (snaps to the middle of the screen) */
.trusted {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(44px, 7vh, 90px);
}
.trusted > .container { width: 100%; }
.trusted-label { font-size: clamp(20px, 1.2vw + 8px, 28px); margin-bottom: clamp(18px, 3vh, 34px); }
.trusted-logo { height: clamp(46px, 6vh, 70px); }

/* Titles: scale with the window, but stay modest */
.section-title { font-size: clamp(26px, 1.4vw + 14px, 40px); }
.about-heading { font-size: clamp(24px, 1.2vw + 12px, 34px); }
.about-copy .about-lead { font-size: clamp(20px, 1vw + 11px, 28px); }
.about-copy p, .feature .copy p { max-width: min(580px, 100%); }

/* About photo stack sized from the window height */
.about-photo-stack {
  min-height: clamp(280px, calc(100svh - 360px), 460px);
  max-width: clamp(340px, 32vw, 520px);
}
.about-layout { margin-top: clamp(18px, 3vh, 40px); }

/* Why Choose Us: title + both tile rows always fit on one screen.
   Row height = (screen height − nav, title and spacing) ÷ 2, kept within 170–330px */
.why-grid {
  grid-template-rows: repeat(2, clamp(170px, calc((100svh - 300px) / 2), 330px));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(16px, 3vh, 32px);
}
.why-card { min-height: 0; }
#why-choose .section-title { margin-bottom: 0; }

/* Services / Products: wider layout and an image sized from the window
   height (3:2), so the pair fills the screen instead of floating in space */
.bg-services > .container.feature,
.bg-products > .container.feature { max-width: clamp(1200px, 82vw, 1480px); }
.feature { gap: clamp(32px, 5vw, 80px); }
.visual { max-width: min(100%, calc((100svh - 230px) * 1.5)); }
@media (min-width: 820px) {
  .feature .visual { width: 100%; }
}

@media (max-width: 860px) {
  .why-grid { grid-template-rows: none; grid-auto-rows: clamp(200px, 28vh, 300px); }
  .why-card--feature { min-height: clamp(280px, 40vh, 380px); }
}
/* Phones: content sets the height (no snapping) so nothing is squeezed */
@media (max-width: 640px) {
  .about, #why-choose, .bg-services, .bg-products {
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .about-photo-stack { min-height: 0; max-width: 100%; }
  .visual { max-width: 100%; }
}


/* ---------------- Why Choose Us on phones (portrait) and small landscape screens ----------------
   Four equal, wide (landscape-shaped) cards stacked top to bottom. Every card
   shows its title; tap a card to slide its description up (tap again or tap
   elsewhere to close). */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .why-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 14px;
  }
  .why-card,
  .why-card--feature,
  .why-card--wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    height: clamp(170px, 50vw, 240px);
  }
  .why-card--feature .why-card-body,
  .why-card--wide .why-card-body { padding: 20px; }
  .why-card--feature .why-card-body h4,
  .why-card--wide .why-card-body h4 { font-size: 19px; }
  /* Same tap-to-reveal behaviour on all four cards */
  .why-card--feature .why-card-toggle,
  .why-card--wide .why-card-toggle { display: block; }
  .why-card--feature .why-card-desc,
  .why-card--wide .why-card-desc { grid-template-rows: 0fr; }
  .why-card--feature .why-card-desc p,
  .why-card--wide .why-card-desc p { opacity: 0; transform: translateY(12px); padding-top: 0; font-size: 14px; }
  .why-card.is-open .why-card-desc { grid-template-rows: 1fr; }
  .why-card.is-open .why-card-desc p { opacity: 1; transform: none; padding-top: 10px; }
  .why-card.is-open::after { opacity: 1; }
  /* No parallax drift here, so cards never overlap */
  [data-speed]:not([data-float]) { translate: none !important; }
}
/* Small landscape screens: let sections size to their content */
@media (orientation: landscape) and (max-height: 540px) {
  .about, #why-choose, .bg-services, .bg-products {
    min-height: 0;
    padding-top: calc(var(--nav-space) + 16px);
    padding-bottom: 56px;
  }
}


/* Why Choose Us: photos are a little taller than their tile so they can
   drift up/down inside the frame while scrolling (data-speed on the img,
   capped at 36px by data-speed-max) without ever showing an edge */
.why-card-img {
  inset: auto;
  top: -12%;
  left: 0;
  height: 124%;
}


/* ================================================================
   WHY CHOOSE US — MOSAIC GRID (Version 4)
   Image tiles (title on the photo) + text tiles (details) + the section
   heading as a tile. The grid fills the screen below the nav bar.
   To go back to the previous card design, restore Backup/Version 3.
   ================================================================ */
.mosaic {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "t  t  i1 d1"
    "i2 d2 i3 i3"
    "i2 i4 d4 d3";
  gap: clamp(10px, 1.1vw, 16px);
  /* screen height minus nav bar and section padding */
  height: clamp(480px, calc(100svh - var(--nav-space) - 8vh), 820px);
}

.mosaic-tile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
  min-height: 0;
}

/* Heading tile */
.mosaic-head {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
}
.mosaic-head .mosaic-inner { padding: clamp(20px, 2.2vw, 34px); }
.mosaic-head .section-title { font-size: clamp(30px, 2.6vw + 6px, 52px); margin: 0 0 10px; }
.mosaic-lead { margin: 0; color: var(--muted); font-size: clamp(14px, 0.5vw + 10px, 17px); line-height: 1.55; max-width: 420px; }

/* Image tiles: photo fills the tile, title sits on the photo */
.mosaic-img { background: linear-gradient(150deg, var(--purple-start), var(--navy)); }
.mosaic-img img {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;            /* extra height for the scroll drift */
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
}
.mosaic-img::after {       /* legibility gradient under the title */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 45%, rgba(10,12,36,0.78) 100%);
}
.mosaic-title {
  position: absolute;
  left: clamp(16px, 1.6vw, 24px);
  right: clamp(16px, 1.6vw, 24px);
  bottom: clamp(14px, 1.4vw, 22px);
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1vw + 8px, 26px);
  line-height: 1.2;
}
@media (hover: hover) {
  .mosaic-img:hover img { transform: scale(1.06); }
}

/* Text tiles */
.mosaic-text { display: flex; align-items: flex-end; }
.mosaic-text .mosaic-inner { padding: clamp(16px, 1.6vw, 26px); }
.mosaic-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-bottom: 8px;
}
.mosaic-text h4 {
  font-family: var(--font-display);
  font-size: clamp(16px, 0.6vw + 11px, 20px);
  margin: 0 0 6px;
}
.mosaic-text p { margin: 0; font-size: clamp(13px, 0.3vw + 10px, 15px); line-height: 1.55; }
.mosaic-text--navy   { background: var(--navy); color: #fff; }
.mosaic-text--navy p { color: rgba(255,255,255,0.78); }
.mosaic-text--purple { background: linear-gradient(140deg, var(--purple-start), var(--purple-end)); color: #fff; }
.mosaic-text--purple p { color: rgba(255,255,255,0.82); }
.mosaic-text--light  { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.mosaic-text--light p { color: var(--muted); }
.mosaic-text--light .mosaic-num { color: var(--red); opacity: 1; }
.mosaic-text--deep   { background: #1c2550; color: #fff; }
.mosaic-text--deep p { color: rgba(255,255,255,0.78); }

/* ---- Entrance: tiles "grow into place" one after another (like the
   reference video). Plays each time the section scrolls into view
   (.is-in is added/removed by initMosaic in script/home.js). ---- */
.mosaic .mosaic-tile {
  opacity: 0;
  transform: scale(0.82);
  clip-path: inset(12% 12% 12% 12% round 18px);
}
.mosaic .mosaic-img img { transform: scale(1.3); }
.mosaic .mosaic-inner,
.mosaic .mosaic-title { opacity: 0; transform: translateY(14px); }

.mosaic.is-in .mosaic-tile {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 18px);
  transition:
    opacity 0.5s ease,
    transform 0.9s cubic-bezier(.16,1,.3,1),
    clip-path 0.9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.mosaic.is-in .mosaic-img img {
  transform: none;
  transition: transform 1.3s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.mosaic.is-in .mosaic-inner,
.mosaic.is-in .mosaic-title {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,.9,.32,1);
  transition-delay: calc(var(--i, 0) * 120ms + 350ms);
}
/* After the entrance, hover zoom on photos uses its own quick timing */
@media (hover: hover) {
  .mosaic.is-in .mosaic-img:hover img { transform: scale(1.06); transition: transform 0.7s cubic-bezier(.4,0,.2,1); }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic .mosaic-tile, .mosaic .mosaic-img img, .mosaic .mosaic-inner, .mosaic .mosaic-title {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
}

/* Tablet: two columns, image + text side by side for each reason */
@media (max-width: 860px) {
  .mosaic {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(180px, auto);
    grid-template-areas:
      "t  t"
      "i1 d1"
      "d2 i2"
      "i3 d3"
      "d4 i4";
  }
}
/* Phones and small landscape screens: one column, each photo followed by its text */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas: "t" "i1" "d1" "i2" "d2" "i3" "d3" "i4" "d4";
  }
  .mosaic-img { height: clamp(170px, 48vw, 240px); }
  .mosaic-head .mosaic-inner, .mosaic-text .mosaic-inner { padding: 20px; }
}


/* ---------------- Mosaic refinements ----------------
   - Text sizes follow the smaller of window width / height, so tiles never
     clip their text on short-but-wide screens (e.g. laptops at 125% zoom)
   - Tighter gaps between tiles */
.mosaic { gap: clamp(6px, 0.6vw, 10px); }
.mosaic-tile { border-radius: 16px; }
.mosaic.is-in .mosaic-tile { clip-path: inset(0 0 0 0 round 16px); }
.mosaic-head .mosaic-inner { padding: clamp(14px, min(1.6vw, 2.6vh), 30px); }
.mosaic-head .eyebrow { margin-bottom: clamp(2px, 0.6vh, 8px); }
.mosaic-head .section-title { font-size: clamp(24px, min(2.2vw, 4.4vh) + 4px, 48px); margin: 0 0 clamp(4px, 1vh, 10px); }
.mosaic-lead { font-size: clamp(13px, min(0.6vw, 1.3vh) + 6px, 17px); line-height: 1.45; }
.mosaic-text .mosaic-inner { padding: clamp(12px, min(1.3vw, 2.2vh), 24px); }
.mosaic-num { margin-bottom: clamp(2px, 0.6vh, 8px); font-size: 12px; }
.mosaic-text h4 { font-size: clamp(14px, min(0.6vw, 1.2vh) + 8px, 20px); margin-bottom: 4px; }
.mosaic-text p { font-size: clamp(12px, min(0.35vw, 0.8vh) + 8px, 15px); line-height: 1.45; }
.mosaic-title { font-size: clamp(15px, min(1vw, 2vh) + 5px, 26px); }

/* ---------------- Phone version switch ----------------
   Desktop / tablet: mosaic. Phones + small landscape screens: card version. */
.why-mobile { display: none; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .why-mobile { display: block; }
  .mosaic { display: none; }
}


/* ---------------- Mosaic v2: fewer, calmer tiles (7 instead of 9) ----------------
     [ heading      ][  01 large photo  ]
     [ 02 ][ 02 txt ][  with its text   ]
     [ 03 wide photo w/ text ][ 04 ][ 04 txt ] */
.mosaic {
  grid-template-areas:
    "t  t  i1 i1"
    "i2 d2 i1 i1"
    "i3 i3 i4 d4";
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Photos that carry their own text */
.mosaic-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, min(1.8vw, 3vh), 32px);
  color: #fff;
}
.mosaic-caption .mosaic-title {
  position: static;
  font-size: clamp(18px, min(1.4vw, 2.8vh) + 6px, 34px);
  margin: 0 0 6px;
}
.mosaic-caption p {
  margin: 0;
  max-width: 460px;
  color: rgba(255,255,255,0.86);
  font-size: clamp(13px, min(0.4vw, 0.9vh) + 8px, 16px);
  line-height: 1.5;
}
.mosaic-caption .mosaic-num { color: #fff; opacity: 0.7; }
.mosaic-img--text::after {
  background: linear-gradient(180deg, transparent 30%, rgba(10,12,36,0.88) 100%);
}
.mosaic .mosaic-caption { opacity: 0; transform: translateY(14px); }
.mosaic.is-in .mosaic-caption {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,.9,.32,1);
  transition-delay: calc(var(--i, 0) * 120ms + 350ms);
}
@media (prefers-reduced-motion: reduce) {
  .mosaic .mosaic-caption { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 860px) {
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(200px, auto);
    grid-template-areas:
      "t  t"
      "i1 i1"
      "i2 d2"
      "i3 i3"
      "i4 d4";
  }
}


/* ---------------- Mosaic v3: no repeated pairs, roomier text ----------------
     [ heading      ][  01 large photo  ]
     [ 02 ][ 03     ][  with its text   ]
     [ 02 ][ tall   ][ 04 ][ 04 text    ]
     [ txt][ photo  ]
   02 = photo over its text box, 03 = tall photo with text on it,
   04 = photo beside its text box. */
.mosaic {
  grid-template-areas:
    "t  t  i1 i1"
    "i2 i3 i1 i1"
    "d2 i3 i4 d4";
}
/* More breathing room between text and tile edges */
.mosaic-caption { padding: clamp(22px, min(2.2vw, 3.8vh), 42px); }
.mosaic-title {
  left: clamp(20px, min(1.9vw, 3.2vh), 34px);
  right: clamp(20px, min(1.9vw, 3.2vh), 34px);
  bottom: clamp(18px, min(1.8vw, 3vh), 32px);
}
.mosaic-text .mosaic-inner { padding: clamp(20px, min(1.9vw, 3.2vh), 34px); }
.mosaic-head .mosaic-inner { padding: clamp(22px, min(2.2vw, 3.8vh), 42px); }
/* Tall narrow photo (03): keep the caption compact */
.mosaic-tile[style*="i3"] .mosaic-caption .mosaic-title { font-size: clamp(18px, min(1.1vw, 2.4vh) + 6px, 28px); }
.mosaic-tile[style*="i3"] .mosaic-caption p { font-size: clamp(12.5px, min(0.35vw, 0.8vh) + 8px, 15px); }

@media (max-width: 860px) {
  .mosaic {
    grid-template-areas:
      "t  t"
      "i1 i1"
      "i2 i3"
      "d2 i3"
      "i4 d4";
  }
}


/* ---------------- About: corner illustration ----------------
   Anchored to the top-right corner of the About section, behind the text.
   Glides in diagonally from that corner (.is-in, added by initAboutIllustration
   in script/home.js each time the section comes into view), then floats gently. */
.about { position: relative; overflow: hidden; }
.about > .container { position: relative; z-index: 1; }
.about-layout { grid-template-columns: minmax(0, 1fr); }
.about-copy { max-width: min(640px, 48%); }

.about-illustration {
  position: absolute;
  top: 0;
  right: 0;
  width: min(64vw, 1100px);
  aspect-ratio: 3 / 2;
  z-index: 0;
  pointer-events: none;
}
.about-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top right;
  opacity: 0;
  transform: translate(28%, -28%) scale(0.92);
  transition: opacity 0.9s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
}
.about-illustration.is-in img {
  opacity: 1;
  transform: none;
  animation: aboutFloat 7s ease-in-out 1.4s infinite;
}
@keyframes aboutFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-illustration img { opacity: 1; transform: none; transition: none; animation: none !important; }
}

/* Tablets: text full width, illustration fainter behind it */
@media (max-width: 860px) {
  .about-copy { max-width: 100%; }
  .about-illustration { width: 90vw; opacity: 0.35; }
}
/* Phones / small landscape: illustration becomes a normal image above the text */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .about-illustration {
    position: relative;
    width: calc(100% + 24px);
    margin: 0 -24px 0 auto;
    opacity: 1;
    translate: none !important;
  }
  .about { flex-direction: column; align-items: stretch; }
}


/* ---------------- Why Choose Us: breathing room above and below the grid ----------------
   The grid is sized to leave a clear gap under the nav bar (4% of the
   screen height) and a slightly larger one at the bottom (6%), so it never
   runs into the bottom edge of the window. */
#why-choose {
  padding-top: calc(var(--nav-space) + 4vh);
  padding-bottom: 6vh;
}
#why-choose .mosaic {
  height: clamp(440px, calc(100svh - var(--nav-space) - 10vh), 760px);
}
@media (max-width: 860px) {
  #why-choose .mosaic { height: auto; }
}


/* ---------------- About illustration: techno lines ----------------
   The image and its circuit lines sit in one inner wrapper, so the entrance
   glide and the gentle float move them together. Each line draws itself
   slowly from the artwork downwards (staggered by --n), then its end node
   lights up and a small pulse of light keeps travelling along it. */
.about-illustration { overflow: visible; }
.about-illustration-inner {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate(28%, -28%) scale(0.92);
  transition: opacity 0.9s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
}
/* the inner wrapper now carries the entrance + float, so reset the img */
.about-illustration img,
.about-illustration.is-in img { opacity: 1; transform: none; transition: none; animation: none; }
.about-illustration.is-in .about-illustration-inner {
  opacity: 1;
  transform: none;
  animation: aboutFloat 7s ease-in-out 1.4s infinite;
}

.about-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tech-trace,
.tech-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.tech-trace {
  stroke: url(#techLine);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;               /* hidden until drawn */
  opacity: 0.85;
}
.tech-pulse {
  stroke: #9fd0ff;
  stroke-width: 2.6;
  stroke-dasharray: 0.06 1;           /* one short bright dash */
  stroke-dashoffset: 0.06;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(90,168,255,0.9));
}
.tech-node {
  fill: #ffffff;
  stroke: #5aa8ff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Play when the section is in view */
.about-illustration.is-in .tech-trace {
  animation: techDraw 4.5s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: calc(1.2s + var(--n) * 0.45s);
}
.about-illustration.is-in .tech-node {
  animation: techNodeIn 0.6s ease forwards, techNodePulse 2.8s ease-in-out infinite;
  animation-delay: calc(5.4s + var(--n) * 0.45s), calc(6s + var(--n) * 0.45s);
}
.about-illustration.is-in .tech-pulse {
  animation: techPulse 3.6s linear infinite;
  animation-delay: calc(5.8s + var(--n) * 0.6s);
}
@keyframes techDraw { to { stroke-dashoffset: 0; } }
@keyframes techNodeIn { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes techNodePulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(90,168,255,0)); } 50% { filter: drop-shadow(0 0 6px rgba(90,168,255,0.95)); } }
@keyframes techPulse {
  0%   { stroke-dashoffset: 0.06; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-illustration-inner { opacity: 1; transform: none; transition: none; animation: none !important; }
  .tech-trace { stroke-dashoffset: 0; animation: none !important; }
  .tech-node { opacity: 1; animation: none !important; }
  .tech-pulse { display: none; }
}
/* Phones: keep the artwork, skip the lines */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .about-lines { display: none; }
}


/* ---------------- Gleam: play ONCE when a title scrolls into view ----------------
   Overrides the earlier looping version. script/home.js (initGleamOnce) adds
   .gleam-on the first time each title is on screen; the shine sweeps across
   a single time and the title then stays in its normal colour. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gleam { animation: none; background-position: 100% 0; }
  .gleam.gleam-on { animation: gleamOnce 2.2s ease-in-out 0.25s 1 both; }
}
@keyframes gleamOnce {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

/* ---------------- Why Choose Us mosaic: spacing, contrast, no outlines ---------------- */
.mosaic,
#why-choose .mosaic { gap: clamp(12px, 1.1vw, 18px); }
/* No border lines on any tile; the white heading tile gets a soft shadow instead */
.mosaic-tile,
.mosaic-head,
.mosaic-text--light { border: none; }
.mosaic-head { box-shadow: 0 10px 30px rgba(18, 22, 58, 0.08); }
/* Higher-contrast text boxes */
.mosaic-text--purple { background: #3a2c9e; color: #fff; }
.mosaic-text--purple p { color: rgba(255,255,255,0.94); }
.mosaic-text--navy   { background: #0b0e2c; color: #fff; }
.mosaic-text--navy p { color: rgba(255,255,255,0.92); }
.mosaic-text .mosaic-num { opacity: 0.85; }
.mosaic-lead { color: #4b4e66; }

/* Photos get more spare height so their scroll drift can never expose a
   thin strip at the tile edge (the light "lines" on the photo tiles) */
.mosaic-img img { top: -20%; height: 140%; }

/* ---------------- Why Choose Us: extra breathing room ----------------
   Larger gaps above and below the grid, between tiles, and inside the
   tiles, with the grid sized down to match so it still fits one screen. */
#why-choose {
  padding-top: calc(var(--nav-space) + 7vh);
  padding-bottom: 9vh;
}
#why-choose .mosaic {
  height: clamp(420px, calc(100svh - var(--nav-space) - 16vh), 700px);
  gap: clamp(16px, 1.5vw, 24px);
}
#why-choose .container { max-width: 1140px; }
.mosaic-head .mosaic-inner { padding: clamp(24px, min(2.4vw, 4vh), 44px); }
.mosaic-text .mosaic-inner { padding: clamp(22px, min(2vw, 3.4vh), 36px); }
/* keep the heading tile's text inside its (now smaller) tile on short screens */
.mosaic-head .mosaic-inner { padding: clamp(18px, min(2.2vw, 3.2vh), 42px); }
.mosaic-head .section-title { font-size: clamp(24px, min(2.1vw, 4vh) + 4px, 46px); }
.mosaic-lead { font-size: clamp(13px, min(0.55vw, 1.2vh) + 6px, 17px); }
/* Short screens (e.g. small laptops): give the grid back some of the space */
@media (min-width: 861px) and (max-height: 660px) {
  #why-choose { padding-top: calc(var(--nav-space) + 3vh); padding-bottom: 4vh; }
  #why-choose .mosaic { height: calc(100svh - var(--nav-space) - 8vh); gap: 12px; }
  .mosaic-text .mosaic-inner, .mosaic-head .mosaic-inner { padding: 16px 20px; }
  .mosaic-caption { padding: 18px 22px; }
}

/* Tablets / phones: the grid sizes itself to its content (the fixed desktop
   height above must not apply here) */
@media (max-width: 860px) {
  #why-choose .mosaic { height: auto; }
}

/* ================================================================
   RESPONSIVE PASS — every section adapts to the visitor's screen
   ================================================================ */

/* Tablets in portrait (tall, narrow screens): full-screen sections left big
   empty gaps, so sections size to their content with comfortable spacing */
@media (max-width: 1024px) and (orientation: portrait) {
  .about, #why-choose, .bg-services, .bg-products {
    min-height: 0;
    padding-top: calc(var(--nav-space) + 40px);
    padding-bottom: 72px;
  }
  .about { padding-top: calc(var(--nav-space) + clamp(160px, 22vw, 240px)); } /* room for the corner art */
  .about-copy { max-width: 100%; }
  .about-illustration { width: 70vw; opacity: 0.9; }
  #why-choose .mosaic { height: auto; }
  .mosaic { grid-auto-rows: minmax(220px, auto); }
}

/* Short landscape screens (phones turned sideways, small laptops):
   the hero keeps enough height for its text and clears the nav bar */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { min-height: max(100svh, 480px); }
  .hero-inner { padding-top: calc(var(--nav-space) + 8px); padding-bottom: 72px; }
  .hero h1 { font-size: clamp(24px, 4.2vw, 34px); }
  .visual { max-width: min(100%, 520px); }
  .feature { grid-template-columns: 1fr 1fr; gap: 28px; }
  .about-illustration { width: min(60vw, 520px); margin-left: auto; }
}

/* Phones: images use the full width, not a height-based size */
@media (max-width: 640px) {
  .visual { max-width: 100%; }
}

/* Very large screens: let content breathe a little wider */
@media (min-width: 1800px) {
  .container { max-width: 1320px; }
}


/* ---------------- Mosaic v4: halves swapped ----------------
   Left:  big 01 photo, then 04 photo + Support box under it.
   Right: heading, then 02 photo/People box beside the tall 03 photo. */
.mosaic {
  grid-template-areas:
    "i1 i1 t  t"
    "i1 i1 i2 i3"
    "i4 d4 d2 i3";
}
@media (max-width: 860px) {
  .mosaic {
    grid-template-areas:
      "t  t"
      "i1 i1"
      "i2 i3"
      "d2 i3"
      "i4 d4";
  }
}


/* ---------------- Mosaic v5: 01 → 04 read left to right ----------------
   [ 01 big ][ 01 big ][  heading  ][  heading  ]
   [ 01 big ][ 01 big ][ 03 tall   ][ 04 photo  ]
   [ 02 pic ][ 02 txt ][ 03 tall   ][ 04 text   ] */
.mosaic {
  grid-template-areas:
    "i1 i1 t  t"
    "i1 i1 i3 i4"
    "i2 d2 i3 d4";
}
@media (max-width: 860px) {
  .mosaic {
    grid-template-areas:
      "t  t"
      "i1 i1"
      "i2 d2"
      "i3 i4"
      "i3 d4";
  }
}

/* 02 / 04: number + title sit on the photo, the coloured box holds just the description */
.mosaic-text--desc { align-items: center; }
.mosaic-text--desc p { font-size: clamp(14px, min(0.45vw, 1vh) + 9px, 18px); line-height: 1.5; color: rgba(255,255,255,0.9); }
.mosaic-tile[style*="i2"] .mosaic-caption,
.mosaic-tile[style*="i4"] .mosaic-caption { padding: clamp(16px, min(1.6vw, 2.8vh), 28px); }
.mosaic-tile[style*="i2"] .mosaic-caption .mosaic-title,
.mosaic-tile[style*="i4"] .mosaic-caption .mosaic-title { font-size: clamp(18px, min(1.1vw, 2.4vh) + 6px, 28px); margin: 0; }


/* ---------------- About illustration: lines start the moment the art lands ----------------
   The artwork glides in as before (settles at ~0.75s). The lines start right
   then and draw at an EVEN pace (linear), so there's no slow crawl at the end:
   each line arrives exactly when its 4.5s is up, and its dot pops on at that
   same instant (start 0.75s + draw 4.5s = 5.25s, plus the line's stagger). */
.about-illustration.is-in .tech-trace {
  animation: techDraw 4.5s linear forwards;
  animation-delay: calc(0.75s + var(--n) * 0.12s);
}
.about-illustration.is-in .tech-node {
  animation: techNodeIn 0.25s ease-out forwards, techNodePulse 2.8s ease-in-out infinite;
  animation-delay: calc(5.25s + var(--n) * 0.12s), calc(5.5s + var(--n) * 0.12s);
}
.about-illustration.is-in .tech-pulse { animation-delay: calc(5.5s + var(--n) * 0.4s); }

/* ---------------- Phones: About sits right under the hero ----------------
   The tablet rule reserves room above the text for the corner artwork, but on
   phones the artwork is already a normal image above the text, so that room
   was just an empty gap. */
@media (max-width: 640px) {
  .about {
    min-height: 0;
    padding-top: calc(var(--nav-space) + 8px);
    padding-bottom: 56px;
    justify-content: flex-start;
  }
  .about-illustration { width: 100%; margin: 0 0 8px; aspect-ratio: 16 / 10; }
}

/* ---------------- Phones: Trusted By logos in a 2 x 2 grid ----------------
   script/home.js regroups the logos into pages of 4 on phones. */
@media (max-width: 640px) {
  .trusted-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 2px 4px;
    align-content: start;
  }
  .trusted-logo {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 72px;
    padding: 10px 12px;
    border-radius: 10px;
  }
}

/* Phones, round 2: no nav-sized gap above About (phones don't snap sections),
   and the artwork is cropped to the drawing itself (the PNG's left third is
   empty glow), so it no longer leaves blank space around it. */
@media (max-width: 640px) {
  .about { padding-top: 28px; }
  .about-illustration {
    width: 92%;
    margin: 0 0 0 auto;
    aspect-ratio: 5 / 4;
  }
  .about-illustration img {
    object-fit: cover;
    object-position: 100% 0;
  }
}
/* Phones: pull the About heading up closer to the artwork */
@media (max-width: 640px) {
  .about { padding-top: 16px; }
  .about-illustration { aspect-ratio: 16 / 11; margin-bottom: -14px; }
}

/* Phones, round 3: artwork tucks slightly under the bottom of the hero banner,
   and the heading follows closer underneath */
@media (max-width: 640px) {
  .hero { position: relative; z-index: 2; }
  .about { padding-top: 0; overflow: visible; overflow-x: clip; }
  .about-illustration {
    margin-top: -14px;
    margin-bottom: -14px;
    aspect-ratio: 5 / 3.7;
  }
}


/* ---------------- Hero: brighter, cleaner, sharper ----------------
   - the thin vertical line pattern and the white haze in the corner are removed
   - the dark wash is much lighter and only sits behind the text (left side)
     and along the bottom for the tabs, so the photo keeps its colour
   - once a slide has finished zooming in, it has no transform at all, so the
     browser draws the photo at full sharpness */
.hero-slide::before,
.hero-slide::after { content: none; }
.hero-slide.is-active { transform: none; }
.hero-media-img { image-rendering: auto; }
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(8, 12, 40, 0.62) 0%, rgba(8, 12, 40, 0.38) 38%, rgba(8, 12, 40, 0.08) 65%, rgba(8, 12, 40, 0) 100%),
    linear-gradient(0deg, rgba(8, 12, 40, 0.55) 0%, rgba(8, 12, 40, 0) 26%);
}


/* ---------------- Phones: shorter banner (27 Oct) ----------------
   The banner takes about two-thirds of the screen instead of all of it, so
   the next section peeks in underneath and invites scrolling. */
@media (max-width: 640px) {
  .hero { min-height: 0; height: clamp(460px, 70svh, 620px); }
}

/* 5 Nov: the about artwork's circuit lines now play on phones too */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .about-lines { display: block; }
}