/* ============================================
   BECOME A TRAINER — OPTIMIZED CSS
   ============================================ */

   .trainer-page * { box-sizing: border-box; }
   .trainer-page { font-family: 'Segoe UI', sans-serif; }
   
   /* ---- FADE UP ANIMATION ---- */
   .fade-up {
       opacity: 0;
       transform: translateY(40px);
       transition: opacity .8s ease, transform .8s ease;
   }
   .fade-up.visible {
       opacity: 1;
       transform: translateY(0);
   }
   .fade-up.delay-1 { transition-delay: .1s; }
   .fade-up.delay-2 { transition-delay: .2s; }
   .fade-up.delay-3 { transition-delay: .3s; }
   .fade-up.delay-4 { transition-delay: .4s; }
   .fade-up.delay-5 { transition-delay: .5s; }
   .fade-up.delay-6 { transition-delay: .6s; }
   
   /* ---- HERO ---- */
   .trainer-hero-v2 {
       min-height: 100vh;
       background: linear-gradient(-45deg, #0f0c29, #1a1a5e, #302b63, #0f3460, #1565c0);
       background-size: 400% 400%;
       animation: heroGradient 12s ease infinite;
       position: relative;
       overflow: hidden;
       display: flex;
       align-items: center;
       padding: 100px 0 60px;
   }
   @keyframes heroGradient {
       0%   { background-position: 0% 50%; }
       50%  { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   .hero-blob {
       position: absolute;
       border-radius: 50%;
       filter: blur(80px);
       opacity: 0.2;
       pointer-events: none;
       animation: blobFloat 8s ease-in-out infinite;
   }
   .hero-blob-1 { width:500px; height:500px; background:#667eea; top:-100px; left:-100px; }
   .hero-blob-2 { width:400px; height:400px; background:#f6d365; bottom:-80px; right:-80px; animation-delay:2s; animation-direction:reverse; }
   .hero-blob-3 { width:300px; height:300px; background:#a8edea; top:50%; left:50%; animation-delay:4s; }
   @keyframes blobFloat {
       0%,100% { transform: translateY(0) scale(1); }
       50%      { transform: translateY(-25px) scale(1.05); }
   }
   .hero-dots {
       position: absolute;
       inset: 0;
       background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
       background-size: 28px 28px;
       pointer-events: none;
   }
   
   /* Hero Badge */
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(255,255,255,.12);
       border: 1px solid rgba(255,255,255,.2);
       color: #fff;
       padding: 8px 18px;
       border-radius: 50px;
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 25px;
       animation: slideLeft .8s ease forwards;
   }
   @keyframes slideLeft {
       from { opacity:0; transform:translateX(-30px); }
       to   { opacity:1; transform:translateX(0); }
   }
   
   /* Hero Title */
   .hero-title-v2 {
       font-size: clamp(2rem, 5vw, 3.6rem);
       font-weight: 900;
       color: #fff;
       line-height: 1.1;
       margin-bottom: 20px;
   }
   .hero-title-v2 .highlight { color: #f6d365; font-style: italic; }
   
   .hero-subtitle-v2 {
       font-size: 1.05rem;
       color: rgba(255,255,255,.8);
       margin-bottom: 35px;
       line-height: 1.7;
   }
   .hero-subtitle-v2 strong { color: #f6d365; }
   
   /* Hero Buttons */
   .hero-btns { display:flex; gap:15px; flex-wrap:wrap; margin-bottom:35px; }
   
   .btn-hero-primary {
       background: linear-gradient(135deg, #f6d365, #fda085);
       color: #1a1a2e;
       border: none;
       padding: 14px 32px;
       border-radius: 50px;
       font-weight: 700;
       font-size: 15px;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: transform .3s, box-shadow .3s;
       position: relative;
       overflow: hidden;
   }
   .btn-hero-primary:hover {
       transform: scale(1.05);
       box-shadow: 0 15px 35px rgba(253,160,133,.4);
       color: #1a1a2e;
   }
   .btn-hero-primary .arrow { transition: transform .3s; }
   .btn-hero-primary:hover .arrow { transform: translateX(5px); }
   
   .btn-hero-secondary {
       background: rgba(255,255,255,.1);
       color: #fff;
       border: 2px solid rgba(255,255,255,.3);
       padding: 14px 32px;
       border-radius: 50px;
       font-weight: 600;
       font-size: 15px;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: all .3s;
   }
   .btn-hero-secondary:hover { background:rgba(255,255,255,.2); color:#fff; }
   
   /* Hero Trust */
   .hero-trust { display:flex; align-items:center; gap:12px; }
   .hero-avatars { display:flex; }
   .hero-avatars span {
       width:36px; height:36px;
       border-radius:50%;
       border: 2px solid rgba(255,255,255,.4);
       background: linear-gradient(135deg,#667eea,#764ba2);
       color:#fff; font-size:12px; font-weight:700;
       display:flex; align-items:center; justify-content:center;
       margin-left:-8px;
   }
   .hero-avatars span:first-child { margin-left:0; }
   .hero-trust-text { color:rgba(255,255,255,.75); font-size:13px; }
   
   /* Floating Cards */
   .float-card {
       position: absolute;
       background: rgba(255,255,255,.97);
       border-radius: 16px;
       padding: 15px 20px;
       box-shadow: 0 20px 50px rgba(0,0,0,.2);
       animation: floatAnim 4s ease-in-out infinite;
       min-width: 130px;
   }
   .float-card-1 { top:8%; left:-5%; animation-delay:0s; }
   .float-card-2 { top:42%; right:-3%; animation-delay:1.5s; }
   .float-card-3 { bottom:8%; left:5%; animation-delay:3s; }
   @keyframes floatAnim {
       0%,100% { transform:translateY(0); }
       50%      { transform:translateY(-10px); }
   }
   .fc-icon {
       width:34px; height:34px;
       background: linear-gradient(135deg,#f6d365,#fda085);
       border-radius:9px;
       display:flex; align-items:center; justify-content:center;
       margin-bottom:8px; color:#1a1a2e; font-size:16px;
   }
   .fc-value { font-size:1.4rem; font-weight:800; color:#1a1a2e; line-height:1; }
   .fc-label { font-size:11px; color:#718096; margin-top:3px; }
   
   /* ---- STATS BAR ---- */
   .stats-bar-v2 { background:#0f172a; padding:40px 0; }
   .stat-item-v2 {
       text-align:center; padding:15px 20px;
       border-right:1px solid rgba(255,255,255,.08);
   }
   .stat-item-v2:last-child { border-right:none; }
   .stat-icon-wrap {
       width:48px; height:48px;
       background:rgba(246,211,101,.1);
       border-radius:12px;
       display:flex; align-items:center; justify-content:center;
       margin:0 auto 12px; font-size:20px; color:#f6d365;
   }
   .stat-num {
       font-size:2rem; font-weight:800;
       color:#f6d365; line-height:1;
   }
   .stat-label { color:#94a3b8; font-size:13px; margin-top:5px; }
   
   /* ---- SECTIONS COMMON ---- */
   .section-tag {
       display:inline-block;
       background:rgba(102,126,234,.1);
       color:#667eea; padding:6px 18px;
       border-radius:50px; font-size:13px;
       font-weight:600; margin-bottom:15px;
   }
   .section-title-v2 {
       font-size:clamp(1.7rem,3vw,2.4rem);
       font-weight:800; color:#1a202c; margin-bottom:12px;
   }
   .section-title-v2 span { color:#f6a623; }
   .section-subtitle {
       color:#718096; font-size:.95rem;
       max-width:500px; margin:0 auto; line-height:1.7;
   }
   
   /* ---- WHY JOIN ---- */
   .why-join-section { padding:90px 0; background:#fff; }
   
   .benefit-card-v2 {
       background:#fff;
       border:1px solid #e2e8f0;
       border-radius:20px;
       padding:32px 24px;
       height:100%;
       transition:all .35s ease;
       position:relative;
       overflow:hidden;
   }
   .benefit-card-v2::after {
       content:'';
       position:absolute;
       bottom:0; left:0; right:0;
       height:3px;
       background:linear-gradient(135deg,#f6d365,#fda085);
       transform:scaleX(0);
       transition:transform .35s ease;
   }
   .benefit-card-v2:hover { transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,.08); border-color:#f6d365; }
   .benefit-card-v2:hover::after { transform:scaleX(1); }
   
   .benefit-icon-v2 {
       width:62px; height:62px;
       border-radius:16px;
       background:linear-gradient(135deg,rgba(246,211,101,.12),rgba(253,160,133,.12));
       display:flex; align-items:center; justify-content:center;
       margin-bottom:18px; font-size:26px; color:#f6a623;
       transition:transform .35s;
   }
   .benefit-card-v2:hover .benefit-icon-v2 { transform:rotate(8deg) scale(1.1); }
   .benefit-card-v2 h5 { font-weight:700; color:#1a202c; margin-bottom:8px; font-size:16px; }
   .benefit-card-v2 p { color:#718096; font-size:14px; line-height:1.7; margin:0; }
   
   /* ---- HOW IT WORKS ---- */
   .how-works-section { padding:90px 0; background:#f8fafc; }
   .timeline-wrap { position:relative; padding-top:30px; }
   .timeline-line {
       position:absolute; top:65px; left:50%;
       transform:translateX(-50%);
       height:3px; background:#e2e8f0; width:85%; z-index:0;
   }
   .timeline-fill {
       height:100%;
       background:linear-gradient(90deg,#f6d365,#fda085);
       width:0%; transition:width 2s ease;
   }
   .timeline-step { text-align:center; position:relative; z-index:1; }
   .step-icon-wrap {
       width:65px; height:65px;
       border-radius:50%; background:#fff;
       border:3px solid #e2e8f0;
       display:flex; align-items:center; justify-content:center;
       margin:0 auto 12px; font-size:22px; color:#94a3b8;
       transition:all .35s;
       box-shadow:0 5px 15px rgba(0,0,0,.06);
       position:relative;
   }
   .timeline-step:hover .step-icon-wrap,
   .timeline-step.active .step-icon-wrap {
       background:linear-gradient(135deg,#f6d365,#fda085);
       border-color:#f6d365; color:#1a1a2e;
       transform:scale(1.1);
       box-shadow:0 10px 30px rgba(246,211,101,.35);
   }
   .step-num {
       position:absolute; top:-6px; right:-6px;
       width:20px; height:20px;
       background:#f6a623; color:#fff;
       border-radius:50%; font-size:10px; font-weight:700;
       display:flex; align-items:center; justify-content:center;
   }
   .timeline-step h6 { font-weight:700; color:#1a202c; font-size:13px; margin-bottom:4px; }
   .timeline-step p  { color:#94a3b8; font-size:11px; margin:0; }
   
   /* ---- WHO CAN APPLY ---- */
   .who-apply-section { padding:90px 0; background:#fff; }
   .domain-card {
       background:#f8fafc; border:2px solid #e2e8f0;
       border-radius:12px; padding:12px 16px;
       display:flex; align-items:center; gap:10px;
       font-weight:600; font-size:14px; color:#2d3748;
       cursor:pointer; transition:all .3s;
   }
   .domain-card:hover {
       background:linear-gradient(135deg,#f6d365,#fda085);
       color:#1a1a2e; border-color:#f6d365;
       transform:translateY(-3px);
       box-shadow:0 10px 25px rgba(246,211,101,.25);
   }
   .domain-icon { font-size:18px; color:#f6a623; transition:transform .3s; }
   .domain-card:hover .domain-icon { color:#1a1a2e; transform:scale(1.2); }
   
   /* Benefits Checklist */
   .benefits-img-wrap { border-radius:18px; overflow:hidden; }
   .benefits-img-wrap img { width:100%; border-radius:18px; object-fit:cover; height:360px; }
   .check-item {
       display:flex; align-items:center; gap:12px;
       padding:11px 0; border-bottom:1px solid #f0f0f0;
       opacity:0; transform:translateX(20px);
       transition:all .5s ease;
   }
   .check-item.visible { opacity:1; transform:translateX(0); }
   .check-item:last-child { border-bottom:none; }
   .check-icon {
       width:28px; height:28px;
       background:linear-gradient(135deg,#f6d365,#fda085);
       border-radius:50%;
       display:flex; align-items:center; justify-content:center;
       flex-shrink:0; color:#1a1a2e; font-size:13px;
   }
   .check-item span { font-weight:600; color:#2d3748; font-size:15px; }
   
   /* ---- VIDEO + CTA ---- */
   .cta-section-v2 {
       background:linear-gradient(-45deg,#0f0c29,#302b63,#1565c0,#0f3460);
       background-size:400% 400%;
       animation:heroGradient 8s ease infinite;
       padding:90px 0; position:relative; overflow:hidden;
   }
   .video-embed-wrap {
       border-radius:20px; overflow:hidden;
       box-shadow:0 30px 80px rgba(0,0,0,.4);
       position:relative; padding-bottom:56.25%; height:0;
   }
   .video-embed-wrap iframe {
       position:absolute; top:0; left:0;
       width:100%; height:100%; border:none;
   }
   .map-pin {
       position:absolute; width:12px; height:12px;
       background:#f6d365; border-radius:50%;
       animation:pinPulse 2s ease-in-out infinite;
   }
   .map-pin::before {
       content:''; position:absolute; inset:-4px;
       border-radius:50%; background:rgba(246,211,101,.3);
       animation:pinPulse 2s ease-in-out infinite;
   }
   @keyframes pinPulse {
       0%,100% { transform:scale(1); opacity:1; }
       50%      { transform:scale(1.3); opacity:.7; }
   }
   .cta-title { font-size:clamp(1.7rem,3.5vw,2.7rem); font-weight:800; color:#fff; line-height:1.2; margin-bottom:18px; }
   .cta-title span { color:#f6d365; }
   .cta-subtitle { color:rgba(255,255,255,.75); font-size:.95rem; line-height:1.7; margin-bottom:32px; }
   
   /* ---- TESTIMONIALS ---- */
   .testimonials-section { padding:90px 0; background:#f8fafc; }
   .testimonial-track-wrap { overflow:hidden; }
   .testimonial-track {
       display:flex; gap:24px;
       transition:transform .5s ease;
   }
   .testimonial-card-v2 {
       background:#fff; border-radius:20px;
       padding:32px; box-shadow:0 5px 25px rgba(0,0,0,.06);
       min-width:calc(33.333% - 16px); flex-shrink:0;
       transition:all .3s;
   }
   .testimonial-card-v2:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.1); }
   .stars { color:#f6a623; margin-bottom:14px; font-size:16px; }
   .testimonial-text { color:#4a5568; font-size:14px; line-height:1.8; font-style:italic; margin-bottom:22px; }
   .testimonial-author { display:flex; align-items:center; gap:12px; }
   .author-avatar {
       width:46px; height:46px; border-radius:50%;
       background:linear-gradient(135deg,#667eea,#764ba2);
       color:#fff; display:flex; align-items:center; justify-content:center;
       font-weight:700; font-size:16px; flex-shrink:0;
   }
   .author-name { font-weight:700; color:#1a202c; font-size:14px; }
   .author-role { color:#94a3b8; font-size:12px; }
   .slider-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: nowrap;
    }
   .slider-dot {
       width:10px; height:10px; border-radius:50%;
       background:#d1d5db; cursor:pointer; transition:all .3s;
       border:none; padding:0;
   }
   .slider-dot.active { background:#f6a623; transform:scale(1.3); }
   
   /* ---- FAQ ---- */
   .faq-section { padding:90px 0; background:#fff; }
   .faq-item {
       border:1px solid #e2e8f0;
       border-radius:14px; margin-bottom:12px;
       overflow:hidden; transition:all .3s;
   }
   .faq-item:hover { border-color:#f6a623; }
   .faq-question {
       padding:20px 25px;
       display:flex; justify-content:space-between; align-items:center;
       cursor:pointer; background:#fff;
       font-weight:600; color:#1a202c; font-size:15px;
       border:none; width:100%; text-align:left;
   }
   .faq-question:hover { color:#f6a623; }
   .faq-icon {
       width:30px; height:30px;
       background:linear-gradient(135deg,#f6d365,#fda085);
       border-radius:50%;
       display:flex; align-items:center; justify-content:center;
       font-size:16px; color:#1a1a2e; font-weight:700;
       transition:transform .3s; flex-shrink:0;
   }
   .faq-item.open .faq-icon { transform:rotate(45deg); }
   .faq-answer {
       max-height:0; overflow:hidden;
       transition:max-height .4s ease, padding .3s ease;
       padding:0 25px; color:#718096; font-size:14px; line-height:1.8;
   }
   .faq-item.open .faq-answer { max-height:200px; padding:0 25px 20px; }
   
   /* ---- APPLICATION FORM ---- */
   .apply-section {
       padding:90px 0;
       background:linear-gradient(135deg,#f8fafc,#e8f4fd);
   }
   .apply-form-card {
       background:#fff; border-radius:24px;
       padding:50px; box-shadow:0 20px 60px rgba(0,0,0,.08);
   }
   .apply-input {
       border:2px solid #e2e8f0; border-radius:12px;
       padding:13px 16px; font-size:15px;
       transition:all .3s; width:100%;
       background:#fff;
   }
   .apply-input:focus {
       border-color:#f6a623;
       box-shadow:0 0 0 4px rgba(246,166,35,.1);
       outline:none;
   }
   .phone-wrap { display:flex; gap:8px; }
   .country-code-select {
       border:2px solid #e2e8f0; border-radius:12px;
       padding:13px 10px; font-size:14px;
       background:#fff; cursor:pointer;
       min-width:130px; transition:all .3s;
   }
   .country-code-select:focus {
       border-color:#f6a623;
       box-shadow:0 0 0 4px rgba(246,166,35,.1);
       outline:none;
   }
   .btn-apply-submit {
       background:linear-gradient(135deg,#f6d365,#fda085);
       color:#1a1a2e; border:none;
       border-radius:50px; padding:16px 50px;
       font-weight:800; font-size:16px;
       transition:all .3s;
       display:inline-flex; align-items:center; gap:10px;
       cursor:pointer;
   }
   .btn-apply-submit:hover {
       transform:translateY(-3px);
       box-shadow:0 15px 40px rgba(246,211,101,.4);
       color:#1a1a2e;
   }
   .auto-detect-badge {
       display:inline-flex; align-items:center; gap:5px;
       font-size:12px; color:#22c55e; font-weight:600;
       background:rgba(34,197,94,.1); padding:3px 10px;
       border-radius:20px; margin-top:5px;
   }
   
   /* ---- RESPONSIVE ---- */
   @media (max-width:991px) {
       .float-card { display:none; }
       .timeline-line { display:none; }
       .testimonial-card-v2 { min-width:calc(50% - 12px); }
   }
   @media (max-width:768px) {
       .trainer-hero-v2 { min-height:auto; padding:120px 0 60px; }
       .apply-form-card { padding:30px 20px; }
       .stat-item-v2 { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
       .testimonial-card-v2 { min-width:100%; }
       .hero-title-v2 { font-size:2rem; }
   }