/* =========================================================================
   KloudTech Software — design tokens
   Colors verified against WCAG contrast (see comments). The site always
   renders in its light brand theme, independent of the system color
   scheme, so the look stays consistent across visitors' devices.
   ========================================================================= */

:root {
  /* Light surfaces */
  --surface:            #eceef1; /* muted mid-tone, not blown-out white */
  --surface-card:        #ffffff; /* cards lift slightly off the muted base */
  --surface-alt:         #dfe2e7; /* deeper grey for alternating sections */

  /* Light content (on --surface / --surface-alt) */
  --content:             #141619; /* 18.13:1 on #fff — primary text/headings */
  --content-secondary:   #4a4a52; /*  8.9:1 on #fff — body copy, deepened for weight */
  --content-tertiary:    #6b6b76; /*  6.3:1 on #fff — captions, meta */

  /* Brand accent */
  --accent:              #5a4bf4; /*  5.60:1 on #fff — links, primary actions */
  --accent-soft:         rgba(90, 75, 244, 0.10);
  --accent-soft-strong:  rgba(90, 75, 244, 0.20);

  --border:              rgba(20, 22, 25, 0.12);
  --border-strong:       rgba(20, 22, 25, 0.20);

  /* Dark surfaces (approach section + footer) */
  --surface-dark:        #141619;
  --surface-dark-alt:    #1b1e22;
  --content-dark:        #ffffff; /* 18.13:1 on --surface-dark */
  --content-dark-secondary: #c7c7ce; /* 10.88:1 on --surface-dark */
  --accent-dark:         #8c7fff; /*  5.69:1 on --surface-dark */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 25, 0.08), 0 2px 10px rgba(20, 22, 25, 0.06);
  --shadow-md: 0 10px 28px rgba(20, 22, 25, 0.12);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --max-w: 1120px;
}

/* =========================================================================
   Reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font: 100%/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        system-ui, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--content-secondary);
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

h1, h2, h3 { color: var(--content); margin: 0; font-weight: 700; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  background: var(--content);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 100;
  transform: translateY(-150%);
  opacity: 0;
  transition: transform 150ms var(--ease-standard), opacity 150ms var(--ease-standard);
}
.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   Typography scale
   Tracking is size-specific: negative on large display text, ~0 on body,
   slightly positive on small caps labels.
   ========================================================================= */

.hero-title {
  font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 auto;
}

.section-title {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.hero-sub, .section-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--content-secondary);
  max-width: 54ch;
}

.hero-sub { margin: 1.25rem auto 0; }
.section-lead { margin: 1rem 0 0; }

/* =========================================================================
   Layout helpers
   ========================================================================= */

.section { padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.section-alt { background: var(--surface-alt); }

.section-inner { max-width: var(--max-w); margin: 0 auto; }

/* =========================================================================
   Nav
   ========================================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
              box-shadow 200ms var(--ease-standard);
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-brand { display: flex; align-items: center; }
.nav-logo { height: 26px; width: auto; }

.nav-links {
  display: flex;
  gap: 1.75rem;
  margin-right: auto;
}
.nav-links a {
  color: var(--content-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0;
}
.nav-links a:hover { color: var(--accent); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: transform 100ms ease-out, background 150ms ease-out;
}
.nav-cta:active { transform: scale(0.97); }
.nav-cta:hover { background: #4a3dd9; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--content);
  margin: 0 auto;
  transition: transform 150ms var(--ease-standard), opacity 150ms var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* Mobile sheet */
.mobile-sheet {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(82vw, 360px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: -8px 0 32px rgba(20, 22, 25, 0.12);
  z-index: 70;
  padding: 5.5rem 1.75rem 2rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms var(--ease-standard), visibility 0ms linear 320ms;
}
.mobile-sheet.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 320ms var(--ease-standard), visibility 0ms linear 0ms;
}
.mobile-sheet nav { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-sheet a {
  color: var(--content);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-cta {
  margin-top: 1rem;
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius-sm);
  justify-content: center;
  border-bottom: none !important;
}

.mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 25, 0.32);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-standard), visibility 0ms linear 320ms;
}
.mobile-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease-standard), visibility 0ms linear 0ms;
}

body.sheet-open { overflow: hidden; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  padding: clamp(6rem, 14vw, 10rem) 1.5rem clamp(4rem, 8vw, 6rem);
  text-align: center;
  overflow: hidden;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.hero-halo {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(760px, 120vw);
  height: min(760px, 120vw);
  transform: translate(-50%, -30%);
  background: radial-gradient(circle at center, var(--accent-soft-strong) 0%, rgba(90,75,244,0.08) 45%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  will-change: transform;
}

.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================================================
   Buttons — feedback on press, not release
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 100ms ease-out, background 150ms ease-out, border-color 150ms ease-out;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #4a3dd9; }

.btn-secondary {
  background: transparent;
  color: var(--content);
  border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================================
   Plain-English grid
   ========================================================================= */

.plain-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.plain-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.plain-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.plain-card p { margin: 0; font-size: 0.9375rem; }

@media (max-width: 760px) {
  .plain-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Services
   ========================================================================= */

.services-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.service-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.service-icon svg { width: 22px; height: 22px; }

.service-card h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  /* Reserves exactly 2 lines so body copy starts on the same baseline across
     a row, whether a title wraps to 1 line ("Automation & DevOps") or 2
     ("Cloud Platforms & Infrastructure"). layout.md's alignment/grouping
     guidance: hierarchy should read through consistent structure, not luck. */
  min-height: calc(1.1875rem * 1.3 * 2);
  display: flex;
  align-items: flex-end;
}
.service-card p { margin: 0; font-size: 0.9375rem; }

@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Featured solutions — a compact teaser on the home page that shows the
   real products in daily use and routes to the full Solutions page. Kept
   lighter than the showcase rows there on purpose: this is the index,
   that page is the detail.
   ========================================================================= */

.sol-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.sol-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms var(--ease-standard),
              box-shadow 160ms var(--ease-standard),
              transform 160ms var(--ease-standard);
}
.sol-card:hover,
.sol-card:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.sol-card .solution-tag { align-self: flex-start; }
.sol-card h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0.15rem 0 0;
  color: var(--content);
}
.sol-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--content-secondary);
}
.sol-card-link {
  margin-top: auto;
  padding-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}
.sol-card-link svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms var(--ease-standard);
}
.sol-card:hover .sol-card-link svg,
.sol-card:focus-visible .sol-card-link svg { transform: translateX(3px); }

/* The call-to-action cell fills the last row and reads as a different
   surface, so it's obviously the "see everything" door, not a product. */
.sol-card-cta {
  grid-column: span 2;
  justify-content: center;
  text-align: left;
  background: linear-gradient(180deg, rgba(90, 75, 244, 0.12), rgba(90, 75, 244, 0.05));
  border-color: var(--accent-soft-strong);
}
.sol-card-cta h3 { font-size: 1.4rem; margin-top: 0; }
.sol-card-cta .sol-card-link { margin-top: 0.4rem; }

@media (max-width: 920px) {
  .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-card-cta { grid-column: auto; }
}
@media (max-width: 600px) {
  .sol-grid { grid-template-columns: 1fr; }
}

/* Compact services overview on the home page: names and one line each,
   linking to the dedicated services page for the full detail. */
.service-mini-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}
.service-mini { border-top: 1.5px solid var(--border); padding-top: 1rem; }
.service-mini h3 { font-size: 1.0625rem; margin: 0 0 0.3rem; color: var(--content); }
.service-mini p { margin: 0; font-size: 0.9rem; color: var(--content-secondary); }

.section-cta {
  margin-top: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.section-cta svg { width: 16px; height: 16px; transition: transform 160ms var(--ease-standard); }
.section-cta:hover svg { transform: translateX(3px); }

@media (max-width: 760px) {
  .service-mini-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .service-mini-grid { grid-template-columns: 1fr; }
}

/* Lead/outcome chips under each service on the dedicated services page. */
.service-card .solution-chips { margin-top: 1rem; }

/* =========================================================================
   Approach (dark)
   ========================================================================= */

.approach-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.approach-item { border-top: 1.5px solid var(--border-strong); padding-top: 1.25rem; }
.approach-mark {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.approach-item h3 { color: var(--content); font-size: 1.125rem; margin-bottom: 0.5rem; }
.approach-item p { margin: 0; font-size: 0.9375rem; color: var(--content-secondary); }

@media (max-width: 760px) {
  .approach-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* =========================================================================
   Contact
   ========================================================================= */

.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-inner .section-title { margin-left: auto; margin-right: auto; }
.contact-inner .section-lead { margin-left: auto; margin-right: auto; }
.contact-inner .btn { margin-top: 0.5rem; }

/* =========================================================================
   Footer
   ========================================================================= */

.footer { background: var(--surface-dark); padding: 2.5rem 1.5rem; }
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.footer-logo { height: 22px; width: auto; }
.footer-inner p {
  margin: 0;
  color: var(--content-dark-secondary);
  font-size: 0.8125rem;
}

/* =========================================================================
   Scroll reveal — respects reduced motion (JS adds .is-visible)
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; transition: opacity 200ms ease; }
  .hero-halo { transition: none !important; }
}

/* =========================================================================
   Backdrop-filter fallback
   ========================================================================= */

@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--surface); }
  .mobile-sheet { background: var(--surface); }
}

/* =========================================================================
   Solutions page
   ========================================================================= */

.solutions-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 7rem) 1.5rem clamp(3rem, 6vw, 4rem);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.solutions-hero-center {
  position: relative;
  z-index: 1;
  max-width: 880px;
  text-align: center;
}

.solutions-title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  margin: 0.9rem 0 0;
}
.sh-line { display: block; }
.sh-accent { color: var(--accent); }

/* The last line of the headline cycles through the things our systems run,
   so the sentence itself shows the breadth instead of listing it out. */
.roll {
  display: block;
  position: relative;
  height: 1.16em;
  margin-top: 0.08em;
  color: var(--accent);
}
.roll-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.5s var(--ease-standard), transform 0.6s var(--ease-standard);
  will-change: opacity, transform;
}
.roll-item.is-active { opacity: 1; transform: none; }
.roll-item.is-leaving { opacity: 0; transform: translateY(-0.5em); }

.sh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.solutions-hero-lead {
  margin: 1.2rem auto 0;
  max-width: 48ch;
}
.solutions-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1c7a53;
}
.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28a06a;
  box-shadow: 0 0 0 0 rgba(40, 160, 106, 0.45);
  animation: hs-pulse 2.4s var(--ease-standard) infinite;
}
@keyframes hs-pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 160, 106, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(40, 160, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 160, 106, 0); }
}

/* Soft accent light behind the headline: gives the centered layout depth
   and quiet motion without reintroducing any boxed panel. */
.solutions-hero-aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 50% at 28% 22%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(34% 46% at 74% 30%, rgba(90, 75, 244, 0.1) 0%, transparent 62%);
  animation: aurora-drift 20s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

@media (max-width: 560px) {
  .solutions-title { font-size: clamp(1.7rem, 1rem + 4.4vw, 2.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .roll-item { transition: opacity 0.35s ease; transform: none; }
  .roll-item.is-leaving { transform: none; }
  .hero-live-dot { animation: none; }
  .solutions-hero-aurora { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .solutions-hero-aurora { opacity: 0.6; }
}

/* =========================================================================
   Showcase gallery — alternating visual/text rows, each paired with a
   small abstract "device frame" mockup (CSS shapes, not real screenshots)
   so the product reads as something to look at, not just read about.
   ========================================================================= */

.showcase-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 7vw, 5.5rem);
}

.showcase-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  scroll-margin-top: 88px;
}
.showcase-row.reverse .showcase-visual { order: 2; }
.showcase-row.reverse .showcase-text { order: 1; }

.showcase-text { padding-top: 0.75rem; }
.showcase-text .solution-lead { margin: 0.75rem 0 1.125rem; }

.showcase-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}

/* ---- Device frame: shared chrome for every mockup ---- */
.device-frame {
  width: 100%;
  max-width: 360px;
  height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 250ms cubic-bezier(0.34, 1.1, 0.64, 1);
}
.showcase-row:hover .device-frame { transform: translateY(-4px); }

.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.frame-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.frame-bar span.frame-bar-title {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.frame-bar-title {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--content-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-body {
  flex: 1 1 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  min-height: 0;
}

/* Shared mock primitives */
.mock-line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--border-strong);
}
.mock-line.w-30 { width: 30%; }
.mock-line.w-40 { width: 40%; }
.mock-line.w-45 { width: 45%; }
.mock-line.w-50 { width: 50%; }
.mock-line.w-55 { width: 55%; }
.mock-line.w-60 { width: 60%; }
.mock-line.w-70 { width: 70%; }

.mock-text {
  font-size: 0.8125rem;
  color: var(--content-secondary);
  line-height: 1.3;
}
.mock-text--strong { font-weight: 600; color: var(--content-primary); }
.mock-text--muted { font-size: 0.75rem; color: var(--content-tertiary); }

.mock-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft-strong);
  flex-shrink: 0;
}

.mock-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}
.mock-pill-sm {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-secondary);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-alt);
  flex-shrink: 0;
  white-space: nowrap;
}
.mock-pill-sm.mock-pill--ok { background: var(--accent-soft-strong); color: var(--accent); }

/* POS retail: product tile grid + checkout strip */
.mock-pos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
.mock-pos-grid i {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-style: normal;
}
.mock-pos-name {
  font-size: 0.75rem;
  color: var(--content-secondary);
}
.mock-pos-grid i em {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--content-primary);
  font-style: normal;
}
.mock-pos-grid i:nth-child(2n) { background: var(--accent-soft-strong); }
.mock-pos-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

/* Kitchen display: stacked order tickets */
.mock-ticket-col { display: flex; flex-direction: column; gap: 0.6rem; }
.mock-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
}
.mock-ticket--done { border-left-color: var(--content-tertiary); opacity: 0.6; }

/* Row-list mocks: HRMS / Education */
.mock-rows, .mock-chart + .mock-row { display: flex; flex-direction: column; gap: 0.7rem; }
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.mock-row .mock-line,
.mock-row .mock-text { flex: 1; }

.mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 70px;
  margin-bottom: 0.25rem;
}
.mock-chart i {
  flex: 1;
  height: var(--h, 50%);
  background: var(--accent-soft-strong);
  border-radius: 4px 4px 0 0;
}
.mock-chart i:nth-child(4) { background: var(--accent); }

/* Delivery: phone frame with route map */
.frame-phone {
  border-radius: 28px;
  padding-top: 0.5rem;
}
.frame-notch {
  width: 60px;
  height: 6px;
  border-radius: 4px;
  background: var(--border-strong);
  margin: 0 auto 0.5rem;
  flex-shrink: 0;
}
.frame-phone .frame-body { padding: 1.1rem; }
.mock-map {
  position: relative;
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  background-color: #eef1e7;
  color: var(--accent);
}
.mock-map-park {
  position: absolute;
  left: -8%;
  top: 36%;
  width: 46%;
  height: 40%;
  background: #d7e6d2;
  border-radius: 40% 55% 48% 50%;
}
.mock-map-water {
  position: absolute;
  right: -12%;
  bottom: -14%;
  width: 55%;
  height: 48%;
  background: #cfe0ef;
  border-radius: 60% 40% 45% 55%;
}
.mock-map-roads { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.mock-map-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock-map-controls {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.mock-map-controls span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--content-secondary);
}
.mock-map-controls span:first-child { border-bottom: 1px solid var(--border); }
.mock-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--content-primary);
  box-shadow: 0 0 0 3px #fff, 0 2px 4px rgba(20, 22, 25, 0.3);
}
.mock-pin--start {
  left: 13%;
  bottom: 11%;
  width: 11px;
  height: 11px;
  background: var(--accent);
  box-shadow: 0 0 0 4px #fff, 0 2px 4px rgba(20, 22, 25, 0.3);
}
.mock-pin-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse {
  0% { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(1.8); opacity: 0; }
}
.mock-pin--end { right: 21%; top: 13%; }
.mock-eta-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem;
  border-radius: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Centralized display: branch screen status list */
.mock-screens { display: flex; flex-direction: column; gap: 0.6rem; }
.mock-screen-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mock-screen-row .mock-text { flex: 1; }
.mock-screen-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}
.mock-screen-dot--on { background: #2fb866; }
.mock-uptime {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.mock-uptime-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}
.mock-uptime-bar i {
  display: block;
  width: var(--p, 50%);
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Complaint & workflow: mini kanban */
.mock-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.mock-kanban-col { display: flex; flex-direction: column; gap: 0.5rem; }
.mock-kanban-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mock-kanban-card {
  min-height: 34px;
  padding: 0.4rem 0.55rem;
  display: flex;
  align-items: center;
  border-radius: 7px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--content-secondary);
  line-height: 1.25;
}
.mock-kanban-card--done { background: var(--accent-soft-strong); border-color: transparent; color: var(--accent); font-weight: 600; }

@media (max-width: 820px) {
  .showcase-row,
  .showcase-row.reverse {
    grid-template-columns: 1fr;
  }
  .showcase-row .showcase-visual,
  .showcase-row.reverse .showcase-visual { order: 1; }
  .showcase-row .showcase-text,
  .showcase-row.reverse .showcase-text { order: 2; }
  .showcase-visual { min-height: 300px; }
  .device-frame { height: 300px; }
  .frame-body { padding: 1.1rem; gap: 0.6rem; }
  .mock-pos-grid { gap: 0.4rem; }
  .mock-pos-grid i { aspect-ratio: auto; height: 48px; }
}

.solution-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
  overflow: hidden;
}
.solution-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.solution-card:hover .solution-icon {
  transform: scale(1.08);
}

.solution-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
  flex-shrink: 0;
}
.solution-icon svg { width: 22px; height: 22px; }

.solution-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.solution-card h2 {
  font-size: 1.3125rem;
  line-height: 1.25;
  margin-bottom: 0.625rem;
}

.solution-lead {
  margin: 0 0 1.125rem;
  font-size: 0.9375rem;
  color: var(--content-secondary);
}

.solution-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.solution-features li {
  font-size: 0.875rem;
  color: var(--content-secondary);
  padding-left: 1.4rem;
  position: relative;
}
.solution-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.solution-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.solution-chips li {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--content-secondary);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

/* Closing tile: now a standalone prompt after the row list, centered and
   capped in width so it reads as a question, not another product. */
.solution-card--closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  background: var(--surface-alt);
  border-style: dashed;
  box-shadow: none;
  max-width: 32rem;
  margin: 2.5rem auto 0;
}
.solution-card--closing .solution-icon { margin-bottom: 1.25rem; }
.solution-card--closing .solution-lead { margin-bottom: 1.5rem; }

@media (max-width: 760px) {
  .solution-grid { grid-template-columns: 1fr; }
}

/* ---- Details button: quiet text link, not another heavy CTA ---- */
.solution-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding: 0.6rem 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.solution-details-btn svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-standard); }
.solution-details-btn:hover svg,
.solution-details-btn:focus-visible svg { transform: translateX(3px); }
.solution-details-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ---- Solution modal: a floating functional layer over a dimmed scrim.
   Scale + fade "materializes" the panel instead of a plain cross-fade, and
   everything animates from its live value so an accidental double-click or
   an Escape mid-transition still ends in a consistent, interruptible state. */
.solution-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
}
.solution-modal.is-open { visibility: visible; }

.solution-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 25, 0.5);
  opacity: 0;
  transition: opacity 280ms var(--ease-standard);
}
.solution-modal.is-open .solution-modal-scrim { opacity: 1; }

.solution-modal-panel {
  position: relative;
  width: min(100%, 720px);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: scale(0.94) translateY(12px);
  transition: opacity 320ms var(--ease-standard), transform 320ms var(--ease-standard);
}
.solution-modal.is-open .solution-modal-panel { opacity: 1; transform: scale(1) translateY(0); }

.solution-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--content-secondary);
  cursor: pointer;
  transition: transform 150ms var(--ease-standard), border-color 150ms ease;
}
.solution-modal-close:hover { border-color: var(--border-strong); color: var(--content); }
.solution-modal-close:active { transform: scale(0.92); }
.solution-modal-close svg { width: 16px; height: 16px; }

.solution-modal-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2rem 1rem;
  min-height: 300px;
}
.solution-modal-visual .device-frame { max-width: 420px; height: 320px; }

.solution-modal-body { padding: 0.5rem 2.5rem 2.5rem; }
.solution-modal-body h3 { margin: 0.75rem 0 1rem; font-size: 1.625rem; }
.solution-modal-desc { color: var(--content-secondary); line-height: 1.68; margin: 0 0 1.5rem; }
.solution-modal-desc p { margin: 0 0 0.9rem; }
.solution-modal-desc p:last-child { margin-bottom: 0; }
.solution-modal-body .solution-chips { margin-bottom: 1.75rem; }

/* ---- Feature previews: a small gallery that shows a different slice of
   the product for each paragraph of the story, not the same hero again. */
.solution-modal-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 0 0 1.75rem;
}
.fp { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.fp-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: center;
  min-height: 118px;
  padding: 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fp-cap { font-size: 0.8125rem; font-weight: 600; color: var(--content-secondary); }
.fp-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fp-line .mock-text { font-size: 0.8125rem; }
.fp-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.fp-bars i { flex: 1; height: var(--h); background: var(--accent-soft-strong); border-radius: 3px 3px 0 0; }
.fp-bars i.is-peak { background: var(--accent); }
.fp-meter {
  width: 46%;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-soft-strong);
  overflow: hidden;
}
.fp-meter i { display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: 999px; }
.fp-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.fp-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--content-tertiary); }
.fp-step .fp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.fp-step--done { color: var(--content-primary); font-weight: 500; }
.fp-step--done .fp-dot { background: var(--accent); }
.fp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.fp-grid i { aspect-ratio: 1; border-radius: 3px; background: var(--accent-soft-strong); }
.fp-grid i.is-absent { background: var(--border); }

/* ---- Hero halo: an accent glow behind the floating mockup so it reads as a
   real material catching light, not a flat image pasted on the panel. */
.solution-modal-visual { position: relative; }
.solution-modal-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 44%, var(--accent-soft) 0%, transparent 72%);
  pointer-events: none;
}
.solution-modal-visual .device-frame { position: relative; z-index: 1; }

/* ---- Stat band: three glanceable tiles that sum up the product before the
   reading starts, each led by an icon so the eye lands on the number first. */
.solution-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1rem 1.05rem;
  background: linear-gradient(180deg, rgba(90, 75, 244, 0.07), rgba(90, 75, 244, 0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.stat-ico {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  background: var(--accent-soft);
  border-radius: 10px;
  color: var(--accent);
}
.stat-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat-num { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--content); line-height: 1.1; }
.stat-lbl { font-size: 0.78rem; color: var(--content-tertiary); line-height: 1.32; }

/* ---- Richer feature previews: icons, avatars, colored status, and a couple
   of chart types so each card shows a genuinely different slice of the product. */
.fp-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.15rem; }
.fp-top .mock-text { font-size: 0.8125rem; }
.fp-top .fp-tag { margin-left: auto; }
.fp-ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
}
.fp-ico svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-row { display: flex; align-items: center; gap: 0.5rem; }
.fp-row .mock-text { font-size: 0.8125rem; }
.fp-row > :last-child { margin-left: auto; }
.fp-assignee { display: flex; align-items: center; gap: 0.4rem; }
.fp-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #8c7fff);
}
.fp-tag { font-size: 0.72rem; font-weight: 600; padding: 0.14rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.fp-tag--ok { color: #1c7a53; background: rgba(40, 160, 106, 0.15); }
.fp-tag--warn { color: #946007; background: rgba(217, 138, 19, 0.16); }
.fp-tag--accent { color: var(--accent); background: var(--accent-soft); }
.fp-ring-wrap { display: flex; align-items: center; gap: 0.85rem; }
.fp-ring {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 70) * 1%), var(--accent-soft-strong) 0);
}
.fp-ring::after {
  content: attr(data-val);
  position: absolute;
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--content);
}
.fp-ring-text { display: flex; flex-direction: column; gap: 0.15rem; }
.fp-spark { width: 100%; height: 50px; display: block; overflow: visible; }
.fp-spark .area { fill: var(--accent-soft); }
.fp-spark .line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fp-spark .cap { fill: var(--accent); }

/* ---- Staggered entrance: stats and feature cards rise and fade in sequence
   when the panel materializes, then leave together on close (no delay out). */
.solution-modal-stats .stat,
.solution-modal-features .fp {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease-standard), transform 460ms var(--ease-standard);
}
.solution-modal.is-open .solution-modal-stats .stat,
.solution-modal.is-open .solution-modal-features .fp {
  opacity: 1;
  transform: none;
}
.solution-modal.is-open .solution-modal-stats .stat:nth-child(1) { transition-delay: 0.08s; }
.solution-modal.is-open .solution-modal-stats .stat:nth-child(2) { transition-delay: 0.14s; }
.solution-modal.is-open .solution-modal-stats .stat:nth-child(3) { transition-delay: 0.2s; }
.solution-modal.is-open .solution-modal-features .fp:nth-child(1) { transition-delay: 0.26s; }
.solution-modal.is-open .solution-modal-features .fp:nth-child(2) { transition-delay: 0.32s; }

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .solution-modal { padding: 0; align-items: flex-end; }
  .solution-modal-panel {
    width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .solution-modal.is-open .solution-modal-panel { transform: translateY(0); }
  .solution-modal-visual { padding: 2rem 1.25rem 0.5rem; min-height: 260px; }
  .solution-modal-body { padding: 0.5rem 1.5rem 2rem; }
  .solution-modal-features { grid-template-columns: 1fr; }
  .solution-modal-stats { gap: 0.5rem; }
  .stat { padding: 0.8rem; }
  .stat-ico { width: 30px; height: 30px; border-radius: 9px; }
  .stat-ico svg { width: 16px; height: 16px; }
  .stat-num { font-size: 1.05rem; }
  .stat-lbl { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-modal-scrim,
  .solution-modal-panel { transition: opacity 200ms ease; transform: none !important; }
  .solution-modal-stats .stat,
  .solution-modal-features .fp { transition: opacity 200ms ease; transform: none !important; }
}

/* =========================================================================
   Contact page
   One warm primary action, backed by an honest "here's what happens next"
   sequence that lowers the stakes of a first message. Reuses the solutions
   hero shell (aurora + centred headline) so the page feels part of the set.
   ========================================================================= */

.contact-actions {
  position: relative;
  z-index: 1;
  margin-top: 1.9rem;
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-address {
  position: relative;
  z-index: 1;
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  color: var(--content-tertiary);
}
.contact-address a {
  color: var(--content-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: color 150ms var(--ease-standard), border-color 150ms var(--ease-standard);
}
.contact-address a:hover { color: var(--accent); border-color: var(--accent); }

.contact-reassure {
  position: relative;
  z-index: 1;
  margin: 1.5rem auto 0;
  max-width: 46ch;
  font-size: 0.9rem;
  color: var(--content-tertiary);
}

/* "What happens after you reach out" — a genuine three-step sequence, so the
   numbered badges encode a real order rather than decorate a list. */
.steps {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.step {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.step h3 { margin: 1.1rem 0 0.45rem; font-size: 1.12rem; }
.step p { margin: 0; color: var(--content-secondary); font-size: 0.95rem; line-height: 1.55; }

.contact-closing { text-align: center; }

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: 1rem; }
}

/* =========================================================================
   Process — a real sequence, so dots on a connecting line encode the order.
   Deliberately not numbered (the Approach section already carries 01/02/03),
   so the two sections never read as the same device.
   ========================================================================= */
.timeline {
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.tl-item {
  position: relative;
  text-align: center;
  padding-top: 2.5rem;
}
.tl-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
  transform: translateX(-50%) scale(0.001);
  transition: transform 460ms var(--ease-standard);
}
.tl-item.is-visible .tl-dot { transform: translateX(-50%) scale(1); }
.tl-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  right: calc(-50% - 1.5rem);
  height: 2px;
  background: var(--border-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms var(--ease-standard);
}
.tl-item.is-visible:not(:last-child)::after { transform: scaleX(1); }
/* Gentle cascade so the line appears to draw itself left to right. */
.tl-item:nth-child(2) .tl-dot, .tl-item:nth-child(2)::after { transition-delay: 90ms; }
.tl-item:nth-child(3) .tl-dot, .tl-item:nth-child(3)::after { transition-delay: 180ms; }
.tl-item:nth-child(4) .tl-dot, .tl-item:nth-child(4)::after { transition-delay: 270ms; }
.tl-item:nth-child(2) { transition-delay: 70ms; }
.tl-item:nth-child(3) { transition-delay: 140ms; }
.tl-item:nth-child(4) { transition-delay: 210ms; }
.tl-item h3 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.tl-item p {
  margin: 0 auto;
  max-width: 24ch;
  color: var(--content-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .tl-item {
    text-align: left;
    padding: 0 0 1.9rem 2.5rem;
  }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-dot { top: 4px; left: 7px; transform: translateX(-50%) scale(0.001); }
  .tl-item.is-visible .tl-dot { transform: translateX(-50%) scale(1); }
  /* Connector becomes a vertical rail down the left edge. */
  .tl-item:not(:last-child)::after {
    top: 11px;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
    bottom: -4px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
  }
  .tl-item.is-visible:not(:last-child)::after { transform: translateX(-50%) scaleY(1); }
  .tl-item p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-dot { transform: translateX(-50%) scale(1); transition: none; }
  .tl-item:not(:last-child)::after { transform: scaleX(1); transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .tl-item:not(:last-child)::after { transform: translateX(-50%) scaleY(1); }
}

/* =========================================================================
   FAQ — native <details> for a keyboard-friendly, no-JS accordion.
   The marker is a quiet plus that relaxes into a minus when open.
   ========================================================================= */
.faq {
  margin: 2.5rem auto 0;
  max-width: 760px;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  list-style: none;
  outline: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--content);
}
.faq-item summary:hover .faq-q { color: var(--accent); }
.faq-item summary:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--accent-soft-strong);
}
/* Plus/minus mark built from two bars; the vertical bar collapses on open. */
.faq-ico {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.faq-ico::before,
.faq-ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 260ms var(--ease-standard), opacity 260ms var(--ease-standard);
}
.faq-ico::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-ico::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-ico::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
  padding: 0 0.25rem 1.4rem;
}
.faq-a p {
  margin: 0;
  max-width: 64ch;
  color: var(--content-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
}
.faq-item[open] .faq-a { animation: faqReveal 320ms var(--ease-standard); }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-more {
  margin: 2.25rem 0 0;
  text-align: center;
  color: var(--content-tertiary);
  font-size: 0.95rem;
}
.faq-more a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft-strong);
  padding-bottom: 1px;
  transition: border-color 150ms var(--ease-standard);
}
.faq-more a:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-a { animation: none; }
  .faq-ico::before, .faq-ico::after { transition: none; }
}

/* =========================================================================
   Footer legal links
   ========================================================================= */
.footer-legal {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.footer-legal a {
  color: var(--content-dark-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color 150ms var(--ease-standard);
}
.footer-legal a:hover { color: var(--accent-dark); }

@media (max-width: 560px) {
  .footer-legal { margin-left: 0; width: 100%; }
}

/* =========================================================================
   Legal pages (Privacy, Terms) — plain, readable long-form prose
   ========================================================================= */
.legal-hero {
  padding: clamp(4rem, 9vw, 6rem) 1.5rem clamp(2rem, 4vw, 3rem);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.legal-hero .section-inner { max-width: 760px; }
.legal-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.legal-updated {
  margin: 0.85rem 0 0;
  color: var(--content-tertiary);
  font-size: 0.9rem;
}
.legal-body { max-width: 760px; }
.legal-intro {
  margin: 0 0 2.5rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--content-secondary);
}
.legal-body h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--content);
}
.legal-body h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.05rem;
  color: var(--content);
}
.legal-body p {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--content-secondary);
}
.legal-body ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--content-secondary);
}
.legal-body li { margin: 0 0 0.4rem; }
.legal-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft-strong);
  transition: border-color 150ms var(--ease-standard);
}
.legal-body a:hover { border-color: var(--accent); }