/* ══════════════════════════════════════════════════════════════════════
   Services page — корпоративний вигляд нового сайту (dev3.getgrant.ua)
   перенесений на стару ПРОДівську тему `getgrants`.

   Стилі зведені з astro-frontend/src/styles/main.css (селектори .sv-*) до
   плаского набору правил: у джерелі той самий елемент описують 3-4 блоки,
   що перебивають один одного, тут лишились уже обчислені значення.

   Усе живе під `.sv-page`, щоб не чіпати решту сайту і щоб глобальні
   правила теми (bootstrap-reboot, main.css) не з'їдали типографіку.
   ══════════════════════════════════════════════════════════════════════ */

.sv-page {
  --sv-blue:       #0166b0;
  --sv-blue-deep:  #0260A6;
  --sv-navy:       #0D1B3E;
  --sv-body:       #374151;
  --sv-muted:      #6B7280;
  --sv-faint:      #9CA3AF;
  --sv-border:     #E8ECF2;
  --sv-surface:    #F8F9FB;

  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Базовий кегль нового сайту — 15px/1.6 (стара тема дає 16px). */
  font-size: 15px;
  line-height: 1.6;
  color: var(--sv-body);
  -webkit-font-smoothing: antialiased;
}

/* Тема ставить власні відступи і кольори заголовкам — гасимо всередині сторінки */
.sv-page h1, .sv-page h2, .sv-page h3,
.sv-page h4, .sv-page h5, .sv-page h6, .sv-page p {
  margin: 0; padding: 0; font-family: inherit; text-transform: none;
  /* Тема тисне заголовкам line-height:1.3; новий сайт лишає успадковані 1.6,
     тож без цього рядка всі підзаголовки виходять на пів рядка тіснішими. */
  line-height: inherit;
}
.sv-page a { text-decoration: none; }
.sv-page *, .sv-page *::before, .sv-page *::after { box-sizing: border-box; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.sv-hero {
  background: var(--sv-blue-deep);
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.sv-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 100% -20%, rgba(255,255,255,.08) 0%, transparent 55%);
}
.sv-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: rgba(0,0,0,.12);
}
.sv-hero-inner {
  max-width: 680px; margin: 0 auto; padding: 0 1.5rem;
  position: relative; z-index: 1; text-align: center;
}
.sv-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px;
  margin-bottom: 1rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.sv-h1 {
  font-size: 34px; font-weight: 800; color: #fff;
  line-height: 1.2; letter-spacing: -.5px;
  margin: 0 0 .8rem;
}
.sv-sub {
  font-size: 16px; color: rgba(255,255,255,.68);
  line-height: 1.7; max-width: 520px;
  margin: 0 auto 1.5rem;
}
.sv-hero-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
}
.sv-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; width: 100%; max-width: 780px;
  margin: 2.75rem auto 0;
}
.sv-hero-stat {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 1.15rem .9rem;
  text-align: center;
}
.sv-hero-stat-n {
  font-size: 27px; font-weight: 800; color: #fff;
  line-height: 1.05; letter-spacing: -.5px;
}
.sv-hero-stat-l {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.72); margin-top: .4rem;
}
.sv-hero ::selection { background: rgba(255,255,255,.26); color: #fff; }

/* ── Кнопки ─────────────────────────────────────────────────────────── */
.sv-btn-white,
.sv-btn-ghost,
.sv-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; min-height: 48px;
  border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sv-btn-white {
  background: #fff; color: var(--sv-blue); border: 2px solid #fff;
}
.sv-btn-white:hover { background: transparent; color: #fff; border-color: #fff; }
.sv-btn-ghost {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.45); font-size: 14px;
}
.sv-btn-ghost:hover { background: #fff; color: var(--sv-blue); border-color: #fff; }
/* Кнопка на світлому тлі (флагманська картка) — суцільна синя */
.sv-btn-primary {
  background: var(--sv-blue); color: #fff; border: 2px solid var(--sv-blue);
}
.sv-btn-primary:hover { background: #fff; color: var(--sv-blue); }

/* ── Спільні заголовки секцій ───────────────────────────────────────── */
.sv-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sv-faint);
  margin-bottom: .5rem;
}
.sv-section-title {
  font-size: 30px; font-weight: 800; color: var(--sv-navy);
  line-height: 1.2; letter-spacing: -.025em; margin: 0 0 .85rem;
}
.sv-section-sub {
  font-size: 17px; color: var(--sv-muted); line-height: 1.7;
  max-width: 600px; margin: 0 auto;
}

/* ── Шість послуг ───────────────────────────────────────────────────── */
.sv-main { background: #F4F7FA; padding: 5.5rem 0; }
.sv-main-inner { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.sv-main-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.sv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.sv-card {
  background: #fff;
  border: 1.5px solid #E5E9F0;
  border-radius: 20px;
  padding: 1.9rem 1.75rem 1.6rem;
  display: flex; flex-direction: column; gap: .75rem;
  color: inherit; position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, #0166b0); opacity: 0; transition: opacity .2s;
}
.sv-card:hover {
  border-color: var(--accent, #0166b0);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.sv-card:hover::before { opacity: 1; }
.sv-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: .25rem;
}
.sv-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-bg, #EFF6FF); color: var(--accent, #0166b0);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sv-card-num {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  line-height: 1; padding-top: 2px;
  color: var(--accent, #0166b0); opacity: .32;
}
.sv-card-title {
  font-size: 16px; font-weight: 800; color: var(--sv-navy);
  line-height: 1.35; min-height: 2.5em;
}
.sv-card-desc {
  font-size: 15px; color: var(--sv-muted); line-height: 1.65; flex: 1;
}
.sv-card-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700; color: var(--accent, #0166b0);
  margin-top: auto; padding-top: .5rem; transition: gap .15s;
}
.sv-card:hover .sv-card-link { gap: 8px; }

/* ── Флагманська послуга ────────────────────────────────────────────── */
.sv-featured {
  padding: 5rem 0; background: #F5F6F8;
  border-top: 1px solid var(--sv-border); border-bottom: 1px solid var(--sv-border);
}
.sv-featured-inner { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.sv-featured-inner > .sv-section-label,
.sv-featured-inner > .sv-section-title { text-align: center; }
.sv-featured-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center; margin-top: 2.5rem;
}
.sv-featured-card {
  background: #fff; border-radius: 24px;
  border: 1.5px solid #BFDBFE; padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(1,102,176,.08);
}
.sv-featured-card h3 {
  font-size: 22px; font-weight: 700; color: var(--sv-navy); margin-bottom: .75rem;
}
.sv-featured-card p {
  font-size: 16px; color: var(--sv-muted); line-height: 1.75; margin-bottom: 1.5rem;
}
.sv-featured-list { display: flex; flex-direction: column; gap: .6rem; }
.sv-featured-item {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: 15px; color: var(--sv-body); font-weight: 600; line-height: 1.5;
}
.sv-featured-item svg { color: var(--sv-blue); flex-shrink: 0; margin-top: 2px; }
.sv-featured-cta { margin-top: 1.75rem; }
.sv-featured-visual {
  background: linear-gradient(135deg, #F4F6F9 0%, #E8ECF2 100%);
  border-radius: 24px; padding: 2.5rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.sv-step {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #fff; border-radius: 14px; padding: 1.25rem;
  border: 1px solid var(--sv-border);
}
.sv-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sv-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; flex-shrink: 0;
}
.sv-step h5 { font-size: 15px; font-weight: 800; color: var(--sv-navy); margin-bottom: 2px; }
.sv-step p  { font-size: 14px; color: var(--sv-muted); line-height: 1.5; }

/* ── Процес співпраці ───────────────────────────────────────────────── */
.sv-process {
  padding: 5.5rem 0; background: var(--sv-surface);
  border-top: 1px solid var(--sv-border); border-bottom: 1px solid var(--sv-border);
}
.sv-process-inner { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.sv-process-inner > .sv-section-label,
.sv-process-inner > .sv-section-title { text-align: center; }
.sv-process-inner > .sv-section-title { margin-bottom: 0; }
.sv-process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 2.5rem; position: relative;
}
.sv-process-grid::before {
  content: ''; position: absolute;
  top: 26px; left: calc(100% / 8); right: calc(100% / 8);
  height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--sv-border), var(--sv-blue), var(--sv-border));
}
.sv-process-step { text-align: center; padding: 0 1rem; position: relative; z-index: 1; }
.sv-process-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: #F0F2F5; border: 2px solid #D4D8DF; color: var(--sv-blue);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; font-size: 14px; font-weight: 700;
}
.sv-process-step.active .sv-process-circle {
  background: var(--sv-blue); color: #fff; border-color: var(--sv-blue);
}
.sv-process-step h4 { font-size: 15px; font-weight: 800; color: var(--sv-navy); margin-bottom: .35rem; }
.sv-process-step p  { font-size: 14px; color: var(--sv-muted); line-height: 1.5; }

/* ── Відгуки ────────────────────────────────────────────────────────── */
.sv-testimonial {
  padding: 4rem 0; background: #F3F5F8;
  border-top: 1px solid var(--sv-border); border-bottom: 1px solid var(--sv-border);
}
.sv-rv-wrap { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.sv-rv-wrap > .sv-section-label { text-align: center; margin-bottom: 1.5rem; }
.sv-rv-slider { position: relative; min-height: 260px; }
.sv-rv-slide { display: none; animation: svRvFade .4s ease; }
.sv-rv-slide.sv-rv-active { display: block; }
@keyframes svRvFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sv-rv-stars { font-size: 18px; color: #F59E0B; letter-spacing: 2px; margin-bottom: 1.1rem; }
.sv-rv-text {
  font-size: 18px; font-weight: 500; color: var(--sv-navy);
  line-height: 1.7; font-style: italic; margin: 0 0 1.5rem;
}
.sv-rv-author { display: inline-flex; align-items: center; gap: .85rem; text-align: left; }
.sv-rv-av {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
}
.sv-rv-name { font-size: 16px; font-weight: 700; color: var(--sv-navy); }
.sv-rv-role { font-size: 14px; color: var(--sv-muted); margin-top: 2px; }
.sv-rv-org  { font-size: 13px; color: var(--sv-faint); margin-top: 2px; }
.sv-rv-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 2rem;
}
.sv-rv-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid #E5E7EB; background: #fff; color: var(--sv-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: border-color .15s, color .15s;
}
.sv-rv-arrow:hover { border-color: var(--sv-blue); color: var(--sv-blue); }
.sv-rv-dots { display: flex; gap: .4rem; align-items: center; }
.sv-rv-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: #D1D5DB; cursor: pointer;
  transition: background .2s, transform .2s;
}
.sv-rv-dot.sv-rv-dot-active { background: var(--sv-blue); transform: scale(1.3); }

/* ── Заклик до дії ──────────────────────────────────────────────────── */
.sv-cta {
  background: linear-gradient(135deg, var(--sv-blue) 0%, #0A52A8 100%);
  padding: 5rem 0;
}
.sv-cta-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: nowrap;
}
.sv-cta-inner > div:first-child { flex: 1 1 auto; min-width: 0; }
.sv-cta h2 {
  font-size: 34px; font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.035em; margin-bottom: .9rem;
}
.sv-cta p { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.7; max-width: 460px; }
.sv-cta-btns { display: flex; gap: .75rem; flex-wrap: wrap; flex-shrink: 0; }
.sv-cta ::selection { background: rgba(255,255,255,.26); color: #fff; }

/* ── Часті запитання ────────────────────────────────────────────────── */
.sv-faq { padding: 3.5rem 1.5rem 4rem; background: #F9FAFB; border-top: 1px solid var(--sv-border); }
.sv-faq-inner { max-width: 820px; margin: 0 auto; }
.sv-faq-title {
  font-size: 30px; font-weight: 800; color: var(--sv-navy);
  text-align: center; margin-bottom: .5rem; letter-spacing: -.025em;
}
.sv-faq-sub { text-align: center; color: var(--sv-muted); font-size: 1rem; margin-bottom: 2rem; }
.sv-faq-list { display: flex; flex-direction: column; gap: .6rem; }
.sv-faq-item {
  background: #fff; border: 1px solid #E5EAF0; border-radius: 12px; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sv-faq-item[open] { border-color: #cfe0f0; box-shadow: 0 2px 12px rgba(1,102,176,.06); }
.sv-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; font-size: 16.5px; font-weight: 600;
  color: var(--sv-navy); cursor: pointer; list-style: none;
}
.sv-faq-q::-webkit-details-marker { display: none; }
.sv-faq-q:hover { color: var(--sv-blue); }
.sv-faq-item[open] .sv-faq-q { color: var(--sv-blue); }
.sv-faq-arrow { flex: none; color: var(--sv-faint); transition: transform .2s ease; }
.sv-faq-item[open] .sv-faq-arrow { transform: rotate(180deg); color: var(--sv-blue); }
.sv-faq-a { padding: 0 1.15rem 1.1rem; font-size: 15.7px; line-height: 1.65; color: var(--sv-body); }
.sv-faq-a p + p { margin-top: .6rem; }
.sv-faq-a a {
  color: var(--sv-blue); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Фокус з клавіатури ─────────────────────────────────────────────── */
.sv-page a:focus-visible,
.sv-page button:focus-visible,
.sv-page summary:focus-visible {
  outline: 2px solid var(--sv-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Адаптив ────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .sv-h1 { font-size: 38px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sv-h1 { font-size: 32px; }
  .sv-section-title { font-size: 26px; }
  .sv-cards { grid-template-columns: repeat(2, 1fr); }
  .sv-process-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .sv-process-grid::before { display: none; }
  .sv-hero-stats { max-width: 560px; }
}
@media (max-width: 900px) {
  .sv-featured-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sv-cta-inner { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .sv-hero { padding: 2.5rem 0 2rem; }
  .sv-h1 { font-size: 24px; letter-spacing: -.025em; }
  .sv-sub { font-size: 15px; margin-bottom: 1.25rem; }
  .sv-hero-actions { flex-direction: column; align-items: center; gap: .65rem; }
  .sv-hero-actions .sv-btn-white,
  .sv-hero-actions .sv-btn-ghost { width: 100%; max-width: 320px; }
  .sv-main, .sv-process { padding: 3rem 0; }
  .sv-featured, .sv-cta { padding: 3rem 0; }
  .sv-main-inner, .sv-process-inner, .sv-featured-inner, .sv-cta-inner { padding: 0 1rem; }
  .sv-main-head { margin-bottom: 2rem; }
  .sv-section-title { font-size: 22px; letter-spacing: -.02em; }
  .sv-section-label { font-size: 10px; }
  .sv-cards { grid-template-columns: 1fr; gap: 1rem; }
  .sv-card { padding: 1.25rem; border-radius: 14px; }
  .sv-card-title { min-height: 0; }
  .sv-featured-card, .sv-featured-visual { padding: 1.5rem; }
  .sv-process-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .sv-process-grid::before { display: none; }
  .sv-process-circle { width: 44px; height: 44px; font-size: 13px; }
  .sv-cta h2 { font-size: 24px; }
  .sv-cta-inner { flex-direction: column; align-items: flex-start; }
  .sv-cta-btns { flex-direction: column; align-items: stretch; gap: .65rem; width: 100%; }
  .sv-cta-btns .sv-btn-white,
  .sv-cta-btns .sv-btn-ghost { width: 100%; max-width: 320px; }
  .sv-faq { padding: 2.5rem 1rem 3rem; }
  .sv-faq-title { font-size: 22px; }
  .sv-faq-q { font-size: 15.5px; padding: .9rem 1rem; }
}
@media (max-width: 640px) {
  .sv-hero-stats { grid-template-columns: 1fr 1fr; max-width: 400px; }
}
@media (max-width: 389px) {
  .sv-h1 { font-size: 21px; }
  .sv-section-title { font-size: 20px; }
  .sv-process-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-page * { animation: none !important; transition: none !important; }
  .sv-card:hover { transform: none; }
}