/* ── Fonts ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* 4 surface levels */
  --bg:            #E8EAE8;   /* page canvas */
  --surface:       #F5F6F5;   /* hero card + maint card (neutral) */
  --surface-dark:  #1e2b1e;   /* SCM card — deep green-grey, no blue */
  --surface-green: #EDF7E6;   /* Track card */

  /* text */
  --text:       #212121;
  --text-muted: #3D3D3D;

  /* brand */
  --green:      #8BE605;
  --green-deep: #3F631B;
  --teal:        oklch(0.55 0.14 194.91);  /* brand teal — trust / chrome */
  --teal-bright: oklch(0.72 0.14 194.91);  /* lighter teal for dark surfaces */

  /* hero ornament circles */
  --circle-border: rgba(9,32,52,.1);
  --circle-fill:   rgba(9,32,52,.05);
  --label-color:   rgba(33,33,33,.35);

  /* radius */
  --r-md:   20px;
  --r-lg:   28px;
  --r-pill: 9999px;

  /* type scale — only tokens that are actually referenced */
  --t-xs:   clamp(.68rem,  1.4vw,  .78rem);
  --t-sm:   clamp(.82rem,  1.7vw,  .92rem);
  --t-base: clamp(.95rem,  2vw,    1.05rem);
  --t-xl:   clamp(1.3rem,  3vw,    1.75rem);
  --t-2xl:  clamp(1.6rem,  4vw,    2.2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #111111;   /* neutral dark canvas */
    --surface:       #212121;   /* hero + maint card — floats above canvas */
    --surface-dark:  #2a302a;   /* SCM card — dark green-grey, floats above #111111 canvas */
    --surface-green: #0b2212;   /* Track card */

    --text:       #F5F6F5;
    --text-muted: #C8C9C8;
    --green-deep: #6AAB35;      /* readable green on dark surfaces */

    --circle-border: rgba(139,230,5,.12);
    --circle-fill:   rgba(139,230,5,.06);
    --label-color:   rgba(245,246,245,.32);
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 1.1vw, 1.25rem) clamp(1rem, 4vw, 2rem);
}

/* ── Portal wrapper ──────────────────────────────────────────────────────── */
.portal {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vw, 22px);
  animation: rise .55s cubic-bezier(.16,1,.3,1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero block ──────────────────────────────────────────────────────────── */
.hero {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  position: relative;
  overflow: hidden;
  /* subtle lift so the card reads against the page bg in light mode */
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .hero { box-shadow: none; }
}

/* decorative circles */
.hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.hero-deco span {
  position: absolute;
  border-radius: 50%;
}
.hero-deco span:nth-child(1) {          /* large outer ring */
  width: 340px; height: 340px;
  bottom: -140px; right: -100px;
  border: 1px solid var(--circle-border);
}
.hero-deco span:nth-child(2) {          /* medium filled blob */
  width: 200px; height: 200px;
  bottom: -80px; right: -40px;
  background: var(--circle-fill);
}
.hero-deco span:nth-child(3) {          /* small accent circle */
  width: 80px; height: 80px;
  top: -20px; left: 50px;
  background: var(--circle-fill);
  border: 1px solid var(--circle-border);
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: clamp(260px, 78%, 560px);
}
.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  position: relative;
  z-index: 1;
}

.hero-label {
  font-size: clamp(.8rem, 1.8vw, 1rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label-color);
}

/* ── Service cards ───────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.card {
  border-radius: var(--r-md);
  padding: clamp(.9rem, 2.2vw, 1.35rem) clamp(.85rem, 2vw, 1.25rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease;
  animation: rise .55s cubic-bezier(.16,1,.3,1) both;
}
.card:nth-child(1) { animation-delay: .1s; }
.card:nth-child(2) { animation-delay: .18s; }
.card:nth-child(3) { animation-delay: .26s; }
.card:nth-child(4) { animation-delay: .34s; }
.card:nth-child(5) { animation-delay: .42s; }
.card:nth-child(6) { animation-delay: .50s; }
.card:nth-child(7) { animation-delay: .58s; }
.card:nth-child(8) { animation-delay: .66s; }
.card:nth-child(9) { animation-delay: .74s; }
.card:nth-child(10) { animation-delay: .82s; }
.card:hover  { transform: translateY(-5px); }
.card:active { transform: scale(.98); }

.card.scm {
  background: #EAF4FB;
  border: .5px solid rgba(59,141,189,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.scm { background: #0c1d2c; border-color: rgba(59,141,189,.16); box-shadow: none; }
}
.card.track {
  background: #FEF0F5;
  border: .5px solid rgba(252,63,109,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.track { background: #2A0D1A; border-color: rgba(252,63,109,.16); box-shadow: none; }
}
.card.vault {
  background: var(--surface);
  border: .5px solid rgba(9,32,52,.08);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.vault { border-color: rgba(255,255,255,.06); box-shadow: none; }
}
.card.ksuite {
  background: #F3EFFE;
  border: .5px solid rgba(123,79,248,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.ksuite { background: #160d2e; border-color: rgba(123,79,248,.18); box-shadow: none; }
}
.card.tsplus {
  background: #FFFBEB;
  border: .5px solid rgba(245,158,11,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.tsplus { background: #1C1200; border-color: rgba(245,158,11,.18); box-shadow: none; }
}
.card.gitlab {
  background: #FEF3EC;
  border: .5px solid rgba(252,109,38,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.gitlab { background: #1F0D00; border-color: rgba(252,109,38,.18); box-shadow: none; }
}
.card.squash {
  background: #E8F6FA;
  border: .5px solid rgba(14,127,160,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.squash { background: #041821; border-color: rgba(14,127,160,.18); box-shadow: none; }
}
.card.openwebui {
  background: var(--surface);
  border: .5px solid rgba(33,33,33,.08);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.openwebui { border-color: rgba(255,255,255,.06); box-shadow: none; }
}
.card.tealia {
  background: color-mix(in oklch, var(--teal) 12%, white);
  border: .5px solid color-mix(in oklch, var(--teal) 20%, transparent);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.tealia { background: color-mix(in oklch, var(--teal) 20%, black); border-color: color-mix(in oklch, var(--teal) 22%, transparent); box-shadow: none; }
}
.card.prospection {
  background: #E4F3EA;
  border: .5px solid rgba(46,107,79,.14);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  .card.prospection { background: #1F3529; border-color: rgba(143,216,180,.18); box-shadow: none; }
}

/* decorative circles on cards */
.card-blob,
.card-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.card-blob {
  width: 120px; height: 120px;
  bottom: -35px; right: -35px;
}
.card-ring {
  width: 175px; height: 175px;
  bottom: -58px; right: -58px;
  border: 1px solid;
  opacity: .1;
}
.card.scm  .card-blob { background: #3B8DBD; opacity: .08; }
.card.scm  .card-ring { border-color: #3B8DBD; }
.card.track  .card-blob { background: #FC3F6D; opacity: .1; }
.card.track  .card-ring { border-color: #FC3F6D; }
.card.vault  .card-blob { background: var(--green); opacity: .06; }
.card.vault  .card-ring { border-color: var(--green); }
.card.ksuite .card-blob { background: #7B4FF8; opacity: .09; }
.card.ksuite .card-ring { border-color: #7B4FF8; }
.card.tsplus .card-blob { background: #F59E0B; opacity: .09; }
.card.tsplus .card-ring { border-color: #F59E0B; }
.card.gitlab .card-blob { background: #FC6D26; opacity: .09; }
.card.gitlab .card-ring { border-color: #FC6D26; }
.card.squash .card-blob { background: #0E7FA0; opacity: .09; }
.card.squash .card-ring { border-color: #0E7FA0; }
.card.openwebui .card-blob { background: var(--text); opacity: .06; }
.card.openwebui .card-ring { border-color: var(--text); }
.card.tealia .card-blob { background: var(--teal); opacity: .09; }
.card.tealia .card-ring { border-color: var(--teal); }
.card.prospection .card-blob { background: #2E6B4F; opacity: .09; }
.card.prospection .card-ring { border-color: #2E6B4F; }

.card:hover .card-blob { transform: scale(1.18); }
.card:hover .card-ring { transform: scale(1.1); opacity: .2; }

/* card logo */
.card-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  margin-bottom: clamp(.35rem, 1vw, .5rem);
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .card-logo           { mix-blend-mode: normal; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
  .card.scm      .card-logo { filter: contrast(1.8) saturate(2.2); }
  .card.vault    .card-logo { filter: invert(1); box-shadow: none; }
  .card.openwebui .card-logo { filter: invert(1); box-shadow: none; }
}

/* card content */
.card-num {
  font-size: clamp(.88rem, 2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: clamp(.6rem, 1.8vw, .9rem);
}
.card.scm   .card-num { color: rgba(59,141,189,.3); }
.card.track  .card-num { color: rgba(252,63,109,.3); }
@media (prefers-color-scheme: dark) {
  .card.track  .card-num { color: rgba(252,63,109,.45); }
}
.card.vault  .card-num { color: rgba(33,33,33,.2); }
@media (prefers-color-scheme: dark) {
  .card.vault  .card-num { color: rgba(245,246,245,.18); }
}
.card.ksuite .card-num { color: rgba(123,79,248,.28); }
@media (prefers-color-scheme: dark) {
  .card.ksuite .card-num { color: rgba(123,79,248,.45); }
}
.card.tsplus .card-num { color: rgba(245,158,11,.35); }
.card.gitlab  .card-num { color: rgba(252,109,38,.3); }
.card.squash     .card-num { color: rgba(14,127,160,.3); }
.card.openwebui  .card-num { color: rgba(33,33,33,.2); }
.card.tealia     .card-num { color: color-mix(in oklch, var(--teal) 30%, transparent); }
.card.prospection .card-num { color: rgba(46,107,79,.3); }
@media (prefers-color-scheme: dark) {
  .card.tsplus    .card-num { color: rgba(245,158,11,.5); }
  .card.gitlab    .card-num { color: rgba(252,109,38,.45); }
  .card.squash    .card-num { color: rgba(14,127,160,.5); }
  .card.openwebui .card-num { color: rgba(245,246,245,.18); }
  .card.tealia    .card-num { color: color-mix(in oklch, var(--teal-bright) 50%, transparent); }
  .card.prospection .card-num { color: rgba(143,216,180,.5); }
}

.card-title {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: clamp(.35rem, 1vw, .55rem);
  position: relative; z-index: 1;
}
.card.scm    .card-title { color: var(--text); }
.card.track  .card-title { color: var(--text); }
.card.vault  .card-title { color: var(--text); }
.card.ksuite .card-title { color: var(--text); }
.card.tsplus .card-title { color: var(--text); }
.card.gitlab  .card-title { color: var(--text); }
.card.squash    .card-title { color: var(--text); }
.card.openwebui .card-title { color: var(--text); }
.card.tealia    .card-title { color: var(--text); }
.card.prospection .card-title { color: var(--text); }

.card-desc {
  font-size: clamp(.82rem, 1.8vw, 1rem);
  line-height: 1.55;
  position: relative; z-index: 1;
}
.card.scm    .card-desc { color: var(--text-muted); }
.card.track  .card-desc { color: var(--text-muted); }
.card.vault  .card-desc { color: var(--text-muted); }
.card.ksuite .card-desc { color: var(--text-muted); }
.card.tsplus .card-desc { color: var(--text-muted); }
.card.gitlab  .card-desc { color: var(--text-muted); }
.card.squash    .card-desc { color: var(--text-muted); }
.card.openwebui .card-desc { color: var(--text-muted); }
.card.tealia    .card-desc { color: var(--text-muted); }
.card.prospection .card-desc { color: var(--text-muted); }

/* arrow circle button */
.card-arrow-wrap {
  margin-top: auto;
  padding-top: clamp(.65rem, 1.8vw, 1rem);
  position: relative; z-index: 1;
}
.card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 4vw, 40px);
  height: clamp(32px, 4vw, 40px);
  border-radius: 50%;
  transition: transform .22s ease, background .22s ease;
  position: relative;
}
.card-arrow svg {
  width: clamp(18px, 2.5vw, 24px);
  height: clamp(18px, 2.5vw, 24px);
  display: block;
}
/* outer ring expands on hover */
.card-arrow::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .22s ease, transform .22s ease;
}
.card:hover .card-arrow::after { opacity: .18; transform: scale(1); }

.card.scm    .card-arrow { color: #3B8DBD; border: 1px solid rgba(59,141,189,.22); }
.card.track  .card-arrow { color: #FC3F6D; border: 1px solid rgba(252,63,109,.22); }
.card.vault  .card-arrow { color: var(--green-deep); border: 1px solid rgba(63,99,27,.18); }
.card.ksuite .card-arrow { color: #7B4FF8; border: 1px solid rgba(123,79,248,.22); }
.card.tsplus .card-arrow { color: #D97706; border: 1px solid rgba(245,158,11,.25); }
.card.gitlab    .card-arrow { color: #FC6D26; border: 1px solid rgba(252,109,38,.22); }
.card.squash    .card-arrow { color: #0E7FA0; border: 1px solid rgba(14,127,160,.22); }
.card.openwebui .card-arrow { color: var(--text); border: 1px solid rgba(33,33,33,.22); }
.card.tealia    .card-arrow { color: var(--teal); border: 1px solid color-mix(in oklch, var(--teal) 22%, transparent); }
.card.prospection .card-arrow { color: #2E6B4F; border: 1px solid rgba(46,107,79,.22); }
@media (prefers-color-scheme: dark) {
  .card.track     .card-arrow { color: #FF6B8A; border-color: rgba(252,63,109,.28); }
  .card.vault     .card-arrow { color: var(--green); border-color: rgba(139,230,5,.22); }
  .card.ksuite    .card-arrow { color: #9B7FFF; border-color: rgba(155,127,255,.28); }
  .card.tsplus    .card-arrow { color: #FCD34D; border-color: rgba(252,211,77,.28); }
  .card.gitlab    .card-arrow { color: #FF8F5E; border-color: rgba(255,143,94,.28); }
  .card.squash    .card-arrow { color: #22C5E8; border-color: rgba(34,197,232,.28); }
  .card.openwebui .card-arrow { border-color: rgba(245,246,245,.28); }
  .card.tealia    .card-arrow { color: var(--teal-bright); border-color: color-mix(in oklch, var(--teal-bright) 28%, transparent); }
  .card.prospection .card-arrow { color: #8FD8B4; border-color: rgba(143,216,180,.28); }
}
.card:hover .card-arrow { transform: translateX(6px); }
.card.scm:hover       .card-arrow { background: rgba(59,141,189,.09); }
.card.track:hover     .card-arrow { background: rgba(252,63,109,.08); }
.card.vault:hover     .card-arrow { background: rgba(63,99,27,.07); }
.card.ksuite:hover    .card-arrow { background: rgba(123,79,248,.08); }
.card.tsplus:hover    .card-arrow { background: rgba(245,158,11,.09); }
.card.squash:hover    .card-arrow { background: rgba(14,127,160,.08); }
.card.openwebui:hover .card-arrow { background: rgba(33,33,33,.05); }
.card.tealia:hover    .card-arrow { background: color-mix(in oklch, var(--teal) 8%, transparent); }
.card.prospection:hover .card-arrow { background: rgba(46,107,79,.08); }
@media (prefers-color-scheme: dark) {
  .card.track:hover     .card-arrow { background: rgba(252,63,109,.12); }
  .card.vault:hover     .card-arrow { background: rgba(139,230,5,.1); }
  .card.ksuite:hover    .card-arrow { background: rgba(123,79,248,.12); }
  .card.tsplus:hover    .card-arrow { background: rgba(245,158,11,.12); }
  .card.squash:hover    .card-arrow { background: rgba(14,127,160,.12); }
  .card.openwebui:hover .card-arrow { background: rgba(245,246,245,.08); }
  .card.tealia:hover    .card-arrow { background: color-mix(in oklch, var(--teal-bright) 12%, transparent); }
  .card.prospection:hover .card-arrow { background: rgba(143,216,180,.12); }
}

/* ── Status pill with pulsing dot ────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pill--warning {
  background: rgba(245,158,11,.1);
  color: #92400e;
  border: 1px solid rgba(245,158,11,.28);
}
.pill--danger {
  background: rgba(239,68,68,.08);
  color: #991b1b;
  border: 1px solid rgba(239,68,68,.22);
}
@media (prefers-color-scheme: dark) {
  .pill--warning { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.25); }
  .pill--danger  { background: rgba(239,68,68,.1);  color: #f87171; border-color: rgba(239,68,68,.2); }
}

.pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.pill__dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  animation: glow-pulse 2s ease infinite;
}
.pill--warning .pill__dot         { background: #f59e0b; }
.pill--warning .pill__dot::before { background: rgba(245,158,11,.35); }
.pill--danger  .pill__dot         { background: #ef4444; }
.pill--danger  .pill__dot::before { background: rgba(239,68,68,.35); }

@keyframes glow-pulse {
  0%, 100% { transform: scale(1);   opacity: .85; }
  50%       { transform: scale(2.2); opacity: 0; }
}

/* ── Maintenance content card ────────────────────────────────────────────── */
.maint {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: .5px solid rgba(9,32,52,.08);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  animation: rise .55s cubic-bezier(.16,1,.3,1) .12s both;
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .maint { border-color: rgba(255,255,255,.06); }
}

.maint__title {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.maint__desc {
  font-size: var(--t-base);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 400px;
}

.maint__eta {
  border: 1px solid rgba(9,32,52,.1);
  border-radius: var(--r-md);
  padding: clamp(.85rem, 2.5vw, 1.25rem) clamp(1.5rem, 4vw, 2.5rem);
  min-width: 200px;
}
@media (prefers-color-scheme: dark) {
  .maint__eta { border-color: rgba(255,255,255,.1); }
}
.maint__eta-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  opacity: .55;
  margin-bottom: 6px;
}
.maint__eta-value {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.maint__contact {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.maint__contact a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(9,32,52,.13);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: border-color .15s, color .15s, background .15s;
}
.maint__contact a:hover {
  border-color: var(--green);
  color: var(--green-deep);
  background: rgba(139,230,5,.06);
}
@media (prefers-color-scheme: dark) {
  .maint__contact a { border-color: rgba(255,255,255,.1); color: rgba(245,246,245,.5); }
  .maint__contact a:hover { border-color: var(--green); color: var(--green); background: rgba(139,230,5,.07); }
}

.maint__refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: rgba(139,230,5,.1);
  border: 1px solid rgba(139,230,5,.25);
  color: var(--green-deep);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.maint__refresh:hover { background: rgba(139,230,5,.18); }
@media (prefers-color-scheme: dark) {
  .maint__refresh { color: var(--green); }
}

.maint__back {
  font-size: var(--t-sm);
  color: var(--label-color);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .15s;
}
.maint__back:hover { color: var(--text-muted); }

/* ── Service-branded maintenance card ────────────────────────────────────── */
.maint__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .maint__icon                          { mix-blend-mode: normal; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
  body[data-service="scm"]   .maint__icon { filter: contrast(1.8) saturate(2.2); }
  body[data-service="vault"] .maint__icon { filter: invert(1); box-shadow: none; }
}

/* shared pseudo-element pattern — blob (::before) + ring (::after) */
body[data-service="scm"] .maint,
body[data-service="track"] .maint,
body[data-service="vault"] .maint {
  border: .5px solid transparent;
}
body[data-service="scm"] .maint::before,
body[data-service="track"] .maint::before,
body[data-service="vault"] .maint::before,
body[data-service="scm"] .maint::after,
body[data-service="track"] .maint::after,
body[data-service="vault"] .maint::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
body[data-service="scm"] .maint::before,
body[data-service="track"] .maint::before,
body[data-service="vault"] .maint::before {
  width: 180px; height: 180px;
  bottom: -50px; right: -50px;
}
body[data-service="scm"] .maint::after,
body[data-service="track"] .maint::after,
body[data-service="vault"] .maint::after {
  width: 260px; height: 260px;
  bottom: -90px; right: -90px;
  border: 1px solid;
}

/* SCM — blue */
body[data-service="scm"] .maint { background: #EAF4FB; border-color: rgba(59,141,189,.14); }
body[data-service="scm"] .maint::before { background: #3B8DBD; opacity: .06; }
body[data-service="scm"] .maint::after  { border-color: #3B8DBD; opacity: .12; }
@media (prefers-color-scheme: dark) {
  body[data-service="scm"] .maint { background: #0c1d2c; border-color: rgba(59,141,189,.16); }
}

/* Track — pink */
body[data-service="track"] .maint { background: #FEF0F5; border-color: rgba(252,63,109,.14); }
body[data-service="track"] .maint::before { background: #FC3F6D; opacity: .07; }
body[data-service="track"] .maint::after  { border-color: #FC3F6D; opacity: .12; }
@media (prefers-color-scheme: dark) {
  body[data-service="track"] .maint { background: #2A0D1A; border-color: rgba(252,63,109,.16); }
}

/* Vault — green */
body[data-service="vault"] .maint { border-color: rgba(139,230,5,.2); }
body[data-service="vault"] .maint::before { background: var(--green); opacity: .05; }
body[data-service="vault"] .maint::after  { border-color: var(--green); opacity: .1; }
@media (prefers-color-scheme: dark) {
  body[data-service="vault"] .maint { border-color: rgba(139,230,5,.15); }
}

/* ── Coming-soon veil ────────────────────────────────────────────────────── */
.card--coming-soon { cursor: default; }
.card--coming-soon:hover { transform: none; }

.card-veil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 10;
  backdrop-filter: blur(5px) saturate(.7);
  -webkit-backdrop-filter: blur(5px) saturate(.7);
  background: rgba(255,255,255,.48);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-color-scheme: dark) {
  .card-veil { background: rgba(0,0,0,.52); }
}
.card-veil span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  color: #FC6D26;
  background: rgba(252,109,38,.07);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
}