/* ── 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;

  /* 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(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}

/* ── Portal wrapper ──────────────────────────────────────────────────────── */
.portal {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  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;
  gap: 12px;
}

.card {
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 3.5vw, 2rem);
  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:hover  { transform: translateY(-5px); }
.card:active { transform: scale(.98); }

.card.scm {
  background: var(--surface-dark);
  border: .5px solid rgba(255,255,255,.07);
}
.card.track {
  background: var(--surface-green);
  border: .5px solid rgba(139,230,5,.15);
}

/* 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: var(--green); opacity: .09; }
.card.scm  .card-ring { border-color: var(--green); }
.card.track .card-blob { background: var(--surface-dark); opacity: .08; }
.card.track .card-ring { border-color: var(--surface-dark); }
@media (prefers-color-scheme: dark) {
  .card.track .card-blob { background: var(--green); opacity: .07; }
  .card.track .card-ring { border-color: var(--green); }
}

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

/* card content */
.card-num {
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: clamp(.85rem, 2.5vw, 1.25rem);
}
.card.scm   .card-num { color: rgba(245,246,245,.22); }
.card.track .card-num { color: rgba(63,99,27,.4); }
@media (prefers-color-scheme: dark) {
  .card.track .card-num { color: rgba(139,230,5,.3); }
}

.card-title {
  font-size: clamp(1.35rem, 3.8vw, 2.1rem);
  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: #F5F6F5; }
.card.track .card-title { color: #212121; }
@media (prefers-color-scheme: dark) {
  .card.track .card-title { color: #F5F6F5; }
}

.card-desc {
  font-size: clamp(.9rem, 2.2vw, 1.15rem);
  line-height: 1.55;
  position: relative; z-index: 1;
}
.card.scm   .card-desc { color: rgba(245,246,245,.42); }
.card.track .card-desc { color: var(--green-deep); }
@media (prefers-color-scheme: dark) {
  .card.track .card-desc { color: rgba(106,171,53,.65); }
}

/* arrow circle button */
.card-arrow-wrap {
  margin-top: auto;
  padding-top: clamp(1rem, 2.5vw, 1.5rem);
  position: relative; z-index: 1;
}
.card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 5.5vw, 52px);
  height: clamp(40px, 5.5vw, 52px);
  border-radius: 50%;
  transition: transform .22s ease, background .22s ease;
  position: relative;
}
.card-arrow svg {
  width: clamp(22px, 3.2vw, 30px);
  height: clamp(22px, 3.2vw, 30px);
  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: var(--green); border: 1px solid rgba(139,230,5,.22); }
.card.track .card-arrow { color: var(--green-deep); border: 1px solid rgba(63,99,27,.2); }
@media (prefers-color-scheme: dark) {
  .card.track .card-arrow { color: var(--green); border-color: rgba(139,230,5,.22); }
}
.card:hover .card-arrow { transform: translateX(6px); }
.card.scm:hover   .card-arrow { background: rgba(139,230,5,.1); }
.card.track:hover  .card-arrow { background: rgba(63,99,27,.07); }
@media (prefers-color-scheme: dark) {
  .card.track:hover .card-arrow { background: rgba(139,230,5,.1); }
}

/* ── 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;
}
@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); }

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