/* =========================================================
   HELP DESK — СВІТЛА ТЕМА (узгоджено з іншими сторінками)
   ========================================================= */
:root{
  --bg: #f5f9ff;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e5e7eb;
  --brand: #0284c7;   /* primary */
  --brand-2: #0ea5e9; /* accent */
  --ring: rgba(14,165,233,.28);
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-1: 0 8px 25px rgba(2,8,23,.05);
  --shadow-2: 0 14px 40px rgba(2,8,23,.08);
}

/* Темна тема перемикається атрибутом на html */
html[data-theme="dark"]{
  --bg: #0b1220;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --ink-2:#cbd5e1;
  --muted:#94a3b8;
  --line:#1f2937;
  --brand:#38bdf8;
  --brand-2:#60a5fa;
  --ring: rgba(96,165,250,.25);
  --shadow-1:none;
  --shadow-2:none;
}

/* =========================================================
   БАЗА / КОНТЕЙНЕР
   ========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.9)),
    var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.65;
}
main{ max-width: 1200px; margin: 0 auto; padding: 24px 20px 40px; }
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--brand); text-decoration: none; }
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* =========================================================
   ГРИД / КАРТКИ / ТЕКСТ
   ========================================================= */
.wrap{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.grid{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
.col-4{ grid-column:span 4; }
.col-6{ grid-column:span 6; }
.col-8{ grid-column:span 8; }
.col-12{ grid-column:span 12; }
@media (max-width: 960px){ .col-4,.col-6,.col-8{ grid-column:span 12; } }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  padding:20px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}
.card.mini{ padding:16px; }

h1{ margin:.25rem 0; font-size:clamp(1.8rem,1.2rem + 2vw,3rem); line-height:1.2; }
h2{ text-align:center; margin:.3rem 0 .9rem; font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:900; }
h3{ margin:.2rem 0 .4rem; font-size:1.12rem; font-weight:800; }
.muted{ color:var(--muted); }
.sep{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:1rem 0; }
.badge{
  display:inline-block; border-radius:999px; padding:.2rem .6rem; font-size:.78rem; font-weight:700;
  background: rgba(14,165,233,.12); color: var(--brand);
  border: 1px solid rgba(14,165,233,.28);
}

/* =========================================================
   HERO (єдина двоколонкова картка)
   ========================================================= */
.hero{ margin-top: 10px; }
.hero-card{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 20px;
  align-items: stretch;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px;
}
.hero-main{
  display: grid;
  align-content: start;
  gap: 10px;
}
.hero-aside{
  background: linear-gradient(180deg, rgba(2,132,199,.07), rgba(14,165,233,.07));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(14,165,233,.12);
  color: var(--brand);
  border: 1px solid rgba(14,165,233,.35);
  border-radius: 999px;
  padding: .33rem .7rem;
  font-size: .9rem; font-weight:700;
}
.lead{ font-size:1.05rem; color:var(--ink-2); }
.cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 8px; }

@media (max-width: 960px){
  .hero-card{ grid-template-columns: 1fr; gap: 16px; }
}

/* =========================================================
   КНОПКИ
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 18px;
  border-radius:var(--radius-md); font-weight:800;
  border:1px solid var(--brand);
  background:#fff; color:var(--brand);
  box-shadow:var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn:hover{
  transform: translateY(-1px);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 25px var(--ring);
}
.btn:active{ transform: translateY(0); box-shadow: none; }
.btn.primary{ background: var(--brand); color:#fff; border-color: var(--brand); }
.btn.primary:hover{ background: color-mix(in srgb, var(--brand) 90%, black 10%); }

/* =========================================================
   ТАЙМЛАЙН
   ========================================================= */
.timeline{ position:relative; margin:0; padding:0; list-style:none; }
.timeline::before{
  content:""; position:absolute; left:10px; top:0; bottom:0;
  width:2px; background:var(--line);
}
.tl-item{ position:relative; padding-left:2rem; margin:1rem 0; }
.tl-item::before{
  content:""; position:absolute; left:2px; top:.42rem;
  width:14px; height:14px; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}

/* =========================================================
   ТАБЛИЦІ
   ========================================================= */
table{ width:100%; border-collapse: collapse; }
th,td{ text-align:left; padding:.6rem .8rem; }
thead{ background: rgba(14,165,233,.08); }
thead th{ color: var(--ink); font-weight:800; }
tbody tr:nth-child(even){ background: rgba(2,132,199,.03); }
tbody tr:hover{ background: rgba(14,165,233,.08); }

/* =========================================================
   DETAILS / FAQ
   ========================================================= */
details{
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  margin-bottom: 8px;
  padding: .7rem 1rem;
}
summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-2);
}
details[open]{ background: rgba(14,165,233,.05); }

/* =========================================================
   PLACEHOLDER під вбудовану Google Form
   ========================================================= */
.form-placeholder{
  aspect-ratio: 16/9;
  width: 100%;
  border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line));
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--muted);
}

/* =========================================================
   REVEAL-Анімація (IntersectionObserver додає .is-visible)
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================
   ФУТЕР
   ========================================================= */
.site-footer{
  margin-top: 28px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: transparent;
}