/* DBOPH website - palette straight from assets/branding/BRAND.md */

:root {
  --black:      #090909;
  --bg:         #070b12;
  --panel:      rgba(13, 20, 30, .86);
  --edge:       #1e2a3a;
  --orange:     #fb8a02;
  --orange-deep:#c82b00;
  --gold:       #f1a500;
  --gold-bright:#fcbe0d;
  --crimson:    #be0100;
  --flag-blue:  #05299a;

  --text:       #f2f4f7;
  --dim:        #97a2b0;
  --faint:      #6b7684;

  --ok:         #3ecf4c;
  --bad:        #e0524f;

  --radius:     10px;
  --wrap:       1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100%;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ header */

header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 11, 18, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
header.site .wrap {
  display: flex; align-items: center; gap: 28px; height: 66px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: .3px; }
.brand img { height: 34px; width: auto; display: block; }
.brand .ph { color: var(--orange); }
.brand:hover { text-decoration: none; color: var(--text); }

nav.main { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
nav.main a { color: var(--dim); font-weight: 600; font-size: 14.5px; letter-spacing: .4px; text-transform: uppercase; }
nav.main a:hover, nav.main a.on { color: var(--text); text-decoration: none; }
nav.main a.on { color: var(--gold); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border: 0; border-radius: 6px; cursor: pointer;
  font: 700 14.5px/1 "Segoe UI", sans-serif; letter-spacing: .6px; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-bright), var(--orange-deep));
  color: #1a1202;
  box-shadow: 0 2px 0 rgba(0,0,0,.45);
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; color: #1a1202; }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: rgba(20, 28, 40, .8);
  color: var(--dim);
  border: 1px solid var(--edge);
  box-shadow: none;
}
.btn.ghost:hover { color: var(--text); border-color: var(--gold); }
.btn.block { width: 100%; }
.btn.danger { background: linear-gradient(180deg, #e0524f, #8a1b19); color: #fff; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: 460px;
  display: flex; align-items: center;
  background: #0a1020 center/cover no-repeat;
  border-bottom: 1px solid var(--edge);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,11,18,.94) 10%, rgba(7,11,18,.55) 60%, rgba(7,11,18,.85) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 56px; }
.hero h1 { margin: 0 0 6px; font-size: 46px; line-height: 1.1; letter-spacing: -.5px; }
.hero h1 .ph { color: var(--orange); }
.hero p.lead { margin: 0 0 26px; max-width: 620px; color: var(--dim); font-size: 18px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }

.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; margin-bottom: 20px;
  border: 1px solid var(--edge); border-radius: 999px;
  background: rgba(9,9,9,.6);
  font-size: 13.5px; font-weight: 600; letter-spacing: .4px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.dot.up   { background: var(--ok);  box-shadow: 0 0 0 4px rgba(62,207,76,.18); }
.dot.down { background: var(--bad); box-shadow: 0 0 0 4px rgba(224,82,79,.18); }

/* ------------------------------------------------------------------ layout */

section { padding: 56px 0; }
section h2 {
  margin: 0 0 6px; font-size: 13px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold);
}
section h2 + p.sub { margin: 0 0 30px; color: var(--faint); }

.grid { display: grid; gap: 18px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; color: var(--gold-bright); }
.card p  { margin: 0; color: var(--dim); font-size: 15px; }

/* ------------------------------------------------------------------ forms */

.panel {
  max-width: 460px; margin: 56px auto;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 34px 34px 30px;
}
.panel.wide { max-width: 860px; }
.panel h1 { margin: 0 0 4px; font-size: 25px; }
.panel .sub { margin: 0 0 24px; color: var(--faint); font-size: 14.5px; }

label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600;
        letter-spacing: .6px; text-transform: uppercase; color: var(--dim); }
.field { margin-bottom: 18px; }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: 12px 14px;
  background: #0c1219; color: var(--text);
  border: 1px solid var(--edge); border-radius: 6px;
  font: 15px "Segoe UI", sans-serif;
}
input:focus { outline: 0; border-color: var(--gold); background: #0f1620; }
.hint { margin-top: 6px; font-size: 12.5px; color: var(--faint); }

.msg { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14.5px; }
.msg.error { background: rgba(224,82,79,.12); border: 1px solid rgba(224,82,79,.45); color: #ffb3b1; }
.msg.ok    { background: rgba(62,207,76,.10); border: 1px solid rgba(62,207,76,.40); color: #a8e9ae; }
.msg.warn  { background: rgba(241,165,0,.10); border: 1px solid rgba(241,165,0,.40); color: #f5d386; }
.msg ul { margin: 6px 0 0; padding-left: 20px; }

/* ------------------------------------------------------------------ tables */

table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th {
  text-align: left; padding: 10px 12px;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--edge);
}
table.data td { padding: 12px; border-bottom: 1px solid rgba(30,42,58,.5); color: var(--dim); }
table.data td.name { color: var(--text); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }
.empty { padding: 26px; text-align: center; color: var(--faint); }

.kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; font-size: 15px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; color: var(--text); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
         font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.badge.active { background: rgba(62,207,76,.15); color: var(--ok); }
.badge.block  { background: rgba(224,82,79,.15); color: var(--bad); }
.badge.pending{ background: rgba(241,165,0,.15); color: var(--gold); }
.badge.gm     { background: rgba(5,41,154,.35);  color: #8fb2ff; }

/* ------------------------------------------------------------------ footer */

footer.site {
  border-top: 1px solid var(--edge);
  padding: 30px 0 40px;
  color: var(--faint); font-size: 14px;
}
footer.site .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer.site .social { margin-left: auto; display: flex; gap: 16px; }

/* ------------------------------------------------------------------ small */

@media (max-width: 900px) {
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 34px; }
  header.site .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  nav.main { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
}

/* ------------------------------------------------------------------ timeline
   Used on history.php. A real chronology, so the vertical rail and the dated
   markers encode something true rather than decorating the page. */

.timeline { position: relative; max-width: 760px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; background: linear-gradient(180deg, var(--gold), rgba(241,165,0,.08));
}

.tl-item { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 0 18px; }
.tl-item:not(:last-child) { padding-bottom: 30px; }

.tl-marker { position: relative; }
.tl-marker span {
  position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(7,11,18,1);
}
.tl-item:last-child .tl-marker span { background: var(--gold); }

.tl-date {
  margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.tl-title { margin: 0 0 7px; font-size: 19px; color: var(--text); }
.tl-text  { margin: 0; color: var(--dim); font-size: 15.5px; max-width: 62ch; }

@media (max-width: 560px) {
  .timeline::before { left: 6px; }
  .tl-item { grid-template-columns: 26px 1fr; gap: 0 12px; }
  .tl-marker span { width: 13px; height: 13px; }
  .tl-title { font-size: 17px; }
}

/* ==========================================================================
   Front page - visual layer
   The site had no imagery beyond one backdrop, so the energy has to come from
   colour, type and motion instead. Each transformation carries its own accent,
   which is both decorative and informative: the colour IS the form.
   ========================================================================== */

/* ---------------------------------------------------------------- big hero */

.hero-x {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: #060910 center/cover no-repeat;
  border-bottom: 1px solid var(--edge);
}
.hero-x::before {            /* ki glow behind the wordmark */
  content: ''; position: absolute; left: 50%; top: 42%;
  width: 1100px; height: 1100px; transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(251,138,2,.30) 0%, rgba(200,43,0,.14) 32%, rgba(7,11,18,0) 62%);
  animation: ki 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ki {
  0%,100% { opacity: .75; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.09); }
}
/* The backdrop is a bright daylight scene, so the scrim has to be heavy or the
   lead text sits on pale sky and disappears. Two layers: a broad vertical wash,
   plus an ellipse concentrated behind the text block itself. */
.hero-x::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 42% at 50% 52%, rgba(4,7,12,.82) 0%, rgba(4,7,12,.45) 55%, rgba(4,7,12,0) 100%),
    linear-gradient(180deg, rgba(6,9,16,.78) 0%, rgba(6,9,16,.55) 34%, rgba(6,9,16,.72) 68%, rgba(7,11,18,1) 100%);
}
.hero-x .wrap { position: relative; z-index: 2; text-align: center; padding: 70px 24px; }

.hero-mark { width: min(660px, 88vw); height: auto; margin: 0 auto 18px; display: block;
             filter: drop-shadow(0 8px 40px rgba(251,138,2,.35)); }

.hero-x h1 {
  margin: 0 0 14px; font-size: clamp(34px, 6.4vw, 68px); line-height: 1.02;
  letter-spacing: -.02em; text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
.hero-x h1 .ph { color: var(--orange); }

.hero-x .lead {
  margin: 0 auto 30px; max-width: 46ch; font-size: clamp(16px, 2vw, 19px);
  color: #d7dee7;                    /* --dim is too weak over daylight art */
  text-shadow: 0 1px 16px rgba(0,0,0,.8);
}
.hero-x .cta { justify-content: center; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 2; color: var(--faint); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }

/* -------------------------------------------------------------- stat strip */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  background: rgba(13,20,30,.5);
}
.stats div { padding: 26px 18px; text-align: center; border-left: 1px solid var(--edge); }
.stats div:first-child { border-left: 0; }
.stats b {
  display: block; font-size: clamp(28px, 4vw, 44px); line-height: 1;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.stats span {
  display: block; margin-top: 7px; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------------------------------------------------- transformation cards */

.forms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.form {
  position: relative; overflow: hidden;
  padding: 26px 24px 24px;
  border: 1px solid var(--edge); border-radius: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%), #0d141e;
  transition: transform .2s ease, border-color .2s ease;
}
.form::before {                        /* the form's own aura */
  content: ''; position: absolute; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--aura) 0%, transparent 68%);
  opacity: .5; transition: opacity .25s ease, transform .25s ease;
}
.form:hover { transform: translateY(-3px); border-color: var(--aura); }
.form:hover::before { opacity: .85; transform: scale(1.15); }

.form b {
  position: relative; display: block; font-size: 19px; margin-bottom: 5px;
  color: var(--fg, #fff);
}
.form i {
  position: relative; display: block; font-style: normal;
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--aura); margin-bottom: 11px;
}
.form p { position: relative; margin: 0; font-size: 14.5px; color: var(--dim); }

/* ------------------------------------------------------------ places strip */

.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.place {
  padding: 22px 20px; border-radius: 10px;
  border: 1px solid var(--edge); background: #0d141e;
  transition: border-color .2s ease, transform .2s ease;
}
.place:hover { border-color: var(--gold); transform: translateY(-3px); }
.place b { display: block; font-size: 16.5px; margin-bottom: 5px; color: var(--text); }
.place span { font-size: 13.5px; color: var(--faint); }

/* -------------------------------------------------------------- band + cta */

.band {
  padding: 54px 0;
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(251,138,2,.13), transparent 70%),
    #0a0f18;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  text-align: center;
}
.band h2 { color: var(--text); font-size: clamp(22px,3.4vw,32px); margin: 0 0 10px; }
.band p  { color: var(--dim); margin: 0 auto 24px; max-width: 52ch; }

/* ---------------------------------------------------------- scroll reveal */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-x::before, .scroll-hint { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .form:hover, .place:hover { transform: none; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .forms  { grid-template-columns: repeat(2, 1fr); }
  .places { grid-template-columns: repeat(2, 1fr); }
  .stats  { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(3) { border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--edge); }
}
@media (max-width: 560px) {
  .forms { grid-template-columns: 1fr; }
  .hero-x { min-height: 68vh; }
}