/* HORIZON VISUAL SYSTEM V1 */

:root {
  --black: #080807;
  --black-soft: #0e0d0b;
  --panel: rgba(20, 19, 16, .94);
  --panel-heavy: rgba(12, 11, 9, .97);

  --gold: #f4b60b;
  --gold-bright: #f4b60b;
  --gold-pale: #d9b85d;
  --gold-dark: #9d7100;

  --orange: #e86f1a;

  --white: #e8e3d8;
  --muted: #aaa397;
  --dim: #777168;

  --line: rgba(232, 227, 216, .22);
  --line-soft: rgba(232, 227, 216, .10);

  --max: 1180px;
}

body {
  color: var(--white);
  background: var(--black);
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    sans-serif;
}

body::before {
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 7, .94) 0%,
      rgba(8, 8, 7, .77) 42%,
      rgba(8, 8, 7, .48) 74%,
      rgba(8, 8, 7, .82) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 7, .14),
      rgba(8, 8, 7, .90)
    ),
    url("assets/horizon-background.jpg")
    center top / cover no-repeat;
}

body::after {
  display: none;
}

h1,
h2,
h3,
.brand,
.button,
.nav-links,
.hero-tagline {
  font-family:
    "IBM Plex Sans Condensed",
    "Arial Narrow",
    sans-serif;
}

.eyebrow,
.section-label,
.pillar-number,
.tool small,
.steps li::before,
footer {
  font-family:
    "IBM Plex Mono",
    Consolas,
    monospace;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(8, 8, 7, .97);
  backdrop-filter: none;
}

.brand img {
  clip-path: none;
  box-shadow: none;
}

.brand-text span {
  color: var(--gold);
}

.nav-links a {
  letter-spacing: .08em;
}

.nav-links a:hover {
  color: var(--orange);
}

.nav-links .login {
  color: var(--black);
  background: var(--orange);
  clip-path:
    polygon(
      8px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 8px
    );
}

.hero {
  min-height: calc(92vh - 74px);
}

.hero-inner {
  max-width: 850px;
  padding-left: clamp(20px, 3vw, 38px);
  border-left: 3px solid var(--orange);
}

.eyebrow {
  color: var(--gold);
  letter-spacing: .20em;
}

.eyebrow::before {
  display: none;
}

.hero h1 {
  font-size: clamp(4rem, 9vw, 7.6rem);
  line-height: .86;
  font-weight: 700;
  letter-spacing: -.025em;
}

.hero h1 .gold {
  color: var(--gold);
}

.hero-tagline {
  color: var(--orange);
  letter-spacing: .16em;
}

.hero-copy {
  color: #c5beb1;
}

.hero-copy,
.section-intro,
.pillar p,
.tool p,
.operation-primary p,
.metric span,
.join-panel p,
.steps li,
.final p {
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    sans-serif;
}

.button {
  border: 1px solid var(--line);
  clip-path: none;
  letter-spacing: .07em;
  transition:
    color .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.button:hover {
  transform: none;
}

.button-primary {
  color: var(--black);
  border-color: var(--orange);
  background: var(--orange);
  clip-path:
    polygon(
      10px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 10px
    );
}

.button-primary:hover {
  background: #f47b25;
}

.button-secondary {
  color: var(--white);
  background: var(--black-soft);
}

.button-secondary:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: var(--black-soft);
}

.hero-rule {
  display: none;
}

.section {
  padding:
    clamp(68px, 8vw, 105px)
    0;
}

.section-dark {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 8, 7, .91);
  backdrop-filter: none;
}

.section-label {
  color: var(--orange);
  letter-spacing: .20em;
}

.section-title {
  max-width: 820px;
  font-size: clamp(2.6rem, 5.8vw, 5rem);
  line-height: .96;
  font-weight: 700;
  letter-spacing: -.025em;
}

.section-title .gold {
  color: var(--white);
}


/* HORIZON PANELS AND GEOMETRY */

.pillars {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pillar {
  position: relative;
  min-height: 330px;
  border-right: 1px solid var(--line-soft);
  background: rgba(14, 13, 11, .82);
}

.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--orange);
}

.pillar-number {
  color: var(--dim);
}

.pillar-icon {
  width: 62px;
  height: 62px;
  color: var(--gold);
  border: 1px solid var(--line);
  background: transparent;
  clip-path: none;
}

.pillar h3,
.tool h3,
.operation-primary h3,
.metric strong,
.join-panel h3 {
  color: var(--white);
}

.tool-grid {
  gap: 0;
  border: 1px solid var(--line);
  background: transparent;
}

.tool {
  position: relative;
  border-right: 1px solid var(--line-soft);
  background: var(--panel-heavy);
}

.tool:last-child {
  border-right: 0;
}

.tool::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  background: var(--orange);
}

.tool small {
  color: var(--gold);
}

.operation-primary,
.operation-side {
  border: 1px solid var(--line);
  background: var(--panel);
}

.operation-primary {
  border-left: 3px solid var(--orange);
  clip-path: none;
}

.metric {
  border-bottom: 1px solid var(--line-soft);
}

.metric strong {
  font-size: 1.35rem;
}

.join-panel {
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  background: rgba(12, 11, 9, .95);
  clip-path: none;
}

.steps li {
  border-top: 1px solid var(--line-soft);
}

.steps li::before {
  color: var(--orange);
}

.final {
  text-align: left;
}

.final-mark {
  margin: 0 0 30px;
}

.final-mark img {
  clip-path: none;
}

.final h2 {
  max-width: 820px;
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: .92;
}

.final h2 span {
  color: var(--gold);
}

.final p {
  margin: 25px 0 0;
}

.final .hero-actions {
  justify-content: flex-start;
}

footer {
  border-top: 1px solid var(--line);
  background: var(--black);
  letter-spacing: .05em;
}

@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(3.5rem, 17vw, 6rem);
  }

  .tool {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .tool:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .hero-inner {
    padding-left: 18px;
  }
}