:root {
  --ld-ink: #0b3d5c;
  --ld-ink-deep: #072a40;
  --ld-ink-soft: #1a5678;
  --ld-coral: #d6452e;
  --ld-coral-hover: #b93824;
  --ld-mint: #0b7a4b;
  --ld-sky: #e8f1f7;
  --ld-fog: #f3f7fa;
  --ld-paper: #ffffff;
  --ld-text: #1a2b36;
  --ld-muted: #5a6a75;
  --ld-line: #d5e0e8;
  --ld-font: "Manrope", "Segoe UI", sans-serif;
  --ld-display: "Unbounded", "Manrope", sans-serif;
  --ld-ease: cubic-bezier(.22, 1, .36, 1);
  --ld-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ld-max: 68rem;
  --scroll-y: 0;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ld-text); font-family: var(--ld-font);
  font-size: 1.05rem; line-height: 1.55; background: var(--ld-fog);
  -webkit-font-smoothing: antialiased;
}
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 3px; pointer-events: none; background: transparent;
}
.scroll-progress > span {
  display: block; height: 100%; width: 0; transform-origin: left;
  background: linear-gradient(90deg, var(--ld-coral), #3ecf8e);
  transition: width .12s linear;
}
img { max-width: 100%; display: block; }
a { color: var(--ld-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--ld-coral); }
h1, h2, h3 {
  font-family: var(--ld-display); letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 .6em;
}
h1 { font-size: clamp(1.7rem, 3.6vw, 2.65rem); font-weight: 700; }
h2 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .35em; }
p { margin: 0 0 1em; }
.wrap {
  width: min(var(--ld-max), calc(100% - 2.5rem)); margin-inline: auto;
}
.wrap.narrow { width: min(42rem, calc(100% - 2.5rem)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; min-height: 2.85rem; padding: .7rem 1.25rem;
  border-radius: .55rem; border: 0; font: 700 .95rem/1 var(--ld-font);
  cursor: pointer; text-decoration: none; transition:
    background .25s var(--ld-ease), color .25s var(--ld-ease),
    transform .25s var(--ld-ease), box-shadow .25s var(--ld-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--ld-coral); color: #fff;
  box-shadow: 0 10px 28px rgba(214, 69, 46, .28);
}
.btn.primary:hover {
  background: var(--ld-coral-hover); color: #fff;
  box-shadow: 0 14px 32px rgba(214, 69, 46, .34);
}
.btn.soft {
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
}
.btn.soft:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn.ghost {
  background: transparent; color: var(--ld-ink);
  border: 1px solid var(--ld-line);
}
.btn.ghost:hover { border-color: var(--ld-ink); color: var(--ld-ink); }

.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--ld-paper) 86%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--ld-line);
  transition:
    padding .45s var(--ld-ease-out),
    box-shadow .45s var(--ld-ease-out),
    background .45s var(--ld-ease-out);
}
.top.scrolled {
  padding-block: .45rem;
  background: color-mix(in srgb, var(--ld-paper) 92%, transparent);
  box-shadow: 0 8px 28px rgba(7, 42, 64, .08);
}
.top > .brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--ld-ink); font-weight: 800;
  font-family: var(--ld-display); font-size: .95rem; letter-spacing: -.01em;
}
.top > .brand > img {
  width: 2.15rem; height: 2.15rem; border-radius: .55rem;
  background: #fff; box-shadow: 0 6px 16px rgba(11, 61, 92, .18);
}
.top > .nav {
  display: flex; gap: 1.1rem; margin-left: auto; margin-right: .5rem;
}
.top > .nav > a {
  color: var(--ld-muted); text-decoration: none; font-size: .9rem;
  font-weight: 600;
}
.top > .nav > a:hover { color: var(--ld-ink); }

.hero {
  position: relative; min-height: min(100svh, 52rem);
  display: grid; align-items: center; overflow: hidden;
  color: #f4f8fb; padding-top: 3.25rem;
}
.hero > .hero-plane {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ld-ink-deep);
  will-change: transform;
  transform: translate3d(0, calc(var(--scroll-y) * .18px), 0) scale(1.04);
}
.hero > .hero-plane > .sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 20%,
      rgba(90, 170, 210, .35), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 80%,
      rgba(214, 69, 46, .18), transparent 55%),
    linear-gradient(165deg, #0a3148 0%, #072a40 45%, #0b3d5c 100%);
  animation: sky-shift 14s var(--ld-ease) infinite alternate;
}
.hero > .hero-plane > .grid {
  position: absolute; inset: 0; opacity: .18;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 85%);
}
.hero > .hero-plane > .facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .9;
}
.hero .windows > rect {
  fill: url(#glass); transition: fill .45s var(--ld-ease), opacity .45s var(--ld-ease);
}
.hero .windows > rect.lit {
  fill: #9fe0c0; opacity: 1;
  filter: drop-shadow(0 0 6px rgba(159, 224, 192, .55));
}
.hero > .hero-plane > .reply-stack {
  --card-h: 8.1rem; --card-gap: 1rem;
  position: absolute; right: clamp(1rem, 6vw, 4.5rem);
  top: clamp(5.5rem, 16vh, 8.5rem); z-index: 2;
  width: min(20rem, 42vw); height: calc(var(--card-h) * 2 + var(--card-gap));
  pointer-events: none;
}
.hero .reply-card {
  position: absolute; left: 0; right: 0;
  padding: 1rem 1.05rem 1.05rem; border-radius: .9rem;
  background: rgba(247, 250, 252, .96);
  box-shadow: 0 18px 40px rgba(3, 20, 32, .42);
  transform: translateY(70vh); opacity: 0;
  transition:
    transform 2s var(--ld-ease), opacity 1.2s var(--ld-ease);
}
.hero .reply-card.in {
  opacity: 1;
}
.hero .reply-card.slot-0.in { transform: translateY(0); }
.hero .reply-card.slot-1.in {
  transform: translateY(calc(var(--card-h) + var(--card-gap)));
}
.hero .reply-card.out {
  transform: translateY(-2.5rem) scale(.94); opacity: 0;
}
.hero .reply-card > .bar {
  width: 38%; height: .55rem; border-radius: 999px;
  background: var(--ld-ink); margin-bottom: .7rem; opacity: .85;
}
.hero .reply-card > .line {
  height: .45rem; border-radius: 999px; background: #b7c6d0;
  margin-bottom: .4rem;
}
.hero .reply-card > .line.w2 { width: 88%; }
.hero .reply-card > .line.w3 { width: 74%; }
.hero .reply-card > .line.w4 { width: 58%; margin-bottom: .85rem; }
.hero .reply-card > .ok {
  display: inline-flex; align-items: center; min-height: 1.7rem;
  padding: 0 .75rem; border-radius: .5rem; background: #3ecf8e;
  color: #053d28; font-size: .78rem; font-weight: 700;
}
.hero > .hero-copy {
  position: relative; z-index: 1;
  width: min(40rem, calc(100% - 2.5rem));
  margin: 0 auto 0 clamp(1.25rem, 5vw, 4.5rem);
  padding: 2.5rem 0 3rem;
}
.hero > .hero-copy > .eyebrow {
  margin: 0 0 .65rem; font-family: var(--ld-display);
  font-size: clamp(1.45rem, 3.2vw, 2.15rem); font-weight: 700;
  letter-spacing: -.02em; color: #fff;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  animation: rise .9s var(--ld-ease) both;
}
.hero > .hero-copy > h1 {
  margin: 0 0 .7rem; color: #fff;
  text-shadow: 0 10px 32px rgba(0, 0, 0, .35);
  animation: rise .9s .08s var(--ld-ease) both;
}
.hero > .hero-copy > .lead {
  max-width: 34rem; margin-bottom: 0; color: #d5e4ee;
  font-size: 1.05rem; animation: rise .9s .16s var(--ld-ease) both;
}
.hero > .hero-copy > .cta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1.25rem;
  animation: rise .9s .24s var(--ld-ease) both;
}

.pain {
  background: #fff4f0; border-block: 1px solid #f0d2c8;
  padding: 3.25rem 0;
}
.pain h2 { color: #5c2418; }
.pain p { margin: 0; color: #3a2018; font-size: 1.08rem; }

.how, .features, .terms, .contact { padding: 4.5rem 0; }
.section-kicker {
  margin: 0 0 .55rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ld-ink-soft);
}
.how { background: var(--ld-paper); }
.how > .wrap > h2 { margin-bottom: 1.75rem; }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.steps > li {
  padding: 1.35rem 1.25rem 1.4rem; border-radius: 1rem;
  background: var(--ld-fog); border: 1px solid var(--ld-line);
}
.steps > li > .n {
  display: block; margin-bottom: .7rem;
  font-family: var(--ld-display); font-size: .85rem;
  font-weight: 600; color: var(--ld-coral);
}
.steps > li > p { margin: 0; color: var(--ld-muted); font-size: .98rem; }

.features { background: var(--ld-sky); }
.features > .wrap > h2 { margin-bottom: 1.5rem; }
.feature-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature-list > li {
  padding: 1.2rem 1.15rem 1.3rem;
  border-top: 3px solid var(--ld-ink);
}
.feature-list > li > p { margin: 0; color: var(--ld-muted); font-size: .98rem; }

.terms {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%,
      rgba(62, 207, 142, .12), transparent 55%),
    var(--ld-paper);
  text-align: center;
}
.terms-lead { color: var(--ld-muted); margin-bottom: 1.5rem; }
.price {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: .75rem 1rem;
  margin: 0 auto 1.75rem; padding: 1.35rem 1.5rem;
  border-radius: 1rem; background: var(--ld-fog);
  border: 1px solid var(--ld-line); width: fit-content; max-width: 100%;
}
.price > p { margin: 0; font-size: 1.15rem; }
.price > .sep { color: var(--ld-muted); font-weight: 700; }
.price .note { color: var(--ld-muted); font-size: .9rem; font-weight: 500; }

.contact { background: var(--ld-ink-deep); color: #e7eef4; }
.contact .section-kicker { color: #9ec9e6; }
.contact h2 { color: #fff; }
.contact .lead { color: #b7c9d6; }
.contact-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.1fr .9fr; align-items: start;
}
.contacts {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .85rem;
}
.contacts > li {
  display: grid; gap: .15rem;
  padding-bottom: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.contacts > li > span:first-child {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: #8aa3b5; font-weight: 700;
}
.contacts a { color: #fff; text-decoration: none; font-weight: 600; }
.contacts a:hover { color: #ffb4a6; }
.ask {
  display: grid; gap: .85rem; padding: 1.35rem 1.25rem 1.4rem;
  border-radius: 1rem; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.ask > label {
  display: grid; gap: .35rem; font-size: .85rem; font-weight: 600;
  color: #c5d5e0;
}
.ask input {
  width: 100%; min-height: 2.7rem; padding: .65rem .8rem;
  border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 30, 45, .45); color: #fff;
  font: 500 1rem/1.3 var(--ld-font);
}
.ask input::placeholder { color: #7f96a8; }
.ask input:focus {
  outline: 2px solid rgba(158, 201, 230, .55); outline-offset: 1px;
}
.ask input.invalid {
  border-color: #f0a090;
  outline: 2px solid rgba(214, 69, 46, .45); outline-offset: 1px;
}
.ask .field-hint {
  font-size: .78rem; font-weight: 500; color: #7f96a8;
}
.ask .field-error {
  font-size: .82rem; font-weight: 600; color: #ffb4a6;
}
.ask .field-error[hidden] { display: none; }
.ask > .btn { width: 100%; margin-top: .25rem; }
.form-note { margin: .15rem 0 0; font-size: .85rem; color: #8aa3b5; }

.foot {
  background: #061f30; color: #8aa3b5; padding: 1.75rem 0 2rem;
  font-size: .9rem;
}
.foot a { color: #c5d5e0; }
.foot-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: end;
}
.who > strong {
  display: block; color: #e7eef4; margin-bottom: .35rem;
  font-family: var(--ld-display); font-size: .95rem;
}
.who > p { margin: 0 0 .25rem; }
.copy { margin: 0; }

.reveal {
  --rise-dur: 1s;
  --rise-ease: var(--ld-ease-out);
}
.reveal .section-kicker,
.reveal h2,
.reveal .terms-lead,
.reveal .price,
.reveal .btn.primary,
.reveal .steps > li,
.reveal .feature-list > li,
.reveal .contact-grid > *,
.reveal.pain .wrap > * {
  opacity: 0;
  transform: translate3d(0, 2.75rem, 0) scale(.97);
  filter: blur(10px);
  transition:
    opacity var(--rise-dur) var(--rise-ease),
    transform var(--rise-dur) var(--rise-ease),
    filter calc(var(--rise-dur) * .85) var(--rise-ease);
  transition-delay: calc(var(--rise-i, 0) * .1s);
  will-change: transform, opacity, filter;
}
.reveal.in .section-kicker,
.reveal.in h2,
.reveal.in .terms-lead,
.reveal.in .price,
.reveal.in .btn.primary,
.reveal.in .steps > li,
.reveal.in .feature-list > li,
.reveal.in .contact-grid > *,
.reveal.pain.in .wrap > * {
  opacity: 1; transform: none; filter: blur(0);
}
.reveal .section-kicker { --rise-i: 0; }
.reveal h2 { --rise-i: 1; }
.reveal .terms-lead { --rise-i: 2; }
.reveal .price { --rise-i: 3; }
.reveal .btn.primary { --rise-i: 4; }
.reveal .steps > li:nth-child(1) { --rise-i: 2; }
.reveal .steps > li:nth-child(2) { --rise-i: 3; }
.reveal .steps > li:nth-child(3) { --rise-i: 4; }
.reveal .feature-list > li:nth-child(1) { --rise-i: 2; }
.reveal .feature-list > li:nth-child(2) { --rise-i: 3; }
.reveal .feature-list > li:nth-child(3) { --rise-i: 4; }
.reveal .feature-list > li:nth-child(4) { --rise-i: 5; }
.reveal .feature-list > li:nth-child(5) { --rise-i: 6; }
.reveal .feature-list > li:nth-child(6) { --rise-i: 7; }
.reveal .contact-grid > *:nth-child(1) { --rise-i: 2; }
.reveal .contact-grid > *:nth-child(2) { --rise-i: 3; }
.reveal.pain .wrap > *:nth-child(1) { --rise-i: 0; }
.reveal.pain .wrap > *:nth-child(2) { --rise-i: 1; }

@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}
@keyframes sky-shift {
  from { filter: hue-rotate(0deg) saturate(1); }
  to { filter: hue-rotate(8deg) saturate(1.08); }
}

@supports (animation-timeline: view()) {
  .reveal .section-kicker,
  .reveal h2,
  .reveal .terms-lead,
  .reveal .price,
  .reveal .btn.primary,
  .reveal .steps > li,
  .reveal .feature-list > li,
  .reveal .contact-grid > *,
  .reveal.pain .wrap > * {
    opacity: 1; transform: none; filter: none; transition: none;
    animation: view-rise both linear;
    animation-timeline: view();
    animation-range: entry 0% cover 32%;
    animation-delay: calc(var(--rise-i, 0) * 45ms);
  }
}
@keyframes view-rise {
  from {
    opacity: 0; filter: blur(10px);
    transform: translate3d(0, 2.5rem, 0) scale(.97);
  }
  to {
    opacity: 1; filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 900px) {
  .top > .nav { display: none; }
  .steps, .feature-list, .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero > .hero-copy {
    width: min(100% - 2rem, 40rem); margin: 0 1rem;
    padding: 1.5rem 0 2.5rem;
  }
  .hero > .hero-plane > .reply-stack { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .hero > .hero-plane { transform: none; }
  .reveal .section-kicker,
  .reveal h2,
  .reveal .terms-lead,
  .reveal .price,
  .reveal .btn.primary,
  .reveal .steps > li,
  .reveal .feature-list > li,
  .reveal .contact-grid > *,
  .reveal.pain .wrap > *,
  .hero > .hero-copy > * {
    opacity: 1; transform: none; filter: none;
    animation: none; transition: none;
  }
  .hero > .hero-plane > .sky { animation: none; }
  .hero .windows > rect, .hero .reply-card { transition: none; }
}