/* ==========================================================
   WEBILEY custom.css  (paste into WordPress > Customizer > Additional CSS)
   DESIGN SYSTEM extracted from mockup
   Color:  bg #08090a | surface #101113 | surface-2 #16171a | border rgba(255,255,255,.09)
           text #f4f4f5 | muted #9b9ba1 | accent/CTA white #ffffff on #08090a | live green #3ddc97
   Type:   Inter 400/500/600/700 (UI + headings, tight tracking -0.02em)
           Instrument Serif italic for the one expressive word in the H1
   Scale:  H1 clamp(2.4rem,5vw,4rem) | H2 clamp(1.7rem,3vw,2.4rem) | H3 1rem/600 | body 1rem | eyebrow .7rem caps
   Shapes: cards radius 14px, buttons radius 10px, 1px hairline borders, subtle top-lit gradient on cards
   Rhythm: sections 88px vertical (56px mobile), container 1200px, grid gaps 12-20px
   ========================================================== */
#wb-app{--wb-bg:#08090a;--wb-surface:#101113;--wb-surface-2:#16171a;--wb-border:rgba(255,255,255,.09);--wb-text:#f4f4f5;--wb-muted:#9b9ba1;--wb-green:#3ddc97}
html:has(#wb-app){scroll-behavior:smooth;scroll-padding-top:80px}
#wb-app .wb-body{background:var(--wb-bg);color:var(--wb-text);letter-spacing:-.005em}
#wb-app .wb-container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
#wb-app .wb-section{padding:88px 0}
#wb-app .wb-band{padding:28px 0;border-block:1px solid var(--wb-border)}
#wb-app .wb-muted{color:var(--wb-muted)}
#wb-app .wb-skip-link{position:absolute;left:12px;top:-60px;background:#fff;color:#000;padding:10px 16px;border-radius:8px;z-index:100}
#wb-app .wb-skip-link:focus{top:12px}
#wb-app :where(a,button,summary,input,textarea):focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Header */
#wb-app .wb-header{background:rgba(8,9,10,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--wb-border)}
#wb-app .wb-nav-link{color:var(--wb-muted);transition:color .2s}
#wb-app .wb-nav-link:hover,#wb-app .wb-nav-link.is-active{color:#fff}
#wb-app .wb-icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--wb-border);color:#fff}
#wb-app .wb-mobile-menu{display:flex;flex-direction:column;padding:8px 20px 20px;border-top:1px solid var(--wb-border)}
#wb-app .wb-mobile-menu.hidden{display:none}
#wb-app .wb-mobile-menu a{padding:12px 0;border-bottom:1px solid var(--wb-border);color:var(--wb-muted)}

/* Buttons */
#wb-app .wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:10px;font-weight:600;font-size:.875rem;transition:transform .2s,background .2s,border-color .2s}
#wb-app .wb-btn-sm{padding:8px 14px;font-size:.8rem}
#wb-app .wb-btn-light{background:#fff;color:#08090a}
#wb-app .wb-btn-light:hover{background:#e4e4e7;transform:translateY(-1px)}
#wb-app .wb-btn-ghost{border:1px solid rgba(255,255,255,.2);color:#fff}
#wb-app .wb-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* Type */
#wb-app .wb-eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-muted);margin-bottom:12px}
#wb-app .wb-hero-title{font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;font-weight:600;letter-spacing:-.03em}
#wb-app .wb-hero-title em{font-style:italic;font-weight:400;color:#cfcfd4}
#wb-app .wb-h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;font-weight:600;letter-spacing:-.025em;max-width:22ch}
#wb-app .wb-lead{color:var(--wb-muted);max-width:52ch;margin-top:16px;line-height:1.6}

/* Hero */
#wb-app .wb-hero{background:radial-gradient(60% 50% at 75% 20%,rgba(255,255,255,.07),transparent 70%)}
#wb-app .wb-hero-img{width:100%;border-radius:16px;border:1px solid var(--wb-border);aspect-ratio:3/2;object-fit:cover;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
#wb-app .wb-float-card{position:absolute;background:rgba(16,17,19,.92);backdrop-filter:blur(10px);border:1px solid var(--wb-border);border-radius:12px;padding:12px 16px;display:grid;gap:2px;animation:wb-float 6s ease-in-out infinite}
#wb-app .wb-float-card strong{font-size:1.25rem}#wb-app .wb-float-card small{color:var(--wb-muted)}
#wb-app .wb-float-card-a{top:-14px;right:16px}
#wb-app .wb-float-card-b{bottom:-18px;left:16px;animation-delay:-3s}
#wb-app .wb-live{color:var(--wb-green);font-size:.7rem}
#wb-app .wb-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--wb-green);margin-right:6px}
@keyframes wb-float{50%{transform:translateY(-8px)}}

/* Checks / lists */
#wb-app .wb-checks li{position:relative;padding-left:22px;color:var(--wb-muted);font-size:.875rem;line-height:1.9}
#wb-app .wb-checks li::before{content:"✓";position:absolute;left:0;color:#fff;font-size:.75rem}

/* Cards */
#wb-app .wb-card{background:linear-gradient(180deg,var(--wb-surface-2),var(--wb-surface));border:1px solid var(--wb-border);border-radius:14px;padding:20px;transition:border-color .25s,transform .25s}
#wb-app .wb-card:hover{border-color:rgba(255,255,255,.22)}
#wb-app .wb-card h3{font-size:1rem;font-weight:600}
#wb-app .wb-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);margin-bottom:14px}
#wb-app .wb-stat strong{display:block;font-size:1.25rem}#wb-app .wb-stat span{font-size:.8rem;color:var(--wb-muted)}
#wb-app .wb-why-card{min-height:118px;display:flex;flex-direction:column;justify-content:space-between}
#wb-app .wb-why-card .wb-ico{margin-bottom:0;align-self:flex-end}
#wb-app .wb-service-card img,#wb-app .wb-case img,#wb-app .wb-post img{width:100%;aspect-ratio:8/5;object-fit:cover;border-radius:10px;margin-bottom:16px;filter:saturate(.85)}
#wb-app .wb-service-card .wb-checks{margin:12px 0 18px}
#wb-app .wb-industry{display:flex;align-items:center;gap:10px;padding:14px;font-size:.8rem;color:var(--wb-muted)}
#wb-app .wb-industry .wb-ico{margin:0;flex:none}
#wb-app .wb-industry:hover{color:#fff}
#wb-app .wb-case p{font-size:.8rem;color:var(--wb-muted);margin:4px 0}
#wb-app .wb-result{color:#fff!important;margin:10px 0 14px!important;font-weight:500}
#wb-app .wb-step span{font-size:.75rem;color:var(--wb-muted)}
#wb-app .wb-step h3{margin:10px 0 6px}#wb-app .wb-step p{font-size:.8rem;color:var(--wb-muted);line-height:1.5}

/* Funnel */
#wb-app .wb-steps{counter-reset:s;display:grid;gap:10px}
#wb-app .wb-steps li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;border:1px solid var(--wb-border);border-radius:12px;background:var(--wb-surface)}
#wb-app .wb-steps li::before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:.75rem}
#wb-app .wb-metric strong{display:block;font-size:2rem;font-weight:600}#wb-app .wb-metric span{color:var(--wb-muted);font-size:.85rem}

/* Pricing */
#wb-app .wb-toggle{display:inline-flex;padding:3px;border:1px solid var(--wb-border);border-radius:10px}
#wb-app .wb-toggle-btn{padding:8px 16px;border-radius:8px;font-size:.8rem;color:var(--wb-muted)}
#wb-app .wb-toggle-btn[aria-pressed="true"]{background:#fff;color:#08090a;font-weight:600}
#wb-app .wb-plan{position:relative;display:flex;flex-direction:column;gap:6px;transition:opacity .3s,border-color .25s}
#wb-app .wb-plan .wb-checks{margin:12px 0 20px;flex:1}
#wb-app .wb-price{font-size:2.1rem;font-weight:600}#wb-app .wb-price span{font-size:1rem;color:var(--wb-muted)}
#wb-app .wb-plan-featured{border-color:rgba(255,255,255,.35)}
#wb-app .wb-badge{position:absolute;top:-11px;left:16px;background:#fff;color:#08090a;font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:99px}
#wb-app .wb-pricing[data-mode="onetime"] .wb-plan[data-type="monthly"],#wb-app .wb-pricing[data-mode="monthly"] .wb-plan[data-type="onetime"]{opacity:.35}

/* Testimonials / FAQ / blog */
#wb-app .wb-stars{color:#f5c542;letter-spacing:2px;margin-bottom:10px}
#wb-app .wb-quote blockquote{color:#d4d4d8;line-height:1.6;font-size:.9rem}
#wb-app .wb-quote figcaption{display:grid;gap:2px;margin-top:16px;font-size:.8rem}
#wb-app .wb-quote figcaption span{color:var(--wb-muted)}
#wb-app .wb-tag{font-style:normal;justify-self:start;margin-top:8px;padding:3px 10px;border:1px solid var(--wb-border);border-radius:99px;font-size:.7rem}
#wb-app .wb-faq details{border:1px solid var(--wb-border);border-radius:12px;padding:16px;margin-bottom:8px;background:var(--wb-surface)}
#wb-app .wb-faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between}
#wb-app .wb-faq summary::after{content:"+";color:var(--wb-muted);transition:transform .2s}
#wb-app .wb-faq details[open] summary::after{transform:rotate(45deg)}
#wb-app .wb-faq p{margin-top:10px;color:var(--wb-muted);font-size:.875rem;line-height:1.6}
#wb-app .wb-post{padding:12px}#wb-app .wb-post img{margin-bottom:10px}
#wb-app .wb-post p{font-size:.7rem}#wb-app .wb-post h3{font-size:.85rem;line-height:1.35;margin:6px 0 10px}
#wb-app .wb-post a{font-size:.75rem;color:#fff}

/* CTA / form */
#wb-app .wb-cta{background:radial-gradient(50% 60% at 15% 50%,rgba(255,255,255,.06),transparent 70%);border-top:1px solid var(--wb-border)}
#wb-app .wb-form{display:grid;gap:8px}
#wb-app .wb-form label{font-size:.8rem;color:var(--wb-muted)}
#wb-app .wb-form input,#wb-app .wb-form textarea{background:var(--wb-bg);border:1px solid var(--wb-border);border-radius:10px;padding:12px;color:#fff;width:100%}
#wb-app .wb-form .wb-btn{margin-top:10px}

/* Footer */
#wb-app .wb-footer{border-top:1px solid var(--wb-border);background:#050506}
#wb-app .wb-footer li{margin:6px 0;font-size:.85rem;color:var(--wb-muted)}
#wb-app .wb-footer a:hover{color:#fff}
#wb-app .wb-foot-h{font-size:.8rem;font-weight:600;margin-bottom:10px}
#wb-app .wb-copy{border-top:1px solid var(--wb-border);color:var(--wb-muted)}

@media (max-width:640px){#wb-app .wb-section{padding:56px 0}#wb-app .wb-float-card-a{right:8px}#wb-app .wb-float-card-b{left:8px}}
@media (prefers-reduced-motion:reduce){#wb-app *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Inner pages ---------- */
#wb-app .wb-page-hero{background:radial-gradient(55% 60% at 80% 0%,rgba(255,255,255,.07),transparent 70%);border-bottom:1px solid var(--wb-border)}
#wb-app .wb-page-title{max-width:20ch}
#wb-app .wb-crumb{font-size:.8rem;color:var(--wb-muted);margin-bottom:20px}
#wb-app .wb-crumb a:hover{color:#fff}
#wb-app .wb-card-text{color:var(--wb-muted);font-size:.85rem;line-height:1.6;margin-top:6px}
#wb-app .wb-card-text a:hover{color:#fff}
#wb-app .wb-split-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;border:1px solid var(--wb-border);filter:saturate(.85)}
#wb-app .wb-wide-img{aspect-ratio:21/9}
#wb-app .wb-faq-wide{max-width:760px}
#wb-app .wb-cta h2{max-width:20ch}
#wb-app .wb-form-wrap .wb-form input,#wb-app .wb-form-wrap .wb-form textarea{font:inherit}