/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: #0a0e17;
   color: #e0e6f0;
   line-height: 1.7;
   overflow-x: hidden;
}
a { color:#5dade2; text-decoration:none; transition:color .3s; }
a:hover { color:#85c1e9; }
img { max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { font-weight:700; line-height:1.3; }
h1 { font-size:clamp(2rem,5vw,3.5rem); }
h2 { font-size:clamp(1.5rem,3.5vw,2.5rem); margin-bottom:1.5rem; }
h3 { font-size:1.3rem; margin-bottom:.8rem; }
h2 .hl { background:linear-gradient(135deg,#f39c12,#e74c3c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ===== NAVBAR ===== */
nav {
   position:fixed; top:0; left:0; width:100%; z-index:1000;
   background:rgba(10,14,23,.85); backdrop-filter:blur(12px);
   border-bottom:1px solid rgba(255,255,255,.06);
   padding:0 24px; height:64px;
   display:flex; align-items:center; justify-content:space-between;
}
nav .logo { font-size:1.2rem; font-weight:700; color:#f1c40f; letter-spacing:-.5px; }
nav .logo span { color:#5dade2; }
nav .nav-links { display:flex; gap:28px; list-style:none; }
nav .nav-links a { color:#b0b8c8; font-size:.9rem; font-weight:500; transition:color .3s; }
nav .nav-links a:hover { color:#f1c40f; }
.nav-toggle { display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-toggle span { width:24px; height:2px; background:#e0e6f0; border-radius:2px; transition:.3s; }

/* ===== HERO ===== */
.hero {
   min-height:100vh; display:flex; align-items:center; position:relative;
   padding-top:64px; overflow:hidden;
}
.hero::before {
   content:''; position:absolute; top:-30%; right:-20%;
   width:600px; height:600px;
   background:radial-gradient(circle,rgba(52,152,219,.12),transparent 70%);
   pointer-events:none;
}
.hero::after {
   content:''; position:absolute; bottom:-20%; left:-10%;
   width:500px; height:500px;
   background:radial-gradient(circle,rgba(243,156,18,.08),transparent 70%);
   pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.hero h1 { margin-bottom:1rem; }
.hero h1 .accent { color:#f1c40f; }
.hero .subtitle { font-size:1.15rem; color:#8a9bb5; margin-bottom:2rem; max-width:520px; }
.hero .badge {
   display:inline-block; padding:6px 16px; border-radius:20px;
   font-size:.8rem; font-weight:600; margin-bottom:1.2rem;
   background:rgba(46,204,113,.15); color:#2ecc71; border:1px solid rgba(46,204,113,.3);
}
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.btn {
   display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
   border-radius:10px; font-weight:600; font-size:.95rem;
   transition:all .3s; cursor:pointer; border:none; text-decoration:none;
}
.btn-primary { background:linear-gradient(135deg,#f39c12,#e67e22); color:#fff; box-shadow:0 4px 20px rgba(243,156,18,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(243,156,18,.4); }
.btn-secondary { background:rgba(255,255,255,.08); color:#e0e6f0; border:1px solid rgba(255,255,255,.15); }
.btn-secondary:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn-download { background:linear-gradient(135deg,#2ecc71,#27ae60); color:#fff; box-shadow:0 4px 20px rgba(46,204,113,.3); }
.btn-download:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(46,204,113,.4); }
.btn-mt4 { background:linear-gradient(135deg,#3498db,#2980b9); color:#fff; }
.btn-mt5 { background:linear-gradient(135deg,#9b59b6,#8e44ad); color:#fff; }

/* ===== HERO SVG ===== */
.hero-svg { display:flex; justify-content:center; align-items:center; }
.hero-svg svg { width:100%; max-width:480px; height:auto; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-svg .float-anim { animation:float 4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:.3} 50%{opacity:1} }
.pulse-1 { animation:pulse-dot 2s ease-in-out infinite; }
.pulse-2 { animation:pulse-dot 2s ease-in-out .4s infinite; }
.pulse-3 { animation:pulse-dot 2s ease-in-out .8s infinite; }
@keyframes draw-line { to { stroke-dashoffset:0; } }
.line-anim { stroke-dasharray:200; stroke-dashoffset:200; animation:draw-line 2s ease forwards; }

/* ===== SECTIONS ===== */
.section { padding:100px 0; }
.section-dark { background:rgba(255,255,255,.02); }
.section-header { text-align:center; margin-bottom:60px; }
.section-header p { color:#8a9bb5; font-size:1.1rem; max-width:600px; margin:0 auto; }

/* ===== CARDS ===== */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.card {
   background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
   border-radius:16px; padding:32px; transition:all .3s;
}
.card:hover { transform:translateY(-4px); border-color:rgba(93,173,226,.3); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.card .icon { font-size:2rem; margin-bottom:1rem; display:block; }
.card h3 { color:#f1c40f; }
.card p { color:#8a9bb5; font-size:.95rem; }

/* ===== FEATURES ===== */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.feature-item {
   background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
   border-radius:12px; padding:24px; text-align:center; transition:.3s;
}
.feature-item:hover { border-color:rgba(243,156,18,.3); }
.feature-item .num { font-size:2rem; font-weight:800; background:linear-gradient(135deg,#f39c12,#e74c3c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.feature-item h4 { color:#e0e6f0; margin:8px 0 4px; }
.feature-item p { color:#6a7a95; font-size:.85rem; }

/* ===== HOW IT WORKS ===== */
.flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin:40px 0; }
.flow-step {
   background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
   border-radius:12px; padding:24px; text-align:center; min-width:160px; flex:1;
   position:relative;
}
.flow-step .step-num {
   width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
   font-size:.8rem; font-weight:700; margin-bottom:10px;
   background:linear-gradient(135deg,#f39c12,#e74c3c); color:#fff;
}
.flow-step h4 { color:#e0e6f0; font-size:.95rem; }
.flow-step p { color:#6a7a95; font-size:.8rem; margin-top:4px; }
.flow-arrow { color:#5dade2; font-size:1.5rem; padding:0 8px; }

/* ===== ML SECTION ===== */
.ml-visual { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:40px; }
.ml-visual svg { width:100%; max-width:500px; height:auto; }
.ml-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ml-feat {
   background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
   border-radius:8px; padding:12px 14px; font-size:.85rem; transition:.3s;
   display:flex; align-items:center; gap:8px;
}
.ml-feat:hover { border-color:rgba(93,173,226,.4); }
.ml-feat .tag {
   display:inline-block; padding:2px 8px; border-radius:4px;
   font-size:.65rem; font-weight:600; white-space:nowrap;
}
.tag-trend { background:rgba(46,204,113,.2); color:#2ecc71; }
.tag-momentum { background:rgba(243,156,18,.2); color:#f39c12; }
.tag-volatility { background:rgba(231,76,60,.2); color:#e74c3c; }
.tag-pa { background:rgba(93,173,226,.2); color:#5dade2; }
.tag-volume { background:rgba(155,89,182,.2); color:#9b59b6; }
.tag-time { background:rgba(230,126,34,.2); color:#e67e22; }

/* ===== COMPARISON TABLE ===== */
.table-wrap { overflow-x:auto; margin:30px 0; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
thead { background:rgba(243,156,18,.1); }
th { padding:16px 20px; text-align:left; font-weight:600; color:#f1c40f; border-bottom:2px solid rgba(243,156,18,.2); }
td { padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.05); color:#b0b8c8; }
tr:hover td { background:rgba(255,255,255,.03); }
td:first-child { font-weight:600; color:#e0e6f0; white-space:nowrap; }
.badge-yes { display:inline-block; padding:2px 10px; border-radius:6px; font-size:.75rem; font-weight:600; background:rgba(46,204,113,.15); color:#2ecc71; }
.badge-no { display:inline-block; padding:2px 10px; border-radius:6px; font-size:.75rem; font-weight:600; background:rgba(231,76,60,.15); color:#e74c3c; }
.badge-warn { display:inline-block; padding:2px 10px; border-radius:6px; font-size:.75rem; font-weight:600; background:rgba(243,156,18,.15); color:#f39c12; }

/* ===== DOCS / SETTINGS ===== */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:24px; margin-top:40px; }
.setting-card {
   background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
   border-radius:14px; overflow:hidden;
}
.setting-card .card-header {
   padding:16px 20px; font-weight:700; font-size:.95rem;
   border-bottom:1px solid rgba(255,255,255,.07);
}
.setting-card .card-body { padding:16px 20px; }
.setting-row {
   display:flex; justify-content:space-between; align-items:center;
   padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.85rem;
}
.setting-row:last-child { border-bottom:none; }
.setting-row .name { color:#b0b8c8; }
.setting-row .val { font-weight:600; color:#f1c40f; font-family:'SF Mono','Fira Code',monospace; font-size:.8rem; }

/* ===== DOWNLOAD ===== */
.download-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:40px; }
.download-card {
   background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
   border-radius:16px; padding:32px; text-align:center; transition:.3s;
}
.download-card:hover { transform:translateY(-4px); border-color:rgba(93,173,226,.3); }
.download-card .icon { font-size:3rem; margin-bottom:1rem; }
.download-card h3 { color:#e0e6f0; }
.download-card p { color:#6a7a95; font-size:.85rem; margin:8px 0 20px; }
.download-card .size { font-size:.75rem; color:#4a5a75; }

/* ===== CONTACT ===== */
.contact-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:40px; }
.contact-card {
   background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
   border-radius:14px; padding:28px; text-align:center; transition:.3s;
}
.contact-card:hover { transform:translateY(-3px); border-color:rgba(93,173,226,.3); }
.contact-card .ico { font-size:2.2rem; margin-bottom:10px; }
.contact-card h4 { color:#e0e6f0; }
.contact-card p { color:#6a7a95; font-size:.85rem; }
.contact-card a { font-weight:600; }

/* ===== TESTIMONIAL ===== */
.testimonial {
   text-align:center; max-width:700px; margin:0 auto;
   background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
   border-radius:16px; padding:40px;
}
.testimonial blockquote { font-size:1.1rem; color:#c0c8d8; font-style:italic; margin-bottom:1rem; }
.testimonial cite { color:#8a9bb5; font-size:.85rem; }

/* ===== FOOTER ===== */
footer {
   border-top:1px solid rgba(255,255,255,.06); padding:40px 0;
   text-align:center; color:#4a5a75; font-size:.85rem;
}
footer a { color:#5dade2; }

/* ===== SCROLL ANIMATIONS ===== */
.reveal { opacity:0; transform:translateY(30px); transition:all .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===== MQL4/5 ICON BADGES ===== */
.icon-mt4, .icon-mt5 { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:6px; font-size:.7rem; font-weight:700; }
.icon-mt4 { background:rgba(52,152,219,.15); color:#3498db; }
.icon-mt5 { background:rgba(155,89,182,.15); color:#9b59b6; }

/* ===== NOTIFICATION TOAST ===== */
.toast {
   position:fixed; bottom:30px; right:30px; z-index:9999;
   background:#1a1e2e; border:1px solid rgba(46,204,113,.3);
   border-radius:12px; padding:16px 24px; color:#2ecc71;
   font-weight:600; font-size:.9rem;
   transform:translateY(120px); opacity:0;
   transition:all .4s ease;
   box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.toast.show { transform:translateY(0); opacity:1; }

/* ===== SVG ANIMATION HELPERS ===== */
.glow { filter:url(#glow); }

/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
   .hero-grid { grid-template-columns:1fr; gap:40px; }
   .hero-svg { order:-1; }
   .hero-svg svg { max-width:320px; }
   .ml-visual { grid-template-columns:1fr; }
   .flow { flex-direction:column; gap:12px; }
   .flow-arrow { transform:rotate(90deg); padding:8px 0; }
}
@media(max-width:640px) {
   nav .nav-links { display:none; position:fixed; top:64px; left:0; width:100%;
      flex-direction:column; background:rgba(10,14,23,.98); padding:20px 24px;
      gap:16px; border-bottom:1px solid rgba(255,255,255,.08);
   }
   nav .nav-links.open { display:flex; }
   .nav-toggle { display:flex; }
   .section { padding:60px 0; }
   .btn { width:100%; justify-content:center; }
   .hero-btns { flex-direction:column; }
}

/* ===== ADVANCED EA SPLIT CARDS ===== */
.split-card { margin-bottom:30px; padding:0; overflow:hidden; }
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.split-left, .split-right { padding:36px; }
.split-left { background:linear-gradient(135deg,rgba(52,152,219,.08),rgba(155,89,182,.08)); }
.split-right { background:rgba(255,255,255,.02); }
.split-card h3 { font-size:1.8rem; }
.split-card .sub { color:#8a9bb5; font-size:.9rem; margin:4px 0 16px; }
.split-card .desc { font-size:.9rem; color:#b0b8c8; line-height:1.8; }
.split-card .feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; font-size:.85rem; }
.split-card .feature-grid span { color:#2ecc71; }
.split-card .vs-title { color:#f39c12; font-size:1.1rem; }
.split-card ul { color:#8a9bb5; font-size:.85rem; line-height:2; margin-top:8px; list-style:none; padding:0; }
.split-card ul li::before { content:"\25B6 "; color:#5dade2; margin-right:4px; }
.split-card .notice { margin-top:16px; padding:12px 16px; border-radius:8px; font-size:.8rem; }

@media(max-width:800px) {
   .split-grid { grid-template-columns:1fr; }
   .split-left, .split-right { padding:24px; }
}