/* ============================================================
   Radheshyam Steel Works — advanced.css  (v5.0 upgrades)
   Premium UI, glassmorphism, wave separators, geo sections
   ============================================================ */

/* ── Hero Gradient Overlay upgrade ───────────────────────────────────────── */
.hero::before {
    background: linear-gradient(
        135deg,
        rgba(10, 18, 28, 0.88) 0%,
        rgba(28, 43, 58, 0.72) 50%,
        rgba(249, 115, 22, 0.18) 100%
    );
}

/* Animated hero trust badge */
.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px;
    padding: 8px 20px;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 24px;
}
.hero-trust-badge .dot {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Instant-quote micro-interaction */
.hero-quote-bar {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 28px auto 0;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 60px;
    padding: 8px 8px 8px 20px;
    align-items: center;
}
.hero-quote-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: .95rem;
    font-family: var(--font-body);
}
.hero-quote-bar input::placeholder { color: rgba(255,255,255,.6); }
.hero-quote-bar .btn {
    border-radius: 50px;
    padding: 10px 22px;
    font-size: .9rem;
    white-space: nowrap;
}

/* ── Activity Ticker Bar ─────────────────────────────────────────────────── */
#rsw-ticker {
    background: #111827;
    color: rgba(255,255,255,.8);
    font-size: .82rem;
    padding: 9px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: .3px;
}
#rsw-ticker .ticker-dot {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: blink 1.4s infinite;
    flex-shrink: 0;
}
#rsw-ticker .ticker-text {
    transition: opacity .4s ease;
    font-weight: 500;
}

/* ── Wave Section Separator ──────────────────────────────────────────────── */
.wave-top, .wave-bottom {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.wave-top svg, .wave-bottom svg { display: block; width: 100%; }

/* ── Glassmorphism Cards ─────────────────────────────────────────────────── */
.glass-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    padding: 28px;
    transition: transform .3s, box-shadow .3s;
}
.glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* ── How It Works — 3-Step ───────────────────────────────────────────────── */
.how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    position: relative;
}
.how-step {
    text-align: center;
    padding: 40px 30px;
    position: relative;
}
.how-step::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 1.2rem;
    z-index: 1;
}
.how-step:last-child::after { display: none; }
.step-circle {
    width: 72px; height: 72px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.6rem;
    color: #fff;
    box-shadow: 0 8px 25px rgba(249,115,22,.4);
    transition: transform .3s;
}
.how-step:hover .step-circle { transform: scale(1.1); }
.how-step h4 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-heading); }
.how-step p { font-size: .9rem; color: var(--text-body); }

/* ── Price Guide Section ─────────────────────────────────────────────────── */
.price-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px;
    border: 2px solid #F1F5F9;
    transition: border-color .3s, box-shadow .3s, transform .3s;
    position: relative;
    overflow: hidden;
}
.price-card:hover {
    border-color: var(--accent);
    box-shadow: 0 16px 40px rgba(249,115,22,.12);
    transform: translateY(-4px);
}
.price-card.featured {
    border-color: var(--accent);
    box-shadow: 0 16px 40px rgba(249,115,22,.18);
}
.price-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 16px; right: -28px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 36px;
    transform: rotate(45deg);
    letter-spacing: 1px;
}
.price-tag {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin: 12px 0 4px;
}
.price-tag span { font-size: 1rem; font-weight: 500; color: var(--text-body); }
.price-card .feature-list { margin: 16px 0; padding: 0; list-style: none; }
.price-card .feature-list li {
    padding: 6px 0;
    font-size: .9rem;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
}
.price-card .feature-list li i { color: var(--accent); font-size: .8rem; }

/* ── Areas We Serve ──────────────────────────────────────────────────────── */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 40px;
}
.area-pill {
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 50px;
    padding: 12px 20px;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all .25s;
    text-decoration: none;
}
.area-pill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,115,22,.25);
}
.area-pill i { font-size: .8rem; }

/* ── Social Proof Badge ──────────────────────────────────────────────────── */
.proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-heading);
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.proof-badge .live-dot {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: blink 1.2s infinite;
}

/* ── Case Study Project Cards ────────────────────────────────────────────── */
.case-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    transition: transform .3s, box-shadow .3s;
}
.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.13);
}
.case-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.case-card-body { padding: 24px; }
.case-tag {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    background: rgba(249,115,22,.08);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}
.case-card h4 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-heading); }
.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0;
    font-size: .82rem;
    color: var(--text-body);
}
.case-meta span { display: flex; align-items: center; gap: 5px; }
.case-meta i { color: var(--accent); }

/* ── Warranty Badge ──────────────────────────────────────────────────────── */
.warranty-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, var(--accent) 0%, #EA580C 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    text-align: center;
    box-shadow: 0 8px 30px rgba(249,115,22,.4);
}
.warranty-badge .wnum { font-size: 1.8rem; line-height: 1; }
.warranty-badge .wlbl { font-size: .65rem; letter-spacing: 1px; opacity: .9; }

/* ── Angled Section Divider ──────────────────────────────────────────────── */
.section-angled {
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
    padding: 100px 0;
    margin: -30px 0;
}

/* ── Premium Section Headings ────────────────────────────────────────────── */
.section-eyebrow {
    display: inline-block;
    color: var(--accent);
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-quote-bar { display: none; }
    .how-step::after { display: none; }
    .how-steps { gap: 20px; }
    .section-angled {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
        padding: 80px 0;
    }
}