/* =====================================
   Section01
   Hero / First View
===================================== */

#fv {

    position: relative;

    overflow: hidden;

    min-height: 900px;

    display: flex;

    align-items: center;

    background:
    linear-gradient(
    135deg,
    rgba(10,28,52,.82),
    rgba(20,50,85,.75)
    ),
    url("../images/hero/sauna-bg.webp");

    background-size: cover;
    background-position: center center;

    color: #ffffff;
}

/* =========================
   Background Layers
========================= */

/* Radial accent — top-right warm glow */
#fv::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
    radial-gradient(
    ellipse 60% 50% at 80% 20%,
    rgba(255,122,0,.22),
    transparent 60%
    ),
    radial-gradient(
    ellipse 40% 60% at 10% 80%,
    rgba(15,39,68,.6),
    transparent 50%
    );

    z-index: 1;
    pointer-events: none;
}

/* Grid pattern */
#fv::after {

    content: "";

    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: 60px 60px;

    z-index: 1;
    pointer-events: none;
}

/* =========================
   Decorative Rings
========================= */

.fv-deco {

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.fv-deco-ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255,122,0,.12);
}

.ring-1 { width: 360px; height: 360px; top: -60px; right: 30px; }
.ring-2 { width: 600px; height: 600px; top: -160px; right: -70px; }
.ring-3 { width: 860px; height: 860px; top: -270px; right: -180px; }

/* =========================
   Layout
========================= */

.fv-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}

/* =========================
   Left Area
========================= */

.fv-content {

    flex: 1;

    max-width: 620px;
}

/* =========================
   Status Badge
========================= */

.fv-status {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.35);

    padding: 7px 18px;
    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;
    color: #6EE7B7;
    letter-spacing: .04em;

    margin-bottom: 20px;
}

.status-dot {

    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;

    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.65); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* =========================
   Tag
========================= */

.fv-tag {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 50px;

    background: var(--accent);

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .12em;

    margin-bottom: 28px;
}

/* =========================
   Main Catch
========================= */

.fv-content h1 {

    font-size: 74px;

    line-height: 1.18;

    font-weight: 900;

    margin-bottom: 28px;

    text-shadow: 0 4px 20px rgba(0,0,0,.3);

    letter-spacing: -.02em;
}

.fv-h1-accent {

    font-style: normal;

    color: var(--accent);

    display: inline-block;

    position: relative;
}

/* Underline sweep on accent */
.fv-h1-accent::after {

    content: "";

    position: absolute;
    bottom: 2px;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(90deg, var(--accent), transparent);

    border-radius: 2px;
}

/* =========================
   Lead
========================= */

.fv-lead {

    font-size: 20px;

    line-height: 2;

    margin-bottom: 36px;

    color: rgba(255,255,255,.88);
}

/* =========================
   Stats Bar
========================= */

.fv-stats {

    display: flex;

    margin-bottom: 36px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    border-radius: 16px;

    overflow: hidden;
}

.fv-stat {

    flex: 1;

    padding: 20px 16px;
    text-align: center;

    border-right: 1px solid rgba(255,255,255,.1);
}

.fv-stat:last-child {

    border-right: none;
}

.fv-stat strong {

    display: block;

    font-size: 26px;
    font-weight: 800;

    color: var(--accent);

    line-height: 1;
    margin-bottom: 6px;
}

.fv-stat span {

    font-size: 12px;
    color: rgba(255,255,255,.65);
    letter-spacing: .06em;
}

/* =========================
   Features
========================= */

.fv-features {

    display: flex;

    gap: 12px;

    margin-bottom: 40px;

    flex-wrap: wrap;
}

.feature-item {

    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(10px);

    padding: 11px 18px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;

    transition: background .25s, border-color .25s;
}

.feature-item:hover {

    background: rgba(255,122,0,.18);
    border-color: rgba(255,122,0,.4);
}

.feat-icon {

    font-size: 15px;
    line-height: 1;
}

/* =========================
   CTA Buttons
========================= */

.fv-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

.fv-buttons .btn {

    min-width: 230px;

    font-size: 18px;

    position: relative;
}

/* Pulse ring on primary CTA */
.fv-buttons .btn:not(.secondary)::before {

    content: "";

    position: absolute;
    inset: -5px;

    border-radius: 60px;
    border: 2px solid rgba(255,122,0,.5);

    animation: btn-pulse 2.4s ease-out infinite;
}

@keyframes btn-pulse {
    0%   { opacity: .9; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.14); }
}

/* Arrow in CTA */
.btn-arrow {

    display: inline-block;
    margin-left: 10px;

    transition: transform .3s;
}

.btn:hover .btn-arrow {

    transform: translateX(6px);
}

/* White outline secondary */

.fv-buttons .secondary {

    background: transparent;

    border: 2px solid rgba(255,255,255,.7);

    color: #ffffff;
}

.fv-buttons .secondary:hover {

    background: rgba(255,255,255,.1);
    border-color: #fff;
}

/* =========================
   Right Visual
========================= */

.fv-image {

    flex: 1;

    position: relative;

    min-height: 650px;
}

/* Glow behind product */
.fv-glow {

    position: absolute;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255,122,0,.28) 0%,
        rgba(255,122,0,.08) 40%,
        transparent 70%
    );

    top: 50%;
    right: 30px;

    transform: translateY(-50%);

    z-index: 2;
    pointer-events: none;
}

/* Main Product */

.fv-image > img {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 520px;

    max-width: 100%;

    filter:
    drop-shadow(
    0 30px 50px rgba(0,0,0,.35)
    );

    z-index: 3;
}

/* =========================
   Floating Phone
========================= */

.phone-mockup {

    position: absolute;

    top: 80px;
    right: 420px;

    width: 180px;

    z-index: 4;

    animation:
    floating 4s ease-in-out infinite;
}

/* =========================
   Floating Button
========================= */

.emergency-button {

    position: absolute;

    bottom: 80px;
    right: 420px;

    width: 150px;

    z-index: 4;

    animation:
    floating 5s ease-in-out infinite;

    animation-delay: .8s;
}

/* =========================
   Float Animation
========================= */

@keyframes floating {

    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

/* =========================
   Badge
========================= */

.fv-badge {

    position: absolute;

    bottom: 80px;
    right: 420px;

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

    backdrop-filter: blur(14px);

    padding: 18px 24px;

    border-radius: 15px;

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

    z-index: 5;
}

.fv-badge strong {

    display: block;

    font-size: 28px;

    color: #fff;
}

.fv-badge span {

    font-size: 13px;

    color: rgba(255,255,255,.78);
}

/* =========================
   Scroll Guide
========================= */

.scroll-down {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;
}

.scroll-down span {

    display: block;

    width: 2px;

    height: 50px;

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

    margin: auto;

    animation:
    scrollMove 2s infinite;
}

@keyframes scrollMove {

    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    51% {
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* =====================================
   Tablet
===================================== */

@media screen and (max-width:1200px){

    .fv-content h1{

        font-size:60px;
    }

    .fv-image > img{

        width:440px;
    }

}

@media screen and (max-width:992px){

    .fv-content h1{

        font-size:50px;
    }

    .fv-lead{

        font-size:18px;
    }

    .fv-image > img{

        width:380px;
    }

}

/* =====================================
   Mobile
===================================== */

@media screen and (max-width:768px){

    #fv{

        min-height:auto;

        padding: 100px 0 80px;
    }

    .fv-inner{

        flex-direction:column;

        text-align:center;
    }

    .fv-status{
        margin-left: auto;
        margin-right: auto;
    }

    .fv-content{

        max-width:100%;
    }

    .fv-content h1{

        font-size:44px;
    }

    .fv-lead{

        font-size:17px;
    }

    .fv-stats{

        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }

    .fv-features{

        justify-content:center;
    }

    .fv-buttons{

        justify-content:center;
    }

    .fv-buttons .btn{

        min-width: 200px;
    }

    .fv-image{

        min-height:auto;
        width:100%;
    }

    .fv-image > img{

        position:relative;

        transform:none;

        width:300px;

        margin:auto;

        display:block;
    }

    .fv-glow{

        width: 280px;
        height: 280px;
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .phone-mockup,
    .emergency-button,
    .fv-badge{

        display:none;
    }

    .ring-1, .ring-2, .ring-3{

        display:none;
    }

}