/* =========================================================================
   NEW DESIGN SYSTEM (nd-*)
   Modern fintech visual language inspired by Albert / Paystand / Stripe /
   Betterment / ClearTax. Shared across Home, About, Services & Contact.
   Content/text is untouched — this file only defines presentation.
   ========================================================================= */

.nd-scope {
  --nd-primary: #116455;
  --nd-primary-dark: #073B32;
  --nd-primary-light: #1BB7C5;
  --nd-accent: #39CD79;
  --nd-accent-2: #E8902E;
  --nd-ink: #0b1220;
  --nd-muted: #5b6472;
  --nd-muted-soft: #8992a1;
  --nd-bg: #f5f8f9;
  --nd-bg-2: #eef6f6;
  --nd-card: #ffffff;
  --nd-border: #e6ecee;
  --nd-radius-lg: 32px;
  --nd-radius-md: 22px;
  --nd-radius-sm: 14px;
  --nd-shadow-sm: 0 10px 30px -14px rgba(3, 27, 27, 0.16);
  --nd-shadow-lg: 0 30px 70px -24px rgba(3, 27, 27, 0.28);
  --nd-gradient-hero: linear-gradient( 135deg, #005655 0%, #0d7f8f 55%, #4ac4e2 100%);
  --nd-gradient-brand: linear-gradient(135deg, var(--nd-primary) 0%, var(--nd-accent) 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--nd-ink);
  background: var(--nd-bg);
  overflow-x: hidden;
}

.nd-scope * {
  box-sizing: border-box;
}

.nd-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.nd-scope img {
  max-width: 100%;
}

/* ---------- Eyebrow / labels ---------- */
.nd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nd-primary);
}
.nd-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nd-gradient-brand);
  display: inline-block;
}
.nd-eyebrow--light {
  color: #A8F0D6;
}
.nd-eyebrow--light::before {
  background: #A8F0D6;
}

/* ---------- Buttons ---------- */
.nd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.nd-btn:hover {
  transform: translateY(-3px);
  text-decoration: none;
}
.nd-btn--primary {
  background: #ffffff;
  color: var(--nd-primary-dark);
  box-shadow: var(--nd-shadow-sm);
}
.nd-btn--primary:hover {
  box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.45);
  color: var(--nd-primary-dark);
}
.nd-btn--solid {
  background: var(--nd-gradient-brand);
  color: #fff;
  box-shadow: 0 16px 34px -12px rgba(17, 100, 85, 0.45);
}
.nd-btn--solid:hover {
  color: #fff;
  box-shadow: 0 20px 44px -12px rgba(17, 100, 85, 0.55);
}
.nd-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  backdrop-filter: blur(6px);
}
.nd-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.nd-btn--outline {
  background: transparent;
  border-color: var(--nd-border);
  color: var(--nd-ink);
}
.nd-btn--outline:hover {
  border-color: var(--nd-primary);
  color: var(--nd-primary);
}
.nd-btn--sm {
  padding: 12px 22px;
  font-size: 13px;
}

/* ---------- HERO ---------- */
.nd-hero--orbit {
    background: radial-gradient(ellipse 70%, ellipse 55% at 50%, at 12%, #181a26 0%, #0a0a10 55%, #050507 100%);
    background: radial-gradient(ellipse 70% 55% at 50% 12%, #181a26 0%, #0a0a10 55%, #050507 100%);
    padding: 310px 0 35px;
    height: 100%;
}

.nd-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.nd-hero--home {
  padding: 85px 0 45px;
  background: radial-gradient(ellipse 80% 60% at 50% 15%, #0d3837 0%, #032322 45%, #011413 100%);
  text-align: left;
}
.nd-hero__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.nd-hero__left {
  max-width: 620px;
}
.nd-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  z-index: 0;
  animation: ndFloat 10s ease-in-out infinite;
}
.nd-hero__blob--1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--nd-accent-2), transparent 70%);
  top: -160px;
  left: -120px;
}
.nd-hero__blob--2 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--nd-accent), transparent 70%);
  bottom: -180px;
  right: -100px;
  animation-delay: 2.5s;
}
.nd-hero__blob--3 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, #9fef00, transparent 70%);
  top: 30%;
  left: 55%;
  opacity: 0.28;
  animation-delay: 5s;
}
@keyframes ndFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-26px) scale(1.06); }
}
.nd-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000 40%, transparent 100%);
  z-index: 0;
}
.nd-hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.nd-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #eafcff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
}
.nd-hero__title {
  font-size: clamp(32px, 4.8vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.nd-hero__title span {
  background: linear-gradient(90deg, #A8F0D6, #39CD79);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nd-hero__subtitle {
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 580px;
  margin: 0 0 20px;
}
.nd-hero__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.nd-hero__feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.nd-hero__feature-item i {
  color: var(--nd-accent);
  font-size: 18px;
}
.nd-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Home hero right showcase card */
.nd-hero-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  padding: 28px;
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}
.nd-hero-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}
.nd-hero-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #34d399;
}
.nd-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
}
.nd-hero-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}
.nd-hero-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.nd-hero-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
}
.nd-hero-stat__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1BB7C5, #39CD79);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}
.nd-hero-stat__num {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.nd-hero-stat__lbl {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}
.nd-hero-service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nd-hero-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
}
.nd-hero-service-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f5f9;
  font-weight: 600;
}
.nd-hero-service-label i {
  color: #39CD79;
  font-size: 16px;
}
.nd-hero-service-status {
  font-size: 11.5px;
  font-weight: 600;
  color: #34d399;
}
.nd-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
}
.nd-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 16px;
  border-radius: 999px;
}
.nd-hero__trust i {
  color: #9fef00;
}

/* Floating mockup stack */
.nd-hero__stage {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 64px auto 0;
  height: 320px;
}
.nd-float {
  position: absolute;
  background: #fff;
  color: var(--nd-ink);
  border-radius: var(--nd-radius-md);
  box-shadow: var(--nd-shadow-lg);
  padding: 22px 24px;
  text-align: left;
  animation: ndBob 6s ease-in-out infinite;
}
@keyframes ndBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.nd-float--main {
  width: min(420px, 86vw);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 28px 30px;
  animation: none;
  z-index: 3;
}
.nd-float--main .nd-float__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.nd-float__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nd-bg-2);
  color: var(--nd-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 12px;
  border-radius: 999px;
}
.nd-float__amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
.nd-float__label {
  font-size: 13px;
  color: var(--nd-muted);
}
.nd-float__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 64px;
  margin-top: 18px;
}
.nd-float__bars span {
  flex: 1;
  border-radius: 6px;
  background: var(--nd-gradient-brand);
  opacity: 0.85;
}
.nd-float--card1 {
  width: 210px;
  left: 0;
  top: 40px;
  animation-delay: 0.5s;
}
.nd-float--card2 {
  width: 220px;
  right: 0;
  bottom: 6px;
  animation-delay: 1.5s;
}
.nd-float__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  background: var(--nd-gradient-brand);
  margin-bottom: 12px;
}
.nd-float__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.nd-float__text {
  font-size: 12.5px;
  color: var(--nd-muted);
  line-height: 1.5;
}

/* Smaller "page header" hero variant for About / Services / Contact */
.nd-hero--page {
  padding: 100px 0 45px;
}
.nd-hero--page .nd-hero__title {
  font-size: clamp(32px, 5vw, 54px);
}
.nd-hero__crumb {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
}
.nd-hero__crumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.nd-hero__crumb a:hover {
  color: #fff;
}
.nd-hero__crumb span.current {
  color: #fff;
  font-weight: 600;
}

/* ---------- Sections ---------- */
.nd-section {
  padding: 100px 0;
  position: relative;
}
.nd-section--tight {
  padding: 70px 0;
}
.nd-section--alt {
  background: var(--nd-bg-2);
}
.nd-section--dark {
  background: linear-gradient(160deg, #041615 0%, #073B32 60%, #04413f 100%);
  color: #fff;
}
.nd-section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.nd-section-head.nd-left {
  margin: 0 0 48px;
  text-align: left;
}
.nd-heading {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 14px 0 0;
  color: var(--nd-ink);
}
.nd-section--dark .nd-heading {
  color: #fff;
}
.nd-lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--nd-muted);
  margin-top: 16px;
}
.nd-section--dark .nd-lede {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Split layout (media + copy) ---------- */
.nd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nd-split--reverse .nd-split__media {
  order: 2;
}
.nd-split__media {
  position: relative;
}
.nd-split__frame {
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg);
  box-shadow: var(--nd-shadow-sm);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.nd-split__frame img {
  border-radius: calc(var(--nd-radius-lg) - 12px);
  width: 100%;
  display: block;
}
.nd-split__glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--nd-gradient-brand);
  filter: blur(90px);
  opacity: 0.35;
  z-index: -1;
  top: -60px;
  right: -60px;
}
.nd-split__copy .nd-eyebrow {
  margin-bottom: 12px;
}
.nd-split__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.nd-split__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--nd-muted);
}
.nd-split__list i {
  color: var(--nd-primary);
  margin-top: 3px;
}

/* ---------- Card grids ---------- */
.nd-grid {
  display: grid;
  gap: 26px;
}
.nd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nd-grid--4 { grid-template-columns: repeat(4, 1fr); }

.nd-card {
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-md);
  padding: 34px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.nd-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--nd-shadow-lg);
  border-color: transparent;
}
.nd-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  background: var(--nd-gradient-brand);
  margin-bottom: 20px;
}
.nd-card__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--nd-ink);
}
.nd-card__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--nd-muted);
  margin: 0;
}
.nd-card__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 9px;
}
.nd-card__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--nd-muted);
}
.nd-card__list i {
  color: var(--nd-primary);
  font-size: 12px;
}
.nd-card__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--nd-muted-soft);
  margin-bottom: 14px;
  display: block;
}
.nd-card--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.nd-card--dark .nd-card__title { color: #fff; }
.nd-card--dark .nd-card__text,
.nd-card--dark .nd-card__list li { color: rgba(255, 255, 255, 0.62); }

/* ---------- Stat strip ---------- */
.nd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nd-stat {
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-md);
  padding: 30px 22px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nd-stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--nd-shadow-sm);
}
.nd-stat i {
  font-size: 30px;
  color: var(--nd-primary);
  margin-bottom: 12px;
}
.nd-stat__num {
  font-size: 32px;
  font-weight: 800;
  background: var(--nd-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.nd-stat__label {
  font-size: 13.5px;
  color: var(--nd-muted);
  font-weight: 500;
}

/* ---------- Feature rows (checklist w/ accent bar) ---------- */
.nd-frow {
  display: flex;
  gap: 16px;
  padding: 20px 0 20px 20px;
  border-left: 3px solid rgba(255, 255, 255, 0.25);
}
.nd-frow + .nd-frow {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nd-frow i {
  font-size: 30px;
  flex-shrink: 0;
}
.nd-frow h5 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
.nd-frow p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.75;
}

/* ---------- CTA banner ---------- */
.nd-cta {
  border-radius: var(--nd-radius-lg);
  background: var(--nd-gradient-hero);
  color: #fff;
  padding: 64px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.nd-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin: 0 0 12px;
}
.nd-cta__text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0;
}
.nd-cta__actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Pill badges row ---------- */
.nd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--nd-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: var(--nd-shadow-sm);
}
.nd-chip i {
  color: var(--nd-primary);
}

/* ---------- Contact page ---------- */
.nd-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nd-contact-card {
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-md);
  padding: 34px 28px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nd-contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--nd-shadow-lg);
}
.nd-contact-card .nd-card__icon {
  margin: 0 auto 18px;
}
.nd-contact-card a {
  color: var(--nd-primary);
  font-weight: 600;
  text-decoration: none;
}
.nd-contact-card a:hover {
  text-decoration: underline;
}
.nd-contact-card p {
  color: var(--nd-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.nd-form-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: stretch;
}
.nd-form-card {
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg);
  box-shadow: var(--nd-shadow-sm);
  padding: 48px;
}
.nd-form-card h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 28px;
  color: var(--nd-ink);
}
.nd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.nd-form-grid .nd-field--full {
  grid-column: 1 / -1;
}
.nd-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--nd-muted);
  margin-bottom: 8px;
}
.nd-input,
.nd-textarea {
  width: 100%;
  border: 1px solid var(--nd-border);
  background: var(--nd-bg);
  border-radius: var(--nd-radius-sm);
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--nd-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.nd-input:focus,
.nd-textarea:focus {
  outline: none;
  border-color: var(--nd-primary);
  box-shadow: 0 0 0 4px rgba(17, 100, 85, 0.12);
}
.nd-textarea {
  min-height: 130px;
  resize: vertical;
}
.nd-form-submit {
  margin-top: 22px;
}
.nd-map-card {
  border-radius: var(--nd-radius-lg);
  overflow: hidden;
  box-shadow: var(--nd-shadow-sm);
  border: 1px solid var(--nd-border);
  min-height: 100%;
}
.nd-map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  border: 0;
}

.nd-newsletter {
  border-radius: var(--nd-radius-lg);
  background: var(--nd-gradient-hero);
  color: #fff;
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.nd-newsletter h3 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin: 0;
}
.nd-newsletter form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nd-newsletter input {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 999px;
  padding: 15px 22px;
  min-width: 260px;
  font-size: 14.5px;
}
.nd-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.nd-newsletter input:focus {
  outline: none;
  border-color: #9fef00;
}
.nd-newsletter button {
  border: none;
  background: #9fef00;
  color: #08210e;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.nd-newsletter button:hover {
  transform: translateY(-3px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nd-hero__layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  .nd-hero__left {
    max-width: 100%;
    margin: 0 auto;
  }
  .nd-hero__subtitle {
    margin: 0 auto 20px;
  }
  .nd-hero__features {
    align-items: center;
  }
  .nd-hero__actions {
    justify-content: center;
  }
  .nd-hero-card {
    max-width: 520px;
    margin: 0 auto;
  }
  .nd-split,
  .nd-form-wrap,
  .nd-cta {
    grid-template-columns: 1fr;
  }
  .nd-cta__actions {
    justify-content: flex-start;
  }
  .nd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nd-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .nd-stats { grid-template-columns: repeat(2, 1fr); }
  .nd-contact-grid { grid-template-columns: 1fr; }
  .nd-split--reverse .nd-split__media { order: 0; }
}
@media (max-width: 720px) {
  .nd-hero { padding: 80px 0 30px;}
  .nd-hero--home { padding: 80px 0 30px; }
  .nd-hero--page { padding: 80px 0 25px; }
  .nd-hero-stat-grid { grid-template-columns: 1fr; }
  .nd-hero__stage { height: auto; padding-bottom: 40px; }
  .nd-float { position: relative; margin: 0 auto 16px; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; }
  .nd-float--main { width: 100%; }
  .nd-grid--2,
  .nd-grid--3,
  .nd-grid--4 { grid-template-columns: 1fr; }
  .nd-form-grid { grid-template-columns: 1fr; }
  .nd-section { padding: 64px 0; }
  .nd-cta { padding: 40px 28px; }
  .nd-newsletter { padding: 36px 28px; flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   ORBIT HERO — faithful rebuild of albert.com's hero composition:
   near-black background, a faint circular "orbit" path, tilted floating
   cards + icon chips arced above a large centered serif headline, single
   pill CTA. Custom-built (no third-party imagery) but matches the layout,
   typography treatment and motion of the reference.
   ========================================================================= */
.nd-hero--orbit .nd-hero__blob--1 { background: radial-gradient(circle, #5b6cff, transparent 70%); opacity: 0.35; }
.nd-hero--orbit .nd-hero__blob--2 { background: radial-gradient(circle, #39CD79, transparent 70%); opacity: 0.25; }
.nd-hero--orbit .nd-hero__blob--3 { display: none; }
.nd-hero--orbit .nd-hero__grid { display: none; }

/* The orbit box is sized by its content (nd-orbit__content, in normal
   flow) — no fixed height. Decorative items are absolutely positioned
   and layer into the space that already exists (including floating up
   into the section's own top padding via negative offsets), so nothing
   pushes the headline down or creates dead space. */
.nd-orbit {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}
.nd-orbit__path {
  position: absolute;
  left: 50%;
  top: -140px;
  width: 1000px;
  height: 1000px;
  margin-left: -500px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.nd-orbit__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.nd-orbit__title {
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  font-size: clamp(32px, 4.8vw, 54px);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 18px;
}
.nd-orbit__title .nd-accent-word {
  color: #7c8cff;
}
.nd-orbit__subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(14.5px, 1.7vw, 17px);
  color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.nd-orbit__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #5b6cff;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 16px 34px -10px rgba(91, 108, 255, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nd-orbit__cta:hover {
  transform: translateY(-3px);
  color: #fff;
  box-shadow: 0 20px 42px -8px rgba(91, 108, 255, 0.7);
}

.nd-orbit__item {
  position: absolute;
  z-index: 2;
  animation: ndOrbitFloat 7s ease-in-out infinite;
}
@keyframes ndOrbitFloat {
  0%, 100% { transform: translateY(0) rotate(var(--nd-rot, 0deg)); }
  50% { transform: translateY(-12px) rotate(var(--nd-rot, 0deg)); }
}

.nd-orbit__card {
  background: #1a1b26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6);
  min-width: 140px;
  transform: rotate(var(--nd-rot, 0deg));
}
.nd-orbit__card-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #7c8cff;
  background: rgba(124, 140, 255, 0.14);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.nd-orbit__card-text {
  font-size: 13px;
  font-weight: 600;
  color: #f2f3f7;
  line-height: 1.4;
}
.nd-orbit__card--pill {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 20px 12px;
  min-width: 0;
}
.nd-orbit__icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(150deg, #6d7cff, #3d4ee0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 20px 40px -12px rgba(61, 78, 224, 0.65);
  transform: rotate(var(--nd-rot, 0deg));
}

/* Top row — nicely flanking the top of the headline */
.nd-orbit__item--card1 {     top: -83px;
 left: 18%; --nd-rot: -6deg; }
.nd-orbit__item--icon1 { top: -16px; right: 18%; left: auto; --nd-rot: 8deg; animation-delay: 0.6s; }

/* Mid row — pinned to the left/right gutters */
.nd-orbit__item--icon2 { top: 60px; left: 1%; --nd-rot: -6deg; animation-delay: 1.8s; }
.nd-orbit__item--pill { top: 65px; right: 0; --nd-rot: 10deg; animation-delay: 1.2s; }

/* Bottom row — gutters level with subtitle */
.nd-orbit__item--card2 { top: 160px; left: 0%; --nd-rot: -5deg; animation-delay: 2.4s; }
.nd-orbit__item--icon3 { top: 175px; right: 1%; --nd-rot: 8deg; animation-delay: 3s; }

@media (max-width: 1080px) {
  .nd-orbit__item--card1 { left: 4%; top: -20px; }
  .nd-orbit__item--icon1 { right: 4%; left: auto; top: -16px; }
}
@media (max-width: 900px) {
  .nd-orbit__path { display: none; }
  .nd-orbit__item { display: none; }
  .nd-orbit__content { max-width: 100%; }
  .nd-hero--orbit { padding: 90px 0 35px; }
}

.nd-choose-grid {
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 1024px) {
  .nd-choose-grid { grid-template-columns: 1fr; }
  .nd-choose-grid > .nd-panel { order: -1; }
}

/* ---------- Circular icon badges (Betterment-style) ---------- */
.nd-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--nd-gradient-brand);
  color: #fff;
  font-size: 20px;
}

/* =========================================================================
   PROFESSIONAL POLISH — editorial typography, grain texture, dashboard
   mockup panels (replacing the repeated dashed-circle icon motif), bento
   grids and refined buttons. Applied on top of the base system above.
   ========================================================================= */

/* Editorial serif identity carried through every section heading, not just
   the hero — gives the site one consistent, distinctive voice instead of
   generic sans-everywhere SaaS type. */
.nd-heading {
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nd-cta__title {
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
}
.nd-eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
}

/* Subtle grain so flat gradients/dark panels feel tactile, not vector-flat */
.nd-grain {
  position: relative;
}
.nd-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nd-grain > * {
  position: relative;
  z-index: 2;
}

/* ---------- Dashboard mockup panel (replaces repeated icon-in-circle
   illustrations with something that reads as an actual product preview) --- */
.nd-panel {
  position: relative;
  background: linear-gradient(165deg, #ffffff 0%, var(--nd-bg-2) 100%);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg);
  padding: 30px 30px 26px;
  box-shadow: var(--nd-shadow-sm);
}
.nd-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: var(--nd-gradient-brand);
}
.nd-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nd-border);
}
.nd-panel__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--nd-ink);
}
.nd-panel__label i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nd-gradient-brand);
  color: #fff;
  font-size: 16px;
}
.nd-panel__pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--nd-primary);
  background: rgba(17, 100, 85, 0.08);
  padding: 5px 11px;
  border-radius: 999px;
}
.nd-panel__pulse::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.nd-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
}
.nd-panel__row + .nd-panel__row {
  border-top: 1px solid var(--nd-border);
}
.nd-panel__row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--nd-muted);
}
.nd-panel__row-label i {
  color: var(--nd-primary);
  font-size: 15px;
}
.nd-panel__row-value {
  font-weight: 700;
  font-size: 14px;
  color: var(--nd-ink);
  flex-shrink: 0;
}
.nd-panel__bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--nd-bg-2);
  overflow: hidden;
  margin: 0 4px;
}
.nd-panel__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--nd-gradient-brand);
}
.nd-panel--dark {
  background: linear-gradient(165deg, #0c2726 0%, #04120f 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
.nd-panel--dark .nd-panel__top,
.nd-panel--dark .nd-panel__row + .nd-panel__row {
  border-color: rgba(255, 255, 255, 0.1);
}
.nd-panel--dark .nd-panel__label,
.nd-panel--dark .nd-panel__row-value {
  color: #fff;
}
.nd-panel--dark .nd-panel__row-label {
  color: rgba(255, 255, 255, 0.55);
}
.nd-panel__foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--nd-border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Bento grids — mixed tile sizes instead of a uniform repeat --- */
.nd-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nd-bento .nd-card--feature {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nd-bento .nd-card--feature .nd-card__icon {
  width: 64px;
  height: 64px;
  font-size: 28px;
  border-radius: 20px;
}
.nd-bento .nd-card--feature .nd-card__title {
  font-size: 23px;
}
@media (max-width: 1024px) {
  .nd-bento { grid-template-columns: repeat(2, 1fr); }
  .nd-bento .nd-card--feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .nd-bento { grid-template-columns: 1fr; }
  .nd-bento .nd-card--feature { grid-column: span 1; }
}

/* Per-tile accent variety so a repeated grid doesn't read as one stamped
   template — rotates through the brand's secondary palette. */
.nd-card__icon--teal { background: linear-gradient(135deg, #116455, #1BB7C5); }
.nd-card__icon--cyan { background: linear-gradient(135deg, #1BB7C5, #39CD79); }
.nd-card__icon--violet { background: linear-gradient(135deg, #5b4fd6, #E8902E); }
.nd-card__icon--amber { background: linear-gradient(135deg, #b8860b, #e0a527); }
.nd-card__icon--rose { background: linear-gradient(135deg, #b5455e, #e0617e); }

/* ---------- Section divider — soft curve instead of a hard rectangle cut - */
.nd-divider {
  display: block;
  width: 100%;
  line-height: 0;
}
.nd-divider svg {
  width: 100%;
  height: 64px;
  display: block;
}

/* ---------- Button polish ---------- */
.nd-btn--primary,
.nd-btn--solid {
  position: relative;
}
.nd-btn--primary::after,
.nd-btn--solid::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 40%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}
.nd-orbit__cta {
  position: relative;
  overflow: hidden;
}
.nd-orbit__cta::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}

@media (max-width: 720px) {
  .nd-panel { padding: 24px; }
}

/* ---------- Global toast notifications ($showNoti / el-message) ---------- */
.el-message {
  min-width: 340px;
  max-width: 440px;
  padding: 14px 18px 14px 16px;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  border-width: 1.5px;
}

.el-message__content {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.el-message__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  font-size: 16px !important;
  margin-right: 12px;
  animation: appToastPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.el-message__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 currentColor;
  animation: appToastRing 1.6s ease-out infinite;
  pointer-events: none;
}

.el-message__closeBtn {
  color: inherit;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.el-message__closeBtn:hover {
  opacity: 0.9;
}

@keyframes appToastPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes appToastRing {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.45; }
  100% { box-shadow: 0 0 0 9px currentColor; opacity: 0; }
}

.el-message--success {
  background: #f0faf4;
  border-color: rgba(36, 156, 96, 0.28);
}
.el-message--success .el-message__content { color: #166534; }
.el-message--success .el-message__icon {
  background: rgba(36, 156, 96, 0.15);
  color: #249c60;
}

.el-message--error {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.22);
}
.el-message--error .el-message__content { color: #991b1b; }
.el-message--error .el-message__icon {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.el-message--warning {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.22);
}
.el-message--warning .el-message__content { color: #92400e; }
.el-message--warning .el-message__icon {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

.el-message--info {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.22);
}
.el-message--info .el-message__content { color: #334155; }
.el-message--info .el-message__icon {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}