/* ============================================================
   Premium hero redesign (storefront home) — Aster
   Category browsing lives in the nav bar, so the hero drops the
   sidebar and becomes a thesis hero: headline + CTAs + trust,
   with the admin banner slider (or a designed device fallback).
   Scoped under .rb-hero. Light + dark.
   ============================================================ */
.rb-hero{
  --rb-accent: var(--bs-primary, #0d6efd);
  --rb-accent-deep: color-mix(in srgb, var(--rb-accent) 78%, #000);
  --rb-ink: #0F1720;
  --rb-ink-2: #33424C;
  --rb-muted: #667085;
  --rb-line: #E7EBEF;
  --rb-surface: #ffffff;
  --rb-surface-2: #F3F5F7;
  --rb-soft: color-mix(in srgb, var(--rb-accent) 9%, #ffffff);
  --rb-gold: #C9871F;
  --rb-gold-soft: color-mix(in srgb, #C9871F 12%, #fff);
  --rb-grade: #159C6B;
  --rb-shadow: 0 26px 54px -28px rgba(16,30,40,.26), 0 10px 24px -14px rgba(16,30,40,.12);
  --rb-shadow-sm: 0 8px 20px -12px rgba(16,30,40,.20);
  --rb-r: 16px;
  --rb-mono: ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  padding: 10px 0 8px;
  margin-top: 0;
}
.banner.rb-hero{ margin-top: 0 !important; padding-top: 10px !important; }
[theme="dark"] .rb-hero, [theme="theme-dark"] .rb-hero{
  --rb-ink:#E9EEF2; --rb-ink-2:#B7C2CB; --rb-muted:#8A99A2;
  --rb-line:#29333e; --rb-surface:#171f28; --rb-surface-2:#1b242e;
  --rb-soft: color-mix(in srgb, var(--rb-accent) 20%, #171f28);
  --rb-gold:#E6AE52; --rb-gold-soft: color-mix(in srgb,#E6AE52 16%,#171f28);
  --rb-grade:#31C08A;
  --rb-shadow: 0 26px 54px -28px rgba(0,0,0,.7), 0 10px 24px -14px rgba(0,0,0,.5);
  --rb-shadow-sm: 0 8px 20px -12px rgba(0,0,0,.55);
}

/* ---------- hero band ---------- */
.rb-hero .rb-hero-band{
  display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center;
  background:var(--rb-surface); border:1px solid var(--rb-line); border-radius:26px;
  padding:44px; box-shadow:var(--rb-shadow); position:relative; overflow:hidden;
}
.rb-hero .rb-hero-band::before{
  content:""; position:absolute; inset:-40% -12% auto auto; width:56%; height:130%;
  background:radial-gradient(50% 50% at 72% 30%, var(--rb-soft), transparent 70%); pointer-events:none;
}
.rb-hero .rb-hero-copy{ position:relative; z-index:2; }
.rb-hero .rb-eyebrow{
  display:inline-block; font-family:var(--rb-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:11.5px; font-weight:600; color:var(--rb-accent-deep);
  background:var(--rb-gold-soft); color:var(--rb-gold);
  padding:7px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--rb-gold) 28%,transparent);
  margin-bottom:18px;
}
.rb-hero h1{
  font-size:clamp(34px,4.6vw,54px); line-height:1.03; letter-spacing:-.025em; font-weight:800;
  color:var(--rb-ink); margin:0;
}
.rb-hero h1 .rb-ren{ color:var(--rb-accent-deep); }
.rb-hero .rb-lede{ font-size:17px; line-height:1.6; color:var(--rb-ink-2); max-width:48ch; margin:18px 0 26px; }
.rb-hero .rb-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.rb-hero .rb-btn{
  display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border-radius:13px;
  font-weight:640; font-size:15px; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.rb-hero .rb-btn:active{ transform:translateY(1px); }
.rb-hero .rb-btn-primary{ background:var(--rb-accent); color:#fff; box-shadow:var(--rb-shadow-sm); }
.rb-hero .rb-btn-primary:hover{ background:var(--rb-accent-deep); color:#fff; box-shadow:var(--rb-shadow); }
.rb-hero .rb-btn-ghost{ background:transparent; color:var(--rb-ink); border-color:var(--rb-line); }
.rb-hero .rb-btn-ghost:hover{ border-color:var(--rb-accent); color:var(--rb-accent-deep); }
.rb-hero .rb-trust-inline{
  list-style:none; margin:26px 0 0; padding:0; display:flex; gap:22px; flex-wrap:wrap;
}
.rb-hero .rb-trust-inline li{
  position:relative; padding-left:24px; font-size:13.5px; font-weight:560; color:var(--rb-ink-2);
}
.rb-hero .rb-trust-inline li::before{
  content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--rb-accent); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;
}

/* ---------- hero visual: banner slider ---------- */
.rb-hero .rb-hero-visual{ position:relative; z-index:2; }
.rb-hero .rb-hero-slider{ border-radius:var(--rb-r) !important; box-shadow:var(--rb-shadow-sm) !important; overflow:hidden; }
.rb-hero .rb-hero-slider img{ border-radius:var(--rb-r) !important; width:100%; object-fit:cover; }

/* ---------- hero visual: video ---------- */
.rb-hero .rb-hero-media{ position:relative; aspect-ratio:4/3.1; border-radius:22px; overflow:hidden;
  border:1px solid var(--rb-line); box-shadow:var(--rb-shadow); background:#0e1626; }
.rb-hero .rb-hero-video{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.rb-hero .rb-grade--onmedia{ z-index:4; }

/* ---------- hero visual: designed device fallback ---------- */
.rb-hero .rb-device{
  position:relative; aspect-ratio:4/3.1; border-radius:22px;
  background:linear-gradient(160deg,var(--rb-surface),var(--rb-surface-2));
  border:1px solid var(--rb-line); box-shadow:var(--rb-shadow); display:grid; place-items:center; overflow:hidden;
}
.rb-hero .rb-device::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 30% 0%, color-mix(in srgb,var(--rb-accent) 9%,transparent), transparent 60%); }
.rb-hero .rb-laptop{ width:64%; position:relative; z-index:2; filter:drop-shadow(0 20px 30px rgba(0,0,0,.22)); }
.rb-hero .rb-screen{ height:0; padding-bottom:62%; border:2px solid color-mix(in srgb,var(--rb-line) 60%,#8a97a3);
  border-radius:12px 12px 3px 3px; background:linear-gradient(145deg,#0e1626,#16233b); position:relative; overflow:hidden; }
.rb-hero .rb-screen .rb-glow{ position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 120%, color-mix(in srgb,var(--rb-accent) 55%,transparent), transparent 60%); }
.rb-hero .rb-screen i{ position:absolute; height:6px; border-radius:4px; background:rgba(255,255,255,.16); left:12%; }
.rb-hero .rb-screen i:nth-child(2){ top:20%; width:60%; background:var(--rb-accent); }
.rb-hero .rb-screen i:nth-child(3){ top:34%; width:82%; }
.rb-hero .rb-screen i:nth-child(4){ top:48%; width:70%; }
.rb-hero .rb-screen i:nth-child(5){ top:62%; width:48%; }
.rb-hero .rb-base{ height:10px; margin:0 -12%; border-radius:0 0 10px 10px;
  background:linear-gradient(color-mix(in srgb,var(--rb-line) 60%,#8a97a3), var(--rb-surface-2));
  border:2px solid color-mix(in srgb,var(--rb-line) 60%,#8a97a3); border-top:0; }
.rb-hero .rb-grade{ position:absolute; left:18px; bottom:18px; z-index:3; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px; background:var(--rb-surface); border:1px solid var(--rb-line); box-shadow:var(--rb-shadow-sm); }
.rb-hero .rb-grade b{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  font:800 17px/1 var(--bs-body-font-family,inherit);
  background:linear-gradient(150deg,var(--rb-grade), color-mix(in srgb,var(--rb-grade) 60%,#000)); }
.rb-hero .rb-grade small{ display:block; color:var(--rb-muted); font:600 10.5px/1.3 var(--rb-mono); text-transform:uppercase; letter-spacing:.1em; }
.rb-hero .rb-grade strong{ font-size:14px; color:var(--rb-ink); }
.rb-hero .rb-specchip{ position:absolute; right:16px; top:16px; z-index:3; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:62%; }
.rb-hero .rb-specchip span{ font:600 11px/1 var(--rb-mono); color:var(--rb-ink-2); background:var(--rb-surface);
  border:1px solid var(--rb-line); padding:6px 9px; border-radius:8px; box-shadow:var(--rb-shadow-sm); }

/* ---------- trust strip ---------- */
.rb-hero .rb-trust-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--rb-surface); border:1px solid var(--rb-line); border-radius:var(--rb-r);
  margin-top:16px; box-shadow:var(--rb-shadow-sm); overflow:hidden;
}
.rb-hero .rb-trust-cell{ display:flex; align-items:center; gap:13px; padding:20px 22px; }
.rb-hero .rb-trust-cell + .rb-trust-cell{ border-left:1px solid var(--rb-line); }
.rb-hero .rb-trust-cell .rb-ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--rb-soft); color:var(--rb-accent-deep); }
.rb-hero .rb-trust-cell h4{ font-size:15px; font-weight:700; margin:0; color:var(--rb-ink); }
.rb-hero .rb-trust-cell p{ font-size:12.5px; color:var(--rb-muted); margin:2px 0 0; }

/* ---------- optional side banners ---------- */
.rb-hero .rb-hero-secondary{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px; }
.rb-hero .rb-sidebanner{ display:block; border-radius:var(--rb-r); overflow:hidden; box-shadow:var(--rb-shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease; }
.rb-hero .rb-sidebanner:hover{ transform:translateY(-3px); box-shadow:var(--rb-shadow); }
.rb-hero .rb-sidebanner img{ border-radius:var(--rb-r); display:block; }

/* ---------- responsive ---------- */
@media (max-width:991px){
  .rb-hero .rb-hero-band{ grid-template-columns:1fr; gap:28px; padding:28px; }
  .rb-hero .rb-hero-visual{ max-width:560px; }
  .rb-hero .rb-trust-strip{ grid-template-columns:1fr 1fr; }
  .rb-hero .rb-trust-cell:nth-child(3){ border-left:0; }
  .rb-hero .rb-trust-cell:nth-child(n+3){ border-top:1px solid var(--rb-line); }
}
@media (max-width:575px){
  .rb-hero .rb-hero-band{ padding:22px; border-radius:20px; }
  .rb-hero .rb-trust-strip{ grid-template-columns:1fr; }
  .rb-hero .rb-trust-cell + .rb-trust-cell{ border-left:0; border-top:1px solid var(--rb-line); }
  .rb-hero .rb-hero-secondary{ grid-template-columns:1fr; }
  .rb-hero .rb-cta .rb-btn{ flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .rb-hero *{ transition:none !important; } }