.svc-page { --svc-red: #e60028; max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; color: #101720; }
.svc-page *, .svc-page *::before, .svc-page *::after { box-sizing: border-box; }
.svc-page a, .svc-page button, .svc-page input, .svc-page select, .svc-page textarea { -webkit-tap-highlight-color: transparent; }
.svc-page a:focus-visible, .svc-page button:focus-visible { outline: 2px solid var(--svc-red); outline-offset: 4px; }
.svc-page section[id] { scroll-margin-top: 90px; }
.svc-breadcrumb { display: flex; gap: 12px; font-size: 12px; color: #737d8b; padding: 10px 0 22px; }
.svc-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 18px; min-height: 360px; overflow: hidden; }
.svc-hero-copy { position: relative; z-index: 2; padding: 15px 0 30px; }
.svc-eyebrow { font-size: 12px; font-weight: 600; color: var(--svc-red); margin: 0 0 15px; display: flex; gap: 10px; align-items: center; }
.svc-eyebrow::before { content: ''; height: 2px; width: 34px; background: var(--svc-red); }
.svc-hero h1 { font-size: clamp(30px, 3.2vw, 45px); line-height: 1.35; font-weight: 700; letter-spacing: -.9px; margin: 0 0 15px; }
.svc-summary { font-size: 19px; color: #5b6573; line-height: 1.65; max-width: 520px; margin: 0; }
.svc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.svc-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--svc-red); background: var(--svc-red); color: white; padding: 12px 20px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.5; text-decoration: none; }
.svc-button:hover { background: #bc0022; color: white; }
.svc-button-outline { background: white; color: var(--svc-red); }
.svc-button-outline:hover { background: #fff0f3; color: #bc0022; }
.svc-hero-visual { position: relative; align-self: stretch; min-height: 345px; background: radial-gradient(ellipse at 75% 35%, #e3eae6, transparent 65%), linear-gradient(150deg, #f9faf8, #e8e5df); border-radius: 8px; }
.svc-hero-visual > img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.svc-device { position: absolute; border: 9px solid #171d23; border-bottom-width: 15px; border-radius: 10px; box-shadow: 0 14px 24px #19243330; }
.svc-device-desktop { width: 77%; right: 5%; top: 28px; transform: perspective(900px) rotateY(-8deg) rotateZ(2deg); }
.svc-device-desktop::after { content: ''; position: absolute; width: 30%; height: 32px; background: #9da6ac; bottom: -45px; left: 35%; clip-path: polygon(25% 0,75% 0,85% 80%,100% 100%,0 100%,15% 80%); }
.svc-device-laptop { width: 66%; left: 1%; bottom: 40px; transform: perspective(800px) rotateY(7deg) rotateZ(-3deg); z-index: 1; }
.svc-device-laptop::after { content: ''; position: absolute; height: 9px; background: linear-gradient(#b9c0c7,#78838a); width: 114%; left: -7%; bottom: -22px; border-radius: 0 0 50% 50%; }
.svc-visual-caption { position: absolute; bottom: 12px; right: 16px; font-size: 8px; letter-spacing: 2px; color: #78817b; }
.svc-browser { --mock: #245b3d; --mock-bg: #e8efe3; background: white; overflow: hidden; color: #182c24; border-radius: 3px; font-family: 'Noto Sans Bengali', sans-serif; }
.svc-browser-1 { --mock: #22516e; --mock-bg: #e8eff6; }
.svc-browser-2 { --mock: #bc1930; --mock-bg: #f4e9dd; }
.svc-browser-chrome { display: flex; align-items: center; gap: 3px; padding: 5px 6px; background: #f0f2f4; }
.svc-browser-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #bdc4ca; }
.svc-browser-chrome span { font: 5px sans-serif; color: #879099; background: white; width: 60%; text-align: center; margin-left: 10%; border-radius: 2px; }
.svc-browser-nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 9px; }
.svc-browser-nav b { font-size: 7px; color: var(--mock); }
.svc-browser-nav > span { font: 5px sans-serif; }
.svc-browser-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; padding: 18px 12px; gap: 8px; background: var(--mock-bg); min-height: 115px; }
.svc-browser-hero small { font-size: 4px; letter-spacing: 1px; color: var(--mock); display: block; margin-bottom: 6px; }
.svc-browser-hero strong { font-size: 17px; display: block; line-height: 1.5; }
.svc-browser-hero em { font: normal 5px sans-serif; background: var(--mock); color: white; padding: 5px 9px; display: inline-block; margin-top: 9px; }
.svc-browser-art { display: flex; align-items: end; justify-content: center; gap: 5px; min-height: 98px; border-bottom: 2px solid #81938a44; }
.svc-browser-art span { width: 25%; height: 65px; border-radius: 9px 9px 3px 3px; background: linear-gradient(90deg, #305a26, #8aa660, #436633); border-top: 7px solid #c5a576; box-shadow: 3px 4px 6px #1b3a2822; }
.svc-browser-art span:nth-child(2) { height: 90px; width: 34%; }
.svc-browser-art span:nth-child(3) { height: 50px; }
.svc-browser-1 .svc-browser-art span { border-radius: 0; height: 90px; border: 2px solid #628195; background: repeating-linear-gradient(0deg, transparent 0 9px, #8eabbc 9px 12px), repeating-linear-gradient(90deg, #3c647e 0 9px, #b6cbd5 9px 12px); }
.svc-browser-1 .svc-browser-art span:nth-child(2) { height: 115px; }
.svc-browser-2 .svc-browser-art { background: linear-gradient(155deg, #eeb277, #ae5c4f 50%, #233f32 51%); border-radius: 4px; }
.svc-browser-2 .svc-browser-art span { border: 0; border-radius: 0; box-shadow: none; height: 42px; width: 6%; background: #1e2930; }
.svc-browser-tiles { display: flex; gap: 7px; padding: 9px 12px; }
.svc-browser-tiles i { flex: 1; height: 28px; background: var(--mock-bg); border-bottom: 4px solid #f1f2f3; }
.svc-section { margin-top: 26px; }
.svc-section-heading { border-top: 2px solid #26313d; border-bottom: 1px solid #d8dfe6; padding: 9px 0 8px; font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0 0 16px; }
.svc-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.svc-card { border: 1px solid #e0e6ec; border-radius: 6px; padding: 22px; display: flex; flex-direction: column; transition: border-color .18s; }
.svc-card:hover { border-color: #e9a9b5; }
.svc-icon { width: 39px; height: 39px; color: var(--svc-red); margin-bottom: 10px; }
.svc-card h3, .svc-example h3, .svc-process h3 { font-size: 20px; line-height: 1.5; font-weight: 700; margin: 0 0 7px; }
.svc-card > p, .svc-example > p { font-size: 15px; color: #68707d; line-height: 1.6; margin: 0 0 12px; }
.svc-card ul { list-style: none; padding: 0; margin: 0 0 16px; color: #68707d; font-size: 14px; }
.svc-card li { display: flex; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.svc-card li > span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: var(--svc-red); color: white; font: 11px sans-serif; }
.svc-card > a { font-size: 14px; color: var(--svc-red); margin-top: auto; font-weight: 600; }
.svc-card > a:hover { text-decoration: underline; }
.svc-section-intro { color: #68707d; margin: -8px 0 14px; font-size: 15px; }
.svc-technologies { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin: 0; }
.svc-technologies li { border: 1px solid #e0e6ec; border-radius: 10px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 9px; font: 600 13px Inter, sans-serif; }
.svc-technologies li > span { font: 700 22px Georgia, serif; color: #167747; }
.svc-technologies li > img { display: block; width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; }
.svc-technologies li:nth-child(2) > span { color: #1674a1; }.svc-technologies li:nth-child(3) > span { color: #8a3d8b; }.svc-technologies li:nth-child(4) > span { color: #e63232; }.svc-technologies li:nth-child(5) > span { color: #15171b; }.svc-technologies li:nth-child(6) > span { color: #169dca; }
.svc-maintenance { margin-top: 14px; background: #fff0f2; padding: 14px 18px; display: flex; align-items: center; gap: 14px; border-radius: 6px; color: var(--svc-red); }
.svc-maintenance > svg { width: 28px; height: 28px; flex-shrink: 0; }.svc-maintenance strong { font-size: 17px; }.svc-maintenance a { margin-left: auto; font-size: 13px; white-space: nowrap; }
.svc-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.svc-example-image { position: relative; background: #edf0ed; padding: 18px 14px 14px; border-radius: 5px; margin-bottom: 10px; overflow: hidden; }
.svc-example-image .svc-browser { border: 6px solid #20272d; border-bottom-width: 12px; box-shadow: 0 6px 9px #1b242244; }
.svc-example-image img { width: 100%; height: 215px; object-fit: cover; border-radius: 4px; }
.svc-example-badge { position: absolute; top: 9px; left: 12px; z-index: 1; background: var(--svc-red); color: white; padding: 4px 10px; border-radius: 3px; font-size: 11px; }
.svc-example h3 { font-size: 17px; margin-bottom: 3px; }.svc-example > p { font-size: 13px; margin: 0; }
.svc-example h3 a:hover { color: var(--svc-red); }
.svc-process { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; gap: 24px; }
.svc-process li { display: flex; gap: 12px; position: relative; }.svc-process li:not(:last-child)::after { content: '›'; position: absolute; right: -17px; top: 24px; color: #87919b; font: 25px sans-serif; }
.svc-step-icon { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; background: #fff0f2; color: var(--svc-red); border-radius: 50%; }.svc-step-icon svg { width: 28px; height: 28px; }
.svc-step-number { color: var(--svc-red); font: 600 11px Inter,sans-serif; }.svc-process h3 { font-size: 16px; margin: 2px 0; }.svc-process p { font-size: 12px; color: #76808d; line-height: 1.6; margin: 0; }
.svc-enquiry { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; border: 1px solid #dfe5eb; border-radius: 7px; padding: 22px; margin-top: 24px; }
.svc-enquiry > div:first-child { border-right: 1px solid #e5e9ee; padding-right: 22px; }.svc-enquiry h2 { font-weight: 700; font-size: 26px; line-height: 1.5; margin: 0 0 10px; }.svc-enquiry > div > p, .svc-extra-copy { font-size: 14px; color: #737c88; line-height: 1.6; }.svc-extra-copy { margin-top: 14px; }
.svc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }.svc-form > div { min-width: 0; }.svc-form label { display: block; font-size: 12px; margin-bottom: 5px; font-weight: 500; }.svc-form label span { color: var(--svc-red); }
.svc-form input:not([hidden]), .svc-form textarea, .svc-form select { display: block; width: 100%; border: 1px solid #d6dfe7; border-radius: 4px; padding: 9px 10px; font: inherit; font-size: 12px; background: white; color: #283240; }.svc-form select { padding-right: 26px; }.svc-form textarea { resize: vertical; min-height: 65px; }.svc-form input:focus, .svc-form textarea:focus, .svc-form select:focus { outline: 2px solid #edbbc4; outline-offset: 1px; }
.svc-form-bottom { grid-column: 1/-1; display: flex; gap: 18px; align-items: center; }.svc-form-bottom .svc-button { flex-shrink: 0; }.svc-form-bottom p { font-size: 11px; line-height: 1.5; color: #7c8591; margin: 0; }.svc-success { padding: 12px; background: #effaf2; color: #176436; margin-bottom: 14px; }.svc-errors { padding: 12px 24px; background: #fff0f2; color: #b51632; margin-bottom: 14px; }
.svc-form small { display: block; margin-top: 5px; color: #737c88; font-size: 11px; }
.svc-form-message { grid-column: 1 / -1; }
.svc-mobile-contact { display: none; }
@media (max-width: 1000px) { .svc-hero h1 { font-size: 33px; }.svc-actions { gap: 8px; }.svc-actions .svc-button { font-size: 12px; padding: 11px 12px; }.svc-card { padding: 18px; }.svc-card h3 { font-size: 18px; }.svc-technologies { grid-template-columns: repeat(3,minmax(0,1fr)); }.svc-process { gap: 20px; }.svc-step-icon { flex-basis: 38px; width: 38px; height: 38px; }.svc-step-icon svg { width: 23px; height: 23px; }.svc-enquiry { grid-template-columns: 1fr 1.7fr; } }
@media (max-width: 700px) {
  .svc-page { padding: 0 18px 76px; }.svc-breadcrumb { padding: 4px 0 15px; font-size: 11px; }.svc-hero { grid-template-columns: 1fr; gap: 8px; }.svc-hero-copy { padding: 0 0 12px; }.svc-eyebrow { font-size: 10px; margin-bottom: 11px; }.svc-hero h1 { font-size: 31px; letter-spacing: -.5px; max-width: 480px; }.svc-summary { font-size: 15px; }.svc-actions { display: grid; grid-template-columns: 1fr; margin-top: 16px; }.svc-actions .svc-button { font-size: 14px; padding: 10px 16px; }.svc-hero-visual { min-height: 290px; }.svc-device-desktop { width: 74%; }.svc-device-laptop { width: 65%; bottom: 35px; }.svc-section { margin-top: 23px; }.svc-section-heading { font-size: 22px; padding: 8px 0; margin-bottom: 12px; }.svc-card-grid { grid-template-columns: 1fr; gap: 12px; }.svc-card { padding: 20px; }.svc-card h3 { font-size: 21px; }.svc-card > p { font-size: 15px; }.svc-card li, .svc-card > a { font-size: 14px; }.svc-icon { width: 35px; height: 35px; }.svc-section-intro { font-size: 13px; line-height: 1.6; }.svc-technologies { gap: 7px; }.svc-technologies li { padding: 9px 5px; gap: 5px; font-size: 10px; }.svc-technologies li > span { font-size: 19px; }.svc-maintenance { padding: 12px; gap: 8px; flex-wrap: wrap; }.svc-maintenance strong { font-size: 14px; flex: 1; }.svc-maintenance a { font-size: 12px; }.svc-example-grid { grid-template-columns: 1fr; gap: 20px; }.svc-example-image { padding: 22px 20px 17px; }.svc-example-image .svc-browser-hero { min-height: 140px; }.svc-example-image .svc-browser-hero strong { font-size: 21px; }.svc-example h3 { font-size: 19px; }.svc-example > p { font-size: 14px; }.svc-process { grid-template-columns: 1fr 1fr; gap: 20px 18px; }.svc-process li:nth-child(2)::after { display: none; }.svc-process li { gap: 9px; }.svc-process h3 { font-size: 15px; }.svc-process p { font-size: 11px; }.svc-enquiry { grid-template-columns: 1fr; padding: 18px; gap: 18px; }.svc-enquiry > div:first-child { border-right: 0; border-bottom: 1px solid #e5e9ee; padding: 0 0 16px; }.svc-enquiry h2 { font-size: 25px; }.svc-form { grid-template-columns: 1fr; }.svc-form input:not([hidden]), .svc-form select, .svc-form textarea { padding: 11px; font-size: 14px; }.svc-form label { font-size: 13px; }.svc-form-bottom { flex-direction: column; align-items: stretch; gap: 10px; }.svc-mobile-contact { display: flex; position: fixed; bottom: 12px; left: 18px; right: 18px; z-index: 40; padding: 13px; box-shadow: 0 5px 20px #a2002440; border-radius: 7px; }.svc-visual-caption { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } }
@media (max-width: 700px) { .svc-technologies li > img { width: 22px; height: 22px; flex-basis: 22px; } }