:root {
  --color-bg: #ffffff;
  --color-bg-dark: #0a1128;
  --color-bg-dark-soft: #131c3d;
  --color-ink: #0a0a0a;
  --color-ink-soft: #4a4a4a;
  --color-ink-invert: #f5f7ff;
  --color-ink-invert-soft: #aab3d6;
  --color-accent: #3f7dff;
  --color-accent-dark: #1f4fc4;
  --color-accent-2: #22d3c9;
  --color-surface: #f5f6f8;
  --color-border: #e2e4e9;
  --color-border-dark: rgba(245, 247, 255, 0.14);
  --radius: 12px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 24px 50px rgba(6, 11, 31, 0.35);
  --shadow-accent: 0 14px 34px rgba(63, 125, 255, 0.35);
  --max-width: 1140px;
  --font-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }

h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }

/* Eyebrow labels - identify what section/role content plays before its heading */
.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.eyebrow--invert { color: var(--color-accent-2); }
.eyebrow--center { text-align: center; }

.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { background: var(--color-accent-dark); color: #fff; box-shadow: 0 18px 40px rgba(63, 125, 255, 0.45); }
.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
.btn--secondary:hover { background: var(--color-ink); color: #fff; }

/* Secondary buttons sitting on dark sections need inverted contrast */
.hero .btn--secondary,
.why-us .btn--secondary {
  color: var(--color-ink-invert);
  border-color: rgba(245, 247, 255, 0.4);
}
.hero .btn--secondary:hover,
.why-us .btn--secondary:hover {
  background: var(--color-ink-invert);
  color: var(--color-bg-dark);
}

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 17, 40, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(6, 11, 31, 0.4);
  border-color: var(--color-border-dark);
}
.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__logo { display: flex; align-items: center; gap: 0.6rem; color: var(--color-ink-invert); }
/* No invert: the previous mark was black and had to be flipped to read on the
   dark header. This one is full colour, but most of it is dark navy, so it
   needs a light plate to stay legible against the dark header rather than a
   filter that would throw away the brand blue. */
.nav__logo img {
  height: 96px;
  width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}
.nav__logo-text { font-weight: 700; font-size: 1.05rem; }
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__link { color: var(--color-ink-invert-soft); font-weight: 500; }
.nav__link:hover { color: #fff; }
.nav__cta { padding: 0.6rem 1.25rem; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink-invert);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hero */
.hero {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-ink-invert);
  padding: 4.5rem 1.5rem 5.5rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 45% at 18% 24%, rgba(63, 125, 255, 0.35), transparent 70%),
    radial-gradient(32% 40% at 84% 72%, rgba(34, 211, 201, 0.28), transparent 70%);
  filter: blur(60px);
  animation: hero-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-3%, 2%) scale(1.06); }
}
.hero__row {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}
.hero__title { font-size: clamp(2.4rem, 5vw, 3.75rem); margin-bottom: 1.25rem; }
.hero__title em { font-style: italic; color: var(--color-accent-2); }
.hero__subtitle { font-size: 1.1rem; color: var(--color-ink-invert-soft); margin-bottom: 2rem; max-width: 42ch; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__visual img { width: 60%; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* Wider than the old portrait infographic: the walkthrough is a landscape
   screen recording, so it needs the full column to stay readable. */
.hero__video { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: #000; }

/* Tech strip */
.tech-strip {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  /* ~35% smaller than the original clamp(1.6rem, 4vw, 3.8rem): the longer
     cost-optimization wording wrapped to a second line at that size. */
  font-size: clamp(1.05rem, 2.6vw, 2.45rem);
}
.tech-strip strong { color: var(--color-accent); }
.tech-strip strong:nth-of-type(2) { color: var(--color-accent-2); }

/* Shared section headings */
.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 0.5rem;
}
.section-subtitle {
  text-align: center;
  color: var(--color-ink-soft);
  max-width: 50ch;
  margin: 0 auto 2.5rem;
}
.why-us .section-subtitle,
.hero .section-subtitle { color: var(--color-ink-invert-soft); }

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero::before { animation: none; }
}

@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-dark-soft);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-dark);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .hero__row { grid-template-columns: 1fr; text-align: center; }
  .hero__actions { justify-content: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
}

/* Services */
.services { max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.service-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(63, 125, 255, 0.15), rgba(34, 211, 201, 0.15));
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}
.service-card__title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.service-card__desc { color: var(--color-ink-soft); font-size: 0.95rem; }

/* Why Us */
.why-us { background: var(--color-bg-dark); color: var(--color-ink-invert); padding: 5rem 1.5rem; }
.why-us .section-title { color: #fff; }
.why-us__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.why-us__item h3 { font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--color-accent-2); }
.why-us__item p { color: var(--color-ink-invert-soft); font-size: 0.95rem; }

/* ROI Calculator */
.roi { max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem; }
.roi__calculator {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}
.roi__field { margin-bottom: 2rem; }
.roi__field:last-of-type { margin-bottom: 0; }
.roi__field label { display: block; font-weight: 600; margin-bottom: 0.75rem; }
.roi__input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: #fff;
  transition: border-color 0.15s ease;
}
.roi__input-wrap:focus-within { border-color: var(--color-accent); }
.roi__prefix { font-weight: 700; color: var(--color-ink-soft); margin-right: 0.4rem; }
.roi__input-wrap input {
  border: none;
  outline: none;
  font-size: 1.1rem;
  font-family: var(--font-base);
  width: 100%;
  background: transparent;
}
.roi__field input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
  height: 6px;
}
.roi__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.roi__result { text-align: center; background: #fff; border-radius: var(--radius); padding: 1.5rem 1rem; }
.roi__result-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.roi__result-label { font-size: 0.85rem; color: var(--color-ink-soft); }

@media (max-width: 560px) {
  .roi__results { grid-template-columns: 1fr; }
  .roi__calculator { padding: 1.75rem; }
}

/* Process */
.process { max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem; }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.process__step { text-align: center; padding: 0 0.5rem; }
.process__number {
  display: inline-block;
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.process__step h3 { margin-bottom: 0.6rem; }
.process__step p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* Process page (dedicated full-infographic page) */
.process-page { max-width: var(--max-width); margin: 0 auto; padding: 4rem 1.5rem 6rem; text-align: center; }
.process-detail { max-width: 720px; margin: 0 auto; padding: 1.5rem 0 0; }
.process-detail img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Portal walkthrough: alternating text/screenshot rows */
.walkthrough { display: flex; flex-direction: column; gap: 4.5rem; margin-top: 3.5rem; text-align: left; }
.walkthrough__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 2.5rem;
  align-items: center;
}
/* Every other row puts the screenshot first, so the page doesn't read as one
   long left-hand column. */
.walkthrough__step:nth-child(even) .walkthrough__text { order: 2; }
.walkthrough__number {
  display: inline-block;
  font-family: var(--font-display, inherit);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 0.35rem;
}
.walkthrough__text h2 { font-size: 1.45rem; margin: 0 0 0.6rem; }
.walkthrough__text p { color: var(--color-ink-soft); margin: 0; }
.walkthrough__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.walkthrough__cta { margin-top: 4.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.walkthrough__cta p { max-width: 60ch; color: var(--color-ink-soft); margin: 0; }

@media (max-width: 860px) {
  /* Stacked on narrow screens, with the screenshot always under its text
     regardless of the alternating desktop order. */
  .walkthrough__step { grid-template-columns: 1fr; gap: 1.25rem; }
  .walkthrough__step:nth-child(even) .walkthrough__text { order: 0; }
}

/* CTA Banner */
.cta-banner {
  text-align: center;
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, var(--color-accent-2) 0%, var(--color-accent) 45%, var(--color-accent-dark) 100%);
  color: #fff;
}

/* Pricing cards, styled after the What We Do cards but sitting on the CTA
   gradient, so they use a solid surface rather than the page background. */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: var(--max-width);
  margin: 2rem auto 1.5rem;
  text-align: left;
  align-items: stretch;
}
.pricing-card {
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.35rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card__title {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: var(--color-accent);
}
.pricing-card__lead { font-weight: 600; margin: 0 0 0.3rem; font-size: 0.98rem; line-height: 1.35; }
.pricing-card__lead span { font-weight: 400; color: var(--color-ink-soft); font-size: 0.88rem; }
.pricing-card__desc { margin: 0 0 0.3rem; color: var(--color-ink-soft); font-size: 0.92rem; line-height: 1.4; }
.pricing-card__addon { margin: 0; font-size: 0.85rem; color: var(--color-ink-soft); line-height: 1.4; }
/* The banner turns .btn--primary white so it reads against the gradient,
   which would make it invisible on a white card. Put the accent fill back
   for buttons that sit inside a card. */
/* Deliberately more specific than `.cta-banner .btn--primary`, which appears
   later in this file: matching its specificity would lose on source order. */
.cta-banner .pricing-card .pricing-card__cta {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.55rem 1.4rem;
  background: var(--color-accent);
  color: #fff;
}
.cta-banner .pricing-card .pricing-card__cta:hover { background: var(--color-accent-dark); color: #fff; }

/* Two notes that apply across every tier, so they sit under the cards rather
   than inside one: advisory pricing on the left, larger/custom deployments on
   the right. */
.pricing__notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto 2.25rem;
  text-align: left;
}
.pricing__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .pricing__grid { grid-template-columns: 1fr; max-width: 32rem; }
  .pricing__notes { grid-template-columns: 1fr; max-width: 32rem; gap: 1.25rem; }
}
.cta-banner__title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.5rem; }
.cta-banner__subtitle { margin-bottom: 2rem; opacity: 0.9; }
.cta-banner .btn--primary { background: #fff; color: var(--color-accent-dark); box-shadow: none; }
.cta-banner .btn--primary:hover { background: #f0f0f0; }

/* Clients page (placeholder logos + testimonials) */
.clients-page, .testimonials-page { max-width: var(--max-width); margin: 0 auto; padding: 4rem 1.5rem; }
.placeholder-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.placeholder-grid--logos { grid-template-columns: repeat(3, 1fr); }
.placeholder-grid--testimonials { grid-template-columns: repeat(3, 1fr); }
.placeholder-card {
  border: 2px dashed rgba(63, 125, 255, 0.35);
  border-radius: var(--radius);
  color: var(--color-ink-soft);
  background: var(--color-surface);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.placeholder-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.placeholder-card--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-size: 0.9rem;
  font-weight: 600;
}
.placeholder-card--testimonial {
  padding: 1.75rem;
  text-align: center;
}
.placeholder-card--testimonial p { font-style: italic; margin-bottom: 0.75rem; }
.placeholder-card--testimonial span { font-size: 0.85rem; font-weight: 600; }

@media (max-width: 900px) {
  .placeholder-grid--logos, .placeholder-grid--testimonials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .placeholder-grid--logos, .placeholder-grid--testimonials { grid-template-columns: 1fr; }
}

/* Footer */
.site-footer { background: var(--color-bg-dark-soft); color: var(--color-ink-invert-soft); padding: 3.5rem 1.5rem 1.5rem; }
.footer__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer__brand { display: flex; flex-direction: column; gap: 0.75rem; }
/* Height-driven so the mark keeps its aspect ratio; the plate does the same
   job as in the header, since the footer is dark too. */
.footer__brand img {
  height: 72px;
  width: auto;
  align-self: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 5px;
}
.footer__brand p { color: var(--color-ink-invert-soft); font-size: 0.9rem; }
.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__nav a, .footer__contact a { color: var(--color-ink-invert); }
.footer__nav a:hover, .footer__contact a:hover { color: var(--color-accent-2); }
.footer__bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-dark);
  padding-top: 1.25rem;
  color: var(--color-ink-invert-soft);
  font-size: 0.85rem;
}

/* Contact page ---------------------------------------------------------- */

.contact-page { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem; }

.contact-form {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-form__field { display: flex; flex-direction: column; gap: 0.4rem; }

.contact-form__field label { font-weight: 600; font-size: 0.9rem; }
.contact-form__field label span { color: var(--color-accent-dark); }

.contact-form__field input {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.contact-form__field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* Moved out of view rather than display:none — some bots skip hidden inputs,
   which would defeat the trap. */
.contact-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form__submit { align-self: flex-start; }
.contact-form__submit:disabled { opacity: 0.6; cursor: default; transform: none; }

.contact-form__status { font-size: 0.95rem; }
.contact-form__status:empty { display: none; }
.contact-form__status--error { color: #b3261e; }

.contact-form__success { font-size: 1.1rem; font-weight: 600; }
.contact-form__alt { font-size: 0.9rem; color: var(--color-ink-soft); }
.contact-form__alt a { color: var(--color-accent-dark); }

@media (max-width: 900px) {
  .services__grid, .why-us__grid, .process__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .services__grid, .why-us__grid, .process__grid { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }
}