:root{
  --bg:#0f1720; --bg-alt:#1b1e25; --card:#171923; --accent:#6abcff; --muted:#9aa6bf; --text:#e6eef8; --gradient-start: #6a5acd; --gradient-end: #4d9a96;
  --maxw:1100px; --radius:12px; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{color:var(--text);-webkit-font-smoothing:antialiased}
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(
    400px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
    rgba(59, 56, 116, 0.08), /* More subtle purple glow effect */
    transparent 60%
  );
  z-index: 0;
  pointer-events: none; /* Allows clicking through this layer */
}

/* Header styles */
.logo{display:flex;gap:12px;align-items:center; text-decoration: none; color: var(--text);}
.logo-icon {
  width: 44px;
  height: 44px;
  transition: transform 0.3s ease-out;
}
.logo:hover .logo-icon {
  transform: rotate(-10deg) scale(1.1);
}
.logo-subtitle { font-size: 12px; color: var(--muted); }
.logo h1{font-size:18px;margin:0}

nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-size:15px; transition: color 0.2s ease-out, background-color 0.2s ease-out, padding 0.2s ease-out; padding: 8px 12px; border-radius: 8px;}
nav a:hover { color: var(--text); background-color: rgba(255,255,255,0.05); }

/* Typography enhancements */
h2 {
  position: relative;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, var(--accent), var(--gradient-end));
  border-radius: 2px;
}

h3 {
  font-size: 28px;
  line-height: 1.3;
  position: relative;
  font-weight: 600;
  margin-top: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

h3::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, var(--accent), var(--gradient-end));
  border-radius: 2px;
}

h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

p {
  font-size: 16px;
  line-height: 1.6;
  position: relative;
  margin: 0 0 16px 0;
}

.section-title {
  position: relative;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 20px 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--accent), var(--gradient-end));
  border-radius: 2px;
}

/* Hero styles */
.hero-content { flex: 1; display: flex; align-items: center; justify-content: center; }
.hero-text { max-width: 480px; text-align: left; }
.hero h2{font-size:42px;margin:0 0 12px; line-height: 1.2; font-weight: 700; background: linear-gradient(to right, var(--text), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; text-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.hero h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 3px; background: linear-gradient(to right, var(--accent), var(--gradient-end)); border-radius: 2px; }
.hero p{color:var(--muted);margin:0 0 20px;line-height:1.5}
.cta{display:flex;gap:12px; justify-content: flex-start;}
.btn{padding:12px 24px;border-radius:10px;font-weight:600;border:0;cursor:pointer; transition: transform 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out; text-decoration: none; display: inline-block;}
.btn:hover { transform: translateY(-2px); }
.btn-primary{background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color: white; box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4); transition: all 0.3s ease; }
.btn-primary:hover { box-shadow: 0 8px 25px rgba(106, 90, 205, 0.6); transform: translateY(-3px); }
.btn-large {
  padding: 16px 32px;
  font-size: 18px;
  /* Объединяем transition в одно объявление для предотвращения задержек */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(106, 90, 205, 0.6);
}
.btn-ghost{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--text); transition: all 0.3s ease; }
.btn-ghost:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.meta{display:flex;gap:10px;color:var(--muted);font-size:13px;margin-top:14px; justify-content: flex-start;}

.hero-image-container {
  flex: 1.4; /* Give more space to the container on the screen */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0.5;
  z-index: 1;
}
.hero-app-image { /* Now applies to video */
  position: relative;
  z-index: 2;
  width: 95%; /* Increase video size inside the container */
  height: auto; /* Let video aspect ratio determine height */
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
  aspect-ratio: 16 / 9;
  transition: box-shadow 0.4s ease; /* Removed transform transition to prevent shaking */
}
.hero-app-image:hover {
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5);
}