/* dejavucode — retro Django studio landing
   Built on top of Bootstrap 5; this file overrides Bootstrap's
   soft/rounded defaults with a hard-edged "technical manual" look. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root,
[data-bs-theme="light"] {
  --ink:#171410;
  --paper:#F3EEDD;
  --cream:#FBF8EE;
  --green:#1F5C3F;
  --gold:#E7A825;
  --rust:#B23A1D;
  --teal:#2F7A78;

  /* Bootstrap variable overrides (no Sass build needed — Bootstrap 5.3 exposes these as CSS vars) */
  --bs-body-bg: var(--ink);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Manrope', system-ui, sans-serif;
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--rust);
  --bs-border-color: var(--ink);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
  --bs-primary: var(--gold);
  --bs-primary-rgb: 231, 168, 37;
  --bs-focus-ring-color: rgba(47, 122, 120, .5);
}

h1, h2, h3, .brand-mono, .stamp, .step-num { font-family: 'Unbounded', 'Manrope', sans-serif; }
code, .term, .btn-retro, .chip, .eyebrow, .tag-pill { font-family: 'JetBrains Mono', ui-monospace, monospace; }

body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* ---------- outer sheet frame ---------- */
.frame {
  border: 3px solid var(--ink);
  margin: 10px;
  background: var(--paper);
  overflow: hidden;
}
@media (max-width: 640px) { .frame { margin: 6px; } }

.bg-cream { background: var(--cream) !important; }
.bg-paper { background: var(--paper) !important; }
.bg-green { background: var(--green) !important; }
.bg-gold  { background: var(--gold) !important; }
.bg-teal  { background: var(--teal) !important; }
.text-paper { color: var(--paper) !important; }
.text-rust  { color: var(--rust) !important; }
.border-ink { border-color: var(--ink) !important; }

/* hard offset shadows instead of Bootstrap's blurred .shadow utilities */
.shadow-hard    { box-shadow: 8px 8px 0 var(--ink); }
.shadow-hard-sm { box-shadow: 3px 3px 0 var(--ink); }

/* ---------- navbar ---------- */
.navbar { padding-top: 1rem; padding-bottom: 1rem; }
.brand-mono {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-dot { width: 10px; height: 10px; background: var(--green); border: 2px solid var(--ink); flex: none; }
.navbar-nav .nav-link { font-weight: 600; color: var(--ink); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.navbar-nav .nav-link:hover { border-color: var(--ink); color: var(--ink); }
.retro-toggler {
  border: 2px solid var(--ink);
  background: var(--cream);
  padding: 6px 9px;
  line-height: 0;
}
.retro-toggler:focus { box-shadow: none; outline: 3px solid var(--teal); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn-retro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .7rem 1.1rem;
  border: 2.5px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-retro:hover   { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); color: var(--ink); }
.btn-retro:active  { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-retro:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; box-shadow: 1px 1px 0 var(--ink); }
.btn-retro--ghost   { background: var(--cream); }
.btn-retro--on-dark { background: var(--paper); }

.icon-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  background: var(--cream);
  flex: none;
}
.icon-btn:hover { background: var(--gold); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---------- hero ---------- */
.hero-copy {
  background-image:
    linear-gradient(var(--paper) 0, var(--paper) 100%),
    repeating-linear-gradient(0deg, rgba(23,20,16,.07) 0, rgba(23,20,16,.07) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(23,20,16,.07) 0, rgba(23,20,16,.07) 1px, transparent 1px, transparent 28px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 6px 12px;
}
.eyebrow .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--green);
  flex: none;
}
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; font-weight: 800; max-width: 12ch; }
.hero-copy p.lead-retro { font-size: 1.08rem; line-height: 1.55; max-width: 46ch; color: #3a352c; }

.hero-term-wrap { background: var(--green); }
.terminal { width: 100%; max-width: 460px; background: var(--ink); border: 2.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--paper); border-bottom: 2.5px solid var(--ink); }
.terminal-bar span.dot-b { width: 11px; height: 11px; border: 1.5px solid var(--ink); }
.terminal-bar span.dot-b:nth-child(1) { background: var(--rust); }
.terminal-bar span.dot-b:nth-child(2) { background: var(--gold); }
.terminal-bar span.dot-b:nth-child(3) { background: var(--green); }
.terminal-bar .title { margin-left: auto; font-size: .72rem; color: #4a4438; }
.terminal-body { padding: 20px 18px 24px; font-size: .84rem; line-height: 1.85; color: #DCEFE2; overflow-x: auto; }
.terminal-body .prompt { color: var(--gold); }
.terminal-body .out { color: #9FB6A6; display: block; }
.terminal-body .line { display: block; white-space: pre; opacity: 0; animation: typeIn .4s ease forwards; }
.terminal-body .line:nth-child(1) { animation-delay: .15s; }
.terminal-body .line:nth-child(2) { animation-delay: .55s; }
.terminal-body .line:nth-child(3) { animation-delay: .95s; }
.terminal-body .line:nth-child(4) { animation-delay: 1.25s; }
.terminal-body .line:nth-child(5) { animation-delay: 1.55s; }
.terminal-body .line:nth-child(6) { animation-delay: 1.85s; }
.terminal-body .line:nth-child(7) { animation-delay: 2.15s; }
@keyframes typeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .terminal-body .line { opacity: 1; animation: none; } }

/* ---------- section heads ---------- */
.section-head h2 { font-size: 1.7rem; font-weight: 700; }
.section-head p  { max-width: 56ch; color: #3a352c; line-height: 1.55; }

/* ---------- services grid ---------- */
.service-card { background: var(--cream); border: 2.5px solid var(--ink); border-width: 0 2.5px 2.5px 0; }
.services-grid > .col:nth-child(3n) .service-card { border-right-width: 0; }
@media (max-width: 991.98px) {
  .services-grid > .col:nth-child(3n) .service-card { border-right-width: 2.5px; }
  .services-grid > .col:nth-child(2n) .service-card { border-right-width: 0; }
}
@media (max-width: 575.98px) {
  .services-grid > .col .service-card { border-right-width: 0 !important; }
}
.service-glyph {
  width: 38px; height: 38px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: var(--gold);
}
.service-card h3 { font-size: 1.05rem; font-weight: 700; }
.service-card p  { font-size: .92rem; line-height: 1.5; color: #3a352c; }

/* ---------- stack chips ---------- */
.chip {
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 500;
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- case ---------- */
.tag-pill { display: inline-block; font-size: .72rem; background: var(--ink); color: var(--paper); padding: 5px 10px; }
.case h3 { font-size: 1.5rem; font-weight: 700; max-width: 20ch; }
.case p  { font-size: 1rem; line-height: 1.6; color: #3a352c; max-width: 52ch; }
.case-tags span { font-size: .76rem; border: 2px solid var(--ink); padding: 5px 10px; background: var(--paper); }

.why h3 { font-size: 1.2rem; font-weight: 700; }
.why ul { list-style: none; padding: 0; }
.why li { display: flex; gap: 12px; font-size: .92rem; line-height: 1.5; }
.why li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 5px; background: var(--ink); }
.why b { display: block; margin-bottom: 2px; }

/* ---------- process ---------- */
.step { border-top: 2px solid var(--ink); padding: 22px 0; }
.steps .step:last-child { border-bottom: 2px solid var(--ink); }
.step-num { font-size: 1.6rem; font-weight: 700; color: var(--rust); }
.step h4 { font-size: 1.05rem; font-weight: 700; }
.step p  { color: #3a352c; font-size: .92rem; line-height: 1.5; max-width: 50ch; }

/* ---------- cta ---------- */
.cta { position: relative; overflow: hidden; }
.cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; max-width: 16ch; }
.cta p, .cta span.small-note { color: #CFE3D6; }
.cta p { max-width: 42ch; line-height: 1.55; }

.stamp {
  position: absolute;
  right: 56px; bottom: -18px;
  width: 132px; height: 132px;
  border: 3px dashed var(--rust);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-11deg);
  color: var(--rust);
  text-align: center;
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.3;
  background: rgba(243, 238, 221, .06);
}
@media (max-width: 767.98px) { .stamp { display: none; } }

/* ---------- footer ---------- */
.site-footer small { color: #4a4438; font-size: .82rem; }