/* --- GLOBAL VARS & RESET (Swiss Style DNA) --- */
:root {
  /* Palette: Warm Paper */
  --color-bg: #f5f2eb;
  --color-text: #1c1c1c;
  --color-accent: #bc4b35; /* Terracotta */
  --color-border: #1c1c1c; /* Strict Black Borders */

  /* Typography: Manrope */
  --font-main: "Manrope", sans-serif;

  /* Layout */
  --container-width: 1440px;
  --header-height: 80px;
  --gap: 2rem;
  --border-width: 1px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* --- UTILITIES --- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  border: 1px solid var(--color-text);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  /* DNA: Strict Shapes */
  border-radius: 0;
}

.btn--header {
  background-color: transparent;
  color: var(--color-text);
}

.btn:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--color-accent);
}

/* --- HEADER --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.header__container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.header__nav {
  display: flex;
  align-items: center;
}

.header__menu {
  display: flex;
  gap: 40px;
}

.header__link {
  font-weight: 500;
  font-size: 15px;
  position: relative;
}

.header__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.header__link:hover::after {
  width: 100%;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

/* Mobile Menu Logic */
.header__cta-mobile {
  display: none;
}

@media (max-width: 992px) {
  .header__menu {
    display: none; /* Hide default menu */
  }

  .desktop-only {
    display: none;
  }

  .header__burger {
    display: block;
  }

  /* Active state for mobile menu */
  .header__nav.active {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
  }

  .header__nav.active .header__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .header__nav.active .header__link {
    font-size: 24px;
    font-weight: 700;
  }

  .header__nav.active .header__cta-mobile {
    display: block;
    margin-top: 20px;
  }
}

/* --- MAIN --- */
/* Spacing for fixed header */
.main {
  margin-top: var(--header-height);
  min-height: 80vh; /* Temporary */
}

/* --- FOOTER --- */
.footer {
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Swiss Asymmetry */
  max-width: var(--container-width);
  margin: 0 auto;
}

.footer__col {
  padding: 60px 24px;
  border-right: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__col:last-child {
  border-right: none;
}

.footer__logo-text {
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.footer__tagline {
  font-size: 16px;
  max-width: 300px;
  opacity: 0.8;
}

.footer__note {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 700;
}

.footer__title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  opacity: 0.5;
}

.footer__links li {
  margin-bottom: 12px;
}

.footer__links a:hover {
  color: var(--color-accent);
  padding-left: 5px; /* Micro-interaction: shift */
}

.footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__contact-item .label {
  display: block;
  font-size: 12px;
  opacity: 0.5;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.footer__contact-item a {
  font-weight: 500;
}

.footer__contact-item a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  border-top: var(--border-width) solid var(--color-border);
  text-align: center;
  padding: 20px;
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__col:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__col {
    border-right: none;
    border-bottom: var(--border-width) solid var(--color-border);
    padding: 40px 24px;
  }
}

/* --- HERO SECTION (Swiss Style) --- */
.hero {
  border-bottom: var(--border-width) solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* Asymmetry */
  max-width: var(--container-width);
  margin: 0 auto;
  min-height: 600px; /* Hero height */
}

/* Left Column */
.hero__text-col {
  padding: 80px 40px 80px 24px;
  border-right: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: 24px;
  border: 1px solid var(--color-accent);
  padding: 6px 12px;
  align-self: flex-start;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%; /* Only distinct circle element */
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.hero__title {
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 0.95;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 32px;
  letter-spacing: -0.03em;
}

/* Stylistic feature: Outlined text */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text);
  position: relative;
  display: inline-block;
}

/* Micro-interaction: outline fill on hover */
.text-outline::before {
  content: "Нового";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  color: var(--color-text);
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  border-right: 2px solid var(--color-accent);
}

.hero:hover .text-outline::before {
  width: 100%;
}

.hero__subtitle {
  font-size: 18px;
  max-width: 480px;
  margin-bottom: 48px;
  opacity: 0.8;
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.btn--primary {
  background-color: var(--color-text);
  color: var(--color-bg);
  gap: 12px;
}

.btn--primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
}

.link-arrow {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.link-arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Right Column & Canvas */
.hero__visual-col {
  position: relative;
  background-color: #eae7df; /* Slightly darker shade */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 40px;
}

#heroCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__overlay-info {
  position: relative;
  z-index: 2;
  width: 100%;
}

.stat-box {
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  padding: 24px;
  display: inline-block;
  min-width: 200px;
}

.stat-num {
  display: block;
  font-size: 48px;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-desc {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Ticker */
.ticker-wrap {
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-text);
  color: var(--color-bg);
  overflow: hidden;
  padding: 12px 0;
  white-space: nowrap;
}

.ticker {
  display: inline-block;
  animation: ticker 30s linear infinite;
}

.ticker__item {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ticker__sep {
  color: var(--color-accent);
  margin: 0 24px;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Media Queries */
@media (max-width: 992px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__text-col {
    border-right: none;
    border-bottom: var(--border-width) solid var(--color-border);
    padding: 60px 20px;
  }
  .hero__visual-col {
    min-height: 400px;
  }
}

@media (max-width: 600px) {
  .hero__title {
    font-size: 3rem;
  }
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- SHARED SECTIONS (Swiss Grid System) --- */
.section-border {
  border-bottom: var(--border-width) solid var(--color-border);
}

.grid-2-col {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* 40/60 Split */
  max-width: var(--container-width);
  margin: 0 auto;
}

.swiss-header-cell {
  padding: 80px 40px 80px 24px;
  border-right: var(--border-width) solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  height: fit-content;
}

.swiss-content-cell {
  padding: 80px 40px;
}

.swiss-content-cell.pl-0 {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.section-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.section-subtitle {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.7;
  max-width: 300px;
}

/* --- ACCORDION (Strict Style) --- */
.accordion__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.3s ease;
}

.accordion__header:hover {
  background-color: #fff; /* Slight highlight */
}

.accordion__num {
  font-family: monospace; /* Type Option 3: Mono Detail */
  color: var(--color-accent);
  margin-right: 24px;
  font-size: 14px;
}

.accordion__title {
  font-size: 24px;
  font-weight: 700;
  flex-grow: 1;
}

.accordion__icon {
  transition: transform 0.3s ease;
}

/* Open State */
.accordion__item.active .accordion__icon {
  transform: rotate(45deg); /* Plus becomes Cross */
}

.accordion__item.active .accordion__title {
  color: var(--color-accent);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.accordion__body {
  padding: 0 40px 40px 60px; /* Aligned with title */
  opacity: 0.8;
  line-height: 1.6;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
  .grid-2-col {
    grid-template-columns: 1fr;
  }

  .swiss-header-cell {
    border-right: none;
    position: static;
    padding: 60px 24px;
  }

  .mobile-border-bottom {
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .swiss-content-cell {
    padding: 0;
  }

  .accordion__header {
    padding: 30px 24px;
  }

  .accordion__body {
    padding: 0 24px 30px 24px;
  }

  .accordion__title {
    font-size: 20px;
  }
}

/* --- PROGRAM SECTION (Grid Layout) --- */
.swiss-header-full {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: 80px 0;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 24px;
}

.program-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Columns */
  max-width: var(--container-width);
  margin: 0 auto;
}

.program-card {
  border-right: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  background-color: var(--color-bg);
}

/* Remove right border for even items to avoid double borders with container (optional, but cleaner if container had borders)
   Here we rely on the container having no side borders, so middle border is created by the left element. 
   Actually, simpler approach for fluid grid: */
.program-grid .program-card:nth-child(2n) {
  border-right: none;
}

/* Item hover effect: "Invert" or "Shift" */
.program-card:hover {
  background-color: #fff;
  transform: translateY(-5px); /* Breaking the grid slightly on z-axis */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
  border-color: transparent; /* Hide borders to show shadow clearly */
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.card-num {
  font-family: monospace;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 4px 8px;
  font-size: 12px;
  text-transform: uppercase;
}

.card-icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

.card-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.card-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.7;
  margin-bottom: 32px;
  flex-grow: 1; /* Pushes list to bottom */
}

.card-list {
  border-top: 1px solid rgba(28, 28, 28, 0.1); /* Subtle divider */
  padding-top: 24px;
}

.card-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}

.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 0; /* Square bullets */
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.mobile-cta-wrapper {
  display: none;
  padding: 24px;
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: center;
}

/* Media Queries */
@media (max-width: 992px) {
  .program-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
  }

  .program-card {
    border-right: none; /* Full width */
  }

  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-cta-wrapper {
    display: block;
  }

  .swiss-header-full {
    padding: 60px 0;
  }
}

/* --- REVIEWS (Slider) --- */
.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-controls-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.slider-nav {
  display: flex;
  gap: 16px;
}

.nav-btn {
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-text);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--color-text);
  /* DNA: Square buttons */
  border-radius: 0;
}

.nav-btn:hover {
  background: var(--color-text);
  color: var(--color-bg);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--color-accent);
}

.review-counter {
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.relative-container {
  position: relative;
  min-height: 400px; /* Space for absolute slides */
  display: flex;
  align-items: center;
}

.review-slide {
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.review-slide.active {
  opacity: 1;
  visibility: visible;
}

.quote-icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  margin-bottom: 24px;
}

.review-text {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 32px;
  font-style: italic; /* Serif vibe for quotes */
  font-family: "Playfair Display", serif; /* Optional mixing if we loaded it, but keeping Manrope is fine too */
}

.review-author {
  font-style: normal;
  display: block;
  border-left: 2px solid var(--color-accent);
  padding-left: 16px;
  font-size: 14px;
}

.review-author strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
  .flex-center {
    justify-content: flex-start;
  }

  .relative-container {
    min-height: auto;
    padding: 40px 24px;
  }

  .review-slide {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    display: none; /* Hide non-active via display on mobile to avoid height issues */
  }

  .review-slide.active {
    display: block;
    animation: fadeIn 0.5s ease;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- CONTACT FORM --- */
.mt-auto {
  margin-top: 60px;
}

.contact-item {
  margin-bottom: 24px;
}

.contact-item .label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 4px;
}

.contact-item .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

/* Form Styling */
.swiss-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-group label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.swiss-form input[type="text"],
.swiss-form input[type="email"],
.swiss-form input[type="tel"] {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--color-text);
  border-radius: 0; /* DNA: Strict */
  transition: all 0.3s ease;
}

.swiss-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: #fff;
  box-shadow: 4px 4px 0px rgba(188, 75, 53, 0.1);
}

.swiss-form input.error {
  border-color: #ff0000;
  background-color: rgba(255, 0, 0, 0.02);
}

.error-text {
  font-size: 12px;
  color: #ff0000;
  min-height: 14px; /* Prevent layout jump */
}

/* Custom Checkbox (Consent) */
.checkbox-container {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  line-height: 1.4;
  text-transform: none; /* Override label uppercase */
  font-weight: 400;
}

/* ВИПРАВЛЕННЯ: Повне приховання нативного чекбокса */
/* ВИПРАВЛЕННЯ: Повне видалення нативних чекбоксів з поля зору */
.checkbox-container input[type="checkbox"],
.hidden-checkbox {
  position: absolute;
  left: -9999px; /* Відправляємо елемент далеко за межі екрану */
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;

  /* Скидаємо всі можливі стилі */
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.checkmark {
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 1px solid var(--color-border);
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.consent-text a {
  text-decoration: underline;
  color: var(--color-accent);
}

/* Custom Captcha Style */
.captcha-group {
  background: #eae7df;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.custom-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.custom-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 2px;
  transition: all 0.2s;
  position: relative;
}

.hidden-checkbox:checked + .custom-checkbox {
  border-color: #4caf50;
  background: #4caf50;
}

.hidden-checkbox:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  font-size: 14px;
  font-weight: 500;
}

.btn--full {
  width: 100%;
}

.form-note {
  font-size: 12px;
  text-align: center;
  opacity: 0.5;
  margin-top: 8px;
}

/* Success Message */
.success-message {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  height: 100%;
  animation: fadeIn 0.5s ease;
}

.success-icon {
  width: 64px;
  height: 64px;
  color: #4caf50;
  margin-bottom: 24px;
}

.success-message h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

/* Loading State for Button */
.btn.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* --- COOKIE POPUP --- */
.cookie-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-text);
  padding: 24px;
  z-index: 2000;
  max-width: 400px;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(150%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.cookie-popup.show {
  transform: translateY(0);
}

.cookie-content p {
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.cookie-content a {
  text-decoration: underline;
  color: var(--color-accent);
}

.btn--small {
  padding: 8px 24px;
  font-size: 12px;
  background-color: var(--color-text);
  color: var(--color-bg);
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn--small:hover {
  background-color: var(--color-accent);
}

/* --- STANDARD TEXT PAGES (Privacy, Terms, etc.) --- */
/* Ці стилі працюватимуть, якщо ти створиш файли privacy.html і т.д. згідно зі структурою в ТЗ */
.pages {
  padding: 100px 0;
  min-height: 80vh;
}

.pages .container {
  max-width: 800px; /* Narrower for reading */
}

.pages h1 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 20px;
}

.pages h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--color-text);
}

.pages p {
  margin-bottom: 16px;
  line-height: 1.7;
  opacity: 0.9;
}

.pages ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 24px;
}

.pages li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.pages a {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .cookie-popup {
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
  }
}