/* REL 6.17.36 — homepage perfect pass
   Keep the homepage unmistakably tannerd.net: black/ivory first, system color as signal,
   strong plain-language hierarchy, and just enough motion to make the machine feel alive. */

/* HERO // clearer hierarchy, slightly more tactile copy, composite system field */
.hero-copy .plain{
  position:relative;
  max-width:650px;
  margin-top:27px;
  padding:2px 0 2px 18px;
  border-left:1px solid rgba(210,168,79,.52);
  color:#c5beb1;
}
.hero-copy .plain::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  width:1px;
  height:42%;
  background:#f1e9d7;
  box-shadow:0 0 12px rgba(210,168,79,.28);
}
.hero-copy .actions{align-items:stretch}
.hero-copy .secondary{
  min-width:190px;
  background:rgba(8,8,8,.28);
  border-color:rgba(242,238,228,.23);
  backdrop-filter:blur(6px);
}
.hero-copy .secondary:hover{
  border-color:rgba(210,168,79,.62);
  color:#fff;
  background:rgba(210,168,79,.045);
}
.hero-statusline{
  position:relative;
  overflow:hidden;
  border-color:rgba(210,168,79,.25)!important;
  background:linear-gradient(90deg,rgba(91,180,197,.025),rgba(117,151,181,.025) 38%,rgba(130,168,132,.022) 66%,rgba(166,132,166,.024));
}
.hero-statusline::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(91,180,197,.64),rgba(117,151,181,.48),rgba(210,168,79,.54),rgba(130,168,132,.48),rgba(166,132,166,.58));
  opacity:.62;
}

/* The homepage represents the whole family, so its signal nodes inherit the family colors. */
.home-node.h1{background:rgb(91,180,197);box-shadow:0 0 0 5px rgba(91,180,197,.06),0 0 16px rgba(91,180,197,.38)}
.home-node.h2{background:rgb(117,151,181);box-shadow:0 0 0 5px rgba(117,151,181,.06),0 0 16px rgba(117,151,181,.34)}
.home-node.h3{background:rgb(130,168,132);box-shadow:0 0 0 5px rgba(130,168,132,.06),0 0 16px rgba(130,168,132,.32)}
.home-node.h4{background:rgb(210,168,79);box-shadow:0 0 0 5px rgba(210,168,79,.06),0 0 16px rgba(210,168,79,.34)}
.home-node.h5{background:rgb(166,132,166);box-shadow:0 0 0 5px rgba(166,132,166,.06),0 0 16px rgba(166,132,166,.34)}
.home-node.h1::after{color:rgb(126,201,216)}
.home-node.h2::after{color:rgb(151,180,205)}
.home-node.h3::after{color:rgb(155,190,157)}
.home-node.h4::after{color:#d7b468}
.home-node.h5::after{color:rgb(195,160,194)}
.celestial::before{
  background:
    radial-gradient(circle at 14% 28%,rgba(91,180,197,.055),transparent 19%),
    radial-gradient(circle at 86% 30%,rgba(117,151,181,.045),transparent 19%),
    radial-gradient(circle at 78% 82%,rgba(130,168,132,.04),transparent 18%),
    radial-gradient(circle at 22% 80%,rgba(166,132,166,.04),transparent 18%);
  box-shadow:
    0 0 0 42px rgba(210,168,79,.010),
    -18px -8px 74px rgba(91,180,197,.025),
    22px 16px 82px rgba(166,132,166,.022),
    0 0 88px rgba(210,168,79,.022);
}
.hero-instrument{filter:drop-shadow(0 34px 58px rgba(0,0,0,.72)) drop-shadow(0 0 17px rgba(210,168,79,.075))}

/* OPERATING PRINCIPLES // a clear bridge between the hero and product cards. */
.home-principles{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  padding:0 clamp(28px,6vw,96px) 76px;
  background:#050505;
  border-top:1px solid rgba(242,238,228,.08);
}
.home-principle{
  --p-rgb:210,168,79;
  position:relative;
  min-height:152px;
  padding:28px 30px 26px;
  overflow:hidden;
  border:1px solid rgba(var(--p-rgb),.15);
  background:
    radial-gradient(circle at 100% 0,rgba(var(--p-rgb),.075),transparent 43%),
    linear-gradient(145deg,rgba(var(--p-rgb),.025),rgba(7,7,7,.98));
}
.home-principle:nth-child(1){--p-rgb:91,180,197}
.home-principle:nth-child(2){--p-rgb:117,151,181}
.home-principle:nth-child(3){--p-rgb:166,132,166}
.home-principle::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(var(--p-rgb),.5),transparent);
}
.home-principle span{
  display:block;
  margin-bottom:17px;
  font:900 .52rem var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgb(var(--p-rgb));
}
.home-principle strong{
  display:block;
  max-width:390px;
  font:700 clamp(1.5rem,2.1vw,2.15rem)/1.02 var(--serif);
  color:#f7f2e8;
}
.home-principle p{
  max-width:390px;
  margin:12px 0 0;
  font-size:.84rem;
  line-height:1.55;
  color:#9f998e;
}

/* SYSTEM DOORS // keep the strong tint treatment, tighten the editorial rhythm. */
.doors{padding-top:74px}
.doors-head{margin-bottom:38px}
.doors-head h2{max-width:940px}
.doors-head>p{max-width:760px;font-size:.96rem}
.door{isolation:isolate}
.door strong{max-width:390px}
.door p{max-width:410px}
.door .route{transition:color .18s,letter-spacing .18s,border-color .18s}
.door:hover .route{color:#fff;letter-spacing:.155em;border-color:rgba(210,168,79,.25)}

/* FINAL SIGNAL // less generic-agency, more direct Tanner. */
.last-signal{position:relative;overflow:hidden}
.last-signal::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(91,180,197,.28),rgba(210,168,79,.44),rgba(166,132,166,.28),transparent 88%);
}
.last-signal h2{max-width:980px}

@media(max-width:1120px){
  .home-principles{padding-top:12px;padding-bottom:64px}
}
@media(max-width:760px){
  .hero-copy .plain{padding-left:15px;margin-top:22px}
  .hero-copy .actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .hero-copy .primary,.hero-copy .secondary{min-width:0;width:100%;padding:14px 13px;font-size:.55rem}
  .home-principles{grid-template-columns:1fr;padding:0 18px 52px;gap:7px;border-top:0}
  .home-principle{min-height:0;padding:22px 23px 20px}
  .home-principle span{margin-bottom:10px}
  .home-principle strong{font-size:1.55rem}
  .home-principle p{margin-top:8px;font-size:.8rem}
  .doors{padding-top:54px}
  .door:hover .route{letter-spacing:.14em}
}
@media(max-width:430px){
  .hero-copy .actions{grid-template-columns:1fr}
  .hero-copy .primary,.hero-copy .secondary{font-size:.57rem}
  .home-principles{padding-left:14px;padding-right:14px}
  .home-principle{padding:20px 20px 18px}
}
@media(prefers-reduced-motion:reduce){
  .door:hover .route{letter-spacing:.14em}
}


/* REL 6.17.50 — hero CTA geometry lock */
.hero-copy .actions{align-items:stretch}
.hero-copy .actions .primary,.hero-copy .actions .secondary{flex:1 1 340px;min-width:0;min-height:58px;justify-content:space-between}
.hero-copy .actions .primary span,.hero-copy .actions .secondary span{flex:0 0 auto;font-size:1.1rem;line-height:1;color:#8b6928}
@media(max-width:760px){.hero-copy .actions .primary,.hero-copy .actions .secondary{flex-basis:100%;min-height:56px}}