/* Zibbo Version B — Brand + Modern Animations + Responsive */
body { background: radial-gradient(ellipse at 50% 0%,#7826AB 0%,#381252 55%,#240b38 100%) fixed; }

/* ── Gradient flow for CTA buttons ── */
@keyframes zb-grad-flow {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Shimmer for gradient headline text ── */
@keyframes zb-text-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.zb-grad-shine {
  background: linear-gradient(110deg,#FA2E05 0%,#C0299A 20%,#CF7AFF 50%,#C0299A 80%,#FA2E05 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: zb-text-shine 5s linear infinite;
}

/* ── Scroll reveal — spring easing ── */
.zb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.zb-reveal.zb-visible { opacity: 1; transform: none; }

/* Feat cards are inside overflow:hidden — opacity only to avoid clip */
.zb-feat.zb-reveal           { transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1); }
.zb-feat.zb-reveal.zb-visible { opacity: 1; }

/* Stagger delays */
.zb-stagger .zb-reveal:nth-child(1) { transition-delay: .04s; }
.zb-stagger .zb-reveal:nth-child(2) { transition-delay: .14s; }
.zb-stagger .zb-reveal:nth-child(3) { transition-delay: .24s; }
.zb-stagger .zb-reveal:nth-child(4) { transition-delay: .34s; }
.zb-stagger .zb-reveal:nth-child(5) { transition-delay: .44s; }
.zb-stagger .zb-reveal:nth-child(6) { transition-delay: .54s; }

/* ── CTA buttons — animated gradient + glow halo on hover ── */
.zb-cta-red {
  position: relative;
  z-index: 0;
  background: linear-gradient(270deg,#FA2E05,#C0299A,#CF7AFF,#C0299A,#FA2E05) !important;
  background-size: 300% 300% !important;
  animation: zb-grad-flow 5s ease infinite !important;
  transition: filter .15s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.zb-cta-red::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(270deg,#FA2E05,#C0299A,#CF7AFF,#C0299A,#FA2E05);
  background-size: 300%;
  animation: zb-grad-flow 5s ease infinite;
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  transition: opacity .35s ease;
}
.zb-cta-red:hover { filter: brightness(1.1) !important; transform: translateY(-2px); }
.zb-cta-red:hover::before { opacity: .55; }

.zb-cta-ghost { transition: background .15s ease, border-color .15s ease; }
.zb-cta-ghost:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(207,122,255,.38) !important; }

/* ── Nav links ── */
.zb-nav-link { transition: color .15s ease; }
.zb-nav-link:hover { color: #fff !important; }

/* ── Feature cards — spring hover + glow ── */
.zb-feat {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  cursor: default;
}
.zb-feat:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 60px -22px rgba(120,38,171,.45), inset 0 1px 0 rgba(207,122,255,.1);
}

/* Feature icon glow */
.zb-icon { transition: border-color .3s ease, box-shadow .3s ease; }
.zb-feat:hover .zb-icon {
  border-color: rgba(207,122,255,.6) !important;
  box-shadow: 0 0 26px rgba(207,122,255,.3) !important;
}

/* ── Review cards ── */
.zb-review { transition: border-color .25s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.zb-review:hover {
  border-color: rgba(207,122,255,.36) !important;
  transform: translateY(-5px);
  box-shadow: 0 30px 52px -20px rgba(0,0,0,.62), 0 0 0 1px rgba(207,122,255,.2);
}

/* ── Device / channel tiles ── */
.zb-ch-tile { transition: border-color .2s ease, background .2s ease; }
.zb-ch-tile:hover { border-color: rgba(207,122,255,.44) !important; background: rgba(120,38,171,.18) !important; }

/* ── FAQ ── */
.zb-faq-btn { transition: background .15s ease; }
.zb-faq-btn:hover { background: rgba(255,255,255,.04) !important; }

/* ─────────────── RESPONSIVE LAYOUT CLASSES ─────────────── */

.zb-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}

.zb-h1 {
  font-family: 'Kanit', sans-serif;
  font-weight: 900;
  font-size: 86px;
  line-height: .95;
  letter-spacing: -.025em;
  margin: 0 0 26px;
  color: #F2ECF8;
}

.zb-grid-feat {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  background: rgba(207,122,255,.08);
  border-radius: 11px;
  overflow: hidden;
}

.zb-grid-reviews {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.zb-grid-price {
  display: grid;
  grid-template-columns: 1fr .65fr;
  max-width: 820px;
  margin: 0 auto;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(207,122,255,.18);
}

.zb-grid-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.zb-grid-devices {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  gap: 8px;
}

.zb-grid-channels {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
  margin-top: 28px;
}

.zb-grid-footer {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

/* ─────────────── BREAKPOINTS ─────────────── */

/* Tablet — ≤1024px */
@media (max-width: 1024px) {
  .zb-h1              { font-size: 64px; }
  .zb-hero-grid       { gap: 36px; }
  .zb-grid-devices    { grid-template-columns: repeat(4,1fr); }
  .zb-grid-channels   { grid-template-columns: repeat(4,1fr); }
  .zb-grid-footer     { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* Mobile — ≤768px */
@media (max-width: 768px) {
  .zb-h1              { font-size: 46px; }
  .zb-hero-grid       { grid-template-columns: 1fr; gap: 28px; }
  .zb-hero-img        { max-width: 440px !important; margin: 0 auto; width: 100%; order: -1; }
  .zb-grid-feat       { grid-template-columns: 1fr; }
  .zb-grid-reviews    { grid-template-columns: 1fr; }
  .zb-grid-price      { grid-template-columns: 1fr; }
  .zb-grid-contact    { grid-template-columns: 1fr; gap: 24px; }
  .zb-grid-devices    { grid-template-columns: repeat(4,1fr); }
  .zb-grid-channels   { grid-template-columns: repeat(3,1fr); }
  .zb-grid-footer     { grid-template-columns: 1fr 1fr; }
  .zb-nav-links       { display: none !important; }
  .zb-nav-login       { display: none !important; }
}

/* Small mobile — ≤480px */
@media (max-width: 480px) {
  .zb-h1              { font-size: 38px; }
  .zb-grid-devices    { grid-template-columns: repeat(3,1fr); }
  .zb-grid-channels   { grid-template-columns: repeat(2,1fr); }
  .zb-grid-footer     { grid-template-columns: 1fr; }
}