/* ═══════════════════════════════════════════
   FOREX SNIPER — COMPONENTS (PART 2)
   ═══════════════════════════════════════════ */

/* ── PROBLEM / CARDS ── */
.p-intro{max-width:680px;margin:0 auto var(--s5);text-align:center}
.p-intro h2{margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:980px;margin:0 auto}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s4);box-shadow:var(--shadow-md);position:relative;overflow:hidden;transition:transform .3s var(--ease), border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(24,215,191,.4);box-shadow:var(--shadow-glow)}
.card::after{content:"";position:absolute;inset:auto -10% -40% auto;width:180px;height:180px;background:radial-gradient(circle, rgba(24,215,191,.09), transparent 70%);pointer-events:none}
.card-icon{width:48px;height:48px;border-radius:16px;background:rgba(24,215,191,.12);color:var(--fx-teal);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card-icon svg{width:24px;height:24px;stroke-width:2.2}
.card-red .card-icon{background:rgba(255,117,143,.12);color:var(--fx-red)}
.card-gold .card-icon{background:rgba(241,197,111,.12);color:var(--fx-gold)}
.card h3{font-size:1.35rem;color:var(--text);margin-bottom:10px}
.card p{font-size:1.05rem;line-height:1.6}

/* ── UI DEMO (SOLUTION) ── */
.ui-demo{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,var(--fx-surface),#0a1420);padding:24px;box-shadow:var(--shadow-lg);margin-bottom:var(--s5)}
.ui-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:24px}
.ui-title{display:flex;align-items:center;gap:12px;color:var(--fx-text);font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase}
.ui-bars{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.ui-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:24px;position:relative}
.ui-panel small{color:var(--fx-text-faint);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}
.ui-panel h4{margin:8px 0 16px;font-size:1.2rem}
.linebar{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--fx-teal),var(--fx-blue));margin-top:14px}
.linebar-bg{height:12px;border-radius:999px;background:rgba(255,255,255,.06);margin-top:14px;overflow:hidden}
.linebar-fill{height:100%;width:88%;background:linear-gradient(90deg,var(--fx-teal),var(--fx-blue))}
.linebar-fill.red{background:linear-gradient(90deg,#ff758f,#eb4034);width:30%}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.kpi .box{padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);overflow:hidden;}
.kpi .box b{display:block;color:var(--fx-text);font-size:clamp(1rem, 2.5vw, 1.35rem);font-family:var(--font-display);margin-top:4px;word-break:break-word;line-height:1.2;}
.kpi .box small{color:var(--fx-text-muted);font-size:clamp(0.7rem, 1.5vw, 0.85rem);letter-spacing:0.05em;text-transform:uppercase;}

.sniper-console{background:#06111C;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.sc-head{background:#0a1826;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(24,215,191,.15)}
.sc-pulse{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:.85rem;color:var(--fx-teal);letter-spacing:.08em}
.sc-pulse .dot{animation:pulse-dot 1.5s infinite}
.sc-asset{background:rgba(255,255,255,.08);padding:4px 10px;border-radius:6px;font-size:.8rem;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-body{padding:24px;display:flex;flex-direction:column;gap:12px;min-height:300px}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px dashed rgba(255,255,255,.06)}
.sc-row.sc-direction{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:16px;margin-bottom:8px}
.sc-label{font-size:.75rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.sc-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.15rem;color:#fff}
.sc-val.buy{color:#06111C;background:var(--fx-teal);padding:4px 12px;border-radius:4px;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.05em}
.sc-val.take{color:var(--fx-blue)}
.sc-val.stop{color:#ff758f}
.sc-footer{margin-top:16px;font-size:.7rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em}
.sc-bar{height:2px;background:rgba(255,255,255,.08);margin-bottom:8px;border-radius:2px;overflow:hidden}
.sc-bar::after{content:'';display:block;height:100%;width:92.4%;background:var(--fx-teal)}

/* ── STEPS ── */
.timeline{position:relative;max-width:800px;margin:0 auto;padding:var(--s4) 0}
.timeline::before{content:'';position:absolute;left:34px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.06)}
.t-item{position:relative;display:flex;gap:32px;margin-bottom:48px}
.t-item:last-child{margin-bottom:0}
.t-num{width:70px;height:70px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--fx-teal);flex-shrink:0;position:relative;z-index:2;box-shadow:var(--shadow-sm)}
.t-item:hover .t-num{border-color:var(--fx-teal);box-shadow:0 0 20px rgba(24,215,191,.2);background:var(--surface);color:#fff}
.t-content{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;flex:1;transition:border-color .3s, transform .3s}
.t-item:hover .t-content{border-color:rgba(24,215,191,.4);transform:translateX(10px);background:rgba(24,215,191,.02)}
.t-content h3{margin-bottom:10px}
.t-content p{margin:0}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.testimonial{background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--s4);border:1px solid var(--border);position:relative}
.testimonial::before{content:'"';position:absolute;top:10px;right:24px;font-family:var(--font-display);font-size:5rem;color:rgba(255,255,255,.05);line-height:1}
.ts-quote{font-size:1.05rem;line-height:1.6;color:var(--text);margin-bottom:24px;position:relative;z-index:2}
.ts-user{display:flex;align-items:center;gap:14px}
.ts-av{width:48px;height:48px;border-radius:14px;background:var(--fx-surface);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;color:var(--fx-teal);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.ts-av img{width:100%;height:100%;object-fit:cover}
.ts-name{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:#fff}
.ts-info{font-size:.85rem;color:var(--text-faint)}
.ts-res{display:inline-block;padding:4px 10px;background:rgba(24,215,191,.1);color:var(--fx-teal);border-radius:8px;font-size:.75rem;font-weight:600;margin-top:6px}

/* ── COMPARISON (MATRIX) ── */
.cmp-table{background:var(--surface-2);border-radius:var(--radius-xl);border:1px solid var(--border);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.04)}
.cmp-row:last-child{border-bottom:none}
.cmp-h{background:rgba(0,0,0,.15);padding:24px}
.cmp-h .cmp-col{font-family:var(--font-display);font-weight:500;font-size:1.15rem;color:var(--text-muted)}
.cmp-h .col-sniper{color:#fff;font-size:1.3rem}
.cmp-h .col-sniper .tag{margin-bottom:8px}
.col-label{font-size:1.05rem;color:var(--text);font-weight:500}
.col-basic,.col-men{color:var(--text-faint);font-size:.95rem;text-align:center}
.col-sniper{text-align:center;background:rgba(24,215,191,.06);position:relative;font-weight:600;color:var(--fx-teal)}
.col-sniper::before{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(24,215,191,.3)}
.col-sniper::after{content:'';position:absolute;top:0;bottom:0;right:0;width:2px;background:rgba(24,215,191,.3)}
.cmp-h .col-sniper::before,.cmp-h .col-sniper::after{top:-20px}
.cmp-row:last-child .col-sniper::before,.cmp-row:last-child .col-sniper::after{bottom:-20px}
.cmp-cta-row{padding:32px 24px;background:rgba(0,0,0,.1)}
.icon-ok{width:28px;height:28px;border-radius:8px;background:rgba(24,215,191,.15);color:var(--fx-teal);display:inline-flex;align-items:center;justify-content:center}
.icon-no{width:28px;height:28px;border-radius:8px;color:rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center}

/* ── COUNTDOWN & URGENCY ── */
.urgency-box{max-width:760px;margin:0 auto;background:linear-gradient(180deg, #102235, #081624);border:1px solid rgba(105,167,255,.2);border-radius:var(--radius-xl);padding:40px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.urgency-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--fx-teal),var(--fx-blue))}
.cd-grid{display:flex;align-items:center;justify-content:center;gap:24px;margin:32px 0}
.cd-blk{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:20px;min-width:110px}
.cd-val{display:block;font-family:var(--font-display);font-size:3.5rem;font-weight:600;color:#fff;line-height:1}
.cd-t{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em;margin-top:8px;display:block}
.cd-sep{font-family:var(--font-display);font-size:2.5rem;color:rgba(255,255,255,.2);animation:pulse-dot 1.5s infinite;padding-bottom:20px}

/* ── FAQ ACCORDION ── */
.faq-wrap{max-width:840px;margin:0 auto}
.faq-i{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:16px;overflow:hidden;transition:border-color .3s, background .3s}
.faq-i:hover{border-color:rgba(24,215,191,.3)}
.faq-i[open]{border-color:var(--fx-teal);background:linear-gradient(180deg, rgba(24,215,191,.05), transparent)}
.faq-s{padding:24px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--text)}
.faq-s::-webkit-details-marker{display:none}
.faq-icon{width:24px;height:24px;position:relative;transition:transform .3s}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--text-faint);border-radius:2px;transition:background .3s}
.faq-icon::before{top:11px;left:4px;right:4px;height:2px}
.faq-icon::after{top:4px;bottom:4px;left:11px;width:2px}
.faq-i[open] .faq-icon{transform:rotate(180deg)}
.faq-i[open] .faq-icon::after{opacity:0}
.faq-i[open] .faq-icon::before{background:var(--fx-teal)}
.faq-p{padding:0 24px 24px;font-size:1.05rem;color:var(--text-muted);line-height:1.65;margin:0}

/* ── FOOTER ── */
.footer{padding:48px 0;border-top:1px solid var(--border);text-align:center;background:var(--bg)}
.f-b{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--text);margin-bottom:24px}
.f-b svg{width:28px;height:28px;color:var(--fx-teal)}
.f-links{display:flex;gap:24px;justify-content:center;margin-bottom:32px;font-size:.9rem;color:var(--text-faint)}
.f-links a:hover{color:#fff}
.f-disc{font-size:.8rem;color:var(--text-faint);max-width:700px;margin:0 auto 24px;line-height:1.7}
.f-copy{font-size:.8rem;color:var(--text-faint);border-top:1px solid rgba(255,255,255,.05);padding-top:24px;max-width:300px;margin:0 auto}

/* ── TOASTS ── */
.toast-stack{position:fixed;bottom:24px;left:24px;z-index:var(--z-tip);display:flex;flex-direction:column-reverse;gap:12px;pointer-events:none;width:340px}
.toast{display:flex;align-items:center;gap:16px;background:rgba(8,22,36,.85);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:16px;pointer-events:auto;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(20px) scale(.95);transition:opacity .4s var(--ease), transform .4s var(--ease)}
.toast.show{opacity:1;transform:translateY(0) scale(1)}
.toast.hide{opacity:0;transform:translateY(-12px) scale(.95)}
.t-av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(24,215,191,.12);color:var(--fx-teal);flex-shrink:0;overflow:hidden}
.t-av img{width:100%;height:100%;object-fit:cover}
.t-body{flex:1}
.t-msg{font-size:.9rem;color:var(--text-muted);margin:0;line-height:1.4}
.t-msg strong{color:#fff}
.t-time{font-size:.7rem;color:var(--text-faint);margin-top:4px;display:block;text-transform:uppercase;letter-spacing:.05em}

/* ── MOBILE BAR ── */
.m-bar{display:none;position:fixed;bottom:0;left:0;right:0;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:rgba(6,17,28,.95);backdrop-filter:blur(16px);border-top:1px solid var(--border);z-index:var(--z-float);align-items:center;gap:16px;box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.m-bar .btn{flex:1}

/* ── RESPONSIVE ── */
@media(max-width:980px){
  :root{--s6:48px;--s7:64px}
  .sec{padding:var(--s6) 0}
  .split{grid-template-columns:1fr;gap:40px}
  .hero-copy h1{font-size:3.5rem;max-width:none}
  .visual-stage{min-height:420px}
  .grid-2{grid-template-columns:1fr}
  .ui-bars{grid-template-columns:1fr}
  .timeline::before{left:24px}
  .t-item{gap:20px}
  .t-num{width:48px;height:48px;font-size:1.2rem;border-radius:14px}
  .testi-grid{grid-template-columns:1fr}
  .cmp-row{grid-template-columns:1fr;gap:12px;padding:24px 20px}
  .cmp-h{display:none}
  .col-label{font-size:1.15rem;color:#fff;text-align:left;font-family:var(--font-display);margin-bottom:8px}
  .col-sniper, .col-basic, .col-men{text-align:left;padding:16px;border-radius:12px}
  .col-sniper{background:rgba(24,215,191,.08);border:1px solid rgba(24,215,191,.2);margin:4px 0}
  .col-sniper::after{display:none}
  .col-sniper::before{content:'✓ Forex Sniper';position:static;display:block;width:auto;height:auto;top:auto;bottom:auto;left:auto;background:none;color:var(--fx-teal);font-weight:700;margin-bottom:6px;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em}
  .col-basic{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
  .col-basic::before{content:'✕ Cursos Comuns';display:block;font-weight:600;color:var(--text-muted);margin-bottom:6px;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em}
  .col-men{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
  .col-men::before{content:'✕ Salas de Sinais';display:block;font-weight:600;color:var(--text-muted);margin-bottom:6px;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em}
  .cmp-cta-row{display:block;padding:24px 20px}
  .cmp-cta-row .col-label, .cmp-cta-row .col-basic, .cmp-cta-row .col-men{display:none}
  .cmp-cta-row .col-sniper{padding:0;background:none;border:none;margin:0}
  .cmp-cta-row .col-sniper::before{display:none}
  .cmp-cta-row .btn.btn-full{width:100%;font-size:1.1rem!important;padding:16px!important;border-radius:12px}
  
  .cd-grid{gap:12px}
  .cd-blk{min-width:0;flex:1;padding:16px 10px}
  .cd-val{font-size:2.5rem}
  .toast-stack{width:calc(100vw - 32px);left:16px;bottom:124px;pointer-events:none;}
  body{padding-bottom:100px}
  .m-bar{display:flex}
  .cmp-table{font-size:.9rem}
  .kpi .box{padding: 12px 10px;}
}
@media(max-width:600px){
  .kpi{grid-template-columns:1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}