/*!
 * Digiable Tech Pages — "Single Service" page (loaded only where the widget is used).
 * Builds on the tokens and components in digiable.css.
 */

/* --- Hero --- */
.dgt-page .dgt-sdhero { padding: 76px 0 200px; background: linear-gradient(180deg, #F1F6FF 0%, #fff 100%); }
.dgt-page .dgt-sdhero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.dgt-page .dgt-sdhero.is-solo .dgt-sdhero__in { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.dgt-page .dgt-sdhero .dgt-lead { margin-bottom: 30px; }
.dgt-page .dgt-sdhero .dgt-chips { margin-top: 26px; }
.dgt-page .dgt-sdhero__art { position: relative; }
.dgt-page .dgt-sdhero__visual { position: relative; }
.dgt-page .dgt-sdhero__visual .dgt-illus { max-width: 560px; margin-left: auto; }
.dgt-page .dgt-sdfloat--1 { top: 14%; left: -8%; }
.dgt-page .dgt-sdfloat--2 { top: 46%; right: -6%; animation-delay: -2.4s; }

/* Animated "website build": wireframe → design → launch (data-stage 0 / 1 / 2, set by the script) */
.dgt-page .dgt-build { --dur: 2400ms; position: relative; max-width: 590px; margin-left: auto; padding-bottom: 100px; }
.dgt-page .dgt-build__win {
	position: relative; overflow: hidden; border-radius: 22px; background: #fff;
	box-shadow: 0 50px 90px -40px rgba(20, 33, 61, .45), 0 0 0 1px rgba(20, 33, 61, .06);
	transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); transform-origin: 70% 50%;
	transition: transform .9s var(--dgt-ease);
}
.dgt-page .dgt-build:hover .dgt-build__win { transform: perspective(1600px) rotateY(0) rotateX(0); }
.dgt-page .dgt-build__bar,
.dgt-page .dgt-cmp__bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #F1F5FB; border-bottom: 1px solid var(--dgt-border); }
.dgt-page .dgt-build__dots { display: flex; gap: 6px; }
.dgt-page .dgt-build__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--dgt-g-red); }
.dgt-page .dgt-build__dots i:nth-child(2) { background: var(--dgt-g-yellow); }
.dgt-page .dgt-build__dots i:nth-child(3) { background: var(--dgt-g-green); }
.dgt-page .dgt-build__url {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
	background: #fff; border: 1px solid var(--dgt-border); font: 600 12.5px/1.2 var(--dgt-font-h); color: var(--dgt-heading); white-space: nowrap; overflow: hidden;
}
.dgt-page .dgt-build__url span { overflow: hidden; text-overflow: ellipsis; }
.dgt-page .dgt-build__url .dgt-ico { width: 13px; height: 13px; color: var(--dgt-g-green); }
.dgt-page .dgt-build__live {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #E8EDF5; color: var(--dgt-muted);
	font: 700 10.5px/1 var(--dgt-font-h); letter-spacing: .1em; text-transform: uppercase; transition: background-color .4s, color .4s;
}
.dgt-page .dgt-build__live i { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dgt-page .dgt-build[data-stage="2"] .dgt-build__live { background: rgba(52, 168, 83, .12); color: #1E8E3E; }
.dgt-page .dgt-build[data-stage="2"] .dgt-build__live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: dgtPingCss 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.dgt-page .dgt-build__screen { position: relative; overflow: hidden; padding: 18px; background: #fff; }
.dgt-page .dgt-build__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); transform: translateX(-120%); }
.dgt-page .dgt-build[data-stage="2"] .dgt-build__shine { animation: dgtSdShine 1.3s .15s var(--dgt-ease) both; }
.dgt-page .dgt-build__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--dgt-border); background: #F9FBFE; }
.dgt-page .dgt-build__steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 6px; font: 700 12.5px/1.2 var(--dgt-font-h); color: var(--dgt-muted); transition: color .4s; }
.dgt-page .dgt-build__steps li + li { border-left: 1px solid var(--dgt-border); }
.dgt-page .dgt-build__steps b { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #E8EDF5; color: var(--dgt-muted); font-size: 9.5px; transition: background-color .4s, color .4s; }
.dgt-page .dgt-build__steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--dgt-primary); transform: scaleX(0); transform-origin: left; }
.dgt-page .dgt-build[data-stage="1"] .dgt-build__steps li:nth-child(1) b,
.dgt-page .dgt-build[data-stage="2"] .dgt-build__steps li:nth-child(-n+2) b { background: var(--dgt-secondary); color: #fff; }
.dgt-page .dgt-build[data-stage="0"] .dgt-build__steps li:nth-child(1),
.dgt-page .dgt-build[data-stage="1"] .dgt-build__steps li:nth-child(2),
.dgt-page .dgt-build[data-stage="2"] .dgt-build__steps li:nth-child(3) { color: var(--dgt-heading); }
.dgt-page .dgt-build[data-stage="0"] .dgt-build__steps li:nth-child(1) b,
.dgt-page .dgt-build[data-stage="1"] .dgt-build__steps li:nth-child(2) b,
.dgt-page .dgt-build[data-stage="2"] .dgt-build__steps li:nth-child(3) b { background: var(--dgt-primary); color: #fff; }
.dgt-page .dgt-build.is-playing[data-stage="0"] .dgt-build__steps li:nth-child(1)::after,
.dgt-page .dgt-build.is-playing[data-stage="1"] .dgt-build__steps li:nth-child(2)::after,
.dgt-page .dgt-build.is-playing[data-stage="2"] .dgt-build__steps li:nth-child(3)::after { animation: dgtSdStep var(--dur) linear both; }

/* Score rings under the browser */
.dgt-page .dgt-scores {
	position: absolute; left: 6%; right: 6%; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px;
	padding: 14px 10px; border-radius: 20px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .45), 0 0 0 1px rgba(20, 33, 61, .05);
}
.dgt-page .dgt-score { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; }
.dgt-page .dgt-score__ring { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.dgt-page .dgt-score__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dgt-page .dgt-score__bg,
.dgt-page .dgt-score__fg { fill: none; stroke-width: 3.6; }
.dgt-page .dgt-score__bg { stroke: #E6ECF5; }
.dgt-page .dgt-score__fg { stroke: var(--dgt-g-green); stroke-linecap: round; stroke-dasharray: 100px; stroke-dashoffset: 100px; transition: stroke-dashoffset 1.8s var(--dgt-ease); transition-delay: calc(var(--i, 0) * 120ms + .2s); }
.dgt-page .dgt-scores.is-in .dgt-score__fg,
.dgt-page:not(.dgt-js) .dgt-score__fg { stroke-dashoffset: calc((100 - var(--v)) * 1px); }
.dgt-page .dgt-score__ring b { position: relative; font: 800 17px/1 var(--dgt-font-h); letter-spacing: -.02em; color: var(--dgt-heading); }
.dgt-page .dgt-score small { font: 600 11.5px/1.25 var(--dgt-font-h); color: var(--dgt-muted); }

/* Tiny modern website (hero build + "after" mock-up) */
.dgt-page .dgt-msite { display: grid; gap: 12px; }
.dgt-page :where(.dgt-msite) :where(i, b, span) { display: block; }
.dgt-page .dgt-msite *,
.dgt-page .dgt-osite * { transition: background-color .6s, box-shadow .6s, outline-color .6s, opacity .6s, transform .6s var(--dgt-ease); }
.dgt-page .dgt-msite__nav { display: flex; align-items: center; gap: 12px; }
.dgt-page .dgt-msite__logo { width: 26px; height: 26px; border-radius: 8px; background: var(--dgt-primary); }
.dgt-page .dgt-msite__links { display: flex; gap: 10px; margin-left: auto; }
.dgt-page .dgt-msite__links i { width: 30px; height: 6px; border-radius: 3px; background: #DFE6F0; }
.dgt-page .dgt-msite__btn { width: 62px; height: 22px; border-radius: 7px; background: var(--dgt-secondary); }
.dgt-page .dgt-msite__hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; background: linear-gradient(150deg, #F3F7FF, #E1EBFC); outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.dgt-page .dgt-msite__copy i { height: 7px; margin-bottom: 7px; border-radius: 4px; background: #DDE4EF; }
.dgt-page .dgt-msite__copy .is-tag { width: 38%; height: 8px; margin-bottom: 10px; background: rgba(66, 133, 244, .4); }
.dgt-page .dgt-msite__copy .is-h1 { width: 92%; height: 13px; background: var(--dgt-secondary); }
.dgt-page .dgt-msite__copy .is-h2 { width: 64%; height: 13px; margin-bottom: 11px; background: var(--dgt-primary); }
.dgt-page .dgt-msite__copy .is-short { width: 72%; }
.dgt-page .dgt-msite__cta { position: relative; width: 74px; height: 22px; margin-top: 12px; border-radius: 7px; background: var(--dgt-primary); box-shadow: 0 8px 16px -8px var(--dgt-primary); }
.dgt-page .dgt-msite__media { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 12px; background: linear-gradient(165deg, var(--dgt-secondary), var(--dgt-secondary-2)); outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.dgt-page .dgt-msite__sun { position: absolute; right: 18%; top: 16%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--dgt-g-yellow); box-shadow: 0 0 0 8px rgba(251, 188, 5, .22); }
.dgt-page .dgt-msite__hill { position: absolute; left: -12%; bottom: -34%; width: 80%; aspect-ratio: 1.6; border-radius: 50%; background: var(--dgt-g-green); }
.dgt-page .dgt-msite__hill.is-2 { left: 38%; bottom: -42%; width: 90%; background: #81C995; }
.dgt-page .dgt-msite__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dgt-page .dgt-msite__cards > span { padding: 10px; border-radius: 10px; border: 1px solid var(--dgt-border); background: #fff; outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.dgt-page .dgt-msite__cards b { width: 18px; height: 18px; margin-bottom: 8px; border-radius: 6px; background: #D2E3FC; }
.dgt-page .dgt-msite__cards > span:nth-child(2) b { background: #FFE0D3; }
.dgt-page .dgt-msite__cards > span:nth-child(3) b { background: #CEEAD6; }
.dgt-page .dgt-msite__cards i { height: 6px; margin-top: 5px; border-radius: 3px; background: #E3E9F2; }
.dgt-page .dgt-msite__cards i.is-short { width: 60%; }

/* Stage 0: wireframe — outlines only */
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__logo,
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__btn,
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__cta,
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__links i,
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__copy i,
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__cards b { background: transparent; box-shadow: inset 0 0 0 1.5px #CBD5E3; }
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__hero,
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__cards > span { background: transparent; border-color: transparent; outline-color: #CBD5E3; }
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__cards i { background: #E9EEF6; }
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__media {
	outline-color: #CBD5E3;
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), #D3DBE7 50%, transparent calc(50% + 1px)),
		linear-gradient(to top left, transparent calc(50% - 1px), #D3DBE7 50%, transparent calc(50% + 1px)), #F9FBFE;
}
.dgt-page .dgt-build[data-stage="0"] .dgt-msite__media span { opacity: 0; transform: translateY(16px); }
/* Stage 2: launch — the cards lift, the button gets clicked */
.dgt-page .dgt-build[data-stage="2"] .dgt-msite__cards > span { transform: translateY(-3px); box-shadow: 0 12px 20px -14px rgba(20, 33, 61, .45); }
.dgt-page .dgt-build[data-stage="2"] .dgt-msite__cards > span:nth-child(2) { transition-delay: .1s; }
.dgt-page .dgt-build[data-stage="2"] .dgt-msite__cards > span:nth-child(3) { transition-delay: .2s; }
.dgt-page .dgt-build .dgt-msite__cta::after {
	content: ""; position: absolute; left: 62%; top: 52%; width: 20px; height: 20px; opacity: 0; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18z' fill='%2314213D' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dgt-page .dgt-build[data-stage="2"] .dgt-msite__cta { animation: dgtSdClick 2.6s .2s both; }
.dgt-page .dgt-build[data-stage="2"] .dgt-msite__cta::after { animation: dgtSdCursor 2.6s .2s var(--dgt-ease) both; }

/* --- Results ribbon (overlaps the hero) --- */
.dgt-page .dgt-sdproof { z-index: 2; padding: 0; overflow: visible; background: transparent; }
.dgt-page .dgt-sdproof__card {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: -104px; padding: 10px; border-radius: 26px;
	background: #fff; box-shadow: 0 40px 80px -46px rgba(20, 33, 61, .5), 0 0 0 1px rgba(20, 33, 61, .05);
}
.dgt-page .dgt-sdproof__card li { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 22px; border-radius: 18px; transition: background-color .3s; }
.dgt-page .dgt-sdproof__card li + li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; border-left: 1px dashed var(--dgt-border); }
.dgt-page .dgt-sdproof__card li:hover { background: #F4F8FF; }
.dgt-page .dgt-sdproof__ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; background: var(--c-tint); color: var(--c-text); font-size: 20px; transition: background-color .3s, color .3s, transform .4s var(--dgt-ease); }
.dgt-page .dgt-sdproof__ico svg { width: 20px; height: 20px; }
.dgt-page .dgt-sdproof__card li:hover .dgt-sdproof__ico { background: var(--c); color: var(--c-ink); transform: rotate(-8deg); }
.dgt-page .dgt-sdproof__txt { min-width: 0; }
.dgt-page .dgt-sdproof__txt b { display: block; font: 800 28px/1.05 var(--dgt-font-h); letter-spacing: -.02em; color: var(--dgt-heading); white-space: nowrap; }
.dgt-page .dgt-sdproof__txt small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--dgt-muted); }

/* --- Before / after --- */
.dgt-page .dgt-sdcmp { padding-top: 110px; background: #fff; }
.dgt-page .dgt-sdcmp__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; }
.dgt-page .dgt-cmp { position: relative; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 50px 90px -50px rgba(20, 33, 61, .5), 0 0 0 1px rgba(20, 33, 61, .07); -webkit-user-select: none; user-select: none; }
.dgt-page .dgt-cmp__addr { flex: 1; height: 22px; border-radius: 999px; background: #fff; border: 1px solid var(--dgt-border); }
.dgt-page .dgt-cmp__stage { position: relative; aspect-ratio: 16 / 10.5; }
.dgt-page .dgt-cmp__layer { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.dgt-page .dgt-cmp__layer.is-after { clip-path: inset(0 0 0 var(--pos)); }
.dgt-page .dgt-cmp__layer > .dgt-msite { height: 100%; padding: 18px; align-content: start; }
.dgt-page .dgt-cmp__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dgt-page .dgt-cmp__tag {
	position: absolute; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--dgt-secondary); color: #fff;
	font: 700 11px/1 var(--dgt-font-h); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(20, 33, 61, .6);
}
.dgt-page .is-before > .dgt-cmp__tag { left: 14px; }
.dgt-page .is-after > .dgt-cmp__tag { right: 14px; background: var(--dgt-primary); }
.dgt-page .dgt-cmp__score {
	position: absolute; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 16px;
	background: rgba(255, 255, 255, .95); box-shadow: 0 16px 30px -14px rgba(20, 33, 61, .45);
}
.dgt-page .dgt-cmp__score b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 16px var(--dgt-font-h); }
.dgt-page .dgt-cmp__score small { font: 600 12px/1.2 var(--dgt-font-h); color: var(--dgt-muted); }
.dgt-page .is-before > .dgt-cmp__score { left: 14px; }
.dgt-page .is-before > .dgt-cmp__score b { background: #F6E4E1; color: #B23A2B; box-shadow: inset 0 0 0 3px #EDC9C3; }
.dgt-page .is-after > .dgt-cmp__score { right: 14px; }
.dgt-page .is-after > .dgt-cmp__score b { background: var(--dgt-green); color: #fff; box-shadow: 0 0 0 4px rgba(52, 168, 83, .22); }
.dgt-page .dgt-cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 0; pointer-events: none; }
.dgt-page .dgt-cmp__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 33, 61, .08), 0 0 22px rgba(20, 33, 61, .3); }
.dgt-page .dgt-cmp__handle > span {
	position: absolute; top: 50%; left: 0; width: 52px; height: 52px; border-radius: 50%; transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center; background: var(--dgt-primary); color: #fff;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), 0 16px 30px -10px rgba(253, 103, 49, .8); transition: transform .3s var(--dgt-ease);
}
.dgt-page .dgt-cmp__handle > span::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; animation: dgtRing 2.4s ease-out infinite; }
.dgt-page .dgt-cmp__handle .dgt-ico { width: 16px; height: 16px; margin: 0 -2px; stroke-width: 2.6; }
.dgt-page .dgt-cmp:hover .dgt-cmp__handle > span { transform: translate(-50%, -50%) scale(1.08); }
.dgt-page .dgt-cmp:has(.dgt-cmp__range:focus-visible) .dgt-cmp__handle > span { outline: 3px solid var(--dgt-secondary); outline-offset: 7px; }
.dgt-page .dgt-cmp__range {
	position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize;
	-webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y;
}
.dgt-page .dgt-cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 56px; cursor: ew-resize; }
.dgt-page .dgt-cmp__range::-moz-range-thumb { width: 56px; height: 56px; border: 0; cursor: ew-resize; }

/* Old, cluttered website (the "before" mock-up) */
.dgt-page .dgt-osite { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px; background: #F1EEE9; }
.dgt-page :where(.dgt-osite) :where(i, b, span, em) { display: block; }
.dgt-page .dgt-osite__top { display: flex; align-items: center; gap: 8px; padding: 9px; background: #8E9CAD; }
.dgt-page .dgt-osite__logo { width: 72px; height: 18px; border-radius: 2px; background: #C8D2DD; }
.dgt-page .dgt-osite__links { display: flex; gap: 5px; margin-left: auto; }
.dgt-page .dgt-osite__links i { width: 26px; height: 7px; background: #DCE3EB; }
.dgt-page .dgt-osite__ticker { position: relative; overflow: hidden; height: 14px; background: #E8CB72; }
.dgt-page .dgt-osite__ticker i { position: absolute; top: 4px; left: 0; width: 70%; height: 6px; background: repeating-linear-gradient(90deg, #B8993E 0 26px, transparent 26px 34px); animation: dgtSdTicker 7s linear infinite; }
.dgt-page .dgt-osite__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 8px; }
.dgt-page .dgt-osite__side { display: grid; align-content: start; gap: 7px; padding: 9px; background: #E2DDD6; }
.dgt-page .dgt-osite__side i { height: 9px; background: #B7C4D4; }
.dgt-page .dgt-osite__side i:nth-child(even) { width: 76%; }
.dgt-page .dgt-osite__main { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px; background: #fff; }
.dgt-page .dgt-osite__banner { position: relative; flex: 0 0 42%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #DCD6CE 0 10px, #E7E2DB 10px 20px); }
.dgt-page .dgt-osite__spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(20, 33, 61, .14); border-top-color: #74819A; animation: dgtSpinCss 1s linear infinite; }
.dgt-page .dgt-osite__main i { height: 6px; background: #D3CDC5; }
.dgt-page .dgt-osite__main i.is-short { width: 58%; }
.dgt-page .dgt-osite__popup {
	position: absolute; left: 34%; top: 40%; width: 44%; display: grid; gap: 7px; padding: 14px 12px 12px; transform: rotate(-2.5deg);
	background: #fff; border: 2px solid #E8CB72; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .4); animation: dgtSdNag 3.2s ease-in-out infinite;
}
.dgt-page .dgt-osite__popup b { width: 82%; height: 10px; background: #8E9CAD; }
.dgt-page .dgt-osite__popup i { height: 6px; background: #E0DAD3; }
.dgt-page .dgt-osite__popup em { justify-self: start; width: 52%; height: 16px; margin-top: 3px; background: #E8CB72; }
.dgt-page .dgt-osite__x { position: absolute; right: 6px; top: 5px; width: 10px; height: 10px; background: linear-gradient(45deg, transparent 42%, #707D92 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #707D92 42% 58%, transparent 58%); }

.dgt-page .dgt-cmp__lists { display: grid; gap: 16px; }
.dgt-page .dgt-cmp__list { padding: 22px 24px; border-radius: 22px; background: #F6F9FD; border: 1px solid var(--dgt-border); }
.dgt-page .dgt-cmp__list h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17px; }
.dgt-page .dgt-cmp__dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: #BAC5D6; }
.dgt-page .dgt-cmp__list ul { display: grid; gap: 10px; }
.dgt-page .dgt-cmp__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--dgt-text); }
.dgt-page .dgt-cmp__mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #F2E3DF; color: #B23A2B; }
.dgt-page .dgt-cmp__mark .dgt-ico { width: 12px; height: 12px; stroke-width: 3; }
.dgt-page .dgt-cmp__list.is-after { position: relative; overflow: hidden; border-color: transparent; background: linear-gradient(150deg, var(--dgt-secondary), var(--dgt-secondary-2)); box-shadow: 0 30px 60px -36px rgba(20, 33, 61, .7); }
.dgt-page .dgt-cmp__list.is-after::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .05); pointer-events: none; }
.dgt-page .dgt-cmp__list.is-after h3 { color: #fff; }
.dgt-page .dgt-cmp__list.is-after li { color: rgba(255, 255, 255, .88); }
.dgt-page .dgt-cmp__list.is-after .dgt-cmp__dot { background: var(--dgt-g-green); box-shadow: 0 0 0 4px rgba(52, 168, 83, .25); }
.dgt-page .dgt-cmp__list.is-after .dgt-cmp__mark { background: var(--dgt-green); color: #fff; }

/* --- What's included: bento grid with a cursor spotlight --- */
.dgt-page .dgt-sdinc { background: var(--dgt-light); }
.dgt-page .dgt-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(218px, auto); grid-auto-flow: dense; gap: 20px; }
.dgt-page .dgt-bento__item {
	position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 24px;
	border-radius: 24px; background: #fff; border: 1px solid var(--dgt-border); color: var(--dgt-text);
	transition: transform .45s var(--dgt-ease), box-shadow .45s, border-color .45s;
}
.dgt-page .dgt-bento__item::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .4s;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
}
.dgt-page .dgt-bento__item:hover { transform: translateY(-6px); border-color: #C9D9F5; box-shadow: var(--dgt-shadow-lg); }
.dgt-page .dgt-bento__item:hover::after { opacity: 1; }
.dgt-page .dgt-bento__item:nth-child(6):nth-last-child(3) { grid-column: span 2; }
.dgt-page .dgt-bento__ico { width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; background: var(--c-tint); color: var(--c-text); font-size: 21px; transition: background-color .35s, color .35s, transform .45s var(--dgt-ease); }
.dgt-page .dgt-bento__ico svg { width: 21px; height: 21px; }
.dgt-page .dgt-bento__item:hover .dgt-bento__ico { background: var(--c); color: var(--c-ink); transform: rotate(-8deg) scale(1.05); }
.dgt-page .dgt-bento__n { position: absolute; top: 22px; right: 24px; font: 800 13px/1 var(--dgt-font-h); letter-spacing: .06em; color: #B5C1D3; }
.dgt-page .dgt-bento__txt { margin-top: auto; padding-top: 26px; }
.dgt-page .dgt-bento__item h3 { margin: 0 0 8px; font-size: 18.5px; }
.dgt-page .dgt-bento__item p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.dgt-page .dgt-bento .dgt-pills { margin-top: 16px; }
.dgt-page .dgt-bento__item.is-feature {
	grid-column: span 2; grid-row: span 2; padding: 34px; border-color: transparent; color: rgba(255, 255, 255, .76);
	background: linear-gradient(150deg, var(--dgt-secondary), var(--dgt-secondary-2));
}
.dgt-page .dgt-bento__item.is-feature::after { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(253, 103, 49, .3), transparent 70%); }
.dgt-page .dgt-bento__item.is-feature:hover { border-color: transparent; }
.dgt-page .dgt-bento__item.is-feature .dgt-bento__ico { width: 68px; height: 68px; border-radius: 20px; background: var(--dgt-primary); color: #fff; font-size: 27px; box-shadow: 0 16px 30px -12px var(--dgt-primary); }
.dgt-page .dgt-bento__item.is-feature .dgt-bento__ico svg { width: 27px; height: 27px; }
.dgt-page .dgt-bento__item.is-feature .dgt-bento__n { color: rgba(255, 255, 255, .35); }
.dgt-page .dgt-bento__item.is-feature h3 { font-size: clamp(24px, 1vw + 16px, 31px); color: #fff; }
.dgt-page .dgt-bento__item.is-feature p { max-width: 440px; font-size: 16px; }
.dgt-page .dgt-bento__item.is-feature .dgt-pills li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #fff; }
.dgt-page .dgt-bento__ghost { position: absolute; right: -24px; bottom: -36px; z-index: -1; font-size: 230px; line-height: 1; color: #fff; opacity: .05; transform: rotate(-12deg); pointer-events: none; transition: transform .6s var(--dgt-ease); }
.dgt-page .dgt-bento__ghost svg { width: 230px; height: 230px; }
.dgt-page .dgt-bento__item.is-feature:hover .dgt-bento__ghost { transform: rotate(-4deg) scale(1.05); }
.dgt-page .dgt-bento__rings { position: absolute; right: -90px; top: -90px; z-index: -1; width: 320px; height: 320px; pointer-events: none; }
.dgt-page .dgt-bento__rings i { position: absolute; display: block; border-radius: 50%; }
.dgt-page .dgt-bento__rings i:nth-child(1) { inset: 0; border: 1.5px dashed rgba(255, 255, 255, .12); animation: dgtSpinCss 50s linear infinite; }
.dgt-page .dgt-bento__rings i:nth-child(1)::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--dgt-primary); box-shadow: 0 0 0 5px rgba(253, 103, 49, .2); }
.dgt-page .dgt-bento__rings i:nth-child(2) { inset: 48px; border: 1.5px solid rgba(253, 103, 49, .25); }
.dgt-page .dgt-bento__rings i:nth-child(3) { inset: 96px; border: 1.5px dashed rgba(255, 255, 255, .1); animation: dgtSpinCss 34s linear infinite reverse; }

/* --- Process roadmap (the line runs dot to dot and fills as you scroll; set by service-page.js) --- */
.dgt-page .dgt-sdroad { background: #fff; }
.dgt-page .dgt-road { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.dgt-page .dgt-road__intro { position: sticky; top: calc(var(--dgt-admin, 0px) + var(--dgt-stick-top, 100px)); }
.dgt-page .dgt-road__intro .dgt-head { margin-bottom: 28px; }
.dgt-page .dgt-road__badge { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 14px 24px 14px 14px; border-radius: 20px; background: var(--dgt-light); border: 1px dashed #D5DEEB; }
.dgt-page .dgt-road__badge-ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; background: var(--dgt-blue); color: #fff; box-shadow: 0 12px 24px -12px var(--dgt-blue); }
.dgt-page .dgt-road__badge-ico .dgt-ico { width: 22px; height: 22px; }
.dgt-page .dgt-road__badge b { display: block; font: 800 30px/1 var(--dgt-font-h); letter-spacing: -.02em; color: var(--dgt-heading); }
.dgt-page .dgt-road__badge small { display: block; margin-top: 5px; font-size: 13.5px; color: var(--dgt-muted); }
.dgt-page .dgt-road__track { position: relative; }
.dgt-page .dgt-road__line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: repeating-linear-gradient(180deg, #CFD8E6 0 8px, transparent 8px 16px); }
.dgt-page .dgt-road__line i { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, var(--dgt-g-blue), var(--dgt-g-red), var(--dgt-g-yellow), var(--dgt-g-green)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.dgt-page .dgt-road__list { display: grid; gap: 22px; }
.dgt-page .dgt-road__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: start; }
.dgt-page .dgt-road__dot {
	position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 2px solid var(--dgt-border); color: var(--dgt-muted); font-size: 19px;
	transition: background-color .5s, border-color .5s, color .5s, box-shadow .5s, transform .5s var(--dgt-ease);
}
.dgt-page .dgt-road__dot svg { width: 19px; height: 19px; }
.dgt-page .dgt-road__step.is-done .dgt-road__dot,
.dgt-page:not(.dgt-js) .dgt-road__dot { background: var(--c); border-color: var(--c); color: var(--c-ink); box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 16%, transparent); }
.dgt-page .dgt-road__step.is-done .dgt-road__dot { transform: scale(1.04); }
.dgt-page .dgt-road__card {
	position: relative; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--dgt-border);
	box-shadow: 0 24px 50px -40px rgba(20, 33, 61, .45); transition: border-color .4s, box-shadow .4s, transform .4s var(--dgt-ease);
}
.dgt-page .dgt-road__card::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--dgt-border); border-bottom: 1px solid var(--dgt-border); transform: rotate(45deg); transition: border-color .4s; }
.dgt-page .dgt-road__step:hover .dgt-road__card { transform: translateX(4px); border-color: #C9D9F5; box-shadow: var(--dgt-shadow); }
.dgt-page .dgt-road__step:hover .dgt-road__card::before { border-color: #C9D9F5; }
.dgt-page .dgt-road__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dgt-page .dgt-road__when { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: var(--c-tint); color: var(--c-text); font: 700 11.5px/1.2 var(--dgt-font-h); letter-spacing: .08em; text-transform: uppercase; }
.dgt-page .dgt-road__n { font: 800 26px/1 var(--dgt-font-h); letter-spacing: -.02em; color: var(--dgt-heading); opacity: .1; }
.dgt-page .dgt-road__card h3 { margin: 0 0 6px; font-size: 19px; }
.dgt-page .dgt-road__card p { margin: 0; font-size: 15px; }
.dgt-page .dgt-road__card .dgt-road__get { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--dgt-border); font-size: 14px; color: var(--dgt-heading); }
.dgt-page .dgt-road__get .dgt-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--dgt-green); }

/* --- Platforms: dark band with tabs --- */
.dgt-page .dgt-sdplat {
	--dgt-heading: #fff; --dgt-text: rgba(255, 255, 255, .72); --dgt-eyebrow: #A8C7FA;
	background: linear-gradient(160deg, #0F1D3A 0%, var(--dgt-secondary) 55%, var(--dgt-secondary-2) 100%);
}
.dgt-page .dgt-sdplat::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(620px circle at 88% 6%, rgba(66, 133, 244, .26), transparent 62%), radial-gradient(520px circle at 4% 96%, rgba(253, 103, 49, .14), transparent 62%);
}
.dgt-page .dgt-sdplat::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);
}
.dgt-page .dgt-plat { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: stretch; }
.dgt-page .dgt-plat__tabs { position: relative; display: grid; gap: 10px; align-content: start; }
.dgt-page .dgt-plat__tab {
	display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: left;
	border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #fff;
	transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--dgt-ease), box-shadow .4s;
}
.dgt-page .dgt-plat__tab:hover,
.dgt-page .dgt-plat__tab:focus { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); color: #fff; }
.dgt-page .dgt-plat__tab.is-active,
.dgt-page .dgt-plat__tab.is-active:hover,
.dgt-page .dgt-plat__tab.is-active:focus { background: #fff; border-color: #fff; color: var(--dgt-secondary); transform: translateX(8px); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .6); }
.dgt-page .dgt-plat__ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: color-mix(in srgb, var(--c) 55%, #fff); font-size: 20px; transition: background-color .3s, color .3s; }
.dgt-page .dgt-plat__ico svg { width: 20px; height: 20px; }
.dgt-page .dgt-plat__tab.is-active .dgt-plat__ico { background: var(--c); color: var(--c-ink); }
.dgt-page .dgt-plat__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dgt-page .dgt-plat__name b { font: 700 16px/1.3 var(--dgt-font-h); }
.dgt-page .dgt-plat__name small { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .55); transition: color .3s; }
.dgt-page .dgt-plat__tab.is-active .dgt-plat__name small { color: var(--dgt-muted); }
.dgt-page .dgt-plat__arrow { opacity: 0; transform: translateX(-6px); color: var(--dgt-primary); transition: opacity .3s, transform .4s var(--dgt-ease); }
.dgt-page .dgt-plat__arrow .dgt-ico { width: 18px; height: 18px; }
.dgt-page .dgt-plat__tab.is-active .dgt-plat__arrow { opacity: 1; transform: none; }
.dgt-page .dgt-plat__panels { position: relative; min-width: 0; }
.dgt-page .dgt-plat__panel {
	--dgt-heading: #14213D; --dgt-text: #4F5B70;
	position: relative; overflow: hidden; isolation: isolate; height: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 34px; align-items: center;
	padding: 38px; border-radius: 28px; background: #fff; color: var(--dgt-text); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .6);
	animation: dgtSdPanel .55s var(--dgt-ease) both;
}
.dgt-page .dgt-plat__panel[hidden] { display: none; }
.dgt-page .dgt-plat__panel.is-text { grid-template-columns: minmax(0, 1fr); }
.dgt-page .dgt-plat__panel:focus-visible { outline: 3px solid var(--dgt-primary); outline-offset: 4px; }
.dgt-page .dgt-plat__ghost { position: absolute; right: -26px; bottom: -44px; z-index: -1; font-size: 210px; line-height: 1; color: var(--dgt-primary); opacity: .05; pointer-events: none; }
.dgt-page .dgt-plat__ghost svg { width: 210px; height: 210px; }
.dgt-page .dgt-plat__main { min-width: 0; }
.dgt-page .dgt-plat__main h3 { margin: 0 0 10px; font-size: clamp(24px, 1vw + 16px, 30px); }
.dgt-page .dgt-plat__main > p { margin: 0 0 22px; font-size: 15.5px; }
.dgt-page .dgt-plat__pros { margin-bottom: 24px; }
.dgt-page .dgt-plat__pros li { font-size: 14.5px; }
.dgt-page .dgt-plat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 20px; border-top: 1px dashed var(--dgt-border); }
.dgt-page .dgt-plat__best { flex: 1 1 240px; display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--dgt-heading); }
.dgt-page .dgt-plat__best .dgt-ico { width: 20px; height: 20px; color: var(--dgt-green); }
.dgt-page .dgt-plat__bars { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 24px; border-radius: 22px; background: var(--dgt-light); border: 1px solid var(--dgt-border); }
.dgt-page .dgt-pbar__top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font: 600 13.5px/1.3 var(--dgt-font-h); color: var(--dgt-heading); }
.dgt-page .dgt-pbar__top b { font-weight: 800; color: var(--dgt-blue); }
.dgt-page .dgt-pbar__track { display: block; overflow: hidden; height: 8px; border-radius: 99px; background: #E3E9F2; }
.dgt-page .dgt-pbar__track i {
	display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dgt-g-blue), var(--dgt-blue));
	transform: scaleX(calc(var(--v) / 100)); transform-origin: left; animation: dgtSdBar 1.1s var(--dgt-ease) both; animation-delay: calc(var(--k, 0) * 110ms + .15s);
}
.dgt-page .dgt-plat:not(.is-in) .dgt-pbar__track i { animation-play-state: paused; }
.dgt-page:not(.dgt-js) .dgt-pbar__track i { animation: none; }

/* --- Scope builder --- */
.dgt-page .dgt-sdscope { background: #fff; }
.dgt-page .dgt-scope { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 24px; align-items: start; padding: 14px; border-radius: 32px; background: var(--dgt-light); border: 1px solid var(--dgt-border); }
.dgt-page .dgt-scope__qs { display: grid; gap: 22px; padding: 24px 22px; }
.dgt-page .dgt-scope__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.dgt-page .dgt-scope__q + .dgt-scope__q { padding-top: 22px; border-top: 1px dashed #D5DEEB; }
.dgt-page .dgt-scope__q legend { float: left; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 0; font: 700 18px/1.3 var(--dgt-font-h); color: var(--dgt-heading); }
.dgt-page .dgt-scope__qn { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--dgt-secondary); color: #fff; font: 800 13px var(--dgt-font-h); }
.dgt-page .dgt-scope__opts { clear: both; display: flex; flex-wrap: wrap; gap: 10px; }
.dgt-page .dgt-opt { position: relative; margin: 0; cursor: pointer; }
.dgt-page .dgt-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dgt-page .dgt-opt__box {
	display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 14px; background: #fff; border: 1.5px solid var(--dgt-border);
	font: 600 14.5px/1.3 var(--dgt-font-h); color: var(--dgt-heading); transition: border-color .25s, background-color .25s, box-shadow .25s, transform .25s var(--dgt-ease);
}
.dgt-page .dgt-opt__mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #C6D0DF; color: transparent; transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--dgt-ease); }
.dgt-page .dgt-opt__mark .dgt-ico { width: 12px; height: 12px; stroke-width: 3.5; }
.dgt-page .is-multi .dgt-opt__mark { border-radius: 7px; }
.dgt-page .dgt-opt:hover .dgt-opt__box { border-color: #BCD0F2; transform: translateY(-2px); }
.dgt-page .dgt-opt input:checked + .dgt-opt__box { border-color: var(--dgt-primary); background: rgba(253, 103, 49, .06); box-shadow: 0 12px 24px -16px rgba(253, 103, 49, .85); }
.dgt-page .dgt-opt input:checked + .dgt-opt__box .dgt-opt__mark { background: var(--dgt-primary); border-color: var(--dgt-primary); color: #fff; transform: scale(1.06); }
.dgt-page .dgt-opt input:focus-visible + .dgt-opt__box { outline: 3px solid var(--dgt-blue); outline-offset: 2px; }
.dgt-page .dgt-scope__sum {
	position: sticky; top: calc(var(--dgt-admin, 0px) + var(--dgt-stick-top, 100px)); overflow: hidden; display: flex; flex-direction: column; gap: 10px;
	padding: 30px 28px; border-radius: 24px; color: rgba(255, 255, 255, .75); background: linear-gradient(160deg, var(--dgt-secondary), var(--dgt-secondary-2));
	box-shadow: 0 40px 70px -40px rgba(20, 33, 61, .7);
}
.dgt-page .dgt-scope__sum::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .05); pointer-events: none; }
.dgt-page .dgt-scope__dots { position: absolute; top: 28px; right: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 18px; height: 18px; animation: dgtSpinCss 10s linear infinite; }
.dgt-page .dgt-scope__dots i { display: block; border-radius: 50%; background: var(--dgt-g-blue); }
.dgt-page .dgt-scope__dots i:nth-child(2) { background: var(--dgt-g-red); }
.dgt-page .dgt-scope__dots i:nth-child(3) { background: var(--dgt-g-yellow); }
.dgt-page .dgt-scope__dots i:nth-child(4) { background: var(--dgt-g-green); }
.dgt-page .dgt-scope__label { position: relative; z-index: 1; font: 700 11.5px/1.3 var(--dgt-font-h); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.dgt-page .dgt-scope__big { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: #fff; }
.dgt-page .dgt-scope__big b { display: inline-block; font: 800 clamp(44px, 2.4vw + 22px, 60px)/1 var(--dgt-font-h); letter-spacing: -.03em; }
.dgt-page .dgt-scope__big b.is-bump { animation: dgtSdBump .5s var(--dgt-ease); }
.dgt-page .dgt-scope__big span { font: 600 17px var(--dgt-font-h); color: #A8C7FA; }
.dgt-page .dgt-scope__meter { display: block; overflow: hidden; height: 8px; margin: 6px 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.dgt-page .dgt-scope__meter i { display: block; height: 100%; border-radius: inherit; background: var(--dgt-google); transform: scaleX(var(--m, 0)); transform-origin: left; transition: transform .6s var(--dgt-ease); }
.dgt-page .dgt-scope__price { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.dgt-page .dgt-scope__price[hidden] { display: none; }
.dgt-page .dgt-scope__price span { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.dgt-page .dgt-scope__price b { font: 800 26px/1.1 var(--dgt-font-h); color: #fff; }
.dgt-page .dgt-scope__list { display: grid; gap: 8px; margin: 2px 0 14px; }
.dgt-page .dgt-scope__list li { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.35 var(--dgt-font-h); color: #fff; animation: dgtRevealRight .4s var(--dgt-ease) both; }
.dgt-page .dgt-scope__list .dgt-ico { width: 16px; height: 16px; color: var(--dgt-g-green); stroke-width: 3; }
.dgt-page .dgt-scope__sum .dgt-btn { position: relative; z-index: 1; margin-top: 4px; white-space: normal; text-align: left; }
.dgt-page .dgt-scope__foot { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .55); }

/* --- Section backgrounds further down --- */
.dgt-page--service .dgt-s-faq { background: #fff; }
.dgt-page--service .dgt-s-related { background: var(--dgt-light); }
/* Column fallback (Elementor's "Columns" control overrides it); tablets / phones use the defaults in digiable.css */
@media (min-width: 1025px) {
	.dgt-page--service .dgt-s-related .dgt-grid { --cols: 4; }
}

/* --- Keyframes --- */
@keyframes dgtSdShine { to { transform: translateX(120%); } }
@keyframes dgtSdStep { to { transform: scaleX(1); } }
@keyframes dgtSdCursor {
	0% { opacity: 0; transform: translate(70px, 50px); }
	20% { opacity: 1; }
	50% { transform: translate(0, 0); }
	58% { transform: translate(0, 0) scale(.82); }
	66%, 92% { opacity: 1; transform: translate(0, 0); }
	100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes dgtSdClick { 0%, 54% { transform: none; box-shadow: 0 8px 16px -8px var(--dgt-primary); } 58% { transform: scale(.92); } 64% { transform: none; box-shadow: 0 0 0 7px rgba(253, 103, 49, .25); } 100% { box-shadow: 0 0 0 14px rgba(253, 103, 49, 0); } }
@keyframes dgtSdTicker { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes dgtSdNag { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(-1deg) translateY(-3px); } }
@keyframes dgtSdBar { from { transform: scaleX(0); } }
@keyframes dgtSdPanel { from { opacity: 0; transform: translateY(14px); } }
@keyframes dgtSdBump { 40% { transform: scale(1.08); color: #A8C7FA; } }

/* --- Responsive --- */
@media (max-width: 1200px) {
	.dgt-page .dgt-sdfloat--1 { left: -3%; }
	.dgt-page .dgt-sdfloat--2 { right: -2%; }
	.dgt-page .dgt-plat { grid-template-columns: 290px minmax(0, 1fr); }
	.dgt-page .dgt-plat__panel { grid-template-columns: minmax(0, 1fr); }
	.dgt-page .dgt-plat__bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
}
@media (max-width: 1024px) {
	.dgt-page .dgt-sdhero { padding: 60px 0 190px; }
	.dgt-page .dgt-sdhero__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.dgt-page .dgt-build { margin: 0 auto; }
	.dgt-page .dgt-build__win,
	.dgt-page .dgt-build:hover .dgt-build__win { transform: none; }
	.dgt-page .dgt-sdhero__visual .dgt-illus { margin: 0 auto; }
	.dgt-page .dgt-sdproof__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgt-page .dgt-sdproof__card li:nth-child(odd)::before { display: none; }
	.dgt-page .dgt-sdcmp { padding-top: 96px; }
	.dgt-page .dgt-sdcmp__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.dgt-page .dgt-cmp__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgt-page .dgt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.dgt-page .dgt-bento__item.is-feature { grid-row: auto; }
	.dgt-page .dgt-road { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.dgt-page .dgt-road__intro { position: static; }
	.dgt-page .dgt-plat { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.dgt-page .dgt-plat__tabs {
		display: flex; overflow-x: auto; gap: 10px; margin: 0 -24px; padding: 4px 24px 10px; scrollbar-width: none; scroll-snap-type: x proximity;
	}
	.dgt-page .dgt-plat__tabs::-webkit-scrollbar { display: none; }
	.dgt-page .dgt-plat__tab { flex: 0 0 auto; width: auto; scroll-snap-align: start; }
	.dgt-page .dgt-plat__tab.is-active,
	.dgt-page .dgt-plat__tab.is-active:hover,
	.dgt-page .dgt-plat__tab.is-active:focus { transform: none; }
	.dgt-page .dgt-plat__arrow { display: none; }
	.dgt-page .dgt-scope { grid-template-columns: minmax(0, 1fr); }
	.dgt-page .dgt-scope__sum { position: static; }
}
@media (max-width: 767px) {
	.dgt-page .dgt-sdhero { padding: 48px 0 170px; }
	.dgt-page .dgt-build { padding-bottom: 0; }
	.dgt-page .dgt-build__win { border-radius: 16px; }
	.dgt-page .dgt-build__screen { padding: 12px; }
	.dgt-page .dgt-build__live { display: none; }
	.dgt-page .dgt-build__steps li { gap: 6px; padding: 10px 4px; font-size: 11.5px; }
	.dgt-page .dgt-msite { gap: 9px; }
	.dgt-page .dgt-msite__hero { padding: 12px; }
	.dgt-page .dgt-msite__links i { width: 18px; }
	.dgt-page .dgt-scores { position: relative; left: auto; right: auto; margin: 12px 0 0; padding: 12px 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
	.dgt-page .dgt-score__ring { width: 50px; height: 50px; }
	.dgt-page .dgt-score__ring b { font-size: 15px; }
	.dgt-page .dgt-sdfloat--1,
	.dgt-page .dgt-sdfloat--2 { display: none; }
	.dgt-page .dgt-sdproof__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: -86px; padding: 6px; border-radius: 22px; }
	.dgt-page .dgt-sdproof__card li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px; }
	.dgt-page .dgt-sdproof__ico { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; }
	.dgt-page .dgt-sdproof__txt b { font-size: 23px; }
	.dgt-page .dgt-sdproof__txt small { font-size: 12.5px; }
	.dgt-page .dgt-sdcmp { padding-top: 80px; }
	.dgt-page .dgt-cmp { border-radius: 18px; }
	.dgt-page .dgt-cmp__stage { aspect-ratio: 1 / 1.05; }
	.dgt-page .dgt-cmp.is-images .dgt-cmp__stage { aspect-ratio: 4 / 3; }
	.dgt-page .dgt-cmp__layer > .dgt-msite { padding: 12px; }
	.dgt-page .dgt-cmp__tag { top: 10px; padding: 5px 9px; font-size: 10px; }
	.dgt-page .is-before > .dgt-cmp__tag { left: 10px; }
	.dgt-page .is-after > .dgt-cmp__tag { right: 10px; }
	.dgt-page .dgt-cmp__score { bottom: 10px; padding: 5px; }
	.dgt-page .dgt-cmp__score small { display: none; }
	.dgt-page .dgt-cmp__score b { width: 36px; height: 36px; font-size: 14px; }
	.dgt-page .is-before > .dgt-cmp__score { left: 10px; }
	.dgt-page .is-after > .dgt-cmp__score { right: 10px; }
	.dgt-page .dgt-cmp__handle > span { width: 44px; height: 44px; }
	.dgt-page .dgt-osite__popup { left: 22%; width: 60%; }
	.dgt-page .dgt-cmp__lists { grid-template-columns: minmax(0, 1fr); }
	.dgt-page .dgt-cmp__list { padding: 20px 18px; }
	.dgt-page .dgt-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.dgt-page .dgt-bento__item.is-feature,
	.dgt-page .dgt-bento__item:nth-child(6):nth-last-child(3) { grid-column: auto; }
	.dgt-page .dgt-bento__item { padding: 22px 20px; border-radius: 20px; }
	.dgt-page .dgt-bento__item.is-feature { padding: 26px 22px; }
	.dgt-page .dgt-bento__txt { padding-top: 18px; }
	.dgt-page .dgt-road__line { left: 21px; top: 22px; bottom: 22px; }
	.dgt-page .dgt-road__step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
	.dgt-page .dgt-road__dot { width: 44px; height: 44px; font-size: 16px; }
	.dgt-page .dgt-road__dot svg { width: 16px; height: 16px; }
	.dgt-page .dgt-road__card { padding: 18px 18px 18px; border-radius: 18px; }
	.dgt-page .dgt-road__card::before { top: 16px; }
	.dgt-page .dgt-road__badge b { font-size: 26px; }
	.dgt-page .dgt-plat__tabs { margin: 0 -18px; padding: 4px 18px 10px; }
	.dgt-page .dgt-plat__tab { gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; }
	.dgt-page .dgt-plat__ico { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
	.dgt-page .dgt-plat__name small { display: none; }
	.dgt-page .dgt-plat__panel { padding: 26px 20px; border-radius: 22px; gap: 24px; }
	.dgt-page .dgt-plat__bars { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
	.dgt-page .dgt-plat__foot .dgt-btn { flex: 1 1 auto; }
	.dgt-page .dgt-scope { padding: 8px; border-radius: 24px; }
	.dgt-page .dgt-scope__qs { padding: 18px 12px; }
	.dgt-page .dgt-scope__q legend { font-size: 16.5px; }
	.dgt-page .dgt-opt__box { padding: 10px 14px 10px 10px; font-size: 14px; }
	.dgt-page .dgt-scope__sum { padding: 26px 22px; border-radius: 20px; }
}