:root{--bg:#ffffff;--surface:#ffffff;--primary:#f15a24;--text:#0f172a;--muted:#475569;--card:#ffffff;--ring:rgba(241,90,36,0.35)}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:"Segoe UI",Arial,sans-serif;margin:0;background:#f7fafc;color:var(--text)}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(15,23,42,0.06)}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--text);text-decoration:none}
.logo{height:40px}
.nav a{color:#334155;text-decoration:none;margin-left:1rem}
.nav a:hover{color:#0f172a}
/* Support Bootstrap collapse on desktop - hide navigation by default on mobile */
@media (min-width: 901px) {
  .nav.collapse{display:block}
}
/* Mobile nav toggle */
.menu-toggle{display:none;background:#ffffff;border:1px solid rgba(2,6,23,.12);border-radius:10px;padding:.45rem .6rem;color:#0f172a}
.menu-toggle:focus{outline:2px solid var(--ring)}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;align-items:center;max-width:1120px;margin:2rem auto;padding:2rem 1rem}
.hero-content h1{font-size:2.25rem;margin:.25rem 0}
.hero-content p{color:var(--muted);margin:0 0 1rem}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;padding:.75rem 1.1rem;border-radius:8px;box-shadow:0 6px 20px rgba(241,90,36,.35)}
.hero-art{height:320px;border-radius:16px;background:url("images/stock/hero.jpg") center/cover;box-shadow:0 10px 30px rgba(0,0,0,.08);border:1px solid rgba(15,23,42,.06)}

/* Sections */
.section{max-width:1120px;margin:2rem auto;padding:0 1rem}
.section h2{font-size:1.75rem;margin-bottom:1rem}
.about,.contact{background:#ffffff;border:1px solid rgba(2,6,23,.06);border-radius:16px;padding:1.25rem}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cards.two-col{grid-template-columns:1.25fr .75fr}
.card{background:#ffffff;border:1px solid rgba(2,6,23,.08);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,.06)}
.card img{display:block;width:100%;height:180px;object-fit:cover}
.card h3{margin:.9rem 1rem .4rem}
.card p{margin:0 1rem 1rem;color:var(--muted)}
.card ul{margin:0 1rem 1rem 2rem}
.icon-card{display:flex;align-items:center;justify-content:center}
.icon-lg{width:60%;max-width:320px;filter:drop-shadow(0 10px 20px rgba(241,90,36,.2))}

footer{background:#ffffff;color:#334155;text-align:center;padding:1rem 0;border-top:1px solid rgba(2,6,23,.06)}

/* Responsive */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.steps .step{background:#ffffff;border:1px solid rgba(2,6,23,.08);border-radius:14px;padding:1rem}
.steps .num{display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border-radius:999px;background:#fff3ec;color:#9a3412;margin-right:.5rem;font-weight:700}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.testimonial{display:flex;gap:.75rem;align-items:flex-start;background:#ffffff;border:1px solid rgba(2,6,23,.08);border-radius:14px;padding:1rem}
.avatar{width:48px;height:48px;border-radius:999px;object-fit:cover;border:1px solid rgba(2,6,23,.08)}
.quote{margin:0;color:var(--muted)}
.map{width:100%;height:280px;object-fit:cover;border:1px solid rgba(2,6,23,.08);border-radius:14px}

@media (max-width: 900px){
    .hero{grid-template-columns:1fr}
    .hero-art{height:220px}
    .cards{grid-template-columns:1fr}
    .cards.two-col{grid-template-columns:1fr}
    .nav a{margin-left:0}
    .steps{grid-template-columns:1fr}
    .cases{grid-template-columns:1fr}
    .menu-toggle{display:inline-block}
    .topbar{position:relative}
    .nav{display:none !important;position:absolute;top:100%;left:0;right:0;background:#ffffff;border:1px solid rgba(2,6,23,.12);border-top:none;border-radius:0 0 12px 12px;box-shadow:0 10px 30px rgba(2,6,23,.08);padding:.5rem;margin:0;z-index:60}
    .nav.show{display:block !important}
    .nav a{display:block;margin:.25rem 0;padding:.6rem .75rem;border-radius:8px}
    .nav a:hover{background:#f8fafc}
    .logo{height:34px}
}

/* Forms */
.contact-form{margin-top:1rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1rem}
.contact-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;color:#cbd5e1;margin:0 0 .75rem}
input,textarea{width:100%;margin-top:.35rem;background:#ffffff;border:1px solid rgba(2,6,23,.12);border-radius:8px;color:#0f172a;padding:.65rem}
input:focus,textarea:focus{outline:2px solid var(--ring);border-color:var(--primary)}
body.show-outline :focus{outline:2px solid var(--ring)}
button.btn{border:none;cursor:pointer}
@media (max-width: 700px){.contact-form .grid{grid-template-columns:1fr}}

/* Product pages */
.banner{height:320px;border-radius:16px;background:#f1f5f9 center/cover no-repeat;border:1px solid rgba(2,6,23,.08);box-shadow:0 8px 24px rgba(2,6,23,.06);margin:1rem 0}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lead{font-size:1.1rem;color:var(--muted)}
.badge{display:inline-block;background:#f8fafc;border:1px solid rgba(2,6,23,.08);color:#0f172a;padding:.35rem .6rem;border-radius:999px;margin:.25rem .35rem .25rem 0;font-size:.9rem}
.pill{display:inline-block;background:#fff8f3;border:1px solid rgba(241,90,36,.25);color:#9a3412;padding:.35rem .6rem;border-radius:999px;margin:.25rem .35rem .25rem 0;font-size:.9rem}
.muted{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(2,6,23,.08)}
.faq{margin-top:1rem}
.faq details{background:#ffffff;border:1px solid rgba(2,6,23,.08);border-radius:12px;padding:.75rem 1rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:600}

/* Blog card images */
.card .thumb{width:100%;height:160px;object-fit:cover;display:block}

@media (max-width: 900px){
    .grid-2{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .banner{height:220px}
}

/* Floating actions */
.fab{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:.5rem}
.fab-btn{display:flex;align-items:center;gap:.5rem;background:var(--primary);color:#fff;border:none;border-radius:999px;padding:.65rem .9rem;text-decoration:none;box-shadow:0 10px 30px rgba(241,90,36,.35);cursor:pointer}
.fab-btn:hover{filter:brightness(0.95)}
.fab-top{display:none;background:#0f172a}
.fab-top[data-visible="true"]{display:flex}
@media (max-width:600px){.fab{right:12px;bottom:12px}.fab-btn{padding:.6rem .85rem}}

/* Extra small phones */
@media (max-width: 600px){
    .hero-content h1{font-size:1.6rem}
    .section{padding:0 .75rem}
}