/* ── WEBRENT HEADER / FOOTER IDs ── */
.webrent-header #webrent-hdr {
    text-decoration: underline 3px;
    text-underline-offset: 8px;
    color: #2575c7;
    font-weight: 600;
}
#webrent-ftr { color: #2575c7; }

/* ── LEGACY (potentially used on page) ── */
.webdev-card img { transition: transform 0.6s ease; }
.webdev-card img:hover { transform: scale(1.1) rotate(180deg); }
.arrow:hover { transform: rotate(180deg); }
.arrow:hover + .arrow-text { color: #f97316; }

/* ── BACKGROUND SHAPES — website-rental page positions ── */
/* shape-5 left:350px is unique to this page */
.shape-1 { width:600px; height:600px; top:20%; left:-200px; border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; }
.shape-2 { width:800px; height:800px; top:25%; right:-400px; border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; }
.shape-3 { width:600px; height:600px; top:45%; border-radius:50%; }
.shape-4 { width:600px; height:600px; top:50%; right:-200px; border-radius:50%; }
.shape-5 { width:1000px; height:1000px; top:75%; left:350px; border-radius:50%; }
.shape-6 { width:800px; height:800px; top:60%; left:-350px; border-radius:50%; }

/* ── WAVEGRID BACKGROUND ── */
#waveGrid { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }

/* ── WEB-CARD TITLE — fully dynamic (no fixed px shift, unlike SEO's -105px/-80px):
   h3 keeps utils.css's default translateY(0) on hover, so the flex column's
   justify-content:center simply re-centers title+text together as the text
   grows in — the gap always matches the actual text length/height. ── */

/* ── WEBRENT SECTION & CARD ── */
.webrent-section { padding: 5rem 1.5rem; position: relative; z-index: 1; }
.webrent-card {
    width: 100%; max-width: 400px; padding: 1.5rem;
    outline: 2px solid rgba(255,255,255,0.37);
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    height: auto; min-height: 15rem;
}

/* ── PKG RENT LINK ── */
.pkg-rent-wrap { text-align: center; margin-top: 2rem; }
.pkg-rent-link {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .8rem 1.8rem;
    border: 1px solid rgba(45,212,200,.3);
    border-radius: 9999px; color: var(--teal) !important;
    font-weight: 600; font-size: .93rem; text-decoration: none;
    background: rgba(45,212,200,.05);
    transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.pkg-rent-link:hover { background: rgba(45,212,200,.1); border-color: rgba(45,212,200,.55); transform: scale(1.04); }

/* ── MOBILE SPACING — website-rental uses 3rem/2rem (tighter than shared 4rem/2.5rem) ── */
@media(max-width:768px) {
    .section-wrap,
    .pkg-section, .faq-section, .cta-band { padding-top: 3rem; padding-bottom: 3rem; }
    #particles-section { padding-top: 3rem; padding-bottom: 3rem; }
    .webrent-section { padding-top: 3rem; padding-bottom: 3rem; }
}
@media(max-width:480px) {
    .section-wrap,
    .pkg-section, .faq-section, .cta-band { padding-top: 2rem; padding-bottom: 2rem; }
    #particles-section { padding-top: 2rem; padding-bottom: 2rem; }
    .webrent-section { padding-top: 2rem; padding-bottom: 2rem; }
    .hero-content { padding-top: 5rem; padding-bottom: 2rem; }
}