/* =========================================
   Main Styles (from index.php head)
   ========================================= */
/* ===== Grid halus ===== */
:root{ --bg-grid: radial-gradient(circle at 1px 1px, rgba(0,0,0,.06) 1px, transparent 0) 0 0/24px 24px; }
.dark:root{ --bg-grid: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0/24px 24px; }
.bg-grid { background: var(--bg-grid); }

/* ===== Glass ===== */
.glass { backdrop-filter: blur(8px); }
.dark .glass { background: linear-gradient(180deg, rgba(22,22,22,.85), rgba(22,22,22,.65)); border: 1px solid rgba(255,255,255,.06); }
.light .glass { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); border: 1px solid rgba(0,0,0,.06); }

/* ===== Reveal ===== */
/* Default: Visible (Safe Fallback) */
.reveal { opacity:1; transform:none; transition:.6s ease; }
/* When JS is active, hide initially to allow animation */
body.js-active .reveal { opacity:0; transform:translateY(18px); }
body.js-active .reveal.active { opacity:1; transform:none; }

/* ===== Slider helpers ===== */
.ex-viewport{overflow:hidden;position:relative}
.ex-track{display:flex;transition:transform .45s ease;will-change:transform}
.ex-card{width:100%;padding:0 .5rem;box-sizing:border-box}

.slider-container{overflow:hidden;position:relative}
.slider-wrapper{display:flex;transition:transform .45s ease-in-out;will-change:transform}
.slide{padding:0 .75rem}

/* ===== Hero stack ===== */
.hero-stack{position:relative;border-radius:1rem;overflow:hidden}
.hero-stack img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 600ms ease;
  transform-origin:center center;
  will-change: transform, opacity;
}
.hero-stack img.active{opacity:1}

/* Kenburns */
@keyframes kenburns {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.2) translate(3%,3%); }
}

.price-strike{text-decoration:line-through;opacity:.6}
.pulse-big{animation:pulseBig 1.4s ease-in-out infinite}
@keyframes pulseBig{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

.wow-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:9999px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-weight:800}

/* ===== Scoped CSS – Logo ===== */
:root{ --bhub-orange:#ff9900; --bhub-black:#000; --bhub-white:#fff; }

.bhub-logo{
  display:inline-flex; align-items:center;
  font-family:Poppins,Inter,system-ui,sans-serif; font-weight:800; line-height:1;
  font-size:clamp(18px,2.1vw,28px); user-select:none;
  gap:.25em;
}
.bhub-logo span{
  display:inline-block; padding:.18em .48em .26em .48em; border-radius:.35em;
}

.bhub-logo span:first-child,
.bhub-badge span:first-child{
  background: transparent; color: inherit;
}
.light .bhub-logo span:first-child,
.light .bhub-badge span:first-child{
  background:#000; color:#fff;
}
.bhub-logo span:last-child{ background:var(--bhub-orange); color:var(--bhub-black); }

.bhub-badge{
  display:inline-flex; align-items:center; gap:.25em;
  font-family:Poppins,Inter,system-ui,sans-serif; font-weight:800; line-height:1;
  font-size:clamp(10px,1.1vw,13px);
}
.bhub-badge span{ display:inline-block; padding:.12em .38em .2em .38em; border-radius:.3em; }
.bhub-badge span:last-child{ background:var(--bhub-orange); color:var(--bhub-black); }

.bhub-logo [contenteditable="true"], .bhub-badge [contenteditable="true"]{ outline:none; }
.bhub-logo [contenteditable="true"]:focus, .bhub-badge [contenteditable="true"]:focus{
  box-shadow:0 0 0 2px rgba(255,153,0,.35); border-radius:.35em;
}

/* ===== Navbar Logo (Small Intro Version) ===== */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: Inter, Poppins, system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 24px; /* Base size */
  line-height: 1;
  text-decoration: none;
}

.nav-logo__text {
  color: #1e293b; /* Slate-800 */
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.dark .nav-logo__text {
  color: #fff;
}

.nav-logo__box {
  background-color: #ff9900;
  color: #000;
  padding: 0.06em 0.28em 0.14em; /* Match intro proportions */
  border-radius: 0.2em;
  box-shadow: 0 0 0 rgba(255, 153, 0, 0);
  transition: transform 0.3s ease;
}

.nav-logo:hover .nav-logo__box {
  transform: scale(1.05);
}

/* =========================================
   Intro Styles (from index.php body)
   ========================================= */
#Intro { --ph-orange:#ff9900; --bg:#0f0f0f; --txt:#e8e8e8; --muted:#2a2a2a; --shade:rgba(0,0,0,.45); }
#Intro, #Intro * { box-sizing: border-box; }
body.intro--lock { overflow:hidden; }

#Intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--bg); color: var(--txt);
  font-family: Inter, Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  isolation: isolate;
  transition: opacity .6s ease, visibility .6s step-end;
}
#Intro[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }

.intro__stage {
  position: relative; width: min(92vw, 900px); height: min(54vh, 420px);
  display: grid; place-items: center; overflow: hidden;
}

.intro__stage::before {
  content: ""; position: absolute; inset: -15%;
  background: radial-gradient(1200px 280px at 50% 120%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
  mix-blend-mode: screen; opacity: .55; pointer-events: none;
}

.intro__logo {
  position: relative; display: inline-flex; gap: .48rem; align-items: center;
  transform: translateZ(0);
}
.intro__brosur, .intro__hub {
  display: inline-block; line-height: 1; text-transform: uppercase; font-weight: 900;
  font-size: clamp(40px, 8vw, 110px);
  text-shadow: 0 0 0 transparent;
  will-change: transform, opacity, filter;
}
.intro__brosur { color: #fff; letter-spacing: .5px; opacity: 0; transform: translateX(-60vw); }
.intro__hub {
  color: #000; background: var(--ph-orange); padding: .06em .28em .14em; border-radius: .3rem;
  box-shadow: 0 0 0 rgba(255, 153, 0, 0);
  opacity: 0; transform: translateX(60vw) scale(.9);
}

.intro__loading {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); display: flex; gap: .35rem;
  align-items: baseline; font-weight: 700; opacity: 0;
}
.intro__loading span { font-size: clamp(14px, 2.6vw, 18px); letter-spacing: .3px; color: #dcdcdc; }
.intro__loading .dots { width: 2.4ch; display: inline-block; text-align: left; font-size: clamp(14px, 2.6vw, 18px); }
.intro__loading .dots::after { content: "…"; animation: intro-dots 1.2s steps(4, end) infinite; }

.intro__ui { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 8px; }

.intro__btn {
  appearance: none; border: 0; border-radius: 999px; padding: 20px 40px; cursor: pointer;
  background: linear-gradient(45deg, #ff9900, #e65c00);
  color: #fff; font-weight: 600; font-size: 18px;
  box-shadow: 0 6px 20px var(--shade);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative; text-transform: uppercase; letter-spacing: 1px;
}
.intro__btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7), 0 0 25px 5px rgba(255, 153, 0, 0.6);
  background: linear-gradient(45deg, #ff9900, #ff5722);
  filter: invert(1);
}
.intro__btn:active { transform: scale(1.05); animation: pulseEffect 0.8s ease-out; }
@keyframes pulseEffect { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

.spotlight {
  position: absolute; top: 50%; left: 50%; width: 200px; height: 200px;
  background: rgba(255, 255, 255, 0.8); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spotlightAnimation 2s ease-out forwards;
}
@keyframes spotlightAnimation { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

@keyframes intro-in-left { from { opacity: 0; transform: translateX(-60vw) } 70% { opacity: 1 } to { opacity: 1; transform: translateX(0) } }
@keyframes intro-in-right { from { opacity: 0; transform: translateX(60vw) scale(.9) } 70% { opacity: 1 } to { opacity: 1; transform: translateX(0) scale(1) } }
@keyframes intro-collision { 0% { transform: scale(1) } 35% { transform: scale(1.07) } 60% { transform: scale(.98) } 100% { transform: scale(1) } }
@keyframes intro-glow { 0% { box-shadow: 0 0 0 rgba(255, 153, 0, 0) } 50% { box-shadow: 0 10px 36px rgba(255, 153, 0, .42) } 100% { box-shadow: 0 6px 24px rgba(255, 153, 0, .32) } }
@keyframes intro-dots { 0% { content: "" } 25% { content: "." } 50% { content: ".." } 75% { content: "..." } 100% { content: "…" } }
@keyframes intro-fade { to { opacity: 0; visibility: hidden } }

@media (prefers-reduced-motion: reduce) {
  .intro__brosur, .intro__hub, .intro__loading, #Intro { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}