/* ===================================================================
      1. VARIABLES & FONT IMPORTS
      =================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Jost:wght@400;500&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@700;800&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
   
   /* Page Loading State */
   body.loading {
       overflow: hidden;
   }
   
   .page-loader {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #0a0a0a;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       opacity: 1;
       transition: opacity 0.5s ease;
   }
   
   .page-loader.hidden {
       opacity: 0;
       pointer-events: none;
   }
   
   .loader-content {
       text-align: center;
   }
   
   .loader-spinner {
       width: 60px;
       height: 60px;
       border: 4px solid rgba(167, 138, 87, 0.2);
       border-top-color: var(--color-gold);
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   .loader-text {
       color: var(--color-gold);
       font-family: var(--font-heading);
       font-size: 1.2rem;
       margin-top: 1.5rem;
   }
   
   /* Font fallbacks for better performance */
   .font-fallback {
       font-family: 'Cinzel', 'Times New Roman', serif;
   }

   :root {
       --color-gold: #a78a57;
       --color-text: #e0e0e0;
       --color-text-muted: #999;
       --color-bg-dark: #111111;
       --color-surface: #1a1a1a;
       --color-border: #4a3c25;
       --font-heading: 'Cinzel', serif;
       --font-body: 'Jost', sans-serif;
       --font-hebrew-heading: 'Assistant', sans-serif;
       --font-hebrew-body: 'Rubik', sans-serif;
   }
   
   /* ===================================================================
      2. BASE & RESET STYLES
      =================================================================== */
   * { 
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   html { 
       scroll-behavior: smooth; 
       scroll-padding-top: 100px; /* Offset for fixed header */
       overflow-x: hidden;
       width: 100%;
   }
   body {
       margin: 0; padding: 0;
       background-color: var(--color-bg-dark);
       color: var(--color-text);
       font-family: var(--font-body);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
       padding-top: 80px; /* Account for fixed header */
       width: 100%;
       max-width: 100vw;
   }
   [dir="rtl"] { direction: rtl; }
   [dir="rtl"] body { font-family: var(--font-hebrew-body); }
   [dir="rtl"] .hero-title, [dir="rtl"] .hero-subtitle, [dir="rtl"] .section-title, [dir="rtl"] .section-subtitle, [dir="rtl"] .btn, [dir="rtl"] .reward-card__text span:last-child, [dir="rtl"] .community-join span {
       font-family: var(--font-hebrew-heading);
       font-weight: 800;
       letter-spacing: 0px;
   }
   
   /* ===================================================================
      3. LAYOUT & CONTAINERS
      =================================================================== */
   .main-content { 
       max-width: 100%; 
       width: 100%;
       margin: 0; 
       padding: 0; 
       overflow-x: hidden;
   }
   .content-section {
       padding: 6rem 2rem; text-align: center; min-height: 100vh;
       display: flex; flex-direction: column; justify-content: center;
       align-items: center; position: relative;
       width: 100%;
       max-width: 100vw;
       overflow-x: hidden;
   }
   
   #about {
       background-image: url('img/bg-section.png');
       background-size: cover;
       background-position: center;
       background-attachment: fixed;
       position: relative;
   }
   
   #about::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.7);
       z-index: 1;
   }
   
   #about > * {
       position: relative;
       z-index: 2;
   }
   
   /* ===================================================================
      ABOUT SECTION STYLES
      =================================================================== */
   .about-content {
       display: flex; flex-direction: column; gap: 3rem; max-width: 1400px; margin: 0 auto;
   }
   .about-text {
       font-size: 1.2rem; line-height: 1.9; color: var(--color-text-muted); text-align: center;
       max-width: 1000px; margin: 0 auto;
       background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(0, 0, 0, 0.6));
       padding: 2.5rem; border-radius: 12px; border: 1px solid var(--color-border);
       backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
   }
   .about-stats {
       display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
       gap: 2rem; max-width: 1000px; margin: 0 auto;
   }
   .stat-item {
       text-align: center; padding: 2.5rem 2rem; 
       background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.8));
       border: 2px solid var(--color-gold); border-radius: 12px; 
       backdrop-filter: blur(15px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
       transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       position: relative; overflow: hidden;
   }
   .stat-item::before {
       content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
       background: linear-gradient(90deg, transparent, rgba(167, 138, 87, 0.1), transparent);
       transition: left 0.6s ease;
   }
   .stat-item:hover::before {
       left: 100%;
   }
   .stat-item:hover {
       transform: translateY(-8px) scale(1.02);
       border-color: rgba(167, 138, 87, 0.8);
       box-shadow: 0 20px 60px rgba(167, 138, 87, 0.2);
   }
   .stat-number {
       display: block; font-family: var(--font-hebrew-heading); font-size: 2.8rem; 
       color: var(--color-gold); font-weight: 800; margin-bottom: 1rem;
       text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
       position: relative; z-index: 2;
   }
   .stat-label {
       font-size: 1rem; color: var(--color-text); text-transform: uppercase; 
       letter-spacing: 2px; font-weight: 600;
       position: relative; z-index: 2;
   }
   
   
   
   /* Mobile responsiveness for about section */
   @media (max-width: 768px) {
       .about-stats {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }
       .stat-item {
           padding: 2rem 1.5rem;
       }
       .stat-number {
           font-size: 2.2rem;
       }
       .about-text {
           padding: 2rem 1.5rem;
           font-size: 1.1rem;
       }
   }
   
   /* ===================================================================
      4. MUSIC CONTROL BUTTON
      =================================================================== */
   .music-control {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--color-accent-gold) 0%, #8b6f3e 100%);
       border: 2px solid rgba(255, 215, 0, 0.3);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       transition: all 0.3s ease;
       box-shadow: 0 4px 15px rgba(167, 138, 87, 0.4),
                   0 0 30px rgba(167, 138, 87, 0.2);
       backdrop-filter: blur(10px);
   }
   
   .music-control:hover {
       transform: translateY(-3px) scale(1.05);
       box-shadow: 0 6px 20px rgba(167, 138, 87, 0.6),
                   0 0 40px rgba(167, 138, 87, 0.3);
       border-color: rgba(255, 215, 0, 0.6);
   }
   
   .music-control:active {
       transform: translateY(-1px) scale(0.98);
   }
   
   .music-icon {
       width: 28px;
       height: 28px;
       color: #fff;
       transition: all 0.3s ease;
       position: absolute;
   }
   
   .music-control:hover .music-icon {
       transform: scale(1.1);
   }
   
   /* Show/hide icons based on state */
   .music-control.playing .music-on {
       opacity: 1;
       animation: musicPulse 2s ease-in-out infinite;
   }
   
   .music-control.playing .music-off {
       opacity: 0;
   }
   
   .music-control.muted .music-on {
       opacity: 0;
   }
   
   .music-control.muted .music-off {
       opacity: 1;
   }
   
   @keyframes musicPulse {
       0%, 100% {
           transform: scale(1);
       }
       50% {
           transform: scale(1.1);
       }
   }
   
   /* Ripple effect for music button */
   .music-control::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       border: 2px solid var(--color-accent-gold);
       opacity: 0;
       animation: musicRipple 2s ease-out infinite;
   }
   
   .music-control.playing::before {
       animation: musicRipple 2s ease-out infinite;
   }
   
   .music-control.muted::before {
       animation: none;
   }
   
   @keyframes musicRipple {
       0% {
           transform: scale(1);
           opacity: 0.6;
       }
       100% {
           transform: scale(1.5);
           opacity: 0;
       }
   }
   
   /* Mobile adjustments for music button */
   @media (max-width: 768px) {
       .music-control {
           width: 50px;
           height: 50px;
           bottom: 1.5rem;
           right: 1.5rem;
       }
       
       .music-icon {
           width: 24px;
           height: 24px;
       }
   }
   
   @media (max-width: 480px) {
       .music-control {
           width: 48px;
           height: 48px;
           bottom: 1rem;
           right: 1rem;
       }
       
       .music-icon {
           width: 22px;
           height: 22px;
       }
   }

   /* ===================================================================
      5. HEADER
      =================================================================== */
   .site-header {
       position: fixed; z-index: 10; top: 0; left: 0; width: 100%;
       padding: 1.5rem 2rem; display: flex; justify-content: space-between;
       align-items: center; background: rgba(0,0,0,0.95); backdrop-filter: blur(10px);
       transform: translateY(0); transition: background 0.3s ease, padding 0.3s ease;
       border-bottom: 1px solid rgba(167, 138, 87, 0.1);
   }
   .site-header.header-visible {
       background: rgba(0,0,0,0.98);
       padding: 1rem 2rem;
   }
   [dir="rtl"] .site-header { left: auto; right: 0; }
   .header-content {
       display: flex; justify-content: space-between; align-items: center; width: 100%;
   }
   .logo { 
       font-family: var(--font-heading); 
       font-size: 2rem; 
       font-weight: 900; 
       color: var(--color-gold); 
       text-decoration: none;
   }
   .site-nav { display: flex; gap: 2rem; }
   [dir="rtl"] .site-nav { flex-direction: row-reverse; }
   .site-nav a { color: var(--color-text); text-decoration: none; transition: color 0.3s; }
   .site-nav a:hover { color: var(--color-gold); }
   .header-actions { display: flex; align-items: center; gap: 1rem; }
   [dir="rtl"] .header-actions { flex-direction: row-reverse; }
   .lang-btn { background: none; border: none; cursor: pointer; padding: 0; }
   .lang-btn img { height: 24px; display: block; }
   
   /* ===================================================================
      5. BUTTONS
      =================================================================== */
   .btn {
       padding: 0.8rem 2.5rem; font-family: var(--font-heading); font-size: 15px;
       font-weight: 700; border: 2px solid; cursor: pointer; text-transform: uppercase;
       text-decoration: none; transition: all .3s ease; background: transparent;
       white-space: nowrap; letter-spacing: 1px; position: relative; overflow: hidden;
       display: inline-block; min-height: 48px; /* Better touch target */
       display: inline-flex; align-items: center; justify-content: center;
   }
   
   /* Focus states for accessibility */
   .btn:focus,
   .email-input:focus,
   a:focus {
       outline: 2px solid var(--color-gold);
       outline-offset: 2px;
   }
   
   .btn:focus:not(:focus-visible) {
       outline: none;
   }
   .btn--primary { color: #000; background-color: var(--color-gold); border-color: var(--color-gold); }
   .btn--primary:hover { 
       filter: brightness(1.15); 
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(167, 138, 87, 0.3);
       transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   .btn--outline { color: var(--color-gold); border-color: var(--color-gold); background-color: rgba(0,0,0,0.3); }
   .btn--outline:hover { 
       background-color: var(--color-gold); 
       color: #000;
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(167, 138, 87, 0.2);
       transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   .btn--dark { color: var(--color-text-muted); border-color: #555; background-color: rgba(30, 30, 30, 0.7); }
   .btn--dark:hover { color: var(--color-text); border-color: var(--color-gold); background-color: rgba(167, 138, 87, 0.1); }
   .btn--small { padding: 0.4rem 1.2rem; font-size: 13px; }
   .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
   
   /* Hero CTA Buttons */
   .btn--hero-primary {
       color: #000; 
       background: linear-gradient(135deg, var(--color-gold) 0%, #d4af37 100%);
       border: none;
       padding: 1.2rem 3.5rem;
       font-size: 1.1rem;
       box-shadow: 0 10px 40px rgba(167, 138, 87, 0.4);
       letter-spacing: 2px;
   }
   .btn--hero-primary:hover {
       transform: translateY(-3px) scale(1.02);
       box-shadow: 0 15px 50px rgba(167, 138, 87, 0.6);
       filter: brightness(1.1);
   }
   
   .btn--hero-secondary {
       color: #fff;
       background: rgba(255, 255, 255, 0.1);
       border: 2px solid rgba(255, 255, 255, 0.3);
       padding: 1.2rem 3.5rem;
       font-size: 1.1rem;
       backdrop-filter: blur(10px);
       letter-spacing: 2px;
   }
   .btn--hero-secondary:hover {
       background: rgba(255, 255, 255, 0.2);
       border-color: var(--color-gold);
       transform: translateY(-3px);
       box-shadow: 0 10px 40px rgba(255, 255, 255, 0.2);
   }
   
   .btn-group, .action-buttons { display: flex; gap: 1.5rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
   [dir="rtl"] .btn-group, [dir="rtl"] .action-buttons { flex-direction: row-reverse; }
   
   /* Hero CTA Group */
   .hero-cta-group {
       display: flex;
       gap: 1.5rem;
       justify-content: center;
       margin-top: 3rem;
       flex-wrap: wrap;
       animation: fadeInUp 1s ease 0.5s both;
   }
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ===================================================================
      6. TYPOGRAPHY
      =================================================================== */
   .hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 8vw, 5.5rem); color: #fff; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); margin: 0; line-height: 1.2; letter-spacing: 2px; }
   .hero-subtitle { font-family: var(--font-heading); font-size: clamp(1rem, 4vw, 1.25rem); color: var(--color-gold); margin: 1rem 0 0 0; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); letter-spacing: 3px; }
   .section-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 7vw, 4.5rem); color: #fff; margin: 0 0 1.5rem 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.8); letter-spacing: 2px; line-height: 1.1; }
   .section-subtitle { font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--color-gold); letter-spacing: 2px; margin: 0 0 4rem 0; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); line-height: 1.6; }
   
   /* Showcase Typography */
   .showcase-title {
       font-family: var(--font-hebrew-heading);
       font-size: clamp(2.5rem, 6vw, 4rem);
       color: #fff;
       line-height: 1.1;
       margin: 0 0 1.5rem 0;
       font-weight: 800;
       text-shadow: 2px 2px 12px rgba(0,0,0,0.8);
   }
   
   .showcase-description {
       font-family: var(--font-hebrew-body);
       font-size: clamp(1.1rem, 2vw, 1.35rem);
       color: var(--color-text);
       line-height: 1.8;
       margin: 0;
   }

   /* ===================================================================
      7. SECTION STYLES
      =================================================================== */
   /* --- HERO --- */
   .hero-section {
       height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center;
       justify-content: center; text-align: center;
       background: url('img/bg-hero.jpg') no-repeat center center/cover; position: relative;
       margin-top: -80px; /* Compensate for body padding */
   }
   .hero-section::before {
       content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
       background: rgba(0, 0, 0, 0.4); z-index: 1;
   }
   .hero-content { position: relative; z-index: 2; max-width: 90%; }
   .scroll-down-indicator {
       position: absolute; bottom: 2rem; width: 20px; height: 20px;
       border: 2px solid #fff; border-top: none; border-left: none;
       transform: rotate(45deg); opacity: 0.5; animation: bounce 2s infinite;
       cursor: pointer; z-index: 2;
   }
   @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); } 40% { transform: translateY(-10px) rotate(45deg); } 60% { transform: translateY(-5px) rotate(45deg); } }
   
   /* --- REWARDS SECTION --- */
   #rewards { background: url('img/bg-prereq.jpg') no-repeat center center/cover; background-attachment: fixed; position: relative; }
   #rewards::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); z-index: 1; }
   #rewards > * { position: relative; z-index: 2; }
   
   /* Scarcity Banner */
   .scarcity-banner {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 2rem;
       background: linear-gradient(135deg, rgba(167, 138, 87, 0.15), rgba(167, 138, 87, 0.05));
       border: 2px solid rgba(167, 138, 87, 0.3);
       border-radius: 12px;
       padding: 1.5rem 2rem;
       margin: 3rem auto;
       max-width: 900px;
       backdrop-filter: blur(10px);
       animation: subtleGlow 3s ease-in-out infinite;
   }
   
   @keyframes subtleGlow {
       0%, 100% { box-shadow: 0 0 20px rgba(167, 138, 87, 0.2); }
       50% { box-shadow: 0 0 30px rgba(167, 138, 87, 0.4); }
   }
   
   .scarcity-item {
       display: flex;
       align-items: center;
       gap: 1rem;
   }
   
   .scarcity-icon {
       font-size: 2rem;
   }
   
   .pulse-dot {
       animation: pulseDot 2s ease-in-out infinite;
   }
   
   @keyframes pulseDot {
       0%, 100% { transform: scale(1); opacity: 1; }
       50% { transform: scale(1.2); opacity: 0.8; }
   }
   
   .scarcity-text {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       text-align: right;
   }
   
   .scarcity-text strong {
       font-family: var(--font-hebrew-heading);
       font-size: 0.9rem;
       color: var(--color-text-muted);
       display: block;
   }
   
   .scarcity-count {
       font-family: var(--font-hebrew-heading);
       font-size: 1.8rem;
       font-weight: 800;
       color: var(--color-gold);
       display: block;
       line-height: 1;
   }
   
   .live-counter {
       animation: countPulse 2s ease-in-out infinite;
   }
   
   @keyframes countPulse {
       0%, 100% { color: var(--color-gold); }
       50% { color: #d4af37; transform: scale(1.1); }
   }
   
   .scarcity-divider {
       width: 1px;
       height: 50px;
       background: linear-gradient(to bottom, transparent, rgba(167, 138, 87, 0.5), transparent);
   }
   
   /* Task Progress Tracker */
   .task-progress-container {
       background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.8));
       border: 2px solid rgba(167, 138, 87, 0.3);
       border-radius: 12px;
       padding: 2rem;
       max-width: 700px;
       margin: 3rem auto;
       backdrop-filter: blur(15px);
   }
   
   .progress-title {
       font-family: var(--font-hebrew-heading);
       font-size: 1.5rem;
       color: var(--color-gold);
       text-align: center;
       margin: 0 0 1.5rem 0;
       font-weight: 700;
   }
   
   .progress-tasks {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       margin-bottom: 1.5rem;
   }
   
   .progress-task {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       transition: all 0.3s ease;
   }
   
   .progress-task.completed {
       background: rgba(167, 138, 87, 0.1);
       border: 1px solid rgba(167, 138, 87, 0.3);
   }
   
   .task-checkbox {
       width: 30px;
       height: 30px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       flex-shrink: 0;
       transition: all 0.3s ease;
   }
   
   .progress-task.completed .task-checkbox {
       background: var(--color-gold);
       color: #000;
       animation: checkBounce 0.5s ease;
   }
   
   @keyframes checkBounce {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.2); }
   }
   
   .task-name {
       font-family: var(--font-hebrew-body);
       color: var(--color-text);
       flex: 1;
       font-size: 1.1rem;
   }
   
   .task-bar {
       width: 100px;
       height: 6px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 3px;
       overflow: hidden;
       flex-shrink: 0;
   }
   
   .task-bar-fill {
       height: 100%;
       background: linear-gradient(90deg, var(--color-gold), #d4af37);
       transition: width 0.5s ease;
   }
   
   .completion-badge {
       text-align: center;
       padding: 1rem;
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       border: 1px solid rgba(167, 138, 87, 0.2);
   }
   
   .badge-text {
       font-family: var(--font-hebrew-body);
       color: var(--color-text);
       font-size: 1.1rem;
   }
   
   .badge-text strong {
       color: var(--color-gold);
   }
   
   /* Rewards Grid with Rarity */
   .rewards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1100px; margin: 3rem auto; }
   
   .reward-card {
       border: 2px solid var(--color-gold);
       background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(0, 0, 0, 0.9));
       padding: 2rem;
       border-radius: 12px;
       transition: all 0.3s ease;
       backdrop-filter: blur(10px);
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
       transform-style: preserve-3d;
       perspective: 1000px;
       position: relative;
       overflow: hidden;
       will-change: transform;
   }
   
   /* Image optimization */
   .reward-card img,
   .feature-showcase__image img {
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;
   }
   
   .reward-card::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: linear-gradient(45deg, transparent, rgba(167, 138, 87, 0.1), transparent);
       transform: rotate(45deg);
       transition: all 0.5s ease;
   }
   
   .reward-card:hover::before {
       left: 100%;
   }
   
   .reward-card:hover { 
       transform: translateY(-8px) scale(1.02); 
       box-shadow: 0 15px 40px rgba(167, 138, 87, 0.3);
       transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   /* Rarity Tags */
   .reward-rarity {
       position: absolute;
       top: 1rem;
       right: 1rem;
       padding: 0.4rem 1rem;
       border-radius: 20px;
       font-family: var(--font-hebrew-heading);
       font-size: 0.85rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       z-index: 3;
   }
   
   .reward-rarity.legendary {
       background: linear-gradient(135deg, #FFD700, #FFA500);
       color: #000;
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
       animation: legendaryGlow 2s ease-in-out infinite;
   }
   
   @keyframes legendaryGlow {
       0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
       50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9); }
   }
   
   .reward-rarity.epic {
       background: linear-gradient(135deg, #9B59B6, #8E44AD);
       color: #fff;
       box-shadow: 0 0 15px rgba(155, 89, 182, 0.6);
   }
   
   .reward-rarity.exclusive {
       background: linear-gradient(135deg, #3498DB, #2980B9);
       color: #fff;
       box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
   }
   
   /* Lock Overlay */
   .reward-lock-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.85);
       backdrop-filter: blur(5px);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       border-radius: 12px;
       z-index: 2;
       opacity: 1;
       transition: all 0.5s ease;
   }
   
   .reward-card.unlocked .reward-lock-overlay {
       opacity: 0;
       pointer-events: none;
   }
   
   .lock-icon {
       font-size: 3rem;
       margin-bottom: 1rem;
       animation: lockShake 2s ease-in-out infinite;
   }
   
   @keyframes lockShake {
       0%, 100% { transform: rotate(0deg); }
       25% { transform: rotate(-5deg); }
       75% { transform: rotate(5deg); }
   }
   
   .lock-text {
       font-family: var(--font-hebrew-body);
       color: var(--color-gold);
       font-size: 1.1rem;
       text-align: center;
   }
   
   .reward-card img { 
       max-width: 100%; 
       height: auto; 
       border-radius: 8px; 
       margin-bottom: 1rem; 
       position: relative;
       z-index: 1;
   }
   
   .reward-card__text { 
       margin-top: 1.5rem; 
       font-family: var(--font-body); 
       color: #ccc; 
       font-size: 0.9rem; 
       position: relative;
       z-index: 1;
   }
   
   .reward-card__text span { 
       display: block; 
       text-transform: uppercase; 
       letter-spacing: 1px; 
   }
   
   .reward-card__text .reward-name { 
       font-family: var(--font-heading); 
       font-size: 1.3rem; 
       color: #fff; 
       margin-top: 0.5rem; 
       font-weight: 700; 
   }
   
   /* Reward Details */
   .reward-details {
       margin-top: 1.5rem;
       padding-top: 1rem;
       border-top: 1px solid rgba(167, 138, 87, 0.3);
       position: relative;
       z-index: 1;
   }
   
   .reward-stat {
       font-family: var(--font-hebrew-body);
       color: var(--color-text-muted);
       font-size: 0.95rem;
       margin: 0.5rem 0;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .reward-stat strong {
       color: var(--color-gold);
   }
   
   .exclusive-tag {
       color: var(--color-gold);
       font-weight: 600;
       margin-top: 0.5rem;
   }
   
   /* Alpha Benefits List */
   .alpha-benefits {
       background: linear-gradient(135deg, rgba(167, 138, 87, 0.1), rgba(167, 138, 87, 0.05));
       border: 2px solid rgba(167, 138, 87, 0.3);
       border-radius: 12px;
       padding: 2.5rem 2rem;
       max-width: 900px;
       margin: 3rem auto;
       backdrop-filter: blur(10px);
   }
   
   .benefits-title {
       font-family: var(--font-hebrew-heading);
       font-size: 1.8rem;
       color: var(--color-gold);
       text-align: center;
       margin: 0 0 2rem 0;
       font-weight: 700;
   }
   
   .benefits-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 1.5rem;
   }
   
   .benefit-item {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       transition: all 0.3s ease;
       border: 1px solid transparent;
   }
   
   .benefit-item:hover {
       background: rgba(167, 138, 87, 0.1);
       border-color: rgba(167, 138, 87, 0.3);
       transform: translateX(-5px);
   }
   
   .benefit-icon {
       width: 30px;
       height: 30px;
       border-radius: 50%;
       background: var(--color-gold);
       color: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-size: 1.2rem;
       flex-shrink: 0;
   }
   
   .benefit-text {
       font-family: var(--font-hebrew-body);
       color: var(--color-text);
       font-size: 1.05rem;
   }
   
   /* Email Signup Form */
   .email-signup-container {
       background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.8));
       border: 2px solid var(--color-gold);
       border-radius: 12px;
       padding: 2.5rem;
       max-width: 700px;
       margin: 3rem auto;
       backdrop-filter: blur(15px);
       box-shadow: 0 10px 50px rgba(167, 138, 87, 0.3);
   }
   
   .signup-title {
       font-family: var(--font-hebrew-heading);
       font-size: 2rem;
       color: #fff;
       text-align: center;
       margin: 0 0 1rem 0;
       font-weight: 800;
   }
   
   .signup-description {
       font-family: var(--font-hebrew-body);
       font-size: 1.1rem;
       color: var(--color-text);
       text-align: center;
       margin: 0 0 2rem 0;
       line-height: 1.6;
   }
   
   .email-signup-form {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   .form-group {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }
   
   .email-input {
       flex: 1;
       min-width: 250px;
       padding: 1.2rem 1.5rem;
       background: rgba(255, 255, 255, 0.05);
       border: 2px solid rgba(167, 138, 87, 0.3);
       border-radius: 8px;
       color: #fff;
       font-family: var(--font-hebrew-body);
       font-size: 1.1rem;
       transition: all 0.3s ease;
   }
   
   .email-input::placeholder {
       color: rgba(255, 255, 255, 0.4);
   }
   
   .email-input:focus {
       outline: none;
       border-color: var(--color-gold);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 20px rgba(167, 138, 87, 0.3);
   }
   
   .form-benefits {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 2rem;
       flex-wrap: wrap;
   }
   
   .form-benefit {
       font-family: var(--font-hebrew-body);
       color: var(--color-text-muted);
       font-size: 0.95rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .form-success {
       background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.2));
       border: 2px solid rgba(46, 204, 113, 0.5);
       border-radius: 8px;
       padding: 1.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1rem;
       animation: successSlide 0.5s ease;
   }
   
   @keyframes successSlide {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   .success-icon {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: #2ecc71;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       font-weight: bold;
   }
   
   .success-text {
       font-family: var(--font-hebrew-heading);
       color: #2ecc71;
       font-size: 1.2rem;
       font-weight: 700;
   }
   
   /* --- NEW: FEATURES SHOWCASE SECTION (Pax Dei Style) --- */
   .features-wrapper {
       background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
       padding: 0;
       margin: 0;
   }
   
   .feature-showcase {
       display: grid;
       grid-template-columns: 1fr 1fr;
       align-items: center;
       gap: 6rem;
       max-width: 1400px;
       margin: 0 auto;
       padding: 8rem 4rem;
       border-bottom: 1px solid rgba(167, 138, 87, 0.05);
   }
   
   .feature-showcase:last-child {
       border-bottom: none;
   }
   
   /* Alternating layouts */
   .feature-showcase--left .feature-showcase__image {
       order: 1;
   }
   
   .feature-showcase--left .feature-showcase__content {
       order: 2;
       text-align: right;
   }
   
   .feature-showcase--right .feature-showcase__image {
       order: 2;
   }
   
   .feature-showcase--right .feature-showcase__content {
       order: 1;
       text-align: left;
   }
   
   .feature-showcase__image {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 2rem;
       perspective: 1000px;
   }
   
   /* Feature Image Wrapper with Effects */
   .feature-image-wrapper {
       position: relative;
       width: 100%;
       max-width: 500px;
       aspect-ratio: 1;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
       transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .feature-image-wrapper::before {
       content: '';
       position: absolute;
       top: -2px;
       left: -2px;
       right: -2px;
       bottom: -2px;
       background: linear-gradient(45deg, 
           var(--color-gold), 
           #d4af37, 
           var(--color-gold),
           #8b6f3e);
       background-size: 300% 300%;
       border-radius: 20px;
       z-index: -1;
       opacity: 0;
       animation: gradientShift 8s ease infinite;
       transition: opacity 0.6s ease;
   }
   
   @keyframes gradientShift {
       0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
   }
   
   .feature-image-wrapper:hover::before {
       opacity: 0.8;
   }
   
   .feature-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       filter: brightness(0.8) saturate(0.9);
   }
   
   /* Glow Effect */
   .feature-glow {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 80%;
       height: 80%;
       background: radial-gradient(circle, rgba(167, 138, 87, 0.4) 0%, transparent 70%);
       opacity: 0;
       transition: opacity 0.6s ease;
       z-index: 1;
       pointer-events: none;
   }
   
   /* Overlay Effect */
   .feature-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, 
           rgba(167, 138, 87, 0.2) 0%, 
           rgba(0, 0, 0, 0.3) 50%, 
           rgba(167, 138, 87, 0.1) 100%);
       opacity: 0;
       transition: opacity 0.6s ease;
       z-index: 2;
       pointer-events: none;
   }
   
   /* Hover Effects */
   .feature-showcase:hover .feature-image-wrapper {
       transform: scale(1.05) translateY(-15px);
       box-shadow: 0 30px 80px rgba(167, 138, 87, 0.4),
                   0 0 60px rgba(167, 138, 87, 0.2);
   }
   
   .feature-showcase:hover .feature-img {
       transform: scale(1.1);
       filter: brightness(1.1) saturate(1.2);
   }
   
   .feature-showcase:hover .feature-glow {
       opacity: 1;
   }
   
   .feature-showcase:hover .feature-overlay {
       opacity: 1;
   }
   
   /* Parallax Effect on Scroll */
   .feature-showcase__image {
       transition: transform 0.3s ease-out;
   }
   
   /* Shine Effect Animation */
   .feature-image-wrapper::after {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: linear-gradient(
           to bottom right,
           rgba(255, 255, 255, 0) 0%,
           rgba(255, 255, 255, 0.1) 50%,
           rgba(255, 255, 255, 0) 100%
       );
       transform: rotate(45deg) translate(-100%, -100%);
       transition: transform 0.8s ease;
       pointer-events: none;
   }
   
   .feature-showcase:hover .feature-image-wrapper::after {
       transform: rotate(45deg) translate(100%, 100%);
   }
   
   .feature-showcase__content {
       padding: 2rem;
   }

   /* --- COMMUNITY SECTION --- */
   .community-section {
       background: url('img/bg-batt.png') no-repeat center center/cover;
       background-attachment: fixed; position: relative;
   }
   .community-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1; }
   .community-section > * { position: relative; z-index: 2; }
   
   .community-cards {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
       max-width: 1200px;
       margin: 0 auto;
   }
   
   .community-card {
       background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(0, 0, 0, 0.9));
       border: 2px solid rgba(167, 138, 87, 0.3);
       border-radius: 12px;
       padding: 2.5rem 2rem;
       text-align: center;
       transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       backdrop-filter: blur(15px);
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
   }
   
   .community-card:hover {
       transform: translateY(-8px);
       border-color: var(--color-gold);
       box-shadow: 0 15px 50px rgba(167, 138, 87, 0.3);
   }
   
   .community-card__icon {
       width: 80px;
       height: 80px;
       margin: 0 auto 1.5rem;
       background: rgba(167, 138, 87, 0.1);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }
   
   .community-card:hover .community-card__icon {
       background: rgba(167, 138, 87, 0.2);
       transform: scale(1.1);
   }
   
   .community-card__icon svg {
       width: 48px;
       height: 48px;
   }
   
   .community-card__title {
       font-family: var(--font-hebrew-heading);
       font-size: 1.8rem;
       color: #fff;
       margin: 0 0 1rem 0;
       font-weight: 800;
   }
   
   .community-card__desc {
       font-family: var(--font-hebrew-body);
       color: var(--color-text-muted);
       font-size: 1.05rem;
       line-height: 1.6;
       margin: 0 0 2rem 0;
   }
   
   .community-card .btn {
       width: 100%;
       max-width: 250px;
   }

   /* --- FOOTER --- */
   .site-footer { 
       padding: 4rem 2rem 2rem; 
       background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%); 
       border-top: 1px solid rgba(167, 138, 87, 0.2);
   }
   
   .footer-content {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 1fr;
       gap: 3rem;
       max-width: 1400px;
       margin: 0 auto 3rem;
       padding: 0 2rem;
   }
   
   .footer-column {
       text-align: right;
   }
   
   .footer-brand {
       padding-left: 2rem;
   }
   
   .footer-logo {
       font-family: var(--font-heading);
       font-size: 2rem;
       font-weight: 900;
       color: var(--color-gold);
       margin-bottom: 1rem;
   }
   
   .footer-tagline {
       font-family: var(--font-hebrew-body);
       color: var(--color-text-muted);
       font-size: 0.95rem;
       line-height: 1.6;
       margin: 0 0 1.5rem 0;
   }
   
   .footer-column-title {
       font-family: var(--font-hebrew-heading);
       font-size: 1.1rem;
       color: var(--color-gold);
       margin: 0 0 1.5rem 0;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   .footer-links {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   .footer-links li {
       margin-bottom: 0.75rem;
   }
   
   .footer-link {
       font-family: var(--font-hebrew-body);
       color: var(--color-text);
       text-decoration: none;
       font-size: 0.95rem;
       transition: all 0.3s ease;
       display: inline-block;
       position: relative;
   }
   
   .footer-link:hover {
       color: var(--color-gold);
       transform: translateX(-5px);
   }
   
   .footer-link::after {
       content: '';
       position: absolute;
       width: 0;
       height: 1px;
       bottom: -2px;
       right: 0;
       background-color: var(--color-gold);
       transition: width 0.3s ease;
   }
   
   .footer-link:hover::after {
       width: 100%;
   }
   
   .social-links { 
       display: flex; 
       gap: 1rem; 
       margin-top: 1.5rem;
       flex-wrap: wrap;
   }
   
   .social-link {
       width: 40px; 
       height: 40px; 
       display: flex; 
       align-items: center;
       justify-content: center; 
       transition: all 0.3s ease;
       text-decoration: none; 
       border-radius: 50%;
       background: rgba(167, 138, 87, 0.1);
       border: 1px solid rgba(167, 138, 87, 0.2);
       position: relative;
       overflow: hidden;
   }
   
   .social-link:hover { 
       transform: translateY(-5px) scale(1.1);
       background: rgba(167, 138, 87, 0.2);
       border-color: var(--color-gold);
       box-shadow: 0 5px 20px rgba(167, 138, 87, 0.3);
   }
   
   .social-link img { 
       width: 22px; 
       height: 22px; 
       transition: transform 0.3s ease;
   }
   
   .social-link:hover img {
       transform: scale(1.1);
   }
   
   .footer-bottom {
       border-top: 1px solid rgba(167, 138, 87, 0.1);
       padding-top: 2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       max-width: 1400px;
       margin: 0 auto;
       padding: 2rem;
   }
   
   .copyright {
       font-family: var(--font-hebrew-body);
       color: var(--color-text-muted);
       font-size: 0.9rem;
       margin: 0;
   }
   
   .back-to-top {
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, var(--color-gold) 0%, #d4af37 100%);
       border: none;
       border-radius: 50%;
       color: #000;
       font-size: 1.5rem;
       font-weight: bold;
       cursor: pointer;
       transition: all 0.3s ease;
       box-shadow: 0 5px 20px rgba(167, 138, 87, 0.3);
   }
   
   .back-to-top:hover {
       transform: translateY(-5px) scale(1.1);
       box-shadow: 0 8px 30px rgba(167, 138, 87, 0.5);
   }
   
/* Registration Toast */
.registration-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 150%);
    background: rgba(7, 7, 7, 0.95);
    border: 1px solid rgba(167, 138, 87, 0.5);
    border-radius: 999px;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 12000;
}

.registration-toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.registration-toast__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #13ce66;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #000;
    box-shadow: 0 0 15px rgba(19, 206, 102, 0.5);
}

.registration-toast__text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-hebrew-body);
    font-size: 0.95rem;
    text-align: right;
    line-height: 1.3;
}

.registration-toast__text strong {
    font-family: var(--font-hebrew-heading);
    color: var(--color-gold);
    font-size: 1rem;
}
   
   /* ===================================================================
      8. RESPONSIVE
      =================================================================== */
   @media (max-width: 1024px) {
       .site-nav { display: none; }
       .content-section { padding: 4rem 1.5rem; }
       
       /* Feature Showcase Responsive */
       .feature-showcase {
           grid-template-columns: 1fr;
           gap: 3rem;
           padding: 5rem 2rem;
       }
       
       .feature-showcase--left .feature-showcase__image,
       .feature-showcase--left .feature-showcase__content,
       .feature-showcase--right .feature-showcase__image,
       .feature-showcase--right .feature-showcase__content {
           order: initial;
           text-align: center;
       }
       
       .feature-image-wrapper {
           max-width: 300px;
       }
   }
   
   @media (max-width: 768px) {
       /* Fix horizontal overflow on mobile */
       html, body {
           overflow-x: hidden;
           width: 100%;
           max-width: 100vw;
           position: relative;
       }
       
       .main-content {
           overflow-x: hidden;
           width: 100%;
           max-width: 100vw;
       }
       
       .content-section { 
           padding: 3rem 1rem; 
           text-align: center;
           display: flex;
           flex-direction: column;
           align-items: center;
           width: 100%;
           max-width: 100vw;
           overflow-x: hidden;
           margin: 0;
           box-sizing: border-box;
       }
       .hero-section, #rewards, .community-section { 
           min-height: 80vh; 
           background-attachment: scroll;
           width: 100%;
           max-width: 100vw;
           overflow-x: hidden;
       }
       .hero-content {
           width: 100%;
           max-width: 100%;
           text-align: center;
           display: flex;
           flex-direction: column;
           align-items: center;
           padding: 0 1rem;
           box-sizing: border-box;
       }
       
       .hero-section {
           padding: 2rem 0.5rem;
           box-sizing: border-box;
       }
       .hero-title { 
           font-size: clamp(2.2rem, 12vw, 3.5rem);
           text-align: center;
       }
       .hero-subtitle { 
           font-size: clamp(1rem, 5vw, 1.1rem);
           text-align: center;
       }
       .btn-group, .action-buttons { 
           flex-direction: column; 
           gap: 1rem; 
           align-items: center;
           width: 100%;
       }
       .btn-group .btn, .action-buttons .btn { 
           width: 100%; 
           max-width: 280px;
           margin: 0 auto;
       }
       
       /* Center all section titles and subtitles */
       .section-title,
       .section-subtitle {
           text-align: center;
           margin-left: auto;
           margin-right: auto;
       }
       
       /* Center rewards grid */
       .rewards-grid { 
           grid-template-columns: 1fr;
           justify-items: center;
           width: 100%;
           max-width: 100%;
           padding: 0 0.5rem;
           box-sizing: border-box;
       }
       
       .reward-card {
           width: calc(100% - 2rem);
           max-width: 400px;
           margin: 0 auto;
           box-sizing: border-box;
       }
       
       .reward-card img {
           max-width: 100%;
           height: auto;
       }
       
       /* Center alpha benefits */
       .alpha-benefits {
           width: 100%;
           text-align: center;
       }
       
       /* Center email signup */
       .email-signup-container {
           width: calc(100% - 2rem);
           max-width: 500px;
           margin-left: auto;
           margin-right: auto;
           box-sizing: border-box;
       }
       
       .email-input {
           width: 100%;
           box-sizing: border-box;
       }
       
       .btn {
           box-sizing: border-box;
       }
       
       [dir="rtl"] .social-links { flex-direction: row-reverse; flex-wrap: wrap; }
       
       /* Community Cards Mobile */
       .community-cards {
           grid-template-columns: 1fr;
           gap: 1.5rem;
           justify-items: center;
           width: 100%;
           max-width: 100%;
           padding: 0 0.5rem;
           box-sizing: border-box;
       }
       
       .community-card {
           padding: 2rem 1.5rem;
           width: calc(100% - 2rem);
           max-width: 400px;
           margin: 0 auto;
           box-sizing: border-box;
       }
       
       .community-card__title {
           font-size: 1.5rem;
           text-align: center;
       }
       
       .community-card__desc {
           font-size: 1rem;
           text-align: center;
       }
       
       /* Feature Showcase Mobile */
       .feature-showcase {
           padding: 4rem 1.5rem;
           gap: 2rem;
       }
       
       .feature-showcase__content {
           text-align: center;
       }
       
       .showcase-title {
           font-size: clamp(2rem, 8vw, 3rem);
           text-align: center;
       }
       
       .showcase-description {
           font-size: clamp(1rem, 4vw, 1.2rem);
           text-align: center;
       }
       
       /* About section mobile */
       .about-content {
           align-items: center;
       }
       
       .about-text {
           text-align: center;
       }
       
       .about-stats {
           width: 100%;
           justify-items: center;
       }
       
       .stat-item {
           text-align: center;
       }
       
       /* Footer Tablet */
       .footer-content {
           grid-template-columns: repeat(2, 1fr);
           gap: 2.5rem;
       }
       
       .footer-brand {
           grid-column: 1 / -1;
           text-align: center;
           padding-left: 0;
       }
       
       .footer-column {
           text-align: center;
       }
       
       .social-links {
           justify-content: center;
       }
       
       .footer-bottom {
           flex-wrap: wrap;
           justify-content: center;
           gap: 1.5rem;
       }
   }
   
   @media (max-width: 480px) {
       .site-header { 
           padding: 1rem;
           width: 100%;
           box-sizing: border-box;
       }
       
       .content-section {
           padding: 2.5rem 0.75rem;
           width: 100%;
           max-width: 100vw;
           overflow-x: hidden;
       }
       
       .reward-card { 
           padding: 1.5rem 1rem;
           margin: 0 auto;
           width: calc(100% - 1.5rem);
           max-width: 350px;
           box-sizing: border-box;
       }
       
       .feature-showcase {
           padding: 3rem 0.75rem;
           text-align: center;
           width: 100%;
           max-width: 100vw;
           overflow-x: hidden;
           box-sizing: border-box;
       }
       
       .feature-showcase__image {
           justify-content: center;
       }
       
       .feature-image-wrapper {
           max-width: 280px;
           margin: 0 auto;
       }
       
       /* Reduce effects intensity on mobile for performance */
       .feature-showcase:hover .feature-image-wrapper {
           transform: scale(1.02) translateY(-5px);
       }
       
       .feature-showcase:hover .feature-img {
           transform: scale(1.05);
       }
       
       .hero-cta-group {
           flex-direction: column;
           gap: 1rem;
           width: 100%;
           max-width: 100%;
           align-items: center;
           padding: 0 0.5rem;
           box-sizing: border-box;
       }
       
       .btn--hero-primary,
       .btn--hero-secondary {
           width: calc(100% - 1rem);
           max-width: 300px;
           padding: 1rem 2rem;
           margin: 0 auto;
           box-sizing: border-box;
       }
       
       .community-card {
           width: calc(100% - 1.5rem);
           max-width: 350px;
       }
       
       .footer-content {
           grid-template-columns: 1fr;
           gap: 2rem;
           text-align: center;
       }
       
       .footer-brand {
           padding-left: 0;
       }
       
       .footer-column {
           text-align: center;
       }
       
       .footer-link:hover {
           transform: translateX(0);
       }
       
       .social-links {
           justify-content: center;
       }
       
       .footer-bottom {
           flex-direction: column;
           gap: 1.5rem;
           text-align: center;
       }
       
       /* Rewards Section Mobile */
       .alpha-benefits {
           padding: 2rem 1rem;
       }
       
       .benefits-grid {
           grid-template-columns: 1fr;
       }
       
       .benefits-title {
           font-size: 1.5rem;
       }
       
       .benefit-text {
           font-size: 0.95rem;
       }
       
       .email-signup-container {
           padding: 2rem 1.5rem;
       }
       
       .signup-title {
           font-size: 1.6rem;
       }
       
       .signup-description {
           font-size: 1rem;
           padding: 0 0.5rem;
       }
       
       .form-group {
           flex-direction: column;
       }
       
       .email-input {
           min-width: 100%;
           font-size: 1rem;
       }
       
       .form-benefits {
           flex-direction: column;
           gap: 0.75rem;
           align-items: flex-start;
           text-align: right;
       }
       
       .form-benefit {
           font-size: 0.9rem;
       }
       
       .reward-rarity {
           font-size: 0.75rem;
           padding: 0.3rem 0.8rem;
       }
       
       .reward-details {
           font-size: 0.9rem;
       }
       
       .reward-stat {
           font-size: 0.85rem;
       }
   }
   
   /* ===================================================================
      9. MICRO-INTERACTIONS
      =================================================================== */
   
   /* Ripple Effect */
   .ripple-effect {
       position: relative;
       overflow: hidden;
   }
   
   .ripple-effect::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.5);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   
   .ripple-effect:active::after {
       width: 300px;
       height: 300px;
       opacity: 0;
       transition: width 0.6s, height 0.6s, opacity 0.8s;
   }
   
   /* Dynamic Ripple Animation */
   .ripple-animation {
       position: absolute;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.6);
       pointer-events: none;
       transform: scale(0);
       animation: ripple-expand 0.6s ease-out;
   }
   
   @keyframes ripple-expand {
       to {
           transform: scale(2);
           opacity: 0;
       }
   }
   
   /* Card Tilt Effect */
   .tilt-card {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   /* Smooth Glow on Hover */
   .glow-on-hover {
       position: relative;
   }
   
   .glow-on-hover::before {
       content: '';
       position: absolute;
       top: -2px;
       left: -2px;
       right: -2px;
       bottom: -2px;
       background: linear-gradient(45deg, var(--color-gold), #d4af37, var(--color-gold));
       border-radius: inherit;
       opacity: 0;
       transition: opacity 0.3s ease;
       z-index: -1;
       filter: blur(10px);
   }
   
   .glow-on-hover:hover::before {
       opacity: 0.7;
   }
   
   /* Pulse Animation for Important CTAs */
   @keyframes pulse {
       0%, 100% {
           box-shadow: 0 10px 40px rgba(167, 138, 87, 0.4);
       }
       50% {
           box-shadow: 0 10px 60px rgba(167, 138, 87, 0.6);
       }
   }
   
   .btn--hero-primary {
       animation: pulse 2s ease-in-out infinite;
   }
   
   .btn--hero-primary:hover {
       animation: none;
   }
   
   /* Smooth Scale on Hover */
   .scale-on-hover {
       transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .scale-on-hover:hover {
       transform: scale(1.05);
   }
   
   /* Slide In Effect */
   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* Stagger Animation for Lists */
   .stagger-animation > * {
       animation: slideIn 0.5s ease forwards;
       opacity: 0;
   }
   
   .stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
   .stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
   .stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
   .stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
   .stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
   .stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }
   
   /* ===================================================================
      10. MEDIEVAL ANIMATION CLASSES
      =================================================================== */
   .animate-on-scroll {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .animate-on-scroll.is-visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   /* Medieval fade-in from left */
   .animate-fade-left {
       opacity: 0;
       transform: translateX(-50px);
       transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .animate-fade-left.is-visible {
       opacity: 1;
       transform: translateX(0);
   }
   
   /* Medieval fade-in from right */
   .animate-fade-right {
       opacity: 0;
       transform: translateX(50px);
       transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .animate-fade-right.is-visible {
       opacity: 1;
       transform: translateX(0);
   }
   
   /* Gentle scale animation */
   .animate-scale {
       opacity: 0;
       transform: scale(0.9);
       transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .animate-scale.is-visible {
       opacity: 1;
       transform: scale(1);
   }
   
   /* Medieval floating animation */
   @keyframes medievalFloat {
       0%, 100% { transform: translateY(0px); }
       50% { transform: translateY(-8px); }
   }
   
   .medieval-float {
       animation: medievalFloat 4s ease-in-out infinite;
   }
   
   /* Gentle sway animation */
   @keyframes gentleSway {
       0%, 100% { transform: rotate(0deg); }
       25% { transform: rotate(1deg); }
       75% { transform: rotate(-1deg); }
   }
   
   .gentle-sway {
       animation: gentleSway 6s ease-in-out infinite;
   }
   
   /* Medieval text reveal */
   @keyframes textReveal {
       0% { 
           opacity: 0; 
           transform: translateY(20px) scale(0.95); 
       }
       100% { 
           opacity: 1; 
           transform: translateY(0) scale(1); 
       }
   }
   
   .text-reveal {
       animation: textReveal 1s ease-out forwards;
   }
   
   /* Subtle shimmer effect */
   @keyframes subtleShimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
   }
   
   .subtle-shimmer {
       background: linear-gradient(90deg, transparent, rgba(167, 138, 87, 0.1), transparent);
       background-size: 200% 100%;
       animation: subtleShimmer 3s ease-in-out infinite;
   }
   
   /* ===================================================================
      10. MOBILE NAVIGATION
      =================================================================== */
   .mobile-menu-toggle {
       display: none;
       background: none;
       border: none;
       color: var(--color-text);
       font-size: 1.5rem;
       cursor: pointer;
       padding: 0.5rem;
   }
   
   .mobile-nav {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.95);
       backdrop-filter: blur(10px);
       border-top: 1px solid var(--color-border);
       padding: 1rem;
       flex-direction: column;
       gap: 1rem;
   }
   
   .mobile-nav.active {
       display: flex;
   }
   
   [dir="rtl"] .mobile-nav {
       left: auto;
       right: 0;
   }
   
   /* ===================================================================
      11. SMALL MOBILE OPTIMIZATIONS (320px - 400px)
      =================================================================== */
   @media (max-width: 400px) {
       .content-section {
           padding: 2rem 0.5rem;
       }
       
       .hero-title {
           font-size: clamp(1.8rem, 10vw, 2.5rem);
           line-height: 1.3;
           text-align: center;
       }
       
       .hero-subtitle {
           font-size: clamp(0.9rem, 4vw, 1rem);
           text-align: center;
       }
       
       .section-title {
           font-size: clamp(1.8rem, 8vw, 2.5rem);
           text-align: center;
       }
       
       .section-subtitle {
           font-size: clamp(0.95rem, 4vw, 1.1rem);
           text-align: center;
       }
       
       .btn {
           padding: 0.8rem 1.5rem;
           font-size: 0.9rem;
           box-sizing: border-box;
       }
       
       .reward-card {
           padding: 1.25rem 0.75rem;
           margin: 0 auto;
           width: calc(100% - 1rem);
           max-width: 320px;
           box-sizing: border-box;
       }
       
       .reward-card__text .reward-name {
           font-size: 1.1rem;
           text-align: center;
       }
       
       .email-signup-container {
           padding: 1.5rem 0.75rem;
           margin: 0 auto;
           width: calc(100% - 1rem);
           max-width: 450px;
           box-sizing: border-box;
       }
       
       .signup-title {
           font-size: 1.4rem;
           text-align: center;
       }
       
       .signup-description {
           text-align: center;
           font-size: 0.9rem;
       }
       
       .email-input {
           padding: 1rem 1.2rem;
           font-size: 0.95rem;
           margin: 0 auto;
           width: 100%; 
           box-sizing: border-box;
       }
       
       .alpha-benefits {
           padding: 1.5rem 0.75rem;
           width: calc(100% - 1rem);
           max-width: 100%;
           box-sizing: border-box;
       }
       
       .benefits-title {
           font-size: 1.3rem;
           text-align: center;
       }
       
       .benefits-grid {
           justify-items: center;
           width: 100%; 
           padding: 0 0.5rem;
           box-sizing: border-box;
       }
       
       .community-card {
           margin: 0 auto;
           width: calc(100% - 1rem);
           max-width: 320px;
           padding: 1.5rem 1rem;
           box-sizing: border-box;
       }
       
       .footer-content {
           padding: 0 1rem;
       }
       
       .footer-column-title {
           font-size: 1rem;
       }
   }
   
   @media (max-width: 480px) {
       .site-header { padding: 1rem; }
       .reward-card { padding: 1.5rem; }
      .feature-card { padding: 1.5rem 1rem; }
      .task-bar { padding: 1rem; }
      .btn { padding: 0.7rem 2rem; min-height: 44px; }
  }

  /* ===================================================================
      12. THANK YOU PAGE STYLES - AAA GAME QUALITY
      =================================================================== */
  
  /* Particles Background */
  .particles-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
  }

  .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: var(--color-gold);
      border-radius: 50%;
      opacity: 0.6;
      animation: floatParticle linear infinite;
      box-shadow: 0 0 10px rgba(167, 138, 87, 0.8);
  }

  @keyframes floatParticle {
      0% {
          transform: translateY(100vh) translateX(0) rotate(0deg);
          opacity: 0;
      }
      10% {
          opacity: 0.6;
      }
      90% {
          opacity: 0.6;
      }
      100% {
          transform: translateY(-100vh) translateX(100px) rotate(360deg);
          opacity: 0;
      }
  }

  /* Confetti Effect */
  .confetti-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
  }

  .confetti {
      position: absolute;
      top: -10px;
      border-radius: 2px;
      animation: confettiFall linear infinite;
  }

  @keyframes confettiFall {
      0% {
          transform: translateY(0) rotate(0deg);
          opacity: 1;
      }
      100% {
          transform: translateY(100vh) rotate(720deg);
          opacity: 0;
      }
  }

  /* Thank You Hero Section */
  .thank-you-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8rem 2rem 4rem;
      background: radial-gradient(ellipse at center, rgba(167, 138, 87, 0.1) 0%, transparent 70%);
      overflow: hidden;
  }

  .hero-glow-effect {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, rgba(167, 138, 87, 0.2) 0%, transparent 70%);
      border-radius: 50%;
      animation: pulseGlow 4s ease-in-out infinite;
      z-index: 0;
  }

  @keyframes pulseGlow {
      0%, 100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.3;
      }
      50% {
          transform: translate(-50%, -50%) scale(1.2);
          opacity: 0.5;
      }
  }

  .thank-you-container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
      padding: 2rem;
      position: relative;
      z-index: 3;
  }

  /* Success Icon with Rings */
  .thank-you-icon-wrapper {
      position: relative;
      display: inline-block;
      margin-bottom: 3rem;
  }

  .success-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid var(--color-gold);
      border-radius: 50%;
      opacity: 0;
      animation: ringExpand 2s ease-out infinite;
  }

  .success-ring-1 {
      width: 200px;
      height: 200px;
      animation-delay: 0s;
  }

  .success-ring-2 {
      width: 250px;
      height: 250px;
      animation-delay: 0.5s;
  }

  .success-ring-3 {
      width: 300px;
      height: 300px;
      animation-delay: 1s;
  }

  @keyframes ringExpand {
      0% {
          transform: translate(-50%, -50%) scale(0.8);
          opacity: 1;
      }
      100% {
          transform: translate(-50%, -50%) scale(1.5);
          opacity: 0;
      }
  }

  .thank-you-icon {
      position: relative;
      z-index: 2;
      animation: iconEntrance 1s ease-out, iconPulse 2s ease-in-out infinite 1s;
      filter: drop-shadow(0 0 30px rgba(19, 206, 102, 0.6)) drop-shadow(0 0 60px rgba(167, 138, 87, 0.4));
  }

  @keyframes iconEntrance {
      0% {
          transform: scale(0) rotate(-180deg);
          opacity: 0;
      }
      100% {
          transform: scale(1) rotate(0deg);
          opacity: 1;
      }
  }

  @keyframes iconPulse {
      0%, 100% {
          transform: scale(1);
      }
      50% {
          transform: scale(1.1);
      }
  }

  /* Enhanced Typography */
  .thank-you-title {
      font-family: var(--font-hebrew-heading);
      font-size: clamp(3rem, 8vw, 5.5rem);
      margin: 2rem 0 1.5rem;
      font-weight: 900;
      position: relative;
  }

  .title-glow {
      background: linear-gradient(135deg, #fff 0%, var(--color-gold) 50%, #fff 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: textShimmer 3s ease-in-out infinite;
      text-shadow: 0 0 40px rgba(167, 138, 87, 0.5);
      display: inline-block;
  }

  @keyframes textShimmer {
      0%, 100% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
  }

  .thank-you-subtitle {
      font-family: var(--font-hebrew-body);
      font-size: clamp(1.2rem, 3vw, 1.8rem);
      margin-bottom: 3rem;
      color: var(--color-text);
  }

  .subtitle-accent {
      color: var(--color-gold);
      font-weight: 600;
      letter-spacing: 2px;
      text-shadow: 0 0 20px rgba(167, 138, 87, 0.3);
  }

  /* Achievement Badge */
  .achievement-badge {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      background: linear-gradient(135deg, rgba(167, 138, 87, 0.2), rgba(212, 175, 55, 0.1));
      border: 2px solid var(--color-gold);
      border-radius: 50px;
      padding: 1rem 2rem;
      margin: 2rem 0;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 40px rgba(167, 138, 87, 0.3);
      animation: badgeFloat 3s ease-in-out infinite;
  }

  @keyframes badgeFloat {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-10px);
      }
  }

  .badge-icon {
      font-size: 2.5rem;
      animation: badgeSpin 4s linear infinite;
  }

  @keyframes badgeSpin {
      0%, 100% {
          transform: rotate(0deg) scale(1);
      }
      25% {
          transform: rotate(-5deg) scale(1.1);
      }
      75% {
          transform: rotate(5deg) scale(1.1);
      }
  }

  .badge-text {
      display: flex;
      flex-direction: column;
      text-align: right;
  }

  .badge-label {
      font-family: var(--font-hebrew-body);
      font-size: 0.9rem;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .badge-name {
      font-family: var(--font-hebrew-heading);
      font-size: 1.3rem;
      color: var(--color-gold);
      font-weight: 800;
  }

  /* Next Steps Section */
  .thank-you-steps-section {
      position: relative;
      padding: 6rem 2rem;
      background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
  }

  .thank-you-steps-container {
      max-width: 1400px;
      margin: 0 auto;
  }

  .steps-title {
      font-family: var(--font-hebrew-heading);
      font-size: clamp(2.5rem, 6vw, 4rem);
      color: #fff;
      margin: 0 0 4rem 0;
      font-weight: 800;
      text-align: center;
      position: relative;
  }

  .title-underline {
      position: relative;
      display: inline-block;
  }

  .title-underline::after {
      content: '';
      position: absolute;
      bottom: -10px;
      right: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
      animation: underlineExpand 1s ease-out;
  }

  @keyframes underlineExpand {
      0% {
          width: 0;
      }
      100% {
          width: 100%;
      }
  }

  .steps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2.5rem;
      margin-top: 3rem;
  }

  /* Enhanced Step Items */
  .step-item-enhanced {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(0, 0, 0, 0.9));
      border: 2px solid rgba(167, 138, 87, 0.3);
      border-radius: 20px;
      padding: 3rem 2rem;
      text-align: right;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      backdrop-filter: blur(20px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      animation: stepEntrance 0.8s ease-out backwards;
  }

  .step-item-enhanced[data-step="1"] {
      animation-delay: 0.2s;
  }

  .step-item-enhanced[data-step="2"] {
      animation-delay: 0.4s;
  }

  .step-item-enhanced[data-step="3"] {
      animation-delay: 0.6s;
  }

  @keyframes stepEntrance {
      0% {
          opacity: 0;
          transform: translateY(50px) scale(0.9);
      }
      100% {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  .step-item-enhanced::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(167, 138, 87, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 0;
  }

  .step-item-enhanced:hover {
      transform: translateY(-15px) scale(1.02);
      border-color: var(--color-gold);
      box-shadow: 0 30px 80px rgba(167, 138, 87, 0.4), 0 0 60px rgba(167, 138, 87, 0.2);
  }

  .step-item-enhanced:hover::before {
      opacity: 1;
  }

  .step-item-enhanced.step-featured {
      border: 2px solid var(--color-gold);
      background: linear-gradient(135deg, rgba(167, 138, 87, 0.15), rgba(0, 0, 0, 0.9));
      box-shadow: 0 20px 60px rgba(167, 138, 87, 0.5);
  }

  .step-glow {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(167, 138, 87, 0.3) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 0;
  }

  .step-item-enhanced:hover .step-glow {
      opacity: 1;
      animation: glowRotate 3s linear infinite;
  }

  @keyframes glowRotate {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }

  .step-number {
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      font-family: var(--font-heading);
      font-size: 4rem;
      font-weight: 900;
      color: rgba(167, 138, 87, 0.1);
      line-height: 1;
      z-index: 1;
  }

  .step-icon-wrapper {
      position: relative;
      display: inline-block;
      margin-bottom: 1.5rem;
      z-index: 2;
  }

  .step-icon-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, rgba(167, 138, 87, 0.3), transparent);
      border-radius: 50%;
      animation: iconBgPulse 2s ease-in-out infinite;
  }

  @keyframes iconBgPulse {
      0%, 100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.5;
      }
      50% {
          transform: translate(-50%, -50%) scale(1.2);
          opacity: 0.8;
      }
  }

  .step-icon {
      font-size: 3.5rem;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 0 10px rgba(167, 138, 87, 0.5));
      transition: transform 0.3s ease;
  }

  .step-item-enhanced:hover .step-icon {
      transform: scale(1.2) rotate(5deg);
  }

  .step-title {
      font-family: var(--font-hebrew-heading);
      font-size: 1.8rem;
      color: #fff;
      margin: 0 0 1rem 0;
      font-weight: 800;
      position: relative;
      z-index: 2;
  }

  .step-description {
      font-family: var(--font-hebrew-body);
      font-size: 1.1rem;
      color: var(--color-text-muted);
      line-height: 1.8;
      margin: 0 0 1.5rem 0;
      position: relative;
      z-index: 2;
  }

  .step-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 2rem;
      position: relative;
      z-index: 2;
  }

  .btn-enhanced {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
  }

  .btn-enhanced svg {
      transition: transform 0.3s ease;
  }

  .btn-enhanced:hover svg {
      transform: translateX(-5px);
  }

  .step-decoration {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, var(--color-gold), transparent);
      opacity: 0.1;
      border-radius: 50% 0 0 0;
      z-index: 0;
  }

  /* CTA Section */
  .thank-you-cta-section {
      padding: 4rem 2rem;
      text-align: center;
      position: relative;
  }

  .cta-container {
      max-width: 600px;
      margin: 0 auto;
  }

  .btn-mega {
      position: relative;
      padding: 1.5rem 4rem;
      font-size: 1.3rem;
      overflow: hidden;
      z-index: 1;
  }

  .btn-shine {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      animation: shine 3s infinite;
      z-index: 2;
  }

  @keyframes shine {
      0% {
          left: -100%;
      }
      50%, 100% {
          left: 100%;
      }
  }

  .btn-text {
      position: relative;
      z-index: 3;
  }

  /* Mobile Responsive for Thank You Page */
  @media (max-width: 768px) {
      .thank-you-hero {
          padding: 6rem 1rem 3rem;
          min-height: 80vh;
      }

      .thank-you-container {
          padding: 1rem;
      }

      .thank-you-icon svg {
          width: 120px;
          height: 120px;
      }

      .success-ring-1 {
          width: 150px;
          height: 150px;
      }

      .success-ring-2 {
          width: 180px;
          height: 180px;
      }

      .success-ring-3 {
          width: 210px;
          height: 210px;
      }

      .thank-you-steps-section {
          padding: 4rem 1rem;
      }

      .steps-grid {
          grid-template-columns: 1fr;
          gap: 2rem;
      }

      .step-item-enhanced {
          padding: 2rem 1.5rem;
      }

      .step-number {
          font-size: 3rem;
      }

      .step-title {
          font-size: 1.5rem;
      }

      .step-description {
          font-size: 1rem;
      }

      .step-actions {
          flex-direction: column;
      }

      .step-actions .btn {
          width: 100%;
          max-width: 280px;
          margin: 0 auto;
      }

      .achievement-badge {
          flex-direction: column;
          padding: 1.5rem 1.5rem;
      }

      .particle {
          width: 3px;
          height: 3px;
      }
  }

  @media (max-width: 480px) {
      .thank-you-hero {
          padding: 5rem 0.5rem 2rem;
      }

      .thank-you-icon svg {
          width: 100px;
          height: 100px;
      }

      .thank-you-steps-section {
          padding: 3rem 0.5rem;
      }

      .step-item-enhanced {
          padding: 1.5rem 1rem;
      }

      .steps-title {
          font-size: 2rem;
      }

      .step-icon {
          font-size: 2.5rem;
      }

      .step-number {
          font-size: 2.5rem;
          top: 1rem;
          left: 1rem;
      }

      .btn-mega {
          padding: 1.2rem 2.5rem;
          font-size: 1.1rem;
      }
  }