/*
FILENAME: home.css
FILEPATH: /css/home.css
DESCRIPTION: Home-specific styling for hero layout and premium panels.
*/
.hero-home .hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-home .hero-grid{ grid-template-columns: 1fr; }
}

.hero-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 16px; }
.hero-trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .hero-trust{ grid-template-columns: 1fr; }
}

.trust-item{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.trust-kicker{
  display:block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
}
.trust-value{
  display:block;
  font-weight: 700;
  color: rgba(255,255,255,0.86);
}

.hero-panel{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  padding: 12px;
  position:relative;
  overflow:hidden;
}
.panel-surface{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  padding: 14px;
  height:100%;
  display:flex;
  flex-direction:column;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}
.dot-row{ display:flex; gap: 6px; }
.dot{
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.10);
}
.panel-title{ font-weight: 800; color: rgba(255,255,255,0.84); }

.panel-body{ display:grid; gap: 12px; }
.metric{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.metric-label{ color: rgba(255,255,255,0.62); font-weight: 700; }
.metric-value{ color: rgba(255,255,255,0.88); font-weight: 800; }

.code-strip{
  margin-top: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(400px 120px at 20% 0%, rgba(57,213,255,0.16), transparent 60%),
    radial-gradient(420px 120px at 80% 0%, rgba(122,92,255,0.14), transparent 62%),
    rgba(255,255,255,0.03);
}
.code-line{
  height: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  margin: 10px 0;
}
.code-line.w-80{ width: 80%; }
.code-line.w-60{ width: 60%; }
.code-line.w-90{ width: 90%; }
.code-line.w-50{ width: 50%; }

.panel-foot{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.feature{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  align-items:stretch;
}
@media (max-width: 980px){ .feature{ grid-template-columns: 1fr; } }

.feature-panel{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 16px;
}
.mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mini-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 12px;
}
.mini-label{ display:block; color: rgba(255,255,255,0.60); font-weight: 700; margin-bottom: 8px; }
.mini-value{ display:block; color: rgba(255,255,255,0.88); font-weight: 900; }