.webdev-services-hero { padding: 140px 8% 70px; }
.webdev-services-hero-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.webdev-services-hero .webdev-about-description { max-width: 660px; margin: 26px auto 36px; }
.webdev-services-hero-actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.webdev-services-tel {
    color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.95rem;
    border: 1px solid rgba(255,255,255,0.15); padding: 12px 22px; border-radius: 8px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.webdev-services-tel:hover { color: #fff; border-color: var(--webdev-accent, #60a5fa); }

.webdev-service-block { padding: 70px 8%; }
.webdev-service-block-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 70px; align-items: center;
}
.webdev-service-block-reverse .webdev-service-block-content { order: 2; }
.webdev-service-block-reverse .webdev-service-block-visual { order: 1; }

.webdev-service-kicker {
    font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid rgba(255,255,255,0.14); border-radius: 100px;
    padding: 8px 16px; margin-bottom: 22px;
}
.webdev-service-kicker span { color: var(--svc-accent, #60a5fa); font-weight: 600; }

.webdev-service-block h2 {
    font-size: 2.1rem; font-weight: 400; color: #fff; margin: 0 0 18px; line-height: 1.2;
}
.webdev-service-block-desc {
    color: rgba(255,255,255,0.72); font-size: 1.02rem; line-height: 1.8; margin: 0 0 26px;
}
.webdev-service-block-list { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 12px; }
.webdev-service-block-list li {
    color: rgba(255,255,255,0.8); padding-left: 30px; position: relative; line-height: 1.6; font-size: 0.95rem;
}
.webdev-service-block-list li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--svc-accent, #60a5fa); font-weight: 700;
}

.webdev-service-block-visual {
    position: relative; aspect-ratio: 1 / 1; max-height: 340px;
    border-radius: 24px; border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(160deg, rgba(30,36,46,0.95) 0%, rgba(22,24,28,0.98) 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.webdev-service-block-glow {
    position: absolute; width: 70%; height: 70%; border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,0.22) 0%, transparent 70%);
    background: radial-gradient(circle, color-mix(in srgb, var(--svc-accent, #60a5fa) 22%, transparent 70%));
    filter: blur(10px); pointer-events: none;
}
.webdev-service-block-icon {
    position: relative; width: 110px; height: 110px; border-radius: 28px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--svc-accent, #60a5fa);
}
.webdev-service-block-icon svg { width: 58px; height: 58px; }

.webdev-service-block--blue { --svc-accent: #3b82f6; }
.webdev-service-block--purple { --svc-accent: #8b5cf6; }
.webdev-service-block--green { --svc-accent: #10b981; }
.webdev-service-block--orange { --svc-accent: #f97316; }

.webdev-service-beauty { padding: 70px 8%; }
.webdev-service-beauty-inner {
    max-width: 1100px; margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 24px;
    padding: 60px 56px;
    background: linear-gradient(160deg, rgba(30,36,46,0.95) 0%, rgba(22,24,28,0.98) 100%);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    text-align: center;
}
.webdev-service-beauty-head { max-width: 720px; margin: 0 auto 44px; }
.webdev-service-beauty-head h2 { font-size: 2.1rem; font-weight: 400; color: #fff; margin: 0 0 18px; line-height: 1.2; }
.webdev-service-beauty-desc { color: rgba(255,255,255,0.72); font-size: 1.02rem; line-height: 1.8; margin: 0; }
.webdev-service-beauty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.webdev-service-beauty-card {
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 38px 34px;
    background: rgba(255,255,255,0.03);
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.webdev-service-beauty-card:hover { border-color: rgba(139,92,246,0.5); transform: translateY(-3px); }
.webdev-beauty-card-icon {
    width: 58px; height: 58px; border-radius: 16px; margin-bottom: 20px;
    background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3);
    color: #a78bfa; display: flex; align-items: center; justify-content: center;
}
.webdev-beauty-card-icon svg { width: 28px; height: 28px; }
.webdev-service-beauty-card h3 { font-size: 1.35rem; font-weight: 500; color: #fff; margin: 0 0 10px; }
.webdev-beauty-card-desc { color: rgba(255,255,255,0.6); font-size: 0.92rem; line-height: 1.7; margin: 0 0 18px; }
.webdev-service-beauty-card .webdev-service-block-list { margin-bottom: 0; }
.webdev-service-beauty-card .webdev-service-block-list li::before { color: #a78bfa; }
.webdev-service-beauty-cta { margin-top: 42px; }

.webdev-services-final { padding: 70px 8% 130px; }
.webdev-services-final-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.webdev-services-final h2 { font-size: 2.1rem; font-weight: 400; color: #fff; margin: 0 0 14px; }
.webdev-services-final p { color: rgba(255,255,255,0.7); line-height: 1.8; margin: 0 0 30px; }

@media (max-width:1023px) {
    .webdev-service-block-inner { grid-template-columns: 1fr; gap: 36px; }
    .webdev-service-block-reverse .webdev-service-block-content { order: 1; }
    .webdev-service-block-reverse .webdev-service-block-visual { order: 2; }
    .webdev-service-block-visual { max-height: 260px; max-width: 420px; margin: 0 auto; width: 100%; }
    .webdev-service-beauty-grid { grid-template-columns: 1fr; }
}

@media (max-width:768px) {
    .webdev-services-hero { padding: 120px 5% 55px; }
    .webdev-services-hero-actions { flex-direction: column; }
    .webdev-service-block { padding: 50px 5%; }
    .webdev-service-block h2, .webdev-service-beauty-head h2, .webdev-services-final h2 { font-size: 1.7rem; }
    .webdev-service-beauty-inner { padding: 40px 22px; }
    .webdev-service-beauty-card { padding: 28px 22px; }
    .webdev-services-final { padding: 50px 5% 110px; }
}