/* styles.css — повністю оновлено (унікальний дизайн) */

/* Токени */
:root{
  --c-bg:#FAFAF9;
  --c-ink:#0B1220;
  --c-muted:#525F7A;
  --c-primary:#7C5CFF;   /* індіго */
  --c-accent:#F97316;    /* помаранчевий акцент */
  --c-surface:#FFFFFF;
  --r:20px;
  --shadow-sm:0 6px 18px rgba(12,16,28,.08);
  --shadow-lg:0 18px 48px rgba(12,16,28,.12);
  --trs:.25s ease;
  --font:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* База */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:20px}

/* Кнопки */
.btn{display:inline-block;font-weight:800;padding:14px 22px;border-radius:999px;transition:transform var(--trs),box-shadow var(--trs)}
.btn--primary{background:linear-gradient(135deg,var(--c-primary),#9A84FF);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.36)}
.btn--ghost:hover{transform:translateY(-2px)}

/* Хедер */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);transition:box-shadow var(--trs)}
.site-header.is-shadow{box-shadow:0 10px 28px rgba(12,16,28,.1)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px}
.brand__text{font-weight:800;letter-spacing:.2px}

.primary-nav{display:flex;gap:32px;align-items:center}
.primary-nav a{font-weight:700;position:relative;padding:6px 0}
.primary-nav a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--c-primary);transition:width var(--trs)}
.primary-nav a:hover::after{width:100%}

/* Бургер */
.nav-toggle{display:none;border:0;background:transparent;cursor:pointer;padding:6px;gap:5px;flex-direction:column}
.nav-toggle span{width:26px;height:3px;background:var(--c-ink);border-radius:3px;transition:transform var(--trs)}

/* Герой */
.hero{padding:160px 0 120px;background:
  radial-gradient(900px 500px at 20% -20%, rgba(124,92,255,.25), transparent 60%),
  radial-gradient(900px 500px at 110% 0%, rgba(249,115,22,.16), transparent 55%),
  var(--c-bg);
}
.hero__inner{display:grid;grid-template-columns:1fr;align-items:center}
.hero__content{max-width:860px}
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.15;margin:0 0 14px 0;font-weight:800}
.hero p{max-width:64ch;color:var(--c-muted);margin:6px 0 26px}

/* Секції */
.section{padding:96px 0}
.section--alt{background:var(--c-surface)}
.kicker{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--c-accent);font-weight:800;margin-bottom:36px;text-align:center}

/* Сітки */
.grid{display:grid;gap:26px}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--works{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:26px}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--quotes{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Карти сервісів */
.card{background:var(--c-surface);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);transition:transform var(--trs),box-shadow var(--trs);text-align:left}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .icon{width:70px;height:70px;border-radius:16px;background:linear-gradient(135deg,var(--c-primary),#9A84FF);display:grid;place-items:center;margin-bottom:14px}
.card svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:3}
.card h3{margin:6px 0 8px;font-size:22px}
.card p{color:var(--c-muted)}

/* Роботи */
.work{display:block;border-radius:var(--r);overflow:hidden;background:var(--c-surface);box-shadow:var(--shadow-sm);transition:transform var(--trs),box-shadow var(--trs)}
.work:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.work:hover img{transform:scale(1.04)}
.work__meta{padding:18px}
.work__meta h3{margin:0 0 6px;font-size:20px}
.work__meta p{margin:0;color:var(--c-muted)}
.work--xl{display:grid;grid-template-columns:1.4fr .9fr}
.work--xl .work__media{height:100%}
.work--xl .work__meta{display:flex;flex-direction:column;justify-content:center}

/* Кроки/підхід */
.step{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--trs)}
.step:hover{box-shadow:var(--shadow-lg)}
.step img{height:100%;object-fit:cover;transition:transform .45s ease}
.step:hover img{transform:scale(1.06)}
.step__overlay{position:absolute;inset:auto 0 0 0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,transparent 70%);color:#fff;padding:18px}
.step__overlay h3{margin:0 0 6px;font-size:20px}
.step__overlay p{margin:0;opacity:.92}

/* Лід-текст */
.lede{max-width:75ch;margin:22px auto 0;text-align:center;color:var(--c-muted);font-size:18px}

/* Цитати */
.quote{background:var(--c-surface);padding:24px;border-radius:var(--r);box-shadow:var(--shadow-sm);color:var(--c-ink)}
.quote p{margin:0 0 12px}
.quote cite{font-weight:800;color:var(--c-ink)}

/* Футер */
.site-footer{background:linear-gradient(180deg,#0F172A 0%,#0B1220 100%);color:#fff;padding-top:72px}
.footer__grid{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start;justify-content:space-between}
.footer__brand img{height:40px;filter:brightness(0) invert(1);margin-bottom:12px}
.footer__links h3{margin:0 0 10px;font-size:22px}
.footer__links a{color:#E5EAF3}
.social{display:flex;gap:12px;margin-top:16px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background var(--trs)}
.social a:hover{background:rgba(255,255,255,.16)}
.social svg{width:22px;height:22px;fill:currentColor}
.footer__copy{text-align:center;margin:40px 0 0;padding:24px 0;opacity:.75}

/* Доступність */
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;border-radius:6px}

/* Мобільна навігація */
@media (max-width:900px){
  .primary-nav{position:fixed;inset:64px 0 0 auto;width:min(340px,90vw);background:var(--c-surface);box-shadow:var(--shadow-lg);padding:24px;flex-direction:column;gap:18px;transform:translateX(110%);transition:transform var(--trs)}
  .primary-nav.is-open{transform:translateX(0)}
  .nav-toggle{display:flex}
  body.no-scroll{overflow:hidden}
  .work--xl{grid-template-columns:1fr}
  .hero{padding:130px 0 96px}
  .hero h1{font-size:2rem}
}