:root {
  --bg: #050d0a;
  --bg-2: #07130f;
  --panel: #0b1b15;
  --panel-2: #10261d;
  --text: #f7faf8;
  --muted: #a8b7b0;
  --line: rgba(255,255,255,.10);
  --accent: #a9f23d;
  --accent-2: #63b51a;
  --gold: #ffd87a;
  --danger: #ff8585;
  --shadow: 0 28px 80px rgba(0,0,0,.35);
  --radius: 24px;
  --shell: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 78% 4%, rgba(169,242,61,.10), transparent 30rem),
    linear-gradient(180deg, #050d0a 0%, #07130f 45%, #040a07 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #d8ff9b; outline-offset: 4px; }

.shell { width: min(calc(100% - 2rem), var(--shell)); margin-inline: auto; }
.section { padding: 6.5rem 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:fixed; z-index:999; top:1rem; left:1rem; transform:translateY(-180%); background:white; color:black; padding:.7rem 1rem; border-radius:10px; }
.skip-link:focus { transform:translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(5,13,10,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #c8ff67, #75c822);
  color: #061009;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(169,242,61,.18);
}

.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 1rem; }
.brand-copy small { margin-top: .25rem; color: var(--muted); font-size: .76rem; }

.nav-links { display:flex; align-items:center; gap:1.25rem; }
.nav-links a { color:var(--muted); font-weight:750; text-decoration:none; }
.nav-links a:hover { color:var(--text); }
.nav-links .nav-contact { padding:.65rem 1rem; border-radius:999px; background:var(--accent); color:#061009; }

.menu-toggle {
  display:none;
  width:46px;
  height:44px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  cursor:pointer;
}
.menu-toggle span:not(.sr-only) { display:block; width:21px; height:2px; margin:4px auto; background:var(--text); }

.hero { padding: 5.2rem 0 1.5rem; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:3rem; }

.status-pill {
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:1.25rem;
  padding:.45rem .75rem;
  border:1px solid rgba(169,242,61,.25);
  border-radius:999px;
  background:rgba(169,242,61,.06);
  color:#dfffb1;
  font-size:.82rem;
  font-weight:750;
}
.status-pill span { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(169,242,61,.10); }

.eyebrow {
  margin:0 0 1rem;
  color:var(--accent);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

h1,h2,h3,h4,p { overflow-wrap:anywhere; }
h1 {
  max-width:13ch;
  margin:0;
  font-size:clamp(2.7rem, 6.3vw, 5.65rem);
  line-height:.97;
  letter-spacing:-.058em;
}
h2 {
  margin:0;
  font-size:clamp(2.15rem,4.7vw,4rem);
  line-height:1.02;
  letter-spacing:-.047em;
}
.lead {
  max-width:65ch;
  margin:1.5rem 0 0;
  color:var(--muted);
  font-size:clamp(1.05rem,2vw,1.22rem);
}

.hero-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.button {
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.86rem 1.2rem;
  border:1px solid transparent;
  border-radius:14px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
}
.button.primary { background:var(--accent); color:#061009; box-shadow:0 16px 40px rgba(169,242,61,.12); }
.button.primary:hover { background:#bdff53; }
.button.secondary { border-color:var(--line); background:var(--panel); color:var(--text); }
.button.secondary:hover { border-color:rgba(169,242,61,.45); }

.hero-tags { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; }
.hero-tags span, .mini-tags span {
  padding:.42rem .68rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#dce5e1;
  font-size:.83rem;
  font-weight:700;
}

.hero-showcase {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(169,242,61,.20);
  border-radius:28px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.showcase-glow { position:absolute; inset:auto -20% -35% 15%; height:70%; background:radial-gradient(circle,rgba(169,242,61,.22),transparent 65%); filter:blur(25px); pointer-events:none; }
.hero-showcase img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.showcase-caption {
  position:absolute;
  right:1rem;
  bottom:1rem;
  left:1rem;
  display:grid;
  gap:.15rem;
  padding:.85rem 1rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(4,10,7,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.showcase-caption strong { font-size:.98rem; }
.showcase-caption span { color:var(--muted); font-size:.82rem; }

.capability-bar {
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.018);
}
.capability-bar > div { padding:1.1rem 1.2rem; border-right:1px solid var(--line); }
.capability-bar > div:last-child { border-right:0; }
.capability-bar strong, .capability-bar span { display:block; }
.capability-bar strong { font-size:.95rem; }
.capability-bar span { margin-top:.25rem; color:var(--muted); font-size:.82rem; }

.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; }
.about-copy { color:var(--muted); font-size:1.08rem; }
.about-copy p { margin:0; }
.about-copy p + p { margin-top:1.2rem; }

.services-section { background:rgba(255,255,255,.012); border-block:1px solid rgba(255,255,255,.04); }
.section-heading { max-width:780px; margin-bottom:2.7rem; }
.section-heading > p:last-child { margin:1rem 0 0; color:var(--muted); font-size:1.05rem; }

.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.service-card {
  min-height:330px;
  padding:1.45rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
}
.service-card.featured-card { border-color:rgba(169,242,61,.28); background:linear-gradient(145deg,rgba(169,242,61,.08),rgba(255,255,255,.018)); }
.service-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:3rem;
  border-radius:14px;
  background:rgba(169,242,61,.10);
  color:var(--accent);
  font-weight:900;
}
.service-card h3 { margin:0; font-size:1.35rem; line-height:1.2; }
.service-card p { margin:.8rem 0 0; color:var(--muted); }
.service-card ul { margin:1.25rem 0 0; padding-left:1.15rem; color:#d5dfda; font-size:.92rem; }
.service-card li + li { margin-top:.4rem; }

.projects-section { background:radial-gradient(circle at 8% 28%,rgba(169,242,61,.08),transparent 30rem); }
.project-feature {
  display:grid;
  grid-template-columns:1.02fr .98fr;
  overflow:hidden;
  border:1px solid rgba(169,242,61,.23);
  border-radius:28px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.project-copy { padding:clamp(1.5rem,4vw,3rem); }
.project-label {
  width:max-content;
  padding:.38rem .65rem;
  border-radius:999px;
  background:rgba(169,242,61,.10);
  color:var(--accent);
  font-size:.78rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.project-copy h3 { margin:1.1rem 0 0; font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.05; letter-spacing:-.035em; }
.project-copy > p { color:var(--muted); }
.project-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:1.8rem; }
.project-columns h4 { margin:0; }
.project-columns ul { margin:.7rem 0 0; padding-left:1.1rem; color:var(--muted); font-size:.92rem; }
.project-columns li + li { margin-top:.38rem; }
.project-actions { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:2rem; }
.text-link { padding:0; border:0; background:transparent; color:var(--accent); font-weight:800; text-decoration:none; cursor:pointer; }
.project-media { min-height:620px; }
.project-media img { width:100%; height:100%; object-fit:cover; }

.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.project-card {
  min-height:260px;
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
}
.project-status { color:var(--accent); font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.project-card h3 { margin:1.5rem 0 0; font-size:1.45rem; }
.project-card p { color:var(--muted); }
.mini-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }

.gallery-wrap { margin-top:5rem; }
.gallery-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:1.3rem; }
.gallery-heading h3 { margin:0; font-size:2rem; }
.gallery-heading > p { margin:0; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.gallery-card {
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--panel);
  color:var(--text);
  cursor:zoom-in;
}
.gallery-card img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .24s ease; }
.gallery-card:hover img { transform:scale(1.025); }
.gallery-card span {
  position:absolute;
  right:.75rem;
  bottom:.75rem;
  left:.75rem;
  padding:.63rem .75rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(4,10,7,.79);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-weight:780;
  text-align:left;
}

.why-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; }
.why-list { display:grid; }
.why-list article { display:grid; grid-template-columns:55px 1fr; gap:1rem; padding:1.3rem 0; border-top:1px solid var(--line); }
.why-list article:last-child { border-bottom:1px solid var(--line); }
.why-list > article > span { color:var(--accent); font-size:.82rem; font-weight:900; }
.why-list h3 { margin:0; font-size:1.25rem; }
.why-list p { margin:.45rem 0 0; color:var(--muted); }

.contact-section { padding-top:2rem; }
.contact-panel {
  padding:clamp(1.5rem,4vw,3.2rem);
  border:1px solid rgba(169,242,61,.25);
  border-radius:30px;
  background:
    linear-gradient(135deg,rgba(169,242,61,.08),transparent 45%),
    var(--panel);
  box-shadow:var(--shadow);
}
.contact-intro { max-width:760px; }
.contact-intro p:last-child { color:var(--muted); font-size:1.05rem; }
.contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:2rem; }
.contact-card {
  min-height:92px;
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:.8rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.contact-card:hover { border-color:rgba(169,242,61,.45); transform:translateY(-1px); }
.contact-card[aria-disabled="true"] { opacity:.62; cursor:not-allowed; }
.contact-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(169,242,61,.1);
  color:var(--accent);
  font-size:.74rem;
  font-weight:900;
}
.contact-card div { display:grid; line-height:1.18; }
.contact-card small { margin-top:.32rem; color:var(--muted); font-size:.78rem; }
.contact-card b { color:var(--accent); }
.contact-status { min-height:1.5rem; margin:.9rem 0 0; color:var(--accent); }

.footer { padding:2.5rem 0 6rem; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1.5rem; color:var(--muted); font-size:.9rem; }
.footer-grid strong { color:var(--text); }
.footer-grid p { margin:0; }

.mobile-contact-bar {
  position:fixed;
  z-index:80;
  right:.8rem;
  bottom:.8rem;
  left:.8rem;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  padding:.55rem;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(5,13,10,.92);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:var(--shadow);
}
.mobile-contact-bar a { min-height:44px; display:grid; place-items:center; border-radius:12px; text-decoration:none; font-weight:850; }
.mobile-contact-bar a:first-child { background:var(--accent); color:#061009; }
.mobile-contact-bar a:last-child { background:var(--panel-2); }

.lightbox {
  width:min(94vw,1100px);
  max-height:92vh;
  padding:0;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:20px;
  background:#030805;
  box-shadow:var(--shadow);
}
.lightbox::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lightbox img { width:100%; max-height:88vh; border-radius:20px; object-fit:contain; }
.lightbox-close {
  position:absolute;
  z-index:2;
  top:.65rem;
  right:.65rem;
  width:43px;
  height:43px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(3,8,5,.82);
  color:white;
  font-size:1.6rem;
  cursor:pointer;
}

@media (max-width: 980px) {
  .hero-grid, .about-grid, .project-feature, .why-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:780px; }
  .hero-showcase { max-width:780px; }
  .capability-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .capability-bar > div:nth-child(2) { border-right:0; }
  .capability-bar > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .service-grid, .project-grid, .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-media { min-height:0; }
  .project-media img { height:auto; aspect-ratio:4/3; }
  .footer-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .section { padding:4.4rem 0; }
  .site-header .nav { min-height:70px; }
  .menu-toggle { display:block; }
  .nav-links {
    position:absolute;
    top:calc(100% + 1px);
    right:1rem;
    left:1rem;
    display:none;
    padding:.75rem;
    border:1px solid var(--line);
    border-radius:17px;
    background:#081510;
    box-shadow:var(--shadow);
  }
  .nav-links.open { display:grid; }
  .nav-links a { padding:.8rem; }
  .nav-links .nav-contact { text-align:center; }

  .hero { padding-top:3rem; }
  .hero-grid { gap:2rem; }
  h1 { max-width:15ch; font-size:clamp(2.65rem,12vw,4.25rem); }
  .lead { font-size:1.02rem; }
  .hero-actions .button { width:100%; }
  .hero-showcase { border-radius:21px; }
  .hero-showcase img { aspect-ratio:4/3; object-fit:contain; background:#06100d; }
  .showcase-caption { position:static; border:0; border-top:1px solid var(--line); border-radius:0; background:var(--panel); }
  .capability-bar { grid-template-columns:1fr; margin-top:2rem; }
  .capability-bar > div { border-right:0; border-bottom:1px solid var(--line); }
  .capability-bar > div:last-child { border-bottom:0; }

  .service-grid, .project-grid, .contact-grid, .gallery { grid-template-columns:1fr; }
  .service-card { min-height:auto; }
  .service-icon { margin-bottom:2rem; }
  .project-feature { border-radius:22px; }
  .project-columns { grid-template-columns:1fr; }
  .project-media img { object-fit:contain; background:#06100d; }
  .gallery-heading { display:grid; align-items:start; }
  .gallery { grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
  .gallery-card { scroll-snap-align:start; }
  .contact-card { min-height:82px; }
  .footer { padding-bottom:7rem; }
  .mobile-contact-bar { display:grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}


/* V3 additions */
.about-grid {
  grid-template-columns: .72fr .55fr 1fr;
  align-items: center;
  gap: 2.5rem;
}

.about-visual {
  overflow: hidden;
  border: 1px solid rgba(169,242,61,.22);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.about-visual img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ui-showcase-section {
  background:
    radial-gradient(circle at 85% 15%, rgba(130,86,255,.12), transparent 28rem),
    rgba(255,255,255,.012);
  border-block: 1px solid rgba(255,255,255,.04);
}

.ui-showcase-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 2.2rem;
  align-items: center;
}

.ui-showcase-copy > p:last-of-type {
  color: var(--muted);
  font-size: 1.05rem;
}

.ui-showcase-media {
  overflow: hidden;
  border: 1px solid rgba(130,86,255,.22);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.ui-showcase-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 980px) {
  .about-grid,
  .ui-showcase-grid {
    grid-template-columns: 1fr;
  }

  .about-visual {
    max-width: 520px;
  }
}

@media (max-width: 720px) {
  .about-visual {
    max-width: 100%;
  }

  .ui-showcase-media {
    border-radius: 21px;
  }

  .ui-showcase-media img {
    object-fit: contain;
    background: #06100d;
  }
}