:root{
  --dt-accent:#f5c542;
  --dt-paper:#fbfaf7;
  --dt-ink:#141414;
  --dt-muted:#6e6a62;
  --dt-border: rgba(20,20,20,.10);
}

body{
  background: var(--dt-paper);
  color: var(--dt-ink);
}

a{ text-underline-offset:.2em; }
a:hover{ text-decoration-thickness:2px; }

.navbar{
  background: rgba(15,15,15,.92) !important;
  backdrop-filter: blur(6px);
}
.navbar-brand{ letter-spacing:.02em; }
.nav-link{ letter-spacing:.02em; }

.hero{
  background: url('/assets/images/header.jpg') center/cover no-repeat;
  position: relative;
  min-height: 54vh;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.78) 100%);
}
.hero .container{ position: relative; z-index: 2; }

.kicker{
  text-transform: uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color: rgba(255,255,255,.82);
}

.hero-title{
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 18px 45px rgba(0,0,0,.55);
}

.hero-lede{
  max-width: 62ch;
  font-size: 1.15rem;
  color: rgba(255,255,255,.88);
}

.btn-accent{
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color:#151515;
  font-weight: 800;
}
.btn-accent:hover{ filter: brightness(.95); }

.btn-ghost{
  border-color: rgba(255,255,255,.75);
  color: #fff;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.9);
  color:#fff;
}

.section{
  padding: 4.25rem 0;
}
.section-title{
  font-weight: 800;
  letter-spacing: -.02em;
}
.section-sub{
  color: var(--dt-muted);
  max-width: 78ch;
}

.panel{
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
}

.rule{
  height: 1px;
  background: var(--dt-border);
  margin: 1.25rem 0;
}

.pill{
  display:inline-block;
  border:1px solid var(--dt-border);
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.85rem;
  color: var(--dt-muted);
  background: rgba(0,0,0,.02);
}

.feature{
  border-left: 3px solid rgba(245,197,66,.95);
  padding-left: 1rem;
}

.embed-shell{
  background:#0e0e0e;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.form-control, .form-select{
  border-color: var(--dt-border);
}
.form-control:focus{
  border-color: rgba(245,197,66,.7);
  box-shadow: 0 0 0 .2rem rgba(245,197,66,.18);
}

footer{
  background:#0f0f0f;
}
footer .text-secondary{ color:#b9b9b9 !important; }