/* =====================================
   Purplefolio-Inspired CSS Styles
   ===================================== */

:root {
  --primary-color: #6c63ff;
  --secondary-color: #3f3d56;
  --text-color: #333;
  --bg-color: #fff;
  --light-bg: #f9f9fc;
  --font-family: 'Inter', sans-serif;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* Transition */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.6s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-family);
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Header & Navigation --- */
.header {
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
}
.nav-list {
  list-style: none;
  display: flex;
  gap: var(--spacing-lg);
}
.nav-list a {
  color: #fff;
  font-weight: 600;
  position: relative;
  transition: color var(--transition-fast);
}
.nav-list a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width var(--transition-fast);
}
.nav-list a:hover {
  color: var(--primary-color);
}
.nav-list a:hover::after {
  width: 100%;
}
.nav-toggle { display: none; }

/* --- Hero Section --- */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80vh;
  padding: 0 var(--spacing-lg);
  background: var(--light-bg);
}
.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}
.hero-subtitle {
  font-size: 1.125rem;
  max-width: 700px;
  margin: 0 auto var(--spacing-lg);
}
.hero-buttons .btn {
  margin: var(--spacing-sm);
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 8px;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}
.btn-primary:hover {
  background: #5847e0;
  border-color: #5847e0;
}
.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline:hover {
  background: var(--primary-color);
  color: #fff;
}

/* --- Sections & Headings --- */
section {
  padding: var(--spacing-xl) 0;
}
.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

/* --- About Section --- */
.about-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}
.about-image img {
  border-radius: 50%;
  width: 240px;
  height: 240px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.about-list {
  list-style: none;
  flex: 1;
}
.about-list li {
  margin-bottom: var(--spacing-sm);
}
.about-list strong { color: var(--primary-color); }

/* --- Services Tables --- */
.service-block {
  margin-bottom: var(--spacing-xl);
}
.service-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow: hidden;
  border-radius: 8px;
}
.service-table th,
.service-table td {
  padding: var(--spacing-md);
  text-align: left;
}
.service-table th {
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
}
.service-table tr:nth-child(even) {
  background: var(--light-bg);
}
.service-table tr:hover {
  background: #fff;
  transition: background var(--transition-fast);
}

/* --- Portfolio Grid --- */
.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}
.portfolio-item {
  flex: 1 1 calc(33% - var(--spacing-lg));
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.portfolio-item img {
  width: 100%;
  height: auto;
}
.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.portfolio-item h4 {
  font-size: 1.125rem;
  margin: var(--spacing-sm) var(--spacing-md) 0;
  color: var(--secondary-color);
}
.portfolio-item p {
  font-size: 0.95rem;
  margin: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
}

/* --- Workflow List --- */
.workflow-list {
  list-style: decimal inside;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/* --- Why Choose --- */
.why-list {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}
.why-list li::before {
  content: '✔';
  color: var(--primary-color);
  margin-right: var(--spacing-sm);
}

/* --- Technologies Carousel --- */
.tech-carousel {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
}
.tech-carousel span {
  background: var(--light-bg);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 50px;
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--secondary-color);
}

/* --- Achievements Counter --- */
.achievements-grid {
  display: flex;
  gap: var(--spacing-xl);
  justify-content: center;
  flex-wrap: wrap;
}
.achievement-item {
  text-align: center;
  font-weight: 600;
  font-size: 1.5rem;
}
.achievement-item .count {
  display: block;
  font-size: 2.5rem;
  color: var(--primary-color);
}

/* --- Pricing Table --- */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border-radius: 8px;
  overflow: hidden;
}
.pricing-table th {
  background: var(--primary-color);
  color: #fff;
  padding: var(--spacing-md);
  font-weight: 600;
}
.pricing-table td {
  padding: var(--spacing-md);
}
.pricing-table tr:nth-child(even) {
  background: var(--light-bg);
}

.pricing-features {
  list-style: none;
  max-width: 600px;
  margin: var(--spacing-lg) auto;
  line-height: 1.8;
}
.pricing-features li::before {
  content: '✔';
  color: var(--primary-color);
  margin-right: var(--spacing-sm);
}

/* --- FAQ --- */
.faq details {
  margin-bottom: var(--spacing-md);
  border-radius: 8px;
  background: var(--light-bg);
  padding: var(--spacing-md);
  transition: background var(--transition-fast);
}
.faq summary {
  font-weight: 600;
  cursor: pointer;
}
.faq details[open] { background: #fff; }

/* --- Testimonials --- */
.testimonials blockquote {
  font-style: italic;
  border-left: 4px solid var(--primary-color);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  background: var(--light-bg);
}
.testimonials cite {
  display: block;
  margin-top: var(--spacing-sm);
  font-weight: 600;
  text-align: right;
  color: var(--secondary-color);
}

/* --- Blog List --- */
.blog-list {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}
.blog-list a {
  color: var(--primary-color);
  font-weight: 600;
  transition: color var(--transition-fast);
}
.blog-list a:hover { color: #5847e0; }

/* --- Contact Form --- */
.contact-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.contact-form label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm);
  border: 2px solid #ddd;
  border-radius: 6px;
  transition: border var(--transition-fast);
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* --- Media Queries --- */
@media (max-width: 992px) {
  .portfolio-item { flex: 1 1 calc(50% - var(--spacing-lg)); }
  .achievement-item, .about-content { flex-direction: column; }
}
@media (max-width: 600px) {
  .nav-list { display: none; }
  .nav-toggle { display: block; }
  .portfolio-item { flex: 1 1 100%; }
  .hero-title { font-size: 2rem; }
}
.about-image img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  /* замість border-radius:50%; */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
  /* Фіксований хедер та приховування при скролі */
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: top 0.3s ease;
  }
  .header.scroll-down {
    top: -100px;
  }
  .header.scroll-up {
    top: 0;
  }
  /* Кнопка "вгору" */
  #scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 20px;
    display: none;
    cursor: pointer;
    z-index: 1000;
  }
  #scrollTopBtn:hover {
    background-color: #0056b3;
  }
/* Контейнер каруселі */
.testimonials-carousel {
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
}

/* Слайди */
.testimonials-carousel .slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

/* Окремий відгук */
.testimonials-carousel blockquote {
  flex: 0 0 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  background: #f9f9f9;
  border-radius: 8px;
  margin: 0 1rem;
}

/* Загальна ширина враховує margin, тому трохи відступів */
.testimonials-carousel .slides {
  padding: 0 1rem;
}

/* Стилі кнопок */
.testimonials-carousel button.prev,
.testimonials-carousel button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  z-index: 10;
}
.testimonials-carousel button.prev:hover,
.testimonials-carousel button.next:hover {
  background: rgba(0, 0, 0, 0.8);
}
.testimonials-carousel button.prev {
  left: 10px;
}
.testimonials-carousel button.next {
  right: 10px;
}

/* Щоб приховати текст кнопки у випадку проблем з іконкою */
.testimonials-carousel button::before {
  content: '';
}
.partners-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.partner-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.payment-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.payment-section h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 32px;
}

.payment-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.payment-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  width: 260px;
  padding: 24px;
  text-align: left;
  transition: 0.3s ease;
}

.payment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.payment-card h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #333;
}

.payment-card ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.payment-card ul li {
  margin-bottom: 10px;
  color: #555;
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .payment-cards {
    flex-direction: column;
    align-items: center;
  }
}
.faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
}

.faq h2 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 30px;
  font-weight: 700;
  color: #003366;
}

.faq-item {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.05);
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 6px 15px rgb(0 0 0 / 0.15);
}

.faq-item h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #004080;
  cursor: pointer;
}

.faq-item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
}

/* Можна додати адаптивність */

@media (max-width: 600px) {
  .faq {
    padding: 20px 10px;
  }

  .faq h2 {
    font-size: 2rem;
  }

  .faq-item h3 {
    font-size: 1.1rem;
  }

  .faq-item p {
    font-size: 0.95rem;
  }
}
.faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
}

.faq h2 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 30px;
  font-weight: 700;
  color: #003366;
}

.faq-item {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.05);
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 6px 15px rgb(0 0 0 / 0.15);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: #004080;
  cursor: pointer;
  text-align: left;
  padding: 0;
  margin-bottom: 10px;
  outline: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0;
}

.faq-answer.open {
  padding: 10px 0;
  max-height: 300px;
}

.faq-answer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
}

@media (max-width: 600px) {
  .faq {
    padding: 20px 10px;
  }

  .faq h2 {
    font-size: 2rem;
  }

  .faq-question {
    font-size: 1.1rem;
  }

  .faq-answer p {
    font-size: 0.95rem;
  }
}
.faq-question::after {
  content: "+";
  float: right;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.faq-question.active::after {
  content: "−";
}
a, button, .faq-question {
  transition: color 0.3s ease;
}

a:hover, button:hover, .faq-question:hover {
  color: #3498db; /* Колір при наведенні */
}
.faq-question {
  transition: text-shadow 0.3s ease;
}

.faq-question:hover {
  text-shadow: 0 0 5px rgba(52, 152, 219, 0.7);
}
.faq-item {
  transition: background-color 0.3s ease;
  padding: 10px;
  border-radius: 5px;
}

.faq-item:hover {
  background-color: #f0f8ff;
}
button.faq-question {
  transition: transform 0.3s ease;
}

button.faq-question:hover {
  transform: scale(1.05);
}
.faq-question {
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  padding: 10px;
  border-radius: 4px;
}

.faq-question:hover {
  border-color: #3498db;
}
.faq-item {
  transition: box-shadow 0.3s ease;
  border-radius: 5px;
}

.faq-item:hover {
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.faq-item.active .faq-answer {
  max-height: 500px; /* достатньо висоти для вмісту */
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.faq-item.active .faq-answer {
  max-height: 500px; /* достатньо висоти для вмісту */
}
.parallax {
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
a, button {
  color: #ffffff;
  transition: color 0.3s ease;
}

a:hover, button:hover {
  color: #ffffff;
  cursor: pointer;
}
/* Плавна анімація при наведенні на кнопки */
button, a {
  transition: all 0.3s ease;
}
button:hover, a:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Анімовані підказки (tooltip) */
.tooltip {
  position: relative;
  cursor: help;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  z-index: 10;
}
.tooltip::after {
  content: '';
  opacity: 0;
  pointer-events: none;
}

/* Легка тінь для карток/блоків */
.card {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* "Заживлення" тексту при появі (fade-in delay) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Круті курсори для кнопок */
button:hover {
  cursor: pointer;
  cursor: url('https://cdn-icons-png.flaticon.com/512/32/32339.png'), auto;
}
.work-process {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}

.work-process h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.process-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.process-card h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.process-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.process-card li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
}

.process-card li::before {
  content: "✔";
  color: #3b82f6;
  position: absolute;
  left: 0;
}
.why-me {
  padding: 60px 20px;
  background-color: #f9fafb;
  text-align: center;
}

.why-me h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #1f2937;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.why-card {
  background: white;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.why-card h3 {
  font-size: 1.25rem;
  margin-bottom: 15px;
  color: #111827;
}

.why-card ul {
  text-align: left;
  padding-left: 18px;
}

.why-card li {
  margin-bottom: 8px;
  color: #374151;
  line-height: 1.5;
  position: relative;
}

.why-card li::before {
  content: "✓";
  position: absolute;
  left: -18px;
  color: #10b981;
}
.why-card ul {
  list-style: none; /* ← Вимикає крапки */
  padding-left: 18px;
  text-align: left;
}
.guarantees-section {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0;
}

.guarantee-card {
  background-color: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  padding: 24px 20px;
  width: 250px;
  box-sizing: border-box;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guarantee-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.guarantee-card h3 {
  font-weight: 700;
  font-size: 1.25rem;
  color: #1f2937;
  margin-bottom: 15px;
}

.guarantee-card ul {
  list-style: none;
  padding-left: 18px;
  margin: 0;
}

.guarantee-card li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.5;
}

.guarantee-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}
.guarantees-title {
  text-align: center;
  width: 100%;
}
.why-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    font-family: Arial, sans-serif;
    color: #222;
  }
  .why-section h2.main-title {
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 40px;
    font-weight: 700;
  }

  .grid-8cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 25px;
  }

  .card-block {
    border: 2px solid #1a1a1a;
    padding: 20px 15px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.1);
  }

  .card-block h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #1a1a1a;
    text-align: center;
  }

  .card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
  }

  .card-list div {
    background: #f3f3f3;
    padding: 10px 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
    text-align: center;
  }

  /* Мобільна адаптивність */
  @media (max-width: 1024px) {
    .grid-8cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 25px 20px;
    }
  }

  @media (max-width: 600px) {
    .grid-8cards {
      grid-template-columns: 1fr;
    }
    .card-list {
      grid-template-columns: 1fr;
    }
  }
  .why-section {
  padding: 80px 20px;
  background: #f9f9f9;
}

.main-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 48px;
  color: #111;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: 0.2s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.why-card h3 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #222;
}

.why-card ul {
  padding-left: 1.2em;
  margin: 0;
}

.why-card ul li {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  position: relative;
}

.why-card ul li::before {
  content: "•";
  position: absolute;
  left: -1em;
  color: #0e7afe;
}
.why-card ul li {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  list-style: none;
}

.why-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #2ecc71; /* зелена галочка */
  font-size: 14px;
}
.why-card ul li {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  list-style: none;
}

.why-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* синя галочка */
  font-size: 14px;
}.certificates-section {
  padding: 60px 20px;
  background: #fdfefe;
}

.center-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #003399;
}

.academy {
  font-size: 14px;
  color: #666;
  margin-top: -8px;
  margin-bottom: 16px;
  font-style: italic;
}
.card-list div::before {
  content: "✔";
  color: #007BFF; /* синій */
  font-weight: bold;
  margin-right: 8px;
}
.card-list div::before {
  content: "✔";
  color: #007BFF; /* синя галочка */
  font-weight: bold;
  margin-right: 8px;
}
.grid-4cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.card-block {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-block h3 {
  font-size: 20px;
  margin-bottom: 16px;
  text-align: left;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-list.check-style div {
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
}

.card-list.check-style div::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* синя галочка */
  font-weight: bold;
}

.main-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 32px;
}
/* HERO */
.hero {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  padding: 100px 0;
}
.hero-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #002855;
  margin-bottom: 20px;
  line-height: 1.2;
}
.hero-subtitle {
  font-size: 1.125rem;
  color: #334e68;
  margin-bottom: 30px;
  line-height: 1.6;
}
.hero-buttons .btn {
  display: inline-block;
  margin: 0 10px;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-buttons .btn-primary {
  background-color: #0066cc;
  color: #fff;
  border: none;
}
.hero-buttons .btn-outline {
  background-color: transparent;
  color: #0066cc;
  border: 2px solid #0066cc;
}
.hero-buttons .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-buttons .btn {
    margin: 5px 0;
    width: 100%;
    max-width: 250px;
  }
}
/* === Досягнення в цифрах === */
.achievements {
  padding: 60px 20px;
  background: #f5f7fa;
}
.achievements .section-title {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 40px;
  color: #333;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.achievement-item {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: 'Inter', sans-serif;
}
.achievement-item .count {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  color: #4c6ef5;
  margin-bottom: 8px;
}
.achievement-item br {
  line-height: 0.5;
}
.achievement-item:after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: #4c6ef5;
  margin: 12px auto 0;
  border-radius: 2px;
}

.achievement-item {
  background: #f5f9ff;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.achievement-item:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  background-color: #eaf3ff;
}
.grid-8cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.card-block {
  background-color: #f5f9ff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.7s ease forwards;
}

.card-block:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  background-color: #eaf3ff;
}

.card-block:nth-child(1) { animation-delay: 0.1s; }
.card-block:nth-child(2) { animation-delay: 0.2s; }
.card-block:nth-child(3) { animation-delay: 0.3s; }
.card-block:nth-child(4) { animation-delay: 0.4s; }

.card-list div {
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
  color: #333;
}

.card-list div::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3182ce;
  font-weight: bold;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card-block {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  cursor: default;
  overflow: hidden;
  position: relative;
}

.card-block:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.card-block h3 {
  font-size: 18px;
  margin-bottom: 12px;
  transition: color 0.4s ease;
}

.card-block:hover h3 {
  color: #005eff; /* синій акцент */
}

.card-list div {
  margin: 6px 0;
  position: relative;
  padding-left: 18px;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.card-list div::before {
  content: "✔";
  color: #007aff;
  position: absolute;
  left: 0;
  font-size: 14px;
  line-height: 1;
}
.card-block h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #222;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.card-block:hover h3 {
  color: #005eff;
  text-shadow: 0 0 6px rgba(0, 94, 255, 0.5);
}
/* Загальні стилі карток */
.process-card,
.why-card,
.guarantee-card,
.card-block,
.payment-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent;
}

/* Підйом і глибша тінь при наведенні */
.process-card:hover,
.why-card:hover,
.guarantee-card:hover,
.card-block:hover,
.payment-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Синя рамка + підсвічування заголовка для блоків процесу, why, guarantees, card-block */
.process-card:hover { border-color: #005eff; }
.why-card:hover,
.guarantee-card:hover,
.card-block:hover { border-color: #005eff; }

/* Зелена рамка для payment-карток */
.payment-card:hover { border-color: #28a745; }

/* Анімація тексту заголовків у синій зоні */
.process-card h3,
.why-card h3,
.guarantee-card h3,
.card-block h3 {
  color: #222;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.process-card:hover h3,
.why-card:hover h3,
.guarantee-card:hover h3,
.card-block:hover h3 {
  color: #005eff;
  text-shadow: 0 0 6px rgba(0,94,255,0.5);
}

/* ===== Кнопки Telegram & Viber ===== */
/* =======================================
   УНІКАЛЬНІ СТИЛІ ДЛЯ КНОПОК TELEGRAM/VIBER
   ======================================= */
/* == Розмітка 3×2 карток == */
/* ============ SERVICES ============ */
/* ============ SERVICES ============ */
/* ===== SERVICES GRID ===== */
/* RIPPLE EFFECT */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(0, 95, 204, 0.3);
  animation: ripple 0.6s linear;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
/* HEADER PULSE ON HOVER */
.section-title,
.services .service-card h3 {
  transition: transform 0.3s ease;
}
.section-title:hover,
.services .service-card h3:hover {
  transform: scale(1.05);
}
/* SCROLL PROGRESS BAR */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  background: #005fcc;
  width: 0;
  z-index: 999;
}
#scrollTopBtn {
  transition: opacity 0.3s ease;
}
/* ==== FADE-IN ON SCROLL ==== */
/* початковий стан всіх блоків, що зʼявляються */
.fade-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* стан, коли блок у зоні видимості */
.fade-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==== HEADER HIDE/SHOW ==== */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(0);
  transition: transform 0.3s ease;
  z-index: 1000;
}

header.hide {
  transform: translateY(-100%);
}

/* ── 1. Перший показ: весь основний контент зіскролиться плавно ── */
main > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
main > *.revealed {
  opacity: 1;
  transform: none;
}

/* ── 2. Прихована/видима шапка ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
  z-index: 1000;
}
header.hidden {
  transform: translateY(-110%);
}
/* === Секція “Мої послуги” як картки 3×2 === */
.services .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.services .service-block {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.services .service-block.visible {
  transform: translateY(0);
  opacity: 1;
}

.services .service-block h3 {
  background: #f5f7fa;
  margin: 0;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.services .service-block ul {
  list-style: none;
  margin: 0;
  padding: 1rem;
}

.services .service-block ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #333;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.services .service-block ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  background: #4a90e2;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

.services .service-block:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

.services .service-block:hover ul li::before {
  transform: scale(1);
}

.services .section-title {
  text-align: center;
  margin-bottom: 1.5rem;
}
/* Telegram‑style кнопка */
.contact-buttons .btn-primary,
.hero-buttons .btn-primary {
  background-color: #0088cc !important;   /* офіційний Telegram‑blue */
  color: #fff !important;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-buttons .btn-primary:hover,
.hero-buttons .btn-primary:hover {
  background-color: #006699 !important;   /* трохи темніший на hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
}
/* Зелена кнопка «Надіслати запит» */
.contact-form button[type="submit"].btn-primary {
  background-color: #28a745 !important;       /* насичений зелений */
  color: #fff !important;
  border: none;
  padding: 0.75em 1.5em;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-form button[type="submit"].btn-primary:hover {
  background-color: #218838 !important;       /* трохи темніший на hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 136, 56, 0.4);
}

.contact-form button[type="submit"].btn-primary:active {
  background-color: #1e7e34 !important;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(33, 136, 56, 0.4);
}
/* Яскравий Telegram‑blue для кнопок */
.contact-buttons .btn-primary,
.hero-buttons .btn-primary {
  background-color: #0099FF !important;  /* яскравіший синій */
  color: #FFFFFF !important;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 0.5rem;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.contact-buttons .btn-primary:hover,
.hero-buttons .btn-primary:hover {
  background-color: #0080E6 !important;  /* трохи темніший на hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 153, 255, 0.4);
}

.contact-buttons .btn-primary:active,
.hero-buttons .btn-primary:active {
  background-color: #006FCC !important;
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0, 111, 204, 0.4);
}
.btn-outline:hover {
  background-color: #665CAC;   /* ось унікальний hex‑код фіолетового Viber */
  border-color:   #665CAC;
  color:           #ffffff;
}

/* 1. Контейнер для двох карток-таблиць по боках */
section.info-section {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

/* 2. Загальні стилі для кожної “картки” */
.info-table {
  flex: 1 1 calc(50% - 1rem);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  transition: transform 0.3s ease;
}
.info-table:hover {
  transform: translateY(-4px);
}

/* 3. Стиль заголовка */
.info-table > h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
}

/* 4. Перетворимо кожен <tr> у флекс‑рядок з ✓ перед ним */
.info-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem; /* відступи між рядками */
}
.info-table table tr {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  position: relative;
}
.info-table table tr:last-child {
  margin-bottom: 0;
}
.info-table table tr::before {
  content: "✓";
  color: #1e88e5;
  font-weight: bold;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* 5. Якщо в рядку є два стовпці (<th> і <td>) — робимо їх флекс‑дитями */
.info-table th,
.info-table td {
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  color: #444;
}
.info-table th {
  flex: 0 0 30%;
  font-weight: 500;
}
.info-table td {
  flex: 1;
}

/* ============================= */
/* 1) КОНТЕЙНЕР ДЛЯ ДВОХ КАРТОК */
/* ============================= */
.info-section {
  display: grid;
  /* Два рівні стовпці, кожен мінімум 320px, максимум — вся доступна ширина */
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  grid-gap: 2rem;
  align-items: start;
  margin: 2rem 0;
  padding: 0 1rem;
}

/* ============================= */
/* 2) ЗАГАЛЬНІ СТИЛІ ДЛЯ КАРТОК */
/* ============================= */
.info-table {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-table:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ============================= */
/* 3) СТИЛЬ ЗАГОЛОВКА КАРТКИ */
/* ============================= */
.info-table > h2 {
  margin: 0 0 1.25rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #222222;
}

/* ============================= */
/* 4) СТИЛІ ДЛЯ <table> І РЯДКІВ */
/* ============================= */
.info-table table {
  width: 100%;
  border-collapse: separate;
  /* Вертикальний відступ між <tr> */
  border-spacing: 0 0.75rem;
}
.info-table th,
.info-table td {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #333333;
}

/* Фон і закруглення для кожного рядка */
.info-table tr {
  background-color: #f7f7f7;
  border-radius: 8px;
}
/* Щоб <tr> дійсно мав закруглення, робимо їх display: block */
.info-table tr {
  display: block;
  position: relative;
}
/* Забираємо стандартні комірки і розкладаємо у flex */
.info-table th,
.info-table td {
  display: inline-block;
  vertical-align: middle;
}
.info-table th {
  width: 35%;
  font-weight: 500;
}
.info-table td {
  width: 65%;
}

/* ============================= */
/* 5) ЧЕК‑ІКОНИКА ПЕРЕД КОЖНИМ РЯДКОМ */
/* ============================= */
.info-table tr::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #1e88e5;
  font-weight: bold;
  font-size: 1rem;
}

/* При блокуванні <tr> padding переноситься трошки уваги */
.info-table tr {
  padding-left: 2.5rem; /* місце для ✓ */
}

/* ============================= */
/* 6) АДАПТИВНІСТЬ */
/* ============================= */
@media (max-width: 800px) {
  /* Якщо екран менший за 800px — дві колонки стають одна */
  .info-section {
    grid-template-columns: 1fr;
  }
  .info-table {
    margin: 0 auto;
  }
}

/* Загальні стилі картки (до наведення – мінімальні) */
/* === БАЗОВІ СТИЛІ КАРТКИ === */
.info-table {
  border: 1px solid #110606;                /* спокійний сірий контур */
  border-radius: 10px;                   /* плавні кути */
  padding: 24px;                         /* внутрішні відступи */
  margin: 24px 0;                        /* вертикальні відступи між картками */
  background-color: #fff;                /* чисто-білий фон */
  transition: 
    border-color 0.35s ease,            /* анімація зміни контуру */
    box-shadow 0.35s ease,               /* анімація появи тіні */
    transform 0.35s ease;                /* анімація підняття */
}

/* Заголовок картки – початковий стан */
.info-table h2 {
  margin-top: 0;
  color: #444;                           /* темно-сірий заголовок */
  font-size: 1.6em;
  transition: color 0.35s ease;          /* анімація зміни кольору */
}

/* === СТИЛІ ТАБЛИЦІ ВСЕРЕДИНІ === */
.info-table table {
  width: 100%;
  border-collapse: collapse;
}
.info-table th,
.info-table td {
  padding: 10px 14px;
  text-align: left;
}
.info-table th {
  width: 30%;
  font-weight: 600;
}
.info-table tr + tr th,
.info-table tr + tr td {
  border-top: 1px solid #f0f0f0;
}

/* === ХОВЕР-ЕФЕКТ НА КАРТЦІ === */
.info-table:hover {
  border-color: #8a2be2;                 /* яскравий фіолетовий контур */
  box-shadow: 0 12px 28px rgba(138, 43, 226, 0.3);
  transform: translateY(-6px);
}

/* Ховер для заголовка (разом з картою) */
.info-table:hover h2 {
  color: #8a2be2;                        /* фіолетовий заголовок */
}

/* Підсвітка рядка при наведенні */
.info-table tr:hover td {
  background-color: rgba(138, 43, 226, 0.06);
}
@keyframes slideUpFade {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.6s ease forwards;
}
.tilt {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  perspective: 500px;
}
.tilt:hover {
  transform: rotateX(calc((50% - var(--mouse-y)) / 15)) 
             rotateY(calc((var(--mouse-x) - 50%) / 15));
}
@keyframes borderShift {
  0%   { border-image-source: linear-gradient(45deg, #8a2be2, #5d0fa1); }
  50%  { border-image-source: linear-gradient(45deg, #5d0fa1, #d07fff); }
  100% { border-image-source: linear-gradient(45deg, #8a2be2, #5d0fa1); }
}
.gradient-border {
  border: 4px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(45deg, #8a2be2, #5d0fa1);
  animation: borderShift 4s linear infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.btn-bounce:hover {
  animation: bounce 0.5s ease;
}

/* Базовий стиль кнопки */


/* Початковий стан Viber‑кнопки */
.contact-buttons .btn-outline,
.hero-buttons .btn-outline {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #8a3ab9;               /* фіолетовий текст */
  border: 2px solid #8a3ab9;    /* фіолетова рамка */
  background-color: transparent;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover: фіолетовий фон, білий текст */
.contact-buttons .btn-outline:hover,
.hero-buttons .btn-outline:hover {
  background-color: #8a3ab9;
  color: #ffffff;
}
.email-box {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.email-box p {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.email-box a {
  display: inline-block;
  font-size: 18px;
  color: #0073e6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, transform 0.3s ease;
}

.email-box a:hover {
  color: #005bb5;
  transform: scale(1.05);
}
.social-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .social-icons .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f1f1f1;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-size: 22px;
  }

  .social-icons .icon.github:hover {
    background: #333;
    color: #fff;
  }

  .social-icons .icon.linkedin:hover {
    background: #0077b5;
    color: #fff;
  }

  .contact-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-primary {
  background-color: #0088cc;
  color: white;
}

.btn-outline {
  border: 2px solid #7360f2;
  color: #7360f2;
}

.btn-primary:hover {
  background-color: #007ab8;
}

.btn-outline:hover {
  background-color: #7360f2;
  color: white;
}
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo i {
  color: #007bff; /* синій акцент */
  font-size: 24px;
}
.hero-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #28a745; /* Зелений */
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  margin-top: 20px;
}


.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  color: #fff;
  text-align: center;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  max-width: 900px;
  width: 100%;
  padding: 20px;
}



/* Суперсиня кнопка Telegram */
.btn-telegram {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #0088ff;     /* яскравий синій */
  color: #fff;                   /* білий текст */
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.375rem;       /* закруглені кути */
  transition: background-color 0.2s;
}

/* Hover залишається таким же синім, але можна трохи темніше */
.btn-telegram:hover {
  background-color: #0077e6;
}

/* Іконка Telegram */
.btn-telegram i {
  font-size: 1.2em;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  line-height: 1;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.hero-btn i {
  margin-right: 8px;
  font-size: 18px;
}

/* Зелена кнопка */
.hero-btn:not(.btn-telegram) {
  background-color: #28a745;
  color: #fff;
}

.hero-btn:not(.btn-telegram):hover {
  background-color: #218838;
}

/* Telegram кнопка */
.btn-telegram {
  background-color: #0088cc;
  color: #fff;
}


.about-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.about-extra {
  flex: 1 1 240px; /* вирощується, але мінімум 240px */
}

.about-extra h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

.about-extra ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-extra li {
  margin-bottom: .5rem;
  line-height: 1.4;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Інтродукція */
.about-intro p {
  margin: .5rem 0;
  line-height: 1.5;
}

/* Контейнер підблоків */
.about-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Кожен підблок */
.about-extra {
  flex: 1 1 calc(33.333% - 2rem);
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: .5rem;
}

.about-extra h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.about-extra ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-extra ul li {
  margin-bottom: .5rem;
  line-height: 1.4;
}

/* Адаптив */
@media (max-width: 768px) {
  .about-extra {
    flex: 1 1 100%;
  }
}


/* Контейнер секції About */
#about .about-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

/* Інтро */
.about-intro {
  text-align: center;
  margin-bottom: 3rem;
}
.about-intro .section-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #222;
}
.about-intro p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  margin: 0.5rem 0;
}

/* Підблоки у вигляді ґріду */
.about-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Картка */
.about-extra {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.about-extra:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Заголовок картки */
.about-extra h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #111;
}

/* Списки */
.about-extra ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-extra ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #444;
}
.about-extra ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2a9d8f;
  font-weight: bold;
}

/* Адаптивні точки */
@media (max-width: 600px) {
  .about-intro .section-title {
    font-size: 2rem;
  }
  .about-intro p {
    font-size: 1rem;
  }
}

/* контейнер з двома картками */
#about-extras {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;            /* під мобіль — в стовпчик */
  margin-top: 2rem;
}

/* базове оформлення картки */
#about-extras .extra-card {
  flex: 1 1 320px;            /* мінімальна ширина 320px, а далі — гнучко */
  background: #fff;
  border-radius: 0.75rem;     /* закруглені краї */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 1.5rem;
}

/* заголовок картки */
#about-extras .extra-card h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #222;
  text-align: center;
}

/* список без маркерів */
#about-extras .extra-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* кожен пункт зі своєю іконкою */
#about-extras .extra-card li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: #444;
}

/* псевдо-елемент для чек‑ікони */
#about-extras .extra-card li::before {
  content: "\f00c";            /* FontAwesome — галочка */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #4CAF50;              /* зелена галочка */
  font-size: 1rem;
}

/* адаптив: на вузьких екранах — стовпчиком */
@media (max-width: 768px) {
  #about-extras {
    flex-direction: column;
  }
}
/* === ABOUT EXTRAS: два бокси поруч === */
.about-extras {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  flex-wrap: wrap;            /* на вузьких екранах — вниз */
}

.about-extras .extra-card {
  flex: 1 1 45%;               /* дві картки по ~45% ширини */
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.about-extras .extra-card h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #222;
  text-align: left;
}

.about-extras .extra-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-extras .extra-card li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: #444;
}

/* галочка FontAwesome */
.about-extras .extra-card li::before {
  content: "\f00c";            /* код галочки в FontAwesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #4CAF50;
  font-size: 1rem;
}

/* адаптив: якщо екран менше 768px — ставимо картки одна під одною */
@media (max-width: 768px) {
  .about-extras .extra-card {
    flex: 1 1 100%;
  }
}
/* Переробляємо стиль карток: прозорий фон + чорна рамка */
.about-extras .extra-card {
  background: transparent;            /* прибираємо білий фон */
  border: 1px solid #333;            /* тонка чорна рамка */
  border-radius: 0.75rem;            /* закруглені кути */
  padding: 1.5rem;                   /* відступи всередині */
  box-shadow: none;                  /* прибираємо тінь */
}

/* Якщо хочеш зберегти тінь, просто змінити колір: */
/*
.about-extras .extra-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
*/
/* 1. Прибираємо маркери списку */
.about-extras .extra-card ul {
  list-style: none;
  padding-left: 0;
}

/* 2. Якщо галочки додані через pseudo-element, приховаємо їх */
.about-extras .extra-card ul li::before {
  display: none;
}

/* 3. Вирівнюємо відступи пунктів після скидання маркерів */
.about-extras .extra-card ul li {
  margin-bottom: 0.5rem;
  padding-left: 0;
}
/* --------------------------------------------- */
/* 1. В’їзд (fade‑in + slide‑up) при завантаженні */
/* --------------------------------------------- */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* анімація для заголовка */
#about .about-intro .section-title {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

/* анімація для кожного параграфа з невеликим відстроченням */
#about .about-intro p {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out forwards;
}
#about .about-intro p:nth-of-type(1) { animation-delay: 0.4s; }
#about .about-intro p:nth-of-type(2) { animation-delay: 0.6s; }
#about .about-intro p:nth-of-type(3) { animation-delay: 0.8s; }

/* --------------------------------------------- */
/* 2. Hover‑ефект на текст «Про мене»             */
/* --------------------------------------------- */
#about .about-intro .section-title:hover {
  cursor: default;
  color: #0070f3;
  transition: color 0.3s ease;
}

/* легеньке підсвічування параграфів при hover */
#about .about-intro p:hover {
  color: #333;
  transform: translateX(3px);
  transition: all 0.3s ease;
}

/* --------------------------------------------- */
/* 3. Псевдо‑underline draw для заголовка        */
/* --------------------------------------------- */
#about .about-intro .section-title {
  position: relative;
}

/* лінія спочатку схована */
#about .about-intro .section-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: #0070f3;
  transition: width 0.4s ease-out;
}

/* при hover — «малюємо» underline */
#about .about-intro .section-title:hover::after {
  width: 100%;
}

/* --------------------------------------------- */
/* 4. Плавна зміна кольору фону секції при hover */
/* --------------------------------------------- */
#about:hover {
  background-color: #f9faff;
  transition: background-color 0.5s ease;
}

/* --------------------------------------------- */
/* 5. Загальні налаштування для плавності        */
/* --------------------------------------------- */
#about {
  /* трохи padding, щоб ефекти було видно */
  padding: 60px 0;
  transition: background-color 0.3s ease;
}
#about .about-intro p,
#about .about-intro .section-title {
  will-change: transform, opacity, color;
}
.extra-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.extra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.extra-card ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.extra-card ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  color: #28a745;
  font-size: 0.9em;
}
/* Плавний перехід кольору для тексту */
.about-intro h2,
.about-intro p {
  transition: color 0.3s ease;
}

/* При наведенні — текст стає синім */
.about-intro h2:hover,
.about-intro p:hover {
  color: #007bff; /* яскравий синій */
}
/* Додаємо плавний перехід до будь‑якого <strong> в блоці about-intro */
.about-intro strong {
  transition: color 0.3s ease;
  cursor: pointer; /* покажчик‑рука підкреслить інтерактивність */
}

/* При наведенні — колір синій */
.about-intro strong:hover {
  color: #007bff;
}
.extra-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.extra-card h3 {
  margin-top: 0;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.extra-card ul li {
  transition: color 0.3s ease;
}

/* Ключова частина: hover-ефекти */
.extra-card:hover {
  border: 2px solid #007bff;                /* товстіша синя рамка */
  box-shadow: 0 0 12px rgba(0,123,255,0.5);  /* яскравіша тінь навколо блоку */
}

.extra-card:hover h3 {
  color: #007bff;                            /* синій текст */
  text-shadow: 0 0 8px rgba(0,123,255,0.8);  /* glow‑ефект навколо тексту */
}

.extra-card:hover ul li {
  color: #0056b3;                            /* трохи темніший синій для пунктів */
}
.achievement-item .count {
  font-size: 2.5rem;
  color: #3366FF;
  transition: color .3s ease;
}

/* підкреслення */
/* Базовий стиль */
.achievement-item {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.achievement-item .count {
  font-size: 2.5rem;
  color: #3366FF;
  transition: color .3s ease;
}
.achievement-item p {
  margin-top: .5rem;
  position: relative;
}
.achievement-item p::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin: 8px auto 0;
  background: #3366FF;
  transition: background .3s ease;
}

/* Hover‑ефект картки */
.achievement-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.achievement-item:hover .count {
  color: #254eda;
}
.achievement-item:hover p::after {
  background: #254eda;
}

/* Grid-контейнер для карток */
#services .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Базовий стиль картки */
.service-block {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover‑ефект: підняття зверху + збільшена тінь */
.service-block:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Плавна поява карток при завантаженні */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.service-block {
  animation: fadeInUp 0.6s ease both;
}

/* Заголовок картки */
.service-block h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: #1f2937;
}

/* Опис */
.service-block p {
  margin-bottom: 1rem;
  color: #4b5563;
}

/* Список */
.service-block ul {
  list-style: disc inside;
  margin-bottom: 1.25rem;
  color: #374151;
}

/* Aside-блок (гарантії, SEO) */
.service-block aside {
  margin-top: 1rem;
  background: #e0f2fe;
  padding: 1rem;
  border-radius: 0.5rem;
  color: #0369a1;
  font-size: 0.95rem;
}
/* 1. Анімація появи */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Базовий стан (приховано) */
.service-block {
  opacity: 0;
  transform: translateY(20px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Після того, як JS додасть клас .is-visible */
.service-block.is-visible {
  animation: fadeInUp 0.6s ease forwards;
}

/* Hover‑ефект */
.service-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* Контейнер-картка */
.use-case-card {
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  padding: 1.5rem;
  background: #ffffff;
  border: 3px solid #2563eb;               /* синя обводка */
  border-radius: 1rem;                     /* круглі кути */
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover-ефект */
.use-case-card:hover {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
  transform: translateY(-4px);
}

/* Заголовок */
.use-case-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(37, 99, 235, 0.5);
}

/* Список пунктів без маркерів */
.use-case-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.use-case-card ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #1f2937;
  font-size: 1rem;
}

/* Символ-галочка як псевдоелемент (необов’язково можна прибрати) */
.use-case-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #2563eb;
  font-weight: bold;
}

/* Анімація появи при додаванні класу .is-visible */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.use-case-card.is-visible {
  animation: fadeInUp 0.6s ease forwards;
}
/* Контейнер‑грид */
/* Контейнер‑грид */
#services .grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Базова стилізація картки */
.service-block {
  background: #fff;
  border: 2px solid #d1d5db;           /* світло‑сірий за замовчуванням */
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition:
    border-color 0.3s ease,
    box-shadow   0.3s ease,
    transform    0.3s ease;
}

/* Картка піднімається трохи при hover */
.service-block:hover {
  transform: translateY(-4px);
}

/* Hover‑ефект рамки */
.service-block:hover {
  border-color: #2563eb;               /* яскраво‑синя рамка */
  box-shadow: 0 0 12px rgba(37,99,235,0.4);
}

/* Заголовок за замовчуванням */
.service-block h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: #1f2937;                      /* темно‑сірий */
  transition: color 0.3s ease,
              text-shadow 0.3s ease;
}

/* Hover‑ефект для заголовка */
.service-block:hover h3 {
  color: #2563eb;                      /* синій */
  text-shadow: 0 0 8px rgba(37,99,235,0.8);  /* м’яке світіння */
}

/* Списки без стандартних маркерів */
.service-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

/* Сині кружечки замість булітів */
.service-block ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: #374151;
}
.service-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: #2563eb;                 /* синій кружечок */
  border-radius: 50%;
  transition: background 0.3s ease;
}

/* Опціонально: кружечки теж можуть світитися на hover картки */
.service-block:hover ul li::before {
  background: #3b82f6;
  box-shadow: 0 0 6px rgba(59,130,246,0.6);
}

/* Анімація появи карток */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-block {
  op.service-block:nth-child(3) { animation-delay: 0.3s; }
.service-block:nth-child(4) { animation-delay: 0.4s; }
.service-block:nth-child(5) { animation-delay: 0.5s; }
.service-block:nth-child(6) { animation-delay: 0.6s; }
/* === Контейнер грід === */
 }
 /* === Контейнер грід (залишаємо як є) === */
#about-extras.container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* === Базова картка === */
.extra-card {
  background: #ffffff;
  border: 2px solid #d1d5db;                /* світло‑сірий за замовчуванням */
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: 
    border-color 0.35s ease-in-out, 
    box-shadow 0.35s ease-in-out, 
    transform 0.35s ease-in-out;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.65s forwards;
}

/* === Анімація появи === */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Hover: підняття та яскраве світіння рамки === */
.extra-card:hover {
  transform: translateY(-8px);
  border-color: #007bff;                     /* точний синій #007bff */
  box-shadow: 0 0 20px rgba(0,123,255,0.6);  /* яскраве синє світіння */
}

/* === Заголовок за замовчуванням === */
.extra-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #1f2937;                            /* темно‑сірий */
  transition: color 0.35s ease-in-out, 
              text-shadow 0.35s ease-in-out;
}

/* === Hover: “горіння” заголовка === */
.extra-card:hover h3 {
  color: #007bff;                            /* точний синій #007bff */
  text-shadow: 0 0 12px rgba(0,123,255,0.8); /* яскраве світіння синім */
}

/* === Списки без булітів + сині кружечки === */
.extra-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.extra-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #374151;
}
.extra-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: #007bff;                       /* кружечок того ж синього #007bff */
  border-radius: 50%;
  transition: background 0.35s ease-in-out, 
              box-shadow 0.35s ease-in-out;
}
/* опціональне світіння кружечків */
.extra-card:hover ul li::before {
  background: #339cff;
  box-shadow: 0 0 6px rgba(51,156,255,0.6);
}

/* === Затримки для анімації === */
.extra-card:nth-child(1) { animation-delay: 0.1s; }
.extra-card:nth-child(2) { animation-delay: 0.2s; }
.extra-card:nth-child(3) { animation-delay: 0.3s; }
.extra-card:nth-child(4) { animation-delay: 0.4s; }
.extra-card:nth-child(5) { animation-delay: 0.5s; }
.extra-card:nth-child(6) { animation-delay: 0.6s; }
/* 1. Робимо контейнер flex-центруючим */
#about-extras.container,
#services .grid {
  display: flex !important;             /* перемикаємо грід на флекс */
  flex-wrap: wrap;                      /* дозволяємо перенос карток на наступний ряд */
  justify-content: center;              /* центруємо по горизонталі */
  gap: 2rem;                            /* відстань між картками */
}

/* 2. Фіксуємо ширину карток, щоб вони не розтягувались */
.extra-card,
.service-block {
  flex: 0 0 360px;                      /* фіксована ширина 360px, не змінюється */
  max-width: 100%;
}

/* Тепер картки завжди будуть по центру контейнера */
/* ——————————————————————————————— */
/*  Перезаписуємо рамки карток на чорні  */
/* ——————————————————————————————— */
.service-block,
.extra-card {
  /* замість уявної синьої/сірої рамки робимо чорну */
  border: 2px solid #000 !important;
}

/* При бажанні — змінити hover‑рамку теж на чорну (або на інший колір) */
.service-block:hover,
.extra-card:hover {
  border-color: #000 !important;
  /* зберігаємо світіння, але чорним */
  box-shadow:
    0 0 8px rgba(0,0,0,0.4),
    0 0 16px rgba(0,0,0,0.2);
}
/* 1. За замовчуванням — чорна рамка */
.service-block {
  border: 2px solid #000 !important;
}

/* 2. Hover — синя рамка та світіння */
.service-block:hover {
  border-color: #2563eb !important;        /* повертаємо яскравий синій */
  box-shadow:
    0 0 8px rgba(37,99,235,0.6),
    0 0 16px rgba(37,99,235,0.4) !important;
  transform: translateY(-5px) !important;
}

/* 3. Hover — заголовок “горить” синім */
.service-block:hover h3 {
  color: #2563eb !important;
  text-shadow:
    0 0 6px rgba(37,99,235,0.8),
    0 0 12px rgba(37,99,235,0.6),
    0 0 18px rgba(37,99,235,0.4) !important;
}

/* 4. Hover — кружечки списків теж світяться синім */
.service-block:hover ul li::before {
  background: #339cff !important;
  box-shadow: 0 0 6px rgba(51,156,255,0.6) !important;
}
/* === Базова стилізація process-card === */
.process-card {
  background: #fff;
  border: 2px solid #000;                /* чорна рамка за замовчуванням */
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition:
    border-color 0.3s ease-in-out,
    box-shadow   0.3s ease-in-out,
    transform    0.3s ease-in-out;
  position: relative;
}

/* === Заголовок за замовчуванням === */
.process-card h3 {
  color: #1f2937;
  margin-bottom: 1rem;
  transition:
    color 0.3s ease-in-out,
    text-shadow 0.3s ease-in-out;
}

/* === Hover: підняття і синя рамка === */
.process-card:hover {
  transform: translateY(-5px);
  border-color: #2563eb;                  /* яскраво‑синя */
  box-shadow:
    0 0 8px rgba(37,99,235,0.6),
    0 0 16px rgba(37,99,235,0.4);
}

/* === Hover: “горіння” заголовка === */
.process-card:hover h3 {
  color: #2563eb;
  text-shadow:
    0 0 6px rgba(37,99,235,0.8),
    0 0 12px rgba(37,99,235,0.6),
    0 0 18px rgba(37,99,235,0.4);
}

/* === Списки без маркерів + сині кружечки === */
.process-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.process-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #374151;
}
.process-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: #2563eb;
  border-radius: 50%;
  transition:
    background 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}
.process-card:hover ul li::before {
  background: #339cff;
  box-shadow: 0 0 6px rgba(51,156,255,0.6);
}
/* =========== 1. Базові налаштування =========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  background: #fafafa;
  color: #1f2937;
}

/* Зручні класи для контейнерів */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Універсальні списки */
ul {
  list-style: none;
  margin: 1rem 0;
}

li {
  margin-bottom: 0.75rem;  /* Більше простору між рядками */
}

/* =========== 2. Картки (service-block, process-card, extra-card) =========== */
.service-block,
.process-card,
.extra-card {
  background: #fff;
  border: 2px solid #000;                              /* чорна рамка за замовчуванням */
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition:
    border-color 0.3s ease-in-out,
    box-shadow   0.3s ease-in-out,
    transform    0.3s ease-in-out;
  outline: none;                                        /* скидаємо дефолтний outline */
}

/* Поява з анімацією на всіх картках */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);     }
}

.service-block,
.process-card,
.extra-card {
  opacity: 0;
  animation: fadeInUp 0.6s forwards;
}
.service-block:nth-child(1),
.process-card:nth-child(1),
.extra-card:nth-child(1) { animation-delay: 0.1s; }
.service-block:nth-child(2),
.process-card:nth-child(2),
.extra-card:nth-child(2) { animation-delay: 0.2s; }
/* ... і так далі для інших карток ... */

/* Заголовки карток */
.service-block h3,
.process-card h3,
.extra-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  transition:
    color 0.3s ease-in-out,
    text-shadow 0.3s ease-in-out;
}

/* Списки всередині карток */
.service-block ul li::before,
.process-card ul li::before,
.extra-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  background: #2563eb;
  border-radius: 50%;
  transition:
    background 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}
.service-block ul li,
.process-card ul li,
.extra-card ul li {
  position: relative;
  padding-left: 1.25rem;
  color: #374151;
}

/* =========== 3. Hover & Focus стани =========== */
.service-block:hover,
.process-card:hover,
.extra-card:hover,
.service-block:focus,
.process-card:focus,
.extra-card:focus {
  transform: translateY(-6px);
  border-color: #2563eb;
  box-shadow:
    0 0 8px rgba(37,99,235,0.6),
    0 0 16px rgba(37,99,235,0.4);
}

/* Заголовок “горить” */
.service-block:hover h3,
.process-card:hover h3,
.extra-card:hover h3,
.service-block:focus h3,
.process-card:focus h3,
.extra-card:focus h3 {
  color: #2563eb;
  text-shadow:
    0 0 6px rgba(37,99,235,0.8),
    0 0 12px rgba(37,99,235,0.6),
    0 0 18px rgba(37,99,235,0.4);
}

/* Буліти світяться */
.service-block:hover ul li::before,
.process-card:hover ul li::before,
.extra-card:hover ul li::before,
.service-block:focus ul li::before,
.process-card:focus ul li::before,
.extra-card:focus ul li::before {
  background: #339cff;
  box-shadow: 0 0 6px rgba(51,156,255,0.6);
}

/* =========== 4. Мобільна адаптація =========== */
/* Використовуємо флекс-контейнери на вузьких екранах */
@media (max-width: 768px) {
  /* Головні секції центровані і 100% ширини */
  #services .grid,
  #about-extras.container,
  .process-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  /* Картки займають всю ширину контейнера */
  .service-block,
  .process-card,
  .extra-card {
    width: 100%;
    max-width: 500px;
  }
}
/* ================================================================= */
/*  Унікальний стиль для extra-card (Сертифікати & Технології)      */
/* ================================================================= */

/* 1. Базова стилізація та скидання старих анімацій */
.extra-card {
  background: #ffffff;
  border: 2px solid #000 !important;             /* чорна рамка */
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: none !important;                   /* прибираємо стару тінь */
  transition:
    border-color 0.3s ease-in-out,
    box-shadow   0.3s ease-in-out,
    transform    0.3s ease-in-out !important;
  position: relative;
  overflow: hidden;
  outline: none;
}

/* 2. Заголовок за замовчуванням */
.extra-card h3 {
  font-size: 1.25rem;
  color: #1f2937;                                 /* темно‑графіт */
  margin-bottom: 1rem;
  transition:
    color 0.3s ease-in-out,
    text-shadow 0.3s ease-in-out;
}

/* 3. Списки без стандартних булітів */
.extra-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.extra-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: #374151;
}
.extra-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: #2563eb;                           /* синій кружечок */
  border-radius: 50%;
  transition:
    background 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

/* 4. Hover & Focus (повторюємо ефект з service-block) */
.extra-card:hover,
.extra-card:focus {
  transform: translateY(-5px);
  border-color: #2563eb !important;              /* яскравий синій */
  box-shadow:
    0 0 8px rgba(37,99,235,0.6),
    0 0 16px rgba(37,99,235,0.4) !important;
}

/* 5. Hover Заголовок — неонове “горіння” */
.extra-card:hover h3,
.extra-card:focus h3 {
  color: #2563eb;
  text-shadow:
    0 0 6px rgba(37,99,235,0.8),
    0 0 12px rgba(37,99,235,0.6),
    0 0 18px rgba(37,99,235,0.4);
}

/* 6. Hover Кружечки списків — світяться синім */
.extra-card:hover ul li::before,
.extra-card:focus ul li::before {
  background: #339cff;
  box-shadow: 0 0 6px rgba(51,156,255,0.6);
}
/* ——————————————————————————————— */
/* СТИЛІ ДЛЯ .extra-card (Сертифікати / Технології) */
/* ——————————————————————————————— */

/* 1. Базова стилізація картки */
.extra-card {
  background: #fff;
  border: 2px solid #000;                  /* чорна рамка за замовчуванням */
  border-radius: 1rem;
  padding: 1.5rem;
  transition:
    border-color 0.3s ease-in-out,
    box-shadow   0.3s ease-in-out,
    transform    0.3s ease-in-out;
  outline: none;
}

/* 2. Заголовок h3 за замовчуванням */
.extra-card h3 {
  font-size: 1.25rem;
  color: #1f2937;                           /* темно‑графітовий */
  margin-bottom: 1rem;
  transition: color 0.3s ease-in-out;
  /* видаляємо всі text-shadow */
  text-shadow: none !important;
}

/* 3. Пункти списку без маркерів */
.extra-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.extra-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: #374151;
}
.extra-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: #2563eb;
  border-radius: 50%;
}

/* 4. Hover & Focus на картці: синя рамка і світіння */
.extra-card:hover,
.extra-card:focus {
  transform: translateY(-5px);
  border-color: #2563eb;                    /* яскраво‑синя */
  box-shadow:
    0 0 8px rgba(37,99,235,0.6),
    0 0 16px rgba(37,99,235,0.4);
}

/* 5. Hover & Focus на заголовку: змінюємо колір літер */
.extra-card:hover h3,
.extra-card:focus h3 {
  color: #2563eb;                           /* літери стають синіми */
  /* без тіней, літери самі горять кольором */
}

/* 6. Hover & Focus на кружечках списку */
.extra-card:hover ul li::before,
.extra-card:focus ul li::before {
  background: #339cff;
  box-shadow: 0 0 6px rgba(51,156,255,0.6);
}
/* ================================================================= */
/* Скидаємо всі старі тіні на заголовках */
.extra-card h3 {
  text-shadow: none !important;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* При наведені або фокусі — яскраво‑синій колір і неонове світіння */
.extra-card:hover h3,
.extra-card:focus h3 {
  color: #2563eb !important;
  text-shadow:
    0 0 4px rgba(37, 99, 235, 0.6),
    0 0 8px rgba(37, 99, 235, 0.5),
    0 0 12px rgba(37, 99, 235, 0.4) !important;
}
body {
  font-family: 'Inter', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}
/* 1. Базові стилі */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f9f9f9;
  color: #111; /* темний, але не "різкий" */
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* 2. Секція */
.about {
  padding: 4rem 1rem;
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* 3. Заголовок */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000; /* чисто чорний — максимально чітко */
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* ледь помітна тінь для глибини */
}

/* 4. Абзаци */
.about-intro p {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0.75rem 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  color: #111; /* ще раз, щоб точно все темне :) */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* 5. Плавне появлення з затримкою */
.about-intro.is-visible p:nth-of-type(1) {
  transition-delay: 0.2s;
}
.about-intro.is-visible p:nth-of-type(2) {
  transition-delay: 0.4s;
}
.about-intro.is-visible p:nth-of-type(3) {
  transition-delay: 0.6s;
}

.about-intro.is-visible p {
  opacity: 1;
  transform: translateY(0);
}

/* 6. Виділення жирного тексту */
.about-intro strong {
  font-weight: 700;
  color: #000;
}
/* Плавний підйом і тінь при наведенні */
.service-block {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
/* Грід: завжди 3 колонки, 2 ряди по 3 елементи */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem; /* відстань між блоками */
}

/* За потреби — примусово не даємо блокам звужуватися */
.service-grid .service-block {
  width: 100%;
}

/* Додаткові стилі для табличок */
.service-block {
  background-color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Приклад темнішого тексту */
.service-block p,
.service-block li {
  color: #333;
}

.service-block h3 {
  color: #111;
}
/* Контейнер грід: 3 колонки завжди → 2 ряди по 3 блоки */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem; /* відстань між блоками */
}

/* Сама “табличка” */
.service-block {
  background-color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Темніший текст для кращої читаємості */
.service-block h3 {
  color: #111;
}

.service-block p,
.service-block li {
  color: #333;
}
/* гарантовано 3 колонки при ширині >= 1024px */
@media (min-width: 1024px) {
  #services .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Підключити шрифт */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Базові */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: #f9f9f9;
}

/* Секція */
#services {
  padding: 4rem 1rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Заголовок */
#services h2 {
  margin-bottom: 3rem;
}

/* Грід: строго 3 колонки → 2 ряди */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Стилі “табличок” */
.service-block {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Текст */
.service-block h3 {
  margin-bottom: 0.75rem;
  color: #111;
  font-size: 1.25rem;
}

.service-block p {
  margin-bottom: 1rem;
  color: #333;
  line-height: 1.6;
}

.service-block ul {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.service-block li {
  margin-bottom: 0.5rem;
  color: #333;
}

/* Аспект-блок */
.service-block aside {
  margin-top: 1rem;
}
.service-block aside p {
  margin: 0.25rem 0;
}
/* 1. Анімація появи */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Налаштування самих блоків */
.service-block {
  opacity: 0;                       /* стартова невидимість */
  animation: fadeInUp 0.6s ease-out forwards;
  /* затримка за порядком — по 0.1s для кожного наступного */
}
.service-grid .service-block:nth-child(1) { animation-delay: 0.1s; }
.service-grid .service-block:nth-child(2) { animation-delay: 0.2s; }
.service-grid .service-block:nth-child(3) { animation-delay: 0.3s; }
.service-grid .service-block:nth-child(4) { animation-delay: 0.4s; }
.service-grid .service-block:nth-child(5) { animation-delay: 0.5s; }
.service-grid .service-block:nth-child(6) { animation-delay: 0.6s; }

/* 3. Hover‑ефект */
.service-block {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
/* PORTFOLIO SECTION */
#portfolio {
  padding: 4rem 1rem;
  background-color: #f7fafc;
  text-align: center;
}

#portfolio h2 {
  font-size: 2.5rem;
  color: #1a202c;
  margin-bottom: 2rem;
  position: relative;
}
#portfolio h2::after {
  content: "";
  width: 4rem;
  height: 4px;
  background: #3182ce;
  display: block;
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

#portfolio > div > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

#portfolio a {
  display: block;
  background: #ffffff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

#portfolio a:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

#portfolio img {
  width: 100%;
  height: auto;
  display: block;
}

#portfolio h3 {
  font-size: 1.25rem;
  color: #2d3748;
  margin: 1rem 0 0.5rem;
}

#portfolio p {
  font-size: 1rem;
  color: #4a5568;
  padding: 0 1rem 1.5rem;
  line-height: 1.5;
}

/* AOS fade-up integration (if using AOS library) */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: ease-out;
}
[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}
/* WORKFLOW GRID */
#workflow {
  padding: 4rem 1rem;
  background: #f9fafb;
}
#workflow h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #1e293b;
}

/* 3 columns × 2 rows */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* CARD STYLES */
.process-grid > div {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(30, 41, 59, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(30, 41, 59, 0.1);
}

/* CARD HEADER */
.process-grid h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #0f172a;
}

/* LIST ITEMS */
.process-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.process-grid ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #475569;
}
.process-grid ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #3b82f6;
  border-radius: 50%;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 992px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}
/* WORKFLOW GRID */
/* GRID (3 cols × 2 rows) */
#workflow .process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Базова стилізація карточок */
#workflow .process-grid > div {
  background: #fff;
  border: 2px solid #222;                /* темна рамка за замовчуванням */
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Заголовок h3 за замовчуванням */
#workflow .process-grid > div h3 {
  margin-bottom: 1rem;
  color: #111;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Hover-ефект на карточку */
#workflow .process-grid > div:hover {
  border-color: #3B82F6;                  /* синя рамка */
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
  transform: translateY(-4px);
}

/* Hover-ефект на заголовок */
#workflow .process-grid > div:hover h3 {
  color: #3B82F6;                         /* синій текст */
  text-shadow: 
    0 0 4px rgba(59,130,246,0.7),
    0 0 8px rgba(59,130,246,0.5);
}

/* Трохи підсвітлюємо список при hover */
#workflow .process-grid > div ul {
  color: #444;
  transition: color 0.3s ease;
}
#workflow .process-grid > div:hover ul {
  color: #111;
}
/* GRID */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* БАЗОВІ СТИЛІ КАРТКИ */
.process-card {
  border: 2px solid #111;
  border-radius: 0.75rem;
  padding: 1.5rem;
  background-color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* ЗАГОЛОВОК */
.process-card h3 {
  margin-bottom: 1rem;
  color: #111;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* HOVER‑ЕФЕКТ (тільки для десктопів) */
@media (hover: hover) and (pointer: fine) {
  .process-card:hover {
    border-color: #2978e5;
    box-shadow: 0 4px 16px rgba(41, 120, 229, 0.2);
  }
  .process-card:hover h3 {
    color: #2978e5;
    text-shadow: 0 0 8px rgba(41, 120, 229, 0.7);
  }
}

/* TOUCH‑ЕФЕКТ (мобільні) */
@media (hover: none) and (pointer: coarse) {
  .process-card:active {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
}

/* ОДНА КОЛОНКА НА МОБІЛЬНИХ */
@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}
/* Container grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Base style for each card */
.process-card {
  background: #fff;
  border: 2px solid #222;               /* dark border by default */
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  will-change: transform, box-shadow, border-color;
}

/* Heading inside card */
.process-card h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #222;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* List items */
.process-card ul {
  list-style: disc inside;
  color: #333;
  line-height: 1.6;
}

/* Hover state */
.process-card:hover {
  border-color: #2978ff;               /* bright blue border */
  box-shadow: 0 8px 20px rgba(41, 120, 255, 0.25);
  transform: translateY(-6px);
}
.process-card:hover h3 {
  color: #2978ff;
  text-shadow: 0 0 8px rgba(41, 120, 255, 0.7);
}

/* Mobile tweak: on small screens remove lift, keep blue border only */
@media (max-width: 600px) {
  .process-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}
/* Стандартні стилі залишаються без змін... */

/* Базові стилі для карток */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.process-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: 
    border-color 0.3s ease, 
    box-shadow 0.3s ease, 
    transform 0.2s ease;
}
.process-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: #222;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Hover‑ефект: синя рамка, синій заголовок + lift */
.process-card:hover {
  border-color: #2978ff;
  box-shadow: 0 8px 16px rgba(41, 120, 255, 0.15);
  transform: translateY(-6px);
}
.process-card:hover h3 {
  color: #2978ff;
  text-shadow: 0 0 6px rgba(41, 120, 255, 0.6);
}

/* Адаптив для мобільних: без lift, лише легкий shadow */
@media (max-width: 640px) {
  .process-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .process-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}
/* Базовий стиль картки */
.process-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition:
    transform 0.4s cubic-bezier(0.22, 1.61, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* Заголовок */
.process-card h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  color: #222;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.process-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform, box-shadow;
  overflow: visible;
  z-index: 0;
}

/* Псевдоелемент для ефекту вибуху */
.process-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* При наведенні: підняття + анімація вибуху */
.process-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(0, 123, 255, 0.5);
}

/* Запуск вибуху */
.process-card:hover::before {
  animation: explodeLight 0.6s forwards ease-out;
}

/* Ключові кадри вибуху */
@keyframes explodeLight {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  40% {
    width: 150%;
    height: 150%;
    opacity: 0.3;
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}
.process-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  will-change: transform, box-shadow;
  overflow: visible;
  z-index: 0;
}

/* Псевдоелемент для світлового вибуху */
.process-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.35) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* === Підняття та вибух при наведенні === */
.process-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.15),
    0 0 24px rgba(0, 123, 255, 0.5);
}

/* Анімація вибуху */
.process-card:hover::before {
  animation: explodeLight 0.6s forwards ease-out;
}

@keyframes explodeLight {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  40% {
    width: 150%;
    height: 150%;
    opacity: 0.3;
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}
#portfolio a {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

#portfolio a h3 {
  margin: 0.5rem 0 0;
  font-size: 1.2rem;
  color: #222;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

#portfolio a:hover {
  transform: translateY(-10px) scale(1.05);
  border-color: #007bff;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 123, 255, 0.5);
}

#portfolio a:hover h3 {
  color: #007bff;
  text-shadow: 0 0 6px rgba(0, 123, 255, 0.7);
}

@media (max-width: 768px) {
  #portfolio a:hover {
    transform: translateY(-6px) scale(1);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 0 16px rgba(0, 123, 255, 0.4);
  }
}
.process-card {
  position: relative;
  background: #fff;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.process-card h3 {
  margin: 0.5rem 0 0;
  font-size: 1.2rem;
  color: #222;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.process-card:hover {
  transform: translateY(-10px) scale(1.05);
  border-color: #007bff;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15),
              0 0 20px rgba(0, 123, 255, 0.5);
}

.process-card:hover h3 {
  color: #007bff;
  text-shadow: 0 0 6px rgba(0, 123, 255, 0.7);
}

@media (max-width: 768px) {
  .process-card:hover {
    transform: translateY(-6px) scale(1);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12),
                0 0 16px rgba(0, 123, 255, 0.4);
  }
}
.payment-card {
  position: relative;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.payment-card h3 {
  margin-bottom: 0.5rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Ефект при наведенні на всю картку */
.payment-card:hover {
  transform: translateY(-5px);
  border-color: #28a745; /* зелений колір рамки */
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.7); /* зелена тінь */
}

/* Ефект на заголовок всередині наведеної картки */
.payment-card:hover h3 {
  color: #28a745; /* зелений текст */
  text-shadow: 0 0 8px rgba(40, 167, 69, 0.8);
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.btn {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}
.btn::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  background: rgba(40, 167, 69, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}
.btn:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shine 1.5s infinite;
}
@keyframes shine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.logo {
  color: #ffffff;      /* білий колір тексту */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.25rem;  /* підлаштуйте під свій дизайн */
  transition: color 0.2s ease;
}

.logo:hover {
  color: #e0e0e0;      /* трохи світліший при наведенні */
}
.email-box a span {
  color: #000000;
  font-weight: 700;
}
/* Забороняємо переносити слова в меню */
.nav-list,
.nav-link {
  hyphens: none;
}

.nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #28a745; /* або ваш акцентний колір */
}

/* Адаптивно — приховуємо список за гамбургером */
@media (max-width: 768px) {
  .nav-list {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}
/* Загальний стиль шапки */
.header {
  background-color: #000;       /* ваш фон */
  padding: 1rem 0;              /* зверху/знизу 1rem */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* Контейнер навігації – щоб вирівняти по центру */
.nav.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Лого */
.logo {
  font-size: 1.5rem;            /* більший шрифт */
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-right: 2rem;
}

/* Список пунктів меню */
.nav-list {
  display: flex;
  gap: 2rem;                    /* ширші відстані */
  margin: 0;
  padding: 0;
}

/* Посилання меню */
.nav-link {
  font-size: 1rem;              /* стандартний читабельний розмір */
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s;
  padding: 0.5rem 0;            /* вертикальні паддінги для клікабельності */
}

/* Hover-ефект */
.nav-link:hover {
  color: #28a745;
}

/* Гамбургер (для мобілок) */
.nav-toggle {
  display: none;
}

/* Адаптив */
@media (max-width: 768px) {
  .nav-list {
    display: none;
  }
  .nav-toggle {
    display: block;
    cursor: pointer;
  }
}
/* Знімаємо обмеження по ширині і відступи контейнера */
.header .container {
  max-width: 100%;
  padding-left: 1rem;   /* або 0, якщо треба вплотну */
  padding-right: 1rem;  /* підкоригуйте на свій смак */
}

/* Вирівнюємо навігацію ліворуч */
.nav.container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;            /* відстань між логотипом і пунктами меню */
}

/* Меню без зайвих відступів зліва */
.nav-list {
  display: flex;
  gap: 1.5rem;          /* відстань між пунктами меню */
  margin: 0;
  padding: 0;
}

/* Зменшуємо внутрішні відступи шапки */
.header {
  padding: 1rem 1rem;   /* верх/низ 1rem, ліво/право 1rem */
}
.hero
.header {
  padding: 1rem 1rem;
}
/* Дозволяємо меню переноситися на новий рядок */
/* Розтягнути контейнер хедера на всю ширину */
.header .container {
  max-width: none;
  width: 100%;
  padding: 0 0.5rem;   /* зменшили бокові відступи */
  box-sizing: border-box;
}

/* Меню в один рядок, без переносу */
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.4rem;         /* ще менше відстань між пунктами */
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Пункти меню залишаються читабельними */
.nav-link {
  font-size: 1rem;
  padding: 0.5rem 0.4rem; /* зменшили горизонтальні падінги */
  color: #fff;            /* або ваш колір */
  text-decoration: none;
}

/* Логотип трохи зменшили відступ від пунктів */
.logo {
  font-size: 1.25rem;
  margin-right: 0.8rem;  /* звузили правий відступ */
}
/* 1. Контейнер навігації: лівий старт, без зайвих відступів */
/* 1) Контейнер навігації — повна ширина, лівий старт */
.nav.container {
  width: 100%;
  max-width: none;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #000;
}

/* 2) Відступ між логотипом і меню */
.logo {
  margin-right: 1rem;
  flex: 0 0 auto;
}

/* 3) Flex‑рядок пунктів без переносів, з gap для відступів */
.nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;               /* відстань між пунктами */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  flex: 1;
}

/* 4) Пункти не злипаються, підлаштовуються під контент */
.nav-list li {
  flex: 0 1 auto;          /* розмір залежить від вмісту, але можна зменшуватись */
  min-width: 0;            /* потрібно, щоб flex-item міг реально звузитись */
  text-align: center;
}

/* 5) Стиль самих лінків — читабельно, але адаптивно */
.nav-link {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;     /* без внутрішніх переносів */
}

/* 6) Hover-ефект для наочності */
.nav-link:hover {
  color: #0f9eea;
}
/* Додаємо трохи лівого «від’ємного» відступу, щоб меню повільно підсунути вліво */
/* 1) Зрушуємо весь хедер трохи праворуч, щоб освободити місце для меню */
.nav.container {
  padding: 0 0.5rem 0 1.5rem;   /* ↑ більший лівий падінг для контейнера */
}

/* 2) Підсуваємо список максимально вліво */
.nav-list {
  margin-left: -1.2rem;         /* ↑ негативний маргін, щоб зрушити вліво */
  gap: 0.5rem;                  /* ↓ менший інтервал між пунктами */
}

/* 3) Зменшуємо відступ логотипа, щоб ще більше звільнити місце */
.logo {
  margin-right: 0.5rem;         /* ↓ зменшили */
}

/* 4) Трохи менший шрифт, щоб усі пункти вмістилися */
.nav-link {
  font-size: clamp(0.65rem, 1vw, 0.8rem);  /* ↓ max 0.8rem */
}