:root{
  --brand-navy:#08215c;
  --brand-blue:#0f46b8;
  --brand-blue-2:#2f6df6;
  --brand-orange:#ff6a1a;
  --brand-gold:#ffd100;
  --brand-ink:#111827;
  --brand-muted:#667085;
  --brand-line:rgba(15,35,92,.12);
  --brand-surface:rgba(255,255,255,.92);
  --brand-surface-strong:#ffffff;
  --brand-shadow:0 18px 42px rgba(8,33,92,.12);
  --brand-shadow-soft:0 10px 28px rgba(8,33,92,.08);
}

body{
  background:
    linear-gradient(90deg, rgba(8,33,92,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,209,0,.08) 0, transparent 260px),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 36%, #f7f9fc 68%, #fff8f0 100%) !important;
  background-size:42px 42px, auto, auto !important;
  color:var(--brand-ink);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:url("brand-logo-wide.png");
  background-repeat:no-repeat;
  background-size:min(64vw, 840px) auto;
  background-position:right 3vw top 13vh;
  opacity:.082;
  filter:saturate(1.05);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(120deg, transparent 0 62%, rgba(255,106,26,.045) 62% 63%, transparent 63% 100%),
    linear-gradient(120deg, transparent 0 78%, rgba(15,70,184,.04) 78% 79%, transparent 79% 100%);
}

.app{
  position:relative;
  z-index:1;
}

.sidebar,
.panel,
.section,
.card,
.interactive,
.detail{
  border-color:var(--brand-line) !important;
  box-shadow:var(--brand-shadow-soft) !important;
  backdrop-filter:blur(14px);
}

.sidebar,
.panel,
.section,
.detail{
  background:var(--brand-surface) !important;
}

.card,
.entry-card,
.stat,
.module,
.template-step,
.output,
.svg-box,
.process-card,
.quiz-item{
  background:rgba(255,255,255,.96) !important;
  border-color:var(--brand-line) !important;
}

.brand,
.logo,
.brand-panel{
  position:relative;
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

.brand-logo-lockup{
  display:grid;
  gap:10px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(8,33,92,.1);
  margin-bottom:14px;
}

.brand-logo-img{
  width:148px;
  height:auto;
  display:block;
}

.brand-logo-img.small{
  width:118px;
}

.brand-title{
  margin:0;
  color:var(--brand-navy);
  font-size:19px;
  line-height:1.35;
  font-weight:900;
}

.brand-subtitle{
  margin:0;
  color:var(--brand-muted);
  font-size:12.5px;
  line-height:1.6;
}

.brand .brand-title,
.logo .brand-title,
.left .brand-title{
  margin:0 !important;
  color:var(--brand-navy) !important;
  font-size:19px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
}

.brand .brand-subtitle,
.logo .brand-subtitle,
.left .brand-subtitle{
  margin:0 !important;
  color:var(--brand-muted) !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 30%, rgba(255,209,0,.20), transparent 24%),
    radial-gradient(circle at 100% 86%, rgba(255,106,26,.18), transparent 34%),
    linear-gradient(135deg, #071b4a 0%, #0b337b 47%, #1e5cc9 100%) !important;
  box-shadow:0 22px 50px rgba(8,33,92,.18) !important;
  border:1px solid rgba(255,255,255,.28);
}

.hero::before{
  content:"";
  position:absolute;
  inset:auto -80px -110px auto;
  width:420px;
  height:260px;
  background:url("brand-logo-mark.png") center / contain no-repeat;
  opacity:.16;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:linear-gradient(90deg, var(--brand-gold), var(--brand-orange), var(--brand-blue-2));
}

.hero > *{
  position:relative;
  z-index:1;
}

.hero-logo{
  width:138px;
  height:auto;
  display:block;
  margin-bottom:18px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.14));
}

.hero h1{
  letter-spacing:0 !important;
  text-wrap:balance;
}

.hero p{
  color:rgba(255,255,255,.9);
}

.action,
.entry-link,
.open-link,
.btn.primary,
button.active{
  background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2)) !important;
  border-color:rgba(47,109,246,.65) !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(15,70,184,.18);
}

.action,
.entry-link,
.open-link,
.btn,
button,
.nav-link,
.nav a,
.section-row{
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.action.primary{
  background:#fff !important;
  color:var(--brand-blue) !important;
  border-color:rgba(255,255,255,.88) !important;
}

.home-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  margin:12px 0 2px;
}

.action:hover,
.entry-link:hover,
.open-link:hover,
.btn:hover,
button:hover{
  transform:translateY(-1px);
}

.search,
input,
select{
  border-color:rgba(8,33,92,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.search:focus,
input:focus,
select:focus{
  border-color:var(--brand-blue-2) !important;
  box-shadow:0 0 0 4px rgba(47,109,246,.12);
}

.side-block h2,
.control-card h3,
.card-title,
.process-card h4{
  color:var(--brand-navy);
}

.nav-link,
.nav a{
  border:1px solid transparent;
}

.nav-link:hover,
.nav a:hover{
  background:linear-gradient(90deg, rgba(15,70,184,.08), rgba(255,106,26,.06)) !important;
  border-color:rgba(15,70,184,.12);
  color:var(--brand-blue) !important;
}

.filter-btn.active,
.node.active rect{
  border-color:rgba(15,70,184,.42) !important;
  background:linear-gradient(135deg, rgba(239,246,255,.98), rgba(255,247,237,.86)) !important;
}

.module-head,
.table th,
.compare-table th{
  background:linear-gradient(90deg, rgba(239,246,255,.92), rgba(255,247,237,.55)) !important;
}

.section-id,
.node text.id,
.panel-title h2,
.section h2{
  color:var(--brand-blue) !important;
  fill:var(--brand-blue) !important;
}

.status.ready{
  color:#166534 !important;
  background:#f0fdf4 !important;
}

.status.paper{
  color:var(--brand-blue) !important;
  background:#eff6ff !important;
}

.status.planned{
  color:#9a3412 !important;
  background:#fff7ed !important;
}

.badge.orange,
.chip.root,
.phase-badge.active{
  background:#fff7ed !important;
  color:#9a3412 !important;
  border-color:rgba(255,106,26,.32) !important;
}

.footer{
  color:rgba(8,33,92,.52) !important;
}

.graph-wrap svg{
  background-color:rgba(255,255,255,.55);
}

@media(max-width:980px){
  body::before{
    background-size:520px auto;
    background-position:center 160px;
    opacity:.028;
  }
  .hero-logo{
    width:122px;
    margin-bottom:14px;
  }
}