/**
 * Ugett Store — homepage sections.
 */

/* ============ Hero ============ */
.ug-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 9vw, 120px);
	border-bottom: 1px solid var(--ug-border);
}
.ug-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.ug-hero__beam {
	position: absolute;
	filter: blur(60px);
	opacity: 0.5;
}
.ug-hero__beam--1 {
	top: -20%; right: -6%;
	width: 46vw; height: 46vw;
	background: radial-gradient(circle, var(--ug-red-glow), transparent 62%);
}
.ug-hero__beam--2 {
	bottom: -30%; left: -10%;
	width: 40vw; height: 40vw;
	background: radial-gradient(circle, rgba(120, 130, 150, 0.14), transparent 60%);
}
.ug-hero__scan {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0.014) 1px, transparent 1px, transparent 4px);
	mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.ug-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--ug-space-xl);
	align-items: center;
}
.ug-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ug-font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ug-text-2);
	margin-bottom: var(--ug-space-md);
}
.ug-hero__eyebrow-dot {
	width: 8px; height: 8px;
	background: var(--ug-red);
	transform: rotate(45deg);
	box-shadow: 0 0 12px var(--ug-red-glow);
}
.ug-hero__title {
	font-size: clamp(2.8rem, 7vw, 5.4rem);
	line-height: 0.96;
	letter-spacing: -0.01em;
	margin: 0 0 var(--ug-space-md);
	text-transform: uppercase;
}
.ug-hero__title span { display: block; color: var(--ug-text); }
.ug-hero__title em {
	display: block;
	font-style: normal;
	background: linear-gradient(120deg, var(--ug-red-bright), var(--ug-red-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ug-hero__sub { font-size: 1.08rem; color: var(--ug-text-2); max-width: 46ch; margin-bottom: var(--ug-space-lg); }
.ug-hero__actions { display: flex; gap: var(--ug-space-sm); flex-wrap: wrap; margin-bottom: var(--ug-space-lg); }
.ug-hero__stats {
	display: flex;
	gap: var(--ug-space-lg);
	padding-top: var(--ug-space-md);
	border-top: 1px solid var(--ug-border);
	flex-wrap: wrap;
}
.ug-hero__stats strong { display: block; font-family: var(--ug-font-display); font-size: 1.4rem; color: var(--ug-text); }
.ug-hero__stats span { font-size: 0.82rem; color: var(--ug-text-muted); }
.ug-brand-disclaimer { margin-top: var(--ug-space-md); font-size: 0.74rem; color: var(--ug-text-muted); max-width: 52ch; opacity: 0.85; }

/* Hero panel card */
.ug-hero__panel { display: flex; justify-content: center; }
.ug-hero__card {
	position: relative;
	width: min(360px, 100%);
	padding: var(--ug-space-lg);
	background: linear-gradient(160deg, var(--ug-surface), var(--ug-charcoal));
	border: 1px solid var(--ug-border-strong);
	border-radius: var(--ug-radius-lg);
	box-shadow: var(--ug-shadow-lg);
	clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
	overflow: hidden;
}
.ug-hero__card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ug-red), transparent);
}
.ug-hero__card-tag {
	display: inline-block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #35d07f;
	margin-bottom: var(--ug-space-md);
}
.ug-hero__card-icons { display: flex; gap: 14px; margin-bottom: var(--ug-space-md); }
.ug-hero__card-icons .ug-cat-icon { width: 40px; height: 40px; color: var(--ug-metal); }
.ug-hero__card h3 { font-size: 1.4rem; margin: 0 0 4px; }
.ug-hero__card p { color: var(--ug-text-muted); font-size: 0.9rem; margin: 0; }
.ug-hero__card-bar { display: block; height: 4px; width: 60%; margin-top: var(--ug-space-md); background: linear-gradient(90deg, var(--ug-red), transparent); border-radius: var(--ug-radius-pill); }

/* ============ Category slider ============ */
.ug-cat-slider { position: relative; }
.ug-cat-track {
	display: flex;
	gap: var(--ug-space-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.ug-cat-track::-webkit-scrollbar { display: none; }
.ug-cat-tile {
	scroll-snap-align: start;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	min-width: 210px;
	background: var(--ug-gunmetal);
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg);
	transition: border-color var(--ug-dur), transform var(--ug-dur), background var(--ug-dur);
}
.ug-cat-tile:hover { border-color: var(--ug-border-red); transform: translateY(-3px); background: var(--ug-surface); }
.ug-cat-tile__icon { display: inline-flex; width: 34px; height: 34px; color: var(--ug-metal); }
.ug-cat-tile__label { font-family: var(--ug-font-display); font-weight: 600; letter-spacing: 0.03em; }
.ug-cat-tile__arrow { margin-left: auto; color: var(--ug-red); transition: transform var(--ug-dur); }
.ug-cat-tile:hover .ug-cat-tile__arrow { transform: translateX(4px); }
.ug-cat-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px; height: 42px;
	background: rgba(10, 11, 13, 0.85);
	border: 1px solid var(--ug-border-strong);
	border-radius: 50%;
	color: var(--ug-text);
	font-size: 1.4rem;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: background var(--ug-dur), border-color var(--ug-dur);
}
.ug-cat-slider__nav:hover { background: var(--ug-red-soft); border-color: var(--ug-red); }
.ug-cat-slider__nav--prev { left: -12px; }
.ug-cat-slider__nav--next { right: -12px; }
.ug-cat-slider.is-scrollable .ug-cat-slider__nav { display: inline-flex; }

/* ============ Category cards ============ */
.ug-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ug-space-md); }
.ug-cat-card {
	display: flex;
	align-items: center;
	gap: var(--ug-space-sm);
	padding: var(--ug-space-md);
	background: linear-gradient(160deg, var(--ug-gunmetal), var(--ug-charcoal));
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg);
	transition: transform var(--ug-dur), border-color var(--ug-dur), box-shadow var(--ug-dur);
}
.ug-cat-card:hover { transform: translateY(-4px); border-color: var(--ug-border-strong); box-shadow: var(--ug-shadow); }
.ug-cat-card__visual {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	flex: none;
	background: rgba(255, 255, 255, 0.04);
	border-radius: var(--ug-radius);
	color: var(--ug-metal);
}
.ug-cat-card__visual .ug-cat-icon { width: 30px; height: 30px; }
.ug-cat-card:hover .ug-cat-card__visual { color: var(--ug-red); }
.ug-cat-card__body h3 { font-size: 1.05rem; margin: 0 0 2px; }
.ug-cat-card__body span { font-size: 0.82rem; color: var(--ug-text-muted); }

/* ============ Benefits ============ */
.ug-section--benefits { background: linear-gradient(180deg, transparent, rgba(255, 70, 85, 0.03), transparent); }
.ug-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ug-space-md); }
.ug-benefit {
	padding: var(--ug-space-lg) var(--ug-space-md);
	background: var(--ug-charcoal);
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg);
	text-align: center;
	transition: transform var(--ug-dur), border-color var(--ug-dur);
}
.ug-benefit:hover { transform: translateY(-4px); border-color: var(--ug-border-red); }
.ug-benefit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	margin-bottom: var(--ug-space-sm);
	color: var(--ug-red);
	background: var(--ug-red-soft);
	border-radius: var(--ug-radius);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.ug-benefit h3 { font-size: 1.12rem; margin: 0 0 6px; }
.ug-benefit p { font-size: 0.9rem; color: var(--ug-text-muted); margin: 0; }

/* ============ Steps ============ */
.ug-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ug-space-md); counter-reset: step; }
.ug-step { position: relative; padding: var(--ug-space-lg); background: var(--ug-charcoal); border: 1px solid var(--ug-border); border-radius: var(--ug-radius-lg); }
.ug-step__num {
	font-family: var(--ug-font-display);
	font-size: 2.6rem;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px var(--ug-border-strong);
	line-height: 1;
	display: block;
	margin-bottom: var(--ug-space-sm);
}
.ug-step h3 { font-size: 1.2rem; margin: 0 0 6px; }
.ug-step p { color: var(--ug-text-muted); margin: 0; font-size: 0.92rem; }

/* ============ Reviews ============ */
.ug-section--reviews { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015)); }
.ug-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ug-space-md); }
.ug-review {
	margin: 0;
	padding: var(--ug-space-lg);
	background: var(--ug-charcoal);
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg);
	position: relative;
}
.ug-review::before {
	content: "\201C";
	position: absolute;
	top: 8px; right: 18px;
	font-family: var(--ug-font-display);
	font-size: 4rem;
	color: var(--ug-red-soft);
	line-height: 1;
}
.ug-review p { color: var(--ug-text); font-size: 0.98rem; margin: var(--ug-space-sm) 0; }
.ug-review cite { font-style: normal; font-weight: 600; color: var(--ug-text-2); font-size: 0.88rem; }

/* ============ CTA ============ */
.ug-cta {
	margin: var(--ug-section-y) 0 0;
	padding-block: clamp(48px, 7vw, 84px);
	position: relative;
	overflow: hidden;
	border-block: 1px solid var(--ug-border);
	background:
		radial-gradient(ellipse 60% 100% at 80% 50%, var(--ug-red-soft), transparent 60%),
		var(--ug-charcoal);
}
.ug-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ug-space-lg); flex-wrap: wrap; }
.ug-cta__copy h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 8px; }
.ug-cta__copy p { color: var(--ug-text-2); margin: 0; max-width: 48ch; }
.ug-cta__actions { display: flex; gap: var(--ug-space-sm); flex-wrap: wrap; }

/* ============ Newsletter ============ */
.ug-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ug-space-lg);
	padding: var(--ug-space-lg);
	background: var(--ug-gunmetal);
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg);
	flex-wrap: wrap;
}
.ug-newsletter__inner h2 { font-size: 1.6rem; margin: 0 0 4px; }
.ug-newsletter__inner p { color: var(--ug-text-muted); margin: 0; }
.ug-newsletter__form { display: flex; gap: 8px; flex: 1; min-width: 280px; max-width: 460px; }
.ug-newsletter__form input { flex: 1; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
	.ug-hero__grid { grid-template-columns: 1fr; }
	.ug-hero__panel { display: none; }
	.ug-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.ug-benefits { grid-template-columns: repeat(2, 1fr); }
	.ug-steps, .ug-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.ug-cat-grid, .ug-benefits { grid-template-columns: 1fr; }
	.ug-hero__stats { gap: var(--ug-space-md); }
	.ug-newsletter__form { flex-direction: column; }
}