/* ============================================================
   SIGNAL PATH — sitewide accent/typography overrides
   Loaded after style.min.css. Recolors the existing blue/yellow/
   green accent system to amber/teal, and introduces the
   monospace treatment for small technical labels, without
   touching page structure or markup.
   ============================================================ */

/* --- Section heading + accent text classes --- */
h2 { color: #ff9d3d !important; }
.text-blue { color: #4fd1c5 !important; }
.text-yellow { color: #ff9d3d !important; }
.text-aqua { color: #4fd1c5 !important; }

/* --- Nav dropdown panel: was hardcoded #01a0f9 (old blue), and white text on
   it only hit 2.84:1 contrast (pre-existing issue, not something we broke,
   but recoloring anyway since it visually clashed with the new palette). --- */
#rs-header .menu-area .main-menu .rs-menu ul.sub-menu { background: #15181c !important; border: 1px solid #262b31; }
/* The dropdown's default (non-hover) link color was #333 dark-gray, tuned for
   the old bright-blue panel — invisible against the new dark panel. */
#rs-header .menu-area .rs-menu ul li .sub-menu li a { color: #c9d3e0 !important; }
#rs-header .menu-area .rs-menu ul li .sub-menu li:hover > a,
#rs-header .menu-area .rs-menu ul li .sub-menu li.active > a { color: #ff9d3d !important; }

/* --- "Talk to Sales" nav button ---
   Adding this button to the existing nav row pushed total width past what
   fits at ~1280px (a common laptop width), wrapping "Contact" to a second
   line. Tightening the 40px inter-item gap (rsmenu-main.css) reclaims the
   room instead of just hiding the button on common screen sizes. */
.rs-menu ul.nav-menu > li { margin-right: 24px !important; }
.nav-cta-btn {
	display: inline-flex;
	align-items: center;
	margin-left: 18px;
	padding: 9px 18px;
	border-radius: 3px;
	background: linear-gradient(90deg, #ff9d3d, #4fd1c5);
	color: #0b0d10 !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .3s ease;
}
.nav-cta-btn:hover { opacity: .85; color: #0b0d10 !important; }
@media (max-width: 1365px) { .nav-cta-btn { display: none; } }

/* --- Homepage "Contact Info" phone/email/WhatsApp links: pre-existing
   #0c7fa7-on-#221f20 contrast issue (2.89:1), unrelated to the recolor
   but fixed while here. --- */
.smppcenter-contact .contact-info .contact-icon .icon-text a { color: #4fd1c5 !important; }
.smppcenter-contact .contact-info .contact-icon .icon-text a:hover { color: #ff9d3d !important; }
.rs-footer address a { color: #c9d3e0 !important; }
.rs-footer address a:hover { color: #4fd1c5 !important; }

/* --- Primary CTA button (.readon) ---
   Dark text on the bright gradient: white-on-amber was only ~2:1 contrast
   (fails WCAG AA at 4.5:1), so the button text goes dark instead of the
   gradient going dark — keeps the bright, confident CTA look. */
.readon { color: #0b0d10 !important; }
.readon:before { background: linear-gradient(90deg, #ff9d3d, #4fd1c5) !important; }
.readon:hover { color: #0b0d10 !important; background: #4fd1c5 !important; border-color: #4fd1c5 !important; }

/* --- Icon gradients on .single-about / .about-icon cards --- */
.about-icon i:before { background-image: linear-gradient(0deg, #ff9d3d, #4fd1c5) !important; }
.about-icon:before { background: linear-gradient(-90deg, #ff9d3d, #4fd1c5) !important; }

/* --- Technical eyebrow labels (FAQ / RESOURCES / etc.) go monospace --- */
.text-size-12 {
	font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
	font-size: 11.5px;
	letter-spacing: .1em;
}

/* --- Breadcrumb banner ---
   The base theme centered .breadcrumbs-inner with position:absolute +
   top:60%/translateY(-40%), anchored to .breadcrumbs-wrap's own
   position:relative. That's fragile (it's what caused the banner to
   collapse when the background <img> — which used to give the wrapper
   its height — was removed) and it fought the "sufficient padding
   between the breadcrumb list, h1 and p" ask below, since there's no
   good hook for internal spacing in an absolutely-positioned block.

   Replaced with: .breadcrumbs (not .breadcrumbs-wrap) holds position:relative,
   purely so the decorative grid pseudo-element has something to anchor to.
   .breadcrumbs-wrap itself is a flex container that vertically centers
   .breadcrumbs-inner, which is back in normal document flow — so its own
   padding is what actually controls the spacing, robustly, no transform
   math involved.

   NOTE ON SELECTOR SPECIFICITY: style.min.css and responsive.min.css both
   re-declare .breadcrumbs-inner / .breadcrumbs-title using deep compound
   selectors (up to 5 chained classes, e.g.
   ".breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text
   .breadcrumbs-title"). A plain ".breadcrumbs-title{...}" loses to that
   regardless of file load order, since specificity beats source order.
   The rules below match (or intentionally exceed, for the one that must
   also beat a same-specificity mobile rule in responsive.min.css that
   loads AFTER this file) that same selector depth. */
.breadcrumbs {
	position: relative;
}
.breadcrumbs .breadcrumbs-wrap {
	position: static;
	display: flex;
	align-items: center;
	min-height: 340px;
	/* #rs-header is position:absolute (it's designed to float over a
	   full-bleed slider), so without this the breadcrumb title sits
	   underneath/behind the nav bar instead of below it — same issue
	   .signal-hero had, fixed there with the equivalent top padding. */
	padding-top: 90px;
	background:
		radial-gradient(700px 340px at 12% 0%, rgba(255, 157, 61, .13), transparent 60%),
		#0b0d10;
}
.breadcrumbs:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(rgba(255, 157, 61, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 157, 61, .08) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
	mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
	pointer-events: none;
}
.breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner {
	position: static;
	top: auto;
	transform: none;
	width: 100%;
	padding: 44px 0;
	z-index: 2;
}
/* New spacing rules: breadcrumb list <-> h1 <-> subtitle p, and a smaller
   h1 size for these sub-page banners (the homepage hero has its own,
   separate <h1> in .signal-hero and is untouched by this). */
.breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .breadcrumbs-title {
	font-size: 34px;
	margin-bottom: 18px;
}
.breadcrumbs-text .categories {
	margin-bottom: 20px;
}
.breadcrumbs-text > p {
	margin-top: 0;
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.breadcrumbs .breadcrumbs-wrap { min-height: 260px; padding-top: 90px; }
	/* Repeats .breadcrumbs to out-specificity responsive.min.css's own
	   ".breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text
	   .breadcrumbs-title{font-size:35px}" mobile rule, which loads AFTER
	   this file and ties on specificity otherwise (so would win on
	   source order alone). */
	.breadcrumbs.breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .breadcrumbs-title {
		font-size: 26px;
	}
}

/* ============================================================
   Homepage hero — "Signal Path"
   ============================================================ */
.signal-hero {
	background: #0b0d10;
	padding: 156px 0 0;
	border-bottom: 1px solid #262b31;
}
.signal-hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; padding: 0 0 48px; }
@media (max-width: 767px) {
	.signal-hero { padding-top: 110px; }
}
.signal-hero .kicker { font-family: ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #4fd1c5; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.signal-hero .kicker:before { content: ""; width: 16px; height: 1px; background: #4fd1c5; }
.signal-hero h1 { font-size: clamp(32px,3.6vw,52px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 20px; font-weight: 800; color: #fff; }
.signal-hero h1 em { font-style: normal; color: #ff9d3d; }
.signal-hero p.lead-copy { font-size: 16.5px; color: #9aa3ac; max-width: 46ch; margin: 0 0 28px; }
.signal-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.signal-hero .btn-ghost { border: 1px solid #262b31; color: #fff; font-size: 14px; padding: 12px 20px; border-radius: 3px; display: inline-block; }
.signal-hero .btn-ghost:hover { border-color: #4fd1c5; color: #4fd1c5; }
.signal-hero .visual { position: relative; aspect-ratio: 1/.8; border: 1px solid #262b31; border-radius: 10px; overflow: hidden;
	background: radial-gradient(circle at 30% 20%, rgba(255,157,61,.09), transparent 55%), linear-gradient(180deg,#101317,#0b0d10); }
.signal-hero .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(#262b31 1px,transparent 1px),linear-gradient(90deg,#262b31 1px,transparent 1px); background-size: 28px 28px; opacity: .4; -webkit-mask-image: radial-gradient(circle at 50% 45%,black,transparent 75%); mask-image: radial-gradient(circle at 50% 45%,black,transparent 75%); }
.signal-hero .node { position: absolute; width: 10px; height: 10px; border-radius: 2px; background: #15181c; border: 1.5px solid #4fd1c5; }
.signal-hero .node.hub { background: #ff9d3d; border-color: #ff9d3d; width: 14px; height: 14px; box-shadow: 0 0 0 6px rgba(255,157,61,.12); }
.signal-hero .node-label { position: absolute; font-family: ui-monospace,monospace; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #9aa3ac; white-space: nowrap; }
.signal-hero .pulse-path { stroke: #4fd1c5; stroke-width: 1.4; fill: none; stroke-dasharray: 5 7; animation: signal-dashmove 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .signal-hero .pulse-path { animation: none; } }
@keyframes signal-dashmove { to { stroke-dashoffset: -120; } }
.signal-hero .readout { position: absolute; left: 16px; bottom: 16px; font-family: ui-monospace,monospace; font-size: 10.5px; color: #9aa3ac; letter-spacing: .03em; }
.signal-hero .readout b { color: #4fd1c5; font-weight: 600; }

.signal-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #262b31; border-bottom: 1px solid #262b31; }
.signal-stats .stat { background: #0b0d10; padding: 26px 32px; text-align: center; }
.signal-stats .stat .num { font-family: ui-monospace,monospace; font-size: 32px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.signal-stats .stat .num small { font-size: 16px; color: #9aa3ac; font-weight: 600; margin-left: 2px; }
.signal-stats .stat .label { font-family: ui-monospace,monospace; font-size: 11.5px; color: #9aa3ac; letter-spacing: .05em; text-transform: uppercase; margin-top: 6px; }

@media (max-width: 991px) {
	.signal-hero .container { grid-template-columns: 1fr; padding-top: 8px; }
	.signal-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer — "Signal Path"
   ============================================================ */
/* Pre-existing: footer links were #666 on #221f20 bg (2.85:1, fails WCAG AA). */
.footer-menu ul li a { color: #c9d3e0 !important; }
.rs-footer .footer-top .footer-menu ul li a:hover { color: #4fd1c5 !important; }
.footer-desc { color: #9aa3ac; }

.signal-footer { border-top: 1px solid transparent; border-image: linear-gradient(90deg, #ff9d3d, #4fd1c5) 1; }
.signal-footer .footer-title { position: relative; padding-bottom: 12px; }
.signal-footer .footer-title:after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: linear-gradient(90deg, #ff9d3d, #4fd1c5); }
.signal-footer address { font-style: normal; font-size: 13.5px; color: #c9d3e0; }
.signal-footer .social-links a { border-color: #262b31 !important; color: #c9d3e0 !important; }
.signal-footer .social-links a:hover { border-color: #4fd1c5 !important; color: #4fd1c5 !important; }
.signal-footer .footer-bottom { border-top: 1px solid #262b31; }