:root {
  --bg: #030504;
  --panel: #080b0a;
  --panel-soft: #0b0f0d;
  --line: #222925;
  --line-bright: #33423b;
  --text: #f2f5f3;
  --muted: #929993;
  --green: #67f86f;
  --green-dark: #173e2e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 76% 12%, rgba(88, 132, 113, .5), transparent 40%),
    radial-gradient(ellipse at 20% 45%, rgba(20, 82, 69, .55), transparent 46%),
    linear-gradient(145deg, #08211c, #145245 42%, #588471 72%, #b1e2cb);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }

.fluid-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #08211c url("/static/fluid-first-frame.webp") center / cover no-repeat;
}
.fluid-background iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .18s ease-out; }
.fluid-background iframe.is-ready { opacity: 1; }
.fluid-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(2, 5, 4, .52) 0%, rgba(2, 5, 4, .74) 38%, rgba(2, 5, 4, .94) 72%, #030504 100%),
    radial-gradient(ellipse at 50% 10%, transparent 0%, rgba(1, 3, 2, .48) 70%);
}
.site-header, main, .site-footer {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .92), 0 0 8px rgba(0, 0, 0, .62);
}

.site-header { height: 104px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 500; letter-spacing: -.04em; }
.brand > span:last-child > span { font-weight: 300; }
.brand-logo { width: 27px; height: 27px; object-fit: contain; }
.login-link { color: #fff; font-size: 15px; font-weight: 500; transition: color .2s; }
.login-link:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; gap: 42px; }

.button { min-height: 52px; padding: 0 27px; border: 1px solid var(--line-bright); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; font-weight: 600; text-shadow: none; transition: border-color .2s, background-color .2s, color .2s; }
.button:hover { border-color: var(--green); }
.button svg { width: 18px; height: 18px; }
.button-primary { color: #06120c; border-color: var(--green); background: linear-gradient(135deg, #8cff92, var(--green)); box-shadow: 0 0 30px rgba(103, 248, 111, .12); }
.button-primary:hover, .button-primary:focus-visible { color: #06120c; background: #8cff92; }
.button-outline { background: rgba(5, 8, 7, .72); }
.button-small { min-height: 46px; padding-inline: 28px; font-size: 13px; }

.hero { min-height: 630px; padding: 82px 0 75px; display: grid; grid-template-columns: .87fr 1.13fr; align-items: center; gap: 75px; position: relative; }
.eyebrow { margin: 0 0 22px; color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.hero h1 { margin: 0; font-size: clamp(45px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.055em; font-weight: 520; }
.hero-text { max-width: 500px; margin: 26px 0 40px; color: #a5aaa6; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 17px; }

.hero-visual { position: relative; min-width: 0; }
.product-window { position: relative; overflow: hidden; border: 1px solid #375044; border-radius: 16px; background: #050706; box-shadow: 0 25px 80px rgba(0,0,0,.55), 0 0 38px rgba(103, 248, 111, .09); }
.product-window img { width: 100%; height: auto; display: block; }

.section { padding-top: 94px; }
.section-heading { text-align: center; }
.section-heading .eyebrow { margin-bottom: 13px; }
.section-heading h2 { margin: 0 0 37px; font-size: clamp(30px, 3vw, 38px); font-weight: 400; letter-spacing: -.04em; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; }
.feature-card { min-height: 390px; position: relative; overflow: hidden; padding: 43px 30px; border: 1px solid #29342e; border-radius: 11px; background: linear-gradient(160deg, #080c0a, #030504); }
.feature-card::after { content: ""; position: absolute; z-index: 0; inset: 46% -25% -20%; opacity: .8; background-color: transparent; pointer-events: none; }
.feature-card > * { position: relative; z-index: 1; }
.feature-card > svg { width: 31px; height: 31px; margin-bottom: 21px; }
.feature-card h3 { margin: 0 0 15px; font-size: 18px; line-height: 1.35; font-weight: 500; }
.feature-card p { margin: 0; color: #a0a6a1; font-size: 13px; line-height: 1.75; }
.pattern-wave::after { background: radial-gradient(ellipse at 20% 95%, rgba(44, 230, 145, .35), transparent 48%), repeating-radial-gradient(ellipse at 0 100%, transparent 0 7px, rgba(60, 231, 151, .28) 8px, transparent 10px 14px); transform: rotate(12deg); }
.pattern-ring::after { background: repeating-radial-gradient(ellipse at 50% 85%, transparent 0 14px, rgba(45, 209, 132, .28) 15px 17px, transparent 18px 26px); transform: rotate(-15deg); }
.pattern-flow::after { background: radial-gradient(ellipse at 50% 80%, rgba(27, 185, 104, .38), transparent 49%), repeating-linear-gradient(165deg, transparent 0 17px, rgba(50, 211, 133, .16) 19px, transparent 23px 38px); transform: skewY(-12deg); }
.pattern-orbit::after { inset: 55% -10% -30% 25%; border-radius: 50%; background: radial-gradient(circle at center, transparent 0 38%, rgba(51, 210, 134, .12) 39% 45%, transparent 46%), radial-gradient(circle, rgba(78, 220, 151, .38) 1px, transparent 1.5px); background-size: auto, 7px 7px; }

.steps-section { padding-top: 82px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.step { min-width: 0; position: relative; text-align: center; padding: 0 50px; }
.step-number { width: 42px; height: 42px; margin: 0 auto 16px; display: grid; place-items: center; border: 1px solid #2d3530; border-radius: 50%; background: #050706; }
.step-line { position: absolute; top: 20px; left: calc(50% + 35px); width: calc(100% - 70px); height: 1px; background: #272d29; }
.step-icon { width: 78px; height: 78px; margin: 0 auto 17px; display: grid; place-items: center; border: 1px solid #2b332e; border-radius: 50%; color: var(--green); background: radial-gradient(circle, #0b100e, #050706); box-shadow: 0 12px 35px #000; }
.step-icon svg { width: 34px; height: 34px; }
.step h3 { margin: 0 0 11px; font-size: 18px; font-weight: 500; }.step p { max-width: 290px; margin: auto; color: #858c87; font-size: 13px; line-height: 1.7; }

.final-cta { min-height: 167px; margin-top: 85px; padding: 35px 55px; border: 1px solid #2a312d; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 35px; background: radial-gradient(circle at 68% 50%, rgba(51, 140, 97, .1), transparent 30%), linear-gradient(110deg, #080b0a, #0b0f0d); }
.final-cta h2 { margin: 0 0 6px; font-size: 30px; line-height: 1.2; font-weight: 400; letter-spacing: -.04em; }.final-cta p { margin: 0; color: #858c87; }
.cta-actions { display: flex; gap: 20px; flex-shrink: 0; }.cta-actions .button { min-width: 175px; }

.site-footer { min-height: 220px; padding: 70px 16px; color: #747b76; }
.footer-brand p { margin: 13px 0 20px; font-size: 12px; }.footer-brand .brand { color: #ecefec; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-copy { max-width: 690px; }
  .hero-visual { width: min(760px, 100%); margin-inline: auto; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card { min-height: 330px; }
  .final-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 30px, 620px); }
  .site-header { height: 82px; }.brand { font-size: 18px; }.login-link { display: none; }.header-actions { gap: 0; }
  .button-small { min-height: 40px; padding-inline: 17px; }
  .hero { min-height: auto; padding: 52px 0 55px; gap: 55px; }.hero h1 { font-size: clamp(39px, 12vw, 55px); }.hero-text { font-size: 15px; }.hero-actions .button { width: 100%; }
  .section { padding-top: 75px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 310px; }
  .steps { grid-template-columns: 1fr; gap: 55px; }.step-line { display: none; }
  .final-cta { margin-top: 65px; padding: 30px 25px; }.final-cta h2 { font-size: 27px; }.cta-actions { width: 100%; flex-direction: column; }.cta-actions .button { width: 100%; }
  .site-footer { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}