:root {
  --purple: #7524ec;
  --purple-bright: #a328ff;
  --purple-dark: #311088;
  --indigo: #170663;

  --gold: #f4c65f;

  --background: #f8f7fb;
  --surface: #ffffff;
  --surface-soft: #f2eefb;

  --text: #17131d;
  --muted: #6d6773;
  --border: #e7e1ee;

  --max-width: 1160px;

  --shadow:
    0 20px 60px
    rgba(41, 15, 102, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--text);

  background:
    var(--background);

  line-height: 1.6;
}

img {
  max-width: 100%;
}

a {
  color: var(--purple);

  text-underline-offset: 3px;
}

/* NAV */

nav {
  position: sticky;

  top: 0;

  z-index: 100;

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

  backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid
    rgba(231, 225, 238, 0.85);
}

.nav-inner {
  max-width:
    var(--max-width);

  min-height: 76px;

  margin: 0 auto;

  padding:
    0 24px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 30px;
}

.brand {
  display: flex;

  align-items: center;

  gap: 12px;

  color:
    var(--text);

  text-decoration:
    none;

  font-size: 19px;

  font-weight: 850;
}

.brand-logo {
  width: 45px;

  height: 45px;

  object-fit: cover;

  border-radius: 13px;

  box-shadow:
    0 8px 22px
    rgba(74, 23, 178, 0.22);
}

.nav-links {
  display: flex;

  align-items: center;

  gap: 26px;
}

.nav-links a {
  color:
    var(--text);

  text-decoration:
    none;

  font-size: 14px;

  font-weight: 700;
}

.nav-links a:hover {
  color:
    var(--purple);
}

/* HERO */

.hero {
  position: relative;

  overflow: hidden;

  padding:
    115px 24px
    125px;

  color: white;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(187, 48, 255, 0.72),
      transparent 33%
    ),
    radial-gradient(
      circle at 6% 96%,
      rgba(95, 44, 255, 0.65),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #18065c 0%,
      #351096 47%,
      #7722eb 100%
    );
}

.hero::after {
  content: "";

  position: absolute;

  width: 540px;
  height: 540px;

  right: -270px;
  bottom: -330px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);
}

.hero-inner {
  position: relative;

  z-index: 2;

  max-width:
    var(--max-width);

  margin:
    0 auto;
}

.hero-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(280px, 0.6fr);

  align-items: center;

  gap: 85px;
}

.hero-label {
  display:
    inline-flex;

  padding:
    8px 14px;

  margin-bottom:
    20px;

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

  border-radius:
    999px;

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

  color:
    #f7d68d;

  font-size: 12px;

  font-weight: 850;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.hero h1 {
  max-width:
    760px;

  margin:
    0 0 25px;

  font-size:
    clamp(
      48px,
      6.2vw,
      78px
    );

  line-height:
    1.01;

  letter-spacing:
    -0.05em;
}

.hero-description {
  max-width:
    670px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.82);

  font-size: 20px;

  line-height: 1.7;
}

.hero-platform-line {
  display: flex;

  flex-wrap: wrap;

  gap: 22px;

  margin-top: 25px;

  color:
    rgba(255, 255, 255, 0.9);

  font-size: 14px;

  font-weight: 700;
}

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}

.button {
  min-height: 51px;

  padding:
    0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius:
    13px;

  background:
    var(--gold);

  color:
    #24162d;

  text-decoration:
    none;

  font-weight: 850;

  box-shadow:
    0 15px 34px
    rgba(0, 0, 0, 0.2);
}

.button-secondary {
  color: white;

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

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

  box-shadow: none;
}

.hero-logo-wrap {
  display: flex;

  justify-content: center;

  align-items: center;
}

.hero-logo {
  width:
    min(340px, 100%);

  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 26%;

  transform:
    rotate(2deg);

  box-shadow:
    0 40px 90px
    rgba(0, 0, 0, 0.4),
    0 0 85px
    rgba(180, 49, 255, 0.38);
}

/* GENERAL */

section {
  padding:
    90px 24px;
}

.container {
  max-width:
    var(--max-width);

  margin:
    0 auto;
}

.section-kicker {
  margin-bottom:
    10px;

  color:
    var(--purple);

  font-size:
    12px;

  font-weight:
    850;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}

.section-title {
  max-width:
    730px;

  margin:
    0 0 16px;

  font-size:
    clamp(
      35px,
      4vw,
      48px
    );

  line-height: 1.1;

  letter-spacing:
    -0.04em;
}

.section-intro {
  max-width:
    720px;

  margin:
    0 0 42px;

  color:
    var(--muted);

  font-size: 18px;
}

/* INTRO */

.intro-section {
  background: white;
}

.intro-layout {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 70px;

  align-items: center;
}

.intro-copy {
  margin: 0;

  color:
    var(--muted);

  font-size: 19px;

  line-height: 1.8;
}

/* FEATURES */

.features-section {
  background:
    var(--background);
}

.feature-grid {
  display: grid;

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

  gap: 20px;
}

.feature-card {
  min-height: 235px;

  padding: 28px;

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

  border-radius: 22px;

  background:
    white;

  box-shadow:
    0 7px 28px
    rgba(42, 14, 99, 0.045);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.feature-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 18px 45px
    rgba(42, 14, 99, 0.10);
}

.feature-icon {
  width: 52px;

  height: 52px;

  margin-bottom: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #efe7ff,
      #ddd0ff
    );

  font-size: 26px;
}

.feature-card h3 {
  margin:
    0 0 9px;

  color:
    #32117e;

  font-size: 20px;
}

.feature-card p {
  margin: 0;

  color:
    var(--muted);
}

/* PLATFORMS */

.platform-section {
  color: white;

  background:
    linear-gradient(
      135deg,
      #16065b,
      #33108c,
      #6f22e0
    );
}

.platform-header {
  max-width: 720px;

  margin:
    0 auto 55px;

  text-align: center;
}

.light-kicker {
  color:
    #f2d183;
}

.platform-title {
  margin:
    0 0 18px;

  font-size:
    clamp(
      39px,
      5vw,
      58px
    );

  line-height: 1.05;

  letter-spacing:
    -0.045em;
}

.platform-intro {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.78);

  font-size: 18px;
}

.platform-grid {
  display: grid;

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

  gap: 26px;

  align-items: center;
}

.platform-card {
  min-height: 310px;

  padding: 32px;

  text-align: center;

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

  border-radius: 26px;

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

  backdrop-filter:
    blur(10px);
}

.platform-device {
  display: inline-block;

  padding:
    6px 12px;

  border-radius:
    999px;

  color:
    rgba(255, 255, 255, 0.72);

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

  font-size: 12px;

  font-weight: 800;

  text-transform:
    uppercase;

  letter-spacing:
    0.09em;
}

.platform-symbol {
  height: 90px;

  margin:
    24px 0 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 62px;

  font-weight: 700;
}

.platform-card h3 {
  margin:
    0 0 10px;

  font-size: 22px;
}

.platform-card p {
  max-width: 300px;

  margin:
    0 auto;

  color:
    rgba(255, 255, 255, 0.72);
}

.platform-middle {
  text-align: center;
}

.platform-app-icon {
  width: 150px;

  border-radius: 30%;

  box-shadow:
    0 30px 65px
    rgba(0, 0, 0, 0.34);
}

.platform-one-app {
  margin-top: 22px;

  color:
    rgba(255, 255, 255, 0.92);

  font-size: 18px;

  font-weight: 800;

  line-height: 1.5;
}

/* WORKFLOW */

.workflow-section {
  background: white;
}

.workflow {
  margin-top: 48px;
}

.workflow-item {
  display: grid;

  grid-template-columns:
    58px 1fr;

  gap: 22px;

  max-width: 700px;

  align-items: start;
}

.workflow-number {
  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--purple-bright)
    );

  font-size: 20px;

  font-weight: 850;
}

.workflow-item strong {
  font-size: 19px;
}

.workflow-item p {
  margin:
    5px 0 0;

  color:
    var(--muted);
}

.workflow-line {
  width: 2px;

  height: 35px;

  margin:
    8px 0 8px 25px;

  background:
    #ded4ef;
}

/* BETA */

.beta-section {
  background:
    #f2eef9;
}

.beta-card {
  display: grid;

  grid-template-columns:
    130px 1fr;

  gap: 35px;

  align-items: center;

  padding: 42px;

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

  border-radius: 28px;

  background: white;

  box-shadow:
    var(--shadow);
}

.beta-logo {
  width: 130px;

  border-radius: 28%;
}

.beta-copy h2 {
  margin:
    0 0 10px;

  font-size: 32px;

  letter-spacing:
    -0.03em;
}

.beta-copy p {
  max-width: 700px;

  margin: 0;

  color:
    var(--muted);

  font-size: 17px;
}

/* PRIVACY / TERMS */

.policy {
  max-width: 880px;

  margin: 0 auto;

  padding:
    75px 24px
    110px;
}

.policy h1 {
  margin:
    0 0 8px;

  color:
    #32117e;

  font-size:
    clamp(
      40px,
      6vw,
      56px
    );

  line-height: 1.08;

  letter-spacing:
    -0.04em;
}

.policy h2 {
  margin-top: 44px;

  color:
    #32117e;

  font-size: 24px;
}

.policy p,
.policy li {
  color:
    #504a56;
}

.policy .updated {
  margin-bottom: 36px;

  color:
    var(--muted);
}

.policy li {
  margin-bottom: 9px;
}

.notice-box {
  margin:
    30px 0;

  padding:
    20px 22px;

  border:
    1px solid
    #ddd2fa;

  border-radius: 16px;

  background:
    #f6f2ff;
}

/* FOOTER */

footer {
  padding:
    45px 24px;

  color:
    rgba(255, 255, 255, 0.7);

  background:
    #140a29;
}

.footer-inner {
  max-width:
    var(--max-width);

  margin:
    0 auto;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 30px;
}

.footer-brand {
  display: flex;

  align-items: center;

  gap: 12px;
}

.footer-logo {
  width: 43px;

  height: 43px;

  object-fit: cover;

  border-radius: 12px;
}

.footer-links {
  display: flex;

  flex-wrap: wrap;

  gap: 20px;
}

.footer-links a {
  color: white;
}

/* TABLET */

@media (
  max-width: 850px
) {

  .hero-layout {
    grid-template-columns:
      1fr;

    gap: 50px;
  }

  .hero-logo-wrap {
    order: -1;
  }

  .hero-logo {
    width: 215px;

    transform: none;
  }

  .hero {
    padding-top: 80px;

    padding-bottom: 90px;
  }

  .intro-layout {
    grid-template-columns:
      1fr;

    gap: 20px;
  }

  .feature-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .platform-grid {
    grid-template-columns:
      1fr;
  }

  .platform-middle {
    padding:
      15px 0;
  }

}

/* MOBILE */

@media (
  max-width: 620px
) {

  .nav-inner {
    min-height: 68px;

    padding:
      0 16px;
  }

  .brand {
    font-size: 15px;
  }

  .brand-logo {
    width: 38px;

    height: 38px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-links a {
    font-size: 12px;
  }

  .nav-links a:first-child,
  .nav-links a:nth-child(2) {
    display: none;
  }

  section {
    padding:
      70px 20px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-description {
    font-size: 17px;
  }

  .feature-grid {
    grid-template-columns:
      1fr;
  }

  .beta-card {
    grid-template-columns:
      1fr;

    padding: 30px;
  }

  .beta-logo {
    width: 95px;
  }

  .footer-inner {
    flex-direction:
      column;
  }

}