/* Подключение шрифтов: Inter + JetBrains Mono для акцентов */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
/* Палитра: технологичная, с улучшенной контрастностью */
:root{
  --bg:#061018;
  --panel:#0B1B2A;
  --muted:#D6E9FA;             /* базовый текст светлее */
  --muted-2:rgba(214,233,250,0.85);
  --primary:#FFF;           /* новый основной акцент */
  --primary-2:#86B0B5;         /* комплементарный градиент */
  --accent-cyan:#FFF;
  --accent-teal:#FFF;
  --accent-purple:#86B0B5;
  --accent-amber:#FFC56E;
  --error:#FF6B6B;
  --glass:rgba(255,255,255,0.03);
  --radius:14px;
  --max-w:1200px;
  --scroll-darkness: 0;
}

/* затемняющий слой поверх фонового градиента */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0; /* под контентом */
  pointer-events:none;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(0,230,255,0.06), transparent 60%),
              radial-gradient(1000px 500px at 100% 10%, rgba(109,47,225,0.05), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,var(--scroll-darkness)), rgba(0,0,0,calc(var(--scroll-darkness) + 0.05)));
  transition: background .12s linear;
}

/* Обеспечиваю, чтобы контент был над затемняющим слоем */
.site-header, main, .site-footer, .container{position:relative;z-index:1}

*{box-sizing:border-box}
html,body{
  min-height:100vh;
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Arial;
  color:var(--muted);
  letter-spacing:0.1px;
  /* плавный градиент: сверху акцент к глубокому фону */
  background:linear-gradient(180deg,rgba(47,225,201,0.15) 0%, rgba(6,16,24,1) 60%);
  background-attachment:fixed;
}
.container{max-width:var(--max-w);margin:0 auto;padding:28px}
a{color:var(--accent-cyan);text-decoration:none}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(4,8,12,0.6),rgba(4,8,12,0.25));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.02);z-index:60}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:1000;color:#fff;letter-spacing:0.6px;font-family:JetBrains Mono, monospace}
.main-nav a{margin-left:18px;color:var(--muted);padding:8px;border-radius:8px}
.main-nav a:hover{background:rgba(255,255,255,0.02)}
.menu-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:18px}
.header-actions{display:flex;gap:12px;align-items:center}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted)}

/* Hero: поддержка фонового изображения и дуотона */
.hero-landing{position:relative;padding:64px 0;overflow:hidden}
.hero-landing .hero-media{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;filter:contrast(0.95) saturate(0.9);}
/* если в HTML установят data-bg="url(...)" — можно использовать JS или inline стиль */
.hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.38));pointer-events:none}
.hero-inner{display:flex;gap:28px;align-items:flex-start}
.hero-left{flex:1;z-index:2}
.eyebrow{font-weight:700;color:var(--accent-amber);margin-bottom:12px}
.hero-title{font-size:46px;color:#F2FAFF;letter-spacing:0.1px;margin:0 0 12px;line-height:1.06;text-shadow:0 2px 18px rgba(124,92,255,0.12)}
.lead{color:var(--muted-2);margin:0 0 20px;line-height:1.65}
.hero-cta{display:flex;gap:12px}

/* Кнопки: gradient cyan -> purple */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;transition:transform .08s ease, box-shadow .2s ease}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#041021;box-shadow:0 6px 24px rgba(124,92,255,0.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(124,92,255,0.32)}
.btn-secondary{background:linear-gradient(90deg,rgba(124,92,255,0.12),rgba(0,230,255,0.12));color:var(--muted);border:1px solid rgba(255,255,255,0.08)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.14);color:var(--muted);padding:10px 14px;border-radius:10px}
.btn-outline:hover{border-color:rgba(255,255,255,0.22)}

.trust-list{margin-top:18px;list-style:none;padding:0;display:grid;gap:8px}
.trust-list li{background:rgba(255,255,255,0.02);padding:10px;border-radius:10px;width:max-content}
.hero-right{width:420px;z-index:2}

/* Neon card border uses cyan tint */
.neon-card{padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(0,230,255,0.06);display:flex;gap:12px;align-items:center}
.neon-shield{width:120px;height:120px}
.neon-meta{color:var(--muted)}
.meta-title{font-weight:800;color:var(--accent-teal)}
.meta-sub{font-size:14px;margin:6px 0 12px;color:rgba(255,255,255,0.8)}

/* Sections */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.00));padding:20px;border-radius:12px;margin-top:6px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 14px 44px rgba(0,0,0,0.45)}
.section-title{font-size:20px;color:#EAF6FF;margin:0 0 12px;text-shadow:0 1px 0 rgba(255,255,255,0.04)}
.small{color:rgba(230,243,255,0.85)}

/* Grid helpers */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);transition:transform .16s, box-shadow .2s}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,230,255,0.08)}
.feature-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));color:#041021;font-weight:900;margin-bottom:12px}

/* Services */
.services-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{padding:18px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04)}
.price{font-weight:800;color:var(--primary-2);margin-top:10px}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.testimonial{padding:14px;border-radius:12px;background:rgba(255,255,255,0.01)}

/* Contact */
.contact-section{display:grid;grid-template-columns:1fr 420px;gap:20px}
.contact-form label{display:flex;flex-direction:column;font-weight:700;color:var(--muted);gap:6px}
.contact-form input,.contact-form textarea{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:10px;color:var(--muted)}
.contact-form textarea{min-height:120px}

/* Footer */
.site-footer{margin-top:28px;padding:16px 0;background:transparent}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:14px;border-radius:12px;background:linear-gradient(90deg,rgba(0,19,26,0.6),rgba(5,12,20,0.6));display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 24px rgba(0,0,0,0.5)}
.footer-left{display:flex;align-items:center;gap:12px}
.socials{display:flex;gap:8px}
.social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.04);color:#fff;text-decoration:none}

/* Team section */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.team-card{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:14px;border-radius:12px;text-align:center}
.team-avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:#041021;font-weight:900}
.team-name{font-weight:800}
.team-role{color:rgba(255,255,255,0.75);font-size:.95rem}

/* Pricing table */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.pricing-card{padding:16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.04)}
.pricing-cost{font-size:20px;font-weight:900;color:var(--primary-2);margin-top:8px}

/* Blog teasers */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.blog-card{padding:12px;border-radius:12px;background:rgba(255,255,255,0.01)}
.blog-title{font-weight:800}

/* Image utilities: duotone overlay, responsive figures */
.img-duotone{position:relative;overflow:hidden;border-radius:12px}
.img-duotone img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(0.9)}
.img-duotone::after{content:'';position:absolute;inset:0;background:linear-gradient(45deg, rgba(0,230,255,0.45), rgba(109,47,225,0.45));mix-blend-mode:screen;pointer-events:none}
.image-card{border-radius:12px;overflow:hidden}
.figure-hero{height:420px;border-radius:12px;overflow:hidden}
.figure-hero img{width:100%;height:100%;object-fit:cover}

/* Testimonials slider */
.slider{position:relative;overflow:hidden}
.slider-track{display:flex;transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.slider-item{min-width:100%;box-sizing:border-box;padding:12px}
.slider-controls{display:flex;gap:8px;justify-content:center;margin-top:8px}
.slider-btn{background:rgba(255,255,255,0.04);border-radius:8px;padding:8px 10px;color:var(--muted);cursor:pointer}
.slider-btn:hover{background:rgba(255,255,255,0.08)}

/* Subtle glow accents */
.glow-cyan{box-shadow:0 6px 30px rgba(0,230,255,0.06),0 1px 0 rgba(0,230,255,0.04) inset}

/* Stretch и секции (нет изменений в центрировании) */
.stretch{width: calc(100vw - 56px);margin-left: calc(50% - 50vw + 28px);margin-right: calc(50% - 50vw + 28px);padding-left:28px;padding-right:28px;box-shadow:0 14px 50px rgba(2,8,12,0.55);background:linear-gradient(180deg, rgba(2,8,12,0.06), rgba(2,8,12,0.02));}
.section-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:28px;align-items:start}

/* Улучшенная адаптивность */
@media(max-width:1100px){
  .hero-right{width:360px}
}
@media(max-width:920px){
  .hero-inner{flex-direction:column}
  .hero-right{width:100%}
  .services-list,.features,.team-grid,.pricing,.blog-grid,.testimonials{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .stretch{width:calc(100vw - 32px);margin-left:calc(50% - 50vw + 16px);margin-right:calc(50% - 50vw + 16px);padding-left:16px;padding-right:16px}
  .section-grid{grid-template-columns:1fr}
  .services-list,.features,.team-grid,.pricing,.blog-grid,.testimonials{grid-template-columns:1fr}
  .contact-section{grid-template-columns:1fr}
  .main-nav{display:none}
  .menu-toggle{display:inline-block}
}

/* Responsive fixes to prevent overflow on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* предотвращает горизонтальную прокрутку */
}

.container {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Ensure images and inline elements do not force overflow */
img, svg {
  max-width: 100%;
  height: auto;
}

/* Make hero layout stack on small screens and ensure text wraps */
.hero-inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

@media (max-width: 800px) {
  .hero-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-left, .hero-right {
    width: 100%;
  }
  .hero-right {
    display: flex;
    justify-content: center;
  }

  .hero-title {
    font-size: clamp(1.6rem, 6.5vw, 2.6rem);
    line-height: 1.02;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .lead, .small, .eyebrow, .meta-sub, .meta-title {
    font-size: clamp(0.88rem, 3.5vw, 1rem);
  }

  .hero-cta .btn {
    white-space: normal;
    display: inline-block;
    width: auto;
    padding: 0.55rem 0.9rem;
  }

  .trust-list li, .feature-card, .service-card, .team-role {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .neon-card img {
    max-width: 80%;
    height: auto;
  }

  .header-actions { gap: 0.5rem; }
  .main-nav { display: none; }
}

@media (max-width: 420px) {
  .hero-title {
    font-size: clamp(1.4rem, 7.5vw, 2.2rem);
  }
  .hero-left { padding-bottom: 0.5rem; }
}

/* Global box-sizing to avoid unexpected overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent hero and other sections from creating horizontal scroll */
.hero {
  position: relative;
  overflow: hidden; /* предотвращает содержание, вылазящее вправо */
}

/* Ensure inner container respects viewport width */
.hero-inner {
  max-width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  box-sizing: border-box;
}

/* Allow flex children to shrink below their content width */
.hero-left, .hero-right, .feature-card, .service-card, .team-card, .pricing-card {
  min-width: 0;
}

/* Constrain neon-card and buttons so they don't expand the layout */
.neon-card, .neon-meta {
  max-width: 100%;
  overflow: hidden;
}

.btn {
  max-width: 100%;
}