/* =========================================================
   Superb Aero — app landing page
   Faithful, compiled rebuild of superbaero.com/draft/app-landing-page
   One stylesheet · no framework · no JavaScript · self-hosted fonts.
   Breakpoints mirror the original Webflow set: 991 / 767 / 479.
   ========================================================= */

/* ---------- Fonts (self-hosted, latin) ---------- */

/* Epilogue — variable file covers weights 400–800 used on this page */
@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/epilogue-var.woff2") format("woff2");
}

/* Droid Sans — body paragraph font (subhead + footer) */
@font-face {
  font-family: "Droid Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/droid-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Droid Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/droid-sans-700.woff2") format("woff2");
}

/* ---------- Design tokens (resolved from the original) ---------- */

:root {
  --bg:           #080a0d;   /* page / body background        */
  --card-bg:      #0f141a;   /* card surface                  */
  --badge-bg:     #182129;   /* button hover surface          */
  --blue:         #0063f2;   /* brand primary                 */
  --blue-glow:    #0163f280; /* card-1 decoration glow         */
  --yellow:       #e1aa33;   /* brand secondary               */
  --heading:      #ebf2fc;   /* heading text                  */
  --body:         #99a2ad;   /* body text                     */
  --contact:      #f2f6fc;   /* contact paragraph             */

  --radius-card:  32px;      /* large-card radius (→24px ≤991) */
  --radius-full:  999px;
  --container:    80rem;

  --font-heading: "Epilogue", Tahoma, sans-serif;
  --font-body:    "Droid Sans", sans-serif;
}

/* ---------- Base / normalize ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border: 0;
}

ul {
  margin: 0;
}

/* ---------- Layout shell ---------- */

.section_solutions {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.container-large {
  max-width: var(--container);
  margin-inline: auto;
}

/* .app_component — side padding kicks in ≤991px */

/* ---------- Header ---------- */

.app_header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.app_logo-wrapper {
  margin-bottom: 3rem;
  padding: 10px;
}

.app_logo {
  width: 120px;
  height: auto;
}

.app_heading {
  margin: 0 0 1rem;
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -2px;
}

/* .app_subhead inherits body (Droid Sans · weight 300 → 400 · --body) */

/* ---------- Cards grid ---------- */

.app_layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 900px;
  max-width: 100%;
  margin: 3rem auto 0;
}

.app_card-wrapper {
  display: flex;
  justify-content: flex-end;
}

.app_card-wrapper.second {
  justify-content: flex-start;
}

.app_card {
  position: relative;
  width: 100%;
  max-width: 393px;
  height: 100%;
  padding: 6rem 4rem;
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* ---------- Card decorations ---------- */

/* blurred colour glow (card 1 blue · card 2 yellow) */
.asset_card-decoration {
  position: absolute;
  top: auto;
  left: 17%;
  right: 0;
  width: 303px;
  height: 303px;
  border-radius: 100%;
  background-color: var(--blue-glow);
  filter: blur(150px);
  pointer-events: none;
}

.asset_card-decoration.is-yellow {
  background-color: var(--yellow);
}

/* full-cover card surface + grain noise texture (sits behind content) */
.card-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--card-bg);
  pointer-events: none;
}

.card-background.card-imapct {
  background-color: #0f141ab3;
  background-image: url("images/noise.svg");
  background-size: auto;
}

/* ---------- Spacing utilities ---------- */

.app_margin-bottom-2  { margin-bottom: 2rem; }
.app_margin-bottom-1-5 { margin-bottom: 1.5rem; }
.margin-bottom-2      { margin-bottom: 2rem; }
.margin-bottom-1-5    { margin-bottom: 1.5rem; }
.margin-bottom-0      { margin-bottom: 0; }

/* ---------- Tag ---------- */

.app_tag {
  display: inline-block;
  padding: 8px 10px 6px;
  border-radius: 6px;
  background-color: var(--blue);
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
}

.app_tag.is-yellow {
  background-color: var(--yellow);
  color: var(--bg);
}

/* ---------- Card title ---------- */

.app_h3 {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.15;
}

/* ---------- Feature list ---------- */

.app_list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service_card_list-item {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
}

.icon-1x1-small {
  flex: 0 0 auto;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-flex;
}

.icon-1x1-small svg {
  width: 100%;
  height: 100%;
}

.text-size-regular {
  margin: 0;
  color: var(--body);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
}

/* ---------- Buttons ---------- */

.app_button {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 18px 24px 14px;
  border-radius: var(--radius-full);
  background-color: var(--blue);
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  cursor: pointer;
}

.app_button:hover {
  background-color: var(--badge-bg);
}

.app_button.is-yellow {
  background-color: var(--yellow);
  color: var(--card-bg);
}

.app_button.is-yellow:hover {
  background-color: #fff;
}

/* ---------- Store badges ---------- */

.app_download {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 64px;
}

.app_download_left {
  display: flex;
}

.app_download_left.is-left {
  justify-content: flex-end;
}

.app_download_left.is-right {
  flex-direction: column;
  align-items: flex-start;
}

.download_link {
  display: inline-flex;
  max-width: 100%;
}

.donwload_logo {
  max-width: 100%;
  height: auto;
}

/* ---------- Contact + CTA ---------- */

.app_bottom-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
}

.app_contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.app_contact-paragraph {
  max-width: 530px;
  color: var(--contact);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.app_button-group {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* ---------- Footer ---------- */

.app_footer-wrapper {
  margin-top: 4rem;
}

.app_footer-text {
  margin: 0;
  text-align: center;
}

/* =========================================================
   Responsive — original Webflow breakpoints
   ========================================================= */

@media (max-width: 991px) {
  :root {
    --radius-card: 24px;
  }

  .app_component {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .app_heading {
    font-weight: 600;
  }

  .app_layout-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 500px;
  }

  .app_card-wrapper {
    width: 100%;
    max-width: 390px;
  }

  .app_card {
    padding-top: 3.9rem;
    padding-bottom: 3.9rem;
  }
}

@media (max-width: 767px) {
  .app_logo {
    width: 100px;
  }

  .app_heading {
    margin-bottom: 0.125rem;
    font-size: 2.5rem;
  }

  .app_layout-grid {
    margin-top: 2rem;
  }

  .section_solutions {
    padding-top: 0.75rem;
  }

  .app_logo-wrapper {
    margin-bottom: 1rem;
  }

  .app_card {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .app_tag {
    font-size: 0.75rem;
  }

  .app_margin-bottom-2 {
    margin-bottom: 1.5rem;
  }

  .app_margin-bottom-1-5 {
    margin-bottom: 1rem;
  }
}

@media (max-width: 479px) {
  .app_heading {
    font-size: 2rem;
  }

  .app_card {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .app_button {
    text-align: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .app_button-group {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .app_contact-paragraph {
    font-size: 24px;
  }

  .app_download-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =========================================================
   Safari & iOS clipping fix  (kept verbatim — do not remove)
   Fixes the WebKit border-radius clipping bug on a rounded,
   overflow-hidden card that contains blurred/absolute children.
   ========================================================= */

/* 1. Force hardware acceleration + a clean stacking context on the card */
.app_card {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  isolation: isolate;
}

/* 2. Keep text and buttons above the decorations */
.app_card > div:not(.asset_card-decoration):not(.card-background) {
  position: relative;
  z-index: 2;
}

/* 3. Keep decorations behind the content and non-interactive */
.asset_card-decoration,
.card-background {
  pointer-events: none;
}