<section id="be-your-own">
    <h1>Be
        <em>your own</em>
        everything</h1>
    <p>Anything you can do in the <a href="https://en.wikipedia.org/wiki/Censorship_by_Apple#App_Store" target="_blank" rel="noopener noreferrer">permissioned</a>, <a href="https://www.computerworld.com/article/3634591/the-problem-with-the-subscription-economy.html" target="_blank" rel="noopener noreferrer">subscription-based</a>, <a href="https://en.wikipedia.org/wiki/Privacy_concerns_regarding_Google" target="_blank" rel="noopener noreferrer">privacy-invading</a>, <a target="_blank" rel="noopener noreferrer" href="https://dataprot.net/articles/biggest-data-breaches/">insecure</a> model of cloud computing, you
        can also do in the open, free, private, secure model of <em>sovereign computing</em>.</p>
    <div id='ticker'>
        <div id="ticker__selected-frame">
            <span>be your own</span>
            {# <div id="services"></div> #}
        </div>
        <div id="ticker__window">
            <ul class='pseudoservices'>
                {% for pseudoservice in pseudoservices %}
                    <li class="pseudoservice">{{ pseudoservice.name }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="services">
            {% for pseudoservice in pseudoservices %}
            <div class="service-container service-container--{{ pseudoservice.slug }}">
                    {% for service in services %}
                        {% if pseudoservice.slug in service.pseudoservices %}
                            <div class="service__content" >
                                <a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank" rel="noopener noreferrer">
                                    <img class="service__image service__image--{{ service.slug }}" src="/assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyOS service icon" title="{{ service.name }} embassyOS service icon"
                                    style="filter: drop-shadow(0px 0px 3rem {{ service.color }}C0)"/>
                                    <div class="service__info">
                                        <h3 class="service__name">{{ service.name }}</h3>
                                        <p class="service__desc">{{ service.description }}</p>
                                    </div>
                                </a>
                                <div class="service__bkg" style="background: linear-gradient(180deg, {{ service.color }}00 0%, {{ service.color }}C0 30%, {{ service.color }}FF 50%, {{ service.color }}C0 66%, {{ service.color }}00 100%);"></div>
                            </div>
                        {% endif %}
                    {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>
    <a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>
</section>