:root{
  --bg:#050507;
  --bg-soft:#0a0a12;
  --panel:rgba(255,255,255,0.05);
  --panel-strong:rgba(255,255,255,0.08);
  --line:rgba(255,255,255,0.08);
  --text:rgba(255,255,255,0.94);
  --muted:rgba(255,255,255,0.68);
  --gold:#d4af37;
  --gold-soft:#edd27a;
  --blue:rgba(43,88,255,0.18);
  --purple:rgba(107,47,184,0.18);
  --shadow:0 24px 60px rgba(0,0,0,0.35);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-pill:999px;
}

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, var(--blue), transparent 26%),
    radial-gradient(circle at top right, var(--purple), transparent 22%),
    linear-gradient(135deg, #030303 0%, #06060a 42%, #0b0810 100%);
  min-height:100vh;
  overflow-x:hidden;
  max-width:100%;
}

img{
  max-width:100%;
  height:auto;
}

.site-navbar{
  background:rgba(0,0,0,0.68);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-top:.55rem;
  padding-bottom:.55rem;
}

.site-brand{
  padding:0;
  margin-right:1rem;
  color:var(--gold) !important;
  font-weight:800;
  letter-spacing:.3px;
  font-size:1.2rem;
}

.site-logo{
  display:block;
  width:auto;
  max-width:100%;
  height:clamp(42px, 6vw, 68px);
  object-fit:contain;
}

.site-link{
  color:rgba(255,255,255,0.82) !important;
  font-weight:500;
  transition:color .25s ease;
}

.site-link:hover,
.site-link:focus{
  color:var(--gold) !important;
}

.navbar-toggler-white{
  filter:invert(1);
}

.glass-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:148px;
  padding:.95rem 1.45rem;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-weight:700;
  color:var(--gold-soft);
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  transition:all .25s ease;
}

.glass-btn:hover,
.glass-btn:focus{
  transform:translateY(-2px);
  color:#fff3c7;
  border-color:rgba(212,175,55,0.35);
}

.glass-btn-ghost{
  color:var(--text);
  background:rgba(255,255,255,0.03);
}

.site-navbar .glass-btn-sm{
  min-width:auto;
  padding:.74rem 1.14rem;
  font-size:.9rem;
  line-height:1;
  border-radius:999px;
}

.hero{
  padding-top:120px;
  padding-bottom:60px;
}

.hero-shell,
.portfolio-panel,
.cta-panel,
.footer-shell{
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.hero-shell{
  padding:2rem;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  padding:.45rem .9rem;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--gold-soft);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-title{
  margin:0 0 .9rem;
  font-size:clamp(2.4rem, 6vw, 4.8rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.03em;
  color:#fff;
}

.hero-title span{
  color:var(--gold);
}

.hero-text{
  margin:0 0 1.8rem;
  max-width:760px;
  color:var(--muted);
  line-height:1.9;
  font-size:1.02rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}

.meta-card{
  padding:1rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
}

.meta-label{
  display:block;
  margin-bottom:.35rem;
  color:rgba(255,255,255,0.52);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.meta-value{
  color:#fff;
  font-weight:700;
}

.section-pad{
  padding:0 0 3rem;
}

.section-head{
  margin-bottom:1.35rem;
}

.section-kicker{
  display:inline-block;
  margin-bottom:.65rem;
  color:var(--gold-soft);
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.section-title{
  margin:0 0 .5rem;
  color:#fff;
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  font-weight:800;
}

.section-text{
  margin:0;
  color:var(--muted);
  line-height:1.85;
  max-width:760px;
}

.portfolio-panel{
  padding:1.35rem;
  height:100%;
}

.project-card{
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.07);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.project-card:hover{
  transform:translateY(-4px);
  border-color:rgba(212,175,55,0.22);
  background:rgba(255,255,255,0.05);
}

.project-visual{
  position:relative;
  width:100%;
  min-height:220px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)),
    radial-gradient(circle at top left, rgba(43,88,255,0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(107,47,184,0.22), transparent 34%),
    linear-gradient(135deg, #0b0d16 0%, #11111c 100%);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.project-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.58), rgba(0,0,0,0.10));
}

.project-badge{
  position:relative;
  z-index:2;
  display:inline-block;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--gold-soft);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
}

.project-body{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  padding:1.2rem;
  flex:1 1 auto;
}

.project-title{
  margin:0;
  color:#fff;
  font-size:1.15rem;
  font-weight:800;
}

.project-text{
  margin:0;
  color:rgba(255,255,255,0.72);
  line-height:1.8;
  font-size:.95rem;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.project-tag{
  padding:.42rem .72rem;
  border-radius:999px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.78);
  font-size:.78rem;
  font-weight:600;
}

.project-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:auto;
  padding-top:.2rem;
}

.project-link{
  text-decoration:none;
  color:var(--gold-soft);
  font-weight:700;
  font-size:.92rem;
}

.project-link:hover{
  color:#fff3c7;
}

.capability-card{
  height:100%;
  padding:1.15rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:var(--shadow);
}

.capability-title{
  margin:0 0 .55rem;
  color:var(--gold-soft);
  font-size:1rem;
  font-weight:700;
}

.capability-text{
  margin:0;
  color:var(--muted);
  line-height:1.8;
  font-size:.95rem;
}

.cta-panel,
.footer-shell{
  padding:1.4rem;
}

.cta-title{
  margin:0 0 .55rem;
  color:#fff;
  font-size:1.4rem;
  font-weight:800;
}

.cta-text,
.footer-copy{
  margin:0;
  color:var(--muted);
  line-height:1.8;
}

.footer-shell{
  margin-bottom:2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.footer-link{
  color:var(--gold-soft);
  text-decoration:none;
  font-weight:700;
}

.footer-link:hover{
  color:#fff3c7;
}

@media (max-width: 991.98px){
  .site-navbar{
    padding-top:.6rem;
    padding-bottom:.6rem;
  }

  .site-logo{
    height:48px;
  }

  .navbar-collapse{
    margin-top:.85rem;
    padding:1rem;
    border-radius:18px;
    background:rgba(0,0,0,0.82);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .navbar-nav{
    gap:.35rem;
  }

  .site-link{
    display:block;
    padding:.75rem 0;
  }

  .hero-meta{
    grid-template-columns:1fr;
  }

  .project-visual{
    min-height:240px;
  }
}

@media (max-width: 767.98px){
  .site-logo{
    height:40px;
    width:auto;
    display:block;
  }

  .hero{
    padding-top:105px;
  }

  .hero-shell,
  .portfolio-panel,
  .cta-panel,
  .footer-shell{
    padding:1rem;
  }

  .glass-btn{
    width:100%;
    min-width:0;
  }

  .project-visual{
    min-height:210px;
    padding:.85rem;
  }

  .project-body{
    padding:1rem;
  }

  .project-title{
    font-size:1.05rem;
  }

  .project-text{
    font-size:.92rem;
    line-height:1.75;
  }
}

@media (max-width: 575.98px){
  .site-logo{
    height:42px;
  }

  .project-visual{
    min-height:190px;
  }

  .project-badge{
    font-size:.72rem;
    padding:.4rem .7rem;
  }

  .project-tag{
    font-size:.74rem;
  }
}