/* ===================
   IMPROVED BASE STYLES
   =================== */

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

   :root{
     --primary: #FF9900;
     --bg: #071026;
     --surface: #0f1724;
     --text: #f1f7fb;
     --muted: #9fb0c8;
     --radius: 12px;
     --container-max: 1200px;
     --gap: 1rem;
     --fluid-padding: clamp(1rem, 2.5vw, 2.5rem);
     --base-font: 16px;
     --nav-height: 80px;
   }
   
   html { 
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
     -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: 100%; 
   }
   
   body { 
     margin:0; 
     color:var(--text); 
     background:var(--bg); 
     line-height:1.45; 
     font-size:var(--base-font);
     font-family: 'Inter', sans-serif;
     overflow-x: hidden;
     cursor: default;
   }
   
   /* Images and media */
   img, picture, video { max-width:100%; height:auto; display:block; }
   
   /* Accessibility: skip link */
   .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
   .skip-link:focus{position:static;left:0;top:0;width:auto;height:auto;padding:1rem;background:#000;color:#fff;z-index:9999}
   
   /* Prevent scroll when overlay active */
   body.no-scroll { overflow: hidden; height: 100vh; touch-action: none; }
   
   /* Main content offset */
   main {
     padding-top: var(--nav-height);
   }
   
   /* Responsive typography */
   h1{font-size:clamp(1.8rem, 4vw, 3.6rem); margin:0 0 0.5rem; line-height:1.05;}
   h2{font-size:clamp(1.25rem, 2.2vw, 1.8rem); margin:0 0 0.8rem;}
   p, a, li, label{font-size:clamp(0.95rem, 1.4vw, 1rem);}
   
   /* Layout helpers */
   .container{max-width:var(--container-max); margin:0 auto; padding-inline:var(--fluid-padding);}
   
   /* ===================
      CUSTOM CURSOR
      =================== */
   
   .cursor {
     width: 20px;
     height: 20px;
     border: 2px solid var(--primary);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 10000;
     transition: all 0.1s ease;
     transform: translate(-50%, -50%);
     opacity: 0;
   }
   
   .cursor-follower {
     width: 40px;
     height: 40px;
     background: rgba(255, 153, 0, 0.1);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     transition: all 0.3s ease;
     transform: translate(-50%, -50%);
     opacity: 0;
   }
   
   /* Only show cursor on desktop */
   @media (min-width: 1025px) {
     .cursor, .cursor-follower {
       opacity: 1;
     }
   }
   
   /* ===================
      BACKGROUND ANIMATION
      =================== */
   
   .bg-animation {
     position: fixed;
     width: 100vw;
     height: 100vh;
     top: 0;
     left: 0;
     z-index: -1;
     background: var(--bg);
     overflow: hidden;
   }
   
   .bg-animation::before {
     content: '';
     position: absolute;
     width: 200%;
     height: 200%;
     top: -50%;
     left: -50%;
     background: radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 0.3) 0px, transparent 50%),
                 radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.3) 0px, transparent 50%),
                 radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.2) 0px, transparent 50%);
     animation: rotate 30s linear infinite;
   }
   
   @keyframes rotate {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   
   .floating-shapes {
     position: absolute;
     width: 100%;
     height: 100%;
   }
   
   .shape {
     position: absolute;
     border-radius: 50%;
     filter: blur(40px);
     opacity: 0.3;
   }
   
   .shape:nth-child(1) {
     width: 400px;
     height: 400px;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     top: -200px;
     right: -200px;
     animation: float 20s ease-in-out infinite;
   }
   
   .shape:nth-child(2) {
     width: 300px;
     height: 300px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     bottom: -150px;
     left: -150px;
     animation: float 15s ease-in-out infinite reverse;
   }
   
   .shape:nth-child(3) {
     width: 500px;
     height: 500px;
     background: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: pulse 10s ease-in-out infinite;
   }
   
   @keyframes float {
     0%, 100% { transform: translateY(0) translateX(0); }
     33% { transform: translateY(-30px) translateX(20px); }
     66% { transform: translateY(20px) translateX(-20px); }
   }
   
   @keyframes pulse {
     0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
     50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; }
   }
   
   /* ===================
      NAVIGATION
      =================== */
   
   nav {
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1000;
     padding: 1.5rem 2rem;
     background: rgba(10, 14, 26, 0.5);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
   }
   
   nav.scrolled {
     padding: 1rem 2rem;
     background: rgba(10, 14, 26, 0.9);
   }
   
   .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   .logo {
     font-size: 1.5rem;
     font-weight: 800;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: white;
     background-clip: text;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     z-index: 1100;
   }
   
   /* Desktop Navigation */
   .nav-links {
     display: flex;
     list-style: none;
     gap: 2rem;
     margin: 0;
     padding: 0;
   }
   
   .nav-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-weight: 500;
     position: relative;
     transition: color 0.3s ease;
   }
   
   .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     transition: width 0.3s ease;
   }
   
   .nav-links a:hover,
   .nav-links a.active {
     color: #ffffff;
   }
   
   .nav-links a:hover::after,
   .nav-links a.active::after {
     width: 100%;
   }
   
   /* Mobile Menu Toggle - HIDDEN by default */
   .mobile-menu-toggle {
     display: none;
     color: #ffffff;
     font-size: 1.8rem;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 1100;
     padding: 0.25rem 0.5rem;
     line-height: 1;
   }
   
   /* Mobile Menu Overlay */
   .mobile-menu-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
     justify-content: flex-end;
     align-items: stretch;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
     z-index: 1200;
     pointer-events: none;
   }
   
   .mobile-menu-overlay.active {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }
   
   .mobile-nav {
     background: #0a0e1a;
     width: 280px;
     max-width: 85%;
     height: 100%;
     padding: 2rem 1.5rem;
     transform: translateX(100%);
     transition: transform 0.3s ease;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
   }
   
   .mobile-menu-overlay.active .mobile-nav {
     transform: translateX(0);
   }
   
   .mobile-menu-close {
     position: absolute;
     top: 20px;
     right: 24px;
     font-size: 2.5rem;
     color: white;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 1201;
     line-height: 1;
     padding: 0;
   }
   
   .mobile-nav-links {
     list-style: none;
     padding: 0;
     margin: 3rem 0 0 0;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   
   .mobile-nav-links li {
     margin: 0;
   }
   
   .mobile-nav-links a {
     display: block;
     background-color: rgba(255, 255, 255, 0.05);
     padding: 1rem 1.5rem;
     font-size: 1.1rem;
     color: white;
     text-decoration: none;
     border-radius: 8px;
     transition: background 0.2s ease, color 0.2s ease;
   }
   
   .mobile-nav-links a:hover {
     color: #ff9900;
     background: rgba(255, 255, 255, 0.1);
   }
   
   /* ===================
      HERO SECTION
      =================== */
   
   .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 6rem 2rem;
     position: relative;
     z-index: 2;
   }
   
   .hero-content {
     max-width: 1200px;
     text-align: center;
     z-index: 2;
   }
   
   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1.5rem;
     background: rgba(255, 153, 0, 0.1);
     border: 1px solid rgba(255, 153, 0, 0.3);
     border-radius: 50px;
     margin-bottom: 2rem;
     animation: slideDown 0.8s ease;
   }
   
   @keyframes slideDown {
     from { opacity: 0; transform: translateY(-20px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   .live-indicator {
     width: 8px;
     height: 8px;
     background: #00ff88;
     border-radius: 50%;
     animation: blink 2s infinite;
   }
   
   @keyframes blink {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.5; transform: scale(1.5); }
   }
   
   h1 {
     font-size: clamp(2.5rem, 8vw, 6rem);
     font-weight: 900;
     line-height: 1.1;
     margin-bottom: 1.5rem;
     background: linear-gradient(180deg, #ffffff 0%, #ff9900 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: slideUp 0.8s ease 0.2s both;
   }
   
   @keyframes slideUp {
     from { opacity: 0; transform: translateY(30px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   .hero-subtitle {
     font-size: clamp(1.1rem, 3vw, 1.5rem);
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 3rem;
     animation: slideUp 0.8s ease 0.4s both;
   }
   
   .hero-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1.5rem;
     max-width: 800px;
     margin: 0 auto 3rem;
     animation: slideUp 0.8s ease 0.6s both;
   }
   
   .stat-card {
     padding: 2rem 1rem;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
   }
   
   .stat-card:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.05);
     border-color: #ff9900;
     box-shadow: 0 10px 40px rgba(255, 153, 0, 0.2);
   }
   
   .stat-number {
     font-size: clamp(2rem, 5vw, 3rem);
     font-weight: 800;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .stat-label {
     color: rgba(255, 255, 255, 0.7);
     margin-top: 0.5rem;
     font-size: clamp(0.85rem, 2vw, 1rem);
   }
   
   .hero-cta {
     display: flex;
     gap: 1.5rem;
     justify-content: center;
     flex-wrap: wrap;
     animation: slideUp 0.8s ease 0.8s both;
   }
   
   .btn {
     padding: 1rem 2.5rem;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1.1rem;
     text-decoration: none;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     display: inline-block;
     border: none;
     cursor: pointer;
   }
   
   .btn-primary {
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     color: white;
   }
   
   .btn-primary::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.2);
     transition: left 0.3s ease;
   }
   
   .btn-primary:hover::before {
     left: 100%;
   }
   
   .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 20px 40px rgba(255, 153, 0, 0.3);
   }
   
   .btn-secondary {
     background: transparent;
     color: #ffffff;
     border: 2px solid rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
   }
   
   .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: #ff9900;
     transform: translateY(-3px);
   }
   
   .join {
     background: #5865F2;
     color: #ffffff;
     border: 2px solid rgba(255, 255, 255, 0.2);
   }
   
   .join:hover {
     background: #4752c4;
     transform: translateY(-3px);
   }
   
   .scroll-indicator {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
     animation: bounce 2s infinite;
   }
   
   @keyframes bounce {
     0%, 100% { transform: translateX(-50%) translateY(0); }
     50% { transform: translateX(-50%) translateY(10px); }
   }
   
   .scroll-indicator svg {
     width: 30px;
     height: 30px;
     stroke: rgba(255, 255, 255, 0.5);
   }
   
   /* ===================
      WORKSHOPS SECTION
      =================== */
   
   .workshops-section {
     padding: 6rem 2rem;
   }
   
   .section-header {
     text-align: center;
     margin-bottom: 3rem;
   }
   
   .section-header h2 {
     font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 800;
     margin-bottom: 1rem;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .section-header p {
     font-size: clamp(1rem, 2vw, 1.2rem);
     color: rgba(255, 255, 255, 0.7);
   }
   
   .workshop-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
     gap: 2rem;
     margin-top: 3rem;
   }
   
   .workshop-card {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 2rem;
     padding-top: 5rem;
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease;
   }
   
   .workshop-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, transparent, rgba(255, 153, 0, 0.1));
     transform: translateX(-100%);
     transition: transform 0.6s ease;
   }
   
   .workshop-card:hover::before {
     transform: translateX(0);
   }
   
   .workshop-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
     border-color: #ff9900;
   }
   
   .week-badge {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: 1.2rem;
     color: white;
     box-shadow: 0 10px 30px rgba(255, 153, 0, 0.3);
     z-index: 5;
   }
   
   .workshop-header h3 {
     font-size: clamp(1.25rem, 3vw, 1.5rem);
     margin-bottom: 1rem;
     color: #ffffff;
   }
   
   .workshop-description {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 1.5rem;
     line-height: 1.6;
   }
   
   .workshop-topics {
     list-style: none;
     margin-bottom: 2rem;
     padding: 0;
   }
   
   .workshop-topics li {
     padding: 0.75rem 0;
     color: rgba(255, 255, 255, 0.7);
     display: flex;
     align-items: flex-start;
     gap: 1rem;
     line-height: 1.4;
   }
   
   .workshop-topics li::before {
     content: '';
     width: 6px;
     height: 6px;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     border-radius: 50%;
     flex-shrink: 0;
     margin-top: 0.5rem;
   }
   
   .workshop-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     flex-wrap: wrap;
     gap: 1rem;
   }
   
   .difficulty {
     padding: 0.5rem 1rem;
     border-radius: 50px;
     font-size: 0.875rem;
     font-weight: 600;
   }
   
   .difficulty-beginner {
     background: rgba(0, 255, 136, 0.1);
     color: #00ff88;
     border: 1px solid rgba(0, 255, 136, 0.3);
   }
   
   .difficulty-intermediate {
     background: rgba(255, 187, 51, 0.1);
     color: #ffbb33;
     border: 1px solid rgba(255, 187, 51, 0.3);
   }
   
   .difficulty-advanced {
     background: rgba(255, 51, 102, 0.1);
     color: #ff3366;
     border: 1px solid rgba(255, 51, 102, 0.3);
   }
   
   .workshop-action {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1.5rem;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     color: white;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     position: relative;
     z-index: 10;
   }
   
   .workshop-action:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(255, 153, 0, 0.3);
   }
   
   /* ===================
      CTA SECTION
      =================== */
   
   .cta-section {
     padding: 6rem 2rem;
     text-align: center;
     position: relative;
     overflow: hidden;
   }
   
   .cta-section::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(255, 153, 0, 0.2), transparent);
     filter: blur(100px);
   }
   
   .cta-content {
     position: relative;
     z-index: 2;
   }
   
   .cta-title {
     font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 800;
     margin-bottom: 1rem;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .cta-subtitle {
     font-size: clamp(1rem, 3vw, 1.3rem);
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 2rem;
   }
   
   .email-form {
     display: flex;
     gap: 1rem;
     max-width: 500px;
     margin: 0 auto 2rem;
     flex-wrap: wrap;
     justify-content: center;
   }
   
   .email-input {
     flex: 1;
     min-width: 250px;
     padding: 1rem 1.5rem;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50px;
     color: white;
     font-size: 1rem;
     transition: all 0.3s ease;
   }
   
   .email-input::placeholder {
     color: rgba(255, 255, 255, 0.5);
   }
   
   .email-input:focus {
     outline: none;
     border-color: #ff9900;
     background: rgba(255, 255, 255, 0.08);
   }
   
   .community-links {
     display: flex;
     justify-content: center;
     gap: 1rem;
     flex-wrap: wrap;
   }
   
   /* ===================
      FAQ SECTION
      =================== */
   
   #faq {
     padding: 6rem 2rem;
     max-width: 900px;
     margin: 0 auto;
   }
   
   #faq h2 {
     font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 800;
     text-align: center;
     margin-bottom: 1rem;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .section-subtitle {
     text-align: center;
     font-size: clamp(1rem, 2vw, 1.2rem);
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 3rem;
   }
   
   .faq-container {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
   
   .faq-item {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     overflow: hidden;
     transition: all 0.3s ease;
   }
   
   .faq-item:hover {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 153, 0, 0.3);
     transform: translateY(-2px);
   }
   
   .faq-item.active {
     border-color: #ff9900;
     background: rgba(255, 153, 0, 0.05);
   }
   
   .faq-question {
     padding: 1.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     user-select: none;
     gap: 1rem;
   }
   
   .faq-question span:first-child {
     font-size: clamp(1rem, 2vw, 1.1rem);
     font-weight: 600;
     color: #ffffff;
     flex: 1;
   }
   
   .faq-toggle {
     font-size: 1.2rem;
     color: #ff9900;
     transition: transform 0.3s ease;
     flex-shrink: 0;
   }
   
   .faq-item.active .faq-toggle {
     transform: rotate(180deg);
   }
   
   .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.4s ease;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.7;
     font-size: clamp(0.9rem, 2vw, 1rem);
   }
   
   .faq-item.active .faq-answer {
     max-height: 500px;
     padding: 0 1.5rem 1.5rem 1.5rem;
   }
   
   /* ===================
      FOOTER
      =================== */
   
   footer {
     background: #000000;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 3rem 2rem;
     margin-top: 5rem;
   }
   
   .footer-content {
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 2rem;
     flex-wrap: wrap;
   }
   
   .footer-main {
     flex: 1;
     min-width: 250px;
   }
   
   .footer-main p {
     color: rgba(255, 255, 255, 0.7);
     margin: 0;
     line-height: 1.6;
   }
   
   .footer-creator {
     flex-shrink: 0;
   }
   
   .profile-section {
     display: flex;
     align-items: center;
     gap: 1rem;
   }
   
   .profile-image {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 4px solid #ff9900;
     object-fit: cover;
     flex-shrink: 0;
     box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
   }
   
   .profile-info {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     align-items: flex-start;
   }
   
   .profile-info p {
     margin: 0;
     line-height: 1.4;
     color: #ffffff;
   }
   
   .profile-info p strong {
     font-weight: 600;
   }
   
   .profile-info p:last-of-type {
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.9rem;
   }
   
   .linkedin-link {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     color: #ff9900;
     font-size: 0.9rem;
     margin-top: 0.5rem;
     text-decoration: none;
     transition: color 0.3s ease;
   }
   
   .linkedin-link:hover {
     color: #ff6b35;
   }
   
   .linkedin-link svg {
     flex-shrink: 0;
   }
   
   /* ===================
      LOADER
      =================== */
   
   .loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #0a0e1a;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
     transition: opacity 0.5s ease, visibility 0.5s ease;
   }
   
   .loader.hidden {
     opacity: 0;
     visibility: hidden;
   }
   
   .loader-content {
     text-align: center;
   }
   
   .loader-logo {
     font-size: 3rem;
     font-weight: 800;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: pulse 1.5s ease infinite;
   }
   
   .loader-bar {
     width: 200px;
     height: 4px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 2px;
     margin: 2rem auto 0;
     overflow: hidden;
   }
   
   .loader-progress {
     width: 30%;
     height: 100%;
     background: linear-gradient(135deg, #ff9900 0%, #ff6b35 100%);
     animation: loading 2s ease infinite;
   }
   
   @keyframes loading {
     0% { width: 0%; }
     50% { width: 100%; }
     100% { width: 0%; }
   }
   
   /* ===================
      UTILITY CLASSES
      =================== */
   
   .fade-in {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease, transform 0.6s ease;
   }
   
   .fade-in.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* ===================
      RESPONSIVE BREAKPOINTS
      =================== */
   
   /* Tablets and small desktops */
   @media (max-width: 1024px) {
     .nav-container {
       padding-inline: 1.5rem;
     }
     
     .workshop-grid {
       grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
       gap: 1.5rem;
     }
   }
   
   /* Tablets and below - Show mobile menu */
   @media (max-width: 768px) {
     /* Hide desktop nav, show mobile toggle */
     .nav-links {
       display: none;
     }
     
     .mobile-menu-toggle {
       display: block;
     }
     
     nav {
       padding: 1rem 1.5rem;
     }
     
     .hero {
       padding: 4rem 1.5rem;
       min-height: 90vh;
     }
     
     h1 {
       font-size: clamp(2rem, 10vw, 3rem);
     }
     
     .hero-subtitle {
       font-size: 1.1rem;
     }
     
     .hero-stats {
       grid-template-columns: 1fr;
       gap: 1rem;
     }
     
     .hero-cta {
       flex-direction: column;
       align-items: center;
       gap: 1rem;
       width: 100%;
     }
     
     .hero-cta .btn {
       width: 100%;
       max-width: 300px;
       text-align: center;
     }
     
     .workshop-grid {
       grid-template-columns: 1fr;
     }
     
     .workshop-card {
       padding: 1.5rem;
       padding-top: 4.5rem;
     }
     
     .week-badge {
       width: 50px;
       height: 50px;
       font-size: 1rem;
       top: 1.25rem;
       right: 1.25rem;
     }
     
     .email-form {
       flex-direction: column;
       width: 100%;
     }
     
     .email-input {
       width: 100%;
       min-width: auto;
     }
     
     .email-form .btn-primary {
       width: 100%;
     }
     
     .footer-content {
       flex-direction: column;
       text-align: center;
       gap: 2rem;
     }
     
     .footer-main {
       text-align: center;
     }
     
     .profile-section {
       justify-content: center;
       flex-direction: column;
       text-align: center;
     }
     
     .profile-info {
       align-items: center;
     }
     
     .linkedin-link {
       justify-content: center;
     }
     
     .faq-question {
       padding: 1.25rem;
     }
     
     .faq-item.active .faq-answer {
       padding: 0 1.25rem 1.25rem 1.25rem;
     }
   }
   
   /* Mobile phones */
   @media (max-width: 480px) {
     nav {
       padding: 1rem;
     }
     
     .logo {
       font-size: 1.25rem;
     }
     
     h1 {
       font-size: 2rem;
     }
     
     .hero-subtitle {
       font-size: 1rem;
     }
     
     .hero {
       padding: 3rem 1rem;
     }
     
     .stat-card {
       padding: 1.5rem 1rem;
     }
     
     .stat-number {
       font-size: 2rem;
     }
     
     .workshops-section,
     .cta-section,
     #faq {
       padding: 4rem 1rem;
     }
     
     .workshop-card {
       padding: 1.25rem;
     }
     
     .workshop-footer {
       flex-direction: column;
       align-items: flex-start;
     }
     
     .workshop-action {
       width: 100%;
       justify-content: center;
     }
     
     footer {
       padding: 2rem 1rem;
     }
     
     .mobile-nav {
       width: 100%;
       max-width: 100%;
     }
     
     .btn {
       padding: 0.875rem 2rem;
       font-size: 1rem;
     }
   }
   
   /* Large desktops - ensure nav stays visible */
   @media (min-width: 1025px) {
     .nav-links {
       display: flex !important;
     }
     
     .mobile-menu-toggle {
       display: none !important;
     }
   }