/* Web & App design service page (web-apps.php). Builds on project-page.css; scoped to .web-apps-page. */
.web-apps-page .wa-hero h1 em{display:block}
.web-apps-page .wa-services{max-width:1240px;margin:0 auto;padding:80px 24px 70px}
.web-apps-page .wa-head{text-align:center;max-width:720px;margin:0 auto 42px}
.web-apps-page .wa-head h2{font-size:clamp(27px,3vw,40px);line-height:1.35;margin:12px 0;color:#07111d;font-weight:900}
.web-apps-page .wa-head p{color:#687587;line-height:2;font-size:15px;margin:0}
.web-apps-page .wa-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.web-apps-page .wa-card{position:relative;background:#fff;border:1px solid #e9e3d8;border-radius:22px;padding:32px 28px;box-shadow:0 18px 50px rgba(5,16,29,.06);transition:transform .25s,box-shadow .25s}
.web-apps-page .wa-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(5,16,29,.1)}
.web-apps-page .wa-card-featured{background:linear-gradient(160deg,#07111d,#0d1c2e);border-color:#22344a;color:#fff}
.web-apps-page .wa-icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#f9edcf;color:#9d701a;font-size:26px}
.web-apps-page .wa-card-featured .wa-icon{background:rgba(233,185,81,.15);color:#f4ca69}
.web-apps-page .wa-card h3{font-size:22px;margin:20px 0 10px;font-weight:900}
.web-apps-page .wa-card p{color:#667284;line-height:1.95;font-size:14px;margin:0 0 16px}
.web-apps-page .wa-card-featured p{color:#c5ccd5}
.web-apps-page .wa-card ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid #eee7da;display:grid;gap:9px}
.web-apps-page .wa-card-featured ul{border-color:rgba(255,255,255,.12)}
.web-apps-page .wa-card li{font-size:13px;color:#263346;display:flex;gap:9px;align-items:center}
.web-apps-page .wa-card-featured li{color:#e3e8ee}
.web-apps-page .wa-card li:before{content:"✦";color:#d6a743;font-size:11px}
.web-apps-page .wa-model{background:radial-gradient(ellipse at 15% 0%,rgba(224,172,59,.14),transparent 45%),#050b13;color:#fff;padding:78px 24px 120px}
.web-apps-page .wa-head-light h2{color:#fff}
.web-apps-page .wa-head-light p{color:#c5ccd5}
.web-apps-page .wa-steps{list-style:none;max-width:1240px;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:none}
.web-apps-page .wa-steps li{border:1px solid rgba(233,185,81,.22);border-radius:20px;padding:26px 22px;background:rgba(255,255,255,.03)}
.web-apps-page .wa-steps b{font-size:13px;letter-spacing:2px;color:#e9b951}
.web-apps-page .wa-steps h3{font-size:19px;margin:12px 0 8px;font-weight:900}
.web-apps-page .wa-steps p{margin:0;color:#c5ccd5;line-height:1.9;font-size:13.5px}
.web-apps-page .wa-steps li:nth-child(3){border-color:#e9b951;background:rgba(233,185,81,.08)}
/* WhatsApp fallback button after successful submit (used on project.php too). */
.project-success a.project-wa-btn{display:flex;width:fit-content;margin:16px auto 4px;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:linear-gradient(145deg,#2bd36b,#119c50);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 10px 24px rgba(17,156,80,.2)}
.project-success a.project-wa-btn:hover{filter:brightness(1.05)}
@media(max-width:900px){.web-apps-page .wa-model{padding-bottom:70px}.web-apps-page .wa-cards{grid-template-columns:1fr}.web-apps-page .wa-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.web-apps-page .wa-services{padding:60px 18px 50px}}
@media(max-width:560px){.web-apps-page .wa-steps{grid-template-columns:1fr}.web-apps-page .wa-model{padding:60px 18px 64px}.web-apps-page .wa-card{padding:26px 20px}}
/* RTL fix: the honeypot's left:-9999px made the document ~11,000px wide (horizontal scroll on mobile). Hide it without overflow. Also applies to project.php. */
.project-page .project-honeypot{left:0!important;top:0!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap}
.project-page .project-honeypot *{max-width:1px!important}