/* =========================================================
   IPA VOICE HERO
   Full-width background with the content boxed in the centre.
   Layout reacts to the box width (container queries), so it
   works in boxed and full-width Elementor sections.
   ========================================================= */
.elementor-widget-ipa_vo_hero {
	width: 100%;
}

.ipvoice {
	container-type: inline-size;
	width: 100%;
}

.ipvoice-hero {
	--ipv-red: #ed151c;
	--ipv-red-dark: #d80c13;
	--ipv-purple: #32115d;
	--ipv-black: #0c0c0e;
	--ipv-text: #25262b;
	--ipv-line: #e6e7e9;
	--ipv-card-border: #eceeef;

	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 26px 20px 22px;
	overflow: hidden;
	color: var(--ipv-black);
	background: linear-gradient(135deg, #fafafa 0%, #f4f4f4 100%);
	font-family: inherit;
	box-sizing: border-box;
}

.ipvoice-hero *,
.ipvoice-hero *::before,
.ipvoice-hero *::after {
	box-sizing: border-box;
}

/* Boxed content: follows the Elementor container width unless "Content Width" is set.
   Top padding keeps the content clear of the floating IPA header ("Space for Header"). */
.ipvoice-inner {
	container-type: inline-size;
	width: 100%;
	max-width: var(--content-width, 1090px);
	margin: 0 auto;
	padding-top: 90px;
}

/* =========================================================
   GRID
   ========================================================= */
.ipvoice-top {
	--ipv-globe-size: 270px;
	--ipv-sim-scale: 0.78;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"copy"
		"scene"
		"benefits";
	row-gap: 28px;
}

.ipvoice-copy {
	position: relative;
	z-index: 3;
	grid-area: copy;
}

.ipvoice-scene {
	grid-area: scene;
}

.ipvoice-benefits {
	grid-area: benefits;
}

/* =========================================================
   COPY
   ========================================================= */
.ipvoice-hero .ipvoice-eyebrow {
	margin: 0 0 16px;
	color: var(--ipv-red);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ipvoice-hero .ipvoice-title {
	margin: 0 0 20px;
	color: var(--ipv-black);
	font-family: inherit;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-transform: none;
}

.ipvoice-hero .ipvoice-logo {
	margin-bottom: 24px;
	line-height: 0;
}

.ipvoice-logo img {
	display: block;
	width: 260px;
	max-width: 100%;
	height: auto;
}

.ipvoice-hero .ipvoice-intro {
	max-width: 740px;
	margin: 0;
	color: var(--ipv-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
}

/* =========================================================
   ACTIONS
   ========================================================= */
.ipvoice-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: 28px;
}

.ipvoice-hero .ipvoice-button {
	display: inline-flex;
	min-height: 58px;
	padding: 18px 30px;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--ipv-red);
	border-radius: 10px;
	box-shadow: 0 9px 24px rgba(237, 21, 28, 0.18);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ipvoice-hero .ipvoice-button:hover,
.ipvoice-hero .ipvoice-button:focus-visible {
	color: #fff;
	background: var(--ipv-red-dark);
	box-shadow: 0 13px 28px rgba(237, 21, 28, 0.26);
	transform: translateY(-3px);
}

.ipvoice-hero .ipvoice-link {
	position: relative;
	align-self: flex-start;
	padding: 12px 0;
	color: var(--ipv-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.ipvoice-hero .ipvoice-link:hover,
.ipvoice-hero .ipvoice-link:focus-visible {
	color: var(--ipv-black);
}

.ipvoice-hero .ipvoice-link::after {
	position: absolute;
	right: 0;
	bottom: 5px;
	left: 0;
	height: 2px;
	background: currentColor;
	content: "";
	transform-origin: left;
	transition: transform 0.25s ease;
}

.ipvoice-hero .ipvoice-link:hover::after,
.ipvoice-hero .ipvoice-link:focus-visible::after {
	transform: scaleX(0.55);
}

.ipvoice-hero .ipvoice-button:focus-visible,
.ipvoice-hero .ipvoice-link:focus-visible {
	outline: 2px solid var(--ipv-red);
	outline-offset: 4px;
}

/* =========================================================
   SCENE: GLOBE
   ========================================================= */
.ipvoice-scene {
	position: relative;
	height: 290px;
}

.ipvoice-globe {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: var(--ipv-globe-size);
	max-width: 100%;
	aspect-ratio: 1;
	margin: 0 auto;
}

.ipvoice-globe-map {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.85;
}

.ipvoice-orbits {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ipvoice-orbit-lines {
	fill: none;
	stroke: #d5d9de;
	stroke-width: 1;
}

.ipvoice-orbit-dots {
	fill: #c4c9cf;
}

.ipvoice-node {
	fill: var(--ipv-red);
	stroke: #fff;
	stroke-width: 2.5;
}

.ipvoice-node-pulse {
	fill: var(--ipv-red);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: ipvoice-pulse 3.2s ease-out infinite;
}

.ipvoice-node-pulse.pulse-2 {
	animation-delay: 0.8s;
}

.ipvoice-node-pulse.pulse-3 {
	animation-delay: 1.6s;
}

.ipvoice-node-pulse.pulse-4 {
	animation-delay: 2.4s;
}

@keyframes ipvoice-pulse {
	0% {
		opacity: 0.35;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(2.8);
	}
}

/* =========================================================
   SCENE: SIM CARDS (sized in em, scaled via --ipv-sim-scale)
   ========================================================= */
.ipvoice-sims {
	position: absolute;
	bottom: 0;
	left: calc(50% - 15.5em);
	z-index: 2;
	width: 31em;
	height: 25em;
	font-size: calc(10px * var(--ipv-sim-scale));
	animation: ipvoice-float 7s ease-in-out infinite;
}

@keyframes ipvoice-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.ipvoice-sim {
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: column;
	border-radius: 1.5em;
	box-shadow: 0 2em 3.2em rgba(16, 18, 23, 0.17);
}

.ipvoice-sim--physical {
	left: 0;
	width: 18.5em;
	height: 23em;
	padding: 2.4em 2.3em;
	color: #171717;
	background: linear-gradient(145deg, #fff, #f2f2f3);
	border: 1px solid #e9e9ea;
	transform: rotate(-1deg);
}

.ipvoice-sim--esim {
	right: 0;
	bottom: 0.4em;
	width: 15.5em;
	height: 21.5em;
	padding: 2.4em 2em;
	color: #fff;
	background:
		radial-gradient(circle at 70% 12%, rgba(255, 255, 255, 0.14), transparent 32%),
		linear-gradient(145deg, color-mix(in srgb, var(--ipv-purple) 82%, #fff), var(--ipv-purple) 55%, color-mix(in srgb, var(--ipv-purple) 80%, #000));
	transform: rotate(5deg);
}

.ipvoice-sim-brand {
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
}

.ipvoice-sim-brand strong {
	color: var(--ipv-red);
	font-size: 1.27em;
	font-weight: 700;
}

.ipvoice-chip,
.ipvoice-esim-frame {
	position: relative;
	width: 9.2em;
	height: 7.2em;
	margin: 3em auto 0;
}

.ipvoice-chip {
	padding: 0.9em;
	background: #e7e7e7;
	border: 0.6em solid #aeb1b4;
	border-radius: 1.4em;
	box-shadow: inset 0 0 0 0.3em #f7f7f7;
}

.ipvoice-esim-frame {
	margin-top: 3.2em;
	padding: 1em;
	border: 0.3em dashed rgba(255, 255, 255, 0.85);
	border-radius: 1em;
}

.ipvoice-chip span,
.ipvoice-esim-frame span {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(90deg, transparent 46%, #9c8250 47%, #9c8250 52%, transparent 53%),
		linear-gradient(0deg, transparent 46%, #9c8250 47%, #9c8250 52%, transparent 53%),
		linear-gradient(145deg, #f9e4a8, #d9bd70);
	border: 1px solid #94773f;
	border-radius: 0.7em;
}

.ipvoice-sim-name {
	margin-top: auto;
	font-size: 3em;
	font-weight: 500;
	line-height: 1;
}

.ipvoice-sim--esim .ipvoice-sim-name {
	text-align: center;
}

/* =========================================================
   BENEFIT CARDS
   ========================================================= */
.ipvoice-hero .ipvoice-benefits {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipvoice-hero .ipvoice-benefit {
	display: flex;
	min-height: 76px;
	margin: 0;
	padding: 14px 18px;
	align-items: center;
	gap: 16px;
	color: var(--ipv-black);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--ipv-card-border);
	border-radius: 14px;
	box-shadow: 0 10px 25px rgba(28, 32, 39, 0.07);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: break-word;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ipvoice-hero .ipvoice-benefit::before {
	content: none;
}

.ipvoice-benefit:hover {
	box-shadow: 0 16px 32px rgba(28, 32, 39, 0.12);
	transform: translateY(-4px);
}

.ipvoice-benefit svg,
.ipvoice-feature-icon svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.ipvoice-benefit svg {
	width: 40px;
	min-width: 40px;
	height: 40px;
}

/* =========================================================
   FEATURE CARDS
   ========================================================= */
.ipvoice-features {
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--ipv-line);
}

.ipvoice-hero .ipvoice-features-title {
	margin: 0 0 22px;
	color: var(--ipv-black);
	font-family: inherit;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-transform: none;
}

.ipvoice-feature-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 15px;
}

.ipvoice-feature {
	display: flex;
	min-height: 88px;
	overflow: hidden;
	align-items: stretch;
	gap: 16px;
	color: var(--ipv-black);
	background: #fff;
	border: 1px solid var(--ipv-card-border);
	border-radius: 14px;
	box-shadow: 0 10px 26px rgba(29, 32, 38, 0.07);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ipvoice-feature:hover {
	border-color: color-mix(in srgb, var(--ipv-red) 23%, transparent);
	box-shadow: 0 16px 34px rgba(29, 32, 38, 0.12);
	transform: translateY(-4px);
}

.ipvoice-feature-icon {
	display: flex;
	width: 86px;
	min-width: 86px;
	align-items: center;
	justify-content: center;
	color: var(--ipv-black);
}

.ipvoice-feature--highlight .ipvoice-feature-icon {
	color: #fff;
	background: var(--ipv-red);
	border-radius: 14px;
}

.ipvoice-feature-icon svg {
	width: 50px;
	height: 50px;
}

.ipvoice-feature-text {
	display: flex;
	padding: 12px 16px 12px 0;
	align-items: center;
	overflow-wrap: break-word;
}

/* =========================================================
   ≥ 640px
   (.ipvoice-hero measures the full widget width,
   everything inside measures the boxed content width)
   ========================================================= */
@container (min-width: 640px) {
	.ipvoice-hero {
		padding: 34px 32px 28px;
	}

	.ipvoice-top {
		--ipv-globe-size: 330px;
		--ipv-sim-scale: 0.9;
	}

	.ipvoice-logo img {
		width: 320px;
	}

	.ipvoice-actions {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.ipvoice-hero .ipvoice-button {
		min-height: 64px;
	}

	.ipvoice-hero .ipvoice-link {
		align-self: center;
	}

	.ipvoice-scene {
		height: 360px;
	}

	.ipvoice-globe {
		right: 4%;
		left: auto;
		margin: 0;
	}

	.ipvoice-sims {
		left: 4%;
	}
}

/* =========================================================
   ≥ 900px: copy | visual, benefits and features in rows
   ========================================================= */
@container (min-width: 900px) {
	.ipvoice-hero {
		padding: 48px 32px 40px;
	}

	.ipvoice-top {
		--ipv-globe-size: 360px;

		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		grid-template-areas:
			"copy scene"
			"benefits benefits";
		column-gap: 30px;
		row-gap: 26px;
		align-items: center;
	}

	.ipvoice-top--no-scene {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"copy"
			"benefits";
	}

	.ipvoice-hero .ipvoice-eyebrow {
		margin-bottom: 18px;
		font-size: 14px;
	}

	.ipvoice-hero .ipvoice-title {
		margin-bottom: 24px;
		font-size: clamp(44px, 3.8cqi, 76px);
		line-height: 0.98;
	}

	.ipvoice-hero .ipvoice-logo {
		margin-bottom: 28px;
	}

	.ipvoice-logo img {
		width: 360px;
	}

	.ipvoice-hero .ipvoice-intro {
		font-size: clamp(17px, 1.2cqi, 22px);
	}

	.ipvoice-actions {
		margin-top: 34px;
	}

	.ipvoice-scene {
		height: 400px;
	}

	.ipvoice-globe {
		right: 0;
	}

	.ipvoice-sims {
		bottom: 16px;
		left: 0;
	}

	.ipvoice-hero .ipvoice-benefits {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.ipvoice-hero .ipvoice-benefit {
		gap: 12px;
	}

	.ipvoice-benefit svg {
		width: 36px;
		min-width: 36px;
		height: 36px;
	}

	.ipvoice-features {
		margin-top: 30px;
		padding-top: 32px;
	}

	.ipvoice-hero .ipvoice-features-title {
		font-size: clamp(28px, 2cqi, 36px);
	}

	.ipvoice-feature-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
}

/* =========================================================
   ≥ 1040px: copy | visual | benefit column (mock-up layout)
   ========================================================= */
@container (min-width: 1040px) {
	.ipvoice-top {
		--ipv-globe-size: 330px;
		--ipv-sim-scale: 0.8;

		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 230px;
		grid-template-areas: "copy scene benefits";
		column-gap: 24px;
	}

	.ipvoice-top--no-scene {
		grid-template-columns: minmax(0, 1fr) 230px;
		grid-template-areas: "copy benefits";
	}

	.ipvoice-top--no-benefits {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "copy scene";
	}

	.ipvoice-globe {
		top: 10px;
		right: -40px;
	}

	/* overlap the globe's left side, like the mock-up */
	.ipvoice-sims {
		left: max(0px, calc(100% - 420px));
	}

	.ipvoice-hero .ipvoice-benefits {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.ipvoice-hero .ipvoice-benefit {
		min-height: 84px;
		padding: 16px;
		gap: 14px;
		font-size: 16px;
	}

	.ipvoice-benefit svg {
		width: 40px;
		min-width: 40px;
		height: 40px;
	}
}

/* =========================================================
   ≥ 1280px: larger sizes
   ========================================================= */
@container (min-width: 1280px) {
	.ipvoice-hero {
		padding: 56px 32px 48px;
	}

	.ipvoice-top {
		--ipv-globe-size: 400px;
		--ipv-sim-scale: 1;

		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 270px;
		column-gap: 30px;
		min-height: 455px;
	}

	.ipvoice-top--no-scene {
		grid-template-columns: minmax(0, 1fr) 270px;
	}

	.ipvoice-top--no-benefits {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.ipvoice-hero .ipvoice-eyebrow {
		font-size: clamp(15px, 1cqi, 19px);
	}

	.ipvoice-logo img {
		width: 440px;
	}

	.ipvoice-hero .ipvoice-button {
		min-height: 72px;
		padding: 20px 34px;
		font-size: 20px;
	}

	.ipvoice-hero .ipvoice-link {
		font-size: 19px;
	}

	.ipvoice-actions {
		gap: 64px;
	}

	.ipvoice-scene {
		height: 430px;
	}

	.ipvoice-globe {
		top: 0;
		right: -60px;
	}

	.ipvoice-sims {
		bottom: 20px;
		left: max(0px, calc(100% - 500px));
	}

	.ipvoice-hero .ipvoice-benefits {
		gap: 16px;
	}

	.ipvoice-hero .ipvoice-benefit {
		min-height: 96px;
		padding: 18px 20px;
		gap: 16px;
		font-size: clamp(17px, 1.1cqi, 19px);
	}

	.ipvoice-benefit svg {
		width: 48px;
		min-width: 48px;
		height: 48px;
	}

	.ipvoice-features {
		margin-top: 20px;
		padding-top: 30px;
	}

	.ipvoice-feature-grid {
		gap: 36px;
	}

	.ipvoice-feature {
		min-height: 110px;
		gap: 25px;
		font-size: 20px;
	}

	.ipvoice-feature-icon {
		width: 108px;
		min-width: 108px;
	}

	.ipvoice-feature-icon svg {
		width: 62px;
		height: 62px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ipvoice-sims,
	.ipvoice-node-pulse {
		animation: none !important;
	}

	.ipvoice-hero .ipvoice-button,
	.ipvoice-benefit,
	.ipvoice-feature {
		transition: none;
	}

	.ipvoice-hero .ipvoice-button:hover,
	.ipvoice-benefit:hover,
	.ipvoice-feature:hover {
		transform: none;
	}
}