/* css/flip.css — 3D Y-axis card flip for clickable info tiles (index).
   Replaces the expand-downward accordion: click front -> flips 180deg to reveal
   the detail list on the back. Built by flip.js at runtime; no-JS keeps the
   accordion fallback. */

/* Uniform tile heights so flipping (absolute faces) has a stable box. */
.card.flip { height: 352px; }
.card.card-accent.flip { height: 506px; }
.industry-tile { min-height: 300px; }
.industry-tile.flip { height: 300px; }

.card.flip,
.industry-tile.flip {
  perspective: 1400px;
  padding: 0;            /* faces carry the padding */
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
}
.card.flip:hover,
.industry-tile.flip:hover { transform: none; box-shadow: none; }

/* Non-flip industry tiles (e.g. "And Many More") centre in the uniform box. */
.industry-tile:not(.flip) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.28, 1);
}
.flip.flipped .flip-inner { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 30px 26px 26px;
  transition: border-color 0.5s, background 0.5s, box-shadow 0.45s;
}
.industry-tile .flip-face { align-items: center; text-align: center; }
.industry-tile .flip-front:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-tile-hover);
}

/* --- Card faces on the two tinted bands --- */
.section-dark .flip-face,
.section-deep .flip-face,
.section-alt .flip-face {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 32px 30px 28px;
}
.section-dark .flip-front:hover,
.section-deep .flip-front:hover,
.section-alt .flip-front:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}
/* The back face keeps a faint accent wash so a flipped card is obvious at a
   glance, the job the amber-on-black gradient used to do. */
.section-dark .flip-back,
.section-deep .flip-back,
.section-alt .flip-back {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, var(--color-accent-soft), var(--color-surface) 58%);
  padding: 24px 24px 22px;
}

/* Back starts pre-rotated so its content reads correctly after the flip. */
.flip-back { transform: rotateY(180deg); }

.flip-front { cursor: pointer; }

/* Front footer: explore link + flip affordance */
.flip-front .accordion-toggle { margin-top: auto; }
.flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-dim);
  flex: none;
}
.flip-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}
.flip-foot .accordion-toggle { margin-top: 0; }

/* Back header: title left, return control top-right */
.flip-back-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.section-dark .flip-back-head,
.section-deep .flip-back-head,
.section-alt .flip-back-head { border-bottom-color: var(--color-border); }

.flip-back-title {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.section-dark .flip-back-title,
.section-deep .flip-back-title,
.section-alt .flip-back-title { color: var(--color-heading); }

.flip-back-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
}
.flip-back-btn svg { transition: transform 0.3s ease; }
.flip-back-btn:hover { color: var(--color-accent); }
.flip-back-btn:hover svg { transform: rotate(-90deg); }

/* ==========================================================================
   Design back face — animated service mock + two-column offering list + CTA
   ========================================================================== */

/* --- Mock shell ---------------------------------------------------------- */
.svc-mock {
  position: relative;
  overflow: hidden;
  flex: none;
  margin: 16px 0 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}
.svc-mock:not([data-mock="web"]) { height: 118px; }
/* On the front face the mock fills the gap between the summary and the footer
   row. It is pushed to the bottom of that gap and given one height, so the three
   previews line up across the row however long each card's summary runs. */
.flip-front .svc-mock {
  height: 118px;
  margin: 20px 0 0;
  margin-top: auto;
}
.flip-front .svc-mock + .flip-foot { margin-top: 0; }

.svc-stage { position: absolute; inset: 0; display: flex; }

.svc-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.12));
  opacity: 0;
  pointer-events: none;
}

/* Motion runs wherever the mock sits: on the front face it plays as soon as the
   card is on screen, on a back face it is armed by the flip so it replays when
   the card opens. */
.flip-front .svc-scan,
.flip.flipped .svc-scan { animation: omScan 3.2s ease-in-out infinite; }
.flip-front [data-mock="web"] .svc-scan,
.flip.flipped [data-mock="web"] .svc-scan { animation-duration: 2.8s; }

.svc-grow { transform: scaleX(0); transform-origin: left; }
.svc-pop { opacity: 0; }
.flip-front .svc-grow,
.flip.flipped .svc-grow { animation: omGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) both; }
.flip-front .svc-pop,
.flip.flipped .svc-pop { animation: omPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) both; }
.flip-front .svc-float,
.flip.flipped .svc-float { animation: omFloat var(--dur, 6s) ease-in-out var(--d, 0s) infinite; }
.flip-front .svc-blink,
.flip.flipped .svc-blink { animation: omBlink var(--dur, 1.4s) ease-in-out var(--d, 0s) infinite; }
.flip-front .svc-trace,
.flip.flipped .svc-trace { animation: omTrace var(--dur, 2.4s) linear var(--d, 0s) infinite; }

/* --- 01 Web: browser chrome over a skeleton layout ----------------------- */
.svc-web-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(12, 74, 110, 0.11);
}
.svc-web-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(12, 74, 110, 0.25); }
.svc-web-bar i:first-child { background: var(--color-accent); }
.svc-web-bar u { margin-left: 8px; height: 12px; width: 64%; border-radius: 6px; background: rgba(12, 74, 110, 0.12); }
.svc-web-body { display: grid; grid-template-columns: 34% 1fr; gap: 10px; padding: 14px 12px 16px; }
.svc-col { display: flex; flex-direction: column; gap: 7px; }
.svc-col + .svc-col { gap: 8px; }
.svc-row { display: flex; gap: 8px; }
.svc-b1 { height: 24px; border-radius: 5px; background: rgba(56, 189, 248, 0.62); }
.svc-b2 { height: 8px; border-radius: 5px; background: rgba(12, 74, 110, 0.16); }
.svc-b3 {
  height: 38px;
  border-radius: 5px;
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.57), rgba(14, 165, 233, 0.35));
}
.svc-b4 { flex: 1; height: 20px; border-radius: 5px; background: rgba(12, 74, 110, 0.13); }

/* --- 02 Mobile: three bobbing handsets ---------------------------------- */
.svc-phones { align-items: center; justify-content: center; gap: 12px; }
.svc-phone {
  width: 44px;
  height: 80px;
  border: 2px solid rgba(12, 74, 110, 0.23);
  border-radius: 9px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-phone-main {
  width: 56px;
  height: 98px;
  border-color: rgba(56, 189, 248, 0.87);
  border-radius: 11px;
  padding: 6px 5px;
  gap: 5px;
  box-shadow: 0 0 26px -8px rgba(56, 189, 248, 0.82);
}
.svc-ph-cap { height: 5px; width: 60%; border-radius: 3px; background: rgba(12, 74, 110, 0.23); }
.svc-phone-main .svc-ph-cap { width: 50%; background: rgba(56, 189, 248, 0.92); }
.svc-ph-fill { flex: 1; border-radius: 5px; background: rgba(12, 74, 110, 0.11); }
.svc-ph-hero {
  height: 26px;
  border-radius: 5px;
  background: linear-gradient(130deg, rgba(56, 189, 248, 0.62), rgba(14, 165, 233, 0.38));
}
.svc-ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.svc-ph-grid span { height: 14px; border-radius: 4px; background: rgba(12, 74, 110, 0.15); }

/* --- 03 AI: chat transcript with a typing indicator ---------------------- */
.svc-chat { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 16px; }
.svc-bub { padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; }
.svc-bub-user {
  align-self: flex-end;
  max-width: 62%;
  border-radius: 12px 12px 3px 12px;
  background: rgba(12, 74, 110, 0.13);
}
.svc-bub-user i { width: 90px; height: 6px; border-radius: 5px; background: rgba(12, 74, 110, 0.33); }
.svc-bub-ai {
  align-self: flex-start;
  max-width: 72%;
  border-radius: 12px 12px 12px 3px;
  background: rgba(56, 189, 248, 0.4);
}
.svc-bub-ai i { width: 120px; height: 6px; border-radius: 5px; background: rgba(12, 74, 110, 0.28); }
.svc-bub-ai i + i { width: 80px; background: rgba(12, 74, 110, 0.18); }
.svc-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(12, 74, 110, 0.1);
}
.svc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* --- 04 Cloud: cloud pill feeding three server nodes -------------------- */
.svc-cloud { flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.svc-pill {
  padding: 6px 16px;
  border: 1.5px solid rgba(56, 189, 248, 0.82);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--color-accent-ink);
  box-shadow: 0 0 22px -8px rgba(56, 189, 248, 0.92);
}
.svc-wire { width: 1px; height: 14px; background: rgba(56, 189, 248, 0.62); }
.svc-nodes { display: flex; gap: 10px; }
.svc-node {
  width: 52px;
  height: 34px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(12, 74, 110, 0.19);
  border-radius: 7px;
}
.svc-node i { height: 4px; border-radius: 5px; background: rgba(56, 189, 248, 0.67); }
.svc-node i + i { width: 70%; background: rgba(12, 74, 110, 0.19); }

/* --- 05 Automation: nodes joined by pulsing rails ----------------------- */
.svc-flow { align-items: center; justify-content: center; padding: 0 18px; }
.svc-fnode { width: 26px; height: 26px; border-radius: 8px; background: rgba(56, 189, 248, 0.87); flex: none; }
.svc-fnode-2 { background: rgba(56, 189, 248, 0.67); }
.svc-fnode-3 { background: rgba(56, 189, 248, 0.52); }
.svc-fnode-4 { background: none; border: 1.5px solid rgba(56, 189, 248, 0.82); }
.svc-rail { flex: 1; height: 2px; background: rgba(12, 74, 110, 0.15); position: relative; overflow: hidden; }
.svc-rail i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform: translateX(-100%);
}
.svc-trace-cream { background: linear-gradient(90deg, transparent, #0EA5E9, transparent); }

/* --- 06 QA: checklist with one row still running ------------------------ */
.svc-check { flex-direction: column; justify-content: center; gap: 9px; padding: 14px 18px; }
.svc-crow { display: flex; align-items: center; gap: 10px; }
.svc-box {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-style: normal;
  color: var(--color-on-accent);
}
.svc-box-empty { background: none; border: 1.5px solid rgba(56, 189, 248, 0.72); }
.svc-crow u { height: 6px; border-radius: 5px; background: rgba(12, 74, 110, 0.19); }
.svc-crow-idle u { background: rgba(12, 74, 110, 0.13); }

/* --- 07 DevOps: stage chips over a running pipeline --------------------- */
.svc-pipe { flex-direction: column; justify-content: center; gap: 12px; padding: 16px 18px; }
.svc-chips { display: flex; align-items: center; gap: 8px; }
.svc-chip {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  background: rgba(56, 189, 248, 0.87);
  color: var(--color-on-accent);
}
.svc-chip-half { background: rgba(56, 189, 248, 0.57); }
.svc-chip-out { background: none; border: 1px solid rgba(56, 189, 248, 0.72); color: var(--color-accent-ink); }
.svc-progress {
  height: 6px;
  border-radius: 4px;
  background: rgba(12, 74, 110, 0.13);
  position: relative;
  overflow: hidden;
}
.svc-progress i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-accent), #0369A1);
  transform: scaleX(0);
  transform-origin: left;
}
.flip-front .svc-progress i,
.flip.flipped .svc-progress i { animation: omGrow 2.6s ease-in-out infinite; }
.svc-lines { display: flex; flex-direction: column; gap: 5px; }
.svc-lines span { height: 5px; border-radius: 5px; background: rgba(12, 74, 110, 0.17); }
.svc-lines span:first-child { width: 72%; }
.svc-lines span:last-child { width: 54%; }

/* --- 08 API: two systems exchanging traffic ---------------------------- */
.svc-api { align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.svc-panel {
  flex: none;
  width: 46px;
  height: 60px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1.5px solid rgba(56, 189, 248, 0.72);
  border-radius: 8px;
}
.svc-panel i { height: 5px; border-radius: 5px; background: rgba(56, 189, 248, 0.82); }
.svc-panel i + i { width: 75%; background: rgba(12, 74, 110, 0.19); }
.svc-panel i + i + i { width: 85%; }
.svc-panel-b { border-color: rgba(12, 74, 110, 0.21); }
.svc-panel-b i { background: rgba(12, 74, 110, 0.23); }
.svc-panel-b i + i { width: 70%; background: rgba(12, 74, 110, 0.17); }
.svc-panel-b i + i + i { width: 88%; }
.svc-wires { flex: 1; display: flex; flex-direction: column; gap: 9px; }

/* --- CRM: a three-stage pipeline board ---------------------------------- */
.svc-crm { align-items: stretch; gap: 8px; padding: 12px; }
.svc-lane {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 6px;
  border-radius: 8px;
  background: rgba(12, 74, 110, 0.045);
}
.svc-lane-head {
  height: 5px;
  width: 62%;
  border-radius: 5px;
  background: rgba(12, 74, 110, 0.26);
}
.svc-deal {
  height: 17px;
  border-radius: 5px;
  background: rgba(12, 74, 110, 0.14);
}
.svc-deal-hot { background: rgba(56, 189, 248, 0.62); }
.svc-deal-won {
  height: 24px;
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.72), rgba(14, 165, 233, 0.42));
}
.svc-deal-ghost {
  height: 17px;
  background: none;
  border: 1px dashed rgba(56, 189, 248, 0.62);
}

/* --- Care: an uptime chart over the monthly checklist ------------------- */
.svc-care { flex-direction: column; justify-content: center; gap: 9px; padding: 13px 14px; }
.svc-care-head { display: flex; align-items: center; gap: 7px; }
.svc-live {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px -1px rgba(56, 189, 248, 0.95);
}
.svc-care-head u { height: 5px; width: 44%; border-radius: 5px; background: rgba(12, 74, 110, 0.19); }
.svc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}
.svc-bars i {
  flex: 1;
  height: var(--h, 60%);
  border-radius: 3px 3px 2px 2px;
  background: rgba(56, 189, 248, 0.62);
}
.svc-bars .svc-bar-dip { background: rgba(12, 74, 110, 0.21); }
.svc-checks { display: flex; flex-direction: column; gap: 6px; }
.svc-care .svc-box { width: 13px; height: 13px; font-size: 9px; }

/* --- Offering list ------------------------------------------------------ */
.flip-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 14px;
  margin: 14px 0 0;
  padding: 0;
}
.flip-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.32;
  color: var(--color-body);
  opacity: 0;
}
.flip-list-dense li { font-size: 12.5px; }
.flip-list li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.flip.flipped .flip-list li {
  animation: omItem 0.45s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) both;
}

/* --- Capability tags (industry tiles) ---------------------------------- */
.flip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.industry-tile .flip-tags { justify-content: center; }
.flip-tag {
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-body);
}
.section-dark .flip-tag,
.section-deep .flip-tag,
.section-alt .flip-tag {
  border-color: var(--color-border);
  color: var(--color-body);
}

/* --- Back-face call to action, pinned to the bottom of the face --------- */
.flip-back-cta {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-accent-ink);
  transition: gap 0.3s ease, color 0.3s ease;
}
.flip-back-cta:hover { gap: 14px; color: var(--color-heading); }
.industry-tile .flip-back-cta { justify-content: center; width: 100%; }
.section-dark .flip-back-cta,
.section-deep .flip-back-cta,
.section-alt .flip-back-cta { color: var(--color-accent-ink); }
.section-dark .flip-back-cta:hover,
.section-deep .flip-back-cta:hover,
.section-alt .flip-back-cta:hover { color: var(--color-heading); }

/* A service or industry card's link to its own page, carried onto the back face
   so it is not lost when the accordion body is rebuilt. Sits above the CTA. */
.flip-back-link {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.flip-back-link:hover { color: var(--color-heading); }
.section-dark .flip-back-link:hover,
.section-deep .flip-back-link:hover,
.section-alt .flip-back-link:hover { color: var(--color-heading); }
.industry-tile .flip-back-link { justify-content: center; width: 100%; text-align: center; }
/* When both are present the CTA no longer needs to claim the free space. */
.flip-back-link ~ .flip-back-cta { margin-top: 0; padding-top: 10px; }

/* Visible focus ring for keyboard operation of the tile. */
.flip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* Below ~400px a two-column bullet grid stops being readable. A single column
   makes the longest lists taller than the fixed box, so the faces come back
   into flow (stacked in one grid cell) and the tile grows instead of clipping. */
@media (max-width: 400px) {
  .flip-list { grid-template-columns: 1fr; }
  .card.card-accent.flip { height: auto; min-height: 506px; }
  .card.card-accent.flip .flip-inner {
    position: relative;
    display: grid;
    height: auto;
    min-height: 506px;
  }
  .card.card-accent.flip .flip-face {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .svc-scan,
  .svc-grow,
  .svc-pop,
  .svc-float,
  .svc-blink,
  .svc-trace,
  .svc-progress i,
  .flip-list li { animation: none !important; }
  .svc-scan { opacity: 0; }
  .svc-grow,
  .svc-progress i { transform: scaleX(1); }
  .svc-pop,
  .flip-list li { opacity: 1; }
}