:root{
  --shadow-soft: 0 1px 0 var(--line), 0 18px 40px rgba(0,0,0,.55);
}

@keyframes ogFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

body{
  background:
    radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(700px 460px at 0% 100%, color-mix(in srgb, var(--panel-2) 60%, transparent), transparent 55%),
    var(--bg);
}

/* ---- Headings: Bodoni-style display, calm and wide ---- */
.hero-title,h2,.feature h3,.faq-q{
  color:var(--text);
  font-weight:600;
  letter-spacing:.03em;
}
.hero-title{
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.05;
}
.section h2{
  position:relative;
  padding-bottom:.5rem;
}
.section h2::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:64px;height:1px;
  background:var(--accent);
}

/* ---- Hero: onyx calm, hairline frame ---- */
.hero{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, transparent), transparent 70%),
    var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  animation:ogFade .8s ease both;
}
.hero-sub{color:var(--prose)}
.facts .fact{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}
.facts .fact b{color:var(--accent)}

/* ---- Cards & features: charcoal panels, brown-gold hairline ---- */
.card,.feature,.faq-item{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  transition:border-color .5s ease, transform .5s ease, box-shadow .5s ease;
  animation:ogFade .7s ease both;
}
.card:hover,.feature:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 1px 0 var(--accent), 0 26px 50px rgba(0,0,0,.6);
}
.feature .icon{
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel-2);
}

/* ---- Buttons: 24k outline CTA, no glow ---- */
.btn{
  border-radius:var(--radius);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.btn-primary{
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
}
.btn-primary:hover{
  background:transparent;
  color:var(--accent);
}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Badge ---- */
.badge{
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--accent);
  border-radius:var(--radius);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---- Catalog tiles: big calm imagery, gold edge on hover ---- */
.tile{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .5s ease, transform .5s ease;
}
.tile:hover{border-color:var(--accent);transform:translateY(-3px)}
.tile .nm{color:var(--text);letter-spacing:.02em}
.tile .gp{color:var(--accent)}
.tile.noimg{
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
}

/* ---- Tabs ---- */
.tab{
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-2);
  letter-spacing:.04em;
  transition:color .4s ease, border-color .4s ease;
}
.tab:hover{color:var(--text)}
.tab.active{
  color:var(--on-accent);
  background:var(--accent);
  border-color:var(--accent);
}

/* ---- Header & footer hairlines ---- */
.site-header{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--line);
}

/* ---- Article ---- */
.article p,.article li{color:var(--prose)}
.article a{color:var(--accent)}
.table{border:1px solid var(--line)}
.table th{background:var(--panel-2);color:var(--text);letter-spacing:.03em}
.table td,.table th{border-bottom:1px solid var(--line)}

/* ---- FAQ ---- */
.faq-item{padding-left:1px}
.faq-q{color:var(--text)}
.faq-a{color:var(--prose)}

.section{animation:ogFade .8s ease both}