.hero {
    --primary: #148FA1;
    --primary-light: #1BA8BD;
    --bg-dark: #0D2E36;
    --text: #fff;
    --muted: rgba(255,255,255,0.75);

    min-height: 100vh;
    background: linear-gradient(140deg,#0D2E36,#0F3A45,#0B2830);
    font-family: 'Kreon', serif;
    position: relative;
    overflow: hidden;
}

/* BACKGROUND BLOBS */
.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.22;
}

.blob-1 { width: 520px; height: 520px; background: var(--primary); top:-160px; left:-120px; }
.blob-2 { width: 420px; height: 420px; background: var(--primary-light); bottom:-140px; right:-40px; }
.blob-3 { width: 320px; height: 320px; background:#0F6B7A; top:55%; left:58%; }

/* LAYOUT */
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    padding: 100px 32px;
    gap: 60px;
}

/* LEFT */
.hero-eyebrow {
    color: var(--primary-light);
    font-size: 13px;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
}

.dot {
    width: 7px;
    height: 7px;
    background: var(--primary-light);
    border-radius: 50%;
    margin-right: 10px;
}

.hero-headline {
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.95;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-headline .highlight {
    color: var(--primary-light);
    font-weight: 700;
}

.hero-sub {
    margin-top: 24px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.65;
}

/* BUTTONS */
.hero-actions {
    margin-top: 36px;
    display: flex;
    gap: 14px;
}

.btn-primary {
    background: linear-gradient(135deg,#148FA1,#1BA8BD);
    color: white;
    border: none;
    padding: 15px 28px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    padding: 15px 24px;
    border-radius: 12px;
    font-weight: 500;
    transition: background 0.25s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.08);
}

/* TRUST */
.hero-trust {
    margin-top: 28px;
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: var(--muted);
}

/* RIGHT */
.visual-frame {
    width: 340px;
    height: 440px;
    border-radius: 26px;
    overflow: hidden;
    background: #123;
    box-shadow: 0 22px 60px rgba(0,0,0,0.45);
    animation: float 6s ease-in-out infinite;
    position: relative;
}

.visual-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fallback {
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 64px;
    opacity: 0.4;
}

/* FLOATING CARDS */
.floating-card {
    position: absolute;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    color: white;
}

.review {
    bottom: 24px;
    left: -30px;
}

.badge {
    top: 24px;
    right: -20px;
    font-weight: 600;
}

/* FLOAT ANIMATION */
@keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* MOBILE */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 60px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-trust {
        justify-content: center;
        flex-wrap: wrap;
    }

    .visual-frame {
        margin-top: 40px;
    }
}