/* =========================
PREMIUM LIGHT THEME CORE SETUP
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#ffffff;
overflow-x:hidden;
color:#334155; /* Highly readable dark slate for flawless light theme layout */
line-height: 1.7;
}

/* Custom premium light gradient architecture */
body::before{
content:'';
position:fixed;
inset:0;
background:
radial-gradient(circle at 80% 20%, rgba(59,130,246,0.06), transparent 45%),
radial-gradient(circle at 10% 80%, rgba(139,92,246,0.05), transparent 50%),
#ffffff;
z-index:-2;
pointer-events: none;
}

body::after{
content:'';
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(15,23,42,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,23,42,0.015) 1px, transparent 1px);
background-size:50px 50px;
z-index:-1;
pointer-events: none;
}

.container{
width:min(1280px,90%);
margin:auto;
}

/* =========================
NEW PREMIUM LIGHT BUTTON FORMATS
========================= */

.btn-group, .btn-wrap {
display:flex;
gap:15px;
margin-top:35px;
flex-wrap:wrap;
}

.ecom-btn {
padding:16px 36px;
border:none;
cursor:pointer;
font-weight:700;
border-radius:10px; 
font-size:15px;
letter-spacing: 0.3px;
text-decoration: none;
position:relative;
overflow:hidden;
display:inline-flex;
align-items:center;
justify-content:center;
z-index: 1;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ecom-btn.fill{
background: #0f172a;
color: #ffffff;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
}

.ecom-btn.outline{
background: #f8fafc;
border: 2px solid #0f172a;
color: #0f172a;
}

/* Hover States */
.ecom-btn.fill:hover {
transform: translateY(-4px);
background: #334155;
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.25);
}

.ecom-btn.outline:hover {
background: #0f172a;
color: #ffffff;
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

/* =========================
REVERSED HERO LAYOUT
========================= */

.hero-section{
padding:140px 0 100px;
}

.hero-flex-layout{
display:grid;
grid-template-columns: 50% 50%; 
gap:60px;
align-items:center;
}

/* LEFT SIDE VISUAL */
.hero-visual-panel {
position: relative;
width: 100%;
}

.main-storefront-frame {
width: 100%;
height: 480px;
border-radius: 24px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);
position: relative;
}

.main-storefront-frame img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Custom overlay shopping tags */
.cart-floating-badge {
position: absolute;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #e2e8f0;
backdrop-filter: blur(16px);
border-radius: 16px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

.badge-top {
top: 30px;
right: -20px;
}

.badge-bottom {
bottom: 40px;
left: -20px;
}

.badge-icon-box {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #2563eb;
font-weight: bold;
font-size: 18px;
}

.badge-info h5 {
font-size: 15px;
color: #0f172a;
font-weight: 700;
}

.badge-info p {
font-size: 12px;
color: #64748b;
}

/* RIGHT SIDE CONTENT */
.hero-content-panel .meta-pill {
display: inline-block;
padding: 8px 16px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.15);
border-radius: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #2563eb;
margin-bottom: 25px;
font-weight: 700;
}

.hero-content-panel h1 {
font-size: 56px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -2px;
margin-bottom: 25px;
color: #0f172a;
}

.hero-content-panel h1 em {
font-style: normal;
color: #2563eb;
}

.hero-content-panel p {
font-size: 18px;
line-height: 1.8;
color: #475569;
}

/* =========================
SPLIT FEATURE SECTION (NEW FORMAT)
========================= */

.showcase-section {
padding: 100px 0;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}

.block-title {
margin-bottom: 70px;
text-align: center;
}

.block-title h2 {
font-size: 44px;
font-weight: 800;
letter-spacing: -1.5px;
margin-bottom: 15px;
color: #0f172a;
}

.block-title p {
font-size: 18px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}

/* Alternating Row Structure */
.showcase-row {
display: flex;
align-items: center;
gap: 80px;
margin-bottom: 80px;
}

.showcase-row:nth-child(even) {
flex-direction: row-reverse;
}

.showcase-media, .showcase-text {
flex: 1;
}

.showcase-media-wrapper {
width: 100%;
height: 380px;
border-radius: 24px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 20px 45px rgba(0,0,0,0.03);
}

.showcase-media-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.showcase-row:hover .showcase-media-wrapper img {
transform: scale(1.02);
}

.showcase-text h3 {
font-size: 32px;
font-weight: 800;
margin-bottom: 20px;
color: #0f172a;
}

.showcase-text p {
font-size: 16px;
line-height: 1.8;
color: #475569;
margin-bottom: 25px;
}

.feature-tag-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.feature-tag {
padding: 8px 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #475569;
}

/* =========================
COMMERCE PERFORMANCE GRID
========================= */

.metrics-section {
padding: 100px 0;
background: white;
border-top: 1px solid rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.03);
}

.metrics-layout-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}

.metric-card-box {
padding: 35px 25px;
background: var(--section-bg);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 16px;
text-align: center;
transition: all 0.3s ease;
}

.metric-card-box:hover {
background-color: #0f172a;
border-color: rgba(59, 130, 246, 0.2);
transform: translateY(-5px);
}

.metric-head {
font-size: 24px;
font-weight: 800;
color: #3b82f6;
margin-bottom: 10px;
}

.metric-card-box h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #a4c8ec;
}

.metric-card-box p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}

/* =========================
EXACT HOME PAGE CTA SECTION
========================= */

.cta-section{
padding:100px 0;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}

.cta-box{
position:relative;
padding:60px;
border-radius:32px;
overflow:hidden;
background: linear-gradient(135deg, rgba(59,130,246,0.03), rgba(139,92,246,0.03));
border: 1px solid #e2e8f0;
box-shadow: 0 30px 60px rgba(0,0,0,0.02);
}

.cta-content{
position:relative;
z-index:2;
max-width:900px;
margin: 0 auto;
text-align: center;
}

.cta-content h2{
font-size:48px;
line-height:1.2;
letter-spacing:-1.5px;
margin-bottom:24px;
font-weight: 800;
color: #0f172a;
}

.cta-content p{
font-size:18px;
line-height:1.8;
color:#475569;
margin-bottom:35px;
}

.cta-section .btn-wrap {
justify-content: center;
}

/* =========================
BANNER DESIGN STRUCTURE
========================= */
.Banner {
        margin-bottom: 0px;
        position: relative;
        background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.85)), url('imgs/banner.avif') no-repeat center center/cover;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 20px;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
    }

    .hero-content h1 {
        font-size: 42px;
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 15px;
        text-transform: uppercase;
        color: white;
    }

    .hero-content h2{
        font-size: 28px;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 0px;
        color: #cbd5e1;
        font-style: italic;
    }

/* =========================
RESPONSIVE DISPLACEMENTS
========================= */

@media(max-width:1200px){
.hero-content-panel h1 { font-size: 46px; }
.showcase-row { gap: 40px; margin-bottom: 60px; }
.metrics-layout-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:1024px){
.hero-flex-layout { grid-template-columns: 1fr; gap: 50px; text-align: center; }
.hero-visual-panel { order: 2; } 
.main-storefront-frame { max-width: 600px; margin: 0 auto; height: 400px; }
.btn-group { justify-content: center; }
.showcase-row, .showcase-row:nth-child(even) { flex-direction: column; gap: 40px; margin-bottom: 60px; }
}

@media(max-width:768px){
.hero-section { padding: 100px 0 60px; }
.hero-content-panel h1 { font-size: 34px; letter-spacing: -1px; }
.block-title h2 { font-size: 30px; }
.block-title p, .hero-content-panel p { font-size: 16px; }
.main-storefront-frame { height: 300px; border-radius: 16px; }
.cart-floating-badge { position: relative; inset: unset; width: 100%; margin-top: 15px; text-align: left; }
.hero-visual-panel { display: flex; flex-direction: column; }
.metrics-layout-grid { grid-template-columns: 1fr; gap: 20px; }
.cta-box { padding: 40px 20px; border-radius: 24px; }
.cta-content h2 { font-size: 32px; letter-spacing: -1px; }
.ecom-btn { width: 100%; }
}