/* One headline, a short introduction, and two clear next steps. */
.hero-refined {
    min-height: min(820px, 90svh);
    padding: clamp(8rem, 14vh, 10rem) max(5vw, 1.25rem) clamp(4rem, 8vh, 6rem);
    justify-content: center;
    background: radial-gradient(ellipse at 0% 30%, #e2f5ff, transparent 65%), #fbfdff;
    border-bottom: 1px solid rgba(100, 116, 139, .12);
}
.hero-refined::before, .hero-refined::after { display: none; }
.hero-refined .editorial-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
    padding-block: 0;
}
.hero-refined .eyebrow { margin-bottom: 1.5rem; font-size: .68rem !important; letter-spacing: .12em; }
.hero-refined .hero-side {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    animation: none;
}
.hero-refined .hero-side > p:not(.hero-action-note) {
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.75;
    margin: 0 0 2rem;
    max-width: 360px;
    color: var(--text-secondary);
}
.hero-actions { display: grid; gap: .85rem; }
.hero-refined .hero-actions .btn {
    justify-content: space-between;
    gap: .6rem;
    padding: 18px 20px;
    font-size: .83rem;
    line-height: 1.5;
    border-radius: 12px;
    letter-spacing: 0;
}
.hero-refined .btn-primary { box-shadow: 0 8px 22px rgba(102, 204, 255, .2); }
.hero-refined .btn-outline { border-color: #a9bed0; background: rgba(255, 255, 255, .6); }
.hero-refined .btn-outline:hover { background: #eaf7ff; border-color: var(--text-main); }
.hero-actions .hero-cta-icon { flex-shrink: 0; }
.hero-refined .hero-side .hero-action-note {
    margin: 1rem 0 0;
    font-size: .73rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.hero-actions a:focus-visible { outline: 3px solid var(--text-main); outline-offset: 5px; }
@media (max-width: 900px) {
    .hero-refined { min-height: auto; padding-top: 8rem; }
    .hero-refined .editorial-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-refined .hero-side { max-width: 650px; }
    .hero-refined .hero-side > p:not(.hero-action-note) { max-width: 540px; margin-bottom: 1.5rem; }
    .hero-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .hero-refined { padding-top: 7rem; padding-bottom: 3rem; }
    .hero-refined .eyebrow { font-size: .6rem !important; margin-bottom: 1rem; }
    .hero-refined .editorial-hero-grid { gap: 1.75rem; }
    .hero-refined .hero-side > p:not(.hero-action-note) { font-size: 1rem; line-height: 1.7; }
    .hero-actions { grid-template-columns: 1fr; }
    .hero-refined .hero-actions .btn { padding: 16px 18px; }
}

/* CSS glass objects: no image downloads or animation libraries. */
.hero-refined { isolation: isolate; }
.hero-glass-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-glass-scene > div { position: absolute; }
.hero-glass-orb {
    width: 150px; height: 150px; top: 90px; left: 55%; border-radius: 50%;
    background: radial-gradient(circle at 30% 24%, #fff 0%, #dcf7ff 8%, #9ae7ff 22%, #58caff 45%, #219bdf 70%, #0975bd 88%, #b3ecff 100%);
    box-shadow: inset 8px 10px 18px #ffffffa0, inset -12px -16px 25px #0876bd50, 12px 24px 45px #219bdf20;
}
.hero-glass-orb::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse at 25% 15%, #ffffffb0, transparent 50%); }
.hero-glass-ring {
    width: 260px; height: 290px; bottom: -130px; right: 6%; border: 38px solid #b9e8ff80; border-radius: 46%;
    transform: rotate(-28deg);
    background: linear-gradient(130deg, #fff2, #6cf1);
    box-shadow: inset 4px 5px 5px #fffe, inset -6px -7px 12px #408cc766, 4px 5px 4px #fffe, 15px 22px 30px #3c90c92c;
}
.hero-glass-pebble {
    width: 90px; height: 95px; left: -45px; top: 46%; border-radius: 32%; transform: rotate(25deg);
    background: linear-gradient(135deg, #fff, #c8f0ff85 40%, #47abf065 80%, #fff9);
    border: 1px solid #fff;
    box-shadow: inset 4px 5px 8px #fff, inset -6px -7px 12px #5599bf50, 10px 17px 22px #3b8ac520;
}
.hero-refined .hero-software-title { font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 1rem; }
@media (prefers-reduced-motion: no-preference) {
    .hero-glass-scene > div { animation: hero-glass-drift 12s ease-in-out infinite; }
    .hero-glass-ring { animation-delay: -4s !important; }
    .hero-glass-pebble { animation-delay: -7s !important; }
}
@keyframes hero-glass-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@media (max-width: 900px) {
    .hero-glass-orb { width: 100px; height: 100px; left: auto; right: -35px; top: -38px; }
    .hero-glass-ring { width: 180px; height: 195px; border-width: 25px; right: -100px; bottom: -130px; }
    .hero-glass-pebble { display: none; }
}
@media (max-width: 620px) {
    .hero-refined .eyebrow { max-width: 250px; line-height: 1.7; }
    .hero-refined .hero-software-title { font-size: 1.5rem; }
}
/* Give narrow screens their own composition, rather than cropped desktop art. */
@media (max-width: 620px) {
    .hero-refined {
        background: radial-gradient(ellipse at 100% 8%, #bceaff 0%, transparent 42%),
                    radial-gradient(ellipse at 0% 58%, #def4ff 0%, transparent 58%), #fbfdff;
    }
    .hero-glass-orb {
        width: 90px;
        height: 90px;
        top: 78px;
        right: -44px;
    }
    .hero-glass-pebble {
        display: block;
        width: 48px;
        height: 52px;
        left: -30px;
        top: 43%;
    }
    .hero-glass-ring {
        width: 135px;
        height: 145px;
        border-width: 21px;
        right: -62px;
        bottom: -60px;
    }
    .hero-refined .hero-side {
        padding-top: 1.25rem;
        border-top: 1px solid rgba(22, 135, 188, .22);
    }
    .hero-refined .hero-actions .btn-primary {
        background: linear-gradient(115deg, #82ddff, #66ccff 55%, #54c4fa);
        box-shadow: 0 8px 22px rgba(22, 135, 188, .18), inset 0 1px 0 rgba(255, 255, 255, .75);
    }
    .hero-refined .hero-actions .btn-outline {
        background: rgba(255, 255, 255, .72);
        box-shadow: inset 0 1px 0 #fff;
    }
}

@media (max-width: 620px) {
    .hero-refined .hero-location { display: none; }
    .hero-refined .eyebrow { max-width: none; }
}
/* The refined kicker joins the coordinated entrance in main.js. */
.hero-refined .eyebrow { animation: none; }