/* ============================================================
   SERHANT. ORLANDO PORTAL — SHARED STYLESHEET
   ============================================================ */

/* --- Google Fonts: Montserrat --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

/* --- Design Tokens --- */
:root {
  /* Brand Colors */
  --color-bg:           #0a0a55;
  --color-surface:      #121275;
  --color-surface-2:    #1a1a88;
  --color-surface-3:    #222298;
  --color-border:       rgba(80, 80, 200, 0.3);
  --color-border-hover: rgba(100, 100, 220, 0.55);
  --color-accent:       #3030b0;
  --color-accent-bright:#6868ee;
  --color-accent-glow:  rgba(50, 50, 180, 0.4);
  --color-text:         #e8e8f0;
  --color-text-muted:   #b8b8e8;
  --color-text-faint:   #8888c8;
  --color-gold:         #c9a84c;
  --color-silver:       #9ba3b4;
  --color-bronze:       #c07849;
  --color-white:        #ffffff;

  /* Type */
  --font-body:    'Montserrat', 'Helvetica Neue', sans-serif;
  --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8rem,   0.75rem + 0.25vw, 0.9375rem);
  --text-base: clamp(0.9375rem,0.9rem  + 0.2vw,  1rem);
  --text-lg:   clamp(1rem,     0.9rem  + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1rem    + 1vw,    1.875rem);
  --text-2xl:  clamp(1.75rem,  1rem    + 2.5vw,  3rem);
  --text-3xl:  clamp(2.5rem,   1.5rem  + 3.5vw,  4.5rem);
  --text-hero: clamp(3rem,     1rem    + 6vw,    7rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Transitions */
  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 32px rgba(60,60,190,0.35);

  /* Content Widths */
  --content-narrow: 700px;
  --content-default: 1000px;
  --content-wide: 1280px;

  /* Nav Height */
  --nav-h: 72px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 25%, rgba(60,60,210,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(80,40,200,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 80%, rgba(30,30,170,0.12) 0%, transparent 70%);
  line-height: 1.65;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.2; font-family: var(--font-display); font-weight: 700; }
p, li { text-wrap: pretty; max-width: 68ch; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(60,60,190,0.4); color: var(--color-white); }
:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: linear-gradient(to bottom, rgba(8,8,72,0.96) 0%, rgba(10,10,80,0.82) 100%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(80,80,200,0.3);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  transition: background var(--transition-slow);
  box-shadow: 0 1px 0 rgba(120,100,255,0.2), 0 4px 24px rgba(0,0,0,0.3);
}
.site-nav.scrolled {
  background: rgba(8,8,72,0.97);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
}
.nav-inner {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav-logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}
.nav-links a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--color-white); background: rgba(60,60,190,0.2); }
.nav-links a.active { color: var(--color-white); background: rgba(60,60,190,0.3); }
.nav-links a.active-accent {
  color: var(--color-white);
  background: rgba(60,60,190,0.4);
  border: 1px solid rgba(60,60,190,0.5);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(10,10,85,0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: linear-gradient(to bottom, rgba(14,14,88,0.7) 0%, rgba(8,8,55,0.9) 100%), var(--color-surface);
  border-top: 1px solid rgba(70,70,200,0.3);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(100,100,230,0.2);
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 110%, rgba(40,40,180,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.footer-logo img {
  height: 24px;
  width: auto;
  opacity: 0.5;
}
.footer-address {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}
.footer-line {
  width: 40px;
  height: 1px;
  background: var(--color-border);
}

/* ============================================================
   PAGE HERO BANNER (inner pages ~40vh)
   ============================================================ */
.page-hero {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + var(--space-16)) var(--space-8) var(--space-16);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 50%, var(--color-surface-2) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(80,80,240,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 55%, rgba(60,40,200,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 55%, rgba(60,40,200,0.11) 0%, transparent 60%);
  pointer-events: none;
  animation: hero-pulse 9s ease-in-out infinite;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80,80,220,0.4) 30%, rgba(120,100,255,0.5) 50%, rgba(80,80,220,0.4) 70%, transparent 100%);
  pointer-events: none;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.page-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.page-hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}
.page-hero-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
}
.page-hero-sub {
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.section {
  padding: clamp(var(--space-12), 6vw, var(--space-24)) var(--space-8);
}
.section-alt {
  background: linear-gradient(
    180deg,
    rgba(18,18,117,0.0) 0%,
    rgba(18,18,117,0.55) 8%,
    var(--color-surface) 20%,
    var(--color-surface) 80%,
    rgba(18,18,117,0.55) 92%,
    rgba(18,18,117,0.0) 100%
  );
}
.section-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.section-inner-default {
  max-width: var(--content-default);
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}
.section-title {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}
.section-rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(80,80,220,0.5);
}

/* Gradient section divider line */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80,80,220,0.3) 20%, rgba(120,100,255,0.45) 50%, rgba(80,80,220,0.3) 80%, transparent 100%);
  margin: 0;
  border: none;
  display: block;
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }
.fade-in-delay-5 { transition-delay: 0.5s; }

/* ============================================================
   PILL / BADGE
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, rgba(60,60,200,0.28) 0%, rgba(40,40,170,0.18) 100%);
  border: 1px solid rgba(90,90,230,0.45);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  box-shadow: inset 0 1px 0 rgba(120,120,255,0.15), 0 2px 8px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-bright);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: linear-gradient(160deg, rgba(26,26,140,0.55) 0%, rgba(18,18,117,0.4) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(100,100,255,0.7) 30%, rgba(160,130,255,0.9) 50%, rgba(100,100,255,0.7) 70%, transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card:hover {
  border-color: rgba(80,80,220,0.6);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 40px rgba(60,60,190,0.25), 0 0 80px rgba(60,60,190,0.1), 0 16px 40px rgba(0,0,0,0.4);
}
.stat-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #c0c8ff 60%, #a0a8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   BUTTON STYLES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #3030b0 0%, #4848cc 50%, #5050dd 100%);
  color: var(--color-white);
  border: 1px solid rgba(100,100,240,0.5);
  box-shadow: 0 4px 16px rgba(50,50,190,0.35), inset 0 1px 0 rgba(140,140,255,0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4444cc 0%, #6060e0 50%, #7070ee 100%);
  box-shadow: 0 0 32px rgba(80,80,220,0.5), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(160,160,255,0.3);
  transform: translateY(-2px);
  border-color: rgba(130,130,255,0.6);
}
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-accent-bright);
  color: var(--color-white);
  background: rgba(60,60,190,0.15);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
}
.btn-ghost:hover { color: var(--color-white); }

/* ============================================================
   TOOL CARDS (HOME PAGE)
   ============================================================ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.32);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(120,120,255,0.12);
}
/* Top-edge shimmer */
.tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(100,100,240,0.5) 30%, rgba(160,130,255,0.7) 50%, rgba(100,100,240,0.5) 70%, transparent 100%);
  opacity: 0.6;
  transition: opacity var(--transition);
  pointer-events: none;
}
/* Inner glow layer */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(80,80,220,0.18) 0%, transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.tool-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(90,90,230,0.65);
  box-shadow:
    0 0 40px rgba(60,60,190,0.28),
    0 0 80px rgba(60,60,190,0.12),
    0 20px 48px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(140,140,255,0.2);
  background: linear-gradient(160deg, rgba(28,28,155,0.6) 0%, rgba(18,18,120,0.48) 100%);
}
.tool-card:hover::before { opacity: 1; }
.tool-card:hover::after { opacity: 1; }

.tool-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(70,70,210,0.25) 0%, rgba(50,50,180,0.15) 100%);
  border: 1px solid rgba(90,90,230,0.35);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  box-shadow: inset 0 1px 0 rgba(130,130,255,0.15);
}
.tool-card:hover .tool-card-icon {
  background: linear-gradient(145deg, rgba(80,80,230,0.4) 0%, rgba(60,60,200,0.25) 100%);
  border-color: rgba(110,110,250,0.65);
  box-shadow: 0 0 16px rgba(80,80,220,0.3), inset 0 1px 0 rgba(150,150,255,0.25);
}
.tool-card-icon svg { color: #9090f0; transition: color var(--transition); }
.tool-card:hover .tool-card-icon svg { color: #b0b0f5; }

.tool-card-name {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.2;
}
.tool-card-desc {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.55;
  flex-grow: 1;
  max-width: none;
}
.tool-card-arrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: auto;
  transition: color var(--transition), gap var(--transition);
}
.tool-card:hover .tool-card-arrow {
  color: var(--color-accent-bright);
  gap: var(--space-3);
}

/* ============================================================
   LEADERBOARD TABLE
   ============================================================ */
.leaderboard-wrap {
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.32);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(120,120,255,0.1);
}
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}
.leaderboard-table thead tr {
  background: rgba(60,60,190,0.15);
  border-bottom: 1px solid var(--color-border);
}
.leaderboard-table th {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}
.leaderboard-table td {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text);
  border-bottom: 1px solid rgba(60,60,190,0.12);
}
.leaderboard-table tbody tr { transition: background var(--transition); }
.leaderboard-table tbody tr:hover { background: rgba(60,60,190,0.1); }
.leaderboard-table tbody tr:last-child td { border-bottom: none; }

.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
}
.rank-1 { background: rgba(201,168,76,0.15); color: var(--color-gold); border: 1px solid rgba(201,168,76,0.3); }
.rank-2 { background: rgba(155,163,180,0.12); color: var(--color-silver); border: 1px solid rgba(155,163,180,0.25); }
.rank-3 { background: rgba(192,120,73,0.12); color: var(--color-bronze); border: 1px solid rgba(192,120,73,0.25); }
.rank-other { background: rgba(60,60,190,0.1); color: var(--color-text-faint); border: 1px solid var(--color-border); }

.agent-name { font-weight: 600; color: var(--color-white); }

/* Filter pills */
.filter-pills {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.filter-pill {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-pill:hover { border-color: var(--color-accent-bright); color: var(--color-white); }
.filter-pill.active { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent-bright); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item {
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.32) 100%);
  border: 1px solid rgba(70,70,200,0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.faq-item:hover {
  border-color: rgba(90,90,230,0.55);
  box-shadow: 0 4px 24px rgba(60,60,190,0.15);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition);
}
.faq-q:hover { color: var(--color-white); }
.faq-q svg {
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform var(--transition), color var(--transition);
}
.faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--color-accent-bright); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 var(--space-6);
}
.faq-a-inner {
  padding-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
}
.faq-item.open .faq-a { max-height: 300px; }

/* ============================================================
   DOCUMENTS LIST
   ============================================================ */
.docs-list { display: flex; flex-direction: column; gap: var(--space-2); }
.doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.32) 100%);
  border: 1px solid rgba(70,70,200,0.3);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.doc-item:hover {
  border-color: rgba(90,90,230,0.55);
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(60,60,190,0.18);
}
.doc-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.doc-type {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-download {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60,60,190,0.15);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all var(--transition);
}
.doc-item:hover .doc-download { background: rgba(60,60,190,0.3); border-color: var(--color-accent-bright); color: var(--color-white); }

/* ============================================================
   ANNOUNCEMENT CARD
   ============================================================ */
.announcement-card {
  background: linear-gradient(135deg, rgba(30,26,120,0.55) 0%, rgba(18,15,90,0.45) 60%, rgba(25,18,100,0.5) 100%);
  border: 1px solid rgba(180,150,80,0.35);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.12), 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(220,190,100,0.12);
}
.announcement-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.35) 20%, rgba(201,168,76,0.65) 50%, rgba(201,168,76,0.35) 80%, transparent 100%);
  pointer-events: none;
}
.announcement-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(201,168,76,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.announcement-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.announcement-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.03em;
}
.announcement-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: none;
}

/* ============================================================
   INSTAGRAM / MEDIA STATS
   ============================================================ */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 800px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .insta-grid { grid-template-columns: 1fr; } }
.insta-card {
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.32) 100%);
  border: 1px solid rgba(70,70,200,0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.insta-value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}
.insta-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #5fca6a;
  margin-bottom: var(--space-2);
}
.insta-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.32);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(120,120,255,0.1);
}
.service-card:hover {
  border-color: rgba(90,90,230,0.6);
  transform: translateY(-4px) scale(1.005);
  box-shadow: 0 0 40px rgba(60,60,190,0.22), 0 16px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(130,130,255,0.15);
}
.service-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.service-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: none;
}

/* ============================================================
   QUICK LAUNCH BUTTONS
   ============================================================ */
.launch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 700px) { .launch-grid { grid-template-columns: repeat(2, 1fr); } }
.launch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.32);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  color: inherit;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(120,120,255,0.1);
}
.launch-btn:hover {
  background: linear-gradient(160deg, rgba(30,30,160,0.65) 0%, rgba(20,20,130,0.52) 100%);
  border-color: rgba(100,100,240,0.65);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 40px rgba(60,60,190,0.28), 0 16px 36px rgba(0,0,0,0.35);
}
.launch-btn-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60,60,190,0.2);
  border-radius: var(--radius-lg);
  color: #9090f0;
}
.launch-btn-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ============================================================
   BRAIN / CHAT
   ============================================================ */
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (max-width: 600px) { .prompt-grid { grid-template-columns: 1fr; } }
.prompt-card {
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.32) 100%);
  border: 1px solid rgba(70,70,200,0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.55;
  max-width: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.prompt-card:hover {
  border-color: rgba(100,100,240,0.65);
  color: var(--color-white);
  background: linear-gradient(160deg, rgba(30,30,160,0.55) 0%, rgba(20,20,130,0.42) 100%);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(60,60,190,0.2), 0 8px 24px rgba(0,0,0,0.3);
}
.chat-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: linear-gradient(135deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.35);
  border-radius: var(--radius-full, 9999px);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(120,120,255,0.12);
}
.chat-bar:focus-within {
  border-color: rgba(100,100,240,0.7);
  box-shadow: 0 0 0 3px rgba(60,60,190,0.2), 0 4px 24px rgba(0,0,0,0.3);
}
.chat-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-family: var(--font-body);
}
.chat-input::placeholder { color: var(--color-text-faint); }
.chat-send {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.chat-send:hover { background: var(--color-accent-bright); transform: scale(1.05); }

/* ============================================================
   TEAM RESOURCES GRID
   ============================================================ */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 700px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .resource-grid { grid-template-columns: 1fr; } }
.resource-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.32) 100%);
  border: 1px solid rgba(70,70,200,0.3);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.resource-card:hover {
  border-color: rgba(90,90,230,0.55);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(60,60,190,0.18), 0 8px 24px rgba(0,0,0,0.3);
}
.resource-card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,60,190,0.2);
  border-radius: var(--radius-md);
  color: #9090f0;
}
.resource-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ============================================================
   ONBOARDING CARDS
   ============================================================ */
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 600px) { .onboarding-grid { grid-template-columns: 1fr; } }
.onboarding-card {
  background: linear-gradient(160deg, rgba(26,26,140,0.55) 0%, rgba(16,16,110,0.42) 100%);
  border: 1px solid rgba(70,70,200,0.32);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(120,120,255,0.12);
}
.onboarding-card:hover {
  border-color: rgba(90,90,230,0.6);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 40px rgba(60,60,190,0.22), 0 0 80px rgba(60,60,190,0.1), 0 20px 48px rgba(0,0,0,0.4);
}
.onboarding-card-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,60,190,0.2);
  border: 1px solid rgba(60,60,190,0.3);
  border-radius: var(--radius-xl);
  color: #9090f0;
}
.onboarding-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}
.onboarding-card-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

/* ============================================================
   CONTENT INSIGHT BANNER
   ============================================================ */
.insight-banner {
  background: linear-gradient(135deg, rgba(50,50,200,0.28) 0%, rgba(30,30,160,0.15) 60%, rgba(40,30,170,0.2) 100%);
  border: 1px solid rgba(80,80,220,0.45);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(120,120,255,0.15);
}
.insight-big {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.insight-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  max-width: none;
}

/* ============================================================
   SQUAD LOCK BADGE
   ============================================================ */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ============================================================
   MICROSOFT SSO — LOGIN OVERLAY
   ============================================================ */

/* Full-screen login overlay */
#auth-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a55;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(60,60,210,0.2) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(80,40,200,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 90%, rgba(30,30,170,0.14) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
}

.auth-login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.auth-login-logo {
  width: clamp(180px, 50vw, 260px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.auth-login-hub {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(144, 144, 176, 0.7);
  margin-top: -12px;
}

.auth-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #3030b0 0%, #4848cc 50%, #5050dd 100%);
  color: #ffffff;
  border: 1px solid rgba(100,100,240,0.5);
  border-radius: 6px;
  padding: 14px 28px;
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(60, 60, 190, 0.4), inset 0 1px 0 rgba(140,140,255,0.2);
  white-space: nowrap;
}

.auth-signin-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4444cc 0%, #6060e0 50%, #7070ee 100%);
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(80,80,220,0.5), 0 8px 24px rgba(0,0,0,0.35);
}

.auth-signin-btn:active:not(:disabled) {
  transform: translateY(0);
}

.auth-signin-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-login-tagline {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(144, 144, 176, 0.55);
  letter-spacing: 0.03em;
}

.auth-login-error {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #e05555;
  background: rgba(224, 85, 85, 0.08);
  border: 1px solid rgba(224, 85, 85, 0.25);
  border-radius: 4px;
  padding: 10px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Nav user greeting + sign out ---- */
.auth-nav-user {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: 0;
}

.auth-nav-greeting {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(232, 232, 240, 0.75);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.auth-signout-btn {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(144, 144, 176, 0.6);
  background: transparent;
  border: 1px solid rgba(60, 60, 190, 0.4);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}

.auth-signout-btn:hover {
  color: #e8e8f0;
  border-color: rgba(60, 60, 190, 0.75);
  background: rgba(60, 60, 190, 0.15);
}

/* Mobile: stack user info below nav links or hide greeting */
@media (max-width: 768px) {
  .auth-nav-user {
    margin-left: 0;
    gap: 10px;
  }
  .auth-nav-greeting {
    display: none;
  }
}

/* ============================================================
   TC HUB — SQUAD PAGE STYLES
   Orange accent (#F37021) for the Squad page
   ============================================================ */

/* --- Squad-specific accent overrides --- */
.tc-eyebrow { color: #F37021; }
.tc-rule {
  background: linear-gradient(90deg, #F37021 0%, #FF8C33 100%);
  box-shadow: 0 0 12px rgba(243,112,33,0.5);
}

/* --- Hero overrides --- */
.tc-hero {
  min-height: 48vh;
}
.tc-hero::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(243,112,33,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 55%, rgba(243,112,33,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 55%, rgba(60,40,200,0.11) 0%, transparent 60%);
}
.tc-hero-home {
  color: var(--color-white);
}
.tc-hero-squad {
  color: #F37021;
}

/* --- Stat Pills --- */
.tc-stat-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  width: 100%;
  max-width: 740px;
  margin-top: var(--space-6);
}
@media (max-width: 700px) {
  .tc-stat-pills { grid-template-columns: repeat(2, 1fr); }
}
.tc-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(160deg, rgba(243,112,33,0.12) 0%, rgba(18,18,117,0.45) 100%);
  border: 1px solid rgba(243,112,33,0.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tc-stat-pill:hover {
  border-color: rgba(243,112,33,0.5);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(243,112,33,0.15), 0 8px 24px rgba(0,0,0,0.3);
}
.tc-stat-pill-value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.01em;
}
.tc-stat-pill-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Quick Launch Grid --- */
.tc-launch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 800px) { .tc-launch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .tc-launch-grid { grid-template-columns: 1fr; } }

.tc-launch-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: linear-gradient(145deg, rgba(243,112,33,0.15) 0%, rgba(243,112,33,0.06) 100%);
  border: 1px solid rgba(243,112,33,0.25);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(243,112,33,0.12);
}
.tc-launch-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.5) 30%, rgba(255,140,51,0.75) 50%, rgba(243,112,33,0.5) 70%, transparent 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.tc-launch-tile:hover {
  background: linear-gradient(145deg, rgba(243,112,33,0.28) 0%, rgba(243,112,33,0.12) 100%);
  border-color: rgba(243,112,33,0.55);
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 0 36px rgba(243,112,33,0.2), 0 16px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,160,80,0.2);
}
.tc-launch-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F37021 0%, #FF8C33 100%);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(243,112,33,0.35);
}
.tc-launch-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.tc-launch-arrow {
  font-size: var(--text-lg);
  color: #F37021;
  transition: transform var(--transition);
}
.tc-launch-tile:hover .tc-launch-arrow {
  transform: translateX(4px);
}

/* --- Team Deals Grid --- */
.tc-deals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .tc-deals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tc-deals-grid { grid-template-columns: 1fr; } }

/* Skeleton loader */
.tc-deal-skeleton {
  height: 160px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.32) 100%);
  border: 1px solid rgba(70,70,200,0.2);
  position: relative;
  overflow: hidden;
}
.tc-deal-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.06) 50%, transparent 100%);
  animation: tc-shimmer 1.6s ease-in-out infinite;
}
@keyframes tc-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Deal Card */
.tc-deal-card {
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(120,120,255,0.08);
}
.tc-deal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.35) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.tc-deal-card:hover {
  border-color: rgba(243,112,33,0.45);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 32px rgba(243,112,33,0.12), 0 16px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,160,80,0.12);
}
.tc-deal-card:hover::before { opacity: 1; }

.tc-deal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.tc-deal-volume {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
}
.tc-deal-address {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.tc-deal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
}
.tc-deal-agent {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}
.tc-deal-date {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
}

/* Badges */
.tc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tc-badge--closed  { background: rgba(52,199,89,0.15);  color: #34c759; border: 1px solid rgba(52,199,89,0.3); }
.tc-badge--pending { background: rgba(243,112,33,0.15); color: #F37021; border: 1px solid rgba(243,112,33,0.3); }
.tc-badge--active  { background: rgba(74,158,255,0.15); color: #4a9eff; border: 1px solid rgba(74,158,255,0.3); }
.tc-badge--hold    { background: rgba(240,192,64,0.15); color: #f0c040; border: 1px solid rgba(240,192,64,0.3); }
.tc-badge--dead    { background: rgba(140,140,160,0.12); color: #8888a8; border: 1px solid rgba(140,140,160,0.2); }

.tc-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* --- Kanban Board --- */
.tc-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1000px) { .tc-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .tc-kanban { grid-template-columns: 1fr; } }

.tc-kanban-col {
  background: linear-gradient(160deg, rgba(22,22,130,0.4) 0%, rgba(14,14,100,0.28) 100%);
  border: 1px solid rgba(70,70,200,0.22);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.tc-kanban-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(70,70,200,0.18);
  background: rgba(255,255,255,0.02);
}
.tc-kanban-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tc-kanban-col-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  flex: 1;
}
.tc-kanban-col-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-faint);
  background: rgba(60,60,190,0.15);
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
}
.tc-kanban-col-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
}
.tc-kanban-col-body::-webkit-scrollbar { width: 4px; }
.tc-kanban-col-body::-webkit-scrollbar-track { background: transparent; }
.tc-kanban-col-body::-webkit-scrollbar-thumb { background: rgba(243,112,33,0.3); border-radius: 4px; }

.tc-kanban-card {
  background: linear-gradient(160deg, rgba(30,30,145,0.5) 0%, rgba(18,18,110,0.38) 100%);
  border: 1px solid rgba(70,70,200,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: all var(--transition);
}
.tc-kanban-card:hover {
  border-color: rgba(243,112,33,0.4);
  background: linear-gradient(160deg, rgba(40,40,165,0.55) 0%, rgba(25,25,125,0.42) 100%);
  box-shadow: 0 0 16px rgba(243,112,33,0.1);
}
.tc-kanban-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tc-kanban-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F37021 0%, #FF8C33 100%);
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-white);
  flex-shrink: 0;
}
.tc-kanban-addr {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-kanban-vol {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
  padding-left: calc(28px + var(--space-3));
}
.tc-kanban-empty {
  text-align: center;
  padding: var(--space-6) var(--space-3);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* --- Deal Detail Panel --- */
.tc-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,40,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.tc-panel-overlay.open {
  opacity: 1;
  visibility: visible;
}

.tc-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 520px;
  max-width: 100vw;
  height: 100vh;
  z-index: 210;
  background: linear-gradient(180deg, rgba(14,14,88,0.96) 0%, rgba(10,10,65,0.98) 100%);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-left: 1px solid rgba(243,112,33,0.2);
  box-shadow: -8px 0 48px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.tc-detail-panel.open {
  transform: translateX(0);
}
.tc-detail-panel::-webkit-scrollbar { width: 4px; }
.tc-detail-panel::-webkit-scrollbar-track { background: transparent; }
.tc-detail-panel::-webkit-scrollbar-thumb { background: rgba(243,112,33,0.25); border-radius: 4px; }

.tc-panel-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60,60,190,0.15);
  border: 1px solid rgba(70,70,200,0.3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition);
  z-index: 5;
}
.tc-panel-close:hover {
  background: rgba(243,112,33,0.2);
  border-color: rgba(243,112,33,0.5);
  color: var(--color-white);
}

/* Phase Tracker */
.tc-phase-tracker {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--space-4) 0;
  margin-top: var(--space-4);
}
.tc-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.tc-phase-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(60,60,190,0.2);
  border: 2px solid rgba(70,70,200,0.4);
  transition: all var(--transition);
}
.tc-phase--active .tc-phase-dot {
  background: rgba(243,112,33,0.3);
  border-color: rgba(243,112,33,0.6);
}
.tc-phase--current .tc-phase-dot {
  background: #F37021;
  border-color: #FF8C33;
  box-shadow: 0 0 12px rgba(243,112,33,0.5);
}
.tc-phase-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.tc-phase--active .tc-phase-label { color: var(--color-text-muted); }
.tc-phase--current .tc-phase-label { color: #F37021; }

.tc-phase-line {
  flex: 1;
  height: 2px;
  background: rgba(70,70,200,0.25);
  margin: 0 var(--space-2);
  margin-bottom: calc(var(--space-2) + 0.65rem + 4px);
  transition: background var(--transition);
}
.tc-phase-line--filled {
  background: rgba(243,112,33,0.5);
}

/* Panel Tabs */
.tc-panel-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(70,70,200,0.2);
}
.tc-panel-tab {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.tc-panel-tab:hover { color: var(--color-text-muted); }
.tc-panel-tab.active {
  color: #F37021;
  border-bottom-color: #F37021;
}

/* Panel Content */
.tc-panel-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tc-panel-content--hidden { display: none; }

.tc-panel-address {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.tc-panel-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.tc-panel-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tc-panel-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.tc-panel-field-value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* Timeline */
.tc-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--space-4);
}
.tc-tl-item {
  display: flex;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-6);
}
.tc-tl-item:last-child { padding-bottom: 0; }
.tc-tl-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: rgba(70,70,200,0.2);
}
.tc-tl-item:last-child::before { display: none; }
.tc-tl--done::before { background: rgba(243,112,33,0.3); }
.tc-tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(60,60,190,0.2);
  border: 2px solid rgba(70,70,200,0.4);
  flex-shrink: 0;
  margin-top: 2px;
}
.tc-tl--done .tc-tl-dot {
  background: #F37021;
  border-color: #FF8C33;
  box-shadow: 0 0 8px rgba(243,112,33,0.4);
}
.tc-tl-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tc-tl-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.tc-tl-date {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Placeholder (documents/notes) */
.tc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}
.tc-placeholder-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tc-placeholder-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* --- Squad Tools Grid --- */
.tc-resource-grid {
  gap: var(--space-4);
}
.tc-resource-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(160deg, rgba(243,112,33,0.08) 0%, rgba(14,14,100,0.35) 100%);
  border: 1px solid rgba(243,112,33,0.18);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}
.tc-resource-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.35) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.tc-resource-card:hover {
  border-color: rgba(243,112,33,0.45);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(243,112,33,0.12), 0 8px 24px rgba(0,0,0,0.3);
}
.tc-resource-card:hover::before { opacity: 1; }

.tc-resource-card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(243,112,33,0.2) 0%, rgba(243,112,33,0.08) 100%);
  border: 1px solid rgba(243,112,33,0.25);
  border-radius: var(--radius-md);
  color: #F37021;
  transition: all var(--transition);
}
.tc-resource-card:hover .tc-resource-card-icon {
  background: linear-gradient(135deg, rgba(243,112,33,0.35) 0%, rgba(243,112,33,0.15) 100%);
  box-shadow: 0 0 12px rgba(243,112,33,0.25);
}
.tc-resource-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* --- Team Resources Duo --- */
.tc-resources-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 640px) { .tc-resources-duo { grid-template-columns: 1fr; } }

.tc-onboarding-card {
  background: linear-gradient(160deg, rgba(243,112,33,0.1) 0%, rgba(16,16,110,0.45) 100%);
  border: 1px solid rgba(243,112,33,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(243,112,33,0.1);
  position: relative;
  overflow: hidden;
}
.tc-onboarding-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.4) 20%, rgba(255,140,51,0.6) 50%, rgba(243,112,33,0.4) 80%, transparent 100%);
  pointer-events: none;
}
.tc-onboarding-card:hover {
  border-color: rgba(243,112,33,0.45);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 40px rgba(243,112,33,0.15), 0 0 80px rgba(243,112,33,0.06), 0 20px 48px rgba(0,0,0,0.4);
}
.tc-onboarding-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(243,112,33,0.2) 0%, rgba(243,112,33,0.08) 100%);
  border: 1px solid rgba(243,112,33,0.3);
  border-radius: var(--radius-xl);
  color: #F37021;
}
.tc-onboarding-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}
.tc-onboarding-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}
.tc-btn-outline {
  border-color: rgba(243,112,33,0.35);
  color: #F37021;
}
.tc-btn-outline:hover {
  border-color: #F37021;
  color: var(--color-white);
  background: rgba(243,112,33,0.15);
}

/* ============================================================
   SQUAD PAGE — APP-MATCHED REBUILD
   ============================================================ */

/* --- Squad Hero --- */
.squad-hero {
  position: relative;
  padding: calc(var(--space-16) + 80px) var(--space-6) var(--space-12);
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(243,112,33,0.12) 0%, transparent 60%),
              linear-gradient(180deg, var(--color-bg) 0%, #080844 100%);
}
.squad-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -55%);
  border: 2px solid rgba(243,112,33,0.08);
  border-radius: 50%;
  pointer-events: none;
}
.squad-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -55%);
  border: 1px solid rgba(243,112,33,0.04);
  border-radius: 50%;
  pointer-events: none;
}

.squad-ytd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 16px;
  background: rgba(243,112,33,0.15);
  border: 1px solid rgba(243,112,33,0.3);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F37021;
  margin-bottom: var(--space-6);
}

.squad-logo-text {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 0 40px rgba(243,112,33,0.5), 0 0 80px rgba(243,112,33,0.2);
  margin-bottom: var(--space-8);
  line-height: 1.1;
}
.squad-logo-text span {
  color: #F37021;
}

/* --- Squad Stats Row --- */
.squad-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .squad-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.squad-stat-card {
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.3) 100%);
  border: 1px solid rgba(70,70,200,0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.squad-stat-card--dimmed {
  opacity: 0.7;
}
.squad-stat-value {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.squad-stat-value--orange {
  color: #F37021;
}
.squad-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

/* Skeleton for stats */
.squad-stat-value .squad-skeleton {
  display: inline-block;
  width: 60px;
  height: 1.2em;
  background: linear-gradient(90deg, rgba(70,70,200,0.2) 25%, rgba(70,70,200,0.35) 50%, rgba(70,70,200,0.2) 75%);
  background-size: 200% 100%;
  animation: squad-skel-pulse 1.4s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
@keyframes squad-skel-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Quick Launch Grid --- */
.squad-launch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .squad-launch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .squad-launch-grid { grid-template-columns: repeat(2, 1fr); } }

.squad-launch-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 160px;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(160deg, rgba(243,112,33,0.12) 0%, rgba(14,14,100,0.4) 100%);
  border: 1px solid rgba(243,112,33,0.2);
  border-left: 4px solid #F37021;
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.squad-launch-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.5;
}
.squad-launch-tile:hover {
  transform: scale(1.04);
  border-color: rgba(243,112,33,0.5);
  box-shadow: 0 0 36px rgba(243,112,33,0.2), 0 12px 32px rgba(0,0,0,0.35);
}
.squad-launch-tile:hover .squad-launch-icon {
  box-shadow: 0 0 20px rgba(243,112,33,0.3);
}

.squad-launch-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(243,112,33,0.25) 0%, rgba(243,112,33,0.1) 100%);
  border: 1px solid rgba(243,112,33,0.3);
  border-radius: var(--radius-lg);
  color: #F37021;
  transition: all 0.3s ease;
}

.squad-launch-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}

/* --- My Deals Card --- */
.squad-deals-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(160deg, rgba(22,22,130,0.5) 0%, rgba(14,14,100,0.3) 100%);
  border: 1px solid rgba(70,70,200,0.25);
  border-left: 4px solid #F37021;
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  cursor: pointer;
  max-width: 100%;
}
.squad-deals-card:hover {
  border-color: rgba(243,112,33,0.45);
  transform: translateY(-3px);
  box-shadow: 0 0 32px rgba(243,112,33,0.12), 0 12px 32px rgba(0,0,0,0.3);
}
.squad-deals-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(243,112,33,0.25) 0%, rgba(243,112,33,0.1) 100%);
  border: 1px solid rgba(243,112,33,0.3);
  border-radius: var(--radius-lg);
  color: #F37021;
  flex-shrink: 0;
}
.squad-deals-text {
  flex: 1;
  min-width: 0;
}
.squad-deals-title {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-1);
}
.squad-deals-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.squad-deals-arrow {
  color: var(--color-text-faint);
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}
.squad-deals-card:hover .squad-deals-arrow {
  transform: translateX(4px);
  color: #F37021;
}

/* --- Squad Tools Grid --- */
.squad-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .squad-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .squad-tools-grid { grid-template-columns: 1fr; } }

.squad-tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(160deg, rgba(243,112,33,0.06) 0%, rgba(14,14,100,0.35) 100%);
  border: 1px solid rgba(243,112,33,0.15);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}
.squad-tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.squad-tool-card:hover {
  border-color: rgba(243,112,33,0.4);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(243,112,33,0.12), 0 12px 28px rgba(0,0,0,0.3);
}
.squad-tool-card:hover::before { opacity: 1; }

.squad-tool-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(243,112,33,0.2) 0%, rgba(243,112,33,0.08) 100%);
  border: 1px solid rgba(243,112,33,0.25);
  border-radius: var(--radius-md);
  color: #F37021;
}
.squad-tool-name {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}
.squad-tool-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* --- Squad Rankings --- */
.squad-rankings-card {
  background: linear-gradient(160deg, rgba(22,22,130,0.45) 0%, rgba(14,14,100,0.3) 100%);
  border: 1px solid rgba(70,70,200,0.22);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.squad-rankings-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(70,70,200,0.18);
}
.squad-rankings-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  flex: 1;
}
.squad-rankings-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-faint);
  background: rgba(60,60,190,0.15);
  padding: 2px 10px;
  border-radius: 9999px;
}
.squad-rankings-body {
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.squad-rank-row {
  display: grid;
  grid-template-columns: 28px 40px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(70,70,200,0.08);
}
.squad-rank-row:last-child { border-bottom: none; }

.squad-rank-num {
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: center;
}
.squad-rank-num--top { color: #F37021; }
.squad-rank-num--other { color: var(--color-text-faint); }

.squad-rank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.squad-rank-info {
  min-width: 0;
}
.squad-rank-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.squad-rank-bar-wrap {
  height: 4px;
  background: rgba(70,70,200,0.15);
  border-radius: 2px;
  margin-top: var(--space-1);
  overflow: hidden;
}
.squad-rank-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.squad-rank-bar--top {
  background: linear-gradient(90deg, #F37021, #FF8C33);
}
.squad-rank-bar--other {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
}

.squad-rank-vol {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-white);
  text-align: right;
  white-space: nowrap;
}
.squad-rank-units {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-faint);
  text-align: right;
  white-space: nowrap;
}

/* Rankings skeleton */
.squad-rank-skeleton {
  height: 52px;
  background: linear-gradient(90deg, rgba(70,70,200,0.12) 25%, rgba(70,70,200,0.2) 50%, rgba(70,70,200,0.12) 75%);
  background-size: 200% 100%;
  animation: squad-skel-pulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* --- Team Resources Duo (squad-specific overrides) --- */
.squad-resources-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 640px) { .squad-resources-duo { grid-template-columns: 1fr; } }

.squad-resource-card {
  background: linear-gradient(160deg, rgba(243,112,33,0.1) 0%, rgba(16,16,110,0.45) 100%);
  border: 1px solid rgba(243,112,33,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(243,112,33,0.1);
  position: relative;
  overflow: hidden;
}
.squad-resource-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,112,33,0.4) 20%, rgba(255,140,51,0.6) 50%, rgba(243,112,33,0.4) 80%, transparent 100%);
  pointer-events: none;
}
.squad-resource-card:hover {
  border-color: rgba(243,112,33,0.45);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 40px rgba(243,112,33,0.15), 0 0 80px rgba(243,112,33,0.06), 0 20px 48px rgba(0,0,0,0.4);
}

.squad-resource-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(243,112,33,0.2) 0%, rgba(243,112,33,0.08) 100%);
  border: 1px solid rgba(243,112,33,0.3);
  border-radius: var(--radius-xl);
  color: #F37021;
}
.squad-resource-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}
.squad-resource-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}
.squad-resource-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 24px;
  border: 1px solid rgba(243,112,33,0.35);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F37021;
  background: transparent;
  transition: all 0.3s ease;
  margin-top: var(--space-2);
}
.squad-resource-card:hover .squad-resource-btn {
  border-color: #F37021;
  color: var(--color-white);
  background: rgba(243,112,33,0.15);
}

/* ============================================================
   SQUAD PAGE — GAME-FEEL ANIMATIONS & VISUAL OVERHAUL
   ============================================================ */

/* --- Hero Logo Image (replaces text) --- */
.squad-hero-logo {
  margin-bottom: var(--space-8);
  line-height: 0;
  display: flex;
  justify-content: center;
}
.squad-hero-logo-img {
  max-width: 500px;
  width: 80vw;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(243,112,33,0.4));
}

/* --- Team Deals Card: Logo + Hub Note --- */
.squad-deals-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.squad-deals-logo {
  max-height: 36px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(243,112,33,0.25));
}
.squad-deals-hub-note {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* --- Team Deals Card: Enhanced Hover --- */
.squad-deals-card:hover {
  border-color: rgba(243,112,33,0.55);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(243,112,33,0.15), 0 0 40px rgba(243,112,33,0.2), 0 0 80px rgba(243,112,33,0.08), 0 16px 40px rgba(0,0,0,0.35);
}
.squad-deals-card:hover .squad-deals-arrow {
  transform: translateX(6px);
  color: #F37021;
}

/* --- Floating Particles Container --- */
.squad-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.squad-particle {
  position: absolute;
  border-radius: 50%;
  background: #F37021;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Keep hero content above particles */
.squad-hero > *:not(.squad-hero-particles) {
  position: relative;
  z-index: 1;
}

/* --- Ambient Aurora Gradient (hero background) --- */
.squad-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(243,112,33,0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg) 0%, #080844 100%);
}
.squad-hero::after {
  /* Keep existing ring, add aurora layer via a separate pseudo */
}

/* Aurora overlay on the hero */
.squad-hero-particles::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse 40% 50% at 30% 40%, rgba(243,112,33,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 35% 45% at 70% 30%, rgba(60,100,220,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 70%, rgba(243,112,33,0.06) 0%, transparent 50%);
  animation: squad-aurora 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes squad-aurora {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  25% {
    transform: translate(5%, -3%) rotate(2deg);
  }
  50% {
    transform: translate(-3%, 5%) rotate(-1deg);
  }
  75% {
    transform: translate(4%, 2%) rotate(3deg);
  }
  100% {
    transform: translate(-2%, -4%) rotate(-2deg);
  }
}

/* --- Page Entrance Animations --- */
.anim-entrance,
.anim-tile,
.anim-stat {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.anim-tile {
  transform: translateY(32px) scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.anim-stat {
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Section Title Text Reveal (clip-path) --- */
.anim-text-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-text-revealed {
  clip-path: inset(0 0% 0 0);
}

/* --- Quick Launch Tiles: Game-Feel Hover --- */
.squad-launch-tile {
  will-change: transform, box-shadow;
}
.squad-launch-tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,0.12) 45%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.12) 55%,
    transparent 65%
  );
  pointer-events: none;
  transition: none;
}
.squad-launch-tile:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 1px #F37021, 0 0 30px rgba(243,112,33,0.4), 0 0 60px rgba(243,112,33,0.15);
  border-color: #F37021;
}
.squad-launch-tile:hover::after {
  animation: squad-shimmer 0.7s ease-out forwards;
}
.squad-launch-tile:hover .squad-launch-icon {
  transform: rotate(3deg) scale(1.08);
  box-shadow: 0 0 24px rgba(243,112,33,0.4);
}
.squad-launch-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

@keyframes squad-shimmer {
  0% { left: -100%; }
  100% { left: 120%; }
}

/* --- Rankings: Animated Progress Bars --- */
.squad-rank-bar--animating {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top 3 bars get a pulsing glow */
.squad-rank-bar--top.squad-rank-bar--animating {
  box-shadow: 0 0 8px rgba(243,112,33,0.4), 0 0 20px rgba(243,112,33,0.15);
  animation: squad-bar-glow 2s ease-in-out infinite;
}

@keyframes squad-bar-glow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(243,112,33,0.3), 0 0 16px rgba(243,112,33,0.1);
  }
  50% {
    box-shadow: 0 0 12px rgba(243,112,33,0.5), 0 0 28px rgba(243,112,33,0.2);
  }
}

/* --- Reduced Motion: respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .anim-entrance,
  .anim-tile,
  .anim-stat {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .anim-text-reveal {
    clip-path: none;
    transition: none;
  }
  .squad-hero-particles,
  .squad-hero-particles::before {
    display: none;
  }
  .squad-launch-tile::after {
    display: none;
  }
  .squad-rank-bar--animating {
    transition: none;
  }
  .squad-rank-bar--top.squad-rank-bar--animating {
    animation: none;
    box-shadow: none;
  }
  @keyframes squad-aurora {
    0%, 100% { transform: none; }
  }
  @keyframes squad-shimmer {
    0%, 100% { left: -100%; }
  }
  @keyframes squad-bar-glow {
    0%, 100% { box-shadow: none; }
  }
}

/* ============================================================
   PHONE MOCKUP SECTION
   ============================================================ */
.phone-section {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.phone-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(243,112,33,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.phone-section-inner {
  display: flex;
  align-items: center;
  gap: 80px;
  min-height: 520px;
}
.phone-section-text {
  flex: 1;
}
.phone-headline {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  color: white;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
}
.phone-headline span {
  color: rgba(255,255,255,0.35);
  font-weight: 300;
}
.phone-sub {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 380px;
}
.phone-cta {
  display: inline-flex;
}
.phone-mockups {
  flex-shrink: 0;
  position: relative;
  width: 320px;
  height: 460px;
}
.phone-wrap {
  position: absolute;
}
.phone-back {
  right: 0;
  top: 30px;
  transform: rotate(4deg);
  opacity: 0.7;
  z-index: 1;
}
.phone-front {
  left: 0;
  top: 0;
  transform: rotate(-3deg);
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,30,0.5));
}

/* Phone Device Frame */
.phone-mockup {
  width: 220px;
  height: 440px;
  background: #0a0a55;
  border-radius: 32px;
  border: 3px solid rgba(255,255,255,0.15);
  box-shadow:
    0 0 0 1px rgba(80,80,200,0.3),
    0 30px 80px rgba(0,0,30,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
/* Notch */
.phone-mockup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 24px;
  background: #0a0a55;
  border-radius: 0 0 16px 16px;
  z-index: 10;
  border: 2px solid rgba(255,255,255,0.1);
  border-top: none;
}
/* Status bar time */
.phone-mockup::after {
  content: '9:41';
  position: absolute;
  top: 6px;
  left: 16px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  z-index: 11;
}

/* Phone Screen Content */
.phone-screen {
  padding: 32px 12px 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-header {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  text-align: center;
}
.ps-eyebrow {
  font-size: 7px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-bottom: 8px;
}
.ps-rank-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}
.ps-num {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  width: 12px;
}
.ps-gold { color: #c9a84c; }
.ps-silver { color: #9ba3b4; }
.ps-bronze { color: #c07849; }
.ps-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(60,60,190,0.5);
  font-size: 7px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-name {
  font-size: 9px;
  color: white;
  flex: 1;
}
.ps-vol {
  font-size: 9px;
  font-weight: 700;
  color: #F37021;
}
.ps-nav {
  font-size: 11px;
  font-weight: 800;
  color: white;
  text-align: center;
  margin-bottom: 12px;
}
.ps-stat-row {
  display: flex;
  gap: 8px;
}
.ps-stat {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.ps-stat-val {
  font-size: 14px;
  font-weight: 800;
  color: #F37021;
}
.ps-stat-lbl {
  font-size: 7px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
}

/* Mini tools grid inside phone */
.ps-tools-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.ps-tool-item {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 900px) {
  .phone-section-inner {
    flex-direction: column;
    gap: 40px;
    align-items: center;
    text-align: center;
  }
  .phone-section-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .phone-headline {
    text-align: center;
  }
  .phone-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .phone-features {
    text-align: left;
    width: 100%;
    max-width: 360px;
  }
  .phone-cta {
    display: flex;
    justify-content: center;
    width: auto !important;
  }
  .phone-back {
    display: none;
  }
  .phone-mockups {
    width: 220px;
    height: 440px;
  }
  .phone-wrap.phone-front {
    left: 0;
    transform: none;
  }
}

/* ============================================================
   UPDATED FOOTER — MINIMAL BAR
   ============================================================ */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-copy,
.footer-addr {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
  font-family: 'Montserrat', sans-serif;
}
@media (max-width: 600px) {
  .footer-bottom-bar {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* ============================================================
   TOOL CARD UPGRADE — Rich gradients, sweep shimmer, depth
   ============================================================ */

/* Override tool-card with richer treatment */
.tool-card {
  background: linear-gradient(145deg,
    rgba(25,25,140,0.55) 0%,
    rgba(15,15,100,0.4) 40%,
    rgba(20,20,120,0.45) 100%) !important;
  border: 1px solid rgba(80,80,220,0.3) !important;
  box-shadow:
    0 4px 24px rgba(0,0,10,0.3),
    0 1px 0 rgba(120,120,255,0.1) inset,
    0 -1px 0 rgba(0,0,50,0.3) inset !important;
  position: relative;
  overflow: hidden;
}

/* Sweep shimmer on hover */
.tool-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(150,150,255,0.06) 40%,
    rgba(180,160,255,0.12) 50%,
    rgba(150,150,255,0.06) 60%,
    transparent 100%);
  opacity: 0;
  transition: left 0.55s ease, opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
.tool-card:hover::after {
  left: 140%;
  opacity: 1;
}

/* Icon gets an orange shimmer on hover */
.tool-card:hover .tool-card-icon {
  background: linear-gradient(145deg, rgba(90,80,240,0.4) 0%, rgba(60,50,200,0.28) 100%) !important;
  border-color: rgba(130,120,255,0.7) !important;
  box-shadow:
    0 0 20px rgba(100,80,240,0.35),
    0 0 6px rgba(180,160,255,0.2),
    inset 0 1px 0 rgba(180,160,255,0.25) !important;
}

/* Premium card hover */
.tool-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(110,100,250,0.7) !important;
  box-shadow:
    0 0 0 1px rgba(110,100,250,0.2),
    0 0 40px rgba(80,60,220,0.3),
    0 0 80px rgba(80,60,220,0.12),
    0 24px 60px rgba(0,0,20,0.5),
    inset 0 1px 0 rgba(160,140,255,0.25) !important;
  background: linear-gradient(145deg,
    rgba(32,32,165,0.65) 0%,
    rgba(20,20,130,0.5) 40%,
    rgba(26,26,148,0.55) 100%) !important;
}

/* Arrow gets a color pop */
.tool-card:hover .tool-card-arrow {
  color: #a0a0ff !important;
  gap: 10px !important;
}


/* Phone features list */
.phone-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
.phone-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6868ee;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(104,104,238,0.6);
}

/* ============================================================
   HOME SQUAD PATTERN OVERLAY
   ============================================================ */
.squad-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: url('assets/home-squad-pattern.jpg');
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   HOME SQUAD LOGO KIT
   ============================================================ */
.hs-logo-kit-section { background: var(--color-bg); }
.hs-kit-intro {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 40px;
  text-align: center;
}
.hs-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .hs-logo-grid { grid-template-columns: 1fr; }
}
.hs-logo-card {
  background: rgba(243,112,33,0.06);
  border: 1px solid rgba(243,112,33,0.18);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hs-logo-card:hover {
  border-color: rgba(243,112,33,0.4);
  box-shadow: 0 8px 30px rgba(243,112,33,0.08);
}
.hs-logo-preview {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  position: relative;
  overflow: hidden;
}
.hs-lp-light {
  background: #ffffff;
}
.hs-lp-light img {
  max-height: 70px;
  max-width: 100%;
  object-fit: contain;
}
.hs-lp-dark {
  background: linear-gradient(135deg, #0a0a55 0%, #121275 100%);
}
.hs-lp-pattern {
  background-image: url('assets/home-squad-pattern.jpg');
  background-size: 180px;
  background-repeat: repeat;
  background-color: #0a0a55;
}
.hs-lp-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,85,0.82);
}
.hs-bb-label {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 800;
  color: white;
  letter-spacing: 3px;
  text-align: center;
}
.hs-bb-sub {
  position: relative;
  z-index: 1;
  font-size: 11px;
  color: #F37021;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 6px;
}
.hs-logo-info { padding: 18px 22px 22px; display: flex; flex-direction: column; }
.hs-logo-name { font-size: 15px; font-weight: 800; color: white; margin-bottom: 5px; }
.hs-logo-desc { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.55; margin-bottom: 16px; }
.hs-logo-variants { display: flex; flex-direction: column; gap: 9px; }
.hs-logo-variant { display: flex; align-items: center; gap: 8px; }
.hs-lv-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.hs-lv-label { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 600; flex: 1; }
.hs-lv-btn {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(243,112,33,0.15);
  border: 1px solid rgba(243,112,33,0.3);
  border-radius: 6px;
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
.hs-lv-btn:hover {
  background: rgba(243,112,33,0.3);
  border-color: rgba(243,112,33,0.6);
  color: white;
}

/* ============================================================
   LOGO KIT — SHARED (resources + squad)
   ============================================================ */
.logo-packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .logo-packages-grid { grid-template-columns: 1fr; }
}
.logo-package-card {
  background: rgba(18,18,117,0.35);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(80,80,200,0.22);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.logo-package-card:hover {
  border-color: rgba(104,104,238,0.4);
  box-shadow: 0 8px 30px rgba(104,104,238,0.1);
}
.logo-preview {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  position: relative;
  overflow: hidden;
}
.logo-preview.lp-dark {
  background: linear-gradient(135deg, #0a0a55 0%, #121275 100%);
}
.logo-preview.lp-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(104,104,238,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.logo-preview.lp-light {
  background: #ffffff;
}
.logo-preview img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.logo-preview.lp-mark img { max-height: 64px; }
.logo-preview.lp-wide img  { max-height: 40px; }
.logo-package-info { padding: 20px 24px 24px; }
.logo-package-name { font-size: 15px; font-weight: 800; color: white; letter-spacing: -0.01em; margin-bottom: 4px; }
.logo-package-desc { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.55; margin-bottom: 18px; }
.logo-variants { display: flex; flex-direction: column; gap: 10px; }
.logo-variant { display: flex; align-items: center; gap: 8px; }
.lv-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.lv-dot.lv-white  { background:#fff; border:1px solid rgba(255,255,255,0.25); box-shadow:0 0 0 1px rgba(255,255,255,0.08); }
.lv-dot.lv-blue   { background:#121275; border:1px solid rgba(104,104,238,0.5); box-shadow:0 0 6px rgba(18,18,117,0.6); }
.lv-dot.lv-black  { background:#111; border:1px solid rgba(255,255,255,0.12); }
.lv-dot.lv-orange { background:#F37021; border:1px solid rgba(243,112,33,0.4); }
.lv-dot.lv-gray   { background:#888; border:1px solid rgba(255,255,255,0.15); }
.lv-dot.lv-blue-orange {
  background: linear-gradient(90deg, #121275 50%, #F37021 50%);
  border: 1px solid rgba(255,255,255,0.1);
}
.lv-dot.lv-gray-orange {
  background: linear-gradient(90deg, #888 50%, #F37021 50%);
  border: 1px solid rgba(255,255,255,0.1);
}
.lv-dot.lv-white-orange {
  background: linear-gradient(90deg, #fff 50%, #F37021 50%);
  border: 1px solid rgba(255,255,255,0.2);
}
.lv-label { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 600; flex: 1; min-width: 0; }
.lv-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: rgba(104,104,238,0.12); border: 1px solid rgba(104,104,238,0.22);
  border-radius: 6px; padding: 5px 11px; text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s; flex-shrink: 0;
}
.lv-btn:hover { background: rgba(104,104,238,0.28); color: white; border-color: rgba(104,104,238,0.5); }