*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0c110e;
  --sf: #121a15;
  --sf2: #182019;
  --ac: #5b9a6d;
  --ac2: #7dbd8e;
  --ac3: #a8d5b5;
  --gn: #5b9a6d;
  --t: #dce5df;
  --t2: #8a9b8f;
  --t3: #4e5f53;
  --bd: #1e2b22;
  --bd2: #283530;
  --r: 8px;
  --mw: 1060px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--t);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  opacity: 0; animation: pageIn .6s .1s ease forwards;
}
@keyframes pageIn { to { opacity: 1; } }
::selection { background: var(--ac); color: #fff; }

.w { max-width: var(--mw); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 2.5rem); }

.bg-wrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-orb {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0;
  animation: orb-in 2s ease forwards, orb-float 25s ease-in-out infinite 2s;
}
@keyframes orb-in { to { opacity: 1; } }
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(.95); }
  75% { transform: translate(15px, 35px) scale(1.02); }
}
.bg-orb-1 {
  width: 700px; height: 700px; top: -20%; left: 5%;
  background: rgba(91,154,109,.12);
}
.bg-noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(12, 17, 14, .85); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
}
.logo { font-weight: 800; font-size: .95rem; color: #fff; text-decoration: none; letter-spacing: -.3px; }
.logo em { font-style: normal; color: var(--ac2); }
.nl { display: flex; gap: 2rem; list-style: none; }
.nl a { color: var(--t2); text-decoration: none; font-size: .78rem; font-weight: 500; transition: color .2s; }
.nl a:hover, .nl a.active { color: #fff; }
.ncta {
  padding: .4rem 1rem; background: var(--ac); color: #fff; border-radius: 6px;
  text-decoration: none; font-size: .72rem; font-weight: 600; transition: background .2s;
}
.ncta:hover { background: var(--ac2); }
.mob { display: none; background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }

.hero { position: relative; z-index: 1; padding: 10rem 0 5rem; }
.hero-inner { max-width: 600px; }
.hero h1 {
  font-size: clamp(3rem, 7vw, 4.2rem); font-weight: 800;
  letter-spacing: -2px; line-height: .9; color: #fff; margin-bottom: .9rem;
}
.hero h1 em { font-style: normal; color: var(--ac2); }
.hero .sub {
  font-size: .92rem; color: var(--t2); max-width: 440px; line-height: 1.75; margin-bottom: 2rem;
}
.hero-btns { display: flex; gap: .6rem; margin-bottom: 3rem; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .65rem 1.5rem; border-radius: 7px; font-family: inherit;
  font-weight: 600; font-size: .8rem; text-decoration: none; cursor: pointer;
  border: none; transition: all .2s;
}
.bf { background: var(--ac); color: #fff; box-shadow: 0 0 20px rgba(91,154,109,.2); }
.bf:hover { background: var(--ac2); box-shadow: 0 0 30px rgba(91,154,109,.3); }
.bl { background: transparent; color: var(--t2); border: 1px solid var(--bd2); }
.bl:hover { color: #fff; border-color: var(--t3); }

.stats-row {
  display: flex; gap: 2.5rem;
}
.stat-item { display: flex; flex-direction: column; }
.stat-num {
  font-size: 1.6rem; font-weight: 800; color: var(--ac2);
  font-family: 'JetBrains Mono', monospace; letter-spacing: -1px; line-height: 1;
}
.stat-label {
  font-size: .5rem; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: 1.5px; margin-top: .3rem;
}

.sec { position: relative; z-index: 1; padding: 3.5rem 0; }
.sec-header { margin-bottom: 1rem; }
.sec-header h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -.8px; color: #fff; }

.builds-carousel { position: relative; margin-top: 1rem; }
.builds-track {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  transition: transform .4s ease, opacity .4s ease;
}
.builds-track.slide-left {
  transform: perspective(1200px) rotateY(-8deg) translateX(-30px);
  opacity: 0;
}
.builds-track.slide-right {
  transform: perspective(1200px) rotateY(8deg) translateX(30px);
  opacity: 0;
}
.build-card {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
  overflow: hidden; transition: border-color .2s, transform .2s; cursor: pointer;
}
.build-card img, .build-card .build-thumb {
  -webkit-user-select: none; user-select: none; pointer-events: none;
  -webkit-user-drag: none;
}
.build-card:hover { border-color: var(--bd2); transform: translateY(-3px); }
.build-thumb {
  aspect-ratio: 16/9; overflow: hidden; position: relative;
}
.build-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .4s;
}
.build-card:hover .build-thumb img { transform: scale(1.03); }
.build-thumb .placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sf), var(--sf2));
}
.build-thumb .placeholder span {
  font-family: 'JetBrains Mono', monospace; font-size: .55rem;
  color: var(--t3); letter-spacing: 1px; text-transform: uppercase;
}
.build-desc {
  padding: 1rem 1.2rem 1.1rem;
}
.build-desc h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.build-desc p { font-size: .78rem; color: var(--t2); line-height: 1.6; }
.build-desc .build-tag {
  display: inline-block; margin-top: .6rem;
  font-family: 'JetBrains Mono', monospace; font-size: .5rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .8px;
  padding: .15rem .5rem; border-radius: 4px;
  background: rgba(91,154,109,.08); color: var(--ac2);
}
.builds-nav {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.5rem;
}
.builds-nav .b-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bd2);
  background: var(--sf); color: var(--t); font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.builds-nav .b-btn:hover { border-color: var(--ac); color: var(--ac2); }
.builds-nav .b-btn:disabled { opacity: .3; cursor: default; }
.builds-nav .b-btn:disabled:hover { border-color: var(--bd2); color: var(--t); }
.builds-num {
  font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--t3); letter-spacing: .5px;
}
.builds-num span { color: #fff; font-weight: 600; }

.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem;
}
.svc-card {
  padding: 1.4rem 1.3rem; background: var(--sf); border: 1px solid var(--bd);
  border-radius: 10px; border-top: 2px solid var(--ac); transition: border-color .2s;
}
.svc-card:hover { border-color: var(--bd2); border-top-color: var(--ac2); }
.svc-icon { font-size: 1.4rem; margin-bottom: .7rem; }
.svc-card h3 { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.svc-card p { font-size: .72rem; color: var(--t2); line-height: 1.55; }


.ct-wrap { border-top: 1px solid var(--bd); background: var(--bg); }
.ct-inner { text-align: center; max-width: 550px; margin: 0 auto; }
.ct-inner h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: #fff;
  letter-spacing: -1px; margin-bottom: .4rem;
}
.ct-inner .ct-sub {
  font-size: .85rem; color: var(--t2); margin-bottom: 2.5rem; line-height: 1.7;
}
.ct-links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem;
}
.ct-link {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.4rem 1rem; background: var(--sf); border: 1px solid var(--bd);
  border-radius: 10px; text-decoration: none; color: var(--t); transition: all .2s;
}
.ct-link:hover { border-color: rgba(91,154,109,.15); transform: translateY(-2px); }
.ct-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ct-icon.dc { background: rgba(88,101,242,.1); }
.ct-icon.yt { background: rgba(255,0,0,.08); }
.ct-icon.tw { background: rgba(255,255,255,.05); }
.ct-link strong { font-size: .78rem; font-weight: 700; color: #fff; }
.ct-link span {
  font-size: .55rem; color: var(--t3); font-family: 'JetBrains Mono', monospace;
  letter-spacing: .3px;
}

.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem; width: 34px; height: 34px;
  border-radius: 50%; background: var(--sf2); border: 1px solid var(--bd2);
  color: var(--t2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 99; opacity: 0; transition: opacity .2s;
  pointer-events: none; font-size: .8rem;
}
.scroll-top.show { opacity: 1; pointer-events: all; }
.scroll-top:hover { border-color: var(--ac); color: var(--ac2); }

.rv { opacity: 0; transform: translateY(10px); transition: all .4s ease; }
.rv.vis { opacity: 1; transform: none; }

footer {
  text-align: center; padding: 1.5rem;
  color: var(--t3); font-size: .6rem;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .3px;
}

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,5,8,.88); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .25s; cursor: pointer;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 90%; max-height: 75vh; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: scale(.95); transition: transform .3s ease;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.lightbox.open img { transform: scale(1); }
.lightbox-info {
  margin-top: 1rem; text-align: center;
}
.lightbox-info h3 { font-size: 1rem; font-weight: 700; color: #fff; }
.lightbox-info p { font-size: .75rem; color: var(--t2); margin-top: .2rem; }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--bd); color: var(--t2);
  width: 32px; height: 32px; border-radius: 6px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .15s; pointer-events: all;
}
.lightbox-close:hover { color: #fff; }

img { -webkit-touch-callout: none; }

@media (max-width: 768px) {
  nav { padding: 0 1.2rem; }
  .nl, .ncta { display: none; }
  .mob { display: block; }
  .hero { padding: 7rem 0 3.5rem; }
  .stats-row { gap: 1.5rem; }
  .builds-track { grid-template-columns: 1fr; }
  .build-thumb { aspect-ratio: 16/10; }
  .services-grid { grid-template-columns: 1fr; }
  .ct-links { grid-template-columns: 1fr; }
}