/* ===== Web design service page ===== */

/* Hero */
.wd-hero{position:relative;background:radial-gradient(130% 120% at 20% -10%,#1a3a75 0%,#0a2657 45%,#04122e 100%);color:#fff;overflow:hidden;padding:clamp(3rem,7vw,5.5rem) 0}
.wd-hero-inner{position:relative;z-index:1;max-width:780px}
.wd-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;color:#fff;margin:.6rem 0 1rem;line-height:1.12}
.wd-hero h1 .grad-text{background:var(--accent-grad-soft);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wd-hero p{color:#c7d2e5;font-size:clamp(1rem,1.6vw,1.15rem);max-width:58ch;margin-bottom:1.8rem}
.wd-hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* Proof band */
.wd-proof{background:var(--slate-100);padding:clamp(2rem,4vw,3rem) 0}
.wd-proof-inner{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.wd-proof-copy{flex:1;min-width:280px}
.wd-proof-copy h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.5rem}
.wd-proof-copy p{color:var(--slate-500);max-width:52ch}
.wd-proof-cards{display:flex;gap:.9rem;flex-wrap:wrap}
.wd-proof-card{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:.9rem 1.2rem;box-shadow:var(--shadow-sm)}
.wd-proof-card strong{display:block;font-family:var(--font-head);font-size:.95rem;color:var(--ink)}
.wd-proof-card span{font-size:.8rem;color:var(--slate-500)}

/* Showcase */
.wd-showcase{padding:clamp(2.6rem,5vw,4rem) 0;background:linear-gradient(180deg,#04122e 0%,#0a1c40 100%);position:relative;overflow:hidden}
.wd-showcase .section-head h2,.wd-showcase .section-head p{color:#fff}
.wd-showcase .section-head p{color:#c7d2e5}
.wd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.6rem;margin-top:2rem}
.wd-card{display:flex;flex-direction:column;gap:.9rem}
.wd-frame{border-radius:14px;overflow:hidden;background:#0f1a30;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transition:transform .25s ease,box-shadow .25s ease}
.wd-card:hover .wd-frame{transform:translateY(-8px) scale(1.015);box-shadow:0 30px 60px -20px rgba(0,0,0,.75)}
.wd-bar{display:flex;align-items:center;gap:.5rem;background:#18233c;padding:.5rem .8rem}
.wd-dots{display:flex;gap:.3rem}
.wd-dots span{width:9px;height:9px;border-radius:50%}
.wd-dots span:nth-child(1){background:#ff5f57}
.wd-dots span:nth-child(2){background:#febc2e}
.wd-dots span:nth-child(3){background:#28c840}
.wd-url{flex:1;background:rgba(255,255,255,.08);border-radius:6px;font-size:.66rem;color:#9fb0cc;padding:.22rem .6rem;font-family:var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-page{height:230px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;position:relative;overflow:hidden}
.wd-meta h3{color:#fff;font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.wd-meta p{color:#9fb0cc;font-size:.85rem;line-height:1.5;margin-top:.2rem}
.wd-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.wd-tags span{font-family:var(--font-head);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.1);color:#c7d2e5;border-radius:999px;padding:.18rem .55rem}

/* skeleton primitives used inside mockups */
.mk-line{height:7px;border-radius:4px}
.mk-btn{height:16px;border-radius:8px;width:64px}
.mk-row{display:flex;gap:.5rem;align-items:center}
.mk-fill{flex:1}

/* — concept: restaurant — */
.mk-ember{background:linear-gradient(160deg,#191210 0%,#241812 60%,#33200f 100%)}
.mk-ember .mk-brand{font-family:Georgia,'Times New Roman',serif;color:#f3e4cf;font-size:1rem;letter-spacing:.14em}
.mk-ember .mk-nav span{width:26px;height:5px;border-radius:3px;background:rgba(243,228,207,.35)}
.mk-ember .mk-hero-title{font-family:Georgia,serif;color:#f3e4cf;font-size:1.25rem;line-height:1.25;max-width:60%}
.mk-ember .mk-line{background:rgba(243,228,207,.28)}
.mk-ember .mk-btn{background:#c98a3b}
.mk-ember .mk-dish{position:absolute;right:-34px;bottom:-34px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8a75c 0%,#a05c22 55%,#5d3512 100%);box-shadow:0 0 0 10px rgba(243,228,207,.07),0 18px 40px -10px rgba(0,0,0,.6)}
.mk-ember .mk-dish::after{content:'';position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3c2413,#241509)}

/* — concept: solar — */
.mk-helios{background:linear-gradient(150deg,#02201d 0%,#043d33 55%,#0a5f43 100%)}
.mk-helios .mk-brand{color:#d6ff8a;font-weight:800;font-family:var(--font-head);font-size:.95rem}
.mk-helios .mk-hero-title{color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.2rem;line-height:1.25;max-width:70%}
.mk-helios .mk-line{background:rgba(255,255,255,.25)}
.mk-helios .mk-btn{background:#b5e94d}
.mk-helios .mk-stats{display:flex;gap:.5rem;margin-top:auto}
.mk-helios .mk-stat{flex:1;background:rgba(255,255,255,.09);border-radius:8px;padding:.45rem .55rem}
.mk-helios .mk-stat b{display:block;color:#d6ff8a;font-size:.8rem;font-family:var(--font-head)}
.mk-helios .mk-stat i{display:block;font-style:normal;height:4px;border-radius:2px;background:rgba(255,255,255,.28);margin-top:4px}
.mk-helios .mk-sun{position:absolute;top:-42px;right:-42px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#f8ffce 0%,#d0f76b 45%,transparent 70%)}

/* — concept: boutique — */
.mk-atelier{background:#faf6f1}
.mk-atelier .mk-brand{color:#3d3733;font-family:Georgia,serif;font-size:.95rem;letter-spacing:.22em}
.mk-atelier .mk-nav span{width:22px;height:4px;border-radius:2px;background:#d8cfc5}
.mk-atelier .mk-products{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-top:.2rem}
.mk-atelier .mk-prod{border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 4px 12px -6px rgba(61,55,51,.25)}
.mk-atelier .mk-prod i{display:block;height:44px}
.mk-atelier .mk-prod:nth-child(1) i{background:linear-gradient(140deg,#e5b8a5,#c98d78)}
.mk-atelier .mk-prod:nth-child(2) i{background:linear-gradient(140deg,#a5bdb2,#7d9c8e)}
.mk-atelier .mk-prod:nth-child(3) i{background:linear-gradient(140deg,#d9c9ad,#bba57e)}
.mk-atelier .mk-prod b{display:block;height:5px;border-radius:3px;background:#e2d9cf;margin:.4rem .4rem .2rem}
.mk-atelier .mk-prod u{display:block;height:5px;border-radius:3px;background:#c9a26a;margin:0 .4rem .4rem;width:40%;text-decoration:none}
.mk-atelier .mk-hero-title{font-family:Georgia,serif;color:#3d3733;font-size:1.1rem}
.mk-atelier .mk-line{background:#e2d9cf}
.mk-atelier .mk-btn{background:#3d3733}

/* — concept: corporate — */
.mk-meridian{background:linear-gradient(160deg,#0c1a33 0%,#12264a 100%)}
.mk-meridian .mk-brand{color:#fff;font-family:Georgia,serif;font-size:.95rem;letter-spacing:.1em}
.mk-meridian .mk-brand b{color:#d3a94f}
.mk-meridian .mk-hero-title{color:#fff;font-family:Georgia,serif;font-size:1.15rem;line-height:1.3;max-width:75%}
.mk-meridian .mk-line{background:rgba(255,255,255,.22)}
.mk-meridian .mk-btn{background:#d3a94f}
.mk-meridian .mk-cols{display:flex;gap:.5rem;margin-top:auto}
.mk-meridian .mk-col{flex:1;border-top:2px solid #d3a94f;background:rgba(255,255,255,.06);border-radius:0 0 8px 8px;padding:.45rem .5rem;display:flex;flex-direction:column;gap:.3rem}
.mk-meridian .mk-col i{height:5px;border-radius:3px;background:rgba(255,255,255,.25)}
.mk-meridian .mk-col i:last-child{width:60%}

/* — concept: lodge — */
.mk-karoo{background:linear-gradient(180deg,#2b1638 0%,#7c2d4e 45%,#e0763c 85%,#f2a54e 100%)}
.mk-karoo .mk-brand{color:#ffe9d1;font-family:var(--font-head);font-weight:800;letter-spacing:.18em;font-size:.9rem}
.mk-karoo .mk-hero-title{color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.5rem;line-height:1.15;margin-top:auto;text-shadow:0 4px 18px rgba(43,22,56,.5)}
.mk-karoo .mk-line{background:rgba(255,233,209,.4)}
.mk-karoo .mk-btn{background:#ffe9d1}
.mk-karoo .mk-ridge{position:absolute;left:-10px;right:-10px;bottom:-6px;height:56px;background:#1d0f28;clip-path:polygon(0 60%,12% 35%,24% 55%,38% 20%,52% 50%,66% 28%,80% 52%,92% 38%,100% 55%,100% 100%,0 100%)}
.mk-karoo .mk-moon{position:absolute;top:16px;right:22px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7e8,#f3cf9a);box-shadow:0 0 24px 6px rgba(255,240,214,.45)}

/* — concept: SaaS — */
.mk-nimbus{background:linear-gradient(150deg,#151238 0%,#241a5e 60%,#3b2483 100%)}
.mk-nimbus .mk-brand{color:#fff;font-family:var(--font-head);font-weight:800;font-size:.95rem}
.mk-nimbus .mk-brand::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#8b7cf8,#5eead4);margin-right:6px}
.mk-nimbus .mk-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.6rem .7rem;backdrop-filter:blur(4px)}
.mk-nimbus .mk-chart{display:flex;align-items:flex-end;gap:4px;height:52px;margin-top:.4rem}
.mk-nimbus .mk-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#8b7cf8,#5eead4)}
.mk-nimbus .mk-chart i:nth-child(1){height:35%}.mk-nimbus .mk-chart i:nth-child(2){height:55%}
.mk-nimbus .mk-chart i:nth-child(3){height:42%}.mk-nimbus .mk-chart i:nth-child(4){height:75%}
.mk-nimbus .mk-chart i:nth-child(5){height:60%}.mk-nimbus .mk-chart i:nth-child(6){height:90%}
.mk-nimbus .mk-hero-title{color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.mk-nimbus .mk-line{background:rgba(255,255,255,.24)}
.mk-nimbus .mk-btn{background:linear-gradient(135deg,#8b7cf8,#5eead4)}

/* Included features */
.wd-included{padding:clamp(2.6rem,5vw,4rem) 0}
.wd-feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1.8rem}
.wd-feature{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm)}
.wd-feature .fi{width:40px;height:40px;border-radius:11px;background:var(--accent-grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.wd-feature strong{display:block;font-family:var(--font-head);font-size:.98rem;color:var(--ink);margin-bottom:.25rem}
.wd-feature span{font-size:.86rem;color:var(--slate-500);line-height:1.55}

/* Process */
.wd-process{background:var(--slate-100);padding:clamp(2.6rem,5vw,4rem) 0}
.wd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.8rem}
.wd-step{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:1.2rem;position:relative}
.wd-step .num{font-family:var(--font-head);font-weight:800;font-size:1.6rem;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wd-step h4{font-size:1rem;margin:.4rem 0 .3rem}
.wd-step p{font-size:.86rem;color:var(--slate-500);line-height:1.55}

@media (max-width:900px){
  .wd-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .wd-steps{grid-template-columns:1fr}
  .wd-page{height:210px}
}


/* ===== Live demo cards (screenshots link to full demo sites) ===== */
.wd-card{text-decoration:none;color:inherit;cursor:pointer}
.wd-shot{display:block;width:100%;height:230px;object-fit:cover;object-position:top center;background:#0a0f1e}
.wd-bar .wd-live{margin-left:auto;font-family:var(--font-head);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#160d06;background:linear-gradient(120deg,#f2732f,#f89b3e);border-radius:999px;padding:.16rem .55rem;display:inline-flex;align-items:center;gap:.4em}
.wd-bar .wd-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#160d06;box-shadow:0 0 0 0 rgba(22,13,6,.5);animation:wdpulse 1.8s ease-in-out infinite}
@keyframes wdpulse{0%,100%{opacity:1}50%{opacity:.3}}
.wd-open{margin-top:.6rem;display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-head);font-size:.78rem;font-weight:700;color:#f2732f;transition:gap .25s ease}
.wd-open svg{width:15px;height:15px}
.wd-card:hover .wd-open{gap:.75em}
@media (prefers-reduced-motion:reduce){.wd-bar .wd-live::before{animation:none}}
@media (max-width:560px){.wd-shot{height:200px}}