:root{
  --bg-0:#070A12;
  --bg-1:#0B1220;
  --card:#0F1A2E;
  --muted:#94A3B8;
  --text:#E5E7EB;

  /* Logo-inspired accents (gold + cool blue) */
  --gold:#F5C542;
  --gold-2:#FFD76A;
  --blue:#2B8CFF;
  --blue-2:#63B3FF;

  --border: rgba(148,163,184,.18);
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% 0%, rgba(43,140,255,.14), transparent 60%),
              radial-gradient(900px 600px at 90% 20%, rgba(245,197,66,.16), transparent 55%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1));
  overflow-x:hidden;
}

/* Bootstrap tweaks */
.container{max-width: 1140px;}
a{color: inherit}
.text-muted{color: var(--muted) !important}
.bg-dark-2{background: rgba(11,18,32,.72); backdrop-filter: blur(10px);}

.btn-primary{
  border:0;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  box-shadow: 0 10px 24px rgba(43,140,255,.18);
}
.btn-primary:hover{filter: brightness(1.06)}
.btn-outline-light{
  border-color: rgba(255,255,255,.18) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.08);
}
.badge-soft{
  background: rgba(245,197,66,.14);
  color: var(--gold-2);
  border: 1px solid rgba(245,197,66,.25);
}

.navbar{
  transition: all .25s ease;
}
.navbar .nav-link{
  color: rgba(229,231,235,.86);
  font-weight: 600;
}
.navbar .nav-link:hover{color:#fff}
.navbar .nav-link.active{color: var(--gold-2) !important}
.navbar.scrolled{
  background: rgba(7,10,18,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,.12);
}

.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 800; letter-spacing:.2px;
}
.brand img{
  width: 34px; height:34px; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.brand span{
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.76));
  -webkit-background-clip: text; background-clip:text;
  color: transparent;
}

.hero{
  padding-top: 110px;
  padding-bottom: 80px;
  position: relative;
}
.hero::before{
  content:"";
  position:absolute; inset:-2px -2px auto -2px;
  height: 520px;
  background:
    radial-gradient(500px 260px at 25% 35%, rgba(43,140,255,.22), transparent 60%),
    radial-gradient(520px 280px at 70% 20%, rgba(245,197,66,.20), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.hero .content{position:relative; z-index:1}
.hero h1{
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero .lead{
  color: rgba(229,231,235,.78);
  font-size: 1.12rem;
}
.hero-card{
  background: linear-gradient(180deg, rgba(15,26,46,.9), rgba(15,26,46,.65));
  border: 1px solid rgba(148,163,184,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-metric{
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(7,10,18,.35);
  border-radius: 14px;
}
.hero-metric strong{
  font-size: 1.2rem;
  color:#fff;
}
.spark{
  display:inline-block;
  padding:.4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7,10,18,.28);
}

.section{
  padding: 76px 0;
  position:relative;
}
.section-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.section-subtitle{
  color: rgba(229,231,235,.72);
  max-width: 56ch;
}

.diagonal{
  position: relative;
}
.diagonal::before{
  content:"";
  position:absolute;
  top:-1px; left:0; right:0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(7,10,18,.38));
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
  z-index:0;
}
.diagonal::after{
  content:"";
  position:absolute;
  bottom:-1px; left:0; right:0;
  height: 90px;
  background: linear-gradient(180deg, rgba(7,10,18,.2), transparent);
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
  z-index:0;
}
.diagonal > .container{position:relative; z-index:1}

.cardx{
  background: linear-gradient(180deg, rgba(15,26,46,.92), rgba(15,26,46,.62));
  border: 1px solid rgba(148,163,184,.14);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cardx:hover{
  transform: translateY(-4px);
  transition: transform .2s ease;
}
.icon-pill{
  width: 44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(43,140,255,.22), rgba(245,197,66,.18));
  border: 1px solid rgba(148,163,184,.12);
}
.icon-pill svg{opacity:.95}

.timeline{
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 16px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(43,140,255,.65), rgba(245,197,66,.65));
  border-radius: 99px;
  opacity:.75;
}
.t-item{
  position:relative;
  padding-left: 52px;
  margin-bottom: 18px;
}
.t-dot{
  position:absolute;
  left: 8px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  box-shadow: 0 10px 24px rgba(43,140,255,.22);
}
.t-item h6{margin:0 0 .25rem 0; font-weight:800}
.t-item p{margin:0; color: rgba(229,231,235,.72)}

.testi{
  position:relative;
}
.stars{color: var(--gold-2); letter-spacing:1px}
blockquote{margin:0}
.footer{
  border-top: 1px solid rgba(148,163,184,.12);
  background: rgba(7,10,18,.55);
}

.form-control, .form-select{
  background: rgba(7,10,18,.35) !important;
  color: var(--text) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{color: rgba(229,231,235,.48)}
.form-control:focus, .form-select:focus{
  border-color: rgba(43,140,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(43,140,255,.15) !important;
}

.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:grid; place-items:center;
  color: #0b1;
  background: linear-gradient(135deg, #1bd741, #0fae2f);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  border: 0;
}
.whatsapp-float svg{filter: drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.whatsapp-float:hover{filter: brightness(1.06)}

.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

.smallcaps{
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,231,235,.6);
}

/* Make modal darker */
.modal-content{
  background: linear-gradient(180deg, rgba(15,26,46,.98), rgba(15,26,46,.82)) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: var(--radius) !important;
}
.modal-header{
  border-bottom: 1px solid rgba(148,163,184,.12) !important;
}
.modal-footer{
  border-top: 1px solid rgba(148,163,184,.12) !important;
}

/* Responsive fine-tuning */
@media (max-width: 991px){
  .hero{padding-top: 96px}
  .timeline::before{left: 14px}
}


.images-gallery {
    display: flex;
    flex-wrap: wrap;
}

.column img {
    width: 100%;
}

.column {
    width: 33.333333%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.column div {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {

    .column {
        width: 100%;
    }
}