:root{--primary-bg:#fbf9f7;--surface-white:#ffffff;--surface-tint:#fff5f3;--text-primary:#1e2022;--text-secondary:#5a5e64;--accent-color:#fe5742;--accent-hover:#e04431;--button-bg:#1e2022;--divider-bg:#f4f1ec;--border-color:#ebe7e2;--border-subtle:#f0ece6;--font-heading:'Jost',sans-serif;--font-serif:'Jost',sans-serif;--font-sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-body:'Poppins',sans-serif;--transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);--spacing-unit:1.5rem;--container-width:900px;}*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}body{background-color:var(--primary-bg);color:var(--text-primary);font-family:var(--font-sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:700;line-height:1.2;color:var(--text-primary);}h1{font-size:3.5rem;}h2{font-size:2.5rem;}h3{font-size:1.75rem;}h4{font-size:1.5rem;}p{color:var(--text-primary);font-size:1rem;}.italic-accent{font-style:italic;color:var(--accent-color);font-weight:500;}.section-label{display:inline-block;font-size:0.875rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-color);margin-bottom:1.5rem;animation:slideUp 0.6s ease;position:relative;padding-bottom:0.5rem;}.section-label::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent-color),transparent);animation:expandWidth 0.8s ease;}.navbar{background-color:var(--primary-bg) !important;padding:1.5rem 0;box-shadow:0 1px 3px rgba(0,0,0,0.08);position:sticky;top:0;z-index:1000;}.navbar-container{max-width:var(--container-width);margin:0 auto;padding:0 1.5rem;}.brand-logo{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:var(--text-primary) !important;text-decoration:none;transition:var(--transition);}.brand-logo:hover{color:var(--accent-color) !important;}.navbar-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end;}.btn-course{background-color:transparent;color:var(--text-primary);border:1px solid var(--text-primary);padding:0.75rem 1.25rem;font-size:0.9rem;font-weight:600;border-radius:4px;transition:var(--transition);}.btn-course:hover{background-color:var(--text-primary);color:var(--primary-bg);}.btn-call{background-color:var(--button-bg);color:var(--primary-bg);border:1px solid var(--button-bg);padding:0.75rem 1.25rem;font-size:0.9rem;font-weight:600;border-radius:4px;transition:var(--transition);}.btn-call:hover{background-color:var(--accent-color);border-color:var(--accent-color);}.btn{font-family:var(--font-sans);font-weight:600;border-radius:6px;padding:0.875rem 1.75rem;transition:var(--transition);border:none;cursor:pointer;text-decoration:none;display:inline-block;}.btn-primary{background-color:var(--button-bg);color:var(--primary-bg);position:relative;overflow:hidden;transition:var(--transition);box-shadow:0 4px 15px rgba(17,17,17,0.2);}.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s;}.btn-primary:hover::before{left:100%;}.btn-primary:hover,.btn-primary:focus{background-color:var(--accent-color);color:var(--primary-bg);transform:translateY(-2px);box-shadow:0 8px 25px rgba(254, 87, 66,0.4);}.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(254, 87, 66,0.3);}.btn-cta{font-size:1.1rem;padding:1rem 2.5rem !important;letter-spacing:0.5px;}.btn-dark{background-color:var(--button-bg);color:var(--primary-bg);}.btn-dark:hover,.btn-dark:focus{background-color:var(--accent-color);color:var(--primary-bg);}.btn-submit{padding:0.875rem 1.5rem;}.hero-section{min-height:70vh;display:flex;align-items:center;justify-content:center;background-color:var(--primary-bg);border-bottom:1px solid var(--border-color);animation:fadeIn 0.8s ease;}.hero-container{max-width:var(--container-width);padding:3rem 1.5rem;text-align:center;}.hero-title{margin:1.5rem 0;animation:slideUp 0.7s ease;letter-spacing:-0.5px;}.hero-subtitle{font-size:1.25rem;margin:1.5rem 0 2rem 0;animation:slideUp 0.8s ease;max-width:700px;margin-left:auto;margin-right:auto;}.trust-text{font-size:0.95rem;color:var(--text-secondary);margin-top:1.5rem;animation:fadeIn 1s ease;}.section-container{max-width:var(--container-width);margin:0 auto;padding:4rem 1.5rem;}.section-title{text-align:center;margin-bottom:3rem;animation:slideUp 0.6s ease;position:relative;display:inline-block;width:100%;}.section-title::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,var(--accent-color),transparent);margin:1rem auto 0;border-radius:2px;animation:expandWidth 0.8s ease 0.2s backwards;}.solution-intro{text-align:center;font-size:1.1rem;margin-bottom:2.5rem;animation:slideUp 0.7s ease;}.course-banner{background-color:var(--divider-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}.course-banner-content{max-width:var(--container-width);margin:0 auto;padding:3rem 1.5rem;}.course-highlight{text-align:center;animation:fadeInUp 0.7s ease;}.course-highlight h2{margin-bottom:1.5rem;font-size:2rem;}.price-tag{display:inline-block;font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:var(--accent-color);margin-bottom:1.5rem;}.course-highlight p{font-size:1.05rem;margin:0.75rem 0;color:var(--text-primary);}.payment-info{background-color:var(--primary-bg);border:1px solid var(--border-color);border-radius:8px;padding:2rem;margin-top:2rem;text-align:left;}.payment-title{font-weight:700;font-size:1rem;margin-bottom:1rem;color:var(--text-primary);}.payment-details{list-style:none;font-size:0.95rem;}.payment-details li{padding:0.5rem 0;border-bottom:1px solid var(--divider-bg);}.payment-details li:last-child{border-bottom:none;}.payment-contact{margin-top:1.5rem;font-size:0.95rem;}.problem-section{background-color:var(--divider-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}.problem-cards{gap:2rem;}.problem-card{background-color:var(--primary-bg);padding:2.5rem 2rem;border-radius:8px;text-align:center;transition:var(--transition);animation:fadeInUp 0.6s ease;border:1px solid var(--border-color);}.problem-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(254, 87, 66,0.15);border-color:var(--accent-color);}.problem-card:hover .card-badge{animation:bounce 0.6s ease;}.card-badge{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background-color:var(--accent-color);color:var(--primary-bg);font-family:var(--font-serif);font-size:1.75rem;font-weight:700;border-radius:50%;margin-bottom:1.5rem;}.problem-card h3{font-size:1.5rem;margin-bottom:1rem;}.problem-card p{font-size:0.95rem;color:var(--text-secondary);margin:0;}.solution-cards{gap:2rem;}.solution-card{background-color:var(--divider-bg);padding:2.5rem 2rem;border-radius:8px;text-align:center;transition:var(--transition);animation:fadeInUp 0.6s ease;border:1px solid var(--border-color);}.solution-card:hover{transform:translateY(-8px) scale(1.02);background-color:var(--primary-bg);box-shadow:0 15px 40px rgba(254, 87, 66,0.15);}.solution-card:hover .icon-placeholder{animation:float 0.6s ease;}.icon-placeholder{font-size:3.5rem;margin-bottom:1.5rem;animation:pulse 2s ease-in-out infinite;}.solution-card h3{font-size:1.5rem;margin-bottom:1rem;}.solution-card p{font-size:0.95rem;color:var(--text-secondary);margin:0;}.social-proof-section{background-color:var(--divider-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}.testimonials{gap:2rem;}.testimonial-card{background-color:var(--primary-bg);padding:2rem;border-radius:8px;text-align:center;transition:var(--transition);animation:fadeInUp 0.6s ease;border:1px solid var(--border-color);}.testimonial-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 15px 40px rgba(254, 87, 66,0.15);border:1px solid var(--accent-color);}.testimonial-card:hover .profile-image-sm{animation:pulse 0.8s ease;box-shadow:0 8px 24px rgba(254, 87, 66,0.3);}.avatar-placeholder{font-size:3rem;margin-bottom:1rem;}.testimonial-card h4{font-size:1.25rem;margin-bottom:0.25rem;}.testimonial-card .business{font-size:0.85rem;color:var(--accent-color);font-weight:600;margin-bottom:1rem;}.testimonial-card .quote{font-size:0.95rem;color:var(--text-secondary);margin:1rem 0;font-style:italic;}.rating{font-size:0.9rem;margin-top:1rem;}.final-cta-section{background-color:var(--primary-bg);border-top:1px solid var(--border-color);}.final-cta-section .section-title{margin-bottom:2rem;}.process-section{background-color:var(--primary-bg);border-top:1px solid var(--border-color);}.timeline{position:relative;padding:2rem 0;}.timeline::before{content:'';position:absolute;left:50%;transform:translateX(-50%);width:2px;height:100%;background:linear-gradient(180deg,transparent 0%,var(--accent-color) 50%,transparent 100%);}.timeline-item{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem;position:relative;animation:fadeInUp 0.6s ease;}.timeline-item:nth-child(even){direction:rtl;}.timeline-item:nth-child(even)>*{direction:ltr;}.timeline-marker{position:absolute;left:50%;top:0;transform:translateX(-50%);width:60px;height:60px;background-color:var(--accent-color);color:var(--primary-bg);border:4px solid var(--primary-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:1.75rem;font-weight:700;box-shadow:0 4px 12px rgba(254, 87, 66,0.3);z-index:10;}.timeline-content{padding:2rem;background-color:var(--divider-bg);border:1px solid var(--border-color);border-radius:8px;}.timeline-content h3{margin-bottom:0.5rem;font-size:1.5rem;}.timeline-content p.italic-accent{margin-bottom:1.5rem;}.image-placeholder{background-color:#e8e8e8;border-radius:8px;padding:2rem;text-align:center;color:var(--text-secondary);font-size:0.95rem;font-weight:500;}.image-placeholder p{margin:0;font-size:1.5rem;}@media (max-width:768px){.timeline::before{left:10px;}.timeline-marker{left:10px;width:50px;height:50px;font-size:1.25rem;}.timeline-item{grid-template-columns:1fr;margin-left:80px;}.timeline-item:nth-child(even){direction:ltr;}.timeline-content{padding:1.5rem;}}.who-for-section{background-color:var(--divider-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}.who-for-content{display:grid;gap:2rem;}.who-for-item{background-color:var(--primary-bg);padding:2rem;border-radius:8px;border-left:4px solid var(--accent-color);animation:fadeInUp 0.6s ease;}.who-for-item h4{font-size:1.25rem;margin-bottom:0.5rem;color:var(--text-primary);}.who-for-item p{color:var(--text-secondary);margin:0;font-size:0.95rem;}.modal-content{border:none;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.2);background-color:var(--primary-bg);}.modal-header{border-bottom:1px solid var(--border-color);padding:1.5rem;}.modal-title{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;}.modal-body{padding:2rem;}.form-label{font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;}.form-control,.form-select{border:1px solid var(--border-color);border-radius:6px;padding:0.75rem;font-family:var(--font-sans);transition:var(--transition);}.form-control:focus,.form-select:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(254, 87, 66,0.1);}.success-icon{font-size:4rem;margin-bottom:1rem;animation:scaleIn 0.5s ease;}.success-icon{color:#27ae60;}.footer{background-color:var(--divider-bg);border-top:1px solid var(--border-color);padding:2rem 1.5rem;text-align:center;animation:fadeIn 0.8s ease;}.footer .container{max-width:var(--container-width);}.footer p{margin:0.5rem 0;font-size:0.9rem;color:var(--text-secondary);}.office-location{margin-top:1rem;font-weight:500;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);filter:blur(4px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}@keyframes slideUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}@keyframes slideInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px);}to{opacity:1;transform:translateX(0);}}@keyframes scaleIn{from{opacity:0;transform:scale(0.8);}to{opacity:1;transform:scale(1);}}@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);}}@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(254, 87, 66,0.3);}50%{box-shadow:0 0 40px rgba(254, 87, 66,0.6);}}@keyframes shimmer{0%{background-position:-1000px 0;}100%{background-position:1000px 0;}}@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);}}@keyframes rotateIn{from{opacity:0;transform:rotate(-10deg) scale(0.9);}to{opacity:1;transform:rotate(0) scale(1);}}@keyframes expandWidth{from{width:0;opacity:0;}to{width:100%;opacity:1;}}@keyframes bounce{0%,100%{transform:translateY(0);}25%{transform:translateY(-8px);}50%{transform:translateY(0);}75%{transform:translateY(-4px);}}@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-2px);}75%{transform:translateX(2px);}}.hero-image{max-width:100%;width:100%;max-width:400px;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(254, 87, 66,0.2),0 0 40px rgba(254, 87, 66,0.1);animation:slideInRight 0.8s cubic-bezier(0.34,1.56,0.64,1);object-fit:cover;transition:all 0.4s ease;border:1px solid rgba(254, 87, 66,0.2);}.hero-image:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 30px 80px rgba(254, 87, 66,0.3),0 0 60px rgba(254, 87, 66,0.15);}.developer-image{width:100%;max-width:450px;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(254, 87, 66,0.25),0 0 50px rgba(254, 87, 66,0.12);animation:fadeInUp 0.8s cubic-bezier(0.34,1.56,0.64,1);object-fit:cover;transition:all 0.4s ease;border:2px solid rgba(254, 87, 66,0.15);}.developer-image:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 30px 80px rgba(254, 87, 66,0.35),0 0 60px rgba(254, 87, 66,0.18);}.profile-image-sm{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-color);box-shadow:0 4px 12px rgba(254, 87, 66,0.2);}.profile-image-md{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-color);box-shadow:0 8px 24px rgba(254, 87, 66,0.2);}.footer-profile{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--divider-bg);}.footer-profile-img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-color);}.footer-profile-text p{margin:0;font-size:0.9rem;}.footer-profile-text .name{font-weight:700;color:var(--text-primary);margin-bottom:0.25rem;}@keyframes slideInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}}@media (min-width:1920px){:root{--container-width:1400px;--spacing-unit:2rem;}body{font-size:1.1rem;}h1{font-size:4.5rem;}h2{font-size:3rem;}h3{font-size:2rem;}.section-container{padding:5rem 2rem;}.hero-section{min-height:100vh;}.hero-title{font-size:4.5rem;}}@media (min-width:1440px) and (max-width:1919px){:root{--container-width:1200px;--spacing-unit:1.75rem;}h1{font-size:4rem;}h2{font-size:2.75rem;}.section-container{padding:4rem 1.5rem;}.hero-title{font-size:4rem;}}@media (min-width:1025px) and (max-width:1439px){:root{--container-width:1000px;--spacing-unit:1.5rem;}h1{font-size:3.5rem;}h2{font-size:2.5rem;}h3{font-size:1.75rem;}.hero-title{font-size:3.5rem;}.section-container{padding:3.5rem 1.5rem;}}@media (min-width:769px) and (max-width:1024px){:root{--container-width:95%;--spacing-unit:1.25rem;}body{font-size:0.95rem;}h1{font-size:2.8rem;}h2{font-size:2rem;}h3{font-size:1.4rem;}.hero-section{min-height:80vh;padding:2rem 0;}.hero-title{font-size:2.8rem;}.hero-subtitle{font-size:1.05rem;}.section-container{padding:2.5rem 1.25rem;}.hero-section>div>div{grid-template-columns:1fr 1fr !important;gap:2rem !important;}.navbar-buttons{flex-direction:row;gap:0.75rem;}.btn-course,.btn-call{width:auto;padding:0.65rem 1rem !important;font-size:0.85rem;}.problem-cards,.solution-cards,.testimonials{gap:1.5rem;}.problem-card,.solution-card,.testimonial-card{padding:1.75rem;}.price-tag{font-size:2.2rem;}.developer-intro-section>.section-container>div{grid-template-columns:1fr 1fr !important;gap:2rem !important;}}@media (min-width:481px) and (max-width:768px){:root{--container-width:100%;--spacing-unit:1rem;}body{font-size:0.9rem;}h1{font-size:2rem;}h2{font-size:1.5rem;}h3{font-size:1.25rem;}.hero-section{min-height:auto;padding:2rem 0;}.hero-section>div>div{grid-template-columns:1fr !important;gap:2rem !important;}.hero-title{font-size:2rem;margin:1rem 0;}.hero-subtitle{font-size:1rem;}.hero-image{max-width:100%;margin:0 auto;}.developer-image{max-width:100%;margin:0 auto;}.developer-intro-section>.section-container>div{grid-template-columns:1fr !important;gap:1.5rem !important;}.navbar-buttons{flex-direction:column;gap:0.5rem;margin-top:0.75rem;}.btn-course,.btn-call{width:100%;text-align:center;padding:0.65rem 1rem !important;font-size:0.85rem;}.btn-cta{font-size:0.95rem;padding:0.875rem 1.75rem !important;}.section-container{padding:2rem 1rem;}.problem-cards,.solution-cards,.testimonials{gap:1.25rem;}.problem-card,.solution-card,.testimonial-card{padding:1.5rem;}.price-tag{font-size:1.8rem;}.payment-info{padding:1.25rem;}.course-highlight h2{font-size:1.35rem;}.brand-logo{font-size:1.1rem;}.timeline-marker{width:50px;height:50px;font-size:1.1rem;}.timeline-item{margin-left:75px;}}@media (max-width:480px){:root{--container-width:100%;--spacing-unit:0.75rem;}body{font-size:0.85rem;line-height:1.5;}h1{font-size:1.5rem;}h2{font-size:1.2rem;}h3{font-size:1rem;}.navbar{padding:1rem 0;}.brand-logo{font-size:0.9rem;word-break:break-word;}.hero-section{min-height:auto;padding:1.5rem 0;border-bottom:1px solid var(--border-color);}.hero-container{padding:1.5rem 1rem;}.hero-section>div>div{grid-template-columns:1fr !important;gap:1.5rem !important;}.hero-title{font-size:1.5rem;margin:0.75rem 0;line-height:1.3;}.hero-subtitle{font-size:0.85rem;margin:0.75rem 0 1rem;}.section-label{font-size:0.7rem;letter-spacing:1px;margin-bottom:0.75rem;}.btn-primary,.btn-dark,.btn-course,.btn-call{padding:0.6rem 1.25rem !important;font-size:0.8rem;border-radius:4px;width:100%;}.btn-cta{font-size:0.85rem;padding:0.75rem 1.5rem !important;width:100%;}.navbar-buttons{flex-direction:column;gap:0.4rem;margin-top:0.5rem;}.btn-course,.btn-call{margin-bottom:0.25rem;}.section-container{max-width:100%;padding:1.5rem 0.75rem;}.section-title{font-size:1.2rem;margin-bottom:1.5rem;text-align:center;}.solution-intro{font-size:0.95rem;margin-bottom:1.5rem;}.problem-cards,.solution-cards,.testimonials{gap:1rem;}.problem-card,.solution-card,.testimonial-card,.who-for-item{padding:1.25rem 1rem;margin-bottom:0.5rem;}.card-badge{width:45px;height:45px;font-size:1.5rem;margin-bottom:0.75rem;}.problem-card h3,.solution-card h3{font-size:1.1rem;margin-bottom:0.5rem;}.problem-card p,.solution-card p,.testimonial-card p{font-size:0.8rem;line-height:1.4;}.price-tag{font-size:1.5rem;margin-bottom:0.75rem;}.course-highlight{text-align:center;}.course-highlight h2{font-size:1.2rem;margin-bottom:0.75rem;}.course-highlight p{font-size:0.85rem;margin:0.5rem 0;}.payment-info{padding:1rem;margin-top:1rem;}.payment-title{font-size:0.9rem;margin-bottom:0.75rem;}.payment-details{font-size:0.8rem;}.payment-details li{padding:0.35rem 0;border-bottom:1px solid var(--divider-bg);}.payment-details li:last-child{border-bottom:none;}.payment-contact{font-size:0.8rem;margin-top:1rem;}.hero-image{max-width:100%;max-height:250px;object-fit:cover;margin:1rem auto 0;}.developer-image{max-width:100%;max-height:280px;object-fit:cover;margin:0 auto;}.profile-image-sm{width:80px;height:80px;margin:0 auto 0.75rem;}.profile-image-md{width:120px;height:120px;}.footer-profile{flex-direction:column;text-align:center;gap:0.75rem;padding:1rem 0;border-top:1px solid var(--border-color);margin-bottom:1rem;}.footer-profile-img{width:50px;height:50px;margin:0 auto;}.footer-profile-text p{font-size:0.75rem;margin:0.25rem 0;}.footer{padding:1.5rem 1rem;}.footer p{font-size:0.75rem;margin:0.5rem 0;}.office-location{font-size:0.75rem;margin-top:0.75rem;}.trust-text{font-size:0.8rem;margin-top:0.75rem;}.timeline::before{left:10px;}.timeline-marker{left:10px;width:40px;height:40px;font-size:0.9rem;}.timeline-item{grid-template-columns:1fr;margin-left:65px;margin-bottom:1.5rem;}.timeline-item:nth-child(even){direction:ltr;}.timeline-content{padding:1.25rem;}.timeline-content h3{font-size:1.05rem;margin-bottom:0.4rem;}.timeline-content p{font-size:0.8rem;margin-bottom:0.75rem;}.image-placeholder{padding:1.5rem;font-size:0.8rem;}.image-placeholder p{font-size:1.2rem;}.who-for-item{border-left:3px solid var(--accent-color);margin-bottom:1rem;}.who-for-item h4{font-size:1rem;margin-bottom:0.4rem;}.who-for-item p{font-size:0.8rem;line-height:1.4;}.modal-content{border-radius:8px;}.modal-header{padding:1rem;}.modal-title{font-size:1.1rem;}.modal-body{padding:1rem;}.form-label{font-size:0.8rem;}.form-control,.form-select{padding:0.6rem;font-size:0.85rem;}.btn-submit{padding:0.7rem 1rem !important;font-size:0.85rem;}.success-icon{font-size:3rem;margin-bottom:0.75rem;}.icon-placeholder{font-size:2.5rem;margin-bottom:1rem;}.avatar-placeholder{font-size:2rem;margin-bottom:0.75rem;}.testimonial-card .business{font-size:0.75rem;}.testimonial-card .quote{font-size:0.8rem;margin:0.75rem 0;}.rating{font-size:0.8rem;margin-top:0.75rem;}}@media (min-width:1920px) and (aspect-ratio:4 / 3){body{font-size:1.15rem;}h1{font-size:4.5rem;}h2{font-size:3rem;}.section-container{padding:5rem 3rem;}}@media (orientation:portrait) and (max-width:768px){.hero-section{min-height:auto;}.section-container{padding:1.5rem 1rem;}}@media (orientation:landscape) and (max-height:600px){h1{font-size:1.8rem;}h2{font-size:1.4rem;}.hero-section{min-height:auto;padding:1.5rem 0;}.section-container{padding:1.5rem 1rem;}.navbar{padding:0.75rem 0;}}@media (hover:none) and (pointer:coarse){.btn-course,.btn-call,.btn-primary,.btn-dark,.btn-submit{min-height:48px;padding:0.75rem 1.5rem !important;font-size:1rem;}.form-control,.form-select{min-height:48px;padding:0.75rem !important;font-size:16px;}a{padding:0.5rem 0.25rem;}}@media print{.navbar,.footer,.modal,.btn-cta{display:none;}body{color:#000;background:#fff;}h1,h2,h3{page-break-after:avoid;}.section-container{page-break-inside:avoid;}}

/* === Extracted Inline Styles from index.html === */
/* Reset default margins and padding */ * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; top: 0; } body { padding-top: 140px; font-family: var(--font-sans); color: #333; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f5f5f5; } ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #999; } /* Form Input Improvements */ input[type="email"], input[type="text"], input[type="tel"], textarea { font-family: inherit; font-size: clamp(0.9rem, 2vw, 1rem); transition: all 0.3s ease; box-sizing: border-box; } input[type="email"]:focus, input[type="text"]:focus, input[type="tel"]:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.1); border-color: #fe5742 !important; } /* Button Global Styles */ button { font-family: inherit; cursor: pointer; border-radius: 8px; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } button:active { transform: scale(0.98); } /* Link Styles */ a { color: #fe5742; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #ff7657; } #stickyNav { margin: 0 !important; top: 0 !important; overflow: visible !important; background: white !important; } /* Desktop-Only: Prevent Content Overlap */ @media (min-width: 769px) { body { padding-top: 140px !important; } #stickyNav { position: sticky !important; top: 55px !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: white !important; border-bottom: 1px solid #f0f0f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; margin: 0 !important; overflow: visible !important; min-height: 50px !important; } /* Ensure content doesn't hide under sticky nav */ section { position: relative !important; z-index: 1 !important; } /* Extra padding for sections that come right after nav */ section:first-of-type { margin-top: 0 !important; padding-top: clamp(2.5rem, 6vw, 4rem) !important; } } #progressBar { top: 0 !important; } .hero-grid-2col { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 1025px) { .hero-grid-2col { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) and (max-width: 1024px) { .hero-grid-2col { grid-template-columns: 1fr; } } /* Mobile Touch Optimization */ @media (max-width: 768px) { button, a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* Improved Text Selection */ ::selection { background-color: #fe5742; color: white; }

.form-control, .form-select { border: 2px solid #e0e0e0 !important; border-radius: 8px !important; padding: clamp(0.75rem, 2vw, 1rem) !important; font-size: clamp(0.9rem, 1.8vw, 1rem) !important; transition: all 0.3s ease !important; background-color: #fafafa !important; } .form-control:focus, .form-select:focus { border-color: #fe5742 !important; box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.1) !important; background-color: white !important; } .form-label { font-weight: 600 !important; color: #111 !important; margin-bottom: 0.5rem !important; font-size: clamp(0.9rem, 1.8vw, 1rem) !important; } .modal-content { border: none !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; } .modal-header { background: linear-gradient(135deg, rgba(254, 87, 66,0.05) 0%, transparent 100%) !important; border-bottom: 1px solid #e0e0e0 !important; } .modal-title { font-weight: 700 !important; font-size: clamp(1.1rem, 2.2vw, 1.3rem) !important; color: #111 !important; } .btn-close:focus { box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.1) !important; } /* Fix modal z-index to be above urgency banner (1900) */ .modal { z-index: 2050 !important; } .modal-backdrop { z-index: 2040 !important; }

/* Enhanced Typography & Spacing */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; line-height: 1.3; color: #111; } h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 4vw, 2.8rem); } h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); } /* Section Spacing Consistency */ section { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); } @keyframes scrollFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes scrollSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes scrollScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes scrollRotate { from { opacity: 0; transform: rotate(-10deg) scale(0.9); } to { opacity: 1; transform: rotate(0) scale(1); } } /* Utility animations */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Animation classes (initial state - invisible) */ .scroll-animate { opacity: 0; } .scroll-animate.scroll-animate-fade-in { animation: scrollFadeIn 0.6s ease forwards; } .scroll-animate.scroll-animate-slide-up { animation: scrollSlideUp 0.7s ease forwards; } .scroll-animate.scroll-animate-slide-down { animation: scrollSlideDown 0.7s ease forwards; } .scroll-animate.scroll-animate-slide-left { animation: scrollSlideLeft 0.7s ease forwards; } .scroll-animate.scroll-animate-slide-right { animation: scrollSlideRight 0.7s ease forwards; } .scroll-animate.scroll-animate-scale { animation: scrollScale 0.7s ease forwards; } .scroll-animate.scroll-animate-rotate { animation: scrollRotate 0.8s ease forwards; } /* Stagger effect for multiple elements */ .scroll-animate.scroll-animate-stagger-1 { animation-delay: 0.1s; } .scroll-animate.scroll-animate-stagger-2 { animation-delay: 0.2s; } .scroll-animate.scroll-animate-stagger-3 { animation-delay: 0.3s; } .scroll-animate.scroll-animate-stagger-4 { animation-delay: 0.4s; } .scroll-animate.scroll-animate-stagger-5 { animation-delay: 0.5s; } .scroll-animate.scroll-animate-stagger-6 { animation-delay: 0.6s; }

/* Base Container Styles */ #trustBadgesContainer { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Extra Small Devices (320px - 480px) - 1x1 Stacked */ @media (max-width: 480px) { #trustSection { padding: 2rem 1rem !important; } #trustBadgesContainer { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; width: 100% !important; height: auto !important; margin-bottom: 1.5rem !important; position: relative !important; } .trust-badge { min-width: auto !important; width: 100% !important; max-width: 100% !important; flex-shrink: 0 !important; margin-right: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; padding: 1.5rem 1rem !important; animation: slideInUp 0.6s ease-out !important; } .trust-badge:nth-child(1) { animation-delay: 0s !important; } .trust-badge:nth-child(2) { animation-delay: 0.1s !important; } .trust-badge:nth-child(3) { animation-delay: 0.2s !important; } .trust-badge h3 { font-size: 1.2rem !important; } .trust-badge p { font-size: 0.8rem !important; } #trustIndicators { display: none !important; } } /* Small Devices (481px - 768px) - 1x1 Stacked */ @media (min-width: 481px) and (max-width: 768px) { #trustSection { padding: 2.5rem 1.5rem !important; } #trustBadgesContainer { display: grid !important; grid-template-columns: 1fr !important; gap: 1.25rem !important; width: 100% !important; height: auto !important; margin-bottom: 2rem !important; position: relative !important; } .trust-badge { min-width: auto !important; width: 100% !important; max-width: 100% !important; flex-shrink: 0 !important; margin-right: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; padding: 2rem 1.5rem !important; animation: slideInUp 0.6s ease-out !important; } .trust-badge:nth-child(1) { animation-delay: 0s !important; } .trust-badge:nth-child(2) { animation-delay: 0.1s !important; } .trust-badge:nth-child(3) { animation-delay: 0.2s !important; } .trust-badge h3 { font-size: 1.4rem !important; } #trustIndicators { display: none !important; } } /* Desktop & Large Tablets (769px+) - 3-Column Grid */ @media (min-width: 769px) { #trustSection { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem) !important; } #trustBadgesContainer { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; width: auto !important; height: auto !important; margin-bottom: clamp(2rem, 4vw, 3rem) !important; } .trust-badge { min-width: auto !important; width: auto !important; max-width: auto !important; padding: clamp(2rem, 4vw, 2.5rem) !important; } #trustIndicators { display: none !important; } } /* Slide-In Animation for Mobile */ @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Touch Device Optimizations */ @media (hover: none) and (pointer: coarse) { .trust-badge { transition: all 0.2s ease !important; } .trust-badge:active { transform: scale(0.98) !important; } } /* Landscape Mode - Adjustments */ @media (max-width: 768px) and (orientation: landscape) { #trustSection { padding: 1.5rem !important; } #trustBadgesContainer { gap: 1rem !important; max-height: 70vh !important; overflow-y: auto !important; } .trust-badge { padding: 1rem !important; } .trust-badge h3 { font-size: 1.2rem !important; margin: 0.4rem 0 0.6rem !important; } .trust-badge p { font-size: 0.8rem !important; } } /* High DPI Screens */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .trust-badge { box-shadow: 0 4px 16px rgba(254, 87, 66,0.12) !important; } } /* Smooth Scrolling for Mobile */ @media (max-width: 768px) { #trustBadgesContainer { scroll-behavior: smooth; } }

.countdown-section { animation: slideDown 0.6s ease forwards; } .countdown-pulse { animation: pulse 2s ease-in-out infinite; } .countdown-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .countdown-item:hover { transform: translateY(-2px); filter: brightness(1.08); background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.25) !important; } .countdown-item:active { transform: translateY(0); } /* Responsive Topbar - Foldable/Mini (320-480px) */ @media (max-width: 480px) { .countdown-grid { grid-template-columns: 1fr 1fr !important; gap: 0.4rem !important; } .countdown-label-short { display: inline; } .countdown-label-long { display: none; } .countdown-item { padding: 0.5rem 0.6rem !important; } #topbar { padding: 0.55rem 0.5rem !important; } } /* Small Mobile (481-640px) */ @media (min-width: 481px) and (max-width: 640px) { .countdown-grid { grid-template-columns: 1fr 1fr !important; } .countdown-label-short { display: inline; } .countdown-label-long { display: none; } } /* Medium Tablet (641-768px) */ @media (min-width: 641px) and (max-width: 768px) { .countdown-grid { grid-template-columns: 1fr 1fr !important; } .countdown-label-short { display: none; } .countdown-label-long { display: inline; } } /* Large Tablet/Desktop (769px+) */ @media (min-width: 769px) { .countdown-grid { grid-template-columns: 1fr 1fr !important; } .countdown-label-short { display: none; } .countdown-label-long { display: inline; } } /* Extra Large Desktop (1440px+) */ @media (min-width: 1440px) { #topbar { padding: 1rem 3rem !important; } } /* XXL Desktop (1920px+) */ @media (min-width: 1920px) { #topbar { padding: 1.2rem 4rem !important; } }

/* Hamburger Menu Styles */ .nav-hamburger { display: none !important; flex-direction: column; gap: 0.4rem; cursor: pointer; background: none; border: none; padding: 0.6rem; transition: all 0.3s ease; z-index: 1002; align-items: center; justify-content: center; } .nav-hamburger span { width: 26px; height: 3px; background: #111; border-radius: 2px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: block; } .nav-hamburger:hover span { background: #fe5742; } .nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); background: #fe5742; } .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); } .nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -8px); background: #fe5742; } /* Mobile Navigation Menu */ .nav-menu { display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); align-items: center; justify-content: center; transition: all 0.3s ease; } .nav-separator { width: 1px; height: clamp(1rem, 3vw, 1.5rem); background: #fe5742; opacity: 0.3; } /* Mobile Menu Item Hover Effects */ .nav-menu-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 6px; font-size: 0.9rem; font-weight: 700; color: #111; text-decoration: none; width: 100%; text-align: left; transition: all 0.25s ease; border: none; margin: 0.3rem 0; } .nav-menu-item:hover { background: rgba(254, 87, 66,0.08); color: #fe5742; padding-left: 1.2rem; } .nav-menu-item span:first-child { font-size: 1.2rem; transition: all 0.25s ease; display: inline-block; } .nav-menu-item:hover span:first-child { transform: scale(1.15) rotate(8deg); } /* Mobile Navigation Drawer - Unique Solution */ .nav-drawer { position: fixed; left: -280px; top: 0; width: 280px; height: 100vh; background: white; z-index: 1001; transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 0 20px rgba(0,0,0,0.15); padding: 1rem 0; overflow-y: auto; border-right: 3px solid #fe5742; } .nav-drawer.active { left: 0; } .nav-drawer-item { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.5rem; font-size: 1rem; font-weight: 700; color: #111; text-decoration: none; border-left: 4px solid transparent; transition: all 0.25s ease; margin: 0.2rem 0.5rem; border-radius: 8px; } .nav-drawer-item:hover { background: rgba(254, 87, 66,0.1); color: #fe5742; border-left-color: #fe5742; padding-left: 1.8rem; } .nav-drawer-item span:first-child { font-size: 1.5rem; transition: all 0.25s ease; } .nav-drawer-item:hover span:first-child { transform: scale(1.2) rotate(10deg); } .nav-drawer-header { padding: 1rem 1.5rem; border-bottom: 2px solid #fe5742; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .nav-drawer-header span { font-size: 1.8rem; } .nav-drawer-header h3 { margin: 0; font-size: 1.1rem; color: #111; font-weight: 800; } .nav-drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; opacity: 0; transition: opacity 0.35s ease; } .nav-drawer-overlay.active { display: block; opacity: 1; } /* Mobile Navigation - All Mobile Devices */ @media (max-width: 768px) { nav { padding: 0.65rem clamp(0.5rem, 2vw, 1rem) !important; top: 70px !important; } .nav-hamburger { display: flex !important; padding: 0.5rem !important; z-index: 1002 !important; } .nav-hamburger span { width: 24px; height: 3px; } .nav-menu { display: none !important; } .btn-text-hide { display: none; } .logo-text { font-size: 0.75rem !important; } } /* Small Mobile (481-640px) */ @media (min-width: 481px) and (max-width: 640px) { nav { padding: 0.7rem 0 !important; top: 72px !important; } .nav-hamburger { display: flex; } .nav-menu { position: fixed; top: 72px; left: 0; right: 0; background: white; flex-direction: column; gap: 0; justify-content: flex-start; padding: 0.7rem 0.8rem; box-shadow: 0 6px 14px rgba(0,0,0,0.1); display: none; z-index: 999; animation: slideDown 0.3s ease forwards; border-bottom: 3px solid #fe5742; width: 100%; max-width: 100%; } .nav-menu.active { display: flex; } .nav-separator { display: none; } .btn-text-hide { display: none; } .logo-text { font-size: 0.85rem !important; } } /* Medium Tablet (641-768px) */ @media (min-width: 641px) and (max-width: 768px) { nav { padding: 0.75rem 0 !important; top: 74px !important; } .nav-hamburger { display: flex; } .nav-menu { position: fixed; top: 74px; left: 0; right: 0; background: white; flex-direction: column; gap: 0; justify-content: flex-start; padding: 0.75rem; box-shadow: 0 8px 16px rgba(0,0,0,0.1); display: none; z-index: 999; animation: slideDown 0.3s ease forwards; border-bottom: 3px solid #fe5742; width: 100%; max-width: 100%; } .nav-menu.active { display: flex; } .nav-separator { display: none; } } /* Large Tablet/Small Desktop (769-1024px) */ @media (min-width: 769px) and (max-width: 1024px) { nav { padding: 0.85rem 0 !important; top: 76px !important; } .nav-menu { position: static !important; display: flex !important; background: transparent !important; flex-direction: row !important; box-shadow: none !important; padding: 0 !important; border: none !important; margin: 0 !important; gap: 0.8rem !important; } .nav-menu-item { width: auto !important; padding: 0.45rem 0.7rem !important; margin: 0 !important; font-size: 0.8rem !important; } .nav-hamburger { display: none !important; } } /* XL Desktop (1025-1439px) */ @media (min-width: 1025px) and (max-width: 1439px) { nav { padding: 0.9rem 0 !important; top: 78px !important; } .nav-menu { position: static !important; display: flex !important; background: transparent !important; flex-direction: row !important; box-shadow: none !important; padding: 0 !important; border: none !important; margin: 0 !important; gap: 1.2rem !important; } .nav-menu-item { width: auto !important; padding: 0.5rem 0.85rem !important; margin: 0 !important; font-size: 0.9rem !important; } .nav-hamburger { display: none !important; } } /* Large Desktop (1440px+) */ @media (min-width: 1440px) { nav { padding: 1rem 0 !important; top: 80px !important; } .nav-menu { position: static !important; display: flex !important; background: transparent !important; flex-direction: row !important; box-shadow: none !important; padding: 0 !important; border: none !important; margin: 0 !important; gap: 1.5rem !important; } .nav-menu-item { width: auto !important; padding: 0.55rem 1rem !important; margin: 0 !important; font-size: 0.95rem !important; } .nav-hamburger { display: none !important; } } /* XXL Desktop (1920px+) */ @media (min-width: 1920px) { nav { padding: 1.2rem 0 !important; top: 85px !important; } .nav-menu { gap: 2rem !important; } .nav-menu-item { padding: 0.6rem 1.15rem !important; font-size: 1rem !important; } }

.scarcity-badge { display: inline-block; background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%); color: white; padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; animation: slideDown 0.6s ease; margin: 0; } .urgency-box { background: linear-gradient(135deg, rgba(254, 87, 66,0.1) 0%, rgba(254, 87, 66,0.05) 100%); border: 2px solid #fe5742; border-radius: 12px; padding: clamp(1rem, 2vw, 1.5rem); margin: clamp(1rem, 2vw, 1.5rem) 0; } .spot-indicator { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(254, 87, 66,0.15); color: #fe5742; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; font-weight: 700; animation: slideDown 0.6s ease; } .availability-meter { width: 100%; height: 8px; background: rgba(254, 87, 66,0.1); border-radius: 4px; overflow: hidden; margin-top: 0.75rem; } .availability-fill { height: 100%; background: linear-gradient(90deg, #fe5742 0%, #ff7657 100%); border-radius: 4px; width: 30%; animation: slideDown 0.6s ease; } .urgency-text { color: #fe5742; font-weight: 700; font-size: clamp(0.8rem, 1.6vw, 0.9rem); animation: slideDown 0.6s ease; }

/* Desktop Navigation */ #desktopNav { display: flex !important; } #mobileMenuBtn { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } @media (min-width: 769px) { #mobileMenuBtn { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; width: 0 !important; } } @media (max-width: 768px) { #desktopNav { display: none !important; } #mobileMenuBtn { display: flex !important; } /* Fixed mobile header after urgency banner */ #stickyNav { position: fixed !important; top: 55px !important; height: auto; padding: 0.35rem 0.8rem !important; gap: 0.5rem !important; justify-content: space-between !important; background: white !important; border-bottom: 1px solid #f0f0f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important; width: 100% !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; overflow: visible !important; } /* Mobile hamburger button optimization */ #mobileMenuBtn { display: flex !important; visibility: visible !important; pointer-events: auto !important; height: auto !important; width: auto !important; min-width: 48px !important; min-height: 48px !important; font-size: 1.3rem !important; color: #111 !important; background: transparent !important; border: none !important; padding: 0.4rem !important; transition: all 0.2s ease !important; margin: 0 0 0 auto !important; flex: 0 0 auto !important; } #mobileMenuBtn:active { background: rgba(254, 87, 66, 0.08) !important; transform: scale(0.95); } /* Mobile-Specific: Prevent Content Overlap */ body { padding-top: 85px !important; } /* Ensure sticky nav has proper height on mobile */ #stickyNav { min-height: 48px !important; margin: 0 !important; } /* Mobile Content Z-Index Management */ section { position: relative !important; z-index: 1 !important; } /* Mobile Section Spacing - Extra cushion after header */ section:first-of-type { margin-top: 0 !important; padding-top: clamp(1.5rem, 4vw, 2.5rem) !important; } /* Ensure mobile drawer z-index hierarchy */ #mobileMenuDrawer { z-index: 999 !important; } #mobileMenuOverlay { z-index: 998 !important; } /* Prevent content from hiding under fixed header */ main, article, .container { position: relative !important; z-index: 1 !important; } } .scroll-nav-item { border: none !important; outline: none !important; position: relative; padding: 0.5rem 0.8rem !important; border-radius: 6px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; background: transparent !important; color: #666 !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; white-space: nowrap !important; flex-shrink: 0 !important; } .scroll-nav-item:hover { background: rgba(254, 87, 66, 0.08) !important; color: #fe5742 !important; transform: translateY(-2px); } .scroll-nav-item:focus { outline: 2px solid #fe5742 !important; outline-offset: 2px !important; } .scroll-nav-item.nav-active { background: linear-gradient(135deg, rgba(254, 87, 66, 0.12) 0%, rgba(254, 87, 66, 0.08) 100%) !important; color: #fe5742 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1.5px #fe5742 !important; position: relative; } .scroll-nav-item.nav-active::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: linear-gradient(90deg, #fe5742, #ff7657); border-radius: 2px; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Mobile Hamburger Menu Button */ #mobileMenuBtn { background: transparent !important; border: none !important; color: #111 !important; font-size: 1.5rem !important; cursor: pointer !important; padding: 0.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; transition: all 0.3s ease !important; flex-shrink: 0 !important; } #mobileMenuBtn:active { background: rgba(254, 87, 66, 0.1) !important; border-radius: 8px !important; } /* ========================================================
   MODERN APP-STYLE BOTTOM COMMAND SHEET NAVIGATION
   Replaces legacy accordion drawer on all screens & devices
   ======================================================== */

/* Backdrop overlay */
#mobileMenuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

#mobileMenuOverlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Command Sheet Container */
#mobileMenuDrawer.mobile-command-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  max-height: 88vh;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.3), 0 -2px 10px rgba(0, 0, 0, 0.08);
  z-index: 2150;
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-bottom: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#mobileMenuDrawer.mobile-command-sheet.open {
  transform: translateY(0);
}

/* Grab Bar / Drag Handle */
.sheet-grab-bar {
  width: 100%;
  padding: 10px 0 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

.sheet-drag-pill {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sheet-grab-bar:hover .sheet-drag-pill {
  background: #94a3b8;
  transform: scaleY(1.2);
}

/* Scrollable Content Wrapper */
.sheet-content-wrap {
  overflow-y: auto;
  padding: 0 1.25rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overscroll-behavior: contain;
}

/* Sheet Header */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.sheet-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sheet-logo {
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.sheet-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.sheet-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.4px;
  margin-top: 0.2rem;
}

.sheet-close-btn {
  background: #f1f5f9;
  border: none;
  color: #475569;
  font-size: 1.1rem;
  font-weight: 700;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sheet-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: rotate(90deg);
}

/* Featured Deal Cards */
.sheet-featured-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.sheet-deal-card {
  position: relative;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1.5px solid #fed7aa;
  border-radius: 14px;
  padding: 0.85rem 0.85rem 0.75rem 0.85rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.08);
}

.sheet-deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.16);
  border-color: #f97316;
}

.sheet-deal-card:active {
  transform: scale(0.98);
}

.deal-card-course {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.08);
}

.deal-card-course:hover {
  border-color: #22c55e;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.16);
}

.sheet-deal-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 800;
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
  margin-bottom: 0.4rem;
}

.badge-green {
  color: #15803d;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.sheet-deal-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.sheet-deal-desc {
  font-size: 0.72rem;
  color: #475569;
  line-height: 1.35;
  margin: 0 0 0.55rem 0;
}

.sheet-deal-desc strong {
  color: #0f172a;
  font-weight: 800;
}

.sheet-deal-desc del {
  color: #94a3b8;
  font-size: 0.68rem;
  margin-left: 2px;
}

.sheet-deal-cta {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ea580c;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  transition: gap 0.2s ease;
}

.sheet-deal-card:hover .sheet-deal-cta {
  gap: 0.4rem;
}

.cta-green {
  color: #16a34a;
}

/* Quick Navigation Section Label */
.sheet-section-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.7px;
  margin-top: 0.25rem;
}

/* 2-Column Jump Tiles */
.sheet-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

.sheet-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.7rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  width: 100%;
}

.sheet-tile:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-1.5px);
}

.sheet-tile:active {
  transform: scale(0.97);
  background: #f1f5f9;
}

.sheet-tile-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.sheet-tile-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sheet-tile-text strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-tile-text span {
  font-size: 0.66rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom Action Buttons */
.sheet-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.sheet-btn-primary {
  width: 100%;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(254, 87, 66, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.2px;
}

.sheet-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.45);
}

.sheet-btn-primary:active {
  transform: scale(0.98);
}

.sheet-btn-secondary {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.sheet-btn-secondary:active {
  transform: scale(0.98);
}

/* Mobile & Tablet Fine-tuning */
@media (max-width: 480px) {
  #mobileMenuDrawer.mobile-command-sheet {
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
  }

  .sheet-featured-cards {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .sheet-deal-card {
    padding: 0.75rem 0.8rem;
  }

  .sheet-tiles-grid {
    gap: 0.45rem;
  }

  .sheet-tile {
    padding: 0.6rem 0.65rem;
    gap: 0.5rem;
  }

  .sheet-tile-icon {
    font-size: 1.15rem;
  }

  .sheet-tile-text strong {
    font-size: 0.76rem;
  }

  .sheet-tile-text span {
    font-size: 0.62rem;
  }

  .sheet-btn-primary {
    font-size: 0.8rem;
    padding: 0.78rem 0.9rem;
  }

  .sheet-btn-secondary {
    font-size: 0.78rem;
    padding: 0.7rem 0.9rem;
  }
}

/* Urgency Banner Mobile Compact Layout Preservation */
@media (max-width: 480px) {
  #urgencyBanner { flex-direction: row !important; gap: 0.5rem !important; padding: 0.4rem 0.6rem !important; min-height: auto !important; justify-content: space-between !important; }
  #urgencyBanner > div:first-child { gap: 0.2rem !important; flex-shrink: 0 !important; }
  #urgencyBanner > div:first-child span:first-child { font-size: 0.9rem !important; }
  #urgencyBanner > div:first-child span:last-child { font-size: 0.65rem !important; font-weight: 700 !important; }
  #urgencyBanner > div { gap: 0.2rem !important; }
  #urgencyBanner > div:last-child { font-size: 0.6rem !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-end !important; flex-shrink: 0 !important; gap: 0.2rem !important; }
  #urgencyBanner > div:last-child span { padding: 0.1rem 0.3rem !important; white-space: nowrap !important; }
}

@media (max-width: 360px) {
  #urgencyBanner { padding: 0.35rem 0.5rem !important; gap: 0.3rem !important; }
  #urgencyBanner > div:first-child span:last-child { font-size: 0.6rem !important; }
  #urgencyBanner > div:last-child { font-size: 0.55rem !important; }
  #urgencyBanner > div:last-child span { padding: 0.08rem 0.25rem !important; }
}
/* Desktop Dropdown Menu */ .desktop-nav-dropdown { position: relative; display: inline-block; } .desktop-dropdown-trigger { padding: 0.5rem 0.8rem !important; font-weight: 700 !important; font-size: 0.9rem !important; cursor: pointer !important; background: rgba(102, 126, 234, 0.08) !important; border: 1px solid rgba(102, 126, 234, 0.2) !important; border-radius: 6px !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; transition: all 0.2s ease !important; } .desktop-dropdown-trigger:hover { background: rgba(254, 87, 66, 0.12) !important; border-color: #fe5742 !important; color: #fe5742 !important; } /* Show dropdown on hover */ .desktop-nav-dropdown:hover .desktop-dropdown-trigger { background: rgba(254, 87, 66, 0.12) !important; border-color: #fe5742 !important; color: #fe5742 !important; } .desktop-nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } .desktop-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: white; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); min-width: 240px; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; margin-top: 0px; } .desktop-nav-dropdown:hover .desktop-dropdown-menu { max-height: 600px; opacity: 1; pointer-events: auto; } .desktop-dropdown-item { display: block !important; width: 100% !important; padding: 0.85rem 1.2rem !important; border: none !important; background: transparent !important; color: #555 !important; font-weight: 500 !important; cursor: pointer !important; text-align: left !important; font-size: 0.95rem !important; transition: all 0.25s ease !important; border-bottom: 1px solid #f5f5f5 !important; } .desktop-dropdown-item:last-child { border-bottom: none !important; } .desktop-dropdown-item:hover { background: rgba(254, 87, 66, 0.1) !important; color: #fe5742 !important; padding-left: 1.5rem !important; } .desktop-dropdown-item.nav-active { background: linear-gradient(135deg, rgba(254, 87, 66, 0.15) 0%, rgba(254, 87, 66, 0.08) 100%) !important; color: #fe5742 !important; font-weight: 700 !important; border-left: 4px solid #fe5742 !important; padding-left: calc(1.2rem - 4px) !important; } .desktop-dropdown-trigger.open, .desktop-dropdown-trigger.has-active { background: rgba(254, 87, 66, 0.15) !important; border-color: #fe5742 !important; color: #fe5742 !important; } .dropdown-arrow { font-size: 0.7rem !important; transition: transform 0.3s ease !important; display: inline-block !important; } .desktop-nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } /* Desktop Navigation Container */ #stickyNav { overflow: visible !important; } #desktopNav { overflow: visible !important; } .desktop-nav-dropdown { z-index: 9998 !important; } @media (max-width: 768px) { .scroll-nav-item { font-size: 0.75rem !important; padding: 0.4rem 0.6rem !important; } .scroll-nav-item.nav-active::after { height: 2px; width: 20px; bottom: -8px; } /* Hide dropdown menus on mobile */ .desktop-dropdown-menu { display: none !important; } /* Hide desktop nav on mobile */ #desktopNav { display: none !important; } }

.hero-video-container { width: 100%; max-width: 100%; margin: 0 auto; animation: fadeInDown 0.8s ease; } .hero-video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 40px rgba(254, 87, 66,0.2); background: #111; contain: layout paint; -webkit-transform: translateZ(0); transform: translateZ(0); } .hero-video-wrapper iframe, .hero-video-wrapper #heroYTPlayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px; } .hero-content { padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; animation: fadeInUp 0.8s ease 0.2s backwards; } .hero-badge { display: inline-block; background: rgba(254, 87, 66,0.15); color: #fe5742; padding: clamp(0.4rem, 1vw, 0.6rem) clamp(1rem, 2vw, 1.5rem); border-radius: 50px; font-size: clamp(0.7rem, 1.5vw, 0.85rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: clamp(1rem, 2vw, 1.5rem); border: 1px solid #fe5742; animation: pulse 2s ease-in-out infinite; } .hero-headline { font-size: clamp(2.2rem, 8vw, 4.5rem); font-weight: 800; color: #111; margin: 0 0 clamp(0.8rem, 2vw, 1.2rem) 0; line-height: 1.1; letter-spacing: -1px; } .hero-headline-accent { color: #fe5742; } .hero-subheadline { font-size: clamp(1rem, 3vw, 1.4rem); color: #666; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0; line-height: 1.5; max-width: 800px; margin-left: auto; margin-right: auto; } .hero-benefits { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.5vw, 1rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0; max-width: 700px; margin-left: auto; margin-right: auto; } .benefit-item { display: flex; align-items: center; gap: clamp(0.6rem, 1.5vw, 1rem); font-size: clamp(0.9rem, 2vw, 1.05rem); color: #111; font-weight: 600; animation: slideIn 0.6s ease backwards; } .benefit-item:nth-child(1) { animation-delay: 0.3s; } .benefit-item:nth-child(2) { animation-delay: 0.4s; } .benefit-item:nth-child(3) { animation-delay: 0.5s; } .benefit-item:nth-child(4) { animation-delay: 0.6s; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .hero-cta-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 40vw, 200px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); max-width: 500px; margin: clamp(2rem, 4vw, 3rem) auto 0; animation: fadeInUp 0.8s ease 0.4s backwards; } .hero-cta-primary { padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.5rem, 3vw, 2rem); background: linear-gradient(135deg, #fe5742 0%, #ff5a47 100%); color: white; border: none; border-radius: 8px; font-size: clamp(0.85rem, 1.8vw, 1rem); font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 16px rgba(254, 87, 66,0.3); text-transform: uppercase; letter-spacing: 0.5px; } .hero-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(254, 87, 66,0.4); } .hero-cta-secondary { padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.5rem, 3vw, 2rem); background: white; color: #fe5742; border: 2px solid #fe5742; border-radius: 8px; font-size: clamp(0.85rem, 1.8vw, 1rem); font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; } .hero-cta-secondary:hover { background: #fe5742; color: white; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(254, 87, 66,0.3); } .hero-trust-signals { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; margin: clamp(2.5rem, 5vw, 3.5rem) 0; padding: clamp(1.5rem, 3vw, 2rem); background: rgba(254, 87, 66,0.05); border-radius: 12px; animation: fadeInUp 0.8s ease 0.5s backwards; } .trust-signal { display: flex; align-items: center; gap: 0.5rem; font-size: clamp(0.8rem, 1.6vw, 0.95rem); font-weight: 600; color: #111; } .trust-signal-icon { font-size: clamp(1.2rem, 2.5vw, 1.5rem); } .scroll-indicator { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 22vw, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .metric-card { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; padding: clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; animation: slideUp 0.8s ease-out forwards; } /* METRIC-SPECIFIC COLOR SCHEMES */ /* Apps Built - Blue Theme */ .metric-card:nth-child(1) { border-top: 3px solid #3b82f6; background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), rgba(255, 255, 255, 0.1); } .metric-card:nth-child(1) .metric-value { color: #60a5fa; text-shadow: 0 0 20px rgba(96, 165, 250, 0.4); } .metric-card:nth-child(1) .metric-progress-bar { background: linear-gradient(90deg, #3b82f6, #60a5fa); } .metric-card:nth-child(1):hover { border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(255, 255, 255, 0.12) 100%), rgba(255, 255, 255, 0.15); } /* Happy Developers - Purple Theme */ .metric-card:nth-child(2) { border-top: 3px solid #a855f7; background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), rgba(255, 255, 255, 0.1); } .metric-card:nth-child(2) .metric-value { color: #d8b4fe; text-shadow: 0 0 20px rgba(216, 180, 254, 0.4); } .metric-card:nth-child(2) .metric-progress-bar { background: linear-gradient(90deg, #a855f7, #d8b4fe); } .metric-card:nth-child(2):hover { border-color: rgba(216, 180, 254, 0.6); box-shadow: 0 20px 40px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(255, 255, 255, 0.12) 100%), rgba(255, 255, 255, 0.15); } /* Years Experience - Emerald Theme */ .metric-card:nth-child(3) { border-top: 3px solid #10b981; background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), rgba(255, 255, 255, 0.1); } .metric-card:nth-child(3) .metric-value { color: #6ee7b7; text-shadow: 0 0 20px rgba(110, 231, 183, 0.4); } .metric-card:nth-child(3) .metric-progress-bar { background: linear-gradient(90deg, #10b981, #6ee7b7); } .metric-card:nth-child(3):hover { border-color: rgba(110, 231, 183, 0.6); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(255, 255, 255, 0.12) 100%), rgba(255, 255, 255, 0.15); } /* Success Rate - Gold Theme */ .metric-card:nth-child(4) { border-top: 3px solid #f59e0b; background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), rgba(255, 255, 255, 0.1); } .metric-card:nth-child(4) .metric-value { color: #fbbf24; text-shadow: 0 0 20px rgba(251, 191, 36, 0.4); } .metric-card:nth-child(4) .metric-progress-bar { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .metric-card:nth-child(4):hover { border-color: rgba(251, 191, 36, 0.6); box-shadow: 0 20px 40px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(255, 255, 255, 0.12) 100%), rgba(255, 255, 255, 0.15); } .metric-card:nth-child(1) { animation-delay: 0s; } .metric-card:nth-child(2) { animation-delay: 0.1s; } .metric-card:nth-child(3) { animation-delay: 0.2s; } .metric-card:nth-child(4) { animation-delay: 0.3s; } .metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); opacity: 0; transition: opacity 0.3s ease; } /* Default hover for older browsers */ @supports not (background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(255, 255, 255, 0.12) 100%)) { .metric-card:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); } } .metric-card:hover::before { opacity: 1; } @media (hover: none) { .metric-card:active { transform: translateY(-4px) scale(1.01); } } .metric-icon { font-size: clamp(2.5rem, 6vw, 3.5rem); margin-bottom: clamp(0.75rem, 1.5vw, 1rem); display: block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); } /* Icon color glows */ .metric-card:nth-child(1) .metric-icon { filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.5)); } .metric-card:nth-child(2) .metric-icon { filter: drop-shadow(0 0 15px rgba(216, 180, 254, 0.5)); } .metric-card:nth-child(3) .metric-icon { filter: drop-shadow(0 0 15px rgba(110, 231, 183, 0.5)); } .metric-card:nth-child(4) .metric-icon { filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.5)); } .metric-card:hover .metric-icon { transform: scale(1.2) rotate(12deg); } .metric-value { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; color: white; margin: clamp(0.5rem, 1vw, 0.75rem) 0; line-height: 1; letter-spacing: -1px; } .metric-value-unit { font-size: 0.6em; opacity: 0.9; margin-left: 0.15em; } .metric-label { margin: clamp(0.75rem, 1.5vw, 1rem) 0 0; font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: rgba(255, 255, 255, 0.98); font-weight: 700; line-height: 1.3; } .metric-description { margin: clamp(0.35rem, 0.8vw, 0.5rem) 0 0; font-size: clamp(0.75rem, 1.4vw, 0.85rem); color: rgba(255, 255, 255, 0.8); font-weight: 500; line-height: 1.4; } /* Progress Bar */ .metric-progress { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; margin-top: clamp(0.75rem, 1.5vw, 1rem); overflow: hidden; } .metric-progress-bar { height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); border-radius: 2px; animation: progressFill 2s ease-out forwards; } .metric-card:nth-child(1) .metric-progress-bar { width: 100%; animation-delay: 0.5s; } .metric-card:nth-child(2) .metric-progress-bar { width: 95%; animation-delay: 0.6s; } .metric-card:nth-child(3) .metric-progress-bar { width: 100%; animation-delay: 0.7s; } .metric-card:nth-child(4) .metric-progress-bar { width: 99%; animation-delay: 0.8s; } @keyframes progressFill { from { width: 0 !important; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Mobile optimization */ @media (max-width: 480px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } .metric-card { padding: clamp(1.25rem, 2.5vw, 1.75rem); } } @media (min-width: 481px) and (max-width: 768px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } }

.logo-carousel-wrapper { position: relative; width: 100%; overflow: hidden; border-radius: 16px; } .logo-carousel { display: flex; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(2rem, 3vw, 2.5rem); background: white; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(254, 87, 66,0.3) transparent; } .logo-carousel::-webkit-scrollbar { height: 6px; } .logo-carousel::-webkit-scrollbar-track { background: transparent; } .logo-carousel::-webkit-scrollbar-thumb { background: rgba(254, 87, 66,0.3); border-radius: 3px; } .logo-carousel::-webkit-scrollbar-thumb:hover { background: rgba(254, 87, 66,0.5); } .logo-item { flex: 0 0 clamp(140px, 20vw, 180px); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 2vw, 1.5rem); background: linear-gradient(135deg, rgba(254, 87, 66,0.03) 0%, rgba(254, 87, 66,0.01) 100%); border: 2px solid rgba(254, 87, 66,0.08); border-radius: 12px; transition: all 0.3s ease; min-height: 120px; cursor: pointer; position: relative; } .logo-item:hover { border-color: #fe5742; box-shadow: 0 8px 24px rgba(254, 87, 66,0.15); transform: translateY(-4px); background: linear-gradient(135deg, rgba(254, 87, 66,0.08) 0%, rgba(254, 87, 66,0.04) 100%); } .logo-item-content { text-align: center; width: 100%; } .logo-icon { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 0.5rem; display: block; transition: transform 0.3s ease; } .logo-item:hover .logo-icon { transform: scale(1.15) rotate(5deg); } .logo-name { font-size: clamp(0.75rem, 1.5vw, 0.9rem); font-weight: 700; color: #111; margin: 0; line-height: 1.3; } .carousel-controls { display: flex; justify-content: center; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2rem); } .carousel-btn { width: 44px; height: 44px; border: 2px solid rgba(254, 87, 66,0.2); background: white; border-radius: 8px; cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .carousel-btn:hover { border-color: #fe5742; background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%); color: white; transform: scale(1.1); } @media (max-width: 768px) { .carousel-btn { width: 40px; height: 40px; font-size: 1rem; } }

.case-study-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(254, 87, 66,0.12); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(254, 87, 66,0.08); display: flex; flex-direction: column; height: 100%; } .case-study-card:hover { box-shadow: 0 16px 40px rgba(254, 87, 66,0.18); transform: translateY(-6px); border-color: rgba(254, 87, 66,0.15); } /* Mobile hover state */ @media (hover: none) { .case-study-card:active { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(254, 87, 66,0.15); } } .case-study-header { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 100%); border-bottom: 1px solid #f0f0f0; transition: all 0.3s ease; } /* Category-specific header backgrounds */ .case-study-card:nth-child(1) .case-study-header { background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(255,255,255,0.99) 100%); } .case-study-card:nth-child(2) .case-study-header { background: linear-gradient(135deg, rgba(139, 92, 246, 0.02) 0%, rgba(255,255,255,0.99) 100%); } .case-study-card:nth-child(3) .case-study-header { background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(255,255,255,0.99) 100%); } .case-study-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(254, 87, 66,0.1); color: #fe5742; padding: 0.4rem 0.95rem; border-radius: 8px; font-size: clamp(0.65rem, 1.2vw, 0.8rem); font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.6px; backdrop-filter: blur(10px); border: 1px solid rgba(254, 87, 66,0.15); transition: all 0.3s ease; } .case-study-title { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; color: #111; margin: 0; line-height: 1.35; letter-spacing: -0.3px; } .case-study-subtitle { display: block; font-size: clamp(0.8rem, 1.5vw, 0.9rem); color: #666; margin: 0.4rem 0 0 0; font-weight: 500; } .case-study-content { padding: clamp(1.25rem, 2.5vw, 1.75rem); flex: 1; display: flex; flex-direction: column; } .case-study-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); margin-bottom: clamp(1rem, 2vw, 1.5rem); } /* Mobile: 2 columns for metrics */ @media (max-width: 480px) { .case-study-metric-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; } } /* Tablet: 3 columns */ @media (min-width: 481px) and (max-width: 768px) { .case-study-metric-row { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .metric-item { text-align: center; padding: clamp(0.5rem, 1vw, 0.75rem); border-radius: 10px; background: rgba(254, 87, 66,0.03); transition: all 0.3s ease; } .metric-item:hover { background: rgba(254, 87, 66,0.08); } .metric-value { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; color: #fe5742; margin: 0; line-height: 1.2; } .metric-label { font-size: clamp(0.65rem, 1.2vw, 0.85rem); color: #666; margin: 0.35rem 0 0 0; font-weight: 600; line-height: 1.3; } .case-study-details { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.25rem; padding: 1rem; background: #fafafa; border-radius: 10px; border: 1px solid #f0f0f0; } .detail-section { display: block; } .detail-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #111; margin: 0 0 0.25rem 0; } .detail-content { font-size: 0.85rem; color: #555; margin: 0; line-height: 1.5; } .tech-stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; } .tech-badge { display: inline-block; padding: 0.25rem 0.65rem; font-size: 0.72rem; font-weight: 700; border-radius: 6px; background: rgba(254, 87, 66,0.1); color: #fe5742; border: 1px solid rgba(254, 87, 66,0.2); } .testimonial-section { background: rgba(254, 87, 66,0.06); padding: clamp(1rem, 2vw, 1.5rem); border-radius: 12px; border-left: 3px solid #fe5742; margin-top: auto; transition: all 0.3s ease; } .testimonial-section:hover { background: rgba(254, 87, 66,0.1); } /* CATEGORY-SPECIFIC STYLING */ /* E-COMMERCE (Card 1) - Blue Theme */ .case-study-card:nth-child(1) { border-top: 4px solid #3b82f6; } .case-study-card:nth-child(1) .case-study-badge { background: rgba(59, 130, 246, 0.12); color: #3b82f6; } .case-study-card:nth-child(1) .metric-value { color: #3b82f6; } .case-study-card:nth-child(1) .metric-item { background: rgba(59, 130, 246, 0.06); } .case-study-card:nth-child(1) .metric-item:hover { background: rgba(59, 130, 246, 0.12); } .case-study-card:nth-child(1) .testimonial-section { background: rgba(59, 130, 246, 0.08); border-left-color: #3b82f6; } .case-study-card:nth-child(1) .testimonial-section:hover { background: rgba(59, 130, 246, 0.14); } .case-study-card:nth-child(1):hover { border-color: rgba(59, 130, 246, 0.2); box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15); } /* B2B SERVICES (Card 2) - Purple Theme */ .case-study-card:nth-child(2) { border-top: 4px solid #8b5cf6; } .case-study-card:nth-child(2) .case-study-badge { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; } .case-study-card:nth-child(2) .metric-value { color: #8b5cf6; } .case-study-card:nth-child(2) .metric-item { background: rgba(139, 92, 246, 0.06); } .case-study-card:nth-child(2) .metric-item:hover { background: rgba(139, 92, 246, 0.12); } .case-study-card:nth-child(2) .testimonial-section { background: rgba(139, 92, 246, 0.08); border-left-color: #8b5cf6; } .case-study-card:nth-child(2) .testimonial-section:hover { background: rgba(139, 92, 246, 0.14); } .case-study-card:nth-child(2):hover { border-color: rgba(139, 92, 246, 0.2); box-shadow: 0 16px 40px rgba(139, 92, 246, 0.15); } /* EDUCATION (Card 3) - Green Theme */ .case-study-card:nth-child(3) { border-top: 4px solid #10b981; } .case-study-card:nth-child(3) .case-study-badge { background: rgba(16, 185, 129, 0.12); color: #10b981; } .case-study-card:nth-child(3) .metric-value { color: #10b981; } .case-study-card:nth-child(3) .metric-item { background: rgba(16, 185, 129, 0.06); } .case-study-card:nth-child(3) .metric-item:hover { background: rgba(16, 185, 129, 0.12); } .case-study-card:nth-child(3) .testimonial-section { background: rgba(16, 185, 129, 0.08); border-left-color: #10b981; } .case-study-card:nth-child(3) .testimonial-section:hover { background: rgba(16, 185, 129, 0.14); } .case-study-card:nth-child(3):hover { border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 16px 40px rgba(16, 185, 129, 0.15); } .case-study-card:nth-child(1) .tech-badge { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border-color: rgba(59, 130, 246, 0.25); } .case-study-card:nth-child(2) .tech-badge { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.25); } .case-study-card:nth-child(3) .tech-badge { background: rgba(16, 185, 129, 0.1); color: #10b981; border-color: rgba(16, 185, 129, 0.25); } .testimonial-text { font-size: clamp(0.85rem, 1.6vw, 0.95rem); color: #333; margin: 0 0 0.85rem 0; line-height: 1.75; font-style: italic; font-weight: 500; letter-spacing: 0.3px; } .testimonial-author { font-weight: 700; color: #111; margin: 0; font-size: clamp(0.8rem, 1.5vw, 0.9rem); letter-spacing: 0.2px; } .case-study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 3vw, 2.5rem); } /* Mobile: 1 column */ @media (max-width: 480px) { .case-study-grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2rem); } } /* Tablet: 1-2 columns based on content */ @media (min-width: 481px) and (max-width: 768px) { .case-study-grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 3vw, 2.25rem); } } /* Desktop: 3 columns */ @media (min-width: 769px) { .case-study-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 2.5vw, 2.75rem); } } /* CTA Button Responsive Styling */ .case-study-cta-btn { padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem); background: white; color: #fe5742; border: none; border-radius: 8px; font-weight: 700; font-size: clamp(0.9rem, 1.8vw, 1.05rem); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; white-space: nowrap; min-height: 44px; display: flex; align-items: center; justify-content: center; } .case-study-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); } .case-study-cta-btn:active { transform: translateY(0); box-shadow: 0 6px 12px rgba(0,0,0,0.1); } @media (max-width: 480px) { .case-study-cta-btn { width: 100%; max-width: 90vw; } }

.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(3rem, 8vw, 4rem); } @media (max-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .testimonials-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: clamp(1.5rem, 3vw, 2rem); scroll-behavior: smooth; padding: clamp(1rem, 2vw, 1.5rem) 0; -webkit-overflow-scrolling: touch; } .testimonials-grid::-webkit-scrollbar { height: 6px; } .testimonials-grid::-webkit-scrollbar-track { background: rgba(254, 87, 66,0.1); border-radius: 10px; } .testimonials-grid::-webkit-scrollbar-thumb { background: #fe5742; border-radius: 10px; } .testimonial-card { flex: 0 0 100%; scroll-snap-align: start; animation: autoSlide 12s infinite; } .testimonial-card:nth-child(1) { animation-delay: 0s; } .testimonial-card:nth-child(2) { animation-delay: 4s; } .testimonial-card:nth-child(3) { animation-delay: 8s; } } @keyframes autoSlide { 0% { transform: translateX(0); } 25% { transform: translateX(0); } 33% { transform: translateX(-100vw); } 58% { transform: translateX(-100vw); } 66% { transform: translateX(-200vw); } 91% { transform: translateX(-200vw); } 100% { transform: translateX(0); } }

@keyframes scrollLeft { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes scrollRight { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .marquee-row { animation-play-state: running !important; transition: animation-play-state 0.3s ease; } .marquee-row:hover { animation-play-state: paused !important; } .marquee-card { background: white; border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 4px 20px rgba(254, 87, 66,0.15); border-top: 4px solid var(--accent-color); flex-shrink: 0; width: clamp(260px, 23vw, 320px); text-align: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; position: relative; overflow: hidden; } .marquee-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #fe5742, transparent); transform: scaleX(0); transition: transform 0.4s ease; } .marquee-card:hover::before { transform: scaleX(1); } .marquee-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 16px 40px rgba(254, 87, 66,0.25); } .marquee-card-avatar { font-size: clamp(2.5rem, 6vw, 3.5rem); margin: 0 auto clamp(1rem, 2vw, 1.5rem); display: block; transition: transform 0.4s ease; } .marquee-card:hover .marquee-card-avatar { transform: scale(1.15) rotate(5deg); } .marquee-card-name { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 700; color: var(--text-primary); margin: clamp(0.5rem, 1vw, 0.75rem) 0; transition: color 0.3s ease; } .marquee-card:hover .marquee-card-name { color: #fe5742; } .marquee-card-role { font-size: clamp(0.8rem, 1.8vw, 0.9rem); color: var(--accent-color); font-weight: 600; margin: clamp(0.25rem, 0.5vw, 0.5rem) 0 clamp(0.75rem, 2vw, 1rem); } .marquee-card-quote { font-size: clamp(0.85rem, 1.8vw, 0.95rem); color: var(--text-secondary); margin: 0 0 clamp(0.75rem, 2vw, 1rem); line-height: 1.7; font-style: italic; min-height: clamp(50px, 10vw, 70px); display: flex; align-items: center; justify-content: center; } .marquee-card-rating { font-size: clamp(0.9rem, 2vw, 1rem); color: #ffc107; letter-spacing: 0.15em; }

.credentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 250px), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); } /* Desktop: 2 rows × 4 columns layout */ @media (min-width: 769px) { .credentials-grid { grid-template-columns: repeat(4, 1fr); gap: clamp(1.8rem, 2.5vw, 2.5rem); } } .badge-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1.5rem, 2.5vw, 2rem); background: white; border-radius: 12px; border: 2px solid #f0f0f0; transition: all 0.3s ease; cursor: pointer; min-height: clamp(120px, 15vw, 160px); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .badge-item:hover { border-color: #fe5742; box-shadow: 0 8px 24px rgba(254, 87, 66,0.15); transform: translateY(-4px); background: linear-gradient(135deg, rgba(254, 87, 66,0.02) 0%, transparent 100%); } /* Extra Small Devices (320px-480px) - 2 columns */ @media (max-width: 480px) { .credentials-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } } /* Small Devices (481px-768px) - 2-3 columns */ @media (min-width: 481px) and (max-width: 768px) { .credentials-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); } } .badge-icon { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.75rem; display: block; } .badge-name { font-size: clamp(0.9rem, 1.8vw, 1rem); font-weight: 700; color: #111; text-align: center; margin: 0; } .badge-category { font-size: clamp(0.75rem, 1.4vw, 0.85rem); color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin: 0.3rem 0 0 0; font-weight: 600; } /* Stats bar */ .credentials-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(2rem, 4vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2rem); background: linear-gradient(135deg, rgba(254, 87, 66,0.04) 0%, transparent 100%); border-radius: 12px; border-top: 2px solid rgba(254, 87, 66,0.1); } /* Extra Small Devices (320px-480px) */ @media (max-width: 480px) { .credentials-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 1rem 0.75rem; margin-top: 1.5rem; } } /* Small Devices (481px-768px) */ @media (min-width: 481px) and (max-width: 768px) { .credentials-stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding: 1.75rem 1.25rem; margin-top: 2rem; } } /* Tablets & Desktop (769px+) */ @media (min-width: 769px) { .credentials-stats { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } } .stat-item { text-align: center; padding: clamp(1rem, 2vw, 1.5rem); border-radius: 10px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(254, 87, 66,0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: slideInUp 0.6s ease-out forwards; } .stat-item:nth-child(1) { animation-delay: 0s; } .stat-item:nth-child(2) { animation-delay: 0.1s; } .stat-item:nth-child(3) { animation-delay: 0.2s; } .stat-item:nth-child(4) { animation-delay: 0.3s; } .stat-item:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(254, 87, 66,0.15); background: rgba(255, 255, 255, 0.9); } /* Mobile hover state optimization */ @media (hover: none) { .stat-item:active { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(254, 87, 66,0.12); } } .stat-number { font-size: clamp(1.4rem, 3.5vw, 2.4rem); font-weight: 800; color: #fe5742; margin: 0; line-height: 1.2; } .stat-text { font-size: clamp(0.75rem, 1.4vw, 0.95rem); color: #666; margin: 0.5rem 0 0 0; font-weight: 600; line-height: 1.3; }

.press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 100%, 360px), 1fr)); gap: clamp(2rem, 3vw, 2.5rem); } .press-card { background: white; border-radius: 12px; padding: clamp(1.5rem, 3vw, 2rem); box-shadow: 0 8px 24px rgba(254, 87, 66,0.12); transition: all 0.3s ease; border: none; display: flex; flex-direction: column; } .press-card:hover { box-shadow: 0 12px 32px rgba(254, 87, 66,0.18); transform: translateY(-4px); } .press-header { padding: 0; background: none; border-bottom: none; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .press-icon { font-size: clamp(1.6rem, 3.5vw, 2rem); flex-shrink: 0; } .press-publication { font-size: clamp(0.7rem, 1.4vw, 0.8rem); color: #999; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; } .press-name { font-size: clamp(0.85rem, 1.8vw, 0.95rem); font-weight: 700; color: #111; margin: 0; } .press-content { padding: 0; flex: 1; display: flex; flex-direction: column; } .press-title { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 700; color: #111; margin: 0 0 0.75rem 0; line-height: 1.4; } .press-description { display: none; } .press-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid #f0f0f0; margin-top: auto; } .press-date { font-size: clamp(0.7rem, 1.4vw, 0.8rem); color: #999; font-weight: 600; } .press-link { display: inline-flex; align-items: center; gap: 0.4rem; color: #fe5742; font-weight: 700; text-decoration: none; transition: all 0.3s ease; font-size: clamp(0.7rem, 1.4vw, 0.8rem); } .press-link:hover { color: #ff7657; transform: translateX(2px); } .press-category { display: inline-block; background: rgba(254, 87, 66,0.1); color: #fe5742; padding: 0.25rem 0.65rem; border-radius: 4px; font-size: 0.65rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.4px; } .press-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 25vw, 220px), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid rgba(254, 87, 66,0.1); text-align: center; } .press-stat { padding: clamp(1rem, 2vw, 1.25rem); background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(254, 87, 66,0.1); } .press-stat-number { font-size: clamp(1.6rem, 3.5vw, 2rem); font-weight: 800; color: #fe5742; margin: 0; } .press-stat-label { font-size: clamp(0.75rem, 1.6vw, 0.85rem); color: #666; margin: 0.4rem 0 0 0; font-weight: 600; }

footer a { transition: color 0.2s ease; } footer a:hover { color: #ff8866; } footer a:focus { outline: 2px solid #ff7755; outline-offset: 2px; border-radius: 2px; }

@media (max-width: 480px) { .mobile-cta-btn { font-size: 0.75rem; padding: 0.6rem 0.5rem; min-height: 42px; } .mobile-cta-bar { padding: 0.6rem 0.5rem; } .mobile-cta-text { display: none; } }

/* === CRITICAL FIX: Hover Effects via CSS (replacing inline handlers) === */

/* Trust badges hover effect */
.trust-badge {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.trust-badge:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 48px rgba(254, 87, 66, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Problem and solution cards hover */
.problem-card, .solution-card {
  transition: all 0.3s ease !important;
}

.problem-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 32px rgba(254, 87, 66, 0.2) !important;
}

.solution-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(254, 87, 66, 0.2) !important;
}

/* Developer section button hover */
.developer-call-btn {
  transition: all 0.3s ease !important;
}

.developer-call-btn:hover {
  box-shadow: 0 8px 25px rgba(254, 87, 66, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Course modules hover */
.module-item {
  transition: all 0.3s ease !important;
}

.module-item:hover {
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.15) !important;
  transform: translateX(4px) !important;
}

/* Testimonial cards hover */
.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
}

/* Press cards hover */
.press-card {
  transition: all 0.3s ease !important;
}

.press-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 32px rgba(254, 87, 66, 0.2) !important;
}

/* Form input focus effects */
input[type="email"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.1) !important;
  border-color: #fe5742 !important;
}

/* Button hover consistency */
button[type="button"]:not([disabled]):hover,
button[type="submit"]:not([disabled]):hover {
  transform: translateY(-2px) !important;
}

/* Responsive hover states for touch devices */
@media (hover: none) and (pointer: coarse) {
  .trust-badge:hover,
  .problem-card:hover,
  .solution-card:hover,
  .testimonial-card:hover,
  .press-card:hover {
    transform: none !important;
  }
}


/* === Form Validation Styles === */

input.is-valid,
textarea.is-valid,
select.is-valid {
  border-color: #4caf50 !important;
  background-color: #f1f8f5 !important;
}

input.is-valid:focus,
textarea.is-valid:focus,
select.is-valid:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: #d63031 !important;
  background-color: #fdeee9 !important;
}

input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
  border-color: #d63031 !important;
  box-shadow: 0 0 0 3px rgba(214, 48, 49, 0.1) !important;
}

/* Field error indicator */
.form-field-error {
  display: inline-block;
  color: #d63031;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  font-weight: 500;
}


/* === Accessibility: Skip-to-content link === */
.skip-to-content {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
}

.skip-to-content:focus {
  top: 0 !important;
  z-index: 10000 !important;
}

/* =========================================================
   MODERN HYBRID FOMO TOPBAR & STICKY NAVBAR (Desktop/Tablet/Mobile)
   ========================================================= */
#urgencyBanner.topbar-fomo {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  background: #fe5742 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 0 clamp(0.6rem, 2vw, 1.5rem) !important;
  z-index: 1001 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
  user-select: none;
}

.topbar-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  width: 100%;
  max-width: 1500px;
  white-space: nowrap;
  font-size: clamp(0.76rem, 1.05vw, 0.88rem);
}

.topbar-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
  padding: 0.18rem 0.6rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.topbar-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: liveDotPulse 1.6s infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes liveDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.75); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.topbar-hook-text {
  color: #f8fafc;
  font-weight: 500;
}

.topbar-hook-text del {
  color: #f87171;
  font-weight: 600;
  opacity: 0.9;
}

.topbar-gold {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

.topbar-sub-pill {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.topbar-divider {
  opacity: 0.3;
  color: #94a3b8;
}

.topbar-course-hook {
  color: #e2e8f0;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.topbar-course-hook:hover {
  background: rgba(255, 255, 255, 0.1);
}

.topbar-timer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 0.16rem 0.6rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.topbar-timer-label {
  font-size: 0.7rem;
  color: #cbd5e1;
  text-transform: uppercase;
  font-weight: 600;
}

.topbar-timer-boxes {
  font-family: 'Inter', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.8rem;
  color: #fbbf24;
  letter-spacing: 0.5px;
}

.topbar-cta-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
  box-shadow: 0 2px 12px rgba(254, 87, 66, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

#urgencyBanner.topbar-fomo:hover .topbar-cta-btn {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(254, 87, 66, 0.75);
}

.topbar-cta-btn::after,
.topbar-mobile-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  animation: topbarShimmer 3.2s infinite;
}

@keyframes topbarShimmer {
  0% { left: -120%; }
  45%, 100% { left: 160%; }
}

/* Mobile Flipper Layout */
.topbar-mobile {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.topbar-flip-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.topbar-flip-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease;
  width: 100%;
}

.topbar-flip-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.topbar-mobile-text {
  font-size: clamp(0.74rem, 3.2vw, 0.85rem);
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex: 1;
}

.topbar-mobile-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.24rem 0.65rem;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(254, 87, 66, 0.45);
}

/* Sticky Navbar Modern Enhancements */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  padding-top: 98px !important;
}

#stickyNav {
  position: fixed !important;
  top: 44px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.nav-main-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem clamp(0.6rem, 2vw, 1.75rem);
  box-sizing: border-box;
}

@media (min-width: 769px) {
  body {
    padding-top: 98px !important;
  }
  #stickyNav {
    position: fixed !important;
    top: 44px !important;
    min-height: 54px !important;
  }
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.logo-img {
  height: 38px;
  width: 38px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(254, 87, 66,0.25);
}

.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text {
  font-weight: 800;
  font-size: 1.02rem;
  color: #111;
  letter-spacing: -0.3px;
}

.logo-accent {
  color: #fe5742;
}

.logo-subbadge {
  font-size: 0.64rem;
  font-weight: 700;
  color: #fe5742;
  letter-spacing: 0.2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.logo-subbadge .topbar-live-dot {
  width: 6px;
  height: 6px;
}

/* Nav Item Micro-Tags */
.nav-item-tag {
  font-size: 0.62rem;
  font-weight: 900;
  padding: 0.12rem 0.42rem;
  border-radius: 4px;
  letter-spacing: 0.2px;
  margin-left: 0.3rem;
  display: inline-block;
  vertical-align: middle;
}

.tag-deal {
  background: rgba(254, 87, 66, 0.12);
  color: #fe5742;
  border: 1px solid rgba(254, 87, 66, 0.25);
}

.tag-speed {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.tag-demo {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.tag-discount {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* Enhanced Dropdown Menus */
.desktop-dropdown-menu {
  min-width: 280px !important;
  padding: 0.4rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15) !important;
}

.desktop-dropdown-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  margin-bottom: 0.2rem !important;
  transition: all 0.2s ease !important;
}

.desktop-dropdown-item:last-child {
  margin-bottom: 0 !important;
}

.desktop-dropdown-item:hover {
  background: rgba(254, 87, 66, 0.08) !important;
  padding-left: 0.85rem !important;
  transform: translateX(3px) !important;
}

.dd-item-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #0f172a;
}

.desktop-dropdown-item:hover .dd-item-title {
  color: #fe5742;
}

.dd-item-desc {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.3;
}

.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nav-cta-course {
  background: rgba(254, 87, 66, 0.08);
  color: #fe5742;
  border: 1.5px solid rgba(254, 87, 66, 0.35);
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.nav-cta-course:hover {
  background: #fe5742;
  color: #fff;
  border-color: #fe5742;
}

.nav-cta-primary {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #fff;
  border: none;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.35);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.nav-cta-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: topbarShimmer 3.2s infinite;
}

.nav-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.5);
}

.nav-cta-short {
  display: none;
}

/* Mobile Tier 2 Horizontal Chips Bar */
.nav-mobile-chips {
  display: none;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.25rem 0.6rem 0.35rem;
  gap: 0.35rem;
  background: rgba(248, 250, 252, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav-mobile-chips::-webkit-scrollbar {
  display: none;
}

.nav-mobile-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.22rem 0.6rem !important;
  border-radius: 50px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  min-height: auto !important;
}

.nav-mobile-chip.active,
.nav-mobile-chip:active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* Tablet Breakpoint (769px - 1180px) */
@media (min-width: 769px) and (max-width: 1180px) {
  .topbar-course-hook,
  .topbar-divider {
    display: none !important;
  }
  .nav-cta-course {
    display: none !important;
  }
  .nav-cta-full {
    display: none !important;
  }
  .nav-cta-short {
    display: inline !important;
  }
  #desktopNav {
    gap: 0.25rem !important;
  }
  .scroll-nav-item,
  .desktop-dropdown-trigger {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.76rem !important;
  }
  .nav-item-tag {
    display: none !important;
  }
}

/* Mobile Breakpoint (<=768px) */
@media (max-width: 768px) {
  #urgencyBanner.topbar-fomo {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 0.6rem !important;
  }
  .topbar-desktop {
    display: none !important;
  }
  .topbar-mobile {
    display: flex !important;
  }
  #stickyNav {
    position: fixed !important;
    top: 38px !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .nav-main-row {
    padding: 0.25rem 0.6rem !important;
    min-height: 48px;
  }
  .nav-mobile-chips {
    display: none !important;
  }
  body {
    padding-top: 86px !important;
  }
  .logo-link img {
    width: 32px !important;
    height: 32px !important;
  }
  .logo-text {
    font-size: 0.88rem !important;
  }
  .logo-subbadge {
    font-size: 0.58rem !important;
  }
  .nav-cta-course,
  .nav-cta-full {
    display: none !important;
  }
  .nav-cta-short {
    display: inline !important;
  }
  .nav-cta-primary {
    padding: 0.32rem 0.65rem !important;
    font-size: 0.72rem !important;
    min-height: 34px !important;
    border-radius: 6px !important;
  }
  #mobileMenuBtn {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0.2rem !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
  }
}

@media (max-width: 375px) {
  .logo-subbadge {
    display: none !important;
  }
  .logo-link {
    gap: 0.4rem !important;
  }
  .nav-cta-primary {
    padding: 0.28rem 0.5rem !important;
    font-size: 0.68rem !important;
  }
}
    font-size: 0.68rem !important;
  }
}

/* =========================================================
   MODERN SPLIT VSL HERO SECTION (Desktop / Tablet / Mobile)
   ========================================================= */
#heroSection.hero-vsl-section {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  background: radial-gradient(circle at 15% 20%, rgba(254, 87, 66, 0.09) 0%, rgba(255, 255, 255, 0) 48%),
              radial-gradient(circle at 85% 80%, rgba(59, 130, 246, 0.07) 0%, rgba(255, 255, 255, 0) 50%),
              linear-gradient(180deg, #fffaf9 0%, #ffffff 100%) !important;
  padding: clamp(1.25rem, 2.8vw, 2.5rem) clamp(1rem, 3.5vw, 2.5rem) clamp(2rem, 4vw, 3.25rem) !important;
  border-bottom: 1px solid rgba(254, 87, 66, 0.12);
  box-sizing: border-box !important;
}

.hero-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.hero-bg-glow-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -100px;
  background: rgba(254, 87, 66, 0.12);
}

.hero-bg-glow-2 {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -100px;
  background: rgba(251, 191, 36, 0.12);
}

.hero-vsl-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  grid-template-areas:
    "top video"
    "bottom video";
  gap: 1.25rem clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: center;
  box-sizing: border-box;
}

.hero-col-top {
  grid-area: top;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.hero-col-video {
  grid-area: video;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.hero-col-bottom {
  grid-area: bottom;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* Eyebrow Badge */
.hero-eyebrow-wrap {
  margin-bottom: 0.75rem;
  max-width: 100%;
}

.hero-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: #0f172a;
  color: #f8fafc;
  padding: 0.36rem 0.85rem;
  border-radius: 50px;
  font-size: clamp(0.64rem, 1.05vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.3;
}

.hero-eyebrow-badge:hover {
  transform: translateY(-2px);
}

/* Price-Shock Headline */
.hero-headline-vsl {
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.7px;
  margin: 0 0 0.85rem 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hero-kicker {
  display: block;
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.25rem;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.hero-kicker del {
  color: #dc2626;
  font-weight: 800;
  text-decoration-thickness: 2px;
}

.hero-price-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
  max-width: 100%;
}

.hero-price-num {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  white-space: nowrap;
}

.hero-discount-tag {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0f172a;
  font-size: clamp(0.7rem, 1.2vw, 0.88rem);
  font-weight: 900;
  padding: 0.18rem 0.6rem;
  border-radius: 8px;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  vertical-align: middle;
  -webkit-text-fill-color: #0f172a;
  white-space: nowrap;
}

/* Subheadline */
.hero-subheadline-vsl {
  font-size: clamp(0.9rem, 1.3vw, 1.06rem);
  color: #475569;
  line-height: 1.55;
  margin: 0 0 0.9rem 0;
  max-width: 600px;
}

.hero-subheadline-vsl strong {
  color: #0f172a;
  font-weight: 700;
}

/* 3-Pill Value Bar */
.hero-value-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
  max-width: 100%;
}

.hero-value-pill {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #1e293b;
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 700;
  padding: 0.32rem 0.7rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  line-height: 1.25;
}

/* Dual 2-Line High-Velocity CTA Buttons */
.hero-cta-vsl-group {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  width: 100%;
}

.hero-btn-vsl-primary {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.38) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero-btn-vsl-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(254, 87, 66, 0.52) !important;
}

.hero-btn-vsl-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-20deg);
  animation: topbarShimmer 3.5s infinite;
  pointer-events: none;
}

.hero-btn-vsl-secondary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 2px solid #0f172a !important;
  border-radius: 12px !important;
  padding: 0.85rem 0.95rem !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero-btn-vsl-secondary:hover {
  transform: translateY(-3px);
  background: #1e293b !important;
}

.hero-btn-main {
  display: block;
  font-size: clamp(0.86rem, 1.15vw, 1rem);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
}

.hero-btn-sub {
  display: block;
  font-size: clamp(0.66rem, 0.9vw, 0.72rem);
  font-weight: 600;
  opacity: 0.95;
  margin-top: 0.18rem;
  color: #fde68a;
  line-height: 1.2;
}

/* Avatar Stack & Micro-Guarantee Strip */
.hero-micro-proof {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.hero-avatar:first-child {
  margin-left: 0;
}

.hero-proof-text {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #475569;
  min-width: 0;
}

.hero-proof-text strong {
  color: #0f172a;
  font-weight: 800;
}

/* Cinema-Framed Video Card */
.hero-cinema-card {
  background: #0f172a;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-cinema-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem 0.5rem;
  color: #e2e8f0;
  font-size: 0.74rem;
  font-weight: 700;
  min-width: 0;
}

.hero-cinema-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.hero-cinema-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.hero-cinema-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f8fafc;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.hero-cinema-live {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 0.12rem 0.48rem;
  border-radius: 50px;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-cinema-card .hero-video-wrapper {
  border-radius: 9px !important;
  box-shadow: none !important;
  width: 100% !important;
}

.hero-cinema-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.48rem 0.65rem 0.35rem;
  font-size: 0.73rem;
  color: #cbd5e1;
  flex-wrap: wrap;
}

.hero-cinema-footer strong {
  color: #fbbf24;
}

.hero-cinema-cta-link {
  color: #ff7755;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.hero-cinema-cta-link:hover {
  text-decoration: underline;
}

/* Tablet & Mobile Responsive VSL Stack (<=1024px) */
@media (max-width: 1024px) {
  #heroSection.hero-vsl-section {
    padding: 1.25rem 1.25rem 2.25rem !important;
  }

  .hero-vsl-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "video"
      "bottom";
    gap: 0.9rem;
    max-width: 720px;
  }

  .hero-col-top,
  .hero-col-bottom {
    text-align: center;
  }

  .hero-subheadline-vsl {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-value-pills {
    justify-content: center;
  }

  .hero-price-highlight {
    justify-content: center;
  }

  .hero-micro-proof {
    justify-content: center;
    text-align: left;
    margin: 0 auto;
    max-width: 520px;
  }
}

/* All Mobile Devices (<=768px) */
@media (max-width: 768px) {
  #heroSection.hero-vsl-section {
    padding: 0.85rem 0.85rem 1.65rem !important;
  }

  .hero-vsl-container {
    gap: 0.75rem;
    max-width: 100%;
  }

  .hero-eyebrow-wrap {
    margin-bottom: 0.45rem;
  }

  .hero-eyebrow-badge {
    font-size: clamp(0.58rem, 2.5vw, 0.68rem);
    padding: 0.26rem 0.65rem;
    letter-spacing: 0.3px;
    white-space: normal;
    text-align: center;
  }

  .hero-headline-vsl {
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: -0.5px;
    margin-bottom: 0.45rem;
  }

  .hero-kicker {
    font-size: clamp(0.84rem, 3.6vw, 1rem);
    margin-bottom: 0.15rem;
  }

  .hero-discount-tag {
    font-size: clamp(0.66rem, 2.6vw, 0.78rem);
    padding: 0.15rem 0.5rem;
  }

  .hero-subheadline-vsl {
    font-size: clamp(0.82rem, 3.4vw, 0.92rem);
    line-height: 1.45;
    margin-bottom: 0.55rem;
    padding: 0 0.15rem;
  }

  .hero-value-pills {
    gap: 0.35rem;
    margin-bottom: 0.1rem;
  }

  .hero-value-pill {
    font-size: clamp(0.66rem, 2.7vw, 0.74rem);
    padding: 0.24rem 0.55rem;
    border-radius: 6px;
  }

  .hero-cinema-card {
    padding: 5px;
    border-radius: 12px;
  }

  .hero-cinema-topbar {
    padding: 0.32rem 0.5rem 0.4rem;
    font-size: 0.68rem;
  }

  .hero-cinema-live {
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
  }

  #heroUnmuteBtn {
    padding: 10px !important;
  }

  #heroUnmuteBtn span {
    padding: 0.38rem 0.85rem !important;
    font-size: 0.76rem !important;
  }

  .hero-cinema-footer {
    padding: 0.4rem 0.5rem 0.28rem;
    font-size: 0.68rem;
    justify-content: center;
    text-align: center;
    gap: 0.25rem 0.6rem;
  }

  .hero-cta-vsl-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    margin-bottom: 0.65rem;
  }

  .hero-btn-vsl-primary,
  .hero-btn-vsl-secondary {
    padding: 0.72rem 0.85rem !important;
    border-radius: 10px !important;
    min-height: 54px !important;
  }

  .hero-btn-main {
    font-size: clamp(0.85rem, 3.8vw, 0.96rem);
  }

  .hero-btn-sub {
    font-size: clamp(0.64rem, 2.7vw, 0.7rem);
  }

  .hero-micro-proof {
    padding: 0.45rem 0.65rem;
    gap: 0.55rem;
  }

  .hero-avatar {
    width: 25px;
    height: 25px;
    font-size: 0.56rem;
    margin-left: -6px;
  }

  .hero-proof-text {
    font-size: clamp(0.66rem, 2.7vw, 0.73rem);
  }
}

/* Small & Narrow Phones (320px - 390px) */
@media (max-width: 390px) {
  #heroSection.hero-vsl-section {
    padding: 0.65rem 0.65rem 1.35rem !important;
  }

  .hero-eyebrow-badge {
    font-size: 0.56rem;
    padding: 0.24rem 0.5rem;
    gap: 0.3rem;
  }

  .hero-headline-vsl {
    font-size: clamp(1.35rem, 6.4vw, 1.6rem);
  }

  .hero-cinema-dots {
    display: none;
  }

  .hero-cinema-title {
    text-align: left;
    font-size: 0.65rem;
  }

  .hero-value-pill {
    font-size: 0.64rem;
    padding: 0.2rem 0.45rem;
  }

  .hero-micro-proof {
    flex-direction: column;
    text-align: center;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem;
  }
}

/* Mobile Landscape Orientation Optimization */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #heroSection.hero-vsl-section {
    padding: 0.75rem 1rem 1.25rem !important;
  }

  .hero-vsl-container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "top video"
      "bottom video";
    gap: 0.65rem 1.25rem;
  }

  .hero-col-top,
  .hero-col-bottom {
    text-align: left;
  }

  .hero-value-pills,
  .hero-price-highlight {
    justify-content: flex-start;
  }

  .hero-headline-vsl {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
  }

  .hero-subheadline-vsl {
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
  }
}

/* =========================================================
   SKEPTICISM-CRUSHER BENTO TRUST SECTION (Desktop/Tablet/Mobile)
   ========================================================= */
#trustSection.trust-bento-section {
  background: linear-gradient(180deg, #f8fafc 0%, #fff7f5 100%) !important;
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1rem, 3.5vw, 2.5rem) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(254, 87, 66, 0.12);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.trust-bento-container {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* Section Pattern-Interrupt Header */
.trust-bento-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.trust-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(254, 87, 66, 0.1);
  border: 1px solid rgba(254, 87, 66, 0.28);
  color: #fe5742;
  padding: 0.32rem 0.85rem;
  border-radius: 50px;
  font-size: clamp(0.65rem, 1vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.trust-bento-title {
  font-size: clamp(1.45rem, 3.1vw, 2.45rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0 0 0.65rem 0;
}

.trust-highlight-red {
  color: #fe5742;
  text-decoration: underline;
  text-decoration-color: rgba(254, 87, 66, 0.35);
  text-underline-offset: 4px;
}

.trust-bento-title del {
  color: #dc2626;
  opacity: 0.85;
  text-decoration-thickness: 2px;
}

.trust-bento-subtitle {
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  color: #475569;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 680px;
}

.trust-bento-subtitle strong {
  color: #0f172a;
  font-weight: 700;
}

/* 3-Card Bento Grid */
#trustBadgesContainer.trust-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2.2vw, 1.5rem) !important;
  margin-bottom: clamp(1.25rem, 2.8vw, 2rem) !important;
  width: 100% !important;
}

.trust-bento-card {
  background: #ffffff;
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  min-width: 0;
}

.trust-bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.trust-card-fiverr::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.trust-card-apps::before {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.trust-card-savings::before {
  background: linear-gradient(90deg, #fe5742, #fbbf24);
}

.trust-bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  border-color: rgba(254, 87, 66, 0.35);
}

/* Card Header Row (Compact Horizontal Icon + Meta + Chip) */
.trust-card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.trust-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
}

.trust-icon-fiverr {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.trust-icon-apps {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.22);
}

.trust-icon-savings {
  background: rgba(254, 87, 66, 0.1);
  border: 1px solid rgba(254, 87, 66, 0.22);
}

.trust-card-meta {
  flex: 1;
  min-width: 0;
}

.trust-platform-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.pill-fiverr { color: #059669; }
.pill-apps { color: #2563eb; }
.pill-savings { color: #fe5742; }

.trust-card-heading {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.trust-rating-chip {
  background: #0f172a;
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.24rem 0.55rem;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.trust-rating-chip.chip-blue {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.trust-rating-chip.chip-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0f172a;
}

.trust-card-desc {
  font-size: clamp(0.82rem, 1.1vw, 0.9rem);
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.trust-card-desc strong {
  color: #0f172a;
}

/* Progress Meter Inside Cards 1 & 2 */
.trust-proof-meter {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
}

.trust-meter-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.trust-meter-labels strong {
  color: #0f172a;
  font-weight: 800;
}

.trust-meter-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.trust-meter-fill {
  height: 100%;
  border-radius: 99px;
}

.fill-fiverr {
  background: linear-gradient(90deg, #10b981, #059669);
}

.fill-apps {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}

/* Agency vs Us Box Inside Card 3 */
.trust-vs-box {
  background: #fffaf9;
  border: 1px dashed rgba(254, 87, 66, 0.35);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.74rem;
}

.trust-vs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.vs-agency {
  color: #64748b;
}

.vs-agency del {
  color: #dc2626;
  font-weight: 700;
}

.vs-us {
  color: #0f172a;
}

.vs-us strong {
  color: #059669;
  font-weight: 800;
}

/* Card Footer */
.trust-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.75rem;
}

.trust-verified-tag {
  color: #475569;
  font-weight: 600;
}

.trust-card-cta {
  color: #fe5742;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.trust-bento-card:hover .trust-card-cta {
  transform: translateX(3px);
}

/* Bottom Ironclad 30-Day Money-Back Guarantee Vault */
.trust-guarantee-vault {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #0f172a 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.4);
  border-radius: 18px;
  padding: clamp(1.15rem, 2.5vw, 1.75rem) clamp(1.15rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  color: #ffffff;
}

.trust-vault-left {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex: 1;
  min-width: 0;
}

.trust-vault-seal {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(251, 191, 36, 0.14);
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.15);
}

.trust-vault-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.trust-vault-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.vault-pill-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0f172a;
  font-size: 0.66rem;
  font-weight: 900;
  padding: 0.16rem 0.55rem;
  border-radius: 50px;
  letter-spacing: 0.5px;
}

.vault-pill-signed {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.16rem 0.6rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.trust-vault-heading {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.3rem 0;
  line-height: 1.25;
}

.trust-vault-text {
  font-size: clamp(0.8rem, 1.15vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}

.trust-vault-text strong {
  color: #fde68a;
}

.trust-vault-right {
  flex-shrink: 0;
}

.trust-vault-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.35rem !important;
  box-shadow: 0 10px 26px rgba(254, 87, 66, 0.45) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  text-align: center !important;
  white-space: nowrap;
}

.trust-vault-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(254, 87, 66, 0.6) !important;
}

.vault-btn-main {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.vault-btn-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: #fde68a;
  margin-top: 0.18rem;
}

/* Tablet Layout (641px - 1024px): 2+1 Smart Grid */
@media (max-width: 1024px) {
  #trustBadgesContainer.trust-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-card-savings {
    grid-column: 1 / -1;
  }

  .trust-guarantee-vault {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .trust-vault-left {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .trust-vault-copy {
    text-align: center;
  }

  .trust-vault-badges {
    justify-content: center;
  }

  .trust-vault-right,
  .trust-vault-btn {
    width: 100% !important;
  }
}

/* Mobile Layout (<=640px): Compact Zero-Bloat Cards */
@media (max-width: 640px) {
  #trustSection.trust-bento-section {
    padding: 1.5rem 0.85rem 1.75rem !important;
  }

  .trust-bento-header {
    margin-bottom: 1.1rem;
  }

  .trust-eyebrow-pill {
    font-size: 0.6rem;
    padding: 0.25rem 0.65rem;
    margin-bottom: 0.5rem;
  }

  .trust-bento-title {
    font-size: clamp(1.3rem, 5.8vw, 1.65rem);
    margin-bottom: 0.45rem;
  }

  .trust-bento-subtitle {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  #trustBadgesContainer.trust-bento-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .trust-bento-card {
    padding: 0.95rem;
    gap: 0.65rem;
    border-radius: 14px;
  }

  .trust-icon-box {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 10px;
  }

  .trust-card-heading {
    font-size: 1rem;
  }

  .trust-card-desc {
    font-size: 0.8rem;
    line-height: 1.42;
  }

  .trust-guarantee-vault {
    padding: 1.1rem 0.95rem;
    border-radius: 14px;
    gap: 0.85rem;
  }

  .trust-vault-seal {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
  }

  .trust-vault-heading {
    font-size: 1rem;
  }

  .trust-vault-text {
    font-size: 0.78rem;
    line-height: 1.42;
  }

  .trust-vault-btn {
    padding: 0.75rem 1rem !important;
  }
}

@media (max-width: 380px) {
  .trust-vs-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }

  .trust-card-footer {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

/* =========================================================
   PRINCIPAL ARCHITECT SHOWCASE SECTION (#developerSection)
   ========================================================= */
#developerSection.dev-architect-section {
  background: radial-gradient(circle at 90% 10%, rgba(254, 87, 66, 0.06) 0%, transparent 45%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1rem, 3.5vw, 2.5rem) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
}

.dev-architect-container {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.5rem, 3.8vw, 3.25rem);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.dev-col-card,
.dev-col-copy {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* Left Column: Verified Architect Trading Card */
.dev-trading-card {
  background: #0f172a;
  border-radius: 20px;
  padding: 0.9rem;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  max-width: 470px;
  margin: 0 auto;
  box-sizing: border-box;
}

.dev-trading-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 65px rgba(15, 23, 42, 0.3), 0 0 0 1.5px rgba(254, 87, 66, 0.45);
}

.dev-card-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.2rem 0.35rem 0.6rem;
}

.dev-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.dev-verified-chip {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  padding: 0.18rem 0.55rem;
  border-radius: 50px;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.dev-portrait-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #334155 0%, #0f172a 100%);
  aspect-ratio: 1 / 0.94;
}

.dev-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.dev-trading-card:hover .dev-portrait-img {
  transform: scale(1.03);
}

/* Floating Glass Badges Over Portrait */
.dev-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.4rem 0.65rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  z-index: 2;
}

.dev-float-top {
  top: 10px;
  right: 10px;
}

.dev-float-bottom {
  bottom: 10px;
  left: 10px;
}

.dev-float-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.dev-float-badge div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.dev-float-badge strong {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
}

.dev-float-badge span {
  color: #fbbf24;
  font-size: 0.63rem;
  font-weight: 700;
}

/* Identity, Live Score Strip & Tech Stack Inside Card */
.dev-card-identity {
  padding: 0.85rem 0.3rem 0.2rem;
  text-align: left;
}

.dev-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.dev-card-name {
  font-size: clamp(1.12rem, 1.75vw, 1.32rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.15rem 0;
  line-height: 1.2;
}

.dev-card-role {
  font-size: 0.74rem;
  color: #94a3b8;
  margin: 0;
  font-weight: 600;
}

.dev-rate-badge {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.26rem 0.6rem;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(254, 87, 66, 0.4);
}

/* 3 Mini Live Performance Score Meters */
.dev-score-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.45rem 0.4rem;
}

.dev-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0.2rem;
}

.dev-score-item:last-child {
  border-right: none;
}

.dev-score-val {
  color: #10b981;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.dev-score-lbl {
  color: #cbd5e1;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
}

.dev-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dev-tech-pills span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.67rem;
  font-weight: 700;
  padding: 0.2rem 0.52rem;
  border-radius: 6px;
}

/* Right Column: Pattern-Interrupt Headline & Interactive Switcher */
.dev-eyebrow-wrap {
  margin-bottom: 0.6rem;
}

.dev-eyebrow-badge {
  display: inline-block;
  background: rgba(254, 87, 66, 0.1);
  border: 1px solid rgba(254, 87, 66, 0.28);
  color: #fe5742;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  font-size: clamp(0.64rem, 1vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  max-width: 100%;
}

.dev-headline {
  font-size: clamp(1.45rem, 2.8vw, 2.3rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.18;
  letter-spacing: -0.6px;
  margin: 0 0 0.75rem 0;
}

.dev-headline del {
  color: #dc2626;
  text-decoration-thickness: 2px;
}

.dev-headline-accent {
  display: block;
  margin-top: 0.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dev-lead-bio {
  font-size: clamp(0.88rem, 1.2vw, 1.02rem);
  color: #475569;
  line-height: 1.55;
  margin: 0 0 0.9rem 0;
}

.dev-lead-bio strong {
  color: #0f172a;
  font-weight: 700;
}

/* Interactive 2-Tab Switcher */
.dev-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  background: #f1f5f9;
  padding: 0.32rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 0.85rem;
}

.dev-mode-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.55rem 0.65rem !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: clamp(0.76rem, 1.05vw, 0.86rem) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  box-shadow: none !important;
  min-height: 40px !important;
  white-space: nowrap;
}

.dev-mode-tab.active {
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
}

.dev-tab-price {
  background: rgba(254, 87, 66, 0.14);
  color: #fe5742;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
}

.dev-mode-tab.active .dev-tab-price {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
}

.dev-tab-panel {
  display: none;
  animation: fadeIn 0.25s ease;
}

.dev-tab-panel.active {
  display: block;
}

/* 3 Value Pillars */
.dev-pillars-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

.dev-pillar-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid #fe5742;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.dev-pillar-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(254, 87, 66, 0.12);
}

.dev-pillar-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(254, 87, 66, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.08rem;
}

.dev-pillar-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.dev-pillar-text strong {
  font-size: clamp(0.84rem, 1.1vw, 0.94rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.dev-pillar-text span {
  font-size: clamp(0.76rem, 1vw, 0.84rem);
  color: #475569;
  line-height: 1.42;
}

/* Personal Quote Callout Box */
.dev-quote-box {
  background: linear-gradient(135deg, rgba(254, 87, 66, 0.06) 0%, rgba(251, 191, 36, 0.08) 100%);
  border: 1px solid rgba(254, 87, 66, 0.22);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  margin-bottom: 1rem;
  text-align: left;
}

.dev-quote-text {
  font-size: clamp(0.8rem, 1.05vw, 0.88rem);
  color: #1e293b;
  font-style: italic;
  line-height: 1.48;
  margin: 0 0 0.4rem 0;
}

.dev-quote-text strong {
  color: #fe5742;
  font-style: normal;
  font-weight: 800;
}

.dev-quote-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.74rem;
}

.dev-signature {
  font-weight: 900;
  color: #0f172a;
}

.dev-verified-seller {
  color: #059669;
  font-weight: 800;
}

/* Dual High-Velocity CTAs */
.dev-cta-group {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.dev-btn-primary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.82rem 0.95rem !important;
  box-shadow: 0 10px 26px rgba(254, 87, 66, 0.36) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dev-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(254, 87, 66, 0.5) !important;
}

.dev-btn-secondary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 2px solid #0f172a !important;
  border-radius: 12px !important;
  padding: 0.82rem 0.9rem !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dev-btn-secondary:hover {
  transform: translateY(-3px);
  background: #1e293b !important;
}

.dev-btn-main {
  display: block;
  font-size: clamp(0.84rem, 1.1vw, 0.95rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.dev-btn-sub {
  display: block;
  font-size: clamp(0.64rem, 0.9vw, 0.7rem);
  font-weight: 600;
  color: #fde68a;
  margin-top: 0.16rem;
  line-height: 1.2;
}

/* Tablet Layout (<=1024px) */
@media (max-width: 1024px) {
  .dev-architect-container {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    gap: 1.4rem;
  }

  .dev-trading-card {
    max-width: 440px;
  }

  .dev-col-copy {
    text-align: center;
  }
}

/* Mobile Layout (<=640px): Uncropped Portrait + Compact Interactive Tabs */
@media (max-width: 640px) {
  #developerSection.dev-architect-section {
    padding: 1.5rem 0.85rem 1.75rem !important;
  }

  .dev-architect-container {
    gap: 1.05rem;
  }

  .dev-trading-card {
    padding: 0.7rem;
    border-radius: 16px;
    max-width: 100%;
  }

  .dev-card-status-bar {
    padding: 0.15rem 0.15rem 0.45rem;
  }

  .dev-online-pill {
    font-size: 0.58rem;
    padding: 0.16rem 0.48rem;
  }

  .dev-verified-chip {
    font-size: 0.58rem;
    padding: 0.15rem 0.42rem;
  }

  /* Keep Numan's portrait uncropped and properly framed on mobile */
  .dev-portrait-wrap {
    aspect-ratio: 4 / 3.4;
    max-height: 290px;
  }

  .dev-portrait-img {
    object-fit: cover;
    object-position: center 12%;
  }

  .dev-float-badge {
    padding: 0.3rem 0.5rem;
    border-radius: 9px;
    gap: 0.3rem;
  }

  .dev-float-icon {
    font-size: 0.95rem;
  }

  .dev-float-badge strong {
    font-size: 0.64rem;
  }

  .dev-float-badge span {
    font-size: 0.56rem;
  }

  .dev-card-identity {
    padding: 0.65rem 0.15rem 0.15rem;
  }

  .dev-card-name {
    font-size: 1.05rem;
  }

  .dev-card-role {
    font-size: 0.68rem;
  }

  .dev-score-strip {
    padding: 0.38rem 0.25rem;
    margin-bottom: 0.55rem;
  }

  .dev-score-val {
    font-size: 0.76rem;
  }

  .dev-score-lbl {
    font-size: 0.58rem;
  }

  .dev-tech-pills span {
    font-size: 0.6rem;
    padding: 0.16rem 0.42rem;
  }

  .dev-eyebrow-badge {
    font-size: 0.58rem;
    padding: 0.24rem 0.6rem;
    white-space: normal;
  }

  .dev-headline {
    font-size: clamp(1.28rem, 5.6vw, 1.6rem);
    margin-bottom: 0.5rem;
  }

  .dev-lead-bio {
    font-size: 0.82rem;
    line-height: 1.48;
    margin-bottom: 0.75rem;
  }

  .dev-mode-tabs {
    padding: 0.25rem;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
  }

  .dev-mode-tab {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.4rem !important;
    gap: 0.25rem !important;
  }

  .dev-tab-price {
    font-size: 0.62rem;
    padding: 0.1rem 0.35rem;
  }

  .dev-pillars-list {
    gap: 0.45rem;
    margin-bottom: 0.8rem;
  }

  .dev-pillar-item {
    padding: 0.6rem 0.7rem;
    gap: 0.55rem;
  }

  .dev-pillar-icon {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }

  .dev-pillar-text strong {
    font-size: 0.8rem;
  }

  .dev-pillar-text span {
    font-size: 0.73rem;
  }

  .dev-quote-box {
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.85rem;
  }

  .dev-quote-text {
    font-size: 0.76rem;
  }

  .dev-cta-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .dev-btn-primary,
  .dev-btn-secondary {
    padding: 0.72rem 0.85rem !important;
    min-height: 52px !important;
  }
}

@media (max-width: 380px) {
  .dev-online-pill {
    font-size: 0.54rem;
    padding: 0.14rem 0.4rem;
  }

  .dev-verified-chip {
    font-size: 0.54rem;
    padding: 0.14rem 0.35rem;
  }

  .dev-mode-tab {
    flex-direction: column !important;
    gap: 0.12rem !important;
    padding: 0.4rem 0.3rem !important;
  }

  .dev-float-top {
    top: 6px;
    right: 6px;
  }

  .dev-float-bottom {
    bottom: 6px;
    left: 6px;
  }
}

/* =========================================================
   MODERN HIGH-VELOCITY ROI SCOREBOARD (#metricsSection)
   ========================================================= */
#metricsSection.metrics-scoreboard-section {
  background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(254, 87, 66, 0.1) 0%, transparent 45%),
              linear-gradient(135deg, #0b0f19 0%, #0f172a 50%, #17153b 100%) !important;
  padding: clamp(2.75rem, 5.5vw, 4.75rem) clamp(1rem, 3.5vw, 2.5rem) !important;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  color: #ffffff;
}

.metrics-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.metrics-glow-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  right: -80px;
  background: rgba(59, 130, 246, 0.18);
  animation: float 18s ease-in-out infinite;
}

.metrics-glow-2 {
  width: 320px;
  height: 320px;
  bottom: -90px;
  left: -70px;
  background: rgba(254, 87, 66, 0.15);
  animation: float 22s ease-in-out 4s infinite;
}

.metrics-glow-3 {
  width: 260px;
  height: 260px;
  top: 45%;
  left: 20%;
  background: rgba(16, 185, 129, 0.12);
  animation: float 25s ease-in-out 8s infinite;
}

.metrics-container {
  max-width: 1340px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

/* Header */
.metrics-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
}

.metrics-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
  font-size: clamp(0.65rem, 1vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.metrics-title {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0 0 0.65rem 0;
}

.metrics-title del {
  color: #ef4444;
  text-decoration-thickness: 2px;
}

.metrics-title-accent {
  display: block;
  margin-top: 0.2rem;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ff6b4a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metrics-subtitle {
  font-size: clamp(0.88rem, 1.25vw, 1.04rem);
  color: #94a3b8;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 700px;
}

.metrics-subtitle strong {
  color: #f8fafc;
}

/* Grid Layout */
#metricsSection .metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
  width: 100% !important;
}

/* Cards */
#metricsSection .metric-card {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: clamp(1.25rem, 2vw, 1.65rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#metricsSection .metric-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35) !important;
}

/* Color Schemes */
.metric-card-savings {
  border-top: 3.5px solid #fbbf24 !important;
}
.metric-card-savings:hover {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 20px 45px rgba(245, 158, 11, 0.22) !important;
}

.metric-card-apps {
  border-top: 3.5px solid #3b82f6 !important;
}
.metric-card-apps:hover {
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 20px 45px rgba(59, 130, 246, 0.25) !important;
}

.metric-card-speed {
  border-top: 3.5px solid #a855f7 !important;
}
.metric-card-speed:hover {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 20px 45px rgba(168, 85, 247, 0.25) !important;
}

.metric-card-students {
  border-top: 3.5px solid #10b981 !important;
}
.metric-card-students:hover {
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 20px 45px rgba(16, 185, 129, 0.25) !important;
}

/* Card Header: Icon + Badge */
.metric-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#metricsSection .metric-icon {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  margin: 0 !important;
  display: inline-block !important;
  animation: none !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.metric-badge-tag {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.badge-gold {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.badge-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.badge-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

/* Card Numbers & Labels */
#metricsSection .metric-value {
  font-size: clamp(1.85rem, 3.2vw, 2.65rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.8px !important;
}

.metric-card-savings .metric-value {
  color: #fbbf24 !important;
  text-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
}

.metric-card-apps .metric-value {
  color: #60a5fa !important;
  text-shadow: 0 0 24px rgba(96, 165, 250, 0.35);
}

.metric-card-speed .metric-value {
  color: #d8b4fe !important;
  text-shadow: 0 0 24px rgba(216, 180, 254, 0.35);
}

.metric-card-students .metric-value {
  color: #6ee7b7 !important;
  text-shadow: 0 0 24px rgba(110, 231, 183, 0.35);
}

#metricsSection .metric-value-unit {
  font-size: 0.52em !important;
  font-weight: 800 !important;
  opacity: 0.9 !important;
  margin-left: 0.15em !important;
}

#metricsSection .metric-label {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem) !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  margin: 0 0 0.2rem 0 !important;
  line-height: 1.25 !important;
}

#metricsSection .metric-description {
  font-size: clamp(0.74rem, 1vw, 0.82rem) !important;
  color: #94a3b8 !important;
  margin: 0 0 0.85rem 0 !important;
  line-height: 1.35 !important;
}

/* Progress bar inside cards */
#metricsSection .metric-progress {
  width: 100% !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  margin: 0 0 0.85rem 0 !important;
}

.progress-gold {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.progress-blue {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.progress-purple {
  background: linear-gradient(90deg, #9333ea, #c084fc);
}
.progress-emerald {
  background: linear-gradient(90deg, #059669, #34d399);
}

/* Card Action Link */
.metric-action-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  font-weight: 800;
  color: #e2e8f0;
  transition: color 0.2s ease;
}

.metric-arrow {
  color: #fbbf24;
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

#metricsSection .metric-card:hover .metric-arrow {
  transform: translateX(4px);
}

#metricsSection .metric-card:hover .metric-action-link {
  color: #ffffff;
}

/* Bottom Action Bar */
.metrics-action-bar {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 16px;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.metrics-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.metrics-fire-badge {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  white-space: nowrap;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(254, 87, 66, 0.5);
}

.metrics-bar-text {
  font-size: clamp(0.82rem, 1.1vw, 0.94rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.metrics-bar-text strong {
  color: #fbbf24;
}

.metrics-bar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.metrics-btn-primary {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.65rem 1.15rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(254, 87, 66, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer;
}

.metrics-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(254, 87, 66, 0.55) !important;
}

.metrics-btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  padding: 0.65rem 1.1rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.metrics-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Tablet Layout (641px - 1024px) */
@media (max-width: 1024px) {
  #metricsSection .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
  }

  .metrics-action-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.9rem;
  }

  .metrics-bar-left {
    flex-direction: column;
    text-align: center;
    gap: 0.45rem;
  }

  .metrics-bar-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Mobile Layout (<=640px): 2x2 Clean Compact Grid */
@media (max-width: 640px) {
  #metricsSection.metrics-scoreboard-section {
    padding: 1.75rem 0.85rem 1.85rem !important;
  }

  .metrics-header {
    margin-bottom: 1.25rem;
  }

  .metrics-eyebrow-pill {
    font-size: 0.6rem;
    padding: 0.24rem 0.65rem;
    margin-bottom: 0.5rem;
  }

  .metrics-title {
    font-size: clamp(1.25rem, 5.6vw, 1.55rem);
    margin-bottom: 0.45rem;
  }

  .metrics-subtitle {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  #metricsSection .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    margin-bottom: 1.15rem !important;
  }

  #metricsSection .metric-card {
    padding: 0.85rem 0.75rem !important;
    border-radius: 14px !important;
  }

  .metric-top-row {
    margin-bottom: 0.45rem;
  }

  #metricsSection .metric-icon {
    font-size: 1.35rem !important;
  }

  .metric-badge-tag {
    font-size: 0.56rem;
    padding: 0.15rem 0.4rem;
  }

  #metricsSection .metric-value {
    font-size: 1.35rem !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 0.15rem !important;
  }

  #metricsSection .metric-value-unit {
    font-size: 0.58em !important;
  }

  #metricsSection .metric-label {
    font-size: 0.8rem !important;
    margin-bottom: 0.15rem !important;
  }

  #metricsSection .metric-description {
    font-size: 0.68rem !important;
    margin-bottom: 0.55rem !important;
    line-height: 1.25 !important;
  }

  #metricsSection .metric-progress {
    height: 4px !important;
    margin-bottom: 0.55rem !important;
  }

  .metric-action-link {
    font-size: 0.66rem;
    padding-top: 0.45rem;
  }

  .metrics-action-bar {
    padding: 0.85rem 0.75rem;
    border-radius: 14px;
    gap: 0.75rem;
  }

  .metrics-fire-badge {
    font-size: 0.6rem;
    padding: 0.18rem 0.5rem;
  }

  .metrics-bar-text {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .metrics-bar-right {
    flex-direction: column;
    width: 100%;
    gap: 0.45rem;
  }

  .metrics-btn-primary,
  .metrics-btn-secondary {
    width: 100% !important;
    text-align: center !important;
    padding: 0.65rem 0.75rem !important;
    font-size: 0.78rem !important;
  }
}

@media (max-width: 360px) {
  #metricsSection .metric-value {
    font-size: 1.18rem !important;
  }
  #metricsSection .metric-label {
    font-size: 0.75rem !important;
  }
  .metric-badge-tag {
    display: none;
  }
}





/* ========================================================
   MODERN ENGAGING PROBLEM SECTION (Agency vs Flutter-Lab)
   ======================================================== */

#problemSection.problem-section {
  background: linear-gradient(180deg, #fef2f2 0%, #fff7ed 50%, #ffffff 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-top: 1px solid #fee2e2;
  border-bottom: 1px solid #fed7aa;
  position: relative;
  overflow: hidden;
}

#problemSection .section-container {
  max-width: 1200px !important;
  margin: 0 auto;
}

/* Eyebrow badge */
.problem-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.problem-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 800;
  color: #dc2626;
  background: #ffffff;
  border: 1.5px solid #fecaca;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.1);
  letter-spacing: 0.5px;
}

.pulse-red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: pulseRedDot 1.8s infinite;
}

@keyframes pulseRedDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Main Titles */
.problem-main-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 0.75rem auto;
  max-width: 950px;
  letter-spacing: -0.5px;
}

.text-strike-red {
  color: #dc2626;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #ef4444;
}

.problem-main-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  color: #475569;
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem) auto;
  line-height: 1.6;
}

/* 3-Column Contrast Grid */
.problem-contrast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.problem-contrast-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.problem-contrast-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(220, 38, 38, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  border-color: #fca5a5;
}

.contrast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.contrast-icon-wrap {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.contrast-badge-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.pill-danger {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.pill-warning {
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
}

.contrast-title {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  min-height: 2.8rem;
}

/* Comparison Boxes */
.contrast-box {
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.75rem;
}

.box-agency {
  background: #fff5f5;
  border: 1px solid #fee2e2;
  border-left: 3.5px solid #ef4444;
}

.box-flutterlab {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3.5px solid #22c55e;
}

.box-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}

.label-agency {
  color: #dc2626;
}

.label-flutterlab {
  color: #16a34a;
}

.box-text {
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.45;
  margin: 0;
}

.box-text strong {
  color: #0f172a;
  font-weight: 800;
}

.contrast-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
}

.contrast-stat {
  font-size: 0.75rem;
  font-weight: 800;
  color: #16a34a;
  display: block;
}

/* Bottom CTA Banner */
.problem-cta-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.problem-fire-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.3);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
  letter-spacing: 0.4px;
}

.problem-cta-heading {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.problem-cta-desc {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.problem-cta-desc strong {
  color: #fca5a5;
  font-weight: 800;
}

.problem-cta-right {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
  min-width: 280px;
}

.problem-btn-primary {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.problem-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.problem-btn-primary:active {
  transform: scale(0.98);
}

.problem-btn-secondary {
  width: 100%;
  padding: 0.72rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.problem-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.problem-btn-secondary:active {
  transform: scale(0.98);
}

/* Responsive Tablets (769px - 1024px) */
@media (max-width: 1024px) {
  .problem-contrast-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .problem-contrast-card:last-child {
    grid-column: span 2;
  }
  .contrast-title {
    min-height: auto;
  }
  .problem-cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .problem-cta-right {
    width: 100%;
  }
}

/* Responsive Mobile (<768px) */
@media (max-width: 768px) {
  #problemSection.problem-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 1rem !important;
  }

  .problem-contrast-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
  }

  .problem-contrast-card:last-child {
    grid-column: span 1;
  }

  .problem-contrast-card {
    padding: 1.15rem 1rem;
    border-radius: 16px;
  }

  .contrast-title {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
  }

  .contrast-box {
    padding: 0.75rem 0.8rem;
    margin-bottom: 0.6rem;
  }

  .box-text {
    font-size: 0.78rem;
  }

  .problem-cta-banner {
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .problem-cta-heading {
    font-size: 1.05rem;
  }

  .problem-cta-desc {
    font-size: 0.78rem;
  }

  .problem-cta-right {
    min-width: 100%;
    width: 100%;
  }

  .problem-btn-primary {
    font-size: 0.82rem;
    padding: 0.8rem;
  }

  .problem-btn-secondary {
    font-size: 0.76rem;
    padding: 0.7rem;
  }
}


/* ========================================================
   MODERN 250+ MODULAR ARCHITECTURE (solutionSection)
   ======================================================== */

#solutionSection.solution-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

#solutionSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto;
}

/* Eyebrow badge */
.solution-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.solution-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 800;
  color: #16a34a;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.1);
  letter-spacing: 0.5px;
}

.pulse-green-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseGreenDot 1.8s infinite;
}

@keyframes pulseGreenDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Main Titles */
.solution-main-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 0.75rem auto;
  max-width: 950px;
  letter-spacing: -0.5px;
}

.text-gradient-red {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.solution-main-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  color: #475569;
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem) auto;
  line-height: 1.6;
}

/* 4-Column Modular Pillars Grid */
.solution-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.solution-module-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  padding: clamp(1.25rem, 1.8vw, 1.6rem);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.solution-module-card:hover {
  transform: translateY(-6px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.module-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.module-icon-wrap {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.module-status-badge {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.4px;
}

.badge-ready {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.module-title {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 0.5rem 0;
  min-height: 2.8rem;
}

.module-desc {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

/* Tech Chips */
.module-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.tech-chip {
  font-size: 0.65rem;
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
}

/* Footer Metric */
.module-metric-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
  margin-top: auto;
}

.module-metric-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.module-metric-val {
  font-size: 0.75rem;
  font-weight: 800;
  color: #16a34a;
}

/* Tech Stack Ribbon */
.solution-tech-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.ribbon-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.5px;
}

.ribbon-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ribbon-chip {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.ribbon-chip:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* Bottom Action Bar */
.solution-action-bar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.solution-bar-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
  letter-spacing: 0.4px;
}

.solution-bar-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.solution-bar-desc {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.solution-bar-desc strong {
  color: #86efac;
  font-weight: 800;
}

.solution-bar-right {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
  min-width: 290px;
}

.solution-btn-primary {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.solution-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.solution-btn-primary:active {
  transform: scale(0.98);
}

.solution-btn-secondary {
  width: 100%;
  padding: 0.72rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.solution-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.solution-btn-secondary:active {
  transform: scale(0.98);
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
  .solution-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .module-title {
    min-height: auto;
  }
  .solution-action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .solution-bar-right {
    width: 100%;
  }
}

/* Mobile (<768px) */
@media (max-width: 768px) {
  #solutionSection.solution-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 1rem !important;
  }

  .solution-modules-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .solution-module-card {
    padding: 1.15rem 1rem;
    border-radius: 16px;
  }

  .module-title {
    font-size: 1.05rem;
    min-height: auto;
  }

  .solution-tech-ribbon {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.85rem 1rem;
  }

  .solution-action-bar {
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .solution-bar-title {
    font-size: 1.05rem;
  }

  .solution-bar-desc {
    font-size: 0.78rem;
  }

  .solution-bar-right {
    min-width: 100%;
    width: 100%;
  }

  .solution-btn-primary {
    font-size: 0.82rem;
    padding: 0.8rem;
  }

  .solution-btn-secondary {
    font-size: 0.76rem;
    padding: 0.7rem;
  }
}


/* ========================================================
   MODERN ENGAGING LOGOS & CLIENT SHOWCASE (logosSection)
   Plain English for Non-Technical Business Owners
   ======================================================== */

#logosSection.logos-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #fef2f2 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #fee2e2;
  position: relative;
  overflow: hidden;
}

#logosSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto;
}

/* Eyebrow badge */
.logos-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.logos-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 800;
  color: #15803d;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.1);
  letter-spacing: 0.5px;
}

.pulse-gold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: pulseGreenDot 1.8s infinite;
}

/* Main Titles */
.logos-main-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 0.75rem auto;
  max-width: 950px;
  letter-spacing: -0.5px;
}

.logos-main-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  color: #475569;
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem) auto;
  line-height: 1.6;
}

/* Industry Filter Pills Ribbon */
.industry-filter-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.industry-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.industry-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.industry-pill.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

/* Marquee Container & Track */
.marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 0.5rem 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: scrollMarquee 35s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Client Card */
.marquee-client-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  width: 290px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.marquee-client-card:hover {
  transform: translateY(-4px);
  border-color: #fca5a5;
  box-shadow: 0 12px 28px rgba(254, 87, 66, 0.12);
}

.marquee-client-card.dimmed {
  opacity: 0.35;
  filter: grayscale(80%);
}

.client-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.client-emoji {
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.client-store-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  color: #ea580c;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  letter-spacing: 0.3px;
}

.tag-blue {
  color: #2563eb;
  background: #eff6ff;
  border-color: #dbeafe;
}

.tag-green {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #dcfce7;
}

.tag-purple {
  color: #9333ea;
  background: #faf5ff;
  border-color: #f3e8ff;
}

.client-info {
  display: flex;
  flex-direction: column;
}

.client-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.15rem 0;
}

.client-type {
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.65rem;
}

.client-metric {
  font-size: 0.78rem;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  line-height: 1.35;
}

.client-metric strong {
  color: #0f172a;
  font-weight: 800;
}

/* Bottom Action Banner */
.logos-action-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.logos-banner-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
  letter-spacing: 0.4px;
}

.logos-banner-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.logos-banner-desc {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.logos-banner-desc strong {
  color: #fed7aa;
  font-weight: 800;
}

.logos-banner-right {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
  min-width: 290px;
}

.logos-btn-primary {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.logos-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.logos-btn-primary:active {
  transform: scale(0.98);
}

.logos-btn-secondary {
  width: 100%;
  padding: 0.72rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.logos-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.logos-btn-secondary:active {
  transform: scale(0.98);
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
  .logos-action-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .logos-banner-right {
    width: 100%;
  }
}

/* Mobile (<768px) */
@media (max-width: 768px) {
  #logosSection.logos-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 1rem !important;
  }

  .industry-filter-ribbon {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .industry-pill {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
  }

  .marquee-client-card {
    width: 250px;
    padding: 1rem;
  }

  .client-title {
    font-size: 0.95rem;
  }

  .client-metric {
    font-size: 0.72rem;
  }

  .logos-action-banner {
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .logos-banner-title {
    font-size: 1.05rem;
  }

  .logos-banner-desc {
    font-size: 0.78rem;
  }

  .logos-banner-right {
    min-width: 100%;
    width: 100%;
  }

  .logos-btn-primary {
    font-size: 0.82rem;
    padding: 0.8rem;
  }

  .logos-btn-secondary {
    font-size: 0.76rem;
    padding: 0.7rem;
  }
}


/* ========================================================
   MODERN ENGAGING CASE STUDIES SECTION (caseStudiesSection)
   Non-Technical Story Cards: Ahmad, Dr. Hassan, Bilal
   ======================================================== */

#caseStudiesSection.case-studies-section {
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 50%, #f8fafc 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

#caseStudiesSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto;
}

/* Eyebrow badge */
.cs-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.cs-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 800;
  color: #dc2626;
  background: #ffffff;
  border: 1.5px solid #fecaca;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.1);
  letter-spacing: 0.5px;
}

/* Main Titles */
.cs-main-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 0.75rem auto;
  max-width: 950px;
  letter-spacing: -0.5px;
}

.cs-main-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  color: #475569;
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem) auto;
  line-height: 1.6;
}

/* Stories Grid */
.cs-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.cs-story-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.cs-story-card:hover {
  transform: translateY(-6px);
  border-color: #fca5a5;
  box-shadow: 0 20px 40px rgba(220, 38, 38, 0.12);
}

/* Card Header */
.cs-card-header {
  margin-bottom: 1rem;
}

.cs-badge-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.cs-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.badge-retail {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.badge-edtech {
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.badge-delivery {
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
}

.cs-speed-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.cs-story-title {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 0.25rem 0;
}

.cs-founder-tag {
  font-size: 0.72rem;
  color: #64748b;
  margin: 0;
}

/* Metrics Row */
.cs-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.65rem 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

.cs-metric-box {
  display: flex;
  flex-direction: column;
}

.cs-metric-num {
  font-size: 1rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.cs-metric-lbl {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 600;
}

/* Before vs After Contrast */
.cs-contrast-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.cs-state {
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.state-before {
  background: #fff5f5;
  border: 1px solid #fee2e2;
  border-left: 3px solid #ef4444;
}

.state-after {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3px solid #22c55e;
}

.cs-state-title {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: 0.25rem;
}

.state-before .cs-state-title {
  color: #dc2626;
}

.state-after .cs-state-title {
  color: #16a34a;
}

.cs-state-desc {
  margin: 0;
  color: #334155;
}

/* Testimonial Quote */
.cs-quote-box {
  background: #fafaf9;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 1.15rem;
  border-left: 2px solid #cbd5e1;
}

.cs-quote-text {
  font-size: 0.76rem;
  font-style: italic;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}

/* Card Footer */
.cs-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-engine-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
}

.cs-demo-btn {
  font-size: 0.75rem;
  font-weight: 800;
  color: #fe5742;
  background: rgba(254, 87, 66, 0.08);
  border: 1px solid rgba(254, 87, 66, 0.2);
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-demo-btn:hover {
  background: #fe5742;
  color: #ffffff;
  border-color: #fe5742;
}

/* Bottom Action Banner */
.cs-action-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-banner-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.3);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
  letter-spacing: 0.4px;
}

.cs-banner-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.cs-banner-desc {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.cs-banner-desc strong {
  color: #fca5a5;
  font-weight: 800;
}

.cs-banner-right {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
  min-width: 290px;
}

.cs-btn-primary {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.cs-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.cs-btn-primary:active {
  transform: scale(0.98);
}

.cs-btn-secondary {
  width: 100%;
  padding: 0.72rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.cs-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.cs-btn-secondary:active {
  transform: scale(0.98);
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
  .cs-stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-story-card:last-child {
    grid-column: span 2;
  }
  .cs-action-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cs-banner-right {
    width: 100%;
  }
}

/* Mobile (<768px) */
@media (max-width: 768px) {
  #caseStudiesSection.case-studies-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 1rem !important;
  }

  .cs-stories-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cs-story-card:last-child {
    grid-column: span 1;
  }

  .cs-story-card {
    padding: 1.15rem 1rem;
    border-radius: 16px;
  }

  .cs-story-title {
    font-size: 1.05rem;
  }

  .cs-action-banner {
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .cs-banner-title {
    font-size: 1.05rem;
  }

  .cs-banner-desc {
    font-size: 0.78rem;
  }

  .cs-banner-right {
    min-width: 100%;
    width: 100%;
  }

  .cs-btn-primary {
    font-size: 0.82rem;
    padding: 0.8rem;
  }

  .cs-btn-secondary {
    font-size: 0.76rem;
    padding: 0.7rem;
  }
}


/* ========================================================
   DUAL-DIRECTION MARQUEE & QUICK-PEEK MODAL
   ======================================================== */

.marquee-dual-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.track-right {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: scrollMarqueeRight 38s linear infinite;
}

.track-right:hover {
  animation-play-state: paused;
}

@keyframes scrollMarqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.client-brand-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.client-store-badges {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-os {
  font-size: 0.56rem;
  font-weight: 800;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
}

.client-peek-badge {
  font-size: 0.62rem;
  font-weight: 800;
  color: #fe5742;
  background: #fff5f5;
  border: 1px solid #fee2e2;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.marquee-client-card:hover .client-peek-badge {
  background: #fe5742;
  color: #ffffff;
  border-color: #fe5742;
}

/* Quick Peek Lightbox Modal */
.peek-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.peek-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.peek-modal-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 460px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid #e2e8f0;
  position: relative;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.peek-modal-overlay.open .peek-modal-card {
  transform: translateY(0) scale(1);
}

.peek-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.peek-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.peek-modal-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
  padding-right: 2rem;
}

.peek-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.peek-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.peek-subtitle {
  font-size: 0.75rem;
  color: #64748b;
}

.peek-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem 0.6rem;
  margin-bottom: 1rem;
  text-align: center;
}

.peek-stat-box {
  display: flex;
  flex-direction: column;
}

.peek-stat-lbl {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 600;
}

.peek-stat-val {
  font-size: 0.88rem;
  font-weight: 900;
  margin-top: 0.15rem;
}

.text-green { color: #16a34a; }
.text-gold { color: #d97706; }
.text-blue { color: #2563eb; }

.peek-feature-box {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 1.25rem;
}

.peek-feature-lbl {
  font-size: 0.62rem;
  font-weight: 800;
  color: #c2410c;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 0.25rem;
}

.peek-feature-text {
  font-size: 0.78rem;
  color: #431407;
  line-height: 1.4;
  margin: 0;
}

.peek-btn-primary {
  width: 100%;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(254, 87, 66, 0.35);
  transition: all 0.2s ease;
  text-align: center;
}

.peek-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.45);
}

.peek-btn-primary:active {
  transform: scale(0.98);
}


/* ========================================================
   UNIFIED NON-TECHNICAL FUNNEL CSS (Sections 9-13 & Floating Bar)
   ======================================================== */

/* Section 9: Social Proof Reviews */
#socialProofSection.social-proof-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #e2e8f0;
}

#socialProofSection .section-container,
#certificationsSection .section-container,
#pressSection .section-container,
#courseSection .section-container,
#faqSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto;
}

.proof-eyebrow-wrapper,
.cert-eyebrow-wrapper,
.pathway-eyebrow-wrapper,
.faq-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.proof-eyebrow-badge,
.cert-eyebrow-badge,
.pathway-eyebrow-badge,
.faq-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 800;
  color: #c2410c;
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(194, 65, 12, 0.08);
  letter-spacing: 0.5px;
}

.proof-main-title,
.cert-main-title,
.pathway-main-title,
.faq-main-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 0.75rem auto;
  max-width: 950px;
  letter-spacing: -0.5px;
}

.proof-main-subtitle,
.cert-main-subtitle,
.pathway-main-subtitle,
.faq-main-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  color: #475569;
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem) auto;
  line-height: 1.6;
}

.proof-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.proof-review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.proof-review-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.review-author-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.author-avatar {
  font-size: 1.8rem;
}

.author-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.author-role {
  font-size: 0.72rem;
  color: #64748b;
}

.platform-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.fiverr-tag {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.upwork-tag {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.direct-tag {
  color: #9333ea;
  background: #faf5ff;
  border: 1px solid #f3e8ff;
}

.review-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.review-body {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

.review-body strong {
  color: #0f172a;
  font-weight: 800;
}

.review-footer-badge {
  padding-top: 0.65rem;
  border-top: 1px dashed #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

/* Section 10: Official Industry Seals */
#certificationsSection.certifications-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #e2e8f0;
}

.cert-seals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.cert-seal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s ease;
}

.cert-seal-card:hover {
  transform: translateY(-5px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.seal-icon {
  font-size: 2.4rem;
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}

.seal-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.45rem 0;
  line-height: 1.3;
}

.seal-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

.seal-pill {
  font-size: 0.65rem;
  font-weight: 800;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

/* Section 11: Media & Press Bar */
#pressSection.press-section {
  background: #0f172a !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) !important;
  color: #ffffff;
}

.press-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
}

.press-badge-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.8px;
}

.press-logos-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.press-item {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
}

/* Section 12: Dual Pathway */
#courseSection.pathway-section {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 50%, #ffffff 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #fed7aa;
}

.text-gradient-blue {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.pathway-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: 1050px;
  margin: 0 auto;
}

.pathway-card {
  background: #ffffff;
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}

.card-dfy {
  border: 2px solid #f97316;
  box-shadow: 0 16px 44px rgba(234, 88, 12, 0.12);
}

.card-mentorship {
  border: 1.5px solid #cbd5e1;
}

.pathway-card:hover {
  transform: translateY(-6px);
}

.pathway-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  letter-spacing: 0.4px;
  margin-bottom: 0.85rem;
}

.badge-red {
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
}

.badge-blue {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.pathway-card-title {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.pathway-card-subtitle {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 0 1.25rem 0;
}

.pathway-price-box {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.pathway-price-val {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ea580c;
}

.pathway-price-strike {
  font-size: 0.82rem;
  color: #64748b;
}

.pathway-price-strike del {
  color: #94a3b8;
}

.pathway-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
}

.pathway-feature-list li {
  font-size: 0.84rem;
  color: #334155;
  line-height: 1.4;
}

.pathway-btn-primary {
  width: 100%;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.pathway-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.pathway-btn-secondary {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.pathway-btn-secondary:hover {
  background: #1d4ed8;
}

.pathway-slot-note {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Section 13: Plain English FAQs */
#faqSection.faq-section {
  background: #ffffff !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  border-bottom: 1px solid #e2e8f0;
}

.faq-accordion-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.25s ease;
}

.faq-item:hover {
  border-color: #cbd5e1;
}

.faq-question {
  width: 100%;
  padding: 1.15rem 1.25rem;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  gap: 1rem;
  transition: background 0.2s ease;
}

.faq-question:hover {
  background: #f8fafc;
}

.faq-toggle-icon {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fe5742;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fafafa;
}

.faq-item.open .faq-answer {
  max-height: 350px;
}

.faq-answer p {
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  margin: 0;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.6;
}

.faq-answer p strong {
  color: #0f172a;
}

/* Floating Mobile Conversion Bar */
.floating-mobile-bar {
  display: none;
}

@media (max-width: 768px) {
  .floating-mobile-bar {
    position: fixed;
    bottom: 16px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1950;
    pointer-events: none;
    animation: anFloatingSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .an-floating-capsule {
    pointer-events: auto;
    width: 100%;
    max-width: 440px;
    background: rgba(251, 249, 247, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(235, 231, 226, 0.95);
    border-radius: 9999px;
    padding: 6px 8px 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(30, 32, 34, 0.12), 0 2px 8px rgba(30, 32, 34, 0.04);
  }

  .an-floating-wa-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #ebe7e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  }

  .an-floating-wa-btn:active {
    transform: scale(0.92);
    background: #f4f1ec;
  }

  .an-floating-wa-btn svg {
    display: block;
  }

  .an-floating-divider {
    width: 1px;
    height: 24px;
    background: #ebe7e2;
    flex-shrink: 0;
  }

  .an-floating-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .an-floating-tag {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    color: #fe5742;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
  }

  .an-floating-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fe5742;
    box-shadow: 0 0 6px rgba(254, 87, 66, 0.6);
    display: inline-block;
  }

  .an-floating-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e2022;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    line-height: 1.2;
  }

  .an-floating-cta-btn {
    background: #fe5742;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 600;
    border: none;
    padding: 0.55rem 0.95rem;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(254, 87, 66, 0.3);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
  }

  .an-floating-cta-btn:hover {
    background: #e04431;
    box-shadow: 0 6px 16px rgba(254, 87, 66, 0.4);
  }

  .an-floating-cta-btn:active {
    transform: scale(0.96);
  }

  .an-floating-arrow {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
  }

  .an-floating-cta-btn:hover .an-floating-arrow {
    transform: translateX(2px);
  }

  body {
    padding-bottom: 84px; /* Space for elevated floating capsule */
  }

  @keyframes anFloatingSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .proof-reviews-grid,
  .cert-seals-grid,
  .pathway-dual-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cert-seals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ========================================================
   MODERN INTERACTIVE FAQ SEARCH & CATEGORY TABS
   ======================================================== */

.faq-search-wrapper {
  max-width: 720px;
  margin: 0 auto 1.5rem auto;
}

.faq-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
  position: relative;
}

.faq-search-box:focus-within {
  border-color: #fe5742;
  box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08);
}

.faq-search-icon {
  font-size: 1.15rem;
  margin-right: 0.65rem;
  color: #94a3b8;
}

.faq-search-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  color: #0f172a;
  outline: none;
  padding: 0;
}

.faq-search-input::placeholder {
  color: #94a3b8;
}

.faq-clear-btn {
  background: #f1f5f9;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

.faq-clear-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.faq-tabs-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.faq-tab-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.faq-tab-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.faq-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

/* FAQ Answer Action Button */
.faq-answer-action {
  padding: 0 1.25rem 1.25rem 1.25rem;
  display: flex;
  align-items: center;
}

.faq-action-btn {
  font-size: 0.75rem;
  font-weight: 800;
  color: #fe5742;
  background: #fff5f5;
  border: 1px solid #fee2e2;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.faq-action-btn:hover {
  background: #fe5742;
  color: #ffffff;
  border-color: #fe5742;
}

/* Bottom Support Card */
.faq-support-card {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-support-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.3);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
  letter-spacing: 0.4px;
}

.faq-support-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.faq-support-desc {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.faq-support-right {
  flex-shrink: 0;
  min-width: 270px;
}

.faq-support-btn {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.faq-support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.faq-support-btn:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .faq-tabs-ribbon {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .faq-tab-btn {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
  }

  .faq-support-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .faq-support-right {
    min-width: 100%;
    width: 100%;
  }

  .faq-support-btn {
    font-size: 0.82rem;
    padding: 0.8rem;
  }
}


/* ========================================================
   VAULT TEMPLATES BAR & ENHANCED PATHWAY CARDS
   ======================================================== */

.vault-templates-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.05);
}

.vault-bar-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #c2410c;
  letter-spacing: 0.5px;
}

.vault-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vault-chip {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.vault-chip:hover {
  background: #ea580c;
  color: #ffffff;
  border-color: #ea580c;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .vault-templates-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    gap: 0.5rem;
  }

  .vault-chips-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .vault-chip {
    flex-shrink: 0;
  }
}


/* ========================================================
   MODERN INTERACTIVE PRESS & MEDIA SECTION (pressSection)
   ======================================================== */

#pressSection.press-section {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2rem) !important;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.press-eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.press-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.2vw, 0.78rem);
  font-weight: 800;
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.press-main-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 0.75rem auto;
  max-width: 950px;
  letter-spacing: -0.5px;
}

.press-main-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  color: #94a3b8;
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem) auto;
  line-height: 1.6;
}

/* 3 Press Cards Grid */
.press-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.press-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.press-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(254, 87, 66, 0.5);
  box-shadow: 0 20px 40px rgba(254, 87, 66, 0.2);
}

.press-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.publisher-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.publisher-logo-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.publisher-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.publisher-meta {
  font-size: 0.68rem;
  color: #94a3b8;
}

.press-category-tag {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.tag-innovation {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.tag-toprated {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.tag-business {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.press-article-title {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 0.85rem 0;
  min-height: 3.2rem;
}

.press-article-quote {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
  flex-grow: 1;
  font-style: italic;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  padding-left: 0.75rem;
}

.press-card-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.press-read-more {
  font-size: 0.75rem;
  font-weight: 800;
  color: #ff7862;
  transition: color 0.2s ease;
}

.press-card:hover .press-read-more {
  color: #ffffff;
}

.press-date-tag {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 600;
}

/* Media Ticker Bar */
.press-ticker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
}

.ticker-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.6px;
}

.ticker-tags-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ticker-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
}

/* Responsive Tablet */
@media (max-width: 1024px) {
  .press-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .press-card:last-child {
    grid-column: span 2;
  }
  .press-article-title {
    min-height: auto;
  }
}

/* Responsive Mobile */
@media (max-width: 768px) {
  #pressSection.press-section {
    padding: clamp(2.5rem, 5vw, 3.5rem) 1rem !important;
  }

  .press-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .press-card:last-child {
    grid-column: span 1;
  }

  .press-card {
    padding: 1.15rem 1rem;
    border-radius: 16px;
  }

  .press-article-title {
    font-size: 1.05rem;
    min-height: auto;
  }

  .press-ticker-wrapper {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.85rem 1rem;
  }

  .ticker-tags-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .ticker-tag {
    flex-shrink: 0;
  }
}


/* ========================================================
   ENHANCED 4 IRONCLAD FOUNDER SHIELDS (certificationsSection)
   ======================================================== */

.seal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.85rem;
}

.cert-seal-card {
  cursor: pointer;
  text-align: left !important;
  align-items: flex-start !important;
  border-radius: 20px !important;
  padding: clamp(1.25rem, 2vw, 1.6rem) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.cert-seal-card:hover {
  transform: translateY(-6px) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 20px 40px rgba(220, 38, 38, 0.12) !important;
}

.badge-store {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.badge-refund {
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
}

.badge-ownership {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.badge-toprated {
  color: #9333ea;
  background: #faf5ff;
  border: 1px solid #f3e8ff;
}

.seal-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
  width: 100%;
}

.seal-action-prompt {
  font-size: 0.75rem;
  font-weight: 800;
  color: #fe5742;
  transition: color 0.2s ease;
}

.cert-seal-card:hover .seal-action-prompt {
  color: #dc2626;
  text-decoration: underline;
}

/* Bottom Trust Banner */
.cert-trust-banner {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cert-trust-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.45rem;
  letter-spacing: 0.4px;
}

.cert-trust-heading {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
}

.cert-trust-desc {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.cert-trust-desc strong {
  color: #86efac;
  font-weight: 800;
}

.cert-trust-right {
  flex-shrink: 0;
  min-width: 290px;
}

.cert-trust-btn {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.cert-trust-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.55);
}

.cert-trust-btn:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .cert-trust-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }

  .cert-trust-right {
    min-width: 100%;
    width: 100%;
  }

  .cert-trust-btn {
    font-size: 0.82rem;
    padding: 0.8rem;
  }
}


/* ========================================================
   RICH VISUAL APP STORE MARQUEE CARDS WITH LIVE ACTIVITY
   ======================================================== */

.marquee-control-hint {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.hint-pill {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.3px;
}

.marquee-client-card {
  width: 320px !important;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.marquee-client-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: #fca5a5;
  box-shadow: 0 16px 36px rgba(220, 38, 38, 0.12);
}

.client-brand-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.client-emoji-badge {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.client-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.client-type {
  font-size: 0.68rem;
  color: #64748b;
}

.live-activity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.58rem;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.pulse-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.badge-green {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.dot-green {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
}

.badge-purple {
  color: #7e22ce;
  background: #faf5ff;
  border-color: #f3e8ff;
}

.dot-purple {
  background: #9333ea;
  box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
}

.badge-orange {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.dot-orange {
  background: #ea580c;
  box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7);
}

.badge-blue {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #dbeafe;
}

.dot-blue {
  background: #2563eb;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
}

.client-store-strip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.65rem 0;
}

.badge-os-app {
  font-size: 0.58rem;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
}

.client-rating-stars {
  font-size: 0.65rem;
  font-weight: 800;
  color: #d97706;
  margin-left: auto;
}

.client-metric-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.65rem;
}

.metric-headline {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  display: block;
}

.metric-subdesc {
  font-size: 0.68rem;
  color: #64748b;
  margin: 0.15rem 0 0 0;
  line-height: 1.35;
}

.client-card-action {
  padding-top: 0.45rem;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.action-peek-link {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fe5742;
  transition: all 0.2s ease;
}

.marquee-client-card:hover .action-peek-link {
  color: #dc2626;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .marquee-client-card {
    width: 275px !important;
    padding: 1rem;
  }

  .client-title {
    font-size: 0.95rem;
  }

  .metric-headline {
    font-size: 0.74rem;
  }

  .metric-subdesc {
    font-size: 0.65rem;
  }
}


/* ========================================================
   MODERN ROCKET SCROLL PROGRESS BUTTON (backToTopBtn)
   Left-Side Positioning with Circular Progress Ring
   ======================================================== */

.rocket-top-btn {
  position: fixed;
  bottom: 28px;
  left: 24px;
  right: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
  z-index: 1980;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15), 0 2px 8px rgba(254, 87, 66, 0.2);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  padding: 0;
}

.rocket-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.rocket-top-btn:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 14px 32px rgba(254, 87, 66, 0.35);
}

.rocket-top-btn:active {
  transform: translateY(0) scale(0.95);
}

/* Progress Ring SVG */
.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.progress-ring-track {
  stroke: rgba(226, 232, 240, 0.8);
}

.progress-ring-fill {
  transition: stroke-dashoffset 0.1s linear;
}

/* Rocket Icon */
.rocket-icon {
  font-size: 1.45rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  transition: transform 0.3s ease;
  z-index: 2;
}

.rocket-top-btn:hover .rocket-icon {
  transform: translateY(-2px) scale(1.15) rotate(12deg);
}

/* Hover Tooltip (Positioned to the Right of Left-Aligned Button) */
.rocket-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  right: auto;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.rocket-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -5px;
  right: auto;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent #0f172a transparent transparent;
}

.rocket-top-btn:hover .rocket-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Mobile & Tablet Clearance */
@media (max-width: 768px) {
  .rocket-top-btn {
    bottom: 74px !important; /* Floats safely above the floating-mobile-bar (60px) */
    left: 16px !important;
    right: auto !important;
    width: 48px;
    height: 48px;
  }

  .rocket-tooltip {
    display: none !important; /* Hide tooltip on touch */
  }

  .rocket-icon {
    font-size: 1.3rem;
  }
}


/* ========================================================
   MODERN ENGAGING URGENCY TOPBAR (urgencyBanner)
   ======================================================== */

#urgencyBanner.topbar-fomo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
  color: #ffffff !important;
  z-index: 2050 !important;
  border-bottom: 1.5px solid rgba(254, 87, 66, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

#urgencyBanner:hover {
  background: linear-gradient(90deg, #111827 0%, #1e1b4b 50%, #111827 100%) !important;
  border-bottom-color: #fe5742 !important;
}

.topbar-desktop {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0.55rem 1.25rem;
  gap: 1rem;
}

.topbar-live-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

.topbar-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseGreenDot 1.8s infinite;
}

.topbar-main-hook {
  display: flex;
  align-items: center;
  text-align: center;
  flex: 1;
  justify-content: center;
}

.topbar-hook-text {
  font-size: clamp(0.78rem, 1.2vw, 0.88rem);
  color: #f1f5f9;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.topbar-hook-text strong {
  color: #ffffff;
}

.topbar-gold {
  color: #fde047 !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.35);
}

.topbar-sub-pill {
  display: inline-block;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  letter-spacing: 0.3px;
  margin-left: 0.35rem;
}

.topbar-right-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.topbar-timer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.22rem 0.65rem;
  border-radius: 8px;
}

.topbar-timer-label {
  font-size: 0.68rem;
  color: #cbd5e1;
  font-weight: 600;
}

.topbar-timer-boxes {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fca5a5;
  letter-spacing: 0.5px;
}

.topbar-cta-btn {
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.32rem 0.85rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(254, 87, 66, 0.4);
  letter-spacing: -0.2px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#urgencyBanner:hover .topbar-cta-btn {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.6);
}

/* Mobile Clean High-Contrast Layout */
.topbar-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .topbar-desktop {
    display: none !important;
  }

  .topbar-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 0.75rem !important;
    min-height: 38px !important;
  }

  .topbar-mobile-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
  }

  .topbar-mobile-text {
    font-size: 0.72rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-mobile-cta {
    background: #fe5742;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
    flex-shrink: 0;
    letter-spacing: 0.2px;
  }
}

/* Apple SVG Icon Integration */
.apple-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.apple-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -0.12em;
}

.apple-icon-md {
  width: 18px;
  height: 18px;
  vertical-align: -0.18em;
}

.apple-icon-lg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.badge-os-app .apple-icon-svg {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -0.15em;
}

.badge-os-app {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.trust-platform-pill .apple-icon-svg {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -0.15em;
}

.seal-icon .apple-icon-svg {
  width: 44px;
  height: 44px;
  fill: #0f172a;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

/* Android SVG Icon Integration */
.android-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.android-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -0.12em;
}

.badge-os-app .android-icon-svg {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  vertical-align: -0.15em;
}

.trust-platform-pill .android-icon-svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -0.15em;
}

/* Official Store Badges & SVG Icons (App Store & Google Play) */
.playstore-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.appstore-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  border-radius: 2px;
}

.playstore-icon-sm, .appstore-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -0.15em;
}

.playstore-icon-lg, .appstore-icon-lg {
  width: 44px;
  height: 44px;
  vertical-align: middle;
}

.badge-os-app .playstore-icon-svg,
.badge-os-app .appstore-icon-svg {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  vertical-align: -0.15em;
}

.seal-icon .appstore-icon-svg,
.seal-icon .playstore-icon-svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}

/* Tech Brand Vector SVGs (Google, Flutter, Dart) */
.google-icon-svg,
.flutter-icon-svg,
.dart-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.google-icon-sm,
.flutter-icon-sm,
.dart-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -0.15em;
}

.dev-tech-pills span,
.ribbon-chip,
.tech-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.hero-value-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Social Vector SVGs (WhatsApp, Facebook) */
.whatsapp-icon-svg,
.facebook-icon-svg {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.whatsapp-icon-sm,
.facebook-icon-sm {
  width: 16px;
  height: 16px;
  vertical-align: -0.15em;
}

.whatsapp-icon-md,
.facebook-icon-md {
  width: 20px;
  height: 20px;
  vertical-align: -0.2em;
}

/* Backend & Infrastructure Vector SVGs */
.firebase-icon-svg,
.nodejs-icon-svg,
.express-icon-svg,
.postgres-icon-svg,
.stripe-icon-svg,
.fastlane-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.firebase-icon-sm,
.nodejs-icon-sm,
.express-icon-sm,
.postgres-icon-sm,
.stripe-icon-sm,
.fastlane-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -0.15em;
}

.express-icon-svg {
  fill: currentColor;
}

/* Additional Branded & Feature SVGs */
.supabase-icon-svg,
.jwt-icon-svg,
.biometric-icon-svg,
.easypaisa-icon-svg,
.bloc-icon-svg,
.sqlite-icon-svg,
.theme-icon-svg,
.responsive-icon-svg,
.admin-icon-svg,
.fcm-icon-svg,
.analytics-icon-svg,
.export-icon-svg,
.invoice-icon-svg,
.iap-icon-svg,
.ai-icon-svg {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.supabase-icon-sm,
.jwt-icon-sm,
.biometric-icon-sm,
.easypaisa-icon-sm,
.bloc-icon-sm,
.sqlite-icon-sm,
.theme-icon-sm,
.responsive-icon-sm,
.admin-icon-sm,
.fcm-icon-sm,
.analytics-icon-sm,
.export-icon-sm,
.invoice-icon-sm,
.iap-icon-sm,
.ai-icon-sm {
  width: 14px;
  height: 14px;
  vertical-align: -0.15em;
}

/* =========================================================
   MODERN 15-MINUTE BLUEPRINT & PRICE LOCK MODAL (#callModal)
   ========================================================= */

#callModal .modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.call-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%) !important;
  color: #ffffff !important;
  padding: 1.5rem 1.6rem 1.25rem !important;
  position: relative;
  display: block !important;
}

.call-modal-header .btn-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.call-modal-header .btn-close:hover {
  opacity: 1;
}

.call-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(254, 87, 66, 0.2);
  border: 1px solid rgba(254, 87, 66, 0.4);
  color: #ff7657;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  margin-bottom: 0.6rem;
}

.call-modal-title {
  color: #ffffff !important;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.4rem !important;
  letter-spacing: -0.3px;
}

.call-modal-title .highlight-red {
  color: #ff7657;
}

.call-modal-sub {
  color: #cbd5e1 !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.call-modal-sub strong {
  color: #ffffff;
}

.call-modal-body {
  padding: 1.4rem 1.6rem !important;
}

/* 1-Tap Radio Pill Selectors */
.pill-selector-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.pill-radio-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  user-select: none;
  margin: 0 !important;
}

.pill-radio-label input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-radio-label:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.pill-radio-label.active {
  border-color: #fe5742 !important;
  background: rgba(254, 87, 66, 0.08) !important;
  color: #fe5742 !important;
  box-shadow: 0 2px 8px rgba(254, 87, 66, 0.15);
}

/* Visual App Category Cards */
.app-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.app-type-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.65rem 0.35rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  user-select: none;
  margin: 0 !important;
}

.app-type-card input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-type-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.app-type-card.active {
  border-color: #fe5742 !important;
  background: rgba(254, 87, 66, 0.05) !important;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.15);
}

.app-type-card .card-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.app-type-card .card-title {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.app-type-card.active .card-title {
  color: #fe5742;
}

/* Compact Input Fields */
.form-row-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.form-label-bold {
  display: block;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 0.35rem !important;
}

.form-control-modern {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.form-control-modern:focus {
  border-color: #fe5742;
  box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.15);
}

.phone-input-group {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.2s ease;
}

.phone-input-group:focus-within {
  border-color: #fe5742;
  box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.15);
}

.phone-prefix {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.55rem 0.65rem;
  border-right: 1.5px solid #cbd5e1;
  white-space: nowrap;
}

.phone-input-group .form-control-modern {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Conversion CTA Button */
.call-btn-submit {
  width: 100%;
  background: linear-gradient(135deg, #fe5742 0%, #ff7657 100%);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.35);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  margin-top: 0.4rem;
}

.call-btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: topbarShimmer 3s infinite;
}

.call-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(254, 87, 66, 0.5);
}

.call-btn-submit:active {
  transform: translateY(0);
}

.call-btn-submit .btn-maintext {
  font-size: 0.92rem;
  letter-spacing: -0.2px;
}

.call-btn-submit .btn-subtext {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.92;
}

/* Trust & Peace of Mind Strip */
.modal-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 700;
}

/* Mobile Bottom Sheet Adaptation */
@media (max-width: 768px) {
  #callModal .modal-dialog {
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 1, 0.23, 1) !important;
  }

  #callModal.show .modal-dialog {
    transform: translateY(0) !important;
  }

  #callModal .modal-content {
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .call-modal-header {
    padding: 1.25rem 1.2rem 1rem !important;
  }

  .call-modal-body {
    padding: 1.1rem 1.2rem 1.4rem !important;
  }

  .form-row-compact {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* =========================================================
   MODERN 250+ APP VAULT PASS MODAL (#enrollModal)
   ========================================================= */

#enrollModal .modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.enroll-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%) !important;
  color: #ffffff !important;
  padding: 1.5rem 1.6rem 1.25rem !important;
  position: relative;
  display: block !important;
}

.enroll-modal-header .btn-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.enroll-modal-header .btn-close:hover {
  opacity: 1;
}

.enroll-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(254, 87, 66, 0.2);
  border: 1px solid rgba(254, 87, 66, 0.4);
  color: #ff7657;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  margin-bottom: 0.6rem;
}

.enroll-modal-title {
  color: #ffffff !important;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.4rem !important;
  letter-spacing: -0.3px;
}

.enroll-modal-title .highlight-red {
  color: #ff7657;
}

.enroll-modal-sub {
  color: #cbd5e1 !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.enroll-modal-sub strong {
  color: #ffffff;
}

.enroll-modal-body {
  padding: 1.4rem 1.6rem !important;
}

/* Payment Copy Box in Success Screen */
.payment-copy-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.payment-copy-box:last-child {
  margin-bottom: 0;
}

.copy-btn-mini {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn-mini:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* Mobile Bottom Sheet Adaptation for enrollModal */
@media (max-width: 768px) {
  #enrollModal .modal-dialog {
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 1, 0.23, 1) !important;
  }

  #enrollModal.show .modal-dialog {
    transform: translateY(0) !important;
  }

  #enrollModal .modal-content {
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .enroll-modal-header {
    padding: 1.25rem 1.2rem 1rem !important;
  }

  .enroll-modal-body {
    padding: 1.1rem 1.2rem 1.4rem !important;
  }
}


/* Anamalz-Style VIP Pill & Clean Announcement Bar */
.topbar-vip-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  padding: 0.18rem 0.6rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.topbar-price-pill {
  background: #ffffff;
  color: #fe5742;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-weight: 800;
  margin-left: 2px;
}
#urgencyBanner.topbar-fomo .topbar-cta-btn {
  background: #1e2022 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#urgencyBanner.topbar-fomo:hover .topbar-cta-btn {
  background: #000000 !important;
  transform: translateY(-1px) scale(1.03);
}


/* =========================================================
   ANAMALZ-STYLE SLEEK HERO TRANSFORMATION
   ========================================================= */
#heroSection.hero-vsl-section {
  background: linear-gradient(180deg, #fbf9f7 0%, #f6f3ee 100%) !important;
  border-bottom: 1px solid #ebe7e2 !important;
}

.hero-cinema-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 10px !important;
  border: 1px solid #ebe7e2 !important;
  box-shadow: 0 16px 40px rgba(30, 32, 34, 0.08) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-cinema-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(30, 32, 34, 0.12), 0 0 0 1px rgba(254, 87, 66, 0.2) !important;
}

.hero-cinema-topbar {
  background: #fbf9f7 !important;
  color: #1e2022 !important;
  border-radius: 10px 10px 0 0 !important;
  border-bottom: 1px solid #ebe7e2 !important;
  padding: 0.5rem 0.85rem !important;
}

.hero-cinema-title {
  color: #1e2022 !important;
  font-weight: 700 !important;
}

.hero-cinema-live {
  background: #fff5f3 !important;
  color: #fe5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.25) !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 0.15rem 0.55rem !important;
}

.hero-cinema-footer {
  background: #fbf9f7 !important;
  color: #5a5e64 !important;
  border-radius: 0 0 10px 10px !important;
  border-top: 1px solid #ebe7e2 !important;
  padding: 0.55rem 0.85rem !important;
}

.hero-cinema-cta-link {
  color: #fe5742 !important;
  font-weight: 700 !important;
}

.hero-value-pill {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  color: #1e2022 !important;
  border-radius: 50px !important;
  padding: 0.35rem 0.85rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.hero-eyebrow-badge {
  background: #ffffff !important;
  color: #1e2022 !important;
  border: 1px solid #ebe7e2 !important;
  box-shadow: 0 4px 14px rgba(30, 32, 34, 0.04) !important;
}

.hero-headline-vsl {
  color: #1e2022 !important;
}

.hero-kicker {
  color: #fe5742 !important;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.hero-discount-tag {
  background: #fff5f3 !important;
  color: #fe5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.3) !important;
  box-shadow: none !important;
}

.hero-btn-vsl-primary {
  background: #fe5742 !important;
  border: 2px solid #fe5742 !important;
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.3) !important;
  border-radius: 12px !important;
}

.hero-btn-vsl-primary:hover {
  background: #e04431 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(254, 87, 66, 0.4) !important;
}

.hero-btn-vsl-secondary {
  background: #ffffff !important;
  color: #1e2022 !important;
  border: 2px solid #ebe7e2 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.hero-btn-vsl-secondary:hover {
  background: #fbf9f7 !important;
  border-color: #1e2022 !important;
}

.hero-btn-vsl-secondary .hero-btn-main {
  color: #1e2022 !important;
}

.hero-btn-vsl-secondary .hero-btn-sub {
  color: #5a5e64 !important;
}

.hero-micro-proof {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  border-radius: 12px !important;
}


/* =========================================================
   ANAMALZ-INSPIRED TACTILE PRODUCT & SERVICE CARDS (SLK-005)
   ========================================================= */

/* Pathway Dual Cards (#courseSection) */
.pathway-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #ebe7e2 !important;
  box-shadow: 0 10px 30px rgba(30, 32, 34, 0.04) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.pathway-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 44px rgba(30, 32, 34, 0.09) !important;
  border-color: #fe5742 !important;
}

.card-dfy {
  border-top: 4px solid #fe5742 !important;
}

.card-mentorship {
  border-top: 4px solid #1e2022 !important;
}

.pathway-badge.badge-red {
  background: #fff5f3 !important;
  color: #fe5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.3) !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
}

.pathway-badge.badge-blue {
  background: #f4f1ec !important;
  color: #1e2022 !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
}

.pathway-card-title {
  color: #1e2022 !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.pathway-card-subtitle {
  color: #5a5e64 !important;
}

.pathway-price-box {
  background: #fbf9f7 !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.15rem !important;
}

.pathway-price-val {
  color: #fe5742 !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

.pathway-price-val.text-blue {
  color: #1e2022 !important;
}

.pathway-price-strike {
  color: #8c8f94 !important;
}

.pathway-feature-list li {
  color: #3e4247 !important;
  border-bottom: 1px solid #f4f1ec !important;
}

.pathway-btn-primary {
  background: #fe5742 !important;
  color: #ffffff !important;
  border: 2px solid #fe5742 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.25) !important;
}

.pathway-btn-primary:hover {
  background: #e04431 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(254, 87, 66, 0.35) !important;
}

.pathway-btn-secondary {
  background: #1e2022 !important;
  color: #ffffff !important;
  border: 2px solid #1e2022 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(30, 32, 34, 0.15) !important;
}

.pathway-btn-secondary:hover {
  background: #000000 !important;
  transform: translateY(-2px) !important;
}

/* Vault Chips Row (Templates Bar) */
.vault-templates-bar {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(30, 32, 34, 0.03) !important;
}

.vault-chip {
  background: #fbf9f7 !important;
  border: 1px solid #ebe7e2 !important;
  color: #1e2022 !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.vault-chip:hover {
  border-color: #fe5742 !important;
  transform: translateY(-1px) !important;
}

/* Problem & Solution Cards (#problemSection & #solutionSection) */
.problem-card, .solution-card {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(30, 32, 34, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

.problem-card:hover, .solution-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(30, 32, 34, 0.08) !important;
  border-color: #fe5742 !important;
}

/* Testimonial & Case Study Cards */
.testimonial-card, .case-study-card {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(30, 32, 34, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.testimonial-card:hover, .case-study-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(30, 32, 34, 0.08) !important;
  border-color: #fe5742 !important;
}


/* =========================================================
   ANAMALZ-STYLE MULTI-COLUMN MEGA MENUS (SLK-010)
   ========================================================= */

/* Mega Dropdown Shell */
.desktop-nav-dropdown.an-mega-dropdown {
  position: relative !important;
}

.desktop-dropdown-menu.an-mega-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: 740px !important;
  max-width: 90vw !important;
  background: #fbf9f7 !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 48px rgba(30, 32, 34, 0.12) !important;
  padding: 1.25rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 9999 !important;
}

.desktop-dropdown-menu.an-mega-menu.an-mega-menu-compact {
  width: 580px !important;
}

.desktop-nav-dropdown.an-mega-dropdown:hover .desktop-dropdown-menu.an-mega-menu,
.desktop-nav-dropdown.an-mega-dropdown.open .desktop-dropdown-menu.an-mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* 3-Column Grid inside Mega Menu */
.an-mega-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1.2fr 1fr !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

.an-mega-grid.an-grid-compact {
  grid-template-columns: 1.4fr 1fr !important;
}

.an-mega-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.an-mega-coltitle {
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #5a5e64 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 0.35rem !important;
  border-bottom: 1px solid #ebe7e2 !important;
  margin-bottom: 0.25rem !important;
}

.an-mega-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

/* Individual Row Items with Category & Subtitle */
.an-mega-row {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  padding: 0.5rem 0.65rem !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.an-mega-row:hover {
  background: #ffffff !important;
  transform: translateX(3px) !important;
}

.an-mega-name {
  font-family: var(--font-heading) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #1e2022 !important;
  line-height: 1.25 !important;
}

.an-mega-row:hover .an-mega-name {
  color: #fe5742 !important;
}

.an-mega-desc {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #8c8f94 !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* Column 3: Featured Showcase Card */
.an-mega-featured {
  border-left: 1px solid #ebe7e2 !important;
  padding-left: 1.25rem !important;
}

.an-mega-card {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-shadow: 0 4px 14px rgba(30, 32, 34, 0.04) !important;
}

.an-mega-card.an-card-tint {
  background: #fff5f3 !important;
  border-color: rgba(254, 87, 66, 0.25) !important;
}

.an-mega-tag {
  display: inline-block !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #1e2022 !important;
  background: #f4f1ec !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 50px !important;
  width: fit-content !important;
  margin-bottom: 0.4rem !important;
}

.an-mega-tag.tag-accent {
  background: #ffffff !important;
  color: #fe5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.25) !important;
}

.an-mega-card-title {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #1e2022 !important;
  margin-bottom: 0.3rem !important;
}

.an-mega-card-desc {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: #5a5e64 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.75rem !important;
}

.an-mega-card-btn {
  background: #fe5742 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  width: 100% !important;
}

.an-mega-card-btn:hover {
  background: #e04431 !important;
  transform: translateY(-1px) !important;
}


/* =========================================================
   ANAMALZ-STYLE MOBILE BOUTIQUE DRAWER (SLK-011)
   ========================================================= */

#mobileMenuDrawer.an-mobile-sheet {
  background: #fbf9f7 !important;
  border-top: 1px solid #ebe7e2 !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(30, 32, 34, 0.15) !important;
}

.an-mob-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
  padding: 0.5rem 0 1rem !important;
}

.an-mob-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.an-mob-group-title {
  font-family: var(--font-heading) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #5a5e64 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding-bottom: 0.25rem !important;
  border-bottom: 1px solid #ebe7e2 !important;
}

.an-mob-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

.an-mob-link-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 12px !important;
  padding: 0.75rem 0.95rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.an-mob-link-row:active {
  transform: scale(0.98) !important;
  border-color: #fe5742 !important;
}

.an-mob-link-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

.an-mob-link-name {
  font-family: var(--font-heading) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1e2022 !important;
}

.an-mob-link-sub {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #8c8f94 !important;
}

.an-mob-arrow {
  color: #fe5742 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

/* Featured Booking Capsule */
.an-mob-featured-capsule {
  background: #fff5f3 !important;
  border: 1px solid rgba(254, 87, 66, 0.3) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  margin: 0.25rem 0 !important;
}

.an-mob-capsule-badge {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #fe5742 !important;
  background: #ffffff !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 50px !important;
  width: fit-content !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
}

.an-mob-capsule-title {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #1e2022 !important;
}

.an-mob-capsule-text {
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  color: #5a5e64 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.an-mob-capsule-btn {
  background: #fe5742 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  margin-top: 0.3rem !important;
  box-shadow: 0 4px 12px rgba(254, 87, 66, 0.3) !important;
}


/* =========================================================
   ANAMALZ-STYLE TRUST SIGNALS & GOLDEN SAND STARS (SLK-006)
   ========================================================= */

/* Golden Sand Star Rating Token (#D4AF37) */
:root {
  --star-gold: #d4af37;
  --star-gold-tint: #fefbf0;
}

/* Trust Bento Section Styling */
#trustSection.trust-bento-section {
  background: #fbf9f7 !important;
  border-top: 1px solid #ebe7e2 !important;
  border-bottom: 1px solid #ebe7e2 !important;
}

.trust-eyebrow-pill {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  color: #1e2022 !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(30, 32, 34, 0.03) !important;
}

.trust-bento-title {
  color: #1e2022 !important;
  font-family: var(--font-heading) !important;
}

.trust-highlight-red {
  color: #fe5742 !important;
}

/* Tactile Stone Trust Cards */
.trust-bento-card {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(30, 32, 34, 0.04) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

.trust-bento-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 40px rgba(30, 32, 34, 0.09) !important;
  border-color: #fe5742 !important;
}

.trust-card-fiverr::before {
  background: linear-gradient(90deg, #d4af37, #fe5742) !important;
}

.trust-card-apps::before {
  background: linear-gradient(90deg, #fe5742, #ff7657) !important;
}

.trust-card-savings::before {
  background: linear-gradient(90deg, #1e2022, #5a5e64) !important;
}

/* Rating Chips with Golden Sand (#D4AF37) */
.trust-rating-chip {
  background: #fefbf0 !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #997819 !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 0.25rem 0.65rem !important;
}

.trust-rating-chip.chip-gold {
  background: #fff5f3 !important;
  border-color: rgba(254, 87, 66, 0.3) !important;
  color: #fe5742 !important;
}

.trust-platform-pill {
  background: #fbf9f7 !important;
  border: 1px solid #ebe7e2 !important;
  color: #5a5e64 !important;
  border-radius: 50px !important;
}

.trust-card-heading {
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1e2022 !important;
}

.trust-card-desc {
  color: #5a5e64 !important;
  line-height: 1.5 !important;
}

.trust-card-desc strong {
  color: #1e2022 !important;
}

/* Meter Tracks */
.trust-meter-track {
  background: #f4f1ec !important;
  border-radius: 50px !important;
}

.trust-meter-fill.fill-fiverr {
  background: linear-gradient(90deg, #d4af37, #e5c158) !important;
}

.trust-meter-fill.fill-apps {
  background: linear-gradient(90deg, #fe5742, #ff7657) !important;
}

.trust-meter-labels {
  color: #5a5e64 !important;
  font-size: 0.78rem !important;
}

.trust-meter-labels strong {
  color: #1e2022 !important;
}

.trust-verified-tag {
  color: #5a5e64 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
}

.trust-card-cta {
  color: #fe5742 !important;
  font-weight: 700 !important;
}

/* Guarantee Vault Strip */
.trust-guarantee-vault {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(30, 32, 34, 0.04) !important;
}

.vault-col-title {
  font-family: var(--font-heading) !important;
  color: #1e2022 !important;
  font-weight: 800 !important;
}

.vault-col-desc {
  color: #5a5e64 !important;
}

.vault-pill {
  background: #fbf9f7 !important;
  border: 1px solid #ebe7e2 !important;
  color: #1e2022 !important;
  font-weight: 600 !important;
}

/* Global Golden Stars in Reviews & Badges */
.jdgm-star, .rating-stars, .star-gold, .testimonial-rating {
  color: #d4af37 !important;
}

.rating-badge-gold {
  background: #fefbf0 !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  color: #997819 !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
}


/* =========================================================
   ANAMALZ-STYLE TACTILE BUTTONS & CTAS (SLK-007)
   ========================================================= */

/* Primary CTA Button (Signature Coral #FE5742 with Tactile Micro-Shadow) */
.btn-primary, 
.hero-btn-vsl-primary, 
.pathway-btn-primary, 
.sheet-btn-primary, 
.nav-cta-primary {
  background: #fe5742 !important;
  color: #ffffff !important;
  border: 1px solid #e04431 !important;
  border-radius: 10px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.28), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-primary:hover, 
.hero-btn-vsl-primary:hover, 
.pathway-btn-primary:hover, 
.sheet-btn-primary:hover, 
.nav-cta-primary:hover {
  background: #e04431 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.38), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary:active, 
.hero-btn-vsl-primary:active, 
.pathway-btn-primary:active, 
.sheet-btn-primary:active, 
.nav-cta-primary:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(254, 87, 66, 0.2) !important;
}

/* Secondary CTA Button (Deep Slate #1E2022 with Silky Hover) */
.btn-secondary, 
.btn-dark, 
.hero-btn-vsl-secondary, 
.pathway-btn-secondary, 
.sheet-btn-secondary, 
.nav-cta-course {
  background: #1e2022 !important;
  color: #ffffff !important;
  border: 1px solid #141618 !important;
  border-radius: 10px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(30, 32, 34, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-secondary:hover, 
.btn-dark:hover, 
.hero-btn-vsl-secondary:hover, 
.pathway-btn-secondary:hover, 
.sheet-btn-secondary:hover, 
.nav-cta-course:hover {
  background: #0a0b0c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(30, 32, 34, 0.25) !important;
}

.btn-secondary:active, 
.btn-dark:active, 
.hero-btn-vsl-secondary:active, 
.pathway-btn-secondary:active, 
.sheet-btn-secondary:active, 
.nav-cta-course:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(30, 32, 34, 0.12) !important;
}

/* Form Submit Buttons */
.btn-submit {
  background: #fe5742 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.25) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}

.btn-submit:hover {
  background: #e04431 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(254, 87, 66, 0.35) !important;
}


/* =========================================================
   ANAMALZ-STYLE FROSTED MODALS & EGGSHELL SHEETS (SLK-008)
   ========================================================= */

/* Frosted Backdrop Blur */
.modal-backdrop.show {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background-color: rgba(30, 32, 34, 0.55) !important;
}

/* Modal Content Container (Warm Eggshell & Organic Curve) */
.modal-content {
  background: #fbf9f7 !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(30, 32, 34, 0.16) !important;
  overflow: hidden !important;
}

/* Modal Headers: Clean Boutique Slate & Warm Coral Accents */
.call-modal-header,
.enroll-modal-header {
  background: #1e2022 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 1.6rem 1.8rem 1.35rem !important;
}

.call-modal-title,
.enroll-modal-title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem) !important;
  color: #ffffff !important;
}

.call-modal-sub,
.enroll-modal-sub {
  color: #c5c9d1 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
}

.call-modal-badge,
.enroll-modal-badge {
  background: rgba(254, 87, 66, 0.2) !important;
  border: 1px solid rgba(254, 87, 66, 0.45) !important;
  color: #ff9182 !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
}

/* Modal Body & Form Controls */
.call-modal-body,
.enroll-modal-body,
.modal-body {
  background: #fbf9f7 !important;
}

.persona-selection-card,
.level-selection-card {
  background: #ffffff !important;
  border: 1.5px solid #ebe7e2 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.persona-selection-card:hover,
.level-selection-card:hover {
  border-color: #fe5742 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(254, 87, 66, 0.12) !important;
}

.persona-selection-card.active,
.level-selection-card.active {
  border-color: #fe5742 !important;
  background: #fff5f3 !important;
}

/* Inputs & Form Fields */
.form-control, .form-select {
  background-color: #ffffff !important;
  border: 1.5px solid #ebe7e2 !important;
  border-radius: 10px !important;
  color: #1e2022 !important;
  font-family: var(--font-body) !important;
}

.form-control:focus, .form-select:focus {
  border-color: #fe5742 !important;
  box-shadow: 0 0 0 4px rgba(254, 87, 66, 0.15) !important;
  background-color: #ffffff !important;
}

/* 1-Tap Payment Detail Copy Box in #enrollModal */
.payment-copy-box {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.copy-btn-mini {
  background: #1e2022 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  border: none !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.copy-btn-mini:hover {
  background: #fe5742 !important;
  transform: translateY(-1px) !important;
}


/* ========================================================
   ANAMALZ-STYLE 3-COLUMN VIP ANNOUNCEMENT BAR (#urgencyBanner)
   ======================================================== */
.an-announcement-bar {
  background-color: var(--accent-color, #fe5742);
  color: #ffffff;
  font-family: var(--font-sans, 'Poppins', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1050;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: 42px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.an-announcement-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Left: Trust Pill */
.an-announcement-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.an-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.95);
}

.an-star-icon {
  flex-shrink: 0;
}

/* Center: Anamalz Micro Ticker */
.an-announcement-center {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.an-ticker-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.an-ticker-arrow:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: scale(1.08);
}

.an-ticker-arrow:active {
  transform: scale(0.94);
}

.an-ticker-viewport {
  position: relative;
  height: 24px;
  overflow: hidden;
  min-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.an-ticker-slide {
  position: absolute;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-size: 0.78rem;
}

.an-ticker-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.an-tag-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  display: inline-block;
}

.an-tag-badge.an-tag-live {
  background: #1e2022;
  color: #fbf9f7;
}

/* Right: Contacts & Action Pill */
.an-announcement-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.an-contact-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s ease;
}

.an-contact-link:hover {
  opacity: 0.85;
  text-decoration: underline;
  color: #ffffff;
}

.an-pipe-divider {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
}

.an-bar-cta-btn {
  background: #1e2022;
  color: #ffffff;
  font-family: var(--font-sans, 'Poppins', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  padding: 4px 12px;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.an-bar-cta-btn:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

/* Mobile Layout */
.an-announcement-mobile {
  display: none;
}

@media (max-width: 992px) {
  .an-ticker-viewport {
    min-width: 320px;
  }
}

@media (max-width: 820px) {
  .an-announcement-container {
    display: none;
  }
  
  .an-announcement-bar {
    height: 38px;
    padding: 0;
  }

  .an-announcement-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.85rem;
  }

  .an-mob-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .an-mob-live-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
    display: inline-block;
  }

  .an-mob-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .an-mob-wa {
    background: rgba(255, 255, 255, 0.2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .an-mob-wa:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .an-mob-btn {
    background: #1e2022;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}


/* ========================================================
   ANAMALZ-STYLE STICKY NAVBAR & INTEGRATED PROGRESS BAR
   ======================================================== */
#stickyNav {
  position: fixed !important;
  top: 42px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  background: rgba(251, 249, 247, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(235, 231, 226, 0.85) !important;
  min-height: 52px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(30, 32, 34, 0.02) !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Elevated Scrolled State */
#stickyNav.nav-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom-color: #ebe7e2 !important;
  box-shadow: 0 4px 20px rgba(30, 32, 34, 0.06) !important;
}

/* Integrated Progress Bar anchored to Bottom Lip of Nav */
.an-nav-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, #fe5742 0%, #ff7657 100%) !important;
  width: 100% !important;
  transform-origin: left !important;
  transform: scaleX(0);
  transition: transform 0.06s linear !important;
  box-shadow: 0 0 8px rgba(254, 87, 66, 0.45) !important;
  pointer-events: none !important;
  z-index: 1002 !important;
}

/* Anamalz-Style Underline Micro-Animation on Dropdown Triggers */
.desktop-dropdown-trigger {
  position: relative !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: #1e2022 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 0.45rem 0.75rem !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

.desktop-dropdown-trigger::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 12px !important;
  right: 12px !important;
  height: 2px !important;
  background: #fe5742 !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.desktop-nav-dropdown:hover .desktop-dropdown-trigger,
.desktop-dropdown-trigger:hover {
  background: rgba(254, 87, 66, 0.06) !important;
  color: #fe5742 !important;
}

.desktop-nav-dropdown:hover .desktop-dropdown-trigger::after,
.desktop-dropdown-trigger:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

.desktop-nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg) !important;
  color: #fe5742 !important;
}

/* Mobile Responsiveness */
@media (max-width: 820px) {
  #stickyNav {
    top: 38px !important;
    min-height: 48px !important;
  }
}


/* ========================================================
   ANAMALZ-STYLE BOUTIQUE HERO ATELIER & CINEMA CANVAS
   ======================================================== */
.an-hero-section {
  background-color: var(--primary-bg, #fbf9f7) !important;
  padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem clamp(2rem, 4vw, 3.5rem) !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--border-color, #ebe7e2) !important;
}

.an-hero-ambient {
  background: radial-gradient(circle at 10% 20%, rgba(254, 87, 66, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 50%) !important;
}

.an-hero-container {
  max-width: 1340px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) !important;
  grid-template-areas: "top video" !important;
  gap: clamp(2rem, 3.5vw, 4rem) !important;
  align-items: center !important;
}

.an-hero-content {
  grid-area: top !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
  text-align: left !important;
}

.an-hero-eyebrow-wrap {
  margin-bottom: 0 !important;
}

.an-hero-eyebrow {
  background: #fff5f3 !important;
  color: #fe5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.25) !important;
  padding: 0.35rem 0.85rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(254, 87, 66, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.an-hero-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.1rem, 3.8vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  color: #1e2022 !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
}

.an-hero-kicker {
  display: block !important;
  font-size: clamp(1.15rem, 2vw, 1.6rem) !important;
  font-weight: 600 !important;
  color: #5a5e64 !important;
  margin-bottom: 0.35rem !important;
  letter-spacing: -0.2px !important;
}

.an-hero-price-highlight {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.an-hero-price-num {
  color: #fe5742 !important;
  font-weight: 800 !important;
  position: relative !important;
}

.an-hero-price-num::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: rgba(254, 87, 66, 0.15) !important;
  border-radius: 4px !important;
  z-index: -1 !important;
}

.an-hero-tag {
  background: rgba(30, 32, 34, 0.06) !important;
  color: #1e2022 !important;
  border: 1px solid #ebe7e2 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  vertical-align: middle !important;
}

.an-hero-description {
  font-family: var(--font-body) !important;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem) !important;
  line-height: 1.65 !important;
  color: #4a4d52 !important;
  margin: 0 !important;
  max-width: 620px !important;
}

.an-hero-actions {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.85rem !important;
  flex-wrap: wrap !important;
  margin-top: 0.4rem !important;
}

.an-btn-primary {
  background: #fe5742 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.4rem !important;
  box-shadow: 0 4px 16px rgba(254, 87, 66, 0.32) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex: 1 1 auto !important;
  min-width: 240px !important;
  cursor: pointer !important;
  text-align: left !important;
}

.an-btn-primary:hover {
  background: #e04431 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.42) !important;
}

.an-btn-primary:active {
  transform: scale(0.98) !important;
}

.an-btn-primary .hero-btn-main {
  font-family: var(--font-heading) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.an-btn-primary .hero-btn-sub {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: #ffe4df !important;
  margin-top: 2px !important;
}

.an-btn-secondary {
  background: #ffffff !important;
  color: #1e2022 !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.25rem !important;
  box-shadow: 0 2px 8px rgba(30, 32, 34, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex: 1 1 auto !important;
  min-width: 220px !important;
  cursor: pointer !important;
  text-align: left !important;
}

.an-btn-secondary:hover {
  background: #fbf9f7 !important;
  border-color: #1e2022 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(30, 32, 34, 0.08) !important;
}

.an-btn-secondary .hero-btn-main {
  font-family: var(--font-heading) !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: #1e2022 !important;
}

.an-btn-secondary .hero-btn-sub {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: #6a6f77 !important;
  margin-top: 2px !important;
}

.an-hero-trust {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  padding: 0.65rem 1rem !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(30, 32, 34, 0.03) !important;
  margin-top: 0.25rem !important;
  max-width: 540px !important;
}

/* Organic Cinema Card (Right Column) */
.an-cinema-card {
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 20px !important;
  padding: 12px !important;
  box-shadow: 0 20px 48px rgba(30, 32, 34, 0.08), 0 2px 8px rgba(30, 32, 34, 0.02) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.an-cinema-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 28px 60px rgba(30, 32, 34, 0.12), 0 4px 12px rgba(30, 32, 34, 0.04) !important;
}

.an-cinema-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.35rem 0.5rem 0.75rem !important;
}

.an-cinema-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 0.5rem 0.35rem !important;
  border-top: 1px solid #f4f1ec !important;
  margin-top: 0.5rem !important;
}

/* Bottom Horizontal Guarantee Rail (Anamalz Style) */
.an-guarantee-strip {
  max-width: 1200px !important;
  margin: 3.25rem auto 0 auto !important;
  background: #ffffff !important;
  border: 1px solid #ebe7e2 !important;
  border-radius: 16px !important;
  padding: 0.85rem 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  box-shadow: 0 4px 16px rgba(30, 32, 34, 0.03) !important;
  gap: 1rem !important;
}

.an-guarantee-pill {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0 !important;
}

.an-g-icon {
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
}

.an-g-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.3 !important;
}

.an-g-text strong {
  font-family: var(--font-heading) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #1e2022 !important;
}

.an-g-text span {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: #6a6f77 !important;
}

.an-g-divider {
  width: 1px !important;
  height: 28px !important;
  background: #ebe7e2 !important;
  flex-shrink: 0 !important;
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 1024px) {
  .an-hero-container {
    grid-template-columns: 1fr !important;
    grid-template-areas: "top" "video" !important;
    gap: 2rem !important;
    max-width: 680px !important;
  }

  .an-hero-content {
    text-align: center !important;
    align-items: center !important;
  }

  .an-hero-actions {
    justify-content: center !important;
    width: 100% !important;
  }

  .an-guarantee-strip {
    margin-top: 2rem !important;
    padding: 1rem !important;
  }
}

@media (max-width: 768px) {
  .an-hero-section {
    padding: 1.5rem 1rem 2rem !important;
  }

  .an-hero-title {
    font-size: 1.85rem !important;
  }

  .an-hero-kicker {
    font-size: 1.1rem !important;
  }

  .an-btn-primary,
  .an-btn-secondary {
    width: 100% !important;
    min-width: 100% !important;
    text-align: center !important;
    padding: 0.95rem 1rem !important;
  }

  .an-hero-trust {
    flex-direction: column !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0.75rem !important;
  }

  .an-guarantee-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
    padding: 1rem !important;
  }

  .an-g-divider {
    display: none !important;
  }

  .an-guarantee-pill {
    padding: 0.4rem 0 !important;
    border-bottom: 1px solid #f4f1ec !important;
  }

  .an-guarantee-pill:last-child {
    border-bottom: none !important;
  }
}


/* ==========================================================================
   ANAMALZ-STYLE ARTISAN PROOF GALLERY & PLEDGE (#trustSection)
   ========================================================================== */

#trustSection.an-trust-section {
  position: relative !important;
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-top: 1px solid rgba(235, 231, 226, 0.8) !important;
  border-bottom: 1px solid rgba(235, 231, 226, 0.8) !important;
  color: #1A1A1A !important;
  overflow: hidden !important;
}

.an-trust-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5rem !important;
}

/* Header & Typography */
.an-trust-header {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

.an-trust-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 1rem !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.an-trust-title {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1A1A1A !important;
  margin-bottom: 1rem !important;
}

.an-trust-highlight {
  color: #FE5742 !important;
  position: relative !important;
  display: inline-block !important;
}

.an-trust-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin: 0 auto !important;
  max-width: 680px !important;
}

/* Grid Layout */
.an-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75rem !important;
  width: 100% !important;
}

/* Bento Card Design */
.an-trust-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2.25rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

.an-trust-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
  border-color: #FE5742 !important;
}

.an-trust-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem !important;
}

.an-trust-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  flex-shrink: 0 !important;
}

.an-trust-card-meta {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.an-trust-tag {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #777777 !important;
  text-transform: uppercase !important;
}

.an-tag-save {
  color: #FE5742 !important;
}

.an-trust-card-title {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Stars & Chips */
.an-stars-gold {
  color: #D4AF37 !important;
  font-size: 1.15rem !important;
  letter-spacing: 2px !important;
  flex-shrink: 0 !important;
}

.an-trust-chip-fps {
  background: rgba(30, 144, 255, 0.08) !important;
  color: #1E90FF !important;
  border: 1px solid rgba(30, 144, 255, 0.2) !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.an-trust-chip-save {
  background: rgba(254, 87, 66, 0.08) !important;
  color: #FE5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Card Description */
.an-trust-card-desc {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin-bottom: 1.5rem !important;
}

.an-trust-card-desc strong {
  color: #1A1A1A !important;
  font-weight: 600 !important;
}

/* Metric Box */
.an-trust-metric-box {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 14px !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

.an-trust-metric-num {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #1A1A1A !important;
  display: flex !important;
  align-items: baseline !important;
}

.an-metric-sub {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #777777 !important;
  margin-left: 2px !important;
}

.an-trust-metric-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

.an-trust-metric-info strong {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

.an-trust-metric-info span {
  font-size: 0.75rem !important;
  color: #666666 !important;
}

/* Card Footer */
.an-trust-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 1.15rem !important;
  border-top: 1px solid #F0ECE6 !important;
}

.an-card-accent-pill {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #666666 !important;
  background: #F4F1EC !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 6px !important;
}

.an-card-arrow-link {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #FE5742 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  transition: transform 0.2s ease !important;
}

.an-trust-card:hover .an-card-arrow-link {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   HEIRLOOM-GRADE FOUNDER GUARANTEE PLEDGE CARD
   ========================================================================== */

.an-pledge-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 24px !important;
  padding: 2.5rem 3rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 2.5rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}

.an-pledge-badge {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FFF9F0, #FFF0E0) !important;
  border: 2px solid #D4AF37 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.18) !important;
}

.an-pledge-content {
  flex: 1 !important;
}

.an-pledge-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 0.75rem !important;
  flex-wrap: wrap !important;
}

.an-pledge-tag {
  background: rgba(212, 175, 55, 0.12) !important;
  color: #A67C00 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}

.an-pledge-founder {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #666666 !important;
}

.an-pledge-title {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}

.an-pledge-text {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin: 0 !important;
  max-width: 720px !important;
}

.an-pledge-text strong {
  color: #1A1A1A !important;
}

.an-pledge-action {
  flex-shrink: 0 !important;
}

.an-pledge-btn {
  background: #FE5742 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 1.1rem 2.25rem !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.25rem !important;
  box-shadow: 0 4px 16px rgba(254, 87, 66, 0.28) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}

.an-pledge-btn:hover {
  background: #e04430 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.36) !important;
}

.an-pledge-btn span {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.an-pledge-btn small {
  font-size: 0.68rem !important;
  opacity: 0.9 !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS (< 1024px, < 768px, < 480px)
   ========================================================================== */

@media (max-width: 1024px) {
  .an-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .an-trust-grid > .an-trust-card:last-child {
    grid-column: span 2 !important;
  }

  .an-pledge-card {
    padding: 2rem !important;
    gap: 1.75rem !important;
  }
}

@media (max-width: 768px) {
  #trustSection.an-trust-section {
    padding: 3.5rem 1rem !important;
  }

  .an-trust-container {
    gap: 2.25rem !important;
  }

  .an-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .an-trust-grid > .an-trust-card:last-child {
    grid-column: span 1 !important;
  }

  .an-trust-card {
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }

  .an-pledge-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.75rem 1.25rem !important;
    gap: 1.25rem !important;
  }

  .an-pledge-badge {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.8rem !important;
    margin: 0 auto !important;
  }

  .an-pledge-meta {
    justify-content: center !important;
  }

  .an-pledge-action {
    width: 100% !important;
  }

  .an-pledge-btn {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
  }
}


/* ==========================================================================
   ANAMALZ-STYLE MASTER CRAFTSMAN ATELIER (#developerSection)
   ========================================================================== */

#developerSection.an-dev-section {
  position: relative !important;
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-top: 1px solid rgba(235, 231, 226, 0.8) !important;
  border-bottom: 1px solid rgba(235, 231, 226, 0.8) !important;
  color: #1A1A1A !important;
  overflow: hidden !important;
}

.an-dev-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
  gap: 3.5rem !important;
  align-items: center !important;
  width: 100% !important;
}

.an-dev-col-card,
.an-dev-col-copy {
  min-width: 0 !important;
  width: 100% !important;
}

/* Left Column: The Atelier Portrait Card */
.an-dev-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 24px !important;
  padding: 1.5rem !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  cursor: pointer !important;
  max-width: 470px !important;
  margin: 0 auto !important;
}

.an-dev-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08) !important;
  border-color: #FE5742 !important;
}

/* Status Bar */
.an-dev-status-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
  gap: 0.5rem !important;
}

.an-dev-live-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: #F4F1EC !important;
  border: 1px solid #EBE7E2 !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 9999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #333333 !important;
  letter-spacing: 0.04em !important;
}

.an-dev-verified-chip {
  color: #D4AF37 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* Portrait Wrapper & Micro Floating Badges */
.an-dev-portrait-wrap {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #F6F3EE !important;
  border: 1px solid #EBE7E2 !important;
  margin-bottom: 1.25rem !important;
}

.an-dev-portrait-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.an-dev-card:hover .an-dev-portrait-img {
  transform: scale(1.02) !important;
}

.an-dev-float-pill {
  position: absolute !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(235, 231, 226, 0.9) !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
  z-index: 2 !important;
}

.an-dev-float-top {
  top: 14px !important;
  left: 14px !important;
}

.an-dev-float-bottom {
  bottom: 14px !important;
  right: 14px !important;
}

.an-float-emoji {
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.an-dev-float-pill strong {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  line-height: 1.2 !important;
}

.an-dev-float-pill span {
  display: block !important;
  font-size: 0.68rem !important;
  color: #666666 !important;
}

/* Card Identity & Pedigree Rail */
.an-dev-identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.an-dev-name-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.an-dev-name {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.an-dev-title {
  font-size: 0.82rem !important;
  color: #666666 !important;
  margin: 0.2rem 0 0 !important;
}

.an-dev-price-chip {
  background: rgba(254, 87, 66, 0.08) !important;
  color: #FE5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
}

/* Studio Stats Rail */
.an-dev-stats-rail {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 12px !important;
  padding: 0.75rem 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.an-dev-stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.an-stat-num {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
  line-height: 1.1 !important;
}

.an-stat-lbl {
  font-size: 0.68rem !important;
  color: #666666 !important;
  margin-top: 0.15rem !important;
}

.an-dev-stat-divider {
  width: 1px !important;
  height: 24px !important;
  background: #EBE7E2 !important;
}

/* Tech Chips */
.an-dev-tech-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}

.an-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: #F4F1EC !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #444444 !important;
}

/* Right Column: Master Copy, Segmented Switcher & Pillars */
.an-dev-eyebrow-wrap {
  margin-bottom: 1.25rem !important;
}

.an-dev-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 1rem !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.an-dev-headline {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  color: #1A1A1A !important;
  margin-bottom: 1.25rem !important;
}

.an-dev-accent {
  color: #FE5742 !important;
}

.an-dev-lead-bio {
  font-size: clamp(0.98rem, 1.3vw, 1.1rem) !important;
  line-height: 1.65 !important;
  color: #555555 !important;
  margin-bottom: 2rem !important;
}

.an-dev-lead-bio strong {
  color: #1A1A1A !important;
}

/* Segmented Pill Switcher */
.an-dev-segmented-wrap {
  display: inline-flex !important;
  background: #EFEBE5 !important;
  padding: 4px !important;
  border-radius: 9999px !important;
  gap: 4px !important;
  margin-bottom: 1.75rem !important;
  border: 1px solid #E5E0D8 !important;
}

.an-dev-tab-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.6rem 1.4rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #666666 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.an-dev-tab-btn .an-tab-tag {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #555555 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 9999px !important;
  transition: all 0.25s ease !important;
}

.an-dev-tab-btn.active {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.an-dev-tab-btn.active .an-tab-tag {
  background: #FE5742 !important;
  color: #FFFFFF !important;
}

/* Pillars List */
.an-dev-pillars {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  margin-bottom: 2rem !important;
}

.an-pillar-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 14px !important;
  padding: 1.15rem 1.25rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}

.an-pillar-card:hover {
  transform: translateY(-2px) !important;
  border-color: #FE5742 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
}

.an-pillar-icon {
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.an-pillar-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.an-pillar-body strong {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

.an-pillar-body span {
  font-size: 0.85rem !important;
  color: #666666 !important;
  line-height: 1.5 !important;
}

/* Quote Box */
.an-dev-quote-box {
  background: #F4F1EC !important;
  border: 1px solid #EBE7E2 !important;
  border-left: 4px solid #FE5742 !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  position: relative !important;
  margin-bottom: 2rem !important;
}

.an-quote-mark {
  position: absolute !important;
  top: 6px !important;
  right: 18px !important;
  font-size: 3rem !important;
  font-family: Georgia, serif !important;
  color: rgba(0, 0, 0, 0.06) !important;
  line-height: 1 !important;
}

.an-dev-quote-text {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #444444 !important;
  margin: 0 0 0.85rem !important;
  font-style: italic !important;
}

.an-dev-quote-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.an-dev-signature {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #1A1A1A !important;
}

.an-dev-badge-gold {
  color: #A67C00 !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

/* CTA Action Suite */
.an-dev-cta-suite {
  display: flex !important;
  gap: 1rem !important;
  align-items: stretch !important;
}

.an-dev-btn-primary {
  flex: 1.2 !important;
  background: #FE5742 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 1rem 1.75rem !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  box-shadow: 0 4px 16px rgba(254, 87, 66, 0.28) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}

.an-dev-btn-primary:hover {
  background: #e04430 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(254, 87, 66, 0.36) !important;
}

.an-dev-btn-primary .an-btn-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.an-dev-btn-primary .an-btn-subtitle {
  font-size: 0.68rem !important;
  opacity: 0.9 !important;
}

.an-dev-btn-secondary {
  flex: 1 !important;
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  padding: 1rem 1.5rem !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.an-dev-btn-secondary:hover {
  transform: translateY(-2px) !important;
  border-color: #FE5742 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.an-dev-btn-secondary .an-btn-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

.an-dev-btn-secondary .an-btn-subtitle {
  font-size: 0.68rem !important;
  color: #666666 !important;
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS (< 1024px, < 768px, < 480px)
   ========================================================================== */

@media (max-width: 1024px) {
  .an-dev-container {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  .an-dev-card {
    max-width: 520px !important;
  }
}

@media (max-width: 768px) {
  #developerSection.an-dev-section {
    padding: 3.5rem 1rem !important;
  }

  .an-dev-card {
    padding: 1.15rem !important;
    border-radius: 18px !important;
  }

  .an-dev-float-pill {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.65rem !important;
  }

  .an-dev-segmented-wrap {
    width: 100% !important;
    display: flex !important;
  }

  .an-dev-tab-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  .an-dev-cta-suite {
    flex-direction: column !important;
  }

  .an-dev-btn-primary,
  .an-dev-btn-secondary {
    width: 100% !important;
  }
}


/* ==========================================================================
   ANAMALZ-STYLE STUDIO PRODUCTION LEDGER (#metricsSection)
   ========================================================================== */

#metricsSection.an-metrics-section {
  position: relative !important;
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-top: 1px solid rgba(235, 231, 226, 0.8) !important;
  border-bottom: 1px solid rgba(235, 231, 226, 0.8) !important;
  color: #1A1A1A !important;
  overflow: hidden !important;
}

.an-metrics-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5rem !important;
}

/* Header & Typography */
.an-metrics-header {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

.an-metrics-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 1rem !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.an-metrics-title {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1A1A1A !important;
  margin-bottom: 1rem !important;
}

.an-metrics-accent {
  color: #FE5742 !important;
  position: relative !important;
  display: inline-block !important;
}

.an-metrics-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin: 0 auto !important;
  max-width: 680px !important;
}

/* 4-Card Grid */
.an-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

/* Card Design */
.an-metric-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2rem 1.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  cursor: pointer !important;
}

.an-metric-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
  border-color: #FE5742 !important;
}

.an-metric-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.5rem !important;
}

.an-metric-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
}

.an-metric-badge {
  background: rgba(254, 87, 66, 0.08) !important;
  color: #FE5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.04em !important;
}

.an-badge-blue {
  background: rgba(30, 144, 255, 0.08) !important;
  color: #1E90FF !important;
  border-color: rgba(30, 144, 255, 0.2) !important;
}

.an-badge-speed {
  background: rgba(147, 51, 234, 0.08) !important;
  color: #9333EA !important;
  border-color: rgba(147, 51, 234, 0.2) !important;
}

.an-badge-alumni {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Number Value Formatting */
.an-metric-value-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  margin-bottom: 0.5rem !important;
}

.an-counter-num {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(2.2rem, 3.2vw, 2.85rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #1A1A1A !important;
  letter-spacing: -0.03em !important;
}

.an-counter-unit {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #777777 !important;
}

.an-metric-heading {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.25 !important;
}

.an-metric-detail {
  font-size: 0.85rem !important;
  color: #666666 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.an-metric-divider {
  height: 1px !important;
  background: #F0ECE6 !important;
  margin: 1.4rem 0 1rem !important;
}

.an-metric-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #FE5742 !important;
}

.an-action-arrow {
  transition: transform 0.2s ease !important;
}

.an-metric-card:hover .an-action-arrow {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   THE STUDIO ALLOCATION LEDGER (BOTTOM RAIL)
   ========================================================================== */

.an-allocation-bar {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 1.75rem 2.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.an-allocation-left {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.an-allocation-live-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2) !important;
  flex-shrink: 0 !important;
  animation: pulse-dot 2s infinite !important;
}

.an-allocation-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.an-allocation-text strong {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1A1A1A !important;
}

.an-allocation-text span {
  font-size: 0.92rem !important;
  color: #555555 !important;
}

.an-allocation-actions {
  display: flex !important;
  gap: 0.85rem !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.an-alloc-btn-primary {
  background: #FE5742 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.75rem !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.an-alloc-btn-primary:hover {
  background: #e04430 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.35) !important;
}

.an-alloc-btn-secondary {
  background: #F4F1EC !important;
  color: #1A1A1A !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.4rem !important;
  cursor: pointer !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.an-alloc-btn-secondary:hover {
  background: #ECE7DF !important;
  border-color: #DDD6CC !important;
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS (< 1024px, < 768px, < 480px)
   ========================================================================== */

@media (max-width: 1024px) {
  .an-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  .an-allocation-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.25rem !important;
    padding: 1.75rem !important;
  }

  .an-allocation-left {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .an-allocation-actions {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  #metricsSection.an-metrics-section {
    padding: 3.5rem 1rem !important;
  }

  .an-metrics-container {
    gap: 2.25rem !important;
  }

  .an-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .an-metric-card {
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }

  .an-allocation-bar {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  .an-allocation-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .an-alloc-btn-primary,
  .an-alloc-btn-secondary {
    width: 100% !important;
    text-align: center !important;
    padding: 0.9rem !important;
  }
}


/* ==========================================================================
   ANAMALZ-STYLE SOFTWARE CONTRAST LEDGER (#problemSection)
   ========================================================================== */

#problemSection.an-problem-section {
  position: relative !important;
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-top: 1px solid rgba(235, 231, 226, 0.8) !important;
  border-bottom: 1px solid rgba(235, 231, 226, 0.8) !important;
  color: #1A1A1A !important;
  overflow: hidden !important;
}

.an-problem-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3.5rem !important;
}

/* Header & Typography */
.an-problem-header {
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

.an-problem-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 1rem !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.an-problem-title {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1A1A1A !important;
  margin-bottom: 1rem !important;
}

.an-problem-accent {
  color: #FE5742 !important;
  position: relative !important;
  display: inline-block !important;
}

.an-problem-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
}

/* 3-Card Grid */
.an-problem-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75rem !important;
  width: 100% !important;
}

/* Card Styling */
.an-contrast-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2.25rem 1.85rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

.an-contrast-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
  border-color: #FE5742 !important;
}

.an-contrast-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
}

.an-contrast-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
}

.an-contrast-badge {
  background: rgba(254, 87, 66, 0.08) !important;
  color: #FE5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 9999px !important;
}

.an-badge-blue {
  background: rgba(30, 144, 255, 0.08) !important;
  color: #1E90FF !important;
  border-color: rgba(30, 144, 255, 0.2) !important;
}

.an-badge-gold {
  background: rgba(212, 175, 55, 0.12) !important;
  color: #A67C00 !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}

.an-contrast-heading {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 1.25rem 0 !important;
  line-height: 1.25 !important;
}

/* Compare Blocks */
.an-compare-block {
  border-radius: 12px !important;
  padding: 1.1rem 1.15rem !important;
  margin-bottom: 1rem !important;
}

.an-block-agency {
  background: #F9F7F5 !important;
  border: 1px solid #EAE5DF !important;
}

.an-block-studio {
  background: #FFF9F7 !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
}

.an-compare-tag {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
}

.an-tag-agency {
  color: #888888 !important;
}

.an-tag-studio {
  color: #FE5742 !important;
}

.an-compare-text {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #555555 !important;
  margin: 0 !important;
}

.an-compare-text strong {
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

/* Card Footer */
.an-contrast-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 1.15rem !important;
  border-top: 1px solid #F0ECE6 !important;
  margin-top: 0.5rem !important;
}

.an-contrast-stat {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

.an-contrast-arrow {
  color: #FE5742 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  transition: transform 0.2s ease !important;
}

.an-contrast-card:hover .an-contrast-arrow {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   THE SAFE HAVEN STUDIO PLEDGE RAIL
   ========================================================================== */

.an-safehaven-bar {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 1.75rem 2.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.an-safehaven-left {
  display: flex !important;
  align-items: center !important;
  gap: 1.15rem !important;
}

.an-safehaven-shield {
  font-size: 2rem !important;
  flex-shrink: 0 !important;
}

.an-safehaven-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.an-safehaven-text strong {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1A1A1A !important;
}

.an-safehaven-text span {
  font-size: 0.92rem !important;
  color: #555555 !important;
}

.an-safehaven-actions {
  display: flex !important;
  gap: 0.85rem !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.an-safehaven-btn-primary {
  background: #FE5742 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.75rem !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(254, 87, 66, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.an-safehaven-btn-primary:hover {
  background: #e04430 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.35) !important;
}

.an-safehaven-btn-secondary {
  background: #F4F1EC !important;
  color: #1A1A1A !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.4rem !important;
  cursor: pointer !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.an-safehaven-btn-secondary:hover {
  background: #ECE7DF !important;
  border-color: #DDD6CC !important;
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS (< 1024px, < 768px, < 480px)
   ========================================================================== */

@media (max-width: 1024px) {
  .an-problem-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .an-safehaven-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.25rem !important;
    padding: 1.75rem !important;
  }

  .an-safehaven-left {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .an-safehaven-actions {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  #problemSection.an-problem-section {
    padding: 3.5rem 1rem !important;
  }

  .an-problem-container {
    gap: 2.25rem !important;
  }

  .an-contrast-card {
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }

  .an-safehaven-bar {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
  }

  .an-safehaven-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .an-safehaven-btn-primary,
  .an-safehaven-btn-secondary {
    width: 100% !important;
    text-align: center !important;
    padding: 0.9rem !important;
  }
}


/* ==========================================================================
   ANAMALZ-STYLE COMPREHENSIVE ATELIER SUITE
   (#solutionSection, #logosSection, #caseStudiesSection, #socialProofSection,
    #certificationsSection, #pressSection, #courseSection, #faqSection,
    #floatingMobileBar, #enrollModal, #callModal, #projectModal, #resourceModal,
    #backToTopBtn, #tidio-chat-code, #tidio-chat)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. #solutionSection — THE MODULAR CRAFT WORKSHOP
   -------------------------------------------------------------------------- */
#solutionSection.solution-section {
  background-color: #FBF9F7 !important;
  background-image: radial-gradient(rgba(30, 32, 34, 0.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  padding: 5.5rem 1.5rem !important;
  border-top: 1px solid rgba(235, 231, 226, 0.85) !important;
  border-bottom: 1px solid rgba(235, 231, 226, 0.85) !important;
  color: #1A1A1A !important;
}

#solutionSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.solution-eyebrow-badge,
.logos-eyebrow-badge,
.cs-eyebrow-badge,
.proof-eyebrow-badge,
.cert-eyebrow-badge,
.press-eyebrow-badge,
.pathway-eyebrow-badge,
.faq-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 1.05rem !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.solution-main-title,
.logos-main-title,
.cs-main-title,
.proof-main-title,
.cert-main-title,
.press-main-title,
.pathway-main-title,
.faq-main-title {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1A1A1A !important;
  margin: 0.5rem auto 1rem !important;
  max-width: 860px !important;
  text-align: center !important;
}

.text-gradient-red,
.text-gradient-blue {
  background: none !important;
  -webkit-text-fill-color: #FE5742 !important;
  color: #FE5742 !important;
}

.solution-main-subtitle,
.logos-main-subtitle,
.cs-main-subtitle,
.proof-main-subtitle,
.cert-main-subtitle,
.press-main-subtitle,
.pathway-main-subtitle,
.faq-main-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.65 !important;
  color: #555555 !important;
  max-width: 720px !important;
  margin: 0 auto 3rem !important;
  text-align: center !important;
}

.solution-modules-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.75rem !important;
  margin-bottom: 3rem !important;
}

.solution-module-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

.solution-module-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
  border-color: #FE5742 !important;
}

.module-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
}

.module-status-badge {
  background: rgba(254, 87, 66, 0.08) !important;
  color: #FE5742 !important;
  border: 1px solid rgba(254, 87, 66, 0.2) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 0.28rem 0.7rem !important;
  border-radius: 9999px !important;
}

.module-title {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 1rem 0 0.6rem !important;
}

.module-desc {
  font-size: 0.92rem !important;
  color: #555555 !important;
  line-height: 1.6 !important;
  margin-bottom: 1.25rem !important;
}

.tech-chip {
  background: #F4F1EC !important;
  border: 1px solid #EBE7E2 !important;
  color: #333333 !important;
  border-radius: 8px !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
}

.module-metric-footer {
  border-top: 1px solid #F0ECE6 !important;
  padding-top: 1rem !important;
  margin-top: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.module-metric-val {
  color: #FE5742 !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   2. #logosSection — THE ECOSYSTEM & INTEGRATION LEDGER
   -------------------------------------------------------------------------- */
#logosSection.logos-section {
  background-color: #F4F1EC !important;
  padding: 5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#logosSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.logos-bento-card,
.ecosystem-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.logos-bento-card:hover,
.ecosystem-card:hover {
  transform: translateY(-4px) !important;
  border-color: #FE5742 !important;
}

/* Unified Bottom Concierge Banners across sections */
.solution-bottom-banner,
.logos-bottom-banner,
.cs-bottom-banner,
.proof-bottom-banner,
.cert-bottom-banner,
.faq-support-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 22px !important;
  padding: 2rem 2.5rem !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04) !important;
  color: #1A1A1A !important;
}

.solution-bottom-banner h3,
.solution-bottom-banner h4,
.logos-bottom-banner h3,
.logos-bottom-banner h4,
.cs-bottom-banner h3,
.cs-bottom-banner h4,
.faq-support-title {
  color: #1A1A1A !important;
  font-family: 'Jost', sans-serif !important;
}

.solution-bottom-banner p,
.logos-bottom-banner p,
.cs-bottom-banner p,
.faq-support-desc {
  color: #555555 !important;
}

/* --------------------------------------------------------------------------
   3. #caseStudiesSection — THE FOUNDER TRANSFORMATION FOLIOS
   -------------------------------------------------------------------------- */
#caseStudiesSection.case-studies-section {
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#caseStudiesSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.cs-stories-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75rem !important;
  margin-bottom: 3rem !important;
}

.cs-story-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 22px !important;
  padding: 2rem 1.75rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.cs-story-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07) !important;
  border-color: #FE5742 !important;
}

.cs-metrics-row {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 14px !important;
  padding: 0.9rem 0.75rem !important;
  margin: 1.15rem 0 !important;
}

.cs-metric-num {
  font-family: 'Jost', sans-serif !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
}

.cs-state.state-before {
  background: #F9F7F5 !important;
  border: 1px solid #EAE5DF !important;
  border-radius: 12px !important;
  padding: 0.95rem 1.1rem !important;
}

.cs-state.state-after {
  background: #FFF9F7 !important;
  border: 1px solid rgba(254, 87, 66, 0.22) !important;
  border-radius: 12px !important;
  padding: 0.95rem 1.1rem !important;
}

.cs-state-title {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* --------------------------------------------------------------------------
   4. #socialProofSection — THE GLOBAL FOUNDER LOVE WALL
   -------------------------------------------------------------------------- */
#socialProofSection.social-proof-section {
  background-color: #F4F1EC !important;
  padding: 5.5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#socialProofSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.proof-reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.75rem !important;
  margin-bottom: 2.5rem !important;
}

.proof-review-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.proof-review-card:hover {
  transform: translateY(-4px) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06) !important;
}

.review-stars {
  color: #D4AF37 !important;
  font-size: 1.15rem !important;
  letter-spacing: 2px !important;
}

.author-avatar {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
}

.review-body {
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: #444444 !important;
}

.review-footer-badge {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  color: #1A1A1A !important;
  border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
   5. #certificationsSection — THE FOUR ATELIER HALLMARKS
   -------------------------------------------------------------------------- */
#certificationsSection.certifications-section {
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#certificationsSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.cert-seals-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.75rem !important;
}

.cert-seal-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}

.cert-seal-card:hover {
  transform: translateY(-5px) !important;
  border-color: #FE5742 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
}

.seal-title {
  font-family: 'Jost', sans-serif !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

.seal-desc {
  color: #555555 !important;
  line-height: 1.6 !important;
}

.seal-action-prompt {
  color: #FE5742 !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   6. #pressSection — THE EDITORIAL PRESS & RECOGNITION LEDGER
   -------------------------------------------------------------------------- */
#pressSection.press-section {
  background-color: #F4F1EC !important;
  padding: 5.5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#pressSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.press-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75rem !important;
  margin-bottom: 2.5rem !important;
}

.press-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}

.press-card:hover {
  transform: translateY(-5px) !important;
  border-color: #FE5742 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
}

.press-ticker-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.75rem !important;
}

.ticker-tag {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  color: #333333 !important;
  border-radius: 9999px !important;
  padding: 0.35rem 0.9rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   7. #courseSection — THE TWO STUDIO PATHWAYS (DFY vs. CODE VAULT)
   -------------------------------------------------------------------------- */
#courseSection.pathway-section {
  background-color: #FBF9F7 !important;
  padding: 5.5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#courseSection .section-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.vault-templates-bar {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 18px !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 2.5rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.vault-chip {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  color: #333333 !important;
  border-radius: 9999px !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

.pathway-dual-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.pathway-card {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 24px !important;
  padding: 2.5rem 2.25rem !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.pathway-card.card-dfy {
  border-top: 4px solid #FE5742 !important;
}

.pathway-card.card-mentorship {
  border-top: 4px solid #D4AF37 !important;
}

.pathway-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.08) !important;
}

.pathway-price-box {
  background: #FBF9F7 !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.25rem 0 !important;
}

.pathway-price-val {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(2rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
}

.pathway-btn-primary {
  background: #FE5742 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 1rem 1.75rem !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(254, 87, 66, 0.28) !important;
}

.pathway-btn-primary:hover {
  background: #e04430 !important;
  transform: translateY(-2px) !important;
}

.pathway-btn-secondary {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 1rem 1.75rem !important;
  font-weight: 700 !important;
  width: 100% !important;
}

.pathway-btn-secondary:hover {
  background: #FE5742 !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   8. #faqSection — THE CONCIERGE KNOWLEDGE BASE
   -------------------------------------------------------------------------- */
#faqSection.faq-section {
  background-color: #F4F1EC !important;
  padding: 5.5rem 1.5rem !important;
  border-bottom: 1px solid #EBE7E2 !important;
}

#faqSection .section-container {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.faq-search-box {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 9999px !important;
  padding: 0.45rem 1.25rem !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
}

.faq-search-box:focus-within {
  border-color: #FE5742 !important;
  box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.14) !important;
}

.faq-tabs-ribbon {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 1.5rem 0 2.25rem !important;
}

.faq-tab-btn {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  color: #555555 !important;
  border-radius: 9999px !important;
  padding: 0.55rem 1.15rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.faq-tab-btn.active,
.faq-tab-btn:hover {
  background: #FE5742 !important;
  border-color: #FE5742 !important;
  color: #FFFFFF !important;
}

.faq-item {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 16px !important;
  margin-bottom: 0.85rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.faq-item.open,
.faq-item:hover {
  border-color: rgba(254, 87, 66, 0.45) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

.faq-question {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

/* --------------------------------------------------------------------------
   9–12. CONVERSION MODALS (#enrollModal, #callModal, #projectModal, #resourceModal)
   -------------------------------------------------------------------------- */
#enrollModal .modal-content,
#callModal .modal-content,
#projectModal .modal-content,
#resourceModal .modal-content {
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.18) !important;
  overflow: hidden !important;
}

.enroll-modal-header,
.call-modal-header,
.project-modal-header,
.resource-modal-header {
  background: #FBF9F7 !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid #EBE7E2 !important;
  padding: 1.6rem 1.85rem 1.35rem !important;
  position: relative !important;
  display: block !important;
}

.enroll-modal-header .btn-close,
.call-modal-header .btn-close,
.project-modal-header .btn-close,
.resource-modal-header .btn-close {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background-color: #EFEBE5 !important;
  border: 1px solid #E5E0D8 !important;
  filter: none !important;
  opacity: 0.85 !important;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease !important;
}

.enroll-modal-header .btn-close:hover,
.call-modal-header .btn-close:hover,
.project-modal-header .btn-close:hover,
.resource-modal-header .btn-close:hover {
  background-color: #E5DFD5 !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

.enroll-modal-badge,
.call-modal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE7E2 !important;
  color: #FE5742 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 9999px !important;
  margin-bottom: 0.65rem !important;
}

.enroll-modal-title,
.call-modal-title {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem) !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 0.4rem !important;
  line-height: 1.25 !important;
}

.enroll-modal-sub,
.call-modal-sub {
  font-size: 0.88rem !important;
  color: #555555 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.enroll-modal-sub strong,
.call-modal-sub strong {
  color: #1A1A1A !important;
}

/* Tactile Modal Option Pills & Inputs */
.pill-radio-label,
.app-type-card {
  background: #FBF9F7 !important;
  border: 1.5px solid #EBE7E2 !important;
  color: #444444 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

.pill-radio-label.active,
.app-type-card.active {
  background: #FFF9F7 !important;
  border-color: #FE5742 !important;
  color: #1A1A1A !important;
  box-shadow: 0 4px 12px rgba(254, 87, 66, 0.1) !important;
}

.form-control-modern,
#projectModal .form-control,
#resourceModal .form-control {
  background-color: #FBF9F7 !important;
  border: 1.5px solid #EBE7E2 !important;
  border-radius: 12px !important;
  color: #1A1A1A !important;
}

.form-control-modern:focus,
#projectModal .form-control:focus,
#resourceModal .form-control:focus {
  background-color: #FFFFFF !important;
  border-color: #FE5742 !important;
  box-shadow: 0 0 0 3px rgba(254, 87, 66, 0.14) !important;
}

.call-btn-submit,
#projectModal .btn-submit,
#resourceModal .btn-submit {
  background: #FE5742 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.95rem 1.5rem !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(254, 87, 66, 0.28) !important;
}

.call-btn-submit:hover,
#projectModal .btn-submit:hover,
#resourceModal .btn-submit:hover {
  background: #e04430 !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   13–16. FLOATING VIEWPORT CHROME
   (#floatingMobileBar, #backToTopBtn, #tidio-chat-code, #tidio-chat)
   -------------------------------------------------------------------------- */

/* #backToTopBtn — Boutique Architectural Elevation Button */
#backToTopBtn.an-back-to-top {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid #EBE7E2 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.1) !important;
  bottom: 28px !important;
  left: 24px !important;
}

#backToTopBtn.an-back-to-top .an-top-chevron {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  filter: none !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

#backToTopBtn.an-back-to-top:hover {
  border-color: #FE5742 !important;
  box-shadow: 0 12px 30px rgba(254, 87, 66, 0.22) !important;
}

#backToTopBtn.an-back-to-top:hover .an-top-chevron {
  color: #FE5742 !important;
  transform: translateY(-3px) !important;
}

#backToTopBtn.an-back-to-top .an-top-tooltip {
  background: #1A1A1A !important;
  color: #FBF9F7 !important;
  border-radius: 9999px !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

/* #floatingMobileBar — Frosted Warm Sand Capsule */
#floatingMobileBar .an-floating-capsule {
  background: rgba(251, 249, 247, 0.96) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid #EBE7E2 !important;
  box-shadow: 0 12px 36px rgba(26, 26, 26, 0.14) !important;
}

/* #tidio-chat & #tidio-chat-iframe — Viewport & Modal Harmonization */
#tidio-chat,
#tidio-chat-iframe {
  z-index: 1940 !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* Automatically hide Tidio bubble when any Bootstrap conversion modal is open */
body.modal-open #tidio-chat,
body.modal-open #tidio-chat-iframe {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS (< 1024px, < 768px, < 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cs-stories-grid,
  .press-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pathway-dual-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #solutionSection.solution-section,
  #logosSection.logos-section,
  #caseStudiesSection.case-studies-section,
  #socialProofSection.social-proof-section,
  #certificationsSection.certifications-section,
  #pressSection.press-section,
  #courseSection.pathway-section,
  #faqSection.faq-section {
    padding: 3.5rem 1rem !important;
  }

  .solution-modules-grid,
  .cs-stories-grid,
  .proof-reviews-grid,
  .cert-seals-grid,
  .press-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .solution-bottom-banner,
  .logos-bottom-banner,
  .cs-bottom-banner,
  .faq-support-card {
    padding: 1.5rem 1.25rem !important;
    text-align: center !important;
    flex-direction: column !important;
  }

  /* Elevate #backToTopBtn and #tidio-chat symmetrically above #floatingMobileBar */
  #backToTopBtn.an-back-to-top {
    bottom: 82px !important;
    left: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }

  #tidio-chat-iframe {
    bottom: 76px !important;
    right: 10px !important;
    max-height: calc(100dvh - 140px) !important;
  }
}

@media (max-width: 640px) {
  /* Bottom-Sheet Ergonomics for All 4 Conversion Modals */
  #enrollModal .modal-dialog,
  #callModal .modal-dialog,
  #projectModal .modal-dialog,
  #resourceModal .modal-dialog {
    margin: 0 !important;
    align-items: flex-end !important;
    min-height: 100% !important;
  }

  #enrollModal .modal-content,
  #callModal .modal-content,
  #projectModal .modal-content,
  #resourceModal .modal-content {
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
  }
}


/* ==========================================================================
   MOBILE HERO VIDEO REORDER: PLACE VIDEO DIRECTLY AFTER TITLE (< 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .an-hero-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.15rem !important;
  }

  /* Unwrap .an-hero-content so its children participate directly in the flex order */
  .an-hero-content {
    display: contents !important;
  }

  .an-hero-eyebrow-wrap {
    order: 1 !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .an-hero-title {
    order: 2 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .an-hero-media {
    order: 3 !important;
    width: 100% !important;
    margin: 0.35rem 0 !important;
  }

  .an-hero-description {
    order: 4 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .an-hero-actions {
    order: 5 !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .an-hero-trust {
    order: 6 !important;
    margin: 0.25rem auto 0 !important;
  }
}