/*
Theme Name: Crypto30X Signals
Theme URI: https://crypto30x.com
Author: Crypto30X
Author URI: https://crypto30x.com
Description: A dark, modern WordPress theme built for crypto, forex, and gold trading signal services. Includes hero section, signal type cards, how-it-works steps, stats counter, about section, Telegram CTA, contact section, and a footer with disclaimer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crypto30x-signals
*/

/* =========================================
   ROOT VARIABLES / DESIGN TOKENS
========================================= */
:root{
  --primary: #00ff88;
  --primary-dark: #00cc6a;
  --secondary: #ff6b35;
  --accent: #ffd700;
  --bg-dark: #0a0b0d;
  --bg-card: #12141a;
  --bg-card-hover: #1a1d26;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #1f2937;
  --gradient-1: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  --gradient-2: linear-gradient(135deg, #ff6b35 0%, #ff4500 100%);
  --gradient-bg: radial-gradient(ellipse at top, #1a2e1a 0%, #0a0b0d 50%);
}

/* =========================================
   RESET / BASE
========================================= */
*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg-dark);
  background-image:var(--gradient-bg);
  color:var(--text-primary);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height:1.6;
  min-height:100vh;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}

.container{max-width:1200px;margin:0 auto;padding:0 24px;}

.gradient-text{
  background:var(--gradient-1);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.section-label{
  display:inline-block;
  color:var(--primary);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.section-title{
  font-size:2.5rem;
  font-weight:800;
  margin-bottom:16px;
  line-height:1.2;
}

.section-subtitle{
  color:var(--text-secondary);
  font-size:1.05rem;
  max-width:600px;
}

.section-header{
  text-align:center;
  margin:0 auto 56px;
  max-width:700px;
}

section{padding:96px 0;}

/* =========================================
   BUTTONS
========================================= */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 32px;
  background:var(--gradient-1);
  color:#000;
  font-weight:700;
  border:none;
  border-radius:8px;
  font-size:1rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,255,136,.25);
}

.btn-primary.btn-large{padding:16px 40px;font-size:1.1rem;}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 32px;
  background:transparent;
  color:var(--text-primary);
  font-weight:600;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:1rem;
  transition:all .25s ease;
}
.btn-secondary:hover{
  border-color:var(--primary);
  color:var(--primary);
}

.btn-signup{
  padding:10px 24px;
  background:var(--gradient-1);
  border:none;
  color:#000;
  font-weight:600;
  border-radius:8px;
  font-size:.95rem;
}

/* =========================================
   NAVBAR
========================================= */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:20px 0;
  transition:all .3s ease;
  background:transparent;
}
.navbar.navbar-scrolled{
  background:rgba(10,11,13,.95);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:12px 0;
}
.nav-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.5rem;
  font-weight:800;
  color:#fff;
}
.logo-icon{color:var(--primary);font-size:1.8rem;}
.logo-text .highlight{color:var(--primary);}

.nav-links{display:flex;gap:40px;}
.nav-links a{
  color:var(--text-secondary);
  font-weight:500;
  font-size:.95rem;
  transition:color .3s ease;
}
.nav-links a:hover{color:var(--primary);}

.nav-buttons{display:flex;align-items:center;gap:12px;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
}
.nav-toggle span{
  width:24px;height:2px;background:#fff;border-radius:2px;
}

/* =========================================
   HERO
========================================= */
.hero{
  padding:180px 0 120px;
  position:relative;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top:-100px;left:50%;
  transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(0,255,136,.15) 0%, transparent 70%);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0 auto;
  text-align:center;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  background:rgba(0,255,136,.1);
  border:1px solid rgba(0,255,136,.3);
  border-radius:30px;
  color:var(--primary);
  font-size:.85rem;
  font-weight:600;
  margin-bottom:24px;
}
.hero h1{
  font-size:3.4rem;
  font-weight:800;
  line-height:1.15;
  margin-bottom:24px;
}
.hero-subtitle{
  font-size:1.15rem;
  color:var(--text-secondary);
  margin-bottom:36px;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-bottom:64px;
  flex-wrap:wrap;
}

/* =========================================
   STATS
========================================= */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 16px;
  text-align:center;
}
.stat-number{
  font-size:2.2rem;
  font-weight:800;
  color:var(--primary);
  margin-bottom:6px;
}
.stat-label{
  color:var(--text-secondary);
  font-size:.9rem;
}

/* =========================================
   SIGNAL TYPES
========================================= */
.signals-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.signal-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 24px;
  transition:all .3s ease;
}
.signal-card:hover{
  background:var(--bg-card-hover);
  border-color:var(--primary);
  transform:translateY(-4px);
}
.signal-icon{
  font-size:2.2rem;
  margin-bottom:18px;
}
.signal-card h3{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:10px;
}
.signal-card p{
  color:var(--text-secondary);
  font-size:.95rem;
}

/* =========================================
   HOW IT WORKS
========================================= */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.step-card{
  text-align:center;
  padding:32px 24px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  position:relative;
}
.step-number{
  width:48px;height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  background:var(--gradient-1);
  color:#000;
  font-weight:800;
  font-size:1.2rem;
  border-radius:50%;
}
.step-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;}
.step-card p{color:var(--text-secondary);font-size:.95rem;}

/* =========================================
   ABOUT
========================================= */
.about-content-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-highlights{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:28px;
}
.about-highlight-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.about-highlight-item .check{
  color:var(--primary);
  font-weight:800;
  flex-shrink:0;
}
.about-image{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px;
  text-align:center;
}

/* =========================================
   CTA / TELEGRAM
========================================= */
.cta-section{
  background:var(--bg-card);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cta-content{
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.cta-content h2{
  font-size:2.2rem;
  font-weight:800;
  margin-bottom:16px;
}
.cta-content p{
  color:var(--text-secondary);
  margin-bottom:32px;
  font-size:1.05rem;
}

/* =========================================
   CONTACT
========================================= */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.contact-info-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  text-align:center;
}
.contact-info-card h3{
  font-size:1rem;
  color:var(--text-secondary);
  margin-bottom:10px;
  font-weight:600;
}
.contact-info-card a{
  font-size:1.1rem;
  font-weight:700;
  color:var(--primary);
  word-break:break-word;
}
.contact-info-card p{
  color:var(--text-muted);
  font-size:.88rem;
  margin-top:14px;
}

/* =========================================
   PRICING / SIGNAL PACKAGES
========================================= */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
}
.pricing-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  transition:all .3s ease;
}
.pricing-card:hover{
  border-color:var(--primary);
  transform:translateY(-4px);
}
.pricing-card.featured{
  border-color:var(--primary);
  background:var(--bg-card-hover);
  position:relative;
}
.pricing-badge{
  position:absolute;
  top:-14px;right:24px;
  background:var(--gradient-1);
  color:#000;
  font-size:.75rem;
  font-weight:700;
  padding:5px 14px;
  border-radius:20px;
  letter-spacing:.5px;
}
.pricing-name{
  font-size:1.3rem;
  font-weight:800;
  margin-bottom:6px;
}
.pricing-price{
  font-size:2.2rem;
  font-weight:800;
  color:var(--primary);
  margin-bottom:20px;
}
.pricing-price span{
  font-size:.95rem;
  color:var(--text-secondary);
  font-weight:500;
}
.pricing-features{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
  flex-grow:1;
}
.pricing-feature{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92rem;
  color:var(--text-secondary);
}
.pricing-feature .check{
  color:var(--primary);
  font-weight:800;
  flex-shrink:0;
}

/* =========================================
   LATEST BLOG
========================================= */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.blog-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
}
.blog-card:hover{
  border-color:var(--primary);
  transform:translateY(-4px);
}
.blog-card-thumb{
  width:100%;
  aspect-ratio:16/9;
  background:var(--bg-card-hover);
  overflow:hidden;
}
.blog-card-thumb img{
  width:100%;height:100%;
  object-fit:cover;
}
.blog-card-body{
  padding:22px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.blog-card-date{
  color:var(--text-muted);
  font-size:.8rem;
  margin-bottom:8px;
}
.blog-card-title{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:10px;
  line-height:1.4;
}
.blog-card-title a:hover{color:var(--primary);}
.blog-card-excerpt{
  color:var(--text-secondary);
  font-size:.9rem;
  flex-grow:1;
}
.blog-card-link{
  margin-top:14px;
  color:var(--primary);
  font-size:.88rem;
  font-weight:600;
}
.blog-empty{
  text-align:center;
  color:var(--text-muted);
  padding:40px 0;
}
/* =========================================
   FOOTER
========================================= */
.site-footer{
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:64px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
}
.footer-brand p{
  color:var(--text-secondary);
  margin-top:14px;
  font-size:.92rem;
  max-width:320px;
}
.footer-links h4{
  font-size:.95rem;
  margin-bottom:16px;
  color:var(--text-primary);
}
.footer-links ul{display:flex;flex-direction:column;gap:10px;}
.footer-links a{color:var(--text-secondary);font-size:.9rem;transition:color .2s;}
.footer-links a:hover{color:var(--primary);}

.footer-bottom{
  border-top:1px solid var(--border);
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer-legal{
  display:flex;
  gap:24px;
  color:var(--text-muted);
  font-size:.85rem;
}
.footer-legal a:hover{color:var(--primary);}
.footer-copyright{color:var(--text-muted);font-size:.85rem;}

/* Disclaimer block, sits below the footer-bottom row */
.footer-disclaimer{
  border-top:1px solid var(--border);
  background:var(--bg-dark);
  padding:24px 0 32px;
}
.footer-disclaimer p{
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.7;
  max-width:1200px;
}
.footer-disclaimer strong{color:var(--text-secondary);}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 900px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .signals-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:1fr;}
  .about-content-grid{grid-template-columns:1fr;}
  .contact-info-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:2.4rem;}
}

@media (max-width: 640px){
  .nav-links, .nav-buttons{display:none;}
  .nav-toggle{display:flex;}
  .stats-grid, .signals-grid{grid-template-columns:1fr;}
  .pricing-grid, .blog-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .section-title{font-size:1.9rem;}
  .hero h1{font-size:2rem;}
  section{padding:64px 0;}
}