/* ============================================================
   UNILIT — MOND by Monda Beqiri case study styles
   ============================================================ */

:root {
  --monda-black:      #0A0A0A;
  --monda-white:      #FAFAFA;
  --monda-gold:       #C9A96E;
  --monda-gold-light: #E8C98A;
}

body {
  background: var(--monda-black);
  color: var(--monda-white);
}

.back-bar  { background: var(--monda-black); border-color: rgba(255,255,255,.08); }
.back-link { color: rgba(255,255,255,.32); }
.back-link:hover { color: #fff; }

/* Hero */
.cs-hero {
  background: var(--monda-black);
  height: 100vh; min-height: 700px;
}

.cs-hero-img { opacity: .60; }

.cs-hero-overlay {
  background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,.70) 35%, rgba(10,10,10,.15) 70%, transparent 100%);
}

.cs-eyebrow { color: var(--monda-gold); }
.cs-eyebrow::before { background: var(--monda-gold); }

.cs-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(72px, 12vw, 160px);
  line-height: .88;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 8px;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin-bottom: 40px;
}

.cs-meta { border-top-color: rgba(255,255,255,.10); }
.cs-meta-item { border-right-color: rgba(255,255,255,.10); padding-right: 40px; margin-right: 40px; }
.meta-label { color: rgba(255,255,255,.32) !important; }
.meta-val   { color: #fff !important; }

/* Results */
.results-section { border-bottom: 1px solid rgba(255,255,255,.08); }

.results-header { padding: 72px 0 48px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.results-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 48px); color: #fff; letter-spacing: -.02em;
}
.results-header p {
  font-size: 16px; color: rgba(255,255,255,.45);
  margin-top: 12px; font-family: var(--font-mono);
}

.metrics { display: grid; grid-template-columns: repeat(4,1fr); }
@media (max-width: 760px) { .metrics { grid-template-columns: repeat(2,1fr); } }

.metric {
  padding: 48px 32px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative; overflow: hidden;
  transition: background .3s;
}
.metric:hover { background: rgba(201,169,110,.04); }
.metric:last-child { border-right: none; }

@media (max-width: 760px) {
  .metric:nth-child(2) { border-right: none; }
  .metric:nth-child(3) { border-right: 1px solid rgba(255,255,255,.08); }
}

.metric .m-change {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .10em;
  color: var(--monda-gold); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.metric .m-change::before { content: "↑"; font-size: 14px; }

.metric .m-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.5vw, 58px); color: #fff;
  line-height: .95; letter-spacing: -.03em; margin-bottom: 10px;
}

.metric .m-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

.metric .m-bg {
  position: absolute; bottom: -20px; right: -10px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 120px; color: rgba(255,255,255,.02);
  pointer-events: none; letter-spacing: -.04em; line-height: 1;
}

/* Stats screenshot */
.stats-screenshot { padding: 56px; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.08); }
.stats-screenshot img {
  width: 100%; border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
}
.stats-caption {
  text-align: center; margin-top: 20px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

/* Sections */
.cs-section { border-bottom: 1px solid rgba(255,255,255,.08); }
.section-label { color: var(--monda-gold); }
.cs-section h2 { color: #fff; }
.cs-section p  { color: rgba(255,255,255,.58); }

/* Deliverables */
.deliverables { background: rgba(255,255,255,.06); }
.del { background: var(--monda-black); padding: 30px 26px; }
.del:hover { background: rgba(255,255,255,.03); }
.del .d-num { color: var(--monda-gold); }
.del h3 { color: #fff; }
.del p  { color: rgba(255,255,255,.48); }

/* Screenshots */
.screenshots { border-bottom: 1px solid rgba(255,255,255,.08); }
.shot { background: rgba(255,255,255,.03); }
.shot-caption { color: rgba(255,255,255,.32); border-top-color: rgba(255,255,255,.08); }

/* Stack */
.stack-section { border-bottom: 1px solid rgba(255,255,255,.08); }
.stack-section h2 { color: #fff; }
.pill { border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.68); }
.pill:hover { border-color: var(--monda-gold); color: var(--monda-gold); }

/* CTA */
.cs-cta { border-top: 1px solid rgba(255,255,255,.08); }
.cs-cta h2 { color: #fff; }
.cs-cta p  { color: rgba(255,255,255,.42); }

.btn-cta-primary {
  display: inline-block;
  background: var(--monda-gold); color: var(--monda-black) !important;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 2px; border: 1px solid var(--monda-gold);
  transition: background .18s, transform .18s;
}
.btn-cta-primary:hover { background: var(--monda-gold-light); transform: translateY(-1px); }

.btn-cta-ghost {
  display: inline-block; background: transparent;
  color: rgba(255,255,255,.60);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 2px; border: 1px solid rgba(255,255,255,.14);
  transition: border-color .18s, color .18s;
}
.btn-cta-ghost:hover { border-color: rgba(255,255,255,.48); color: #fff; }