﻿.products-hero{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center;color:var(--white)}
.hero-grid{position:relative;z-index:2;width:min(var(--container),calc(100% - 32px));margin:-40px auto 0;display:grid;grid-template-columns:1.15fr .95fr;gap:34px;align-items:center;padding:0px 0 60px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid #ffffff24;background:var(--white);border-radius:999px;font-size:.92rem;margin-bottom:18px;color:var(--accent)}
.products-hero h1{margin:0 0 18px;font-size:clamp(2.1rem,3.5vw,4.4rem);line-height:1.25;font-weight:900;color:var(--gray-700)}
.products-hero h1 .accent{display:block;color:var(--accent);letter-spacing:1px;font-size:.42em;margin-bottom:12px;font-weight:800}
.hero-desc{max-width:760px;color:var(--gray-500);font-size:1.08rem;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:16px;font-weight:800;transition:.25s ease;color:var(--white)!important}
.btn-primary{color:#111;box-shadow:0 12px 28px #caa45f40}
.btn-outline{border:1px solid #ffffff2e;color:#fff;background:var(--accent)}
.btn:hover{transform:translateY(-2px)}
.hero-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini-stat{background:var(--gray-50);border:1px solid #ffffff14;border-radius:18px;padding:18px 16px;text-align:center;color:var(--gray-700)}
.mini-stat strong{display:block;font-size:1.5rem;color:var(--accent);margin-bottom:6px}
.hero-visual{position:relative}
.hero-visual-card{position:relative;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:30px;padding:18px;backdrop-filter:blur(8px);box-shadow:0 22px 50px #0000003d}
.hero-visual-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:220px 220px;gap:14px}
.hero-photo{position:relative;overflow:hidden;border-radius:22px;min-height:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hero-photo:hover img{transform:scale(1.06)}
.hero-photo.large{grid-row:1 / span 2}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#00000059,transparent 50%)}
.floating-note{position:absolute;left:-18px;bottom:24px;background:#fff;color:#111;border-radius:20px;padding:14px 16px;box-shadow:var(--shadow);min-width:220px}
.floating-note strong{display:block;color:var(--gold-2);margin-bottom:6px;font-size:.95rem}
.intro-section{padding:90px 0 30px;background:#fff}
.section-header{text-align:center;max-width:850px;margin:0 auto 40px}
.section-label{display:inline-block;color:var(--gold-2);font-weight:800;margin-bottom:10px}
.section-label-bottom{display:inline-block;color:var(--gold-2);font-weight:800;margin-bottom:10px}
.section-title{font-size:clamp(1.8rem,3vw,3rem);margin:0 0 14px;color:#16202a}
.section-desc{color:#5a6775;margin:0}
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.overview-card{position:relative;overflow:hidden;background:#fff;border:1px solid #e8edf2;border-radius:24px;box-shadow:var(--shadow);transition:.3s ease}
.overview-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px #0f172024}
.overview-media{height:220px;overflow:hidden}
.overview-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.overview-card:hover .overview-media img{transform:scale(1.08)}
.overview-body{padding:24px}
.overview-index{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#caa45f1f;color:var(--gold-2);font-weight:900;margin-bottom:14px}
.overview-body h3{margin:0 0 10px;font-size:1.25rem;color:#17212c}
.overview-body p{margin:0 0 18px;color:#5f6c79}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#f3f6f9;color:#334155;font-size:.88rem;border:1px solid #e3e9ef}
.group-section{padding:90px 0}
.group-section.alt{background:linear-gradient(180deg,#f7f9fb 0%,#eef3f7 100%)}
.group-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:center}
.group-layout.reverse{grid-template-columns:1.05fr 1fr}
.group-text .section-title{text-align:right;display:inline-block;color:var(--gold-2);font-weight:800;margin-bottom:10px;margin-right:10px}
.group-text .section-desc{text-align:right;margin-bottom:22px}
.group-number{display:inline-flex;align-items:center;justify-content:center;min-width:68px;height:68px;padding:0 18px;border-radius:18px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111;font-weight:900;font-size:1.35rem;margin-bottom:18px;box-shadow:0 12px 26px #caa45f3d}
.product-subcards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.subcard{background:#fff;border:1px solid #e5ebf0;border-radius:22px;padding:22px 20px;box-shadow:var(--shadow);transition:.28s ease}
.subcard:hover{transform:translateY(-6px)}
.subcard-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:linear-gradient(135deg,#caa45f29,#caa45f47);font-size:1.4rem}
.subcard h4{margin:0 0 10px;color:#16202a;font-size:1.05rem}
.subcard ul{margin:0;padding:0;list-style:none}
.subcard ul li{position:relative;padding-right:16px;color:#5b6775;margin-bottom:8px;list-style-type:none}
.subcard ul li::before{content:"";position:absolute;right:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.collage{position:relative;min-height:640px}
.collage-card{position:absolute;overflow:hidden;border-radius:28px;box-shadow:0 22px 40px #0f172029;border:8px solid #fff;background:#fff}
.collage-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.collage-card:hover img{transform:scale(1.08)}
.collage-a{top:0;right:0;width:58%;height:300px}
.collage-b{top:140px;left:0;width:42%;height:240px}
.collage-c{bottom:0;right:10%;width:56%;height:250px}
.collage-badge{position:absolute;left:20px;bottom:20px;z-index:5;background:#0f1720e6;color:#fff;border:1px solid #ffffff14;border-radius:20px;padding:16px 18px;max-width:260px;box-shadow:var(--shadow)}
.collage-badge strong{display:block;color:var(--white);margin-bottom:6px;font-weight:bolder}
.products-cta{padding:90px 0;background:linear-gradient(135deg,#0f1720f0,#16202af0),url(/images/home/photo-1553413077-190dd305871c.jpg) center/cover no-repeat;color:#fff;text-align:center;position:relative;overflow:hidden}
.products-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,#caa45f33,transparent 34%)}
.products-cta .page-wrap{position:relative;z-index:2}
.products-cta h2{margin:0 0 14px;font-size:clamp(1.8rem,2.5vw,3rem);color:#FFF;font-weight:bold}
.products-cta p{max-width:760px;margin:0 auto 26px;color:#d5dee6}
.cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
@media (max-width: 1100px) {
.hero-grid,.group-layout,.group-layout.reverse{grid-template-columns:1fr}
.hero-visual{order:2}
.hero-mini-stats,.overview-grid{grid-template-columns:1fr}
.product-subcards{grid-template-columns:1fr}
.collage{min-height:auto;display:grid;grid-template-columns:1fr;gap:16px}
.collage-card{position:relative;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:260px!important}
.collage-badge{position:relative;left:auto;bottom:auto;margin-top:16px;max-width:none}
}
@media (max-width: 768px) {
.products-hero{min-height:auto}
.hero-grid{padding:42px 0 56px}
.hero-visual-grid{grid-template-columns:1fr;grid-template-rows:220px 180px 180px}
.hero-photo.large{grid-row:auto}
.floating-note{position:relative;left:auto;bottom:auto;margin-top:14px}
.overview-media{height:200px}
}
@media(min-width:768px){
.page-wrap{max-width:1320px;margin:auto}
.bc-section{padding-left:30px;padding-right:30px;padding-top:10px}
}
main{margin-top:-10px!important}