:root{
  --bg: #fbfbfc;
  --card: #ffffff;
  --text: #0f172a;
  --muted:#64748b;
  --line:#94a3b8;
  --accent:#b89b5e;
  --brand:#0b2340;
  --ring: rgba(184,155,94,.35);

  --g1: rgba(184,155,94,.18);
  --g2: rgba(11,35,64,.14);
  --g3: rgba(99,102,241,.10);
}
[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f1b2f;
  --text:#e5e7eb;
  --muted:#a8b0bf;
  --line:#334155;
  --ring: rgba(184,155,94,.25);

  --g1: rgba(184,155,94,.18);
  --g2: rgba(59,130,246,.12);
  --g3: rgba(16,185,129,.10);
}

html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  background:
    radial-gradient(closest-side at 18% 22%, var(--g1), transparent 60%),
    radial-gradient(closest-side at 72% 28%, var(--g2), transparent 58%),
    radial-gradient(closest-side at 55% 75%, var(--g3), transparent 62%);
  filter: blur(18px);
  transform: translate3d(0,0,0);
  animation: drift 18s ease-in-out infinite alternate;
  opacity:.95;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-1;
  background:
    radial-gradient(closest-side at 30% 60%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(closest-side at 80% 70%, rgba(255,255,255,.35), transparent 55%);
  filter: blur(28px);
  mix-blend-mode: overlay;
  opacity:.35;
  animation: drift2 26s ease-in-out infinite alternate;
  pointer-events:none;
}
[data-theme="dark"] body::after{
  background:
    radial-gradient(closest-side at 30% 60%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(closest-side at 80% 70%, rgba(255,255,255,.07), transparent 55%);
  opacity:.45;
  mix-blend-mode: screen;
}
@keyframes drift{
  0%   { transform: translate(-2%, -1%) scale(1.02) rotate(-1deg); }
  50%  { transform: translate(2%, 1%) scale(1.05) rotate(0.5deg); }
  100% { transform: translate(-1%, 2%) scale(1.03) rotate(1deg); }
}
@keyframes drift2{
  0%   { transform: translate(1%, -1%) scale(1.00); }
  50%  { transform: translate(-2%, 2%) scale(1.04); }
  100% { transform: translate(2%, 1%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none !important; }
}

/* main padding-top 1rem */
main{ padding-top: 1rem !important; }
.main-gap{ padding-top:1rem; }
@media (min-width: 768px){
  .main-gap{ padding-top:1rem; }
}

/* Diagram layout */
.diagram-wrap{max-width:1100px; margin:0 auto;}
.diagram-title{letter-spacing:.12em;}
.diagram{
  position:relative;
  margin-top:.65rem;
  padding:1.15rem 1rem 2.5rem;
}
.members-stack{ margin-top:-0.65rem; }

.companies-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top:1.55rem;
  position:relative;
  z-index:2;
}
@media (max-width: 860px){
  .companies-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top:1.25rem;
  }
  .diagram{padding: 1rem .25rem 2.25rem;}
  .members-stack{ margin-top:-0.35rem; }
}
@media (max-width: 360px){
  .companies-grid{grid-template-columns:1fr;}
}

.center-last{
  grid-column: 2;
  justify-self: center;
  width: 100%;
  max-width: 360px;
}
@media (max-width: 860px){
  .center-last{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 420px;
  }
}
@media (max-width: 360px){
  .center-last{
    grid-column: auto;
    max-width: none;
  }
}

/* Connection lines layer */
.lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.lines svg{width:100%; height:100%; display:block;}
.conn-stroke{
  stroke: var(--line);
  stroke-opacity: .70;
  stroke-width: 1.25;
  fill: none;
  shape-rendering: geometricPrecision;
}
[data-theme="dark"] .conn-stroke{stroke-opacity:.55;}

/* Cards */
.cardx{
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-radius:18px;
  border: 1px solid rgba(184,155,94,.35);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  padding: 1.35rem 1.15rem;
  text-align:center;
  position:relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  outline:none;
  backdrop-filter: blur(10px);
}
.cardx:hover{transform: translateY(-2px); box-shadow:0 16px 40px rgba(2,6,23,.12);}
.cardx:focus{box-shadow:0 0 0 4px var(--ring), 0 16px 40px rgba(2,6,23,.12);}
.cardx[data-active="true"]{border-color: rgba(184,155,94,.55); box-shadow:0 0 0 4px var(--ring), 0 16px 40px rgba(2,6,23,.12);}

.iconmask{
  width:44px;
  height:44px;
  display:block;
  margin: 0 auto .75rem;
  background: var(--accent);
  opacity: .96;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 6px 16px rgba(2,6,23,.12));
}
[data-theme="dark"] .iconmask{
  opacity: .98;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.card-title{font-weight:800; letter-spacing:.02em; color: #334155;}
[data-theme="dark"] .card-title{color: #e5e7eb;}
.card-sub{color:var(--muted); margin-top:.35rem; line-height:1.25;}

/* Modal */
.overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.55);
  display:flex; align-items:center; justify-content:center;
  padding: 1rem;
  z-index:50;
}

.modal{
  width:min(920px, 100%);
  max-height: min(82vh, 860px);
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-radius:22px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow: 0 30px 80px rgba(2,6,23,.35);
  padding: 1.25rem 1.25rem 1rem;
  backdrop-filter: blur(12px);
}

/* subtle scrollbar */
.modal::-webkit-scrollbar{ width: 10px; }
.modal::-webkit-scrollbar-track{ background: transparent; }
.modal::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
}
[data-theme="dark"] .modal::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.25);
  border-color: rgba(15,27,47,.55);
}

.modal-logo-img{
  display:block;
  height: 44px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(2,6,23,.14));
}
[data-theme="dark"] .modal-logo-img{
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}
@media (max-width:520px){
  .modal-logo-img{height:40px; max-width: 210px;}
}

.modal-claim{
  margin-top:.45rem;
  font-weight:900;
  font-size:1.1rem;
  line-height:1.35;
  color: #334155;
}
[data-theme="dark"] .modal-claim{color:#e5e7eb;}

.modal-media{
  margin-top: .95rem;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(184,155,94,.22);
  box-shadow: 0 18px 50px rgba(2,6,23,.14);
  background: rgba(255,255,255,.35);
}
[data-theme="dark"] .modal-media{
  background: rgba(15,27,47,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  border-color: rgba(184,155,94,.18);
}
.modal-media img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
@media (max-width: 520px){
  .modal-media img{height: 170px;}
}

.modal p{color:var(--muted); margin:.85rem 0 0; line-height:1.75;}
[data-theme="dark"] .modal p{color:#a8b0bf;}

.modal-section-title{
  margin-top: 1rem;
  font-weight:900;
  letter-spacing:.01em;
  color:#334155;
}
[data-theme="dark"] .modal-section-title{color:#e5e7eb;}

.modal-list{
  margin-top:.5rem;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.75;
}
.modal-list li{ margin:.25rem 0; }
[data-theme="dark"] .modal-list{color:#a8b0bf;}

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  color:var(--muted);
  font-size:.85rem;
  margin-top:.75rem;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:.55rem .95rem;
  border:1px solid rgba(148,163,184,.25);
  background:transparent; color:var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
  user-select:none;
  backdrop-filter: blur(8px);
  text-decoration:none;
}
.btn:hover{transform: translateY(-1px); box-shadow:0 10px 24px rgba(2,6,23,.12);}
.btn-primary{
  border-color: rgba(184,155,94,.5);
  box-shadow: 0 0 0 4px var(--ring);
}
.btn-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* Header */
header{position:relative;}
.lang-switch{
  position:absolute;
  top: 1.25rem;
  right: 1.25rem;
  display:flex;
  gap: .5rem;
  align-items:center;
}

.brandmark{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  margin-top:.25rem;
  text-align:center;
}
.brandmark .word{
  font-weight:900;
  letter-spacing:.10em;
  color:var(--brand);
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height:1.1;
}
[data-theme="dark"] .brandmark .word{color:#e5e7eb;}
.brandmark .sub{
  font-weight:600;
  letter-spacing:.14em;
  color:#64748b;
}
[data-theme="dark"] .brandmark .sub{color:#a8b0bf;}

.brand-icon{
  width:92px;
  height:92px;
  display:block;
  margin: 0 auto;
  background: var(--accent);
  -webkit-mask: url("../images/monarch-crown.svg") no-repeat center / contain;
  mask: url("../images/monarch-crown.svg") no-repeat center / contain;
  filter: drop-shadow(0 10px 22px rgba(2,6,23,.14));
}

[data-theme="dark"] input#search{
  background: rgba(15,27,47,.75) !important;
  border-color: rgba(51,65,85,.85) !important;
}