:root {
  --black: #000000;
  --void: #050505;
  --card: #0a0a0a;
  --card-soft: #0f0f0f;

  --white: #ffffff;
  --gray-1: #d4d4d4;
  --gray-2: #909090;
  --gray-3: #5e5e5e;

  --lime: #c4ff00;
  --lime-bright: #7cff00;

  --cyan: #00e5ff;
  --magenta: #ff00c8;

  --border: rgba(255,255,255,.09);
  --border-lime: rgba(196,255,0,.18);

  --gradient:
    linear-gradient(
      100deg,
      #c4ff00 0%,
      #7cff00 45%,
      #00e5ff 100%
    );

  --brand-gradient:
    linear-gradient(
      90deg,
      #00e5ff 0%,
      #ff00c8 100%
    );

  --ease: cubic-bezier(.22,1,.36,1);
}


/* RESET */

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


html {
  scroll-behavior: smooth;
}


body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(196,255,0,.055),
      transparent 32%
    ),
    var(--black);

  color: var(--white);

  font-family:
    'Space Grotesk',
    sans-serif;

  font-weight: 500;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;
}


button,
input,
textarea {
  font: inherit;
}


/* HEADER */

.site-header {
  width: 100%;

  border-bottom: 1px solid rgba(255,255,255,.07);

  background: rgba(0,0,0,.72);

  backdrop-filter: blur(20px);

  position: sticky;
  top: 0;

  z-index: 50;
}


.nav-container {
  width: min(1180px, 92%);

  min-height: 72px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.back-link {
  color: var(--gray-1);

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  transition:
    color .3s var(--ease),
    transform .3s var(--ease);
}


.back-arrow {
  font-size: 17px;

  transition:
    transform .3s var(--ease);
}


.back-link:hover {
  color: var(--lime);
}


.back-link:hover .back-arrow {
  transform: translateX(-4px);
}


.nav-status {
  color: var(--gray-3);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .18em;

  display: flex;

  align-items: center;

  gap: 8px;
}


.status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--lime);

  box-shadow:
    0 0 10px rgba(196,255,0,.7);
}


/* MAIN */

.main-container {
  width: min(980px, 92%);

  margin: auto;

  padding:
    72px
    0
    100px;
}


/* BRAND HERO */

.brand-hero {
  text-align: center;

  margin-bottom: 72px;
}


.logo-wrap {
  width: 110px;
  height: 110px;

  margin:
    0 auto
    20px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;
}


.logo-wrap::before {
  content: "";

  position: absolute;

  inset: 10px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(196,255,0,.11),
      transparent 70%
    );

  filter: blur(8px);

  z-index: -1;
}


.nexa-logo {
  width: 96px;
  height: 96px;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(
      0 0 20px rgba(0,229,255,.16)
    )
    drop-shadow(
      0 0 28px rgba(255,0,200,.11)
    );

  transition:
    transform .5s var(--ease),
    filter .5s var(--ease);
}


.logo-wrap:hover .nexa-logo {
  transform: scale(1.06);

  filter:
    drop-shadow(
      0 0 24px rgba(0,229,255,.24)
    )
    drop-shadow(
      0 0 36px rgba(255,0,200,.16)
    );
}


.brand-name {
  font-size: 20px;

  font-weight: 700;

  letter-spacing: .2em;
}


.brand-tagline {
  margin-top: 7px;

  color: var(--gray-2);

  font-size: 10px;

  letter-spacing: .32em;

  font-weight: 600;
}


.tool-badge {
  width: fit-content;

  margin:
    20px auto
    0;

  padding:
    8px
    13px;

  border:
    1px solid
    rgba(196,255,0,.14);

  border-radius: 100px;

  color: var(--gray-3);

  background:
    rgba(196,255,0,.025);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .18em;

  display: flex;

  align-items: center;

  gap: 7px;
}


.tool-badge span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--lime);

  box-shadow:
    0 0 9px var(--lime);
}


/* INTRO */

.intro-section {
  max-width: 780px;

  margin:
    0 auto
    52px;

  text-align: center;
}


.eyebrow {
  color: var(--lime);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .22em;

  margin-bottom: 17px;
}


.intro-section h1 {
  font-size:
    clamp(
      40px,
      7vw,
      72px
    );

  line-height: .98;

  letter-spacing: -.055em;

  font-weight: 700;
}


.intro-section h1 span {
  display: block;

  background: var(--gradient);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;
}


.intro-section p {
  max-width: 590px;

  margin:
    25px auto
    0;

  color: var(--gray-2);

  font-size: 15px;

  line-height: 1.75;
}


/* BUILDER */

.builder-card {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 28px;

  padding: 36px;

  box-shadow:
    0 40px 100px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035);
}


.card-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  padding-bottom: 30px;

  margin-bottom: 30px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.tool-label {
  color: var(--lime);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .2em;

  margin-bottom: 8px;
}


.card-top h2,
.workspace-header h2 {
  font-size: 28px;

  font-weight: 700;

  letter-spacing: -.035em;
}


.step-indicator {
  color: var(--gray-3);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .15em;
}


.step-active {
  color: var(--lime);
}


/* FORM SECTIONS */

.form-section {
  margin-bottom: 40px;
}


.section-heading {
  display: flex;

  gap: 15px;

  align-items: flex-start;

  margin-bottom: 22px;
}


.section-number {
  width: 34px;
  height: 34px;

  border:
    1px solid
    rgba(196,255,0,.2);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--lime);

  font-size: 10px;

  font-weight: 700;

  background:
    rgba(196,255,0,.035);
}


.section-heading h3 {
  font-size: 16px;

  font-weight: 700;
}


.section-heading p {
  margin-top: 4px;

  color: var(--gray-3);

  font-size: 11px;
}


/* FORM GRID */

.form-grid {
  display: grid;

  gap: 18px;
}


.two-columns {
  grid-template-columns:
    repeat(2, minmax(0,1fr));
}


.field {
  margin-bottom: 18px;
}


.field label {
  display: block;

  color: var(--gray-1);

  font-size: 11px;

  font-weight: 600;

  margin-bottom: 9px;
}


input,
textarea {
  width: 100%;

  border:
    1px solid
    rgba(255,255,255,.1);

  background:
    rgba(0,0,0,.65);

  color: var(--white);

  border-radius: 13px;

  padding:
    15px
    16px;

  outline: none;

  font-size: 14px;

  font-weight: 500;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .25s var(--ease);
}


input {
  height: 54px;
}


textarea {
  min-height: 125px;

  resize: vertical;

  line-height: 1.65;
}


input::placeholder,
textarea::placeholder {
  color: #484848;
}


input:hover,
textarea:hover {
  border-color:
    rgba(255,255,255,.17);
}


input:focus,
textarea:focus {
  border-color:
    rgba(196,255,0,.55);

  background:
    rgba(196,255,0,.018);

  box-shadow:
    0 0 0 4px
    rgba(196,255,0,.055),
    0 0 25px
    rgba(196,255,0,.035);
}


.currency-input {
  position: relative;
}


.currency-input > span {
  position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--lime);

  font-size: 15px;

  font-weight: 700;

  z-index: 2;
}


.currency-input input {
  padding-left: 36px;
}


/* BUILDER ACTION */

.builder-action {
  margin-top: 10px;

  padding-top: 26px;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;
}


.action-copy {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.action-copy strong {
  font-size: 13px;
}


.action-copy span {
  color: var(--gray-3);

  font-size: 11px;
}


/* BUTTONS */

.primary-btn,
.secondary-btn {
  border: none;

  border-radius: 13px;

  min-height: 54px;

  padding:
    0
    20px;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  font-size: 13px;

  font-weight: 700;

  transition:
    transform .3s var(--ease),
    box-shadow .3s ease,
    opacity .3s ease;
}


.primary-btn {
  background: var(--gradient);

  color: #000;

  box-shadow:
    0 8px 28px
    rgba(124,255,0,.08);
}


.primary-btn:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 38px
    rgba(124,255,0,.16);
}


.primary-btn:active {
  transform: translateY(-1px);
}


.primary-btn:disabled {
  opacity: .55;

  cursor: wait;

  transform: none;
}


.btn-arrow {
  font-size: 18px;

  transition:
    transform .3s var(--ease);
}


.primary-btn:hover .btn-arrow {
  transform: translateX(4px);
}


.secondary-btn {
  color: var(--gray-1);

  background:
    rgba(255,255,255,.035);

  border:
    1px solid
    rgba(255,255,255,.1);
}


.secondary-btn:hover {
  color: var(--lime);

  border-color:
    rgba(196,255,0,.3);

  background:
    rgba(196,255,0,.04);
}


/* PAYWALL */

.paywall-card {
  display: none;

  margin-top: 22px;

  padding: 28px;

  border:
    1px solid
    rgba(196,255,0,.2);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(196,255,0,.08),
      transparent 38%
    ),
    #090909;

  position: relative;

  overflow: hidden;

  animation:
    reveal .5s var(--ease);
}


.paywall-card::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -80px;
  top: -90px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,229,255,.09),
      transparent 70%
    );
}


.paywall-icon {
  width: 45px;
  height: 45px;

  border-radius: 13px;

  background:
    rgba(196,255,0,.08);

  border:
    1px solid
    rgba(196,255,0,.18);

  color: var(--lime);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 19px;

  margin-bottom: 18px;
}


.paywall-eyebrow {
  color: var(--lime);

  font-size: 8px;

  letter-spacing: .2em;

  font-weight: 700;

  margin-bottom: 7px;
}


.paywall-content h2 {
  max-width: 620px;

  font-size: 23px;

  letter-spacing: -.03em;
}


.paywall-content p {
  max-width: 620px;

  margin-top: 9px;

  color: var(--gray-2);

  font-size: 12px;

  line-height: 1.65;
}


.price-line {
  margin-top: 18px;

  display: flex;

  align-items: baseline;

  gap: 10px;
}


.price-line strong {
  color: var(--white);

  font-size: 26px;
}


.price-line span {
  color: var(--gray-3);

  font-size: 10px;
}


.pay-btn {
  margin-top: 23px;
}


.secure-note {
  margin-top: 13px;

  color: var(--gray-3);

  font-size: 9px;
}


.secure-note span {
  color: var(--lime);

  margin-right: 5px;
}


/* WORKSPACE */

.workspace {
  display: none;

  margin-top: 70px;

  animation:
    reveal .7s var(--ease);
}


.workspace-header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 22px;
}


.workspace-header p {
  color: var(--gray-3);

  font-size: 11px;

  margin-top: 5px;
}


.workspace-status {
  color: var(--lime);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .15em;

  display: flex;

  gap: 8px;

  align-items: center;
}


/* PAPER */

.proposal-paper {
  background: #ffffff;

  color: #111;

  border-radius: 6px;

  min-height: 850px;

  padding: 60px;

  box-shadow:
    0 40px 100px
    rgba(0,0,0,.5);

  overflow: hidden;
}


.paper-placeholder {
  min-height: 700px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  color: #999;
}


.placeholder-icon {
  width: 55px;
  height: 55px;

  border-radius: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #f3f3f3;

  color: #111;

  margin-bottom: 18px;
}


.paper-placeholder h3 {
  color: #222;

  font-size: 18px;

  margin-bottom: 7px;
}


.paper-placeholder p {
  max-width: 350px;

  color: #999;

  font-size: 12px;

  line-height: 1.6;
}


/* GENERATED PROPOSAL */

.generated-proposal {
  font-family: Arial, Helvetica, sans-serif;

  color: #171717;

  line-height: 1.7;
}


.proposal-top {
  border-bottom:
    4px solid
    #111;

  padding-bottom: 28px;

  margin-bottom: 35px;
}


.proposal-brand {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 40px;
}


.proposal-brand img {
  width: 68px;
  height: 68px;

  object-fit: contain;
}


.proposal-brand-name {
  font-family:
    'Space Grotesk',
    Arial,
    sans-serif;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: .18em;

  margin-left: auto;
}


.proposal-kicker {
  color: #555;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;

  margin-bottom: 8px;
}


.proposal-title {
  font-family:
    'Space Grotesk',
    Arial,
    sans-serif;

  font-size: 42px;

  line-height: 1.05;

  letter-spacing: -.045em;

  margin-bottom: 12px;
}


.proposal-project {
  font-size: 20px;

  font-weight: 700;

  background:
    linear-gradient(
      90deg,
      #111,
      #777
    );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}


.proposal-meta {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 15px;

  margin-top: 28px;
}


.meta-item {
  padding: 14px;

  background: #f6f6f6;

  border-radius: 8px;
}


.meta-label {
  display: block;

  color: #888;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  margin-bottom: 5px;
}


.meta-value {
  font-size: 11px;

  font-weight: 700;

  color: #222;
}


.proposal-section {
  margin-bottom: 32px;
}


.proposal-section h3 {
  font-family:
    'Space Grotesk',
    Arial,
    sans-serif;

  font-size: 14px;

  font-weight: 700;

  margin-bottom: 10px;

  letter-spacing: -.01em;
}


.proposal-section h3 span {
  color: #999;

  font-size: 9px;

  margin-right: 7px;

  letter-spacing: .1em;
}


.proposal-section p {
  color: #454545;

  font-size: 11px;

  line-height: 1.8;
}


.investment-box {
  padding: 24px;

  background: #f4f4f4;

  border-left:
    4px solid
    #111;

  border-radius: 8px;
}


.investment-label {
  color: #777;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .13em;

  font-weight: 700;
}


.investment-amount {
  font-family:
    'Space Grotesk',
    Arial,
    sans-serif;

  font-size: 30px;

  font-weight: 700;

  margin-top: 5px;
}


.payment-terms {
  color: #777;

  font-size: 9px;

  margin-top: 4px;
}


.proposal-footer {
  border-top:
    1px solid
    #ddd;

  margin-top: 50px;

  padding-top: 18px;

  display: flex;

  justify-content: space-between;

  color: #888;

  font-size: 8px;

  letter-spacing: .08em;
}


/* WORKSPACE ACTIONS */

.workspace-actions {
  margin-top: 18px;

  display: flex;

  justify-content: flex-end;

  gap: 10px;
}


/* ECOSYSTEM */

.ecosystem-card {
  margin-top: 90px;

  padding:
    32px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(196,255,0,.035),
      rgba(0,229,255,.018)
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


.ecosystem-label {
  color: var(--lime);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .2em;

  margin-bottom: 9px;
}


.ecosystem-card h2 {
  font-size: 22px;

  letter-spacing: -.035em;
}


.ecosystem-card h2 span {
  color: var(--gray-2);
}


.ecosystem-card p {
  color: var(--gray-3);

  font-size: 11px;

  margin-top: 7px;
}


.ecosystem-btn {
  flex-shrink: 0;

  padding:
    13px
    17px;

  border-radius: 11px;

  border:
    1px solid
    rgba(196,255,0,.22);

  color: var(--lime);

  text-decoration: none;

  font-size: 10px;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 12px;

  transition:
    background .3s ease,
    transform .3s var(--ease);
}


.ecosystem-btn:hover {
  background:
    rgba(196,255,0,.06);

  transform: translateY(-2px);
}


/* FOOTER */

.site-footer {
  padding:
    35px
    20px
    50px;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  text-align: center;

  color: var(--gray-3);
}


.footer-brand img {
  width: 38px;
  height: 38px;

  object-fit: contain;

  opacity: .75;

  margin-bottom: 12px;
}


.footer-copy {
  font-size: 10px;

  font-weight: 600;
}


.footer-tagline {
  margin-top: 5px;

  font-size: 8px;

  letter-spacing: .22em;
}


/* TOAST */

.toast {
  position: fixed;

  right: 20px;
  bottom: 20px;

  padding:
    12px
    16px;

  border:
    1px solid
    rgba(196,255,0,.2);

  border-radius: 12px;

  background:
    rgba(10,10,10,.94);

  backdrop-filter: blur(18px);

  color: white;

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 11px;

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.4);

  transform:
    translateY(20px);

  opacity: 0;

  pointer-events: none;

  transition:
    .4s var(--ease);

  z-index: 100;
}


.toast.show {
  transform:
    translateY(0);

  opacity: 1;
}


.toast-icon {
  color: var(--lime);

  font-weight: 700;
}


/* ANIMATION */

@keyframes reveal {

  from {
    opacity: 0;
    transform:
      translateY(18px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .main-container {
    width: min(94%, 980px);

    padding-top: 50px;
  }


  .brand-hero {
    margin-bottom: 55px;
  }


  .intro-section {
    margin-bottom: 38px;
  }


  .intro-section h1 {
    font-size: 43px;
  }


  .intro-section p {
    font-size: 13px;
  }


  .builder-card {
    padding: 22px;

    border-radius: 22px;
  }


  .card-top {
    align-items: flex-start;
  }


  .card-top h2,
  .workspace-header h2 {
    font-size: 23px;
  }


  .two-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }


  .builder-action {
    flex-direction: column;

    align-items: stretch;
  }


  .action-copy {
    margin-bottom: 5px;
  }


  .primary-btn {
    width: 100%;
  }


  .paywall-card {
    padding: 23px;
  }


  .workspace {
    margin-top: 55px;
  }


  .workspace-header {
    align-items: flex-start;

    gap: 15px;
  }


  .proposal-paper {
    padding: 28px 20px;

    min-height: 650px;
  }


  .proposal-title {
    font-size: 30px;
  }


  .proposal-project {
    font-size: 16px;
  }


  .proposal-meta {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .workspace-actions {
    flex-direction: column;
  }


  .workspace-actions button {
    width: 100%;
  }


  .ecosystem-card {
    flex-direction: column;

    align-items: flex-start;

    padding: 25px;
  }


  .ecosystem-btn {
    width: 100%;

    justify-content: center;
  }

}


@media (max-width: 430px) {

  .nav-container {
    min-height: 64px;
  }


  .nav-status {
    display: none;
  }


  .logo-wrap {
    width: 92px;
    height: 92px;
  }


  .nexa-logo {
    width: 82px;
    height: 82px;
  }


  .brand-name {
    font-size: 17px;
  }


  .intro-section h1 {
    font-size: 37px;
  }


  .builder-card {
    padding: 18px;
  }


  .section-heading {
    gap: 11px;
  }


  .section-number {
    width: 30px;
    height: 30px;

    flex-shrink: 0;
  }

}


/* PDF PRINT SUPPORT */

@media print {

  body {
    background: white;
  }

  .site-header,
  .brand-hero,
  .intro-section,
  .builder-card,
  .paywall-card,
  .workspace-header,
  .workspace-actions,
  .ecosystem-card,
  .site-footer,
  .toast {
    display: none !important;
  }

  .main-container {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .workspace {
    display: block !important;
    margin: 0;
  }

  .proposal-paper {
    box-shadow: none;
    border-radius: 0;
    min-height: auto;
    padding: 30px;
  }

}