/* ==========================================================================
   DEDI.US — modern/tech layer (2026)
   Override layer on top of style.css. Loaded LAST.

   Type rule that governs the whole page:
     MONO  (IBM Plex Mono) = anything a registry would print — prefixes,
             counts, labels, nav, buttons, table data, the hero headline.
     SANS  (IBM Plex Sans) = prose.
   ========================================================================== */

:root {
	/* brand — unchanged amber */
	--accent: #fcb017;
	--accent-soft: #ffd27a;
	--accent-deep: #d9930c;

	/* functional cool tone: "not yours / unallocated" in the address map */
	--cool: #4f8ba4;
	--cool-dim: rgba(79, 139, 164, .22);

	--ink: #08090b;
	--bg: #0d0f13;
	--surface: #14171c;
	--surface-2: #1b1f26;
	--line: rgba(252, 176, 23, .2);
	--line-soft: rgba(255, 255, 255, .07);

	--text: #b9c1cc;
	--text-dim: #78818f;
	--head: #f5f7fa;

	--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--radius: 12px;
	--ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- base ---------------------------------------------------------------- */

body {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* style.css sets every heading to uppercase amber. Reset it here so caps are
   opt-in per element (the hero headline and the small mono labels) rather
   than inherited by everything. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sans);
	color: var(--head);
	letter-spacing: -.02em;
	font-weight: 600;
	text-transform: none;
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-soft); }

::selection {
	background: var(--accent);
	color: var(--ink);
}

/* keyboard focus — visible everywhere, never on mouse click */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2b3038; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }

/* --- topbar -------------------------------------------------------------- */

/* style.css hides this outright; the phone number belongs above the fold */
.topbar {
	display: block;
	background: var(--ink);
	border-bottom: 1px solid var(--line-soft);
	padding: 8px 0;
}

.topbar p {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 0;
}

.topbar p i { color: var(--accent); margin-right: 8px; }

/* --- reading-progress bar ------------------------------------------------ */

.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	z-index: 2000;
	background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
	box-shadow: 0 0 12px rgba(252, 176, 23, .7);
	transition: width .1s linear;
}

/* --- header -------------------------------------------------------------- */

header .navbar,
.home-page header .navbar-default,
.navbar-default {
	background: rgba(10, 11, 14, .8) !important;
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid var(--line-soft) !important;
	min-height: 68px;
	padding: 10px 0;
	transition: background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
}

header .navbar.is-stuck,
.home-page header .navbar-default.is-stuck {
	padding: 4px 0;
	background: rgba(8, 9, 11, .94) !important;
	border-bottom-color: var(--line) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.navbar-brand img {
	filter: drop-shadow(0 0 10px rgba(252, 176, 23, .3));
	transition: transform .3s var(--ease);
}

.navbar-brand:hover img { transform: translateY(-1px); }

header .navbar-nav > li > a,
.navbar .nav > li > a {
	position: relative;
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-dim) !important;
	background: transparent !important;
	padding: 10px 13px !important;
	border-radius: 6px;
	transition: color .25s var(--ease);
}

header .navbar-nav > li > a::before {
	content: '';
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 4px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease);
}

header .navbar-nav > li > a:hover::before,
header .navbar-nav > li.active > a::before { transform: scaleX(1); }

header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: var(--accent) !important;
	background: rgba(252, 176, 23, .07) !important;
}

.navbar-default .navbar-toggle {
	border-color: var(--line);
	margin-top: 14px;
	border-radius: 8px;
}

.navbar-default .navbar-toggle .icon-bar { background: var(--accent); }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: rgba(252, 176, 23, .1); }

/* --- hero ---------------------------------------------------------------- */

#banner {
	background: var(--ink);
	overflow: hidden;
	position: relative;
}

#banner .hero-fx {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
}

/* live allocation map — cells of address space lighting up and trading.
   Masked clear through the middle so it frames the headline instead of
   competing with it. */
#hero-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .38;
	mask-image: radial-gradient(105% 85% at 50% 50%, transparent 30%, #000 82%);
	-webkit-mask-image: radial-gradient(105% 85% at 50% 50%, transparent 30%, #000 82%);
}

#main-slider { position: relative; }

/* Give the hero real height. Left to the slide images' own aspect ratio it
   collapses to ~290px on a wide viewport, which cramped the caption. */
#main-slider .slides > li {
	position: relative;
	min-height: clamp(430px, 64vh, 620px);
}

#main-slider .slides img {
	height: clamp(430px, 64vh, 620px);
	object-fit: cover;
	object-position: center;
}

/* grid + vignette overlay on top of the slides */
#main-slider:after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(rgba(8, 9, 11, .58), rgba(8, 9, 11, .86)),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 64px);
}

#main-slider:before {
	background: radial-gradient(120% 90% at 50% 100%, rgba(252, 176, 23, .2), transparent 60%);
	z-index: 2;
	pointer-events: none;
}

.flexslider { background: var(--ink); }

.flexslider .slides img {
	filter: grayscale(45%) contrast(108%) brightness(.7);
	transform: scale(1.06);
	animation: heroDrift 24s ease-in-out infinite alternate;
}

@keyframes heroDrift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.13) translate3d(-1.4%, -1%, 0); }
}

/* No vertical padding here — the caption is a flex column centred inside a
   slide with overflow:hidden, so any top padding pushes the CTAs off the
   bottom edge and clips them mid-glyph. */
.flex-caption {
	z-index: 4;
	padding: 0 24px;
	text-align: center;
}

.flex-caption .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: center;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 7px 14px;
	margin-bottom: 22px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(252, 176, 23, .06);
	backdrop-filter: blur(6px);
}

.flex-caption .eyebrow .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(252, 176, 23, .7);
	animation: pulseDot 2.4s infinite;
}

@keyframes pulseDot {
	0%   { box-shadow: 0 0 0 0 rgba(252, 176, 23, .55); }
	70%  { box-shadow: 0 0 0 12px rgba(252, 176, 23, 0); }
	100% { box-shadow: 0 0 0 0 rgba(252, 176, 23, 0); }
}

/* the hero headline reads like a registry record: mono, tight, uppercase */
.flex-caption h3 {
	font-family: var(--mono);
	font-size: clamp(1.7rem, 4.4vw, 3.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.045em;
	text-transform: uppercase;
	color: var(--head);
	margin: 0 0 18px;
	text-shadow: 0 18px 60px rgba(0, 0, 0, .65);
}

.flex-caption h3 em {
	font-style: normal;
	color: var(--accent);
}

.flex-caption p {
	font-family: var(--sans);
	font-size: clamp(.95rem, 1.35vw, 1.15rem);
	font-weight: 400;
	line-height: 1.6;
	text-transform: none;
	color: #ccd3dc;
	max-width: 640px;
	margin: 0 auto;
}

.hero-actions {
	margin-top: 32px;
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* One clean entrance on first paint only. The old version re-ran a blurred
   slide-in on every 7s slideshow tick, which flickered the CTAs. */
.flexslider .flex-active-slide .flex-caption > * {
	animation: capIn .7s var(--ease) both;
}

.flexslider .flex-active-slide .flex-caption > *:nth-child(2) { animation-delay: .07s; }
.flexslider .flex-active-slide .flex-caption > *:nth-child(3) { animation-delay: .14s; }
.flexslider .flex-active-slide .flex-caption > *:nth-child(4) { animation-delay: .21s; }

/* after the first cycle the slideshow only cross-fades; captions hold still */
.flexslider.has-cycled .flex-active-slide .flex-caption > * { animation: none; }

@keyframes capIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* slider paging — thin bars, centered under the caption */
.flex-direction-nav { display: none; }

.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: 26px;
	left: 0;
	z-index: 5;
	text-align: center;
}

.flex-control-nav li { margin: 0 5px; }

.flex-control-paging li a {
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .22);
	box-shadow: none;
	transition: background .3s var(--ease), width .3s var(--ease);
}

.flex-control-paging li a:hover { background: rgba(255, 255, 255, .4); }

.flex-control-paging li a.flex-active {
	background: var(--accent);
	width: 42px;
}

/* --- RIR coverage strip (under the hero) --------------------------------- */

.rir-strip {
	position: relative;
	z-index: 4;
	background: var(--ink);
	border-top: 1px solid var(--line-soft);
	padding: 22px 0;
}

.rir-strip .container {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.rir-label {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
	flex: 0 0 auto;
}

.rir-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 34px;
	flex-wrap: wrap;
}

.rir-list li {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.rir-list b {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--head);
	transition: color .25s var(--ease);
}

.rir-list li:hover b { color: var(--accent); }

.rir-list span {
	font-family: var(--sans);
	font-size: 11px;
	color: var(--text-dim);
}

/* --- buttons ------------------------------------------------------------- */

.btn-tech {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 8px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--ink) !important;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.btn-tech:hover,
.btn-tech:focus {
	transform: translateY(-2px);
	background: var(--accent-soft);
	box-shadow: 0 14px 32px rgba(252, 176, 23, .28);
	text-decoration: none;
	color: var(--ink) !important;
}

.btn-tech i { transition: transform .25s var(--ease); }
.btn-tech:hover i { transform: translateX(2px); }

.btn-tech.ghost {
	background: transparent;
	color: var(--accent) !important;
	border-color: var(--line);
	backdrop-filter: blur(6px);
}

.btn-tech.ghost:hover {
	border-color: var(--accent);
	background: rgba(252, 176, 23, .08);
	color: var(--accent) !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, .4);
}

/* --- shared section furniture -------------------------------------------- */

.section-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }

.eyebrow-line {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.section-head h2 {
	font-family: var(--sans);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 600;
	color: var(--head);
	text-transform: none;
	margin-bottom: 14px;
	letter-spacing: -.025em;
}

.section-head p { color: var(--text-dim); font-size: 15px; }

/* --- CTA band (kept amber — the brand anchor) ---------------------------- */

#call-to-action-2 {
	position: relative;
	background: linear-gradient(135deg, var(--accent-deep), var(--accent) 45%, var(--accent-soft));
	padding: 60px 0;
	overflow: hidden;
}

#call-to-action-2:before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 46px);
	mask-image: radial-gradient(80% 100% at 50% 50%, #000, transparent);
	-webkit-mask-image: radial-gradient(80% 100% at 50% 50%, #000, transparent);
}

#call-to-action-2 .container { position: relative; z-index: 1; }

#call-to-action-2 h3 {
	color: #1a1206;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	font-weight: 600;
	text-transform: none;
	letter-spacing: -.025em;
}

#call-to-action-2 p {
	color: rgba(26, 18, 6, .82);
	font-size: 15px;
	font-weight: 400;
	max-width: 760px;
	margin: 0 auto;
}

#call-to-action-2 .btn-tech {
	background: var(--ink);
	color: var(--accent) !important;
	border-color: var(--ink);
}

#call-to-action-2 .btn-tech:hover {
	background: #14171c;
	color: var(--accent-soft) !important;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

/* --- counters ------------------------------------------------------------ */

#counters {
	position: relative;
	background: var(--ink);
	padding: 72px 0;
	border-bottom: 1px solid var(--line-soft);
	overflow: hidden;
}

#counters:before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 120% at 50% 0%, rgba(252, 176, 23, .1), transparent 70%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 56px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 56px);
}

#counters .container { position: relative; z-index: 1; }

.counter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.counter-card {
	position: relative;
	padding: 28px 20px;
	text-align: center;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
	transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.counter-card:hover {
	transform: translateY(-6px);
	border-color: var(--line);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

.counter-card .c-icon {
	font-size: 18px;
	color: var(--accent);
	margin-bottom: 12px;
	display: block;
}

.counter-card .c-num {
	font-family: var(--mono);
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	font-weight: 600;
	line-height: 1;
	color: var(--head);
	letter-spacing: -.04em;
	display: block;
	font-variant-numeric: tabular-nums;
}

.counter-card .c-num .suffix { color: var(--accent); }

.counter-card .c-label {
	display: block;
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.counter-card:after {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	opacity: 0;
	transition: opacity .35s var(--ease);
}

.counter-card:hover:after { opacity: 1; }

/* --- services ------------------------------------------------------------ */

#content {
	background: var(--bg);
	padding: 84px 0 90px;
	position: relative;
}

#content:before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(50% 60% at 100% 0%, rgba(252, 176, 23, .06), transparent 70%);
}

#content .container { position: relative; z-index: 1; }

.service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
	transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.service-card:hover {
	transform: translateY(-8px);
	border-color: var(--line);
	box-shadow: 0 26px 56px rgba(0, 0, 0, .55);
}

.service-card .card-media {
	position: relative;
	height: 160px;
	overflow: hidden;
}

.service-card .card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(65%) brightness(.6);
	transform: scale(1.02);
	transition: transform .6s var(--ease), filter .6s var(--ease);
}

.service-card:hover .card-media img {
	transform: scale(1.1);
	filter: grayscale(0) brightness(.85);
}

.service-card .card-media:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 15, 19, .1), var(--surface));
}

/* Positioned against the card, not .card-media — the media box needs
   overflow:hidden to contain the zooming image, which would clip this tile. */
.service-card .card-icon {
	position: absolute;
	left: 20px;
	top: 136px;   /* card-media is 160px tall; overhang the seam by half the tile */
	z-index: 2;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--ink);
	background: linear-gradient(135deg, var(--accent-soft), var(--accent));
	border-radius: 12px;
	box-shadow: 0 12px 26px rgba(252, 176, 23, .28);
	transition: transform .4s var(--ease);
}

.service-card:hover .card-icon { transform: translateY(-4px); }

.service-card .card-body { padding: 38px 20px 24px; flex: 1; }

/* the prefix range each service actually involves — not decorative numbering */
.service-card .card-tag {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
	opacity: .85;
}

.service-card h3 {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 600;
	margin: 8px 0 10px;
	color: var(--head);
	text-transform: none;
	letter-spacing: -.015em;
}

.service-card p {
	font-size: 14px;
	color: var(--text-dim);
	margin: 0;
	line-height: 1.6;
}

/* ==========================================================================
   SIGNATURE — prefix explorer
   The grid is one /16. Every cell is one /24. Shortening the prefix by one
   doubles the lit cells; that doubling is the whole IPv4 market in one image.
   ========================================================================== */

#sizing {
	position: relative;
	background: var(--ink);
	padding: 84px 0 90px;
	border-top: 1px solid var(--line-soft);
}

#sizing:before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(55% 55% at 12% 0%, rgba(79, 139, 164, .09), transparent 70%);
}

#sizing .container { position: relative; z-index: 1; }

.explorer {
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--surface), rgba(20, 23, 28, .5));
	overflow: hidden;
}

.explorer-controls {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px 24px;
	border-bottom: 1px solid var(--line-soft);
	background: rgba(8, 9, 11, .5);
}

.ex-legend {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.prefix-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
	font-family: var(--mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--text-dim);
	background: transparent;
	border: 1px solid var(--line-soft);
	border-radius: 6px;
	padding: 6px 11px;
	cursor: pointer;
	transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.chip:hover { color: var(--head); border-color: var(--line); }

.chip.is-on {
	color: var(--ink);
	background: var(--accent);
	border-color: var(--accent);
	font-weight: 600;
}

.ex-slider {
	flex: 1 1 200px;
	min-width: 170px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* the scale runs big-to-small, left to right — labelled, so no guessing */
.ex-end {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--text-dim);
	flex: 0 0 auto;
}

#prefix-range {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--cool));
	border-radius: 3px;
	outline: none;
	cursor: pointer;
}

#prefix-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent);
	border: 3px solid var(--ink);
	box-shadow: 0 0 0 1px var(--accent), 0 4px 12px rgba(0, 0, 0, .6);
	cursor: pointer;
}

#prefix-range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent);
	border: 3px solid var(--ink);
	box-shadow: 0 0 0 1px var(--accent);
	cursor: pointer;
}

.explorer-body {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 0;
}

.explorer-readout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--line-soft);
}

.ro {
	background: var(--surface);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.ro-wide { grid-column: 1 / -1; }

.ro-k {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.ro-v {
	font-family: var(--mono);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--head);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	transition: color .2s var(--ease);
}

#ro-prefix { color: var(--accent); }

.ro-v.mono-sm {
	font-size: clamp(.95rem, 1.5vw, 1.15rem);
	letter-spacing: 0;
	word-break: break-word;
}

.ro-note {
	font-family: var(--sans);
	font-size: 11.5px;
	color: var(--text-dim);
	line-height: 1.5;
}

/* the /16 map */
.explorer-map {
	margin: 0;
	padding: 24px;
	background: rgba(8, 9, 11, .45);
	border-left: 1px solid var(--line-soft);
}

.map-grid {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: 2px;
	aspect-ratio: 1;
	width: 100%;
}

.map-grid i {
	display: block;
	border-radius: 1px;
	background: var(--cool-dim);
	transition: background .22s var(--ease), box-shadow .22s var(--ease);
	transition-delay: var(--cd, 0s);
}

.map-grid i.on {
	background: var(--accent);
	box-shadow: 0 0 6px rgba(252, 176, 23, .55);
}

.explorer-map figcaption {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.mk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.mk .sw {
	width: 9px;
	height: 9px;
	border-radius: 1px;
	background: var(--cool-dim);
	flex: 0 0 auto;
}

.mk .sw.on { background: var(--accent); }

.mk-note {
	font-family: var(--sans);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--text-dim);
	margin-top: 4px;
}

/* --- prefix reference table ---------------------------------------------- */

.table-wrap { margin-top: 44px; }

/* border-collapse: separate (not collapse) with overflow left visible, so the
   rounded corners survive without the box clipping the <caption> above it */
.prefix-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
}

.prefix-table thead th:first-child { border-top-left-radius: var(--radius); }
.prefix-table thead th:last-child { border-top-right-radius: var(--radius); }

.prefix-table caption {
	caption-side: top;
	text-align: left;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
	padding: 0 0 14px;
}

.prefix-table th {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	text-align: left;
	padding: 14px 18px;
	background: rgba(252, 176, 23, .05);
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.prefix-table td {
	padding: 13px 18px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 14px;
	color: var(--text-dim);
	vertical-align: middle;
}

.prefix-table td:nth-child(1),
.prefix-table td:nth-child(2),
.prefix-table td:nth-child(3) {
	font-family: var(--mono);
	color: var(--text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.prefix-table td:nth-child(1) b {
	color: var(--head);
	font-weight: 600;
}

.prefix-table tbody tr {
	transition: background .2s var(--ease);
}

.prefix-table tbody tr:hover { background: rgba(252, 176, 23, .045); }
.prefix-table tbody tr:hover td:nth-child(1) b { color: var(--accent); }
.prefix-table tbody tr:last-child td { border-bottom: 0; }

.table-note {
	margin-top: 16px;
	font-size: 14px;
	color: var(--text-dim);
}

/* --- transfer process timeline ------------------------------------------- */

#process {
	background: var(--bg);
	padding: 84px 0 90px;
	position: relative;
}

#process:before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(50% 50% at 88% 8%, rgba(252, 176, 23, .06), transparent 70%);
}

#process .container { position: relative; z-index: 1; }

.timeline {
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0 0 0 68px;
	max-width: 860px;
}

/* the rail track, and the amber fill that follows your scroll.
   z-index:-1 paints both behind the step tiles, which sit on the rail — a
   plain positive z-index on the tile is not enough to win against a parent's
   pseudo-element here. */
.timeline:before,
.timeline:after {
	content: '';
	position: absolute;
	left: 23px;
	top: 8px;
	width: 1px;
	z-index: -1;
}

.timeline:before {
	bottom: 8px;
	background: var(--line-soft);
}

.timeline:after {
	height: calc(var(--fill, 0) * 1%);
	max-height: calc(100% - 16px);
	background: linear-gradient(180deg, var(--accent), var(--accent-deep));
	box-shadow: 0 0 10px rgba(252, 176, 23, .5);
	transition: height .15s linear;
}

.tl-step {
	position: relative;
	padding-bottom: 38px;
}

.tl-step:last-child { padding-bottom: 0; }

/* Sits on top of the rail and must stay fully opaque, or the line shows
   through the tile. The tint is layered as a gradient over an opaque colour. */
.tl-num {
	position: absolute;
	left: -68px;
	top: -2px;
	z-index: 1;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--text-dim);
	background-color: var(--bg);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	transition: color .35s var(--ease), border-color .35s var(--ease);
}

.tl-step.is-visible .tl-num {
	color: var(--accent);
	border-color: var(--line);
	background-image: linear-gradient(rgba(252, 176, 23, .08), rgba(252, 176, 23, .08));
}

.tl-body h3 {
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 600;
	color: var(--head);
	margin: 0 0 8px;
	letter-spacing: -.02em;
}

.tl-body p {
	font-size: 14.5px;
	color: var(--text-dim);
	margin: 0 0 12px;
	line-height: 1.65;
	max-width: 62ch;
}

.tl-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tl-tags li {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
	border: 1px solid var(--line-soft);
	border-radius: 5px;
	padding: 4px 9px;
	background: rgba(255, 255, 255, .02);
	transition: color .25s var(--ease), border-color .25s var(--ease);
}

.tl-step:hover .tl-tags li { color: var(--text); border-color: var(--line); }

/* --- FAQ ----------------------------------------------------------------- */

#faq {
	background: var(--ink);
	padding: 84px 0 90px;
	border-top: 1px solid var(--line-soft);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}

.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 0; }

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	cursor: pointer;
	list-style: none;
	padding: 20px 24px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--head);
	transition: background .25s var(--ease), color .25s var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary:hover { background: rgba(252, 176, 23, .04); color: var(--accent); }

.faq-item summary i {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--accent);
	border: 1px solid var(--line);
	border-radius: 6px;
	background: rgba(252, 176, 23, .06);
	transition: transform .3s var(--ease), background .3s var(--ease);
}

.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary i { transform: rotate(135deg); }

.faq-answer {
	padding: 0 24px 22px;
	animation: faqIn .3s var(--ease) both;
}

.faq-answer p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-dim);
	max-width: 68ch;
}

@keyframes faqIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* --- reveal-on-scroll ---------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	transition-delay: var(--d, 0s);
	will-change: opacity, transform;
}

.reveal.is-visible { opacity: 1; transform: none; }

/* --- footer -------------------------------------------------------------- */

footer {
	position: relative;
	background: var(--bg);
	padding-top: 0;
	border-top: 1px solid var(--line-soft);
}

footer:before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	opacity: .5;
}

.footer-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding: 56px 0 48px;
	border-bottom: 1px solid var(--line-soft);
}

.footer-cta h3 {
	font-family: var(--sans);
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	font-weight: 600;
	color: var(--head);
	margin: 0 0 10px;
	letter-spacing: -.025em;
}

.footer-cta p {
	margin: 0;
	font-size: 14.5px;
	color: var(--text-dim);
	max-width: 52ch;
}

.footer-cols { padding: 48px 0 0; }

footer .widgetheading {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
	font-weight: 600;
}

footer address,
footer .contact-list { color: var(--text-dim); font-size: 15px; }
footer address strong { color: var(--head); font-weight: 600; letter-spacing: .01em; }
footer address a { color: var(--text-dim); }

.contact-list { list-style: none; padding: 0; margin: 0; }

.contact-list li { margin-bottom: 10px; }

.contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--text) !important;
	font-family: var(--mono);
	font-size: 14px;
	transition: color .25s var(--ease), transform .25s var(--ease);
}

.contact-list a:hover { color: var(--accent) !important; transform: translateX(3px); text-decoration: none; }

.contact-list a i {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--accent);
	border: 1px solid var(--line);
	border-radius: 9px;
	background: rgba(252, 176, 23, .06);
}

#sub-footer {
	margin-top: 34px;
	padding: 20px 0;
	background: transparent;
	border-top: 1px solid var(--line-soft);
}

#sub-footer .copyright p,
#sub-footer p {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--text-dim);
	margin: 0;
	padding: 6px 0;
}

ul.social-network { padding: 0; margin: 0; }

ul.social-network li { display: inline-block; margin-left: 8px; }

ul.social-network li a {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--text-dim);
	background: transparent;   /* style.css paints these #2c2c2c */
	border: 1px solid var(--line-soft);
	border-radius: 9px;
	transition: all .3s var(--ease);
}

ul.social-network li a:hover {
	color: var(--ink);
	background: var(--accent);
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(252, 176, 23, .26);
}

/* --- scroll-to-top ------------------------------------------------------- */

.scrollup {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 42px;
	height: 42px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(252, 176, 23, .1);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--accent);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all .35s var(--ease);
	z-index: 900;
}

.scrollup.show { opacity: 1; visibility: visible; transform: none; }

.scrollup:hover {
	background: var(--accent);
	color: var(--ink);
	box-shadow: 0 14px 30px rgba(252, 176, 23, .3);
}

.scrollup i { font-size: 18px; line-height: 1; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1199px) {
	.explorer-body { grid-template-columns: 1fr 280px; }
}

@media (max-width: 991px) {
	.service-grid { grid-template-columns: repeat(2, 1fr); }
	.counter-grid { grid-template-columns: repeat(2, 1fr); }

	.explorer-body { grid-template-columns: 1fr; }
	.explorer-map {
		border-left: 0;
		border-top: 1px solid var(--line-soft);
		max-width: 420px;
	}

	.rir-strip .container { justify-content: flex-start; }
	.rir-list { gap: 24px; }

	.footer-cta { padding: 44px 0 40px; }
}

@media (max-width: 767px) {
	body { font-size: 15px; }
	.navbar-collapse { background: rgba(8, 9, 11, .97); border-radius: 10px; margin-top: 8px; }
	header .navbar-nav > li > a { padding: 12px 16px !important; }

	#content, #sizing, #process, #faq { padding: 60px 0 66px; }
	#counters { padding: 54px 0; }
	.service-grid { grid-template-columns: 1fr; }

	/* style.css pins #banner to height:180px at this breakpoint, which crushes
	   the hero and pushes the caption out over the next section. */
	#banner { height: auto; }

	.flex-caption { padding: 0 20px; }
	.flex-caption .eyebrow { font-size: 10px; letter-spacing: .14em; }
	.flex-control-nav { bottom: 14px; }

	.rir-strip { padding: 18px 0; }
	.rir-list { gap: 18px 22px; }
	.rir-list b { font-size: 12.5px; }
	.rir-list span { font-size: 10.5px; }

	.explorer-controls { padding: 16px; gap: 14px; }
	.ex-slider { flex-basis: 100%; }
	.explorer-readout { grid-template-columns: 1fr; }
	.ro { padding: 18px 16px; }
	.explorer-map { padding: 16px; max-width: none; }

	/* a 9-column table does not fit a phone — scroll it, don't squash it */
	.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.prefix-table { min-width: 560px; }
	.table-note { min-width: 0; }

	.timeline { padding-left: 52px; }
	.timeline:before, .timeline:after { left: 17px; }
	.tl-num { left: -52px; width: 34px; height: 34px; font-size: 11px; border-radius: 8px; }

	.faq-item summary { padding: 16px 18px; font-size: 15px; }
	.faq-answer { padding: 0 18px 18px; }

	.footer-cta { padding: 38px 0 34px; }
	#sub-footer .row > div { text-align: center; }
	ul.social-network { margin-top: 12px; }
	ul.social-network li { margin: 0 4px; }
	ul.social-network li a { display: inline-flex; }
	.scrollup { right: 14px; bottom: 14px; }
}

@media (max-width: 480px) {
	.counter-grid { grid-template-columns: 1fr; }
	.prefix-chips { gap: 5px; }
	.chip { padding: 5px 8px; font-size: 11.5px; }
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.scroll-progress { transition: none; }
	.timeline:after { transition: none; }

	.flexslider .slides img,
	.flex-caption .eyebrow .dot,
	.flexslider .flex-active-slide .flex-caption > *,
	.faq-answer { animation: none; }

	.map-grid i { transition: none; transition-delay: 0s !important; }

	.btn-tech:hover,
	.counter-card:hover,
	.service-card:hover,
	.contact-list a:hover,
	ul.social-network li a:hover { transform: none; }
}