:root {
  --plum: #251636;
  --plum-magenta: #611d42;
  --crimson: #bc244a;
  --orange-red: #ea4c3b;
  --peach: #f59062;
  --ink: #251636;
  --muted: #7a6476;
  --bg: #fffaf6;
  --surface: #ffffff;
  --peach-tint: #fdeee3;
  --border: #f1ded0;
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-weight: 800; line-height: 1.12; margin: 0; letter-spacing: -0.02em; color: var(--plum); }

/* Header: solid light bar above the gradient hero, so the fixed dark-charcoal
   logo stays legible without needing a backing plate or recoloring. */
.site-header { background: var(--surface); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 24px; }
.logo { height: 42px; display: block; }
.main-nav { display: flex; gap: 32px; flex: 1; justify-content: center; }
.main-nav a {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.15s;
}
.main-nav a:hover { color: var(--crimson); }

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-nav { background: var(--crimson); color: #fff; }
.btn-nav:hover { background: #a11f41; }
.btn-primary {
  background: var(--crimson);
  color: #fff;
  padding: 16px 34px;
  font-size: 15px;
  box-shadow: 0 0 0 1px rgba(188,36,74,0.5), 0 10px 28px rgba(188,36,74,0.4);
}
.btn-primary:hover { background: #a11f41; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.65);
  padding: 14px 32px;
  text-transform: uppercase;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* Hero: real 5-stop sunset gradient, dark plum at top fading through
   magenta-plum, crimson and orange-red down to peach at the bottom —
   this is the whole point of this variant. */
.hero {
  position: relative;
  background: linear-gradient(
    165deg,
    var(--plum) 0%,
    var(--plum-magenta) 28%,
    var(--crimson) 52%,
    var(--orange-red) 74%,
    var(--peach) 100%
  );
  padding: 112px 0 130px;
  overflow: hidden;
}
.hero-inner { max-width: 660px; position: relative; z-index: 2; }
/* Judgment call: a 5-stop gradient running near-black -> light peach means no
   single text color holds contrast across the whole hero. Rather than pin
   white text only over the darkest stop (which would waste most of the
   gradient), the text block sits on its own semi-transparent dark scrim
   panel layered on top of the gradient, so contrast is guaranteed regardless
   of which stops fall behind it, while the full gradient still shows through
   around the panel and the vivid orange/peach range stays visible at the
   hero's edges. */
.hero-inner {
  background: linear-gradient(135deg, rgba(20,10,28,0.72), rgba(55,18,36,0.6));
  border-radius: 10px;
  padding: 40px 44px;
  backdrop-filter: blur(2px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--peach);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--peach); border-radius: 50%; display: inline-block; }
.hero h1 { font-size: 48px; margin-bottom: 22px; color: #fff; }
.hero-sub { font-size: 18px; color: #f1dfd8; max-width: 580px; margin: 0 0 38px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Why */
.problem { padding: 64px 0 72px; background: var(--surface); }
.problem h2 { font-size: 28px; text-align: center; color: var(--plum); margin-bottom: 22px; }
.problem-copy { max-width: 760px; margin: 0 auto; text-align: center; color: var(--ink); font-size: 17px; line-height: 1.7; }

.why { padding: 94px 0; background: var(--peach-tint); }
.why h2, .pricing h2 { font-size: 36px; text-align: center; text-transform: uppercase; }
.section-sub { text-align: center; color: var(--muted); max-width: 560px; margin: 16px auto 52px; font-size: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); }
.card { background: var(--surface); padding: 34px 28px; }
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--plum);
  color: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(188,36,74,0.3);
}
.card-icon svg { width: 23px; height: 23px; }
.card h3 { font-size: 18px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--plum); }
.card p { color: var(--muted); font-size: 15px; margin: 0; }

/* Pricing — dark card styling kept from the other mockups */
.pricing { padding: 94px 0; background: var(--plum); color: #fff; }
.pricing h2 { color: #fff; }
.pricing .section-sub { color: #cdb9c4; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }
.price-card { position: relative; background: #341f3f; padding: 32px 26px; text-align: left; }
.price-card-featured { background: #45203a; box-shadow: inset 0 0 0 1px var(--orange-red); }
.price-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--orange-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-card h3 { font-size: 16px; color: #f1e3eb; margin-bottom: 10px; text-transform: uppercase; margin-top: 10px; }
.price-range { font-size: 26px; font-weight: 800; color: var(--peach); margin: 0 0 14px; }
.price-desc { color: #cbb6c3; font-size: 14px; margin: 0; }
.pricing-note { text-align: center; margin-top: 44px; color: #cdb9c4; font-size: 14.5px; }
.pricing-note a { color: var(--peach); font-weight: 700; }

.try-it { padding: 72px 0; background: var(--surface); }
.try-it-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.try-it-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1.5px solid var(--crimson);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.try-it-copy h2 { font-size: 32px; color: var(--plum); margin: 0 0 16px; }
.try-it-copy p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0 0 16px; }
.try-it-card {
  background: var(--plum);
  color: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(37,22,54,0.18);
}
.try-it-price { font-size: 52px; font-weight: 800; color: var(--peach); margin-bottom: 18px; }
.try-it-list { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.try-it-list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 14.5px; color: #e9ddea; }
.try-it-list li:last-child { border-bottom: none; }
.try-it-sla { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: var(--peach); margin: 0; }
@media (max-width: 760px) { .try-it-inner { grid-template-columns: 1fr; } }

/* Calculator — replaces the old "Get a Quote" CTA band. Self-serve, no
   call implied anywhere; sits alongside (not replacing) the static pricing
   cards above, which give a quick side-by-side comparison before someone
   fills out their own project specifics. */
.calculator { background: var(--surface); padding: 94px 0 104px; }
.calculator h2 { font-size: 36px; text-align: center; text-transform: uppercase; }
.calc-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  margin-top: 52px;
  align-items: start;
}
.calc-form {
  background: var(--peach-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.calc-field { display: flex; flex-direction: column; gap: 10px; }
.calc-label { font-weight: 700; font-size: 14.5px; color: var(--plum); }
.calc-select {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.calc-select:focus, .calc-dropzone:focus { outline: 2px solid var(--crimson); outline-offset: 2px; }
.calc-number-row { display: flex; align-items: center; gap: 10px; }
.calc-number {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  width: 100px;
}
.calc-number:focus { outline: 2px solid var(--crimson); outline-offset: 2px; }
.calc-number-unit { font-size: 14px; color: var(--muted); font-weight: 600; }
.calc-subfield { margin-top: 12px; padding: 14px 16px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); }
.calc-breakdown-list { list-style: none; padding: 0; margin: 4px 0 16px; text-align: left; }
.calc-breakdown-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 13.5px; color: #e9ddea; }
.calc-breakdown-list li:last-child { border-bottom: none; }
.calc-breakdown-cost { color: var(--peach); font-weight: 700; white-space: nowrap; }
.calc-radio-group { display: flex; flex-direction: column; gap: 8px; }
.calc-radio-group-inline { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.calc-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.calc-radio input { margin-top: 3px; accent-color: var(--crimson); }
.calc-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--plum); cursor: pointer; }
.calc-checkbox input { margin-top: 3px; accent-color: var(--crimson); }
.calc-hint { font-size: 13.5px; color: var(--muted); margin: 0; background: #fff; border-left: 3px solid var(--peach); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; }

.calc-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  transition: border-color 0.15s, background 0.15s;
}
.calc-dropzone:hover { border-color: var(--crimson); }
.calc-dropzone-drag { border-color: var(--crimson); background: var(--peach-tint); }
.calc-dropzone-filled { border-style: solid; border-color: var(--peach); }
.calc-dropzone-icon { width: 28px; height: 28px; color: var(--crimson); margin-bottom: 8px; }
.calc-dropzone-text { margin: 0 0 4px; font-size: 14.5px; color: var(--ink); }
.calc-dropzone-sub { margin: 0; font-size: 12.5px; color: var(--muted); }
.calc-file-list { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; font-size: 13.5px; color: var(--plum); font-weight: 600; }
.calc-file-list li { padding: 4px 10px; background: var(--peach-tint); border-radius: var(--radius); margin-bottom: 4px; }

.calc-submit { align-self: flex-start; margin-top: 4px; }

.calc-result {
  position: sticky;
  top: 90px;
  background: var(--plum);
  color: #fff;
  border-radius: 10px;
  padding: 36px 30px;
  box-shadow: 0 10px 28px rgba(37,22,54,0.25);
}
.calc-result-label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--peach); font-weight: 700; margin-bottom: 10px; }
.calc-result-price { font-size: 34px; font-weight: 800; margin: 0 0 6px; color: #fff; }
.calc-result-tier { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #f1e3eb; margin: 0 0 16px; }
.calc-result-desc { font-size: 14px; color: #cbb6c3; margin: 0 0 16px; }
.calc-result-note { font-size: 13.5px; color: var(--peach); background: rgba(255,255,255,0.08); padding: 10px 14px; border-radius: var(--radius); margin: 0 0 14px; }
.calc-result-fine { font-size: 12.5px; color: #a893a1; margin: 18px 0 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; }

/* Footer */
.site-footer { background: var(--plum); color: #c3aebb; padding: 36px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; text-align: center; }
.footer-logo { height: 28px; filter: brightness(0) invert(1); opacity: 0.6; }
.footer-inner p { margin: 0; font-size: 13px; }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .hero h1 { font-size: 34px; }
  .hero-inner { padding: 28px 24px; }
  .card-grid, .pricing-grid { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-result { position: static; }
}