<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Guide — tryGames</title>
<meta name="description" content="Everything you need to know to start playing and earning on tryGames." />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" type="image/png" sizes="32x32" href="img/logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/logo.png">
<link rel="apple-touch-icon" href="img/logo.png">
<link rel="shortcut icon" href="img/logo.png">

<style>
:root{
  --bg:#080a18; --bg-deep:#04050d;
  --surface:rgba(255,255,255,0.045); --surface-solid:#12142a; --surface-2:#181b38;
  --line:rgba(255,255,255,0.08); --line-bright:rgba(255,255,255,0.16);
  --cyan:#00e6d8; --cyan-glow:rgba(0,230,216,0.5);
  --magenta:#ff2f92; --magenta-glow:rgba(255,47,146,0.5);
  --violet:#8b5cf6; --gold:#ffc23c;
  --text:#eef0ff; --muted:#8b91b8;
  --font-display:'Orbitron', sans-serif; --font-head:'Rajdhani', sans-serif;
  --font-body:'Space Grotesk', sans-serif; --font-mono:'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16,.84,.44,1); --container: 1440px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--magenta);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,56px);}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 1100px 700px at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 1100px 700px at 50% 0%, #000 0%, transparent 75%);
}
main, header.site, footer.site{position:relative;z-index:1;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

header.site{position:sticky;top:0;z-index:50;background:rgba(6,7,17,0.7);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);}
.site-inner{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,56px);max-width:var(--container);margin:0 auto;}
.logo{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:0.5px;display:flex;align-items:center;gap:10px;}
.logo .dot{width:9px;height:9px;border-radius:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow), 0 0 20px var(--cyan-glow);animation:pulse-dot 2.2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.75);}}
.logo span.t{color:var(--text);}
.logo span.g{background:linear-gradient(90deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;}
.site-nav{display:flex;align-items:center;gap:28px;}
.site-links{display:flex;gap:26px;font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--muted);}
.site-links a{transition:color .2s ease;}
.site-links a:hover, .site-links a.active{color:var(--cyan);}
.auth-row{display:flex;gap:10px;}
.btn{font-family:var(--font-head);font-weight:700;font-size:14.5px;letter-spacing:0.3px;padding:11px 20px;border-radius:10px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(100deg,var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);background-size:200% 100%;color:#050710;box-shadow:0 4px 20px rgba(139,92,246,0.35);}
.btn-primary:hover{background-position:100% 0;box-shadow:0 8px 28px rgba(255,47,146,0.4);}
.btn-outline{background:rgba(255,255,255,0.03);color:var(--text);border:1.5px solid var(--line-bright);}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,230,216,0.06);}

.page-hero{padding:min(6vw,56px) clamp(20px,4vw,56px) 20px;text-align:center;}
.page-eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--cyan);letter-spacing:3px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.page-eyebrow::before, .page-eyebrow::after{content:"";width:22px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.page-title{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,5.2vw,58px);line-height:1.05;letter-spacing:-0.5px;margin:0 0 16px;}
.page-title .grad{background:linear-gradient(100deg,var(--cyan) 0%, var(--violet) 50%, var(--magenta) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-sub{font-size:15.5px;color:var(--muted);max-width:600px;margin:0 auto;line-height:1.65;}

.section{padding:44px clamp(20px,4vw,56px) 10px;}
.section-head{margin-bottom:28px;}
.section-eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:2.5px;color:var(--magenta);text-transform:uppercase;display:block;margin-bottom:10px;}
.section-title{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.8vw,30px);margin:0;color:var(--text);letter-spacing:0.2px;}
.section-title .accent{background:linear-gradient(100deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* jump-to nav */
.guide-toc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:6px;}
.toc-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:13.5px;color:var(--muted);background:var(--surface-solid);border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:border-color .2s ease, color .2s ease;}
.toc-chip:hover{color:var(--cyan);border-color:var(--line-bright);}
.toc-chip span{font-family:var(--font-mono);font-size:11px;color:var(--gold);}

/* numbered guide steps */
.guide-steps{display:flex;flex-direction:column;gap:18px;}
.guide-step{
  display:grid;grid-template-columns:64px 1fr;gap:22px;
  background:var(--surface-solid);border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 26px 22px;position:relative;overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.guide-step:hover{border-color:rgba(0,230,216,0.4);box-shadow:0 14px 30px rgba(0,0,0,0.4), 0 0 26px rgba(139,92,246,0.14);}
.guide-step-num{
  width:56px;height:56px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--text);
  background:var(--bg-deep);border:2px solid var(--magenta);
  box-shadow:0 0 0 5px rgba(255,47,146,0.1), 0 0 20px rgba(255,47,146,0.3);
}
.guide-step-body h3{font-family:var(--font-head);font-size:19px;font-weight:700;margin:0 0 8px;color:var(--text);}
.guide-step-body p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.7;}
.guide-step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.guide-step-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.55;}
.guide-step-list i{color:var(--cyan);font-size:12px;margin-top:3px;flex-shrink:0;}
@media (max-width:600px){ .guide-step{grid-template-columns:1fr;} .guide-step-num{margin-bottom:6px;} }

/* tips grid */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.tip-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:24px;transition:border-color .25s ease, transform .25s ease;}
.tip-card:hover{border-color:rgba(255,194,60,0.4);transform:translateY(-4px);}
.tip-card .ti{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:14px;background:rgba(255,194,60,.12);color:var(--gold);}
.tip-card h4{margin:0 0 8px;font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--text);}
.tip-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;}

/* payout methods */
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.method-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;transition:border-color .25s ease, transform .25s ease;}
.method-card:hover{border-color:rgba(0,230,216,0.4);transform:translateY(-3px);}
.method-card i{font-size:26px;color:var(--cyan);margin-bottom:12px;}
.method-card h4{margin:0 0 6px;font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text);}
.method-card span{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}

/* FAQ (reused pattern) */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto;}
.faq-item{background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:15px;}
.faq-q i{color:var(--cyan);transition:transform .3s ease;flex-shrink:0;}
.faq-item.open .faq-q i{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:14px;line-height:1.65;}

.cta-banner{margin:70px clamp(20px,4vw,56px) 20px;max-width:var(--container);margin-left:auto;margin-right:auto;border-radius:24px;padding:52px 30px;text-align:center;position:relative;background:linear-gradient(150deg, #14152c 0%, #0b0c1c 100%);border:1px solid var(--line-bright);overflow:hidden;}
.cta-banner .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.5;animation:float-orb 9s ease-in-out infinite;}
.cta-banner .orb1{width:260px;height:260px;background:var(--magenta);top:-90px;left:8%;}
.cta-banner .orb2{width:220px;height:220px;background:var(--cyan);bottom:-80px;right:10%;animation-delay:-3s;}
@keyframes float-orb{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-24px) scale(1.08);}}
.cta-banner h2{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3.2vw,34px);margin:0 0 14px;line-height:1.2;color:#fff;position:relative;z-index:1;}
.cta-banner p{color:var(--muted);margin:0 0 24px;font-size:15px;position:relative;z-index:1;}
.cta-banner .btn{position:relative;z-index:1;font-size:15.5px;padding:16px 32px;}

footer.site{padding:44px clamp(20px,4vw,56px) 28px;border-top:1px solid var(--line);margin-top:50px;}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:0;}
footer.site .foot-logo{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--muted);}
footer.site .foot-links{display:flex;gap:22px;font-family:var(--font-head);font-weight:600;font-size:13.5px;color:var(--muted);flex-wrap:wrap;}
footer.site .foot-links a:hover{color:var(--cyan);}
footer.site .foot-contact{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--muted);}
footer.site .foot-contact i{color:var(--cyan);font-size:12px;}
footer.site .foot-contact:hover{color:var(--text);}

@media (max-width:640px){ .site-links{display:none;} }
</style>
</head>
<body>

<div class="bg-grid"></div>

<header class="site">
  <div class="site-inner">
    <a href="index.html" class="logo"><span class="dot"></span><span class="t">try</span><span class="g">Games</span></a>
    <nav class="site-nav">
      <div class="site-links">
        <a href="/dashboard">Play</a>
        <a href="/withdraw">Cashout</a>
        <a href="/referrals">Refer</a>
        <a href="guide.html" class="active">Guide</a>
        <a href="blog.html">Blog</a>
      </div>
      <div class="auth-row">
        <a href="/login" class="btn btn-outline">Login</a>
        <a href="/register" class="btn btn-primary"><i class="fas fa-play"></i> Sign Up</a>
      </div>
    </nav>
  </div>
</header>

<main>
  <section class="page-hero reveal">
    <span class="page-eyebrow">Start here</span>
    <h1 class="page-title">The Complete <span class="grad">Guide</span></h1>
    <p class="page-sub">Everything you need to go from sign-up to your first cashout — no guesswork, no hidden steps.</p>
  </section>

  <section class="section reveal">
    <div class="wrap">
      <div class="guide-toc">
        <a href="#getting-started" class="toc-chip"><span>01</span> Getting Started</a>
        <a href="#playing" class="toc-chip"><span>02</span> Playing & Earning</a>
        <a href="#cashout" class="toc-chip"><span>03</span> Cashing Out</a>
        <a href="#referrals" class="toc-chip"><span>04</span> Referrals</a>
        <a href="#tips" class="toc-chip"><span>05</span> Pro Tips</a>
        <a href="#faq" class="toc-chip"><span>06</span> FAQ</a>
      </div>
    </div>
  </section>

  <!-- 01 GETTING STARTED -->
  <section class="section reveal" id="getting-started">
    <div class="wrap">
      <div class="section-head">
        <span class="section-eyebrow">Step one</span>
        <h2 class="section-title">Getting <span class="accent">Started</span></h2>
      </div>
      <div class="guide-steps">
        <div class="guide-step">
          <div class="guide-step-num">1</div>
          <div class="guide-step-body">
            <h3>Create your free account</h3>
            <p>Sign up with an email or your Google account — takes under a minute, and every game is free to play from the moment you're in.</p>
            <ul class="guide-step-list">
              <li><i class="fas fa-check"></i> No credit card or payment required to sign up</li>
              <li><i class="fas fa-check"></i> One account works across desktop, Android, and iOS</li>
            </ul>
          </div>
        </div>
        <div class="guide-step">
          <div class="guide-step-num">2</div>
          <div class="guide-step-body">
            <h3>Browse the arcade</h3>
            <p>Filter by category — Strategy, Puzzle, Casual, Idle, Cards, Action — or sort by highest bonus percentage to find what fits your style.</p>
            <ul class="guide-step-list">
              <li><i class="fas fa-check"></i> Star ratings reflect real player feedback</li>
              <li><i class="fas fa-check"></i> "NEW" tags highlight titles added this week</li>
            </ul>
          </div>
        </div>
        <div class="guide-step">
          <div class="guide-step-num">3</div>
          <div class="guide-step-body">
            <h3>Install and link your game</h3>
            <p>Tap a game card to install it through the store link, then open it — your progress links to your tryGames account automatically.</p>
            <ul class="guide-step-list">
              <li><i class="fas fa-check"></i> No extra codes or manual linking needed for most titles</li>
              <li><i class="fas fa-check"></i> Progress can take a few minutes to sync on first launch</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 02 PLAYING & EARNING -->
  <section class="section reveal" id="playing">
    <div class="wrap">
      <div class="section-head">
        <span class="section-eyebrow">Step two</span>
        <h2 class="section-title">Playing & <span class="accent">Earning</span></h2>
      </div>
      <div class="guide-steps">
        <div class="guide-step">
          <div class="guide-step-num">4</div>
          <div class="guide-step-body">
            <h3>Hit the milestones on the card</h3>
            <p>Each game card shows what unlocks the payout — a level, a rank, a set number of minutes played. Progress is tracked automatically in the background.</p>
            <ul class="guide-step-list">
              <li><i class="fas fa-check"></i> Check "My Offers" any time to see live progress bars</li>
              <li><i class="fas fa-check"></i> Bonus percentages apply on top of the base reward</li>
            </ul>
          </div>
        </div>
        <div class="guide-step">
          <div class="guide-step-num">5</div>
          <div class="guide-step-body">
            <h3>Stack offerwalls for extra earnings</h3>
            <p>Partners like AdGate, TimeWall, and OfferToro run surveys, app trials, and short tasks alongside your regular game earnings.</p>
            <ul class="guide-step-list">
              <li><i class="fas fa-check"></i> Most offers pay out within minutes of completion</li>
              <li><i class="fas fa-check"></i> Some offerwalls unlock at higher player levels</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 03 CASHING OUT -->
  <section class="section reveal" id="cashout">
    <div class="wrap">
      <div class="section-head">
        <span class="section-eyebrow">Step three</span>
        <h2 class="section-title">Cashing <span class="accent">Out</span></h2>
      </div>
      <p style="color:var(--muted);font-size:14.5px;margin:-10px 0 24px;max-width:640px;">Once a milestone clears, the reward lands straight in your balance. Withdraw the moment you clear the minimum threshold — no waiting for a fixed payout date.</p>
      <div class="method-grid">
        <div class="method-card"><i class="fab fa-paypal"></i><h4>PayPal</h4><span>Usually same-day</span></div>
        <div class="method-card"><i class="fas fa-gift"></i><h4>Gift Cards</h4><span>Amazon, Steam & more</span></div>
        <div class="method-card"><i class="fas fa-building-columns"></i><h4>Bank Transfer</h4><span>1–3 business days</span></div>
        <div class="method-card"><i class="fab fa-bitcoin"></i><h4>Crypto</h4><span>Usually under 30 min</span></div>
      </div>
    </div>
  </section>

  <!-- 04 REFERRALS -->
  <section class="section reveal" id="referrals">
    <div class="wrap">
      <div class="section-head">
        <span class="section-eyebrow">Step four</span>
        <h2 class="section-title">Growing With <span class="accent">Referrals</span></h2>
      </div>
      <div class="guide-steps">
        <div class="guide-step">
          <div class="guide-step-num">6</div>
          <div class="guide-step-body">
            <h3>Share your link, earn a lifetime cut</h3>
            <p>Every player who signs up through your link gets tracked to your account — you earn a percentage of what they make, for as long as they play.</p>
            <ul class="guide-step-list">
              <li><i class="fas fa-check"></i> Your link is in the Refer a Friend tab of your dashboard</li>
              <li><i class="fas fa-check"></i> Share buttons for Telegram, Twitter, and WhatsApp are built in</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 05 PRO TIPS -->
  <section class="section reveal" id="tips">
    <div class="wrap">
      <div class="section-head">
        <span class="section-eyebrow">Play smarter</span>
        <h2 class="section-title">Pro <span class="accent">Tips</span></h2>
      </div>
      <div class="tips-grid">
        <div class="tip-card">
          <span class="ti"><i class="fas fa-percent"></i></span>
          <h4>Chase the highest bonus first</h4>
          <p>Bonus percentages shown on each card stack on top of the base reward — sort by bonus when you're deciding what to play next.</p>
        </div>
        <div class="tip-card">
          <span class="ti"><i class="fas fa-calendar-check"></i></span>
          <h4>Play a little every day</h4>
          <p>Daily missions reset at 00:00 UTC. Short, consistent sessions clear more milestones than one long binge.</p>
        </div>
        <div class="tip-card">
          <span class="ti"><i class="fas fa-layer-group"></i></span>
          <h4>Run two or three games at once</h4>
          <p>Idle and strategy titles keep progressing in the background — queue one up while you actively play something else.</p>
        </div>
        <div class="tip-card">
          <span class="ti"><i class="fas fa-trophy"></i></span>
          <h4>Watch the weekly events</h4>
          <p>Tournaments like the Saturday Cash Cup add extra prize pools on top of your normal earnings — check the countdown on the homepage.</p>
        </div>
        <div class="tip-card">
          <span class="ti"><i class="fas fa-shield-halved"></i></span>
          <h4>Keep your account secure</h4>
          <p>Use a unique password and never share your login — this keeps your balance and referral earnings protected.</p>
        </div>
        <div class="tip-card">
          <span class="ti"><i class="fas fa-wallet"></i></span>
          <h4>Withdraw as soon as you clear the minimum</h4>
          <p>There's no benefit to letting balance sit — cash out as soon as you hit the threshold for your preferred method.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 06 FAQ -->
  <section class="section reveal" id="faq">
    <div class="wrap">
      <div class="section-head" style="text-align:center;">
        <span class="section-eyebrow">Still have questions</span>
        <h2 class="section-title">Frequently <span class="accent">Asked</span></h2>
      </div>
      <div class="faq-list">
        <div class="faq-item open">
          <div class="faq-q">Is tryGames actually free to play?<i class="fas fa-plus"></i></div>
          <div class="faq-a"><p>Yes. Every game in the arcade is free to download and free to play — you never pay to unlock a milestone or a payout.</p></div>
        </div>
        <div class="faq-item">
          <div class="faq-q">How long does a payout take?<i class="fas fa-plus"></i></div>
          <div class="faq-a"><p>Most withdrawals are approved within minutes and land in your account the same day, depending on the method chosen.</p></div>
        </div>
        <div class="faq-item">
          <div class="faq-q">Do I need to link my game account manually?<i class="fas fa-plus"></i></div>
          <div class="faq-a"><p>No — installing through the store link on the game card handles the linking automatically for most titles.</p></div>
        </div>
        <div class="faq-item">
          <div class="faq-q">What happens if I stop playing a game halfway through a milestone?<i class="fas fa-plus"></i></div>
          <div class="faq-a"><p>Your progress is saved. Come back anytime and pick up right where you left off — milestones don't expire.</p></div>
        </div>
      </div>
    </div>
  </section>

  <div class="cta-banner reveal">
    <span class="orb orb1"></span><span class="orb orb2"></span>
    <h2>READY TO START EARNING?</h2>
    <p>Create your free account and your first game is waiting on the dashboard.</p>
    <a href="/register" class="btn btn-primary"><i class="fas fa-play"></i> Create Free Account</a>
  </div>
</main>

<footer class="site">
  <div class="wrap">
    <span class="foot-logo">tryGames © 2026</span>
    <div class="foot-links">
      <a href="/register">Sign Up</a>
      <a href="/login">Login</a>
      <a href="guide.html">Guide</a>
      <a href="blog.html">Blog</a>
    </div>
    <a href="mailto:john@trygames.ink" class="foot-contact"><i class="fas fa-envelope"></i> john@trygames.ink</a>
  </div>
</footer>

<script>
(function(){
  var targets = document.querySelectorAll('.reveal, .guide-step, .tip-card');
  targets.forEach(function(el){ if(!el.classList.contains('reveal')) el.classList.add('reveal'); });
  var obs = new IntersectionObserver(function(entries){
    entries.forEach(function(entry, i){
      if(entry.isIntersecting){
        setTimeout(function(){ entry.target.classList.add('in'); }, (i % 6) * 60);
        obs.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
  targets.forEach(function(el){ obs.observe(el); });

  document.querySelectorAll('.faq-q').forEach(function(q){
    q.addEventListener('click', function(){
      var item = q.closest('.faq-item');
      var wasOpen = item.classList.contains('open');
      document.querySelectorAll('.faq-item.open').forEach(function(i){ i.classList.remove('open'); });
      if(!wasOpen) item.classList.add('open');
    });
  });
})();
</script>

</body>
</html>