/* styles.css theme */
:root {
  /* Фон — холодный дымчато-синий с мягким градиентом */
  --bg: linear-gradient(180deg, #0E1117 0%, #1C232E 50%, #2A3342 100%);

  /* Карточки — слегка прозрачные, с внутренним свечением */
  --card: linear-gradient(180deg, rgba(42,51,66,0.85), rgba(14,17,23,0.9));

  /* Основной акцент — кораллово-персиковый */
  --accent: #FF7E6B;

  /* Второй акцент — золотисто-розовый (для кнопок и бликов) */
  --accent-2: #FFB48F;

  /* Третий акцент — светло-серебристый (для деталей и свечения) */
  --accent-3: #C9D8E2;

  /* Текст — светлый с лёгким теплом */
  --text: #F2F5F9;

  /* Второстепенный текст — холодно-серый */
  --muted: #A5AEBE;

  --radius: 14px;
  --maxw: 1100px;
  --ff: 'Poppins', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ff);
  background: var(--bg);
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.container {
  max-width: var(--maxw);
  margin: 32px auto;
  padding: 20px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Логотип */
.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.4rem;
  gap: 10px;
  background: linear-gradient(90deg, #FF7E6B, #FFB48F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255,126,107,0.35);
}

.logo .pig {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FF7E6B, #FFB48F);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E1117;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(255,126,107,0.4);
}

/* Заголовки */
h1, h2, h3 {
  background: linear-gradient(90deg, #FF7E6B, #FFB48F, #C9D8E2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(255,180,143,0.25);
  letter-spacing: 0.6px;
  font-weight: 700;
}

/* Навигация */
nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 18px;
  font-weight: 600;
  transition: color .3s ease;
}
nav a:hover { color: var(--accent); }

/* Кнопки */
.cta {
  background: var(--accent);
  color: #0E1117;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(255,126,107,0.35);
  transition: all .3s ease;
}
.cta:hover {
  background: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 25px rgba(255,180,143,0.4);
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}
.hero .badge {
  font-weight: 800;
  color: #0E1117;
  background: linear-gradient(90deg, #FF7E6B, #FFB48F);
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-block;
}

/* Карточки */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7),
              inset 0 0 15px rgba(255,126,107,0.08);
  backdrop-filter: blur(12px);
  transition: all .3s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255,180,143,0.25),
              inset 0 0 25px rgba(201,216,226,0.25);
}

/* Footer */
footer {
  margin-top: 40px;
  padding-top: 20px;
  color: var(--muted);
  font-size: .9rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}







	
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:28px}
.feature{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(37,211,102,0.04), rgba(255,209,102,0.03));text-align:center}
.feature .icon{font-size:28px;margin-bottom:10px}
.table{width:100%;border-collapse:collapse;margin-top:18px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left;color:var(--muted)}
h1,h2,h3{color:var(--accent)}
.lead{color:var(--muted);max-width:70%}
footer{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);font-size:0.9rem}
kbd{background:#071a14;padding:6px 8px;border-radius:6px;color:var(--accent-2);font-weight:700}
.small{font-size:0.95rem;color:var(--muted)}
.center{text-align:center}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--accent-2);color:#051018;font-weight:600;font-size: 16px; text-decoration:none; outline: none; border: none}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;gap:18px}
  .lead{max-width:100%}
}
.section{margin-top:28px}
.pro-list{margin-left:18px}

 
@media (max-width:767px){
header.container {margin: 0 auto!important}
nav{position:fixed;top:0;right:-250px;width:250px;height:100%;background:#111;display:flex;flex-direction:column;padding:70px 20px;transition:0.3s;}
nav a{color:white;margin:10px 0;font-size:18px;}
nav.open{right:0; z-index: 100;}
.burger{position:fixed;top:20px;right:20px;width:45px;height:22px;cursor:pointer;background:none;border:0;z-index:1001;display:flex;flex-direction:column;justify-content:space-between;}
.burger span{display:block;height:3px;background:white;border-radius:2px;transition:0.3s;}
.burger.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); -webkit-transform:translateY(9px) rotate(45deg); -moz-transform:translateY(9px) rotate(45deg); -ms-transform:translateY(9px) rotate(45deg); -o-transform:translateY(9px) rotate(45deg); }
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); -webkit-transform:translateY(-9px) rotate(-45deg); -moz-transform:translateY(-9px) rotate(-45deg); -ms-transform:translateY(-9px) rotate(-45deg); -o-transform:translateY(-9px) rotate(-45deg); }
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.3s;z-index:0;}
.overlay.show{opacity:1;visibility:visible;}
} 

.logo a {
  color: var(--accent);
  text-decoration: none;
}

.contact-links {
  color:var(--accent) !important;
}

footer a:visited,
.contact-links:visited {
  color:var(--accent) !important;
}

footer a{
  
  display:block;
  margin-top:6px;
} 
@media (max-width:767px){
  .burger{display:flex!important;}
}
.burger span{transition:all .25s ease;}
nav{transition:all .3s cubic-bezier(.4,0,.2,1)!important;}
nav a.active{color:var(--accent)!important;font-weight:600;} 

@media (min-width:768px){
  .burger{display:none!important;}
  .overlay{display:none!important;}
}

.has-fixed-layout td {
  width: 50%;
}

.has-fixed-layout, 
.has-fixed-layout tbody {
  width: 100%;
}

.emoji {
  width: 20px;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* БЛОК HERO – ИСПРАВЛЕННЫЙ */
.hero-link {
  display:block;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.hero-picture {
  display:block;
  width:100%;
  height:100%;
}

/* ПК — показываем горизонтальную картинку */
.fullscreen-img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width:768px) {

  .hero-link {
    height:100svh;
  }

  .hero-picture {
    height:100%;
    width:100%;
  }

  .fullscreen-img {
    object-fit:contain !important;
    width:100%;
    height:100%;
    object-position:top center;
    background-color:#000;
  }
}