/* STREAMING_CHUNK:Defining CSS custom properties and design tokens... */
:root {
--cursor-size: 20px;
--cursor-follower-size: 40px;
--accent-cyan: #00F0FF;
--accent-purple: #7000FF;
--accent-pink: #FF007A;
--accent-gold: #FFB800;
--bg-dark: #030712;
--panel-bg: rgba(11, 15, 25, 0.65);
--border-glass: rgba(255, 255, 255, 0.08);
--border-glow: rgba(0, 240, 255, 0.4);
--font-syne: 'Syne', sans-serif;
--font-sans: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}

/* STREAMING_CHUNK:Configuring global reset and core body layout... */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
background-color: var(--bg-dark);
color: #F3F4F6;
}

body {
background-color: var(--bg-dark);
color: #F3F4F6;
font-family: var(--font-sans);
overflow-x: hidden;
cursor: none;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* STREAMING_CHUNK:Styling custom pointer and trailing cursor physics... */
#custom-cursor {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: var(--cursor-size);
height: var(--cursor-size);
border-radius: 50%;
background: rgba(0, 240, 255, 0.4);
border: 1px solid rgba(0, 240, 255, 0.8);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
transform: translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
z-index: 9999;
backdrop-filter: blur(2px);
}

#custom-cursor.cursor-hover {
width: 50px;
height: 50px;
background: rgba(112, 0, 255, 0.3);
border-color: rgba(0, 240, 255, 1);
box-shadow: 0 0 30px rgba(112, 0, 255, 0.8);
}

#cursor-follower {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: var(--cursor-follower-size);
height: var(--cursor-follower-size);
border-radius: 50%;
border: 1px solid rgba(112, 0, 255, 0.3);
transform: translate(-50%, -50%);
transition: transform 0.15s ease-out;
z-index: 9998;
}

/* STREAMING_CHUNK:Setting up canvas background and ambient glow orbs... */
#bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
}

.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.25;
pointer-events: none;
animation: orb-pulse 8s ease-in-out infinite alternate;
}

@keyframes orb-pulse {
0% { transform: scale(1) translate(0, 0); opacity: 0.2; }
50% { transform: scale(1.15) translate(20px, -20px); opacity: 0.35; }
100% { transform: scale(0.9) translate(-15px, 15px); opacity: 0.25; }
}

/* STREAMING_CHUNK:Building glassmorphic components and card containers... */
.glass-panel {
background: var(--panel-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-glass);
}

.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
backdrop-filter: blur(12px);
border: 1px solid var(--border-glass);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
border-color: var(--border-glow);
box-shadow: 0 10px 40px -10px rgba(0, 240, 255, 0.15);
transform: translateY(-4px);
}

/* STREAMING_CHUNK:Styling typography, text gradients, and headline effects... */
.text-gradient {
background: linear-gradient(135deg, #FFFFFF 0%, #A5B4FC 50%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.text-gradient-purple {
background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.font-syne { font-family: var(--font-syne); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* STREAMING_CHUNK:Configuring custom scrollbars for webkit browsers... */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: #1F2937;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-cyan);
}

/* STREAMING_CHUNK:Styling infinite ticker marquee animations... */
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}

.animate-marquee {
display: flex;
width: 200%;
animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
animation-play-state: paused;
}

/* STREAMING_CHUNK:Styling interactive Scope Calculator UI steps... */
.calc-step {
transition: opacity 0.3s ease, transform 0.3s ease;
}

.calc-option.selected {
border-color: var(--accent-cyan) !important;
background: rgba(0, 240, 255, 0.08);
box-shadow: 0 0 25px rgba(0, 240, 255, 0.2);
}

.calc-speed.selected {
border-color: var(--accent-purple) !important;
background: rgba(112, 0, 255, 0.08);
box-shadow: 0 0 25px rgba(112, 0, 255, 0.2);
}

/* STREAMING_CHUNK:Styling modal overlays and SaaS admin dashboard... */
#admin-modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}

#admin-modal.hidden {
opacity: 0;
pointer-events: none;
}

/* STREAMING_CHUNK:Adding utility animations and responsiveness overrides... */
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); }
50% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.8); }
}

.glow-btn {
animation: pulse-glow 3s infinite;
}