/* GuntherFX Landing Styles - mobile first */
:root{
  --bg: #0b0f14;
  --card: #0f1622;
  --muted: #93a3b8;
  --text: #e9f0ff;
  --brand: #63ffbc;
  --accent: #00e0ff;
  --gold: #ffcf33;
  --danger: #ff5a5f;
  --success: #31e981;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";color:var(--text);background:radial-gradient(1000px 800px at 100% -100px,#0f1a28 10%,#0b0f14 60%, #0b0f14);line-height:1.55}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:20px}
.header{position:sticky;top:0;background:rgba(11,15,20,.75);backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.header .inner{display:flex;align-items:center;gap:16px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px}
.badge{padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;color:var(--muted)}
.cta{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:var(--shadow);transition:.2s;font-weight:700}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
.btn.primary{background:linear-gradient(180deg,#1df2a8 0%, #00e0ff 100%);color:#042216;border:none}
.hero{padding:40px 20px 10px}
.hero h1{font-size:32px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.hero .stack{display:flex;gap:10px;flex-wrap:wrap}
.ribbon{margin-top:22px;border:1px dashed rgba(255,255,255,.12);padding:12px;border-radius:12px;background:rgba(255,255,255,.03);font-size:14px}
.section{padding:28px 20px}
.section h2{font-size:22px;margin:0 0 8px}
.section p.lead{color:var(--muted);margin:0 0 18px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.broker{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center}
.broker img{width:80px;height:40px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#000}
.star{color:var(--gold);}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.note{font-size:13px;color:var(--muted)}
.how{display:grid;gap:10px}
.step{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);padding:12px;border-radius:12px}
.step .num{flex:0 0 32px;height:32px;border-radius:10px;background:linear-gradient(180deg,#1df2a8,#00e0ff);color:#06241d;display:grid;place-items:center;font-weight:800}
.gallery{display:grid;grid-template-columns:1fr;gap:12px}
.video{aspect-ratio:16/9;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#000;display:grid;place-items:center;color:#5b6b83}
.faq{display:grid;gap:10px}
.faq details{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px}
.footer{padding:26px 20px;color:#98a5bb;border-top:1px solid rgba(255,255,255,.08)}
.footer .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.kicker{font-size:12px;color:#8aa1ba}
.rating{display:flex;gap:2px;font-size:16px}
.rating .half::after{content:'★';background:linear-gradient(90deg,var(--gold) 50%, transparent 50%);-webkit-background-clip: text;background-clip:text;color:transparent}
/* Desktop */
@media(min-width:720px){
  .hero{padding:64px 20px 10px}
  .hero h1{font-size:44px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .broker{grid-template-columns:120px 1fr}
  .broker img{width:120px;height:60px}
}
.video iframe{width:100%;height:100%;border:0;border-radius:12px}


.video-card{position:relative;display:flex;align-items:center;gap:12px;padding:16px;aspect-ratio:auto !important;min-height:84px}
.play-badge{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.35);font-weight:800}
.video-text{display:flex;flex-direction:column;gap:4px}
.video-text span{font-size:12px;color:#9eb0c6}
.video-card:hover{transform:translateY(-1px);}


/* --- Polish pass --- */
.hero h1{letter-spacing:.2px}
.btn{box-shadow:0 10px 24px rgba(0,224,255,.15), inset 0 0 0 1px rgba(255,255,255,.06)}
.card{backdrop-filter:saturate(1.1) blur(2px)}
.card:hover{transform:translateY(-2px);transition:transform .18s ease}
.section h2{letter-spacing:.3px}
.rating{font-size:18px}
.badge{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))}
.broker h3{margin:0 0 6px}
.meta span{background:rgba(255,255,255,.04);padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.06)}
/* Video cards visual */
.video-card{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));}
.play-badge{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), rgba(255,255,255,.05));}
/* Copy tooltip */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0f1622;border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease}
.toast.show{opacity:1}
/* Broker logos aspect */
.broker img{object-fit:contain;background:#0a0a0a}


/* --- Mobile polish for conversion --- */
@media(max-width:720px){
  .header .cta a:not(.primary){display:none} /* show only Join Telegram */
  .badge{display:none} /* hide "By GuntherFX" pill */
  .hero{padding-top:28px}
  .ribbon{display:none} /* remove promo ribbon block on small screens */
}
/* Soften header nav pills on desktop too */
.header .cta .btn{background:rgba(255,255,255,.04)}
.header .cta .btn.primary{background:linear-gradient(180deg,#1df2a8 0%, #00e0ff 100%);}


/* Brand-colored CTAs */
.btn-deriv{background:linear-gradient(180deg,#00f5a2,#00d0ff)!important;color:#06241d;border:none}
.btn-xm{background:linear-gradient(180deg,#ff4b2b,#ff1c1c)!important;color:#fff;border:none}
.btn-deriv:hover,.btn-xm:hover{transform:translateY(-2px);opacity:.95}


/* v12: stabilize broker card images to avoid CLS */
.broker-card img{aspect-ratio: 2/1; object-fit: contain; max-width: 100%; height: auto}


/* v13 Sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;display:flex;gap:.5rem;padding:.6rem .75rem;background:rgba(10,14,20,.92);backdrop-filter:saturate(140%) blur(8px);border-top:1px solid rgba(255,255,255,.08);z-index:9999}
.sticky-cta .cta-btn{flex:1;text-align:center;padding:.8rem .6rem;border-radius:.75rem;font-weight:600;text-decoration:none;border:1px solid transparent}
.sticky-cta .primary{background:linear-gradient(90deg,#00e0ff,#0df2a8);color:#061018}
.sticky-cta .ghost{background:transparent;color:#e7f6ff;border-color:rgba(255,255,255,.18)}
.sticky-cta .dark{background:#101823;color:#e7f6ff}
@media (min-width: 820px){ .sticky-cta{display:none;} }
body{padding-bottom:80px;} /* ensure content not hidden behind sticky bar on mobile */


/* v21 Blog button pulse */
.pulse-blog{ position:relative; }
.pulse-blog::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  box-shadow:0 0 0 0 rgba(1,196,255,.6);
  animation:pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%{ box-shadow:0 0 0 0 rgba(1,196,255,.55); }
  70%{ box-shadow:0 0 0 16px rgba(1,196,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(1,196,255,0); }
}
@media (min-width: 860px){
  #blog-cta-under-hero{ justify-content:flex-end; }
}