/* ==========================================================================
   COMPUBYTE MARKETING — Page-specific composition
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Hero (homepage + inner-page compact hero)                              */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--space-3xl) + var(--space-lg));
  padding-bottom: var(--space-2xl);
}

/* Liquid-metal shader background — see assets/js/hero-visual.js. A vanilla
   WebGL2 port of 21st.dev's chowlol202/liquid-metal-hero (shader only, not
   the fetched demo's hero markup), recolored to the CompuByte navy/blue
   palette. Dimmed via canvas opacity + a scrim gradient so it stays
   subordinate to the headline, matching the same restraint tuning used on
   the Next.js frontend's hero. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
}

.hero__bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 13, 24, 0.1), transparent 45%, var(--color-bg));
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
}

.hero__content {
  max-width: 760px;
}

.hero__title {
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
}

.hero__title .accent {
  color: var(--color-blue);
}

.hero__subtext {
  margin-top: var(--space-lg);
  font-size: var(--fs-body-lg);
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .hero {
    padding-top: calc(var(--space-2xl) + var(--space-lg));
    text-align: left;
  }
}

/* ---- Compact inner-page hero ---- */
.page-hero {
  position: relative;
  padding-top: calc(var(--space-3xl) + var(--space-md));
  padding-bottom: var(--space-2xl);
}

.page-hero__title {
  font-size: var(--fs-h1);
  max-width: 18ch;
}

.page-hero__subtext {
  margin-top: var(--space-lg);
  font-size: var(--fs-body-lg);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------- */
/* Trust / intro stats section                                            */
/* ---------------------------------------------------------------------- */

.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.intro__stats {
  margin-top: var(--space-2xl);
}

@media (max-width: 900px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ---------------------------------------------------------------------- */
/* Value pillars (trust/intro section)                                    */
/* ---------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.pillar {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.pillar__index {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
}

.pillar__label {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}

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

@media (max-width: 520px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* About teaser — orbit visual (CSS only, no canvas cost)                 */
/* ---------------------------------------------------------------------- */

.about-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-inline: auto;
}

.about-visual__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.about-visual__ring--inner {
  inset: 16%;
  border-color: var(--color-white-08);
}

.about-visual__core {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blue-24), transparent 70%);
  border: 1px solid var(--color-blue-40);
  box-shadow: var(--glow-blue-lg);
}

.about-visual__node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: var(--glow-blue-sm);
}

.about-visual__node--1 { top: 6%; left: 50%; }
.about-visual__node--2 { top: 50%; right: 2%; }
.about-visual__node--3 { bottom: 10%; left: 18%; }

/* ---------------------------------------------------------------------- */
/* COMPUBYTE SYSTEM — flagship interactive section                        */
/* ---------------------------------------------------------------------- */

.system {
  position: relative;
}

.system__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
}

.system__line {
  position: absolute;
  top: calc(var(--space-lg) + 27px);
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--color-border);
}

.system__line-fill {
  position: absolute;
  top: calc(var(--space-lg) + 27px);
  left: 10%;
  width: 80%;
  height: 1px;
  background: var(--color-blue);
  box-shadow: var(--glow-blue-sm);
  transform: scaleX(var(--system-progress, 0));
  transform-origin: left;
  transition: transform 120ms linear;
}

.system__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  z-index: 1;
}

.system__node-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-muted);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.system__node.is-active .system__node-dot {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background: var(--color-blue-10);
}

.system__node.is-current .system__node-dot {
  box-shadow: var(--glow-blue-md);
}

.system__node-label {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur-base) var(--ease-out);
}

.system__node.is-active .system__node-label {
  color: var(--color-white);
}

.system__node-desc {
  font-size: 0.82rem;
  color: var(--color-muted);
  max-width: 20ch;
}

@media (max-width: 900px) {
  .system__track {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .system__line {
    top: 0;
    bottom: 0;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .system__line-fill {
    top: 0;
    left: 27px;
    width: 1px;
    height: 100%;
    transform: scaleY(var(--system-progress, 0));
    transform-origin: top;
  }

  .system__node {
    flex-direction: row;
    text-align: left;
  }

  .system__node-dot {
    flex-shrink: 0;
  }
}

/* ---------------------------------------------------------------------- */
/* Approach / process steps (About page: 01–04)                           */
/* ---------------------------------------------------------------------- */

.approach {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  counter-reset: approach;
}

.approach__step {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  transition: border-color var(--dur-base) var(--ease-out);
}

.approach__step:hover {
  border-color: var(--color-border-hover);
}

.approach__number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
}

.approach__title {
  font-size: var(--fs-h6);
  margin-bottom: var(--space-xs);
}

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

@media (max-width: 560px) {
  .approach {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Why CompuByte — editorial row list (deliberately not another card grid) */
/* ---------------------------------------------------------------------- */

.why-list {
  border-top: 1px solid var(--color-border);
}

.why-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  transition: transform var(--dur-base) var(--ease-out);
}

.why-row:hover {
  transform: translateX(var(--space-sm));
}

.why-row__index {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
  letter-spacing: var(--ls-wide);
}

.why-row__title {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-xs);
  transition: color var(--dur-base) var(--ease-out);
}

.why-row:hover .why-row__title {
  color: var(--color-blue);
}

@media (max-width: 640px) {
  .why-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

/* ---------------------------------------------------------------------- */
/* Services page — alternating editorial layout                          */
/* ---------------------------------------------------------------------- */

.service-editorial {
  padding-block: var(--space-2xl);
}

.service-editorial:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.service-editorial__number {
  font-family: var(--font-heading);
  color: var(--color-blue);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  display: block;
}

.service-editorial__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-md);
}

.service-editorial__desc {
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-lg);
}

.service-editorial__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.service-editorial__list-title {
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.service-editorial__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-editorial__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
}

.service-editorial__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--color-blue);
}

@media (max-width: 560px) {
  .service-editorial__columns {
    grid-template-columns: 1fr;
  }
}

.service-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 15%, var(--color-blue-16), transparent 55%),
    linear-gradient(160deg, var(--color-bg-panel-raised), var(--color-bg));
}

.service-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-white-04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-white-04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.service-visual__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--color-blue-40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  background: rgba(8, 13, 24, 0.6);
  backdrop-filter: blur(6px);
}

.service-visual__icon svg {
  width: 40px;
  height: 40px;
}

.service-visual__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-white-08);
  border-radius: 50%;
}

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

.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-panel {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white-04);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info__item {
  display: flex;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.contact-info__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-info__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-blue-10);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info__label {
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.contact-info__value {
  color: var(--color-white);
  font-weight: 500;
}