<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoldenTechClub.org — Equity in Technology & Health</title>
<meta name="description" content="GoldenTechClub.org provides structural equity in technology and digital healthcare for seniors. Learn to navigate everyday phone apps, telehealth platforms, and wearable technology through secure, interactive tools.">

<!-- PWA: lets members install Golden Tech Club on their home screen, with no browser bars -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#0A1E42">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Golden Tech">

<!-- Google Fonts: Cinzel for high-end chiseled authority + Montserrat for crisp, modern infrastructure tracking -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&amp;family=Montserrat:wght@400;500;600;700&amp;display=swap">

<style>
  /* =========================================
     1. ELITE ARCHITECTURAL TOKENS
     ========================================= */
  :root{
    --navy-deep:      #040a1a;   /* Rich midnight onyx foundation */
    --navy:           #07132b;   /* Institutional deep corporate primary */
    --navy-header:    #0A1E42;   /* Deep prestigious navy blue */
    --navy-panel:      #0d1e3d;   /* Unified elite module layer */
    --navy-panel-2:   #142a52;   /* Hover glow projection canvas */
    --gold:           #C5A059;   /* Bespoke tailored gold alloy */
    --gold-bright:    #F5E2BE;   /* Pristine high-point chrome gold reflection */
    --gold-deep:      #85662F;   
    --white:          #FFFFFF;
    --off-white:      #E1DCD1;   
    --line:           rgba(197,160,89,0.15);

    --font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
    --font-body: 'Montserrat', 'Segoe UI', Arial, sans-serif;

    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-full: 999px;

    --shadow-gold: 0 10px 40px rgba(197,160,89,0.15);
    --shadow-soft: 0 30px 60px rgba(2, 5, 13, 0.8);
    --shadow-premium: 0 40px 80px rgba(197,160,89,0.05);

    --container: 1200px;
  }

  /* =========================================
     2. GLOBAL ARCHITECTURE RESET
     ========================================= */
  *, *::before, *::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

  body{
    margin: 0;
    background: var(--navy);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
  }

  h1, h2, h3{
    font-family: var(--font-head);
    color: var(--white);
    line-height: 1.2;
    margin: 0 0 0.5em 0;
    font-weight: 700;
  }

  p{ margin: 0 0 1.2em 0; }
  ul{ margin: 0; padding: 0; list-style: none; }
  a{ color: inherit; text-decoration: none; }
  img{ max-width: 100%; display: block; }

  .container{
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
  }

  section{ padding: 130px 0; }

  /* Accessible compliance styling */
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible{
    outline: 3px solid var(--gold-bright);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .skip-link{
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--gold);
    color: var(--navy-deep);
    font-weight: 700;
    padding: 16px 24px;
    z-index: 999;
  }
  .skip-link:focus{ left: 0; }

  .eyebrow{
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--gold);
    margin-bottom: 20px;
  }

  .section-heading{
    text-align: center;
    max-width: 820px;
    margin: 0 auto 80px auto;
  }
  .section-heading h2{ 
    font-size: clamp(34px, 4vw, 48px); 
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
  }
  .section-heading p{ font-size: 20px; color: var(--off-white); font-weight: 500; line-height: 1.6; }
  
  .section-heading::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--gold);
    margin: 36px auto 0 auto;
  }

  /* =========================================
     3. EXECUTIVE INTERACTIVE BUTTONS
     ========================================= */
  .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 36px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease;
    white-space: nowrap;
  }
  .btn-primary{
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
    color: var(--navy-deep);
    box-shadow: var(--shadow-gold);
    border: none;
  }
  .btn-primary:hover, .btn-primary:focus-visible{
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 20px 45px rgba(197,160,89,0.35);
  }

  /* =========================================
     4. INSTITUTIONAL NAVY HEADER
     ========================================= */
  header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navy-header); 
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  }
  .nav-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 40px;
    max-width: var(--container);
    margin: 0 auto;
    gap: 40px;
  }
  .logo{
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .logo-text {
    display: flex;
    flex-direction: column;
  }
  .logo-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .logo-icon-wrapper::after {
    content: "";
    display: block;
    width: 1px;
    height: 36px;
    background: rgba(197,160,89,0.35);
  }
  .logo-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .logo-mark{
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    
    background: linear-gradient(
      to right, 
      #C5A059 0%, 
      #C5A059 38%, 
      #FFFFFF 50%, 
      #C5A059 62%, 
      #C5A059 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: masterShine 8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  }
  .logo-sub{
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: var(--white);
    margin-top: 6px;
  }
  .main-nav ul{
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .main-nav a{
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--off-white);
    text-shadow: 0 0 10px rgba(245, 226, 190, 0.15); 
    transition: color 0.2s ease, background 0.2s ease, text-shadow 0.2s ease;
    border-radius: var(--radius-md);
  }
  .main-nav a:hover, .main-nav a:focus-visible{
    color: var(--gold-bright);
    text-shadow: 0 0 14px rgba(245, 226, 190, 0.6); 
    background: rgba(197,160,89,0.06);
  }

  .menu-toggle {
    display: none;
    background: none;
    border: 2px solid var(--gold);
    border-radius: 8px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .menu-toggle svg { width: 22px; height: 22px; }

  @media (max-width: 1500px) {
    .menu-toggle { display: flex; }
    .main-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--navy-header);
      border-bottom: 1px solid var(--line);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
    .main-nav.open { max-height: 600px; }
    .main-nav ul {
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 12px 24px 26px;
    }
    .main-nav li { width: 100%; }
    .main-nav a { display: block; text-align: center; padding: 14px 10px; }
  }

  /* =========================================
     5. HERO ENGINE & SPARKLE OVERLAYS
     ========================================= */
  .hero{
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    min-height: 650px;
    display: flex;
    align-items: center;
  }
  .hero-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
  }
  .hero-media::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      rgba(4,10,26,0.70) 0%,
      rgba(4,10,26,0.65) 40%,
      rgba(4,10,26,0.25) 70%,
      rgba(4,10,26,0.05) 100%);
    z-index: 1;
  }

  .sparkle-left {
    position: absolute;
    bottom: 2%;
    left: 6%;
    width: 460px;
    height: 300px;
    background: radial-gradient(circle, rgba(245,226,190,0.6) 0%, rgba(197,160,89,0.32) 45%, rgba(0,0,0,0) 72%);
    z-index: 2; 
    pointer-events: none;
    --sparkle-rot: 12deg;
    transform: rotate(var(--sparkle-rot));
    animation: sparkleBreathe 3.5s ease-in-out infinite alternate;
  }

  .sparkle-right {
    position: absolute;
    bottom: -4%;
    right: 4%;
    width: 560px;
    height: 360px;
    background: radial-gradient(circle, rgba(245,226,190,0.65) 0%, rgba(197,160,89,0.34) 45%, rgba(0,0,0,0) 72%);
    z-index: 2; 
    pointer-events: none;
    --sparkle-rot: -6deg;
    transform: rotate(var(--sparkle-rot));
    animation: sparkleBreathe 3.5s ease-in-out infinite alternate-reverse; 
  }

  @keyframes sparkleBreathe {
    0% { transform: scale(0.88) rotate(var(--sparkle-rot, 0deg)); opacity: 0.55; filter: blur(2px); }
    100% { transform: scale(1.15) rotate(var(--sparkle-rot, 0deg)); opacity: 1.0; filter: blur(0px); }
  }

  .hero-inner{
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 160px 0;
  }
  .hero-copy{
    max-width: 680px;
    margin: 0 auto;
    padding-top: 150px;
    text-align: center;
  }

  .hero-emblem {
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
    margin: 0 auto 30px auto;
    display: block;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: emblemReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both,
               emblemPulse 3.4s ease-in-out 1.1s infinite;
  }
  .hero-emblem svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  @keyframes emblemReveal {
    0% { opacity: 0; transform: translateY(16px) scale(0.85); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes emblemPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(197,160,89,0.35)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 22px rgba(197,160,89,0.65)); transform: scale(1.06); }
  }

  .shine-title {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: clamp(36px, 4.8vw, 58px); 
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    line-height: 1.2;
    opacity: 0;
    position: relative;
    z-index: 1;
    
    background: linear-gradient(
      to right, 
      #C5A059 0%, 
      #C5A059 38%, 
      #FFFFFF 50%, 
      #C5A059 62%, 
      #C5A059 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35)) drop-shadow(0 0 22px rgba(197,160,89,0.4)) drop-shadow(0 0 46px rgba(197,160,89,0.22));
    animation: titleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               masterShine 8s cubic-bezier(0.25, 1, 0.5, 1) 1.3s infinite;
  }

  @keyframes titleReveal {
    0% { opacity: 0; transform: translateY(18px); clip-path: inset(0 100% 0 -0.1em); }
    18% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0% 0 -0.1em); }
  }

  .shine-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,0.95) 49%,
      rgba(255,255,255,0.95) 51%,
      transparent 65%
    );
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 200% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
    opacity: 0;
    animation: sweepHighlight 5s ease-in-out 2.4s infinite;
  }

  @keyframes sweepHighlight {
    0%   { background-position: 200% center; opacity: 0; }
    8%   { opacity: 1; }
    22%  { background-position: -60% center; opacity: 0; }
    100% { background-position: -60% center; opacity: 0; }
  }

  @keyframes masterShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  .title-underline {
    width: 0;
    height: 2px;
    margin: 0 0 24px 0;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 50%, transparent 100%);
    box-shadow: 0 0 12px rgba(197,160,89,0.6);
    animation: underlineDraw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
  }

  @keyframes underlineDraw {
    0% { width: 0; opacity: 0; }
    100% { width: 130px; opacity: 1; }
  }

  .subtitle-clean {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(15px, 1.8vw, 18px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 0;
    opacity: 0;

    background: linear-gradient(
      to right, 
      #E1DCD1 0%, 
      #E1DCD1 40%, 
      #FFFFFF 50%, 
      #E1DCD1 60%, 
      #E1DCD1 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: subtitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both,
               subtitleShine 10s ease 2s infinite;
  }

  @keyframes subtitleReveal {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes subtitleShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  /* =========================================
     6. MISSION SHIMMER ACCENT BAND
     ========================================= */
  .equity-band{
    background: linear-gradient(90deg, var(--navy-deep) 0%, #09152b 50%, var(--navy-deep) 100%);
    border-bottom: 1px solid var(--line);
    padding: 80px 0;
    text-align: center;
  }
  
  .equity-text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: 0.04em;
    line-height: 1.5;
    max-width: 1040px;
    margin: 0 auto;

    background: linear-gradient(
      to right, 
      #DFBA74 0%, 
      #DFBA74 42%, 
      #FFF5DF 50%, 
      #DFBA74 58%, 
      #DFBA74 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bandShine 12s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  }

  @keyframes bandShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  /* =========================================
     7. TRUST PILLARS SECTION
     ========================================= */
  .pillars{ background: var(--navy); padding: 140px 0; }
  .pillar-row{
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .pillar-item{
    flex: 1 1 180px;
    text-align: center;
    padding: 12px;
  }
  .pillar-seal{
    width: 68px;
    height: 68px;
    margin: 0 auto 28px auto;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pillar-seal svg{ width: 28px; height: 28px; }
  .pillar-item h3{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 16px;
    font-family: var(--font-body);
  }
  .pillar-item p{
    font-size: 15px;
    color: var(--off-white);
    margin: 0;
    line-height: 1.65;
    font-weight: 500;
  }

  /* =========================================
     8. SEAMLESS GLASSMorphic MOdules ENGINE
     ========================================= */
  .preview-video .video-frame{
    max-width: 960px;
    margin: 0 auto;
    background: var(--navy-panel);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-soft);
  }
  .video-screen{
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--navy-panel-2), var(--navy-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .play-button{
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-gold);
    border: none;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .play-button:hover, .play-button:focus-visible{ 
    transform: scale(1.08); 
  }
  .play-button svg{ width: 34px; height: 34px; margin-left: 6px; }
  .video-caption{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 8px 4px 8px;
  }
  .video-caption h3{ margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.01em; }
  .video-caption span{
    font-size: 14px;
    color: var(--gold-bright);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .games-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 96px;
  }
  
  .game-card{
    background: rgba(13, 30, 61, 0.6); 
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background-color 0.4s ease;
  }
  .game-card:hover{
    transform: translateY(-8px);
    background-color: rgba(20, 42, 82, 0.85);
    box-shadow: 0 40px 70px rgba(2, 5, 13, 0.95), 0 0 30px rgba(197,160,89,0.04);
  }
  .game-thumb{
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20, 42, 82, 0.4) 0%, var(--navy-deep) 100%);
  }
  .game-thumb svg{ 
    width: 60px; 
    height: 60px; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  }
  .game-card:hover .game-thumb svg {
    transform: scale(1.1) rotate(2deg);
    filter: drop-shadow(0 0 15px rgba(197,160,89,0.5));
  }
  .game-body{
    padding: 40px 32px 44px 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  .game-body h3{ font-size: 23px; margin-bottom: 14px; letter-spacing: 0.02em; font-weight: 700; }
  .game-body p{
    font-size: 16px;
    color: var(--off-white);
    flex-grow: 1;
    margin-bottom: 36px;
    line-height: 1.7;
    font-weight: 500;
  }

  /* =========================================
     9. CORPORATE FOOTER
     ========================================= */
  footer{
    background: var(--navy-deep);
    border-top: 1px solid var(--line);
    padding: 96px 0 48px 0;
  }
  .privacy-badge{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto 56px auto;
    background: rgba(197,160,89,0.02);
    border: 1px solid var(--gold);
    border-radius: var(--radius-full);
    padding: 16px 36px;
    text-align: center;
  }
  .privacy-badge p{
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    color: var(--white);
    letter-spacing: 0.04em;
  }
  .footer-bottom{
    text-align: center;
    color: var(--off-white);
    font-size: 15px;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 36px;
    letter-spacing: 0.03em;
  }
  .footer-nav{
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .footer-nav a{
    text-decoration: none;
    color: var(--off-white);
    font-size: 15px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
  }
  .footer-nav a:hover, .footer-nav a:focus-visible{ color: var(--gold-bright); }

  /* =========================================
     10. MOBILE ORCHESTRATION RESPONSIVITY
     ========================================= */
  @media (max-width: 1040px){
    .games-grid{ grid-template-columns: 1fr; gap: 36px; }
    .pillar-row{ justify-content: center; gap: 24px; }
    .pillar-item{ flex: 1 1 40%; }
    .hero-copy { max-width: 100%; }
    .hero-media::after{
      background: linear-gradient(180deg, rgba(4,10,26,0.6) 0%, rgba(4,10,26,0.96) 85%);
    }
  }
  @media (max-width: 640px){
    section{ padding: 90px 0; }
    .container{ padding: 0 24px; }
    .nav-wrap{ flex-wrap: nowrap; gap: 10px; padding: 16px 20px; }
    .logo-icon-wrapper::after { display: none; }
    .logo-icon { width: 28px; height: 28px; }
    .logo-mark { font-size: 15px; letter-spacing: 0.01em; }
    .logo-sub { display: none; }
    .hero-media{ min-height: 550px; aspect-ratio: 4 / 5; }
    .hero-inner { padding: 100px 0; }
    .pillar-item{ flex: 1 1 100%; }
    .sparkle-left, .sparkle-right { display: none; }
  }

  /* =========================================
     HELPFUL HAND — instructional overlay
     ========================================= */
  .helpful-hand-toggle {
    position: fixed; bottom: 22px; right: 22px; z-index: 200;
    display: flex; align-items: center; gap: 10px;
    background: var(--navy-panel); border: 2px solid var(--gold); border-radius: var(--radius-full);
    padding: 12px 20px 12px 16px; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.45);
    font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--off-white);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .helpful-hand-toggle:hover { box-shadow: 0 10px 30px rgba(197,160,89,0.35); }
  .helpful-hand-toggle .hh-icon {
    width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gold);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;
  }
  .helpful-hand-toggle.active { border-color: var(--gold-bright); }
  .helpful-hand-toggle.active .hh-icon { background: var(--gold-bright); color: var(--bg-midnight); }
  .helpful-hand-toggle .hh-state { color: var(--gold-bright); }

  .hh-tooltip {
    position: absolute; z-index: 199; max-width: 260px;
    background: rgba(10, 22, 48, 0.97); border: 1.5px solid var(--gold); border-radius: 14px;
    padding: 14px 16px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
    color: var(--off-white); box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .hh-tooltip.visible { opacity: 1; transform: translateY(0); }
  .hh-tooltip::before {
    content: ""; position: absolute; width: 12px; height: 12px; background: rgba(10, 22, 48, 0.97);
    border-left: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); transform: rotate(45deg);
  }
  .hh-tooltip.arrow-top::before { top: -7px; left: 50%; margin-left: -6px; }
  .hh-tooltip.arrow-bottom::before { bottom: -7px; left: 50%; margin-left: -6px; transform: rotate(225deg); }

  [data-hand-tip].hh-highlight {
    outline: 2px dashed var(--gold-bright); outline-offset: 4px; border-radius: 8px;
  }

  @media (max-width: 640px) {
    .helpful-hand-toggle { bottom: 14px; right: 14px; padding: 10px 16px 10px 12px; font-size: 13px; }
    .helpful-hand-toggle .hh-state { display: none; }
  }
</style>
</head>
<body>

<button class="helpful-hand-toggle" id="helpful-hand-toggle" aria-pressed="false">
  <span class="hh-icon">✋</span>
  <span>Helpful Hand: <span class="hh-state" id="hh-state">Off</span></span>
</button>

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- =========================================
     HEADER
     ========================================= -->
<header>
  <div class="nav-wrap">
    <a href="#" class="logo" aria-label="GoldenTechClub.org home" data-hand-tip="This takes you back to the very beginning, anytime you feel lost. You can always start fresh from here.">
      <div class="logo-icon-wrapper">
        <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <polygon points="12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5 12 3"></polygon>
        </svg>
      </div>
      <div class="logo-text">
        <span class="logo-mark">GoldenTechClub.org</span>
        <span class="logo-sub">LEARN&nbsp;•&nbsp;PLAY&nbsp;•&nbsp;CONNECT</span>
      </div>
    </a>
    <nav class="main-nav" id="main-nav" aria-label="Main navigation">
      <ul>
        <li><a href="#labs" data-hand-tip="This will show you our free practice tools, right here on this page. Nothing to install, nothing to buy.">Labs</a></li>
        <li><a href="#video" data-hand-tip="This jumps down to our video library. Don't worry, you're not leaving the page.">Videos</a></li>
        <li><a href="games.html" data-hand-tip="This opens our Games page, just for fun. No pressure, and no score that matters.">Games</a></li>
        <li><a href="tools.html" data-hand-tip="This opens our Tools page &mdash; helpful, practical things like a tool that reads text aloud for you.">Tools</a></li>
        <li><a href="legacy.html" data-hand-tip="This opens Legacy, a gentle way to write down your life story and keep it, just for you and the people you love.">Legacy</a></li>
        <li><a href="golden-wellness.html" data-hand-tip="This will take you to Golden Wellness. Feel free to look around.">Golden Wellness</a></li>
        <li><a href="heirloom-kitchen.html" data-hand-tip="This takes you to The Heirloom Kitchen. You can always find your way back with the Home button.">The Heirloom Kitchen</a></li>
      </ul>
    </nav>
    <button class="menu-toggle" id="menu-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="main-nav" data-hand-tip="This opens the menu so you can see all your options. Tap it again anytime to close it.">
      <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
    </button>
  </div>
</header>

<main id="main-content">

  <!-- =========================================
       HERO
       ========================================= -->
  <section class="hero">
    <div class="hero-media">
      <img src="hero-bg.jpg" alt="Members of GoldenTechClub gathered warmly around a table, smiling and enjoying digital learning tools">
    </div>
    
    <div class="sparkle-left"></div>
    <div class="sparkle-right"></div>

    <div class="hero-inner">
      <div class="container">
        <div class="hero-copy">
          <div class="hero-emblem" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polygon points="12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5 12 3"></polygon>
            </svg>
          </div>
          <h1 class="shine-title" data-text="WELCOME TO THE CLUB">
            WELCOME TO THE CLUB
          </h1>
          <div class="title-underline"></div>
          <p class="subtitle-clean">
            Step Into Your Golden Age of Technology
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================================
       EQUITY MISSION BAND
       ========================================= -->
  <section class="equity-band" aria-label="Program Mission Statement">
    <div class="container">
      <h2 class="equity-text">
        Golden Tech Club Provides Structural Equity in Technology and Healthcare.
      </h2>
    </div>
  </section>

  <!-- =========================================
       FIVE MISSION PILLARS
       ========================================= -->
  <section class="pillars" aria-label="Our mission">
    <div class="container">
      <div class="pillar-row">

        <div class="pillar-item">
          <div class="pillar-seal" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><ellipse cx="12" cy="12" rx="4" ry="9"></ellipse><line x1="3" y1="12" x2="21" y2="12"></line></svg>
          </div>
          <h3>Explore</h3>
          <p>Discover useful apps for everyday life.</p>
        </div>

        <div class="pillar-item">
          <div class="pillar-seal" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
          </div>
          <h3>Connect</h3>
          <p>Build relationships and community.</p>
        </div>

        <div class="pillar-item">
          <div class="pillar-seal" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"></path><path d="M10 22h4"></path><path d="M12 2a7 7 0 0 0-4 12.9V17h8v-2.1A7 7 0 0 0 12 2z"></path></svg>
          </div>
          <h3>Learn</h3>
          <p>Understand how AI works and helps.</p>
        </div>

        <div class="pillar-item">
          <div class="pillar-seal" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
          </div>
          <h3>Stay Safe</h3>
          <p>Protect yourself online.</p>
        </div>

        <div class="pillar-item">
          <div class="pillar-seal" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
          </div>
          <h3>Communicate</h3>
          <p>Stay in touch and share ideas.</p>
        </div>

      </div>
    </div>
  </section>

  <!-- =========================================
       FEATURED VIDEO
       ========================================= -->
  <section class="preview-video" id="video" aria-labelledby="video-heading">
    <div class="container">
      <div class="section-heading">
        <span class="eyebrow">Watch &amp; Enjoy</span>
        <h2 id="video-heading">Featured Video</h2>
        <p>New short videos every week &mdash; no account needed to watch.</p>
      </div>
      <div class="video-frame">
        <div class="video-screen">
          <button class="play-button" aria-label="Play featured video" data-hand-tip="This plays a short welcome video. Just tap it again if you'd like to pause.">
            <svg viewBox="0 0 24 24" fill="#040a1a"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
          </button>
        </div>
        <div class="video-caption">
          <h3>Getting Started: Your First Week in the Club</h3>
          <span>4 min watch</span>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================================
       DIGITAL TRAINING LABS
       ========================================= -->
  <section id="labs" aria-labelledby="labs-heading">
    <div class="container">
      <div class="section-heading">
        <span class="eyebrow">Interactive Modules</span>
        <h2 id="labs-heading">Digital Training Labs</h2>
        <p>Fun, easy activities designed to help you practice using smartphone apps, stay healthy, and build technology confidence with zero pressure.</p>
      </div>

      <div class="games-grid">

        <!-- Module 1: App Memory Match -->
        <article class="game-card">
          <div class="game-thumb" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect></svg>
          </div>
          <div class="game-body">
            <h3>App Memory Match</h3>
            <p>Flip and match common phone icons. A fun, relaxing way to learn what different buttons do on a smartphone or tablet.</p>
            <a href="memory-game.html" class="btn btn-primary" data-hand-tip="This opens a fun matching game with phone icons. It's just practice, so nothing you do here affects your real phone.">Launch Lab</a>
          </div>
        </article>

        <!-- Module 2: Spot the Scam -->
        <article class="game-card">
          <div class="game-thumb" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
          </div>
          <div class="game-body">
            <h3>Spot the Scam Challenge</h3>
            <p>Learn how to safely spot deceptive text messages, phishing emails, and fake phone alerts in a fun, zero-pressure challenge.</p>
            <a href="spot-the-scam.html" class="btn btn-primary" data-hand-tip="This opens a safe practice round for spotting scams. Nothing here is real, so there's nothing to worry about.">Launch Lab</a>
          </div>
        </article>

        <!-- Module 3: Telehealth Match Game -->
        <article class="game-card">
          <div class="game-thumb" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg>
          </div>
          <div class="game-body">
            <h3>Telehealth Match Game</h3>
            <p>Flip and match cards to learn telehealth tools, wearable devices, and what your health readings mean &mdash; a relaxed way to build confidence with modern healthcare tech.</p>
            <a href="health-game.html" class="btn btn-primary" data-hand-tip="This opens a simple matching game about health apps and devices. Take all the time you'd like.">Launch Lab</a>
          </div>
        </article>

        <!-- Module 4: Phone Task Trainer -->
        <article class="game-card">
          <div class="game-thumb" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="2" width="10" height="20" rx="2"></rect><line x1="11" y1="18" x2="13" y2="18"></line></svg>
          </div>
          <div class="game-body">
            <h3>Phone Task Trainer</h3>
            <p>Practice real phone tasks step by step &mdash; texting, video calls, taking photos, gestures, and more &mdash; on a safe simulated phone with no risk of mistakes.</p>
            <a href="phone.html" class="btn btn-primary" data-hand-tip="This opens a pretend phone you can safely practice on. It's not your real phone, so you can't break anything.">Launch Lab</a>
          </div>
        </article>

        <!-- Module 5: Find It! Hidden Object Game -->
        <article class="game-card">
          <div class="game-thumb" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
          </div>
          <div class="game-body">
            <h3>Find It! Hidden Object Game</h3>
            <p>A relaxed seek-and-find challenge &mdash; spot sneaky scam pop-ups, get ready for a doctor's visit, and tidy up a cluttered home screen.</p>
            <a href="hidden-object.html" class="btn btn-primary" data-hand-tip="This opens a relaxed seek-and-find game. There's no timer, so look as long as you'd like.">Launch Lab</a>
          </div>
        </article>

        <!-- Module 6: Golden Health Portal -->
        <article class="game-card">
          <div class="game-thumb" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="#C5A059" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="4" width="14" height="17" rx="2"></rect><path d="M9 3h6v3H9z"></path><path d="M9 12l2 2 4-4"></path></svg>
          </div>
          <div class="game-body">
            <h3>Golden Health Portal</h3>
            <p>Get comfortable using a real patient portal &mdash; schedule appointments, message your doctor, check test results, and manage prescriptions with confidence.</p>
            <a href="patient-portal.html" class="btn btn-primary" data-hand-tip="This opens a practice version of a doctor's website. It's just for learning, so feel free to click around.">Launch Lab</a>
          </div>
        </article>

      </div>
    </div>
  </section>

  <section id="gallery" aria-hidden="true" style="padding:0;"></section>
  <section id="store" aria-hidden="true" style="padding:0;"></section>

</main>

<!-- =========================================
     FOOTER
     ========================================= -->
<footer>
  <div class="container">
    <div class="privacy-badge">
      <p>🔒 Privacy First: Zero user tracking or data collection.</p>
    </div>
    <nav class="footer-nav" aria-label="Footer navigation">
      <a href="#main-content" data-hand-tip="This brings you back to the top of this page.">Home</a>
      <a href="#gallery" data-hand-tip="This shows you photos from around the club.">Photo Gallery</a>
      <a href="#store" data-hand-tip="This shows you what's available in our store. Just looking is always welcome, no pressure to buy anything.">Store</a>
      <a href="faq.html" data-hand-tip="This answers common questions. A good place to look if you're ever unsure about something.">FAQ</a>
      <a href="contact.html" data-hand-tip="This shows you how to reach us directly, if you'd ever like to talk to a real person.">Contact Us</a>
    </nav>
    <div class="footer-bottom">
      <p>&copy; 2026 GoldenTechClub.org &mdash; Learn. Play. Connect.</p>
    </div>
  </div>
</footer>

<script>
  const menuToggle = document.getElementById('menu-toggle');
  const mainNav = document.getElementById('main-nav');
  if (menuToggle && mainNav) {
    menuToggle.addEventListener('click', () => {
      const isOpen = mainNav.classList.toggle('open');
      menuToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    });
    mainNav.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        mainNav.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
      });
    });
  }
</script>

<script>
  /* =====================================================================
     HELPFUL HAND — a warm, hover-based instructional overlay.
     Toggle state is just a UI preference (not personal data), so it's
     fine to remember it in localStorage between visits.
     ===================================================================== */
  const HH_STORAGE_KEY = 'gtcHelpfulHandOn';
  const HH_HOVER_DELAY = 800; // "hover for a second" per spec

  const hhToggleBtn = document.getElementById('helpful-hand-toggle');
  const hhStateLabel = document.getElementById('hh-state');
  let helpfulHandOn = false;
  let hhHoverTimer = null;
  let hhTooltipEl = null;
  let hhActiveTarget = null;

  function hhLoadState() {
    try { return window.localStorage.getItem(HH_STORAGE_KEY) === 'true'; }
    catch (e) { return false; }
  }
  function hhSaveState(on) {
    try { window.localStorage.setItem(HH_STORAGE_KEY, on ? 'true' : 'false'); }
    catch (e) { /* ignore if unavailable */ }
  }

  function hhSetActive(on) {
    helpfulHandOn = on;
    hhToggleBtn.classList.toggle('active', on);
    hhToggleBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
    hhStateLabel.innerText = on ? 'On' : 'Off';
    hhSaveState(on);
    if (!on) hhHideTooltip();
  }

  hhToggleBtn.addEventListener('click', () => hhSetActive(!helpfulHandOn));

  function hhEnsureTooltipEl() {
    if (hhTooltipEl) return hhTooltipEl;
    hhTooltipEl = document.createElement('div');
    hhTooltipEl.className = 'hh-tooltip';
    hhTooltipEl.setAttribute('role', 'tooltip');
    document.body.appendChild(hhTooltipEl);
    return hhTooltipEl;
  }

  function hhShowTooltip(target) {
    const tip = hhEnsureTooltipEl();
    const text = target.getAttribute('data-hand-tip');
    if (!text) return;
    tip.innerText = text;
    tip.classList.remove('visible', 'arrow-top', 'arrow-bottom');

    const rect = target.getBoundingClientRect();
    const scrollY = window.scrollY || window.pageYOffset;
    const scrollX = window.scrollX || window.pageXOffset;

    // Measure after setting text so offsetWidth/Height are accurate.
    tip.style.left = '0px';
    tip.style.top = '0px';
    tip.style.visibility = 'hidden';
    tip.classList.add('visible');
    const tipWidth = tip.offsetWidth;
    const tipHeight = tip.offsetHeight;

    let top, arrowClass;
    const spaceAbove = rect.top;
    if (spaceAbove > tipHeight + 20) {
      top = rect.top + scrollY - tipHeight - 14;
      arrowClass = 'arrow-bottom';
    } else {
      top = rect.bottom + scrollY + 14;
      arrowClass = 'arrow-top';
    }

    let left = rect.left + scrollX + (rect.width / 2) - (tipWidth / 2);
    left = Math.max(12, Math.min(left, window.innerWidth - tipWidth - 12));

    tip.style.left = left + 'px';
    tip.style.top = top + 'px';
    tip.classList.add(arrowClass);
    tip.style.visibility = 'visible';
    target.classList.add('hh-highlight');
    hhActiveTarget = target;
  }

  function hhHideTooltip() {
    clearTimeout(hhHoverTimer);
    if (hhTooltipEl) hhTooltipEl.classList.remove('visible');
    if (hhActiveTarget) hhActiveTarget.classList.remove('hh-highlight');
    hhActiveTarget = null;
  }

  function hhAttachListeners() {
    document.querySelectorAll('[data-hand-tip]').forEach(el => {
      el.addEventListener('mouseenter', () => {
        if (!helpfulHandOn) return;
        clearTimeout(hhHoverTimer);
        hhHoverTimer = setTimeout(() => hhShowTooltip(el), HH_HOVER_DELAY);
      });
      el.addEventListener('mouseleave', hhHideTooltip);
      el.addEventListener('focus', () => {
        if (!helpfulHandOn) return;
        hhShowTooltip(el);
      });
      el.addEventListener('blur', hhHideTooltip);
    });
  }

  hhSetActive(hhLoadState());
  hhAttachListeners();
</script>

<script>
  /* =====================================================================
     PWA — quietly saves the site for offline visits and lets members
     install Golden Tech Club on their home screen like an app.
     ===================================================================== */
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('sw.js').catch(() => { /* not critical; the site works normally without it */ });
    });
  }
</script>

</body>
</html>