/* ============================================================
   SOLARCOMPUTE — ACTIVE USERS
   ============================================================ */

.au-page {
  background: #07111b;
  color: #e8eef4;
}

.au-page .container {
  position: relative;
}

.au-eyebrow {
  margin-bottom: 18px;
  color: #f5b841;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}


/* HERO */

.au-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(95px, 11vw, 155px) 0 clamp(85px, 10vw, 135px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 78% 34%, rgba(245,184,65,.09), transparent 28%),
    radial-gradient(circle at 17% 76%, rgba(54,142,198,.08), transparent 31%),
    #07111b;
}

.au-hero h1 {
  max-width: 1050px;
  margin: 0;
  color: #f2f6fa;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .96;
}

.au-hero p {
  max-width: 760px;
  margin: 32px 0 0;
  color: #a0afbd;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
}

.au-hero-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-top: 40px;
}

.au-hero-flow span {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #dce5ed;
  font-size: 10px;
  letter-spacing: .1em;
}

.au-hero-flow b {
  color: #f5b841;
  font-weight: 400;
}


/* GENERAL */

.au-section {
  padding: clamp(75px, 9vw, 125px) 0;
}

.au-section-soft {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #09141f;
}

.au-section-head {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(300px,.75fr);
  gap: clamp(45px,8vw,120px);
  align-items: end;
  margin-bottom: 58px;
}

.au-section-head h2,
.au-copy h2 {
  margin: 0;
  color: #edf3f7;
  font-size: clamp(37px,4.7vw,64px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.au-section-head > p,
.au-copy > p {
  margin: 0;
  color: #93a4b5;
  line-height: 1.75;
}

.au-copy > p {
  margin-top: 24px;
}


/* AUDIENCES */

.au-audiences {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  border-left: 1px solid rgba(255,255,255,.1);
}

.au-audiences article {
  min-height: 220px;
  padding: 29px;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.au-audiences span {
  color: #f5b841;
  font-size: 10px;
  letter-spacing: .14em;
}

.au-audiences h3 {
  margin: 38px 0 10px;
  font-size: 20px;
}

.au-audiences p {
  margin: 0;
  color: #8396a9;
  font-size: 13px;
  line-height: 1.65;
}


/* WORKLOADS */

.au-workloads {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.au-workload {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.018);
}

.au-workload::after {
  content: "";
  position: absolute;
  left: -35%;
  bottom: 0;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg,transparent,#f5b841,transparent);
  animation: au-signal 4.5s linear infinite;
}

@keyframes au-signal {
  to { left: 110%; }
}

.au-workload span {
  color: #718398;
  font-size: 9px;
  letter-spacing: .14em;
}

.au-workload-icon {
  display: flex;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  margin: 35px 0 24px;
  border: 1px solid rgba(245,184,65,.3);
  border-radius: 50%;
  color: #f5b841;
}

.au-workload h3 {
  margin: 0 0 9px;
  font-size: 19px;
}

.au-workload p {
  margin: 0;
  color: #8497aa;
  font-size: 13px;
  line-height: 1.6;
}


/* NETWORK EXCHANGE */

.au-exchange {
  display: grid;
  grid-template-columns: 1fr 60px 1.2fr 60px 1fr;
  align-items: stretch;
}

.au-exchange-card,
.au-exchange-core {
  min-height: 330px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
}

.au-exchange-card {
  background: rgba(255,255,255,.018);
}

.au-exchange-core {
  background:
    radial-gradient(circle at 50% 40%, rgba(245,184,65,.08), transparent 38%),
    rgba(255,255,255,.025);
}

.au-exchange span {
  color: #f5b841;
  font-size: 10px;
  letter-spacing: .15em;
}

.au-exchange h3 {
  margin: 48px 0 13px;
  font-size: 25px;
}

.au-exchange p {
  margin: 0;
  color: #8b9daf;
  line-height: 1.7;
}

.au-exchange-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5b841;
  font-size: 21px;
}

.au-core-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.au-core-list b {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #8fa2b4;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
}


/* LIFECYCLE */

.au-lifecycle {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
}

.au-life-card {
  min-height: 245px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}

.au-life-card span {
  color: #f5b841;
  font-size: 9px;
  letter-spacing: .13em;
}

.au-life-card h3 {
  margin: 42px 0 10px;
  font-size: 18px;
}

.au-life-card p {
  margin: 0;
  color: #8497aa;
  font-size: 12px;
  line-height: 1.65;
}


/* METRICS */

.au-metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  border-left: 1px solid rgba(255,255,255,.1);
}

.au-metric {
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.au-metric span {
  color: #718398;
  font-size: 9px;
  letter-spacing: .14em;
}

.au-metric strong {
  display: block;
  margin-top: 30px;
  color: #f5b841;
  font-size: 44px;
  font-weight: 500;
}

.au-metric small {
  display: block;
  margin-top: 7px;
  color: #8497aa;
  font-size: 12px;
}

.au-live-note {
  margin-top: 20px;
  color: #718398;
  font-size: 12px;
}


/* NETWORK STATEMENT */

.au-statement {
  padding: clamp(85px,10vw,145px) 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%,rgba(245,184,65,.07),transparent 32%),
    #07111b;
}

.au-statement small {
  color: #f5b841;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}

.au-statement blockquote {
  max-width: 1000px;
  margin: 32px auto 0;
  color: #edf3f7;
  font-size: clamp(38px,5.3vw,70px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.05;
}


/* PRIVACY */

.au-privacy {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(50px,8vw,110px);
}

.au-privacy-list {
  border-top: 1px solid rgba(255,255,255,.1);
}

.au-privacy-list article {
  display: grid;
  grid-template-columns: 48px 1fr;
  padding: 25px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.au-privacy-list span {
  color: #f5b841;
  font-size: 10px;
}

.au-privacy-list h3 {
  margin: 0 0 7px;
  font-size: 18px;
}

.au-privacy-list p {
  margin: 0;
  color: #8396a9;
  font-size: 13px;
  line-height: 1.65;
}


/* CTA */

.au-cta {
  padding: clamp(75px,9vw,120px) 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.au-cta-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.au-cta-box a {
  min-height: 170px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 19px;
  color: #e4ebf1;
  text-decoration: none;
  background: rgba(255,255,255,.018);
  transition: transform .18s ease,border-color .18s ease;
}

.au-cta-box a:hover {
  transform: translateY(-3px);
  border-color: rgba(245,184,65,.35);
}

.au-cta-box span {
  color: #f5b841;
  font-size: 10px;
  letter-spacing: .15em;
}

.au-cta-box h3 {
  margin: 34px 0 9px;
  font-size: 25px;
}

.au-cta-box p {
  margin: 0;
  color: #8497aa;
  font-size: 13px;
  line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .au-lifecycle {
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width: 900px) {
  .au-section-head,
  .au-privacy {
    grid-template-columns: 1fr;
  }

  .au-audiences,
  .au-workloads {
    grid-template-columns: repeat(2,1fr);
  }

  .au-exchange {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .au-exchange-arrow {
    height: 25px;
    transform: rotate(90deg);
  }

  .au-exchange-card,
  .au-exchange-core {
    min-height: 0;
  }

  .au-metrics {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 620px) {
  .au-audiences,
  .au-workloads,
  .au-lifecycle,
  .au-metrics,
  .au-cta-box {
    grid-template-columns: 1fr;
  }

  .au-hero h1 {
    font-size: clamp(50px,16vw,72px);
  }

  .au-statement blockquote {
    font-size: clamp(36px,11vw,52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-workload::after {
    animation: none;
  }
}