/* ===== Case Page Styles ===== */
/* Shared styles for all case detail pages */

/* ===== Inherit variables from landing ===== */
: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;
  --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; }
img { max-width:100%; display:block; }

/* ===== 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__back {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.88rem; font-weight:500; color:var(--text-secondary);
  transition:color 0.25s;
}
.header__back:hover { color:var(--accent); }
.header__back svg { flex-shrink:0; }

/* ===== 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--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; }

/* ===== Container ===== */
.container { width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }
.container--narrow { max-width:1000px; }

/* ===== Case Hero ===== */
.case-hero {
  padding:calc(var(--header-h) + 48px) 0 0;
}
.case-hero__grid {
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; align-items:stretch;
}
.case-hero__mockup {
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--border); background:#e8e0d8;
  display:flex; flex-direction:column;
}
.case-hero__inner {
  background:var(--bg-warm);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:40px 44px 36px;
}

/* Telegram mockup (reused from landing) */
.mockup-tg { display:flex; flex-direction:column; height:100%; }
.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; }
.case-hero__badge {
  display:inline-block; padding:5px 14px; margin-bottom:20px;
  font-size:0.75rem; 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);
}
.case-hero__title {
  font-size:2.2rem; font-weight:900; line-height:1.12; letter-spacing:-0.03em;
  margin-bottom:12px;
}
.case-hero__subtitle {
  font-size:1.05rem; color:var(--text-secondary); line-height:1.6;
  max-width:600px; margin-bottom:28px;
}
.case-hero__metrics {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px;
}
.case-hero__metric {
  padding:10px 16px; background:var(--bg-primary);
  border:1px solid var(--border); border-radius:var(--r-sm);
}
.case-hero__metric-value {
  display:block; font-size:1.05rem; font-weight:800; color:var(--accent); line-height:1.2;
}
.case-hero__metric-label {
  display:block; font-size:0.72rem; color:var(--text-muted); line-height:1.3;
}
.case-hero__tags {
  display:flex; flex-wrap:wrap; gap:6px;
}
.tag {
  display:inline-block; padding:4px 12px; font-size:0.72rem; font-weight:600;
  color:var(--accent-soft); background:var(--accent-bg); border-radius:100px;
}

/* ===== Case Section (generic) ===== */
.case-section {
  padding:56px 0;
}
.case-section + .case-section {
  border-top:1px solid var(--border);
}
.case-section__title {
  font-size:1.5rem; font-weight:800; letter-spacing:-0.02em;
  margin-bottom:20px;
}
.case-section__note {
  font-size:0.9rem; color:var(--text-secondary); line-height:1.6;
  margin-bottom:24px;
}
.case-section__text {
  font-size:0.95rem; color:var(--text-secondary); line-height:1.7;
  margin-bottom:16px;
}
.case-section__text:last-child { margin-bottom:0; }

/* ===== Problem + Solution (two-column card) ===== */
.problem-solution {
  display:grid; grid-template-columns:1fr auto 1fr; gap:0;
  background:var(--bg-warm); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:36px 40px;
}
.problem-solution__col {
  padding:0;
}
.problem-solution__divider {
  width:1px; background:var(--border); margin:0 32px;
}
.problem-solution__badge {
  display:inline-block; padding:4px 14px; margin-bottom:18px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  border-radius:100px; border:1px solid;
}
.problem-solution__badge--problem {
  color:#dc2626; background:rgba(239,68,68,0.06); border-color:rgba(239,68,68,0.12);
}
.problem-solution__badge--solution {
  color:var(--accent); background:var(--accent-bg); border-color:rgba(232,87,42,0.12);
}
.problem-solution__text {
  font-size:0.9rem; color:var(--text-secondary); line-height:1.65; margin-bottom:12px;
}
.problem-solution__text:last-child { margin-bottom:0; }
.problem-bullets {
  list-style:none; display:flex; flex-direction:column; gap:10px;
  padding:0; margin:0;
}
.problem-bullets li {
  font-size:0.88rem; color:var(--text-secondary); line-height:1.55;
  padding-left:18px; position:relative;
}
.problem-bullets li::before {
  content:''; position:absolute; left:0; top:9px;
  width:5px; height:5px; border-radius:50%; background:#dc2626; opacity:0.5;
}

/* ===== Implementation Details ===== */
.impl-blocks {
  display:flex; flex-direction:column; gap:24px;
}
.impl-blocks--grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
.impl-block--wide { grid-column:1 / -1; }
.impl-block {
  padding:24px 28px;
  background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:border-color 0.3s var(--ease);
}
.impl-block:hover { border-color:var(--border-hover); }
.impl-block__header {
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.impl-block__icon {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-bg-strong); border-radius:var(--r-sm); color:var(--accent); flex-shrink:0;
}
.impl-block__title {
  font-size:1rem; font-weight:700;
}
.impl-block__list {
  list-style:none; display:flex; flex-direction:column; gap:8px;
}
.impl-block__list li {
  font-size:0.88rem; color:var(--text-secondary); padding-left:18px; position:relative; line-height:1.55;
}
.impl-block__list li::before {
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--accent-soft);
}

/* ===== Gallery / Screenshots ===== */
.gallery {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
.gallery__item {
  background:var(--bg-warm); border:1px solid var(--border); border-radius:var(--r-lg);
  min-height:220px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gallery__item img {
  width:100%; height:100%; object-fit:cover;
}
.gallery__placeholder {
  font-size:0.82rem; color:var(--text-muted); text-align:center; padding:20px;
}
.gallery__placeholder svg { margin:0 auto 8px; opacity:0.4; }

/* ===== Tech Stack Detail ===== */
.stack-group-title {
  font-size:0.85rem; font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.04em;
  margin:24px 0 12px; padding:0;
}
.stack-group-title:first-of-type { margin-top:0; }
.stack-detail {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
}
.stack-detail__item {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:var(--bg-warm); border:1px solid var(--border); border-radius:var(--r-md);
}
.stack-detail__icon {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:#fff; flex-shrink:0; font-size:0.6rem; font-weight:800;
}
.stack-detail__info { display:flex; flex-direction:column; }
.stack-detail__label {
  font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; line-height:1.2;
}
.stack-detail__name {
  font-size:0.88rem; font-weight:600; color:var(--text-primary);
}

/* ===== CTA Block ===== */
.case-cta {
  padding:64px 0;
}
.case-cta__card {
  text-align:center; padding:48px 36px;
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, var(--accent), var(--accent-soft));
  color:#fff;
}
.case-cta__title {
  font-size:1.65rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:12px;
}
.case-cta__text {
  font-size:0.95rem; opacity:0.9; max-width:420px; margin:0 auto 28px;
}
.case-cta__buttons {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.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; }

/* ===== 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); }

/* ===== Responsive ===== */
@media (max-width:1024px) {
  .case-hero__grid { grid-template-columns:1fr; }
  .case-hero__mockup { min-height:300px; }
  .case-hero__title { font-size:1.85rem; }
  .case-hero__inner { padding:32px 32px 28px; }
  .stack-detail { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px) {
  :root { --header-h:60px; }
  .container { padding:0 16px; }

  .case-hero { padding:calc(var(--header-h) + 28px) 0 0; }
  .case-hero__inner { padding:24px 20px 22px; border-radius:var(--r-lg); }
  .case-hero__title { font-size:1.45rem; }
  .case-hero__subtitle { font-size:0.95rem; }
  .case-hero__metrics { gap:8px; }
  .case-hero__metric { padding:8px 12px; }
  .case-hero__metric-value { font-size:0.92rem; }

  .case-section { padding:40px 0; }
  .case-section__title { font-size:1.3rem; }

  .impl-block { padding:20px; }
  .impl-blocks--grid { grid-template-columns:1fr; }
  .solution-block { padding:20px; }

  .problem-solution { grid-template-columns:1fr; padding:24px 20px; }
  .problem-solution__divider { width:100%; height:1px; margin:24px 0; }
  .stack-detail { grid-template-columns:1fr; }

  .case-cta__card { padding:36px 20px; }
  .case-cta__title { font-size:1.35rem; }
  .case-cta__buttons { flex-direction:column; align-items:center; }

  .footer__inner { flex-direction:column; gap:6px; text-align:center; }
}

@media (min-width:1200px) {
  .case-hero__title { font-size:2.5rem; }
}