:root{
  --red-950:#250008;
  --red-900:#3a0012;
  --red-800:#5c001c;
  --red-700:#800020;
  --red-650:#8f0026;
  --gold-650:#b18a00;
  --gold-600:#C5A000;
  --gold-520:#E0C060;
  --ink-950:#101014;
  --ink-850:#1b1b22;
  --ink-700:#2d2d36;
  --ink-500:#5c5c69;
  --bg-50:#f7f6f8;
  --card:#ffffff;
  --line:#eceaf1;
  --shadow-xl: 0 28px 76px rgba(16,16,20,.14);
  --shadow-lg: 0 20px 56px rgba(16,16,20,.12);
  --shadow-md: 0 12px 30px rgba(16,16,20,.10);
  --shadow-sm: 0 7px 18px rgba(16,16,20,.08);
  --radius-2xl: 26px;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --max: 1220px;
  --focus: 0 0 0 4px rgba(197,160,0,.23);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink-950);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(128,0,32,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(197,160,0,.12), transparent 55%),
    radial-gradient(700px 420px at 40% 110%, rgba(128,0,32,.08), transparent 55%),
    var(--bg-50);
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.muted{color:var(--ink-500)}
.small{font-size:12px}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.09);
  color:#fff;
  backdrop-filter: blur(10px);
}
.kicker .dot{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg,var(--gold-520), var(--gold-600));
  box-shadow: 0 0 0 4px rgba(197,160,0,.14);
}
.pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(224,192,96,.12), transparent 35%),
    radial-gradient(circle at 80% 15%, rgba(128,0,32,.12), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  opacity:.55;
  pointer-events:none;
}
.motif{
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(224,192,96,.46), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(128,0,32,.40), transparent 58%);
  filter: blur(18px);
  opacity:.58;
  pointer-events:none;
}
.motif.left{left:-260px; top:-260px}
.motif.right{right:-300px; top:-260px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-top: 5px solid var(--red-700);
  border-bottom: 1px solid rgba(236,234,241,.95);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px; min-width:250px}
.brand .mark{
  width:44px; height:44px; border-radius:16px;
  background: linear-gradient(135deg, var(--red-700), var(--red-950));
  color:#fff; display:grid; place-items:center;
  box-shadow: 0 18px 46px rgba(128,0,32,.22);
  position:relative;
  font-weight:900;
}
.brand .mark:after{
  content:""; position:absolute; inset:-2px; border-radius:18px;
  background: linear-gradient(135deg, rgba(224,192,96,.78), rgba(197,160,0,.08));
  z-index:-1;
}
.brand .title{display:flex; flex-direction:column; line-height:1.15}
.brand .title strong{letter-spacing:1.2px; text-transform:uppercase; font-weight:950; font-size:13px}
.brand .title span{font-size:12px; color:var(--ink-500)}
.nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nav a{
  font-size:12px; text-transform:uppercase; letter-spacing:.78px;
  padding:10px 8px; border-bottom:2px solid transparent; color:var(--ink-700);
}
.nav a:hover{color:var(--red-700)}
.nav a.active{color:var(--red-700); border-bottom-color:var(--red-700)}
.nav .cta{
  padding:10px 14px; border-radius:999px;
  background: linear-gradient(135deg, var(--red-700), var(--red-950));
  color:#fff; box-shadow: 0 18px 44px rgba(128,0,32,.18);
}
.nav-toggle{
  display:none; border:1px solid rgba(236,234,241,.95); background:#fff;
  border-radius:14px; padding:10px 12px;
}
.nav-toggle:focus{outline:none; box-shadow:var(--focus)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:16px; font-weight:900;
  border:1px solid transparent;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  background: linear-gradient(135deg, var(--gold-520), var(--gold-600));
  color:#1b1b1f; box-shadow: 0 18px 44px rgba(197,160,0,.20);
}
.btn.ghost{
  background: rgba(255,255,255,.10);
  color:#fff; border-color: rgba(255,255,255,.28);
}
.btn.light{
  background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn.danger{
  background: linear-gradient(135deg, var(--red-650), var(--red-950));
  color:#fff; box-shadow: 0 18px 44px rgba(128,0,32,.18);
}

/* Hero */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(115deg, rgba(37,0,8,.92) 0%, rgba(128,0,32,.88) 45%, rgba(37,0,8,.92) 100%),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=2000&q=80");
  background-size:cover; background-position:center;
}
.hero .wrap{padding:74px 0 54px}
.hero-grid{display:grid; grid-template-columns: 1.35fr .65fr; gap:22px; align-items:stretch}
.hero h1{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing:.2px; margin:14px 0 10px;
  font-size:48px; line-height:1.06;
  text-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.hero p{margin:0; max-width:72ch; color: rgba(255,255,255,.86); font-size:16px}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-2xl);
  padding:18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 64px rgba(0,0,0,.25);
}
.hero-card h3{margin:0 0 6px; font-size:14px; letter-spacing:.6px; text-transform:uppercase}
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px}
.stat{
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding:12px;
}
.stat .num{font-size:20px; font-weight:950}
.stat .lbl{font-size:12px; color:rgba(255,255,255,.84)}
.hero .ribbon{margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color: rgba(255,255,255,.82)}
.hero .ribbon .pill{
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
}

/* Sections */
.section{padding:56px 0}
.section.white{
  background:#fff;
  border-top:1px solid rgba(236,234,241,.95);
  border-bottom:1px solid rgba(236,234,241,.95);
}
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
.section-title h2{margin:0; font-size:28px; letter-spacing:.2px}
.section-title h2 span{
  background: linear-gradient(135deg, var(--red-700), var(--red-950));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-title p{margin:6px 0 0; color:var(--ink-500); max-width:88ch}
.hr{height:1px; background:var(--line); margin:14px 0}
.grid{display:grid; gap:16px}
.cols-4{grid-template-columns:repeat(4, 1fr)}
.cols-3{grid-template-columns:repeat(3, 1fr)}
.cols-2{grid-template-columns:repeat(2, 1fr)}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding:18px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow-xl); border-color: rgba(197,160,0,.38)}
.card h3{margin:0 0 6px; color: var(--red-700); font-size:16px}
.card p{margin:0; color:var(--ink-500)}
.feature{position:relative; overflow:hidden}
.feature:before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(420px 240px at 10% 0%, rgba(128,0,32,.20), transparent 65%),
    radial-gradient(320px 220px at 92% 0%, rgba(197,160,0,.22), transparent 62%);
  opacity:.95; pointer-events:none;
}
.feature > *{position:relative}
.icon{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--red-700), var(--red-950));
  box-shadow: 0 14px 38px rgba(128,0,32,.18);
  margin-bottom:10px;
  font-weight:900;
}
.icon.gold{
  background: linear-gradient(135deg, var(--gold-520), var(--gold-600));
  color:#1b1b1f;
  box-shadow: 0 14px 38px rgba(197,160,0,.18);
}
.org-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow-sm);
  font-size:12px; color:var(--ink-500);
}
.person{display:flex; align-items:center; gap:12px}
.avatar{
  width:56px; height:56px; border-radius:50%;
  border:3px solid var(--gold-600);
  background:#fff; object-fit:cover;
}
.person .meta{display:flex; flex-direction:column; gap:2px}
.person .meta .role{font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-500)}
.person .meta .name{font-weight:950; color:var(--red-700)}
.person .meta .note{font-size:12px; color:var(--ink-500)}
.list{display:flex; flex-direction:column; gap:12px}
.item{
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding:16px; box-shadow: var(--shadow-sm);
}
.item .top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.item h3{margin:0; color:var(--red-700); font-size:16px}
.item .meta{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid var(--line);
  background:#fff; color:var(--ink-500); font-size:12px;
}
.pill.gold{border-color: rgba(197,160,0,.45); background: rgba(197,160,0,.10); color:#6a5300}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.field{display:grid; gap:6px}
label{font-size:12px; color:var(--ink-500); text-transform:uppercase; letter-spacing:.6px}
input, select{
  border:1px solid var(--line);
  border-radius: 16px;
  padding:12px 12px;
  font:inherit;
  background:#fff;
  min-width: 220px;
}
input:focus, select:focus{outline:none; box-shadow:var(--focus); border-color: rgba(197,160,0,.55)}
.count{margin-left:auto; color:var(--ink-500); font-size:12px}
.page-hero{background:#fff; border-bottom:1px solid rgba(236,234,241,.95); padding:28px 0}
.breadcrumb{font-size:12px; color:var(--ink-500)}
.page-hero h1{
  margin:8px 0 0;
  font-size:32px;
  font-family: ui-serif, Georgia, Times, serif;
  color: var(--red-700);
}
.page-hero p{margin:8px 0 0; color:var(--ink-500); max-width:98ch}

/* Footer */
.site-footer{
  background: linear-gradient(180deg, #1b1b1f 0%, #111114 100%);
  color:#ddd;
  border-top: 4px solid var(--gold-600);
  padding:36px 0 18px;
}
.footer-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:18px}
.site-footer h4{margin:0 0 12px; color:#fff; letter-spacing:.6px}
.site-footer p, .site-footer li{color:#cfcfd6}
.site-footer ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.site-footer a{color:#cfcfd6}
.site-footer a:hover{color:#fff}
.copy{
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:18px; padding-top:14px;
  font-size:12px; color:#a9a9b2; text-align:center;
}

/* Responsive */
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }
@media (max-width: 860px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .nav.mobile-open{
    display:flex; position:absolute; left:20px; right:20px; top:74px;
    flex-direction:column; gap:6px; padding:10px;
    background:#fff; border:1px solid rgba(236,234,241,.95);
    border-radius: 18px; box-shadow: var(--shadow-md);
  }
  .nav.mobile-open a{padding:12px 12px; border-radius:14px}
  .nav.mobile-open a.active{background: rgba(128,0,32,.06); border-bottom-color:transparent}
  .split{grid-template-columns:1fr}
  .cols-4,.cols-3,.cols-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  input, select{min-width:180px}
  .hero h1{font-size:36px}
}