.web-design-page{background:#f5f9fc}
.web-design-header{max-width:none;padding-inline:clamp(20px,4vw,64px);border-bottom:1px solid #e3edf4;background:#fff}
.web-design-header-cta{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:11px 17px;border-radius:11px;background:#1599ed;color:#fff;font-size:13px;font-weight:700}
.web-design-header-cta:hover{background:#087dcc;transform:translateY(-2px)}
.web-design-header-cta i,.web-design-actions i,.web-design-final-cta i{font-family:boxicons!important;font-size:18px}
.web-design-hero{overflow:hidden;background:radial-gradient(circle at 88% 18%,#d9f3ff 0,transparent 30%),linear-gradient(120deg,#eef9ff,#f9fcff 62%,#eaf7ff)}
.web-design-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start;gap:clamp(28px,5vw,80px);width:min(1320px,100%);margin:auto;padding:32px clamp(24px,4vw,64px) 32px}
.web-design-hero-copy{min-width:0}
.web-design-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#087dcc;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.web-design-eyebrow i{font-family:boxicons!important;font-size:18px}
.web-design-hero h1{margin:20px 0 22px;font:800 clamp(42px,4.7vw,72px)/1.07 'Manrope',sans-serif;letter-spacing:-.055em}
.web-design-hero h1 em{color:#1599ed;font-style:normal}
.web-design-hero-copy>p:not(.web-design-hero-note){max-width:640px;margin:0;color:#5d7489;font-size:17px;line-height:1.75}
.web-design-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px}
.web-design-primary,.web-design-secondary,.web-design-final-action>a{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:800}
.web-design-primary,.web-design-final-action>a{padding:16px 22px;border-radius:12px;background:#1599ed;color:#fff;box-shadow:0 12px 24px rgba(21,153,237,.2)}
.web-design-primary:hover,.web-design-final-action>a:hover{background:#087dcc;transform:translateY(-2px)}
.web-design-secondary{color:#0b315d}.web-design-secondary:hover{color:#1599ed}
.web-design-hero-note{display:flex;align-items:center;gap:7px;margin:23px 0 0!important;color:#6d8498;font-size:12px!important}
.web-design-hero-note i{font-family:boxicons!important;color:#1599ed;font-size:18px}
.web-design-project-features{flex-wrap:wrap;gap:8px 15px}
.web-design-feature-tag{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.web-design-visual{position:relative;min-width:0;padding:24px 16px 0}
.web-design-browser{overflow:hidden;border:1px solid #dce9f3;border-radius:22px;background:#fff;box-shadow:0 32px 65px rgba(11,49,93,.15);transform:rotate(1.5deg)}
.web-design-browser-bar{display:grid;grid-template-columns:52px minmax(0,1fr) 60px;align-items:center;gap:8px;height:42px;padding:0 12px;border-bottom:1px solid #e8eef4;background:#f9fbfd}
.web-design-browser-dots{display:flex;gap:5px}.web-design-browser-dots span{width:7px;height:7px;border-radius:50%;background:#bad1df}.web-design-browser-dots span:first-child{background:#ffc6c6}.web-design-browser-dots span:nth-child(2){background:#f9df9a}
.web-design-browser-domain{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;overflow:hidden;color:#537b99;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.web-design-browser-domain:hover{color:#1599ed}.web-design-browser-domain i{flex:0 0 auto;font-family:boxicons!important;font-size:13px}
.web-design-browser-controls{display:flex;justify-content:flex-end;gap:3px}.web-design-browser-controls button{display:grid;width:27px;height:27px;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:#597b94;cursor:pointer}.web-design-browser-controls button:hover,.web-design-browser-controls button:focus-visible{background:#e6f4fc;color:#087dcc;outline:none}.web-design-browser-controls i{font-family:boxicons!important;font-size:19px}
.web-design-browser-body{position:relative;overflow:hidden;aspect-ratio:2.05;background:#fff}.web-design-client-slide{position:absolute;inset:0;display:block}.web-design-client-slide[hidden]{display:none}.web-design-client-slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
.web-design-gallery-caption{display:flex;justify-content:space-between;gap:16px;margin:20px 3px 0;color:#718aa0;font-size:11px;font-weight:700}.web-design-gallery-count{font-variant-numeric:tabular-nums}
.web-design-hero-copy,.web-design-browser-body,.web-design-browser-domain,.web-design-gallery-caption{transition:opacity .26s ease,transform .26s ease}
.web-design-hero.is-switching .web-design-hero-copy,.web-design-hero.is-switching .web-design-browser-body,.web-design-hero.is-switching .web-design-browser-domain,.web-design-hero.is-switching .web-design-gallery-caption{opacity:0;transform:translateY(7px)}
.web-design-section{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:90px 0}
.web-design-section.web-design-value{padding-top:36px}
.web-design-section-heading{max-width:720px}.web-design-section-heading>span,.web-design-final-cta span{color:#1599ed;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.web-design-section h2,.web-design-final-cta h2{margin:12px 0 14px;font:800 clamp(30px,3.2vw,46px)/1.14 'Manrope',sans-serif;letter-spacing:-.04em}.web-design-section-heading p{margin:0;color:#677e92;line-height:1.7}
.web-design-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-top:38px}.web-design-feature-grid article{padding:27px;border:1px solid #dfebf3;border-radius:18px;background:#fff;box-shadow:0 9px 25px rgba(15,60,94,.04)}.web-design-feature-grid article>i{display:grid;width:45px;height:45px;place-items:center;border-radius:12px;background:#eaf7ff;color:#1599ed;font-family:boxicons!important;font-size:25px}.web-design-feature-grid h3{margin:20px 0 9px;font:800 17px 'Manrope',sans-serif}.web-design-feature-grid p{margin:0;color:#6b8195;font-size:13px;line-height:1.65}
.web-design-measure{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,350px);align-items:center;gap:28px;overflow:hidden;padding:30px 48px 0;border-radius:26px;background:#0b315d;color:#fff}.web-design-measure>div:first-child{padding-bottom:30px}.web-design-measure h2{max-width:900px}.web-design-measure p{max-width:720px;color:#c4d8e7;line-height:1.75}.web-design-measure-carousel{position:relative;width:100%;height:300px;align-self:end}.web-design-measure-carousel img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity 1s ease-in-out}.web-design-measure-carousel img.is-active{opacity:1}
.web-design-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px}.web-design-process-grid article{border-top:2px solid #cde9f8;padding-top:24px}.web-design-process-grid b{color:#1599ed;font:800 16px 'Manrope',sans-serif}.web-design-process-grid h3{margin:13px 0 9px;font:800 18px 'Manrope',sans-serif}.web-design-process-grid p{margin:0;color:#6b8195;font-size:13px;line-height:1.7}
.web-design-final-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;width:min(1240px,calc(100% - 48px));margin:0 auto 90px;overflow:hidden;padding:34px 38px 0;border-radius:24px;background:#e6f6ff}.web-design-final-copy{flex:1 1 500px;min-width:0;max-width:650px;padding-bottom:34px}.web-design-final-cta p{margin:0;color:#617b90;line-height:1.65}.web-design-final-action{display:flex;flex:0 0 auto;align-self:stretch;align-items:center;gap:14px}.web-design-final-action img{display:block;width:clamp(220px,25vw,315px);height:auto;align-self:end;object-fit:contain;object-position:center bottom}.web-design-final-action>a{flex:0 0 auto;white-space:nowrap}
.web-design-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px clamp(24px,4vw,64px);border-top:1px solid #dfebf3;background:#fff;color:#7890a3;font-size:12px}.web-design-footer-contact{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.web-design-footer-brand{color:#1599ed;font:800 20px 'Manrope',sans-serif}.web-design-footer-email{color:#52748e;font-size:12px;font-weight:700}.web-design-footer-email:hover{color:#1599ed}
@media(max-width:1000px){.web-design-hero-inner{grid-template-columns:1fr}.web-design-visual{width:min(600px,100%);margin:auto}.web-design-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.web-design-final-cta{flex-direction:column;align-items:stretch}.web-design-final-copy{flex:initial;max-width:none;padding-bottom:0}.web-design-final-action{justify-content:flex-end}}
@media(max-width:760px){.web-design-header{padding-inline:16px;gap:8px}.web-design-header .brand img{width:130px}.web-design-header-cta{margin-left:auto;padding:10px 12px;font-size:11px}.web-design-header .menu-btn{flex:0 0 auto}.web-design-hero-inner{padding:24px 20px 28px}.web-design-hero h1{font-size:clamp(37px,9vw,54px)}.web-design-hero-copy>p:not(.web-design-hero-note){font-size:15px}.web-design-section{width:calc(100% - 36px);padding:64px 0}.web-design-section.web-design-value{padding-top:28px}.web-design-measure{grid-template-columns:1fr;gap:0;padding:30px 24px 0}.web-design-measure>div:first-child{padding-bottom:18px}.web-design-measure-carousel{width:min(100%,320px);height:270px;justify-self:center}.web-design-process-grid{gap:20px}.web-design-final-cta{width:calc(100% - 36px);margin-bottom:65px;padding:30px 24px 0}.web-design-final-action{width:100%;justify-content:space-between;gap:8px}.web-design-final-action img{width:min(57%,210px);min-width:0}.web-design-final-action>a{flex:1 1 auto;min-width:0;padding:10px 6px;gap:5px;font-size:11px}.web-design-footer{flex-direction:column;align-items:start}}
@media(prefers-reduced-motion:reduce){.web-design-measure-carousel img,.web-design-hero-copy,.web-design-browser-body,.web-design-browser-domain,.web-design-gallery-caption{transition:none}}
@media(max-width:560px){.web-design-feature-grid,.web-design-process-grid{grid-template-columns:1fr}.web-design-browser-bar{grid-template-columns:32px minmax(0,1fr) 58px;padding-inline:9px}.web-design-browser-domain{font-size:10px}.web-design-actions{align-items:stretch;flex-direction:column}.web-design-primary,.web-design-secondary{justify-content:center}.web-design-hero-note{align-items:flex-start}}
@media(max-width:380px){.web-design-final-action{flex-direction:column;align-items:center;padding-bottom:20px}.web-design-final-action img{width:min(100%,250px)}.web-design-final-action>a{width:100%}}