/* ROCAD Consulting — Marketing homepage styles.
   Component classes translate the design-system React components
   (Button, Card, IconBadge, Pill, ComparisonPanel, StageTimeline,
   InvisibleBusinessModel) into plain CSS. */

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

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 76px; } /* clears the fixed nav on anchor jumps */

::selection { background: rgba(34,211,238,0.35); }

body {
  font-family: var(--font-body);
  background: #fff;
  color: var(--text-on-light-primary);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }

.section-inner { max-width: 1240px; margin: 0 auto; }

.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--action-primary); }
.eyebrow--dark { color: var(--cyan-400); }

.section-title {
  font: var(--text-display-md);
  letter-spacing: var(--tracking-tight);
}

.gradient-text {
  background: linear-gradient(90deg, var(--cyan-400), var(--violet-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-md) var(--ease-standard);
}
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--lg { padding: 16px 30px; font-size: 16px; }

.btn--primary { background: var(--gradient-cta); color: #fff; }
.btn--primary:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.35);
}
.btn--primary:active { transform: translateY(0); box-shadow: none; }

.btn--secondary-dark {
  background: transparent;
  color: #fff;
  border: 1px solid var(--border-on-dark);
}
.btn--secondary-dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.btn--secondary-dark:active { transform: translateY(0); }

:is(a, button):focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

/* ---------- Icon badge ---------- */
.icon-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-badge--sm { width: 40px; height: 40px; }
.icon-badge--blue   { background: rgba(37,99,235,0.12);  color: var(--blue-600); }
.icon-badge--cyan   { background: rgba(34,211,238,0.14); color: #0891A8; }
.icon-badge--violet { background: rgba(124,58,237,0.12); color: var(--violet-500); }
.icon-badge--red    { background: rgba(239,68,68,0.12);  color: var(--status-negative); }
.icon-badge--green  { background: rgba(34,197,94,0.12);  color: var(--status-positive); }
.on-dark .icon-badge--blue,   .icon-badge--blue.on-dark   { background: rgba(37,99,235,0.22);  color: #8BB4FF; }
.on-dark .icon-badge--cyan,   .icon-badge--cyan.on-dark   { background: rgba(34,211,238,0.18); color: var(--cyan-400); }
.on-dark .icon-badge--violet, .icon-badge--violet.on-dark { background: rgba(124,58,237,0.22); color: #C4A5FA; }

/* ---------- Card (pain points) ---------- */
.card {
  background: var(--surface-light-card);
  border: 1px solid var(--surface-light-card-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: left;
  transition: box-shadow var(--duration-md) var(--ease-standard),
              transform var(--duration-md) var(--ease-standard),
              border-color var(--duration-md) var(--ease-standard);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(37,99,235,0.30);
}
.card .icon-badge { margin-bottom: 14px; transition: transform var(--duration-md) var(--ease-out); }
.card:hover .icon-badge { transform: scale(1.08); }
.card__title { font: var(--text-label-lg); color: var(--text-on-light-primary); margin-bottom: 4px; }
.card__desc { font: var(--text-body-sm); color: var(--text-on-light-tertiary); }

/* ---------- Pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font: var(--text-label-md);
  background: #fff;
  border: 1px solid var(--border-on-light);
  color: var(--text-on-light-primary);
}
.pill--positive { background: rgba(34,197,94,0.10); border-color: transparent; color: var(--status-positive); }
.pill--negative { background: rgba(239,68,68,0.10); border-color: transparent; color: var(--status-negative); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 48px;
  transition: background var(--duration-md) var(--ease-standard),
              padding var(--duration-md) var(--ease-standard),
              border-color var(--duration-md) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-on-dark);
  padding-top: 12px;
  padding-bottom: 12px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__brand img { height: 30px; }
.nav__brand-name {
  font: 700 18px var(--font-display);
  letter-spacing: 0.08em;
  color: #fff;
}
.nav__links { display: flex; gap: 28px; align-items: center; }
.nav__links a {
  position: relative;
  color: rgba(255,255,255,0.82);
  font: 600 14px var(--font-body);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--cyan-400);
  transition: right var(--duration-md) var(--ease-out);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { right: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-navy-fade);
}
/* Original network-diagram artwork layered over the navy fade;
   if the image file is missing, the gradient still carries the section. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/hero-network-diagram.png'),
                    var(--gradient-navy-fade);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat;
}
/* scrim: keeps the copy readable over the artwork's brighter nodes */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,0.78) 0%, rgba(15,23,42,0.32) 44%, rgba(15,23,42,0) 66%);
}
.hero__content {
  position: relative;
  z-index: 1;
  padding: 96px 48px 110px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: min(56vw, 620px);
}
.hero__copy { max-width: 480px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin: 0 0 20px;
}
.hero__lede {
  font: var(--text-body-md);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-on-dark-secondary);
  max-width: 480px;
  margin-bottom: 28px;
}
.hero__ctas { display: flex; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.hero__trust { font: 400 13px var(--font-body); color: rgba(255,255,255,0.5); }

/* ---------- Sections ---------- */
.section { padding: 80px 48px; }
.section--light { background: var(--surface-light); }
.section--alt { background: var(--surface-light-alt); }
.section--dark { background: var(--surface-dark); }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: left;
}

/* ---------- Invisible Business Model ---------- */
.ibm { display: flex; flex-direction: column; gap: 18px; }
.tray {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  backdrop-filter: blur(6px);
}
.tray--invisible { background: rgba(124,58,237,0.06); }
.tray__title {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}
.tray--invisible .tray__title { color: var(--violet-400); }
.tray__items { display: flex; gap: 28px; flex-wrap: wrap; }
.tray__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 64px;
}
.tray__item span {
  font: var(--text-body-sm);
  color: rgba(255,255,255,0.75);
  text-align: center;
}
.tray__note { margin-top: 16px; font: var(--text-body-sm); color: var(--text-on-dark-tertiary); }

/* ---------- Motion: entrance, reveals, ambience ----------
   All entrance/ambient motion lives inside this media query so
   prefers-reduced-motion users get a fully static page. */
@media (prefers-reduced-motion: no-preference) {

  /* Hero load sequence: eyebrow → title → lede → CTAs → trust line */
  .hero__copy > * { animation: rise-in 0.8s var(--ease-out) both; }
  .hero__copy > :nth-child(1) { animation-delay: 0.10s; }
  .hero__copy > :nth-child(2) { animation-delay: 0.22s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.36s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.50s; }
  .hero__copy > :nth-child(5) { animation-delay: 0.64s; }
  .nav { animation: fade-in 0.6s var(--ease-out) both; }

  /* very slow settle on the hero artwork */
  .hero::before {
    animation: hero-settle 14s var(--ease-out) both;
  }

  /* Scroll reveals */
  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

  /* Timeline: the connecting line draws stage by stage, nodes light up in order */
  .stage:not(:last-child)::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-in-out);
    transition-delay: calc(var(--d, 0s) + 0.35s);
  }
  .timeline.is-visible .stage:not(:last-child)::before { transform: scaleX(1); }
  .stage__node {
    transition: border-color 0.4s var(--ease-standard),
                box-shadow 0.6s var(--ease-standard);
    transition-delay: calc(var(--d, 0s) + 0.25s);
  }
  .timeline.is-visible .stage__node {
    border-color: rgba(34,211,238,0.45);
    box-shadow: 0 0 22px rgba(34,211,238,0.18);
  }

  /* Closing CTA: slow ambient drift of the gradient mesh */
  .cta::before { animation: mesh-drift 26s var(--ease-in-out) infinite alternate; }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes hero-settle {
    from { transform: scale(1.05); }
    to   { transform: scale(1); }
  }
  @keyframes mesh-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(2.5%, -2.5%) scale(1.05); }
  }
}

/* ---------- Comparison panel ---------- */
.comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: left;
}
.comparison__vs {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-on-light);
  display: flex; align-items: center; justify-content: center;
  font: var(--text-label-lg);
  color: var(--text-on-light-primary);
  background: #fff;
}
.comp-side {
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: #fff;
}
.comp-side__title { font: var(--text-label-lg); margin-bottom: 16px; }
.comp-side--negative .comp-side__title { color: var(--status-negative); }
.comp-side--positive .comp-side__title { color: var(--action-primary); }
.comp-side__nodes { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.comp-node {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.comp-side--negative .comp-node { border-radius: 8px; border: 1px solid var(--status-negative); color: var(--status-negative); }
.comp-side--positive .comp-node { border-radius: 50%; border: 1px solid var(--action-primary); color: var(--action-primary); }
.comp-side__list { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ---------- Stage timeline ---------- */
.timeline { display: flex; position: relative; }
.stage { flex: 1; text-align: center; position: relative; padding: 0 8px; }
.stage:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 28px; left: 50%;
  width: 100%; height: 1px;
  background: var(--border-on-dark);
}
.stage__node {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
  color: var(--cyan-400);
}
.stage__title { font: var(--text-label-lg); color: #fff; margin-bottom: 6px; }
.stage__desc { font: var(--text-body-sm); color: var(--text-on-dark-secondary); }

/* ---------- Results pills ---------- */
.results-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Closing CTA ---------- */
.cta {
  position: relative;
  background: var(--surface-dark);
  overflow: hidden;
  padding: 56px 48px;
}
.cta::before {
  content: '';
  position: absolute; inset: -12%;
  background: var(--gradient-mesh-dark);
  opacity: 0.9;
}
.cta__inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta__title {
  font: var(--text-display-sm);
  font-size: 1.75rem;
  color: #fff;
  margin-bottom: 16px;
  max-width: 420px;
}
.cta__checks { display: flex; flex-direction: column; gap: 8px; }
.cta__checks div {
  color: rgba(255,255,255,0.75);
  font: 400 14px var(--font-body);
  display: flex; align-items: center; gap: 8px;
}
.cta__checks svg { color: var(--cyan-400); flex-shrink: 0; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer {
  background: var(--surface-dark);
  border-top: 1px solid var(--border-on-dark);
  padding: 40px 48px;
}
.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer__copy { font: 400 14px var(--font-body); color: var(--text-on-dark-secondary); margin-bottom: 6px; }
.footer__tagline { font: 400 13px var(--font-body); color: var(--text-on-dark-tertiary); }
/* white-on-black artwork: screen blend drops the black box onto the navy */
.footer__logo { height: 96px; mix-blend-mode: screen; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pain-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline { flex-wrap: wrap; gap: 24px 0; }
  .stage { flex: 1 1 33%; }
  .stage:not(:last-child)::before { display: none; }
}

@media (max-width: 760px) {
  .nav { padding: 16px 20px; }
  .nav__links { display: none; }
  .section, .cta { padding-left: 20px; padding-right: 20px; }
  .hero__content { padding: 96px 20px 72px; min-height: 0; }
  /* the wide artwork distorts on narrow screens: fall back to the navy fade */
  .hero::before { background-image: var(--gradient-navy-fade); animation: none; }
  .hero::after { display: none; }
  .pain-grid { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; }
  .comparison__vs { margin: 0 auto; }
  .stage { flex: 1 1 100%; }
}