:root {

  --void: #000000;
  --surface: #070707;
  --surface-2: #0c0c0c;
  --surface-3: #111111;

  --lime: #C4FF00;
  --lime-bright: #7CFF00;

  --cyan: #00E5FF;
  --magenta: #FF00C8;

  --white: #ffffff;
  --gray: #a0a0a0;
  --muted: #666666;

  --border: rgba(255,255,255,.08);
  --lime-border: rgba(196,255,0,.16);

  --gradient:
    linear-gradient(
      135deg,
      #C4FF00 0%,
      #7CFF00 100%
    );

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

  --radius: 22px;

}


* {
  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% -10%,
      rgba(196,255,0,.055),
      transparent 32%
    ),
    var(--void);

  color: var(--white);

  min-height: 100vh;

  overflow-x: hidden;

}


body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );

  z-index: -1;

}


/* =========================================
   HEADER
========================================= */

.site-header {

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

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

  backdrop-filter:
    blur(18px);

  position: sticky;

  top: 0;

  z-index: 50;

}


.nav-container {

  max-width: 1100px;

  margin: auto;

  padding:
    16px 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.back-link {

  color: #aaa;

  text-decoration: none;

  display: inline-flex;

  gap: 8px;

  align-items: center;

  font-size: 13px;

  font-weight: 500;

  transition:
    color .25s ease,
    transform .25s ease;

}


.back-link:hover {

  color: var(--lime);

  transform:
    translateX(-3px);

}


.nav-status {

  font-size: 9px;

  letter-spacing: .16em;

  color: #555;

  display: flex;

  align-items: center;

  gap: 7px;

}


.status-dot {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--lime);

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

}


/* =========================================
   MAIN
========================================= */

.main-container {

  width: 100%;

  max-width: 820px;

  margin: auto;

  padding:
    52px 20px 30px;

}


/* =========================================
   BRAND HERO
========================================= */

.brand-hero {

  text-align: center;

  margin-bottom: 48px;

}


.logo-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 16px;

}


.nexa-logo {

  width: 92px;

  height: 92px;

  object-fit: contain;

  display: block;

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

  transition:
    transform .4s ease,
    filter .4s ease;

}


.nexa-logo:hover {

  transform:
    scale(1.06);

  filter:
    drop-shadow(
      0 0 22px
      rgba(0,229,255,.28)
    )
    drop-shadow(
      0 0 36px
      rgba(255,0,200,.18)
    );

}


.brand-name {

  font-size: 18px;

  font-weight: 700;

  letter-spacing: .22em;

}


.brand-tagline {

  margin-top: 7px;

  color: #666;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .22em;

}


.tool-badge {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-top: 18px;

  padding:
    7px 12px;

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

  border-radius: 100px;

  color: #686868;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .16em;

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

}


.tool-badge span {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background:
    var(--lime);

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

}


/* =========================================
   PRODUCT INTRO
========================================= */

.product-intro {

  text-align: center;

  margin-bottom: 34px;

}


.eyebrow {

  display: inline-block;

  color: var(--lime);

  font-size: 9px;

  letter-spacing: .22em;

  font-weight: 700;

  margin-bottom: 13px;

}


.product-intro h1 {

  font-size:
    clamp(34px, 6vw, 54px);

  line-height: 1.02;

  letter-spacing: -.045em;

  font-weight: 700;

}


.product-intro h1 span {

  background:
    var(--brand-gradient);

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

}


.product-intro p {

  max-width: 540px;

  margin:
    18px auto 0;

  color: #777;

  font-size: 14px;

  line-height: 1.7;

}


/* =========================================
   CALCULATOR SHELL
========================================= */

.calculator-shell {

  position: relative;

  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:
    26px;

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

  backdrop-filter:
    blur(20px);

}


/* =========================================
   CALCULATOR HEADER
========================================= */

.calculator-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 22px;

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

}


.mini-label {

  color: var(--lime);

  font-size: 8px;

  letter-spacing: .18em;

  font-weight: 700;

}


.calculator-head h2 {

  margin-top: 5px;

  font-size: 23px;

}


.live-indicator {

  display: flex;

  align-items: center;

  gap: 7px;

  color: #555;

  font-size: 8px;

  letter-spacing: .15em;

  font-weight: 700;

}


.live-indicator span {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--lime);

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

}


/* =========================================
   INPUT SECTION
========================================= */

.input-section {

  padding:
    28px 0 4px;

}


.section-label {

  display: flex;

  align-items: center;

  gap: 9px;

  color: #555;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .16em;

  margin-bottom: 18px;

}


.section-label span {

  color: var(--lime);

}


.form-grid {

  display: grid;

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

  gap: 16px;

}


.form-group label {

  display: block;

  margin-bottom: 8px;

  color: #858585;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

}


.input-wrap {

  position: relative;

}


.input-wrap.focused {

  transform:
    translateY(-1px);

}


.currency {

  position: absolute;

  left: 15px;

  top: 50%;

  transform:
    translateY(-50%);

  color: var(--lime);

  font-weight: 700;

  pointer-events: none;

}


input {

  width: 100%;

  height: 54px;

  padding:
    0 15px 0 34px;

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

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

  border-radius:
    14px;

  color: #fff;

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

  font-size: 15px;

  font-weight: 600;

  outline: none;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


.no-currency input {

  padding-left: 15px;

}


input::placeholder {

  color: #3f3f3f;

}


input:focus {

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

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

  box-shadow:
    0 0 0 4px
    rgba(196,255,0,.045);

}


input.input-error {

  border-color:
    #ff4b4b;

  box-shadow:
    0 0 0 4px
    rgba(255,75,75,.06);

}


/* =========================================
   CALCULATE BUTTON
========================================= */

.calculate-btn {

  width: 100%;

  min-height: 58px;

  margin-top: 20px;

  padding:
    0 20px;

  border: none;

  border-radius: 15px;

  background:
    var(--gradient);

  color: #000;

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

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.calculate-btn:hover {

  transform:
    translateY(-2px);

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

}


.calculate-btn:active {

  transform:
    translateY(0);

}


.calculate-btn.success {

  background:
    linear-gradient(
      90deg,
      #b7ff00,
      #7CFF00
    );

}


.btn-arrow {

  font-size: 20px;

}


/* =========================================
   PAYWALL
========================================= */

.paywall {

  display: none;

  margin-top: 22px;

  padding: 24px;

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

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(196,255,0,.07),
      transparent 38%
    ),
    #080808;

  opacity: 0;

  transform:
    translateY(12px);

}


.paywall.visible {

  display: flex;

  animation:
    paywallIn .45s ease forwards;

}


@keyframes paywallIn {

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.paywall-icon {

  width: 44px;

  height: 44px;

  flex-shrink: 0;

  border-radius: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

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

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

  color: var(--lime);

  margin-right: 18px;

}


.paywall-label {

  color: var(--lime);

  font-size: 8px;

  letter-spacing: .2em;

  font-weight: 700;

  margin-bottom: 7px;

}


.paywall h3 {

  font-size: 20px;

  margin-bottom: 8px;

}


.paywall p {

  color: #777;

  font-size: 12px;

  line-height: 1.65;

  max-width: 560px;

}


.price-row {

  display: flex;

  align-items: baseline;

  gap: 9px;

  margin:
    15px 0;

}


.price-row strong {

  font-size: 25px;

  color: var(--lime);

}


.price-row span {

  color: #555;

  font-size: 10px;

}


.unlock-btn {

  width: 100%;

  min-height: 50px;

  padding:
    0 16px;

  border: none;

  border-radius: 12px;

  background:
    var(--gradient);

  color: #000;

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

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.unlock-btn:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 30px
    rgba(196,255,0,.16);

}


.unlock-btn:disabled {

  opacity: .55;

  cursor:
    wait;

  transform: none;

}


.secure-note {

  margin-top: 11px;

  color: #444;

  font-size: 9px;

  text-align: center;

}


.secure-note span {

  color: var(--lime);

}


/* =========================================
   RESULT
========================================= */

.result-card {

  display: none;

  margin-top: 28px;

  padding: 27px;

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

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #0c0c0c,
      #050505
    );

}


.result-card.visible {

  display: block;

  animation:
    resultIn .55s ease both;

}


@keyframes resultIn {

  from {

    opacity: 0;

    transform:
      translateY(18px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.result-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding-bottom: 22px;

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

}


.result-header h2 {

  font-size: 21px;

  margin-top: -7px;

}


.result-mark {

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .16em;

  color: #444;

}


/* =========================================
   PROFIT HERO
========================================= */

.profit-hero {

  text-align: center;

  padding:
    30px 15px;

  margin:
    22px 0;

  border-radius: 18px;

  background:
    radial-gradient(
      circle at center,
      rgba(196,255,0,.07),
      transparent 62%
    );

}


.profit-label {

  color: #555;

  font-size: 8px;

  letter-spacing: .2em;

  font-weight: 700;

}


.profit-value {

  margin-top: 7px;

  font-size:
    clamp(42px, 9vw, 65px);

  line-height: 1;

  letter-spacing: -.055em;

  font-weight: 700;

  background:
    var(--gradient);

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

}


.profit-caption {

  margin-top: 9px;

  color: #555;

  font-size: 10px;

}


/* =========================================
   STATS
========================================= */

.stats-grid {

  display: grid;

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

  gap: 10px;

}


.stat-card {

  padding: 18px;

  min-height: 92px;

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

  border-radius: 15px;

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

}


.stat-label {

  display: block;

  color: #555;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .12em;

  margin-bottom: 9px;

}


.stat-card strong {

  font-size: 17px;

  font-weight: 600;

}


.highlight-stat {

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

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

}


.highlight-stat strong {

  color: var(--lime);

}


/* =========================================
   INSIGHT
========================================= */

.insight-box {

  display: flex;

  gap: 13px;

  align-items: flex-start;

  margin-top: 16px;

  padding: 17px;

  border-radius: 15px;

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

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

}


.insight-icon {

  width: 28px;

  height: 28px;

  flex-shrink: 0;

  border-radius: 9px;

  display: flex;

  align-items: center;

  justify-content: center;

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

  color: var(--lime);

  font-weight: 700;

}


.insight-box strong {

  font-size: 12px;

}


.insight-box p {

  color: #777;

  font-size: 10px;

  line-height: 1.6;

  margin-top: 4px;

}


.insight-box.warning {

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

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

}


.insight-box.warning .insight-icon {

  color: #ffc400;

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

}


.insight-box.negative {

  border-color:
    rgba(255,65,65,.2);

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

}


.insight-box.negative .insight-icon {

  color: #ff5757;

  background:
    rgba(255,65,65,.08);

}


.insight-box.positive .insight-icon {

  color: var(--lime);

}


/* =========================================
   ACTIONS
========================================= */

.actions {

  display: grid;

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

  gap: 9px;

  margin-top: 18px;

}


.action-btn {

  min-height: 46px;

  padding:
    0 13px;

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

  border-radius: 11px;

  background:
    transparent;

  color: #aaa;

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

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition:
    border-color .25s ease,
    color .25s ease,
    background .25s ease;

}


.action-btn:hover {

  color: var(--lime);

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

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

}


.whatsapp-btn:hover {

  color: #7CFF00;

}


/* =========================================
   RESULT FOOTER
========================================= */

.result-footer {

  display: flex;

  justify-content: space-between;

  margin-top: 20px;

  padding-top: 14px;

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

  color: #3f3f3f;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .15em;

}


/* =========================================
   NEXT TOOL
========================================= */

.next-tool {

  margin-top: 28px;

  padding: 22px;

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

  border-radius: 18px;

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

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}


.next-label {

  color: var(--lime);

  font-size: 7px;

  letter-spacing: .18em;

  font-weight: 700;

}


.next-tool h3 {

  font-size: 16px;

  margin-top: 6px;

}


.next-tool p {

  color: #555;

  font-size: 10px;

  margin-top: 4px;

}


.explore-btn {

  flex-shrink: 0;

  text-decoration: none;

  color: #000;

  background:
    var(--gradient);

  padding:
    12px 15px;

  border-radius: 10px;

  font-size: 10px;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 12px;

  transition:
    transform .25s ease;

}


.explore-btn:hover {

  transform:
    translateX(3px);

}


/* =========================================
   FOOTER
========================================= */

.site-footer {

  max-width: 820px;

  margin:
    0 auto;

  padding:
    35px 20px 45px;

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

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}


.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;

}


.footer-brand span {

  display: block;

  margin-top: 3px;

  color: #444;

  font-size: 6px;

  letter-spacing: .12em;

}


.site-footer p {

  color: #3f3f3f;

  font-size: 8px;

}


/* =========================================
   TOAST
========================================= */

.toast {

  position: fixed;

  left: 50%;

  bottom: 25px;

  transform:
    translate(-50%, 20px);

  padding:
    12px 17px;

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

  border-radius: 100px;

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

  color: var(--lime);

  font-size: 10px;

  font-weight: 700;

  opacity: 0;

  pointer-events: none;

  z-index: 100;

  backdrop-filter:
    blur(15px);

  transition:
    opacity .3s ease,
    transform .3s ease;

}


.toast.show {

  opacity: 1;

  transform:
    translate(-50%, 0);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 680px) {

  .main-container {

    padding:
      38px 14px 25px;

  }


  .nav-container {

    padding:
      14px;

  }


  .nav-status {

    display: none;

  }


  .brand-hero {

    margin-bottom: 38px;

  }


  .nexa-logo {

    width: 78px;

    height: 78px;

  }


  .brand-name {

    font-size: 15px;

  }


  .calculator-shell {

    padding: 18px;

    border-radius: 22px;

  }


  .calculator-head h2 {

    font-size: 19px;

  }


  .form-grid {

    grid-template-columns:
      1fr;

  }


  .paywall.visible {

    display: block;

  }


  .paywall-icon {

    margin:
      0 0 15px;

  }


  .stats-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .actions {

    grid-template-columns:
      1fr;

  }


  .next-tool {

    flex-direction: column;

    align-items: flex-start;

  }


  .explore-btn {

    width: 100%;

    justify-content: space-between;

  }


  .site-footer {

    flex-direction: column;

    align-items: flex-start;

  }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 390px) {

  .calculator-shell {

    padding: 15px;

  }


  .stats-grid {

    grid-template-columns:
      1fr;

  }


  .product-intro h1 {

    font-size: 35px;

  }


  .profit-value {

    font-size: 42px;

  }

}