/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE — 2026 design system (page-level rules only)

   Loaded AFTER main.css, so every rule here wins over an equally specific
   component rule. Two kinds of rule live in this file:

   1. OVERRIDES of shared components where the home page deliberately differs
      from the reconciled variant (the light full-viewport hero, the white
      gallery band, the image-backed CTA). Each is marked "override:".
   2. Page-unique blocks the design system never extracted because only the
      home page uses them: product / cloud / service / case-study cards, the
      hero offering pills + background slideshow, the co-development strip and
      the academic band.

   Everything else (buttons, eyebrows, section heads, strip, gallery internals,
   header, footer) comes from the components and is NOT repeated here.

   Values are copied verbatim from concept-src/frontend/concept.html's inline
   <style>; the file only re-orders them under section banners.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ANCHOR OFFSET ───────────────────────────────────────────────────────────
   override: components/header-2026.css assumes a 70px header + 46px subnav.
   The home page has no subnav, so section anchors only clear the header. */
section[id] { scroll-margin-top: 86px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — light, full-viewport, photo slideshow behind the copy
   override: components/hero.css ships the dark two-column product hero.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: 30px 0 0; margin-top: 70px;
  overflow: hidden;
  background: none;                 /* drop the component's dark gradient */
}
/* Orange line top — component draws it, home lifts it above the overlay */
.hero::before { z-index: 4; }

/* Dual-edge fade overlay — white vignette at both sides, opaque centre band */
.hero__bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* solid white at edges */
    linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 18%),
    linear-gradient(to left,  #fff 0%, rgba(255,255,255,0) 18%),
    /* strong white band behind text in the centre */
    linear-gradient(to right, transparent 15%, rgba(255,255,255,.93) 28%, rgba(255,255,255,.93) 72%, transparent 85%);
  background-color: rgba(255,255,255,.25);
}

/* Full-screen background slideshow.
   .hero__slide / .hero__slide.is-active / .hero__slide img come from
   components/hero.css unchanged — only the fade timing differs. */
.hero__slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide { transition: opacity .9s ease; }

/* Sub-product label — floating pill at the bottom of the hero */
.hero__sublabel {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 2; pointer-events: none;
  background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08);
  padding: 6px 22px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dark); white-space: nowrap;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  transition: opacity .4s;
}

/* override: the component hero is a two-column grid; home stacks centred */
.hero__inner {
  position: relative; z-index: 3;
  max-width: 1240px; margin: 0 auto; padding: 0 48px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; width: 100%;
}
.hero__content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding-bottom: 80px;
  width: 100%; max-width: 700px;
}
.hero__eyebrow { margin-bottom: 26px; }
.hero__title {
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.07; color: var(--text-dark);
  margin-bottom: 22px;
}
.hero__desc {
  font-size: 16.5px; color: var(--text);
  line-height: 1.75; max-width: 520px; margin: 0 auto 36px;
}
.hero__actions { margin-bottom: 52px; justify-content: center; }

/* Offering pills — double as the slideshow's tab strip */
.hero__offerings { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; justify-content: center; }
.hero__offering {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--text-dark); white-space: nowrap;
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: background .25s, border-color .25s, color .25s;
}
.hero__offering svg {
  width: 14px; height: 14px; stroke: var(--orange); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke .25s;
}
.hero__offering--blue svg { stroke: #5bb8ff; }
.hero__offering.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.hero__offering.is-active svg { stroke: #fff; }
.hero__offering--blue.is-active { background: var(--blue); border-color: var(--blue); }
.hero__offering--blue.is-active svg { stroke: #fff; }

/* Hero stats row (light variant of the component's .hero__mini) */
.hero__stats { display: flex; gap: 0; border-top: 1px solid var(--border); padding-top: 32px; }
.hero__stat { padding-right: 32px; margin-right: 32px; border-right: 1px solid var(--border); }
.hero__stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero__stat-num { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--orange); line-height: 1; }
.hero__stat-label { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: .1em; margin-top: 5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCTS — desktop software cards
   ═══════════════════════════════════════════════════════════════════════════ */
.products { padding: 100px 0; }
.products__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.pcard {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 32px;
  position: relative; overflow: hidden;
  transition: all .28s var(--ease);
  display: flex; flex-direction: column;
}
.pcard:hover { border-color: var(--orange); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.pcard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.pcard:hover::before, .pcard--featured::before { transform: scaleX(1); }
.pcard--featured { border-color: var(--orange); box-shadow: 0 0 0 1px rgba(254,106,0,.15), var(--shadow-md); }
.pcard__badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--orange); padding: 4px 11px; border-radius: 100px;
}
.pcard__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--orange-light); border: 1px solid var(--orange-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.pcard__icon svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 1.5; }
.pcard__id { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.pcard__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; line-height: 1.2; }
.pcard__desc { font-size: 13.5px; color: var(--text); line-height: 1.7; margin-bottom: 22px; }
.pcard__features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; flex-shrink: 0; }
.pcard__features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); line-height: 1.4; }
.pcard__features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 5px; }

/* Card-wide click target: the link's ::after covers the whole card */
.pcard__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none;
  padding: 10px 18px; border: 1.5px solid var(--orange); align-self: flex-start;
  margin-top: auto; margin-bottom: 8px; border-radius: var(--radius-sm);
  flex-shrink: 0; transition: gap .18s;
}
.pcard__link:hover { gap: 9px; }
.pcard__link svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2.5; }
.pcard__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.pcard:hover .pcard__link { background: var(--orange); color: #fff; gap: 9px; }
.pcard:hover .pcard__link svg { stroke: #fff; }

/* Audience tag */
.pcard__audience {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-light);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 10px; margin-bottom: 16px;
}
.pcard__audience svg { width: 12px; height: 12px; stroke: var(--text-light); fill: none; stroke-width: 1.5; }

/* OS compatibility badges */
.pcard__os { display: flex; align-items: center; gap: 8px; margin: -10px 0 22px; flex-wrap: wrap; flex-shrink: 0; }
.pcard__os-label { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); margin-right: 4px; }
.pcard__os-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1;
  background: var(--orange-light); color: var(--orange);
  border: 1px solid var(--orange-border);
  transition: background .18s var(--ease);
}
.pcard__os-badge svg { width: 11px; height: 11px; fill: currentColor; flex-shrink: 0; }
.pcard__os-badge--off { background: transparent; color: var(--text-light); border-color: var(--border); opacity: .45; }
.pcard__os-badge--off svg { opacity: .55; }
.pcard__os-arch {
  margin-left: 6px; padding: 1px 5px; border-radius: 3px;
  background: rgba(254,106,0,.18); color: var(--orange);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1.3;
}

/* "Coming soon" package list */
.pcard__coming { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; margin-bottom: 14px; padding-top: 16px; border-top: 1px dashed var(--border); flex-shrink: 0; }
.pcard__coming-label { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 2px; }
.pcard__coming-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-light);
  background: var(--bg); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
.pcard__coming-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .5; flex-shrink: 0; }
.pcard__coming-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: rgba(1,101,167,.08); border: 1px solid rgba(1,101,167,.2);
  padding: 2px 7px; border-radius: 100px; margin-left: auto; white-space: nowrap;
}
.pcard__coming-badge--cloud { color: var(--orange); background: var(--orange-light); border-color: var(--orange-border); }

/* ── CARD IMAGE STRIPS (products + cloud) ────────────────────────────────────
   Full-width auto-scrolling strip at the bottom of each card. Negative margins
   bleed it to the card edges; overflow:hidden on the card clips the radius. */
.pcard__strip, .clcard__strip {
  width: calc(100% + 64px); /* content + 2×32px horizontal padding */
  margin-top: auto;         /* push to bottom of flex card */
  margin-left: -32px; margin-right: -32px; margin-bottom: -36px;
  height: 160px; flex-shrink: 0;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: relative; background: #0d1525;
}
/* .pcard__coming already has margin-top:auto — the strip sits flush below it */
.pcard .pcard__strip { margin-top: 0; }
/* Soft fade at the top of the strip — blends into the card content above */
.pcard__strip::before, .clcard__strip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 44px; background: linear-gradient(to bottom, var(--bg-white), transparent);
  z-index: 2; pointer-events: none;
}
/* Scrolling track — 20s normal speed; 7s on hover (3× faster) */
.pcard__strip-track, .clcard__strip-track {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  height: 160px;
  animation: stripScroll 20s linear infinite;
  will-change: transform;
}
.pcard:hover .pcard__strip-track,
.clcard:hover .clcard__strip-track { animation-duration: 7s; }
@keyframes stripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* margin-right on every item (incl. last of set 1) makes -50% an exact set boundary */
.pcard__strip-img, .clcard__strip-img {
  flex-shrink: 0; height: 160px; aspect-ratio: 4/3;
  overflow: hidden; border-radius: 6px; margin-right: 6px;
}
.pcard__strip-img img, .clcard__strip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   CLOUD / SaaS
   ═══════════════════════════════════════════════════════════════════════════ */
.saas { padding: 100px 0; }
/* .section-title--blue was promoted into components/section-head.css (Task 3) */
.saas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; }

.clcard {
  background: var(--bg-white); border: 1px solid rgba(1,101,167,.2);
  border-radius: var(--radius-lg); padding: 36px 32px;
  position: relative; overflow: hidden;
  transition: all .28s var(--ease);
  border-left: 4px solid var(--blue);
  display: flex; flex-direction: column;
}
.clcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.clcard--coming { border-left-color: var(--border); border-color: var(--border); border-style: dashed; border-left-style: dashed; opacity: .7; }
.clcard--coming:hover { opacity: 1; transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.clcard__badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--blue); padding: 4px 11px; border-radius: 100px;
}
.clcard--coming .clcard__badge { background: var(--text-light); }
.clcard__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(1,101,167,.08); border: 1px solid rgba(1,101,167,.2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.clcard__icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.5; }
.clcard--coming .clcard__icon { background: var(--bg); border-color: var(--border); }
.clcard--coming .clcard__icon svg { stroke: var(--text-light); }
.clcard__id { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.clcard--coming .clcard__id { color: var(--text-light); }
.clcard__audience {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--blue);
  background: rgba(1,101,167,.07); border: 1px solid rgba(1,101,167,.18);
  border-radius: 100px; padding: 4px 10px; margin-bottom: 16px;
}
.clcard__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; line-height: 1.2; }
.clcard__desc { font-size: 13.5px; color: var(--text); line-height: 1.7; margin-bottom: 22px; }
.clcard__features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.clcard__features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); line-height: 1.4; }
.clcard__features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 5px; }
.clcard__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; transition: gap .18s; }
.clcard__link:hover { gap: 9px; }
.clcard__link svg { width: 13px; height: 13px; stroke: var(--blue); fill: none; stroke-width: 2.5; }
.clcard--coming .clcard__link { color: var(--text-light); }
.clcard--coming .clcard__link svg { stroke: var(--text-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY — home variant
   override: the component gallery is a bare band on --bg with 28px tabs; the
   home page frames it in white and adds arrows, a caption, a progress bar and
   a "full page" link.
   ═══════════════════════════════════════════════════════════════════════════ */
.gallery { padding: 80px 0; background: var(--bg-white); border-top: 1px solid var(--border); }
.gallery .section-head { margin-bottom: 36px; }
.gallery__tabs { margin-bottom: 44px; }
.gallery__tab { padding: 13px 44px; letter-spacing: .12em; }

.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.88); border: none; border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; box-shadow: 0 3px 14px rgba(0,0,0,.18); transition: background .2s;
}
.gallery__arrow:hover { background: var(--orange); }
.gallery__arrow:hover svg { stroke: #fff; }
.gallery__arrow svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gallery__arrow--prev { left: 14px; }
.gallery__arrow--next { right: 14px; }

.gallery__meta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.gallery__caption { font-size: 13px; color: var(--text); text-align: center; min-height: 20px; line-height: 1.5; }
.gallery__caption strong { color: var(--orange); }
/* the component spaces .gallery__dots itself; inside .gallery__meta the flex gap does it */
.gallery__meta .gallery__dots { margin-top: 0; gap: 8px; }
.gallery__dot { width: 7px; height: 7px; }
.gallery__progress { width: 140px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.gallery__progress-bar { height: 100%; background: var(--orange); width: 0; }
.gallery__page { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; transition: gap .18s; }
.gallery__page:hover { gap: 10px; }

/* Cloud / SaaS variant — blue accents on the shared slider */
.gallery--cloud { background: var(--bg); }
.gallery--cloud .gallery__tab:hover { color: var(--blue); }
.gallery--cloud .gallery__tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.gallery--cloud .gallery__caption strong { color: var(--blue); }
.gallery--cloud .gallery__dot.active { background: var(--blue); }
.gallery--cloud .gallery__progress-bar { background: var(--blue); }
.gallery--cloud .gallery__arrow:hover { background: var(--blue); }
.gallery--cloud .gallery__arrow:hover svg { stroke: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   CO-DEVELOPMENT STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
.collab { background: linear-gradient(135deg,#0d1830,#0a1426); padding: 60px 0; }
.collab__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center;
}
.collab__head { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; margin-top: 12px; }
.collab__head span { color: var(--orange); }
.collab__stat { margin-top: 22px; }
.collab__stat-num { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--orange); line-height: 1; }
.collab__stat-label { font-size: 12px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .09em; margin-top: 6px; }
.collab__stat-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.collab__body { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.8; }
.collab__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; transition: gap .2s;
}
.collab__link:hover { gap: 10px; }
.collab__link svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════════════════ */
.services { padding: 100px 0; background: var(--bg-white); }
.services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
.scard {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 30px;
  position: relative; overflow: hidden;
  transition: all .28s var(--ease);
}
.scard:hover { border-color: var(--orange); background: var(--bg-white); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.scard::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.scard:hover::after { transform: scaleX(1); }
.scard__num { font-family: var(--font-head); font-size: 42px; font-weight: 900; color: var(--border); line-height: 1; margin-bottom: 14px; transition: color .3s; }
.scard:hover .scard__num { color: rgba(254,106,0,.18); }
.scard__title { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.scard__desc { font-size: 13.5px; color: var(--text); line-height: 1.7; margin-bottom: 22px; }
.scard__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.scard__tag {
  font-size: 11px; color: var(--text-light);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 4px 12px; background: var(--bg-white); transition: all .2s;
}
.scard:hover .scard__tag { border-color: var(--orange-border); color: var(--orange); }

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDIES — before/after wipe cards
   ═══════════════════════════════════════════════════════════════════════════ */
.casestudies { padding: 100px 0; background: var(--bg); }
.cs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cs-grid--bottom { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 20px; }
.cscard { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .3s var(--ease); }
.cscard:hover { box-shadow: var(--shadow-lg); }
.cscard__stage { position: relative; height: 220px; overflow: hidden; background: #0d1117; }
.cs-grid--bottom .cscard__stage { height: 260px; }
/* .cs-before / .cs-after each create their own stacking context (z-index 1/2) so
   labels within each div are correctly hidden/revealed with the clip-path */
.cs-before { position: absolute; inset: 0; z-index: 1; }
.cs-after  { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.4,0,.2,1); }
.cs-before img, .cs-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cscard:hover .cs-after { clip-path: inset(0 0% 0 0); }
.cs-after::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(255,255,255,.6); }
.cs-label {
  position: absolute; bottom: 10px; font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; padding: 4px 9px; border-radius: 100px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
.cs-label--before { left: 10px; background: rgba(0,0,0,.45); }
.cs-label--after { right: 10px; background: rgba(1,101,167,.65); }
.cscard__body { padding: 20px 22px 24px; }
.cscard__region { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }
.cscard__title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text-dark); line-height: 1.25; margin-bottom: 7px; }
.cscard__type { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.cscard__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cscard__tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--orange); border-radius: 100px; padding: 3px 9px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACADEMIC BAND
   ═══════════════════════════════════════════════════════════════════════════ */
.acadband { background: var(--bg-white); border-top: 1px solid var(--border); padding: 34px 0; }
.acadband__inner { max-width: 1240px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.acadband__icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--orange-light); border: 1px solid var(--orange-border);
  display: flex; align-items: center; justify-content: center;
}
.acadband__icon svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 1.7; }
.acadband__text { flex: 1 1 320px; }
.acadband__t { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text-dark); }
.acadband__d { font-size: 13px; color: var(--text); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CTA
   override: components/cta.css uses a flat gradient inside .container; the
   home CTA is a full-bleed photo band with its own inner width.
   ═══════════════════════════════════════════════════════════════════════════ */
.cta {
  background:
    linear-gradient(115deg, rgba(10,18,35,.95) 0%, rgba(1,65,107,.92) 100%),
    url('/assets/images/header/header_1_3.jpg') center/cover no-repeat;
  padding: 90px 0;
}
.cta__inner { padding: 0 48px; }
.cta__title { font-size: clamp(30px,4.5vw,56px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 20px; }
.cta__desc { color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 38px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   base-2026.css already carries the global focus ring and the reduced-motion
   block; these are the page-specific animations it cannot know about.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pcard__strip-track, .clcard__strip-track { animation: none !important; }
  .hero__slide { transition: none !important; }
}
/* Touch devices have no hover: show the before/after as a static split
   (otherwise the 'after' image is never revealed on phones/tablets) */
@media (hover: none) {
  .cscard .cs-after { clip-path: inset(0 0 0 50%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
/* ---- Tablet / small desktop (≤980px) ---- */
@media (max-width: 980px) {
  .hero__inner,
  .collab__inner,
  .acadband__inner,
  .cta__inner { padding-left: 28px; padding-right: 28px; }

  .products__grid,
  .services__grid,
  .cs-grid,
  .cs-grid--bottom { grid-template-columns: repeat(2, 1fr); }

  .collab__inner { grid-template-columns: 1fr; gap: 28px; }

  .gallery__tab { padding: 13px 26px; }
}

/* ---- Mobile (≤720px): single column ---- */
@media (max-width: 720px) {
  /* no subnav on the home page — clear the 60px mobile header only */
  .hero { margin-top: 60px; }
  section[id] { scroll-margin-top: 76px; }

  .products__grid,
  .services__grid,
  .cs-grid,
  .cs-grid--bottom { grid-template-columns: 1fr; }

  /* Tighten vertical rhythm on phones */
  .products, .saas, .services, .casestudies, .gallery { padding: 60px 0; }
  /* not in the prototype: the desktop vignette only whitens 28–72% of the
     width, so on a phone the hero copy sits over raw imagery. Same 93% white
     band, full-bleed — the treatment the copy gets on desktop. */
  .hero__bg {
    background: linear-gradient(to right, rgba(255,255,255,.93) 0%, rgba(255,255,255,.93) 100%);
    background-color: rgba(255,255,255,.25);
  }
  /* .hero__eyebrow { white-space: normal } lives in components/section-head.css
     now, next to the .eyebrow{white-space:nowrap} that makes it necessary. */
  .hero__actions { width: 100%; }
  .hero__stat { padding-right: 18px; margin-right: 18px; }
  .gallery__tab { padding: 12px 18px; white-space: nowrap; }
}

/* ---- Small phones (≤420px) ---- */
@media (max-width: 420px) {
  .hero__inner,
  .collab__inner,
  .acadband__inner,
  .cta__inner { padding-left: 18px; padding-right: 18px; }
  .hero__stats { flex-wrap: wrap; gap: 14px 0; }
}