/* ==========================================================================
   Hero Carousel — Jio.com hero geometry/typography reference (1920x1080)
   Brand tokens: change these one-liners to retheme the whole carousel.
   ========================================================================== */
.hero-carousel {
	--brand-blue: #0068FF;
	--brand-magenta: #E22C7A;
	--brand-teal: #00B8A9;
	--hero-action-blue: #0068FF;
	--card-radius: 16px;
	--hero-transition-speed: 600ms;
	--slide-w: min(77vw, 1480px);
	--slide-h: clamp(460px, 60vh, 660px);
	/* Shared by the desktop and phone background rules below, so the two
	   only ever differ in which photo they point at. */
	--photo-scrim: linear-gradient(100deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .58) 42%, rgba(5, 7, 13, .18) 68%, rgba(5, 7, 13, .4) 100%);

	background: var(--tint, #F4F7FF);
	padding: 20px 0 56px;
	overflow: hidden;
	font-family: var(--font-manrope);
}

.hero-carousel__viewport {
	position: relative;
	width: 100%;
}

/* ==========================================================================
   Swiper wiring
   ========================================================================== */
.hero-swiper {
	width: 100%;
	height: var(--slide-h);
}
.hero-swiper .swiper-wrapper {
	height: 100%;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-swiper .swiper-slide {
	width: var(--slide-w);
	height: 100%;
	opacity: .85;
	transform: scale(.94);
	transition: opacity var(--hero-transition-speed) ease, transform var(--hero-transition-speed) ease;
}
.hero-swiper .swiper-slide-active {
	opacity: 1;
	transform: scale(1);
}

/* ==========================================================================
   Slide card
   ========================================================================== */
.hero-slide {
	position: relative;
	height: 100%;
	border-radius: var(--card-radius);
	overflow: hidden;
	color: #fff;
	cursor: grab;
}
.hero-slide--broadband { --slide-accent: var(--brand-blue); }
.hero-slide--entertainment { --slide-accent: var(--brand-magenta); }
.hero-slide--business { --slide-accent: var(--brand-teal); }

.hero-slide__bg {
	position: absolute;
	inset: 0;
	background: var(--photo-scrim), var(--photo) var(--photo-position, center)/cover no-repeat;
}

/* ==========================================================================
   Slide layout — two columns, 55% text / 45% visual
   ========================================================================== */
.hero-slide__inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: grid;
	grid-template-columns: 55% 45%;
	align-items: center;
	gap: 24px;
	padding: 0 64px;
}

.hero-chip {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	margin-bottom: 20px;
}

.hero-headline {
	font-size: clamp(36px, 2.7vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: #fff;
	max-width: 12ch;
	margin-bottom: 20px;
}

.hero-subtext {
	font-size: clamp(16px, 1.05vw, 20px);
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
	max-width: 46ch;
	margin-bottom: 28px;
}

.hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 9999px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background: var(--hero-action-blue);
	transition: transform 150ms ease, background 150ms ease;
	box-shadow: 0 12px 28px rgba(0, 104, 255, .35);
}
.hero-cta:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--hero-action-blue) 92%, black); }
.hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hero-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero-benefits li {
	position: relative;
	padding-left: 15px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .65);
}
.hero-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--slide-accent);
}

/* ==========================================================================
   Visual column — overlapping pricing cards (slides 1 & 2)
   ========================================================================== */
.hero-slide__visual { position: relative; height: 100%; }

.pricing-stack {
	position: relative;
	height: 100%;
	min-height: 380px;
	/* Fixed width so the tiles' left:0/right:0 percentages resolve against a
	   known size, independent of the outer grid column's actual resolved
	   width — that mismatch was what caused the center card to swallow most
	   of the left/right cards instead of just tucking behind their edges. */
	max-width: 460px;
	margin: 0 auto;
}

.price-tile {
	position: absolute;
	top: 50%;
	width: 172px;
	padding: 22px 18px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--brand-blue) 16%, rgba(255, 255, 255, .06));
	border: 1px solid color-mix(in srgb, var(--brand-blue) 40%, transparent);
	color: #fff;
	backdrop-filter: blur(8px);
}
.price-tile--left { left: 0; transform: translateY(-50%) scale(.88); opacity: .85; z-index: 1; }
.price-tile--right { right: 0; transform: translateY(-50%) scale(.88); opacity: .85; z-index: 1; }
.price-tile--center,
.price-tile--featured {
	left: 50%;
	width: 190px;
	transform: translate(-50%, -50%) scale(1.05);
	z-index: 2;
	background: linear-gradient(160deg, var(--brand-magenta), #7d0f47);
	border-color: rgba(255, 255, 255, .35);
	box-shadow: 0 26px 54px rgba(0, 0, 0, .45);
}

.price-tile__chip {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .04em;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	margin-bottom: 12px;
}
.price-tile--center .price-tile__chip,
.price-tile--featured .price-tile__chip {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: #111;
	white-space: nowrap;
	margin-bottom: 0;
}

.price-tile__amount { font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.price-tile__currency { font-size: 15px; vertical-align: top; margin-right: 1px; }
.price-tile__period { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.price-tile__speed { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }

.price-tile__features { margin-bottom: 18px; }
.price-tile__features li {
	position: relative;
	padding-left: 16px;
	font-size: 11.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}
.price-tile__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}

.price-tile__cta {
	display: block;
	text-align: center;
	padding: 9px 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	color: #111;
	font-weight: 700;
	font-size: 12.5px;
	transition: transform .15s ease, background .15s ease;
}
.price-tile__cta:hover { transform: translateY(-1px); background: #fff; }
.price-tile__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Controls — arrows + fraction pill, 24px inset, bottom-right of active slide
   ========================================================================== */
.hero-controls {
	position: absolute;
	bottom: 24px;
	right: max(24px, calc((100% - var(--slide-w)) / 2 + 24px));
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-radius: 9999px;
	padding: 8px 16px;
	box-shadow: 0 14px 32px rgba(9, 38, 122, .18);
}

.hero-arrow {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	color: #111;
	transition: color 150ms ease;
}
.hero-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.hero-arrow:hover { color: var(--hero-action-blue); }
.hero-arrow:focus-visible { outline: 2px solid var(--hero-action-blue); outline-offset: 2px; border-radius: 4px; }
.hero-arrow.swiper-button-disabled { opacity: .4; pointer-events: none; }

.hero-fraction {
	font-size: 15px;
	font-weight: 600;
	color: #111;
	min-width: 30px;
	text-align: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.hero-slide__inner { grid-template-columns: 1fr; padding: 40px; gap: 20px; }
	.hero-headline { max-width: 16ch; }
	.hero-subtext { max-width: 100%; }
	.pricing-stack { min-height: 300px; }
	.price-tile { width: 150px; padding: 16px 14px; }
	.price-tile--center, .price-tile--featured { width: 168px; }
}

@media (max-width: 767px) {
	.hero-carousel { padding: 16px 0 48px; --slide-w: 92vw; }
	.hero-swiper, .hero-swiper .swiper-slide { height: auto; }
	.hero-slide { min-height: 640px; }
	.hero-slide__inner { grid-template-columns: 1fr; padding: 32px 24px 88px; }
	.hero-headline { font-size: clamp(28px, 7vw, 36px); max-width: 100%; }
	/* No pricing cards on phones — a single tile can't carry the whole
	   line-up anyway, and the plans section below the carousel already
	   lists all of them. Slides 1 and 2 then match the two chip slides,
	   so the carousel keeps one height throughout. */
	.hero-slide__visual { display: none; }
	/* The desktop shots are wide landscapes; `cover` had to blow them up 2-4x
	   to fill this tall box, which is what showed as blocky, smeared photos
	   on phones. --photo-m is the same shot pre-composed at the phone's own
	   aspect ratio, so it renders about 1:1. Falls back to --photo. */
	.hero-slide__bg { background: var(--photo-scrim), var(--photo-m, var(--photo)) center/cover no-repeat; }

	.hero-controls { bottom: 16px; right: 16px; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hero-swiper .swiper-wrapper,
	.hero-swiper .swiper-slide,
	.hero-cta,
	.price-tile__cta,
	.hero-arrow {
		transition: none !important;
	}
}

/* Heading readability — +2px, desktop only (the <=767px clamp above is
   deliberately left untouched). calc() shifts the whole fluid curve by 2px
   rather than only its end stops. */
@media (min-width: 1024px) {
	.hero-headline { font-size: clamp(38px, calc(2.7vw + 2px), 54px); }
}