/* ===== Block 1 ===== */




:root {

  --bg-primary: #ffffff;

  --bg-secondary: #f7f9fc;

  --bg-card: #ffffff;

  --bg-dark: #0a2540;

  --text-primary: #0a2540;

  --text-secondary: #425466;

  --text-light: #6b7c93;

  --accent: #635bff;

  --accent-light: #7a73ff;

  --accent-blue: #00d4ff;

  --accent-green: #00d924;

  --gradient-accent: linear-gradient(135deg, #635bff, #00d4ff);

  --gradient-cta: linear-gradient(135deg, #635bff, #4b83ff);

  --border: #e3e8ee;

  --border-light: #f0f3f7;

  --radius: 14px;

  --radius-sm: 8px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);

  --shadow: 0 4px 16px rgba(0,0,0,0.06);

  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);

  --shadow-hover: 0 12px 40px rgba(99,91,255,0.12);

}



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



html { scroll-behavior: smooth; }



body {

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

  background: var(--bg-primary);

  color: var(--text-primary);

  line-height: 1.6;

  font-size: 16px;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}



/* Header */

header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  backdrop-filter: blur(20px);

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

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  transition: all 0.3s ease;

}



header.scrolled {

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 72px;

}



.brand {

  display: flex;

  align-items: center;

  text-decoration: none;

  color: var(--text-primary);

  font-weight: 700;

}



.brand-logo {

  height: 36px;

  width: auto;

}



.nav-desktop {

  display: flex;

  gap: 40px;

  align-items: center;

}



.nav-desktop a {

  text-decoration: none;

  color: var(--text-secondary);

  font-size: 14px;

  font-weight: 500;

  transition: color 0.2s ease;

}



.nav-desktop a:hover {

  color: var(--accent);

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 24px;

}



.lang-switch {

  display: flex;

  gap: 16px;

  align-items: center;

}



.lang-switch a {

  text-decoration: none;

  color: var(--text-light);

  font-size: 13px;

  font-weight: 500;

  transition: color 0.2s ease;

}



.lang-switch a.lang-active {

  color: var(--accent);

  font-weight: 600;

}



.lang-switch a:hover {

  color: var(--accent);

}



.btn-phone {

  display: flex;

  align-items: center;

  gap: 8px;

  text-decoration: none;

  color: var(--text-primary);

  font-size: 14px;

  font-weight: 600;

  padding: 10px 20px;

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

  border-radius: 50px;

  transition: all 0.2s ease;

}



.btn-phone:hover {

  border-color: var(--accent);

  color: var(--accent);

}



.phone-icon {

  width: 16px;

  height: 16px;

  stroke: currentColor;

  stroke-width: 2;

}



.hamburger {

  display: none;

  flex-direction: column;

  background: none;

  border: none;

  cursor: pointer;

  gap: 6px;

  padding: 8px;

}



.hamburger span {

  width: 24px;

  height: 2px;

  background: var(--text-primary);

  border-radius: 1px;

  transition: all 0.3s ease;

}



.nav-mobile {

  display: none;

  flex-direction: column;

  gap: 16px;

  padding: 24px;

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

}



.nav-mobile a {

  text-decoration: none;

  color: var(--text-secondary);

  font-weight: 500;

  transition: color 0.2s ease;

}



.nav-mobile a:hover {

  color: var(--accent);

}



/* Main content - add top padding for fixed header */

main {

  margin-top: 72px;

}



/* Buttons */

.btn-primary {

  display: inline-block;

  background: var(--gradient-cta);

  color: white;

  padding: 14px 30px;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 600;

  font-size: 14px;

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 4px 16px rgba(99, 91, 255, 0.3);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(99, 91, 255, 0.4);

}



.btn-secondary {

  display: inline-block;

  background: white;

  color: var(--accent);

  padding: 14px 30px;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 600;

  font-size: 14px;

  border: 2px solid var(--accent);

  cursor: pointer;

  transition: all 0.3s ease;

}



.btn-secondary:hover {

  background: var(--accent);

  color: white;

}



/* Section spacing */

section {

  padding: 80px 0;

}



section.hero {

  padding: 120px 0;

}



.section-title {

  font-size: clamp(2rem, 4vw, 2.8rem);

  font-weight: 700;

  margin-bottom: 24px;

  color: var(--text-primary);

}



.section-subtitle {

  font-size: 18px;

  color: var(--text-secondary);

  margin-bottom: 48px;

  max-width: 600px;

}



/* Cards */

.card {

  background: var(--bg-card);

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

  border-radius: var(--radius);

  padding: 32px;

  transition: all 0.3s ease;

}



.card:hover {

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

  transform: translateY(-4px);

  border-color: var(--accent);

}



.card-title {

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 16px;

  color: var(--text-primary);

}



.card-description {

  color: var(--text-secondary);

  font-size: 14px;

  line-height: 1.7;

}



.card-price {

  font-size: 28px;

  font-weight: 700;

  color: var(--accent);

  margin: 20px 0;

}



/* Grid layouts */

.grid-2 {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 32px;

}



.grid-3 {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 32px;

}



.grid-4 {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 24px;

}



/* Stats */

.stats {

  background: var(--bg-dark);

  color: white;

  padding: 60px 0;

}



.stats .grid-4 {

  text-align: center;

}



.stat-number {

  font-size: clamp(2.5rem, 5vw, 3.5rem);

  font-weight: 700;

  background: var(--gradient-accent);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.stat-label {

  font-size: 14px;

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

  margin-top: 12px;

}



/* Footer */

footer {

  background: var(--bg-dark);

  color: white;

  padding: 60px 0 20px;

}



footer .container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 48px;

  margin-bottom: 48px;

}



.footer-column h3 {

  font-size: 14px;

  font-weight: 700;

  margin-bottom: 20px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.footer-column ul {

  list-style: none;

}



.footer-column ul li {

  margin-bottom: 12px;

}



.footer-column a {

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

  text-decoration: none;

  font-size: 14px;

  transition: color 0.2s ease;

}



.footer-column a:hover {

  color: white;

}



.footer-logo {

  height: 32px;

  width: auto;

  filter: brightness(0) invert(1);

  margin-bottom: 16px;

}



.footer-description {

  font-size: 13px;

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

  line-height: 1.6;

}



.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 24px;

  text-align: center;

  font-size: 13px;

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

}



/* Forms */

.form-group {

  margin-bottom: 20px;

}



.form-group label {

  display: block;

  margin-bottom: 8px;

  font-weight: 600;

  font-size: 14px;

  color: var(--text-primary);

}



.form-group input,

.form-group textarea,

.form-group select {

  width: 100%;

  padding: 12px 16px;

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

  border-radius: var(--radius-sm);

  font-size: 14px;

  font-family: inherit;

  transition: all 0.2s ease;

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

  outline: none;

  border-color: var(--accent);

  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);

}



.form-group textarea {

  resize: vertical;

  min-height: 120px;

}



.form-container {

  max-width: 600px;

  margin: 0 auto;

}



/* Scroll reveal animation */

.reveal {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Features list */

.features-list {

  list-style: none;

  margin: 24px 0;

}



.features-list li {

  padding: 12px 0;

  padding-left: 32px;

  position: relative;

  color: var(--text-secondary);

  font-size: 14px;

}



.features-list li:before {

  content: "✓";

  position: absolute;

  left: 0;

  color: var(--accent-green);

  font-weight: bold;

  font-size: 18px;

}



/* Hero section */

.hero {

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 48px;

}



.hero-content h1 {

  font-size: clamp(2.5rem, 5vw, 3.5rem);

  font-weight: 700;

  margin-bottom: 24px;

  line-height: 1.2;

}



.hero-content p {

  font-size: 18px;

  color: var(--text-secondary);

  margin-bottom: 32px;

  line-height: 1.7;

}



.hero-visual {

  background: linear-gradient(135deg, rgba(99, 91, 255, 0.1), rgba(0, 212, 255, 0.1));

  border-radius: var(--radius);

  height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 64px;

}



/* Testimonials */

.testimonial {

  background: var(--bg-secondary);

  padding: 32px;

  border-radius: var(--radius);

  border-left: 4px solid var(--accent);

}



.testimonial-text {

  color: var(--text-secondary);

  font-style: italic;

  margin-bottom: 16px;

  font-size: 14px;

}



.testimonial-author {

  font-weight: 600;

  color: var(--text-primary);

  font-size: 14px;

}



.testimonial-role {

  color: var(--text-light);

  font-size: 13px;

}



/* Responsive */

@media (max-width: 768px) {

  .hamburger {

    display: flex;

  }



  .nav-desktop {

    display: none;

  }



  body.menu-open .nav-mobile {

    display: flex;

  }



  .hero {

    grid-template-columns: 1fr;

  }



  .hero-visual {

    height: 300px;

  }



  section {

    padding: 60px 0;

  }



  section.hero {

    padding: 80px 0;

  }



  footer .container {

    grid-template-columns: 1fr;

    gap: 32px;

  }



  .btn-phone {

    font-size: 12px;

    padding: 8px 16px;

  }

}



@media (max-width: 480px) {

  .lang-switch {

    flex-direction: column;

    gap: 8px;

  }



  .section-title {

    font-size: 1.8rem;

  }



  .hero-content h1 {

    font-size: 2rem;

  }



  .btn-primary, .btn-secondary {

    padding: 12px 24px;

    font-size: 13px;

  }

}