/* =========================================================
   CHAMA LIVE — LANDING PAGE
   ORIGINAL LANDING PAGE DESIGN
   File: css/landing.css

   Designed to work independently from app.css.
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --landing-primary: #0f766e;
  --landing-primary-dark: #115e59;
  --landing-primary-light: #ccfbf1;

  --landing-accent: #14b8a6;

  --landing-dark: #0f172a;
  --landing-dark-soft: #1e293b;

  --landing-text: #334155;
  --landing-muted: #64748b;

  --landing-border: #e2e8f0;

  --landing-background: #ffffff;
  --landing-background-soft: #f8fafc;

  --landing-success: #16a34a;
  --landing-danger: #dc2626;

  --landing-radius-sm: 10px;
  --landing-radius-md: 16px;
  --landing-radius-lg: 24px;
  --landing-radius-xl: 32px;

  --landing-shadow-sm:
    0 4px 16px rgba(15, 23, 42, 0.06);

  --landing-shadow-md:
    0 15px 40px rgba(15, 23, 42, 0.09);

  --landing-shadow-lg:
    0 30px 80px rgba(15, 23, 42, 0.14);

  --landing-container: 1180px;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--landing-text);

  background:
    var(--landing-background);

  line-height: 1.6;

}


img {
  max-width: 100%;
}


button,
input,
select,
textarea {
  font: inherit;
}


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


/* =========================================================
   CONTAINER
========================================================= */

.container {

  width:
    min(
      calc(100% - 40px),
      var(--landing-container)
    );

  margin-inline: auto;

}


/* =========================================================
   BUTTONS
========================================================= */

.button {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 1px solid transparent;

  border-radius:
    var(--landing-radius-sm);

  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;

}


.button:hover {

  transform:
    translateY(-2px);

}


.button-primary {

  color: #ffffff;

  background:
    var(--landing-primary);

  box-shadow:
    0 8px 20px rgba(15, 118, 110, 0.18);

}


.button-primary:hover {

  background:
    var(--landing-primary-dark);

  box-shadow:
    0 12px 28px rgba(15, 118, 110, 0.24);

}


.button-secondary {

  color:
    var(--landing-dark);

  background:
    #ffffff;

  border-color:
    var(--landing-border);

}


.button-secondary:hover {

  border-color:
    #cbd5e1;

  box-shadow:
    var(--landing-shadow-sm);

}


.button-light {

  color:
    var(--landing-primary-dark);

  background:
    #ffffff;

}


.button-small {

  padding:
    10px 18px;

  font-size:
    14px;

}


.button-large {

  padding:
    15px 24px;

  font-size:
    15px;

}


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

.landing-header {

  position:
    sticky;

  top: 0;

  z-index: 1000;

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

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid rgba(226, 232, 240, 0.75);

}


.nav-container {

  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.landing-logo {

  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    4px;

  font-size:
    21px;

  font-weight:
    900;

  letter-spacing:
    -0.8px;

}


.logo-main {

  color:
    var(--landing-dark);

}


.logo-live {

  color:
    var(--landing-primary);

}


.landing-navigation {

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

}


.landing-navigation > a:not(.button) {

  color:
    #475569;

  font-size:
    14px;

  font-weight:
    600;

  transition:
    color 0.2s ease;

}


.landing-navigation > a:not(.button):hover {

  color:
    var(--landing-primary);

}


.nav-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  margin-left:
    8px;

}


.nav-login {

  font-size:
    14px;

  font-weight:
    700;

  color:
    var(--landing-dark);

}


.mobile-menu-button {

  display:
    none;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    10px;

  background:
    #ffffff;

  cursor:
    pointer;

}


.mobile-menu-button span {

  display:
    block;

  width:
    19px;

  height:
    2px;

  margin:
    4px auto;

  background:
    var(--landing-dark);

}


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

.hero-section {

  position:
    relative;

  overflow:
    hidden;

  padding:
    90px 0 85px;

  background:
    linear-gradient(
      180deg,
      #f8fffe 0%,
      #ffffff 100%
    );

}


.hero-background-shape {

  position:
    absolute;

  border-radius:
    50%;

  pointer-events:
    none;

  filter:
    blur(1px);

}


.hero-shape-one {

  width:
    460px;

  height:
    460px;

  right:
    -220px;

  top:
    -200px;

  background:
    rgba(20, 184, 166, 0.09);

}


.hero-shape-two {

  width:
    260px;

  height:
    260px;

  left:
    -140px;

  bottom:
    -140px;

  background:
    rgba(15, 118, 110, 0.06);

}


.hero-grid {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

  align-items:
    center;

  gap:
    70px;

}


.hero-content {

  max-width:
    570px;

}


.hero-badge {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    7px 12px;

  margin-bottom:
    22px;

  color:
    var(--landing-primary-dark);

  background:
    var(--landing-primary-light);

  border:
    1px solid #a7f3d0;

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.2px;

}


.badge-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--landing-primary);

}


.hero-content h1 {

  margin:
    0;

  color:
    var(--landing-dark);

  font-size:
    clamp(44px, 5.2vw, 72px);

  line-height:
    1.02;

  letter-spacing:
    -3.5px;

  font-weight:
    900;

}


.hero-content h1 span {

  display:
    block;

  color:
    var(--landing-primary);

}


.hero-description {

  max-width:
    540px;

  margin:
    26px 0 30px;

  color:
    var(--landing-muted);

  font-size:
    18px;

  line-height:
    1.75;

}


.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

}


.hero-trust {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  margin-top:
    40px;

}


.trust-item {

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

}


.trust-item strong {

  color:
    var(--landing-dark);

  font-size:
    13px;

}


.trust-item span {

  color:
    var(--landing-muted);

  font-size:
    11px;

}


.trust-divider {

  width:
    1px;

  height:
    28px;

  background:
    var(--landing-border);

}


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

.hero-dashboard {

  position:
    relative;

}


.dashboard-window {

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    1px solid #dce5e9;

  border-radius:
    22px;

  box-shadow:
    var(--landing-shadow-lg);

  transform:
    perspective(1400px)
    rotateY(-3deg)
    rotateX(1deg);

  transition:
    transform 0.4s ease;

}


.dashboard-window:hover {

  transform:
    perspective(1400px)
    rotateY(0deg)
    rotateX(0deg)
    translateY(-4px);

}


.dashboard-topbar {

  height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 18px;

  background:
    #f8fafc;

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

}


.dashboard-brand {

  font-size:
    12px;

  font-weight:
    900;

  color:
    var(--landing-dark);

}


.dashboard-brand span {

  color:
    var(--landing-primary);

}


.dashboard-user {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.user-avatar {

  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    var(--landing-primary);

  font-size:
    9px;

  font-weight:
    800;

}


.user-name {

  color:
    var(--landing-muted);

  font-size:
    10px;

}


.dashboard-body {

  padding:
    22px;

}


.dashboard-welcome {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    18px;

}


.dashboard-eyebrow {

  display:
    block;

  color:
    var(--landing-primary);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1px;

}


.dashboard-welcome h3 {

  margin:
    3px 0 0;

  color:
    var(--landing-dark);

  font-size:
    20px;

  line-height:
    1.2;

}


.dashboard-month {

  padding:
    6px 9px;

  color:
    var(--landing-muted);

  background:
    #f8fafc;

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

  border-radius:
    7px;

  font-size:
    9px;

}


.dashboard-stat-grid {

  display:
    grid;

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

  gap:
    10px;

}


.dashboard-stat-card {

  padding:
    13px;

  background:
    #ffffff;

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

  border-radius:
    12px;

}


.stat-icon {

  display:
    grid;

  place-items:
    center;

  width:
    27px;

  height:
    27px;

  margin-bottom:
    10px;

  border-radius:
    8px;

  background:
    var(--landing-background-soft);

  font-size:
    13px;

}


.stat-label {

  display:
    block;

  color:
    var(--landing-muted);

  font-size:
    8px;

}


.dashboard-stat-card strong {

  display:
    block;

  margin-top:
    2px;

  color:
    var(--landing-dark);

  font-size:
    14px;

  line-height:
    1.35;

}


.dashboard-stat-card small {

  display:
    block;

  margin-top:
    2px;

  color:
    #94a3b8;

  font-size:
    8px;

}


.dashboard-lower {

  display:
    grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap:
    10px;

  margin-top:
    10px;

}


.mini-chart-card,
.activity-card {

  padding:
    14px;

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

  border-radius:
    12px;

}


.mini-card-heading {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

}


.mini-card-heading > span {

  color:
    var(--landing-dark);

  font-size:
    9px;

  font-weight:
    800;

}


.mini-card-heading > div {

  display:
    flex;

  flex-direction:
    column;

}


.mini-card-heading > div span {

  color:
    var(--landing-dark);

  font-size:
    9px;

  font-weight:
    800;

}


.mini-card-heading > div strong {

  color:
    var(--landing-muted);

  font-size:
    7px;

  font-weight:
    500;

}


.mini-card-heading a {

  color:
    var(--landing-primary);

  font-size:
    7px;

  font-weight:
    800;

}


.chart-total {

  color:
    var(--landing-primary);

  font-size:
    10px;

  font-weight:
    900;

}


.chart {

  height:
    92px;

  margin-top:
    15px;

  display:
    flex;

  align-items:
    flex-end;

  padding:
    0 4px;

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

}


.chart-line {

  width:
    100%;

  height:
    80%;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-around;

  gap:
    7px;

}


.chart-line span {

  width:
    100%;

  max-width:
    20px;

  min-height:
    12px;

  border-radius:
    5px 5px 0 0;

  background:
    var(--landing-primary);

  opacity:
    0.75;

}


.activity-card {

  overflow:
    hidden;

}


.activity-item {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px 0;

  border-bottom:
    1px solid #f1f5f9;

}


.activity-item:last-child {

  border-bottom:
    0;

}


.activity-avatar {

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    24px;

  height:
    24px;

  border-radius:
    50%;

  color:
    var(--landing-primary-dark);

  background:
    var(--landing-primary-light);

  font-size:
    7px;

  font-weight:
    900;

}


.activity-item strong,
.activity-item small {

  display:
    block;

}


.activity-item strong {

  color:
    var(--landing-dark);

  font-size:
    8px;

}


.activity-item small {

  color:
    var(--landing-muted);

  font-size:
    7px;

}


/* =========================================================
   VALUE STRIP
========================================================= */

.value-strip {

  background:
    var(--landing-dark);

}


.value-grid {

  display:
    grid;

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

}


.value-item {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-height:
    82px;

  padding:
    15px 20px;

  border-right:
    1px solid rgba(255,255,255,0.08);

}


.value-item:first-child {

  border-left:
    1px solid rgba(255,255,255,0.08);

}


.value-item > span {

  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  border-radius:
    50%;

  color:
    #99f6e4;

  background:
    rgba(20, 184, 166, 0.12);

  font-size:
    12px;

}


.value-item strong,
.value-item small {

  display:
    block;

}


.value-item strong {

  color:
    #ffffff;

  font-size:
    11px;

}


.value-item small {

  color:
    #94a3b8;

  font-size:
    9px;

}


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

.section {

  padding:
    105px 0;

}


.section-heading {

  max-width:
    700px;

  margin-bottom:
    55px;

}


.section-heading.centered {

  margin-inline:
    auto;

  text-align:
    center;

}


.section-label,
.cta-label {

  display:
    inline-block;

  margin-bottom:
    13px;

  color:
    var(--landing-primary);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    1.3px;

}


.section-heading h2,
.groups-content h2,
.transparency-content h2,
.about-container h2,
.cta-container h2 {

  margin:
    0;

  color:
    var(--landing-dark);

  font-size:
    clamp(34px, 4vw, 52px);

  line-height:
    1.08;

  letter-spacing:
    -2px;

  font-weight:
    900;

}


.section-heading h2 span,
.groups-content h2 span,
.transparency-content h2 span,
.about-container h2 span,
.cta-container h2 span {

  color:
    var(--landing-primary);

}


.section-heading p {

  max-width:
    630px;

  margin:
    20px 0 0;

  color:
    var(--landing-muted);

  font-size:
    16px;

}


/* =========================================================
   FEATURES
========================================================= */

.features-section {

  background:
    #ffffff;

}


.features-grid {

  display:
    grid;

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

  gap:
    16px;

}


.feature-card {

  position:
    relative;

  min-height:
    285px;

  padding:
    27px;

  overflow:
    hidden;

  background:
    #ffffff;

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

  border-radius:
    var(--landing-radius-lg);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;

}


.feature-card:hover {

  transform:
    translateY(-5px);

  border-color:
    #b7e4df;

  box-shadow:
    var(--landing-shadow-md);

}


.feature-card-large {

  background:
    linear-gradient(
      145deg,
      #f0fdfa,
      #ffffff
    );

}


.feature-card-highlight {

  background:
    var(--landing-dark);

}


.feature-icon {

  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  margin-bottom:
    24px;

  border-radius:
    13px;

  background:
    var(--landing-primary-light);

  font-size:
    20px;

}


.feature-number {

  position:
    absolute;

  top:
    27px;

  right:
    27px;

  color:
    #cbd5e1;

  font-size:
    11px;

  font-weight:
    900;

}


.feature-card-highlight .feature-number {

  color:
    #475569;

}


.feature-card h3 {

  margin:
    0 0 10px;

  color:
    var(--landing-dark);

  font-size:
    22px;

  letter-spacing:
    -0.6px;

}


.feature-card-highlight h3 {

  color:
    #ffffff;

}


.feature-card p {

  margin:
    0;

  color:
    var(--landing-muted);

  font-size:
    14px;

  line-height:
    1.7;

}


.feature-card-highlight p {

  color:
    #94a3b8;

}


.feature-card a {

  position:
    absolute;

  left:
    27px;

  bottom:
    25px;

  color:
    var(--landing-primary);

  font-size:
    12px;

  font-weight:
    800;

}


.feature-card-highlight a {

  color:
    #5eead4;

}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {

  background:
    var(--landing-background-soft);

}


.steps-grid {

  display:
    grid;

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

  gap:
    15px;

}


.step-card {

  position:
    relative;

  padding:
    27px;

  background:
    #ffffff;

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

  border-radius:
    var(--landing-radius-lg);

}


.step-number {

  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  margin-bottom:
    28px;

  color:
    var(--landing-primary-dark);

  background:
    var(--landing-primary-light);

  border-radius:
    50%;

  font-size:
    11px;

  font-weight:
    900;

}


.step-line {

  position:
    absolute;

  top:
    49px;

  right:
    -15px;

  width:
    15px;

  height:
    1px;

  background:
    #cbd5e1;

}


.step-card:last-child .step-line {

  display:
    none;

}


.step-card h3 {

  margin:
    0 0 10px;

  color:
    var(--landing-dark);

  font-size:
    18px;

}


.step-card p {

  margin:
    0;

  color:
    var(--landing-muted);

  font-size:
    13px;

}


/* =========================================================
   GROUPS
========================================================= */

.groups-section {

  background:
    #ffffff;

}


.groups-layout {

  display:
    grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap:
    90px;

  align-items:
    center;

}


.groups-content {

  max-width:
    500px;

}


.groups-content p {

  margin:
    22px 0 28px;

  color:
    var(--landing-muted);

  font-size:
    16px;

  line-height:
    1.8;

}


.groups-list {

  display:
    grid;

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

  gap:
    12px;

}


.group-type {

  display:
    grid;

  grid-template-columns:
    35px 1fr;

  column-gap:
    10px;

  padding:
    18px;

  background:
    var(--landing-background-soft);

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

  border-radius:
    14px;

}


.group-type > span {

  grid-row:
    span 2;

  color:
    var(--landing-primary);

  font-size:
    10px;

  font-weight:
    900;

}


.group-type strong {

  color:
    var(--landing-dark);

  font-size:
    14px;

}


.group-type small {

  color:
    var(--landing-muted);

  font-size:
    10px;

}


/* =========================================================
   TRANSPARENCY
========================================================= */

.transparency-section {

  background:
    #f0fdfa;

}


.transparency-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    center;

  gap:
    90px;

}


.transparency-content {

  max-width:
    530px;

}


.transparency-content > p {

  margin:
    22px 0 30px;

  color:
    var(--landing-muted);

  font-size:
    16px;

  line-height:
    1.8;

}


.ledger-card {

  overflow:
    hidden;

  background:
    #ffffff;

  border:
    1px solid #d7e9e6;

  border-radius:
    20px;

  box-shadow:
    var(--landing-shadow-md);

}


.ledger-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    19px 21px;

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

}


.ledger-header div span,
.ledger-header div strong {

  display:
    block;

}


.ledger-header div span {

  color:
    var(--landing-primary);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1px;

}


.ledger-header div strong {

  margin-top:
    2px;

  color:
    var(--landing-dark);

  font-size:
    15px;

}


.ledger-status {

  padding:
    5px 9px;

  color:
    #166534;

  background:
    #dcfce7;

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    900;

}


.ledger-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    16px 21px;

  border-bottom:
    1px solid #f1f5f9;

}


.ledger-row > div {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.ledger-avatar {

  display:
    grid;

  place-items:
    center;

  width:
    31px;

  height:
    31px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--landing-primary-dark);

  background:
    var(--landing-primary-light);

  font-size:
    8px;

  font-weight:
    900;

}


.ledger-row strong,
.ledger-row small {

  display:
    block;

}


.ledger-row strong {

  color:
    var(--landing-dark);

  font-size:
    11px;

}


.ledger-row small {

  color:
    var(--landing-muted);

  font-size:
    9px;

}


.ledger-positive {

  color:
    var(--landing-success) !important;

}


.ledger-negative {

  color:
    var(--landing-danger) !important;

}


.ledger-total {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    20px 21px;

  background:
    #f8fafc;

}


.ledger-total span {

  color:
    var(--landing-muted);

  font-size:
    11px;

}


.ledger-total strong {

  color:
    var(--landing-dark);

  font-size:
    18px;

}


.check-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  margin:
    0;

  padding:
    0;

  list-style:
    none;

}


.check-list li {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

}


.check-list li > span {

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    24px;

  height:
    24px;

  border-radius:
    50%;

  color:
    var(--landing-primary);

  background:
    #ccfbf1;

  font-size:
    11px;

  font-weight:
    900;

}


.check-list strong,
.check-list small {

  display:
    block;

}


.check-list strong {

  color:
    var(--landing-dark);

  font-size:
    13px;

}


.check-list small {

  margin-top:
    2px;

  color:
    var(--landing-muted);

  font-size:
    11px;

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

  background:
    #ffffff;

}


.about-container {

  max-width:
    820px;

  text-align:
    center;

}


.about-container p {

  max-width:
    680px;

  margin:
    22px auto 40px;

  color:
    var(--landing-muted);

  font-size:
    17px;

  line-height:
    1.8;

}


.about-points {

  display:
    grid;

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

  gap:
    12px;

}


.about-points > div {

  padding:
    20px;

  background:
    var(--landing-background-soft);

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

  border-radius:
    15px;

}


.about-points strong,
.about-points span {

  display:
    block;

}


.about-points strong {

  color:
    var(--landing-primary);

  font-size:
    15px;

}


.about-points span {

  margin-top:
    4px;

  color:
    var(--landing-muted);

  font-size:
    11px;

}


/* =========================================================
   CTA
========================================================= */

.cta-section {

  position:
    relative;

  overflow:
    hidden;

  padding:
    105px 0;

  background:
    var(--landing-primary-dark);

}


.cta-pattern {

  position:
    absolute;

  width:
    600px;

  height:
    600px;

  right:
    -300px;

  top:
    -300px;

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

  border-radius:
    50%;

}


.cta-pattern::after {

  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  left:
    90px;

  top:
    90px;

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

  border-radius:
    50%;

}


.cta-container {

  position:
    relative;

  z-index:
    2;

  max-width:
    760px;

  text-align:
    center;

}


.cta-label {

  color:
    #99f6e4;

}


.cta-container h2 {

  color:
    #ffffff;

}


.cta-container h2 span {

  color:
    #5eead4;

}


.cta-container p {

  max-width:
    600px;

  margin:
    20px auto 30px;

  color:
    #ccfbf1;

  font-size:
    16px;

}


.cta-actions {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    15px;

}


.cta-login {

  color:
    #ccfbf1;

  font-size:
    12px;

  font-weight:
    700;

}


.cta-login:hover {

  color:
    #ffffff;

}


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

.landing-footer {

  background:
    #020617;

  color:
    #94a3b8;

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap:
    60px;

  padding:
    65px 0 55px;

}


.footer-brand {

  max-width:
    310px;

}


.footer-brand .landing-logo {

  margin-bottom:
    16px;

}


.footer-brand .logo-main {

  color:
    #ffffff;

}


.footer-brand p {

  margin:
    0;

  color:
    #64748b;

  font-size:
    13px;

  line-height:
    1.7;

}


.footer-column {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

}


.footer-column h3 {

  margin:
    0 0 7px;

  color:
    #ffffff;

  font-size:
    12px;

}


.footer-column a {

  color:
    #64748b;

  font-size:
    11px;

  transition:
    color 0.2s ease;

}


.footer-column a:hover {

  color:
    #5eead4;

}


.footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    20px 0;

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

  color:
    #475569;

  font-size:
    10px;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

  .hero-grid {

    grid-template-columns:
      1fr;

    gap:
      55px;

  }


  .hero-content {

    max-width:
      720px;

    text-align:
      center;

    margin-inline:
      auto;

  }


  .hero-description {

    margin-inline:
      auto;

  }


  .hero-actions,
  .hero-trust {

    justify-content:
      center;

  }


  .hero-dashboard {

    max-width:
      780px;

    width:
      100%;

    margin-inline:
      auto;

  }


  .features-grid {

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

  }


  .steps-grid {

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

  }


  .step-line {

    display:
      none;

  }


  .groups-layout,
  .transparency-grid {

    grid-template-columns:
      1fr;

    gap:
      50px;

  }


  .groups-content,
  .transparency-content {

    max-width:
      700px;

  }


  .footer-grid {

    grid-template-columns:
      1.5fr 1fr 1fr 1fr;

    gap:
      30px;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

  .container {

    width:
      min(
        calc(100% - 28px),
        var(--landing-container)
      );

  }


  .nav-container {

    min-height:
      68px;

  }


  .mobile-menu-button {

    display:
      block;

  }


  .landing-navigation {

    position:
      absolute;

    top:
      calc(100% + 1px);

    left:
      0;

    right:
      0;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    padding:
      10px 14px 16px;

    background:
      #ffffff;

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

    box-shadow:
      var(--landing-shadow-md);

  }


  .landing-navigation.is-open {

    display:
      flex;

  }


  .landing-navigation > a:not(.button) {

    padding:
      12px;

  }


  .nav-actions {

    flex-direction:
      column;

    align-items:
      stretch;

    margin:
      5px 0 0;

    padding-top:
      8px;

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

  }


  .nav-login {

    padding:
      12px;

    text-align:
      center;

  }


  .nav-actions .button {

    width:
      100%;

  }


  .hero-section {

    padding:
      65px 0 55px;

  }


  .hero-content h1 {

    font-size:
      clamp(42px, 13vw, 58px);

    letter-spacing:
      -2.6px;

  }


  .hero-description {

    font-size:
      16px;

  }


  .hero-trust {

    flex-wrap:
      wrap;

    gap:
      12px;

  }


  .trust-divider {

    display:
      none;

  }


  .dashboard-window {

    transform:
      none;

    border-radius:
      16px;

  }


  .dashboard-window:hover {

    transform:
      none;

  }


  .dashboard-body {

    padding:
      13px;

  }


  .dashboard-stat-grid {

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

  }


  .dashboard-lower {

    grid-template-columns:
      1fr;

  }


  .value-grid {

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

  }


  .value-item {

    min-height:
      75px;

  }


  .value-item:nth-child(2) {

    border-right:
      0;

  }


  .value-item:nth-child(3) {

    border-left:
      1px solid rgba(255,255,255,0.08);

  }


  .section {

    padding:
      75px 0;

  }


  .section-heading {

    margin-bottom:
      38px;

  }


  .section-heading h2,
  .groups-content h2,
  .transparency-content h2,
  .about-container h2,
  .cta-container h2 {

    font-size:
      36px;

    letter-spacing:
      -1.5px;

  }


  .features-grid {

    grid-template-columns:
      1fr;

  }


  .feature-card {

    min-height:
      260px;

  }


  .steps-grid {

    grid-template-columns:
      1fr;

  }


  .groups-list {

    grid-template-columns:
      1fr;

  }


  .transparency-grid {

    gap:
      38px;

  }


  .about-points {

    grid-template-columns:
      1fr;

  }


  .footer-grid {

    grid-template-columns:
      1fr 1fr;

    gap:
      35px 25px;

    padding:
      50px 0 40px;

  }


  .footer-brand {

    grid-column:
      1 / -1;

  }


  .footer-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}


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

@media (max-width: 430px) {

  .hero-actions {

    flex-direction:
      column;

  }


  .hero-actions .button {

    width:
      100%;

  }


  .hero-badge {

    font-size:
      10px;

  }


  .dashboard-stat-card {

    padding:
      10px;

  }


  .dashboard-stat-card strong {

    font-size:
      12px;

  }


  .dashboard-welcome {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .value-grid {

    grid-template-columns:
      1fr;

  }


  .value-item {

    border-left:
      1px solid rgba(255,255,255,0.08);

    border-right:
      1px solid rgba(255,255,255,0.08);

  }


  .ledger-row {

    padding-inline:
      14px;

  }


  .ledger-row > div {

    min-width:
      0;

  }


  .ledger-row strong {

    font-size:
      10px;

  }


  .footer-grid {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {

  outline:
    3px solid rgba(20, 184, 166, 0.35);

  outline-offset:
    3px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {

    transition:
      none !important;

    animation:
      none !important;

  }

}