/* Повністю нова система токенів/класів, інша архітектура, інші назви */
@layer base, components, utilities;

@layer base {
  :root {
    --bg: #f5f7fb;
    --ink: #0b1020;
    --muted: #626c83;
    --paper: #ffffff;

    --brand-1: #00bcd4;
    --brand-2: #ffb300;
    --accent: #1095c1;

    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --elev: 0 24px 60px rgba(11,16,32,.10);

    --fx: 1; /* масштаб типографіки */
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body.site {
    margin: 0;
    color: var(--ink);
    background:
      radial-gradient(900px 360px at 92% -10%, rgba(16,149,193,.12), transparent 60%),
      var(--bg);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.6;
  }

  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skiplink { position:absolute; left:-9999px; }
  .skiplink:focus { left:12px; top:12px; background:#fff; padding:8px 12px; border-radius:8px; z-index:999; }
}

/* ========= LAYOUT ========= */
@layer components {
  .shell { width: min(1120px, 92vw); margin-inline: auto; }
  .stack { display:flex; flex-direction:column; }
  .stack.gap-2 > * + * { margin-top: .5rem; }
  .stack.gap-3 > * + * { margin-top: .75rem; }
  .stack.gap-4 > * + * { margin-top: 1rem; }

  .cluster { display:flex; flex-wrap:wrap; gap: 12px; align-items:center; }
  .grid { display:grid; gap: 18px; }
  .grid--cards { grid-template-columns: repeat(4, minmax(0,1fr)); }

  .section { padding: 88px 0; }
  .section--alt { background: linear-gradient(180deg, rgba(16,149,193,.06), transparent 60%); }
  .section--tint { background: linear-gradient(180deg, rgba(255,179,0,.10), transparent 60%); }
  .section__head { display:flex; justify-content:space-between; align-items:flex-end; gap: 16px; margin-bottom: 22px; }
  .approach { display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items:start; }
  .contact { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:start; }

  .card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--elev);
  }
  .card--soft {
    background: linear-gradient(145deg, rgba(16,149,193,.08), rgba(255,179,0,.08));
    border: 1px dashed rgba(16,149,193,.40);
  }

  .nav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(11,16,32,.08);
  }
  .nav .shell { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
  .brand { display:flex; align-items:center; gap: 12px; font-weight: 800; letter-spacing: .02em; text-decoration:none; color:inherit; }
  .brand__img { height: 32px; display:block; }
  .brand__name { font-size: 1.05rem; }

  .menu { display:flex; gap: 26px; font-weight: 700; }
  .menu a { position: relative; padding: 8px 0; text-decoration:none; color:inherit; }
  .menu a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--accent); transition: .28s ease; }
  .menu a:hover::after { width:100%; }

  .nav__toggle {
    display:none; width:44px; height:44px; border-radius:12px;
    border:1px solid rgba(11,16,32,.14); background:#fff; align-items:center; justify-content:center;
  }
  .nav__bars { width:18px; height:2px; background:var(--ink); box-shadow: 0 6px 0 var(--ink), 0 -6px 0 var(--ink); display:block; }

  /* HERO */
  .hero { padding: 80px 0 40px; }
  .hero__grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items:start; }
  .eyebrow { color: var(--accent); font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin: 0; }
  .display { font-size: clamp(2.2rem, 2.2vw + 1rem, 3.2rem); line-height: 1.12; margin: 8px 0 12px; }
  .lede { color: var(--muted); margin: 0 0 12px; }

  .badges { list-style:none; display:flex; flex-wrap:wrap; gap: 10px; padding: 0; margin: 10px 0 0; }
  .badges li { font-weight:800; padding:8px 12px; border-radius:999px; background: rgba(16,149,193,.12); color: var(--accent); }

  .panel { display:grid; gap: 16px; }
  .tick { margin: 0; padding-left: 18px; }
  .tick li { margin: 6px 0; }
  .statbox { background:#0f1221; color:#fff; padding: 20px; border-radius: var(--radius-md); display:grid; gap: 6px; }
  .statbox b { font-size: 2.6rem; line-height: 1; }

  /* WALL / GALLERY */
  .wall {
    display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-bottom: 22px;
  }
  .shot { grid-column: span 4; overflow:hidden; }
  .shot--wide { grid-column: span 8; }
  .shot img { width:100%; display:block; border-radius: var(--radius-md); }
  .shot figcaption { display:grid; gap:6px; margin-top: 10px; }
  .shot strong { font-size: 1.1rem; }

  .gallery { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
  .thumb img { border-radius: var(--radius-md); display:block; }

  /* STEPS / KPI */
  .steps { padding:0; list-style:none; display:grid; gap:14px; }
  .steps li { padding: 16px 18px; border-radius: var(--radius-sm);
    border: 1px dashed rgba(255,179,0,.6); background: rgba(255,179,0,.06); }
  .kpi { display:grid; gap:14px; }
  .kpi__cell { background:#0f1221; color:#fff; border-radius: var(--radius-md); padding: 20px; }
  .kpi__val { font-weight:800; font-size: 2rem; line-height:1; display:block; }
  .kpi__label { opacity:.85; }

  /* FORM */
  .form { display:grid; gap: 14px; grid-template-columns: 1fr 1fr; }
  .field { display:grid; gap:6px; font-weight:700; }
  .field input, .field textarea {
    width:100%; padding:12px 14px; border-radius: var(--radius-sm); border:1px solid rgba(11,16,32,.14); font-size: 1rem;
  }
  .field--full { grid-column: 1 / -1; }
  .hp { position:absolute; left:-99999px; }

  /* FOOTER */
  .foot { margin-top: 70px; background:#0f1221; color:#fff; padding: 48px 0 22px; }
  .foot__grid { display:flex; align-items:flex-start; justify-content:space-between; gap: 28px; }
  .foot__logo { height: 34px; }
  .foot__actions { display:grid; gap: 12px; justify-items:end; }
  .social { display:flex; gap: 12px; list-style:none; padding:0; margin:0; }
  .social a { display:grid; place-items:center; width:40px; height:40px; border-radius: 12px; background: rgba(255,255,255,.14);
    text-decoration:none; color:#fff; font-weight:800; }
  .social a:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); transition: .28s ease; }
  .foot__meta { text-align:center; opacity:.6; margin-top: 24px; }

  /* BUTTONS & TEXT */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding: 12px 22px; border-radius: 999px; font-weight:800; border:2px solid transparent; cursor:pointer; text-decoration:none; color:inherit;
    transition: .28s cubic-bezier(.2,.7,.2,1);
  }
  .btn--primary {
    background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
    color:#111; box-shadow: 0 16px 40px rgba(16,149,193,.22);
  }
  .btn--primary:hover { transform: translateY(-2px); }
  .btn--quiet { background:#fff; border-color: rgba(11,16,32,.2); }
  .btn--quiet:hover { border-color: var(--accent); color: var(--accent); }

  .h2 { font-size: clamp(1.8rem, 1.6vw + 1rem, 2.4rem); line-height:1.22; margin: 0; }
  .h5 { font-size: 1.125rem; margin: 0 0 6px; }
  .muted { color: var(--muted); }
  .m-0 { margin:0; }

  /* REVEAL */
  .reveal { opacity:0; transform: translateY(18px); }
  .reveal.in { opacity:1; transform: none; transition: .6s ease; }
}

/* ========= ADAPTIVE ========= */
@layer utilities {
  @media (max-width: 980px) {
    .grid--cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero__grid { grid-template-columns: 1fr; }
    .approach { grid-template-columns: 1fr; }
    .contact { grid-template-columns: 1fr; }

    .menu {
      position: fixed; right: 16px; top: 74px; width: min(340px, 88vw); background: var(--paper);
      border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(11,16,32,.18);
      display: grid; gap: 16px; padding: 22px; transform: translateY(-8px) scale(.96);
      pointer-events:none; opacity:0; transition: .28s cubic-bezier(.2,.7,.2,1);
    }
    .nav__toggle { display:inline-flex; }
    .menu.is-open { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

    .wall { grid-template-columns: repeat(6, 1fr); }
    .shot { grid-column: span 3; }
    .shot--wide { grid-column: span 6; }
  }

  @media (max-width: 680px) {
    .grid--cards { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
  }
}