/* ===== Daylight Commons — світла тема з новою системою класів ===== */
:root {
  --bg: #ffffff;
  --ink: #101828;
  --muted: #667085;
  --soft: #f2f4f7;
  --line: #e5e7eb;

  --brand: #0ea5e9;      /* бірюзово-блакитний */
  --brand-2: #f59e0b;    /* теплий янтар */
  --accent: #22c55e;     /* зелений акцент */

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius: 14px;

  --shadow-1: 0 10px 24px rgba(16,24,40,.08);
  --shadow-2: 0 18px 44px rgba(16,24,40,.10);
  --speed: .35s;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(245,158,11,.12), transparent 50%),
    var(--bg);
  line-height: 1.65;
}

img { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.wrap { width: min(1140px, 100% - 48px); margin: 0 auto; }
.stack > * + * { margin-top: 14px; }

.kicker {
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
  font-weight: 700; font-size: .78rem;
}
.display {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700; line-height: 1.1;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.lead { color: var(--muted); font-size: 1.05rem; }

/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: transform var(--speed) ease, background var(--speed) ease;
}
.topbar--hide { transform: translateY(-105%); }
.topbar__grid {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 14px 0;
}
.brand { display:inline-flex; align-items:center; gap:10px; font-weight: 800; letter-spacing: .02em; }
.brand__mark { width:42px; height:auto; }
.brand__text { font-size: 1rem; }

.desk-nav { display:block; }
.nav__list { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav__list a { color: #475467; font-weight:600; position:relative; }
.nav__list a.active::after,
.nav__list a:hover::after {
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: var(--ink);
}

.menu-btn { display:none; background:none; border:0; font-weight:700; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.menu-btn__box { display:inline-grid; gap:5px; margin-right:8px; vertical-align:middle; }
.menu-btn__box i { width:22px; height:2px; background: var(--ink); display:block; border-radius:99px; transition: transform var(--speed), opacity var(--speed); }
.menu-btn[aria-expanded="true"] .menu-btn__box i:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__box i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-btn__box i:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== Drawer (мобільне меню) ===== */
.drawer[hidden] { display:none; }
.drawer {
  position: fixed; inset: 64px 0 0 0; background: rgba(255,255,255,.98);
  border-top: 1px solid var(--line); padding: 18px; z-index: 40;
  animation: slideIn var(--speed) ease;
}
@keyframes slideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity:1; } }
.drawer__nav { display:grid; gap:14px; }
.w-100 { width:100%; }

/* ===== Hero ===== */
.hero { padding: clamp(80px, 12vw, 140px) 0 60px; }
.hero__grid { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(28px, 6vw, 64px); align-items:center; }
.hero__cta { display:flex; gap:12px; flex-wrap:wrap; margin-top: 12px; }
.hero__badges { display:flex; gap:10px; padding:0; margin:18px 0 0; list-style:none; flex-wrap:wrap; }
.hero__badges li { background: var(--soft); border:1px solid var(--line); padding:8px 12px; border-radius: 999px; font-weight:600; color:#344054; }
.hero__media { border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-2); }

/* ===== Sections ===== */
.section { padding: clamp(60px, 10vw, 110px) 0; }
.section--soft { background: linear-gradient(0deg, #fff, #fff), radial-gradient(800px 400px at 10% -10%, rgba(34,197,94,.08), transparent 60%); }
.section--emphasis { background: linear-gradient(180deg, #fff, #fdfaf4); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head > * + * { margin-top: 10px; }
.muted { color: var(--muted); }

.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px, 4vw, 40px); align-items: start; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 3vw, 28px); }

.card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-1);
}
.card--accent { background: conic-gradient(from 180deg at 0% 0%, rgba(14,165,233,.08), rgba(245,158,11,.08)); }
.h4 { font-size: 1.15rem; margin:0; }
.checklist { margin:0; padding:0; list-style:none; }
.checklist li { padding-left: 26px; position:relative; }
.checklist li + li { margin-top: 10px; }
.checklist li::before {
  content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border-radius:50%; background:var(--brand);
}

.cards .card h3 { margin:0 0 8px; font-size:1.25rem; }
.bullets { list-style:none; margin:0; padding:0; display:grid; gap:8px; color:#344054; }
.bullets li::before { content: "• "; color: var(--brand-2); font-weight: 900; }

/* Pricing */
.pricing { align-items: stretch; }
.price {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-1); display:grid; gap:12px;
}
.price--focus {
  border-color: rgba(14,165,233,.35);
  box-shadow: 0 8px 36px rgba(14,165,233,.15);
}

/* Events */
.quote {
  margin: 12px 0 0; padding: 16px 18px; background: var(--soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-style: italic; color:#344054;
}
.media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }

/* Logos */
.logos {
  display:grid; gap: 22px; align-items:center; justify-items:center;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.logos img { max-height: 44px; filter: grayscale(100%); opacity: .8; transition: .25s ease; }
.logos img:hover { filter:none; opacity:1; }
.tech { grid-column: 1 / -1; display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; color:#475467; }

/* CTA */
.cta { padding: clamp(48px, 8vw, 90px) 0; }
.cta__grid {
  background: linear-gradient(90deg, rgba(14,165,233,.16), rgba(245,158,11,.16));
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(24px, 5vw, 40px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  box-shadow: var(--shadow-2);
}

/* Footer */
.footer { background: #fcfcfd; border-top: 1px solid var(--line); }
.footer__grid { display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap: clamp(18px, 4vw, 32px); padding: 40px 0; }
.footer__bottom { border-top: 1px solid var(--line); padding: 14px 0 30px; color:#475467; }
.mini { font-size: .92rem; margin: 0 0 10px; }
.links { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.social { display:flex; gap:10px; }
.social a { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border: 1px solid var(--line); background:#fff; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 22px; border-radius: 999px; font-weight:700; transition: background var(--speed), transform var(--speed);
  border: 1px solid transparent;
}
.btn--primary { background: var(--ink); color:#fff; }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { background:#fff; border-color: var(--line); }
.btn--ghost:hover { background: var(--soft); }
.btn--outline { background:#fff; border-color: var(--line); }
.btn--contrast { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; }

/* Reveal on scroll (нова реалізація) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ======= Responsive ======= */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .desk-nav { display:none; }
  .menu-btn { display:inline-flex; align-items:center; }
}
@media (max-width: 680px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .hero__badges { justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}