@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #10132b;
  --ink-soft: #565b78;
  --paper: #fbfbff;
  --white: #fff;
  --line: #e8e8f3;
  --coral: #ff657d;
  --violet: #705cff;
  --mint: #29d9b2;
  --sun: #ffe071;
  --shadow: 0 24px 70px rgba(24, 28, 66, .12);
  --radius: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 101, 125, .13), transparent 31rem),
    radial-gradient(circle at 95% 11%, rgba(41, 217, 178, .12), transparent 30rem),
    var(--paper);
  font: 16px/1.65 "DM Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 251, 255, .82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232, 232, 243, .75);
}

.nav { min-height: 82px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: Manrope, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.04em; }
.brand img { width: 44px; height: 44px; }
.brand-dot { color: var(--violet); }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; color: var(--ink-soft); font-weight: 600; font-size: 14px; }
.nav-links a:hover { color: var(--ink); }
.lang { display: flex; align-items: center; gap: 6px; margin-left: 2px; }
.lang a { padding: 7px 9px; border-radius: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.lang a[aria-current="page"] { color: var(--ink); background: var(--white); box-shadow: 0 4px 18px rgba(22, 24, 57, .08); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 15px; font-weight: 700; transition: .2s ease; }
.button-primary { color: #fff; background: var(--ink); box-shadow: 0 12px 28px rgba(16, 19, 43, .2); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16, 19, 43, .26); }
.button-secondary { background: rgba(255, 255, 255, .72); border-color: var(--line); }
.button-secondary:hover { border-color: #cfcfe4; background: #fff; }
.button svg { width: 18px; height: 18px; }

.hero { padding: 94px 0 70px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr); align-items: center; gap: 75px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 8px 13px; color: #5143b8; background: rgba(112, 92, 255, .1); border: 1px solid rgba(112, 92, 255, .15); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 5px rgba(41, 217, 178, .14); }
h1, h2, h3 { margin: 0; font-family: Manrope, sans-serif; line-height: 1.08; letter-spacing: -.055em; }
h1 { max-width: 770px; font-size: clamp(55px, 6.9vw, 91px); }
.hero-accent { color: transparent; background: linear-gradient(95deg, var(--coral), var(--violet) 55%, #19bfa0); background-clip: text; -webkit-background-clip: text; }
.hero-copy { max-width: 650px; margin: 28px 0 0; color: var(--ink-soft); font-size: 19px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.microcopy { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #777b94; font-size: 13px; font-weight: 600; }
.microcopy span::before { content: "✓"; margin-right: 7px; color: #12a98c; }

.product-stage { position: relative; min-height: 560px; display: grid; place-items: center; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-a { width: 390px; height: 390px; background: linear-gradient(135deg, rgba(255,101,125,.25), rgba(112,92,255,.19)); }
.orb-b { width: 220px; height: 220px; right: -20px; bottom: 30px; background: rgba(41,217,178,.2); }
.dashboard {
  position: relative;
  width: min(100%, 520px);
  padding: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 32px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transform: rotate(1.5deg);
}
.dash-head { display: flex; align-items: center; gap: 11px; padding: 5px 3px 18px; }
.dash-logo { width: 37px; height: 37px; }
.dash-title strong { display: block; font-family: Manrope, sans-serif; font-size: 13px; }
.dash-title span { color: #8b8da3; font-size: 11px; }
.dash-status { margin-left: auto; padding: 7px 10px; color: #087b67; background: #dffbf4; border-radius: 999px; font-size: 10px; font-weight: 800; }
.dash-body { padding: 24px; background: #11152f; border-radius: 23px; color: #fff; }
.campaign-line { display: flex; align-items: start; gap: 18px; }
.campaign-line h3 { font-size: 22px; letter-spacing: -.035em; }
.campaign-line p { margin: 7px 0 0; color: #aeb3cf; font-size: 12px; }
.send-pill { margin-left: auto; padding: 9px 12px; background: var(--coral); border-radius: 11px; font-size: 10px; font-weight: 800; }
.chart { height: 170px; display: flex; align-items: end; gap: 9px; margin-top: 28px; padding: 20px 18px 0; background: rgba(255,255,255,.05); border-radius: 18px; }
.bar { flex: 1; min-height: 24px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #8171ff, #5141ce); }
.bar:nth-child(3n+2) { background: linear-gradient(180deg, #49e5c4, #13a98c); }
.bar:nth-child(4n) { background: linear-gradient(180deg, #ff788d, #d84661); }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.stat { padding: 14px; color: #aeb3cf; background: rgba(255,255,255,.06); border-radius: 14px; font-size: 10px; }
.stat strong { display: block; margin-top: 4px; color: #fff; font-family: Manrope, sans-serif; font-size: 19px; }
.float-card { position: absolute; padding: 14px 17px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 45px rgba(20,23,55,.13); font-size: 12px; font-weight: 700; }
.float-card span { display: block; color: #8b8da3; font-size: 10px; font-weight: 600; }
.float-a { top: 35px; right: -25px; transform: rotate(-4deg); }
.float-b { left: -35px; bottom: 80px; transform: rotate(3deg); }
.float-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--mint); border-radius: 50%; }

.trust { padding: 18px 0 75px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 20px; overflow: hidden; }
.trust-item { padding: 22px 25px; font-size: 13px; font-weight: 700; text-align: center; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }

.section { padding: 105px 0; }
.section-tint { background: #11152f; color: #fff; }
.section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.kicker { margin: 0 0 15px; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h2 { font-size: clamp(38px, 5vw, 62px); }
.section-lead { max-width: 620px; margin: 0 0 7px; color: var(--ink-soft); font-size: 18px; }
.section-tint .section-lead { color: #aeb3cf; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.feature { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: .2s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(25,28,61,.08); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 25px; border-radius: 15px; background: #f0eeff; color: var(--violet); }
.feature:nth-child(2) .feature-icon { background: #e4fbf5; color: #089d80; }
.feature:nth-child(3) .feature-icon { background: #fff0f3; color: #df405d; }
.feature:nth-child(4) .feature-icon { background: #fff7d7; color: #977100; }
.feature-icon svg { width: 23px; height: 23px; }
.feature h3 { font-size: 24px; }
.feature p { margin: 13px 0 0; color: var(--ink-soft); }

.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; counter-reset: step; }
.step { position: relative; min-height: 285px; padding: 34px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); counter-increment: step; }
.step::before { content: "0" counter(step); display: block; margin-bottom: 55px; color: var(--mint); font: 800 13px/1 Manrope, sans-serif; }
.step h3 { font-size: 26px; }
.step p { margin: 14px 0 0; color: #aeb3cf; }

.open-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.open-card { padding: 34px; background: linear-gradient(145deg, #fff, #f4f3ff); border: 1px solid var(--line); border-radius: 34px; box-shadow: var(--shadow); }
.code-line { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); color: #676b85; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.code-line:last-child { border: 0; }
.code-check { width: 25px; height: 25px; display: grid; place-items: center; color: #087b67; background: #dffbf4; border-radius: 8px; font-family: inherit; }
.open-copy p { color: var(--ink-soft); font-size: 18px; }
.open-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.open-list li { display: flex; align-items: center; gap: 11px; font-weight: 700; }
.open-list li::before { content: ""; width: 9px; height: 9px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,101,125,.12); }

.cta { padding: 30px 0 105px; }
.cta-box { position: relative; padding: 68px; background: linear-gradient(125deg, #6651f1 0%, #7b63ff 48%, #26cba9 120%); color: #fff; border-radius: 38px; overflow: hidden; box-shadow: 0 30px 80px rgba(83,66,200,.25); }
.cta-box::after { content: ""; position: absolute; width: 270px; height: 270px; right: -60px; top: -100px; border: 45px solid rgba(255,255,255,.1); border-radius: 50%; }
.cta-box h2 { max-width: 750px; }
.cta-box p { max-width: 650px; margin: 20px 0 30px; color: rgba(255,255,255,.8); font-size: 18px; }
.cta-box .button-primary { color: var(--ink); background: #fff; }

.site-footer { padding: 38px 0 50px; border-top: 1px solid var(--line); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-note { color: #797d96; font-size: 13px; }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .lang { margin-left: auto; }
  .hero { padding-top: 70px; }
  .hero-grid, .section-head, .open-grid { grid-template-columns: 1fr; gap: 45px; }
  .product-stage { min-height: 500px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-item:nth-child(4) { border-top: 1px solid var(--line); }
  .section-head { align-items: start; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  .step::before { margin-bottom: 35px; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 28px, 1160px); }
  .site-header .button { display: none; }
  .nav { min-height: 72px; gap: 12px; }
  .brand span { display: none; }
  .brand img { width: 42px; height: 42px; }
  .lang a { padding: 7px; }
  .hero { padding: 54px 0 45px; }
  h1 { font-size: clamp(47px, 15vw, 66px); }
  .hero-copy { font-size: 17px; }
  .hero-actions .button { width: 100%; }
  .product-stage { min-height: 390px; margin-top: 10px; }
  .dashboard { padding: 12px; border-radius: 25px; }
  .dash-body { padding: 18px; }
  .chart { height: 125px; padding-inline: 12px; }
  .float-a { right: -5px; top: 4px; }
  .float-b { left: -5px; bottom: 28px; }
  .trust { padding-bottom: 45px; }
  .trust-grid, .feature-grid { grid-template-columns: 1fr; }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--line); }
  .section { padding: 75px 0; }
  .feature { padding: 26px; }
  .cta-box { padding: 42px 27px; border-radius: 29px; }
  .footer-grid { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}