/* ===== БАЗА ТА ЗМІННІ ===== */
:root{
  --ff-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-display: 'Playfair Display', serif;

  --bg: #111113;
  --surface: #1A1B1E;
  --muted: #2A2B30;
  --paper: #F4F2ED;

  --text: #EDEBE8;
  --text-muted: #C9C6C1;
  --ink: #1A1B1E;

  --primary: #E45B5B;
  --accent: #68BFA8;

  --radius: 14px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.25);
  --shadow-2: 0 30px 60px rgba(0,0,0,.35);

  --trans: .3s ease;
}

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

html { scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--ff-sans);
  color: var(--text);
  background: radial-gradient(1200px 1200px at 80% -10%, rgba(228,91,91,.12), transparent 60%),
              radial-gradient(900px 900px at 10% 120%, rgba(104,191,168,.12), transparent 60%),
              var(--bg);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font: inherit; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip-link{
  position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:.75rem 1rem; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; border-radius:8px; }

/* ===== LAYOUT ===== */
.container{ width:min(95%, 1100px); margin-inline:auto; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 100;
  backdrop-filter: saturate(1.2) blur(6px);
  background: rgba(17,17,19,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .9rem 0;
}
.brand__img{ max-width:160px; }

.nav-toggle{
  inline-size: 44px; block-size: 44px; border:0; background: transparent; cursor:pointer; display:none; position:relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content:""; position:absolute; left:50%; translate:-50% 0; inline-size:26px; block-size:2px; background:var(--text);
  transition: var(--trans);
}
.nav-toggle__bar{ top:50%; }
.nav-toggle__bar::before{ top:-8px; }
.nav-toggle__bar::after{ top:8px; }

.primary-nav{ display:block; }
.primary-nav__list{ display:flex; gap:2rem; }
.primary-nav a{ opacity:.85; font-weight:600; }
.primary-nav a:hover{ color: var(--accent); opacity:1; }

/* Mobile nav */
@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .primary-nav{
    position: fixed; inset: 64px 0 auto 0; background: var(--surface); padding:1rem 1.25rem;
    transform: translateY(-120%); transition: var(--trans);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .primary-nav__list{ flex-direction: column; gap:1rem; }
  body.nav-open .primary-nav{ transform: translateY(0); }
  body.nav-open .nav-toggle__bar{ background: transparent; }
  body.nav-open .nav-toggle__bar::before{ top:0; rotate:45deg; }
  body.nav-open .nav-toggle__bar::after{ top:0; rotate:-45deg; }
}

/* Hero */
.hero{ padding: 9rem 0 6rem; }
.hero__inner{ display:grid; gap:1.25rem; }
.hero__title{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.07;
  letter-spacing: -0.5px;
}
.txt-gradient{
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lead{ max-width: 60ch; opacity:.9; font-size: clamp(1rem, 2.2vw, 1.2rem); }
.hero__cta{ display:flex; gap:.75rem; margin-top:.25rem; }

/* Sections */
.section{ padding: 5.5rem 0; }
.section--alt{ background: var(--paper); color: var(--ink); }
.section__title{
  font-family: var(--ff-display);
  text-align:center;
  margin: 0 0 2.5rem 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
}

/* About */
.about .about__grid{
  display:grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items:center;
}
.about__text{ font-size:1.05rem; color: var(--text); opacity:.9; }
.logo-showcase{ display:flex; justify-content:center; }
.logo-xl{ max-width:120px; opacity:.45; filter: invert(1); }

@media (max-width: 920px){
  .about .about__grid{ grid-template-columns: 1fr; text-align:center; }
  .about__text{ margin-inline:auto; }
}

/* Cards / Services */
.surface{ background: var(--surface); }
.cards-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--shadow-1);
}
.card__title{
  font-family: var(--ff-display);
  color: var(--primary);
  margin: 0 0 .5rem 0;
  font-size: 1.35rem;
}
.card__text{ opacity:.92; }

/* Cases */
.cases{ display:grid; gap:1.1rem; }
.case{
  background: #fff;
  color: #1b1b1b;
  border-radius: var(--radius);
  border: 1px solid #E3DFD9;
  padding: 1.6rem;
}
.case__title{
  font-family: var(--ff-display);
  color: var(--primary);
  margin: 0 0 .3rem 0;
  font-size: 1.3rem;
}
.case__text{ color:#333; line-height:1.75; }

/* Forms */
.forms-grid{
  display:grid; gap:2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items:start;
}
.form-block{
  background: #fff; color: var(--ink);
  border-radius: var(--radius);
  border:1px solid #E3DFD9;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.form-title{
  font-family: var(--ff-display);
  font-size: 1.05rem;
  color: var(--accent);
  margin: 0 0 .25rem 0;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.form-subtitle{
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0 0 1.25rem 0;
}
.contact-form{ display:grid; gap:.9rem; }
.contact-form input,
.contact-form textarea{
  width:100%; border-radius: 12px;
  border:1px solid #D8D5CF; padding: .9rem 1rem;
  background:#FAF9F6; color:#111;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.contact-form textarea{ min-height: 110px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: #E4B1A6;
  box-shadow: 0 0 0 3px rgba(228,91,91,.18);
}

.file-upload{
  background:#FAF9F6; border:2px dashed #D8D5CF; border-radius:12px; padding:1rem; text-align:center; cursor:pointer;
  transition: border-color var(--trans), color var(--trans);
}
.file-upload:hover{ border-color: var(--accent); color: var(--accent); }
.file-upload input[type="file"]{ display:none; }

.btn{
  display:inline-block;
  border: none; cursor:pointer; font-weight:700;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--primary), #D74B7C);
  color:#fff;
  transition: transform var(--trans), filter var(--trans);
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.btn--ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,.22);
}
.section--alt .btn--ghost{ border-color: #d6d3cd; color:#111; }
.section--alt .btn--ghost:hover{ background:#111; color:#fff; border-color:#111; }

/* Footer */
.site-footer{ padding: 3.5rem 0 2.25rem; }
.footer-top{ text-align:center; }
.footer__title{
  font-family: var(--ff-display);
  font-size: 2rem; margin: 0 0 1rem 0;
}
.offices{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; opacity:.95; }
.footer-bottom{
  margin-top: 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.08); padding-top:1rem;
}
.back-to-top{
  inline-size: 42px; block-size:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
}
.back-to-top:hover{ background: rgba(255,255,255,.08); }
@media (max-width: 680px){
  .footer-bottom{ flex-direction: column-reverse; align-items: flex-start; }
}

/* Thanks page */
.page-thanks{ background: var(--paper); color: var(--ink); display:grid; min-height:100dvh; place-items:center; }
.thanks-card{
  background:#fff; border:1px solid #E3DFD9; border-radius: 16px; padding: 2.5rem; max-width: 520px; text-align:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.thanks-title{ font-family: var(--ff-display); font-size: clamp(2rem,5vw,2.6rem); margin:0 0 .25rem 0; }
.thanks-text{ margin:.25rem 0 1.25rem 0; color:#333; }