/* Theme: Bigz Red — matches the glossy black + red biGz logo.
   Builds on the Clean & Light theme (white header so the black logo stays visible),
   then adds charcoal sections, red glow and glossy red buttons. */
@import url('theme-bigz.css?v=4');

html:root{
  --primary:#0b0b0d;          /* logo black */
  --blue:#e10600;             /* logo red (used as the brand colour) */
  --accent:#ff3b30;           /* glow red */
  --ink:#111114;
  --muted:#5a5d66;
  --line:#ececf0;
  --bg-alt:#f7f7f8;
  --red-glow:0 10px 30px rgba(225,6,0,.28);
}

/* Header: white, red details */
.brand b{color:var(--blue)}
.menu a.active,.menu a:not(.btn):hover{color:var(--ink);background:#fff1f0}
.nav.scrolled{box-shadow:0 6px 24px rgba(11,11,13,.08)}

/* Glossy red buttons (like the red ball in the logo) */
.btn:not(.btn-white):not(.btn-ghost):not(.btn-outline):not(.btn-outline-dark):not(.btn-p){
  background:linear-gradient(180deg,#ff3b30 0%,#e10600 55%,#b30500 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--red-glow);
  border:0}
.btn:not(.btn-white):not(.btn-ghost):not(.btn-outline):not(.btn-outline-dark):not(.btn-p):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 36px rgba(225,6,0,.38)}
.btn-white,.cta-band .btn-white,.cta-card .btn-white{color:#e10600}

/* Hero: charcoal with red glow and a glossy sheen */
.hero{background:#0b0b0d;color:#fff}
.hero-bg{background:
  radial-gradient(700px 380px at 78% 18%,rgba(225,6,0,.42),transparent 65%),
  radial-gradient(520px 320px at 8% 95%,rgba(255,59,48,.20),transparent 65%),
  linear-gradient(160deg,#18181c 0%,#0b0b0d 60%)}
.hero-bg::after{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
.hero h1{color:#fff}
.grad{background:linear-gradient(90deg,#ff3b30,#ff7a6e);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:rgba(255,255,255,.72)}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:none}
.dot{background:radial-gradient(circle at 35% 30%,#ff8a80,#e10600 60%,#8f0300);box-shadow:0 0 12px rgba(225,6,0,.7)}
.hero .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);box-shadow:none}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08)}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.stat strong{color:#fff}
.stat span{color:rgba(255,255,255,.62)}
.stat svg{color:#ff3b30!important}
.mock{border-color:rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(225,6,0,.15)}
.mock-chart span{background:linear-gradient(180deg,#ff3b30,#e10600 60%,#7a0300)}
.mock-kpis div:first-child b,.mock-side i:first-child{background:#ffd5d2}

/* Inner page banner: charcoal with red glow */
.page-hero{background:#0b0b0d;color:#fff;border-bottom:0}
.page-hero .hero-bg{background:radial-gradient(640px 280px at 85% 0%,rgba(225,6,0,.35),transparent 70%),linear-gradient(160deg,#18181c,#0b0b0d)}
.page-hero h1{color:#fff}
.page-hero p,.crumbs{color:rgba(255,255,255,.65)}
.crumbs a:hover{color:#fff}
.crumbs span{color:#ff3b30}

/* Cards: white; icon tiles look like the logo (black tile, red symbol); red glow on hover */
.ic,.card.dark .ic,.pr-top .ic{background:linear-gradient(160deg,#26262b,#0b0b0d);color:#ff3b30;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.card:hover .ic{background:linear-gradient(180deg,#ff3b30,#b30500);color:#fff}
.card:hover,.feat:hover,.why:hover,.product:hover,.post-card:hover,.proj-card:hover,.step:hover{border-color:rgba(225,6,0,.35);box-shadow:0 18px 40px rgba(225,6,0,.10)}
.eyebrow{background:#fff1f0;color:#e10600}
.why .num{color:rgba(225,6,0,.14)}
.checks svg{color:#e10600;background:#fff1f0}
.tag{background:#fff1f0;color:#c40500}
.more{color:#e10600}

/* Dark sections: charcoal with red glow */
.sec-dark{background:radial-gradient(700px 300px at 85% 0%,rgba(225,6,0,.22),transparent 70%),#0b0b0d;color:#fff}
.sec-dark .sec-head h2{color:#fff}
.sec-head.light p{color:rgba(255,255,255,.65)}
.sec-head.light .eyebrow{background:rgba(225,6,0,.16);color:#ff6b61}
.ind{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;box-shadow:none}
.ind svg{color:#ff3b30}
.ind:hover{background:linear-gradient(180deg,#ff3b30,#b30500);border-color:transparent;color:#fff}
.ind:hover svg{color:#fff}
.card.dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.card.dark p{color:rgba(255,255,255,.62)}
.card.dark h3{color:#fff}

/* Pricing */
.plan.hot{border:2px solid #e10600;box-shadow:0 20px 50px rgba(225,6,0,.16)}
.plan-badge{background:#fff1f0;color:#c40500}
.plan.hot .plan-badge{background:linear-gradient(180deg,#ff3b30,#c40500);color:#fff}
.price-tabs a:hover{color:#e10600;background:#fff1f0}
.ind-stat{background:#0b0b0d;color:#fff}
.ind-stat b{color:#ff3b30}
.svc-art{background:radial-gradient(360px 240px at 70% 25%,rgba(225,6,0,.45),transparent 70%),linear-gradient(160deg,#1c1c21,#0b0b0d);border:0}
.svc-art svg{color:#fff}
.svc-art span{color:rgba(255,255,255,.07)}
.step-n{background:linear-gradient(180deg,#ff3b30,#c40500)}

/* CTA band: black with red glow */
.cta-band{background:radial-gradient(600px 260px at 85% 50%,rgba(225,6,0,.45),transparent 70%),linear-gradient(120deg,#18181c,#0b0b0d)}
.cta-card{background:radial-gradient(300px 200px at 80% 0%,rgba(225,6,0,.5),transparent 70%),linear-gradient(160deg,#1c1c21,#0b0b0d)}
.cta-band .btn-ghost,.cta-card .btn-ghost{border-color:rgba(255,255,255,.45)}

/* Footer: black, logo on a white chip so it stays visible */
.foot{background:#0b0b0d;color:rgba(255,255,255,.65);border-top:3px solid #e10600}
.foot h4{color:#fff}
.foot-grid > div > a:not(.brand):hover,.legal a:hover{color:#ff3b30}
.foot .brand,.foot .brand.light{color:#fff}
.foot .brand img{background:#fff;border-radius:10px;padding:4px 8px}
.copy{border-top-color:rgba(255,255,255,.08)}
.socials a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff}
.socials a:hover{background:#e10600;border-color:#e10600}
.to-top{background:#e10600}

/* The logo already spells biGz: hide the repeated brand text next to it */
.brand img ~ span{display:none!important}