/* styles.css theme */
:root {
  --bg: linear-gradient(180deg, #0B0020 0%, #28004A 40%, #003A55 100%);
  --card: linear-gradient(180deg, rgba(40,0,74,0.85), rgba(11,0,32,0.9));

  --accent: linear-gradient(90deg, #4FFFE2 0%, #FFCE4F 45%, #FF7AD6 100%);
  --accent-2: #3FFFC4;   /* кнопки — мята */
  --accent-3: #FFB64D;   /* вторичный акцент — янтарь */
  --text: #F9FAFF;       /* почти белый */
  --muted: #A7A8CC;      /* второстепенный текст */
  --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: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(255, 174, 255, 0.4);
}

.logo .pig {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00F5FF, #FFB64D);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0B0020;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(0,245,255,0.5);
}

/* Заголовки с градиентом */
h1, h2, h3 {
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255,174,255,0.4);
  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-3); }

/* Кнопки */
.cta {
  background: var(--accent-2);
  color: #0B0020;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(63,255,196,0.4);
  transition: all .3s ease;
}
.cta:hover {
  background: var(--accent-3);
  color: #0B0020;
  box-shadow: 0 0 25px rgba(255,182,77,0.5);
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}
.hero .badge {
  font-weight: 800;
  color: #0B0020;
  background: linear-gradient(90deg, #FFB64D, #4FFFE2);
  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.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6),
              inset 0 0 20px rgba(63,255,196,0.1);
  backdrop-filter: blur(12px);
  transition: all .3s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255,182,77,0.25),
              inset 0 0 25px rgba(79,255,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;
}