Lumen — Bento Agency Landing

<nav class="lm-nav" data-rv><span class="lm-logo">Atlas<span>Studio</span></span><div class="lm-links d-none d-md-flex"><a href="#services">Services</a><a href="#work">Work</a><a href="#results">Results</a></div><a href="#contact" class="lm-btn">Start a project</a></nav>
<header class="lm-hero">
  <div class="lm-hero-inner">
    <span class="lm-pill" data-rv>✦ Digital studio · est. 2021</span>
    <h1 data-rv>We design &amp; build<br>products people <em>keep open</em>.</h1>
    <p data-rv>Atlas Studio is the team behind <strong>ConvertAtlas</strong> — 60+ tools, 435+ snippets and 18 templates used by developers worldwide.</p>
    <div data-rv><a href="#work" class="lm-btn lm-btn-lg">See our work</a><a href="#contact" class="lm-link">Book a call →</a></div>
  </div>
</header>
<section id="services" class="lm-bento">
  <div class="lm-bento-grid">
    <div class="lm-tile lm-tile-lg" data-rv style="--c:linear-gradient(135deg,#0c8fc4,#5dd6ff)"><span class="lm-ico">⚙️</span><h3>Developer tools</h3><p>60+ client-side converters, formatters and generators — privacy-first, no sign-up.</p></div>
    <div class="lm-tile" data-rv style="--c:linear-gradient(135deg,#7c3aed,#a855f7)"><span class="lm-ico">🧩</span><h3>UI snippets</h3><p>435+ copy-paste components.</p></div>
    <div class="lm-tile" data-rv style="--c:linear-gradient(135deg,#16a34a,#86efac)"><span class="lm-ico">📄</span><h3>Templates</h3><p>18 single-file page designs.</p></div>
    <div class="lm-tile" data-rv style="--c:linear-gradient(135deg,#f59e0b,#fcd34d)"><span class="lm-ico">📚</span><h3>Guides</h3><p>SEO-rich developer content.</p></div>
    <div class="lm-tile lm-tile-wide" data-rv style="--c:linear-gradient(135deg,#ec4899,#f9a8d4)"><span class="lm-ico">🔍</span><h3>SEO &amp; growth</h3><p>Schema.org structured data, sitemaps, hreflang and AdSense-ready layouts baked into every page.</p></div>
  </div>
</section>
<section id="results" class="lm-results" data-rv>
  <div class="lm-results-head"><span class="lm-kicker">// the numbers</span><h2>Built to grow</h2></div>
  <div class="lm-results-grid">
    <div class="lm-metric"><b>60+</b><span>Tools shipped</span></div>
    <div class="lm-metric"><b>435+</b><span>UI snippets</span></div>
    <div class="lm-metric"><b>500+</b><span>Indexed pages</span></div>
    <div class="lm-chart-wrap"><div class="lm-chart-label">Monthly content growth</div><div id="lmChart"></div></div>
  </div>
</section>
<section id="work" class="lm-work">
  <div class="lm-results-head" data-rv><span class="lm-kicker">// recent work</span><h2>Selected projects</h2></div>
  <div class="lm-work-grid">
    <a href="https://convertatlas.org/en" class="lm-proj" data-rv><div class="lm-proj-art" style="background:linear-gradient(135deg,#0c8fc4,#5dd6ff)"></div><div class="lm-proj-meta"><h4>ConvertAtlas Toolkit</h4><span>Web app · PHP MVC</span></div></a>
    <a href="https://convertatlas.org/en/snippets" class="lm-proj" data-rv><div class="lm-proj-art" style="background:linear-gradient(135deg,#7c3aed,#a855f7)"></div><div class="lm-proj-meta"><h4>Atlas Snippets</h4><span>Component library</span></div></a>
    <a href="https://convertatlas.org/en/templates" class="lm-proj" data-rv><div class="lm-proj-art" style="background:linear-gradient(135deg,#16a34a,#86efac)"></div><div class="lm-proj-meta"><h4>Atlas Templates</h4><span>Design system</span></div></a>
  </div>
</section>
<section id="contact" class="lm-contact" data-rv>
  <h2>Let's build something developers love</h2>
  <p>Tell us about your project — or suggest a tool for ConvertAtlas.</p>
  <a href="mailto:hello@convertatlas.org" class="lm-btn lm-btn-lg">hello@convertatlas.org</a>
</section>
<footer class="lm-foot">AtlasStudio © 2026 · Built with <a href="https://convertatlas.org">ConvertAtlas</a> · Developer Tools</footer>

*{box-sizing:border-box}
body{margin:0;background:#fbfdff;color:#0e1726;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
a{text-decoration:none}
.lm-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 30px;background:rgba(251,253,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid #e7eef5}
.lm-logo{font-weight:800;font-size:1.18rem;letter-spacing:-.02em}.lm-logo span{color:#0c8fc4}
.lm-links{gap:26px}.lm-links a{color:#5c6f80;font-size:.92rem;font-weight:500}.lm-links a:hover{color:#0c8fc4}
.lm-btn{background:#0e1726;color:#fff;padding:11px 22px;border-radius:11px;font-weight:600;font-size:.9rem;display:inline-block;transition:.18s}
.lm-btn:hover{background:#0c8fc4;color:#fff;transform:translateY(-2px)}
.lm-btn-lg{padding:15px 32px;font-size:1.02rem;margin-right:14px}
.lm-link{color:#0c8fc4;font-weight:600}
.lm-hero{padding:90px 24px 70px;text-align:center}
.lm-hero-inner{max-width:780px;margin:0 auto}
.lm-pill{display:inline-block;background:#eaf6fb;color:#0c8fc4;border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:600;margin-bottom:22px}
.lm-hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0 0 18px}
.lm-hero h1 em{font-style:normal;background:linear-gradient(120deg,#0c8fc4,#5dd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lm-hero p{color:#5c6f80;font-size:1.1rem;line-height:1.7;max-width:580px;margin:0 auto 30px}
.lm-bento{max-width:1080px;margin:0 auto;padding:30px 24px 70px}
.lm-bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;grid-auto-rows:minmax(150px,auto)}
.lm-tile{background:#fff;border:1px solid #e7eef5;border-radius:22px;padding:26px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.lm-tile::before{content:"";position:absolute;inset:0;background:var(--c);opacity:.08;transition:opacity .25s}
.lm-tile:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(14,23,38,.1)}
.lm-tile:hover::before{opacity:.16}
.lm-tile-lg{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end}
.lm-tile-wide{grid-column:span 2}
.lm-ico{font-size:2rem;display:block;margin-bottom:10px;position:relative}
.lm-tile h3{font-size:1.3rem;font-weight:700;margin:0 0 6px;position:relative}
.lm-tile p{color:#5c6f80;font-size:.92rem;line-height:1.55;margin:0;position:relative}
@media(max-width:760px){.lm-bento-grid{grid-template-columns:1fr}.lm-tile-lg,.lm-tile-wide{grid-row:auto;grid-column:auto}.lm-links{display:none}.lm-results-grid,.lm-work-grid{grid-template-columns:1fr!important}}
.lm-results{max-width:1080px;margin:0 auto;padding:30px 24px 60px}
.lm-kicker{font-family:ui-monospace,monospace;color:#0c8fc4;font-size:.82rem}
.lm-results-head{margin-bottom:30px}
.lm-results-head h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 0}
.lm-results-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:18px;align-items:center}
.lm-metric{background:#0e1726;color:#fff;border-radius:18px;padding:24px;text-align:center}
.lm-metric b{display:block;font-size:2.2rem;font-weight:800;background:linear-gradient(120deg,#5dd6ff,#0c8fc4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lm-metric span{color:#9fb0c8;font-size:.85rem}
.lm-chart-wrap{background:#fff;border:1px solid #e7eef5;border-radius:18px;padding:14px 16px}
.lm-chart-label{font-size:.82rem;color:#5c6f80;font-weight:600;margin-bottom:4px}
.lm-work{max-width:1080px;margin:0 auto;padding:30px 24px 70px}
.lm-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lm-proj{background:#fff;border:1px solid #e7eef5;border-radius:18px;overflow:hidden;transition:.22s}
.lm-proj:hover{transform:translateY(-5px);box-shadow:0 18px 46px rgba(14,23,38,.1)}
.lm-proj-art{height:150px}
.lm-proj-meta{padding:16px 18px}
.lm-proj-meta h4{margin:0 0 3px;font-size:1.05rem;color:#0e1726}
.lm-proj-meta span{color:#8294a6;font-size:.82rem}
.lm-contact{text-align:center;padding:90px 24px;max-width:680px;margin:0 auto}
.lm-contact h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.lm-contact p{color:#5c6f80;margin:0 0 28px}
.lm-foot{text-align:center;padding:28px;color:#8294a6;font-size:.85rem;border-top:1px solid #e7eef5}
.lm-foot a{color:#0c8fc4}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
[data-rv].in{opacity:1;transform:none}

var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});
function drawChart(){if(typeof ApexCharts==='undefined')return;new ApexCharts(document.querySelector('#lmChart'),{chart:{type:'area',height:120,toolbar:{show:false},sparkline:{enabled:true}},series:[{name:'Pages',data:[40,90,160,240,350,500]}],colors:['#0c8fc4'],stroke:{curve:'smooth',width:3},fill:{type:'gradient',gradient:{opacityFrom:.4,opacityTo:0}},tooltip:{y:{formatter:function(v){return v+' pages'}}}}).render()}
drawChart();