<title>Nimbus Cloud Range</title> <style> :root { --gradient-top: #0b0f14; --gradient-bottom: #0f131a; --glass-bg: rgba(15, 19, 26, 0.7); --glass-border: rgba(120, 215, 255, 0.13); --glass-shadow: 0 6px 40px 0 rgba(120, 215, 255, 0.07); --neon-blue: #78d7ff; --neon-glow: 0 0 32px 6px #78d7ff99; --radius: 18px; --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --spacing: 8px; --chip-bg: rgba(120,215,255,0.12); --chip-border: #78d7ff; --chip-text: #b0e6ff; }

html, body { height: 100%; min-height: 100vh; margin: 0; padding: 0; font-family: var(--font-main); box-sizing: border-box; background: #10141e; }

.background-gradient { position: fixed; inset: 0; background: linear-gradient(180deg, var(--gradient-top) 0%, var(--gradient-bottom) 100%); z-index: 0; }

.centered { position: relative; min-height: 100vh; display: flex; flex-direction: column; gap: calc(var(--spacing) * 2.5); justify-content: flex-start; align-items: center; z-index: 1; padding-top: 4vh; padding-bottom: 6vh; }

.glass-card { background: var(--glass-bg); border-radius: var(--radius); box-shadow: var(--glass-shadow); border: 1.5px solid var(--glass-border); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); padding: 2.5rem 2rem; max-width: 420px; width: 100%; text-align: center; color: #fff; margin: 0.5rem 0; transition: box-shadow 0.2s, transform 0.2s; }

.glass-card.hero { box-shadow: 0 8px 64px 0 var(--neon-blue), var(--glass-shadow); }

.glass-card.hero h1 { text-shadow: 0 0 24px var(--neon-blue), 0 0 4px #fff3; }

.glass-card:hover, .glass-card:focus-within { box-shadow: 0 12px 80px 0 var(--neon-blue), 0 6px 40px 0 var(--neon-blue); transform: translateY(-4px) scale(1.012); }

.welcome h2 { color: #b0e6ff; text-shadow: 0 0 12px #78d7ff99; font-size: 1.5rem; }

h1 { font-size: clamp(2.5rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem 0; line-height: 1.1; }

h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 1.1rem 0; letter-spacing: -0.01em; }

h3 { font-size: 1.17rem; font-weight: 600; margin: 0.2rem 0 0.6rem 0; color: #bdf3ff; letter-spacing: -0.005em; line-height: 1.28; }

.subtitle { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; color: #b0e6ff; margin-bottom: 2.2rem; }

.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn { padding: 0.85em 1.6em; border-radius: 999px; border: none; font-size: 1.11rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; background: none; transition: background 0.12s, box-shadow 0.15s, color 0.15s, transform 0.15s; outline: none; box-shadow: 0 0 0 0 transparent; text-decoration: none; display: inline-block; }

.btn.primary { background: linear-gradient(90deg, var(--neon-blue), #e0f7ff 80%); color: #10141e; box-shadow: 0 2px 24px 0 var(--neon-blue); border: none; text-shadow: 0 0 6px #b0e6ff55; }

.btn.secondary { color: var(--neon-blue); border: 1.5px solid var(--neon-blue); background: transparent; }

.btn:hover, .btn:focus { color: #fff; background: linear-gradient(90deg, var(--neon-blue), #e0f7ff 80%); box-shadow: 0 0 20px 4px var(--neon-blue), 0 2px 24px 0 var(--neon-blue); transform: translateY(-2px) scale(1.04); outline: 2px solid var(--neon-blue); outline-offset: 2px; }

/* PDF Section */ .pdf-downloads { max-width: 600px; margin: 1.2rem 0; }

.pdf-row { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

.pdf-card { background: rgba(120,215,255,0.09); border-radius: 20px; border: 1.5px solid rgba(120,215,255,0.23); box-shadow: 0 0 24px 0 #78d7ff33; padding: 1.4rem 1.2rem 1.6rem 1.2rem; min-width: 180px; max-width: 240px; flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.18s, transform 0.18s; margin-bottom: 0.7rem; }

.pdf-card:hover { box-shadow: 0 0 36px 6px #78d7ff88, 0 0 24px 0 #78d7ff33; transform: translateY(-3px) scale(1.025); }

.pdf-card h3 { font-size: 1.15rem; color: #b0e6ff; margin-bottom: 0.4em; }

.pdf-desc { font-size: 1.01rem; color: #e0f7ff; margin-bottom: 1em; }

.pdf-price { display: block; font-size: 1.12rem; font-weight: 700; color: #78d7ff; margin-bottom: 1.1em; text-decoration: none; }

.pdf-btn { width: 100%; margin-top: auto; }

.mission { max-width: 470px; }

.audience { max-width: 530px; }

.chips-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .chip { display: inline-block; background: var(--chip-bg); border-radius: 999px; border: 1.5px solid var(--chip-border); color: var(--chip-text); font-size: 1rem; padding: 0.5em 1.2em; margin: 0.1em 0; box-shadow: 0 0 10px 0 var(--neon-blue); transition: background 0.16s, box-shadow 0.18s; } .chip:hover, .chip:focus { background: rgba(120,215,255,0.24); box-shadow: 0 0 16px 2px var(--neon-blue); }

.features-row { display: flex; gap: 1.3rem; flex-wrap: wrap; justify-content: center; width: 100%; }

.feature-card { max-width: 230px; min-width: 162px; flex: 1 1 160px; padding: 1.2rem 1rem; margin-bottom: 0; margin-top: 0; border-radius: 23px; }

.glass-pill.counter-section { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0.6em 2em 0.6em 1.2em; font-size: 1.06rem; font-weight: 600; color: #b0e6ff; background: rgba(120,215,255,0.13); border: 1.5px solid var(--neon-blue); box-shadow: 0 0 20px 5px var(--neon-blue); gap: 0.7em; margin-top: 1.6rem; margin-bottom: 0.7rem; min-width: 170px; }

.counter-dot { display: inline-block; width: 0.7em; height: 0.7em; background: var(--neon-blue); border-radius: 50%; box-shadow: 0 0 10px 2px var(--neon-blue); margin-right: 0.4em; vertical-align: middle; }

#visitor-count { font-size: 1.16em; font-weight: bold; color: #fff; margin: 0 0.12em; text-shadow: 0 0 8px #b0e6ff55; }

footer { width: 100vw; display: flex; justify-content: center; align-items: center; margin-top: 1.6rem; padding: 1.2rem 0 1.7rem; background: transparent; z-index: 3; font-size: 1rem; } footer nav { display: flex; gap: 2.2rem; } footer a { color: #b0e6ff; text-decoration: none; transition: color 0.15s; } footer a:hover, footer a:focus { color: #fff; text-shadow: var(--neon-glow); outline: none; }

.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

@media (max-width: 1050px) { .features-row { flex-wrap: wrap; gap: 1rem; } .feature-card { max-width: 320px; min-width: 160px; } }

@media (max-width: 700px) { .features-row { flex-direction: column; align-items: center; gap: 0.7rem; } .feature-card { max-width: 340px; width: 94%; min-width: 0; } .centered { padding-top: 2vh; padding-bottom: 4vh; } }

/* Apple.com-style, sticky footer */ .apple-footer { background: #161617; color: #aaa; font-size: 0.95rem; padding: 3rem 0 1.2rem 0; border-top: 1px solid #222; width: 100vw; margin-top: 4rem; } .apple-footer-content { max-width: 1120px; margin: 0 auto; padding: 0 2vw; display: flex; flex-direction: column; align-items: stretch; } .apple-footer-columns { display: flex; gap: 3rem; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 2rem; } .apple-footer-col { min-width: 140px; flex: 1; } .apple-footer-col h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.7em; color: #fff; letter-spacing: 0.02em; } .apple-footer-col ul { list-style: none; padding: 0; margin: 0; } .apple-footer-col ul li { margin-bottom: 0.4em; } .apple-footer-col ul li a { color: #aaa; text-decoration: none; padding: 0.16em 0; display: inline-block; border-radius: 5px; transition: color 0.15s, background 0.15s; } .apple-footer-col ul li a:hover, .apple-footer-col ul li a:focus { color: #fff; background: #232327; outline: none; } .apple-footer-note { text-align: center; font-size: 1.08em; color: #e0f7ff; margin-bottom: 1.7em; font-weight: 500; letter-spacing: 0.01em; } .apple-footer-copyright { text-align: center; color: #aaa; font-size: 0.93em; } @media (max-width: 800px) { .apple-footer-columns { flex-direction: column; gap: 1.7rem; align-items: flex-start; } .apple-footer-col { min-width: 0; } } </style>

Play smarter. Faster.

Arcade-fast games and AI-assisted learning in one polished experience.

Play 60-Second Spades Get TestFlight

<!-- WELCOME -->
<section class="glass-card welcome" aria-labelledby="welcome-title">
  <h2 id="welcome-title">Welcome to Nimbus</h2>
  <p>
    Here, innovation isn’t reserved for a few&mdash;it’s for every dreamer, builder, and problem-solver ready to make an impact.
  </p>
</section>

<!-- PDF DOWNLOADS -->
<section class="glass-card pdf-downloads" aria-labelledby="pdf-title">
  <h2 id="pdf-title">Get Our Strategy PDFs</h2>
  <div class="pdf-row">
    <div class="pdf-card">
      <h3>Free PDF</h3>
      <p class="pdf-desc">Intro to Winning at Spades</p>
      <a href="/assets/intro-winning-at-spades.pdf" class="pdf-price" download>Download Free PDF</a>
      <a href="/assets/intro-winning-at-spades.pdf" class="btn primary pdf-btn" download>Download Free</a>
    </div>
    <div class="pdf-card">
      <h3>Pro Guide PDF</h3>
      <p class="pdf-desc">Advanced Tactics &amp; AI Insights</p>
      <a href="/assets/advanced-tactics-ai-insights.pdf" class="pdf-price" download>Download Pro Guide PDF ($4.99)</a>
      <a href="/assets/advanced-tactics-ai-insights.pdf" class="btn secondary pdf-btn" download>Buy &amp; Download</a>
    </div>
  </div>
</section>

<!-- MISSION -->
<section class="glass-card mission" aria-labelledby="mission-title">
  <h2 id="mission-title">Our Mission</h2>
  <p>
    We build elegant, lightning-fast games and tools that turn casual play into skill—using accessible design and practical AI.
  </p>
</section>

<!-- AUDIENCE -->
<section class="glass-card audience" aria-labelledby="audience-title">
  <h2 id="audience-title">For you, if you are:</h2>
  <div class="chips-row">
    <span class="chip">Competitive casual (15–45) who loves quick, skill-based games</span>
    <span class="chip">Card-game fan seeking clean UX &amp; fair AI</span>
    <span class="chip">Learner or tinkerer who enjoys stats, strategy &amp; short sessions</span>
  </div>
</section>

<!-- FEATURES -->
<section class="features-row" aria-labelledby="features-title">
  <h2 id="features-title" class="visually-hidden">Features</h2>
  <div class="glass-card feature-card">
    <h3>Classic Spades<br>&amp; 60-Second Mode</h3>
  </div>
  <div class="glass-card feature-card">
    <h3>Clear Turn/<br>Trick Guidance</h3>
  </div>
  <div class="glass-card feature-card">
    <h3>Offline-Friendly,<br>Low Battery</h3>
  </div>
  <div class="glass-card feature-card">
    <h3>Privacy-Respecting<br>Analytics</h3>
  </div>
</section>

<!-- VISITOR COUNTER -->
<section class="glass-pill counter-section" aria-label="Live Visitors">
  <span class="counter-dot"></span>
  <span id="visitor-count">23</span>
  <span>visitors online</span>
</section>

Rules FAQ Privacy Contact

Games

• Action
• Strategy
• RPG

Resources

• Guides
• Tutorials
• Courses

Legal

• Privacy Policy
• Terms of Service

Making IT and AI education accessible and affordable for everyone.

© 2025 Nimbus Cloud Range. All rights reserved.