:root {
  --green: #0b8f6a;
  --green-dark: #087256;
  --green-soft: #eaf8f3;
  --mint-bg: #f4fbf8;

  --ink: #101828;
  --muted: #667085;
  --line: #e4e7ec;

  --white: #ffffff;

  --shadow:
    0 24px 70px rgba(16, 24, 40, 0.10);
}


* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--ink);
  background: white;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}


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


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

.site-header {
  height: 76px;

  padding:
    0 42px;

  display: flex;
  align-items: center;

  gap: 42px;

  border-bottom:
    1px solid #eef1f3;

  background:
    rgba(255, 255, 255, 0.96);

  position: sticky;

  top: 0;

  z-index: 30;
}


.brand {
  display: flex;
  align-items: center;

  gap: 10px;

  flex-shrink: 0;
}


.brand-icon,
.drawer-brand-icon {
  width: 38px;
  height: 38px;

  border-radius: 11px;

  display: grid;
  place-items: center;

  color: white;

  background:
    linear-gradient(
      145deg,
      #0aa477,
      #08765a
    );

  font-weight: 800;
}


.brand-text {
  font-size: 23px;
  font-weight: 600;
}


.brand-text strong {
  color: var(--green);
}


.main-nav {
  display: flex;
  align-items: center;

  gap: 30px;

  flex: 1;

  font-size: 14px;
}


.main-nav a {
  transition:
    color 0.15s ease;
}


.main-nav a:hover {
  color: var(--green);
}


.header-actions {
  display: flex;
  align-items: center;

  gap: 12px;
}


.header-link {
  padding:
    11px 15px;

  border: 0;

  background:
    transparent;

  color: var(--ink);

  font-weight: 600;
}


.header-primary,
.hero-primary,
.drawer-primary-btn {
  border: 0;

  background:
    var(--green);

  color: white;

  font-weight: 700;

  border-radius: 10px;
}


.header-primary {
  padding:
    13px 20px;
}


.header-primary:hover,
.hero-primary:hover,
.drawer-primary-btn:hover {
  background:
    var(--green-dark);
}


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

.hero {
  min-height:
    650px;

  padding:
    72px 5vw;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(500px, 1.05fr);

  align-items: center;

  gap: 50px;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(117, 224, 190, 0.16),
      transparent 30%
    ),
    linear-gradient(
      110deg,
      #fff 0%,
      #fbfffd 55%,
      #effaf6 100%
    );
}


.trust-badge {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding:
    8px 12px;

  border-radius:
    999px;

  background:
    #effaf6;

  color:
    var(--green-dark);

  font-size:
    13px;

  font-weight:
    600;

  margin-bottom:
    26px;
}


.hero-copy h1 {
  margin:
    0 0 26px;

  font-size:
    clamp(
      46px,
      5vw,
      72px
    );

  line-height:
    1.06;

  letter-spacing:
    -3px;
}


.accent-text {
  color:
    var(--green);
}


.hero-description {
  max-width:
    650px;

  margin:
    0 0 30px;

  color:
    var(--muted);

  font-size:
    18px;

  line-height:
    1.7;
}


.hero-actions {
  display:
    flex;

  gap:
    14px;

  margin-bottom:
    36px;
}


.hero-primary {
  min-height:
    54px;

  padding:
    0 26px;

  font-size:
    15px;
}


.hero-secondary {
  min-height:
    54px;

  padding:
    0 22px;

  display:
    inline-flex;

  align-items:
    center;

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

  border-radius:
    10px;

  background:
    white;

  font-weight:
    600;
}


.hero-trust-row {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    24px;

  color:
    #475467;

  font-size:
    13px;
}


.mini-icon {
  color:
    var(--green);

  font-weight:
    800;
}


/* ==================================================
   DASHBOARD PREVIEW
================================================== */

.product-preview {
  min-width: 0;
}


.dashboard-window {
  min-height:
    490px;

  display:
    grid;

  grid-template-columns:
    150px 1fr;

  overflow:
    hidden;

  border:
    1px solid #e6ece9;

  border-radius:
    24px;

  background:
    white;

  box-shadow:
    0 30px 80px rgba(22, 69, 55, 0.15);

  transform:
    perspective(1200px)
    rotateY(-2deg);
}


.dashboard-sidebar {
  padding:
    22px 14px;

  background:
    #f8fbfa;

  border-right:
    1px solid #edf1ef;
}


.mini-brand {
  margin-bottom:
    30px;

  font-size:
    14px;

  font-weight:
    800;
}


.mini-brand span {
  margin-right:
    5px;

  padding:
    5px 7px;

  border-radius:
    6px;

  background:
    var(--green);

  color:
    white;
}


.side-item {
  margin:
    3px 0;

  padding:
    10px;

  border-radius:
    8px;

  color:
    #667085;

  font-size:
    12px;
}


.side-item.active {
  background:
    var(--green-soft);

  color:
    var(--green-dark);

  font-weight:
    700;
}


.dashboard-content {
  padding:
    28px;
}


.dashboard-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.dashboard-heading small {
  color:
    #98a2b3;
}


.dashboard-heading h3 {
  margin:
    4px 0 22px;

  font-size:
    20px;
}


.dashboard-avatar {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-weight:
    700;
}


.preview-card {
  padding:
    17px;

  border:
    1px solid #edf0ef;

  border-radius:
    14px;

  background:
    white;
}


.preview-card-title {
  margin-bottom:
    15px;

  display:
    flex;

  justify-content:
    space-between;

  font-size:
    12px;

  font-weight:
    700;
}


.preview-card-title span {
  color:
    var(--green);

  font-weight:
    500;
}


.avatar-row {
  display:
    flex;

  gap:
    18px;
}


.avatar-row > div {
  display:
    grid;

  justify-items:
    center;

  gap:
    5px;
}


.member-avatar {
  width:
    42px;

  height:
    42px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-weight:
    700;
}


.preview-grid {
  margin-top:
    14px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;
}


.stat-big {
  font-size:
    28px;

  font-weight:
    800;
}


.preview-card small {
  color:
    #98a2b3;
}


.finance-preview {
  margin-top:
    14px;
}


.finance-row {
  display:
    grid;

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

  gap:
    10px;
}


.finance-row div {
  padding:
    10px;

  display:
    grid;

  gap:
    5px;

  border-radius:
    10px;

  background:
    #f8fbfa;
}


.finance-row strong {
  color:
    var(--green-dark);
}


/* ==================================================
   CONTENT SECTIONS
================================================== */

.feature-section,
.simple-section,
.security-section {
  padding:
    90px 5vw;
}


.section-heading {
  max-width:
    720px;

  margin:
    0 auto 44px;

  text-align:
    center;
}


.section-heading span,
.section-kicker {
  color:
    var(--green);

  font-size:
    13px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    1px;
}


.section-heading h2,
.security-section h2 {
  margin:
    12px 0 15px;

  font-size:
    38px;

  letter-spacing:
    -1.5px;
}


.section-heading p,
.security-section p {
  color:
    var(--muted);

  line-height:
    1.7;
}


.feature-grid {
  display:
    grid;

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

  gap:
    20px;
}


.feature-card {
  padding:
    25px;

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

  border-radius:
    16px;
}


.feature-card-icon {
  width:
    42px;

  height:
    42px;

  border-radius:
    12px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-weight:
    800;
}


.feature-card h3 {
  margin:
    18px 0 10px;
}


.feature-card p {
  min-height:
    78px;

  color:
    var(--muted);

  line-height:
    1.6;
}


.simple-section {
  background:
    #f8fbfa;
}


.steps {
  max-width:
    1100px;

  margin:
    auto;

  display:
    grid;

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

  gap:
    24px;
}


.step-card {
  padding:
    28px;

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

  border-radius:
    16px;

  background:
    white;
}


.step-number {
  color:
    var(--green);

  font-size:
    13px;

  font-weight:
    800;
}


.step-card p {
  color:
    var(--muted);

  line-height:
    1.6;
}


.security-section {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    60px;

  background:
    #0d2d25;

  color:
    white;
}


.security-section p {
  color:
    #bdd1ca;
}


.security-panel {
  display:
    grid;

  gap:
    13px;
}


.security-panel div {
  padding:
    20px;

  display:
    grid;

  gap:
    6px;

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

  border-radius:
    14px;
}


.security-panel span {
  color:
    #bdd1ca;

  font-size:
    14px;
}


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

.site-footer {
  padding:
    28px 5vw;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

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

  color:
    var(--muted);

  font-size:
    13px;
}


.site-footer > div:first-child {
  display:
    grid;

  gap:
    5px;
}


.footer-links {
  display:
    flex;

  gap:
    20px;
}


/* ==================================================
   AUTH DRAWER
================================================== */

.drawer-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    50;

  background:
    rgba(15, 23, 42, 0.28);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity 0.25s ease;
}


.drawer-overlay.open {
  opacity:
    1;

  pointer-events:
    auto;
}


.auth-drawer {
  position:
    fixed;

  top:
    0;

  right:
    0;

  width:
    min(470px, 100vw);

  height:
    100vh;

  z-index:
    60;

  overflow-y:
    auto;

  background:
    white;

  box-shadow:
    -20px 0 60px rgba(16, 24, 40, 0.16);

  transform:
    translateX(102%);

  transition:
    transform 0.28s ease;
}


.auth-drawer.open {
  transform:
    translateX(0);
}


.drawer-close {
  position:
    absolute;

  top:
    20px;

  right:
    22px;

  width:
    42px;

  height:
    42px;

  border:
    0;

  background:
    transparent;

  color:
    #475467;

  font-size:
    30px;
}


.drawer-content {
  padding:
    66px 48px 40px;
}


.drawer-brand {
  margin-bottom:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  font-size:
    20px;

  font-weight:
    600;
}


.drawer-brand strong {
  color:
    var(--green);
}


.drawer-content h2 {
  margin:
    0 0 8px;

  font-size:
    31px;

  letter-spacing:
    -1px;
}


.drawer-subtitle {
  margin:
    0 0 30px;

  color:
    var(--muted);

  line-height:
    1.55;
}


.provider-stack {
  display:
    grid;

  gap:
    12px;
}


.provider-stack[hidden],
.drawer-divider[hidden] {
  display:
    none;
}


.provider-btn {
  width:
    100%;

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  border:
    1px solid #d6dce0;

  border-radius:
    11px;

  background:
    white;

  color:
    #101828;

  font-weight:
    600;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}


.provider-btn:hover {
  border-color:
    #aeb7bd;

  background:
    #fdfefe;

  box-shadow:
    0 5px 15px rgba(16, 24, 40, 0.06);
}


.provider-icon {
  width:
    24px;

  text-align:
    center;

  font-size:
    19px;
}


.google-provider-icon {
  color:
    #4285f4;

  font-weight:
    800;
}


.apple-provider-icon {
  font-size:
    22px;
}


.drawer-divider {
  margin:
    24px 0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  color:
    #98a2b3;

  font-size:
    12px;
}


.drawer-divider span {
  height:
    1px;

  flex:
    1;

  background:
    var(--line);
}


.drawer-form {
  margin-top:
    8px;
}


.drawer-form[hidden],
.otp-section[hidden],
#confirmPasswordGroup[hidden] {
  display:
    none;
}


.drawer-form h3 {
  margin:
    15px 0 7px;

  font-size:
    22px;
}


.drawer-form > p {
  margin:
    0 0 18px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.55;
}


.drawer-form label {
  margin:
    19px 0 8px;

  display:
    block;

  font-size:
    13px;

  font-weight:
    700;
}


.drawer-form input {
  width:
    100%;

  height:
    52px;

  padding:
    0 14px;

  border:
    1px solid #d5dade;

  border-radius:
    10px;

  outline:
    none;
}


.drawer-form input:focus {
  border-color:
    var(--green);

  box-shadow:
    0 0 0 3px rgba(11, 143, 106, 0.10);
}


.password-field {
  position:
    relative;
}


.password-field input {
  padding-right:
    70px;
}


.password-field button {
  position:
    absolute;

  right:
    10px;

  top:
    50%;

  transform:
    translateY(-50%);

  border:
    0;

  background:
    transparent;

  color:
    var(--green-dark);

  font-size:
    12px;

  font-weight:
    700;
}


.drawer-primary-btn {
  width:
    100%;

  min-height:
    52px;

  margin-top:
    20px;
}


.back-link,
.text-action {
  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--green-dark);

  font-weight:
    600;
}


.text-action {
  margin-top:
    16px;
}


.secondary-text-action {
  margin-left:
    16px;
}


.field-error {
  min-height:
    16px;

  margin:
    5px 0 0 !important;

  color:
    #c62828 !important;

  font-size:
    12px !important;
}


#recaptcha-container {
  margin-top:
    18px;

  display:
    flex;

  justify-content:
    center;
}


.otp-section {
  margin-top:
    20px;
}


.drawer-new-account {
  margin:
    28px 0;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    14px;
}


.drawer-new-account button {
  margin-left:
    4px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--green);

  font-weight:
    700;
}


.drawer-security-note {
  padding:
    20px;

  border-radius:
    12px;

  background:
    #f3faf7;

  color:
    #475467;

  font-size:
    12px;

  line-height:
    1.6;
}


.drawer-security-note strong {
  color:
    #1d2939;

  font-size:
    13px;
}


.drawer-security-note p {
  margin:
    8px 0 0;
}


.drawer-security-note a {
  color:
    var(--green-dark);

  text-decoration:
    underline;
}


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

.toast {
  position:
    fixed;

  left:
    50%;

  bottom:
    30px;

  z-index:
    100;

  padding:
    12px 18px;

  border-radius:
    10px;

  background:
    #13251f;

  color:
    white;

  font-size:
    13px;

  opacity:
    0;

  pointer-events:
    none;

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

  transition:
    0.2s ease;
}


.toast.show {
  opacity:
    1;

  transform:
    translate(-50%, 0);
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1050px) {

  .main-nav {
    display:
      none;
  }


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


  .product-preview {
    max-width:
      760px;
  }


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

}


@media (max-width: 700px) {

  .site-header {
    padding:
      0 18px;

    gap:
      12px;
  }


  .brand-text {
    font-size:
      19px;
  }


  .header-link {
    display:
      none;
  }


  .header-primary {
    padding:
      11px 14px;
  }


  .hero {
    padding:
      50px 20px;

    grid-template-columns:
      1fr;
  }


  .hero-copy h1 {
    font-size:
      44px;

    letter-spacing:
      -2px;
  }


  .hero-description {
    font-size:
      16px;
  }


  .hero-trust-row {
    display:
      grid;
  }


  .dashboard-window {
    grid-template-columns:
      1fr;

    transform:
      none;
  }


  .dashboard-sidebar {
    display:
      none;
  }


  .feature-section,
  .simple-section,
  .security-section {
    padding:
      65px 20px;
  }


  .feature-grid,
  .steps,
  .security-section {
    grid-template-columns:
      1fr;
  }


  .site-footer {
    display:
      grid;

    gap:
      18px;
  }


  .drawer-content {
    padding:
      66px 25px 30px;
  }


  .secondary-text-action {
    margin-left:
      0;

    display:
      block;
  }

}