:root {
  --bg: #0a0e17;
  --bg-alt: #0f1524;
  --bg-card: #131a2b;
  --ink: #f3efe2;
  --muted: #98a2bd;
  --gold: #c9a227;
  --gold-light: #e8ca6e;
  --gold-dim: rgba(201, 162, 39, 0.35);
  --cyan: #4dd8e0;
  --line: rgba(201, 162, 39, 0.22);
  --radius: 2px;
  --serif-deco: Georgia, 'Times New Roman', serif;
  --sans-geo: 'Century Gothic', 'Futura', 'Trebuchet MS', ui-sans-serif, system-ui, sans-serif;
  --sans-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* one large, non-repeating art-deco/circuit-board composition (gold-on-black,
     sunburst corners + a glowing central medallion + radiating PCB traces) used
     as the single background for the entire site - not a tiled pattern
     (2026-08-23 revision, "one big design not a bare-bones, repeated tile"). */
  --site-bg-image: url("/static/img/site-bg-deco.svg");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--site-bg-image);
  background-repeat: no-repeat;
  background-position: center top;
  /* natural 1920x1200 size, not "cover" - the artwork stays crisp and scrolls
     with the page (not fixed) so its one bright medallion only ever sits behind
     the hero/stats band near the top, never re-appears behind lower sections */
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--sans-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- shared deco motifs ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans-geo);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.deco-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 48px;
  width: 100%;
  max-width: 220px;
}
.deco-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.deco-divider svg { flex-shrink: 0; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-head h2 {
  font-family: var(--sans-geo);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: 0.02em;
  margin: 14px 0 12px;
}
.section-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }

section { position: relative; padding: 96px 0; }
section.alt {
  background-color: var(--bg-alt);
}

/* circuit-trace corner brackets used on cards */
.trace-frame {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.trace-frame::before, .trace-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--gold);
  opacity: 0.9;
}
.trace-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.trace-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- top nav ---------- */

.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(10, 14, 23, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topnav .container {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--sans-geo);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a.nav-active { color: var(--gold-light); }
.nav-cta {
  border: 1px solid var(--gold);
  color: var(--gold-light) !important;
  padding: 9px 20px;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Subpage dropdown, spliced in by _site_nav.html's own script for a
   top-level Website Builder page that has nav-visible subpages -
   "website builder" card follow-up, 2026-08-23. Desktop: hover/focus
   popup under the parent link. Mobile override lives in the 900px
   media query below, since the mobile nav is already a static stacked
   list, not something a hover popup makes sense on. */
.nav-has-dropdown { position: relative; }
.nav-caret { font-size: 0.6em; margin-left: 5px; opacity: 0.7; }
.nav-dropdown {
  display: none;
  list-style: none;
  margin: 0; padding: 8px 0;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  z-index: 41;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown { display: block; }
.nav-dropdown li { border: none; padding: 0; }
.nav-dropdown a {
  display: block;
  padding: 10px 18px;
  white-space: nowrap;
}

/* ---------- section scrim (THE CONVENTION) ----------

   The site sits on a busy gold circuit backdrop. Any full-bleed section
   whose text lands DIRECTLY on that backdrop - i.e. its items have no
   card panel of their own - needs a scrim, or the artwork's lines run
   through the words. Sections whose items DO have panels (testimonials,
   the assessment form) don't need one; neither do sections with their own
   opaque background (.stats, .cta-banner).

   This went wrong three separate times before being written down, because
   each section decided for itself: .hero had a scrim from the start,
   .page-hero never did (fixed 2026-09-02), and .process-steps / .why-grid
   never did either - lines running straight through "Clear monthly
   reporting on uptime, tickets, and open risk". Three instances of one
   missing rule.

   So: ONE definition, here. Add .section-scrim to the <section> wrapper
   and nothing else.

   THE TEST IS ABOUT ALL TEXT IN THE SECTION, NOT JUST ITS ITEMS. The
   first version of this rule asked "do its ITEMS have their own
   background?" and was wrong within the hour: the home page's services
   grid has panelled .service-cards AND an unpanelled .section-head above
   them, so it passed a test it should have failed while gold diagonals
   ran through "AI-driven infrastructure, Viyeti covers the stack". A
   section can be half-panelled. Ask instead:

     Does ANY text in this section - heading, sub, or item - sit directly
     on the page backdrop? If yes, it needs .section-scrim.

   It needs nothing only when EVERY piece of text is covered: either the
   section has its own opaque background (section.alt, .stats,
   .cta-banner) or every text-bearing child has a panel (a team grid with
   no heading of its own).

   site_builder.js's LAYOUT_TYPES carries the same test at the point where
   a new module type gets registered.

   FADED, NOT FLAT, and that detail is load-bearing. A flat background-
   color darkens the whole block and stops dead at the section boundary,
   drawing a visible horizontal edge across whatever artwork crosses it -
   which is exactly what the first attempt at the .page-hero fix did.
   Holding full strength through the content and releasing over the last
   30% puts the contrast where the words are and leaves no line to see. */
/* FADES IN AS WELL AS OUT, and that is not symmetry for its own sake.
   .page-hero fades to zero at its bottom edge, so a scrimmed section
   directly beneath it that began at full strength produced a hard
   full-width step at the junction - measured on /why-us at y=401: hero
   ending at 0, section starting at 0.55. The first version of this rule
   did exactly that, and moved the banding rather than removing it.
   Fading in over the first fifth means adjacent scrims meet at the same
   value instead of stepping. What is left is a gentle brightening across
   the seam, which reads as the artwork showing through rather than as a
   line. */
.section-scrim {
  background-image:
    linear-gradient(to bottom,
                    rgba(10, 14, 23, 0) 0%,
                    rgba(10, 14, 23, 0.55) 20%,
                    rgba(10, 14, 23, 0.55) 78%,
                    rgba(10, 14, 23, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ---------- hero ---------- */

.page-hero {
  padding: 170px 0 70px;
  text-align: center;
  /* Scrim + the hero's own gold radial. The scrim gradient here is a COPY
     of .section-scrim above only because this rule also needs the radial
     layered under it, and background-image cannot be merged across rules.
     Keep the two in step: if the scrim changes, change it in both. Every
     other section just adds the .section-scrim class instead. */
  background-image:
    linear-gradient(to bottom,
                    rgba(10, 14, 23, 0.55) 0%,
                    rgba(10, 14, 23, 0.55) 70%,
                    rgba(10, 14, 23, 0) 100%),
    radial-gradient(ellipse at 50% -10%, rgba(201, 162, 39, 0.12), transparent 55%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.page-hero h1 {
  font-family: var(--sans-geo);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  margin: 18px 0 16px;
}
.page-hero p.sub {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero {
  padding: 190px 0 130px;
  text-align: center;
  overflow: hidden;
  background-color: rgba(10, 14, 23, 0.35);
  background-image: radial-gradient(ellipse at 50% -10%, rgba(201, 162, 39, 0.14), transparent 55%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hero-sunburst {
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  width: 900px; max-width: 160vw;
  opacity: 0.35;
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 0%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--sans-geo);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 22px 0 24px;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-light);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.sub {
  max-width: 620px;
  margin: 0 auto 42px;
  color: var(--muted);
  font-size: 1.12rem;
}
.hero-ctas {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans-geo);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid var(--gold);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: #14100a; }
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn-ghost { color: var(--gold-light); background: transparent; }
.btn-ghost:hover { background: rgba(201, 162, 39, 0.1); }

/* ---------- stats bar ---------- */

.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: rgba(15, 21, 36, 0.72);
}
.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat {
  text-align: center;
  padding: 40px 12px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }
.stat-num {
  font-family: var(--sans-geo);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--gold-light);
}
.stat-label {
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-more {
  text-align: center;
  margin: 44px 0 0;
}

/* ---------- services ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card { padding: 34px 28px; }
.service-icon {
  width: 44px; height: 44px;
  margin-bottom: 22px;
  color: var(--gold);
}
.service-card h3 {
  font-family: var(--sans-geo);
  font-size: 1.08rem;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.service-card p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- why us ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 48px;
}
.why-item { display: flex; gap: 18px; }
.why-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans-geo);
  color: var(--gold-light);
  transform: rotate(45deg);
}
.why-num span { transform: rotate(-45deg); }
.why-item h3 { font-family: var(--sans-geo); font-size: 1rem; margin: 4px 0 8px; }
.why-item p { color: var(--muted); margin: 0; font-size: 0.94rem; }

/* ---------- process ---------- */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
.process-step { text-align: center; padding: 0 10px; }
.process-index {
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-deco);
  font-size: 1.3rem;
  color: var(--gold-light);
  position: relative;
}
.process-index::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.process-step h3 { font-family: var(--sans-geo); font-size: 0.98rem; margin: 0 0 8px; }
.process-step p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.team-card {
  padding: 36px 28px;
  text-align: center;
}
.team-avatar {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-deco);
  font-size: 1.5rem;
  color: var(--gold-light);
  position: relative;
}
.team-avatar::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.team-card h3 {
  font-family: var(--sans-geo);
  font-size: 1.08rem;
  margin: 0 0 4px;
}
.team-title {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  margin-bottom: 14px;
}
.team-card p.bio {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 16px;
  text-align: left;
}
.team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 2px;
}
.team-link:hover { border-color: var(--gold-light); }

/* ---------- testimonials ---------- */

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.testi-card { padding: 32px 28px; }
.testi-quote-mark {
  font-family: var(--serif-deco);
  font-size: 2.6rem;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.testi-card p.quote { color: var(--ink); font-size: 0.96rem; margin: 0 0 20px; }
.testi-attr { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.03em; }
.testi-attr strong { color: var(--gold-light); display: block; font-weight: 600; }

/* ---------- CTA banner ---------- */

.cta-banner {
  text-align: center;
  padding: 100px 0;
  position: relative;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-alt), var(--bg));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.cta-banner h2 {
  font-family: var(--sans-geo);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 16px 0 18px;
}
.cta-banner p { color: var(--muted); max-width: 520px; margin: 0 auto 36px; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
  background-color: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: 0.9rem; max-width: 300px; }
.footer-col h4 {
  font-family: var(--sans-geo);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { text-decoration: none; color: var(--muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- assessment form ---------- */

.assessment-container { max-width: 640px; padding-bottom: 90px; }

/* Honeypot field - see webapp/form_guard.py. Positioned off-screen rather
   than display:none or visibility:hidden ON PURPOSE: the naive bots this
   is meant to catch commonly skip fields hidden those two ways, because
   that is the cheapest possible check to implement. Off-screen still
   renders, so a bot that reads the DOM fills it and gives itself away.
   No transition, no animation - nothing that could make it briefly
   visible to a real visitor on a slow paint. */
.form-trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.assessment-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.assessment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.assessment-field { display: flex; flex-direction: column; gap: 8px; }

.assessment-field label {
  font-family: var(--sans-geo);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.assessment-field input,
.assessment-field textarea {
  font-family: var(--sans-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  resize: vertical;
}

.assessment-field input:focus,
.assessment-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.assessment-deliverables {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assessment-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  cursor: pointer;
}

.assessment-submit { border: none; cursor: pointer; align-self: flex-start; }
.assessment-submit:disabled { opacity: 0.6; cursor: default; }

.assessment-error {
  color: #e08080;
  font-size: 0.85rem;
  margin: 0;
}

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

/* ---------- form-capable marketing CTA (webapp/marketing_ctas.py's
   has_form/form_fields, rendered by static/site_builder.js's
   buildCtaForm()) - reuses the assessment-form rules above verbatim, this
   block just constrains/centers it inside a .cta-banner, which is
   otherwise text-align: center for its plain eyebrow/heading/body content
   ---------- */

.cta-form-wrap {
  max-width: 560px;
  margin: 32px auto 0;
  text-align: left;
}

.cta-form-success {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 500;
}

/* Missing until now - site_assessment.js's own error banner and this file's
   new CTA-form success message both rely on toggling a bare ".hidden" class
   (same convention as every admin-tools stylesheet, e.g. assessment_review.css)
   to show/hide, but nothing on this specific stylesheet ever defined it - an
   "empty paragraph" happened to look the same as "actually hidden" for the
   assessment form's error banner, but a form that needs to disappear on
   success (this CTA form) actually needs it to work. */
.hidden { display: none !important; }

/* ---------- scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    padding: 8px 28px 20px;
  }
  .nav-links.nav-links-open { display: flex; }
  .nav-links li { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-cta { display: inline-block; margin-top: 6px; }
  .nav-toggle { display: flex; }
  .nav-dropdown {
    display: block;
    position: static;
    transform: none;
    border: none;
    background: none;
    padding: 4px 0 0 16px;
  }
  .nav-dropdown li { width: 100%; padding: 8px 0; border-bottom: none; }
  .nav-dropdown a { padding: 0; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .testi-grid { grid-template-columns: 1fr; }
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat { border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .stats .container { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 150px 0 90px; }
}