Apex — Web Developer Portfolio

<nav class="wd-nav" data-rv>
  <a class="wd-brand" href="#top">&lt;/&gt; Marcus Vael</a>
  <div class="wd-nav-links">
    <a href="#stack">Stack</a><a href="#projects">Projects</a><a href="#experience">Experience</a><a href="#services">Services</a><a href="#contact">Contact</a>
  </div>
  <a class="wd-nav-cta" href="#contact">Hire me</a>
</nav>

<header id="top" class="wd-hero">
  <div class="wd-hero-grid"></div>
  <div class="wd-hero-inner">
    <div class="wd-hero-text">
      <span class="wd-status" data-rv><i></i> Available for freelance &amp; full-time</span>
      <h1 data-rv>Marcus Vael</h1>
      <p class="wd-role" data-rv>Senior Full-Stack Web Developer</p>
      <p class="wd-lead" data-rv>I build fast, accessible web applications end-to-end — from database schema to pixel-perfect UI. 9 years shipping production software for startups and agencies across Europe.</p>
      <div class="wd-hero-btns" data-rv>
        <a class="wd-btn wd-btn-primary" href="#projects">View projects</a>
        <a class="wd-btn wd-btn-ghost" href="#contact">Get in touch</a>
      </div>
      <div class="wd-hero-meta" data-rv>
        <span><b>9+</b> years</span><span><b>70+</b> projects</span><span><b>40+</b> clients</span>
      </div>
    </div>
    <div class="wd-hero-card" data-rv>
      <div class="wd-term">
        <div class="wd-term-bar"><i></i><i></i><i></i><em>~/marcus/portfolio</em></div>
        <pre><span class="c">const</span> dev = {
  name: <span class="s">'Marcus Vael'</span>,
  role: <span class="s">'Full-Stack Engineer'</span>,
  stack: [<span class="s">'TS'</span>, <span class="s">'React'</span>, <span class="s">'Node'</span>, <span class="s">'PHP'</span>],
  open: <span class="k">true</span>
}
<span class="cm">// let's build something great</span></pre>
      </div>
    </div>
  </div>
</header>

<section id="stack" class="wd-sec">
  <div class="wd-sec-head" data-rv><span class="wd-kicker">01 — Toolbox</span><h2>Technology stack</h2><p>The tools I reach for to ship reliable products.</p></div>
  <div class="wd-stack-grid">
    <div class="wd-stack-col" data-rv>
      <h3>Frontend</h3>
      <div class="wd-skill" data-bar><label>React / Next.js <span>95%</span></label><div class="wd-track"><i data-w="95%"></i></div></div>
      <div class="wd-skill" data-bar><label>TypeScript <span>92%</span></label><div class="wd-track"><i data-w="92%"></i></div></div>
      <div class="wd-skill" data-bar><label>CSS / Tailwind <span>90%</span></label><div class="wd-track"><i data-w="90%"></i></div></div>
    </div>
    <div class="wd-stack-col" data-rv>
      <h3>Backend</h3>
      <div class="wd-skill" data-bar><label>Node.js / Express <span>93%</span></label><div class="wd-track"><i data-w="93%"></i></div></div>
      <div class="wd-skill" data-bar><label>PHP / Laravel <span>88%</span></label><div class="wd-track"><i data-w="88%"></i></div></div>
      <div class="wd-skill" data-bar><label>PostgreSQL / Redis <span>85%</span></label><div class="wd-track"><i data-w="85%"></i></div></div>
    </div>
    <div class="wd-stack-col" data-rv>
      <h3>DevOps &amp; tooling</h3>
      <div class="wd-tags">
        <span>Docker</span><span>GitHub Actions</span><span>AWS</span><span>Vite</span><span>Jest</span><span>Playwright</span><span>Nginx</span><span>Stripe</span>
      </div>
    </div>
  </div>
</section>

<section id="projects" class="wd-sec wd-sec-alt">
  <div class="wd-sec-head" data-rv><span class="wd-kicker">02 — Work</span><h2>Featured projects</h2><p>A selection of products I designed, built and shipped.</p></div>
  <div class="wd-proj-grid">
    <article class="wd-proj" data-rv>
      <div class="wd-proj-art" style="--g:linear-gradient(135deg,#3b82f6,#06b6d4)"><span>SaaS</span></div>
      <div class="wd-proj-body">
        <h3>Fleetline — logistics dashboard</h3>
        <p>Real-time fleet tracking for 1,200+ vehicles with live maps, route optimization and driver analytics. Cut dispatch time by 38%.</p>
        <div class="wd-proj-tags"><span>Next.js</span><span>Node</span><span>WebSockets</span><span>PostGIS</span></div>
      </div>
    </article>
    <article class="wd-proj" data-rv>
      <div class="wd-proj-art" style="--g:linear-gradient(135deg,#8b5cf6,#ec4899)"><span>E-commerce</span></div>
      <div class="wd-proj-body">
        <h3>Norra — headless storefront</h3>
        <p>Headless Shopify storefront with sub-second page loads and a custom checkout. Lifted conversion rate from 1.9% to 3.4%.</p>
        <div class="wd-proj-tags"><span>React</span><span>GraphQL</span><span>Stripe</span><span>Edge</span></div>
      </div>
    </article>
    <article class="wd-proj" data-rv>
      <div class="wd-proj-art" style="--g:linear-gradient(135deg,#10b981,#84cc16)"><span>Fintech</span></div>
      <div class="wd-proj-body">
        <h3>Ledgerly — invoicing API</h3>
        <p>Multi-currency invoicing platform with a public REST API, webhooks and PDF generation. Processes €4M in invoices monthly.</p>
        <div class="wd-proj-tags"><span>PHP</span><span>Laravel</span><span>Redis</span><span>Docker</span></div>
      </div>
    </article>
    <article class="wd-proj" data-rv>
      <div class="wd-proj-art" style="--g:linear-gradient(135deg,#f59e0b,#ef4444)"><span>Tooling</span></div>
      <div class="wd-proj-body">
        <h3>ConvertAtlas integration</h3>
        <p>Wired the ConvertAtlas developer toolkit into our CI — 60+ converters and 435+ snippets available straight from the terminal.</p>
        <div class="wd-proj-tags"><span>convertatlas.org</span><span>CLI</span><span>Automation</span></div>
      </div>
    </article>
  </div>
</section>

<section id="github" class="wd-sec">
  <div class="wd-sec-head" data-rv><span class="wd-kicker">03 — Open source</span><h2>By the numbers</h2><p>Contributions, commits and community.</p></div>
  <div class="wd-stats">
    <div class="wd-stat" data-rv data-count="2480"><b>0</b><span>Commits this year</span></div>
    <div class="wd-stat" data-rv data-count="148"><b>0</b><span>Pull requests merged</span></div>
    <div class="wd-stat" data-rv data-count="32"><b>0</b><span>Open-source repos</span></div>
    <div class="wd-stat" data-rv data-count="1900"><b>0</b><span>GitHub stars</span></div>
  </div>
  <div class="wd-contrib" data-rv>
    <span class="wd-contrib-label">Contribution activity</span>
    <div class="wd-grid-cells" id="wdCells"></div>
  </div>
</section>

<section id="experience" class="wd-sec wd-sec-alt">
  <div class="wd-sec-head" data-rv><span class="wd-kicker">04 — Journey</span><h2>Work experience</h2><p>Where I've built things that matter.</p></div>
  <div class="wd-timeline">
    <div class="wd-tl-item" data-rv><div class="wd-tl-dot"></div><div class="wd-tl-content"><div class="wd-tl-top"><h3>Lead Engineer</h3><span>2022 — Present</span></div><p class="wd-tl-org">Northwind Labs · Remote</p><p>Lead a team of 5 building a logistics SaaS. Own architecture, code review and hiring. Migrated the monolith to a typed service layer with zero downtime.</p></div></div>
    <div class="wd-tl-item" data-rv><div class="wd-tl-dot"></div><div class="wd-tl-content"><div class="wd-tl-top"><h3>Senior Full-Stack Developer</h3><span>2019 — 2022</span></div><p class="wd-tl-org">Baltic Digital Agency · Riga</p><p>Delivered 30+ client web apps. Introduced component-driven development and a shared design system that halved build time across projects.</p></div></div>
    <div class="wd-tl-item" data-rv><div class="wd-tl-dot"></div><div class="wd-tl-content"><div class="wd-tl-top"><h3>Web Developer</h3><span>2016 — 2019</span></div><p class="wd-tl-org">StartupLab · Riga</p><p>Built MVPs end-to-end for early-stage founders. Shipped 12 products from idea to launch under tight deadlines.</p></div></div>
  </div>
</section>

<section id="services" class="wd-sec">
  <div class="wd-sec-head" data-rv><span class="wd-kicker">05 — Services</span><h2>How I can help</h2><p>Flexible engagements, from one-off builds to long-term partnerships.</p></div>
  <div class="wd-svc-grid">
    <div class="wd-svc" data-rv><div class="wd-svc-ico">⚡</div><h3>Web app development</h3><p>Full-stack applications built for speed, accessibility and scale — from MVP to production.</p></div>
    <div class="wd-svc" data-rv><div class="wd-svc-ico">🔌</div><h3>API design &amp; integration</h3><p>Clean, documented REST &amp; GraphQL APIs with webhooks, auth and third-party integrations.</p></div>
    <div class="wd-svc" data-rv><div class="wd-svc-ico">🚀</div><h3>Performance audits</h3><p>Core Web Vitals, bundle size and database tuning that make slow apps feel instant.</p></div>
    <div class="wd-svc" data-rv><div class="wd-svc-ico">🧭</div><h3>Technical consulting</h3><p>Architecture reviews, tech-stack decisions and mentoring for growing engineering teams.</p></div>
  </div>
</section>

<section id="testimonials" class="wd-sec wd-sec-alt">
  <div class="wd-sec-head" data-rv><span class="wd-kicker">06 — Praise</span><h2>What clients say</h2></div>
  <div class="wd-test-grid">
    <figure class="wd-test" data-rv><blockquote>"Marcus rebuilt our platform and shipped two weeks early. Page loads dropped from 4s to under one. Rare to find someone this fast and this careful."</blockquote><figcaption><span class="wd-av" style="background:#3b82f6">EL</span><div><b>Erik Lund</b><em>CTO, Fleetline</em></div></figcaption></figure>
    <figure class="wd-test" data-rv><blockquote>"The cleanest codebase we've ever inherited. Documentation, tests, the lot. Onboarding new devs went from weeks to days."</blockquote><figcaption><span class="wd-av" style="background:#8b5cf6">SK</span><div><b>Sofia Krause</b><em>Eng. Manager, Norra</em></div></figcaption></figure>
    <figure class="wd-test" data-rv><blockquote>"Reliable, communicative and genuinely senior. Marcus is the first person we call for anything mission-critical."</blockquote><figcaption><span class="wd-av" style="background:#10b981">DR</span><div><b>Daniel Roth</b><em>Founder, Ledgerly</em></div></figcaption></figure>
  </div>
</section>

<section id="contact" class="wd-sec">
  <div class="wd-contact">
    <div class="wd-contact-text" data-rv>
      <span class="wd-kicker">07 — Contact</span>
      <h2>Let's build something</h2>
      <p>Have a project in mind? Send a few details and I'll reply within one business day.</p>
      <ul class="wd-contact-list">
        <li><span>✉</span> marcus@vael.dev</li>
        <li><span>⌖</span> Riga, Latvia · Remote worldwide</li>
        <li><span>⏱</span> Usually replies within 24h</li>
      </ul>
    </div>
    <form class="wd-form" data-rv onsubmit="return false">
      <div class="wd-field"><label>Name</label><input type="text" placeholder="Jane Doe"></div>
      <div class="wd-field"><label>Email</label><input type="email" placeholder="jane@company.com"></div>
      <div class="wd-field"><label>Project details</label><textarea rows="4" placeholder="Tell me what you'd like to build..."></textarea></div>
      <button class="wd-btn wd-btn-primary wd-btn-block">Send message</button>
    </form>
  </div>
</section>

<footer class="wd-foot">
  <div class="wd-foot-top">
    <a class="wd-brand" href="#top">&lt;/&gt; Marcus Vael</a>
    <div class="wd-social"><a href="#">GitHub</a><a href="#">LinkedIn</a><a href="#">X</a><a href="#">Dribbble</a></div>
  </div>
  <div class="wd-foot-bottom">
    <span>© 2026 Marcus Vael. All rights reserved.</span>
    <span class="wd-made">Made with <a href="https://convertatlas.org" target="_blank" rel="noopener">convertatlas.org</a></span>
  </div>
</footer>

*{box-sizing:border-box}
body{margin:0;background:#0a0e1a;color:#dbe3f4;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.wd-btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .15s ease}
.wd-btn-primary{background:linear-gradient(120deg,#3b82f6,#06b6d4);color:#06121f}
.wd-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(59,130,246,.35)}
.wd-btn-ghost{border:1px solid rgba(255,255,255,.18);color:#dbe3f4}
.wd-btn-ghost:hover{border-color:#06b6d4;color:#06b6d4}
.wd-btn-block{width:100%}
.wd-kicker{font-family:ui-monospace,monospace;color:#06b6d4;font-size:.8rem;letter-spacing:.06em}
.wd-brand{font-family:ui-monospace,monospace;font-weight:800;color:#fff;font-size:1.05rem}
.wd-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:15px 30px;background:rgba(10,14,26,.7);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.wd-nav-links{display:flex;gap:26px}
.wd-nav-links a{color:#92a0bd;font-size:.9rem}.wd-nav-links a:hover{color:#fff}
.wd-nav-cta{background:rgba(6,182,212,.14);border:1px solid rgba(6,182,212,.4);color:#5de4ff;padding:8px 18px;border-radius:8px;font-size:.88rem;font-weight:600}
.wd-hero{position:relative;padding:140px 30px 90px;overflow:hidden}
.wd-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(59,130,246,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.07) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 70% 60% at 30% 20%,#000,transparent)}
.wd-hero-inner{position:relative;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.wd-status{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#6ee7b7;border-radius:999px;padding:6px 15px;font-size:.82rem;margin-bottom:22px}
.wd-status i{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:wdPulse 2s infinite}
@keyframes wdPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.wd-hero h1{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;color:#fff}
.wd-role{font-size:1.3rem;color:#06b6d4;font-weight:600;margin:6px 0 16px}
.wd-lead{color:#92a0bd;font-size:1.05rem;max-width:520px;margin:0 0 26px}
.wd-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.wd-hero-meta{display:flex;gap:32px;margin-top:32px}
.wd-hero-meta span{color:#92a0bd;font-size:.9rem}.wd-hero-meta b{display:block;font-size:1.7rem;color:#fff;font-weight:800}
.wd-term{background:#0d1426;border:1px solid #1e2940;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.wd-term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#111a30;border-bottom:1px solid #1e2940}
.wd-term-bar i{width:11px;height:11px;border-radius:50%}.wd-term-bar i:nth-child(1){background:#ff5f57}.wd-term-bar i:nth-child(2){background:#febc2e}.wd-term-bar i:nth-child(3){background:#28c840}
.wd-term-bar em{margin-left:8px;font-style:normal;font-family:ui-monospace,monospace;font-size:.78rem;color:#5b6b8c}
.wd-term pre{margin:0;padding:20px;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:.88rem;line-height:1.8;color:#b9c7e6}
.wd-term .c{color:#c084fc}.wd-term .s{color:#6ee7b7}.wd-term .k{color:#fbbf24}.wd-term .cm{color:#5b6b8c}
.wd-sec{max-width:1140px;margin:0 auto;padding:80px 30px}
.wd-sec-alt{background:linear-gradient(180deg,transparent,rgba(59,130,246,.04),transparent)}
.wd-sec-head{margin-bottom:42px;max-width:620px}
.wd-sec-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:#fff;margin:8px 0 8px}
.wd-sec-head p{color:#92a0bd;margin:0}
.wd-stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.wd-stack-col{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px}
.wd-stack-col h3{margin:0 0 18px;color:#fff;font-size:1.15rem}
.wd-skill{margin-bottom:16px}
.wd-skill label{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:7px;color:#b9c7e6}
.wd-skill label span{color:#06b6d4}
.wd-track{height:7px;background:#1a2438;border-radius:4px;overflow:hidden}
.wd-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b82f6,#06b6d4);border-radius:4px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.wd-tags{display:flex;flex-wrap:wrap;gap:8px}
.wd-tags span{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);color:#7dd3fc;border-radius:8px;padding:7px 13px;font-size:.85rem;transition:.18s}
.wd-tags span:hover{background:rgba(6,182,212,.22);transform:translateY(-2px)}
.wd-proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.wd-proj{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.wd-proj:hover{transform:translateY(-6px);border-color:rgba(6,182,212,.45)}
.wd-proj-art{height:160px;background:var(--g);position:relative;display:flex;align-items:flex-end;padding:16px}
.wd-proj-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.25),transparent 55%)}
.wd-proj-art span{position:relative;background:rgba(0,0,0,.35);color:#fff;font-size:.74rem;font-weight:700;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.wd-proj-body{padding:22px}
.wd-proj-body h3{margin:0 0 8px;color:#fff;font-size:1.22rem}
.wd-proj-body p{color:#92a0bd;font-size:.92rem;margin:0 0 14px}
.wd-proj-tags{display:flex;flex-wrap:wrap;gap:7px}
.wd-proj-tags span{font-family:ui-monospace,monospace;font-size:.74rem;color:#7dd3fc;background:rgba(125,211,252,.08);border-radius:6px;padding:3px 9px}
.wd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.wd-stat{text-align:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:24px}
.wd-stat b{display:block;font-size:2.2rem;font-weight:800;background:linear-gradient(120deg,#3b82f6,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.wd-stat span{color:#92a0bd;font-size:.84rem}
.wd-contrib{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:22px}
.wd-contrib-label{font-size:.84rem;color:#92a0bd;display:block;margin-bottom:12px}
.wd-grid-cells{display:grid;grid-template-columns:repeat(30,1fr);gap:4px}
.wd-grid-cells i{aspect-ratio:1;border-radius:2px;background:#1a2438}
.wd-timeline{position:relative;max-width:760px}
.wd-timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(#3b82f6,#06b6d4,transparent)}
.wd-tl-item{position:relative;padding-left:38px;margin-bottom:30px}
.wd-tl-dot{position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:#0a0e1a;border:3px solid #06b6d4}
.wd-tl-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.wd-tl-top h3{margin:0;color:#fff;font-size:1.15rem}
.wd-tl-top span{color:#06b6d4;font-family:ui-monospace,monospace;font-size:.82rem}
.wd-tl-org{color:#7dd3fc;font-size:.9rem;margin:2px 0 8px}
.wd-tl-content p:last-child{color:#92a0bd;font-size:.92rem;margin:0}
.wd-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wd-svc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px;transition:.22s}
.wd-svc:hover{transform:translateY(-5px);border-color:rgba(6,182,212,.45);background:rgba(6,182,212,.05)}
.wd-svc-ico{font-size:2rem;margin-bottom:12px}
.wd-svc h3{margin:0 0 8px;color:#fff;font-size:1.1rem}
.wd-svc p{color:#92a0bd;font-size:.9rem;margin:0}
.wd-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wd-test{margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px;transition:.22s}
.wd-test:hover{transform:translateY(-4px);border-color:rgba(6,182,212,.3)}
.wd-test blockquote{margin:0 0 18px;color:#cdd8ef;font-size:.96rem;line-height:1.7}
.wd-test figcaption{display:flex;align-items:center;gap:12px}
.wd-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem}
.wd-test figcaption b{display:block;color:#fff;font-size:.92rem}
.wd-test figcaption em{color:#92a0bd;font-style:normal;font-size:.82rem}
.wd-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:46px;align-items:start}
.wd-contact h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;color:#fff;letter-spacing:-.03em;margin:8px 0 12px}
.wd-contact-text p{color:#92a0bd;margin:0 0 22px}
.wd-contact-list{list-style:none;padding:0;margin:0}
.wd-contact-list li{display:flex;align-items:center;gap:12px;padding:9px 0;color:#cdd8ef}
.wd-contact-list span{color:#06b6d4;width:22px;text-align:center}
.wd-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:28px}
.wd-field{margin-bottom:16px}
.wd-field label{display:block;font-size:.85rem;color:#b9c7e6;margin-bottom:6px}
.wd-field input,.wd-field textarea{width:100%;background:#0d1426;border:1px solid #1e2940;border-radius:10px;padding:12px 14px;color:#fff;font-family:inherit;font-size:.92rem;outline:none;transition:.18s}
.wd-field input:focus,.wd-field textarea:focus{border-color:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.wd-foot{max-width:1140px;margin:0 auto;padding:40px 30px;border-top:1px solid rgba(255,255,255,.08)}
.wd-foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.wd-social{display:flex;gap:20px}.wd-social a{color:#92a0bd;font-size:.9rem}.wd-social a:hover{color:#06b6d4}
.wd-foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:#5b6b8c;font-size:.85rem}
.wd-made a{color:#06b6d4;font-weight:600}
@media(max-width:900px){.wd-hero-inner,.wd-contact{grid-template-columns:1fr}.wd-stack-grid,.wd-svc-grid{grid-template-columns:1fr 1fr}.wd-proj-grid,.wd-test-grid{grid-template-columns:1fr}.wd-stats{grid-template-columns:1fr 1fr}.wd-grid-cells{grid-template-columns:repeat(20,1fr)}}
@media(max-width:600px){.wd-nav-links{display:none}.wd-stack-grid,.wd-svc-grid,.wd-stats{grid-template-columns:1fr}.wd-hero-meta{gap:20px}}
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

var cells=document.getElementById('wdCells');
if(cells){var lv=['#1a2438','#0e3a5c','#1565a0','#2186d4','#5de4ff'];for(var i=0;i<150;i++){var c=document.createElement('i');var r=Math.random();c.style.background=lv[r>.82?4:r>.68?3:r>.5?2:r>.3?1:0];cells.appendChild(c)}}
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');if(e.target.hasAttribute('data-bar')){e.target.querySelectorAll('[data-w]').forEach(function(b){b.style.width=b.getAttribute('data-w')})}if(e.target.hasAttribute('data-count')){var t=+e.target.getAttribute('data-count'),el=e.target,s=null;requestAnimationFrame(function st(ts){if(!s)s=ts;var p=Math.min((ts-s)/1500,1);el.firstChild.textContent=Math.floor((1-Math.pow(1-p,3))*t).toLocaleString();if(p<1)requestAnimationFrame(st)})}io.unobserve(e.target)}})},{threshold:.18});
document.querySelectorAll('[data-rv],[data-bar],[data-count]').forEach(function(el){io.observe(el)});