*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg: #313338;
  --bg2: #313338;
  --surface: #404249;
  --r: #C62828;
  --r2: #E53935;
  --text: #f2f3f5;
  --text2: #b5bac1;
  --text3: #949ba4;
  --ff: 'Epilogue', sans-serif;
  --fm: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

body {
  font-family: var(--ff);
  background: #050508;
  color: #f2f3f5;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Cursor glow canvas is injected by JS on pages that need it */
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit
}

a {
  text-decoration: none;
  color: inherit
}

/* Hide native scrollbar for cinematic feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Loader animations removed - pure flat black background */
#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000000; /* Pure flat black */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .9s cubic-bezier(.4, 0, .0, 1), visibility .9s;
}

/* Calm liquid caustics for the Quote screen transition only */
#quote-screen::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at center, #1e1b38 0%, #0d0e1b 30%, #281a3a 60%, #08080c 100%);
  background-size: 200% 200%;
  filter: blur(25px) contrast(1.2);
  opacity: 0.8;
  animation: introLiquidBounce 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  z-index: -1;
  pointer-events: none;
}

@keyframes introLiquidBounce {
  0% { transform: scale(1) translate(0%, 0%) rotate(0deg); background-position: 0% 0%; }
  33% { transform: scale(1.1) translate(4%, -3%) rotate(3deg); background-position: 100% 50%; }
  66% { transform: scale(0.95) translate(-2%, 5%) rotate(-2deg); background-position: 50% 100%; }
  100% { transform: scale(1.05) translate(3%, 4%) rotate(2deg); background-position: 0% 0%; }
}



#loader.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

.loader-wrap {
  position: relative;
  width: clamp(320px, 70vw, 700px);
  height: clamp(140px, 30vw, 300px)
}

.loader-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

/* ═══════════════════════════════════════
   QUOTE SCREEN
   ═══════════════════════════════════════ */
#quote-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050508;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
  padding: 40px 24px;
  overflow: hidden;
}

#quote-screen.on {
  opacity: 1;
  visibility: visible
}

#quote-screen.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

.quote-container {
  max-width: 680px;
  text-align: center
}

.quote-line {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--r), var(--r2));
  margin: 0 auto 36px;
  border-radius: 2px;
  transition: width .7s var(--ease);
}

#quote-screen.on .quote-line {
  width: 48px
}

.quote-text {
  white-space: nowrap; /* Force the quote to never stack */
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: clamp(16px, 4.5vw, 54px); /* Scales much better horizontally to fit the full line */
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 16px;
  perspective: 800px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.quote-text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) rotateX(40deg);
  filter: blur(4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}

.quote-text .word.on {
  opacity: 1;
  transform: translateY(0) rotateX(0);
  filter: blur(0)
}

.quote-author {
  font-family: var(--fm);
  font-size: clamp(10px, 1.6vw, 13px);
  color: var(--text3);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.quote-author.on {
  opacity: 1;
  transform: translateY(0)
}

/* Enter Button 2026 Liquid UI */
.enter-btn {
  margin-top: 70px;
  padding: 22px 64px;
  border-radius: 100px;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 15px 50px rgba(0, 0, 0, .6);
  backdrop-filter: blur(30px) saturate(1.5);
  opacity: 0;
  transform: translateY(30px) scale(.92);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s, box-shadow 0.6s, letter-spacing 0.8s;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}

.enter-btn span {
  position: relative;
  z-index: 2;
  transition: all 0.4s;
}

.enter-btn svg {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 2;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s;
}

.enter-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #E53935, #EF5350, #FF9900);
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: all .5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  border-radius: 100px;
}

.enter-btn:hover {
  box-shadow: 0 25px 60px rgba(239, 83, 80, 0.4), inset 0 0 0 1px rgba(239, 83, 80, 0);
  transform: translateY(-6px) scale(1.04);
  letter-spacing: 0.38em;
}

.enter-btn:hover span {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.enter-btn:hover svg {
  transform: translateX(10px) rotate(-15deg);
  stroke: #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.enter-btn:hover::before {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.enter-btn:active {
  transform: translateY(0) scale(.97)
}

.enter-btn.on {
  opacity: 1;
  transform: translateY(0) scale(1)
}

/* ═══════════════════════════════════════
   BOTTOM BAR (MOBILE NAV OVERRIDE)
   ═══════════════════════════════════════ */
#mobilenav {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 1.5px 0 rgba(255, 255, 255, .06) inset, 0 -1px 0 rgba(0, 0, 0, .2) inset;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  opacity: 0;
}

#mobilenav.on {
  transform: translateX(-50%) translateY(0);
  opacity: 1
}

.mn-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  color: var(--text3);
  transition: background .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
  border: 1px solid transparent;
  position: relative;
}

.mn-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
  transition: stroke 0.3s, filter 0.3s, opacity 0.3s;
}

.mn-btn:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--text);
  transform: scale(1.08)
}

.mn-btn.on {
  background: rgba(255, 255, 255, .1);
  color: var(--text);
  border-color: rgba(255, 255, 255, .06)
}

/* Custom Colored Nav Icons */
/* Home — red */
.mn-btn[href*="index"], .mn-btn[href="/"], .mn-btn[href=""], .mn-btn[href="#portal"] {
  --nav-tint: #EF5350;
}
.mn-btn[href*="index"] svg, .mn-btn[href="/"] svg, .mn-btn[href=""] svg, .mn-btn[href="#portal"] svg {
  stroke: var(--nav-tint);
  opacity: 0.7;
}
.mn-btn[href*="index"]:hover svg, .mn-btn[href="/"]:hover svg, 
.mn-btn[href*="index"].on svg, .mn-btn[href="/"].on svg {
  stroke: var(--nav-tint);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(239, 83, 80, 0.7));
}

/* Search — blue */
.mn-btn[href*="search"] {
  --nav-tint: #42A5F5;
}
.mn-btn[href*="search"] svg {
  stroke: var(--nav-tint);
  opacity: 0.7;
}
.mn-btn[href*="search"]:hover svg,
.mn-btn[href*="search"].on svg {
  stroke: var(--nav-tint);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(66, 165, 245, 0.7));
}

.mn-btn[href*="ai"] {
  --nav-tint: #FF9800;
}
.mn-btn[href*="ai"] svg {
  stroke: var(--nav-tint);
  opacity: 0.7;
}
.mn-btn[href*="ai"]:hover svg,
.mn-btn[href*="ai"].on svg {
  stroke: var(--nav-tint);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.7));
}

.mn-btn[href*="marketing"] {
  --nav-tint: #4CAF50;
}
.mn-btn[href*="marketing"] svg {
  stroke: var(--nav-tint);
  opacity: 0.7;
}
.mn-btn[href*="marketing"]:hover svg,
.mn-btn[href*="marketing"].on svg {
  stroke: var(--nav-tint);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.7));
}

.mn-btn[href*="manufacturing"] {
  --nav-tint: #FFEB3B;
}
.mn-btn[href*="manufacturing"] svg {
  stroke: var(--nav-tint);
  opacity: 0.7;
}
.mn-btn[href*="manufacturing"]:hover svg,
.mn-btn[href*="manufacturing"].on svg {
  stroke: var(--nav-tint);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 235, 59, 0.7));
}

.mn-btn[href*="event"], .mn-btn[href*="community"] {
  --nav-tint: #AB47BC;
}
.mn-btn[href*="event"] svg, .mn-btn[href*="community"] svg {
  stroke: var(--nav-tint);
  opacity: 0.7;
}
.mn-btn[href*="event"]:hover svg, .mn-btn[href*="community"]:hover svg,
.mn-btn[href*="event"].on svg, .mn-btn[href*="community"].on svg {
  stroke: var(--nav-tint);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(171, 71, 188, 0.7));
}

.mn-btn.on svg {
  opacity: 1;
}

.mn-tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-family: var(--ff);
  z-index: 10000;
}

.mn-btn:hover .mn-tooltip,
.mn-milly-wrap:hover .mn-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mn-milly-wrap {
  position: relative;
}

.mn-milly {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #F5D245 0%, #e6c030 100%);
  color: #0a0a0a;
  font-family: var(--fm);
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 2px 20px rgba(245, 210, 69, .35);
  transition: transform .25s var(--ease), box-shadow .25s;
  position: relative;
  top: -5px;
  border: 2px solid rgba(255, 255, 255, .15);
}

.mn-milly:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 28px rgba(245, 210, 69, .6)
}

/* ═══════════════════════════════════════
   SCENARIO / SCROLL UI
   ═══════════════════════════════════════ */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s var(--ease);
  display: none !important;
}

#bg-canvas.on {
  opacity: 1;
}

.app-body {
  opacity: 0;
  visibility: hidden;
  position: relative;
  z-index: 2;
  padding-bottom: 120px;
}

.app-body.on {
  opacity: 1;
  visibility: visible
}

/* HUB HEADER */
.hub-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  z-index: 900;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 10%, rgba(0, 0, 0, 0) 100%);
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: visible;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.brand {
  overflow: visible;
}

.tpf-logo {
  display: inline-block;
  font-family: 'Permanent Marker', cursive;
  font-size: 48px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  padding: 2px 8px 8px 2px;
  overflow: visible;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(-3deg);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9), 6px 6px 20px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

.tpf-logo:hover {
  transform: scale(1.06) rotate(-6deg);
  text-shadow: 4px 4px 0 rgba(239, 83, 80, 0.8), 6px 6px 24px rgba(255, 255, 255, 0.2);
}

/* Large logo overrides for footer */
.tpf-logo.lg {
  font-size: 72px;
  transform: rotate(-3deg);
}

.brand-text {
  display: none;
  /* Hide the Profit Family text globally */
}

.search-bar {
  background: rgba(255, 255, 255, 0.04);
  padding: 0 16px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: 400px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text3);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  position: relative;
}

.search-bar span {
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-align: left;
  opacity: 0.35;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.sb-dots {
  display: flex;
  gap: 6px;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  margin-right: 2px;
}

.sb-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.sb-dots span:nth-child(1) {
  background: #FF5F57;
}

.sb-dots span:nth-child(2) {
  background: #FEBC2E;
}

.sb-dots span:nth-child(3) {
  background: #28C840;
}

.search-bar svg {
  opacity: 0.25;
  flex-shrink: 0;
}

.search-kbd {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 7px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.search-bar:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  width: 420px;
}

.search-bar:hover svg {
  opacity: 0.4;
}

.search-bar:hover .search-kbd {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
}

/* TOOLS BUTTON — solid yellow */
.tools-btn {
  padding: 0 20px;
  border-radius: 12px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  /* slight inner bevel effect */
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.03em;
  background: #FFEB3B;
  box-shadow: 0 0 24px rgba(255, 235, 59, 0.5);
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.tools-btn:hover {
  transform: translateY(-2px);
  background: #FFF176;
  box-shadow: 0 0 36px rgba(255, 235, 59, 0.7);
}

.tools-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: transform 0.3s;
  color: #000;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4));
}

.tools-btn:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

/* Mobile header center override moved to bottom */

/* ================== HERO SOCIAL ICONS ================== */
/* ================== HERO SOCIAL ICONS (inline subtext size) ================== */
.hero-socials {
  display: flex;
  align-items: center;
  padding-top: 20px;
  gap: 14px;
  width: 100%;
  max-width: 500px;
}

.hero-social-icon {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.hero-social-icon svg {
  width: 20px;
  height: 20px;
}

/* Discord — brand indigo */
.hero-social-icon.discord {
  color: #5865F2;
}

.hero-social-icon.discord:hover {
  background: rgba(88, 101, 242, 0.2);
  border-color: rgba(88, 101, 242, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
}

/* YouTube — brand red */
.hero-social-icon.youtube {
  color: #FF0000;
}

.hero-social-icon.youtube:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3);
}

/* Instagram — gradient pink/orange */
.hero-social-icon.instagram {
  color: #E1306C;
}

.hero-social-icon.instagram:hover {
  background: rgba(221, 42, 123, 0.2);
  border-color: rgba(221, 42, 123, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(221, 42, 123, 0.3);
}

/* Nav bounce arrow */
@keyframes navBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

.nav-bounce-arrow {
  animation: navBounce 1.2s ease-in-out infinite;
}

/* SECTIONS BASE */
section {
  position: relative;
  padding: 120px 4vw;
  max-width: 2000px;
  margin: 0 auto;
}

.section-label {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.12em;
  margin-bottom: 24px;
  display: block;
}

.section-heading {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 20px;
}

/* HERO */
.hero-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5vw;
  position: relative;
  z-index: 10;
}

.hero-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* Centering for better balance */
  text-align: left;
  gap: 120px; /* Increased gap for cleaner side-by-side look */
  width: 100%;
  max-width: 1440px; /* Slightly wider for larger screens */
  margin: auto;
  padding: 0 5vw;
}

.hero-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.hero-tag {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--r);
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(80px, 11vw, 180px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
  white-space: nowrap;
}

.hero-title span {
  display: block;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7);
}

.hero-sub {
  font-size: 18px;
  color: var(--text2);
  line-height: 1.6;
  max-width: 500px;
}

/* Hero Cards Right Column */
/* 3D Cinematic Event Card */
.hero-event-card {
  background: rgba(18, 12, 12, 0.85);
  border: 1px solid rgba(255, 80, 80, 0.15);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.95), inset 0 1px 2px rgba(255, 150, 150, 0.1);
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease-out, box-shadow 0.4s, border-color 0.4s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform-style: preserve-3d;
}

.hero-event-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(239, 83, 80, 0.2) 0%, rgba(255, 167, 38, 0.05) 30%, transparent 60%);
  animation: rotateGlow 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-event-card::after {
  content: '';
  display: none;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.hero-event-card.hover-active {
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.95), 0 0 80px rgba(239, 83, 80, 0.25);
  border-color: rgba(239, 83, 80, 0.5);
}

/* 3D Popping Elements */
.hec-top,
.hec-title,
.hec-desc,
.hec-countdown,
.hec-footer {
  position: relative;
  z-index: 2;
  transform: translateZ(30px);
}

.hec-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Live Soundwave Badge */
.hec-live-badge {
  background: rgba(255, 51, 51, 0.12);
  color: #FF3333;
  border: 1px solid rgba(255, 51, 51, 0.3);
  padding: 8px 14px;
  border-radius: 30px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.2);
}

.soundwave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.soundwave span {
  width: 3px;
  background: #FF3333;
  border-radius: 2px;
  animation: sw 0.8s ease-in-out infinite alternate;
}

.soundwave span:nth-child(1) {
  height: 4px;
  animation-delay: 0s;
}

.soundwave span:nth-child(2) {
  height: 12px;
  animation-delay: -0.2s;
}

.soundwave span:nth-child(3) {
  height: 7px;
  animation-delay: -0.4s;
}

.soundwave span:nth-child(4) {
  height: 10px;
  animation-delay: -0.6s;
}

@keyframes sw {
  0% {
    height: 3px;
  }

  100% {
    height: 12px;
  }
}

.hec-date {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.05em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 14px;
  border-radius: 30px;
}

.hec-title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.hec-desc {
  font-size: 16px;
  color: var(--text2);
  line-height: 1.6;
  margin-top: -10px;
}

.hec-countdown {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 100, 100, 0.08);
  box-shadow: inset 0 2px 15px rgba(255, 51, 51, 0.05);
  transform: translateZ(40px);
}

.hc-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.hc-box span {
  font-family: var(--fm);
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  line-height: 0.9;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(255, 51, 51, 0.4);
}

.hc-box small {
  font-size: 11px;
  color: var(--r);
  font-weight: 800;
  letter-spacing: 0.15em;
}

.hc-sep {
  font-family: var(--fm);
  font-size: 32px;
  color: var(--text3);
  font-weight: 900;
  padding-bottom: 20px;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.hec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  transform: translateZ(50px);
}

.hec-avatars {
  display: flex;
  align-items: center;
}

.hec-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #1a0f0f;
  margin-left: -12px;
  transition: transform 0.3s;
}

.hec-avatars img:first-child {
  margin-left: 0;
}

.hec-avatars img:hover {
  transform: translateY(-4px) scale(1.1);
  z-index: 10;
  position: relative;
}

.hec-avatars span {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  margin-left: 12px;
  letter-spacing: 0.05em;
}

.hec-btn {
  padding: 18px 32px;
  border-radius: 16px;
  background: #fff;
  color: #000;
  font-family: var(--fm);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hec-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s;
}

.hero-event-card.hover-active .hec-btn {
  background: linear-gradient(90deg, #EF5350, #ffA726);
  color: #fff;
  box-shadow: 0 15px 30px rgba(239, 83, 80, 0.5);
  transform: translateY(-3px);
}

.hero-event-card.hover-active .hec-btn svg {
  transform: translateX(8px);
}

@media(max-width: 768px) {
  .hero-layout {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .hero-cards-wrap {
    flex: 1;
    width: 100%;
  }
}

.scroll-indicator {
  position: fixed;
  bottom: 85px;  /* Always floating nicely above #mobilenav (bottom:16px + ~44px height) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.6;
  z-index: 10;
}

.scroll-indicator span.si-text {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ================== HERO TICKER ================== */
.hero-ticker-wrap {
  width: 100%;
  max-width: 600px;
  padding: 24px 0 0 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.hero-ticker {
  display: flex;
  width: max-content;
  align-items: center;
  animation: tickerInfinite 60s linear infinite;
  gap: 24px;
}

.hero-ticker:hover {
  animation-play-state: paused;
}

.ht-slide {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

.ht-slide img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  object-fit: cover;
}

.ht-slide span {
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
}

.ht-slide span b {
  color: #fff;
}

@keyframes tickerInfinite {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 12px));
  }
}

@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ================== APPLE / SPOTIFY PREVIEW CARD & IDEAS GRID ================== */
.hero-right-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 440px; /* Constrain the width on desktop */
  position: relative;
  z-index: 5;
  align-items: stretch;
}

.hero-right-col>* {
  flex: 1;
  min-width: 0;
}

@media(max-width: 1024px) {
  .hero-right-col {
    flex-direction: column;
    max-width: 440px;
  }
}

/* ═══════════════════════════════════════════════════════
   EV2 — CINEMATIC EVENT CARD V2
   ═══════════════════════════════════════════════════════ */

/* ── Outer wrapper — holds the animated border ── */
.ev2-card {
  position: relative;
  border-radius: 28px;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.ev2-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 50px 100px rgba(0,0,0,0.9), 0 0 60px rgba(171,71,188,0.2);
}

/* Cinematic Solar Sweep Border (Full Card) */
.events-v2-card {
  position: relative;
  z-index: 10;
  overflow: visible; /* Allows the glow halo to pulse outward */
}

.events-v2-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: conic-gradient(from 0deg, transparent, #FFEB3B, #E53935, #AB47BC, transparent);
  animation: ev2SweepRotate 4s linear infinite;
  z-index: -1;
  border-radius: 30px;
  opacity: 0.8;
  filter: blur(6px); /* Pulsing solar halo */
}

@keyframes ev2SweepRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Inner surface ── */
.ev2-surface {
  position: relative;
  margin: 2px;
  border-radius: 26px;
  background: #050508; /* Deep Obsidian — makes the colors pop */
  min-height: 420px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .ev2-surface {
    min-height: 400px; /* Locked height for mobile liquid visibility */
  }
}

/* ── HIGH-VIBRANCY LAVA LAMP SYSTEM ── */
.ev2-morph-area {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: url(#goo); /* Nuclear HD Liquid Lock */
  -webkit-filter: url(#goo);
  opacity: 1; /* Forced Solid Rendering */
  mix-blend-mode: normal; /* High-Performance GPU Layer */
  transform: translate3d(0,0,0); /* Hardware Layer Force */
  -webkit-transform: translate3d(0,0,0);
  will-change: filter, transform;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ev2-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px); /* Base blur for the gooey filter to work with */
}

/* The Blobs (Advanced Triple-Mix) */
.ev2-blob-1 {
  top: 30%;
  left: 35%;
  width: 32%;
  height: 32%;
  background: linear-gradient(135deg, #FFEB3B, #FF9800); /* Solar Yellow / Amber */
  animation: ev2Lava1 30s ease-in-out infinite alternate; /* Slower Cinematic Pulse */
  transform: translateZ(1px); /* Hardware Layer Force */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.ev2-blob-2 {
  bottom: 30%;
  right: 35%;
  width: 36%;
  height: 36%;
  background: linear-gradient(135deg, #AB47BC, #E53935); /* Royal Purple / Crimson Mix */
  animation: ev2Lava2 40s ease-in-out infinite alternate; /* Slower Cinematic Pulse */
  transform: translateZ(1px); /* Hardware Layer Force */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.ev2-blob-3 { display: none; }

.ev2-blob-4 {
  top: 30%;
  right: 35%;
  width: 18%;
  height: 18%;
  background: rgba(255,255,255,0.3);
  animation: ev2Lava2 10s ease-in-out infinite alternate; /* Syncs highlight */
  mix-blend-mode: overlay;
  z-index: 10;
  filter: blur(5px);
  opacity: 0.5;
  transform: translateZ(1px);
}

.ev2-blob-5 { display: none; }

/* Extreme Separation Lava Physics (Merged -> Deep Corner -> Merged) */
@keyframes ev2Lava1 {
  0%   { transform: translate(15%, 15%) scale(1.1); } /* Start Merged */
  50%  { transform: translate(-60%, -45%) scale(0.9); } /* Pull to extreme corner */
  100% { transform: translate(15%, 15%) scale(1.1); } /* Snap back */
}

@keyframes ev2Lava2 {
  0%   { transform: translate(-15%, -15%) scale(1.2); } /* Start Merged */
  50%  { transform: translate(60%, 45%) scale(0.95); } /* Pull to extreme corner */
  100% { transform: translate(-15%, -15%) scale(1.2); } /* Snap back */
}

@keyframes navBounceHoriz {
  0%, 100% { transform: rotate(-90deg) translateY(0); }
  50% { transform: rotate(-90deg) translateY(-8px); }
}

/* ───────────────────────────────────────────────────────
   NAV INDICATOR 
   ─────────────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  pointer-events: none;
}

.nav-bounce-arrow {
  display: block;
  margin-top: 8px;
  animation: navBounce 2s ease-in-out infinite;
}

@keyframes navBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
}

@keyframes ev2MorphRotate1 {
  from { transform: rotate(0deg) translate(20%, 10%) rotate(0deg); }
  to   { transform: rotate(360deg) translate(20%, 10%) rotate(-360deg); }
}

@keyframes ev2MorphRotate2 {
  from { transform: rotate(0deg) translate(-15%, -10%) rotate(0deg); }
  to   { transform: rotate(360deg) translate(-15%, -10%) rotate(-360deg); }
}

@keyframes ev2MorphDrift {
  0%   { transform: translate(0px, 0px) scale(1); }
  50%  { transform: translate(-30px, 40px) scale(1.2); }
  100% { transform: translate(20px, -20px) scale(0.9); }
}

@keyframes ev2MorphBounce {
  0%   { transform: translate(0px, 0px) scale(1); border-radius: 40% 60% 60% 40% / 50%; }
  33%  { transform: translate(40px, -15px) scale(1.1); border-radius: 60% 40% 40% 60% / 50%; }
  66%  { transform: translate(-20px, 40px) scale(0.95); border-radius: 50% 50% 50% 50% / 40% 60%; }
  100% { transform: translate(10px, -10px) scale(1.05); border-radius: 40% 60% 70% 30% / 40% 50%; }
}

@keyframes ev2Drift3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(-8%, 5%) scale(1.2); opacity: 0.5; }
}

/* ── Noise overlay ── */
.ev2-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── Content layer ── */
.ev2-content {
  position: relative;
  z-index: 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 420px;
}

/* ── Top row ── */
.ev2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Live pill */
.ev2-live-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(239,83,80,0.1);
  border: 1px solid rgba(239,83,80,0.25);
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #EF5350;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(239,83,80,0.1);
  animation: ev2LivePulse 2.5s ease-in-out infinite;
}

.ev2-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EF5350;
  box-shadow: 0 0 10px rgba(239,83,80,0.7);
  animation: ev2DotBlink 1.4s ease-in-out infinite;
}

@keyframes ev2DotBlink {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}

@keyframes ev2LivePulse {
  0%, 100% { box-shadow: 0 0 15px rgba(239,83,80,0.08); }
  50%      { box-shadow: 0 0 30px rgba(239,83,80,0.2); }
}

/* Host pill */
.ev2-host-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 4px 12px 4px 4px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.06);
}

.ev2-host-pill span {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

.ev2-host-pill b {
  color: #fff;
  font-weight: 800;
}

.ev2-host-avatar {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ff) !important;
  font-weight: 900 !important;
  font-size: 9px !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* ── Title block ── */
.ev2-title-block {
  margin-top: auto;
}

.ev2-date-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.ev2-date-tag svg {
  color: rgba(255,255,255,0.2);
}

.ev2-title {
  font-family: var(--ff);
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 900;
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-bottom: 12px;
  text-shadow: 0 6px 30px rgba(0,0,0,0.6);
}

.ev2-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
  max-width: 90%;
  font-weight: 400;
  margin-bottom: 24px;
}

/* ── Bottom ── */
.ev2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Reserve button */
.ev2-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.ev2-reserve-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.ev2-reserve-btn:hover::after {
  transform: translateX(100%);
}

.ev2-reserve-btn:hover {
  transform: translateY(-3px) scale(1.04);
  background: linear-gradient(135deg, #EF5350, #AB47BC);
  color: #fff;
  box-shadow: 0 16px 40px rgba(239,83,80,0.4);
}

.ev2-reserve-btn:hover svg {
  transform: translateX(4px);
}

.ev2-reserve-btn svg {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Attendees */
.ev2-attendees {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ev2-avatar-stack {
  display: flex;
}

.ev2-avatar-stack img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #120a24;
  margin-left: -10px;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ev2-avatar-stack img:first-child {
  margin-left: 0;
}

.ev2-card:hover .ev2-avatar-stack img {
  border-color: rgba(171,71,188,0.3);
}

.ev2-avatar-stack img:hover {
  transform: translateY(-4px) scale(1.15);
  z-index: 5;
  position: relative;
}

.ev2-count {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.02em;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .ev2-content {
    padding: 24px 20px;
    min-height: 360px;
  }

  .ev2-surface {
    min-height: 360px;
  }
  
  .ev2-title {
    font-size: clamp(36px, 10vw, 48px);
  }

  .ev2-desc {
    font-size: 13px;
    max-width: 100%;
  }

  .ev2-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ev2-reserve-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 28px;
    background: linear-gradient(135deg, #EF5350, #E91E63, #AB47BC);
    color: #fff;
    background-size: 200% 200%;
    animation: ev2MobileBtnShift 4s ease infinite;
    box-shadow: 0 10px 30px rgba(233,30,99,0.35);
  }

  @keyframes ev2MobileBtnShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .ev2-attendees {
    justify-content: center;
  }

  .ev2-top {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ev2-live-pill {
    font-size: 9px;
    padding: 6px 12px;
  }

  .ev2-host-pill {
    padding: 3px 10px 3px 3px;
  }

  .ev2-host-pill span {
    font-size: 9px;
  }

  .ev2-host-avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════
   IDEAS STACK (kept for compatibility)
   ═══════════════════════════════════════ */

.apple-idea-card {
  flex: 1;
}

.apple-idea-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px;
  min-height: 200px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s;
  cursor: pointer;
}

.apple-idea-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.aic-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.apple-idea-card:hover .aic-bg {
  transform: scale(1.06);
}

.aic-overlay {
  position: absolute;
  inset: 0;
  transition: background 0.5s;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.2) 100%);
}

.apple-idea-card:hover .aic-overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.3) 100%);
}

.aic-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  flex: 1;
}

.aic-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.aic-tag {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.aic-top span {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.aic-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
}

.aic-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 85%;
  margin-top: 8px;
}

.aic-btn {
  align-self: flex-start;
  margin-top: 16px;
  background: #fff;
  color: #000;
  border: none;
  padding: 12px 20px;
  border-radius: 24px;
  font-weight: 800;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.apple-idea-card:hover .aic-btn {
  transform: scale(1.05);
  color: #fff;
  background: linear-gradient(-45deg, #EF5350, #9C27B0, #29B6F6, #00E676);
  background-size: 300% 300%;
  animation: gradientWave 3s ease infinite;
  border-color: transparent;
}


.mouse {
  width: 24px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 12px;
  position: relative;
}

.mouse::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: scrollDrop 1.5s infinite;
}

@keyframes scrollDrop {
  0% {
    transform: translate(-50%, 0);
    opacity: 1
  }

  100% {
    transform: translate(-50%, 12px);
    opacity: 0
  }
}

/* FEATURED WORK (HORIZONTAL SCROLL) */
.featured-section {
  height: 100vh;
  /* For pinning */
  padding-bottom: 0;
}

.horizontal-scroll-wrap {
  overflow: hidden;
  position: relative;
  margin-top: 60px;
  width: 100%;
  height: 500px;
}

.card-track {
  display: flex;
  gap: 40px;
  height: 100%;
  padding-right: 20vw;
  width: max-content;
}

.playbook-card {
  width: min(350px, 80vw);
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
  background: rgba(15, 15, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.playbook-card:hover {
  transform: translateY(-8px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 40px var(--bg2);
  border-color: rgba(255, 255, 255, 0.15);
}

.pb-preview {
  flex: 1;
  min-height: 220px;
  background: radial-gradient(circle at top left, var(--bg1) 0%, var(--bg2) 100%), #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--c1);
  position: relative;
  overflow: hidden;
}

.pb-noise {
  display: none;
}

.pb-text-huge {
  font-size: 110px;
  font-weight: 900;
  font-family: var(--ff);
  font-style: italic;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.9;
  pointer-events: none;
  opacity: 1;
  transform: scale(1.1);
  z-index: 1;
  letter-spacing: -0.05em;
  text-shadow: 0 4px 20px var(--bg2);
}

.pb-cat-label {
  color: #fff;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 16px;
  padding: 4px 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--bg1);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px var(--bg2);
}

.pb-content {
  padding: 30px;
  position: relative;
}

.pb-content h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  padding-right: 20px;
}

.pb-content p {
  color: var(--text3);
  font-size: 14px;
  line-height: 1.5;
}

.pb-action {
  position: absolute;
  bottom: 30px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.pb-action svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

.playbook-card:hover .pb-action {
  background: var(--c1);
  color: #fff;
  border-color: var(--c2);
  transform: scale(1.1);
  box-shadow: 0 4px 16px var(--bg1);
}

.playbook-card:hover .pb-action svg {
  transform: translateX(2px) translateY(-2px);
}

/* GRID SECTIONS (AI, MFG, GROWTH) */
.grid-section {
  padding-top: 160px;
}

.split-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
  flex-wrap: wrap;
  gap: 40px;
}

.split-header p {
  max-width: 500px;
  font-size: 18px;
  color: var(--text2);
  line-height: 1.5;
}

.parallax-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  position: relative;
}

.repo-card {
  background: rgba(30, 30, 35, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: all 0.4s var(--ease);
}

.repo-card:hover {
  background: rgba(40, 40, 45, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-10px);
}

.repo-icon {
  font-size: 40px;
  margin-bottom: 20px;
}

.repo-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.repo-info h3 span {
  font-size: 14px;
  color: var(--text3);
  font-weight: 500;
  margin-top: 4px;
}

.repo-info p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 24px;
  flex: 1;
}

.repo-meta {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.m-pill {
  font-family: var(--fm);
  font-size: 11px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.tool-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 24px;
  gap: 20px;
  transition: all 0.3s;
}

.tool-block:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.tool-block .t-ico {
  font-size: 32px;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-block h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* MASONRY MAGAZINE GRID */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 24px;
}

.mag-card {
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mag-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mag-card:hover .mag-img {
  transform: scale(1.08);
}

.mag-card.wide {
  grid-column: span 4;
  grid-row: span 2;
}

.mag-card.tall {
  grid-column: span 2;
  grid-row: span 2;
}

.mag-card.square {
  grid-column: span 2;
  grid-row: span 1;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
}

.mag-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mag-info {
  padding: 30px;
}

.mag-card .m-tag {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  font-weight: 700;
}

.mag-card h3 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.mag-card.wide h3 {
  font-size: 48px;
}

.mag-card.square h3 {
  font-size: 24px;
}

.mag-card p {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 500px;
}

.dl-btn {
  background: #fff;
  color: #000;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-family: var(--ff);
  cursor: pointer;
  width: fit-content;
  transition: transform 0.2s;
}

.dl-btn:hover {
  transform: scale(1.05);
}

.inline-link {
  font-weight: 700;
  color: var(--r2);
  font-size: 14px;
}

.inline-link:hover {
  color: #fff;
}

@media(min-width:1024px) {
  .mag-card.wide {
    grid-column: span 2;
  }

  .mag-card.square {
    grid-column: span 1;
  }
}

/* FOOTER */
.hub-footer {
  padding: 120px 4vw 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.hub-footer .tpf-logo.lg {
  width: 60px;
  height: 60px;
  font-size: 20px;
}

.hub-footer p {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.2em;
  line-height: 1.8;
}

@media(max-width:768px) {
  .split-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .magazine-grid {
    display: flex;
    flex-direction: column;
  }

  .hero-title {
    font-size: clamp(60px, 15vw, 100px);
  }
}

/* ══════════ TPF HUB 2026 ══════════ */
.hub-tools-section {
  padding: 60px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 40px;
}

.tool-deck {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.t-tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  transition: all 0.4s var(--ease);
}

.t-tool-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.tt-icon {
  font-size: 16px;
  color: var(--text3);
}

.t-tool-card span {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
}

.hub-video-catalog {
  padding: 100px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.split-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.search-catalog {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
}

.search-catalog input {
  background: transparent;
  border: none;
  padding: 12px 20px;
  color: #fff;
  width: 300px;
  outline: none;
  font-family: var(--fm);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.search-catalog button {
  background: #fff;
  color: #000;
  border: none;
  padding: 0 20px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.search-catalog button svg {
  width: 16px;
  height: 16px;
  stroke: #000;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.v-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s var(--ease);
}

.v-card:hover {
  transform: translateY(-8px);
}

.v-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.v-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
}

.v-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: scale 0.4s;
  z-index: 2;
}

.v-play svg {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

.v-card:hover .v-play {
  scale: 1.1;
  background: #fff;
  color: #000;
}

.v-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}

.v-info {
  padding: 0 4px;
}

.v-tag {
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 12px;
  display: inline-block;
}

.v-tag.ai {
  background: rgba(239, 83, 80, 0.15);
  color: #EF5350;
}

.v-tag.marketing {
  background: rgba(171, 71, 188, 0.15);
  color: #AB47BC;
}

.v-tag.dev {
  background: rgba(66, 165, 245, 0.15);
  color: #42A5F5;
}

.v-tag.mfg {
  background: rgba(255, 167, 38, 0.15);
  color: #FFA726;
}

.v-info h3 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
}

.hub-split-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  padding: 100px 40px;
}

.block-heading {
  font-size: 32px;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.repo-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 60px;
}

.r-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: background 0.4s;
}

.r-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.r-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.r-text h4 {
  font-family: var(--fm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 4px;
}

.r-text p {
  font-size: 13px;
  color: var(--text3);
}

.r-tag {
  margin-left: auto;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.glossary-callout {
  position: relative;
  padding: 40px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gl-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #111, #222);
  z-index: 1;
}

.gl-bg::after {
  display: none;
}

.gl-content {
  position: relative;
  z-index: 2;
}

.gl-content h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: #fff;
}

.gl-content p {
  color: var(--text3);
  line-height: 1.5;
  margin-bottom: 24px;
  font-size: 14px;
  max-width: 80%;
}

.tpf-btn-small {
  background: #fff;
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 100px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s;
}

.tpf-btn-small:hover {
  transform: scale(1.05);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 60px;
}

.e-row {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  position: relative;
}

.e-row.live {
  border-color: rgba(239, 83, 80, 0.4);
  background: rgba(239, 83, 80, 0.05);
}

.e-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  min-width: 60px;
}

.e-date .mo {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text3);
}

.e-date .dy {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-top: 4px;
}

.e-info h4 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

.e-info p {
  font-size: 13px;
  color: var(--text3);
}

.e-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #EF5350;
  border: 1px solid rgba(239, 83, 80, 0.4);
  border-radius: 4px;
  padding: 4px 8px;
  animation: pulseRed 2s infinite;
}

@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 83, 80, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 83, 80, 0);
  }
}

.dfy-services h3 {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 24px;
}

.dfy-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  color: #000;
  transition: transform 0.4s;
  margin-bottom: 16px;
}

.dfy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

.dfy-ic {
  font-size: 24px;
}

.dfy-txt h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.dfy-txt p {
  font-size: 13px;
  color: #444;
}

@media(max-width: 1024px) {
  .hub-split-section {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .split-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .admin-dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .admin-dashboard-layout .dash-widget {
    grid-column: span 1 !important;
  }

  .admin-dashboard-layout .span-12,
  .admin-dashboard-layout .span-8,
  .admin-dashboard-layout .span-4 {
    grid-column: span 1 !important;
  }

  .dash-widget[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================== TOOLS MODAL ================== */
/* ════════════════════════════════════════════════════
   TOOLS MODAL — ALIVE & PREMIUM
   ════════════════════════════════════════════════════ */
@keyframes tmCardShimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes tmFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes tmGlowPulse {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.12;
  }
}

.tm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 8, 12, 0.97);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  overflow-y: auto;
  padding: 60px 4vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tm-overlay.on {
  opacity: 1;
  pointer-events: auto;
}

.tm-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
}

.tm-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: rgba(255, 255, 255, 0.5);
  z-index: 10001;
}

.tm-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: rotate(90deg);
}

.tm-header {
  margin-bottom: 40px;
}

.tm-title {
  font-family: var(--ff);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.05em;
  margin-bottom: 10px;
  line-height: 1;
}

.tm-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
  max-width: 500px;
  line-height: 1.6;
}

.tm-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 22px;
  border-radius: 14px;
  margin-bottom: 50px;
  max-width: 560px;
  transition: all 0.35s;
}

.tm-search-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.tm-search-wrap svg {
  opacity: 0.25;
}

.tm-search-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--ff);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}

.tm-search-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

.tm-section-title {
  font-family: var(--ff);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tm-section-title::before {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.tm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}

.tm-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Top shimmer accent */
.tm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200% 100%;
  animation: tmCardShimmer 4s linear infinite;
}

/* Ambient glow orb */
.tm-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tm-glow, rgba(255, 255, 255, 0.06)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  filter: blur(20px);
  animation: tmGlowPulse 4s ease-in-out infinite;
}

.tm-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px var(--tm-glow, rgba(255, 255, 255, 0.02));
}

.tm-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--tm-accent, rgba(255, 255, 255, 0.2)), transparent);
  animation: none;
}

.tm-card:hover::after {
  opacity: 0.2;
  animation: none;
}

.tm-tag {
  align-self: flex-start;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: filter 0.3s;
}

.tm-card:hover .tm-tag {
  filter: brightness(1.3);
}

.tm-tag.ai {
  background: rgba(66, 165, 245, 0.1);
  color: #64B5F6;
  --tm-accent: rgba(66, 165, 245, 0.3);
  --tm-glow: rgba(66, 165, 245, 0.08);
}

.tm-tag.mfg {
  background: rgba(255, 167, 38, 0.1);
  color: #FFB74D;
  --tm-accent: rgba(255, 167, 38, 0.3);
  --tm-glow: rgba(255, 167, 38, 0.08);
}

.tm-tag.mkt {
  background: rgba(171, 71, 188, 0.1);
  color: #BA68C8;
  --tm-accent: rgba(171, 71, 188, 0.3);
  --tm-glow: rgba(171, 71, 188, 0.08);
}

.tm-card h3 {
  font-family: var(--ff);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}

.tm-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.6;
  font-family: var(--ff);
  font-weight: 400;
  transition: color 0.3s;
}

.tm-card:hover p {
  color: rgba(255, 255, 255, 0.4);
}

/* External link arrow */
.tm-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.tm-card:hover .tm-arrow {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transform: translate(2px, -2px);
}

/* ================== MOBILE HUB OVERRIDES ================== */
@media(max-width: 768px) {

  /* Compress vertical padding heavily so it mathematically fits bounded within ANY modern SVH without cutoff */
  .hero-section {
    padding: 80px 20px 80px; 
    align-items: center;
    justify-content: center;
    min-height: 100dvh; /* Native safe dynamic view height for iOS Safari */
  }

  .hero-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px; /* Reduced vertical gap to eliminate over-spill */
    height: auto;
    width: 100%;
  }

  /* Lock the text to a strict iPhone 11 column size */
  .hero-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 340px; /* Leaves generous sides */
    width: 100%;
  }

  .hero-title {
    font-size: clamp(34px, 9vw, 44px) !important; /* Scaled down hero text */
    line-height: 0.9 !important;
    margin-bottom: 8px;
    letter-spacing: -0.03em !important;
  }

  .hero-text-wrap > div:not(.hero-title, .hero-sub, .hero-socials) {
    justify-content: center;
    margin-bottom: 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.15em;
  }

  .hero-sub {
    font-size: 12px !important;
    line-height: 1.4 !important;
    max-width: 100%;
    padding: 0 12px;
  }

  .hero-socials {
    padding-top: 0px;
    gap: 12px;
    width: 100%;
    max-width: 160px;
  }

  .hero-social-icon {
    height: 34px;
    border-radius: 10px;
  }

  /* Lock the card to a strict iPhone fit */
  .hero-right-col {
    max-width: 310px;
    width: 100%;
    margin: 0 auto;
  }

  .ev2-surface {
    min-height: 360px !important; /* Prevent the card from pushing the page down out of bounds */
  }

  /* De-mush the card's internal layout */
  .ev2-content {
    min-height: auto !important;
    padding: 24px !important;
  }

  .ev2-title {
    font-size: 38px !important;
    margin-bottom: 8px !important;
  }

  .ev2-desc {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  .ev2-reserve-btn {
    padding: 12px 20px !important;
    font-size: 12px !important;
  }



  /* Mobile header search bar styling */
  .hub-header {
    justify-content: flex-start;
    gap: 12px;
    height: 60px;
  }

  .header-left {
    flex: none;
  }

  .tpf-logo {
    font-size: 28px;
  }

  .header-center {
    flex: 1;
    justify-content: flex-start;
    gap: 8px;
  }

  .search-bar {
    width: 100%;
    max-width: 140px; /* Reduced so "Launch a Tool" fits */
    height: 36px;
    padding: 0 8px;
    gap: 4px;
    margin-right: 4px;
  }

  .search-bar:hover {
    max-width: 150px;
  }

  .search-bar span {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .search-kbd,
  .header-right {
    display: none;
  }

  .tools-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 12px;
    border-radius: 12px;
    gap: 8px;
    display: flex;
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.4);
  }

  .tools-btn svg {
    width: 14px;
    height: 14px;
  }

  .scroll-indicator {
    position: fixed;
    bottom: 85px; /* Height of mobile nav + spacing */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    padding-bottom: 0;
    z-index: 100;
  }

  .scroll-indicator span.si-text {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    background: rgba(5, 5, 8, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
  }
}
/* ═══════════════════════════════════════
   LIVE PULSE BADGE
   ═══════════════════════════════════════ */
.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(102, 187, 106, 0.06);
  border: 1px solid rgba(102, 187, 106, 0.15);
  padding: 4px 12px 4px 8px;
  border-radius: 100px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  color: rgba(102, 187, 106, 0.8);
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66BB6A;
  box-shadow: 0 0 8px rgba(102, 187, 106, 0.6);
  animation: liveDotPulse 1.5s ease-in-out infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ═══════════════════════════════════════
   ANIMATED GRADIENT TEXT
   ═══════════════════════════════════════ */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text-animate {
  background: linear-gradient(-45deg, #fff, #EF5350, #AB47BC, #42A5F5, #FFA726, #fff);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════
   GLASSMORPHIC FOOTER
   ═══════════════════════════════════════ */
.hub-footer {
  padding: 80px 4vw 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.hub-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.hub-footer::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(239,83,80,0.05) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.hub-footer .footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.hub-footer .footer-social-link {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}

.hub-footer .footer-social-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════
   HERO TITLE LETTER ANIMATION
   ═══════════════════════════════════════ */
@keyframes heroLetterReveal {
  0% { opacity: 0; transform: translateY(30px) rotateX(40deg); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}

.hero-title span {
  display: block;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7);
  animation: heroLetterReveal 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: 0.1s;
}

.hero-title span:first-child {
  color: #fff;
  -webkit-text-stroke: 0;
  animation-delay: 0s;
}

/* Mobile ticker fix */
@media (max-width: 768px) {
  .hero-ticker-wrap {
    margin-top: 16px !important;
  }
  .live-pulse-badge {
    margin-top: 4px;
    font-size: 9px;
    padding: 3px 10px;
  }
}

/* ════════════════════════════════════════════════════
   MILLY AUTH MODAL — PREMIUM GLASSMORPHIC AUTH UI
   ════════════════════════════════════════════════════ */

@keyframes millyShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes millyFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUpReveal {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes millyPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245,210,69,0.2); }
  50% { box-shadow: 0 0 40px rgba(245,210,69,0.5); }
}

@keyframes millySpin {
  to { transform: rotate(360deg); }
}

.milly-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(0,0,0,0.15);
  border-top-color: #000;
  border-radius: 50%;
  animation: millySpin 0.6s linear infinite;
}

/* Overlay override for auth feel - Centered instead of bottom */
.milly-auth-overlay {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

/* Container */
.milly-auth-container {
  max-width: 440px;
  width: 100%;
  text-align: center;
  padding: 48px 40px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,20,26,0.95) 0%, rgba(10,10,14,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 80px rgba(0,0,0,0.8), 0 0 120px rgba(245,210,69,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  animation: millyFadeIn 0.5s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}

/* Magical top glow line */
.milly-auth-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,235,59,0.8), transparent);
  opacity: 0.7;
}

/* Auth icon area */
.milly-auth-icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  animation: slideUpReveal 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.05s;
}

/* Badge for signup/reset icons */
.milly-auth-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,235,59,0.1), rgba(255,235,59,0.03));
  border: 1px solid rgba(255,235,59,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: millyPulse 3s ease-in-out infinite;
}

/* User avatar for logged-in */
.milly-user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFEB3B, #FFA726);
  color: #000;
  font-family: var(--ff);
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  box-shadow: 0 4px 24px rgba(255,235,59,0.25);
}

/* Titles */
.milly-auth-title {
  font-family: var(--ff);
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.5) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slideUpReveal 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.1s;
}

.milly-auth-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  animation: slideUpReveal 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.15s;
}

/* Fields container */
.milly-auth-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  animation: slideUpReveal 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.2s;
}

/* Two-column row (first/last name) */
.milly-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Input group with icon */
.milly-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0 16px;
  border-radius: 14px;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

.milly-input-group:focus-within {
  border-color: rgba(255,235,59,0.4);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(255,235,59,0.06), 0 4px 16px rgba(0,0,0,0.2);
}

.milly-input-group svg {
  flex-shrink: 0;
  color: rgba(255,255,255,0.2);
  transition: color 0.3s;
}

.milly-input-group:focus-within svg {
  color: rgba(255,235,59,0.6);
}

.milly-input-group input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--fm, 'IBM Plex Mono', monospace);
  font-size: 14px;
  font-weight: 400;
  padding: 14px 0;
  outline: none;
  min-width: 0;
}

.milly-input-group input::placeholder {
  color: rgba(255,255,255,0.2);
  font-weight: 400;
}

/* Error message */
.milly-auth-error {
  font-family: var(--fm, monospace);
  font-size: 12px;
  color: #EF5350;
  margin-bottom: 12px;
  display: none;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(239,83,80,0.08);
  border: 1px solid rgba(239,83,80,0.15);
  text-align: left;
  line-height: 1.4;
}

/* Success variant */
.milly-auth-error[style*="color:#81C784"],
.milly-auth-error[style*="color: #81C784"] {
  background: rgba(129,199,132,0.08) !important;
  border-color: rgba(129,199,132,0.15) !important;
}

/* Buttons */
.milly-auth-btn {
  width: 100%;
  padding: 15px 24px;
  border-radius: 14px;
  border: none;
  font-family: var(--ff);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  animation: slideUpReveal 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.25s;
}

.milly-auth-btn.primary {
  background: linear-gradient(135deg, #FFEB3B, #FFC107);
  color: #000;
  box-shadow: 0 4px 20px rgba(255,235,59,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

.milly-auth-btn.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255,235,59,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}

.milly-auth-btn.primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(255,235,59,0.15);
}

.milly-auth-btn.secondary {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}

.milly-auth-btn.secondary:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px) scale(1.02);
}

/* Link buttons */
.milly-auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
  animation: slideUpReveal 0.6s cubic-bezier(0.16,1,0.3,1) backwards;
  animation-delay: 0.3s;
}

.milly-link-btn {
  background: none;
  border: none;
  color: #FFEB3B;
  font-family: var(--fm, monospace);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.milly-link-btn:hover {
  background: rgba(255,235,59,0.08);
  color: #fff;
}

.milly-link-divider {
  color: rgba(255,255,255,0.15);
  font-size: 10px;
}

/* Footer */
.milly-auth-footer {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-family: var(--fm, monospace);
}

.milly-auth-footer a {
  color: #FFEB3B;
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
  transition: color 0.3s;
}

.milly-auth-footer a:hover {
  color: #fff;
}

/* View transitions */
.milly-auth-view {
  animation: millyFadeIn 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .milly-auth-container {
    padding: 36px 20px 28px;
    border-radius: 24px 24px 12px 12px;
  }
  
  .milly-auth-title {
    font-size: 20px;
  }
  
  .milly-auth-sub {
    font-size: 13px;
    margin-bottom: 20px;
  }
  
  .milly-input-row {
    grid-template-columns: 1fr;
  }
  
  .milly-input-group input {
    font-size: 13px;
  }
  
  .milly-auth-btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* ════════════════════════════════════════════════════
   GLOBAL PROFILE CORNER STYLES
   ════════════════════════════════════════════════════ */
#tpf-global-profile-bubble {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(12, 12, 16, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 8px 6px 16px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 10px rgba(239, 83, 80, 0.1);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  animation: millyFadeIn 0.5s ease forwards;
}

#tpf-global-profile-bubble:hover {
  background: rgba(18, 18, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(239, 83, 80, 0.2);
}

.tpf-global-name {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--fm, monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tpf-global-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EF5350, #b71c1c); /* Deep red circle */
  color: #fff;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(183, 28, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  #tpf-global-profile-bubble {
    top: 16px;
    right: 16px;
    padding: 4px 6px 4px 12px;
  }
  
  .tpf-global-name {
    display: none; /* Only show the red circle on mobile to save space */
  }
  
  .tpf-global-initial {
    width: 32px;
    height: 32px;
  }
}