@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Roboto:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Bauhaus 93';
  src: url('../../assets/fonts/BAUHS93.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {

  --primary: #102a43;
  --secondary: #52606d;

  --cyan: #00aeef;
  --blue: #2563eb;
  --purple: #7c3aed;
  --green: #10b981;
  --orange: #f59e0b;
  --red: #ef4444;
  --gold: #b7791f;
  --primary-orange: #FF6600;
  --text-dark: #1A1A1A;

  --dark: #071827;

  --background: #f7faff;
  --white: #ffffff;

  --border: #dce6f2;

  --gradient:
    linear-gradient(
      135deg,
      #00aeef,
      #2563eb 55%,
      #7c3aed
    );

  --container: 1240px;

  --shadow:
    0 20px 50px rgba(16,42,67,.10);

}


/* ================= RESET ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--primary);

  background: var(--background);

  line-height: 1.6;

  overflow-x: hidden;

}


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


button {
  font: inherit;
}


/* ================= CONTAINER ================= */

.container {

  width:
    min(
      var(--container),
      calc(100% - 72px)
    );

  margin: auto;

}


/* ================= LOGO ================= */

.logo {

  display: flex;

  align-items: center;

  gap: 0;

  font-size: 28px;
  font-weight: bold;
  color: var(--text-dark);
  font-family: 'Bauhaus 93', sans-serif;
  text-decoration: none;
  letter-spacing: -1px;
  position: relative;

}

.logo span {
  color: var(--primary-orange) !important;
}


.logo-symbol {

  position: relative;

  width: 36px;
  height: 36px;

}


.logo-symbol span {

  position: absolute;

  display: block;

}


.logo-symbol span:nth-child(1) {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #ffbd00;

  left: 14px;
  top: 0;

}


.logo-symbol span:nth-child(2) {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #00aeef;

  left: 4px;
  top: 14px;

}


.logo-symbol span:nth-child(3) {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #ef4444;

  right: 2px;
  top: 14px;

}


.logo-symbol span:nth-child(4) {

  width: 14px;
  height: 20px;

  background: #10b981;

  left: 7px;
  bottom: 0;

  border-radius: 15px 15px 3px 15px;

  transform: rotate(-25deg);

}


/* ================= HEADER ================= */

.header {

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  z-index: 100;

  color: white;

  padding: 22px 0;

}

.header .logo {
  color: white;
}

.header .logo span {
  color: var(--primary-orange) !important;
}


.header-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}


.desktop-nav {

  display: flex;

  gap: 30px;

}


.desktop-nav a {

  position: relative;

  color: rgba(255,255,255,.80);

  font-size: 13px;

}


.desktop-nav a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;

  height: 2px;

  background: white;

  transition: .2s;

}


.desktop-nav a:hover::after,
.desktop-nav a.active::after {

  width: 100%;

}


.header-actions {

  display: flex;

  align-items: center;

  gap: 12px;

}


.search-button {

  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  background: rgba(255,255,255,.08);

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 50%;

  cursor: pointer;

}


.search-button span {

  width: 13px;
  height: 13px;

  border: 2px solid white;

  border-radius: 50%;

  position: relative;

}


.search-button span::after {

  content: "";

  position: absolute;

  width: 6px;
  height: 2px;

  background: white;

  transform: rotate(45deg);

  right: -5px;
  bottom: -2px;

}


.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 12px 23px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 13px;

  border: 1px solid transparent;

  transition:
    transform .2s,
    box-shadow .2s;

}


.button:hover {

  transform: translateY(-2px);

}


.button-primary {

  background: linear-gradient(135deg, var(--primary-orange), #ff8533);

  color: white;

  box-shadow:
    0 12px 30px
    rgba(255, 102, 0, .28);

}


.button-small {

  padding:
    8px 19px;

}


.button-large {

  padding:
    15px 25px;

}


.button-outline {

  color: white;

  border-color:
    rgba(255,255,255,.25);

  background:
    rgba(255,255,255,.06);

}


.mobile-menu-button {

  display: none;

  width: 40px;
  height: 40px;

  border: none;

  background: rgba(255,255,255,.08);

  border-radius: 10px;

  cursor: pointer;

  padding: 9px;

}


.mobile-menu-button span {

  display: block;

  height: 2px;

  background: white;

  margin: 4px 0;

}


.mobile-menu {

  display: none;

}


/* ================= HERO ================= */

.hero {

  position: relative;

  min-height: 770px;

  display: flex;

  align-items: center;

  overflow: hidden;

  color: white;

}


.hero-background {

  position: absolute;

  inset: 0;
/*
   background-image:  url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=2200&q=85");
*/
  background-size: cover;

  background-position: center;

  transform: scale(1.03);

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(3,17,30,.96),
      rgba(3,17,30,.78) 42%,
      rgba(3,17,30,.36)
    );


}


.hero-container {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.12fr
    .88fr;

  align-items: center;

  gap: 70px;

  padding-top: 100px;

}


.hero-content {

  max-width: 700px;

}


.eyebrow {

  color: var(--primary-orange);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .16em;

}


.hero-eyebrow {

  color: rgba(255,255,255,.72);

}


.hero h1 {

  margin-top: 16px;

  font-size:
    clamp(45px,5vw,72px);

  line-height: 1;

  letter-spacing:
    -.06em;

}


.hero h1 span {

  background:

    linear-gradient(
      90deg,
      #2dd4bf,
      #00aeef,
      #60a5fa,
      #c084fc
    );

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

}


h1 span.highlight,
h2 span.highlight {
  color: var(--primary-orange);
}


.hero-content > p {

  margin-top: 25px;

  max-width: 620px;

  color: rgba(255,255,255,.77);

  font-size: 16px;

  line-height: 1.75;

}


.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 33px;

}


.hero-message {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 32px;

  color: rgba(255,255,255,.58);

  font-size: 12px;

  font-style: italic;

}


.hero-message div {

  width: 34px;
  height: 1px;

  background:
    rgba(255,255,255,.35);

}


/* ================= HERO VISUAL ================= */

.hero-visual {

  position: relative;

  min-height: 450px;

  display: grid;

  place-items: center;

}


.ecosystem-window {

  width: 100%;

  max-width: 430px;

  padding: 20px;

  border-radius: 26px;

  background:
    rgba(3,22,40,.52);

  border:
    1px solid
    rgba(255,255,255,.17);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 40px 80px
    rgba(0,0,0,.30);

  transform:
    rotate(-2deg);

}


.window-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;

}


.window-brand {

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 12px;

}


.mini-logo {

  display: grid;

  place-items: center;

  width: 31px;
  height: 31px;

  border-radius: 9px;

  background: var(--gradient);

  font-size: 10px;

  font-weight: 800;

}


.window-status {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #22c55e;

  box-shadow:
    0 0 12px
    rgba(34,197,94,.8);

}


.window-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 10px;

}


.mini-card {

  display: flex;

  flex-direction: column;

  gap: 5px;

  padding: 14px;

  border-radius: 15px;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid
    rgba(255,255,255,.08);

  transition: .2s;

}


.mini-card:hover {

  background:
    rgba(255,255,255,.12);

  transform:
    translateY(-3px);

}


.mini-icon {

  font-size: 18px;

}


.mini-card strong {

  font-size: 12px;

}


.mini-card small {

  color:
    rgba(255,255,255,.53);

  font-size: 9px;

}


.mini-card.wide {

  grid-column:
    span 2;

}


.orange { --card: #f59e0b; }
.blue { --card: #2563eb; }
.green { --card: #10b981; }
.purple { --card: #7c3aed; }
.red { --card: #ef4444; }
.gold { --card: #b7791f; }
.cyan { --card: #00aeef; }


.mini-card {

  box-shadow:
    inset 3px 0 0
    var(--card);

}


.floating-badge {

  position: absolute;

  z-index: 5;

  padding:
    10px 14px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.10);

  border:
    1px solid
    rgba(255,255,255,.15);

  backdrop-filter:
    blur(12px);

  font-size: 11px;

}


.badge-top {

  right: -8px;

  top: 30px;

}


.badge-bottom {

  left: 0;

  bottom: 30px;

}


.scroll-indicator {

  position: absolute;

  bottom: 25px;

  left: 50%;

  transform:
    translateX(-50%);

  width: 26px;
  height: 44px;

  border:
    2px solid
    rgba(255,255,255,.35);

  border-radius: 999px;

  display: flex;

  justify-content: center;

}


.scroll-indicator span {

  margin-top: 7px;

  width: 3px;
  height: 8px;

  border-radius: 10px;

  background: white;

  animation:
    scroll 1.5s infinite;

}


@keyframes scroll {

  50% {
    transform: translateY(10px);
    opacity: .4;
  }

}


/* ================= SECTION ================= */

.section {

  padding:
    105px 0;

}


.ecosystem-section {

  background:

    radial-gradient(
      circle at 0 0,
      rgba(37,99,235,.06),
      transparent 28%
    ),

    radial-gradient(
      circle at 100% 20%,
      rgba(124,58,237,.05),
      transparent 28%
    ),

    #f8fbff;

}


.section-heading {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 40px;

  align-items: end;

  margin-bottom: 40px;

}


.section-heading h2,
.how-content h2 {

  margin-top: 8px;

  font-size:
    clamp(36px,4vw,52px);

  line-height: 1;

  letter-spacing:
    -.05em;

}


.section-heading p {

  color: var(--secondary);

  font-size: 15px;

  line-height: 1.7;

}


/* ================= CARDS ================= */

.ecosystem-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;

}


.ecosystem-card {

  min-height: 225px;

  padding: 22px;

  color: white;

  border-radius: 22px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  position: relative;

  box-shadow: var(--shadow);

  transition: .25s;

}


.ecosystem-card:hover {

  transform:
    translateY(-6px);

}


.ecosystem-card.large {

  grid-column:
    span 2;

}


.ecosystem-card.orange {
  background:
    linear-gradient(135deg,#f59e0b,#b45309);
}


.ecosystem-card.blue {
  background:
    linear-gradient(135deg,#2563eb,#1d4ed8);
}


.ecosystem-card.green {
  background:
    linear-gradient(135deg,#10b981,#047857);
}


.ecosystem-card.purple {
  background:
    linear-gradient(135deg,#7c3aed,#5b21b6);
}


.ecosystem-card.red {
  background:
    linear-gradient(135deg,#ef4444,#be123c);
}


.ecosystem-card.gold {
  background:
    linear-gradient(135deg,#b7791f,#7c4a03);
}


.ecosystem-card.cyan {
  background:
    linear-gradient(135deg,#00aeef,#155e75);
}


.card-icon {

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background:
    rgba(255,255,255,.15);

  font-size: 20px;

}


.ecosystem-card h3 {

  margin-top: 15px;

  font-size: 18px;

}


.ecosystem-card p {

  margin-top: 7px;

  font-size: 12px;

  color:
    rgba(255,255,255,.83);

  max-width: 290px;

}


.ecosystem-card span {

  display: block;

  margin-top: 14px;

  font-size: 11px;

  font-weight: 700;

}


/* ================= VALUES ================= */

.values {

  background: #eef5fb;

  border-top:
    1px solid #e4edf5;

  border-bottom:
    1px solid #e4edf5;

}


.values-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  padding: 50px 0;

}


.value {

  text-align: center;

  padding:
    10px 25px;

}


.value + .value {

  border-left:
    1px solid #d8e4ee;

}


.value-icon {

  width: 45px;
  height: 45px;

  display: grid;

  place-items: center;

  margin: auto;

  color: var(--primary-orange);

  font-size: 25px;

}


.value h3 {

  margin-top: 8px;

  font-size: 16px;

}


.value p {

  margin-top: 7px;

  font-size: 12px;

  color: var(--secondary);

}


/* ================= HOW ================= */

.how {

  background: white;

}


.how-grid {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 70px;

  align-items: center;

}


.how-description {

  margin-top: 15px;

  color: var(--secondary);

}


.steps {

  margin-top: 32px;

}


.step {

  display: grid;

  grid-template-columns:
    36px
    1fr;

  gap: 14px;

  padding:
    15px 0;

  border-bottom:
    1px solid #e8eef4;

}


.step-number {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;
  background: var(--primary-orange);

  font-weight: 800;

  font-size: 13px;

}


.step h3 {

  font-size: 15px;

}


.step p {

  margin-top: 3px;

  font-size: 12px;

  color: var(--secondary);

}


/* ================= DEVICES ================= */

.devices {

  position: relative;

  min-height: 470px;

  display: grid;

  place-items: center;

}


.laptop {

  width: 95%;

  aspect-ratio: 1.55;

  padding: 14px 14px 25px;

  border-radius:
    20px 20px 13px 13px;

  background:
    linear-gradient(
      145deg,
      #dae4ef,
      #8c9caf
    );

  box-shadow:
    0 30px 70px
    rgba(16,42,67,.20);

  transform:
    perspective(1000px)
    rotateY(-7deg);

}


.laptop-screen {

  height: 100%;

  border-radius: 12px;

  padding: 18px;

  color: white;

  background:

    linear-gradient(
      135deg,
      #0a2740,
      #0f6082,
      #172554
    );

}


.screen-top {

  display: flex;

  justify-content:
    space-between;

  font-size: 9px;

  color:
    rgba(255,255,255,.68);

}


.screen-title {

  margin-top: 38px;

  font-size: 27px;

  line-height: 1.1;

}


.screen-title strong {

  display: block;

}


.screen-cards {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 7px;

  margin-top: 25px;

}


.screen-cards div {

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  padding: 10px;

  min-height: 67px;

  background:
    rgba(255,255,255,.08);

  border-radius: 10px;

}


.screen-cards span {

  font-size: 9px;

}


/* PHONE */

.phone {

  position: absolute;

  right: -3px;

  bottom: 0;

  width: 155px;

  aspect-ratio: .5;

  padding: 9px;

  border-radius: 25px;

  background: #101b2c;

  box-shadow:
    0 25px 60px
    rgba(16,42,67,.27);

  transform:
    rotate(6deg);

}


.phone-screen {

  height: 100%;

  border-radius: 18px;

  padding:
    40px 11px
    10px;

  background: #f7faff;

}


.phone-screen small {

  color: var(--blue);

  font-weight: 800;

  font-size: 9px;

}


.phone-screen strong {

  display: block;

  margin-top: 12px;

  font-size: 14px;

  line-height: 1.1;

}


.phone-item {

  margin-top: 13px;

  padding: 10px;

  background: white;

  border-radius: 10px;

  font-size: 10px;

  box-shadow:
    0 6px 15px
    rgba(16,42,67,.08);

}


/* ================= FINAL CTA ================= */

.final-cta {

  padding:
    85px 0;

  color: white;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(0,174,239,.15),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(124,58,237,.18),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #071827,
      #0c2035
    );

}


.final-cta-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}


.final-cta h2 {

  margin-top: 8px;

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

  line-height: 1;

  letter-spacing:
    -.05em;

}


.final-cta p {

  margin-top: 15px;

  color:
    rgba(255,255,255,.68);

}


/* ================= FOOTER ================= */

.footer {

  background: #06121f;

  color:
    rgba(255,255,255,.70);

}


.footer-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding:
    32px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

}


.footer-logo {

  color: white;

}


.footer-nav {

  display: flex;

  gap: 22px;

}


.footer-nav a {

  font-size: 12px;

}


.socials {

  display: flex;

  gap: 8px;

}


.socials a {

  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  font-size: 10px;

}


.footer-bottom {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding:
    18px 0 28px;

  color:
    rgba(255,255,255,.42);

  font-size: 10px;

}


/* ================= RESPONSIVE ================= */

@media (max-width: 1050px) {

  .desktop-nav {
    gap: 17px;
  }


  .hero-container {

    grid-template-columns: 1fr;

    padding-top: 130px;

  }


  .hero-content {

    max-width: 760px;

  }


  .hero-visual {

    min-height: 380px;

  }


  .ecosystem-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .ecosystem-card.large {

    grid-column:
      span 2;

  }


  .how-grid {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 800px) {

  .container {

    width:
      calc(100% - 34px);

  }


  .desktop-nav {

    display: none;

  }


  .mobile-menu-button {

    display: block;

  }


  .mobile-menu {

    position: absolute;

    left: 17px;
    right: 17px;

    top: 75px;

    padding: 20px;

    border-radius: 18px;

    display: flex;

    flex-direction: column;

    gap: 15px;

    background:
      rgba(6,18,31,.96);

    backdrop-filter:
      blur(20px);

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-10px);

    transition: .2s;

  }


  .mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

  }


  .mobile-menu a {

    color: white;

    font-size: 14px;

  }


  .hero {

    min-height: auto;

  }


  .hero-container {

    padding:
      140px 0 80px;

  }


  .hero h1 {

    font-size: 45px;

  }


  .section-heading {

    grid-template-columns: 1fr;

    gap: 15px;

  }


  .values-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .value {

    padding: 25px 15px;

  }


  .value:nth-child(3) {

    border-left: 0;

  }


  .final-cta-content {

    flex-direction: column;

    align-items: flex-start;

  }


  .footer-top {

    flex-direction: column;

    align-items: flex-start;

  }


  .footer-bottom {

    flex-direction: column;

  }

}


@media (max-width: 560px) {

  .header-actions .search-button {

    display: none;

  }


  .hero h1 {

    font-size: 39px;

  }


  .hero-content > p {

    font-size: 14px;

  }


  .hero-buttons {

    flex-direction: column;

  }


  .hero-buttons .button {

    width: 100%;

  }


  .ecosystem-grid {

    grid-template-columns: 1fr;

  }


  .ecosystem-card.large {

    grid-column:
      span 1;

  }


  .values-grid {

    grid-template-columns: 1fr;

  }


  .value + .value {

    border-left: 0;

    border-top:
      1px solid #d8e4ee;

  }


  .devices {

    min-height: 310px;

  }


  .phone {

    width: 110px;

  }


  .screen-title {

    font-size: 19px;

  }


  .screen-cards {

    grid-template-columns:
      repeat(2,1fr);

  }


  .footer-nav {

    flex-wrap: wrap;

  }

}

.ecosystem-card {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    box-shadow .25s ease;
}

.ecosystem-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.ecosystem-card:hover {
  transform: translateY(-6px);
}