.hero-section { position: relative; display: flex; align-items: center; }
.hero-section:before { position: absolute; width: 50%; height: 100%; background: #f2f3f6; top: 0; left: 0; content: ""; }
.hero-section:after { position: absolute; width: 70%; height: 100%; background: url(/images/00/hero-background.webp) no-repeat 50% / cover; top: 10%; right: 0; content: ""; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.2; animation: float-slow 10s infinite ease-in-out; }
.hero-content { position: relative; padding-right: 0; border-bottom-right-radius: 130px; z-index: 10; }
.hero-content:before { position: absolute; width: 80%; height: 100%; background: linear-gradient(to right, rgba(242,243,246,1) 40%,rgba(125,185,232,0) 100%); top: 0; left: -7%; z-index: 2; content: ""; }
.hero-content .grid { position: relative; z-index: 3; }
.hero-video { overflow: hidden; position: absolute; height: 100%; right: 0; top: 0; border-bottom-right-radius: 130px; z-index: 1; }
.hero-video video { height: 100%; aspect-ratio: 1063/600; object-fit: cover; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.hero-text .area-title { font-family: var(--font-heading); font-weight: bold; line-height: 1.2; }
.hero-text .badge { padding: 0.5rem 1.5rem; line-height: 1; letter-spacing: .1rem; text-transform: uppercase; }
.hero-text .hacker-text { display: inline-block; }
.hero-text .btn a{
    color: #fff;
}

/* Parallax Container styles in Hero */
.perspective-container { position: relative; height: 72vh; display: none; perspective: 1000px; }

.floating-card { padding: 1rem; position: absolute; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.75rem; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); }

.parallax-layer { position: absolute; }

.card-main { overflow: hidden; width: 450px; height: 280px; border: 4px solid var(--border-light); border-radius: 0.75rem; box-shadow: var(--shadow-strong); top: 2.5rem; left: 2.5rem; transform: rotate(2deg); }

.trust-card { width: 12rem; top: 8%; right: 30%; z-index: 20; }
.trust-dot { width: 12px; height: 12px; background: var(--brand-accent); border-radius: 50%; box-shadow: 0 0 5px var(--brand-accent-dark); }
.trust-label { font-size: 0.75rem; font-weight: 700; color: var(--text-dark); }
.trust-value { font-size: 1.85rem; font-weight: bold; }

.progress-bar { margin-top: 0.5rem; overflow: hidden; height: 3px; background: var(--progress-bg); border-radius: 99px; }
.progress-fill { height: 100%; background: var(--progress-fill); width: 0%; animation: load-bar 1.5s ease-out forwards; }

.traffic-card { width: 14rem; bottom: 30%; left: -10%; z-index: 30; }
.traffic-header { font-size: 0.75rem; font-weight: 700; color: var(--text-dark); }
.traffic-row { margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(190,190,190,0.7); display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-dark); }
.traffic-row:last-child { margin-bottom: 0; border-bottom: 0; }
.traffic-pos { font-size: 0.95rem; }

.scroll-indicator { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2rem; right: 2rem; bottom: -10%; z-index: 50; user-select: none; cursor: pointer; opacity: .8; }
.scroll-indicator:after { position: relative; width: 1px; height: 120px; background: #626262; content: ""; }
.scroll-text { writing-mode: vertical-rl; letter-spacing: .2rem; font-weight: 500; font-size: 12px; color: #626262; transition: opacity .3s ease; animation: float-slow 3s ease-in-out infinite; }

@media (min-width: 1025px) {
	.perspective-container { display: block; }
}
@media (max-width: 1024px) {
	.hero-text { padding: 10% 0; }
	.hero-video video { transform: translateX(20%); }
}
@media (max-width: 768px) {
	.hero-section:before { width: 90%; height: 100%; background: linear-gradient(to right, rgba(242,243,246,1) 40%,rgba(125,185,232,0) 100%); z-index: 1; }
	.hero-section:after { top: 0; }
	.hero-content:before { width: 20%; }
	.hero-video { position: relative; top: auto; right: auto; height: 60vh; display: flex; justify-content: center; }
	.hero-video video { aspect-ratio: 16/9; transform: translateX(0); }
	.hero-text { margin-top: -30%; }
	.scroll-indicator { bottom: 0; }
}
@media (max-width: 640px) {
	.hero-video { height: 80vw; }
}
@media (max-width: 550px) {
	.hero-text .text-giant { font-size: 8vw; }
}