:root{
  --font-h: system-ui, sans-serif;
  --font-t: system-ui, sans-serif;
  --primary: #229ED9;
  --secondary: #7C3AED;
  --text-main: #E6EAF2;
  --text-secondary: #9AA4B2;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family: var(--font-t);
  background:
    radial-gradient(800px 400px at 70% 25%, rgba(34,158,217,.18), transparent 60%),
    radial-gradient(600px 300px at 20% 10%, rgba(124,58,237,.15), transparent 70%),
    linear-gradient(180deg, #0B1220, #0E1526);
  color: var(--text-main);
}

.container{
  width:min(1200px,90%);
  margin:0 auto;
}

header{
  position:fixed;
  top:0;left:0;width:100%;
  backdrop-filter: saturate(160%) blur(12px);
  background: rgba(11,18,32,0.7);
  z-index:10;
}
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}
header nav a{
  margin-right:4.0rem;
  color:var(--text-main);
  text-decoration:none;
  font-weight:600;
  font-size:clamp(16px,1.3vw,18px);
}
header nav a:last-child{margin-right:0;}

.logo img{height:70px;}

.btn{
  padding:14px 20px;
  border-radius:14px;
  font-weight:600;
  transition:transform .08s ease, box-shadow .2s ease, background .2s;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.btn--primary{
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow:0 10px 24px rgba(34,158,217,.35);
}
.btn--primary:hover{transform:translateY(-1px);}
.btn--secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:var(--text-main);
}

.hero{padding-top:120px;min-height:80vh;display:flex;align-items:center;}
.hero-container{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;}
.hero-text{flex:1 1 400px;}
.hero-image{flex:1 1 300px;}
.hero-image img{max-width:140%;border-radius:20px;}

h1{
  font-family: var(--font-h);
  font-weight:700;
  font-size:clamp(32px,5vw,56px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0 0 1rem 0;
}
h2{
  font-family: var(--font-h);
  font-weight:700;
  font-size:clamp(24px,3vw,36px);
  line-height:1.2;
  margin-top:0;
}
.subtitle{font-size:clamp(16px,1.3vw,18px);color:var(--text-secondary);margin:0 0 1.5rem 0;}

.badges{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;}
.badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:.5rem 1rem;font-size:.875rem;}

.section{padding:96px 0;}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;}
.feature-card{text-align:center;padding:1.5rem;background:rgba(255,255,255,.05);border-radius:16px;}
.feature-card svg{width:45px;height:45px;margin-bottom:1rem;color:var(--primary);}

.steps-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;counter-reset:step;}
.step{padding:1.5rem;background:rgba(255,255,255,.05);border-radius:16px;position:relative;}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-1rem;left:-1rem;background:var(--primary);color:#fff;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:600;}

.faq-item{margin-bottom:1rem;}

footer{padding:2rem 0;text-align:center;font-size:.875rem;color:var(--text-secondary);}

a.btn,
a.btn--primary {
  text-decoration: none;
}

.projects-link {
  position: relative;
}

.projects-link .tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: var(--font-t);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 5;
}

.projects-link .tooltip.show {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}


@media (max-width: 768px) {
  header {
    position: sticky;
  }
  header .container {
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
  }

  .logo img {
    height: 50px;
  }

  header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  header nav a {
    margin-right: 1rem;
  }

  header nav a:last-child {
    margin-right: 0;
  }

  .logo img {
    display: none;
  }

  .hero {
    padding-top: 110px;
  }

  .hero-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-image img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }

}