/* Tecnity brand layer: palette from the logo (navy / teal / blue / orange) */
:root{
	--primary-color: #0F1B2D;
	--secondary-color: #F3F7FB;
	--text-color: #5B6B7F;
	--accent-color: #19B5C8;
	--accent-2: #2F80ED;
	--orange: #FF6A2B;
	--divider-color: #0F1B2D14;
	--grad: linear-gradient(135deg, #19B5C8 0%, #2F80ED 100%);
}

/* Buttons */
.btn-default{ color: #fff; background: var(--grad); }
.btn-default:hover{ color: #fff; }
.btn-default::before{ filter: brightness(0) invert(1); }
.btn-default.btn-highlighted{ background: transparent; color: var(--primary-color); box-shadow: inset 0 0 0 1.5px var(--accent-color); }
.t-hero .btn-default.btn-highlighted{ color: #fff; }
.header-btn .btn-default{ color: #fff; }

/* Gradient headline accent */
.t-gradient{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.text-effect .t-gradient{ -webkit-text-fill-color: transparent; }

/* Dark navy page headers */
.page-header{ background: radial-gradient(900px 400px at 85% -10%, #19b5c833, transparent 60%), radial-gradient(700px 400px at 5% 110%, #2f80ed33, transparent 60%), #0F1B2D; }
.page-header-box h1{ color: #fff; }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before{ color: #ffffffb3; }
.breadcrumb-item a:hover{ color: var(--accent-color); }

/* Hero */
.t-hero{ position: relative; overflow: hidden; padding: 110px 10px 60px; background: #0A1424; }
.t-hero > .container{ position: relative; z-index: 2; }
.t-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.t-grid{ position: absolute; inset: 0; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); animation: tGrid 24s linear infinite; }
.t-orb{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: tFloat 14s ease-in-out infinite; }
.t-orb-1{ width: 460px; height: 460px; background: #19B5C8; top: -120px; right: 8%; }
.t-orb-2{ width: 420px; height: 420px; background: #2F80ED; bottom: -160px; left: -80px; animation-delay: -6s; }
@keyframes tGrid{ to{ background-position: 56px 56px, 56px 56px; } }
@keyframes tFloat{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(30px,-30px); } }
.t-hero .section-title h3{ color: #fff; border-color: #ffffff2e; background: #ffffff0f; }
.t-hero .section-title p{ color: #c3cedd; }
.t-hero .hero-counter-box{ border-top: 1px solid #ffffff1f; }
.t-hero .hero-counter-item{ border-color: #ffffff1f; }
.t-hero .hero-counter-item h2{ color: #fff; }
.t-hero .hero-counter-item p{ color: #9fb0c6; }

.t-visual{ position: relative; padding: 30px 0 30px 10px; }
.t-window{ background: #0E1B30; border: 1px solid #ffffff1f; border-radius: 14px; box-shadow: 0 30px 80px #00000066, 0 0 0 1px #19b5c822; overflow: hidden; }
.t-window-bar{ display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: #ffffff0a; border-bottom: 1px solid #ffffff14; }
.t-window-bar i{ width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.t-window-bar i:nth-child(2){ background: #febc2e; }
.t-window-bar i:nth-child(3){ background: #28c840; }
.t-window-bar span{ margin-left: 10px; color: #7f92ab; font-size: 13px; }
.t-window-body{ padding: 26px 28px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; line-height: 1.5; color: #d7e2f1; }
.t-window-body p{ margin: 0 0 4px; color: inherit; }
.t-window-body b{ font-weight: 500; }
.t-window-body .c1{ color: #ff7ab2; } .t-window-body .c2{ color: #ff7ab2; } .t-window-body .c3{ color: #19B5C8; } .t-window-body .c4{ color: #ffb86b; }
.t-window-body .t-ok{ margin-top: 18px; color: #4ade80; }
.t-chip{ position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 18px 12px 12px; box-shadow: 0 18px 40px #00000040; animation: tFloat 7s ease-in-out infinite; }
.t-chip i{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 17px; }
.t-chip span{ display: flex; flex-direction: column; color: var(--primary-color); font-weight: 600; font-size: 15px; line-height: 1.2; }
.t-chip small{ color: var(--text-color); font-weight: 400; font-size: 12px; }
.t-chip-1{ left: -20px; top: 0; }
.t-chip-2{ right: -10px; top: 42%; animation-delay: -2s; }
.t-chip-2 i{ background: linear-gradient(135deg, #FF6A2B, #ff9a5a); }
.t-chip-3{ left: 8%; bottom: -6px; animation-delay: -4s; }

/* Cards: gradient icon tiles + hover lift */
.services-item{ border: 1px solid var(--divider-color); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.services-item:hover{ transform: translateY(-6px); box-shadow: 0 22px 50px #0f1b2d26; border-color: transparent; }
.services-item::before{ background: linear-gradient(160deg, #0F1B2D 0%, #123a5c 60%, #19B5C8 140%); }
.services-item .icon-box{ margin-bottom: 70px; }
.services-item .icon-box i{ display: grid; place-items: center; width: 68px; height: 68px; border-radius: 16px; background: var(--grad); color: #fff; font-size: 28px; box-shadow: 0 12px 24px #19b5c844; transition: transform .35s ease, background .35s ease; }
.services-item:hover .icon-box i{ transform: rotate(-6deg) scale(1.06); background: #fff; color: var(--accent-2); }
.services-item:hover .services-item-content h3, .services-item:hover .services-item-content h3 a{ color: #fff; }
.services-item:hover .services-item-content p{ color: #c3d3e6; }
.services-item:hover .readmore-btn{ color: #fff; }
.services-item:hover .services-btn{ border-color: #ffffff29; }

/* Sections */
.our-services.bg-section, .bg-section{ background: var(--secondary-color); }
.section-sub-title h3{ color: var(--accent-2); }
.about-us-btn .btn-default{ margin-top: 10px; }

/* Sidebar active link */
.page-category-list ul li a.active{ color: var(--accent-2); font-weight: 600; }
.page-category-list h3{ background: var(--grad); color: #fff; }

@media (max-width: 991px){
	.t-hero{ padding: 70px 10px 40px; }
	.t-visual{ padding: 30px 0 40px; margin-top: 30px; }
	.t-chip-1{ left: 0; } .t-chip-2{ right: 0; }
}
@media (max-width: 575px){
	.t-chip{ display: none; }
	.t-window-body{ font-size: 13px; padding: 20px; }
}

/* fixes after first visual review */
.btn-default.btn-highlighted::before{ filter: none; }
.t-hero .btn-default.btn-highlighted::before{ filter: brightness(0) invert(1); }
.btn-default.btn-highlighted:hover::before{ filter: brightness(0) invert(1); }
.t-window-body{ padding-bottom: 64px; }
.t-chip-1{ left: -34px; top: -6px; }
.t-chip-2{ right: 0; top: 44%; }
.t-chip-3{ left: 14%; bottom: 8px; }
@media (max-width: 991px){ .t-chip-1{ left: 0; } }
.services-item:hover .readmore-btn::before{ filter: brightness(0) invert(1); }

/* ---- Top bar, inset rounded hero, glass stat card (digital-agency style) ---- */
.t-topbar{ background: #0F1B2D; color: #fff; font-size: 14px; }
.t-topbar-in{ display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 9px 30px; }
.t-topbar a{ color: #ffffffd9; display: inline-flex; align-items: center; gap: 8px; }
.t-topbar a:hover{ color: var(--accent-color); }
.t-topbar-l, .t-topbar-r{ display: flex; align-items: center; gap: 28px; }
.t-topbar-r a + a{ border-left: 1px solid #ffffff2b; padding-left: 28px; }
.t-topbar i{ color: var(--accent-color); }

.t-hero-wrap{ padding: 20px 20px 0; background: #fff; }
.t-hero{ border-radius: 26px; padding: 90px 10px 90px; min-height: 640px; display: flex; align-items: center; }
.t-hero > .container{ width: 100%; }
.t-hero .t-hero-bg{ border-radius: 26px; }
.t-hero .hero-content h1{ font-size: 64px; }

.t-visual{ padding: 30px 0 80px 10px; }
.t-glass{ position: absolute; right: -8px; bottom: -6px; width: 300px; padding: 26px 26px 24px; border-radius: 20px; color: #fff;
	background: linear-gradient(160deg, #19b5c8cc 0%, #2f80edb3 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid #ffffff40; box-shadow: 0 24px 60px #00000055; z-index: 3; }
.t-glass-label{ margin: 0 0 14px; font-size: 15px; font-weight: 500; color: #fff; }
.t-avatars{ display: flex; padding-bottom: 14px; border-bottom: 1px solid #ffffff33; margin-bottom: 14px; }
.t-avatars img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; }
.t-avatars img:first-child{ margin-left: 0; }
.t-glass h2{ font-size: 46px; color: #fff; margin: 0 0 6px; line-height: 1; }
.t-glass p:last-child{ margin: 0; color: #ffffffe6; font-size: 14px; line-height: 1.5; }
.t-chip-3{ left: 6%; bottom: 40px; }

.t-stats{ background: #fff; padding: 50px 10px 30px; }
.t-stats .hero-counter-box{ margin: 0; }

@media (max-width: 1199px){ .t-hero .hero-content h1{ font-size: 52px; } .t-topbar-r{ display: none; } }
@media (max-width: 991px){
	.t-hero-wrap{ padding: 12px 12px 0; }
	.t-hero{ border-radius: 18px; padding: 60px 10px; min-height: 0; }
	.t-hero .hero-content h1{ font-size: 42px; }
	.t-glass{ position: relative; right: auto; bottom: auto; width: 100%; margin-top: 24px; }
	.t-visual{ padding-bottom: 20px; }
	.t-topbar-l a:nth-child(2){ display: none; }
	.t-topbar-in{ padding: 8px 16px; }
}

/* ---- About section ---- */
.t-about{ padding: 100px 10px; background: #fff; }
.t-about-visual{ position: relative; aspect-ratio: 1 / 0.92; border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #123a5c 0%, #0B1626 70%); box-shadow: 0 30px 70px #0f1b2d33; }
.t-about-visual::before{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px); background-size: 44px 44px; }
.t-lines{ position: absolute; inset: 0; width: 100%; height: 100%; }
.t-lines line{ stroke: url(#none); stroke: #19B5C8; stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; animation: tDash 1.6s linear infinite; }
@keyframes tDash{ to{ stroke-dashoffset: -16; } }
.t-node{ position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.t-node i{ display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: #ffffff12; border: 1px solid #ffffff2e; color: #fff; font-size: 24px; backdrop-filter: blur(6px); transition: transform .3s, background .3s; }
.t-node:hover i{ transform: translateY(-4px) scale(1.06); background: var(--grad); }
.t-node span{ color: #c3d3e6; font-size: 13px; font-weight: 500; }
.t-core{ left: 50%; top: 50%; }
.t-core img{ width: 92px; height: 92px; padding: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px #19b5c833, 0 0 0 22px #19b5c81a, 0 18px 40px #00000066; animation: tPulse 3.5s ease-in-out infinite; }
@keyframes tPulse{ 50%{ box-shadow: 0 0 0 14px #19b5c840, 0 0 0 30px #19b5c812, 0 18px 40px #00000066; } }
.t-badge{ position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 11px 18px 11px 11px; box-shadow: 0 16px 36px #00000040; animation: tFloat 8s ease-in-out infinite; }
.t-badge i{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--grad); color: #fff; }
.t-badge span{ display: flex; flex-direction: column; font-weight: 600; font-size: 14px; color: var(--primary-color); line-height: 1.2; }
.t-badge small{ font-weight: 400; color: var(--text-color); font-size: 12px; }
.t-badge-1{ left: 5%; bottom: 5%; }
.t-badge-2{ right: 5%; top: 5%; animation-delay: -3s; }
.t-badge-2 i{ background: linear-gradient(135deg, #FF6A2B, #ff9a5a); }

.t-about-text{ padding-left: 30px; }
.t-about-text .section-sub-title{ margin-bottom: 20px; }
.t-about-text .section-title h2{ font-size: 44px; }
.t-points{ list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
.t-points li{ display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--divider-color); border-radius: 14px; background: var(--secondary-color); transition: transform .3s, box-shadow .3s, background .3s; }
.t-points li:hover{ transform: translateX(6px); background: #fff; box-shadow: 0 14px 34px #0f1b2d1a; }
.t-points li > i{ flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--grad); color: #fff; font-size: 20px; }
.t-points h4{ font-size: 18px; margin: 0 0 2px; }
.t-points p{ margin: 0; font-size: 15px; }
.t-about-cta{ display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-top: 36px; }
.t-link{ font-weight: 700; color: var(--primary-color); }
.t-link i{ margin-left: 6px; color: var(--accent-2); transition: transform .3s; }
.t-link:hover{ color: var(--accent-2); }
.t-link:hover i{ transform: translateX(5px); }

@media (max-width: 991px){
	.t-about{ padding: 60px 10px; }
	.t-about-text{ padding: 40px 0 0; }
	.t-about-text .section-title h2{ font-size: 34px; }
	.t-node i{ width: 48px; height: 48px; font-size: 19px; }
	.t-core img{ width: 70px; height: 70px; padding: 15px; }
	.t-badge{ display: none; }
}
.t-badge-1{ left: 50%; bottom: 4%; transform: translateX(-50%); animation: none; }
.t-badge-2{ left: 50%; right: auto; top: 4%; transform: translateX(-50%); animation: none; }

/* logo mark in the About diagram: circle holds an uncropped, contained image */
.t-core .t-core-ring{ display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px #19b5c833, 0 0 0 22px #19b5c81a, 0 18px 40px #00000066; animation: tPulse 3.5s ease-in-out infinite; }
.t-core img{ width: 80px; height: auto; max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; animation: none; object-fit: contain; }
@media (max-width: 991px){ .t-core .t-core-ring{ width: 76px; height: 76px; } .t-core img{ width: 48px; } }

/* ---- Core offerings ---- */
.t-offers{ position: relative; overflow: hidden; padding: 100px 10px; background: var(--secondary-color); }
.t-offers::before{ content: ''; position: absolute; width: 520px; height: 520px; right: -160px; top: -160px; border-radius: 50%; background: radial-gradient(circle, #19b5c826, transparent 65%); }
.t-offers .container{ position: relative; }
.t-offers .row > [class*="col-"]{ margin-bottom: 30px; }
.t-offer{ position: relative; height: 100%; padding: 44px 38px 38px; background: #fff; border: 1px solid var(--divider-color); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; }
.t-offer:hover{ transform: translateY(-8px); box-shadow: 0 28px 60px #0f1b2d22; }
.t-offer::after{ content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.t-offer:hover::after{ transform: scaleX(1); }
.t-offer-no{ position: absolute; right: 28px; top: 14px; font-size: 84px; font-weight: 700; line-height: 1; color: #0f1b2d0a; }
.t-offer .icon-box{ margin-bottom: 40px; }
.t-offer .icon-box i{ display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: var(--grad); color: #fff; font-size: 30px; box-shadow: 0 14px 28px #19b5c844; }
.t-offer h3{ font-size: 26px; margin-bottom: 12px; }
.t-offer p{ margin-bottom: 22px; }
.t-offer ul{ list-style: none; margin: 0 0 30px; padding: 22px 0 0; border-top: 1px solid var(--divider-color); display: grid; gap: 12px; }
.t-offer li{ display: flex; align-items: flex-start; gap: 12px; color: var(--primary-color); font-weight: 500; font-size: 15px; }
.t-offer li i{ flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #19b5c81f; color: var(--accent-color); font-size: 11px; }
.t-offer-link{ margin-top: auto; font-weight: 700; color: var(--primary-color); }
.t-offer-link i{ margin-left: 6px; color: var(--accent-2); transition: transform .3s; }
.t-offer-link:hover{ color: var(--accent-2); }
.t-offer-link:hover i{ transform: translateX(6px); }
.t-offer-tag{ position: absolute; left: 38px; top: 18px; padding: 4px 12px; border-radius: 30px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

.t-offer-featured{ background: radial-gradient(500px 300px at 100% 0%, #19b5c840, transparent 60%), linear-gradient(165deg, #0F1B2D, #123a5c); border-color: transparent; color: #c3d3e6; transform: translateY(-14px); box-shadow: 0 30px 70px #0f1b2d40; }
.t-offer-featured:hover{ transform: translateY(-20px); }
.t-offer-featured h3, .t-offer-featured li, .t-offer-featured .t-offer-link{ color: #fff; }
.t-offer-featured p{ color: #c3d3e6; }
.t-offer-featured .t-offer-no{ color: #ffffff12; }
.t-offer-featured ul{ border-color: #ffffff29; }
.t-offer-featured li i{ background: #ffffff1f; color: #fff; }
.t-offer-featured .icon-box i{ background: #fff; color: var(--accent-2); }
.t-offer-featured .t-offer-link i{ color: var(--accent-color); }

@media (max-width: 991px){
	.t-offers{ padding: 60px 10px; }
	.t-offer-featured, .t-offer-featured:hover{ transform: none; }
}
.t-offer-featured .icon-box{ margin-top: 22px; margin-bottom: 30px; }

/* ---- Services explorer ---- */
.t-svc{ position: relative; overflow: hidden; padding: 110px 10px 90px; background: #0A1424; }
.t-svc-bg{ position: absolute; inset: 0; background: radial-gradient(700px 420px at 90% 0%, #19b5c833, transparent 60%), radial-gradient(600px 400px at 0% 100%, #2f80ed33, transparent 60%); }
.t-svc-bg::after{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); }
.t-svc .container{ position: relative; z-index: 1; }
.t-svc .section-sub-title h3{ color: #fff; background: #ffffff0f; border-color: #ffffff2e; }
.t-svc-wrap{ display: grid; grid-template-columns: 360px 1fr; gap: 26px; align-items: stretch; }
.t-svc-tabs{ display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 20px; background: #ffffff0a; border: 1px solid #ffffff1a; max-height: 760px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff33 transparent; }
.t-tab{ display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 16px; border: 0; border-radius: 12px; background: transparent; color: #b4c3d6; font: inherit; font-weight: 500; font-size: 16px; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.t-tab i{ flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #ffffff12; color: #dbe6f3; font-size: 16px; transition: background .25s, color .25s; }
.t-tab span{ flex: 1; }
.t-tab em{ font-style: normal; font-size: 12px; opacity: .45; font-variant-numeric: tabular-nums; }
.t-tab:hover{ color: #fff; background: #ffffff0f; }
.t-tab.active{ color: #fff; background: linear-gradient(90deg, #19b5c8, #2f80ed); box-shadow: 0 12px 28px #19b5c844; transform: translateX(4px); }
.t-tab.active i{ background: #ffffff2e; color: #fff; }
.t-tab.active em{ opacity: .85; }

.t-svc-panels{ position: relative; }
.t-panel{ display: none; position: relative; height: 100%; padding: 46px 48px 42px; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #ffffff14, #ffffff08); border: 1px solid #ffffff24; backdrop-filter: blur(10px); animation: tPanel .45s ease; }
.t-panel.active{ display: flex; flex-direction: column; }
@keyframes tPanel{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.t-panel-no{ position: absolute; right: 34px; top: 8px; font-size: 150px; font-weight: 700; line-height: 1; color: #ffffff0a; pointer-events: none; }
.t-panel-head{ display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.t-panel-icon{ display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: var(--grad); color: #fff; font-size: 34px; box-shadow: 0 16px 36px #19b5c855; }
.t-eyebrow{ margin: 0 0 6px; color: var(--accent-color); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.t-panel h3{ margin: 0; color: #fff; font-size: 34px; line-height: 1.15; }
.t-panel-lead{ margin: 0 0 12px; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.45; }
.t-panel-text{ margin: 0 0 28px; color: #aebed2; font-size: 16px; line-height: 1.7; }
.t-panel h4{ margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.t-chips, .t-tech, .t-why{ list-style: none; margin: 0; padding: 0; }
.t-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.t-chips li{ padding: 9px 16px; border-radius: 40px; background: #ffffff12; border: 1px solid #ffffff22; color: #e6eef8; font-size: 14.5px; transition: background .25s, border-color .25s; }
.t-chips li:hover{ background: #19b5c833; border-color: #19b5c8; }
.t-panel-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 26px; border-top: 1px solid #ffffff1f; margin-bottom: 32px; }
.t-tech{ display: flex; flex-wrap: wrap; gap: 8px; }
.t-tech li{ padding: 6px 12px; border-radius: 8px; background: #0003; border: 1px solid #ffffff1a; color: #7fe0ee; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.t-why{ display: grid; gap: 10px; }
.t-why li{ display: flex; gap: 10px; align-items: flex-start; color: #cfdbea; font-size: 15px; line-height: 1.45; }
.t-why i{ flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #19b5c833; color: var(--accent-color); font-size: 10px; }
.t-panel-cta{ margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; }
.t-link-light{ color: #fff; }
.t-link-light:hover{ color: var(--accent-color); }
.t-svc-foot{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; padding-top: 26px; border-top: 1px solid #ffffff1a; }
.t-svc-foot p{ margin: 0; color: #9fb0c6; }

@media (max-width: 1199px){ .t-svc-wrap{ grid-template-columns: 300px 1fr; } .t-panel{ padding: 36px 32px; } .t-panel h3{ font-size: 28px; } }
@media (max-width: 991px){
	.t-svc{ padding: 70px 10px 60px; }
	.t-svc-wrap{ grid-template-columns: 1fr; }
	.t-svc-tabs{ flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 10px; gap: 8px; }
	.t-tab{ width: auto; flex: none; white-space: nowrap; padding: 10px 14px; }
	.t-tab em{ display: none; }
	.t-tab.active{ transform: none; }
	.t-panel-cols{ grid-template-columns: 1fr; }
	.t-panel-no{ font-size: 90px; }
}
@media (max-width: 575px){ .t-panel{ padding: 28px 22px; } .t-panel-head{ flex-direction: column; align-items: flex-start; } .t-panel-lead{ font-size: 18px; } }

/* show all 14 tabs without an inner scrollbar on desktop */
@media (min-width: 992px){
	.t-svc-tabs{ max-height: none; overflow: visible; gap: 3px; }
	.t-tab{ padding: 9px 14px; font-size: 15.5px; }
	.t-tab i{ width: 34px; height: 34px; font-size: 15px; }
}

/* ---- Services: bento grid ---- */
.t-bento{ padding: 100px 10px 80px; background: #fff; }
.b-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 20px; }
.b-tile{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: 24px; overflow: hidden; border: 1px solid var(--divider-color); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; isolation: isolate; }
.b-tile:hover{ transform: translateY(-8px) scale(1.012); box-shadow: 0 30px 60px #0f1b2d33; }
.b-2x2{ grid-column: span 2; grid-row: span 2; padding: 38px; }
.b-2x1{ grid-column: span 2; }
.b-1x2{ grid-row: span 2; }
.b-no{ position: absolute; left: 28px; top: 24px; font-size: 13px; font-weight: 600; letter-spacing: .1em; opacity: .5; }
.b-water{ position: absolute; right: -14px; bottom: -22px; font-size: 130px; opacity: .07; transform: rotate(-12deg); transition: transform .5s, opacity .5s; z-index: -1; }
.b-tile:hover .b-water{ transform: rotate(0) scale(1.12); opacity: .13; }
.b-ico{ position: absolute; right: 26px; top: 22px; }
.b-ico i{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; font-size: 21px; transition: transform .4s; }
.b-tile:hover .b-ico i{ transform: rotate(-8deg) scale(1.08); }
.b-body h3{ margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
.b-body p{ margin: 0; font-size: 15px; line-height: 1.5; max-width: 34ch; }
.b-2x2 .b-body h3{ font-size: 34px; }
.b-2x2 .b-body p{ font-size: 17px; max-width: 40ch; }
.b-subs{ list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.b-subs li{ padding: 6px 12px; border-radius: 30px; font-size: 13px; border: 1px solid currentColor; opacity: .75; }
.b-go{ position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 14px; opacity: 0; transform: translate(-8px, 8px) scale(.8); transition: opacity .35s, transform .35s; }
.b-tile:hover .b-go{ opacity: 1; transform: none; }
.b-2x2 .b-go, .b-2x1 .b-go, .b-1x2 .b-go{ opacity: 1; transform: none; }

/* colour variants */
.v-white{ background: #fff; color: var(--text-color); }
.v-white h3{ color: var(--primary-color); } .v-white .b-no{ color: var(--primary-color); }
.v-white .b-ico i{ background: var(--grad); color: #fff; box-shadow: 0 10px 22px #19b5c844; }
.v-white .b-go{ background: var(--primary-color); color: #fff; }
.v-white .b-water{ color: var(--accent-2); }
.v-tint{ background: linear-gradient(160deg, #e8f7fa, #e6eefc); color: #4a5d73; }
.v-tint h3, .v-tint .b-no{ color: var(--primary-color); }
.v-tint .b-ico i{ background: #fff; color: var(--accent-2); box-shadow: 0 10px 22px #2f80ed26; }
.v-tint .b-go{ background: var(--accent-2); color: #fff; }
.v-navy{ background: radial-gradient(400px 260px at 100% 0%, #19b5c833, transparent 60%), linear-gradient(165deg, #0F1B2D, #14304d); color: #b4c3d6; border-color: transparent; }
.v-navy h3, .v-navy .b-no{ color: #fff; }
.v-navy .b-ico i{ background: #ffffff14; color: #fff; border: 1px solid #ffffff2e; }
.v-navy .b-go{ background: var(--accent-color); color: #0F1B2D; }
.v-navy .b-water{ color: #fff; }
.v-grad{ background: linear-gradient(135deg, #19B5C8 0%, #2F80ED 100%); color: #eaf6ff; border-color: transparent; }
.v-grad h3, .v-grad .b-no{ color: #fff; }
.v-grad .b-ico i{ background: #ffffff2e; color: #fff; }
.v-grad .b-go{ background: #fff; color: var(--accent-2); }
.v-grad .b-water{ color: #fff; }

/* mini illustrations */
.b-phone{ position: absolute; right: 44px; top: 36px; width: 170px; height: 300px; border-radius: 28px; background: #0F1B2D; border: 6px solid #0b1424; box-shadow: 0 26px 50px #0a1a3a66; padding: 22px 14px 14px; display: flex; flex-direction: column; gap: 12px; transform: rotate(7deg); transition: transform .5s; }
.b-tile:hover .b-phone{ transform: rotate(2deg) translateY(-6px); }
.b-phone span{ height: 70px; border-radius: 12px; background: linear-gradient(135deg, #19B5C8, #2F80ED); }
.b-phone i{ height: 14px; border-radius: 8px; background: #ffffff1f; } .b-phone i:nth-of-type(2){ width: 70%; } .b-phone i:nth-of-type(3){ width: 45%; }
.b-phone b{ margin-top: auto; height: 34px; border-radius: 10px; background: var(--orange); }
.b-browser{ position: absolute; right: 36px; top: 28px; width: 46%; max-width: 300px; border-radius: 12px; background: #f4f8fc; border: 1px solid var(--divider-color); box-shadow: 0 18px 36px #0f1b2d22; padding: 10px; display: grid; gap: 7px; transition: transform .45s; }
.b-tile:hover .b-browser{ transform: translateY(-5px); }
.b-browser s{ display: flex; gap: 5px; text-decoration: none; } .b-browser em{ width: 8px; height: 8px; border-radius: 50%; background: #c9d6e6; }
.b-browser u{ height: 10px; border-radius: 5px; background: #d9e4f1; } .b-browser u:nth-of-type(1){ background: var(--grad); width: 60%; } .b-browser u:nth-of-type(3){ width: 75%; }
.b-bars{ position: absolute; right: 26px; bottom: 150px; width: 56%; height: 130px; display: flex; align-items: flex-end; gap: 10px; }
.b-bars i{ flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #19B5C8, #2F80ED); transition: height .5s; }
.b-bars i:last-child{ background: linear-gradient(180deg, #ff9a5a, #FF6A2B); }
.b-tile:hover .b-bars i:nth-child(odd){ filter: brightness(1.2); }
.b-cloudchips{ position: absolute; right: 90px; top: 30px; display: flex; gap: 10px; }
.b-cloudchips span{ padding: 8px 14px; border-radius: 10px; background: #ffffff14; border: 1px solid #ffffff2e; color: #7fe0ee; font-family: ui-monospace, Menlo, monospace; font-size: 13px; animation: tFloat 6s ease-in-out infinite; }
.b-cloudchips span:nth-child(2){ animation-delay: -2s; } .b-cloudchips span:nth-child(3){ animation-delay: -4s; }
.v-grad.b-2x2 .b-body{ max-width: 52%; }

.t-bento-foot{ border-top-color: var(--divider-color); }
.t-bento-foot p{ color: var(--text-color); }

@media (max-width: 1199px){
	.b-grid{ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
	.b-phone{ width: 140px; height: 250px; right: 26px; }
}
@media (max-width: 991px){
	.t-bento{ padding: 60px 10px; }
	.b-grid{ grid-template-columns: repeat(2, 1fr); }
	.b-2x2{ grid-column: span 2; grid-row: span 1; padding: 30px; min-height: 260px; } .v-grad.b-2x2 .b-body{ max-width: 60%; } .b-2x2 .b-body h3{ font-size: 28px; }
	.b-phone{ height: 210px; width: 120px; } .b-bars{ display: none; }
}
@media (max-width: 575px){
	.b-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
	.b-tile, .b-2x2, .b-2x1, .b-1x2{ grid-column: auto; grid-row: auto; min-height: 190px; padding-top: 80px; }
	.b-phone, .b-browser, .b-cloudchips{ display: none; }
	.v-grad.b-2x2 .b-body{ max-width: 100%; }
}

/* bento polish after review */
.b-2x2 .b-no{ display: none; }
.b-2x2 .b-ico{ left: 38px; right: auto; top: 36px; }
.b-2x2 .b-ico i{ width: 64px; height: 64px; font-size: 26px; }
.b-2x1 .b-subs li:nth-child(n+3){ display: none; }
.b-2x1 .b-body{ max-width: 52%; }
.b-browser{ right: 96px; top: 26px; width: 36%; }
.b-bars{ top: 78px; bottom: auto; right: 26px; width: calc(100% - 56px); height: 120px; }
.b-1x2 .b-body{ margin-top: auto; }
.b-cloudchips{ right: 110px; }
@media (max-width: 991px){ .b-2x1 .b-body{ max-width: 100%; } .b-browser{ display: none; } }
.b-2x1 .b-no{ display: none; }
@media (max-width: 991px){ .b-2x2{ padding-top: 110px; } .b-2x2 .b-ico{ top: 28px; } }
@media (max-width: 575px){ .b-2x2{ padding-top: 110px; } }

/* Generated artwork for the featured mobile app service. */
.b-mobile-image{ background: #29206b; padding-top: 210px; }
.b-mobile-art{ position: absolute; inset: 0; width: 100%; height: 65%; object-fit: cover; object-position: center top; z-index: -2; pointer-events: none; }
.b-mobile-image::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, #17113b80 44%, #17113bef 68%, #17113b 100%); z-index: -1; pointer-events: none; }
.b-mobile-image.v-grad.b-2x2 .b-body{ max-width: 100%; padding-right: 16px; }
.b-mobile-image .b-water{ display: none; }
.b-mobile-image .b-body p{ color: #f1edff; }
.b-mobile-image .b-subs{ padding-right: 28px; }
.b-mobile-image .b-subs li{ opacity: 1; color: #f1edff; border-color: #ffffff66; background: #ffffff0d; }
.b-mobile-image .b-go{ color: #49339a; }
@media (max-width: 991px){
	.b-mobile-image.b-2x2{ grid-row: span 2; min-height: 440px; padding-top: 210px; }
}
@media (max-width: 575px){
	.b-mobile-image.b-2x2{ grid-row: auto; min-height: 460px; padding: 220px 24px 28px; }
	.b-mobile-image .b-body h3{ font-size: 28px; }
	.b-mobile-image .b-body p{ font-size: 15px; }
	.b-mobile-image .b-go{ right: 16px; bottom: 16px; width: 34px; height: 34px; }
}

/* Consistent spacing and hierarchy across the service collection. */
.t-bento{ padding: 76px 10px 64px; background: linear-gradient(180deg, #f7f9fc, #fff 42%); }
.t-bento .section-row{ align-items: flex-start; margin-bottom: 36px; row-gap: 18px; }
.t-bento .section-title{ margin-bottom: 0; }
.t-bento .section-title h2{ max-width: 24ch; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.14; letter-spacing: -.035em; }
.t-bento .section-sub-title{ padding-top: 6px; }
.t-bento .b-grid{ gap: 18px; grid-auto-rows: 240px; }
.t-bento .b-tile{ padding: 26px; border-radius: 22px; box-shadow: 0 3px 12px #0f1b2d04; }
.t-bento .b-tile:hover{ transform: translateY(-5px); box-shadow: 0 16px 32px #0f1b2d14; }
.t-bento .b-tile:focus-visible{ outline: 3px solid #2f80ed; outline-offset: 4px; }
.t-bento .b-no{ top: 26px; left: 26px; font-size: 11px; letter-spacing: .14em; }
.t-bento .b-ico{ top: 22px; right: 22px; }
.t-bento .b-ico i{ width: 44px; height: 44px; border-radius: 13px; font-size: 19px; }
.t-bento .b-body{ position: relative; z-index: 1; }
.t-bento .b-body h3{ font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.t-bento .b-body p{ font-size: 14px; line-height: 1.6; }
.t-bento .b-tile:not(.b-2x2):not(.b-2x1):not(.b-1x2){ justify-content: flex-start; padding-top: 82px; }
.t-bento .b-tile:not(.b-2x2):not(.b-2x1):not(.b-1x2) .b-body{ padding-right: 20px; }
.t-bento .b-water{ font-size: 108px; opacity: .045; }
.t-bento .b-go{ opacity: 1; transform: none; width: 34px; height: 34px; right: 18px; bottom: 18px; border: 1px solid #ffffff26; }
.t-bento .v-white .b-go, .t-bento .v-tint .b-go{ background: #edf3fa; color: #173252; border-color: #dfE8f2; }
.t-bento .b-tile:hover .b-go{ transform: translateX(3px); }
.t-bento .b-subs{ gap: 7px; margin-top: 16px; padding-right: 30px; }
.t-bento .b-subs li{ padding: 5px 10px; font-size: 11px; line-height: 1.4; }
.t-bento .b-browser{ top: 34px; right: 78px; width: 35%; box-shadow: 0 10px 22px #0f1b2d0d; }
.t-bento .b-2x1 .b-body{ max-width: 52%; }
.t-bento .b-mobile-image{ padding: 240px 32px 32px; background: #17113b; }
.t-bento .b-mobile-image::before{ background: linear-gradient(180deg, transparent 18%, #17113b33 35%, #17113be6 56%, #17113b 67%); }
.t-bento .b-mobile-image .b-body{ max-width: 100%; padding-right: 10px; }
.t-bento .b-mobile-image .b-body h3{ font-size: clamp(26px, 2.3vw, 32px); }
.t-bento .b-mobile-image .b-body p{ max-width: 43ch; font-size: 15px; }
.t-bento .b-mobile-image .b-subs li{ background: #ffffff0d; border-color: #ffffff36; }
.t-bento-foot{ margin-top: 30px; padding-top: 24px; }
@media (max-width: 1199px){
	.t-bento .b-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.t-bento .b-mobile-image{ grid-column: span 2; grid-row: span 2; }
	.t-bento .b-mobile-art{ object-fit: contain; object-position: center top; }
}
@media (max-width: 991px){
	.t-bento{ padding: 56px 10px; }
	.t-bento .b-2x1 .b-body{ max-width: 100%; }
	.t-bento .b-mobile-image{ padding-top: 240px; }
}
@media (max-width: 575px){
	.t-bento .section-row{ margin-bottom: 26px; }
	.t-bento .b-grid{ grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 14px; }
	.t-bento .b-tile{ grid-column: auto; grid-row: auto; min-height: 220px; padding: 24px; }
	.t-bento .b-mobile-image{ grid-column: auto; grid-row: auto; padding: 220px 24px 28px; min-height: 460px; }
	.t-bento .b-mobile-art{ height: 250px; object-fit: cover; }
	.t-bento .b-mobile-image::before{ background: linear-gradient(180deg, transparent 20%, #17113b99 42%, #17113b 55%); }
	.t-bento .b-mobile-image .b-body h3{ font-size: 27px; }
	.t-bento .b-1x2{ padding-top: 150px; }
}
@media (prefers-reduced-motion: reduce){
	.t-bento .b-tile, .t-bento .b-go{ transition: none; }
	.t-bento .b-tile:hover, .t-bento .b-tile:hover .b-go{ transform: none; }
}

/* ---- The method: expanding panels ---- */
.t-method{ padding: 100px 10px; background: var(--secondary-color); }
.m-row{ display: flex; gap: 16px; height: 540px; }
.m-panel{ position: relative; flex: 1 1 0; min-width: 0; border-radius: 26px; overflow: hidden; color: #fff; cursor: pointer; outline: none; isolation: isolate; transition: flex-grow .65s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.m-panel.active{ flex-grow: 3.2; box-shadow: 0 30px 70px #0f1b2d40; cursor: default; }
.mp-1{ background: radial-gradient(420px 300px at 100% 0%, #19b5c855, transparent 60%), linear-gradient(165deg, #0F1B2D, #17406b); }
.mp-2{ background: linear-gradient(150deg, #19B5C8, #2F80ED); }
.mp-3{ background: radial-gradient(420px 300px at 0% 100%, #19b5c866, transparent 60%), linear-gradient(165deg, #12294a, #0b4f6e); }
.mp-4{ background: radial-gradient(420px 300px at 100% 100%, #ff6a2b88, transparent 62%), linear-gradient(165deg, #1b2342, #3a2a55); }
.m-water{ position: absolute; right: -40px; bottom: -50px; font-size: 300px; opacity: .08; transform: rotate(-12deg); z-index: -1; transition: transform .8s, opacity .8s; }
.m-panel.active .m-water{ transform: rotate(0); opacity: .12; }
.m-no{ font-size: 14px; font-weight: 600; letter-spacing: .12em; opacity: .7; }
.m-ico{ display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #ffffff1f; border: 1px solid #ffffff33; font-size: 22px; backdrop-filter: blur(6px); }

.m-collapsed{ position: absolute; inset: 0; padding: 28px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; opacity: 1; transition: opacity .3s .15s; }
.m-vert{ writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.m-panel.active .m-collapsed{ opacity: 0; pointer-events: none; transition: opacity .15s; }

.m-open{ position: absolute; inset: 0; padding: 40px 44px; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s; pointer-events: none; min-width: 440px; }
.m-panel.active .m-open{ opacity: 1; transform: none; pointer-events: auto; transition-delay: .3s; }
.m-no-big{ position: absolute; right: 36px; top: 20px; font-size: 120px; font-weight: 700; letter-spacing: 0; opacity: .12; line-height: 1; }
.m-ico-lg{ width: 76px; height: 76px; border-radius: 22px; font-size: 30px; margin-bottom: auto; }
.m-open h3{ margin: 0 0 12px; color: #fff; font-size: 38px; line-height: 1.1; }
.m-open p{ margin: 0 0 24px; max-width: 44ch; color: #ffffffd9; font-size: 17px; line-height: 1.55; }
.m-open ul{ list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid #ffffff33; display: grid; gap: 11px; }
.m-open li{ display: flex; gap: 12px; align-items: center; color: #fff; font-weight: 500; font-size: 15.5px; }
.m-open li i{ flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ffffff2e; font-size: 11px; }
.m-link{ color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.m-link i{ transition: transform .3s; }
.m-link:hover{ color: #fff; } .m-link:hover i{ transform: translateX(6px); }

@media (max-width: 991px){
	.t-method{ padding: 60px 10px; }
	.m-row{ flex-direction: column; height: auto; }
	.m-panel, .m-panel.active{ flex: none; cursor: default; }
	.m-collapsed{ display: none; }
	.m-open{ position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; min-width: 0; padding: 32px 26px; }
	.m-ico-lg{ margin-bottom: 26px; } .m-open h3{ font-size: 30px; }
	.m-no-big{ font-size: 80px; }
}

/* ---- The method: sticky stacking cards ---- */
.s-stack{ position: relative; padding-bottom: 30px; }
.s-card{ position: sticky; top: calc(110px + var(--n) * 26px); display: grid; grid-template-columns: 1fr 1.05fr; min-height: 440px; margin-bottom: 40px; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--divider-color); box-shadow: 0 -10px 40px #0f1b2d14, 0 24px 60px #0f1b2d1a; }
.s-card:last-child{ margin-bottom: 0; }
.s-text{ position: relative; padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; }
.s-no{ position: absolute; left: 48px; top: 32px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--accent-2); }
.s-no em{ font-style: normal; color: var(--text-color); opacity: .6; margin-left: 6px; }
.s-ico{ display: grid; place-items: center; width: 62px; height: 62px; margin: 34px 0 20px; border-radius: 18px; background: var(--grad); color: #fff; font-size: 25px; box-shadow: 0 14px 30px #19b5c844; }
.s-text h3{ font-size: 36px; margin: 0 0 12px; line-height: 1.1; }
.s-text > p{ margin: 0 0 22px; font-size: 17px; max-width: 42ch; }
.s-text ul{ list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.s-text li{ display: flex; align-items: center; gap: 12px; color: var(--primary-color); font-weight: 500; }
.s-text li i{ flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #19b5c81f; color: var(--accent-color); font-size: 11px; }
.s-link{ align-self: flex-start; font-weight: 700; color: var(--primary-color); }
.s-link i{ margin-left: 6px; color: var(--accent-2); transition: transform .3s; } .s-link:hover{ color: var(--accent-2); } .s-link:hover i{ transform: translateX(6px); }

.s-visual{ position: relative; overflow: hidden; display: grid; place-items: center; padding: 30px; }
.sc-1 .s-visual{ background: radial-gradient(400px 300px at 80% 0%, #19b5c855, transparent 60%), linear-gradient(160deg, #0F1B2D, #17406b); }
.sc-2 .s-visual{ background: linear-gradient(150deg, #19B5C8, #2F80ED); }
.sc-3 .s-visual{ background: radial-gradient(400px 300px at 0% 100%, #19b5c877, transparent 60%), linear-gradient(160deg, #12294a, #0b4f6e); }
.sc-4 .s-visual{ background: radial-gradient(400px 300px at 100% 100%, #ff6a2b88, transparent 62%), linear-gradient(160deg, #1b2342, #3a2a55); }
.s-visual::before{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 40px 40px; }
.s-visual > *{ position: relative; }
.v-pill{ position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 30px; background: #fff; color: var(--primary-color); font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 28px #00000040; animation: tFloat 7s ease-in-out infinite; }
.v-pill i{ color: var(--accent-2); }
.vp-1{ left: 6%; top: 12%; } .vp-2{ right: 6%; top: 30%; animation-delay: -2s; } .vp-3{ left: 10%; bottom: 12%; animation-delay: -4s; }

.v-browser{ width: 82%; border-radius: 14px; background: #f4f8fc; box-shadow: 0 30px 60px #00000055; overflow: hidden; }
.vb-bar{ display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #e6edf6; } .vb-bar i{ width: 9px; height: 9px; border-radius: 50%; background: #c2cfe0; } .vb-bar span{ margin-left: 10px; flex: 1; padding: 3px 12px; border-radius: 20px; background: #fff; color: #7b8aa0; font-size: 11px; }
.vb-body{ padding: 16px; display: grid; gap: 12px; }
.vb-hero{ padding: 20px; border-radius: 10px; background: linear-gradient(135deg, #19B5C8, #2F80ED); display: grid; gap: 8px; } .vb-hero b{ height: 12px; width: 70%; border-radius: 6px; background: #fff; } .vb-hero b+b{ width: 45%; opacity: .6; } .vb-hero u{ height: 22px; width: 90px; border-radius: 6px; background: var(--orange); margin-top: 6px; }
.vb-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .vb-cols s{ height: 56px; border-radius: 8px; background: #dbe5f1; }

.v-phones{ position: relative; width: 100%; height: 100%; min-height: 360px; }
.vph{ position: absolute; width: 150px; height: 290px; border-radius: 26px; background: #0F1B2D; border: 6px solid #0b1424; box-shadow: 0 30px 60px #00000055; padding: 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.vph-1{ left: 24%; top: 50%; transform: translateY(-50%) rotate(-8deg); } .vph-2{ left: 46%; top: 50%; transform: translateY(-46%) rotate(6deg); background: #f4f8fc; border-color: #0b1424; }
.vph span{ height: 64px; border-radius: 12px; background: linear-gradient(135deg, #19B5C8, #2F80ED); } .vph i{ height: 12px; border-radius: 6px; background: #ffffff22; } .vph b{ margin-top: auto; height: 30px; border-radius: 10px; background: var(--orange); }
.vph-2 em{ height: 80px; border-radius: 12px; background: linear-gradient(135deg, #FF6A2B, #ff9a5a); } .vph-2 i{ background: #d9e4f1; } .vph i:nth-child(3){ width: 70%; }

.v-chat{ width: 78%; max-width: 360px; padding: 18px; border-radius: 18px; background: #0b1b30; border: 1px solid #ffffff22; box-shadow: 0 30px 60px #00000055; display: grid; gap: 10px; }
.vc-head{ display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #ffffff1c; color: #fff; font-weight: 600; }
.vc-head i{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); } .vc-head span{ display: flex; flex-direction: column; line-height: 1.2; } .vc-head small{ color: #4ade80; font-weight: 400; font-size: 12px; }
.v-chat p{ margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; max-width: 85%; }
.vc-in{ background: #ffffff14; color: #e3ecf7; border-bottom-left-radius: 4px; } .vc-out{ background: var(--grad); color: #fff; border-bottom-right-radius: 4px; margin-left: auto !important; }
.vc-typing{ display: flex; gap: 5px; padding: 10px 14px; width: 62px; border-radius: 14px; background: #ffffff14; } .vc-typing i{ width: 7px; height: 7px; border-radius: 50%; background: #9fb0c6; animation: tType 1.2s infinite; } .vc-typing i:nth-child(2){ animation-delay: .2s; } .vc-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes tType{ 0%,60%,100%{ transform: none; opacity: .5; } 30%{ transform: translateY(-5px); opacity: 1; } }

.v-brand{ position: relative; width: 82%; height: 78%; min-height: 320px; }
.vbr-aa{ position: absolute; left: 0; top: 0; width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 22px; background: #fff; color: var(--primary-color); font-size: 92px; font-weight: 700; box-shadow: 0 24px 50px #00000044; }
.vbr-sw{ position: absolute; right: 0; top: 6%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 44%; } .vbr-sw i{ aspect-ratio: 1; border-radius: 16px; box-shadow: 0 12px 26px #00000040; border: 2px solid #ffffff55; }
.vbr-logo{ position: absolute; right: 0; bottom: 0; width: 56%; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px #00000044; } .vbr-logo img{ width: 100%; height: 90px; object-fit: contain; }
.v-brand .vp-1{ left: 6%; top: auto; bottom: 8%; }

@media (max-width: 991px){
	.s-card{ position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; margin-bottom: 24px; }
	.s-text{ padding: 34px 26px; } .s-no{ left: 26px; } .s-text h3{ font-size: 28px; }
	.s-visual{ min-height: 320px; }
	.vph{ width: 120px; height: 240px; } .vph-1{ left: 18%; } .vph-2{ left: 44%; }
}
.v-wrap{ position: relative; width: 100%; height: 100%; min-height: 380px; display: grid; place-items: center; }
.v-browser{ width: 84%; }
.vbr-sw{ grid-template-columns: repeat(4, 1fr); width: 50%; top: 2%; gap: 8px; }
.vbr-sw i{ border-radius: 12px; }
.vbr-logo{ width: 50%; bottom: 2%; padding: 20px; display: grid; place-items: center; height: 56%; }
.vbr-logo img{ height: 80%; }

/* richer method visuals */
.v-svg{ display: block; width: 96%; height: auto; max-height: 100%; }
.s-visual{ padding: 24px; }
.v-chat{ width: 70%; max-width: 330px; margin-right: 8%; }
.v-auto{ position: absolute; right: 7%; bottom: 9%; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px #00000050; display: grid; gap: 7px; animation: tFloat 7s ease-in-out infinite; }
.v-auto b{ font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-color); }
.v-auto span{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-color); }
.v-auto i{ display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #4ade8033; color: #16a34a; font-size: 9px; }
@media (max-width: 991px){ .v-chat{ width: 80%; margin-right: 0; } .v-auto{ display: none; } }

/* ================= Mobile optimisation ================= */
.t-menu-cta{ display: none; }
.t-mbar{ display: none; }
@media (hover: none), (pointer: coarse){ .cb-cursor{ display: none !important; } }

@media (max-width: 991px){
	/* mobile menu: navy panel, large tap targets, CTA */
	.slicknav_menu{ background: transparent; padding: 0; }
	.slicknav_nav{ background: #0F1B2D; border-top: 1px solid #ffffff14; padding: 8px 12px 18px; margin: 0; }
	.slicknav_nav li a, .slicknav_nav .slicknav_row{ color: #fff !important; padding: 14px 12px !important; font-size: 17px; border-bottom: 1px solid #ffffff12; }
	.slicknav_nav a:hover, .slicknav_nav a:focus, .slicknav_nav .slicknav_row:hover{ background: #ffffff0f; color: var(--accent-color) !important; }
	.slicknav_nav .t-menu-cta{ display: block; margin-top: 14px; }
	.slicknav_nav .t-menu-cta a{ background: var(--grad); text-align: center; border-radius: 10px; border: 0; font-weight: 700; }
	.slicknav_arrow{ color: #fff; }
	.slicknav_nav ul a{ font-size: 15px; opacity: .85; }
	.slicknav_btn, .navbar-toggle .slicknav_btn{ min-width: 44px; min-height: 44px; }
	.main-header .header-sticky.active, .header-sticky{ box-shadow: 0 6px 24px #0f1b2d14; }
	.navbar-brand img{ height: 44px; }
}

@media (max-width: 767px){
	body{ padding-bottom: 70px; }
	/* sticky quick-action bar */
	.t-mbar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #ffffffee; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--divider-color); box-shadow: 0 -10px 30px #0f1b2d1a; }
	.t-mbar a{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; font-weight: 700; font-size: 15px; }
	.t-mbar-call{ flex: 0 0 38%; background: #0F1B2D; color: #fff; }
	.t-mbar-quote{ flex: 1; background: var(--grad); color: #fff; }
	.t-mbar-call i, .t-mbar-quote i{ font-size: 13px; }

	/* top bar: just the email, centred */
	.t-topbar{ font-size: 13px; }
	.t-topbar-in{ justify-content: center; }

	/* hero: tighter, thumb-friendly */
	.t-hero-wrap{ padding: 10px 10px 0; }
	.t-hero{ padding: 44px 6px 36px; border-radius: 20px; }
	.t-hero .hero-content h1{ font-size: 34px; line-height: 1.12; }
	.t-hero .section-title p{ font-size: 16px; }
	.hero-btn{ margin-top: 28px; gap: 12px; }
	.hero-btn .btn-default{ width: 100%; text-align: center; padding: 16px 40px 16px 20px; }
	.t-visual{ padding: 24px 0 10px; margin-top: 10px; }
	.t-window-body{ padding: 18px 16px 22px; font-size: 12.5px; }
	.t-glass{ margin-top: 18px; padding: 22px; }
	.t-glass h2{ font-size: 38px; }
	.t-stats{ padding: 30px 10px 10px; }
	.hero-counter-item h2{ font-size: 34px; }

	/* section rhythm */
	.t-about, .t-offers, .t-bento, .t-method{ padding: 52px 10px; }
	.section-row{ margin-bottom: 26px; }
	.section-sub-title{ margin-bottom: 14px; }
	.section-title h2{ font-size: 28px; line-height: 1.18; }

	/* About */
	.t-about-visual{ border-radius: 20px; aspect-ratio: 1 / 1; }
	.t-node i{ width: 44px; height: 44px; font-size: 17px; border-radius: 13px; }
	.t-node span{ font-size: 11px; }
	.t-core .t-core-ring{ width: 74px; height: 74px; } .t-core img{ width: 46px; }
	.t-points li{ padding: 14px 16px; gap: 14px; } .t-points li > i{ width: 44px; height: 44px; }
	.t-about-cta .btn-default{ width: 100%; text-align: center; }

	/* Offerings */
	.t-offer{ padding: 34px 26px 28px; }
	.t-offer-no{ font-size: 64px; }
	.t-offer h3{ font-size: 23px; }

	/* Bento */
	.b-tile{ padding: 24px 22px; border-radius: 20px; }
	.b-body h3{ font-size: 20px; } .b-2x2 .b-body h3{ font-size: 26px; }
	.b-go{ opacity: 1; transform: none; }

	/* Method stack */
	.s-card{ border-radius: 22px; }
	.s-text{ padding: 28px 22px 26px; }
	.s-text h3{ font-size: 26px; }
	.s-visual{ min-height: 0; padding: 14px 10px; }
	.v-svg{ width: 100%; }
	.v-chat{ width: 92%; max-width: none; }

	/* generic cards, FAQ, forms */
	.services-item{ padding: 30px 24px; }
	.services-item .icon-box{ margin-bottom: 40px; }
	.accordion-button{ font-size: 16px; padding: 16px 18px; }
	.contact-us-form, .contact-us-content{ margin-bottom: 30px; }
	.form-control{ font-size: 16px; } /* prevents iOS zoom on focus */
	.btn-default{ min-height: 48px; }

	/* footer */
	.footer-scrolling-content span{ font-size: 54px; }
	.footer-box{ padding-bottom: 20px; }
	.footer-links-box{ gap: 28px; }
	.footer-copyright-content{ text-align: center; gap: 14px; }
	.footer-menu ul{ justify-content: center; flex-wrap: wrap; gap: 8px 18px; }
	.page-header{ padding: 70px 10px 56px; }
	.page-header-box h1{ font-size: 36px; }
}

@media (max-width: 380px){
	.t-hero .hero-content h1{ font-size: 30px; }
	.b-2x2 .b-body h3{ font-size: 23px; }
}
@media (max-width: 991px){ .slicknav_nav{ max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; } }