/* Structural Layout Standard System Reset Configuration */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    background-color: #0B0F19; 
    color: #E2E8F0; 
    font-family: -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    }

/* Glassmorphism Header Terminal Element Interface */
.site-header  { 
    border-bottom: 1px solid #1E293B; 
    background-color: rgba(11, 15, 25, 0.75); 
    backdrop-filter: blur(12px); 
    position: sticky; top: 0; z-index: 50; 
}
.site-header .container{ max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 4px; cursor: default !important;  text-decoration: none !important;}
.logo { font-weight: 900; font-size: 22px; letter-spacing: 0.08em; color: #F59E0B; text-shadow: 0 0 15px rgba(245, 158, 11, 0.2); margin-right: 0px; padding-right: 1px;  }
.logo-sub { 
    color: #F8FAFC; 
    font-weight: 600; 
    font-size: 13px; 
    letter-spacing: 0.15em; 
    text-transform: uppercase; 
    border-left: 1px solid #475569; 
    margin-left: 0px; 
    padding-left: 6px; 
}

/* Navigation and Language Switcher Links */
.header-nav ul { display: flex; gap: 20px; align-items: flex-start;list-style: none;  }
.header-nav a { color: #94A3B8; font-size: 13px; font-weight: 500; cursor: pointer; background: none; border: none; outline: none; transition: color 0.2s; text-decoration: none; }
.header-nav a:hover, .nav-link.active { color: #F59E0B; }


a {color: #f59e0b;text-decoration: none;}
a:hover { text-decoration: underline; }
.lang-toggle-group { display: flex; background-color: #090F1C; border: 1px solid #1E293B; padding: 3px; border-radius: 8px; gap: 2px; }
.lang-btn { background: transparent; border: none; padding: 5px 5px; color: #64748B; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 6px;  margin-left: 6px; transition: all 0.2s; outline: none; }
.lang-btn.active { background-color: #F59E0B; color: #0B0F19; }

/* View Router Container Displays */
.view-section { display: none; max-width: 1100px; margin: 0 auto; padding: 48px 24px; width: 100%; flex-grow: 1; }
.view-section.active-view { display: grid; }

#view-home { grid-template-columns: 1fr; gap: 40px; align-items: start; }

.header-nav {
    display: none; 
    
}
.hamburger-toggle {
        display: flex;       /* Shows your button on mobile viewports */
        margin-left: 24px;   /* Pushes your button to the far right margin */
        background: none;    /* Removes standard browser button gray background box */
        border: none;        /* Removes default button outlines */
        color: #F8FAFC;      /* Premium off-white tone to see the symbol against dark header backgrounds */
        font-size: 28px;     /* Sets optimal touch target scaling for mobile thumb clicks */
        cursor: pointer;     /* Backup pointer interaction helper */
    }
.header-nav.mobile-open {
  display: block;
  position: absolute;
  top: 75%;
  left: 55px;
  background-color: #131C2E;
  border: 1px solid #24324D;
  border-radius: 12px;
  padding: 12px 15px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.header-nav ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* Right-side wrapper: holds nav + (lang toggle + hamburger) together */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Lang toggle + hamburger group — always visible, never collapses into menu */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .hamburger-toggle { display: none; }

  .header-nav {
    display: block;
    position: static;
    background: none;
    border: none;
    padding: 0;
  }

  .header-nav ul {
    flex-direction: row;
    gap: 20px;
  }


}





@media (min-width: 768px) { #view-home { grid-template-columns: 11fr 13fr; }

     .header-nav {
        display: block;
    }
.hamburger-toggle {
        display: none;
}
 .header-nav ul {
    flex-direction: row!important;
    gap: 20px;
  }

 }

/* Premium Dark Card Background Shell Mapping */
.calculator-card { background: linear-gradient(135deg, #131C2E 0%, #0F172A 100%); border-radius: 20px; border: 1px solid #24324D; padding: 20px; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7); position: relative; overflow: hidden; }
.calculator-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #3B82F6, transparent); }
.card-title { font-size: 22px; font-weight: 800; color: #FFFFFF; margin-bottom: 6px; tracking-tight: -0.02em; }
.card-desc { font-size: 14px; color: #A9B6C9; margin-bottom: 28px; line-height: 1.7;}

/* Input Controller Containers Layer Layout */
.input-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
@media (min-width: 640px) { .input-grid { grid-template-columns: 1fr 1fr; } }
.form-group { width: 100%; }
.label { display: block; font-size: 11px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.input, .select { width: 100%; background-color: #090F1C; border: 1px solid #334155; border-radius: 12px; padding: 14px 16px; color: #FFFFFF; font-family: inherit; font-size: 14px; outline: none; transition: all 0.2s; }
.input { font-family: monospace; font-size: 17px; }
.input:focus, .select:focus { border-color: #38BDF8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); }

/* Execution Button UI Core Engine Modules */
.btn { width: 100%; background-color: #F59E0B; color: #0B0F19; font-weight: 700; padding: 15px 20px; border-radius: 12px; border: none; cursor: pointer; text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; transition: all 0.2s; }
.btn:hover { background-color: #FBBF24; box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
.btn:active { transform: scale(0.99); }

/* Dynamic Calculation Target Grid Box Output Visuals */
.results-box { display: none; margin-top: 32px; padding-top: 28px; border-top: 1px solid #1E293B; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.directives-wrapper { background-color: rgba(9, 15, 28, 0.7); border-radius: 14px; border: 1px solid #1E293B; padding: 18px; margin-bottom: 24px; }
.section-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-tag { font-size: 10px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.12em; }
.btn-copy { background: transparent; border: none; color: #38BDF8; font-size: 11px; cursor: pointer; font-weight: 600; outline: none; }
.btn-copy:hover { color: #7DD3FC; text-decoration: underline; }

.directive-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 12px; }
.directive-row:last-child { margin-bottom: 0; }
.bullish { color: #34D399; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.bearish { color: #F87171; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.trigger-val { font-family: monospace; font-weight: 700; color: #FFFFFF; padding: 3px 10px; border-radius: 6px; font-size: 14px; }
.trigger-buy { background-color: rgba(6, 78, 59, 0.4); border: 1px solid rgba(52, 211, 153, 0.2); color: #34D399; }
.trigger-sell { background-color: rgba(153, 27, 27, 0.4); border: 1px solid rgba(248, 113, 113, 0.2); color: #F87171; }

.matrix-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 520px) { .matrix-grid { grid-template-columns: 1fr 1fr; } }
.matrix-col { padding: 18px; border-radius: 14px; border: 1px solid transparent; }
.col-res { background: linear-gradient(180deg, rgba(153, 27, 27, 0.1) 0%, transparent 100%); border-color: rgba(248, 113, 113, 0.1); }
.col-sup { background: linear-gradient(180deg, rgba(6, 78, 59, 0.1) 0%, transparent 100%); border-color: rgba(52, 211, 153, 0.1); }
.matrix-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1E293B; padding-bottom: 8px; margin-bottom: 12px; }
.matrix-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.matrix-title-res { color: #F87171; }
.matrix-title-sup { color: #34D399; }
.matrix-sub { font-size: 10px; font-family: monospace; color: #A9B6C9; }
.matrix-row { font-size: 13px; display: flex; justify-content: space-between; font-family: monospace; color: #A9B6C9; margin-bottom: 10px; }
.matrix-row:last-child { margin-bottom: 0; }
.matrix-label { color: #A9B6C9; }
.matrix-val { font-weight: 700; color: #F1F5F9; }
.footer-note { font-size: 10px; text-align: center; color: #788699; font-family: monospace; margin-top: 24px; }

/* Styled SEO Content Copy Section Classes Matrix */
.content-col { display: flex; flex-direction: column; gap: 20px; }
.seo-title { font-size: 24px; font-weight: 800; color: #FFFFFF; border-left: 3px solid #F59E0B; padding-left: 14px; margin-bottom: 4px; tracking-tight: -0.02em; }
.seo-subtitle { font-size: 18px; font-weight: 700; color: #FFFFFF; margin-top: 10px; }
.seo-text { font-size: 14.5px; color: #A9B6C9; line-height: 1.7; }
.seo-list { list-style-type: none; padding-left: 4px; display: flex; flex-direction: column; gap: 12px; }
.seo-list li { font-size: 14px; color: #94A3B8; position: relative; padding-left: 20px; }
.seo-list li::before { content: "•"; color: #F59E0B; font-weight: bold; position: absolute; left: 0; top: 0; font-size: 16px; }
.highlight-gold { color: #F59E0B; font-weight: 600; font-family: monospace; background: rgba(245, 158, 11, 0.05); padding: 2px 6px; border-radius: 4px; }
.highlight-white { color: #F1F5F9; font-weight: 600; }

/* Legal Shell Text Containers Grid Layout Styles */
.legal-box { background-color: #131C2E; border: 1px solid #24324D; border-radius: 16px; padding: 20px;  width: 100%; max-width: 850px; margin: 0px auto; }
.legal-title { font-size: 26px; font-weight: 800; color: #FFFFFF; margin-bottom: 18px; border-bottom: 1px solid #24324D; padding-bottom: 12px; }
.legal-text { color: #A9B6C9; font-size: 14.5px; line-height: 1.8; margin-bottom: 16px; }
.legal-text strong { color: #FFFFFF; }

/* Corporate Footer Element */
.site-footer { border-top: 1px solid #1E293B; background-color: #070A12; padding: 24px; text-align: center; font-size: 12px; color: #788699; margin-top: auto; }
.footer-links { display: flex; justify-content: center; gap: 16px; margin-top: 8px; }
.footer-links a {
  color: #94A3B8;
  font-weight: 500;
}
.footer-links a:hover { color:#F59E0B ; text-decoration: underline; }



@media (min-width: 768px) {
  .legal-box { padding: 32px; }
.calculator-card { padding: 28px; }
}


/* Article Content Extras (scoped to .legal-box so other legal-box pages are unaffected) */
.legal-h4 { font-size: 22px; font-weight: 800; color: #FFFFFF; border-bottom: 1px solid #24324D; padding-bottom: 10px; margin-bottom: 16px; }
.legal-h2 { font-size: 22px; font-weight: 800; color: #FFFFFF; margin-top: 40px; margin-bottom: 16px; }
.legal-subtitle { font-size: 19px; font-weight: 700; color: #FFFFFF; margin-bottom: 18px; border-bottom: 1px solid #24324D; padding-bottom: 12px; }

.legal-box hr { border: 0; border-top: 1px solid #293548; margin: 48px 0; }

.legal-box blockquote { background-color: #0E1626; border-left: 4px solid #F59E0B; border-top: 1px solid #293548; border-right: 1px solid #293548; border-bottom: 1px solid #293548; margin: 36px 0; padding: 24px 28px; border-radius: 0 12px 12px 0; }
.legal-box blockquote p { font-size: 1.25rem; font-style: italic; font-weight: 500; line-height: 1.5; margin-bottom: 0; color: #FFFFFF; }

.toc-box { background: linear-gradient(135deg, #131C2E 0%, #0F172A 100%); border: 1px solid #293548; padding: 24px; border-radius: 12px; margin: 40px 0; }

.toc-box h4 { color: #FFFFFF; margin: 0 0 16px 0; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.toc-links { list-style-type: none; padding-left: 0; margin: 0; }
.toc-links li { margin-bottom: 12px; }
.toc-links li:last-child { margin-bottom: 0; }
.toc-links a { color: #F59E0B; text-decoration: none; font-weight: 500; font-size: 1.05rem; }
.toc-links a:hover { text-decoration: underline; }

.legal-box ul:not(.toc-links) { list-style-type: none; padding-left: 0; margin: 28px 0; background-color: #0E1626; border: 1px solid #293548; border-radius: 12px; padding: 12px 24px; }
.legal-box ul:not(.toc-links) li { font-size: 1.05rem; margin-bottom: 0; padding: 12px 0 12px 24px; position: relative; border-bottom: 1px solid #293548; color: #94A3B8; }
.legal-box ul:not(.toc-links) li:last-child { border-bottom: none; }
.legal-box ul:not(.toc-links) li::before { content: "→"; color: #F59E0B; font-weight: bold; position: absolute; left: 0; }

.formula-box { background-color: #0E1626; border: 1px solid #293548; color: #F59E0B; padding: 24px; border-radius: 12px; text-align: center; font-family: "SF Mono", SFMono-Regular, Consolas, monospace; font-size: 1.4rem; font-weight: 700; margin: 36px 0; overflow-x: auto; letter-spacing: 0.02em; }





/* FAQ Section */
.faq-container {
    max-width: 100%;
    margin: 40px auto;
      font-family: -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;
    grid-column: 1 / -1;

}
.faq-title {
    display: inline-block;
padding-bottom: 10px;
font-size: 22px;
margin-bottom: 14px;
border-left: 3px solid #F59E0B;
font-weight: 800;
padding-left: 14px;
tracking-tight: -0.02em; 
}
.faq-question { font-weight: 600;  font-size: 15px; margin-bottom: 4px; color: #F1F5F9;
 
}
.faq-answer {
    text-align: justify; 
font-size: 14.5px; color: #A9B6C9; line-height: 1.7;
}
.faq-main-item,
.faq-item {
    margin-bottom: 20px;
}
.faq-toggle {
    color: #F59E0B;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    margin-bottom: 20px;
}
.faq-hidden {
    display: none;
}

.degree-levels-wrapper { margin-top: 10px; }
.degree-row { display: flex; font-size: 13px; padding: 6px 0; }
.degree-header { color: #64748B; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #1E293B; padding-bottom: 8px; margin-bottom: 4px; }
.degree-col-deg {flex: 1; color: #A9B6C9; font-weight: 700; }
.degree-header .degree-col-deg { color: #fff; font-weight: normal; }
.degree-col-sup { flex: 1; color: #fff; }
.degree-col-res { flex: 1; color: #fff; }
.degree-header .degree-col-sup { color: #34D399; }
.degree-header .degree-col-res { color: #F87171; }