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

   Everything reusable across pages: header, nav, drawer, buttons,
   cards, badges, forms, footer, and the small interactive bits
   (theme toggle, to-top, progress bar, filter pills, accordion).
   ============================================================ */

/* ============================================================
   ICON SPRITE
   The sprite itself lives at the top of index.html and is mirrored
   into every other page. This just makes <use> references size right.
   ============================================================ */

.cricosoft-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cricosoft-icon--sm { width: 1em;    height: 1em; }
.cricosoft-icon--lg { width: 1.6em;  height: 1.6em; }
.cricosoft-icon--xl { width: 2.25em; height: 2.25em; }

/* ============================================================
   READING PROGRESS
   A 2px bar pinned to the very top. Width is driven from JS via --p.
   ============================================================ */

.cricosoft-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: calc(var(--cricosoft-z-header) + 1);
  background: transparent;
  pointer-events: none;
}

.cricosoft-progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  scale: var(--p, 0) 1;
  background: linear-gradient(90deg,
    var(--cricosoft-brand-500),
    var(--cricosoft-brand-300) 60%,
    var(--cricosoft-accent-500));
  transition: scale 90ms linear;
}

/* ============================================================
   HEADER
   Transparent over the hero, then frosts and gains a hairline once
   the page scrolls (.is-stuck, set by JS).
   ============================================================ */

.cricosoft-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--cricosoft-z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--cricosoft-dur) var(--cricosoft-ease),
    border-color var(--cricosoft-dur) var(--cricosoft-ease),
    box-shadow var(--cricosoft-dur) var(--cricosoft-ease);
  /* Respects notched devices in landscape. */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.cricosoft-header.is-stuck {
  background: light-dark(rgba(255, 255, 255, .78), rgba(8, 8, 13, .72));
  border-bottom-color: var(--cricosoft-line);
  box-shadow: var(--cricosoft-shadow-sm);
}

@supports (backdrop-filter: blur(1px)) {
  .cricosoft-header.is-stuck {
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}

.cricosoft-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-4);
  min-height: 4.25rem;
}

/* ---------- Brand mark ---------- */

.cricosoft-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-3);
  color: var(--cricosoft-fg);
  font-family: var(--cricosoft-font-display);
  font-weight: 700;
  font-size: var(--cricosoft-text-md);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
  /* The logo is the "go home" control and sat at 32px tall. Nothing moves
     visually — align-items keeps the mark centred — but the tap area now
     fills the header bar. */
  min-height: 2.75rem;
}

.cricosoft-brand:hover { color: var(--cricosoft-fg); }
.cricosoft-brand__logo { width: 2rem; height: 2rem; }

.cricosoft-brand__text { white-space: nowrap; }
.cricosoft-brand__text span { color: var(--cricosoft-brand-ink); }

/* ---------- Primary nav (desktop) ---------- */

.cricosoft-nav { display: none; }

@media (min-width: 1024px) {
  .cricosoft-nav {
    display: flex;
    align-items: center;
    gap: var(--cricosoft-space-1);
    margin-inline: auto;
  }
}

.cricosoft-nav__link {
  position: relative;
  padding: var(--cricosoft-space-2) var(--cricosoft-space-4);
  border-radius: var(--cricosoft-radius-full);
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-sm);
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    background var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

.cricosoft-nav__link:hover {
  color: var(--cricosoft-fg);
  background: var(--cricosoft-surface-2);
}

.cricosoft-nav__link[aria-current="page"] {
  color: var(--cricosoft-fg);
  font-weight: 600;
}

/* The active pill. Drawn behind the label so the text stays crisp. */
.cricosoft-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--cricosoft-brand-wash);
  border: 1px solid var(--cricosoft-line-brand);
}

/* ---------- Header actions ---------- */

.cricosoft-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  flex: none;
}

/* Scoped to the actions bar on purpose. A bare .cricosoft-header__cta
   would tie with .cricosoft-btn on specificity and lose on source order,
   because the button block is declared later in this file — which left
   the CTA visible on phones and pushed the menu button off-screen. */
.cricosoft-header__actions .cricosoft-header__cta { display: none; }

@media (min-width: 640px) {
  .cricosoft-header__actions .cricosoft-header__cta { display: inline-flex; }
}

/* ============================================================
   ICON BUTTON
   The 44px floor is the accessible touch-target minimum and applies
   on desktop too — a small pointer target is not a virtue.
   ============================================================ */

.cricosoft-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--cricosoft-radius-full);
  border: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-surface-1);
  color: var(--cricosoft-fg-muted);
  cursor: pointer;
  transition:
    color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    background var(--cricosoft-dur-fast) var(--cricosoft-ease),
    border-color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    scale var(--cricosoft-dur-fast) var(--cricosoft-ease-spring);
}

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

.cricosoft-icon-btn:active { scale: .94; }

/* ---------- Theme toggle ----------
   Two glyphs in one button; which one shows is decided by the
   data-theme attribute on <html> so there is no flash on load. */

.cricosoft-theme__icon { position: absolute; }

:root[data-theme="dark"]  .cricosoft-theme__icon--sun,
:root[data-theme="light"] .cricosoft-theme__icon--moon { opacity: 1; scale: 1; }

:root[data-theme="dark"]  .cricosoft-theme__icon--moon,
:root[data-theme="light"] .cricosoft-theme__icon--sun { opacity: 0; scale: .5; }

.cricosoft-theme__icon {
  transition:
    opacity var(--cricosoft-dur) var(--cricosoft-ease),
    scale var(--cricosoft-dur) var(--cricosoft-ease-spring);
}

.cricosoft-theme {
  position: relative;
  overflow: hidden;
}

/* ---------- Drawer trigger ---------- */

.cricosoft-burger { display: inline-flex; }

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

.cricosoft-burger__box {
  position: relative;
  width: 18px;
  height: 12px;
}

.cricosoft-burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition:
    translate var(--cricosoft-dur) var(--cricosoft-ease-out),
    rotate var(--cricosoft-dur) var(--cricosoft-ease-out),
    opacity var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

.cricosoft-burger__bar:nth-child(1) { top: 0; }
.cricosoft-burger__bar:nth-child(2) { top: 50%; translate: 0 -50%; }
.cricosoft-burger__bar:nth-child(3) { bottom: 0; }

.cricosoft-burger[aria-expanded="true"] .cricosoft-burger__bar:nth-child(1) {
  top: 50%; translate: 0 -50%; rotate: 45deg;
}
.cricosoft-burger[aria-expanded="true"] .cricosoft-burger__bar:nth-child(2) { opacity: 0; }
.cricosoft-burger[aria-expanded="true"] .cricosoft-burger__bar:nth-child(3) {
  bottom: 50%; translate: 0 50%; rotate: -45deg;
}

/* ============================================================
   MOBILE DRAWER
   Full-height sheet, focus-trapped, with the page behind it inert
   and scroll-locked. Both handled in JS.
   ============================================================ */

.cricosoft-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--cricosoft-z-scrim);
  background: light-dark(rgba(12, 12, 24, .45), rgba(0, 0, 0, .62));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--cricosoft-dur) var(--cricosoft-ease),
    visibility 0s linear var(--cricosoft-dur);
}

.cricosoft-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@supports (backdrop-filter: blur(1px)) {
  .cricosoft-scrim { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}

.cricosoft-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--cricosoft-z-drawer);
  width: min(22rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--cricosoft-surface-1);
  border-inline-start: 1px solid var(--cricosoft-line);
  box-shadow: var(--cricosoft-shadow-lg);
  translate: 100% 0;
  visibility: hidden;
  overscroll-behavior: contain;
  /* dvh, not vh — mobile browser chrome must not crop the last link. */
  height: 100dvh;
  padding-block-end: env(safe-area-inset-bottom);
  transition:
    translate var(--cricosoft-dur-slow) var(--cricosoft-ease-out),
    visibility 0s linear var(--cricosoft-dur-slow);
}

.cricosoft-drawer.is-open {
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}

.cricosoft-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-4);
  padding: var(--cricosoft-space-4) var(--cricosoft-space-5);
  border-bottom: 1px solid var(--cricosoft-line);
  min-height: 4.25rem;
}

.cricosoft-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--cricosoft-space-5);
}

.cricosoft-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--cricosoft-space-1);
}

.cricosoft-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-3);
  min-height: 3rem;
  padding: var(--cricosoft-space-3) var(--cricosoft-space-4);
  border-radius: var(--cricosoft-radius);
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-md);
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--cricosoft-dur-fast) var(--cricosoft-ease),
    color var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

.cricosoft-drawer__link:hover { background: var(--cricosoft-surface-2); color: var(--cricosoft-fg); }

.cricosoft-drawer__link[aria-current="page"] {
  background: var(--cricosoft-brand-wash);
  color: var(--cricosoft-brand-ink);
  font-weight: 600;
}

.cricosoft-drawer__foot {
  padding: var(--cricosoft-space-5);
  border-top: 1px solid var(--cricosoft-line);
  display: grid;
  gap: var(--cricosoft-space-3);
}

/* Landscape phones. The panel is full height, so on a 320px-tall screen the
   head (68px) and the pinned foot (154px) left 98px for the navigation:
   two links of five, in a scroller with nothing to say it scrolled.

   Everything was reachable, but the split was backwards — the calls to
   action were holding more height than the menu. Below 34rem the drawer
   stops being three fixed bands and becomes one column that scrolls, with
   the brand and close button sticky at the top. The nav then opens fully
   visible and the CTAs sit just beneath it.

   Keyed to height alone, so a portrait phone of any width is untouched. */
@media (max-height: 34rem) {
  .cricosoft-drawer {
    overflow-y: auto;
    /* iOS reports 100dvh before the URL bar settles; min-height lets the
       column grow past it rather than trapping the foot. */
    height: auto;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .cricosoft-drawer__head {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 3.25rem;
    padding-block: var(--cricosoft-space-2);
    background: var(--cricosoft-surface-1);
  }

  /* No longer the scroll container — the drawer is. */
  .cricosoft-drawer__body {
    flex: 0 0 auto;
    overflow-y: visible;
    padding-block: var(--cricosoft-space-3);
  }

  .cricosoft-drawer__link {
    min-height: 2.75rem;
    padding-block: var(--cricosoft-space-2);
  }

  .cricosoft-drawer__foot {
    padding-block: var(--cricosoft-space-3);
    gap: var(--cricosoft-space-2);
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.cricosoft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cricosoft-space-2);
  min-height: 2.875rem;
  padding: var(--cricosoft-space-3) var(--cricosoft-space-6);
  border: 1px solid transparent;
  border-radius: var(--cricosoft-radius-full);
  font-family: var(--cricosoft-font-body);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--cricosoft-dur-fast) var(--cricosoft-ease),
    border-color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    box-shadow var(--cricosoft-dur) var(--cricosoft-ease),
    translate var(--cricosoft-dur-fast) var(--cricosoft-ease-spring);
}

.cricosoft-btn:active { translate: 0 1px; }

.cricosoft-btn__icon { transition: translate var(--cricosoft-dur) var(--cricosoft-ease-out); }
.cricosoft-btn:hover .cricosoft-btn__icon { translate: 3px 0; }

/* ---------- Variants ---------- */

.cricosoft-btn--primary {
  background: var(--cricosoft-brand-500);
  color: #FFFFFF;
  box-shadow: var(--cricosoft-shadow-brand);
}

.cricosoft-btn--primary:hover {
  background: var(--cricosoft-brand-600);
  color: #FFFFFF;
}

.cricosoft-btn--secondary {
  background: var(--cricosoft-surface-1);
  border-color: var(--cricosoft-line-strong);
  color: var(--cricosoft-fg);
}

.cricosoft-btn--secondary:hover {
  background: var(--cricosoft-surface-2);
  border-color: var(--cricosoft-brand-500);
  color: var(--cricosoft-fg);
}

.cricosoft-btn--ghost {
  background: transparent;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-btn--ghost:hover {
  background: var(--cricosoft-surface-2);
  color: var(--cricosoft-fg);
}

.cricosoft-btn--lg {
  min-height: 3.25rem;
  padding-inline: var(--cricosoft-space-8);
  font-size: var(--cricosoft-text-base);
}

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

.cricosoft-btn[disabled],
.cricosoft-btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

/* ---------- Text link with arrow ---------- */

.cricosoft-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  /* A standalone call-to-action link, not a link inside a sentence, so
     it takes the same 44px target floor as a button rather than the
     inline exemption. */
  min-height: 2.75rem;
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  color: var(--cricosoft-brand-ink);
  text-decoration: none;
}

.cricosoft-link .cricosoft-icon {
  transition: translate var(--cricosoft-dur) var(--cricosoft-ease-out);
}

.cricosoft-link:hover .cricosoft-icon { translate: 3px 0; }

/* ============================================================
   BADGE / PILL
   ============================================================ */

.cricosoft-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  padding: var(--cricosoft-space-2) var(--cricosoft-space-4);
  border-radius: var(--cricosoft-radius-full);
  border: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-surface-2);
  font-size: var(--cricosoft-text-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cricosoft-fg-muted);
}

.cricosoft-badge--brand {
  background: var(--cricosoft-brand-wash);
  border-color: var(--cricosoft-line-brand);
  color: var(--cricosoft-brand-ink);
}

.cricosoft-badge--accent {
  background: var(--cricosoft-accent-wash);
  border-color: color-mix(in srgb, var(--cricosoft-accent-500) 30%, transparent);
  color: var(--cricosoft-accent-ink);
}

/* A live dot for "in development" style badges. */
.cricosoft-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: cricosoft-pulse 2.4s var(--cricosoft-ease) infinite;
}

@keyframes cricosoft-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ============================================================
   CARD
   ============================================================ */

.cricosoft-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius-lg);
  background: var(--cricosoft-surface-1);
  transition:
    border-color var(--cricosoft-dur) var(--cricosoft-ease),
    box-shadow var(--cricosoft-dur) var(--cricosoft-ease),
    translate var(--cricosoft-dur) var(--cricosoft-ease-out);
}

.cricosoft-card--lift:hover {
  border-color: var(--cricosoft-line-strong);
  box-shadow: var(--cricosoft-shadow-lg);
  translate: 0 -4px;
}

.cricosoft-card__title { margin-bottom: var(--cricosoft-space-3); }

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

.cricosoft-card__foot {
  margin-top: auto;
  padding-top: var(--cricosoft-space-6);
}

/* ---------- Spotlight ----------
   A cursor-following radial highlight. --mx/--my are written by JS as
   percentages; with no JS the gradient simply never moves. */

.cricosoft-spotlight::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    18rem circle at var(--mx, 50%) var(--my, 0%),
    var(--cricosoft-brand-wash-2),
    transparent 62%);
  transition: opacity var(--cricosoft-dur-slow) var(--cricosoft-ease);
}

.cricosoft-spotlight:hover::before { opacity: 1; }
.cricosoft-spotlight > * { position: relative; z-index: 1; }

@media (hover: none) {
  .cricosoft-spotlight::before { display: none; }
}

/* ---------- Card icon ---------- */

.cricosoft-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--cricosoft-space-5);
  border-radius: var(--cricosoft-radius);
  border: 1px solid var(--cricosoft-line-brand);
  background: var(--cricosoft-brand-wash);
  color: var(--cricosoft-brand-ink);
}

/* ============================================================
   FILTER PILLS
   Used on the blog listing. Scrolls horizontally on a phone rather
   than wrapping into three ragged rows.
   ============================================================ */

.cricosoft-filters {
  display: flex;
  gap: var(--cricosoft-space-2);
  margin-bottom: var(--cricosoft-space-8);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--cricosoft-space-1);
  /* Bleed to the viewport edge so the row does not look clipped. */
  margin-inline: calc(var(--cricosoft-gutter) * -1);
  padding-inline: var(--cricosoft-gutter);
  scroll-snap-type: x proximity;
}

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

/* The row scrolls past the right edge with no scrollbar to say so. A short
   fade over the trailing edge is the only cue that there is more; it is
   masked out once the row wraps instead of scrolling. */
@media (max-width: 767.98px) {
  .cricosoft-filters {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
}

@media (min-width: 768px) {
  .cricosoft-filters {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.cricosoft-filter {
  flex: none;
  min-height: 2.5rem;
  padding: var(--cricosoft-space-2) var(--cricosoft-space-5);
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius-full);
  background: var(--cricosoft-surface-1);
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-sm);
  font-weight: 500;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background var(--cricosoft-dur-fast) var(--cricosoft-ease),
    border-color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    color var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

.cricosoft-filter:hover {
  border-color: var(--cricosoft-line-strong);
  color: var(--cricosoft-fg);
}

.cricosoft-filter[aria-pressed="true"] {
  background: var(--cricosoft-brand-500);
  border-color: var(--cricosoft-brand-500);
  color: #FFFFFF;
}

/* Filtered-out cards are removed from the flow and from the a11y tree. */
.cricosoft-filterable.is-hidden { display: none; }

.cricosoft-filterable {
  transition:
    opacity var(--cricosoft-dur) var(--cricosoft-ease),
    scale var(--cricosoft-dur) var(--cricosoft-ease-out);
}

.cricosoft-filterable.is-out { opacity: 0; scale: .96; }

/* ============================================================
   ACCORDION
   ============================================================ */

.cricosoft-accordion { border-top: 1px solid var(--cricosoft-line); }

.cricosoft-accordion-item { border-bottom: 1px solid var(--cricosoft-line); }

.cricosoft-accordion-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-4);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--cricosoft-space-5) 0;
  text-align: left;
  font-family: var(--cricosoft-font-display);
  font-size: var(--cricosoft-text-md);
  font-weight: 600;
  color: var(--cricosoft-fg);
  cursor: pointer;
}

.cricosoft-accordion-item__icon {
  flex: none;
  color: var(--cricosoft-fg-muted);
  transition: rotate var(--cricosoft-dur) var(--cricosoft-ease-out);
}

.cricosoft-accordion-item__trigger[aria-expanded="true"] .cricosoft-accordion-item__icon {
  rotate: 180deg;
  color: var(--cricosoft-brand-ink);
}

/* grid-template-rows 0fr -> 1fr animates to auto height without JS
   measuring anything. */
.cricosoft-accordion-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cricosoft-dur-slow) var(--cricosoft-ease-out);
}

.cricosoft-accordion-item__panel.is-open { grid-template-rows: 1fr; }
.cricosoft-accordion-item__body { overflow: hidden; }
.cricosoft-accordion-item__body > div { padding-bottom: var(--cricosoft-space-6); }

/* ============================================================
   FORMS
   ============================================================ */

.cricosoft-form { display: grid; gap: var(--cricosoft-space-5); }

.cricosoft-form__row { display: grid; gap: var(--cricosoft-space-5); }

@media (min-width: 640px) {
  .cricosoft-form__row--2 { grid-template-columns: 1fr 1fr; }
}

.cricosoft-field { display: grid; gap: var(--cricosoft-space-2); }

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

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

.cricosoft-field__input,
.cricosoft-field__textarea,
.cricosoft-field__select {
  width: 100%;
  min-height: 3rem;
  padding: var(--cricosoft-space-3) var(--cricosoft-space-4);
  border: 1px solid var(--cricosoft-line-strong);
  border-radius: var(--cricosoft-radius);
  background: var(--cricosoft-surface-1);
  color: var(--cricosoft-fg);
  font-size: var(--cricosoft-text-base);
  /* 16px floor on the real input prevents iOS Safari zooming on focus. */
  transition:
    border-color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    box-shadow var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

@media (max-width: 480px) {
  .cricosoft-field__input,
  .cricosoft-field__textarea,
  .cricosoft-field__select { font-size: 16px; }
}

.cricosoft-field__textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.cricosoft-field__input::placeholder,
.cricosoft-field__textarea::placeholder { color: var(--cricosoft-fg-subtle); }

.cricosoft-field__input:focus,
.cricosoft-field__textarea:focus,
.cricosoft-field__select:focus {
  outline: none;
  border-color: var(--cricosoft-brand-500);
  box-shadow: 0 0 0 3px var(--cricosoft-brand-wash-2);
}

.cricosoft-field.has-error .cricosoft-field__input,
.cricosoft-field.has-error .cricosoft-field__textarea,
.cricosoft-field.has-error .cricosoft-field__select {
  border-color: light-dark(#C22B2B, #FF7A7A);
}

.cricosoft-field__error {
  display: none;
  align-items: center;
  gap: var(--cricosoft-space-2);
  font-size: var(--cricosoft-text-sm);
  color: light-dark(#B32424, #FF8F8F);
}

.cricosoft-field.has-error .cricosoft-field__error { display: flex; }

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

/* ---------- Audience selector ----------
   A 2x2 tap grid of real radios, not a <select>. Four options do not
   deserve a dropdown, and taps beat a native picker on a phone. */

.cricosoft-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cricosoft-space-3);
}

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

.cricosoft-choice { position: relative; }

.cricosoft-choice__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.cricosoft-choice__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cricosoft-space-2);
  min-height: 5.25rem;
  padding: var(--cricosoft-space-4);
  border: 1px solid var(--cricosoft-line-strong);
  border-radius: var(--cricosoft-radius);
  background: var(--cricosoft-surface-1);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
  color: var(--cricosoft-fg-muted);
  transition:
    border-color var(--cricosoft-dur-fast) var(--cricosoft-ease),
    background var(--cricosoft-dur-fast) var(--cricosoft-ease),
    color var(--cricosoft-dur-fast) var(--cricosoft-ease);
}

.cricosoft-choice__input:hover + .cricosoft-choice__body {
  border-color: var(--cricosoft-brand-400);
}

.cricosoft-choice__input:checked + .cricosoft-choice__body {
  border-color: var(--cricosoft-brand-500);
  background: var(--cricosoft-brand-wash);
  color: var(--cricosoft-brand-ink);
}

.cricosoft-choice__input:focus-visible + .cricosoft-choice__body {
  outline: 2px solid var(--cricosoft-focus);
  outline-offset: 3px;
}

/* ---------- Form feedback ---------- */

.cricosoft-form__status {
  display: none;
  align-items: flex-start;
  gap: var(--cricosoft-space-3);
  padding: var(--cricosoft-space-4) var(--cricosoft-space-5);
  border-radius: var(--cricosoft-radius);
  border: 1px solid var(--cricosoft-line-brand);
  background: var(--cricosoft-brand-wash);
  color: var(--cricosoft-fg);
  font-size: var(--cricosoft-text-sm);
}

.cricosoft-form__status.is-shown { display: flex; }

/* ============================================================
   TO TOP
   ============================================================ */

.cricosoft-to-top {
  position: fixed;
  inset-block-end: calc(var(--cricosoft-space-6) + env(safe-area-inset-bottom));
  inset-inline-end: var(--cricosoft-space-6);
  z-index: var(--cricosoft-z-sticky);
  /* This floats over content — on a phone it lands squarely on card text.
     A translucent-looking circle there reads as a rendering fault, so the
     button states plainly that it is a layer above: opaque fill, a real
     border, and a lifted shadow. */
  background: var(--cricosoft-surface-3);
  border-color: var(--cricosoft-line-strong);
  box-shadow: var(--cricosoft-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition:
    opacity var(--cricosoft-dur) var(--cricosoft-ease),
    translate var(--cricosoft-dur) var(--cricosoft-ease-out),
    visibility 0s linear var(--cricosoft-dur);
}

.cricosoft-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

/* ============================================================
   FOOTER
   ============================================================ */

.cricosoft-footer {
  border-top: 1px solid var(--cricosoft-line);
  background: var(--cricosoft-bg-subtle);
  padding-block: var(--cricosoft-space-16) var(--cricosoft-space-8);
  padding-block-end: calc(var(--cricosoft-space-8) + env(safe-area-inset-bottom));
}

.cricosoft-footer__top {
  display: grid;
  gap: var(--cricosoft-space-10);
  padding-bottom: var(--cricosoft-space-12);
}

@media (min-width: 768px) {
  .cricosoft-footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cricosoft-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.cricosoft-footer__about {
  max-width: 34ch;
  margin-top: var(--cricosoft-space-4);
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-sm);
}

.cricosoft-footer__col-title {
  margin-bottom: var(--cricosoft-space-4);
  font-family: var(--cricosoft-font-body);
  font-size: var(--cricosoft-text-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cricosoft-fg);
}

.cricosoft-footer__list { display: grid; gap: var(--cricosoft-space-1); }

.cricosoft-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  /* 40px tap height in a list of links — tighter than a button, still
     comfortably tappable. */
  min-height: 2.5rem;
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-sm);
  text-decoration: none;
}

.cricosoft-footer__link:hover { color: var(--cricosoft-brand-ink); }

/* Declared AFTER .cricosoft-footer__link on purpose. Both selectors carry
   the same specificity, so source order decides: placed above, the 2.5rem
   base rule won and this did nothing. Same trap that once left the header
   CTA showing on phones.

   Stacked 40px links 4px apart are easy to mis-tap with a thumb. On touch
   the links go to 44px and the gap to 8px; pointers keep the compact list. */
@media (pointer: coarse) {
  .cricosoft-footer__list { gap: var(--cricosoft-space-2); }
  .cricosoft-footer__link { min-height: 2.75rem; }
}

.cricosoft-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-4);
  padding-top: var(--cricosoft-space-8);
  border-top: 1px solid var(--cricosoft-line);
  font-size: var(--cricosoft-text-sm);
  color: var(--cricosoft-fg-subtle);
}

.cricosoft-footer__social {
  display: flex;
  gap: var(--cricosoft-space-2);
}

.cricosoft-footer__social .cricosoft-icon-btn {
  background: transparent;
}

/* The compact 40px variant is for pointers. Touch keeps the full 44px:
   these sit in a row at the very bottom of a long page, which is exactly
   where a thumb is least accurate. */
@media (hover: hover) and (pointer: fine) {
  .cricosoft-footer__social .cricosoft-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}