/*
 * Offer stage — "browser" (إنشاء مواقع): a browser window.
 * The offers are its tabs; each opens an imagined website of the visitor's
 * own brand («علامتك»), designed for that offer: a company site, a landing
 * page with its sign-up card, a product launch, identity + speed (owner,
 * 2026-10-05: «تخيّل موقعك… جواه كتابة بدل ما هو فاضي»). The offer's title and
 * line are the page's hero; the rest is decoration. Opening a tab runs the
 * loading bar and the page builds itself.
 */

.gb-offer-stage--browser {
	--gb-web-chrome: #E8ECF0;
	--gb-web-line: #D9E0E6;
	--gb-offer-enter: gb-web-in;
	--gb-offer-enter-time: 0.5s;
}

/* The whole stage is the window: tab strip on top, page below. */
.gb-offer-stage--browser[data-gb-offer-ready] {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"nav"
		"screen";
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-bg);
	box-shadow: 0 2rem 4rem -2.5rem rgb(12 35 66 / 0.45);
}

/* ---------- Tab strip (tabs) ---------- */

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer-stage__nav {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem 0;
	background-color: var(--gb-web-chrome);
}

.gb-offer-stage--browser .gb-offer-stage__nav-head {
	align-self: center;
	padding-block-end: 0.45rem;
}

/* Traffic lights, as every window has them. */
.gb-os-dots {
	display: flex;
	gap: 0.4rem;
}

.gb-os-dots i {
	inline-size: 0.7rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #FF5F57;
}

.gb-os-dots i:nth-child(2) {
	background-color: #FEBC2E;
}

.gb-os-dots i:nth-child(3) {
	background-color: #28C840;
}

.gb-offer-stage--browser .gb-offer-stage__tabgroup {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer-stage__tabs {
	display: flex;
	gap: 0.2rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.gb-offer-stage--browser .gb-offer-stage__tabs::-webkit-scrollbar {
	display: none;
}

.gb-offer-stage--browser .gb-offer-tab {
	position: relative;
	flex: 0 1 13.5rem;
	inline-size: auto;
	min-inline-size: 7rem;
	min-block-size: 2.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: 0.65rem 0.65rem 0 0;
	color: var(--gb-text-muted);
	font-size: 0.88rem;
	white-space: nowrap;
}

.gb-offer-stage--browser .gb-offer-tab__name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.gb-offer-stage--browser .gb-offer-tab:hover {
	background-color: rgb(255 255 255 / 0.55);
	color: var(--gb-color-navy);
}

.gb-offer-stage--browser .gb-offer-tab[aria-selected="true"] {
	background-color: var(--gb-bg);
	color: var(--gb-color-navy);
	font-weight: var(--gb-weight-bold);
}

/* Separators between inactive tabs. */
.gb-offer-stage--browser .gb-offer-tab:not([aria-selected="true"]) + .gb-offer-tab:not([aria-selected="true"])::before {
	content: "";
	position: absolute;
	inset-block: 0.7rem;
	inset-inline-start: -0.1rem;
	inline-size: 1px;
	background-color: var(--gb-web-line);
}

/* The favicon: the brand's diamond. */
.gb-os-favicon {
	inline-size: 0.7rem;
	aspect-ratio: 1;
	border: 2px solid var(--gb-primary);
	border-radius: 0.15rem;
	rotate: 45deg;
}

/* ---------- URL bar ---------- */

.gb-os-url {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.55rem 0.75rem;
	padding: 0.45rem 1rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-web-chrome);
	color: var(--gb-text-muted);
	font-size: 0.85rem;
}

.gb-os-url__lock .gb-icon {
	--gb-icon-size: 0.95rem;
}

.gb-os-url__text {
	direction: ltr;
}

.gb-offer-stage--browser .gb-offer-stage__chrome {
	border-block-end: 1px solid var(--gb-web-line);
}

/* The loading bar runs along the top of the page. */
.gb-os-loading {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 3px;
	inline-size: 100%;
	background-color: var(--gb-primary);
	transform-origin: var(--gb-load-origin, left);
	scale: 0 1;
	opacity: 0;
}

[dir="rtl"] .gb-os-loading {
	--gb-load-origin: right;
}

/* ---------- The page (panel): an imagined website of the visitor's brand ---------- */

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer-stage__view {
	padding: var(--gb-space-m) var(--gb-space-l) var(--gb-space-l);
}

/*
 * Page layout: the site's header across, the offer as the hero (eyebrow,
 * title, line, buttons) at the reading start, the offer's own visual beside
 * it, and a row of sections under it. Panels are numbered (data-gb-offer-n):
 * 1 company site, 2 landing page, 3 product launch (visual first), 4 identity
 * and speed.
 */
.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	grid-template-areas:
		"nav nav"
		"eyebrow side"
		"body side"
		"actions side"
		"extra extra";
	/* The visual beside the hero may be taller: the spare height goes under the buttons, not between the lines. */
	grid-template-rows: auto auto auto 1fr auto;
	align-items: start;
	gap: var(--gb-space-xs) var(--gb-space-l);
}

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer[data-gb-offer-n="3"] {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	grid-template-areas:
		"nav nav"
		"side eyebrow"
		"side body"
		"side actions"
		"side extra";
	grid-template-rows: auto auto auto auto 1fr;
}

/* The site's header: brand, menu, button. */
.gb-os-site-nav {
	grid-area: nav;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-block-end: var(--gb-space-xs);
	padding-block-end: 0.9rem;
	border-block-end: 1px solid var(--gb-web-line);
	font-size: 0.82rem;
	color: var(--gb-text-muted);
}

.gb-os-site-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.95rem;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-navy);
}

.gb-os-site-nav__brand i {
	inline-size: 0.8rem;
	aspect-ratio: 1;
	border: 2.5px solid var(--gb-primary);
	border-radius: 0.2rem;
	rotate: 45deg;
}

.gb-os-site-nav__links {
	display: flex;
	gap: 1.1rem;
	margin-inline-start: auto;
}

.gb-os-site-nav__links span:first-child {
	color: var(--gb-color-navy);
	font-weight: var(--gb-weight-bold);
}

.gb-os-site-nav__cta {
	padding: 0.35rem 0.95rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-navy);
	color: var(--gb-color-neutral-0);
	font-weight: var(--gb-weight-bold);
}

.gb-os-site-eyebrow {
	grid-area: eyebrow;
	justify-self: start;
	margin-block-start: var(--gb-space-xs);
	padding: 0.2rem 0.75rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-turquoise-a20);
	color: var(--gb-color-navy);
	font-size: 0.78rem;
	font-weight: var(--gb-weight-bold);
}

/* The hero = the offer's own words. */
.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer__body {
	grid-area: body;
	gap: var(--gb-space-xs);
}

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer__number {
	display: none;
}

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer__title {
	font-size: var(--gb-step-4);
	text-wrap: balance;
}

.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer__text {
	font-size: var(--gb-step-0);
}

.gb-os-site-actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block-start: 0.4rem;
}

.gb-os-site-btn {
	display: inline-grid;
	place-items: center;
	padding: 0.6rem 1.3rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-primary);
	color: var(--gb-color-navy);
	font-size: 0.88rem;
	font-weight: var(--gb-weight-bold);
}

.gb-os-site-btn--ghost {
	background: none;
	box-shadow: inset 0 0 0 1.5px var(--gb-color-navy);
}

/* The visual beside the hero. */
.gb-os-site-media,
.gb-os-site-form,
.gb-os-site-speed {
	grid-area: side;
	align-self: center;
}

/* 1. Company: a picture of the brand's world (abstract skyline at dusk). */
.gb-os-site-media--company {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 1rem;
	background: linear-gradient(170deg, var(--gb-color-profile-light), var(--gb-color-navy) 55%, #0b3b4a);
}

.gb-os-site-media--company i {
	position: absolute;
	inset-block-end: 0;
	inline-size: 22%;
	border-radius: 0.3rem 0.3rem 0 0;
	background:
		repeating-linear-gradient(to bottom, transparent 0 10px, rgb(255 255 255 / 0.22) 10px 12px) center / 40% 100% no-repeat,
		rgb(0 202 190 / 0.35);
}

.gb-os-site-media--company i:nth-child(1) {
	inset-inline-start: 12%;
	block-size: 55%;
}

.gb-os-site-media--company i:nth-child(2) {
	inset-inline-start: 39%;
	block-size: 78%;
	background-color: rgb(0 202 190 / 0.55);
}

.gb-os-site-media--company i:nth-child(3) {
	inset-inline-start: 66%;
	block-size: 42%;
}

.gb-os-site-media--company b {
	position: absolute;
	inset-block-start: 16%;
	inset-inline-end: 14%;
	inline-size: 14%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--gb-accent);
	box-shadow: 0 0 2.5rem 0.5rem rgb(250 95 30 / 0.35);
}

/* Company: three sections under the hero. */
.gb-os-site-cards {
	grid-area: extra;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gb-space-s);
	margin-block-start: var(--gb-space-s);
}

.gb-os-site-cards > span {
	display: grid;
	gap: 0.3rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--gb-web-line);
	border-radius: 0.75rem;
	background-color: var(--gb-surface);
}

.gb-os-site-cards i {
	inline-size: 1rem;
	aspect-ratio: 1;
	margin-block-end: 0.25rem;
	border-radius: 0.25rem;
	background-color: var(--gb-color-turquoise-a35);
	rotate: 45deg;
}

.gb-os-site-cards b {
	font-size: 0.92rem;
	color: var(--gb-color-navy);
}

.gb-os-site-cards small {
	font-size: 0.8rem;
	color: var(--gb-text-muted);
}

/* 2. Landing page: the sign-up card beside the hero. */
.gb-os-site-form {
	display: grid;
	gap: 0.6rem;
	padding: 1.2rem;
	border: 1px solid var(--gb-web-line);
	border-radius: 1rem;
	background-color: var(--gb-bg);
	box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(12 35 66 / 0.35);
}

.gb-os-site-form b {
	font-size: 1rem;
	color: var(--gb-color-navy);
}

.gb-os-site-field {
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--gb-web-line);
	border-radius: 0.6rem;
	background-color: var(--gb-surface);
	color: var(--gb-color-neutral-300);
	font-size: 0.85rem;
}

.gb-os-site-form .gb-os-site-btn {
	margin-block-start: 0.2rem;
}

.gb-os-site-form small {
	justify-self: center;
	font-size: 0.75rem;
	color: var(--gb-text-muted);
}

/* 3. Product launch: the product on a stage, then the sections as chips. */
.gb-os-site-media--launch {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 1rem;
	background:
		radial-gradient(55% 45% at 50% 40%, rgb(0 202 190 / 0.35), transparent 70%),
		radial-gradient(40% 12% at 50% 82%, rgb(12 35 66 / 0.25), transparent 70%),
		var(--gb-surface);
}

.gb-os-site-product {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 46%;
	aspect-ratio: 1;
	border-radius: 1.4rem;
	background: linear-gradient(145deg, var(--gb-color-profile-light), var(--gb-color-navy));
	box-shadow: 0 1.5rem 2rem -1rem rgb(12 35 66 / 0.5);
	rotate: -8deg;
}

.gb-os-site-product::after {
	content: "";
	position: absolute;
	inset: 8% 50% 50% 8%;
	border-radius: 1rem 0 2rem 0;
	background: linear-gradient(135deg, rgb(255 255 255 / 0.25), transparent);
}

.gb-os-site-product i {
	inline-size: 32%;
	aspect-ratio: 1;
	border: 4px solid var(--gb-primary);
	border-radius: 0.4rem;
	rotate: 45deg;
}

.gb-os-site-chips {
	grid-area: extra;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: var(--gb-space-xs);
}

.gb-os-site-chips span {
	padding: 0.35rem 0.95rem;
	border: 1px solid var(--gb-web-line);
	border-radius: var(--gb-radius-pill);
	color: var(--gb-text-muted);
	font-size: 0.82rem;
}

.gb-os-site-chips span:first-child {
	border-color: transparent;
	background-color: var(--gb-color-turquoise-a20);
	color: var(--gb-color-navy);
	font-weight: var(--gb-weight-bold);
}

/* 4. Identity and speed: a speed gauge, the brand's palette, the customer's path. */
.gb-os-site-speed {
	display: grid;
	gap: 0.9rem;
	padding: 1.2rem;
	border: 1px solid var(--gb-web-line);
	border-radius: 1rem;
	background-color: var(--gb-surface);
}

.gb-os-site-gauge {
	position: relative;
	display: grid;
	justify-items: center;
	justify-self: center;
	inline-size: 10rem;
	padding-block-start: 5.4rem;
}

/* The dial: the top half of a ring, slow (orange) → fast (turquoise). */
.gb-os-site-gauge::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(from 270deg, var(--gb-accent) 0deg, #FEBC2E 60deg, var(--gb-primary) 120deg 180deg, transparent 180deg);
	mask: radial-gradient(closest-side, transparent 72%, #000 73%);
	clip-path: inset(0 0 50% 0);
}

/* The needle, pivoting at the dial's centre, in the fast zone. */
.gb-os-site-gauge i {
	position: absolute;
	inset-block-start: 1.2rem;
	left: calc(50% - 1.5px);
	inline-size: 3px;
	block-size: 3.8rem;
	border-radius: 3px;
	background-color: var(--gb-color-navy);
	transform-origin: 50% 100%;
	rotate: 62deg;
}

.gb-os-site-gauge i::after {
	content: "";
	position: absolute;
	inset-block-end: -0.3rem;
	inset-inline-start: 50%;
	inline-size: 0.7rem;
	aspect-ratio: 1;
	border-radius: 50%;
	translate: calc(var(--gb-dir) * 50%) 0;
	background-color: var(--gb-color-navy);
}

.gb-os-site-gauge b {
	font-size: 0.8rem;
	color: var(--gb-color-navy);
}

.gb-os-site-palette {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.gb-os-site-palette i {
	inline-size: 1.4rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--gb-primary);
}

.gb-os-site-palette i:nth-child(2) {
	background-color: var(--gb-color-navy);
}

.gb-os-site-palette i:nth-child(3) {
	background-color: var(--gb-accent);
}

.gb-os-site-palette b {
	margin-inline-start: 0.3rem;
	font-size: 1.1rem;
	color: var(--gb-color-navy);
}

.gb-os-site-palette small,
.gb-os-site-path small {
	margin-inline-start: auto;
	font-size: 0.75rem;
	color: var(--gb-text-muted);
}

.gb-os-site-path {
	display: grid;
	gap: 0.4rem;
}

.gb-os-site-path small {
	margin-inline-start: 0;
}

.gb-os-site-path > span {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.gb-os-site-path > span > span {
	padding: 0.25rem 0.7rem;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-bg);
	box-shadow: inset 0 0 0 1px var(--gb-web-line);
	color: var(--gb-color-navy);
	font-size: 0.8rem;
}

/* An arrow between the steps, pointing in the reading direction. */
.gb-os-site-path > span {
	gap: 0.9rem;
}

.gb-os-site-path > span > span {
	position: relative;
}

.gb-os-site-path > span > span + span::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -0.7rem;
	inline-size: 0.4rem;
	aspect-ratio: 1;
	border-block-start: 1.5px solid var(--gb-primary);
	border-inline-end: 1.5px solid var(--gb-primary);
	translate: 0 -50%;
	rotate: calc(var(--gb-dir) * 45deg);
}

.gb-os-site-path > span > span:last-child {
	background-color: var(--gb-primary);
	box-shadow: none;
	font-weight: var(--gb-weight-bold);
}

/* ---------- Motion ---------- */

@keyframes gb-web-in {
	0%,
	30% {
		opacity: 0;
		translate: 0 0.6rem;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes gb-web-load {
	0% {
		scale: 0 1;
		opacity: 1;
	}

	70% {
		scale: 0.85 1;
		opacity: 1;
	}

	100% {
		scale: 1 1;
		opacity: 0;
	}
}

@keyframes gb-web-needle {
	0% {
		rotate: -80deg;
	}

	70% {
		rotate: 70deg;
	}

	100% {
		rotate: 62deg;
	}
}

@keyframes gb-web-rise {
	0%,
	25% {
		opacity: 0;
		translate: 0 1rem;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--browser[data-gb-switch] .gb-os-loading {
		animation: gb-web-load 0.7s var(--gb-ease-out) both;
	}

	/* The page builds itself: the visual and the sections rise in after the hero. */
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--browser[data-gb-switch] .gb-offer:not([hidden]) :is(.gb-os-site-media, .gb-os-site-form, .gb-os-site-speed, .gb-os-site-cards, .gb-os-site-chips) {
		animation: gb-web-rise 0.7s var(--gb-ease-out) 0.15s backwards;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--browser[data-gb-switch] .gb-offer:not([hidden]) .gb-os-site-gauge i {
		animation: gb-web-needle 1s var(--gb-ease-out) 0.4s backwards;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 47.99rem) {
	.gb-offer-stage--browser[data-gb-offer-ready] {
		gap: 0;
	}

	/* The window keeps its traffic lights on phones too. */
	.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer-stage__nav-head {
		display: block;
	}

	.gb-offer-stage--browser .gb-offer-tab {
		flex: 0 0 auto;
		min-inline-size: 0;
		max-inline-size: 11rem;
	}

	.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer-stage__view {
		padding: var(--gb-space-s);
	}

	/* One column: header, hero, its visual, then the sections. */
	.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer,
	.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer[data-gb-offer-n="3"] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"nav"
			"eyebrow"
			"body"
			"actions"
			"side"
			"extra";
	}

	.gb-os-site-nav__links {
		display: none;
	}

	.gb-os-site-nav__brand {
		margin-inline-end: auto;
	}

	.gb-offer-stage--browser[data-gb-offer-ready] .gb-offer__title {
		font-size: var(--gb-step-3);
	}

	.gb-os-site-media,
	.gb-os-site-form,
	.gb-os-site-speed {
		margin-block-start: var(--gb-space-xs);
	}

	.gb-os-site-media--launch {
		aspect-ratio: 16 / 10;
	}

	.gb-os-site-product {
		inline-size: 30%;
	}

	.gb-os-site-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}
}

/* ---------- Revision 4: sites the company built ---------- */

.gb-os-site-media--photo {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 1rem;
	background-color: var(--gb-color-navy);
}

.gb-os-site-photo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}