/* ════════════════════════════════════════════════════════════
   Home Pro Landing — Premium Redesign
   ════════════════════════════════════════════════════════════ */

/* Design Tokens */
.retail-home-pro {
	--hp-accent:       #0284c7;
	--hp-accent-2:     #7c3aed;
	--hp-accent-rgb:   2, 132, 199;
	--hp-accent2-rgb:  124, 58, 237;
	--hp-surface:      #ffffff;
	--hp-border:       rgba(2, 132, 199, 0.14);
	--hp-text:         #0f172a;
	--hp-muted:        #475569;
	--hp-radius:       18px;
	--hp-shadow:       0 2px 4px rgba(15,23,42,0.04), 0 8px 28px rgba(2,132,199,0.07);
	--hp-shadow-hover: 0 12px 36px rgba(2,132,199,0.18);
	max-width: var(--ilp-content-max, 1340px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(0.65rem, 2vw, 1rem);
	padding-right: clamp(0.65rem, 2vw, 1rem);
	box-sizing: border-box;
}

[data-pc-theme="dark"] .retail-home-pro {
	--hp-accent:       #38bdf8;
	--hp-accent-2:     #a78bfa;
	--hp-accent-rgb:   56, 189, 248;
	--hp-accent2-rgb:  167, 139, 250;
	--hp-surface:      #1e293b;
	--hp-border:       rgba(56, 189, 248, 0.16);
	--hp-text:         #f1f5f9;
	--hp-muted:        #94a3b8;
	--hp-shadow:       0 2px 4px rgba(0,0,0,0.2), 0 8px 28px rgba(0,0,0,0.25);
	--hp-shadow-hover: 0 12px 36px rgba(0,0,0,0.4);
}

body.pc-storefront-body:has(.retail-home-pro) .content-wrapper .container-fluid.imei-lp-home-fluid {
	width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.pc-storefront-body:has(.retail-home-pro) .content-wrapper {
	margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important;
}
.retail-home-pro.imei-lp-root { width: 100%; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
.retail-home-pro-inner {
	display: flex; flex-direction: column;
	gap: clamp(0.9rem,2vw,1.25rem);
	padding: clamp(0.75rem,1.5vw,1rem) clamp(0.65rem,2vw,1.25rem) 1.25rem;
}

/* ─── HERO ─── */
.home-pro-hero {
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: var(--hp-radius);
	border: 1px solid var(--hp-border);
	background: var(--hp-surface);
	box-shadow: var(--hp-shadow);
}
.home-pro-hero::before {
	content: ""; position: absolute; inset: -1px;
	border-radius: calc(var(--hp-radius) + 1px); padding: 1px;
	background: linear-gradient(125deg, rgba(var(--hp-accent-rgb),.6) 0%, rgba(var(--hp-accent2-rgb),.35) 40%, rgba(var(--hp-accent-rgb),.5) 70%, transparent 100%);
	background-size: 280% 280%; animation: hp-border-flow 6s ease-in-out infinite;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none; z-index: 2;
}
.home-pro-hero::after {
	content: ""; position: absolute; left: -5%; bottom: -10%; width: 55%; height: 70%;
	background: radial-gradient(ellipse at 0% 100%, rgba(var(--hp-accent-rgb),.1), transparent 65%);
	pointer-events: none; z-index: 0;
}
@keyframes hp-border-flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.home-pro-hero__banner {
	position: relative; width: 100%;
	background: color-mix(in srgb, var(--hp-surface) 88%, var(--hp-accent) 12%);
	border-bottom: 1px solid var(--hp-border);
	overflow: visible;
}
.home-pro-hero__banner .storefront-home-banner-wrap { margin: 0; width: 100%; }
.home-pro-hero__banner .storefront-home-banner {
	border-radius: 0;
	max-height: none;
	min-height: 0;
	aspect-ratio: unset;
}
.home-pro-hero__banner .storefront-home-banner .retail-banner-slide img {
	max-height: min(560px, 72vh);
	object-fit: contain;
}
.home-pro-hero__banner-link { display: block; line-height: 0; }
.home-pro-hero__banner-img { display: block; width: 100%; height: auto; max-height: min(560px, 72vh); object-fit: contain; object-position: center; }
.home-pro-hero__fallback { display: flex; align-items: center; justify-content: center; min-height: clamp(140px,22vw,220px); gap: 1.25rem; font-size: 2rem; color: var(--hp-accent); opacity: .45; }

.home-pro-hero__content { position: relative; z-index: 1; padding: clamp(.9rem,2vw,1.35rem) clamp(1rem,2.5vw,1.5rem); }
.home-pro-hero__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .65rem; }

.home-pro-hero__badge {
	display: inline-flex; align-items: center; gap: .32rem;
	padding: .22rem .65rem; border-radius: 999px;
	background: linear-gradient(90deg,rgba(var(--hp-accent-rgb),.15),rgba(var(--hp-accent2-rgb),.12));
	border: 1px solid rgba(var(--hp-accent-rgb),.28); color: var(--hp-accent);
	font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
	animation: hp-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes hp-badge-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--hp-accent-rgb),.25)} 50%{box-shadow:0 0 0 8px rgba(var(--hp-accent-rgb),0)} }

.home-pro-hero__title {
	flex: 1; min-width: min(100%,15rem); margin: 0;
	font-size: clamp(1.2rem,2.8vw,1.8rem); font-weight: 900;
	line-height: 1.2; letter-spacing: -.025em; color: var(--hp-text);
}
.home-pro-hero__title span {
	background: linear-gradient(90deg, var(--hp-accent), var(--hp-accent-2), var(--hp-accent));
	background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	animation: hp-title-shine 3.5s linear infinite;
}
@keyframes hp-title-shine { to{background-position:200% center} }

.home-pro-hero__trust { display: flex; flex-wrap: wrap; gap: .3rem .65rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.home-pro-hero__trust li { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(var(--hp-accent-rgb),.14); background: rgba(var(--hp-accent-rgb),.06); font-size: .74rem; font-weight: 600; color: var(--hp-muted); transition: all .2s; }
.home-pro-hero__trust li:hover { background: rgba(var(--hp-accent-rgb),.13); border-color: rgba(var(--hp-accent-rgb),.3); color: var(--hp-text); transform: translateY(-1px); }
.home-pro-hero__trust li i { color: var(--hp-accent); font-size: .7rem; }
.home-pro-hero__actions { display: block; }

/* ─── SHORTCUTS ─── */
.home-pro-shortcuts { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .5rem; width: 100%; }
.home-pro-shortcut {
	display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .4rem;
	padding: .45rem .5rem; border-radius: 999px;
	border: 1px solid var(--hp-border);
	background: linear-gradient(145deg, var(--hp-surface), color-mix(in srgb,var(--hp-surface) 92%,var(--hp-accent) 8%));
	color: var(--hp-text); text-decoration: none; cursor: default; user-select: none;
	transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
.home-pro-shortcut:hover { transform: translateY(-3px); border-color: rgba(var(--hp-accent-rgb),.4); box-shadow: 0 8px 24px rgba(var(--hp-accent-rgb),.15); color: var(--hp-text); }
.home-pro-shortcut__ico { width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg,rgba(var(--hp-accent-rgb),.12),rgba(var(--hp-accent2-rgb),.08)); color: var(--hp-accent); font-size: .75rem; flex-shrink: 0; transition: background .2s,transform .2s,box-shadow .2s; }
.home-pro-shortcut:hover .home-pro-shortcut__ico { background: linear-gradient(135deg,rgba(var(--hp-accent-rgb),.22),rgba(var(--hp-accent2-rgb),.16)); transform: scale(1.1); box-shadow: 0 0 12px rgba(var(--hp-accent-rgb),.25); }
.home-pro-shortcut__label { font-size: .65rem; font-weight: 700; text-align: left; line-height: 1.15; }

/* ─── USP CARDS ─── */
.home-pro-usp { padding-bottom: .25rem; }
.home-pro-usp__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.home-pro-usp__card {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon desc"; gap: 0 .65rem;
	padding: .85rem .75rem; text-align: left; align-items: center;
	background: var(--hp-surface);
	border: 1px solid var(--hp-border); border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.home-pro-usp__card::before { content:""; position:absolute; top:0;left:0;right:0; height:2.5px; background: linear-gradient(90deg,transparent,var(--hp-accent),var(--hp-accent-2),transparent); transform:scaleX(0); transform-origin:center; transition:transform .35s ease; }
.home-pro-usp__card::after  { content:""; position:absolute; bottom:-20px;right:-20px; width:80px;height:80px; background:radial-gradient(circle,rgba(var(--hp-accent-rgb),.08),transparent 65%); pointer-events:none; transition:opacity .3s; opacity:0; }
.home-pro-usp__card:hover { transform:translateY(-3px); border-color:rgba(var(--hp-accent-rgb),.25); box-shadow:var(--hp-shadow-hover); }
.home-pro-usp__card:hover::before { transform:scaleX(1); }
.home-pro-usp__card:hover::after  { opacity:1; }
.home-pro-usp__ico { grid-area: icon; display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; margin-bottom:0; border-radius:50%; background:linear-gradient(135deg,rgba(var(--hp-accent-rgb),.12),rgba(var(--hp-accent2-rgb),.08)); color:var(--hp-accent); font-size:.9rem; transition:transform .25s,box-shadow .25s,background .25s; }
.home-pro-usp__card:hover .home-pro-usp__ico { transform:scale(1.1) rotate(-3deg); box-shadow:0 0 14px rgba(var(--hp-accent-rgb),.25); background:linear-gradient(135deg,rgba(var(--hp-accent-rgb),.22),rgba(var(--hp-accent2-rgb),.16)); }
.home-pro-usp__title { grid-area: title; align-self: end; margin:0 0 .1rem; font-size:.8rem; font-weight:800; color:var(--hp-text); letter-spacing:-.01em; }
.home-pro-usp__desc  { grid-area: desc; align-self: start; margin:0; font-size:.68rem; line-height:1.3; color:var(--hp-muted); }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
	.home-pro-hero::before,.home-pro-hero__badge,.home-pro-hero__title span { animation:none; }
	.home-pro-shortcut:hover,.home-pro-usp__card:hover { transform:none; }
}

/* Responsive */
@media (max-width:1199px) { .home-pro-usp__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px)  { .home-pro-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))} .home-pro-usp__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px)  { .home-pro-usp__grid{grid-template-columns:1fr} }
@media (max-width:575px)  { .home-pro-hero__banner-img,.home-pro-hero__banner .storefront-home-banner .retail-banner-slide img{max-height:min(420px,62vh);object-fit:contain} .home-pro-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))} .home-pro-usp__grid{grid-template-columns:1fr} }