/* ===================================
   Biblos AI - Main Stylesheet
   Design épuré, innovant avec effets néon
   Style Apple/Startup SaaS
   =================================== */

/* ===================================
   Variables CSS
   =================================== */
:root {
	/* Couleurs principales - Inspirées des documents */
	--color-primary: #6366f1;
	--color-primary-light: #818cf8;
	--color-primary-dark: #4f46e5;
	--color-secondary: #8b5cf6;
	--color-accent: #ec4899;

	/* Couleurs neutres */
	--color-dark: #0f172a;
	--color-dark-light: #1e293b;
	--color-dark-lighter: #334155;
	--color-gray: #64748b;
	--color-light-gray: #cbd5e1;
	--color-white: #ffffff;
	--color-off-white: #f8fafc;

	/* Effets néon */
	--neon-glow: 0 0 20px rgba(99, 102, 241, 0.6),
		0 0 40px rgba(99, 102, 241, 0.4), 0 0 60px rgba(99, 102, 241, 0.2);

	--neon-glow-hover: 0 0 30px rgba(99, 102, 241, 0.8),
		0 0 60px rgba(99, 102, 241, 0.6), 0 0 90px rgba(99, 102, 241, 0.4);

	/* Typographie */
	--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;

	/* Espacements */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 6rem;

	/* Bordures */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--font-main);
	background: var(--color-dark);
	color: var(--color-white);
	line-height: 1.6;
	overflow-x: hidden;
}

/* ===================================
   Typography
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
}

h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
	font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
	margin-bottom: 1rem;
}

a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-normal);
}

/* ===================================
   Container & Layout
   =================================== */
.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* ===================================
   Header & Navigation
   =================================== */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(15, 23, 42, 0.8);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem var(--spacing-md);
}

.nav-logo a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.logo-icon {
	font-size: 1.5rem;
	color: var(--color-primary);
	text-shadow: var(--neon-glow);
}

.logo-text {
	letter-spacing: 0.05em;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.nav-list {
	display: flex;
	list-style: none;
	gap: var(--spacing-md);
}

.nav-link {
	font-weight: 500;
	position: relative;
	padding: 0.5rem 0;
}

.nav-link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-primary);
	transition: var(--transition-normal);
	box-shadow: var(--neon-glow);
}

.nav-link:hover::after {
	width: 100%;
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--color-white);
	font-size: 1.5rem;
	cursor: pointer;
}

/* ===================================
   Buttons
   =================================== */
.btn {
	display: inline-block;
	padding: 0.875rem 2rem;
	border-radius: var(--radius-full);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: all var(--transition-normal);
	border: 2px solid transparent;
	font-size: 1rem;
	white-space: nowrap;
}

.btn-neon {
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: var(--neon-glow);
	position: relative;
	overflow: hidden;
}

.btn-neon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn-neon:hover::before {
	width: 300px;
	height: 300px;
}

.btn-neon:hover {
	box-shadow: var(--neon-glow-hover);
	transform: translateY(-2px);
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-white);
}

.btn-outline:hover {
	background: var(--color-primary);
	box-shadow: var(--neon-glow);
}

.btn-large {
	padding: 1.125rem 2.5rem;
	font-size: 1.125rem;
}

/* ===================================
   Hero Section
   =================================== */
.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: 100px;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 800px;
	height: 800px;
	background: radial-gradient(
		circle,
		rgba(99, 102, 241, 0.15) 0%,
		transparent 70%
	);
	border-radius: 50%;
	animation: pulse 8s infinite;
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

.hero-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: center;
	position: relative;
	z-index: 1;
}

.hero-title {
	margin-bottom: var(--spacing-md);
}

.title-gradient {
	background: linear-gradient(
		135deg,
		var(--color-primary) 0%,
		var(--color-secondary) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-subtitle {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	color: var(--color-light-gray);
	margin-bottom: var(--spacing-md);
	font-weight: 400;
}

.hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: var(--spacing-md);
}

.tag {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: var(--radius-full);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary-light);
}

.hero-description {
	font-size: 1.125rem;
	color: var(--color-light-gray);
	margin-bottom: var(--spacing-md);
	line-height: 1.8;
}

.hero-cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Hero Visual */
.hero-visual {
	position: relative;
	height: 500px;
}

.hero-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	animation: rotate 20s linear infinite;
	box-shadow: var(--neon-glow);
}

.hero-circle::before,
.hero-circle::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 2px solid var(--color-secondary);
}

.hero-circle::before {
	top: 50px;
	left: 50px;
	right: 50px;
	bottom: 50px;
	animation: rotate 15s linear infinite reverse;
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.hero-circle::after {
	top: 100px;
	left: 100px;
	right: 100px;
	bottom: 100px;
	animation: rotate 10s linear infinite;
	box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.hero-shape {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	animation: morph 8s ease-in-out infinite;
	box-shadow: var(--neon-glow-hover);
}

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

@keyframes morph {
	0%,
	100% {
		border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	}
	25% {
		border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
	}
	50% {
		border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
	}
	75% {
		border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
	}
}

/* ===================================
   Section Styles
   =================================== */
section {
	padding: var(--spacing-xl) 0;
}

.section-header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto var(--spacing-lg);
}

.section-title {
	margin-bottom: var(--spacing-sm);
}

.section-subtitle {
	font-size: 1.25rem;
	color: var(--color-light-gray);
	font-weight: 400;
}

/* ===================================
   Assistants Overview Section
   =================================== */
.assistants-overview {
	background: linear-gradient(
		180deg,
		var(--color-dark) 0%,
		var(--color-dark-light) 100%
	);
}

.assistants-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.assistant-card {
	background: rgba(30, 41, 59, 0.5);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.assistant-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--color-primary),
		var(--color-secondary)
	);
	transform: scaleX(0);
	transition: var(--transition-normal);
}

.assistant-card:hover {
	transform: translateY(-5px);
	border-color: var(--color-primary);
	box-shadow: var(--neon-glow);
}

.assistant-card:hover::before {
	transform: scaleX(1);
}

.assistant-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	margin-bottom: var(--spacing-sm);
	box-shadow: var(--neon-glow);
}

.assistant-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-sm);
}

.assistant-services {
	list-style: none;
	color: var(--color-light-gray);
}

.assistant-services li {
	padding: 0.5rem 0;
	padding-left: 1.5rem;
	position: relative;
}

.assistant-services li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--color-primary);
}

/* ===================================
   Assistants Details Section
   =================================== */
.assistants-details {
	background: var(--color-dark-light);
}

.assistant-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: center;
	margin-bottom: var(--spacing-xl);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	background: rgba(30, 41, 59, 0.3);
}

.assistant-detail.reverse {
	grid-template-columns: 1fr 1fr;
}

.assistant-detail.reverse .detail-visual {
	order: -1;
}

.detail-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: var(--spacing-sm);
	box-shadow: var(--neon-glow);
}

.detail-title {
	font-size: 2rem;
	margin-bottom: var(--spacing-sm);
}

.detail-description {
	font-size: 1.125rem;
	color: var(--color-light-gray);
	margin-bottom: var(--spacing-md);
}

.detail-benefits h4 {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-sm);
	color: var(--color-primary-light);
}

.detail-benefits ul {
	list-style: none;
}

.detail-benefits li {
	padding: 0.75rem 0;
	padding-left: 2rem;
	position: relative;
	color: var(--color-light-gray);
}

.detail-benefits li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: bold;
	font-size: 1.25rem;
}

/* Visual Elements */
.detail-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

.visual-chart {
	width: 100%;
	height: 300px;
	background: rgba(99, 102, 241, 0.05);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(99, 102, 241, 0.2);
	display: flex;
	align-items: flex-end;
	padding: var(--spacing-md);
	position: relative;
	overflow: hidden;
}

.chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	width: 100%;
	height: 100%;
}

.bar {
	flex: 1;
	background: linear-gradient(
		180deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	animation: growBar 1s ease-out;
	box-shadow: var(--neon-glow);
}

@keyframes growBar {
	from {
		height: 0;
	}
}

.visual-docs,
.visual-legal,
.visual-social,
.visual-sales,
.visual-studio {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	justify-content: center;
}

.doc-icon,
.legal-icon,
.social-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	box-shadow: var(--neon-glow);
	animation: float 3s ease-in-out infinite;
}

.doc-icon:nth-child(2),
.social-icon:nth-child(2) {
	animation-delay: 0.5s;
}

.doc-icon:nth-child(3),
.social-icon:nth-child(3) {
	animation-delay: 1s;
}

.social-icon:nth-child(4) {
	animation-delay: 1.5s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.sales-chart {
	width: 200px;
	height: 200px;
	background: rgba(99, 102, 241, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 2px solid var(--color-primary);
	box-shadow: var(--neon-glow);
}

.trend-line {
	width: 120px;
	height: 80px;
	border-bottom: 3px solid var(--color-primary);
	border-right: 3px solid var(--color-primary);
	border-radius: 0 0 var(--radius-md) 0;
	position: relative;
}

.trend-line::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-top: 3px solid var(--color-secondary);
	border-radius: 0 var(--radius-md) 0 0;
	transform-origin: bottom right;
	transform: rotate(-45deg);
}

.sales-chart i {
	position: absolute;
	font-size: 3rem;
	color: var(--color-primary);
	animation: slideUp 2s ease-in-out infinite;
}

@keyframes slideUp {
	0%,
	100% {
		transform: translateY(10px);
	}
	50% {
		transform: translateY(-10px);
	}
}

.studio-grid {
	display: grid;
	grid-template-columns: repeat(2, 100px);
	gap: 1rem;
}

.studio-box {
	width: 100px;
	height: 100px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-md);
	box-shadow: var(--neon-glow);
	animation: rotate 10s linear infinite;
}

.studio-box:nth-child(2) {
	animation-delay: 2.5s;
}

.studio-box:nth-child(3) {
	animation-delay: 5s;
}

.studio-box:nth-child(4) {
	animation-delay: 7.5s;
}

/* ===================================
   Security Section
   =================================== */
.security-section {
	background: var(--color-dark);
}

.security-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.security-card {
	background: rgba(30, 41, 59, 0.5);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	transition: all var(--transition-normal);
}

.security-card:hover {
	transform: translateY(-5px);
	border-color: var(--color-primary);
	box-shadow: var(--neon-glow);
}

.security-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	margin-bottom: var(--spacing-sm);
	box-shadow: var(--neon-glow);
}

.security-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-sm);
}

.security-description {
	color: var(--color-light-gray);
	margin-bottom: var(--spacing-sm);
	line-height: 1.8;
}

.security-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: var(--radius-full);
	font-size: 0.875rem;
	color: var(--color-primary-light);
	font-weight: 600;
}

.security-certifications {
	text-align: center;
	padding: var(--spacing-lg);
	background: rgba(30, 41, 59, 0.3);
	border-radius: var(--radius-lg);
	margin-top: var(--spacing-lg);
}

.security-certifications h3 {
	margin-bottom: var(--spacing-md);
}

.certif-badges {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.certif-badge {
	padding: 0.75rem 1.5rem;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-full);
	font-weight: 600;
	box-shadow: var(--neon-glow);
}

/* ===================================
   Values Section
   =================================== */
.values-section {
	background: linear-gradient(
		180deg,
		var(--color-dark-light) 0%,
		var(--color-dark) 100%
	);
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.value-card {
	background: rgba(30, 41, 59, 0.5);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.value-card:hover {
	transform: translateY(-5px);
	border-color: var(--color-primary);
	box-shadow: var(--neon-glow);
}

.value-number {
	position: absolute;
	top: var(--spacing-sm);
	right: var(--spacing-sm);
	font-size: 3rem;
	font-weight: 700;
	color: rgba(99, 102, 241, 0.1);
}

.value-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(
		135deg,
		var(--color-primary),
		var(--color-secondary)
	);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	margin-bottom: var(--spacing-sm);
	box-shadow: var(--neon-glow);
}

.value-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-sm);
}

.value-list {
	list-style: none;
	color: var(--color-light-gray);
}

.value-list li {
	padding: 0.75rem 0;
	padding-left: 2rem;
	position: relative;
	line-height: 1.6;
}

.value-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: bold;
	font-size: 1.25rem;
}

/* ===================================
   CTA Section
   =================================== */
.cta-section {
	background: linear-gradient(
		135deg,
		var(--color-primary) 0%,
		var(--color-secondary) 100%
	);
	padding: var(--spacing-xl) 0;
	position: relative;
	overflow: hidden;
}

.cta-section::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.1) 1px,
		transparent 1px
	);
	background-size: 50px 50px;
	animation: moveGrid 20s linear infinite;
}

@keyframes moveGrid {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(50px, 50px);
	}
}

.cta-content {
	text-align: center;
	position: relative;
	z-index: 1;
}

.cta-title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-sm);
}

.cta-description {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	opacity: 0.9;
}

.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.cta-section .btn-neon {
	background: var(--color-white);
	color: var(--color-primary);
}

.cta-section .btn-outline {
	border-color: var(--color-white);
	color: var(--color-white);
}

.cta-section .btn-outline:hover {
	background: var(--color-white);
	color: var(--color-primary);
}

/* ===================================
   CTA Center
   =================================== */
.cta-center {
	text-align: center;
	margin-top: var(--spacing-lg);
}

/* ===================================
   Footer
   =================================== */
.footer {
	background: var(--color-dark-light);
	padding: var(--spacing-xl) 0 var(--spacing-md);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: var(--spacing-sm);
}

.footer-tagline {
	color: var(--color-light-gray);
	margin-bottom: var(--spacing-md);
	line-height: 1.6;
}

.footer-social {
	display: flex;
	gap: 1rem;
}

.social-link {
	width: 40px;
	height: 40px;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-normal);
}

.social-link:hover {
	background: var(--color-primary);
	box-shadow: var(--neon-glow);
	transform: translateY(-3px);
}

.footer-title {
	font-size: 1.125rem;
	margin-bottom: var(--spacing-sm);
	color: var(--color-white);
}

.footer-links {
	list-style: none;
}

.footer-links li {
	margin-bottom: 0.5rem;
}

.footer-links a {
	color: var(--color-light-gray);
	transition: var(--transition-normal);
}

.footer-links a:hover {
	color: var(--color-primary);
	padding-left: 5px;
}

.footer-contact {
	list-style: none;
}

.footer-contact li {
	display: flex;
	align-items: start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	color: var(--color-light-gray);
}

.footer-contact i {
	color: var(--color-primary);
	margin-top: 0.25rem;
}

.footer-bottom {
	padding-top: var(--spacing-md);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.footer-legal {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.footer-legal a {
	color: var(--color-light-gray);
	font-size: 0.875rem;
	transition: var(--transition-normal);
}

.footer-legal a:hover {
	color: var(--color-primary);
}

.separator {
	color: var(--color-gray);
}

.footer-copyright {
	color: var(--color-gray);
	font-size: 0.875rem;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
	.hero-content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-visual {
		height: 400px;
	}

	.hero-circle {
		width: 300px;
		height: 300px;
	}

	.hero-cta {
		justify-content: center;
	}

	.assistant-detail {
		grid-template-columns: 1fr;
	}

	.assistant-detail.reverse .detail-visual {
		order: 0;
	}
}

@media (max-width: 768px) {
	.nav-menu {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		background: var(--color-dark);
		flex-direction: column;
		justify-content: center;
		transition: var(--transition-normal);
		z-index: 999;
	}

	.nav-menu.active {
		right: 0;
	}

	.nav-list {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-md);
	}

	.nav-toggle {
		display: block;
		z-index: 1000;
	}

	.hero {
		padding-top: 80px;
		min-height: auto;
	}

	.hero-tags {
		justify-content: center;
	}

	.hero-visual {
		display: none;
	}

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

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

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

	.footer-content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-social {
		justify-content: center;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.footer-legal {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	:root {
		--spacing-xl: 3rem;
		--spacing-lg: 2rem;
	}

	.btn {
		width: 100%;
	}

	.hero-cta {
		width: 100%;
	}

	.hero-cta .btn {
		width: 100%;
	}

	.cta-buttons .btn {
		width: 100%;
	}
}