:root{
    /* Light theme */
    --bg:#f6f8fc;
    --card:#ffffff;
    --muted:#5a677a;
    --text:#111827;
    --accent:#0284c7;   /* blue */
    --accent2:#f59e0b;  /* amber */
    --ok:#059669;       /* green */
    --danger:#dc2626;   /* red */
    --border:rgba(17,24,39,.12);
    --shadow:0 10px 24px rgba(17,24,39,.08);
    --radius:18px;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    background:
    radial-gradient(1200px 600px at 10% 0%, rgba(2,132,199,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(245,158,11,.10), transparent 60%),
    var(--bg);
    color:var(--text);
    line-height:1.45;
}
a{color:inherit}
.container{
    width:min(1140px, 92vw);
    margin:0 auto;
    padding:28px 0 60px;
}

/* Header */
.topbar{
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    padding:18px 0 8px;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}
.logo{
    width:52px;height:52px;
    border-radius:14px;
    background: linear-gradient(145deg, rgba(2,132,199,.20), rgba(245,158,11,.14));
    border:1px solid var(--border);
    display:grid;
    place-items:center;
    box-shadow: var(--shadow);
    font-weight:900;
    letter-spacing:.5px;
    color:#0b2a3b;
}
.logo img{
    width:36px;
    height:auto;
}
.brand h1{
    margin:0;
    font-size:16px;
    letter-spacing:.2px;
}
.brand p{
    margin:2px 0 0;
    color:var(--muted);
    font-size:13px;
}
.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.85);
    text-decoration:none;
    color:var(--text);
    box-shadow: 0 6px 14px rgba(17,24,39,.06);
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition: transform .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: #fff; }
.btn.primary{
    background: linear-gradient(135deg, rgba(2,132,199,.14), rgba(2,132,199,.06));
    border-color: rgba(2,132,199,.30);
    color:#073b57;
}
.btn.warn{
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.07));
    border-color: rgba(245,158,11,.30);
    color:#5a3b00;
}

/* Hero */
.hero{
    margin-top:16px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.90);
    border-radius: var(--radius);
    padding:22px;
    box-shadow: var(--shadow);
    display:grid;
    /* grid-template-columns: 1.2fr .8fr; */
    gap:18px;
    align-items:center;
    text-align: center;
}
.hero h2{
    margin:0 0 10px;
    font-size:26px;
    line-height:1.15;
    letter-spacing:.2px;
}
.hero p{
    margin:0 0 14px;
    color:var(--muted);
    font-size:14px;
}
.pillrow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-self: center;
}
.pill{
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(17,24,39,.03);
    color: var(--text);
    font-size:13px;
    font-weight:700;
}
.pill strong{ color: var(--accent2); }

.heroCard{
    border:1px solid var(--border);
    background: rgba(17,24,39,.02);
    border-radius: var(--radius);
    padding:16px;
}
.heroCard .line{
    display:flex; justify-content:space-between; gap:12px;
    padding:10px 0;
    border-bottom:1px dashed rgba(17,24,39,.18);
    font-size:14px;
}
.heroCard .line:last-child{ border-bottom:none; }
.heroCard .label{ color: var(--muted); }
.heroCard .value{ font-weight:850; }

@media (max-width: 900px){
    .hero{ grid-template-columns: 1fr; }
}

/* Controls */
.controls{
    margin:18px 0 14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
}
.search{
    flex: 1 1 280px;
    display:flex;
    gap:10px;
    align-items:center;
    border:1px solid var(--border);
    background: rgba(255,255,255,.92);
    padding:10px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(17,24,39,.06);
    min-width: 260px;
}
.search input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color: var(--text);
    font-size:14px;
}
.chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.chip{
    padding:8px 12px;
    border-radius: 999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.90);
    color: var(--text);
    font-size:13px;
    cursor:pointer;
    user-select:none;
    transition: background .15s ease, transform .15s ease;
}
.chip:hover{ background: #fff; transform: translateY(-1px); }
.chip.active{
    border-color: rgba(2,132,199,.35);
    background: rgba(2,132,199,.10);
    color:#073b57;
    font-weight:800;
}

/* Grid */
.grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}
@media (max-width: 980px){
    .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
    .grid{ grid-template-columns: 1fr; }
}

.card{
    border:1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow);
    display:flex;
    flex-direction:column;
    min-height: 380px;
}
.imgwrap{
    aspect-ratio: 16/10;
    background:
    radial-gradient(400px 240px at 30% 20%, rgba(2,132,199,.12), transparent 60%),
    radial-gradient(400px 240px at 80% 30%, rgba(245,158,11,.10), transparent 60%),
    rgba(17,24,39,.02);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.imgwrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:none; /* show only if you set src */
}
.placeholder{
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:center;
    padding:16px;
    color: var(--muted);
    font-weight:750;
}
.placeholder small{ font-weight:650; opacity:.95; }

.content{
    padding:14px 14px 12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}
.title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.title h3{
    margin:0;
    font-size:16px;
    line-height:1.25;
    letter-spacing:.2px;
}
.badge{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(220,38,38,.25);
    background: rgba(220,38,38,.08);
    color: var(--danger);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:6px;
}
.tag{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(17,24,39,.02);
    font-size:12px;
    color: var(--muted);
    font-weight:700;
}

.pricing{
    margin-top:2px;
    border:1px solid rgba(17,24,39,.10);
    background: rgba(17,24,39,.02);
    border-radius: 14px;
    padding:12px;
    display:grid;
    gap:10px;
}
.row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
}
.row .k{ color: var(--muted); }
.row .v{ font-weight:900; }
.old{
    color: #6b7280;
    text-decoration: line-through;
    font-weight:800;
}
.discount{
    color: var(--danger);
    font-weight:950;
}
.final{
    font-size:16px;
    font-weight:950;
    color: #8a5a00; /* readable amber tone */
    letter-spacing:.2px;
}

.cardFooter{
    padding:12px 14px 14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--border);
    background: rgba(17,24,39,.01);
}
.mini{
    font-size:12px;
    color: var(--muted);
}
.ctaRow{
    display:flex;
    gap:8px;
    justify-content: space-between;
    width: 100%;
    /* flex-wrap:wrap; */
}
.ctaRow .btn{
    flex: 1;
    white-space: nowrap;
    font-size: 13px;
    padding: 10px 5px;
    text-align: center;
}

/* Lead section */
.lead{
    margin-top:18px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.92);
    border-radius: var(--radius);
    padding:18px;
    box-shadow: var(--shadow);
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    align-items:start;
}
@media (max-width: 900px){
    .lead{ grid-template-columns: 1fr; }
}
.lead h4{ margin:0 0 8px; font-size:18px; }
.lead p{ margin:0 0 12px; color: var(--muted); font-size:14px; }
form{
    display:grid;
    gap:10px;
}
.field{
    display:grid;
    gap:6px;
    font-size:13px;
    color: var(--muted);
    font-weight:750;
}
input, textarea, select{
    width:100%;
    padding:12px 12px;
    border-radius: 12px;
    border:1px solid var(--border);
    background: #fff;
    color: var(--text);
    outline:none;
    font-size:14px;
    box-shadow: 0 6px 14px rgba(17,24,39,.05);
}
textarea{ min-height: 96px; resize:vertical; }
.note{
    margin-top:10px;
    color: var(--muted);
    font-size:12px;
}
footer{
    margin-top:18px;
    color: var(--muted);
    font-size:12px;
    text-align:center;
}