:root {

  --black: #050505;
  --black-deep: #000000;
  --surface: #0b0b0c;
  --surface-2: #111113;
  --surface-3: #171719;

  --white: #ffffff;
  --muted: #8c8c91;
  --muted-2: #5f6065;

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

  --border: rgba(255,255,255,.09);
  --border-light: rgba(255,255,255,.14);

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

  --ease:
    cubic-bezier(.16,1,.3,1);
}


/* RESET */

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


html {
  scroll-behavior: smooth;
}


body {

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

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(0,229,255,.08),
      transparent 35%
    ),
    #000;

  color: var(--white);

  min-height: 100vh;

  overflow-x: hidden;

  font-weight: 500;
}


/* AMBIENT LIGHT */

.ambient {

  position: fixed;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  filter: blur(140px);

  opacity: .07;

  pointer-events: none;

  z-index: -1;
}


.ambient-one {

  top: 15%;
  left: -300px;

  background: var(--cyan);
}


.ambient-two {

  right: -300px;
  bottom: 10%;

  background: var(--pink);
}


/* HEADER */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

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

  backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid var(--border);
}


.nav-container {

  width: min(
    1320px,
    calc(100% - 48px)
  );

  min-height: 76px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.back-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #fff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  transition: .3s ease;
}


.back-arrow {

  font-size: 18px;

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


.back-link:hover {

  opacity: .7;
}


.back-link:hover .back-arrow {

  transform: translateX(-5px);
}


.header-brand {

  display: flex;

  align-items: center;

  gap: 10px;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);
}


.nexa-logo {

  width: 34px;

  height: 34px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 14px
      rgba(0,229,255,.18)
    );
}


.brand-copy {

  display: flex;

  flex-direction: column;

  line-height: 1;
}


.brand-copy strong {

  font-size: 11px;

  letter-spacing: .14em;
}


.brand-copy span {

  margin-top: 4px;

  font-size: 7px;

  letter-spacing: .2em;

  color: var(--muted);
}


.header-status {

  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 8px;

  letter-spacing: .16em;

  color: var(--muted);
}


.status-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 12px
    rgba(0,229,255,.8);
}


/* MAIN */

.main-container {

  width: min(
    1080px,
    calc(100% - 40px)
  );

  margin: auto;

  padding:
    90px 0 100px;
}


/* HERO */

.hero {

  max-width: 780px;

  margin:
    0 auto 65px;

  text-align: center;
}


.hero-kicker {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 22px;

  color: var(--muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .25em;
}


.hero-kicker span {

  width: 28px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan)
    );
}


.hero-kicker span:last-child {

  background:
    linear-gradient(
      90deg,
      var(--pink),
      transparent
    );
}


.hero h1 {

  font-size:
    clamp(44px, 7vw, 82px);

  line-height: .95;

  letter-spacing: -.055em;

  font-weight: 700;

  margin-bottom: 25px;
}


.hero h1 span {

  display: block;

  background: var(--gradient);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;
}


.hero p {

  max-width: 620px;

  margin: auto;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;
}


.hero-meta {

  margin-top: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 14px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .16em;

  color: #777;
}


.meta-divider {

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: #444;
}


/* BUILDER */

.builder-shell {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  border:
    1px solid var(--border-light);

  border-radius: 28px;

  padding: 34px;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.45);

  position: relative;

  overflow: hidden;
}


.builder-shell::before {

  content: '';

  position: absolute;

  top: 0;
  left: 10%;

  width: 80%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,229,255,.6),
      rgba(255,0,200,.6),
      transparent
    );
}


.builder-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 28px;

  margin-bottom: 30px;

  border-bottom:
    1px solid var(--border);
}


.eyebrow {

  display: block;

  color: var(--cyan);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .22em;

  margin-bottom: 8px;
}


.builder-topbar h2,
.result-header h2 {

  font-size: 22px;

  letter-spacing: -.03em;
}


.secure-pill {

  padding: 8px 12px;

  border:
    1px solid var(--border);

  border-radius: 100px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .08em;
}


.secure-pill span {

  color: #77ffb0;

  margin-right: 4px;
}


/* FORM */

.form-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px;
}


.field {

  position: relative;

  transition: .3s ease;
}


.full-field {

  grid-column: 1 / -1;
}


.field label {

  display: block;

  margin:
    0 0 9px 2px;

  color: #aaa;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.field.focused label {

  color: var(--cyan);
}


input,
textarea {

  width: 100%;

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

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

  color: #fff;

  border-radius: 13px;

  padding:
    16px 17px;

  outline: none;

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

  font-size: 13px;

  font-weight: 500;

  transition:
    border .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}


input {

  min-height: 52px;
}


textarea {

  min-height: 125px;

  resize: vertical;

  line-height: 1.65;
}


input::placeholder,
textarea::placeholder {

  color: #4f5054;
}


input:focus,
textarea:focus {

  border-color:
    rgba(0,229,255,.5);

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

  box-shadow:
    0 0 0 3px
    rgba(0,229,255,.055),
    0 15px 35px
    rgba(0,0,0,.2);
}


.field-hint {

  margin:
    7px 2px 0;

  color: #555;

  font-size: 9px;
}


.skill-preview {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 10px;
}


.skill-preview span {

  padding:
    5px 9px;

  border-radius: 100px;

  background:
    rgba(0,229,255,.06);

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

  color:
    rgba(255,255,255,.65);

  font-size: 9px;
}


/* ACTIONS */

.builder-actions {

  margin-top: 32px;

  padding-top: 26px;

  border-top:
    1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.action-note {

  display: flex;

  align-items: center;

  gap: 12px;
}


.action-icon {

  width: 35px;

  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 10px;

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

  color: var(--cyan);
}


.action-note strong {

  display: block;

  font-size: 11px;
}


.action-note small {

  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 9px;
}


.primary-btn,
.pay-btn,
.primary-small-btn {

  border: 0;

  cursor: pointer;

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

  font-weight: 700;

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


.primary-btn {

  min-width: 230px;

  padding:
    17px 20px;

  border-radius: 13px;

  background: var(--gradient);

  color: #000;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 12px;

  box-shadow:
    0 10px 30px
    rgba(0,229,255,.1);
}


.primary-btn:hover {

  transform: translateY(-3px);

  box-shadow:
    0 15px 40px
    rgba(0,229,255,.2);
}


.btn-arrow {

  font-size: 17px;
}


/* PAYWALL */

.paywall {

  display: none;

  margin-top: 24px;

  position: relative;

  overflow: hidden;

  border-radius: 26px;

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

  background:
    linear-gradient(
      135deg,
      #0d0d0e,
      #080808
    );

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


.paywall-glow {

  position: absolute;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  right: -160px;

  top: -190px;

  background:
    radial-gradient(
      circle,
      rgba(255,0,200,.18),
      transparent 65%
    );
}


.paywall-content {

  position: relative;

  z-index: 2;

  padding: 45px;

  max-width: 700px;
}


.pro-badge {

  display: inline-block;

  padding:
    7px 10px;

  border-radius: 100px;

  background: var(--gradient);

  color: #000;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .14em;

  margin-bottom: 18px;
}


.paywall h2 {

  max-width: 650px;

  font-size:
    clamp(30px, 5vw, 54px);

  line-height: 1;

  letter-spacing: -.05em;

  margin-bottom: 18px;
}


.paywall h2 span {

  background: var(--gradient);

  -webkit-background-clip: text;

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


.paywall > .paywall-content > p {

  color: var(--muted);

  font-size: 13px;

  line-height: 1.7;

  max-width: 570px;
}


.paywall strong {

  color: #fff;
}


.benefits {

  display: grid;

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

  gap: 12px;

  margin:
    30px 0;
}


.benefit {

  display: flex;

  gap: 10px;

  padding: 15px;

  border:
    1px solid var(--border);

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

  border-radius: 12px;
}


.benefit > span {

  color: #71ffac;

  font-weight: 700;
}


.benefit strong {

  display: block;

  font-size: 10px;
}


.benefit small {

  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.5;
}


.pay-btn {

  width: 100%;

  max-width: 350px;

  padding:
    17px 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-radius: 13px;

  background: var(--gradient);

  color: #000;

  font-size: 12px;
}


.pay-btn:hover {

  transform: translateY(-3px);

  box-shadow:
    0 15px 40px
    rgba(255,0,200,.15);
}


.payment-note {

  margin-top: 12px;

  font-size: 8px !important;

  color: #555 !important;
}


/* RESULT */

.result-section {

  display: none;

  margin-top: 80px;
}


.result-section.visible {

  display: block;

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


@keyframes resultReveal {

  from {

    opacity: 0;

    transform:
      translateY(25px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.result-header {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 25px;

  gap: 20px;
}


.result-actions {

  display: flex;

  gap: 9px;
}


.secondary-btn,
.primary-small-btn {

  padding:
    11px 14px;

  border-radius: 10px;

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

  font-size: 9px;

  font-weight: 700;

  cursor: pointer;
}


.secondary-btn {

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

  border:
    1px solid var(--border);

  color: #aaa;
}


.primary-small-btn {

  border: 0;

  background: var(--gradient);

  color: #000;
}


.primary-small-btn span {

  margin-left: 8px;
}


/* RESUME PAPER */

.resume-paper {

  background: #fff;

  color: #111;

  border-radius: 4px;

  overflow: hidden;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.55);
}


.resume-empty {

  min-height: 500px;

  display: grid;

  place-items: center;

  text-align: center;

  padding: 50px;

  color: #777;
}


.empty-logo img {

  width: 70px;

  height: 70px;

  object-fit: contain;

  margin-bottom: 18px;
}


.resume-empty h3 {

  color: #222;

  margin-bottom: 7px;

  font-size: 20px;
}


.resume-empty p {

  max-width: 420px;

  line-height: 1.7;

  font-size: 12px;
}


/* GENERATED RESUME */

.resume-document {

  width: 210mm;

  min-height: 297mm;

  padding:
    24mm 22mm;

  margin: auto;

  background: #fff;

  color: #151515;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


.resume-top {

  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-bottom: 18px;

  border-bottom:
    2px solid #111;

  margin-bottom: 24px;
}


.resume-identity {

  flex: 1;
}


.resume-name-row h1 {

  font-size: 34px;

  line-height: 1;

  letter-spacing: -.04em;

  margin-bottom: 7px;

  font-weight: 700;
}


.resume-name-row h2 {

  font-size: 13px;

  color: #666;

  font-weight: 500;

  letter-spacing: .05em;

  text-transform: uppercase;
}


.resume-contact {

  display: flex;

  flex-wrap: wrap;

  gap: 6px 14px;

  margin-top: 17px;

  color: #555;

  font-size: 9px;
}


.resume-contact span:not(:last-child)::after {

  content: '•';

  margin-left: 14px;

  color: #aaa;
}


.resume-links {

  display: flex;

  gap: 12px;

  margin-top: 8px;
}


.resume-links a {

  color: #333;

  font-size: 8px;

  text-decoration: none;

  border-bottom: 1px solid #aaa;

}


.resume-mark img {

  width: 48px;

  height: 48px;

  object-fit: contain;
}


.resume-block {

  margin-bottom: 24px;
}


.resume-section-label {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 9px;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.resume-section-label span {

  color: #888;

  font-size: 8px;

  font-weight: 700;
}


.resume-block p,
.resume-body {

  color: #444;

  font-size: 10px;

  line-height: 1.75;
}


.resume-skills {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.resume-skills span {

  border:
    1px solid #ddd;

  border-radius: 100px;

  padding:
    6px 9px;

  color: #333;

  font-size: 8px;
}


.resume-footer {

  display: flex;

  justify-content: space-between;

  margin-top: 45px;

  padding-top: 12px;

  border-top: 1px solid #ddd;

  color: #aaa;

  font-size: 7px;

  letter-spacing: .08em;

  text-transform: uppercase;
}


/* FOOTER */

.site-footer {

  width: min(
    1080px,
    calc(100% - 40px)
  );

  margin: auto;

  padding:
    28px 0 40px;

  border-top:
    1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--muted);
}


.footer-brand {

  display: flex;

  align-items: center;

  gap: 10px;
}


.footer-brand img {

  width: 30px;

  height: 30px;

  object-fit: contain;
}


.footer-brand strong {

  display: block;

  font-size: 9px;

  letter-spacing: .1em;

  color: #fff;
}


.footer-brand span {

  display: block;

  margin-top: 3px;

  font-size: 8px;
}


.footer-copy {

  font-size: 8px;

  letter-spacing: .08em;
}


/* RESPONSIVE */

@media (max-width: 800px) {

  .main-container {

    padding-top: 65px;
  }


  .builder-shell {

    padding: 22px;

    border-radius: 20px;
  }


  .form-grid {

    grid-template-columns: 1fr;
  }


  .full-field {

    grid-column: auto;
  }


  .builder-actions {

    align-items: stretch;

    flex-direction: column;
  }


  .primary-btn {

    width: 100%;
  }


  .benefits {

    grid-template-columns: 1fr;
  }


  .paywall-content {

    padding: 30px 24px;
  }


  .result-header {

    align-items: stretch;

    flex-direction: column;
  }


  .result-actions {

    width: 100%;
  }


  .secondary-btn,
  .primary-small-btn {

    flex: 1;
  }


  .resume-paper {

    overflow-x: auto;
  }
}


@media (max-width: 560px) {

  .nav-container {

    width:
      calc(100% - 28px);
  }


  .brand-copy {

    display: none;
  }


  .header-status {

    display: none;
  }


  .main-container {

    width:
      calc(100% - 24px);

    padding:
      50px 0 70px;
  }


  .hero {

    margin-bottom: 42px;
  }


  .hero-meta {

    flex-wrap: wrap;

    gap: 8px;
  }


  .builder-shell {

    padding: 17px;

    border-radius: 18px;
  }


  .builder-topbar {

    align-items: flex-start;

    gap: 15px;

    flex-direction: column;
  }


  .secure-pill {

    align-self: flex-start;
  }


  .paywall h2 {

    font-size: 34px;
  }


  .site-footer {

    width:
      calc(100% - 24px);

    align-items: flex-start;

    gap: 20px;

    flex-direction: column;
  }

}


/* PRINT */

@media print {

  body {

    background: #fff;

    color: #000;
  }


  .site-header,
  .hero,
  .builder-shell,
  .paywall,
  .result-header,
  .site-footer,
  .ambient {

    display: none !important;
  }


  .main-container {

    width: 100%;

    margin: 0;

    padding: 0;
  }


  .result-section {

    display: block !important;

    margin: 0;
  }


  .resume-paper {

    box-shadow: none;

    border-radius: 0;
  }


  .resume-document {

    margin: 0;
  }

}