:root{
  --bg:#2d2c2c;
  --panel:#0f1720;
  --panel2:#0c121a;
  --text:#e8eef6;
  --muted:#a8b3c2;
  --brand:#ff6a1a; /* orange accent */
  --brand2:#ff8a46;
  --border:rgba(255,255,255,.10);
  --shadow: 0 12px 35px rgba(0,0,0,.45);
  --orange: #FC5404;
}

html { scroll-behavior:smooth; }
body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,106,26,.15), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(255,106,26,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: "DM Sans",sans-serif;
}
h1,h2,h3,h4 {
 	font-family:"Oswald";   
}
a {color:var(--orange); text-decoration:none}
a:hover {
 	text-decoration:underline;   
}

/* Utilities */
.text-muted-2{ color: var(--muted) !important; }
.bg-panel{ background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,1)); }
.shadow-soft{ box-shadow: var(--shadow); }
.rounded-4{ border-radius: 1rem; }
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand2);
  --bs-btn-hover-border-color: var(--brand2);
  --bs-btn-color: #111;
  font-weight: 700;
  letter-spacing: .2px;
}
.btn-outline-brand{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: rgba(255,106,26,.60);
  --bs-btn-hover-bg: rgba(255,106,26,.12);
  --bs-btn-hover-border-color: var(--brand);
  font-weight: 700;
}
.badge-soft{
  background: rgba(255,106,26,.12);
  border: 1px solid rgba(255,106,26,.25);
  color: var(--text);
}

/* Top bar */
.topbar{
  background: rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
}
.topbar a{ color: var(--text); text-decoration:none; }
.topbar a:hover{ color: var(--brand2); }

/* Navbar */
.navbar{
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.70);
  border-bottom:1px solid var(--border);
}
.navbar .nav-link{ color: var(--text); opacity:.92; font-weight:600; }
.navbar .nav-link:hover{ color: var(--brand2); }
.navbar .dropdown-menu{
  background: rgba(15,23,32,.95);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.navbar .dropdown-item{ color: var(--text); }
.navbar .dropdown-item:hover{ background: rgba(255,106,26,.10); color: var(--text); }

/* Hero */
.hero{
  position:relative;
  min-height: 78vh;
  display:flex;
  align-items:center;
  padding: 5.5rem 0 3.5rem;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,15,20,.92) 0%, rgba(11,15,20,.72) 40%, rgba(11,15,20,.25) 100%),
    url("../img/20220614_100606-scaled.avif");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(700px 350px at 20% 25%, rgba(255,106,26,.20), transparent 60%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; }
.hero-kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  font-weight:700;
  letter-spacing:.12em;
  font-size:.85rem;
  color: var(--muted);
  text-transform:uppercase;
}
.hero h1{
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height:1.05;
  margin:.75rem 0 1rem;
  font-weight: 800;
}
.hero p.lead{
  color: var(--muted);
  max-width: 52ch;
}
.hero-pills .pill{
  display:flex; gap:.65rem; align-items:center;
  padding:.7rem .85rem;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  font-weight:700;
  font-size:.95rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.hero-pills i{ color: var(--brand); }

.fa-check {color:#FC5404}

/* Section headings */
.section{
  padding: 4.5rem 0;
}
.section-title{
  font-weight: 850;
  letter-spacing: .2px;
  font-size:2em;
}
.section-sub{
  color: var(--muted);
  max-width: 70ch;
}

/* Image cards */
.img-card{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.img-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* “How it works” */
.steps .icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,106,26,.12);
  border: 1px solid rgba(255,106,26,.25);
  color: var(--brand2);
  flex: 0 0 auto;
}




/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,106,26,.55);
  box-shadow: 0 0 0 .25rem rgba(255,106,26,.15);
  color: var(--text);
}
.form-control::placeholder{ color: rgba(232,238,246,.55); }

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active, .btn:hover {
    color: var(--bs-btn-active-color);
    background-color: #d2a942;
    border-color: #ffc107;
    text-decoration: none;
}

/* Footer */
footer{
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
footer a{ color: var(--text); text-decoration:none; }
footer a:hover{ color: var(--brand2); }

/* Small tweaks */
@media (max-width: 991.98px){
  .hero{
    padding-top: 4.5rem;
    min-height: 72vh;
  }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(11,15,20,.92) 0%, rgba(11,15,20,.72) 55%, rgba(11,15,20,.35) 100%),
      url("https://rivalgraphixco.com/wp-content/uploads/2023/01/Buddy_s4-1-scaled.jpg");
    background-position: center;
  }
}