:root{
  --sitcope-green:#0f6b3a;
  --sitcope-green-2:#0b5a31;
  --sitcope-red:#c2181b;

  --ink:#101828;
  --muted:rgba(16,24,40,.62);
  --border:rgba(16,24,40,.10);
  --soft:rgba(16,24,40,.03);
}

body{
  color:var(--ink);
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(15,107,58,.16), transparent 60%),
    radial-gradient(820px 420px at 90% 0%, rgba(194,24,27,.12), transparent 55%),
    #f7f8fa;
}

/* Header */
.site-header{ background:#fff; border-bottom:1px solid var(--border); }
.brand-logo{ height:34px;width:auto;display:block; }
.brand-name{ font-weight:900; letter-spacing:.2px; color:var(--ink); }
.top-link{ text-decoration:none; color:var(--ink); opacity:.85; font-weight:700; }
.top-link:hover{ opacity:1; }

/* Hero */
.hero{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--sitcope-green),var(--sitcope-red));
}
.kicker{
  font-size:.75rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(16,24,40,.55);
  font-weight:900;
}
.hero-title{
  font-size:clamp(26px,4vw,44px);
  font-weight:900;
  letter-spacing:-.02em;
}
.hero-subtitle{
  color:var(--muted);
  max-width:60ch;
}

/* Chips */
.hero-chip{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(15,107,58,.04), rgba(16,24,40,.01));
}
.hero-chip.chip-warn{
  background:rgba(16,24,40,.02);
}

/* Panels */
.panel{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
}
.badge-secure{
  background:rgba(16,24,40,.05);
  border:1px solid rgba(16,24,40,.10);
  color:rgba(16,24,40,.75);
  font-weight:900;
  border-radius:999px;
  padding:.45rem .7rem;
}

/* Buttons */
.btn-sitcope{
  background:var(--sitcope-green);
  border:1px solid var(--sitcope-green);
  color:#fff;
  font-weight:900;
}
.btn-sitcope:hover{
  background:var(--sitcope-green-2);
  border-color:var(--sitcope-green-2);
  color:#fff;
}
.btn-outline-sitcope{
  border:1px solid rgba(15,107,58,.35);
  color:var(--sitcope-green);
  font-weight:800;
}
.btn-outline-sitcope:hover{
  background:rgba(15,107,58,.08);
  color:var(--sitcope-green);
  border-color:rgba(15,107,58,.45);
}

/* Form UX */
.form-label{ font-weight:800; }
.form-control, .form-select{
  border-color: rgba(16,24,40,.14);
  border-radius: 14px;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(15,107,58,.38);
  box-shadow: 0 0 0 .2rem rgba(15,107,58,.12);
}
.form-check-input{
  border-color: rgba(16,24,40,.18);
}
.form-check-input:checked{
  background-color: var(--sitcope-green);
  border-color: var(--sitcope-green);
}

/* Right panel */
.sticky{
  position: sticky;
  top: 18px;
}

/* List check */
.list-check{
  padding-left: 1.1rem;
}
.list-check li{
  margin-bottom: .45rem;
}

/* Note box */
.note{
  border-left:4px solid rgba(15,107,58,.35);
  background:rgba(16,24,40,.02);
  border-radius:14px;
  padding:12px 14px;
}

/* Folio */
.folio{
  font-weight:900;
  letter-spacing:.06em;
  font-size: clamp(20px, 3vw, 34px);
  padding:12px 14px;
  border-radius:16px;
  display:inline-block;
  background: rgba(15,107,58,.08);
  border: 1px solid rgba(15,107,58,.22);
  color: var(--sitcope-green);
}

/* Footer */
.muted{ color:var(--muted); }
.site-footer{ border-top:1px solid var(--border); background:#fff; }