:root{
  --scarlet:#FF2400;
  --scarlet-deep:#C21807;
  --ink:#0f172a;
  --smoke:#f8fafc;
  --muted:#64748b;
}
html,body{height:100%}
body{background:var(--smoke)}

.navbar{background: var(--ink)}
.navbar-brand img{height:36px}
.brand-accent{color:var(--scarlet)}

.hero{
  color:#fff;
  position:relative;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(255,36,0,.20), transparent),
    radial-gradient(1000px 400px at -10% 10%, rgba(194,24,7,.22), transparent),
    linear-gradient(180deg, #0b1020 0%, #0a0f1d 60%, #0a0f1d 100%);
}
.hero:after{
  content:"";
  position:absolute; inset:auto 0 -1px 0; height:80px;
  background:linear-gradient(3deg, transparent 68%, var(--smoke) 69%);
}

.badge-tech{font-weight:600}
.card-img-top{height:180px; object-fit:cover}
.card h3,.card h4{color:var(--ink)}

.btn-scarlet{
  background:linear-gradient(90deg, var(--scarlet), var(--scarlet-deep));
  color:#fff; border:0;
}
.btn-scarlet:hover{filter:brightness(1.05)}
.btn-outline-light{border-color:#ffffff55}

.section-angled{
  position:relative; background:#fff;
}
.section-angled:before{
  content:"";
  position:absolute; inset:-1px 0 auto 0; height:80px;
  background:linear-gradient(183deg, transparent 68%, #fff 69%);
}

.footer{background:#0a0f1d; color:#cbd5e1; border-top:1px solid #ffffff10}

.link-arrow{text-decoration:none}
.link-arrow:hover{text-decoration:underline}