/* ============================================================
   CricoSoft — Sections
   Load order: 1 tokens > 2 base > 3 components > 4 mockups > [5 sections]

   Per-section layout. This sheet MUST load last: several rules here
   intentionally refine a component in the context of one section, and
   they rely on winning on source order rather than on specificity
   hacks. Do not reorder the stylesheets.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.cricosoft-hero {
  position: relative;
  padding-block: clamp(3rem, 1.6rem + 7vw, 7rem) clamp(3.5rem, 2rem + 7vw, 8rem);
  overflow: hidden;
}

/* Ambient background wash. Sits behind everything, never intercepts a click. */
.cricosoft-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(48rem 32rem at 18% 0%, var(--cricosoft-brand-wash-2), transparent 62%),
    radial-gradient(38rem 26rem at 88% 12%, var(--cricosoft-accent-wash), transparent 60%);
}

.cricosoft-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .cricosoft-hero__inner {
    /* The copy column gets the slightly larger share, and the gap is kept
       tight. A wide gutter here left the headline wrapping in a narrow
       column while the visual floated off on its own. */
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 0.5rem + 2.2vw, 2.5rem);
  }
}

.cricosoft-hero__content { max-width: 40rem; }

.cricosoft-hero__title {
  font-size: var(--cricosoft-text-5xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: var(--cricosoft-space-6);
}

/* The one phrase that carries the promise, lifted out of the headline. */
.cricosoft-hero__title em {
  font-family: var(--cricosoft-font-quote);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cricosoft-brand-ink);
}

.cricosoft-hero__lede {
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
  max-width: 34rem;
  margin-bottom: var(--cricosoft-space-8);
}

.cricosoft-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cricosoft-space-3);
  margin-bottom: var(--cricosoft-space-8);
}

/* Stacked and full-width on a phone — two side-by-side buttons at 320px
   leaves neither with a readable label. */
@media (min-width: 480px) {
  .cricosoft-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.cricosoft-hero__actions .cricosoft-btn { width: 100%; }

@media (min-width: 480px) {
  .cricosoft-hero__actions .cricosoft-btn { width: auto; }
}

.cricosoft-hero__trust {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
  padding-top: var(--cricosoft-space-6);
  border-top: 1px solid var(--cricosoft-line);
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-muted);
}

.cricosoft-hero__trust-marks {
  display: flex;
  flex: none;
}

/* Three overlapping product initials, standing in for the ecosystem. */
.cricosoft-hero__trust-mark {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: -0.5rem;
  border-radius: 50%;
  border: 2px solid var(--cricosoft-bg);
  background: var(--cricosoft-surface-3);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-hero__trust-mark:nth-child(1) { background: var(--cricosoft-brand-500); color: #FFFFFF; }
.cricosoft-hero__trust-mark:nth-child(2) { background: var(--cricosoft-brand-700); color: #FFFFFF; }
.cricosoft-hero__trust-mark:nth-child(3) { background: var(--cricosoft-accent-500); color: #1A1206; }

.cricosoft-hero__visual { position: relative; }

/* ============================================================
   CREDIBILITY — masked gradient sweep
   ============================================================ */

.cricosoft-credibility { text-align: center; }

.cricosoft-credibility__title {
  font-size: var(--cricosoft-text-4xl);
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--cricosoft-space-6);
}

/* Travelling highlight through the letterforms. Runs once on entry,
   not on a loop — a looping headline is a distraction, not a feature. */
.cricosoft-sweep {
  background: linear-gradient(
    100deg,
    var(--cricosoft-fg) 0%,
    var(--cricosoft-fg) 38%,
    var(--cricosoft-brand-400) 50%,
    var(--cricosoft-fg) 62%,
    var(--cricosoft-fg) 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cricosoft-sweep.is-visible {
  animation: cricosoft-sweep 1700ms var(--cricosoft-ease-out) 220ms forwards;
}

@keyframes cricosoft-sweep {
  to { background-position: -30% 0; }
}

/* With motion reduced the text must still be plain readable — never
   transparent with no gradient behind it. */
@media (prefers-reduced-motion: reduce) {
  .cricosoft-sweep {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--cricosoft-fg);
  }
}

.cricosoft-credibility__text {
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
}

.cricosoft-credibility__text + .cricosoft-credibility__text {
  margin-top: var(--cricosoft-space-4);
}

/* ============================================================
   PRODUCTS
   Desktop: a stacked list, each product alternating side.
   Mobile: a horizontal scroll-snap carousel — three tall cards
   stacked vertically is a very long, very dull scroll.
   ============================================================ */

.cricosoft-products { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }

.cricosoft-product {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .cricosoft-product { grid-template-columns: 1fr 1fr; }

  /* Alternate which side the visual sits on. */
  .cricosoft-product:nth-child(even) .cricosoft-product__visual { order: -1; }
}

.cricosoft-product__body { max-width: 34rem; }

.cricosoft-product__name {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
  margin-bottom: var(--cricosoft-space-4);
  font-size: var(--cricosoft-text-2xl);
  letter-spacing: -0.028em;
}

.cricosoft-product__text {
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
  margin-bottom: var(--cricosoft-space-6);
}

.cricosoft-product__points {
  display: grid;
  gap: var(--cricosoft-space-3);
  margin-bottom: var(--cricosoft-space-8);
}

.cricosoft-product__point {
  display: flex;
  align-items: flex-start;
  gap: var(--cricosoft-space-3);
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-muted);
}

.cricosoft-product__point .cricosoft-icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--cricosoft-brand-ink);
}

/* ---------- Mobile carousel ---------- */

.cricosoft-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: var(--cricosoft-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Bleed to the viewport edges so the next card peeks in. */
  margin-inline: calc(var(--cricosoft-gutter) * -1);
  padding-inline: var(--cricosoft-gutter);
  padding-bottom: var(--cricosoft-space-4);
  overscroll-behavior-x: contain;
}

.cricosoft-carousel::-webkit-scrollbar { display: none; }

.cricosoft-carousel > * { scroll-snap-align: center; }

/* Above the carousel breakpoint it becomes an ordinary equal-column
   grid — same markup, no duplicated content, no JS involved. */
@media (min-width: 768px) {
  .cricosoft-carousel {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
}

.cricosoft-dots {
  display: flex;
  justify-content: center;
  /* No gap: each dot carries its own 44px of padding, so the marks still
     read as a tight row while the targets never touch. */
  gap: 0;
  margin-top: var(--cricosoft-space-3);
}

@media (min-width: 768px) {
  .cricosoft-dots { display: none; }
}

/* The button IS the 44px touch target and the visible dot is drawn inside
   it by ::before.

   This was previously an 8px button grown to 44px by an ::after with
   inset:-1.125rem. That looked identical but was broken by touch: with only
   an 8px gap between dots, neighbouring 44px expanders overlapped by 28px,
   and because a later sibling paints over an earlier one, the middle dot's
   own centre belonged to the dot after it. Tapping the middle dot moved the
   carousel to the third slide. Sizing the real button instead means flex
   gap keeps the targets apart, so each dot owns every pixel of its area. */
.cricosoft-dots__dot {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.cricosoft-dots__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cricosoft-radius-full);
  background: var(--cricosoft-surface-4);
  transition:
    width var(--cricosoft-dur) var(--cricosoft-ease-out),
    background var(--cricosoft-dur) var(--cricosoft-ease);
}

.cricosoft-dots__dot.is-active::before {
  width: 1.5rem;
  background: var(--cricosoft-brand-500);
}

/* Touch feedback: the dot itself is invisible, so press the mark inside. */
.cricosoft-dots__dot:active::before { scale: 0.9; }

/* ---------- Product card with a live visual ----------
   The card is unpadded and the media sits flush to its top edge, the
   same construction as the post card. The mock inside is the real
   animated component, not a screenshot of one. */

.cricosoft-product-card {
  padding: 0;
  overflow: hidden;
}

.cricosoft-product-card__media {
  position: relative;
  padding: var(--cricosoft-space-5) var(--cricosoft-space-5) 0;
  border-bottom: 1px solid var(--cricosoft-line);
  background:
    radial-gradient(22rem 12rem at 50% 0%, var(--cricosoft-brand-wash-2), transparent 70%),
    var(--cricosoft-bg-subtle);
  /* A fixed viewport onto the mock: the three have different natural
     heights, and a ragged row of cards looks accidental. */
  height: 14.5rem;
  overflow: hidden;
}

/* The mock is anchored to the top of that viewport and allowed to run
   past the bottom edge, so each card shows its most recognisable part. */
.cricosoft-product-card__media .cricosoft-mock {
  box-shadow: var(--cricosoft-shadow);
}

.cricosoft-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* The mock is taller than the viewport that frames it, so the bottom
   edge is a crop. Fading it out makes that read as intentional rather
   than as a card that has been chopped in half. */
.cricosoft-product-card__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3.25rem;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--cricosoft-bg-subtle) 92%, transparent));
}

/* One row of themes in the card too. Two rows get sliced by the bottom
   of the media viewport, which reads as a clipping bug rather than as a
   crop. The full six-tile grid still appears on the products page. */
.cricosoft-product-card__media .cricosoft-mock-theme:nth-child(n+4) { display: none; }

/* The spotlight highlight would be hidden behind the opaque media panel. */
.cricosoft-product-card.cricosoft-spotlight::before { display: none; }

/* ---------- "More in development" tile ---------- */

.cricosoft-product-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cricosoft-space-4);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  text-align: center;
  border: 1px dashed var(--cricosoft-line-strong);
  border-radius: var(--cricosoft-radius-lg);
  background: var(--cricosoft-surface-1);
}

/* The homepage carries a one-line version of this. Stacked and padded
   like the full-page variant it became a tall, near-empty box, which
   read as an unfinished section rather than a quiet aside. */
.cricosoft-product-more--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--cricosoft-space-4);
  padding: var(--cricosoft-space-5) var(--cricosoft-space-6);
  text-align: left;
}

.cricosoft-product-more--inline .cricosoft-product-more__text {
  max-width: none;
}

.cricosoft-product-more__text {
  max-width: 34ch;
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-base);
}

/* ============================================================
   WHY US
   ============================================================ */

/* Heading and statement on one side, the six capabilities on the other.
   They are supplied as labels with no body copy, so a card grid would be
   mostly empty space — a marker list carries them better. */
.cricosoft-why__inner {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4rem);
}

@media (min-width: 900px) {
  .cricosoft-why__inner {
    grid-template-columns: 1fr 1.05fr;
    /* Centred, not top-aligned: the heading column is the taller of the
       two, and start-aligning left an obvious empty block under the list. */
    align-items: center;
  }
}

.cricosoft-why__heading {
  font-size: var(--cricosoft-text-3xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--cricosoft-space-5);
}

.cricosoft-marks {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cricosoft-line);
}

@media (min-width: 560px) {
  .cricosoft-marks { grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); }
}

.cricosoft-mark {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
  min-height: 3.5rem;
  padding-block: var(--cricosoft-space-3);
  border-bottom: 1px solid var(--cricosoft-line);
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cricosoft-fg);
}

.cricosoft-mark__icon {
  flex: none;
  color: var(--cricosoft-brand-ink);
}

/* A short framing statement under the heading. */
.cricosoft-why__statement {
  max-width: 44ch;
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.022em;
  color: var(--cricosoft-fg);
}

.cricosoft-why__statement span { color: var(--cricosoft-fg-muted); }

/* ============================================================
   VISION — the question
   ============================================================ */

.cricosoft-vision__inner {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .cricosoft-vision__inner { grid-template-columns: 1fr 1.1fr; }
}

.cricosoft-vision__title {
  font-size: var(--cricosoft-text-3xl);
  letter-spacing: -0.03em;
}

.cricosoft-vision__text {
  margin-top: var(--cricosoft-space-5);
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
  max-width: 44ch;
}

/* The single strongest typographic moment on the page: the question the
   company asks itself before building anything. */
.cricosoft-question {
  position: relative;
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  border-radius: var(--cricosoft-radius-xl);
  border: 1px solid var(--cricosoft-line-brand);
  background:
    linear-gradient(150deg, var(--cricosoft-brand-wash), transparent 70%),
    var(--cricosoft-surface-1);
}

.cricosoft-question__mark {
  display: block;
  font-family: var(--cricosoft-font-quote);
  font-style: italic;
  font-size: clamp(3.5rem, 2rem + 7vw, 6rem);
  line-height: .7;
  color: var(--cricosoft-brand-400);
  opacity: .4;
  margin-bottom: var(--cricosoft-space-2);
}

.cricosoft-question__text {
  font-family: var(--cricosoft-font-quote);
  font-style: italic;
  font-size: var(--cricosoft-text-2xl);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--cricosoft-fg);
}

.cricosoft-question__answer {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  margin-top: var(--cricosoft-space-6);
  padding-top: var(--cricosoft-space-5);
  border-top: 1px solid var(--cricosoft-line);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  color: var(--cricosoft-brand-ink);
}

/* ============================================================
   PHILOSOPHY — the three negations
   Each "No ..." line strikes through and fades as it enters, then the
   affirmation lands on its own. This is what keeps Philosophy from
   reading as a restatement of Vision.
   ============================================================ */

.cricosoft-philosophy { text-align: center; }

.cricosoft-philosophy__title {
  font-size: var(--cricosoft-text-3xl);
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

.cricosoft-negations {
  display: grid;
  gap: var(--cricosoft-space-4);
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

.cricosoft-negation {
  position: relative;
  display: inline-block;
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cricosoft-fg-muted);
  transition: color var(--cricosoft-dur-slow) var(--cricosoft-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* The strike is a pseudo-element, not text-decoration, so it can be
   animated from zero width. */
.cricosoft-negation::after {
  content: "";
  position: absolute;
  left: 0;
  top: 52%;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--cricosoft-brand-500);
  transition: width var(--cricosoft-dur-xslow) var(--cricosoft-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.cricosoft-negation.is-visible {
  color: var(--cricosoft-fg-subtle);
  opacity: .72;
}

.cricosoft-negation.is-visible::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cricosoft-negation::after { display: none; }
  .cricosoft-negation.is-visible { opacity: 1; }
}

.cricosoft-philosophy__affirmation {
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-2xl);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.25;
  max-width: 24ch;
  margin-inline: auto;
  color: var(--cricosoft-fg);
}

.cricosoft-philosophy__affirmation span { color: var(--cricosoft-brand-ink); }

/* ============================================================
   NUMBERS
   Two of the four values are words, not figures. Numeric ones count up;
   word ones get a matched blur-to-sharp reveal on the same curve, so
   the row reads as one deliberate gesture rather than a broken counter.
   ============================================================ */

/* One column on the narrowest phones. Two of the four values are words
   set at display size — "Thousands" simply cannot share a 320px row with
   another tile without either overflowing or shrinking to a size that
   stops reading as a statistic. */
.cricosoft-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius-lg);
  background: var(--cricosoft-line);
  overflow: hidden;
}

@media (min-width: 480px) {
  .cricosoft-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Four across only once each track is wide enough for "Thousands" at the
   capped size. At 900px it was not, and the word wrapped. */
@media (min-width: 1120px) {
  .cricosoft-stats { grid-template-columns: repeat(4, 1fr); }
}

.cricosoft-stat {
  display: flex;
  flex-direction: column;
  gap: var(--cricosoft-space-2);
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
  background: var(--cricosoft-surface-1);
  /* Grid items default to min-width:auto, which lets a long unbreakable
     word push the whole track wider than its share. */
  min-width: 0;
}

.cricosoft-stat__value {
  font-family: var(--cricosoft-font-display);
  /* Its own ramp, capped well below --text-3xl. The longest value is the
     single word "Thousands", and the ceiling is set so that word fits on
     one line inside the narrowest track this grid ever produces. */
  font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.125rem);
  /* Never break inside a word. break-word split "Thousands" across two
     lines as "Thousand" / "s", which looks like a rendering fault. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  /* tabular-nums stops the tile jittering as digits change during the
     count-up. Without it the whole row shimmies. */
  font-variant-numeric: tabular-nums;
  color: var(--cricosoft-fg);
}

.cricosoft-stat--accent .cricosoft-stat__value { color: var(--cricosoft-accent-ink); }

/* Word-valued stats: blur to sharp, same duration as the count-up.
   Guarded by :not(.no-js) for the same reason .cricosoft-reveal is — only
   JavaScript adds .is-visible, so without it these would stay invisible
   and the figures would simply be missing from the page. */
html:not(.no-js) .cricosoft-stat__value--word {
  filter: blur(10px);
  opacity: 0;
  transition:
    filter var(--cricosoft-dur-xslow) var(--cricosoft-ease-out),
    opacity var(--cricosoft-dur-xslow) var(--cricosoft-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

html:not(.no-js) .cricosoft-stat__value--word.is-visible { filter: blur(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .cricosoft-stat__value--word { filter: none; opacity: 1; }
}

.cricosoft-stat__label {
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  color: var(--cricosoft-fg);
}

.cricosoft-stat__note {
  font-size: var(--cricosoft-text-xs);
  color: var(--cricosoft-fg-subtle);
}

/* ============================================================
   FUTURE
   ============================================================ */

.cricosoft-future {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* A horizon: light rising from the bottom edge of the section. */
.cricosoft-future::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    var(--cricosoft-brand-wash-2),
    transparent 70%);
}

.cricosoft-future__inner { position: relative; z-index: 1; }

.cricosoft-future__title {
  font-size: var(--cricosoft-text-4xl);
  letter-spacing: -0.032em;
  margin-bottom: var(--cricosoft-space-5);
}

.cricosoft-future__text {
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
}

.cricosoft-future__kicker {
  display: inline-block;
  margin-top: var(--cricosoft-space-8);
  padding: var(--cricosoft-space-4) var(--cricosoft-space-6);
  border-radius: var(--cricosoft-radius-full);
  border: 1px solid var(--cricosoft-line-brand);
  background: var(--cricosoft-surface-1);
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cricosoft-fg);
}

/* ============================================================
   CTA
   ============================================================ */

.cricosoft-cta {
  position: relative;
  padding: clamp(2rem, 1.4rem + 4vw, 4.5rem);
  border-radius: var(--cricosoft-radius-xl);
  border: 1px solid var(--cricosoft-line-brand);
  background:
    radial-gradient(40rem 20rem at 20% 0%, var(--cricosoft-brand-wash-2), transparent 65%),
    radial-gradient(30rem 18rem at 88% 100%, var(--cricosoft-accent-wash), transparent 62%),
    var(--cricosoft-surface-1);
  overflow: hidden;
  text-align: center;
}

.cricosoft-cta__title {
  font-size: var(--cricosoft-text-3xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--cricosoft-space-4);
}

.cricosoft-cta__text {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--cricosoft-space-8);
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
}

.cricosoft-cta__audiences {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cricosoft-space-2);
  margin-bottom: var(--cricosoft-space-8);
}

.cricosoft-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cricosoft-space-3);
  align-items: center;
}

@media (min-width: 480px) {
  .cricosoft-cta__actions { flex-direction: row; justify-content: center; }
}

.cricosoft-cta__actions .cricosoft-btn { width: 100%; }

@media (min-width: 480px) {
  .cricosoft-cta__actions .cricosoft-btn { width: auto; }
}

/* ============================================================
   PAGE HERO — inner pages
   ============================================================ */

.cricosoft-page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.6rem + 5vw, 5.5rem) clamp(2rem, 1.4rem + 4vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--cricosoft-line);
}

.cricosoft-page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(42rem 24rem at 30% 0%, var(--cricosoft-brand-wash), transparent 62%);
}

.cricosoft-page-hero__inner { position: relative; z-index: 1; }

.cricosoft-page-hero__title {
  font-size: var(--cricosoft-text-4xl);
  letter-spacing: -0.032em;
  max-width: 22ch;
  margin-bottom: var(--cricosoft-space-5);
}

.cricosoft-page-hero__lede {
  max-width: 56ch;
  font-size: var(--cricosoft-text-md);
  color: var(--cricosoft-fg-muted);
}

/* ---------- Breadcrumb ---------- */

.cricosoft-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cricosoft-space-2);
  margin-bottom: var(--cricosoft-space-5);
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-subtle);
}

/* Flex items, so they do not get WCAG 2.5.8's inline-text exemption —
   they need the 24px minimum target height in their own right. */
.cricosoft-crumbs a {
  display: inline-flex;
  align-items: center;
  /* 24px clears WCAG 2.5.8 AA but is a mean target for a thumb. The row
     is centred, so the extra height is padding around the text and the
     breadcrumb still looks the same. */
  min-height: 2.75rem;
  color: var(--cricosoft-fg-muted);
  text-decoration: none;
}
.cricosoft-crumbs a:hover { color: var(--cricosoft-brand-ink); }
.cricosoft-crumbs__sep { opacity: .5; }

/* ============================================================
   ABOUT — "how we work" numbered list
   ============================================================ */

.cricosoft-principles { display: grid; gap: var(--cricosoft-space-6); }

@media (min-width: 768px) {
  .cricosoft-principles { grid-template-columns: repeat(2, 1fr); gap: var(--cricosoft-space-8); }
}

.cricosoft-principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cricosoft-space-4);
  align-items: start;
}

.cricosoft-principle__num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--cricosoft-radius-sm);
  border: 1px solid var(--cricosoft-line-brand);
  background: var(--cricosoft-brand-wash);
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cricosoft-brand-ink);
}

.cricosoft-principle__title {
  font-size: var(--cricosoft-text-md);
  margin-bottom: var(--cricosoft-space-2);
}

.cricosoft-principle__text {
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-muted);
}

/* ---------- Story split ---------- */

.cricosoft-story {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4rem);
}

@media (min-width: 900px) {
  .cricosoft-story { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ============================================================
   BLOG
   ============================================================ */

.cricosoft-posts { display: grid; gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem); }

@media (min-width: 640px) { .cricosoft-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cricosoft-posts { grid-template-columns: repeat(3, 1fr); } }

.cricosoft-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* A generated cover — a tinted gradient plus the category glyph. No
   images to source, and it stays on-brand automatically. */
.cricosoft-post-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--cricosoft-line);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--cricosoft-brand-500) 22%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2) 70%);
  color: var(--cricosoft-brand-ink);
}

.cricosoft-post-card[data-category="Engineering"] .cricosoft-post-card__cover {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--cricosoft-accent-500) 22%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2) 70%);
  color: var(--cricosoft-accent-ink);
}

.cricosoft-post-card[data-category="Design"] .cricosoft-post-card__cover {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--cricosoft-brand-300) 30%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2) 70%);
}

.cricosoft-post-card[data-category="Company"] .cricosoft-post-card__cover {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--cricosoft-brand-800) 26%, var(--cricosoft-surface-2)),
    var(--cricosoft-surface-2) 70%);
}

.cricosoft-post-card__cover .cricosoft-icon { opacity: .55; }

.cricosoft-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--cricosoft-space-6);
}

.cricosoft-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cricosoft-space-2);
  margin-bottom: var(--cricosoft-space-3);
  font-size: var(--cricosoft-text-xs);
  color: var(--cricosoft-fg-subtle);
}

.cricosoft-post-card__cat {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cricosoft-brand-ink);
}

.cricosoft-post-card__title {
  font-size: var(--cricosoft-text-md);
  line-height: 1.3;
  margin-bottom: var(--cricosoft-space-3);
}

/* Stretched link: the whole card is clickable, but only the title is in
   the tab order and only the title text is announced as the link. */
.cricosoft-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.cricosoft-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cricosoft-post-card__excerpt {
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-muted);
  margin-bottom: var(--cricosoft-space-5);
}

.cricosoft-post-card__foot {
  margin-top: auto;
  font-size: var(--cricosoft-text-xs);
  color: var(--cricosoft-fg-subtle);
}

/* ---------- Featured post ---------- */

@media (min-width: 900px) {
  .cricosoft-post-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
  }

  .cricosoft-post-card--featured .cricosoft-post-card__cover {
    aspect-ratio: auto;
    height: 100%;
    border-bottom: none;
    border-right: 1px solid var(--cricosoft-line);
  }

  .cricosoft-post-card--featured .cricosoft-post-card__body {
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    justify-content: center;
  }

  .cricosoft-post-card--featured .cricosoft-post-card__title {
    font-size: var(--cricosoft-text-2xl);
  }
}

/* ---------- Empty state for the filter ---------- */

.cricosoft-posts-empty {
  display: none;
  padding: var(--cricosoft-space-16) var(--cricosoft-space-6);
  text-align: center;
  color: var(--cricosoft-fg-muted);
  border: 1px dashed var(--cricosoft-line-strong);
  border-radius: var(--cricosoft-radius-lg);
}

.cricosoft-posts-empty.is-shown { display: block; }

/* ---------- Pagination ---------- */

.cricosoft-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cricosoft-space-2);
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}

.cricosoft-pagination[hidden] { display: none; }

.cricosoft-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  min-height: 2.75rem;
  padding: 0 var(--cricosoft-space-4);
  border: 1px solid var(--cricosoft-line-strong);
  border-radius: var(--cricosoft-radius-full);
  background: var(--cricosoft-surface-1);
  color: var(--cricosoft-fg);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    background var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

.cricosoft-pagination__btn:hover:not(:disabled) {
  border-color: var(--cricosoft-brand-500);
  background: var(--cricosoft-surface-2);
}

/* Disabled rather than removed: the control must not change width as you
   move between the first and last page. */
.cricosoft-pagination__btn:disabled {
  opacity: .4;
  cursor: default;
}

/* On a phone the arrows carry the meaning and the words are dead weight. */
@media (max-width: 480px) {
  .cricosoft-pagination__btn span { display: none; }
  .cricosoft-pagination__btn { padding-inline: var(--cricosoft-space-3); }
}

.cricosoft-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-1);
  margin: 0 var(--cricosoft-space-2);
  padding: 0;
  list-style: none;
}

.cricosoft-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--cricosoft-space-2);
  border: 1px solid transparent;
  border-radius: var(--cricosoft-radius-full);
  background: transparent;
  color: var(--cricosoft-fg-muted);
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background var(--cricosoft-dur-fast) var(--cricosoft-ease),
    color var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

/* An inactive page was transparent with a transparent border, which next
   to the outlined arrows and the filled current page read as plain text.
   On a phone there is no hover to reveal otherwise, so the outline has to
   be there from the start. */
.cricosoft-pagination__page {
  border-color: var(--cricosoft-line);
}

.cricosoft-pagination__page:hover {
  background: var(--cricosoft-surface-2);
  border-color: var(--cricosoft-line-strong);
  color: var(--cricosoft-fg);
}

.cricosoft-pagination__page[aria-current="page"] {
  background: var(--cricosoft-brand-500);
  border-color: var(--cricosoft-brand-500);
  color: #FFFFFF;
}

.cricosoft-pagination__status {
  margin-top: var(--cricosoft-space-4);
  text-align: center;
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-subtle);
}

/* ============================================================
   BLOG POST
   ============================================================ */

.cricosoft-article { padding-block: var(--cricosoft-section-y-tight); }

.cricosoft-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cricosoft-space-3);
  margin-bottom: var(--cricosoft-space-6);
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-subtle);
}

.cricosoft-article__body { margin-top: var(--cricosoft-space-10); }

.cricosoft-article__lead {
  font-size: var(--cricosoft-text-lg);
  line-height: 1.55;
  color: var(--cricosoft-fg);
  margin-bottom: var(--cricosoft-space-8);
}

.cricosoft-article__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cricosoft-space-3);
  margin-top: var(--cricosoft-space-12);
  padding-top: var(--cricosoft-space-6);
  border-top: 1px solid var(--cricosoft-line);
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-muted);
}

/* ============================================================
   CONTACT
   ============================================================ */

.cricosoft-contact {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .cricosoft-contact { grid-template-columns: 1fr 1.25fr; }
}

.cricosoft-contact__aside { display: grid; gap: var(--cricosoft-space-4); }

.cricosoft-contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--cricosoft-space-4);
  padding: var(--cricosoft-space-5);
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius);
  background: var(--cricosoft-surface-1);
}

.cricosoft-contact-card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--cricosoft-radius-sm);
  background: var(--cricosoft-brand-wash);
  color: var(--cricosoft-brand-ink);
}

.cricosoft-contact-card__label {
  font-size: var(--cricosoft-text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cricosoft-fg-subtle);
  margin-bottom: 2px;
}

.cricosoft-contact-card__value {
  font-size: var(--cricosoft-text-base);
  font-weight: 500;
  color: var(--cricosoft-fg);
  word-break: break-word;
}

.cricosoft-contact-card__value a { color: inherit; text-decoration: none; }
.cricosoft-contact-card__value a:hover { color: var(--cricosoft-brand-ink); }

.cricosoft-contact__panel {
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius-lg);
  background: var(--cricosoft-surface-1);
  box-shadow: var(--cricosoft-shadow);
}

/* ============================================================
   404
   ============================================================ */

.cricosoft-notfound {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 70svh;
  padding-block: var(--cricosoft-section-y);
}

.cricosoft-notfound__code {
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-6xl);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(135deg, var(--cricosoft-brand-500), var(--cricosoft-accent-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--cricosoft-space-4);
}