body {
	min-height: 100%;
	font-family: "Assistant", sans-serif;
	/* background-color: #e8e8f1; */
}

/* Slider */
.slider {
	margin-top: 10px;
	/* background-color: lightslategray; */
}

.carousel-item img {
	height: 420px;
}

.carousel h5 {
	font-family: "lora";
	color: #171717;
}

.carousel img {
	width: 100%;
	height: auto;
	max-height: 370px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.carousel p {
	font-weight: 200;
	color: #171717;
}

.slider-text {
	position: absolute;
	left: 10%;
	top: 30%;
	color: rgb(14, 1, 1);
}

.slider-text h3 {
	text-transform: uppercase;
	font-size: 400;
}

.slider-buttom {
	text-align: right;
}

.menu-bar {
	background-color: #3f4650;
}

.navbar-brand img {
	max-height: 40px;
}

.btn-navbar-right {
	margin-top: -15px !important;
	height: 70px;
	margin-bottom: -8px !important;
	margin-right: -30px !important;
	border-radius: 0;
}

.navbar-light .navbar-nav .nav-link {
	color: white;
}

.navbar-light .navbar-nav .nav-link.active {
	font-weight: bold;
	color: white !important;
}

.btn-login {
	background-color: #f81111;
	color: #fff;
	height: 100%px;
	margin-left: 15px;
}

.btn-login:hover {
	color: #fff;
	background-color: #48309c;
}

.section-profile .card {
	border-radius: 10px;
}

.section-profile .card h3 {
	margin-top: 10px;
	margin-left: 12px;
	margin-bottom: 10px;
}

.cards__item {
	display: flex;
	padding: 1rem;
}

@media (min-width: 40rem) {
	.cards__item {
		width: 50%;
	}
}

@media (min-width: 56rem) {
	.cards__item {
		width: 33.3333%;
	}
}

.layanan {
	margin-top: 20px;
	text-align: center;
}

.card {
	background-color: white;
	border-radius: 0.25rem;
	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* .card:hover .card__image {
	-webkit-filter: contrast(100%);
			filter: contrast(100%);
  } */
.card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem;
}

.card-header {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}

.card__image {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	/* -webkit-filter: contrast(70%); */
	/* filter: contrast(70%); */
	overflow: hidden;
	position: relative;
	transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
	/* transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); */
	/* transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); */
}

.card__image img {
	max-height: 100%;
	max-width: 100%;
}

@media (min-width: 40rem) {
	.card__image::before {
		padding-top: 66.6%;
	}
}

.card__title {
	color: #696969;
	font-size: 1rem;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.card__text {
	/* flex: 1 1 auto; */
	font-size: 16px;
	/*   line-height: 1.5; */
	margin-bottom: 0.55rem;
	margin-top: 0.5rem;
	min-height: 60px;
	height: 60px;
	max-height: 60px;
}

a.card__btn {
	font-size: 20px;
	border-radius: 5px;
	border: 1px solid #cccccc;
	background-color: #d65050;
	color: #fff;
	background-color: #3f4650;
	color: #000;
}

a.card__btn:hover {
	font-size: 20px;
	border-radius: 5px;
	border: 1px solid #cccccc;
	color: white;
}

.cards__about {
	width: 100%;
}

.footer {
	background-color: #535328;
	margin-top: 20px;
	text-align: center;
	color: white;
	padding: 20px;
}

/* Back Top */
.backTop {
	position: fixed;
	bottom: 0;
	left: 0;
	display: inline-block;
	padding: 1em;
	margin: 1em;
	background: #e8e8e8;
	border: 2px solid #2349b8;
}

/*# sourceMappingURL=main.css.map */

/* Modern public website */
:root {
	--ink: #10243e;
	--ink-soft: #5d6f83;
	--navy: #071b30;
	--navy-light: #0d2c4d;
	--sky: #1aa7ec;
	--sky-soft: #eaf7ff;
	--green: #20bf6b;
	--surface: #ffffff;
	--surface-muted: #f4f8fc;
	--line: #dfe8f1;
	--shadow-sm: 0 10px 35px rgba(7, 27, 48, 0.08);
	--shadow-lg: 0 28px 70px rgba(7, 27, 48, 0.16);
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--surface-muted);
	color: var(--ink);
	font-family: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Manrope", "Assistant", sans-serif;
}

.site-header {
	background: #fff;
	box-shadow: 0 1px 0 rgba(16, 36, 62, 0.08);
	position: relative;
	z-index: 1000;
}

.menu-bar {
	background: #fff;
}

.menu-bar .navbar {
	min-height: 76px;
}

.navbar-brand {
	display: flex;
	align-items: center;
	margin-right: 30px;
}

.navbar-brand .logo {
	display: block;
	height: auto;
	max-height: 44px;
	max-width: 130px;
	object-fit: contain;
}

.navbar-light .navbar-nav .nav-link {
	border-radius: 8px;
	color: #41566d;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 2px;
	padding: 10px 11px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
	background: #eff8fe;
	color: #087ebd !important;
}

.navbar-toggler {
	background: #f2f7fb;
	border: 1px solid #dce6ef;
	border-radius: 10px;
	padding: 7px 9px;
}

.nav-login-item {
	margin-left: 12px;
}

.btn-login,
.btn-login:not(:disabled):not(.disabled) {
	align-items: center;
	background: var(--brand-accent, #ef4444);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-accent, #ef4444) 25%, transparent);
	color: #fff;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	height: auto;
	letter-spacing: 0.03em;
	margin: 0;
	padding: 12px 17px;
}

.btn-login:hover,
.btn-login:focus {
	background: #c92323;
	color: #fff;
	transform: translateY(-1px);
}

.home-modern {
	background: var(--surface-muted);
	overflow: hidden;
}

.hero-section {
	background:
		radial-gradient(circle at 12% 15%, rgba(26, 167, 236, 0.17), transparent 25%),
		radial-gradient(circle at 85% 70%, rgba(32, 191, 107, 0.12), transparent 25%),
		linear-gradient(125deg, #06182b 0%, #0a2845 58%, #083556 100%);
	color: #fff;
	min-height: 590px;
	overflow: hidden;
	padding: 88px 0 118px;
	position: relative;
}

.hero-section::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
	background-size: 44px 44px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(to right, #000, transparent 85%);
	position: absolute;
}

/* Tepi bawah hero dulunya berhenti mendadak dari biru tua ke #f4f8fc.
   Karena .quick-section ditarik 65px ke atas, batas keras itu melintas tepat
   di tengah deretan kartu dan terbaca seperti garis error memotong halaman.
   Gradasi ini membuat peralihannya menyatu, jadi tidak ada garis lagi. */
.hero-section::after {
	background: linear-gradient(to bottom, rgba(244, 248, 252, 0) 0%, rgba(244, 248, 252, 0.55) 55%, var(--surface-muted) 100%);
	bottom: 0;
	content: "";
	height: 165px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 1;
}

.hero-container {
	position: relative;
	z-index: 2;
}

.hero-glow {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	position: absolute;
}

.hero-glow--one {
	height: 440px;
	right: -180px;
	top: -160px;
	width: 440px;
}

.hero-glow--two {
	bottom: -300px;
	height: 620px;
	left: 28%;
	width: 620px;
}

.eyebrow,
.section-kicker {
	align-items: center;
	color: #77d3ff;
	display: flex;
	font-size: 13px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eyebrow span {
	background: #39c47b;
	border-radius: 999px;
	box-shadow: 0 0 0 6px rgba(57, 196, 123, 0.12);
	height: 7px;
	width: 7px;
}

.hero-copy h1 {
	font-size: clamp(46px, 5vw, 68px);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.06;
	margin: 20px 0 24px;
	max-width: 720px;
	overflow-wrap: break-word;
}

.hero-copy,
.hero-visual-wrap {
	min-width: 0;
}

.hero-copy h1 span {
	background: linear-gradient(90deg, #45c8ff, #67e8a7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-lead {
	color: #c6d5e4;
	font-size: 19px;
	line-height: 1.7;
	max-width: 650px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.hero-btn {
	align-items: center;
	border-radius: 12px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	min-height: 52px;
	padding: 13px 21px;
	transition: all 0.2s ease;
}

.hero-btn--primary {
	background: #fff;
	border: 1px solid #fff;
	color: #0a3456;
}

.hero-btn--primary:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
	color: #0a3456;
	transform: translateY(-2px);
}

.hero-btn--ghost {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
}

.hero-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 28px;
}

.hero-points span {
	color: #adc1d3;
	font-size: 13px;
	font-weight: 600;
}

.hero-points i {
	color: #5ee39f;
	margin-right: 5px;
}

.hero-visual-wrap {
	padding-left: 44px;
}

.hero-visual {
	background:
		radial-gradient(circle at 50% 45%, rgba(30, 171, 237, 0.28), transparent 36%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 34px;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.26);
	height: 390px;
	position: relative;
	transform: rotate(2deg);
}

.hero-visual--image {
	background-position: center !important;
	background-size: cover !important;
}

.signal-orbit {
	border: 1px solid rgba(98, 210, 255, 0.25);
	border-radius: 50%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.signal-orbit--outer {
	height: 270px;
	width: 270px;
}

.signal-orbit--inner {
	height: 180px;
	width: 180px;
}

.wifi-core {
	align-items: center;
	background: linear-gradient(145deg, #35bfff, #138ac6);
	border: 9px solid rgba(255, 255, 255, 0.12);
	border-radius: 30px;
	box-shadow: 0 20px 50px rgba(21, 155, 218, 0.36);
	display: flex;
	font-size: 50px;
	height: 126px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-2deg);
	width: 126px;
}

.floating-card {
	align-items: center;
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 14px;
	box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
	color: var(--ink);
	display: flex;
	gap: 11px;
	padding: 13px 15px;
	position: absolute;
	transform: rotate(-2deg);
}

.floating-card small,
.floating-card strong {
	display: block;
}

.floating-card small {
	color: #718297;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.floating-card strong {
	font-size: 14px;
	line-height: 1.25;
}

.floating-card--status {
	right: -25px;
	top: 38px;
}

.floating-card--location {
	bottom: 34px;
	left: -30px;
	max-width: 220px;
}

.floating-card--location > i {
	align-items: center;
	background: #e9f8ff;
	border-radius: 10px;
	color: var(--sky);
	display: flex;
	height: 38px;
	justify-content: center;
	min-width: 38px;
}

.status-dot {
	background: #28c97b;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(40, 201, 123, 0.14);
	height: 9px;
	width: 9px;
}

.quick-section {
	margin-top: -65px;
	padding-bottom: 78px;
	position: relative;
	z-index: 5;
}

.quick-grid {
	/* align-items: stretch supaya ketiga kartu sama tinggi walau isinya beda
	   panjang - sebelumnya kartu tagihan menonjol beberapa piksel dari dua
	   kartu di sebelahnya sehingga barisnya terlihat tidak rata. */
	align-items: stretch;
	display: grid;
	gap: 16px;
	grid-template-columns: 1.85fr 1fr 1fr;
}

.quick-card {
	align-items: flex-start;
	background: #fff;
	border: 1px solid rgba(223, 232, 241, 0.85);
	border-radius: 18px;
	box-shadow: var(--shadow-lg);
	color: var(--ink);
	display: flex;
	gap: 15px;
	height: 100%;
	min-height: 176px;
	padding: 25px;
	position: relative;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.quick-card--link:hover {
	box-shadow: 0 24px 55px rgba(7, 27, 48, 0.14);
	color: var(--ink);
	text-decoration: none;
	transform: translateY(-4px);
}

.quick-icon {
	align-items: center;
	background: #eaf9f2;
	border-radius: 13px;
	color: #17a85c;
	display: flex;
	font-size: 20px;
	height: 48px;
	justify-content: center;
	min-width: 48px;
}

.quick-icon--blue {
	background: #eaf7ff;
	color: #139ad9;
}

.quick-icon--orange {
	background: #fff2e8;
	color: #ef812c;
}

.quick-content {
	min-width: 0;
	width: 100%;
}

.quick-label {
	color: #8190a0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.quick-card h2,
.quick-card h3 {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 4px 0 6px;
}

/* Dua kartu pintasan jauh lebih sempit daripada kartu tagihan. Pada 21px
   judul "Lapor gangguan" pecah jadi dua baris sehingga keterangannya turun
   dan tidak sejajar dengan kartu Speedtest di sebelahnya. */
.quick-card--link h3 {
	font-size: 19px;
}

.quick-card p {
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
}

/* Sisakan ruang untuk panah di pojok kanan bawah supaya teks tidak pernah
   menabraknya. Hanya kartu pintasan yang punya panah. */
.quick-card--link p {
	padding-bottom: 20px;
}

.bill-form {
	display: flex;
	gap: 8px;
	margin-top: 15px;
}

.bill-form .form-control {
	background: #f7fafc;
	border: 1px solid #dce6ef;
	border-radius: 10px;
	box-shadow: none;
	font-size: 14px;
	height: 45px;
	padding: 10px 13px;
}

.bill-form .form-control:focus {
	background: #fff;
	border-color: #4fbce9;
	box-shadow: 0 0 0 3px rgba(30, 167, 231, 0.12);
}

.bill-form .btn {
	background: var(--navy-light);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	padding: 9px 16px;
	white-space: nowrap;
}

.bill-form .btn:hover {
	background: #12497a;
}

.quick-arrow {
	bottom: 24px;
	color: #a9b7c5;
	position: absolute;
	right: 24px;
}

.bill-loading {
	align-items: center;
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	display: flex;
	font-weight: 700;
	gap: 10px;
	margin-top: 16px;
	padding: 16px;
}

.bill-loading .spinner-border {
	color: var(--sky);
	height: 1.4rem;
	width: 1.4rem;
}

.view_data > .container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.services-section {
	background: #fff;
	padding: 92px 0 104px;
}

.section-heading {
	align-items: end;
	display: grid;
	gap: 50px;
	grid-template-columns: 1.4fr 0.8fr;
	margin-bottom: 44px;
}

.section-kicker {
	color: #1097d5;
	margin-bottom: 10px;
}

.section-heading h2,
.benefit-intro h2 {
	color: var(--ink);
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.15;
	margin: 0;
}

.section-heading p {
	color: var(--ink-soft);
	font-size: 17px;
	line-height: 1.65;
	margin: 0;
}

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

.service-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 8px 25px rgba(7, 27, 48, 0.045);
	display: flex;
	flex-direction: column;
	min-height: 320px;
	overflow: hidden;
	padding: 28px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
	border-color: #b9def0;
	box-shadow: 0 22px 45px rgba(7, 27, 48, 0.1);
	transform: translateY(-7px);
}

.service-card--featured {
	background: linear-gradient(150deg, #0b2946, #0c3b61);
	border-color: transparent;
	color: #fff;
}

.service-card--featured h3,
.service-card--featured a {
	color: #fff;
}

.service-card.service-card--featured p,
.service-card--featured .service-number {
	color: #c6d8e6;
}

.service-top {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 42px;
}

.service-number {
	color: #95a4b3;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.service-icon {
	align-items: center;
	background: var(--sky-soft);
	border-radius: 14px;
	color: #1298d8;
	display: flex;
	font-size: 22px;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.service-card--featured .service-icon {
	background: rgba(255, 255, 255, 0.1);
	color: #63d1ff;
}

.service-card h3 {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 12px;
}

.service-card p {
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 28px;
}

.service-card a {
	color: #087fba;
	font-size: 14px;
	font-weight: 800;
	margin-top: auto;
}

.service-card.service-card--featured a {
	color: #65d4ff;
}

.service-card a i {
	font-size: 11px;
	margin-left: 6px;
	transition: transform 0.2s ease;
}

.service-card a:hover {
	text-decoration: none;
}

.service-card a:hover i {
	transform: translateX(4px);
}

.service-card--product {
	padding: 0;
}

.service-image {
	background: #eef3f7;
	height: 190px;
	overflow: hidden;
}

.service-image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	width: 100%;
}

.service-card--product:hover .service-image img {
	transform: scale(1.04);
}

.service-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 25px;
}

.benefit-section {
	background: #f0f6fa;
	padding: 100px 0;
}

.benefit-panel {
	align-items: center;
	background: #fff;
	border: 1px solid rgba(221, 232, 240, 0.9);
	border-radius: 28px;
	box-shadow: var(--shadow-sm);
	display: grid;
	gap: 70px;
	grid-template-columns: 0.9fr 1.1fr;
	padding: 58px;
}

.benefit-list {
	display: grid;
	gap: 28px 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.benefit-item {
	display: flex;
	gap: 13px;
}

.benefit-item > i {
	align-items: center;
	background: #eaf7ff;
	border-radius: 11px;
	color: #1099da;
	display: flex;
	height: 42px;
	justify-content: center;
	min-width: 42px;
}

.benefit-item strong,
.benefit-item span {
	display: block;
}

.benefit-item strong {
	font-size: 15px;
	margin-bottom: 4px;
}

.benefit-item span {
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.45;
}

.home-cta-section {
	background: #f0f6fa;
	padding: 0 0 100px;
}

.home-cta {
	align-items: center;
	background:
		radial-gradient(circle at 85% -50%, rgba(99, 209, 255, 0.28), transparent 50%),
		linear-gradient(120deg, #09233d, #0b426c);
	border-radius: 25px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	padding: 44px 50px;
	position: relative;
}

.home-cta span {
	color: #69d3ff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.home-cta h2 {
	font-size: 29px;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 7px 0 0;
	max-width: 600px;
}

.home-cta-actions {
	display: flex;
	gap: 10px;
	margin-left: 30px;
}

.home-cta .btn {
	background: #24aaeb;
	border: 1px solid #24aaeb;
	border-radius: 11px;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	padding: 12px 18px;
	white-space: nowrap;
}

.home-cta .btn-light {
	background: #fff;
	border-color: #fff;
	color: #0b3151;
}

.footer {
	background: #06182b;
	color: #fff;
	margin-top: 0;
	padding: 54px 0 24px;
	text-align: left;
}

.footer-grid {
	align-items: center;
	display: grid;
	gap: 35px;
	grid-template-columns: 1.1fr 1.4fr 0.7fr;
	padding-bottom: 35px;
}

.footer-brand img {
	background: #fff;
	border-radius: 8px;
	max-height: 44px;
	max-width: 135px;
	object-fit: contain;
	padding: 4px;
}

.footer-brand p {
	color: #91a7ba;
	font-size: 14px;
	margin: 12px 0 0;
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.footer-contact span,
.footer-contact a,
.footer-actions a {
	color: #afc0cf;
	font-size: 14px;
}

.footer-contact i {
	color: #4dc7ff;
	margin-right: 8px;
	width: 16px;
}

.footer-actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.footer-contact a:hover,
.footer-actions a:hover {
	color: #fff;
	text-decoration: none;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	color: #71889b;
	display: flex;
	font-size: 12px;
	justify-content: space-between;
	padding-top: 22px;
}

.modal-content {
	border: 0;
	border-radius: 18px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.modal-header,
.modal-footer {
	border-color: #e7eef4;
}

.modal-title {
	font-weight: 800;
}

@media (max-width: 1199.98px) {
	.navbar-light .navbar-nav .nav-link {
		font-size: 13px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.hero-visual-wrap {
		padding-left: 25px;
	}

	.floating-card--status {
		right: -8px;
	}

	.floating-card--location {
		left: -12px;
	}

	.quick-card {
		padding: 21px;
	}
}

@media (max-width: 991.98px) {
	.menu-bar .navbar {
		min-height: 68px;
	}

	.navbar-collapse {
		border-top: 1px solid #e7eef4;
		margin-top: 12px;
		padding: 14px 0 18px;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 14px;
		margin: 2px 0;
		padding: 10px 12px;
		width: 100%;
	}

	.nav-login-item {
		margin: 9px 0 0;
		width: 100%;
	}

	.btn-login {
		justify-content: center;
		width: 100%;
	}

	.hero-section {
		padding: 70px 0 125px;
	}

	.hero-visual-wrap {
		margin-top: 60px;
		padding-left: 15px;
	}

	.hero-visual {
		margin: 0 auto;
		max-width: 520px;
	}

	.quick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.quick-card--bill {
		grid-column: 1 / -1;
	}

	.section-heading,
	.benefit-panel {
		gap: 32px;
		grid-template-columns: 1fr;
	}

	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.benefit-panel {
		padding: 42px;
	}

	.home-cta {
		align-items: flex-start;
		flex-direction: column;
	}

	.home-cta-actions {
		margin: 25px 0 0;
	}

	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-actions {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767.98px) {
	.hero-section {
		min-height: auto;
		padding-top: 55px;
	}

	.hero-copy h1 {
		font-size: 42px;
	}

	.hero-lead {
		font-size: 17px;
	}

	.hero-visual {
		height: 330px;
	}

	.quick-grid,
	.service-grid,
	.benefit-list {
		grid-template-columns: 1fr;
	}

	.quick-card--bill {
		grid-column: auto;
	}

	.section-heading {
		margin-bottom: 32px;
	}

	.services-section,
	.benefit-section {
		padding: 72px 0;
	}

	.benefit-panel {
		padding: 32px 26px;
	}

	.home-cta-section {
		padding-bottom: 72px;
	}

	.home-cta {
		padding: 34px 28px;
	}

	.home-cta h2 {
		font-size: 25px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-actions {
		grid-column: auto;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 7px;
	}
}

@media (max-width: 575.98px) {
	.navbar-brand .logo {
		max-height: 38px;
		max-width: 112px;
	}

	.hero-copy h1 {
		font-size: 36px;
	}

	.hero-actions,
	.hero-actions .btn {
		width: 100%;
	}

	.hero-points {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.hero-visual {
		height: 285px;
		max-width: 100%;
	}

	.signal-orbit--outer {
		height: 220px;
		width: 220px;
	}

	.signal-orbit--inner {
		height: 150px;
		width: 150px;
	}

	.wifi-core {
		font-size: 38px;
		height: 100px;
		width: 100px;
	}

	.floating-card--status {
		right: 8px;
		top: 19px;
		max-width: calc(100% - 16px);
	}

	.floating-card--location {
		bottom: 18px;
		left: 8px;
	}

	.quick-card {
		min-height: 0;
		padding: 21px 18px;
	}

	.quick-card--bill {
		flex-direction: column;
	}

	.bill-form {
		flex-direction: column;
	}

	.bill-form .btn {
		height: 45px;
	}

	.section-heading h2,
	.benefit-intro h2 {
		font-size: 31px;
	}

	.service-card {
		min-height: 290px;
	}

	.home-cta-actions,
	.home-cta-actions .btn {
		width: 100%;
	}

	.home-cta-actions {
		flex-direction: column;
	}
}

/* Professional Speedtest page */
.speedtest-page {
	background: #f2f7fb;
	overflow: hidden;
}

.speedtest-hero {
	background:
		radial-gradient(circle at 84% 25%, rgba(30, 182, 255, 0.17), transparent 27%),
		radial-gradient(circle at 10% 90%, rgba(43, 218, 139, 0.1), transparent 28%),
		linear-gradient(125deg, #06182b 0%, #092b49 62%, #073d61 100%);
	color: #fff;
	min-height: 680px;
	overflow: hidden;
	padding: 32px 0 94px;
	position: relative;
}

.speedtest-grid-pattern {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 46px 46px;
	inset: 0;
	mask-image: linear-gradient(120deg, #000, transparent 92%);
	position: absolute;
}

.speedtest-breadcrumb {
	align-items: center;
	color: #7f9bb1;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	gap: 9px;
	margin-bottom: 52px;
}

.speedtest-breadcrumb a {
	color: #86d9ff;
}

.speedtest-breadcrumb a:hover {
	color: #fff;
	text-decoration: none;
}

.speedtest-breadcrumb i {
	font-size: 8px;
}

.speedtest-copy {
	padding-right: 55px;
}

.speedtest-kicker {
	align-items: center;
	color: #71d7ff;
	display: flex;
	font-size: 12px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.network-status-dot,
.console-live-dot {
	background: #37d98c;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(55, 217, 140, 0.12);
	display: inline-block;
	height: 8px;
	width: 8px;
}

.network-status-dot.is-offline {
	background: #f06a67;
	box-shadow: 0 0 0 6px rgba(240, 106, 103, 0.12);
}

.speedtest-copy h1 {
	font-size: clamp(45px, 5vw, 66px);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.06;
	margin: 19px 0 22px;
}

.speedtest-copy > p {
	color: #c3d4e3;
	font-size: 18px;
	line-height: 1.7;
	margin: 0;
	max-width: 610px;
}

.speedtest-primary-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 32px;
}

.speedtest-launch-btn {
	align-items: center;
	background: linear-gradient(135deg, #24afea, #168fd0);
	border: 0;
	border-radius: 13px;
	box-shadow: 0 16px 35px rgba(24, 154, 214, 0.32);
	color: #fff;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	gap: 11px;
	min-height: 54px;
	padding: 13px 21px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.speedtest-launch-btn:hover,
.speedtest-launch-btn:focus {
	box-shadow: 0 20px 42px rgba(24, 154, 214, 0.42);
	color: #fff;
	transform: translateY(-2px);
}

.speedtest-launch-btn.is-disabled {
	cursor: not-allowed;
	filter: grayscale(0.8);
	opacity: 0.65;
}

.speedtest-launch-btn > i:first-child {
	align-items: center;
	background: rgba(255, 255, 255, 0.17);
	border-radius: 50%;
	display: flex;
	font-size: 9px;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.launch-external {
	font-size: 11px;
	opacity: 0.75;
}

.speedtest-guide-link {
	color: #d6e7f4;
	font-size: 14px;
	font-weight: 800;
}

.speedtest-guide-link i {
	font-size: 10px;
	margin-left: 6px;
}

.speedtest-guide-link:hover {
	color: #fff;
	text-decoration: none;
}

.speedtest-note {
	align-items: flex-start;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	color: #9db4c8;
	display: flex;
	font-size: 12px;
	gap: 10px;
	line-height: 1.5;
	margin-top: 26px;
	max-width: 510px;
	padding: 12px 14px;
}

.speedtest-note i {
	color: #62d7a0;
	margin-top: 2px;
}

.speedtest-note strong {
	color: #cfe3f2;
}

.speedtest-console {
	background:
		radial-gradient(circle at 50% 45%, rgba(21, 173, 235, 0.16), transparent 34%),
		linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 26px;
	box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
	min-height: 480px;
	padding: 22px 25px 20px;
	position: relative;
}

.console-topbar {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	color: #8da7ba;
	display: flex;
	font-size: 9px;
	font-weight: 800;
	justify-content: space-between;
	letter-spacing: 0.12em;
	padding-bottom: 17px;
}

.console-topbar > div {
	align-items: center;
	display: flex;
	gap: 9px;
}

.console-live-dot {
	box-shadow: 0 0 0 4px rgba(55, 217, 140, 0.1);
	height: 6px;
	width: 6px;
}

.speed-gauge {
	height: 275px;
	margin: 7px auto 0;
	position: relative;
	width: 330px;
}

.gauge-ring {
	border-radius: 50%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.gauge-ring--outer {
	background: conic-gradient(from 225deg, #1eabe9 0 24%, #41d8a0 24% 39%, rgba(255, 255, 255, 0.07) 39% 75%, transparent 75% 100%);
	height: 245px;
	mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
	width: 245px;
}

.gauge-ring--inner {
	border: 1px solid rgba(101, 204, 247, 0.15);
	height: 190px;
	width: 190px;
}

.gauge-ticks {
	background: repeating-conic-gradient(from 225deg, rgba(255, 255, 255, 0.24) 0 1deg, transparent 1deg 9deg);
	border-radius: 50%;
	height: 215px;
	left: 50%;
	mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
	opacity: 0.5;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 215px;
}

.gauge-go {
	align-items: center;
	background: linear-gradient(145deg, #28b8f2, #137ebc);
	border: 8px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	box-shadow: 0 18px 50px rgba(20, 150, 214, 0.38);
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 130px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	width: 130px;
}

.gauge-go:hover {
	box-shadow: 0 24px 60px rgba(20, 150, 214, 0.5);
	color: #fff;
	text-decoration: none;
	transform: translate(-50%, -50%) scale(1.04);
}

.gauge-go span {
	font-family: "Manrope", sans-serif;
	font-size: 37px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.gauge-go small {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.13em;
	margin-top: 7px;
}

.console-metrics {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.console-metrics > div {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 11px 10px;
}

.console-metrics i {
	color: #51c9fb;
	font-size: 10px;
	margin-right: 4px;
}

.console-metrics span {
	color: #829caf;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
}

.console-metrics strong {
	display: block;
	font-size: 17px;
	margin-top: 4px;
}

.console-metrics strong small {
	color: #829caf;
	font-size: 9px;
	font-weight: 600;
}

.console-provider {
	align-items: center;
	color: #7590a4;
	display: flex;
	font-size: 10px;
	gap: 7px;
	justify-content: center;
	margin-top: 14px;
}

.console-provider i {
	color: #31c789;
}

.speedtest-prep {
	background: #fff;
	padding: 94px 0 104px;
}

.speedtest-section-heading {
	align-items: end;
	display: grid;
	gap: 50px;
	grid-template-columns: 1.35fr 0.8fr;
	margin-bottom: 43px;
}

.speedtest-section-heading > div > span,
.metric-guide-kicker {
	color: #0c99d8;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.speedtest-section-heading h2,
.metric-guide-copy h2 {
	color: var(--ink);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.16;
	margin: 9px 0 0;
}

.speedtest-section-heading > p {
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
}

.prep-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prep-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 19px;
	box-shadow: 0 10px 30px rgba(7, 27, 48, 0.045);
	min-height: 300px;
	padding: 27px;
	position: relative;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.prep-card:hover {
	box-shadow: 0 22px 48px rgba(7, 27, 48, 0.1);
	transform: translateY(-5px);
}

.prep-card--featured {
	background: linear-gradient(145deg, #0a2946, #0b3c63);
	border-color: transparent;
	color: #fff;
}

.prep-number {
	color: #95a5b5;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.prep-icon {
	align-items: center;
	background: #eaf7ff;
	border-radius: 13px;
	color: #109ad9;
	display: flex;
	font-size: 21px;
	height: 52px;
	justify-content: center;
	margin: 34px 0 28px;
	width: 52px;
}

.prep-card--featured .prep-icon {
	background: rgba(255, 255, 255, 0.1);
	color: #61d4ff;
}

.prep-card h3 {
	font-size: 21px;
	font-weight: 800;
	margin-bottom: 11px;
}

.prep-card p {
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.62;
	margin: 0;
}

.prep-card.prep-card--featured p,
.prep-card--featured .prep-number {
	color: #c3d5e3;
}

.metric-guide-section {
	background: #eff6fa;
	padding: 100px 0;
}

.metric-guide-panel {
	align-items: center;
	background: #fff;
	border: 1px solid #dfe9f1;
	border-radius: 26px;
	box-shadow: var(--shadow-sm);
	display: grid;
	gap: 70px;
	grid-template-columns: 0.85fr 1.15fr;
	padding: 58px;
}

.metric-guide-copy > p {
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.65;
	margin: 18px 0 24px;
}

.metric-guide-copy > a {
	color: #078bc9;
	font-size: 14px;
	font-weight: 800;
}

.metric-guide-copy > a i {
	font-size: 10px;
	margin-left: 6px;
}

.metric-guide-copy > a:hover {
	text-decoration: none;
}

.metric-guide-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.metric-guide-item {
	align-items: center;
	background: #f7fafc;
	border: 1px solid #e3ebf2;
	border-radius: 14px;
	display: flex;
	gap: 15px;
	padding: 17px;
}

.metric-symbol {
	align-items: center;
	border-radius: 11px;
	display: flex;
	height: 43px;
	justify-content: center;
	min-width: 43px;
}

.metric-symbol--ping {
	background: #fff0e6;
	color: #ef842f;
}

.metric-symbol--down {
	background: #e8f7ff;
	color: #159bd9;
}

.metric-symbol--up {
	background: #e9f9f1;
	color: #20ad68;
}

.metric-guide-item strong,
.metric-guide-item span {
	display: block;
}

.metric-guide-item strong {
	font-size: 15px;
	margin-bottom: 3px;
}

.metric-guide-item span {
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.45;
}

.speedtest-support-section {
	background: #eff6fa;
	padding: 0 0 100px;
}

.speedtest-support {
	align-items: center;
	background: linear-gradient(120deg, #09243e, #0b4773);
	border-radius: 23px;
	color: #fff;
	display: grid;
	gap: 22px;
	grid-template-columns: auto 1fr auto;
	padding: 37px 42px;
}

.support-icon {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	color: #63d4ff;
	display: flex;
	font-size: 23px;
	height: 58px;
	justify-content: center;
	width: 58px;
}

.speedtest-support span {
	color: #62cef9;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.speedtest-support h2 {
	font-size: 22px;
	font-weight: 800;
	margin: 5px 0 0;
}

.speedtest-support .btn {
	background: #fff;
	border-radius: 11px;
	color: #0a3151;
	font-size: 14px;
	font-weight: 800;
	padding: 12px 18px;
	white-space: nowrap;
}

.speedtest-support .btn i {
	color: #20b36a;
	margin-right: 6px;
}

@media (max-width: 991.98px) {
	.speedtest-hero {
		padding-bottom: 80px;
	}

	.speedtest-copy {
		padding-right: 15px;
	}

	.speedtest-console {
		margin: 58px auto 0;
		max-width: 560px;
	}

	.speedtest-section-heading,
	.metric-guide-panel {
		gap: 32px;
		grid-template-columns: 1fr;
	}

	.metric-guide-panel {
		padding: 42px;
	}

	.speedtest-support {
		grid-template-columns: auto 1fr;
	}

	.speedtest-support .btn {
		grid-column: 1 / -1;
		text-align: center;
	}
}

@media (max-width: 767.98px) {
	.speedtest-hero {
		padding-top: 24px;
	}

	.speedtest-breadcrumb {
		margin-bottom: 40px;
	}

	.speedtest-copy h1 {
		font-size: 42px;
	}

	.prep-grid {
		grid-template-columns: 1fr;
	}

	.prep-card {
		min-height: 0;
	}

	.speedtest-prep,
	.metric-guide-section {
		padding: 72px 0;
	}

	.speedtest-support-section {
		padding-bottom: 72px;
	}

	.metric-guide-panel {
		padding: 32px 26px;
	}

	.speedtest-support {
		padding: 30px 27px;
	}
}

@media (max-width: 575.98px) {
	.speedtest-copy h1 {
		font-size: 36px;
	}

	.speedtest-copy > p {
		font-size: 16px;
	}

	.speedtest-primary-actions,
	.speedtest-primary-actions .speedtest-launch-btn {
		width: 100%;
	}

	.speedtest-launch-btn {
		justify-content: center;
	}

	.speedtest-guide-link {
		margin: 0 auto;
	}

	.speedtest-console {
		min-height: 440px;
		padding: 20px 15px 17px;
	}

	.speed-gauge {
		height: 250px;
		max-width: 100%;
		width: 290px;
	}

	.gauge-ring--outer {
		height: 220px;
		width: 220px;
	}

	.gauge-ticks {
		height: 190px;
		width: 190px;
	}

	.gauge-ring--inner {
		height: 165px;
		width: 165px;
	}

	.gauge-go {
		height: 114px;
		width: 114px;
	}

	.gauge-go span {
		font-size: 32px;
	}

	.console-metrics strong {
		font-size: 14px;
	}

	.console-metrics strong small {
		display: block;
	}

	.speedtest-section-heading h2,
	.metric-guide-copy h2 {
		font-size: 31px;
	}

	.speedtest-support {
		align-items: flex-start;
		grid-template-columns: 1fr;
	}

	.speedtest-support .btn {
		grid-column: auto;
	}
}