@import url("../shared/FreightIQ_Design_Tokens.css");

:root {
  --fw-font-wordmark: Graphik, "Helvetica Neue", Arial, var(--fi-font-sans);
  --fw-font-display: Gotham, "Arial Narrow", "Helvetica Neue", Arial, var(--fi-font-sans);
  --fw-navy-900: var(--fi-navy);
  --fw-navy-800: #12345a;
  --fw-blue: var(--fi-blue);
  --fw-cyan: var(--fi-cyan);
  --fw-orange: var(--fi-orange);
  --fw-white: var(--fi-text-inverse);
  --fw-muted: color-mix(in srgb, var(--fi-warm-white) 74%, var(--fi-cyan) 26%);
  --fw-border-cyan: color-mix(in srgb, var(--fi-cyan) 58%, transparent);
  --fw-gradient-protected: linear-gradient(105deg, var(--fi-navy) 0%, var(--fi-navy) 60%, var(--fi-blue) 72%, var(--fi-cyan) 80%, var(--fi-orange) 90%, var(--fi-orange) 100%);
  --fw-gradient-muted: linear-gradient(105deg, rgba(15, 39, 71, 0.98) 0%, rgba(15, 39, 71, 0.94) 52%, rgba(31, 111, 229, 0.68) 74%, rgba(86, 216, 255, 0.5) 88%, rgba(255, 143, 31, 0.64) 100%);
  --fw-origin-gradient: linear-gradient(90deg, var(--fi-navy) 0%, var(--fi-navy) 50%, var(--fi-blue) 68%, var(--fi-cyan) 82%, var(--fi-orange) 100%);
  --fw-origin-gradient-muted: linear-gradient(90deg, rgba(15, 39, 71, 0.98) 0%, rgba(15, 39, 71, 0.94) 50%, rgba(31, 111, 229, 0.58) 70%, rgba(86, 216, 255, 0.42) 86%, rgba(255, 143, 31, 0.5) 100%);
  --fw-chamfer-sm: 12px;
  --fw-chamfer-md: 28px;
  --fw-section-desktop: 112px;
  --fw-section-mobile: 64px;
  --fw-container: min(1260px, calc(100vw - 80px));
  --fw-display-xl: clamp(94px, 13.2vw, 220px);
  --fw-display-l: clamp(52px, 7.4vw, 108px);
  --fw-page-display-l: clamp(46.8px, 6.66vw, 97.2px);
  --fw-display-m: clamp(40px, 5.2vw, 72px);
  --fw-body-l: clamp(20px, 1.55vw, 24px);
  --fw-body: clamp(16px, 1.16vw, 18px);
  --fw-label: 12px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--fw-navy-900);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--fi-font-sans);
  color: var(--fw-white);
  background: var(--fw-navy-900);
}

body::selection {
  color: var(--fi-text-dark-action);
  background: var(--fw-orange);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.site-shell {
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--fw-gradient-protected);
}

.origin-page .site-shell {
  background: var(--fw-origin-gradient);
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 28px max(32px, calc((100vw - 1260px) / 2));
  color: var(--fw-white);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--fw-font-wordmark);
  font-size: 24px;
  line-height: 1;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-lockup img {
  width: auto;
  height: 1em;
}

.site-nav nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
  font-size: var(--fw-label);
  line-height: var(--fi-line-support);
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav nav a {
  position: relative;
  padding-block: 6px;
}

.site-nav nav a::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 0;
  height: 3px;
  background: var(--fw-orange);
  transition: width var(--fi-transition-fast);
}

.site-nav nav a[aria-current="page"]::after,
.site-nav nav a:hover::after,
.site-nav nav a:focus-visible::after {
  width: 100%;
}

.site-nav a:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--fw-cyan);
  outline-offset: 6px;
}

.page-hero,
.home-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.gradient-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--fw-gradient-protected);
}

.gradient-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 68% 44%, rgba(86, 216, 255, 0.18), transparent 20%), linear-gradient(90deg, rgba(15, 39, 71, 0.22) 0%, rgba(15, 39, 71, 0) 58%);
}

.origin-page .gradient-field {
  background: var(--fw-origin-gradient);
}

.origin-page .gradient-field::after {
  background: linear-gradient(90deg, rgba(15, 39, 71, 0.2) 0%, rgba(15, 39, 71, 0) 54%);
}

.home-hero {
  display: flex;
  align-items: flex-start;
  padding: 88px max(32px, calc((100vw - 1260px) / 2)) 28px;
}

.home-copy {
  width: min(1050px, 100%);
}

.eyebrow {
  margin: 0;
  color: var(--fw-cyan);
  font-size: var(--fw-label);
  line-height: var(--fi-line-support);
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-wordmark-stage {
  position: relative;
  width: min(1000px, 100%);
  margin-top: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(118px, 12vw, 164px);
}

.wordmark-xl {
  margin: 0;
  color: var(--fw-white);
  font-family: var(--fw-font-wordmark);
  font-size: var(--fw-display-xl);
  line-height: 0.82;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.magnifier-primary {
  position: absolute;
  left: min(84%, calc(100% - 120px));
  top: calc(100% + 8px);
  width: clamp(210px, 21vw, 300px);
  height: auto;
  pointer-events: none;
}

.display-heading {
  max-width: 820px;
  margin: 0 0 clamp(24px, 3vw, 34px);
  color: var(--fw-white);
  font-family: var(--fw-font-display);
  font-size: clamp(34px, 4.35vw, 58px);
  line-height: 0.94;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.lead,
.body-copy {
  max-width: 760px;
  margin: 0;
  color: var(--fw-white);
  font-size: var(--fw-body);
  line-height: 1.5;
}

.lead {
  font-size: var(--fw-body-l);
  line-height: 1.42;
}

.transition-copy {
  display: block;
  max-width: 720px;
  margin-top: 14px;
  color: color-mix(in srgb, var(--fw-cyan) 72%, var(--fw-orange) 28%);
  font-family: var(--fw-font-wordmark);
  font-size: var(--fw-body);
  line-height: 1.45;
  font-weight: var(--fi-weight-medium);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - var(--fw-chamfer-sm)) 0, 100% var(--fw-chamfer-sm), 100% 100%, var(--fw-chamfer-sm) 100%, 0 calc(100% - var(--fw-chamfer-sm)));
  border: 1px solid transparent;
  padding: 0 22px;
  font-size: var(--fi-text-support);
  line-height: 1;
  font-weight: var(--fi-weight-bold);
  transition: transform var(--fi-transition-fast), background var(--fi-transition-fast), border-color var(--fi-transition-fast);
}

.button:hover {
  transform: translate(3px, -3px);
}

.button-primary {
  color: var(--fi-text-dark-action);
  background: var(--fi-orange-action);
  border-color: var(--fi-border-orange);
}

.button-secondary {
  color: var(--fw-white);
  background: transparent;
  border-color: var(--fw-border-cyan);
}

.page-hero {
  display: grid;
  align-items: center;
  padding: 108px max(32px, calc((100vw - 1260px) / 2)) 96px;
}

.page-hero-content {
  max-width: 980px;
}

.page-title {
  margin: 28px 0 28px;
  color: var(--fw-white);
  font-family: var(--fw-font-wordmark);
  font-size: var(--fw-page-display-l);
  line-height: 0.9;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-section {
  position: relative;
  padding: var(--fw-section-desktop) max(32px, calc((100vw - 1260px) / 2));
  background: var(--fw-navy-900);
}

.page-section.alt {
  background: var(--fw-gradient-muted);
}

.origin-page .page-section,
.origin-page .page-section.alt {
  background: transparent;
}

.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.58fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

.statement-grid.reverse .statement {
  grid-column: 2;
}

.statement-grid.reverse .statement-copy {
  grid-column: 1;
  grid-row: 1;
}

.statement {
  margin: 0;
  color: var(--fw-white);
  font-family: var(--fw-font-display);
  font-size: clamp(42px, 6vw, 96px);
  line-height: 0.94;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.statement-copy {
  margin: 0;
  color: var(--fw-muted);
  font-size: var(--fw-body-l);
  line-height: 1.42;
}

.section-heading {
  margin: 20px 0 28px;
  color: var(--fw-white);
  font-family: var(--fw-font-display);
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 0.98;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.chamfer-panel {
  clip-path: polygon(var(--fw-chamfer-md) 0, 100% 0, 100% calc(100% - var(--fw-chamfer-md)), calc(100% - var(--fw-chamfer-md)) 100%, 0 100%, 0 var(--fw-chamfer-md));
  border: 1px solid var(--fw-border-cyan);
  background: linear-gradient(105deg, rgba(15, 39, 71, 0.84), rgba(31, 111, 229, 0.38) 76%, rgba(255, 143, 31, 0.2));
}

.origin-principle {
  padding: var(--fw-section-desktop) max(32px, calc((100vw - 1260px) / 2));
  background: var(--fw-gradient-protected);
}

.origin-page .origin-principle {
  background: transparent;
}

.origin-principle p {
  max-width: 980px;
  margin: 0;
  color: var(--fw-white);
  font-family: var(--fw-font-display);
  font-size: clamp(42px, 6.8vw, 110px);
  line-height: 0.95;
  font-weight: var(--fi-weight-bold);
  text-transform: uppercase;
}

.access-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(360px, 0.48fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.access-list {
  display: grid;
  gap: 18px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.access-list li {
  position: relative;
  padding-left: 28px;
  color: var(--fw-muted);
  font-size: var(--fw-body);
  line-height: 1.45;
}

.access-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 12px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: var(--fw-orange);
}

.controlled-entry {
  padding: 40px;
}

.controlled-entry h2,
.support-panel h2 {
  margin: 0 0 18px;
  color: var(--fw-white);
  font-family: var(--fw-font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
}

.controlled-entry p,
.support-panel p {
  margin: 0;
  color: var(--fw-muted);
  font-size: var(--fw-body);
  line-height: 1.5;
}

.controlled-entry .button {
  margin-top: 32px;
}

.support-panel {
  margin-top: 32px;
  padding: 32px;
}

.early-access-hero .page-hero-content {
  max-width: 1040px;
}

.early-access-intro {
  display: grid;
  gap: 20px;
  max-width: 860px;
}

.early-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(360px, 0.54fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}

.expectation-panel,
.contact-card,
.future-form-note {
  padding: 32px;
}

.expectation-panel h2,
.contact-card h3,
.future-form-note h3 {
  margin: 0 0 18px;
  color: var(--fw-white);
  font-family: var(--fw-font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1;
  font-weight: var(--fi-weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.contact-heading {
  max-width: 760px;
  margin-bottom: 44px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contact-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-card p,
.future-form-note p {
  margin: 0;
  color: var(--fw-muted);
  font-size: var(--fw-body);
  line-height: 1.5;
}

.contact-card .button {
  margin-top: auto;
}

.contact-value {
  overflow-wrap: anywhere;
  font-weight: var(--fi-weight-bold);
}

.button-disabled,
.button-disabled:hover {
  color: color-mix(in srgb, var(--fw-white) 72%, var(--fw-muted) 28%);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  cursor: not-allowed;
  transform: none;
}

.future-form-note {
  max-width: 820px;
  margin-top: 32px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px max(32px, calc((100vw - 1260px) / 2));
  color: var(--fw-muted);
  background: var(--fw-navy-900);
  border-top: 1px solid rgba(86, 216, 255, 0.18);
  font-size: var(--fi-text-support);
}

.site-footer a {
  color: var(--fw-white);
}

@media (max-width: 980px) {
  :root {
    --fw-container: min(100% - 48px, 760px);
    --fw-display-xl: clamp(72px, 18vw, 148px);
  }

  .site-nav {
    position: absolute;
    padding-inline: 24px;
  }

  .home-hero,
  .page-hero,
  .page-section,
  .origin-principle,
  .site-footer {
    padding-inline: 24px;
  }

  .statement-grid,
  .access-grid,
  .early-access-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .statement-grid.reverse .statement,
  .statement-grid.reverse .statement-copy {
    grid-column: auto;
    grid-row: auto;
  }

  .home-wordmark-stage {
    margin-bottom: clamp(128px, 24vw, 190px);
  }

  .magnifier-primary {
    left: min(54%, calc(100% - 220px));
    width: clamp(170px, 32vw, 250px);
  }
}

@media (max-width: 680px) {
  .site-nav {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: var(--fw-navy-900);
  }

  .site-nav nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .home-hero {
    min-height: auto;
    padding-top: 48px;
  }

  .home-wordmark-stage {
    margin-top: 64px;
    margin-bottom: 140px;
  }

  .magnifier-primary {
    left: 46%;
    top: calc(100% + 8px);
    width: clamp(150px, 48vw, 210px);
  }

  .display-heading {
    font-size: clamp(34px, 11vw, 52px);
  }

  .actions,
  .button {
    width: 100%;
  }

  .actions {
    flex-direction: column;
  }

  .page-hero {
    min-height: auto;
    padding-top: 44px;
    padding-bottom: 72px;
  }

  .page-section,
  .origin-principle {
    padding-block: var(--fw-section-mobile);
  }

  .controlled-entry,
  .support-panel,
  .expectation-panel,
  .contact-card,
  .future-form-note {
    padding: 28px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}