/* =============================================================================
 * Sysculus suite — components
 * Depends on tokens.css + base.css. Token-bound only.
 *
 * Geometry note: colour, type, motion and the a11y contract are inherited from
 * the product verbatim. Radii are one step softer than the app (marketing reads
 * friendlier than dense product UI) — the only deliberate divergence.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Eyebrow / chip
 * -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-eyebrow); font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--color-accent-interactive);
}
/* No leading dash before eyebrows — the label stands on its own. */
.eyebrow--center { justify-content: center; }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-subtle-border);
  color: var(--color-accent-interactive);
  font-size: var(--type-body-sm-size); font-weight: var(--font-weight-semibold);
}

/* -----------------------------------------------------------------------------
 * Buttons — primary fills bind --teal-h (AA-safe), never decorative --teal.
 * -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-body-md-size);
  line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  padding: 0 var(--space-4); height: var(--size-control-md);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; }
.btn--lg { height: var(--size-control-lg); padding: 0 var(--space-5); font-size: var(--type-body-lg-size); }
.btn--sm { height: var(--size-control-sm); padding: 0 var(--space-3); font-size: var(--type-body-sm-size); }

.btn--primary {
  background-color: var(--color-accent-interactive);
  color: var(--color-text-on-accent);
}
.btn--primary:hover { background-color: var(--color-accent-active); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--secondary {
  background-color: var(--color-surface-raised);
  color: var(--color-accent-interactive);
  border-color: var(--color-accent-subtle-border);
}
.btn--secondary:hover { background-color: var(--color-accent-subtle); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover { background: var(--color-state-hover-overlay); color: var(--color-text-primary); }

/* On the dark hero band */
.on-dark .btn--primary { background: var(--color-surface-raised); color: var(--brand-hero-accent); }
.on-dark .btn--secondary {
  background: transparent; color: var(--color-text-on-accent);
  border-color: var(--brand-hero-hair);
}
.on-dark .btn--secondary:hover { background: var(--brand-hero-glass); }

/* Text link — a secondary action that must NOT compete as a button. Use this
   instead of a ghost button next to a primary CTA. */
.textlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--font-weight-semibold); font-size: var(--type-body-lg-size);
  color: var(--color-text-link);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.textlink svg { width: var(--size-icon-sm); height: var(--size-icon-sm); transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }
.textlink:hover svg { transform: translateX(3px); }

/* Arrow link */
.link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-text-link); font-weight: var(--font-weight-semibold);
  font-size: var(--type-body-md-size);
}
.link svg { width: var(--size-icon-sm); height: var(--size-icon-sm); transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }
.link:hover svg { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
 * Card
 * -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.card--interactive:hover {
  box-shadow: var(--elevation-2);
  border-color: var(--color-accent-subtle-border);
  transform: translateY(-2px);
}
/* Icon badge — gradient + coloured glow gives depth. White glyph on the
 * gradient is high-contrast; the badge always sits beside a text label, so it
 * never carries meaning alone. Default is teal; use a modifier for variety. */
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  display: grid; place-items: center; flex: none;
  background: var(--grad-teal); color: #fff;
  box-shadow: var(--glow-teal);
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}
.card__icon svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.card:hover .card__icon,
.card--interactive:hover .card__icon { transform: translateY(-2px) scale(1.04); }

.card__icon--violet { background: var(--grad-violet); box-shadow: var(--glow-violet); }
.card__icon--cyan   { background: var(--grad-cyan);   box-shadow: var(--glow-cyan); }
.card__icon--amber  { background: var(--grad-amber);  box-shadow: var(--glow-amber); }
.card__icon--green  { background: var(--grad-green);  box-shadow: var(--glow-green); }
.card__icon--rose   { background: var(--grad-rose);   box-shadow: var(--glow-rose); }

.card p { color: var(--color-text-secondary); font-size: var(--type-body-lg-size); }

/* A hairline of accent along the card top — subtle colour without shouting. */
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-teal);
}
.card--accent.card--violet::before { background: var(--grad-violet); }
.card--accent.card--cyan::before   { background: var(--grad-cyan); }
.card--accent.card--amber::before  { background: var(--grad-amber); }
.card--accent.card--green::before  { background: var(--grad-green); }

/* -----------------------------------------------------------------------------
 * Header / navigation (incl. mobile menu)
 * -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky-chrome);
  background: var(--color-surface-chrome);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border-default);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--size-header-height); gap: var(--space-4);
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: var(--font-weight-extrabold); font-size: 19px;
  letter-spacing: -0.02em; color: var(--color-text-primary);
}
.brand svg { width: 30px; height: 30px; flex: none; }
/* "by Sysculus" sits raised, like a superscript, tight to the wordmark */
.brand__by {
  font-size: 10px; font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted); letter-spacing: 0.02em;
  position: relative; top: -0.55em; margin-left: -4px;
}
/* On phones the full lockup eats ~54% of a 375px viewport and crowds the
 * header. Drop the endorsement line and keep mark + product name. */
@media (max-width: 640px) {
  .brand { font-size: 17px; gap: var(--space-2); }
  .brand svg { width: 27px; height: 27px; }
  .brand__by { display: none; }
}

.navlinks { display: flex; align-items: center; gap: var(--space-8); }
.navlinks a {
  position: relative; font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-medium); color: var(--color-text-secondary);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.navlinks a:hover { color: var(--color-accent-interactive); }
.navlinks a.active { color: var(--color-accent-interactive); font-weight: var(--font-weight-semibold); }

.nav-cta { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle {
  display: none; background: none; border: 0; padding: var(--space-2) var(--space-1);
  cursor: pointer; color: var(--color-text-primary); line-height: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; margin: 5px 0;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard),
              opacity var(--motion-duration-fast) var(--motion-easing-standard);
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Item that only appears inside the open mobile menu */
.menu-cta { display: none; }

@media (max-width: 900px) {
  /* Tighter bar padding on phones: the default left only ~13px of air between
     the wordmark and the CTA, so the centred brand read as crowded. */
  .nav.wrap { padding-inline: 18px; }

  /* Split header: [hamburger] [brand centred] [primary CTA].
     A 1fr auto 1fr grid centres the brand OPTICALLY — with space-between the
     unequal side widths would push it off-centre. Requires .nav-toggle to be a
     direct child of .nav (see snippets/header.html). */
  .nav {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--space-2);
  }
  /* flex-direction:column is essential — without it the three bars lay out
     side by side instead of stacking into a hamburger. */
  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    justify-self: start; width: 44px; height: 44px; padding: 0; gap: 5px;
    margin-left: calc(-1 * var(--space-3));
  }
  .nav-toggle span { margin: 0; }
  /* Every header control shares a 44px box so the hamburger, wordmark and CTA
     sit on one consistent optical line (and clear the touch-target floor). */
  /* OPTICAL CENTRING.
     The left flank is a ~30px hamburger glyph, the right a ~72px text button,
     so a mathematically centred brand leaves far more air on the left and reads
     as shoved against the button. Shifting the brand LEFT by half that
     difference makes the visible air match. transform is deliberate: it moves
     the brand optically without touching layout, so it cannot cause overflow.
     Retune this value if the primary button's label/width changes. */
  .brand {
    justify-self: center; min-height: 44px; font-size: 21px; line-height: 1;
    transform: translateX(-20px);
  }
  .nav-cta { justify-self: end; gap: 0; min-height: 44px; }
  /* Visually 30px to match the glyph rhythm, but an invisible overlay keeps a
     44px touch target — the compact look shouldn't cost tappability
     (Apple HIG 44pt / Android 48dp). */
  .nav-cta .btn {
    height: 30px; min-height: 0; padding: 0 var(--space-4);
    white-space: nowrap; line-height: 1; position: relative;
  }
  .nav-cta .btn::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }

  /* ONE glyph size across the header: gear and hamburger bars are both 30px
     wide, matching the button height. */
  .nav-toggle span { width: 30px; }
  .brand svg { width: 30px; height: 30px; display: block; }
  /* The gear sits in an inline <span>, so it baseline-aligns and rides ~4px
     above the centre line. A centred flex holder removes that. */
  .brand [data-gear] { display: flex; align-items: center; justify-content: center; line-height: 0; }
  .navlinks { display: none; }
  /* the secondary CTA moves into the menu so the bar can never overflow */
  .nav-cta .btn--secondary { display: none; }
  .nav.open .navlinks {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-default);
    box-shadow: var(--elevation-2);
    padding: var(--space-2) var(--space-6) var(--space-5);
    z-index: var(--z-dropdown);
    /* Never let the panel run past the screen: cap it and scroll inside.
       dvh tracks mobile browser chrome; safe-area clears the home indicator. */
    max-height: calc(100dvh - var(--size-header-height));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }
  .nav.open .navlinks a {
    padding: var(--space-4) var(--space-1); font-size: var(--type-body-lg-size);
    border-bottom: 1px solid var(--color-border-default);
  }
  .nav.open .navlinks a:last-child { border-bottom: 0; }
  /* A desktop underline indicator would float as a stray accent line in the
     vertical dropdown — use a left accent bar instead. */
  .nav.open .navlinks a.active::after { display: none; }
  .nav.open .navlinks a.active {
    color: var(--color-accent-interactive);
    box-shadow: inset 3px 0 0 var(--color-accent-default);
    padding-left: var(--space-3); border-radius: var(--radius-sm);
  }
  .nav.open .navlinks .menu-cta {
    display: flex; align-items: center; justify-content: center; flex: none;
    margin-top: var(--space-4); padding: var(--space-4) var(--space-4);
    border: 1px solid var(--color-accent-subtle-border);
    border-radius: var(--radius-lg);
    color: var(--color-accent-interactive);
    font-weight: var(--font-weight-semibold);
  }
}

/* Very narrow phones (~320px). There isn't room for the full optical nudge —
   at -20px the wordmark comes within a pixel of the hamburger. Space is so
   tight that the gaps are nearly even anyway, so barely nudge at all.
   Stops at 340px, NOT 360px: 360px still needs the full nudge. */
@media (max-width: 340px) {
  .brand { font-size: 20px; gap: var(--space-2); transform: translateX(-4px); }
  .brand svg { width: 26px; height: 26px; }
  .nav-toggle span { width: 26px; }
  .nav-cta .btn { padding: 0 var(--space-3); }
}

/* iOS Safari clips absolutely-positioned children of a backdrop-filtered
   ancestor, which cuts the bottom off the open menu. Drop the blur while the
   menu is open (site.js adds .menu-open) and use a solid background. */
.site-header.menu-open {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--color-surface-raised);
}

/* -----------------------------------------------------------------------------
 * Hero — the page's opening statement. Ambient wash + headline + CTAs + visual.
 * -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--space-20) var(--space-24); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wash-teal), var(--wash-violet), var(--wash-cyan);
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12); align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-10); } }
.hero h1 { font-size: var(--type-display); margin-top: var(--space-4); }
.hero__sub { margin-top: var(--space-5); font-size: var(--type-lead); color: var(--color-text-muted); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.hero__trust {
  display: flex; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap;
  color: var(--color-text-muted); font-size: var(--type-body-md-size);
}
.hero__trust b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

/* Gradient headline accent.
 * ONLY for large text (≥24px, or ≥18.66px bold): the lightest gradient stop is
 * ~3:1, which satisfies WCAG large-text but NOT normal body text. Never apply
 * this to a paragraph. */
.text-gradient {
  background: var(--grad-teal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hero visual — a "product glimpse" panel, echoing the app's real UI. */
.hero-panel {
  background: linear-gradient(180deg, var(--color-surface-raised), #f7fbfc);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-4);
  padding: var(--space-5);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin: 0 var(--space-1) var(--space-4); }
.panel-head__label { font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); }
.panel-head__live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-semibold); color: var(--color-accent-interactive); }
.panel-head__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-default); box-shadow: 0 0 0 3px rgba(15, 171, 189, 0.22);
}
.panel-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-canvas);
  border: 1px solid var(--color-border-default);
}
.panel-row:last-child { margin-bottom: 0; }
.panel-row__icon {
  width: 32px; height: 32px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center; background: var(--grad-teal); color: #fff;
}
.panel-row__icon svg { width: 16px; height: 16px; }
.panel-row--idle .panel-row__icon { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.panel-row__name { flex: 1; font-size: var(--type-body-md-size); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.panel-row__status { font-size: 11.5px; font-weight: var(--font-weight-semibold); padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.status--done { background: var(--color-success-surface); color: var(--color-success-text); }
.status--run  { background: var(--color-warning-surface); color: var(--color-warning-text); }
.status--gate { background: var(--color-info-surface); color: var(--color-info-text); }
.status--wait { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* Floating stat chip over the panel */
.hero-badge {
  position: absolute; left: calc(-1 * var(--space-6)); bottom: calc(-1 * var(--space-5));
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-3);
  padding: var(--space-4) var(--space-5);
}
.hero-badge__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--grad-violet); color: #fff; }
.hero-badge__value { font-size: 22px; font-weight: var(--font-weight-extrabold); color: var(--color-text-primary); line-height: 1; }
.hero-badge__label { font-size: var(--type-body-sm-size); color: var(--color-text-muted); }
.hero__visual { position: relative; }
@media (max-width: 640px) { .hero-badge { left: 0; bottom: calc(-1 * var(--space-4)); } }

/* -----------------------------------------------------------------------------
 * Dark brand band — hero / CTA. Uses the product's auth-panel surface.
 * -------------------------------------------------------------------------- */
.brand-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-hero-accent), var(--brand-hero-base));
  color: var(--color-text-on-accent);
  padding: var(--space-16) var(--space-12);
  box-shadow: var(--elevation-4);
}
.brand-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 82% 0%, var(--brand-hero-glow), transparent 62%),
    radial-gradient(46% 58% at 8% 100%, var(--brand-hero-glow-2), transparent 62%);
}
.brand-band > * { position: relative; }
.brand-band h2 { color: var(--color-text-on-accent); }
.brand-band p { color: #cbe9ee; }
.brand-band .eyebrow { color: var(--brand-hero-spark); }
@media (max-width: 640px) { .brand-band { padding: var(--space-12) var(--space-6); } }

/* -----------------------------------------------------------------------------
 * Phase pipeline — the gated lifecycle strip. Lives inside a dark band.
 * Every phase MUST carry its agent count; a phase without one reads as an empty
 * label. One phase per row on phones: two-up leaves each card too cramped to
 * read the title, the count and the gate together.
 * -------------------------------------------------------------------------- */
.pipeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); text-align: left; }
.phase {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--brand-hero-glass);
  border: 1px solid var(--brand-hero-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
}
.phase__n { font-family: var(--font-family-mono); font-size: 11px; color: var(--brand-hero-spark); }
.phase__t { font-size: var(--type-body-md-size); font-weight: var(--font-weight-semibold); color: var(--color-text-on-accent); letter-spacing: -0.01em; }
.phase__agents {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start;
  font-size: 11px; font-weight: var(--font-weight-semibold); color: #bfeee8;
  background: rgba(58, 214, 201, 0.14); border: 1px solid rgba(58, 214, 201, 0.28);
  border-radius: var(--radius-sm); padding: 3px 7px;
}
.phase__agents svg { width: 12px; height: 12px; color: var(--brand-hero-spark); flex: none; }
.phase__gate {
  margin-top: auto; align-self: flex-start;
  font-size: 10.5px; font-weight: var(--font-weight-semibold); letter-spacing: 0.03em;
  padding: 3px 7px; border-radius: var(--radius-sm);
}
.phase__gate--human { color: #0a141a; background: var(--brand-hero-spark); }
.phase__gate--auto  { color: #bfeee8; background: rgba(58, 214, 201, 0.14); border: 1px solid rgba(58, 214, 201, 0.28); }

@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; }
  .phase { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
  .phase__t { flex: 1; }
  .phase__gate { margin-top: 0; }
}

/* Frosted tile inside the dark band */
.glass-tile {
  background: var(--brand-hero-glass);
  border: 1px solid var(--brand-hero-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* -----------------------------------------------------------------------------
 * Stats
 * -------------------------------------------------------------------------- */
.stat { text-align: center; }
.stat__value {
  font-size: clamp(30px, 4vw, 40px); font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.04em; color: var(--color-text-primary); line-height: 1;
}
.stat__label { margin-top: var(--space-2); font-size: var(--type-body-md-size); color: var(--color-text-muted); }

/* -----------------------------------------------------------------------------
 * Footer (incl. suite product-switcher)
 * -------------------------------------------------------------------------- */
/* Dark footer: mirrors the hero band so the page opens and closes with the same
 * brand surface, instead of fading out into grey-on-grey. All text here is
 * measured against the dark base (lightest body text ≈ 12:1). */
.site-footer {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #141a24 0%, var(--neutral-950) 100%);
  color: #eef0f3;
  padding: var(--space-16) 0 var(--space-8);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 88% 0%, var(--brand-hero-glow), transparent 62%),
    radial-gradient(40% 55% at 6% 100%, var(--brand-hero-glow-2), transparent 62%);
  opacity: 0.55;
}
.site-footer > * { position: relative; }
/* accent hairline along the very top edge */
.site-footer::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-hero-spark), var(--color-accent-default), transparent);
  opacity: 0.7;
}

.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-10);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand { color: #fff; }
.site-footer .brand__by { color: #c9ced6; }
.footer-about { margin-top: var(--space-4); max-width: 42ch; color: #d6dae1; font-size: var(--type-body-md-size); }
.footer-about a { color: var(--brand-hero-spark); }

.footer-col h3 {
  font-size: var(--type-body-sm-size); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-hero-spark); margin-bottom: var(--space-4); font-weight: var(--font-weight-bold);
}
.footer-col a {
  display: block; padding: var(--space-1) 0; color: #f2f4f7;
  font-size: var(--type-body-md-size);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.footer-col a:hover { color: #fff; transform: translateX(3px); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #d6dae1; font-size: var(--type-body-sm-size);
}
.footer-bottom a { color: #f2f4f7; }
.footer-bottom a:hover { color: #fff; }

/* Focus rings need to be visible on the dark surface too. */
.site-footer :focus-visible { outline-color: var(--brand-hero-spark); }

/* -----------------------------------------------------------------------------
 * Floating WhatsApp CTA — icon only, never covers content
 * -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-overlay);
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: #25d366; color: #fff;   /* WhatsApp brand colour — external, fixed */
  box-shadow: 0 8px 20px -8px rgba(37, 211, 102, 0.55);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 22px; height: 22px; }
@media (max-width: 600px) { .wa-float { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* -----------------------------------------------------------------------------
 * Contact: direct methods (the suite standard — no forms anywhere)
 * A balanced 3-up card set. Each method carries its own icon tint so the three
 * channels are distinguishable at a glance rather than three identical rows.
 * -------------------------------------------------------------------------- */
.contact-methods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  max-width: 960px; margin-inline: auto;
}
@media (max-width: 820px) { .contact-methods { grid-template-columns: 1fr; max-width: 460px; } }

.contact-method {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard),
              transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.contact-method:hover {
  border-color: var(--color-accent-subtle-border);
  box-shadow: var(--elevation-2);
  transform: translateY(-3px);
}

.contact-method__icon {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  display: grid; place-items: center; flex: none;
  margin-bottom: var(--space-2);
  border: 1px solid transparent;
}
.contact-method__icon svg { width: 26px; height: 26px; }

/* Each channel gets its own tint — all AA-safe on their own surface. */
.contact-method--whatsapp .contact-method__icon { background: #e7f9ee; border-color: #c4ebd4; color: #10783f; }
.contact-method--call .contact-method__icon {
  background: var(--color-accent-subtle); border-color: var(--color-accent-subtle-border);
  color: var(--color-accent-interactive);
}
.contact-method--email .contact-method__icon {
  background: var(--color-promo-surface); border-color: var(--color-promo-border);
  color: var(--color-promo-text);
}

/* Block-level so name / description / value stack instead of running inline. */
.contact-method__name {
  display: block; font-size: var(--type-h3); line-height: 1.3;
  font-weight: var(--font-weight-bold); color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.contact-method__desc {
  display: block; font-size: var(--type-body-md-size); color: var(--color-text-muted);
}
.contact-method__value {
  display: block; margin-top: var(--space-3);
  font-size: var(--type-body-lg-size); font-weight: var(--font-weight-semibold);
  color: var(--color-text-link);
}
.contact-method__value::after {
  content: "→"; display: inline-block; margin-left: var(--space-2);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.contact-method:hover .contact-method__value::after { transform: translateX(4px); }