:root{
  --bg:#081120;
  --bg-soft:#0e1728;
  --card:#0f1a2f;
  --line:rgba(255,255,255,.08);
  --text:#eef3fb;
  --muted:#b7c1d5;
  --blue:#47b7ff;
  --blue-2:#3b82f6;
  --gold:#f5be51;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

html { scroll-behavior:smooth; }
body{
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(71,183,255,.10), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(245,190,81,.12), transparent 18%),
    linear-gradient(180deg, #07101d 0%, #0b1220 42%, #0d1524 100%);
}

a{ text-decoration:none; }
.site-navbar{
  background: rgba(5,10,18,.72) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar-brand{
  letter-spacing:.18em;
  font-weight:800;
}
.nav-link{
  color:#d8e1ef !important;
  font-weight:500;
}
.nav-link:hover{ color:#fff !important; }

.btn-reten{
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  color:#fff;
  border:0;
  box-shadow: 0 12px 25px rgba(59,130,246,.28);
}
.btn-reten:hover{ color:#fff; filter:brightness(1.05); }
.btn-outline-reten{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  background: rgba(255,255,255,.02);
}
.btn-outline-reten:hover{
  color:#fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.hero{
  position:relative;
  padding:7rem 0 4.5rem;
  overflow:hidden;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#d7e0ef;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height:.95;
  letter-spacing:-.04em;
  font-weight:800;
}
.hero .lead{
  font-size:1.16rem;
  color:var(--muted);
  max-width: 720px;
}
.hero-visual-wrap{
  position:relative;
}
.hero-visual{
  border-radius: 1.6rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  background:#0a1120;
}
.hero-visual img{
  width:100%;
  display:block;
}
.logo-float{
  position:absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width:min(34%, 200px);
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.logo-float img{ width:100%; display:block; }

.section{
  padding: 4.5rem 0;
}
.section-header{
  max-width: 760px;
  margin-bottom: 2rem;
}
.kicker{
  color:#9eb1c9;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.82rem;
  margin-bottom:.8rem;
}
.section h2{
  font-weight:800;
  letter-spacing:-.03em;
  font-size: clamp(2rem, 4vw, 3.3rem);
}
.section p.lead, .section .section-text{
  color:var(--muted);
}

.stat-card, .glass-card, .logo-card, .feature-card, .contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.4rem;
  box-shadow: var(--shadow);
}
.stat-card{
  padding:1.4rem;
  height:100%;
}
.stat-card .stat-label{
  color:#9cb1cd;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
}
.stat-card .stat-value{
  font-size:2rem;
  font-weight:800;
  margin-top:.5rem;
}
.stat-card .stat-note{
  color:var(--muted);
  margin-top:.35rem;
  font-size:.95rem;
}

.logo-card{
  min-height: 170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  position:relative;
  overflow:hidden;
}
.logo-card:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top right, rgba(71,183,255,.08), transparent 28%);
}
.logo-card img{
  max-width:100%;
  max-height:84px;
  object-fit:contain;
  filter: grayscale(100%) contrast(110%);
  position:relative;
}
.logo-card:hover img{ filter:none; }

.feature-card{
  padding:1.6rem;
  height:100%;
}
.feature-icon{
  width:3rem;
  height:3rem;
  border-radius:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(71,183,255,.18), rgba(245,190,81,.18));
  color:#fff;
  font-weight:700;
  margin-bottom:1rem;
}
.feature-card h3{
  font-size:1.18rem;
  font-weight:700;
}
.feature-card p{
  color:var(--muted);
  margin-bottom:0;
}

.image-panel{
  overflow:hidden;
  border-radius:1.5rem;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.08);
}
.image-panel img{
  width:100%;
  display:block;
}

.content-slab{
  padding: 1.6rem 1.6rem 1.1rem;
}
.content-slab p:last-child{ margin-bottom:0; }

.metric-band{
  padding:1.2rem;
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.footer{
  padding: 2rem 0 3.2rem;
  color:#97a7be;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:3rem;
}
.footer a{ color:#dce6f5; }

.page-hero{
  padding: 7rem 0 2.8rem;
}
.page-hero .title{
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  font-weight:800;
  letter-spacing:-.04em;
}
.page-hero p{
  color:var(--muted);
  max-width: 760px;
}

.stack-list{
  display:grid;
  gap:1rem;
}
.stack-item{
  padding:1.2rem 1.25rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.stack-item strong{
  display:block;
  margin-bottom:.35rem;
  font-size:1.05rem;
}

.quote-block{
  padding:1.8rem;
  border-left: 4px solid var(--gold);
  background: rgba(255,255,255,.04);
  border-radius:1rem;
  color:#fff;
  font-size:1.1rem;
}

.table-like{
  display:grid;
  gap:1rem;
}
.table-like .rowish{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table-like .rowish:last-child{ border-bottom:0; }
.rowish .left{
  color:#dbe7f6;
  font-weight:700;
}
.rowish .right{
  color:var(--muted);
}

.portfolio-logo-lg{
  min-height: 210px;
}

@media (max-width: 991.98px){
  .hero{ padding-top:6rem; }
  .logo-float{ position:static; width: 220px; margin-top:1rem; }
  .table-like .rowish{ grid-template-columns:1fr; }
}