/* Homepage (Samtastic Prime 4.6.0): live 3D hero, 3D showcase, cleaner sections. Front page only. */

/* ---------- Hero ---------- */
.pm3-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 48px);
	background:
		radial-gradient(1200px 520px at 85% -10%, rgba(47, 91, 255, .13), transparent 60%),
		radial-gradient(800px 420px at -5% 110%, rgba(14, 163, 113, .07), transparent 60%),
		linear-gradient(180deg, #f8faff 0%, #fff 100%);
}
.pm3-hero__in {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
	gap: clamp(24px, 3.4vw, 56px);
	align-items: center;
}
.pm3-hero__copy h1 {
	font-family: var(--pm-head);
	font-size: clamp(2.1rem, 3.9vw, 3.3rem);
	line-height: 1.04;
	letter-spacing: -.035em;
	color: var(--pm-ink);
	margin: 10px 0 16px;
}
.pm3-hero__copy h1 em { font-style: normal; color: var(--pm-blue); }
.pm3-hero__lead { color: var(--pm-muted); font-size: 1.08rem; line-height: 1.6; max-width: 34em; margin: 0 0 22px; }
.pm3-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.pm3-badges li {
	display: inline-flex; align-items: center; gap: 7px;
	font: 600 .82rem/1 var(--pm-sans); color: var(--pm-ink-2);
	background: #fff; border: 1px solid var(--pm-line); border-radius: 999px; padding: 8px 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.pm3-badges li b { color: var(--pm-blue); font-weight: 800; }
.pm3-hero .pm-doors { margin-top: 0; }
.pm3-hero__search { margin-top: 18px; }
.pm3-hero__search .pt-finder { box-shadow: var(--pm-shadow); }

/* ---------- Live 3D stage ---------- */
.h3s { position: relative; }
.h3s__stage {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: 26px;
	overflow: hidden;
	background: #dfe8f6;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 40px 80px -40px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .06);
	isolation: isolate;
	touch-action: pan-y;
}
.h3s__poster, .h3s__canvas {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block;
}
.h3s__poster { object-fit: cover; transition: opacity .9s ease, transform 8s ease; transform: scale(1.02); }
.h3s__canvas { opacity: 0; transition: opacity .9s ease; cursor: grab; }
.h3s__canvas:active { cursor: grabbing; }
.h3s--live .h3s__canvas { opacity: 1; }
.h3s--live .h3s__poster { opacity: 0; pointer-events: none; }
.h3s__veil { position: absolute; inset: auto 0 0 0; height: 3px; overflow: hidden; z-index: 3; opacity: 0; transition: opacity .3s; }
.h3s__veil span { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--pm-blue), transparent); animation: h3s-load 1.3s ease-in-out infinite; }
.h3s--loading .h3s__veil { opacity: 1; }
@keyframes h3s-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.h3s__top {
	position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none;
}
.h3s__top > * { pointer-events: auto; }
.h3s__live {
	display: inline-flex; align-items: center; gap: 7px;
	font: 700 .74rem/1 var(--pm-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pm-ink);
	background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-radius: 999px; padding: 8px 11px; box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .3);
}
.h3s__live i { width: 8px; height: 8px; border-radius: 50%; background: #9aa3b5; }
.h3s--live .h3s__live i { background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); animation: h3s-pulse 2s infinite; }
@keyframes h3s-pulse { 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.h3s__modes {
	display: inline-flex; gap: 2px; padding: 3px;
	background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-radius: 999px; box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .3);
}
.h3s__modes button {
	border: 0; background: transparent; color: var(--pm-ink-2); cursor: pointer;
	font: 600 .78rem/1 var(--pm-sans); padding: 8px 11px; border-radius: 999px; white-space: nowrap;
}
.h3s__modes button:hover { background: var(--pm-blue-soft); }
.h3s__modes button.is-on { background: var(--pm-blue); color: #fff; }
.h3s__modes button[hidden] { display: none; }
.h3s__legend {
	position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: calc(100% - 28px);
	display: flex; flex-wrap: wrap; gap: 6px;
}
.h3s__legend span {
	display: inline-flex; align-items: center; gap: 6px;
	font: 600 .76rem/1 var(--pm-sans); color: var(--pm-ink);
	background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 6px 9px;
	box-shadow: 0 3px 10px -6px rgba(15, 23, 42, .4);
}
.h3s__legend i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.h3s__legend b { color: var(--pm-muted); font-weight: 600; }
.h3s__sun {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
	display: flex; align-items: center; gap: 10px; width: min(420px, calc(100% - 28px));
	background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-radius: 999px; padding: 6px 6px 6px 14px; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .4);
}
.h3s__sun b { font: 800 .9rem/1 var(--pm-head); color: var(--pm-ink); min-width: 3.1em; }
.h3s__sun input { flex: 1; accent-color: #f59e0b; }
.h3s__sun button { border: 0; width: 32px; height: 32px; border-radius: 50%; background: #f59e0b; color: #fff; cursor: pointer; font-size: .8rem; }
.h3s__hint {
	position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 2; margin: 0;
	font: 600 .78rem/1 var(--pm-sans); color: #fff; background: rgba(15, 23, 42, .62); padding: 8px 12px; border-radius: 999px;
	pointer-events: none; white-space: nowrap;
}
.h3s__credit { position: absolute; right: 10px; bottom: 6px; z-index: 1; margin: 0; font: .66rem/1.2 var(--pm-sans); color: rgba(15, 23, 42, .6); }
.h3s__credit a { color: inherit; }
.h3s__legend:not([hidden]) ~ .h3s__credit, .h3s__sun:not([hidden]) ~ .h3s__credit { display: none; }
.h3s__start {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
	border: 0; cursor: pointer; font: 700 .95rem/1 var(--pm-sans); color: #fff; background: var(--pm-blue);
	padding: 14px 20px; border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(47, 91, 255, .7);
}
.h3s__bar { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; }
.h3s__info {
	flex: 1; min-width: 0; display: grid; gap: 3px; text-decoration: none;
	background: #fff; border: 1px solid var(--pm-line); border-radius: 18px; padding: 12px 16px; box-shadow: var(--pm-shadow);
}
.h3s__name { font: 800 1.02rem/1.2 var(--pm-head); color: var(--pm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h3s__meta { font: .84rem/1.3 var(--pm-sans); color: var(--pm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h3s__go { font: 700 .82rem/1.3 var(--pm-sans); color: var(--pm-blue); }
.h3s__info:hover .h3s__go { text-decoration: underline; }
.h3s__pick { display: flex; gap: 8px; }
.h3s__pick button {
	position: relative; width: 74px; border: 0; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden;
	background: var(--h3s-thumb) center / cover no-repeat, var(--pm-bg-2);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
	opacity: .78; transition: opacity .2s, box-shadow .2s, transform .2s;
}
.h3s__pick button span {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 6px;
	font: 700 .68rem/1.1 var(--pm-sans); color: #fff; text-align: left;
	background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .78));
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h3s__pick button:hover { opacity: 1; transform: translateY(-1px); }
.h3s__pick button.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--pm-blue), 0 8px 18px -10px rgba(47, 91, 255, .8); }

/* ---------- Trust strip under the hero ---------- */
.pm3-trust { border-top: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line); background: #fff; }
.pm3-trust__in {
	max-width: 1280px; margin: 0 auto; padding: 16px 24px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; align-items: center;
}
.pm3-trust__in > div { display: grid; gap: 2px; }
.pm3-trust__in strong { font: 800 1.5rem/1.1 var(--pm-head); color: var(--pm-ink); letter-spacing: -.02em; }
.pm3-trust__in > div > span { font: .85rem/1.35 var(--pm-sans); color: var(--pm-muted); }
.pm3-trust__in strong span { font: inherit; color: inherit; }

/* ---------- 3D showcase ---------- */
.pm3-show { padding: clamp(48px, 6vw, 88px) 0; background: #fff; }
.pm3-show__grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin-top: 26px;
}
.pm3-tile {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px;
	grid-column: span 4; border-radius: 24px; overflow: hidden; text-decoration: none; isolation: isolate;
	background: var(--pm3-img, none) center / cover no-repeat, linear-gradient(135deg, #e9efff, #f5f7fb);
	box-shadow: var(--pm-shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.pm3-tile--wide { grid-column: span 8; min-height: 320px; }
.pm3-tile--tall { grid-column: span 4; min-height: 320px; }
.pm3-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 22%, rgba(15, 23, 42, .55) 55%, rgba(15, 23, 42, .88) 100%); }
.pm3-tile--plain::before { background: none; }
.pm3-tile:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-lg); }
.pm3-tile__body { padding: 20px 22px; color: #fff; display: grid; gap: 6px; }
.pm3-tile--plain .pm3-tile__body { color: var(--pm-ink); }
.pm3-tile__k { font: 700 .72rem/1 var(--pm-sans); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pm3-tile h3 { font: 800 1.28rem/1.2 var(--pm-head); margin: 0; color: inherit; letter-spacing: -.01em; }
.pm3-tile p { margin: 0; font: .92rem/1.45 var(--pm-sans); opacity: .9; max-width: 34em; }
.pm3-tile__go { font: 700 .86rem/1 var(--pm-sans); margin-top: 4px; }
.pm3-tile__icon {
	position: absolute; top: 18px; left: 20px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
	font-size: 1.6rem; background: #fff; box-shadow: var(--pm-shadow);
}
.pm3-tile--plain { background: linear-gradient(160deg, #f3f6ff 0%, #fff 70%); border: 1px solid var(--pm-line); box-shadow: none; }
.pm3-tile--plain .pm3-tile__go { color: var(--pm-blue); }

/* ---------- Section rhythm ---------- */
.pm3-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm3-head h2 { font-family: var(--pm-head); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.025em; margin: 6px 0 0; color: var(--pm-ink); }
.pm3-head p.pm-sub { margin: 10px 0 0; }

/* ---------- Phones / tablets ---------- */
@media (max-width: 980px) {
	/* phones and tablets: the live model straight after the headline, then the doors and the search */
	.pm3-hero__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.pm3-hero__copy { display: contents; }
	.pm3-hero__copy > .ps-kicker { order: 1; }
	.pm3-hero__copy > h1 { order: 2; }
	.pm3-hero__copy > .pm3-hero__lead { order: 3; }
	.pm3-hero__side { order: 4; margin: 4px 0 18px; }
	.pm3-hero__copy > .pm3-badges { order: 5; }
	.pm3-hero__copy > .pm-doors { order: 6; }
	.pm3-hero__copy > .pm3-hero__search { order: 7; }
	.pm3-hero__copy > .pm-hero__quick { order: 8; }
	.pm3-tile, .pm3-tile--wide, .pm3-tile--tall { grid-column: span 6; }
}
@media (max-width: 640px) {
	.pm3-hero__in { padding: 0 16px; }
	.pm3-trust__in { padding: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pm3-trust__in strong { font-size: 1.25rem; }
	.h3s__stage { aspect-ratio: 4 / 3.4; border-radius: 20px; }
	.h3s__top { flex-direction: column; align-items: flex-start; }
	.h3s__modes button { padding: 7px 9px; font-size: .74rem; }
	.h3s__hint { top: auto; bottom: 58px; }
	.h3s__bar { flex-direction: column; }
	.h3s__pick { overflow-x: auto; }
	.h3s__pick button { flex: 0 0 auto; width: 92px; height: 58px; }
	.pm3-show__grid { grid-template-columns: minmax(0, 1fr); }
	.pm3-tile, .pm3-tile--wide, .pm3-tile--tall { grid-column: auto; min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.h3s__poster { transform: none; transition: none; }
	.pm3-tile { transition: none; }
}

/* hidden means hidden (the overlays above set display) */
.h3s [hidden] { display: none !important; }
.pm3-show a.pm3-tile h3, .pm3-show a.pm3-tile p { color: #fff; }
.pm3-show a.pm3-tile--plain h3 { color: var(--pm-ink); }
.pm3-show a.pm3-tile--plain p { color: var(--pm-muted); }