/* ==========================================================================
   Broadband — service page
   Reuses global tokens/classes from style.css (--blue, .eyebrow, .btn,
   .section, .accordion, .reveal) so this page matches the rest of the site.
   ========================================================================== */

/* Hero — brd H img.png (businessman/network graphic weighted left, open
   dark navy on the right) as a full-bleed background, with the heading/CTA
   block sitting in that open right side. Same treatment as the Internet
   Leased Line hero (see leased-line.css .ill-hero) — percentages below are
   relative to the full hero/viewport width, not a centred max-width
   wrapper, so the text stays clear of the graphic at every desktop size. */
.bb-hero {
	position: relative;
	overflow: hidden;
	background: #04143d;
	min-height: clamp(300px, 35vw, 580px);
	display: flex;
	align-items: center;
}
.bb-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
}
.bb-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 15, 46, 0) 38%, rgba(4, 15, 46, .68) 60%, rgba(4, 15, 46, .96) 78%, rgba(4, 15, 46, .97) 100%);
}
.bb-hero__container {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 48px 5vw;
}
.bb-hero__content { margin-left: 68%; max-width: 620px; }
.bb-hero .eyebrow { color: rgba(255,255,255,.75); }
.bb-hero h1 { color: var(--white); font-weight: 700; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.1; margin-bottom: 18px; }
.bb-hero__subhead { color: rgba(255,255,255,.88); font-size: 18px; line-height: 1.6; margin-bottom: 24px; }
.bb-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* "Why Cybronet" feature grid now lives in the shared
   templates/home/partials/feature_grid.php component, styled by
   feature-card.css (loaded alongside this file). */

.bb-plans {
	position: relative;
	overflow: hidden;
	background: radial-gradient(1100px 460px at 50% -10%, #EAF1FF 0%, #FFFFFF 65%);
}
.bb-plans::before {
	content: "";
	position: absolute;
	inset: -40px;
	z-index: 0;
	background-image: radial-gradient(#E3EAF8 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	mask-image: radial-gradient(closest-side, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 78%);
	animation: bbGridDrift 55s linear infinite;
	pointer-events: none;
}
.bb-plans .container { position: relative; z-index: 1; }
@keyframes bbGridDrift {
	from { background-position: 0 0; }
	to { background-position: 280px 280px; }
}
.bb-plans__teaser {
	position: relative;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	align-items: center;
	gap: 40px;
	background: linear-gradient(135deg, #04143d 0%, #0b2a6b 55%, #0050C7 100%);
	border-radius: var(--radius-lg);
	padding: 56px;
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba(4, 20, 61, .45);
}
.bb-plans__teaser::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .1) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	mask-image: radial-gradient(closest-side, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 75%);
	pointer-events: none;
}
.bb-plans__teaser-text { position: relative; z-index: 1; max-width: 560px; margin: 0; }
.bb-plans__teaser-text h2 { color: var(--white); }
.bb-plans__teaser-text p { color: rgba(255, 255, 255, .78); font-size: 16px; margin-bottom: 20px; }

.bb-plans__checks { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bb-plans__checks li {
	position: relative;
	padding-left: 28px;
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
}
.bb-plans__checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .32);
}
.bb-plans__checks li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	width: 8px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.bb-plans__teaser-price {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius-md);
	padding: 32px 28px;
	text-align: center;
	backdrop-filter: blur(6px);
}
.bb-plans__teaser-price-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.bb-plans__teaser-price-value { font-size: 44px; font-weight: 800; color: var(--white); line-height: 1; }
.bb-plans__teaser-price-value small { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .7); margin-left: 2px; }
.bb-plans__teaser-price-speed {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	background: rgba(255, 255, 255, .14);
	padding: 6px 14px;
	border-radius: 999px;
}

.bb-intro { background: var(--charcoal); padding: 88px 0; }
.bb-intro__inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.bb-intro__inner h2 { color: var(--white); font-size: 32px; }
.bb-intro__inner p { color: #C7CDDB; font-size: 16px; line-height: 1.75; }
.bb-intro__inner .btn { margin-top: 12px; }

.bb-tv {
	position: relative;
	overflow: hidden;
	text-align: center;
	background: #FBFBFE;
}
.bb-tv::before,
.bb-tv::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}
.bb-tv::before {
	width: 420px;
	height: 420px;
	top: -140px;
	left: 8%;
	background: rgba(0, 104, 255, .16);
	animation: bbBlobDrift 24s ease-in-out infinite;
}
.bb-tv::after {
	width: 380px;
	height: 380px;
	bottom: -160px;
	right: 10%;
	background: rgba(0, 80, 199, .16);
	animation: bbBlobDrift 24s ease-in-out infinite -12s;
}
.bb-tv .container { position: relative; z-index: 1; }
@keyframes bbBlobDrift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(24px, -16px) scale(1.08); }
}
.bb-tv h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
.bb-tv p { max-width: 640px; margin: 0 auto 28px; color: var(--gray-500); font-size: 16px; }

.bb-manage { background: var(--tint); }
.bb-manage__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 800px;
	margin: 40px auto 0;
}
.bb-manage__card {
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 30px 28px;
	text-align: center;
}
.bb-manage__card h3 { font-size: 19px; }
.bb-manage__card p { color: var(--gray-500); font-size: 14.5px; margin-bottom: 20px; }

/* Coverage CTA now reuses the site-global .cta-banner (same full-bleed
   background image/decoration as the home page) instead of a page-specific
   boxed card. */

@media (prefers-reduced-motion: reduce) {
	.bb-plans::before,
	.bb-tv::before,
	.bb-tv::after { animation: none; }
}

@media (max-width: 860px) {
	.bb-hero__img { object-position: 30% center; }
	.bb-hero__overlay { background: linear-gradient(180deg, rgba(4, 15, 46, .35) 0%, rgba(4, 15, 46, .88) 55%, #04143d 100%); }
	.bb-hero__container { padding: 56px 24px 40px; }
	.bb-hero__content { width: 100%; max-width: none; margin-left: 0; text-align: center; }
	.bb-hero .eyebrow { justify-content: center; }
	.bb-hero h1 { font-size: 30px; }
	.bb-hero__ctas { justify-content: center; }
	.bb-manage__grid { grid-template-columns: 1fr; }
	.bb-plans__card { overflow-x: auto; }
	.bb-plans__card table { min-width: 620px; }
	.bb-plans__teaser { grid-template-columns: 1fr; padding: 40px 28px; text-align: center; }
	.bb-plans__teaser-text { max-width: none; }
	.bb-plans__teaser-text .eyebrow { justify-content: center; }
	.bb-plans__checks { align-items: center; }
	.bb-plans__checks li { display: inline-block; text-align: left; }
}

/* ==========================================================================
   Desktop refinements (>=1024px only — the <=860px overrides above stay)
   Each block below was capped well inside its own section (720px / 640px),
   leaving dead margins beside the copy; the caps are widened to the section
   width so the text runs out to the same edges the cards and container use.
   ========================================================================== */
@media (min-width: 1024px) {
	.bb-hero h1 { font-size: clamp(42px, calc(4.4vw + 2px), 70px); }
	/* This h2 carries no explicit size; 26px is the 24px UA default + 2. */
	.bb-plans__teaser-text h2 { font-size: 26px; }

	.bb-intro__inner { max-width: 1180px; }
	.bb-intro__inner h2 { font-size: 38px; }
	.bb-intro__inner p { font-size: 18px; }

	.bb-tv h2 { max-width: none; font-size: 32px; }
	.bb-tv p { max-width: none; font-size: 18px; }

	.bb-manage .section-heading { max-width: 900px; }
	.bb-manage .section-heading h2 { font-size: 40px; }
	.bb-manage .section-heading p { font-size: 19px; }
	.bb-manage__card h3 { font-size: 21px; }
}