@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Custom Color Overrides to perfectly match the Cyber Navy & Neon Electric Blue Logo */
  /* Slate: Re-mapped to a deep obsidian and cyber-midnight navy space palette */
  --color-slate-950: #02050e; /* Logo deepest shadow/background */
  --color-slate-900: #040d21; /* Dark navy card background */
  --color-slate-800: #0f1f42; /* Medium cyber-navy borders and dividers */
  --color-slate-700: #1b3263;
  --color-slate-600: #2b4987;
  --color-slate-500: #4265aa;
  --color-slate-400: #718cc4; /* Silver-steel metallic tone */
  --color-slate-300: #a2b4dc;
  --color-slate-200: #d1daf0;
  --color-slate-100: #f0f3fa;

  /* Cyan & Blue: Re-mapped to the intense electric cerulean, glowing neon, and laser laser blue of the logo */
  --color-cyan-300: #54d4ff; /* Highly energetic cyan-blue glow */
  --color-cyan-400: #00b4ff; /* Vibrant metallic blue brand hero text/highlights */
  --color-cyan-500: #0088ff; /* Vibrant electric cobalt main action button state */
  --color-cyan-600: #005fcc; /* Base primary brand color */
  
  --color-blue-400: #2aa5ff;
  --color-blue-500: #007bff;
  --color-blue-600: #0052cc;
  
  --color-indigo-400: #5c8aff;
  --color-indigo-500: #3b6cff;
  --color-indigo-600: #1a49cc;
}

@keyframes spin-clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-counter {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.animate-spin-clockwise {
  animation: spin-clockwise 150s linear infinite;
}

.animate-spin-counter {
  animation: spin-counter 190s linear infinite;
}

.animate-spin-fast-clockwise {
  animation: spin-clockwise 70s linear infinite;
}

.animate-spin-fast-counter {
  animation: spin-counter 80s linear infinite;
}

html {
    scroll-behavior: smooth;
}

body {
	background: radial-gradient(circle at 8% -8%, rgba(27, 214, 200, .22), transparent 34%), radial-gradient(circle at 92% 5%, rgba(139, 92, 246, .24), transparent 34%), radial-gradient(circle at 50% 105%, rgba(59, 130, 246, .14), transparent 38%), #07111f;
	height: 100%;
	min-height: 100vh;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	position: relative;
}

/* Reusable */
.section-container {
	width: 100%;
	padding: 24px;
}

.card {
	background: linear-gradient(180deg, #ffffff80, #ffffff05);
	border: 1px solid #ffffff14;
	border-radius: 28px;
	box-shadow: 0 28px 90px #00000038;
}

.list-heading {
	color: #1bd6c8;
	display: flex;
	flex-direction: row;
}

.list-heading > li {
	display: flex;
	align-items: center;
}

.list-heading li:not(:first-child)::before {
	content: "•";
  margin-right: 8px;
  margin-left: 8px;
}

.section-heading {	
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13px;
	font-weight: 950;
}

/* Navigation */
.nav-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 20px;
}

.nav-brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	color: #ffffff;
}

.nav-brand > img {
	width: 100px;
	height: auto;
}

.nav-brand > .nav-mark {
	width: 40px;
  height: 40px;
  border-radius: 15px;
  background: linear-gradient(135deg, #1bd6c8, #3b82f6, #8b5cf6);
  display: grid;
  place-items: center;
  box-shadow: 0 0 28px rgba(27, 214, 200, .26);
  transition: .35s ease;
}

.nav-brand > .nav-brand-text {
	display: flex;
	flex-direction: column;
}

.nav-brand > .nav-brand-text > h4 {
	font-weight: 700;
	text-transform: uppercase;
}

.nav-brand > .nav-brand-text > span {
	color: #a8b8cf;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 750;
	letter-spacing: .08em;
}

.nav-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 25px;	
}

.nav-burger-menu {
	display: none;
}

.nav-backdrop {
	display: none;
}

ul.nav-wrapper > li > a {
	color: #718cc4;	
	transition: all 0.5s ease;
	font-size: 14px;
}

ul.nav-wrapper > li > a:hover {
	color: #ffffff;	
}

/* Landing Page */

main#main-page {
	min-height: 100vh;
	padding-left: 15px;
	padding-right: 15px;
}

h1.title {
	margin: 0;
  max-width: 850px;
  font-size: clamp(42px, 6.4vw, 82px);
  line-height: .95;
  letter-spacing: -0.025em;
	font-weight: 700;
	margin-bottom: 20px;
}

h1.title > .gradient-text {
	background: linear-gradient(90deg, #1bd6c8, #3b82f6, #8b5cf6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

p.subtitle {
	margin: 22px 0 0;
  max-width: 760px;
  color: #a8b8cf;
}

.subtitle-lg {
	font-size: 18px;
}

.subtitle-sm {
	font-size: 14px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Hero Component */
div#presenter::after {
	content: '';
	background: linear-gradient(180deg, #00000000, #22D3EE10, #22D3EE90);
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	border-radius: 50%;
}

#partners-track {
	display: flex;
	width: max-content;
  gap: 2rem;

  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
	animation: marquee 20s linear infinite;
}

#partners-track:hover, #partners-track.track-pause {
	animation-play-state: paused;
}

#scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 15px;
	background: #02050e50;
	border-radius: 20px;
	cursor: pointer;
  z-index: 999;
	transition: all 0.3s ease;
}

#scroll-to-top:hover {
	background: #02050e;
}

@media (max-width: 799px) {
	.nav-wrapper {
		display: none;
	}
	
	.nav-burger-menu {
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	
	.nav-backdrop {
		display: flex;
		position: fixed;
    inset: 0;
		background: #00000050;
		justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
	}
	
	.nav-backdrop.open {
		opacity: 1;
		visibility: visible;
	}
	
	.nav-backdrop > sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
		background: #02050e;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
    z-index: 999;
		visibility: hidden;
		animation: slideFromRight 1s ease-out;
	}
	
	.nav-backdrop > sidebar.open {
		visibility: visible;
	}
	
	.side-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 15px;	
		position: relative;
	}
	
	.side-close {
		position: absolute;
		top: 20px;
		right: 30px;
		cursor: pointer;
	}
	
	#partners-track {
		animation-duration: 16s;
	}
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}