/* ==========================================
   ShopPilot AI - Premium UI
   ========================================== */

:root {

    --bg: #0d1117;
    --card: #151b23;
    --card2: #1d2633;

    --border: rgba(255,255,255,.08);

    --primary: #ff9800;
    --primary2: #ffb74d;

    --text: #ffffff;
    --muted: #9aa4b2;

    --success: #3ddc84;
    --danger: #ff5f56;

    --radius: 22px;

    --shadow:
        0 15px 40px rgba(0,0,0,.35);

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:'Inter',sans-serif;

    line-height:1.6;

}

.container{

    width:min(1200px,92%);
    margin:auto;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    cursor:pointer;
    border:none;

}

img{

    max-width:100%;
    display:block;

}

/* ==================================
        NAVBAR
================================== */

.navbar{

    position:fixed;

    width:100%;

    top:0;

    z-index:999;

    backdrop-filter:blur(20px);

    background:rgba(10,10,10,.55);

    border-bottom:1px solid var(--border);

}

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-icon{

    width:52px;
    height:52px;

    border-radius:15px;

    background:linear-gradient(
        135deg,
        #ff9800,
        #ffcc80
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#111;

    box-shadow:0 10px 25px rgba(255,152,0,.35);

}

.logo-text h2{

    font-size:26px;

    font-weight:800;

}

.logo-text span{

    color:var(--primary);

}

.logo-text p{

    color:var(--muted);

    font-size:13px;

}

.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

}

.nav-links a{

    color:#ddd;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--primary);

}

.status-box{

    background:#17212d;

    border:1px solid var(--border);

    padding:10px 18px;

    border-radius:50px;

    display:flex;

    align-items:center;

    gap:10px;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#00ff7f;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.5);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* ==================================
        HERO
================================== */

.hero{

    padding-top:170px;

    padding-bottom:90px;

}

.eyebrow{

    display:inline-block;

    background:rgba(255,152,0,.12);

    color:#ffb74d;

    padding:10px 18px;

    border-radius:50px;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

}

.hero-title{

    font-family:'Fraunces',serif;

    font-size:72px;

    margin-top:25px;

    line-height:1.1;

}

.hero-title span{

    color:var(--primary);

}

.hero-subtitle{

    margin-top:18px;

    color:#d8d8d8;

    font-size:32px;

}

.hero-description{

    margin-top:28px;

    color:var(--muted);

    font-size:18px;

    max-width:760px;

}

.hero-description span{

    color:#fff;

    font-weight:700;

}
/* ==================================
        SEARCH BOX
================================== */

.search-box{

    margin-top:50px;

    display:grid;

    grid-template-columns:2fr 1fr auto;

    gap:18px;

}

.search-input,
.budget-input{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:14px;

    transition:.35s;

}

.search-input:hover,
.budget-input:hover{

    border-color:var(--primary);

    box-shadow:0 0 25px rgba(255,152,0,.12);

}

.search-input i,
.budget-input i{

    color:var(--primary);

    font-size:20px;

}

.search-input input,
.budget-input input{

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:17px;

}

.search-input input::placeholder,
.budget-input input::placeholder{

    color:#888;

}

#search-btn{

    background:linear-gradient(
        135deg,
        #ff9800,
        #ffb74d
    );

    color:#111;

    font-size:17px;

    font-weight:700;

    padding:0 34px;

    border-radius:18px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(255,152,0,.25);

}

#search-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(255,152,0,.4);

}

#search-btn i{

    margin-right:8px;

}

/* ==================================
        QUICK SEARCH
================================== */

.quick-search{

    margin-top:35px;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:14px;

}

.quick-search span{

    color:#bbb;

    font-weight:600;

}

.chip{

    background:#1d2532;

    color:#ddd;

    padding:12px 18px;

    border-radius:50px;

    border:1px solid var(--border);

    transition:.35s;

    font-size:14px;

}

.chip:hover{

    background:var(--primary);

    color:#111;

    transform:translateY(-2px);

}

/* ==================================
        PIPELINE
================================== */

.pipeline{

    margin:70px 0;

}

.pipeline-card{

    background:var(--card);

    border-radius:25px;

    padding:35px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.pipeline-card h3{

    font-size:26px;

    margin-bottom:30px;

}

.pipeline-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

}

.agent{

    background:var(--card2);

    border-radius:18px;

    padding:20px;

    transition:.35s;

    border:1px solid rgba(255,255,255,.05);

}

.agent:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

}

.agent-top{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    font-weight:700;

}

.agent .dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--success);

    animation:pulse 1.5s infinite;

}

.agent p{

    color:var(--muted);

    font-size:14px;

}

/* ==================================
        RESULTS
================================== */

.results{

    margin-top:60px;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.section-header h2{

    font-size:40px;

    font-family:'Fraunces',serif;

}

.section-header p{

    color:var(--muted);

}

.compare-btn{

    background:transparent;

    border:2px solid var(--primary);

    color:var(--primary);

    padding:14px 22px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.compare-btn:hover{

    background:var(--primary);

    color:#111;

}
/* ==================================
        PRODUCT CARDS
================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

    margin-top:40px;

}

.card{

    position:relative;

    background:var(--card);

    border-radius:24px;

    padding:26px;

    border:1px solid var(--border);

    transition:.4s;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 25px 45px rgba(0,0,0,.45);

}

.card.best{

    border:2px solid var(--primary);

}

.stamp{

    position:absolute;

    top:18px;

    right:-45px;

    width:170px;

    background:linear-gradient(135deg,#ff9800,#ffc107);

    color:#111;

    font-weight:800;

    text-align:center;

    transform:rotate(45deg);

    padding:8px 0;

    font-size:13px;

}

.card-media{

    width:100%;

    height:220px;

    background:#202938;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    margin-bottom:20px;

}

.card-media img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.card-media-fallback{

    font-size:54px;

    font-weight:700;

    color:rgba(255,255,255,.15);

}

.card-rank{

    display:inline-block;

    padding:7px 15px;

    border-radius:30px;

    background:rgba(255,152,0,.15);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    margin-bottom:15px;

}

.card-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

}

.card-tag{

    display:inline-block;

    padding:7px 12px;

    background:#283243;

    color:#ddd;

    border-radius:50px;

    font-size:13px;

    margin-bottom:18px;

}

.card-price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.card-price{

    font-size:30px;

    color:var(--primary);

    font-weight:800;

}

.card-rating{

    color:#f7c948;

    font-weight:600;

}

.card-reasoning{

    color:var(--muted);

    line-height:1.8;

    margin:18px 0;

}

.card-value{

    background:#202938;

    border-radius:14px;

    padding:14px;

    margin-bottom:20px;

    color:#ddd;

}

.review-snippet{

    border-left:4px solid var(--primary);

    background:#1d2532;

    padding:18px;

    border-radius:14px;

    margin-bottom:20px;

}

.review-snippet p{

    color:#ddd;

    line-height:1.8;

}

.snippet-confidence{

    display:block;

    margin-top:12px;

    color:var(--primary);

    font-size:13px;

}

.proscons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:20px;

}

.pros-col,
.cons-col{

    background:#1d2532;

    padding:16px;

    border-radius:16px;

}

.pros-col span{

    color:#00e676;

    font-weight:700;

}

.cons-col span{

    color:#ff6b6b;

    font-weight:700;

}

.pros-col ul,
.cons-col ul{

    margin-top:12px;

    padding-left:20px;

}

.pros-col li,
.cons-col li{

    color:#ccc;

    margin-bottom:8px;

}

.card-features{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}

.feature-pill{

    background:#2a3446;

    color:#ddd;

    padding:8px 14px;

    border-radius:40px;

    font-size:13px;

}

.card-link{

    display:block;

    text-align:center;

    background:linear-gradient(135deg,#ff9800,#ffc107);

    color:#111;

    padding:15px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

}

.card-link:hover{

    transform:translateY(-3px);

}
/* ==================================
        COMPARE TABLE
================================== */

.compare-section{

    margin-top:70px;

}

.compare-section h2{

    font-family:'Fraunces',serif;

    margin-bottom:25px;

    font-size:38px;

}

#compare-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:18px;

    background:var(--card);

}

#compare-table th{

    background:#222c39;

    color:#ffb74d;

    padding:18px;

    text-align:left;

}

#compare-table td{

    padding:18px;

    border-top:1px solid rgba(255,255,255,.06);

    color:#ddd;

}

#compare-table tr:hover{

    background:#1b2430;

}



/* ==================================
        EMPTY STATE
================================== */

.empty-state{

    margin:80px 0;

}

.empty-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

}

.empty-card,
.feature-card{

    background:var(--card);

    border-radius:22px;

    padding:40px;

    border:1px solid var(--border);

}

.empty-icon{

    font-size:60px;

    margin-bottom:20px;

}

.empty-card h2{

    font-size:38px;

    margin-bottom:15px;

}

.empty-card p{

    color:var(--muted);

    margin-bottom:12px;

}

.feature-card h3{

    margin-bottom:20px;

    font-size:24px;

}

.feature-card ul{

    list-style:none;

}

.feature-card li{

    margin:14px 0;

    color:#ddd;

}



/* ==================================
        ERROR
================================== */

.error-card{

    background:#301b1b;

    border:1px solid #ff4d4d;

    color:white;

    padding:35px;

    border-radius:20px;

}



/* ==================================
        FOOTER
================================== */

footer{

    margin-top:80px;

    border-top:1px solid rgba(255,255,255,.08);

    padding:35px 0;

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#999;

}



/* ==================================
        HIDDEN
================================== */

.hidden{

    display:none;

}



/* ==================================
        SCROLLBAR
================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#ff9800;

    border-radius:50px;

}



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

@media(max-width:1000px){

.nav-container{

flex-direction:column;

gap:20px;

}

.hero-title{

font-size:55px;

}

.pipeline-grid{

grid-template-columns:repeat(2,1fr);

}

.empty-layout{

grid-template-columns:1fr;

}

.search-box{

grid-template-columns:1fr;

}

.section-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.footer-content{

flex-direction:column;

gap:15px;

}

}

@media(max-width:700px){

.hero{

padding-top:140px;

}

.hero-title{

font-size:42px;

}

.hero-subtitle{

font-size:24px;

}

.cards{

grid-template-columns:1fr;

}

.pipeline-grid{

grid-template-columns:1fr;

}

.nav-links{

display:none;

}

.logo-text h2{

font-size:22px;

}

.compare-section{

overflow:auto;

}

}