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

/* AI workforce and future team story: original HTML/CSS diagrams, no screenshot substitutes. */
.hero h1 { font-size: clamp(58px, 6.5vw, 108px); max-width: 770px; }
.primary-nav { gap: 22px; }
.hero-lead { max-width: 610px; }
.agent-section {
  background: radial-gradient(ellipse at 5% 6%, #164e73 0, transparent 38%),
    linear-gradient(155deg, #061622 8%, #0a2b45 64%, #061827);
  border-block: 1px solid #69b9df34;
}
.agent-section .section-head-row p { max-width: 480px; }
.agent-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.agent-diagram {
  position: relative; overflow: hidden; padding: 28px clamp(20px, 4vw, 55px) 34px;
  border: 1px solid #77d9fa69; border-radius: 22px;
  background: radial-gradient(circle at 54% 35%, #1c679a82, transparent 46%),
    linear-gradient(145deg, #103451, #061b2d 70%);
  box-shadow: 0 40px 100px #020b17ab, inset 0 1px #d2f5ff25;
}
.agent-diagram::before { content: ''; position: absolute; inset: 0; opacity: .4; pointer-events: none; background: linear-gradient(#9edbfd12 1px, transparent 1px), linear-gradient(90deg, #9edbfd12 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(transparent, black 22%, black 72%, transparent); }
.agent-diagram > * { position: relative; }
.agent-diagram-top, .team-board-head { display: flex; justify-content: space-between; gap: 14px; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: #a6d5e9; }
.agent-node { margin-inline: auto; width: min(100%, 360px); padding: 20px 25px; border-radius: 14px; text-align: center; border: 1px solid #97d8f178; background: linear-gradient(135deg, #153f5d, #0a2a40); box-shadow: 0 20px 42px #02121f99; }
.agent-source { margin-top: 50px; }
.agent-core { border-color: #85dffa; background: linear-gradient(120deg, #1e71aa, #0a3657); box-shadow: 0 0 42px #39b2ed3c, 0 20px 42px #02121f99; }
.agent-node small, .agent-review small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #a6dbed; }
.agent-node strong { display: block; font-size: 30px; letter-spacing: -.05em; margin: 5px 0 2px; }
.agent-core strong { font-size: 33px; letter-spacing: .18em; }
.agent-node p { margin: 0; font-size: 12px; color: #c3ddea; }
.node-pulse { position: absolute; width: 7px; height: 7px; border-radius: 50%; margin: -6px 0 0 -4px; background: #80e4fa; box-shadow: 0 0 0 8px #80e4fa19, 0 0 20px #80e4fa; animation: agent-pulse 2.8s ease-in-out infinite; }
.agent-link { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 70px; color: #a8e5fb; font-size: 10px; letter-spacing: .25em; }
.agent-link span { width: 1px; flex: 1; background: linear-gradient(#85dffa33, #85dffa); }
.agent-link span:last-child { background: linear-gradient(#85dffa, #85dffa33); }
.agent-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: min(100%, 480px); margin: 26px auto; }
.agent-tool-grid span { padding: 12px 6px; text-align: center; font-size: 11px; color: #d4effb; background: #103e5c; border: 1px solid #72b8db55; border-radius: 7px; }
.agent-review { display: flex; gap: 17px; align-items: center; padding: 17px 20px; border-radius: 10px; background: #071a2a; border: 1px solid #87cddd66; }
.review-symbol { width: 31px; height: 31px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #5cdbd536; color: #91ffdf; }
.agent-review strong { display: block; font-size: 14px; margin-top: 3px; }
.agent-copy { max-width: 520px; }
.agent-step { border-top: 1px solid #79bad35a; padding: 23px 0 18px; }
.agent-step > span { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #80d8f6; }
.agent-step h3 { font: 32px/1.15 var(--serif); margin: 8px 0; }
.agent-step p { line-height: 1.7; font-size: 14px; margin: 0; }
.agent-availability, .team-truth { border-left: 2px solid #6ad0ed; padding: 8px 0 8px 15px; font-size: 12px; color: #b8d2e0; line-height: 1.65; }
.agent-copy .text-link { display: inline-block; margin-top: 10px; color: #c9ecfc; }
.team-section { background: radial-gradient(ellipse at 95% 10%, #17618c66, transparent 45%), #071a2a; }
.team-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.team-layout h2 { font-size: clamp(52px, 5.3vw, 82px); margin: 24px 0; }
.team-layout p { max-width: 560px; font-size: 16px; line-height: 1.75; }
.team-layout .button-outline, .organization-plan .button-outline { color: #e7f7ff; border-color: #7bcbe8; margin-top: 18px; }
.team-board { border: 1px solid #76c6e477; border-radius: 16px; padding: 28px; background: linear-gradient(140deg, #143f5d, #092438 70%); box-shadow: 0 28px 65px #010d19a1; }
.team-board-row { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid #9acfe23d; }
.team-board-row:first-of-type { margin-top: 22px; }
.team-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid #8fdaf1; border-radius: 12px; color: #d7f7ff; font-size: 11px; font-weight: 700; }
.team-board-row div { flex: 1; }
.team-board-row strong, .team-board-row small { display: block; }
.team-board-row strong { font-size: 14px; }
.team-board-row small { color: #aecddd; font-size: 11px; margin-top: 2px; }
.team-board-row b { font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #9bdaf0; }
.team-board-foot { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 24px; }
.team-board-foot span { padding: 7px 8px; border: 1px solid #8ccee077; border-radius: 4px; color: #bdddeb; font-size: 10px; }
.organization-plan { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 18px; padding: 36px 44px; border-radius: 16px; background: linear-gradient(100deg, #123e5f, #071f34); border: 1px solid #68b6df70; }
.organization-plan span { color: #94ddf6; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.organization-plan h3 { font: 32px/1.15 var(--serif); margin: 10px 0; }
.organization-plan p { max-width: 650px; margin: 0; font-size: 13px; line-height: 1.6; }
.organization-plan .button { flex: none; margin: 0; }
@keyframes agent-pulse { 50% { box-shadow: 0 0 0 15px #80e4fa0b, 0 0 28px #80e4fa; } }
@media (max-width: 1000px) { .agent-layout { grid-template-columns: 1fr; } .agent-copy { max-width: none; } .team-layout { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .hero h1 { font-size: clamp(55px, 9vw, 75px); } .organization-plan { flex-direction: column; align-items: flex-start; } }
@media (max-width: 540px) { .hero h1 { font-size: clamp(49px, 12vw, 65px); } .agent-diagram { padding-inline: 16px; } .agent-tool-grid { grid-template-columns: repeat(2, 1fr); } .team-board { padding: 17px; } .team-board-row { gap: 10px; } .team-board-row b { max-width: 63px; text-align: right; } .organization-plan { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .node-pulse { animation: none; } }

/* Readable, searchable requirement atlas. All content remains available without JavaScript. */
.catalog-hero { position: relative; isolation: isolate; border-bottom: 0; }
.catalog-hero::after { content: ''; position: absolute; z-index: -1; right: -3%; top: 10%; width: 48%; height: 80%; border-radius: 50%; transform: rotate(-20deg); background: repeating-radial-gradient(ellipse at 55% 50%, transparent 0 15px, #64c8ef1e 16px 17px, transparent 18px 32px); mask-image: radial-gradient(ellipse, black 38%, transparent 72%); pointer-events: none; }
.catalog-hero > p { max-width: 850px; }
.catalog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 930px; margin-top: 48px; }
.catalog-stats div { border-top: 1px solid #82cbe282; padding-top: 16px; }
.catalog-stats strong { display: block; font-size: clamp(44px, 5vw, 76px); line-height: 1.1; letter-spacing: -.07em; }
.catalog-stats span { display: block; color: #a6cfe0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.scope-section { border-top: 1px solid #6ebde84d; }
.scope-controls { display: grid; grid-template-columns: 1fr minmax(180px, .36fr); gap: 14px; padding: 25px; border: 1px solid #76b9d955; border-radius: 15px; background: #0b2a41; }
.scope-controls label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #aedaf0; text-transform: uppercase; }
.scope-controls input, .scope-controls select { display: block; width: 100%; min-height: 50px; margin-top: 9px; padding: 12px 14px; color: #effaff; background: #061b2c; border: 1px solid #83c7e380; border-radius: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.scope-controls input::placeholder { color: #8eaec0; }
.scope-results { min-height: 25px; margin: 24px 0; font-size: 12px; color: #afd3e2; }
.scope-list { display: grid; gap: 10px; }
.scope-card { overflow: hidden; background: linear-gradient(120deg, #123a55, #092539); border: 1px solid #74b9d966; border-radius: 10px; }
.scope-card[hidden], .scope-card li[hidden] { display: none !important; }
.scope-card summary { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 20px; padding: 23px 27px; cursor: pointer; list-style: none; }
.scope-card summary::-webkit-details-marker { display: none; }
.scope-card summary:hover, .scope-card[open] summary { background: #1a4e6d7d; }
.scope-code { font-size: 11px; color: #9bdaf0; letter-spacing: .16em; font-weight: 700; }
.scope-title { display: block; font: 27px/1.16 var(--serif); }
.scope-title small { display: block; margin-top: 6px; font: 13px/1.5 var(--sans); color: #b4d1df; }
.scope-count { font-size: 11px; color: #bde2f0; white-space: nowrap; }
.scope-count span { display: inline-block; margin-left: 16px; font-size: 18px; transition: transform .2s; }
.scope-card[open] .scope-count span { transform: rotate(90deg); }
.scope-items { margin: 0; padding: 4px 27px 25px 117px; list-style: none; border-top: 1px solid #79bad63f; }
.scope-items li { display: grid; grid-template-columns: 125px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid #90bed326; font-size: 13px; color: #d8eaf2; }
.scope-items li span:first-child { color: #88cce8; font-size: 11px; letter-spacing: .07em; }
.scope-source { margin: 27px 0 0; padding: 15px 18px; border-left: 2px solid #71cfe9; font-size: 12px; line-height: 1.7; }
@media (max-width: 800px) { .scope-controls { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .catalog-hero::after { width: 70%; right: -12%; opacity: .35; } .catalog-stats { gap: 8px; } .catalog-stats strong { font-size: 42px; } .catalog-stats span { font-size: 9px; } .scope-card summary { grid-template-columns: 38px 1fr; gap: 9px; padding: 18px 13px; } .scope-title { font-size: 20px; } .scope-title small { font-size: 11px; } .scope-count { grid-column: 2; } .scope-items { padding: 0 13px 15px; } .scope-items li { grid-template-columns: 1fr; gap: 3px; } }