{% extends "base.html" %}

{% block title %}{{ config.title }} — {{ config.extra.tagline }}{% endblock %}

{% block body %}
<!-- NAVIGATION -->
<nav class="nav" id="nav">
    <div class="nav__inner">
        <a href="#" class="nav__logo">
            <svg class="nav__logo-svg" viewBox="0 0 81.15 69.27" fill="#ffffff" stroke="#000000" stroke-width="1">
                <path d="M 27.9 0 L 27.257 0.643 L 26.228 7.586 L 25.65 5.657 L 24.814 4.95 L 24.107 5.722 L 25.329 14.593 L 15.364 22.757 L 13.243 27.45 L 5.271 31.886 L 0 36.129 L 3.731 40.213 L 10.391 43.324 L 20.7 42.911 L 22.146 43.875 L 26.246 53.116 L 26.299 69.597 L 30.276 66.322 L 58.858 45.044 L 62.711 44.537 L 65.86 47.91 L 67.584 48.359 L 70.844 47.572 L 76.204 45.174 L 79.915 41.988 L 81.151 38.765 L 81.039 37.303 L 79.652 35.392 L 80.177 31.569 L 74.33 28.833 L 74.33 20.963 L 72.007 17.215 L 69.158 15.116 L 63.723 12.268 L 62.299 10.881 L 55.965 10.393 L 46.708 13.242 L 45.546 16.015 L 45.359 17.215 L 45.621 19.051 L 42.998 21.038 L 42.129 22.009 L 35.486 14.786 L 28.672 0.964 L 27.9 0 Z"/>
            </svg>
            <span class="nav__logo-text">WHITE GHOST</span>
        </a>
        <div class="nav__links">
            <a href="#services" class="nav__link">Services</a>
            <a href="#about" class="nav__link">About</a>
            <a href="#capabilities" class="nav__link">Capabilities</a>
            <a href="#contact" class="nav__link">Contact</a>
        </div>
        <div class="nav__right">
            <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
                <svg class="theme-toggle__icon theme-toggle__icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
                <svg class="theme-toggle__icon theme-toggle__icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
            </button>
            <button class="nav__toggle" id="navToggle" aria-label="Menu">
                <span></span><span></span>
            </button>
        </div>
    </div>
</nav>

<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
    <a href="#services" class="mobile-menu__link">Services</a>
    <a href="#about" class="mobile-menu__link">About</a>
    <a href="#capabilities" class="mobile-menu__link">Capabilities</a>
    <a href="#contact" class="mobile-menu__link">Contact</a>
</div>

<!-- HERO -->
<section class="hero">
    <div class="hero__grid-bg"></div>
    <div class="hero__content">
        <div class="hero__badge" data-anim="fade-up">SYSTEMS INTEGRATION &bull; CLOUD HOSTING &bull; MANAGED SERVICES</div>
        <h1 class="hero__title" data-anim="fade-up" data-delay="1">
            <span class="hero__title-line">WHITE GHOST</span>
            <span class="hero__title-line hero__title-line--accent">CYBER SYSTEMS</span>
        </h1>
        <p class="hero__sub" data-anim="fade-up" data-delay="2">
            Seamless IT infrastructure, resilient cloud environments, and fully managed services — engineered to keep your business running without interruption.
        </p>
        <div class="hero__actions" data-anim="fade-up" data-delay="3">
            <a href="#contact" class="btn btn--primary">Get Started</a>
            <a href="#services" class="btn btn--ghost">Our Services</a>
        </div>
    </div>
    <div class="hero__logo-mark" data-anim="fade-left" data-delay="2">
        <svg class="hero__logo-svg" viewBox="0 0 81.15 69.27" fill="#ffffff" stroke="#000000" stroke-width="1">
            <path d="M 27.9 0 L 27.257 0.643 L 26.228 7.586 L 25.65 5.657 L 24.814 4.95 L 24.107 5.722 L 25.329 14.593 L 15.364 22.757 L 13.243 27.45 L 5.271 31.886 L 0 36.129 L 3.731 40.213 L 10.391 43.324 L 20.7 42.911 L 22.146 43.875 L 26.246 53.116 L 26.299 69.597 L 30.276 66.322 L 58.858 45.044 L 62.711 44.537 L 65.86 47.91 L 67.584 48.359 L 70.844 47.572 L 76.204 45.174 L 79.915 41.988 L 81.151 38.765 L 81.039 37.303 L 79.652 35.392 L 80.177 31.569 L 74.33 28.833 L 74.33 20.963 L 72.007 17.215 L 69.158 15.116 L 63.723 12.268 L 62.299 10.881 L 55.965 10.393 L 46.708 13.242 L 45.546 16.015 L 45.359 17.215 L 45.621 19.051 L 42.998 21.038 L 42.129 22.009 L 35.486 14.786 L 28.672 0.964 L 27.9 0 Z"/>
        </svg>
    </div>
</section>

<!-- SERVICES -->
<section class="services" id="services">
    <div class="section__inner">
        <div class="section__header" data-anim="fade-up">
            <span class="section__tag">01 / Services</span>
            <h2 class="section__title">Infrastructure<br><span class="text--accent">Solutions</span></h2>
            <p class="section__desc">End-to-end IT services — from integration and migration to fully managed cloud environments.</p>
        </div>
        <div class="services__grid">
            <div class="service-card" data-anim="fade-up" data-delay="0">
                <div class="service-card__icon">
                    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="24" cy="24" r="18"/><path d="M24 6v36M6 24h36"/><circle cx="24" cy="24" r="8"/></svg>
                </div>
                <h3 class="service-card__title">Systems Integration</h3>
                <p class="service-card__desc">We unify your IT ecosystem — connecting disparate platforms, applications, and data flows into a cohesive, high-performance infrastructure.</p>
                <ul class="service-card__list">
                    <li>Enterprise application integration</li>
                    <li>Network & infrastructure design</li>
                    <li>Data center consolidation</li>
                </ul>
            </div>
            <div class="service-card" data-anim="fade-up" data-delay="1">
                <div class="service-card__icon">
                    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 34c-4 0-8-3-8-8s4-8 8-8c0-6 5-10 12-10s12 4 12 10c4 0 8 3 8 8s-4 8-8 8"/><path d="M18 28l6-6 6 6"/><path d="M24 22v14"/></svg>
                </div>
                <h3 class="service-card__title">Cloud Hosting</h3>
                <p class="service-card__desc">Scalable, secure cloud environments built on leading platforms. We design, deploy, and optimize your cloud infrastructure for peak performance.</p>
                <ul class="service-card__list">
                    <li>Public, private & hybrid cloud</li>
                    <li>Cloud migration & modernization</li>
                    <li>High-availability architecture</li>
                </ul>
            </div>
            <div class="service-card" data-anim="fade-up" data-delay="2">
                <div class="service-card__icon">
                    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M24 4L4 14v10c0 13 20 20 20 20s20-7 20-20V14L24 4z"/><path d="M16 24l5 5 11-11"/></svg>
                </div>
                <h3 class="service-card__title">Managed Services</h3>
                <p class="service-card__desc">Around-the-clock monitoring, maintenance, and support for your entire IT environment — so you can focus on your business.</p>
                <ul class="service-card__list">
                    <li>24/7 monitoring & support</li>
                    <li>Patch management & updates</li>
                    <li>Performance optimization</li>
                </ul>
            </div>
            <div class="service-card" data-anim="fade-up" data-delay="3">
                <div class="service-card__icon">
                    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="8" y="8" width="32" height="32" rx="4"/><path d="M8 18h32M18 18v22"/></svg>
                </div>
                <h3 class="service-card__title">IT Consulting</h3>
                <p class="service-card__desc">Strategic technology guidance — from roadmap planning and vendor selection to compliance alignment and cost optimization.</p>
                <ul class="service-card__list">
                    <li>IT strategy & roadmapping</li>
                    <li>Vendor evaluation & procurement</li>
                    <li>Security & compliance advisory</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- ABOUT -->
<section class="about" id="about">
    <div class="section__inner about__inner">
        <div class="about__text" data-anim="fade-up">
            <span class="section__tag">02 / About</span>
            <h2 class="section__title">The Engine<br><span class="text--accent">Behind the Screen</span></h2>
            <p class="about__lead">White Ghost Cyber Systems was built on a clear conviction: technology should work invisibly, reliably, and without compromise — so your team never has to think about it.</p>
            <p class="about__body">Our engineers and architects specialize in connecting complex IT ecosystems, migrating workloads to the cloud, and delivering fully managed infrastructure services. We handle the heavy lifting — from rack-and-stack to hybrid cloud orchestration — so your organization can focus on growth.</p>
            <p class="about__body">Whether you're modernizing legacy systems, scaling into the cloud, or need a dedicated team managing your environment around the clock, we bring the expertise, tools, and discipline to make it seamless.</p>
        </div>
        <div class="about__visual" data-anim="fade-left">
            <div class="about__hex-grid">
                <div class="hex-cell hex-cell--active"><span>Integrate</span></div>
                <div class="hex-cell"><span>Migrate</span></div>
                <div class="hex-cell hex-cell--active"><span>Host</span></div>
                <div class="hex-cell"><span>Monitor</span></div>
                <div class="hex-cell hex-cell--active"><span>Manage</span></div>
                <div class="hex-cell"><span>Scale</span></div>
            </div>
        </div>
    </div>
</section>

<!-- CAPABILITIES -->
<section class="capabilities" id="capabilities">
    <div class="section__inner">
        <div class="section__header" data-anim="fade-up">
            <span class="section__tag">03 / Capabilities</span>
            <h2 class="section__title">Operational<br><span class="text--accent">Edge</span></h2>
        </div>
        <div class="capabilities__list">
            <div class="cap-row" data-anim="fade-up" data-delay="0">
                <span class="cap-row__num">01</span>
                <h3 class="cap-row__title">Multi-Platform Integration</h3>
                <p class="cap-row__desc">Connect on-premises, cloud, and SaaS platforms into a unified, interoperable IT ecosystem with seamless data flow.</p>
                <span class="cap-row__tag">INTEGRATION</span>
            </div>
            <div class="cap-row" data-anim="fade-up" data-delay="1">
                <span class="cap-row__num">02</span>
                <h3 class="cap-row__title">Cloud Migration & Modernization</h3>
                <p class="cap-row__desc">Lift-and-shift, re-platform, or re-architect workloads to AWS, Azure, or GCP with minimal downtime and risk.</p>
                <span class="cap-row__tag">CLOUD</span>
            </div>
            <div class="cap-row" data-anim="fade-up" data-delay="2">
                <span class="cap-row__num">03</span>
                <h3 class="cap-row__title">24/7 Infrastructure Monitoring</h3>
                <p class="cap-row__desc">Proactive monitoring, alerting, and automated remediation across your servers, networks, and cloud resources.</p>
                <span class="cap-row__tag">MANAGED</span>
            </div>
            <div class="cap-row" data-anim="fade-up" data-delay="3">
                <span class="cap-row__num">04</span>
                <h3 class="cap-row__title">Disaster Recovery & Business Continuity</h3>
                <p class="cap-row__desc">Resilient backup strategies, failover architecture, and tested recovery plans that keep you running through any disruption.</p>
                <span class="cap-row__tag">RESILIENCE</span>
            </div>
            <div class="cap-row" data-anim="fade-up" data-delay="4">
                <span class="cap-row__num">05</span>
                <h3 class="cap-row__title">Network Design & Optimization</h3>
                <p class="cap-row__desc">Scalable network architecture, SD-WAN deployment, and performance tuning to support growing business demands.</p>
                <span class="cap-row__tag">NETWORKING</span>
            </div>
        </div>
    </div>
</section>

<!-- CTA / CONTACT -->
<section class="contact" id="contact">
    <div class="section__inner contact__inner">
        <div class="contact__text" data-anim="fade-up">
            <span class="section__tag">04 / Contact</span>
            <h2 class="section__title">Initiate<br><span class="text--accent">Contact</span></h2>
            <p class="contact__lead">Ready to streamline your IT infrastructure? Our team is standing by to assess your environment and design a solution that fits.</p>
            <div class="contact__info">
                <div class="contact__info-row">
                    <span class="contact__info-label">Email</span>
                    <a href="mailto:{{ config.extra.email }}" class="contact__info-value">{{ config.extra.email }}</a>
                </div>
                <div class="contact__info-row">
                    <span class="contact__info-label">Availability</span>
                    <span class="contact__info-value">24/7 Managed Support</span>
                </div>
                <div class="contact__info-row">
                    <span class="contact__info-label">Response Time</span>
                    <span class="contact__info-value">&lt; 4 Hours</span>
                </div>
            </div>
        </div>
        <div class="contact__form-wrap" data-anim="fade-left">
            <form class="contact-form" id="contactForm">
                <div class="contact-form__group">
                    <label class="contact-form__label" for="name">Name</label>
                    <input class="contact-form__input" type="text" id="name" name="name" required>
                </div>
                <div class="contact-form__group">
                    <label class="contact-form__label" for="email">Email</label>
                    <input class="contact-form__input" type="email" id="email" name="email" required>
                </div>
                <div class="contact-form__group">
                    <label class="contact-form__label" for="org">Organization</label>
                    <input class="contact-form__input" type="text" id="org" name="org">
                </div>
                <div class="contact-form__group">
                    <label class="contact-form__label" for="message">How Can We Help?</label>
                    <textarea class="contact-form__textarea" id="message" name="message" rows="4" required></textarea>
                </div>
                <button class="btn btn--primary btn--full" type="submit">Send Message</button>
            </form>
        </div>
    </div>
</section>

<!-- FOOTER -->
<footer class="footer">
    <div class="footer__inner">
        <div class="footer__top">
            <div class="footer__brand">
                <svg class="footer__logo-svg" viewBox="0 0 81.15 69.27" fill="#ffffff" stroke="#000000" stroke-width="1">
                    <path d="M 27.9 0 L 27.257 0.643 L 26.228 7.586 L 25.65 5.657 L 24.814 4.95 L 24.107 5.722 L 25.329 14.593 L 15.364 22.757 L 13.243 27.45 L 5.271 31.886 L 0 36.129 L 3.731 40.213 L 10.391 43.324 L 20.7 42.911 L 22.146 43.875 L 26.246 53.116 L 26.299 69.597 L 30.276 66.322 L 58.858 45.044 L 62.711 44.537 L 65.86 47.91 L 67.584 48.359 L 70.844 47.572 L 76.204 45.174 L 79.915 41.988 L 81.151 38.765 L 81.039 37.303 L 79.652 35.392 L 80.177 31.569 L 74.33 28.833 L 74.33 20.963 L 72.007 17.215 L 69.158 15.116 L 63.723 12.268 L 62.299 10.881 L 55.965 10.393 L 46.708 13.242 L 45.546 16.015 L 45.359 17.215 L 45.621 19.051 L 42.998 21.038 L 42.129 22.009 L 35.486 14.786 L 28.672 0.964 L 27.9 0 Z"/>
                </svg>
                <span class="footer__name">WHITE GHOST CYBER SYSTEMS</span>
                <p class="footer__tagline">{{ config.extra.tagline }}</p>
            </div>
            <div class="footer__links">
                <a href="#services">Services</a>
                <a href="#about">About</a>
                <a href="#capabilities">Capabilities</a>
                <a href="#contact">Contact</a>
            </div>
        </div>
        <div class="footer__bottom">
            <span>&copy; {{ now() | date(format="%Y") }} White Ghost Cyber Systems. All rights reserved.</span>
        </div>
    </div>
</footer>
{% endblock %}