/* Index page premium visuals and responsive rules */
:root{
    --accent:#FFD60A;
    --accent-2:#FF7F11;
    --muted:#1e293b;
    --bg:#071223;
    --card:#0f172a;
}

/* Hero tweaks */
.hero{background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.55)), url('../images/ui/hero-bg.png') center/cover no-repeat; height:80vh; display:flex; align-items:center;}
.hero-overlay{padding:80px 0;}
.hero-content{ text-align:left; color:white; max-width:900px;}
.hero h1{font-size:48px; letter-spacing:1px; margin-bottom:8px; text-shadow:0 10px 40px rgba(0,0,0,0.6);}
.hero p{font-size:18px; opacity:0.9; margin-bottom:18px;}
.hero-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#000; padding:14px 26px; border-radius:12px; font-weight:700; box-shadow:0 15px 40px rgba(255,133,43,0.12);}

/* SEARCH SECTION - premium glass card */
.search-section{padding:36px 0 50px; background:linear-gradient(180deg, rgba(7,12,20,0.18), rgba(5,8,14,0.05));}
.search-section .container{display:flex; justify-content:center}
.search-card{width:100%; max-width:1100px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:16px; padding:18px; box-shadow:0 30px 60px rgba(2,6,23,0.6); display:flex; align-items:center; gap:18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.03);}
.search-form{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; width:100%; align-items:center}
.search-form select, .search-form input{appearance:none; -webkit-appearance:none; -moz-appearance:none; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); padding:12px 14px; border-radius:10px; color:#e6eef8; font-weight:600; transition:transform .18s ease, box-shadow .18s ease}
.search-form select:focus, .search-form input:focus{outline:none; box-shadow:0 8px 30px rgba(0,0,0,0.6), 0 0 0 4px rgba(255,214,10,0.05); transform:translateY(-2px)}
.search-form select{background-image:linear-gradient(45deg,transparent 50%, rgba(255,255,255,0.15) 50%), linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.05)); background-position:calc(100% - 18px) calc(1em + 2px), 0 0; background-size:8px 8px, 100% 100%; background-repeat:no-repeat}
.search-form .btn{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#000; padding:12px 20px; border-radius:12px; font-weight:800; border:none; box-shadow:0 12px 30px rgba(255,133,43,0.12); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease}
.search-form .btn:hover{transform:translateY(-4px); box-shadow:0 22px 50px rgba(255,133,43,0.18)}
.search-left{display:flex; gap:12px; align-items:center}
.search-left h3{color:#e6eef8; margin-right:8px; font-size:18px}

/* Small animated micro-icon */
.search-icon{width:40px;height:40px;border-radius:8px;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:800;box-shadow:inset 0 -6px 18px rgba(0,0,0,0.25)}

/* Responsive */
@media(max-width:900px){
    .search-form{grid-template-columns:1fr;}
    .search-card{flex-direction:column; padding:16px}
    .search-icon{align-self:flex-start}
}

/* Models slider - premium cards */
.models-slider h2{margin-bottom:18px; font-size:28px;}
.slider-wrapper{position:relative; display:flex; align-items:center;}
.slider-btn{background:rgba(0,0,0,0.5); color:var(--accent); border:none; width:48px; height:48px; border-radius:50%; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.4);}
.slider-container{display:flex; gap:20px; overflow-x:auto; padding:10px; scroll-behavior:smooth;}
.model-card{min-width:260px; background:linear-gradient(180deg,var(--card), #071424); border-radius:16px; overflow:hidden; box-shadow:0 30px 60px rgba(2,6,23,0.7); transform:translateY(0); transition:transform .4s ease, box-shadow .4s ease;}
.model-card:hover{transform:translateY(-10px); box-shadow:0 45px 90px rgba(2,6,23,0.85);} 
.model-card img{width:100%; height:260px; object-fit:cover; display:block;}
.model-card .model-info{padding:14px;}
.model-card h3{font-size:18px; margin-bottom:6px;}
.model-card p{color:#cbd5e1; font-size:13px; margin-bottom:8px;}
.model-card .btn{background:var(--accent); color:#000; padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none; display:inline-block;}

/* Shop card uplift */
.shop-preview{padding:60px 0;}
.shop-preview h2{font-size:28px; margin-bottom:6px; color:var(--accent);} 
.shop-card{
    position:relative;
    background:linear-gradient(180deg,#071e2b,#071522);
    padding:0;
    border-radius:16px;
    overflow:hidden;
    text-align:left;
    box-shadow:0 30px 80px rgba(2,6,23,0.75);
    transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s ease;
    will-change:transform;
}
.shop-card:hover{transform:translateY(-14px) scale(1.02); box-shadow:0 60px 120px rgba(2,6,23,0.85);} 
.shop-card::after{ /* subtle glass reflection */
    content:''; position:absolute; left:-30%; top:-50%; width:60%; height:120%; transform:rotate(25deg);
    background:linear-gradient(120deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    pointer-events:none; mix-blend-mode:overlay;
}
.shop-card img{width:100%; height:200px; object-fit:cover; display:block;}
.shop-card .shop-body{padding:16px;}
.shop-card h3{color:#fff; font-size:16px; margin-bottom:6px}
.shop-card p{color:#9fb0c3; font-size:13px; margin-bottom:12px}

.price-badge{
    position:absolute; right:12px; top:12px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:#111; padding:8px 12px; border-radius:12px; font-weight:800; box-shadow:0 10px 30px rgba(255,133,43,0.12);
}

/* Add subtle hover glow */
.shop-card .shop-actions{display:flex; justify-content:space-between; align-items:center; gap:10px}
.shop-card .shop-actions .btn{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--accent); padding:8px 12px; border-radius:10px}
.shop-card .shop-actions .btn.buy{background:var(--accent); color:#000; border:none}

/* grid */
.shop-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:20px}

/* entrance animation for shop cards */
@keyframes floatIn {
    from{opacity:0; transform:translateY(18px) scale(.995)}
    to{opacity:1; transform:none}
}
.shop-card.reveal{opacity:0; transform:translateY(16px);}
.shop-card.visible{animation:floatIn .6s ease forwards}

/* CTA section heavier */
.cta-section{background:linear-gradient(90deg, rgba(12,20,30,0.9), rgba(5,8,18,0.95)); padding:60px 0; border-top:1px solid rgba(255,255,255,0.02);}
.cta-section h2{color:var(--accent);}

/* FAQ Section */
.faq-section{padding:60px 0; background:linear-gradient(180deg, rgba(10,14,20,0.4), rgba(7,10,15,0.2));}
.faq-grid{display:grid; grid-template-columns:1fr 420px; gap:30px; align-items:start;}
.faq-list{background:linear-gradient(180deg,#071722,#0b2633); border-radius:14px; padding:18px; box-shadow:0 30px 60px rgba(2,6,23,0.7);} 
.faq-item{border-bottom:1px solid rgba(255,255,255,0.03);}
.faq-question{cursor:pointer; padding:16px; display:flex; justify-content:space-between; align-items:center; color:var(--accent); font-weight:700;}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .36s ease, padding .28s ease; padding:0 16px; color:#cbd5e1;}
.faq-item.open .faq-answer{padding:12px 16px; max-height:240px;}
.faq-side{padding:20px;}
.faq-side h3{color:var(--accent); margin-bottom:10px;}

/* Contact section */
.contact-section{padding:60px 0;}
.contact-card{background:linear-gradient(180deg,#071722,#071a26); padding:28px; border-radius:14px; box-shadow:0 30px 80px rgba(2,6,23,0.75);} 
.contact-form input, .contact-form textarea{width:100%; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:#e6eef8; margin-bottom:12px;}
.contact-form button{background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none; padding:12px 18px; border-radius:10px; font-weight:700; cursor:pointer;}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1; transform:none;}

/* Toast */
.index-toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:rgba(12,18,28,0.95); color:#fff; padding:12px 20px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.6); opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:9999}
.index-toast.visible{opacity:1; transform:translateX(-50%) translateY(-6px)}
.index-toast.success{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#000}
.index-toast.error{background:#ff6b6b}

/* Responsive */
@media(max-width:992px){
    .faq-grid{grid-template-columns:1fr;}
    .faq-side{order:2}
}
@media(max-width:700px){
    .hero h1{font-size:30px}
    .model-card img{height:200px}
}


/* Contact form css */

.contact-msg{
margin-bottom:15px;
}

.success-msg{
background:#16a34a;
color:#fff;
padding:10px;
border-radius:6px;
}

.error-msg{
background:#dc2626;
color:#fff;
padding:10px;
border-radius:6px;
}