/* ═══════════════════════════════════════════════════════════════
   SUMMIT MIND 2026 — Premium Design Layer
   Loads after app.css + home-redesign.css (highest specificity)
   Philosophy: Stripe clarity · Vercel precision · Linear motion
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --p-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --p-ink:    #071421;
  --p-ink-70: rgba(7,20,33,.70);
  --p-ink-50: rgba(7,20,33,.50);
  --p-ink-30: rgba(7,20,33,.30);
  --p-ink-12: rgba(7,20,33,.12);
  --p-ink-06: rgba(7,20,33,.06);
  --p-ink-03: rgba(7,20,33,.03);

  --p-s1: 0 1px 2px rgba(7,20,33,.05);
  --p-s2: 0 2px 8px rgba(7,20,33,.08), 0 1px 3px rgba(7,20,33,.04);
  --p-s3: 0 6px 20px rgba(7,20,33,.10), 0 2px 8px rgba(7,20,33,.04);
  --p-s4: 0 16px 48px rgba(7,20,33,.12), 0 4px 16px rgba(7,20,33,.05);
  --p-s5: 0 32px 80px rgba(7,20,33,.14), 0 8px 24px rgba(7,20,33,.06);
  --p-s-glow: 0 8px 32px rgba(0,198,255,.18), 0 2px 8px rgba(0,198,255,.10);

  --p-r0: 4px;   --p-r1: 8px;   --p-r2: 12px;
  --p-r3: 16px;  --p-r4: 20px;  --p-r5: 28px;
}

/* ─── 1. GLOBAL POLISH ─────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(0,169,214,.20);
  color: #071421;
}

:focus-visible {
  outline: 2px solid #00A9D6;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── 2. SVG FLOW LINE (re-enable + style) ─────────────────── */
/*
  The .site-accent-line is hidden in home-redesign.css line 23.
  We re-enable it here (this file loads last).
  js/premium.js sets strokeDasharray before animations.js
  registers the GSAP ScrollTrigger animation.
*/
.site-accent-line {
  display: block !important;
  position: fixed !important;
  left: clamp(6px, 1.2vw, 18px) !important;
  top: 0 !important;
  width: clamp(32px, 3.5vw, 56px) !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 50 !important;
  overflow: visible !important;
  opacity: .50 !important;
  transition: opacity .4s ease !important;
}

.site-accent-line path {
  stroke: url(#siteAccentGradient) !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Hide on mobile — too cramped */
@media (max-width: 767px) {
  .site-accent-line { display: none !important; }
}

/* ─── 3. SCROLL REVEAL SYSTEM ──────────────────────────────── */
[data-reveal] {
  will-change: opacity, transform, filter;
  transition:
    opacity  .75s var(--p-ease),
    transform .75s var(--p-ease),
    filter    .6s var(--p-ease);
}
[data-reveal]:not(.is-visible) {
  opacity: 0;
}
[data-reveal="up"]:not(.is-visible)    { transform: translateY(36px); }
[data-reveal="left"]:not(.is-visible)  { transform: translateX(-32px); }
[data-reveal="right"]:not(.is-visible) { transform: translateX(32px); }
[data-reveal="scale"]:not(.is-visible) { transform: scale(.93) translateY(14px); }
[data-reveal="blur"]:not(.is-visible)  { transform: translateY(20px); filter: blur(5px); }

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  .6s var(--p-ease),
    transform .6s var(--p-ease);
}
[data-stagger] > :nth-child(1) { transition-delay:  60ms; }
[data-stagger] > :nth-child(2) { transition-delay: 120ms; }
[data-stagger] > :nth-child(3) { transition-delay: 180ms; }
[data-stagger] > :nth-child(4) { transition-delay: 240ms; }
[data-stagger] > :nth-child(5) { transition-delay: 300ms; }
[data-stagger] > :nth-child(6) { transition-delay: 360ms; }
[data-stagger] > :nth-child(7) { transition-delay: 420ms; }
[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ─── 4. NAV ───────────────────────────────────────────────── */
.nav {
  transition:
    background .4s ease,
    box-shadow .4s ease,
    border-color .4s ease !important;
}

/* ─── 5. HERO ──────────────────────────────────────────────── */
/* Lifted CTA buttons */
.btn--primary,
.hero__btn-primary,
.nav__btn--filled {
  transition:
    transform .25s var(--p-ease),
    box-shadow .25s ease !important;
}
.btn--primary:hover,
.hero__btn-primary:hover,
.nav__btn--filled:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(7,20,33,.22) !important;
}

/* Meta pills */
.hero__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.hero__meta-item,
.hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 15px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.92) !important;
  transition: background .2s ease, transform .22s var(--p-ease-back) !important;
}
.hero__meta-item:hover,
.hero__badge:hover {
  background: rgba(255,255,255,.24) !important;
  transform: translateY(-2px) !important;
}

/* ─── 6. EJES CARDS ────────────────────────────────────────── */
.eje-card-unsa {
  transition:
    transform .4s var(--p-ease),
    box-shadow .4s ease !important;
  will-change: transform !important;
}
.eje-card-unsa:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--p-s5) !important;
}
.card-img-bg {
  transition: transform .55s var(--p-ease) !important;
}
.eje-card-unsa:hover .card-img-bg {
  transform: scale(1.055) !important;
}

.subtopic-chip {
  cursor: default !important;
  transition: all .22s var(--p-ease-back) !important;
}
.subtopic-chip:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

/* ─── 7. SPEAKERS ──────────────────────────────────────────── */
.speaker-card {
  transition: transform .4s var(--p-ease) !important;
}
.speaker-card:hover {
  transform: translateY(-6px) !important;
}

/* ─── 8. INNOVA HUB — PREMIUM REDESIGN ────────────────────── */
.innovation-hub {
  background: linear-gradient(180deg, #F4FAFF 0%, #FFFFFF 100%) !important;
}

/* Two-column: tabs | featured card */
.innovahub__layout {
  display: grid !important;
  grid-template-columns: minmax(300px, 2fr) minmax(320px, 3fr) !important;
  gap: clamp(24px, 4vw, 52px) !important;
  align-items: start !important;
}

/* Left column header + list */
.innovahub__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ── Section tag ── */
.innovahub__tag {
  color: #1E63FF !important;
  border-color: rgba(30,99,255,.18) !important;
  background: rgba(30,99,255,.05) !important;
}

/* ── Section heading ── */
.innovahub__title {
  font-family: 'Clash Display', 'Montserrat', sans-serif !important;
  font-size: clamp(28px, 3.4vw, 50px) !important;
  font-weight: 800 !important;
  color: var(--p-ink) !important;
  line-height: 1.08 !important;
  margin: 10px 0 14px !important;
}
.innovahub__title span {
  background: linear-gradient(135deg, #00C1D4 0%, #00E676 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Lead text ── */
.innovahub__lead {
  font-size: clamp(14px, 1.05vw, 16px) !important;
  color: var(--p-ink-70) !important;
  line-height: 1.68 !important;
  max-width: 460px !important;
  margin-bottom: 22px !important;
}

/* ── List container ── */
.innovahub__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* ── Tab items: event buttons ── */
.innovahub__item {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  gap: 0 13px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--p-ink-12) !important;
  border-radius: var(--p-r3) !important;
  box-shadow: var(--p-s1) !important;
  cursor: pointer !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform   .28s var(--p-ease),
    border-color .28s ease,
    box-shadow  .28s ease,
    background  .28s ease !important;
}

/* Color accent bar — left edge */
.innovahub__item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--event-color, #00C1D4) !important;
  opacity: 0 !important;
  border-radius: 0 3px 3px 0 !important;
  transition: opacity .22s ease !important;
}

/* Background tint on hover/active */
.innovahub__item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--event-color, #00C1D4) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  z-index: 0 !important;
}

.innovahub__item:hover,
.innovahub__item.active {
  border-color: var(--event-color, #00C1D4) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.07) !important;
  transform: translateX(5px) !important;
}
.innovahub__item:hover::before,
.innovahub__item.active::before { opacity: 1 !important; }
.innovahub__item:hover::after { opacity: .05 !important; }
.innovahub__item.active::after { opacity: .07 !important; }

/* Icon */
.innovahub__icon {
  position: relative !important;
  z-index: 1 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--p-r1) !important;
  background: rgba(0,193,212,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--event-color, #00C1D4) !important;
  flex-shrink: 0 !important;
  transition: background .25s ease !important;
}
.innovahub__icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}
.innovahub__item:hover .innovahub__icon,
.innovahub__item.active .innovahub__icon {
  background: rgba(0,193,212,.18) !important;
}

/* Number badge — hide */
.innovahub__num { display: none !important; }

/* Copy text */
.innovahub__copy {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.innovahub__copy strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--p-ink) !important;
  line-height: 1.2 !important;
}
.innovahub__copy small {
  font-size: 12px !important;
  color: var(--p-ink-50) !important;
  line-height: 1.4 !important;
}

/* Active line — hide */
.innovahub__active-line { display: none !important; }

/* ── Featured panel card ── */
.innovahub__panel {
  background: #FFFFFF !important;
  border: 1px solid var(--p-ink-12) !important;
  border-radius: var(--p-r5) !important;
  box-shadow: var(--p-s4) !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: box-shadow .4s ease !important;
}
.innovahub__panel:hover {
  box-shadow: var(--p-s5) !important;
}

/* Image area */
.innovahub__panel-img-wrapper {
  position: relative !important;
  height: clamp(150px, 22vh, 250px) !important;
  overflow: hidden !important;
}

/* Dynamic color gradient bg (uses --active-color set by JS per event).
   Fallback first, then progressive enhancement with color-mix. */
.innovahub__panel-img {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(0,193,212,.20), rgba(0,193,212,.06)) !important;
  transition: transform .6s var(--p-ease), background .4s ease !important;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .innovahub__panel-img {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--active-color, #00C1D4) 22%, #FFFFFF) 0%,
      color-mix(in srgb, var(--active-color, #00C1D4)  8%, #FFFFFF) 100%
    ) !important;
  }
}
.innovahub__panel:hover .innovahub__panel-img {
  transform: scale(1.04) !important;
}

/* Floating badge */
.innovahub__badge {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  background: rgba(255,255,255,.94) !important;
  border-radius: var(--p-r2) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--p-s3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--p-ink) !important;
}
.innovahub__badge > span {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--p-r0) !important;
  background: linear-gradient(135deg, #00C1D4, #00E676) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.innovahub__badge svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

/* Panel body */
.innovahub__panel-content {
  padding: clamp(20px, 3vw, 30px) !important;
}

.innovahub__eyebrow {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: var(--active-color, #00C1D4) !important;
  margin-bottom: 6px !important;
}

.innovahub__panel-title {
  font-family: 'Clash Display', 'Montserrat', sans-serif !important;
  font-size: clamp(20px, 2.2vw, 30px) !important;
  font-weight: 800 !important;
  color: var(--p-ink) !important;
  margin: 0 0 12px !important;
  line-height: 1.10 !important;
}

/* Content grid inside panel */
.innovahub__content-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.innovahub__panel-desc {
  font-size: clamp(13px, .95vw, 15px) !important;
  color: var(--p-ink-70) !important;
  line-height: 1.68 !important;
}

/* Meta chips: date, time, place */
.innovahub__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 0 !important;
}
.innovahub__meta > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 11px !important;
  background: rgba(7,20,33,.04) !important;
  border: 1px solid var(--p-ink-12) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--p-ink-70) !important;
}
.innovahub__meta > span svg {
  width: 13px !important;
  height: 13px !important;
  fill: var(--active-color, #00C1D4) !important;
  flex-shrink: 0 !important;
}

/* Stats row */
.innovahub__stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 14px !important;
}
.innovahub__stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  background: rgba(0,193,212,.06) !important;
  border-radius: var(--p-r2) !important;
  flex: 1 1 72px !important;
  min-width: 72px !important;
  transition: background .25s ease !important;
}
.innovahub__stat:hover {
  background: rgba(0,193,212,.12) !important;
}
.innovahub__stat-value {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--p-ink) !important;
  line-height: 1 !important;
  font-family: 'Clash Display', 'Montserrat', sans-serif !important;
}
.innovahub__stat-label {
  font-size: 10px !important;
  color: var(--p-ink-50) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Tags */
.innovahub__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 12px !important;
}
.innovahub__tags > span {
  padding: 4px 10px !important;
  background: rgba(0,193,212,.08) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #007B8E !important;
  letter-spacing: .02em !important;
}

/* ─── 9. AGENDA ────────────────────────────────────────────── */
/* Agenda is already light (#F8FFFE from home-redesign.css).
   Just add hover lift to activity cards. */
[class*="activity"],
.agenda__step,
.agenda__session {
  transition: transform .3s var(--p-ease), box-shadow .3s ease !important;
}
[class*="activity"]:hover,
.agenda__step:hover,
.agenda__session:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--p-s3) !important;
}

/* ─── 10. PRICING CARDS ────────────────────────────────────── */
.pass-selector__card,
.pass-card,
[class*="pass-card"] {
  transition:
    transform   .35s var(--p-ease),
    box-shadow  .35s ease !important;
  cursor: pointer !important;
}
.pass-selector__card:hover,
.pass-card:hover,
[class*="pass-card"]:hover {
  transform: translateY(-7px) scale(1.015) !important;
  box-shadow: var(--p-s4) !important;
}

/* Primary action button */
.passes__primary,
.passes__btn--primary {
  transition: transform .25s var(--p-ease), box-shadow .25s ease !important;
}
.passes__primary:not(:disabled):hover,
.passes__btn--primary:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--p-s-glow) !important;
}

/* ─── 11. ALIANZAS ─────────────────────────────────────────── */
.alliance-logo-card {
  transition:
    transform .30s var(--p-ease),
    box-shadow .30s ease !important;
  border-radius: var(--p-r2) !important;
}
.alliance-logo-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--p-s3) !important;
}

/* Sponsors-soon block improvements */
.alliance-sponsors-soon {
  border-radius: var(--p-r3) !important;
  transition: background .25s ease !important;
}
.alliance-sponsors-soon:hover {
  background: rgba(7,20,33,.04) !important;
}

/* ─── 12. ALLIANCE STATS hover ─────────────────────────────── */
.alliances__stat,
.alliances__number {
  transition: transform .28s var(--p-ease-back) !important;
}
.alliances__stat:hover,
.alliances__number:hover {
  transform: translateY(-3px) !important;
}

/* ─── 13. SECTION DIVIDERS ─────────────────────────────────── */
/* Re-enabled in home-redesign.css end block; add subtle pulse glow */
.section-divider::after {
  animation: dividerPulse 3s ease-in-out infinite !important;
}
@keyframes dividerPulse {
  0%, 100% { opacity: .7; }
  50%       { opacity: 1;  }
}

/* ─── 14. FLOATING HELPERS ─────────────────────────────────── */
@keyframes pmFloatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%      { transform: translateY(-14px) rotate(1.5deg); }
  70%      { transform: translateY(-7px) rotate(-.8deg); }
}
@keyframes pmFloatB {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
@keyframes pmFloatC {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.03); }
}
.pm-float-a { animation: pmFloatA 7s ease-in-out infinite; }
.pm-float-b { animation: pmFloatB 9s ease-in-out infinite; }
.pm-float-c { animation: pmFloatC 5.5s ease-in-out infinite; }

/* ─── 15. RESPONSIVE FIXES ─────────────────────────────────── */
@media (max-width: 1200px) {
  .innovahub__layout {
    grid-template-columns: 1fr 1.4fr !important;
    gap: clamp(20px, 3vw, 36px) !important;
  }
}

@media (max-width: 1024px) {
  .innovahub__layout {
    grid-template-columns: 1fr !important;
  }
  .innovahub__panel-img-wrapper {
    height: 200px !important;
  }
  .innovahub__lead {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .innovahub__panel {
    border-radius: var(--p-r4) !important;
  }
  .innovahub__item {
    padding: 11px 14px !important;
  }
  .innovahub__copy strong { font-size: 13px !important; }
  .innovahub__copy small  { font-size: 11px !important; }
  .innovahub__stat { flex: 1 1 60px; min-width: 60px; }
  .innovahub__stat-value { font-size: 17px !important; }
}

@media (max-width: 480px) {
  .innovahub__item {
    grid-template-columns: 36px 1fr !important;
    gap: 0 10px !important;
  }
  .innovahub__icon {
    width: 34px !important;
    height: 34px !important;
  }
}

/* ─── 16. TOUCH DEVICE OVERRIDES ───────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover lifts on touch — they stay "stuck" */
  .eje-card-unsa:hover,
  .speaker-card:hover,
  .innovahub__item:hover,
  .pass-selector__card:hover,
  .alliance-logo-card:hover {
    transform: none !important;
    box-shadow: var(--p-s1) !important;
  }
}

/* ─── 17. REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .eje-card-unsa,
  .speaker-card,
  .innovahub__item,
  .pass-selector__card,
  .alliance-logo-card,
  .btn--primary {
    transition: none !important;
  }
  .pm-float-a,
  .pm-float-b,
  .pm-float-c {
    animation: none !important;
  }
  .site-accent-line { display: none !important; }
  .section-divider::after { animation: none !important; }
}