/* Civzu visual pass: a consistent night-blue environment with useful motion. */
body {
  background: #061421;
  background-image: radial-gradient(ellipse at 84% 12%, #123d6050, transparent 43%);
}

.site-header { background: #061421ed; }
.section-dark { background: linear-gradient(135deg, #061827 0%, #0b2d49 54%, #061827 100%); }
.philosophy { background: linear-gradient(130deg, #08283e, #061724); }

/* Four original engineering scenes share one generated atlas for fast loading. */
.cap-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cap-large { grid-column: span 1; }
.cap {
  min-height: 0;
  padding: 16px 16px 27px;
  border: 1px solid #548db84d;
  border-radius: 18px;
  background: linear-gradient(150deg, #123853, #071d30 72%);
  box-shadow: 0 22px 60px #010e1b50, inset 0 1px #c8ecff16;
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}
.cap:hover,
.cap:focus-visible {
  transform: translateY(-6px);
  border-color: #73c9f1;
  box-shadow: 0 26px 66px #010e1b80, 0 0 0 1px #62b8ee33;
}
.cap-top { padding: 4px 8px 0; color: #b9d8e8; }
.cap-art,
.cap-terrain,
.cap-road,
.cap-grading,
.cap-drawings {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 16px 0 22px;
  border-radius: 10px;
  border: 1px solid #83cae94d;
  background-image: url('/assets/civzu-workflow-atlas.webp');
  background-repeat: no-repeat;
  background-size: 200% 200%;
  transform: none;
  transition: filter .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  box-shadow: inset 0 0 45px #00142766;
}
.cap-terrain { background-position: left top; }
.cap-road { background-position: right top; }
.cap-grading { background-position: left bottom; }
.cap-drawings { background-position: right bottom; }
.cap-road::after { display: none; }
.cap:hover .cap-art,
.cap:focus-visible .cap-art { filter: saturate(1.15) brightness(1.08); transform: scale(1.012); }
.cap h3 { padding: 0 8px; font-size: clamp(28px, 2.6vw, 38px); }
.cap p { padding: 0 8px; max-width: 520px; color: #bdd0db; font-size: 14px; }

/* Every page stays within the same deep-blue visual system. */
.atlas {
  color: #eef7fc;
  background: radial-gradient(ellipse at 88% 8%, #174b70 0%, #0b2b45 38%, #061827 78%);
  border-block: 1px solid #457c9e55;
}
.atlas::before {
  background: radial-gradient(circle at 90% 13%, #287fff2a, transparent 47%);
  animation: atlas-glow 15s ease-in-out infinite alternate;
}
.atlas .eyebrow,
.atlas h2 em { color: #a4defd; }
.atlas .section-head p { color: #b5cede; }
.atlas-grid { gap: 12px; border: 0; background: none; }
.atlas-card {
  min-height: 310px;
  border: 1px solid #76b7dc45;
  border-radius: 14px;
  background: linear-gradient(145deg, #143b59 0%, #0a263d 75%);
  box-shadow: inset 0 1px #cff0ff16;
  transition: background .25s ease, transform .3s ease, border-color .3s ease;
}
.atlas-card:hover,
.atlas-card:focus-within {
  background: linear-gradient(145deg, #1a4d71, #0c2d47 75%);
  border-color: #78c8ee;
  transform: translateY(-3px);
}
.atlas-card-top { color: #a8cadb; }
.atlas-card-top span:last-child { color: #8fdcfa; }
.atlas-card h3 { color: #f5fbff; }
.atlas-card p { color: #b4cbd9; }
.atlas-tags span { border-color: #77b3d168; color: #b5d8e9; }
.atlas-outro { color: #a9cadd; }
.atlas-outro a { color: #a9e2fb; border-color: #72c8eb; }

.gallery-section {
  color: #eef7fc;
  background: linear-gradient(165deg, #071c2c, #10334a 55%, #061827);
}
.gallery-section .eyebrow,
.gallery-section h2 em { color: #a4defd; }
.gallery-section .section-head p { color: #b5cede; }
.screen {
  border-radius: 12px;
  overflow: hidden;
  border-color: #70add16b;
  box-shadow: 0 28px 70px #010e1baa;
}

.price-card,
.price-card.featured {
  color: #f0f8ff;
  background: linear-gradient(145deg, #163d5c, #0a2439 75%);
  border: 1px solid #6fb7df70;
  border-radius: 16px;
  box-shadow: 0 25px 65px #010d1a85;
}
.price-card.featured { background: linear-gradient(145deg, #1a5684, #0b2a48 65%, #0a2439); }
.price-kicker { color: #91dcff; }
.price-card > p,
.price-value span,
.price-annual,
.price-card ul { color: #b5cedc; }
.price-card hr { border-color: #81b2cc77; }
.price-card .button-outline { color: #e9f8ff; border-color: #83c8e8; }
.price-card .button-outline:hover { background: #143f60; }

.waitlist-form {
  color: #eef8ff;
  background: linear-gradient(145deg, #153c58, #0b263c);
  border: 1px solid #6bb5db88;
  border-radius: 16px;
  box-shadow: 0 28px 74px #010e1b88;
}
.waitlist-form > p { color: #bed5e2; }
.field input,
.field select { background: #f3f9fc; border-radius: 6px; }
.consent a { color: #a7e1ff; }
.form-status { color: #b7efff !important; }
.form-status.error { color: #ffbcb5 !important; }
.small-note { color: #b0c9d8; }

/* Reveal elements only when script and IntersectionObserver are available. */
.will-reveal { opacity: 0; transform: translateY(22px); }
.will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.cap.will-reveal.is-visible,
.atlas-card.will-reveal.is-visible { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
@keyframes atlas-glow { from { transform: translate(-4%, 0) scale(1); } to { transform: translate(4%, 4%) scale(1.2); } }

@media (max-width: 800px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap { padding: 12px 12px 24px; }
}
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap h3 { font-size: 32px; }
  .atlas-card { min-height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas::before { animation: none; }
  .will-reveal,
  .will-reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .cap,
  .cap-art,
  .atlas-card { transition: none; }
  .cap:hover,
  .cap:focus-visible,
  .atlas-card:hover,
  .atlas-card:focus-within,
  .cap:hover .cap-art,
  .cap:focus-visible .cap-art { transform: none; }
}