<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>mavapps</title>

  <link rel="preconnect" href="https://fonts.googleapis.com" />

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet" />

  <style>

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

    :root {

      --bg:       #0c0c0d;

      --surface:  #131315;

      --surface2: #18181b;

      --border:   #222226;

      --text:     #e8e6e1;

      --muted:    #7a7874;

      --accent:   #c8a96e;

      --glow:     rgba(200, 169, 110, 0.12);

      --radius:   4px;

    }

    html { scroll-behavior: smooth; }

    body {

      background: var(--bg);

      color: var(--text);

      font-family: 'Jost', sans-serif;

      font-weight: 300;

      font-size: 17px;

      line-height: 1.75;

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      overflow-x: hidden;

    }


    /* HEADER */

    header {

      position: relative;

      z-index: 10;

      padding: 2.5rem 4rem;

      display: flex;

      align-items: center;

      justify-content: space-between;

      border-bottom: 1px solid var(--border);

    }

    .wordmark {

      font-family: 'Cormorant Garamond', serif;

      font-weight: 300;

      font-size: 1.75rem;

      letter-spacing: 0.25em;

      text-transform: lowercase;

      color: var(--text);

      text-decoration: none;

    }

    .wordmark span { color: var(--accent); }

    /* HEADER RIGHT */

    .header-right {

      display: flex;

      align-items: center;

      gap: 2rem;

    }

    .btn-support {

      display: inline-flex;

      align-items: center;

      gap: 0.4rem;

      padding: 0.55rem 1.1rem;

      font-family: 'Jost', sans-serif;

      font-weight: 400;

      font-size: 0.78rem;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      text-decoration: none;

      border-radius: var(--radius);

      border: 1px solid var(--border);

      color: var(--muted);

      transition: all 0.25s ease;

    }

    .btn-support:hover {

      border-color: var(--accent);

      color: var(--accent);

    }

    /* SOCIAL ICONS */

    .social-links {

      display: flex;

      align-items: center;

      gap: 1.5rem;

    }

    .social-links a {

      display: flex;

      align-items: center;

      justify-content: center;

      color: var(--muted);

      transition: color 0.25s ease, transform 0.25s ease;

      text-decoration: none;

    }

    .social-links a:hover {

      color: var(--accent);

      transform: translateY(-2px);

    }

    .social-links svg {

      width: 20px;

      height: 20px;

      fill: currentColor;

    }

    /* HERO */

    .hero {

      position: relative;

      z-index: 10;

      padding: 8rem 4rem 6rem;

      max-width: 760px;

      animation: fadeUp 0.9s ease both;

    }

    .hero-label {

      font-size: 0.8rem;

      letter-spacing: 0.3em;

      text-transform: uppercase;

      color: var(--accent);

      margin-bottom: 1.5rem;

    }

    .hero h1 {

      font-family: 'Cormorant Garamond', serif;

      font-weight: 300;

      font-size: clamp(3.2rem, 6vw, 5.2rem);

      line-height: 1.1;

      color: var(--text);

      margin-bottom: 1.75rem;

      letter-spacing: -0.01em;

    }

    .hero p {

      color: var(--muted);

      font-size: 1.1rem;

      max-width: 480px;

      line-height: 1.85;

    }

    /* DIVIDER */

    .divider {

      position: relative;

      z-index: 10;

      border: none;

      border-top: 1px solid var(--border);

      margin: 0 4rem;

    }

    /* APPS SECTION */

    .apps {

      position: relative;

      z-index: 10;

      padding: 5rem 4rem 7rem;

    }

    .section-header {

      display: flex;

      align-items: baseline;

      gap: 1.5rem;

      margin-bottom: 3rem;

    }

    .section-title {

      font-family: 'Cormorant Garamond', serif;

      font-weight: 300;

      font-size: 2.4rem;

      color: var(--text);

      letter-spacing: 0.04em;

    }

    .section-label {

      font-size: 0.72rem;

      letter-spacing: 0.35em;

      text-transform: uppercase;

      color: var(--muted);

    }

    .apps-grid {

      display: grid;

      grid-template-columns: repeat(auto-fill, minmax(340px, 420px));

      gap: 1px;

      background: var(--border);

      border: 1px solid var(--border);

      border-radius: 8px;

      overflow: hidden;

      max-width: 900px;

    }

    .app-card {

      background: var(--surface);

      padding: 3rem;

      position: relative;

      overflow: hidden;

      transition: background 0.3s ease;

      animation: fadeUp 0.8s ease both;

    }

    .app-card::after {

      content: '';

      position: absolute;

      inset: 0;

      background: radial-gradient(ellipse at 20% 50%, var(--glow) 0%, transparent 65%);

      opacity: 0;

      transition: opacity 0.4s ease;

      pointer-events: none;

    }

    .app-card:hover { background: var(--surface2); }

    .app-card:hover::after { opacity: 1; }

    .app-card::before {

      content: '';

      position: absolute;

      top: 0; left: 0; right: 0;

      height: 2px;

      background: linear-gradient(90deg, var(--accent), transparent);

      transform: scaleX(0);

      transform-origin: left;

      transition: transform 0.4s ease;

    }

    .app-card:hover::before { transform: scaleX(1); }

    .app-icon {

      width: 64px;

      height: 64px;

      border-radius: 16px;

      background: linear-gradient(135deg, #1e1c2e 0%, #2a2040 100%);

      border: 1px solid rgba(200,169,110,0.2);

      display: flex;

      align-items: center;

      justify-content: center;

      margin-bottom: 2rem;

      font-family: 'Cormorant Garamond', serif;

      font-size: 1.75rem;

      color: var(--accent);

      box-shadow: 0 0 24px rgba(200,169,110,0.08);

    }

    .app-name {

      font-family: 'Cormorant Garamond', serif;

      font-weight: 400;

      font-size: 2.4rem;

      letter-spacing: 0.02em;

      margin-bottom: 0.6rem;

      color: var(--text);

    }

    .app-desc {

      color: var(--muted);

      font-size: 1rem;

      line-height: 1.8;

      margin-bottom: 2.25rem;

    }

    .app-links {

      display: flex;

      gap: 0.75rem;

      flex-wrap: wrap;

    }

    .btn {

      display: inline-flex;

      align-items: center;

      gap: 0.45rem;

      padding: 0.7rem 1.4rem;

      font-family: 'Jost', sans-serif;

      font-weight: 400;

      font-size: 0.85rem;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      text-decoration: none;

      border-radius: var(--radius);

      transition: all 0.25s ease;

      cursor: pointer;

      border: none;

    }

    .btn-primary { background: var(--accent); color: #0c0c0d; }

    .btn-primary:hover { background: #d4b87c; }

    .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }

    .btn-ghost:hover { border-color: #555; color: var(--text); }

    /* FOOTER */

    footer {

      position: relative;

      z-index: 10;

      margin-top: auto;

      border-top: 1px solid var(--border);

      padding: 2rem 4rem;

      display: flex;

      align-items: center;

      justify-content: space-between;

      flex-wrap: wrap;

      gap: 1rem;

    }

    .footer-copy {

      color: var(--muted);

      font-size: 0.85rem;

      letter-spacing: 0.05em;

    }

    .footer-links { display: flex; gap: 2rem; }

    .footer-links button {

      background: none;

      border: none;

      color: var(--muted);

      font-family: 'Jost', sans-serif;

      font-size: 0.82rem;

      letter-spacing: 0.1em;

      text-transform: uppercase;

      cursor: pointer;

      transition: color 0.2s;

      padding: 0;

    }

    .footer-links button:hover { color: var(--accent); }

    /* MODAL */

    .modal-backdrop {

      display: none;

      position: fixed;

      inset: 0;

      background: rgba(8,8,9,0.88);

      backdrop-filter: blur(8px);

      z-index: 100;

      align-items: center;

      justify-content: center;

      padding: 2rem;

    }

    .modal-backdrop.open { display: flex; }

    .modal {

      background: var(--surface);

      border: 1px solid var(--border);

      border-radius: 8px;

      width: 100%;

      max-width: 660px;

      max-height: 82vh;

      display: flex;

      flex-direction: column;

      animation: fadeUp 0.3s ease both;

    }

    .modal-header {

      padding: 2rem 2.25rem 1.25rem;

      border-bottom: 1px solid var(--border);

      display: flex;

      align-items: flex-start;

      justify-content: space-between;

    }

    .modal-title {

      font-family: 'Cormorant Garamond', serif;

      font-weight: 400;

      font-size: 1.8rem;

      letter-spacing: 0.02em;

    }

    .modal-close {

      background: none;

      border: none;

      color: var(--muted);

      font-size: 1.6rem;

      cursor: pointer;

      line-height: 1;

      padding: 0 0 0 1rem;

      transition: color 0.2s;

    }

    .modal-close:hover { color: var(--text); }

    .modal-body {

      padding: 2rem 2.25rem;

      overflow-y: auto;

      color: var(--muted);

      font-size: 0.97rem;

      line-height: 1.9;

    }

    .modal-body h3 {

      font-family: 'Cormorant Garamond', serif;

      font-weight: 400;

      font-size: 1.25rem;

      color: var(--text);

      margin: 1.75rem 0 0.5rem;

      letter-spacing: 0.02em;

    }

    .modal-body h3:first-child { margin-top: 0; }

    .modal-body p { margin-bottom: 0.75rem; }

    .modal-body p:last-child { margin-bottom: 0; }

    @keyframes fadeUp {

      from { opacity: 0; transform: translateY(18px); }

      to   { opacity: 1; transform: translateY(0); }

    }

    @media (max-width: 640px) {

      header { padding: 1.5rem; }

      .hero, .apps { padding-left: 1.5rem; padding-right: 1.5rem; }

      .divider { margin: 0 1.5rem; }

      footer { padding: 1.5rem; flex-direction: column; align-items: flex-start; }

      .footer-links { gap: 1.25rem; }

      .hero { padding-top: 4rem; padding-bottom: 3rem; }

      .apps { padding-top: 3rem; }

      .apps-grid { grid-template-columns: 1fr; }

    }

  </style>

</head>

<body>

  <header>

    <a class="wordmark" href="#">mav<span>apps</span></a>

    <div class="header-right">

    <a class="btn-support" href="mailto:support@mavapps.com">✉ Support</a>

    <div class="social-links">

      <!-- Instagram -->

      <a href="https://instagram.com/mavapps" target="_blank" rel="noopener" aria-label="Instagram">

        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>

        </svg>

      </a>

      <!-- TikTok -->

      <a href="https://tiktok.com/@mavapps" target="_blank" rel="noopener" aria-label="TikTok">

        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

          <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.75a4.85 4.85 0 0 1-1.01-.06z"/>

        </svg>

      </a>

      <!-- Twitter / X -->

      <a href="https://twitter.com/mavapps" target="_blank" rel="noopener" aria-label="Twitter / X">

        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.261 5.632 5.903-5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>

        </svg>

      </a>

    </div>

    </div>

  </header>

  <section class="hero">

    <p class="hero-label">Independent Mobile Studio</p>

    <h1>Thoughtfully crafted apps.</h1>

    <p>We build focused, purposeful mobile experiences — no clutter, no noise. Just apps that do exactly what they promise.</p>

  </section>

  <hr class="divider" />

  <section class="apps">

    <div class="section-header">

      <span class="section-title">Our Apps</span>

      <span class="section-label">Available now</span>

    </div>

    <div class="apps-grid">

      <div class="app-card">

        <div class="app-icon">u</div>

        <div class="app-name">upriq</div>

        <p class="app-desc">Replace this with a short description of upriq — what it does, who it's for, and why it's useful. Keep it one or two sentences.</p>

        <div class="app-links">

          <a class="btn btn-primary" href="#" target="_blank" rel="noopener">↗ App Store</a>

        </div>

      </div>

      <!-- Add more app cards here following the same pattern -->

    </div>

  </section>

  <footer>

    <span class="footer-copy">© <span id="yr"></span> mavapps. All rights reserved.</span>

    <nav class="footer-links">

      <button onclick="openModal('privacy')">Privacy Policy</button>

      <button onclick="openModal('eula')">EULA</button>

      <button onclick="openModal('terms')">Terms of Use</button>

    </nav>

  </footer>

  <!-- Privacy Policy Modal -->

  <div class="modal-backdrop" id="modal-privacy" onclick="handleBackdropClick(event,'privacy')">

    <div class="modal">

      <div class="modal-header">

        <span class="modal-title">Privacy Policy</span>

        <button class="modal-close" onclick="closeModal('privacy')">×</button>

      </div>

      <div class="modal-body">

        <h3>1. Information We Collect</h3>

        <p>We collect minimal information necessary to provide and improve our apps. This may include device identifiers, usage analytics, and any information you voluntarily provide.</p>

        <h3>2. How We Use Information</h3>

        <p>Information is used solely to operate, maintain, and improve our applications. We do not sell or share your personal information with third parties for marketing purposes.</p>

        <h3>3. Data Retention</h3>

        <p>We retain data only as long as necessary to fulfill the purposes outlined in this policy, or as required by law.</p>

        <h3>4. Third-Party Services</h3>

        <p>Our apps may use third-party services (such as analytics or crash reporting). These services have their own privacy policies governing their use of data.</p>

        <h3>5. Security</h3>

        <p>We implement industry-standard measures to protect your information. However, no method of electronic storage or transmission is 100% secure.</p>

        <h3>6. Children's Privacy</h3>

        <p>Our apps are not directed to children under 13. We do not knowingly collect personal information from children under 13.</p>

        <h3>7. Changes to This Policy</h3>

        <p>We may update this policy periodically. Continued use of our apps after changes constitutes acceptance of the revised policy.</p>

        <h3>8. Contact</h3>

        <p>For questions about this policy, contact us at: support@mavapps.com</p>

      </div>

    </div>

  </div>

  <!-- EULA Modal -->

  <div class="modal-backdrop" id="modal-eula" onclick="handleBackdropClick(event,'eula')">

    <div class="modal">

      <div class="modal-header">

        <span class="modal-title">End User License Agreement</span>

        <button class="modal-close" onclick="closeModal('eula')">×</button>

      </div>

      <div class="modal-body">

        <h3>1. License Grant</h3>

        <p>mavapps grants you a personal, non-exclusive, non-transferable, revocable license to use our applications solely for your personal, non-commercial purposes.</p>

        <h3>2. Restrictions</h3>

        <p>You may not: copy, modify, or distribute the app; reverse engineer or attempt to extract source code; rent, lease, or lend the app; or use the app for any unlawful purpose.</p>

        <h3>3. Intellectual Property</h3>

        <p>All intellectual property rights in the app remain with mavapps. This license does not grant you any rights to trademarks, service marks, or logos.</p>

        <h3>4. Updates</h3>

        <p>mavapps may provide updates, bug fixes, or new features. These updates may be required and are subject to this EULA unless accompanied by a separate agreement.</p>

        <h3>5. Termination</h3>

        <p>This license is effective until terminated. It terminates automatically if you fail to comply with any term. Upon termination, you must destroy all copies of the app.</p>

        <h3>6. Disclaimer of Warranties</h3>

        <p>The app is provided "as is" without warranty of any kind. mavapps disclaims all warranties, express or implied, including fitness for a particular purpose.</p>

        <h3>7. Limitation of Liability</h3>

        <p>To the maximum extent permitted by law, mavapps shall not be liable for any indirect, incidental, or consequential damages arising from your use of the app.</p>

        <h3>8. Governing Law</h3>

        <p>This agreement is governed by the laws of the applicable jurisdiction without regard to conflict of law principles.</p>

      </div>

    </div>

  </div>

  <!-- Terms of Use Modal -->

  <div class="modal-backdrop" id="modal-terms" onclick="handleBackdropClick(event,'terms')">

    <div class="modal">

      <div class="modal-header">

        <span class="modal-title">Terms of Use</span>

        <button class="modal-close" onclick="closeModal('terms')">×</button>

      </div>

      <div class="modal-body">

        <h3>1. Acceptance of Terms</h3>

        <p>By accessing or using any mavapps application, you agree to be bound by these Terms of Use. If you do not agree, please do not use our apps.</p>

        <h3>2. Use of the Service</h3>

        <p>You agree to use our apps only for lawful purposes and in a manner consistent with all applicable laws and regulations.</p>

        <h3>3. User Conduct</h3>

        <p>You must not use our apps to transmit harmful, offensive, or disruptive content; attempt unauthorized access to systems; or interfere with other users' enjoyment of the apps.</p>

        <h3>4. Intellectual Property</h3>

        <p>All content, features, and functionality within our apps are the exclusive property of mavapps and are protected by applicable intellectual property laws.</p>

        <h3>5. Disclaimer</h3>

        <p>Our apps are provided on an "as available" basis. We make no guarantees regarding uptime, accuracy, or suitability for any particular purpose.</p>

        <h3>6. Indemnification</h3>

        <p>You agree to indemnify and hold harmless mavapps from any claims, damages, or expenses arising from your use of the apps or violation of these Terms.</p>

        <h3>7. Modifications</h3>

        <p>We reserve the right to modify these Terms at any time. Continued use of the apps after changes constitutes your acceptance of the revised Terms.</p>

        <h3>8. Contact</h3>

        <p>For questions about these Terms, contact us at: support@mavapps.com</p>

      </div>

    </div>

  </div>

  <script>

    document.getElementById('yr').textContent = new Date().getFullYear();

    function openModal(id) {

      document.getElementById('modal-' + id).classList.add('open');

      document.body.style.overflow = 'hidden';

    }

    function closeModal(id) {

      document.getElementById('modal-' + id).classList.remove('open');

      document.body.style.overflow = '';

    }

    function handleBackdropClick(e, id) {

      if (e.target === e.currentTarget) closeModal(id);

    }

    document.addEventListener('keydown', e => {

      if (e.key === 'Escape') {

        document.querySelectorAll('.modal-backdrop.open').forEach(el => {

          el.classList.remove('open');

          document.body.style.overflow = '';

        });

      }

    });

  </script>

</body>

</html>