/* ===== Custom Properties ===== */
:root {
  --bg-primary: #ffffff;
  --bg-warm: #fdf8f4;
  --text-primary: #1a1a1a;
  --text-secondary: #5a5a5a;
  --text-muted: #9a9a9a;
  --accent: #e8572a;
  --accent-hover: #d44a1f;
  --accent-soft: #f4845f;
  --accent-bg: rgba(232, 87, 42, 0.06);
  --accent-bg-strong: rgba(232, 87, 42, 0.12);
  --border: #eae6e1;
  --border-hover: rgba(232, 87, 42, 0.25);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --container: 1120px;
  --header-h: 68px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Reset ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-primary); color:var(--text-primary); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { max-width:100%; display:block; }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ===== Typography ===== */
.section-title { font-size:2.15rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:10px; }
.section-subtitle { font-size:1.05rem; color:var(--text-secondary); margin-bottom:48px; max-width:520px; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; background:var(--accent); color:#fff;
  font-family:inherit; font-size:0.9rem; font-weight:600;
  border:none; border-radius:var(--r-sm); cursor:pointer;
  transition:all 0.25s var(--ease); white-space:nowrap;
}
.btn:hover { background:var(--accent-hover); box-shadow:0 6px 24px rgba(232,87,42,0.28); transform:translateY(-1px); }
.btn--small { padding:9px 18px; font-size:0.82rem; }
.btn--ghost { background:transparent; color:var(--text-primary); border:1.5px solid var(--border); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); box-shadow:none; }
.btn--white { background:#fff; color:var(--accent); }
.btn--white:hover { background:#fff; box-shadow:0 6px 24px rgba(0,0,0,0.15); }
.btn--white-outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); }
.btn--white-outline:hover { border-color:#fff; background:rgba(255,255,255,0.1); box-shadow:none; }

/* ===== Header ===== */
.header {
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--header-h);
  background:rgba(255,255,255,0.88); backdrop-filter:blur(20px);
  border-bottom:1px solid transparent; transition:border-color 0.3s, box-shadow 0.3s;
}
.header--scrolled { border-bottom-color:var(--border); box-shadow:var(--shadow-xs); }
.header__inner { display:flex; align-items:center; justify-content:space-between; height:100%; }
.header__logo {
  font-size:0.92rem; font-weight:800; color:var(--accent); letter-spacing:-0.02em;
  white-space:nowrap; text-transform:uppercase;
}
.header__nav { display:flex; gap:28px; }
.header__link { font-size:0.88rem; font-weight:500; color:var(--text-secondary); transition:color 0.25s; position:relative; }
.header__link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width 0.25s var(--ease); border-radius:1px; }
.header__link:hover { color:var(--text-primary); }
.header__link:hover::after { width:100%; }
.header__cta { flex-shrink:0; }
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:4px; }
.burger span { display:block; width:100%; height:2px; background:var(--text-primary); border-radius:2px; transition:all 0.3s var(--ease); }
.burger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity:0; }
.burger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { padding:calc(var(--header-h) + 56px) 0 48px; }
.hero__grid { display:flex; align-items:center; gap:56px; margin-bottom:48px; }
.hero__content { flex:1; }
.hero__badge {
  display:inline-block; padding:6px 16px; margin-bottom:24px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-bg); border-radius:100px; border:1px solid rgba(232,87,42,0.12);
}
.hero__title { font-size:2.65rem; font-weight:900; line-height:1.1; letter-spacing:-0.035em; max-width:560px; margin-bottom:20px; }
.hero__subtitle { font-size:1.08rem; color:var(--text-secondary); max-width:480px; margin-bottom:32px; line-height:1.65; }
.hero__bullets { list-style:none; margin-bottom:32px; display:flex; flex-direction:column; gap:10px; max-width:480px; }
.hero__bullets li { font-size:1rem; color:var(--text-secondary); padding-left:22px; position:relative; line-height:1.5; }
.hero__bullets li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hero__bullets li strong { color:var(--text-primary); font-weight:700; }
.hero__actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero__visual { flex-shrink:0; position:relative; }
.hero__photo-wrapper { position:relative; }
.hero__photo-wrapper img { width:360px; height:360px; object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); position:relative; z-index:1; }
.hero__photo-decor { position:absolute; inset:-12px -12px auto auto; width:160px; height:160px; border-radius:50%; background:linear-gradient(135deg, rgba(232,87,42,0.15), rgba(244,132,95,0.08)); z-index:0; filter:blur(2px); }
.hero__stats { display:flex; align-items:center; padding:28px 36px; background:var(--bg-warm); border-radius:var(--r-lg); border:1px solid var(--border); }
.hero__stat { flex:1; display:flex; flex-direction:column; gap:2px; }
.hero__stat-number { font-size:1.65rem; font-weight:800; color:var(--accent); letter-spacing:-0.02em; }
.hero__stat-label { font-size:0.8rem; color:var(--text-muted); line-height:1.35; }
.hero__stat-divider { width:1px; height:44px; background:var(--border); margin:0 32px; flex-shrink:0; }

/* ===== Carousel (case-card style) ===== */
.carousel {
  padding:36px 0; background:var(--bg-warm);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden;
}
.carousel__track { display:flex; width:max-content; animation:carousel-scroll 55s linear infinite; }
.carousel__track:hover { animation-play-state:paused; }
.carousel__items { display:flex; gap:14px; flex-shrink:0; padding-right:14px; }

.ccard {
  display:flex; flex-direction:column; width:300px; flex-shrink:0;
  padding:22px; position:relative;
  background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; transition:all 0.3s var(--ease);
}
.ccard:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.ccard__title { font-size:0.92rem; font-weight:700; margin-bottom:6px; color:var(--text-primary); line-height:1.3; }
.ccard__desc { font-size:0.82rem; color:var(--text-secondary); line-height:1.5; margin-bottom:14px; flex:1; }
.ccard__metrics { display:flex; gap:8px; margin-bottom:12px; }
.ccard__metric {
  flex:1; padding:6px 8px; background:var(--bg-warm); border-radius:var(--r-sm); border:1px solid var(--border);
}
.ccard__val { display:block; font-size:0.95rem; font-weight:800; color:var(--accent); line-height:1.2; }
.ccard__label { display:block; font-size:0.65rem; color:var(--text-muted); line-height:1.25; }
.ccard__tags { display:flex; flex-wrap:wrap; gap:5px; }
.ccard__tags span {
  display:inline-block; padding:3px 10px; font-size:0.68rem; font-weight:600;
  color:var(--accent-soft); background:var(--accent-bg); border-radius:100px;
}

@keyframes carousel-scroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ===== Problems (3 columns) ===== */
.problems { padding:96px 0; background:var(--bg-primary); }
.problems__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { padding:24px; background:var(--bg-warm); border:1px solid var(--border); border-radius:var(--r-lg); transition:all 0.3s var(--ease); }
.card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card__icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--accent-bg-strong); border-radius:var(--r-sm); color:var(--accent); margin-bottom:14px; }
.card__title { font-size:0.95rem; font-weight:700; margin-bottom:6px; }
.card__text { font-size:0.85rem; color:var(--text-secondary); line-height:1.55; }
.problems__bottom { margin-top:24px; font-size:0.9rem; color:var(--text-secondary); line-height:1.6; text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }

/* ===== Services (2 columns) ===== */
.services { padding:96px 0; background:var(--bg-warm); }
.services__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.service-card { padding:32px; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--r-lg); transition:all 0.3s var(--ease); position:relative; overflow:hidden; }
.service-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.service-card__number { font-size:3.5rem; font-weight:900; color:var(--accent); opacity:0.08; position:absolute; top:12px; right:20px; line-height:1; }
.service-card__title { font-size:1.08rem; font-weight:700; margin-bottom:10px; position:relative; }
.service-card__text { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; margin-bottom:18px; position:relative; }
.service-card__list { display:flex; flex-direction:column; gap:7px; position:relative; }
.service-card__list li { font-size:0.85rem; color:var(--text-secondary); padding-left:18px; position:relative; }
.service-card__list li::before { content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--accent-soft); }

/* ===== Cases (bento grid) ===== */
.cases { padding:96px 0; background:var(--bg-primary); }

.case-card {
  padding:24px; background:var(--bg-warm); border:1px solid var(--border); border-radius:var(--r-lg);
  display:flex; flex-direction:column; transition:all 0.3s var(--ease);
}
.case-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); }

/* Featured: horizontal layout */
.case-card--featured {
  flex-direction:row; gap:28px; align-items:stretch;
}
.case-card--featured .case-card__info { flex:1; display:flex; flex-direction:column; min-width:0; }
.case-card--featured .case-card__mockup {
  flex:1; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border);
  min-height:260px; min-width:0;
}

/* Regular cards with mockup on top */
.case-card__mockup-top {
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border);
  margin-bottom:16px; min-height:190px;
}

/* Bento grid: 12-col for precise control */
.cases__bento {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
.cases__bento > .case-card--featured { grid-column:1 / -1; }
.cases__bento > .case-card:not(.case-card--featured) { grid-column:span 6; }
/* Row of 3 small cards (6th, 7th, 8th children) */
.cases__bento > .case-card:nth-child(6),
.cases__bento > .case-card:nth-child(7),
.cases__bento > .case-card:nth-child(8) { grid-column:span 4; }

.case-card__title { font-size:1rem; font-weight:700; margin-bottom:6px; }
.case-card__desc { font-size:0.85rem; color:var(--text-secondary); line-height:1.55; margin-bottom:12px; flex:1; }
.case-card__metrics { display:flex; gap:10px; margin-bottom:12px; }
.metric { flex:1; padding:8px 10px; background:var(--bg-primary); border-radius:var(--r-sm); border:1px solid var(--border); }
.case-card--featured .metric { background:var(--bg-primary); }
.metric__value { display:block; font-size:1.05rem; font-weight:800; color:var(--accent); margin-bottom:1px; }
.metric__label { display:block; font-size:0.7rem; color:var(--text-muted); line-height:1.3; }
.case-card__tags { display:flex; flex-wrap:wrap; gap:5px; }
.tag { display:inline-block; padding:3px 10px; font-size:0.7rem; font-weight:600; color:var(--accent-soft); background:var(--accent-bg); border-radius:100px; }
.case-card__tags { margin-bottom:10px; }
.case-card__link {
  display:inline-block; margin-top:12px; font-size:0.82rem; font-weight:600;
  color:var(--accent); padding:0; transition:all 0.2s var(--ease);
}
.case-card__link:hover { color:var(--accent-hover); }

/* ===== Mockup: Telegram Chat ===== */
.mockup-tg { background:#e8e0d8; display:flex; flex-direction:column; height:100%; }
.mockup-tg--lg { min-height:280px; }
.mockup-tg--embed { min-height:200px; }
.mtg-header {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:#fff; border-bottom:1px solid var(--border);
}
.mtg-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.mtg-name { font-size:0.78rem; font-weight:600; color:var(--text-primary); }
.mtg-msg { padding:4px 14px; }
.mtg-msg span {
  display:inline-block; padding:8px 12px; border-radius:12px;
  font-size:0.78rem; line-height:1.45; max-width:85%;
}
.mtg-msg--bot span { background:#fff; color:var(--text-primary); border-bottom-left-radius:2px; }
.mtg-msg--user { text-align:right; }
.mtg-msg--user span { background:var(--accent); color:#fff; border-bottom-right-radius:2px; }

/* ===== Mockup: n8n Workflow ===== */
.mockup-n8n {
  background:#f5f0eb; position:relative; height:100%;
  background-image:radial-gradient(circle, #ddd6ce 0.8px, transparent 0.8px);
  background-size:16px 16px;
}
.mockup-n8n--lg { min-height:240px; }
.mockup-n8n--embed { min-height:200px; }
.mn-node {
  position:absolute; padding:5px 10px; border-radius:6px;
  font-size:0.68rem; font-weight:600; color:#fff;
  white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.mn-node--tg { background:#0088cc; }
.mn-node--ai { background:#10a37f; }
.mn-node--db { background:#3ecf8e; }
.mn-node--fn { background:#ff6d00; }
.mn-line { position:absolute; height:2px; background:#c5bfb8; }
.mn-line--v { width:2px; height:auto; }

/* ===== Mockup: Dashboard ===== */
.mockup-dash { background:#f5f0eb; padding:16px; display:flex; flex-direction:column; height:100%; }
.mockup-dash--embed { min-height:200px; }
.md-title { font-size:0.78rem; font-weight:700; color:var(--text-secondary); margin-bottom:12px; }
.md-bars { display:flex; align-items:flex-end; gap:10px; flex:1; padding-bottom:4px; }
.md-bar {
  flex:1; background:var(--accent); border-radius:4px 4px 0 0; min-height:12px;
  position:relative; opacity:0.7;
}
.md-bar:nth-child(odd) { opacity:1; }
.md-bar span { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:0.6rem; color:var(--text-muted); white-space:nowrap; }
.md-total { font-size:0.72rem; font-weight:600; color:var(--text-primary); margin-top:22px; text-align:right; }

/* ===== Mockup: Table ===== */
.mockup-table { background:#f5f0eb; padding:12px; display:flex; flex-direction:column; height:100%; }
.mockup-table--lg { min-height:240px; }
.mockup-table--embed { min-height:200px; }
.mt-row {
  display:flex; gap:8px; padding:8px 10px; font-size:0.72rem; color:var(--text-secondary);
  border-bottom:1px solid rgba(0,0,0,0.05); align-items:center;
}
.mt-row--head { font-weight:700; color:var(--text-primary); background:rgba(0,0,0,0.03); border-radius:4px; }
.mt-row span:first-child { flex:1; }
.mt-row span:nth-child(2) { width:44px; text-align:right; }
.mt-row span:nth-child(3) { width:auto; text-align:right; }
.mt-hi { font-weight:700; color:var(--accent); }
.mt-badge { font-size:0.62rem; font-weight:600; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.mt-badge--g { background:rgba(34,197,94,0.15); color:#16a34a; }
.mt-badge--y { background:rgba(234,179,8,0.15); color:#ca8a04; }
.mt-badge--r { background:rgba(239,68,68,0.12); color:#dc2626; }

/* ===== Tech Stack (categories) ===== */
.stack { padding:96px 0; background:var(--bg-warm); }
.stack__header { margin-bottom:0; }
.stack__categories { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.stack__category { padding:20px; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--r-lg); }
.stack__cat-title { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; }
.stack__cat-items { display:flex; flex-wrap:wrap; gap:8px; }
.stack__chip {
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px;
  background:var(--bg-warm); border:1px solid var(--border); border-radius:100px;
  font-size:0.82rem; font-weight:600; color:var(--text-primary);
  transition:all 0.2s var(--ease);
}
.stack__chip:hover { border-color:var(--border-hover); box-shadow:var(--shadow-sm); }
.stack__chip .stack__icon {
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:800; color:#fff; flex-shrink:0;
}

/* ===== Process (horizontal timeline) ===== */
.process { padding:96px 0; background:var(--bg-primary); }
.process__timeline {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0; position:relative;
}
/* Horizontal connecting line behind all steps */
.process__timeline::before {
  content:''; position:absolute; top:22px;
  left:64px; right:38px; height:2px;
  background:var(--border);
}
.tstep {
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; padding:0 16px; position:relative;
}
.tstep__marker { position:relative; z-index:1; margin-bottom:14px; }
.tstep__num {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border-radius:50%;
  font-size:0.95rem; font-weight:700; box-shadow:0 0 0 4px var(--bg-primary);
}
/* Step 0: softer fill */
.tstep:first-child .tstep__num {
  background:var(--accent-bg-strong); color:var(--accent);
  border:2px solid rgba(232,87,42,0.25);
}
.tstep__content { text-align:left; }
.tstep__title { font-size:0.95rem; font-weight:700; margin-bottom:6px; }
.tstep__text { font-size:0.85rem; color:var(--text-secondary); line-height:1.5; }

/* ===== Work Formats (2 cols) ===== */
.formats { padding:96px 0; background:var(--bg-warm); }
.formats__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.format-card {
  padding:32px; background:var(--bg-primary); border:1px solid var(--border);
  border-radius:var(--r-lg); transition:all 0.3s var(--ease);
}
.format-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.format-card__badge {
  display:inline-block; padding:4px 12px; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--accent);
  background:var(--accent-bg); border-radius:100px; margin-bottom:16px;
}
.format-card__title { font-size:1.08rem; font-weight:700; margin-bottom:10px; }
.format-card__text { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; margin-bottom:18px; }
.format-card__list { display:flex; flex-direction:column; gap:7px; list-style:none; }
.format-card__list li { font-size:0.85rem; color:var(--text-secondary); padding-left:18px; position:relative; }
.format-card__list li::before { content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--accent-soft); }

/* ===== About Me (2 cols) ===== */
.about { padding:96px 0; background:var(--bg-warm); }
.about__grid { display:grid; grid-template-columns:360px 1fr; gap:48px; align-items:start; }
.about__photo img { width:100%; height:auto; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.about__text p { font-size:0.95rem; color:var(--text-secondary); line-height:1.7; margin-bottom:16px; }
.about__facts { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.about__facts li { font-size:0.9rem; color:var(--text-secondary); padding-left:18px; position:relative; line-height:1.55; }
.about__facts li::before { content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--accent-soft); }
.about__facts li strong { color:var(--text-primary); font-weight:700; }
.about__highlights { display:flex; gap:24px; margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.about__highlight { display:flex; flex-direction:column; gap:2px; }
.about__hl-num { font-size:1.4rem; font-weight:800; color:var(--accent); }
.about__hl-text { font-size:0.78rem; color:var(--text-muted); }

/* ===== FAQ ===== */
.faq { padding:96px 0; background:var(--bg-primary); }
.faq__list { max-width:720px; }
.faq__item { border-bottom:1px solid var(--border); }
.faq__question {
  padding:20px 0; font-size:0.95rem; font-weight:600; color:var(--text-primary);
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  transition:color 0.2s;
}
.faq__question::-webkit-details-marker { display:none; }
.faq__question::after { content:'+'; font-size:1.3rem; font-weight:400; color:var(--text-muted); transition:transform 0.2s; }
details[open] .faq__question::after { content:'\2212'; }
details[open] .faq__question { color:var(--accent); }
.faq__answer { padding:0 0 20px; font-size:0.88rem; color:var(--text-secondary); line-height:1.65; }

/* ===== Contacts ===== */
.contacts { padding:96px 0; background:var(--bg-primary); }
.contacts__card { text-align:center; padding:64px 48px; border-radius:var(--r-xl); background:linear-gradient(135deg, var(--accent), var(--accent-soft)); color:#fff; }
.contacts__title { font-size:2rem; font-weight:800; letter-spacing:-0.03em; line-height:1.25; max-width:600px; margin:0 auto 14px; }
.contacts__subtitle { font-size:1rem; opacity:0.88; max-width:460px; margin:0 auto 36px; }
.contacts__buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== Footer ===== */
.footer { padding:20px 0; border-top:1px solid var(--border); }
.footer__inner { display:flex; align-items:center; justify-content:space-between; }
.footer__copy, .footer__role { font-size:0.82rem; color:var(--text-muted); }

/* ===== Animations ===== */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ===== Mobile Overlay ===== */
.nav-overlay { display:none; position:fixed; inset:0; z-index:999; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); padding:calc(var(--header-h) + 32px) 24px 32px; flex-direction:column; gap:4px; }
.nav-overlay.active { display:flex; }
.nav-overlay a { font-size:1.3rem; font-weight:600; color:var(--text-primary); padding:14px 0; border-bottom:1px solid var(--border); transition:color 0.25s; }
.nav-overlay a:hover { color:var(--accent); }

/* ===== Responsive ===== */
@media (max-width:1024px) {
  .hero__grid { gap:36px; }
  .hero__title { font-size:2.1rem; }
  .hero__photo-wrapper img { width:280px; height:280px; }
  .hero__photo-decor { width:120px; height:120px; }
  .hero__stats { padding:24px 28px; }
  .hero__stat-divider { margin:0 20px; }
  .header__nav, .header__cta { display:none; }
  .burger { display:flex; }
  .ccard { width:260px; }
  .problems__grid { grid-template-columns:repeat(2,1fr); }
  .stack__categories { grid-template-columns:repeat(2, 1fr); }
  .cases__bento > .case-card:nth-child(6),
  .cases__bento > .case-card:nth-child(7),
  .cases__bento > .case-card:nth-child(8) { grid-column:span 6; }
  .process__timeline { grid-template-columns:repeat(2, 1fr); gap:24px; }
  .process__timeline::before { display:none; }
  .about__grid { grid-template-columns:280px 1fr; gap:32px; }
}

@media (max-width:768px) {
  :root { --header-h:60px; }
  .container { padding:0 16px; }
  .section-title { font-size:1.65rem; }
  .section-subtitle { font-size:0.95rem; margin-bottom:32px; }

  .hero { padding:calc(var(--header-h) + 36px) 0 32px; }
  .hero__grid { flex-direction:column-reverse; gap:28px; margin-bottom:28px; text-align:center; }
  .hero__bullets { text-align:left; }
  .hero__title { font-size:1.45rem; max-width:100%; }
  .hero__subtitle { font-size:0.95rem; margin-bottom:24px; max-width:100%; }
  .hero__actions { justify-content:center; }
  .hero__photo-wrapper img { width:200px; height:200px; margin:0 auto; }
  .hero__photo-decor { width:100px; height:100px; inset:-8px -8px auto auto; }
  .hero__badge { margin-bottom:16px; }
  .hero__stats { display:none; }

  .carousel { padding:24px 0; }
  .ccard { width:240px; padding:18px; }
  .ccard__title { font-size:0.85rem; }
  .ccard__desc { font-size:0.78rem; }
  .ccard__val { font-size:0.88rem; }

  .problems__grid { grid-template-columns:1fr; }

  .services__grid { grid-template-columns:1fr; }
  .services { background:var(--bg-warm); }

  .header__logo { font-size:0.82rem; }
  .cases__bento { grid-template-columns:1fr; }
  .cases__bento > .case-card--featured { flex-direction:column-reverse; }
  .cases__bento > .case-card--featured .case-card__mockup { min-height:200px; border-radius:var(--r-md); margin-bottom:16px; }
  .tag { color:var(--text-secondary); background:rgba(0,0,0,0.04); }
  .case-card__metrics { flex-direction:row; gap:8px; }
  .cases__bento > .case-card:not(.case-card--featured) { grid-column:1; }
  .cases__bento > .case-card:nth-child(6),
  .cases__bento > .case-card:nth-child(7),
  .cases__bento > .case-card:nth-child(8) { grid-column:1; }

  .stack { padding:56px 0; }
  .stack__categories { grid-template-columns:1fr; }
  .stack__category { padding:16px; }

  .process__timeline { grid-template-columns:1fr; gap:20px; }
  .process__timeline::before { display:none; }
  .tstep { flex-direction:row; text-align:left; gap:14px; }
  .tstep__marker { margin-bottom:0; }
  .tstep__content { text-align:left; }

  .about__grid { grid-template-columns:1fr; }
  .about__photo img { width:200px; margin:0 auto; }
  .about__text { text-align:left; }
  .about__highlights { justify-content:center; }

  .formats__grid { grid-template-columns:1fr; }
  .problems, .services, .cases, .process, .formats, .about, .faq, .contacts { padding:56px 0; }
  .contacts__card { padding:40px 24px; }
  .contacts__title { font-size:1.45rem; }
  .contacts__buttons { flex-direction:column; align-items:center; }
  .footer__inner { flex-direction:column; gap:6px; text-align:center; }
}

@media (min-width:1200px) {
  .hero__title { font-size:3rem; }
  .hero__photo-wrapper img { width:400px; height:400px; }
  .section-title { font-size:2.5rem; }
  .contacts__title { font-size:2.5rem; }
  .ccard { width:310px; }
}