/* Block 1 */
.future-hero {
position: relative;
width: 100%;
min-height: 85vh;
display: flex;
align-items: center;
background-image: url('banner_bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
margin-bottom: 0;
}

.future-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(10, 15, 30, 0.9) 0%, rgba(20, 30, 60, 0.7) 100%);
z-index: 1;
}

.future-hero-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to top, #ffffff, transparent);
z-index: 1;
}

.future-hero > .container {
position: relative;
z-index: 2;
}

.future-badge {
display: inline-block;
padding: 8px 24px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
margin-bottom: 2rem;
}

.future-title {
font-size: 3.5rem;
font-weight: 800;
color: #ffffff;
line-height: 1.1;
margin-bottom: 1.5rem;
letter-spacing: -1px;
}

.future-subtitle {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 2.5rem;
font-weight: 300;
}

.btn-cyber {
background: transparent;
color: #ffffff;
border: 2px solid #0d6efd;
background: rgba(13, 110, 253, 0.1);
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
}

.btn-cyber::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}

.btn-cyber:hover {
background: #0d6efd;
color: #ffffff;
box-shadow: 0 0 20px rgba(13, 110, 253, 0.6);
transform: translateY(-2px);
border-color: #0d6efd;
}

.btn-cyber:hover::after {
left: 100%;
}

@media (max-width: 991.98px) {
.future-title {
font-size: 2.5rem;
}
.future-hero {
background-attachment: scroll;
min-height: 70vh;
}
}

@media (max-width: 575.98px) {
.future-title {
font-size: 2rem;
}
.future-subtitle {
font-size: 1rem;
}
.btn-cyber {
width: 100%;
}
}

/* Block 2 */
.quantum-ecosystem {
padding: 6rem 0;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
color: #ffffff;
position: relative;
overflow: hidden;
}
.quantum-ecosystem::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.ecosystem-header {
position: relative;
z-index: 1;
margin-bottom: 5rem;
}
.ecosystem-tag {
display: inline-block;
padding: 0.5rem 1.5rem;
border-radius: 50px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #a5b4fc;
margin-bottom: 1.5rem;
font-weight: 600;
}
.ecosystem-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(to right, #ffffff, #c7d2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.ecosystem-desc {
font-size: 1.15rem;
color: #94a3b8;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.ecosystem-visual {
position: relative;
z-index: 1;
}
.visual-card {
position: relative;
border-radius: 1rem;
overflow: hidden;
transform: perspective(1000px) rotateY(-5deg);
transition: transform 0.5s ease;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.visual-card:hover {
transform: perspective(1000px) rotateY(0deg);
}
.visual-card img {
width: 100%;
display: block;
transition: transform 0.5s ease;
}
.visual-card:hover img {
transform: scale(1.05);
}
.visual-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 2rem;
background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent);
display: flex;
gap: 2rem;
}
.overlay-stat {
text-align: left;
}
.stat-value {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: #818cf8;
}
.stat-label {
font-size: 0.85rem;
color: #cbd5e1;
text-transform: uppercase;
letter-spacing: 1px;
}
.feature-block {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2rem;
border-radius: 1rem;
transition: all 0.3s ease;
}
.feature-block:hover {
background: rgba(255, 255, 255, 0.07);
transform: translateY(-5px);
border-color: rgba(129, 140, 248, 0.3);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}
.feature-icon-box {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
margin-right: 1.5rem;
flex-shrink: 0;
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
}
.feature-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #f1f5f9;
}
.feature-text {
font-size: 0.95rem;
color: #94a3b8;
line-height: 1.6;
margin-bottom: 0;
}
.ecosystem-cta {
position: relative;
z-index: 1;
margin-top: 5rem;
}
.btn-ecosystem {
display: inline-block;
padding: 1rem 3rem;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
color: #ffffff;
background: linear-gradient(90deg, #4f46e5, #8b5cf6);
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.btn-ecosystem::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.btn-ecosystem:hover::after {
transform: translateX(100%);
}
.btn-ecosystem:hover {
box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
transform: scale(1.05);
}
@media (max-width: 991px) {
.ecosystem-title {
font-size: 2.25rem;
}
.visual-card {
transform: none;
margin-bottom: 2rem;
}
.visual-card:hover {
transform: none;
}
.visual-overlay {
padding: 1.5rem;
}
.overlay-stat {
flex: 1;
}
}

/* Block 3 */
.immersive-analytics-section {
padding: 8rem 0;
background-color: #0b0e14;
background-image: radial-gradient(circle at 10% 20%, rgba(64, 224, 208, 0.05) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(138, 43, 226, 0.05) 0%, transparent 40%);
color: #e2e8f0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
}

.section-header-row {
margin-bottom: 2rem;
}

.section-preheader {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}

.preheader-line {
width: 40px;
height: 2px;
background-color: #40e0d0;
box-shadow: 0 0 10px #40e0d0;
}

.preheader-text {
color: #40e0d0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.85rem;
font-weight: 700;
}

.section-heading {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 0;
background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.section-paragraph {
font-size: 1.125rem;
line-height: 1.8;
color: #94a3b8;
margin-top: 1.5rem;
}

.data-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 2.5rem 2rem;
border-radius: 1.5rem;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27), box-shadow 0.4s ease;
height: 100%;
}

.data-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.1);
}

.card-icon-wrapper {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: #0b0e14;
}

.bg-accent-1 {
background: linear-gradient(135deg, #40e0d0, #2f8f8f);
}

.bg-accent-2 {
background: linear-gradient(135deg, #ff00cc, #9900cc);
}

.bg-accent-3 {
background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.card-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #f1f5f9;
}

.card-description {
font-size: 1rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 2rem;
}

.feature-list {
list-style: none;
padding: 0;
margin: 0;
}

.feature-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: #94a3b8;
}

.feature-list i {
color: #40e0d0;
}

.analytics-visual-wrapper {
position: relative;
border-radius: 2rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.analytics-visual {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
filter: brightness(0.9) contrast(1.1);
}

.analytics-visual:hover {
transform: scale(1.02);
filter: brightness(1) contrast(1);
}

.visual-caption {
margin-top: 1rem;
color: #64748b;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}

@media (max-width: 991px) {
.section-heading {
font-size: 2.25rem;
}
.immersive-analytics-section {
padding: 5rem 0;
}
}

/* Block 4 */
.contact-form-section {
padding: 6rem 0;
background: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 100%);
position: relative;
overflow: hidden;
}
.contact-form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
}
.contact-form-wrapper {
background: rgba(30, 41, 59, 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 3rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.form-title {
color: #f8fafc;
font-weight: 700;
font-size: 2.5rem;
letter-spacing: -0.025em;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.form-subtitle {
color: #94a3b8;
font-size: 1.125rem;
line-height: 1.6;
}
.input-group-wrapper {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.form-label {
color: #e2e8f0;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0;
}
.input-container {
position: relative;
display: flex;
align-items: center;
}
.cyber-form .form-control {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 12px;
padding: 1rem 1rem 1rem 3rem;
color: #f1f5f9;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.cyber-form .form-control:focus {
background: rgba(15, 23, 42, 0.8);
border-color: #38bdf8;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15), inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
outline: none;
color: #ffffff;
}
.cyber-form .form-control::placeholder {
color: #64748b;
}
.input-icon {
position: absolute;
left: 1rem;
color: #64748b;
transition: color 0.3s ease;
pointer-events: none;
}
.input-container:focus-within .input-icon {
color: #38bdf8;
}
.btn-submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
padding: 1.25rem;
background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
border: none;
border-radius: 12px;
color: #ffffff;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
cursor: pointer;
z-index: 1;
}
.btn-submit::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
z-index: -1;
transition: opacity 0.3s ease;
opacity: 0;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.5);
}
.btn-submit:hover::before {
opacity: 1;
}
.btn-submit:active {
transform: translateY(0);
}
.btn-icon {
font-size: 1.25rem;
}
.form-disclaimer {
color: #64748b;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.contact-form-wrapper {
padding: 2rem 1.5rem;
}
.form-title {
font-size: 2rem;
}
}