/* =========================================================
HOMEPAGE 2 — HERO STYLE 12 (2026 FUTURISTIC VERSION)
========================================================= */

/* MAIN HERO SECTION */

.homepage2 .hero-style-12 {
min-height: 100vh;

```
position: relative;

overflow: hidden;

display: flex;
align-items: center;

padding: 120px 0;

background:
    radial-gradient(circle at top left,
    rgba(0,180,216,0.16),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(58,134,255,0.14),
    transparent 28%),

    linear-gradient(
    135deg,
    #07121F 0%,
    #0B1628 45%,
    #07111C 100%
);
```

}

/* AMBIENT LIGHTING */

.homepage2 .hero-style-12::before {
content: "";

```
position: absolute;

width: 800px;
height: 800px;

top: -300px;
left: -200px;

background: rgba(0,180,216,.12);

filter: blur(120px);

border-radius: 50%;

z-index: 0;
```

}

.homepage2 .hero-style-12::after {
content: "";

```
position: absolute;

width: 700px;
height: 700px;

bottom: -250px;
right: -150px;

background: rgba(58,134,255,.14);

filter: blur(140px);

border-radius: 50%;

z-index: 0;
```

}

/* GRID EFFECT */

.homepage2 .hero-style-12 .grid-overlay {
position: absolute;

```
inset: 0;

background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size: 80px 80px;

z-index: 1;

mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
```

}

/* CONTENT AREA */

.homepage2 .hero-style-12 .hero-content {
position: relative;

```
z-index: 2;

max-width: 720px;
```

}

/* BADGE */

.homepage2 .hero-style-12 .hero-badge {
display: inline-flex;

```
align-items: center;

gap: 10px;

padding: 12px 22px;

margin-bottom: 30px;

border-radius: 999px;

backdrop-filter: blur(20px);

background: rgba(255,255,255,.05);

border: 1px solid rgba(255,255,255,.08);

color: #E2E8F0;

font-size: 14px;

letter-spacing: .4px;

box-shadow:
    0 8px 30px rgba(0,0,0,.2);
```

}

/* HERO TITLE */

.homepage2 .hero-style-12 h1 {
font-size: 76px;

```
line-height: 1;

font-weight: 800;

letter-spacing: -3px;

margin-bottom: 28px;

background: linear-gradient(
    90deg,
    #FFFFFF,
    #DFF8FF,
    #00B4D8
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
```

}

/* HERO PARAGRAPH */

.homepage2 .hero-style-12 p {
font-size: 18px;

```
line-height: 1.9;

color: #94A3B8;

max-width: 650px;

margin-bottom: 42px;
```

}

/* BUTTON GROUP */

.homepage2 .hero-style-12 .hero-buttons {
display: flex;

```
gap: 18px;

flex-wrap: wrap;
```

}

/* PRIMARY BUTTON */

.homepage2 .hero-style-12 .btn-primary {
position: relative;

```
overflow: hidden;

padding: 18px 34px;

border-radius: 18px;

border: none;

background: linear-gradient(
    135deg,
    #00B4D8,
    #3A86FF
);

color: white;

font-size: 15px;

font-weight: 600;

transition: all .4s ease;

box-shadow:
    0 12px 40px rgba(0,180,216,.28);
```

}

.homepage2 .hero-style-12 .btn-primary:hover {
transform: translateY(-5px);

```
box-shadow:
    0 18px 60px rgba(58,134,255,.45);
```

}

/* SECONDARY BUTTON */

.homepage2 .hero-style-12 .btn-secondary {
padding: 18px 34px;

```
border-radius: 18px;

background: rgba(255,255,255,.05);

border: 1px solid rgba(255,255,255,.08);

backdrop-filter: blur(18px);

color: #E2E8F0;

transition: all .35s ease;
```

}

.homepage2 .hero-style-12 .btn-secondary:hover {
background: rgba(255,255,255,.08);

```
transform: translateY(-4px);
```

}

/* FLOATING IMAGE */

.homepage2 .hero-style-12 .hero-image {
position: relative;

```
z-index: 2;

animation: floatingHero 6s ease-in-out infinite;
```

}

.homepage2 .hero-style-12 .hero-image img {
border-radius: 32px;

```
box-shadow:
    0 30px 80px rgba(0,0,0,.45);
```

}

/* FLOAT ANIMATION */

@keyframes floatingHero {
0% {
transform: translateY(0px);
}

```
50% {
    transform: translateY(-18px);
}

100% {
    transform: translateY(0px);
}
```

}

/* MOBILE RESPONSIVE */

@media (max-width: 991px) {

```
.homepage2 .hero-style-12 {
    text-align: center;

    padding: 120px 20px;
}

.homepage2 .hero-style-12 h1 {
    font-size: 52px;

    line-height: 1.05;
}

.homepage2 .hero-style-12 p {
    margin-left: auto;
    margin-right: auto;
}

.homepage2 .hero-style-12 .hero-buttons {
    justify-content: center;
}
```

}

@media (max-width: 767px) {

```
.homepage2 .hero-style-12 h1 {
    font-size: 40px;

    letter-spacing: -2px;
}

.homepage2 .hero-style-12 p {
    font-size: 16px;

    line-height: 1.8;
}

.homepage2 .hero-style-12 .btn-primary,
.homepage2 .hero-style-12 .btn-secondary {
    width: 100%;
}
```

}