/* Block 1 */
.hero-section {
position: relative;
min-height: 85vh;
overflow: hidden;
background-color: #0f172a;
font-family: system-ui, -apple-system, sans-serif;
}

.hero-background img {
transition: transform 10s ease-out;
}

.hero-section:hover .hero-background img {
transform: scale(1.05);
}

.hero-overlay {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.8) 100%);
backdrop-filter: blur(2px);
}

.hero-title {
letter-spacing: -0.02em;
line-height: 1.1;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.text-accent {
background: linear-gradient(90deg, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero-subtitle {
font-size: 1.25rem;
line-height: 1.6;
font-weight: 300;
}

.btn-primary {
background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
border: none;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.5);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 20px 35px -10px rgba(59, 130, 246, 0.6);
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}

.btn-outline-light {
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}

.btn-outline-light:hover {
background-color: rgba(255, 255, 255, 1);
color: #0f172a;
border-color: #ffffff;
transform: translateY(-2px);
}

.z-1 {
position: relative;
z-index: 1;
}

/* Simple Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.animate-fade-up {
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
opacity: 0;
}

.animate-fade-up-delay-1 {
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
opacity: 0;
}

.animate-fade-up-delay-2 {
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-section {
min-height: 75vh;
}
}

/* Block 2 */
.future-docs-ecosystem {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #0f172a;
  color: #ffffff;
  padding: 4rem 0;
  overflow: hidden;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.section-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 400px;
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.docs-interface-wrapper {
  min-height: 600px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.interface-sidebar {
  flex: 0 0 100%;
  max-width: 100%;
  z-index: 10;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.interface-main {
  flex: 1;
  min-height: 400px;
}

.bg-main-img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.future-docs-ecosystem:hover .bg-main-img {
  transform: scale(1.05);
}

.overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0) 100%);
  z-index: 1;
}

.floating-widgets-container {
  z-index: 2;
  position: relative;
}

.widget-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  max-width: 320px;
}

.widget-right {
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.widget-left {
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.future-docs-ecosystem:hover .widget-right {
  transform: translateX(-10px);
}

.future-docs-ecosystem:hover .widget-left {
  transform: translateX(10px);
}

.card-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 0 none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.card-glass:hover {
  transform: translateX(5px);
  background: rgba(255, 255, 255, 0.06);
}

.icon-box {
  width: 36px;
  height: 36px;
}

@media (min-width: 992px) {
  .interface-sidebar {
    flex: 0 0 400px;
    max-width: 400px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .interface-main {
    position: relative;
  }
}

/* Block 3 */
.quantum-security-vault {
position: relative;
z-index: 1;
padding: 6rem 0;
overflow: hidden;
background-color: #0b0e14;
background-image: 
radial-gradient(circle at 15% 50%, rgba(13, 110, 253, 0.08) 0%, transparent 25%),
radial-gradient(circle at 85% 30%, rgba(25, 135, 84, 0.05) 0%, transparent 25%);
}
.text-gradient-quantum {
background: linear-gradient(135deg, #0dcaf0 0%, #0d6efd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.chip-label .badge {
font-weight: 600;
letter-spacing: 0.5px;
font-size: 0.85rem;
}
.feature-icon-box {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.feature-item:hover .feature-icon-box {
transform: translateY(-5px);
}
.vault-card-3d {
background: rgba(22, 27, 34, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.vault-card-3d:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.status-indicator {
width: 10px;
height: 10px;
box-shadow: 0 0 10px currentColor;
}
.active-pulse {
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}
.encryption-grid {
grid-template-columns: 1fr 1fr;
}
.grid-cell {
transition: all 0.3s ease;
}
.grid-cell:hover {
background-color: rgba(13, 110, 253, 0.2);
color: #fff;
cursor: default;
}
.scan-line {
animation: scan-vertical 2.5s linear infinite;
}
@keyframes scan-vertical {
0% { top: 0%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.floating-badge-1 {
top: -20px;
right: -20px;
z-index: 2;
animation: float 6s ease-in-out infinite;
}
.floating-badge-2 {
bottom: 40px;
left: -30px;
z-index: 2;
animation: float 6s ease-in-out infinite 3s;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.text-accent {
color: #0dcaf0 !important;
}
.bg-accent {
background-color: #0dcaf0 !important;
}
.border-accent {
border-color: #0dcaf0 !important;
}
.bg-glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.bg-glass-high {
background: rgba(255, 255, 255, 0.08);
}
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.border-dashed {
border-style: dashed;
}
.font-monospace {
font-family: var(--bs-font-monospace);
}

/* Block 4 */
.order-form-section {
padding: 6rem 0;
position: relative;
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
overflow: hidden;
}

.order-form-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
z-index: 0;
pointer-events: none;
animation: rotateBackground 30s linear infinite;
}

@keyframes rotateBackground {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.form-wrapper {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.input-group-modern {
position: relative;
}

.input-group-modern .form-control {
border-radius: 0.75rem;
padding: 1rem 3rem 1rem 1.25rem;
height: auto;
color: #ffffff;
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}

.input-group-modern .form-control:focus {
background: rgba(15, 23, 42, 0.6);
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
color: #ffffff;
}

.input-group-modern label {
padding-left: 1.25rem;
color: #94a3b8;
}

.input-group-modern .form-control:focus ~ label,
.input-group-modern .form-control:not(:placeholder-shown) ~ label {
color: #60a5fa;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.input-group-icon {
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
transition: color 0.3s ease;
}

.input-group-modern .form-control:focus ~ .input-group-icon {
color: #3b82f6;
}

.btn-gradient {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
border: none;
color: white;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.btn-gradient:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
color: white;
}

.btn-gradient:active {
transform: translateY(1px);
}

.hover-scale {
transition: transform 0.3s ease;
}

.glass-effect {
background: rgba(30, 41, 59, 0.4);
}

.tracking-wider {
letter-spacing: 0.05em;
}