/* SpeedRDP custom design tokens (mirrors the original :root variables) */
:root {
	--background: 0 0% 100%;
	--foreground: 0 0% 9%;

	--primary: 354 70% 54%;
	--primary-foreground: 0 0% 100%;
	--primary-hover: 354 70% 48%;

	--secondary: 0 0% 15%;
	--secondary-foreground: 0 0% 100%;

	--accent: 0 0% 96%;
	--accent-foreground: 0 0% 9%;

	--muted: 0 0% 96%;
	--muted-foreground: 0 0% 45%;

	--card: 0 0% 100%;
	--card-foreground: 0 0% 9%;

	--border: 0 0% 89%;
	--input: 0 0% 89%;
	--ring: 354 70% 54%;

	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 100%;

	--popover: 0 0% 100%;
	--popover-foreground: 0 0% 9%;

	--radius: 0.75rem;
	--gradient-hero: linear-gradient(135deg, hsl(0 0% 15%) 0%, hsl(0 0% 9%) 100%);
	--gradient-card: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 96%) 100%);
	--gradient-dark: linear-gradient(135deg, hsl(0 0% 9%) 0%, hsl(0 0% 6%) 100%);
	--gradient-dark-accent: linear-gradient(135deg, hsl(0 0% 9%) 0%, hsl(354 70% 54% / 0.1) 100%);
	--shadow-soft: 0 2px 10px hsl(0 0% 9% / 0.1);
	--shadow-medium: 0 8px 30px hsl(0 0% 9% / 0.12);
	--shadow-strong: 0 20px 40px hsl(0 0% 9% / 0.15);
	--shadow-glow: 0 0 40px hsl(354 70% 54% / 0.15);
	--shadow-dark: 0 10px 40px hsl(0 0% 0% / 0.3);
}

* {
	border-color: hsl(var(--border));
}

/* Reset native button chrome — without this, browsers/OS apply native widget
   styling (background, sizing) to <button> elements that our utility classes
   can't override, since `background-color` is ignored while native appearance
   is active. */
button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
	border: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	margin: 0;
}

/* Elementor (and similar page builders) inject global button styling with
   higher CSS specificity than a bare `button` selector, which overrides the
   reset above. Force our own nav/accordion buttons back to the intended
   transparent/utility look regardless of any site-wide Elementor Kit styles. */
header .nav-trigger,
header #speedrdp-mobile-toggle,
.accordion-trigger {
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0.5rem !important;
	color: hsl(var(--foreground)) !important;
	height: 2.75rem !important;
	min-height: 0 !important;
	padding: 0 1rem !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
header .nav-trigger:hover,
header #speedrdp-mobile-toggle:hover {
	background-color: hsl(var(--accent) / 0.5) !important;
}
.accordion-trigger {
	height: auto !important;
	padding: 1rem 0 !important;
	width: 100% !important;
}

/* Lock the header to its intended height — without this, any inflated button
   padding (from Elementor's global styles or elsewhere) can stretch the fixed
   header taller than expected, pushing it down over the hero content below. */
header.fixed {
	height: 5rem !important;
	overflow: visible !important;
}
header.fixed > .container-wide,
header.fixed > .container-wide > div:first-child {
	height: 5rem !important;
}

/* Page builders (Elementor etc.) commonly reset default padding/margin on
   bare <section> elements site-wide with high specificity, which silently
   eats into the Tailwind pt-24/pt-32 utility on our hero sections and lets
   the badge/heading render underneath the fixed header. Lock it down here
   with !important so it can't be stripped regardless of load order. */
.site-hero-section {
	padding-top: 9rem !important;
}
@media (min-width: 768px) {
	.site-hero-section {
		padding-top: 10rem !important;
	}
}

body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-feature-settings: "cv03", "cv04", "cv11";
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

html {
	scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', 'Inter', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

p { line-height: 1.7; }

.container-wide {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) { .container-wide { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-wide { padding-left: 2rem; padding-right: 2rem; } }

.section-padding { padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 640px) { .section-padding { padding-top: 1.5rem; padding-bottom: 1.5rem; } }
@media (min-width: 768px) { .section-padding { padding-top: 2rem; padding-bottom: 2rem; } }
@media (min-width: 1024px) { .section-padding { padding-top: 3rem; padding-bottom: 3rem; } }

.gradient-text {
	background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary)), hsl(var(--primary-hover)));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.bg-gradient-dark { background-image: var(--gradient-dark); }
.bg-gradient-hero { background-image: var(--gradient-hero); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-dark { box-shadow: var(--shadow-dark); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-strong { box-shadow: var(--shadow-strong); }

/* Navigation dropdown behavior (desktop) */
.nav-trigger svg { transition: transform 0.2s ease; }
.group:hover .nav-panel { display: block; }
.group:hover .nav-trigger svg { transform: rotate(180deg); }
.nav-panel { z-index: 60; }

/* Accordion (FAQ) */
.accordion-item { border-bottom: 1px solid hsl(var(--border) / 0.5); }
.accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	cursor: pointer;
	background: none;
	border: none;
}
.accordion-trigger svg { transition: transform 0.2s ease; flex-shrink: 0; }
.accordion-item.is-open .accordion-trigger svg { transform: rotate(180deg); }
.accordion-content { display: none; }
.accordion-item.is-open .accordion-content { display: block; }

/* Hero badge ping animation */
@keyframes speedrdp-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: speedrdp-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Mobile menu toggle */
#speedrdp-mobile-menu.hidden,
.nav-panel.hidden { display: none; }

/* The mobile mega-menu can be taller than the viewport once expanded (4
   sections + auth buttons). Without its own scroll region, anything past
   the bottom of the screen is unreachable. Cap it to the space below the
   fixed header and let it scroll independently. */
#speedrdp-mobile-menu {
	max-height: calc(100vh - 5rem) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}