/* ===== ROOT VARIABLES - CRYPTO FINANCE THEME ===== */
:root {
  --bg-white: #FFFFFF;
  --bg-light: #F7F9FC;
  --bg-card: #FFFFFF;
  --navy: #0B1426;
  --navy-light: #1E293B;
  --primary-blue: #0052FF;
  --gold: #F7931A;
  --green: #16C784;
  --red: #EA3943;
  --purple: #6C5CE7;
  --text-dark: #0B1426;
  --text-gray: #64748B;
  --text-light-gray: #94A3B8;
  --border-color: #E2E8F0;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family:'Inter',sans-serif;
  background: var(--bg-white);
  color: var(--text-dark);
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,h4 { font-family:'Poppins',sans-serif; font-weight:800; color:var(--navy); letter-spacing:-1px; }
h1 { font-size:clamp(2.2rem,5vw,4rem); line-height:1.15; }
h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); }
h3 { font-size:1.4rem; }
p { color:var(--text-gray); }
a { text-decoration:none; color:inherit; }

.container { max-width:1300px; margin:0 auto; padding:0 2rem; }

.gradient-text {
  background:linear-gradient(135deg,var(--primary-blue),var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ===== TICKER ===== */
.ticker-wrap {
  position:fixed; top:0; left:0; right:0; z-index:1001;
  background:var(--navy);
  overflow:hidden; white-space:nowrap; padding:0.6rem 0;
  border-bottom:2px solid var(--gold);
}
.ticker { display:inline-block; animation:scrollTicker 30s linear infinite; }
.ticker-item {
  display:inline-block; margin:0 2rem; color:#fff; font-size:0.9rem; font-weight:600;
}
.ticker-item .up { color:var(--green); }
.ticker-item .down { color:var(--red); }
@keyframes scrollTicker {
  0% { transform:translateX(100%); }
  100% { transform:translateX(-100%); }
}

/* ===== NAV ===== */
nav {
  position:fixed; top:36px; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-color);
  padding:1rem 2rem;
  transition:all 0.3s;
}
nav.scrolled { background:rgba(255,255,255,0.98); box-shadow:0 5px 25px rgba(0,0,0,0.06); }
.nav-container { max-width:1300px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.6rem; font-weight:800; display:flex; gap:0.6rem; align-items:center; color:var(--navy); }
.logo i { color:var(--primary-blue); }
.nav-links { display:flex; gap:2.2rem; list-style:none; align-items:center; }
.nav-links a { color:var(--text-dark); font-weight:600; font-size:0.95rem; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px; background:var(--primary-blue); transition:width 0.3s; }
.nav-links a:hover::after { width:100%; }
.nav-links a:hover { color:var(--primary-blue); }
.nav-cta { padding:0.7rem 1.6rem !important; font-size:0.9rem !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:26px; height:2.5px; background:var(--navy); border-radius:2px; transition:all 0.3s; }

/* ===== BUTTONS ===== */
.btn {
  padding:0.95rem 2.2rem; border-radius:10px; font-weight:700; font-size:0.95rem;
  cursor:pointer; border:none; display:inline-flex; align-items:center; justify-content:center;
  gap:0.6rem; font-family:'Poppins',sans-serif; transition:all 0.3s;
}
.btn-primary {
  background:linear-gradient(135deg,var(--primary-blue),#3D7CFF);
  color:#fff; box-shadow:0 8px 25px rgba(0,82,255,0.25);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(0,82,255,0.35); }
.btn-secondary { background:#fff; border:2px solid var(--primary-blue); color:var(--primary-blue); }
.btn-secondary:hover { background:rgba(0,82,255,0.06); transform:translateY(-3px); }

/* ===== HERO ===== */
.hero { min-height:100vh; display:flex; align-items:center; padding:9rem 2rem 4rem; position:relative;
  background:radial-gradient(circle at 80% 10%, rgba(0,82,255,0.05), transparent 60%),
             radial-gradient(circle at 10% 90%, rgba(247,147,26,0.05), transparent 60%);
}
.hero-content { text-align:center; max-width:900px; margin:0 auto; }
.section-badge {
  display:inline-block; padding:0.5rem 1.4rem; background:rgba(0,82,255,0.08);
  border:1px solid rgba(0,82,255,0.2); border-radius:50px; color:var(--primary-blue);
  font-size:0.82rem; font-weight:700; margin-bottom:1.4rem; text-transform:uppercase; letter-spacing:0.5px;
}
.hero h1 { margin-bottom:1.4rem; }
.hero-subtitle { font-size:1.15rem; color:var(--text-gray); max-width:650px; margin:0 auto 2.4rem; }
.hero-buttons { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.5rem; }
.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2rem;
  padding-top:2.5rem; border-top:1px solid var(--border-color);
}
.stat-number { font-size:2.2rem; font-weight:900; color:var(--primary-blue); font-family:'Poppins',sans-serif; }
.stat-label { color:var(--text-gray); font-size:0.9rem; margin-top:0.3rem; font-weight:600; }

/* ===== SECTIONS ===== */
section { padding:5.5rem 2rem; }
.section-alt { background:var(--bg-light); }
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-header p { max-width:600px; margin:0.8rem auto 0; }

/* ===== MARKET SECTION ===== */
.market-section { background:var(--bg-light); }
.market-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.5rem; margin-bottom:3rem;
}
.market-card {
  background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:1.5rem;
  transition:all 0.3s; box-shadow:0 2px 10px rgba(0,0,0,0.02);
}
.market-card:hover { transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,0.08); }
.market-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.coin-info { display:flex; align-items:center; gap:0.6rem; }
.coin-icon { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary-blue),var(--purple)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; }
.coin-name { font-weight:700; color:var(--navy); font-size:0.95rem; }
.coin-symbol { font-size:0.75rem; color:var(--text-light-gray); text-transform:uppercase; }
.market-price { font-size:1.5rem; font-weight:800; color:var(--navy); font-family:'Poppins',sans-serif; margin-bottom:0.4rem; }
.market-change { font-size:0.9rem; font-weight:700; display:flex; align-items:center; gap:0.3rem; }
.market-change.up { color:var(--green); }
.market-change.down { color:var(--red); }

.forecast-box {
  background:#fff; border:1px solid var(--border-color); border-radius:18px; padding:2.5rem;
  box-shadow:0 10px 40px rgba(0,0,0,0.04);
}
.forecast-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.forecast-sub { font-size:0.85rem; color:var(--text-light-gray); margin-top:0.3rem; }
.forecast-price { font-size:2rem; font-weight:900; color:var(--primary-blue); font-family:'Poppins',sans-serif; }

/* ===== SERVICE CARDS ===== */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; }
.service-card {
  background:#fff; border:1px solid var(--border-color); border-radius:16px; padding:2.3rem;
  transition:all 0.35s; cursor:pointer;
}
.service-card:hover {
  transform:translateY(-8px); border-color:var(--primary-blue);
  box-shadow:0 20px 45px rgba(0,82,255,0.1);
}
.service-icon {
  width:58px; height:58px; border-radius:14px;
  background:linear-gradient(135deg,rgba(0,82,255,0.1),rgba(108,92,231,0.08));
  display:flex; align-items:center; justify-content:center; color:var(--primary-blue);
  font-size:1.6rem; margin-bottom:1.4rem; transition:all 0.3s;
}
.service-card:hover .service-icon { transform:scale(1.15) rotate(-8deg); background:linear-gradient(135deg,var(--primary-blue),var(--purple)); color:#fff; }
.service-card h3 { margin-bottom:0.8rem; font-size:1.25rem; }
.service-card p { font-size:0.93rem; }

/* ===== PRICING ===== */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; max-width:1150px; margin:0 auto; }
.pricing-card {
  background:#fff; border:2px solid var(--border-color); border-radius:18px; padding:2.5rem;
  text-align:center; transition:all 0.35s; position:relative;
}
.pricing-card.featured { border-color:var(--primary-blue); transform:scale(1.04); box-shadow:0 20px 50px rgba(0,82,255,0.12); }
.pricing-card:hover { transform:translateY(-8px); border-color:var(--primary-blue); }
.pricing-badge { position:absolute; top:0; right:0; background:var(--primary-blue); color:#fff; padding:0.4rem 1.3rem; border-radius:0 16px 0 16px; font-size:0.8rem; font-weight:700; }
.pricing-title { margin:0.5rem 0; }
.pricing-price { font-size:2.8rem; font-weight:900; color:var(--primary-blue); font-family:'Poppins',sans-serif; margin:1rem 0; }
.pricing-description { margin-bottom:1.5rem; font-size:0.92rem; }
.pricing-features { text-align:left; margin:1.8rem 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); padding:1.8rem 0; }
.pricing-feature { display:flex; gap:0.6rem; margin-bottom:0.9rem; font-size:0.9rem; color:var(--text-gray); }
.pricing-feature i { color:var(--green); }

/* ===== TESTIMONIALS ===== */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; }
.testimonial-card { background:#fff; border:1px solid var(--border-color); border-radius:16px; padding:2rem; transition:all 0.3s; }
.testimonial-card:hover { transform:translateY(-6px); box-shadow:0 15px 40px rgba(0,0,0,0.06); }
.stars { color:var(--gold); margin-bottom:0.8rem; }
.testimonial-text { font-style:italic; margin-bottom:1.3rem; font-size:0.93rem; }
.author { display:flex; align-items:center; gap:0.9rem; border-top:1px solid var(--border-color); padding-top:1rem; }
.author-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary-blue),var(--purple)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.author-info h5 { color:var(--navy); font-size:0.95rem; margin-bottom:0.1rem; }
.author-role { font-size:0.8rem; color:var(--text-light-gray); }

/* ===== FORMS ===== */
.contact-wrapper { max-width:650px; margin:0 auto; }
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; font-weight:600; margin-bottom:0.4rem; color:var(--navy); font-size:0.9rem; }
.form-group input,.form-group textarea,.form-group select {
  width:100%; padding:0.85rem 1.1rem; border:1.5px solid var(--border-color); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:0.95rem; transition:all 0.3s; background:var(--bg-light);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  outline:none; border-color:var(--primary-blue); background:#fff; box-shadow:0 0 0 4px rgba(0,82,255,0.08);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.form-group textarea { min-height:140px; resize:vertical; }
.checkbox-group { display:flex; align-items:center; gap:0.7rem; margin:1.3rem 0; }
.checkbox-group input { width:18px; height:18px; accent-color:var(--primary-blue); }

/* ===== FAQ ===== */
.faq-wrapper { max-width:780px; margin:0 auto; }
.faq-item { background:#fff; border:1px solid var(--border-color); border-radius:12px; margin-bottom:1rem; overflow:hidden; transition:all 0.3s; }
.faq-item:hover { border-color:var(--primary-blue); }
.faq-question { padding:1.4rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--navy); }
.faq-icon { color:var(--primary-blue); transition:transform 0.3s; }
.faq-item.active .faq-icon { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:all 0.3s; }
.faq-answer-content { padding:0 1.4rem 1.4rem; font-size:0.92rem; }
.faq-item.active .faq-answer { max-height:400px; }

/* ===== FOOTER ===== */
footer { background:var(--navy); color:#94A3B8; padding:4rem 2rem 2rem; }
.footer-content { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2.5rem; margin-bottom:2.5rem; }
.footer-section h4 { color:#fff; margin-bottom:1.2rem; }
.footer-section ul { list-style:none; }
.footer-section ul li { margin-bottom:0.7rem; font-size:0.9rem; }
.footer-section a { transition:all 0.3s; }
.footer-section a:hover { color:var(--primary-blue); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:1.5rem; text-align:center; font-size:0.85rem; max-width:1300px; margin:0 auto; }

/* ===== SCROLL TOP ===== */
.scroll-top {
  position:fixed; bottom:2rem; right:2rem; width:48px; height:48px;
  background:var(--primary-blue); border:none; border-radius:10px; color:#fff; font-size:1.1rem;
  cursor:pointer; opacity:0; visibility:hidden; transition:all 0.3s; z-index:100;
  box-shadow:0 8px 25px rgba(0,82,255,0.3); display:flex; align-items:center; justify-content:center;
}
.scroll-top.show { opacity:1; visibility:visible; }
.scroll-top:hover { transform:translateY(-5px); }

/* ===== MODAL ===== */
.modal { display:none; position:fixed; inset:0; z-index:2000; background:rgba(11,20,38,0.6); backdrop-filter:blur(5px); align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-content { background:#fff; padding:2.5rem; border-radius:18px; max-width:480px; width:90%; position:relative; animation:slideIn 0.4s ease-out; }
.modal-close { position:absolute; top:1.3rem; right:1.3rem; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--text-gray); }
@keyframes slideIn { from{transform:translateY(-40px);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  nav { top:32px; padding:1rem; }
  .nav-links { display:none; position:absolute; top:65px; left:0; right:0; flex-direction:column; background:#fff; padding:1.5rem; box-shadow:0 10px 30px rgba(0,0,0,0.08); }
  .nav-links.active { display:flex; }
  .nav-cta { display:none; }
  .hamburger { display:flex; }
  .form-row { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; }
  .btn { width:100%; }
  section { padding:3.5rem 1.3rem; }
  .pricing-card.featured { transform:scale(1); }
  .forecast-header { flex-direction:column; align-items:flex-start; }
}
