/*:root{--ink:#1a1a1a;--muted:#6b7280;--bg:#ffffff;--alt:#fafafa;--red:#d32f2f;--red-dark:#b71c1c;--card:#ffffff;--border:#e5e7eb}*/
:root {
    /* Core text & surfaces */
    --ink: #e5e7eb; /* light text on dark bg */
    --muted: #9ca3af; /* subtle text */
    --bg: #0a0a0a; /* page background (near-black) */
    --alt: #111318; /* section alt background */
    --card: #0f1115; /* cards, nav, panels */
    --border: #23262d; /* subtle dark border */
    /* Accents (reuse your red, add green for hover) */
    --red: #d32f2f;
    --red-dark: #b71c1c;
    --green: #22c55e; /* hover/affirmative accent */
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;color:var(--ink);background:var(--bg);}
img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.topbar{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:50}
.topbar-wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}

.nav {display: inline-block;padding: 12px 16px;border-radius: 10px;border: 2px solid transparent;font-weight: 700}
.nav a:hover {color: Black;}
.nav{gap:26px}
.nav a {color: var(--red);}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;border:2px solid transparent;font-weight:700}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-outline{background:transparent;border-color:var(--red);color:var(--red)}
.btn-outline:hover {color: Black;}

.heading{background:transparent;border-color:var(--red);color:var(--green)}

.hero{background:linear-gradient(180deg,#fff, #fff 60%, var(--alt));}
.hero-inner{padding:56px 0;text-align:center}
.hero h1{font-size:clamp(28px,6vw,48px);margin:0 0 8px}
.hero p{color:var(--muted);max-width:70ch;margin:0 auto 18px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.section{padding:36px 0}
.section.alt{background:var(--alt)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.card h3{margin:0 0 6px}
.card h3:hover {color: var(--red-dark);}
.price{float:right;color:var(--red);font-weight:800}
.muted{color:var(--muted)}
.mt{margin-top:12px}.mt-lg{margin-top:28px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:10px}
.step{border:1px solid var(--border);border-radius:12px;padding:14px;background:#fff;display:flex;gap:10px;align-items:center}
.step .num{width:28px;height:28px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:8px;font-weight:800}
.listing{display:grid;gap:10px}
.category{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
    .category h2 {
        margin: 0 0 8px;
        color: var(--red);
    }
.menu-item{display:flex;gap:8px;justify-content:space-between;border-top:1px dashed #eee;padding:8px 0}
.menu-item:first-child{border-top:none}
.footer{border-top:1px solid var(--border);background:#fff}
.foot-wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:12px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:8px}
@media(min-width:900px){.nav{display:flex}}
/* ==== Dark theme overrides (append to end of styles.css) ==== */

/* Navigation hover: green (you asked for green hover earlier) */
.nav a:hover {
    color: var(--green);
}

/* Replace hard-coded white surfaces with dark cards */
.topbar,
.footer,
.step,
.category,
.card {
    background: var(--card) !important;
}

/* Borders should be subtle on dark */
.card,
.category,
.step,
.topbar,
.footer {
    border-color: var(--border) !important;
}

/* Hero: remove white banding; keep a very subtle dark gradient */
.hero {
    background: linear-gradient(180deg, var(--bg), var(--bg) 60%, var(--alt)) !important;
}

/* Ensure buttons feel native to dark UI */
.btn-outline {
    color: var(--red);
    border-color: var(--red);
    background: transparent;
}

    .btn-outline:hover {
        color: var(--green);
        border-color: var(--green);
    }

/* Headings & subtle text on dark */
.muted {
    color: var(--muted);
}

/* Optional: menu item divider lines should be darker */
.menu-item {
    border-top: 1px dashed var(--border);
}