.website-solutions { padding:82px 0 64px; background:radial-gradient(ellipse at 0 100%,#eef7ff 0,transparent 40%),#fbfdff; }
.website-solutions .services-heading-main { flex-basis:65%; }
.website-solutions .services-heading h2 { max-width:780px; }
.website-solutions-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.website-solution { --solution-accent:#088fe5; --solution-wash:#edf7ff; display:flex; flex-direction:column; min-width:0; border:1px solid #e2eaf4; border-radius:17px; background:#fff; overflow:hidden; box-shadow:0 5px 20px #193b6005; transition:transform .25s,box-shadow .25s,border-color .25s; }
.solution-violet { --solution-accent:#8954dc; --solution-wash:#f5efff; }
.solution-teal { --solution-accent:#089e91; --solution-wash:#e9faf6; }
.solution-amber { --solution-accent:#c68c20; --solution-wash:#fff7e7; }
.solution-rose { --solution-accent:#df5584; --solution-wash:#fff0f6; }
.solution-indigo { --solution-accent:#6375d3; --solution-wash:#eff2ff; }
.solution-image { position:relative; overflow:hidden; aspect-ratio:1.7; background:#e6eef7; }
.solution-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.solution-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,#0b234333); pointer-events:none; }
.solution-image-arrow { position:absolute; right:14px; top:14px; z-index:1; width:32px; height:32px; display:grid; place-items:center; color:#fff; background:#0b23434a; backdrop-filter:blur(6px); border:1px solid #ffffff60; border-radius:50%; font-size:15px; transition:background .25s,transform .25s; }
.solution-content { flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:30px 22px 23px; position:relative; border-top:3px solid var(--solution-accent); }
.solution-icon { position:absolute; top:-24px; left:21px; width:44px; height:44px; display:grid; place-items:center; background:var(--solution-wash); color:var(--solution-accent); border:4px solid #fff; border-radius:13px; font-size:20px; box-shadow:0 3px 10px #15334b09; }
.solution-content h3 { font-size:19px; font-weight:700; line-height:1.35; letter-spacing:-.03em; margin:0 0 11px; color:#193758; }
.solution-content p { font-size:13px; color:#7a8a9e; line-height:1.8; margin:0 0 18px; }
.solution-more { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:15px; border-top:1px solid #edf1f6; color:var(--solution-accent); font-size:12px; font-weight:600; }
.website-solution:hover { transform:translateY(-6px); border-color:var(--solution-accent); box-shadow:0 16px 34px #16375412; }
.website-solution:hover .solution-image img { transform:scale(1.06); }
.website-solution:hover .solution-image-arrow { background:var(--solution-accent); transform:rotate(45deg); }
.website-solution:focus-visible { outline:3px solid var(--solution-accent); outline-offset:4px; }
.website-solution-cta { display:flex; align-items:center; gap:18px; padding:26px 30px; margin-top:32px; border:1px solid #294e72; border-radius:14px; background:radial-gradient(ellipse at 100% 0,#17648b66,transparent 65%),linear-gradient(110deg,#091d39,#12385c); box-shadow:0 12px 30px #0b24451a; }
.solution-cta-icon { flex:0 0 48px; height:48px; display:grid; place-items:center; color:#71d5ff; background:#ffffff12; border:1px solid #ffffff26; border-radius:13px; font-size:24px; }
.website-solution-cta strong { font-size:18px; letter-spacing:-.025em; color:#fff; }
.website-solution-cta p { font-size:13px; color:#c2d5e9; margin:5px 0 0; }
.website-solution-cta > a { display:inline-flex; align-items:center; gap:18px; margin-left:auto; font-size:13px; font-weight:600; color:#fff; background:#0799f4; border-radius:8px; padding:13px 18px; white-space:nowrap; }
.website-solution-cta > a:hover { background:#0879d4; }
.website-solution-cta > a:focus-visible { outline:3px solid #9de2ff; outline-offset:4px; }
@media (min-width:1600px) { .website-solutions-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; } }
@media (max-width:1199.98px) { .website-solutions-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
@media (max-width:767.98px) {
  .website-solutions { padding:54px 0 42px; }
  .website-solutions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .solution-content { padding:28px 16px 20px; }
  .solution-content h3 { font-size:18px; }
  .solution-icon { left:15px; }
  .website-solution-cta { flex-wrap:wrap; gap:14px; padding:22px; }
  .website-solution-cta > div { flex:1; min-width:170px; }
  .website-solution-cta > a { margin-left:0; }
}
@media (max-width:420px) {
  .website-solutions-grid { grid-template-columns:1fr; }
  .solution-content { padding:30px 22px 22px; }
  .solution-content h3 { font-size:21px; }
  .solution-content p { font-size:14px; }
  .solution-icon { left:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .website-solution,.solution-image img,.solution-image-arrow { transition:none; }
  .website-solution:hover,.website-solution:hover .solution-image img,.website-solution:hover .solution-image-arrow { transform:none; }
}