/* ═══════════════════════════════════════════════════════
   Web Design Section – Shared CSS
   Used by: web-design, web-development, wordpress-dev,
            ecommerce, shopify sub-pages
   ═══════════════════════════════════════════════════════ */
:root{--wd-accent:#00b4d8;--wd-btn-text:#0a2540}

/* ── Hero background pattern ── */
.wd-hero-bg{position:relative;overflow:hidden}
.wd-hero-bg::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%2300b4d8' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}

/* ── Glass card ── */
.wd-glass{background:rgba(255,255,255,0.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15)}

/* ── Feature cards ── */
.wd-feature-card{transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent}
.wd-feature-card:hover{transform:translateY(-8px);border-color:var(--wd-accent);box-shadow:0 24px 48px rgba(0,180,216,.12)}

/* ── Plan cards ── */
.wd-plan-card{transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent}
.wd-plan-card:hover{transform:translateY(-8px);border-color:var(--wd-accent);box-shadow:0 24px 48px rgba(0,180,216,.15)}
.wd-plan-card.wd-popular{border-color:var(--wd-accent)}

/* ── Buttons ── */
.wd-btn{background:var(--wd-accent);color:var(--wd-btn-text,#0a2540)}
.wd-btn-outline{border:2px solid var(--wd-accent);color:var(--wd-accent)}
.wd-btn-outline:hover{background:var(--wd-accent);color:#fff}

/* ── Utility ── */
.wd-accent-icon{color:var(--wd-accent)}
.wd-accent-bg{background:rgba(0,180,216,.1)}

/* ── Gradient hero / CTA ── */
.wd-gradient{background:linear-gradient(135deg,#0a2540 0%,#023e8a 50%,#00b4d8 100%)}

/* ── FAQ ── */
.wd-faq-item{border:1px solid #e5e7eb;border-radius:1rem;overflow:hidden}

/* ── Dark-mode overrides ── */
.dark .wd-feature-card,.dark .wd-plan-card{background:#0d1b2e!important}
.dark .wd-faq-item{border-color:#1e3a5f!important}