:root {
  /* پالت الهام‌گرفته از بروشور */
  --color-primary: #00a99d;
  --color-primary-dark: #00897b;
  --color-primary-darker: #003e48;
  --color-accent: #ffd100;
  --color-accent-soft: #fff8e1;
  --color-purple: #a64d79;
  --color-coral: #e85d4c;
  --color-sky: #dceef5;
  --color-mint: #e8f6f4;
  --color-lavender: #f3eef5;

  --color-bg: #eef4f6;
  --color-surface: #ffffff;
  --color-text: #2c3e40;
  --color-text-muted: #5a6e72;
  --color-border: #d4e4e8;
  --color-success: #2e7d32;
  --color-error: #c62828;

  --gradient-brand: linear-gradient(135deg, #00a99d 0%, #00897b 55%, #00695c 100%);
  --gradient-hero: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(232, 246, 244, 0.25) 45%,
    rgba(220, 238, 245, 0.4) 100%
  );
  --gradient-hero-strong: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  --gradient-warm: linear-gradient(135deg, #fff8e1 0%, #e8f6f4 100%);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 16px rgba(0, 62, 72, 0.07);
  --shadow-lg: 0 10px 36px rgba(0, 62, 72, 0.12);
  --shadow-colored: 0 8px 24px rgba(0, 169, 157, 0.18);

  --max-width: 1100px;
  --header-height: 72px;
  --bottom-nav-height: 64px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.28s;
  --duration-normal: 0.45s;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Pelak', Tahoma, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  background-image:
    radial-gradient(ellipse at 100% 0%, rgba(0, 169, 157, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(166, 77, 121, 0.05) 0%, transparent 45%);
  direction: rtl;
  min-height: 100vh;
}

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

a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-primary);
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary-darker);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }

p + p {
  margin-top: 0.75rem;
}

ul, ol {
  padding-right: 1.25rem;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: 3.5rem 0;
  position: relative;
}

.section--alt {
  background: var(--color-surface);
}

.section--mint {
  background: linear-gradient(180deg, var(--color-mint) 0%, var(--color-surface) 100%);
}

.section--sky {
  background: linear-gradient(180deg, var(--color-sky) 0%, var(--color-surface) 100%);
}

.section__title {
  text-align: center;
  margin-bottom: 0.5rem;
  position: relative;
}

.section__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 2px;
  margin: 0.65rem auto 0;
}

.section__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .page-wrapper {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .footer {
    padding-bottom: calc(1.5rem + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}