/* ==========================================================================
   SECTION 1: GLOBAL DESIGN TOKENS & CANVAS BASICS
   What: Establishes CSS custom properties (variables) for colors and borders.
   Where: Globally referenced across all files and layout templates.
   Which: Applies themes to headers, backgrounds, cards, and numeric outputs.
   ========================================================================== */
:root { 
  --bg-deep: #020b18; /* Deepest Space Blue canvas base color */ 
  --bg-card: rgba(4, 17, 40, 0.82); /* Thick, dense dark navy glass base */
  --text-main: #ccd6f6; /* Highly readable soft white text color token */ 
  --text-muted: #e0e6f7; /* Low-contrast blue-grey for subtext and labels */ 
  --neon-cyan: #64ffda; /* Primary cyberpunk accent for numbers, inputs, glows */ 
  --neon-purple: #bd34fe; /* Secondary accent reserved for alternative tools */ 
  --danger: #ff5f5f; /* Red accent token for early corpus depletion banners */ 
  --glass: rgba(17, 34, 64, 0.7); /* Translucent overlay glass variable alpha */ 
  --border: 1px solid rgba(100, 255, 218, 0.1); /* Subtle glowing layout boundary */ 
  
  /* Dedicated color variables for your 3 circles (Color pickers will show here) */ 
  --circle-1-color: rgba(4, 58, 45, 0.45); 
  --circle-2-color: rgba(65, 28, 28, 0.3); 
  --circle-3-color: rgba(45, 16, 73, 0.3); 
  --circle-4-color: rgba(23, 59, 52, 0.3); 
  
  --page-glass-background: 
    /* Circle 1: Top Left Teal Glow */ 
    radial-gradient(circle at 20% 25%, var(--circle-1-color) 0%, transparent 30%), 
    /* Circle 2: Center Right Navy/Indigo Glow */ 
    radial-gradient(circle at 80% 60%, var(--circle-2-color) 0%, transparent 20%), 
    /* Circle 3: Bottom Left Emerald/Teal Glow */ 
    radial-gradient(circle at 35% 85%, var(--circle-3-color) 0%, transparent 35%), 
    radial-gradient(circle at 30% 45%, var(--circle-4-color) 0%, transparent 40%), 

    /* The final base color background layer */ 
      var(--bg-deep); 
}

/* ==========================================================================
   SECTION 2: BASE DOCUMENT CANVAS STYLES
   What: Normalizes default browser margins, line spacing, and base fonts.
   Where: Runs natively across index.html, legal pages, and calculator tools.
   Which: Standardizes fallback typography parameters on raw body document nodes.
   ========================================================================== */

body { 
  /* Fixed: Changed 'background-color' to 'background' to support gradients */
  background: var(--page-glass-background); 
  background-attachment: fixed; 
  color: var(--text-main); 
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
  margin: 0; 
  line-height: 1.6; 
}

/* ==========================================================================
   SECTION 3: LAYOUT WIDTH CONTROLLER
   What: Defines a unified horizontal structural containment fence layout.
   Where: Encapsulates header grids, footer grids, and central calculator blocks.
   Which: Controls maximum screen boundaries and standardizes left/right padding.
   ========================================================================== */
.container {
  max-width: 1199px;
  margin: 0 auto;
  padding:  20px;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 4: SPLIT WORKSPACE GRID SYSTEM
   What: Splits calculations into a left tool stack and a right sidebar panel.
   Where: Drives layout structure across all calculators (SIP, SWP, FD, EMI, RD).
   Which: Enforces a 1200px grid split: 1fr (flexible content) vs 320px (fixed ad).
   ========================================================================== */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  margin-top: 40px;
}

/* ==========================================================================
   SECTION 5: SCROLL-STICKY AD ENFORCER
   What: Configures a persistent context-locked vertical ad element container.
   Where: Fixed to the right sidebar within all tool layout page contexts.
   Which: Forces the right column (.sticky-ad) to remain fixed 20px below viewport.
   ========================================================================== */
.sticky-ad {
  position: sticky;
  top: 20px;
  height: fit-content;
}

/* ==========================================================================
   SECTION 6: RESPONSIVE CONTENT STRUCTURAL WRAPPER
   What: Prevents wide layout data sheets from stretching outer flex containers.
   Where: Wraps table-wrapper, article, and seo-content blocks inside tool grid.
   Which: Forces table overflow boundaries to zero to stop horizontal screen breakage.
   ========================================================================== */
.left-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ==========================================================================
   SECTION 7: TABLET & MOBILE MEDIA BREAKPOINT
   What: Collapses 2-column layouts into unified vertical content flows on small screens.
   Where: Triggers on viewports below 1024px width across all tools.
   Which: Automatically hides the right sidebar ad column to protect mobile sizing.
   ========================================================================== */
@media (max-width: 1024px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .ad-container-right {
    display: none;
  }
}

/* ==========================================================================
   SECTION 8: GLASSMORPHIC SURFACE ELEMENTS
   What: Applies consistent container shapes, dark backdrops, and inner borders.
   Where: Shapes tool-card wrappers, input calc-boxes, and right ad panels.
   Which: Restructures raw layout divs into high-end glass cards with background blur.
   ========================================================================== */
.tool-card, .calc-box, .ad-slot {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 30px;
  border: var(--border);
  box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 9: TEXT & FORM LABEL TYPOGRAPHY
   What: Assigns color hierarchies, font scales, and spacing for header labels.
   Where: Styles layout text blocks inside index.html and calculator cards.
   Which: Colors h2/h3 components cyan and sets letter spacing on text labels.
   ========================================================================== */
h2, h3 {
  color: var(--neon-cyan);
  margin-top: 0;
}

label {
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* ==========================================================================
   SECTION 10: FORM INPUT GROUP CONTAINERS
   What: Standardizes bottom vertical buffer margins between parameter block nodes.
   Where: Form layouts inside tool-card container boundaries.
   Which: Spaces out parameters like Monthly Investment, Rate, and Years fields.
   ========================================================================== */
.input-group {
  margin-bottom: 25px;
}

/* ==========================================================================
   SECTION 11: NEON DIGITAL ENTRY COUNTERS
   What: Customizes modern numeric text input fields with a terminal look.
   Where: Applied to all `.sync-box` elements used for user input.
   Which: Forces numeric inputs to render using monospace font styles with cyan accents.
   ========================================================================== */
.sync-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  width: 100px;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 12: SLIDER RANGE CANVAS PROPERTIES
   What: Clears native browser tracking rendering configurations from slide elements.
   Where: Applied directly to range sliders (`input[type=range]`).
   Which: Prepares standard layout slider lines to accept custom webkit styling rules.
   ========================================================================== */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  margin-top: 10px;
}

/* ==========================================================================
   SECTION 13: SLIDER RAIL COMPONENT STYLING
   What: Sets track height, border radius, and backdrop color properties.
   Where: Applied directly to range input slider tracks across all calculators.
   Which: Shapes the background rail element that the slider handle glides across.
   ========================================================================== */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #233554;
  border-radius: 3px;
  cursor: pointer;
}

/* ==========================================================================
   SECTION 14: INTERACTIVE SLIDER THUMB GLOWS
   What: Standardizes round sliding buttons with cyan backgrounds and neon glows.
   Where: Webkit browser target engine slider thumb handle components.
   Which: Renders the glowing handle and increases its size on hover.
   ========================================================================== */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--neon-cyan);
  margin-top: -7px;
  box-shadow: 0 0 10px var(--neon-cyan);
  cursor: grab;
  transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/*--------------------------------------
*/
/* ==========================================================================
   SECTION 15: SUMMARY RESULTS CORE DISPLAY PANEL
   What: Creates an isolated summary container with dark backdrops and clean borders.
   Where: Renders inside the main calculation cards across all calculator views.
   Which: Styles aggregate summaries like Invested Amount, Est. Returns, and Maturity Value.
   ========================================================================== */
.result-panel {
  background: rgba(2, 12, 27, 0.5);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 16: DATA METRIC MATRIX ROW ALIGNMENT
   What: Distributes tracking metric description text labels and financial outputs.
   Where: Controls text structures nested directly within the global `.result-panel`.
   Which: Applies flex-spacing to create clean key-value balance layouts.
   ========================================================================== */
.res-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* ==========================================================================
   SECTION 17: SUMMARY MATURITY AGGREGATE MARKER
   What: Separates normal row matrices from final financial balance values.
   Where: Applied to the last item row in summary panels (`.res-row.total`).
   Which: Emphasizes final calculation numbers via larger fonts and cyan accents.
   ========================================================================== */
.res-row.total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
  font-size: 1.2rem;
  color: var(--neon-cyan);
  font-weight: bold;
}

/* ==========================================================================
   SECTION 18: CHROME WRAPPER FOR SCROLLABLE TABLES
   What: Forces long schedules to display inside bounded scroll view containers.
   Where: Controls data grid structures wrapping around table bodies across pages.
   Which: Limits table heights to 600px and enables safe layout overflow scroll bars.
   ========================================================================== */
.table-wrapper {
  max-height: 600px;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: 12px;
  border: var(--border);
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 19: TABULAR RECURRING DATA MATRIX GRID
   What: Normalizes default rendering attributes on dense raw table elements.
   Where: Runs natively inside the `.table-wrapper` framework across layout pages.
   Which: Maximizes data grids to fill 100% of their horizontal grid layout space.
   ========================================================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* ==========================================================================
   SECTION 20: STICKY COLUMN TRACKING HEADER BLOCKS
   What: Pins data grid headers to the top of the viewing area during scrolling.
   Where: Table column titles (`.data-table th`) inside data sheets.
   Which: Keeps column titles like Month, Interest, and Balance visible during long scrolls.
   ========================================================================== */
.data-table th {
  position: sticky;
  top: 0;
  background: #233554;
  color: var(--neon-cyan);
  padding: 15px;
  text-align: left;
  z-index: 10;
}

/* ==========================================================================
   SECTION 21: MONOSPACE DATA ENGINE VALUES CELLS
   What: Formats calculation entries with a highly readable digital data style.
   Where: Body rows (`.data-table td`) across all tool result panels.
   Which: Forces numeric data columns to render inside neat, aligned monospace blocks.
   ========================================================================== */
.data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(136, 146, 176, 0.1);
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
}

/* ==========================================================================
   SECTION 22: ANNUAL CHRONOLOGICAL RECORD MARKER
   What: Applies horizontal highlighting accents onto regular row timelines.
   Where: Injected dynamically by `table.js` on 12-month interval boundary cells.
   Which: Modifies month boundaries into bold rows with a subtle cyan glow.
   ========================================================================== */
.year-marker {
  background: rgba(100, 255, 218, 0.05);
  border-bottom: 2px solid var(--neon-cyan) !important;
}

.year-marker td {
  color: var(--neon-cyan)
}

/* ==========================================================================
   SECTION 23: WEB-ENGINE SCROLL BAR LAYOUT TOKENS
   What: Replaces standard chunky browser scrollbars with thin modern rails.
   Where: Applied globally (`::-webkit-scrollbar`) across standard browsing frames.
   Which: Restyles the main scroll area width inside scroll boxes and pages.
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

/* ==========================================================================
   SECTION 24: SCROLL TRACKING HANDLE BUTTON
   What: Customizes scrolling thumb handles with smooth hover transitions.
   Where: Applied directly onto browser window scroll indicators (`::-webkit-scrollbar-thumb`).
   Which: Turns scroll track buttons dark blue and shifts them to cyan when hovered.
   ========================================================================== */
::-webkit-scrollbar-thumb {
  background: #495670;
  border-radius: 4px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
}

/* ==========================================================================
   SECTION 25: SMART MOBILE VIEWPORT MEDIA CRITERIA
   What: Collapses layout grids into safe, single-column stacks on smaller viewports.
   Where: Media breakpoint rule running on screens under 768px width.
   Which: Disables wide multi-column frames and completely hides right ad zones.
   ========================================================================== */
@media (max-width: 768px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .ad-container-right {
    display: none;
  }
}

/* ==========================================================================
   SECTION 26: CATALOG LAUNCH LINKS CONVERSION HOOK
   What: Converted block anchors to make entire cards cleanly clickable link surfaces.
   Where: Core landing views (`index.html` and `blogs/index.html`) catalog blocks.
   Which: Disables text underlines and turns boring links into interactive bento buttons.
   ========================================================================== */
a.tool-card {
  text-decoration: none;
  display: block;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 27: TOOL CATALOG CARD EXPANSION HOOK
   What: Triggers interactive lift movements and crisp border glows on focus state shifts.
   Where: Desktop hover states applied onto clickable layout cards (`a.tool-card:hover`).
   Which: Enhances interactivity by shifting cards 5px up with a clean cyan border.
   ========================================================================== */
a.tool-card:hover {
  border-color: var(--neon-cyan);
  transform: translateY(-5px);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}


/*-------------------------------------------*/

/* ==========================================================================
   SECTION 28: HIGH-TECH SELECT DROPDOWN WRAPPERS
   What: Customizes form selection menus to blend with dark financial grids.
   Where: Selector nodes (`.tech-select`) inside compounding or payout options.
   Which: Styles selection borders, fonts, and individual internal dropdown option options.
   ========================================================================== */
.tech-select {
  width: 100%;
  background: var(--bg-card);
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  padding: 10px;
  border-radius: 8px;
  font-family: 'Segoe UI', sans-serif;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}

.tech-select option {
  background: var(--bg-deep);
  color: white;
}

/* ==========================================================================
   SECTION 29: GLOBAL NAVIGATION SYSTEM ROW OVERLAYS
   What: Groups independent layout anchors into clear, horizontally-spaced button tracks.
   Where: Inside injected `<nav>` containers populated across global layouts by app.js.
   Which: Spaces navigation paths cleanly, converting native lists into clear pill-bar views.
   ========================================================================== */
nav {
  display: flex;
  gap: 15px;
}

/* ==========================================================================
   SECTION 30: INTERACTIVE PREMIUM GLASS NAVIGATION BUTTONS
   What: Styles menu links into rounded capsule shapes with clean border parameters.
   Where: Universal navigation button selectors (`.nav-btn`) across pages.
   Which: Sets text margins, handles lowercase-to-uppercase shifts, and drives hover transitions.
   ========================================================================== */
.nav-btn {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--neon-cyan);
  border-radius: 50px;
  color: var(--text-main);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

/* ==========================================================================
   SECTION 31: NAVIGATION PILL BUTTON HOVER GLOW
   What: Shifts button colors and projects a distinct neon backdrop aura.
   Where: Desktop hover states applied onto standard links (`.nav-btn:hover`).
   Which: Inverts capsule color themes to bold dark text set inside a glowing cyan fill.
   ========================================================================== */
.nav-btn:hover {
  background: var(--neon-cyan);
  color: var(--bg-deep);
  box-shadow: 0 0 15px var(--neon-cyan);
}

/* ==========================================================================
   SECTION 32: ORCHESTRATOR HEADER STRUCTURE LAYOUT
   What: Normalizes spacing inside injected horizontal layout framework panels.
   Where: Flex properties within top header navigation containers (`header .container`).
   Which: Centers site branding title words away from global layout links.
   ========================================================================== */
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 30px;
}

/* ==========================================================================
   SECTION 33: DYNAMIC ACCORDION ITEM CONTAINERS
   What: Establishes relative coordinate boundaries for absolute child dropdown anchors.
   Where: Applied to list container nodes (`.nav-item`) inside master site menus.
   Which: Keeps expandable dropdown menus pinned accurately under their button links.
   ========================================================================== */
.nav-item {
  position: relative;
  display: inline-block;
}

/* ==========================================================================
   SECTION 34: HIGH-TECH FLOATING EXPANSION OVERLAY MENU
   What: Builds absolute dropdown containers with frosted glass backdrops.
   Where: Hidden popups (`.dropdown-menu`) loaded under tools selections.
   Which: Controls layout shapes, shadows, and z-index parameters above main cards.
   ========================================================================== */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 15, 28, 0.95);
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--neon-cyan);
  border-radius: 12px;
  padding: 10px 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  margin-top: 10px;
}

/* ==========================================================================
   SECTION 35: DESKTOP MOUSE HOVER NAVIGATION INTERACTION
   What: Animates and opens the dropdown overlay menu during mouse hovers.
   Where: Desktop viewports only (`@media (min-width: 769px)`).
   Which: Prevents hover states from conflicting with mobile touch click events.
   ========================================================================== */
@media (min-width: 769px) {
  .nav-item:hover .dropdown-menu {
    display: block;
    animation: slideUp 0.3s ease-out;
  }
}

/* ==========================================================================
   SECTION 36: MOBILE ACTIVE TOGGLE INTERACTION CLICK OVERRIDES
   What: Displays the dropdown overlay menu when activated via script tap toggles.
   Where: Applied onto active classes (`.nav-item.active .dropdown-menu`) for mobile viewports.
   Which: Syncs mobile touch clicks with the click event listeners in app.js.
   ========================================================================== */
.nav-item.active .dropdown-menu {
  display: block;
  animation: slideUp 0.3s ease-out;
}

/* ==========================================================================
   SECTION 37: DROPDOWN ROUTING LINK TRACKS
   What: Styles vertical menu anchors with custom margins and faint separators.
   Where: Navigation links (`.dropdown-menu a`) within expanded menu modules.
   Which: Disables text underlines, spaces items out, and optimizes font metrics.
   ========================================================================== */
.dropdown-menu a {
  display: block;
  color: var(--text-main);
  padding: 12px 20px;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

/* ==========================================================================
   SECTION 38: DROPDOWN SELECTION ANIMATION OFFSET
   What: Shifts links horizontally and introduces background tints during hover changes.
   Where: Links inside the dropdown menu panel (`.dropdown-menu a:hover`).
   Which: indents link text by 25px for a smooth, high-end hover interaction.
   ========================================================================== */
.dropdown-menu a:hover {
  background: rgba(100, 255, 218, 0.1);
  color: var(--neon-cyan);
  padding-left: 25px;
}

/* ==========================================================================
   SECTION 39: DROPDOWN FRAME TRIANGLE ACCENT DECORATION
   What: Generates a small geometric triangle connector tip above the dropdown panel.
   Where: Generated content pseudo-elements (`.dropdown-menu::before`) pinned to the panel box.
   Which: Renders an ornamental arrow that bridges the gap to the parent button link.
   ========================================================================== */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent var(--neon-cyan) transparent;
}

/* ==========================================================================
   SECTION 40: RESPONSIVE ACCORDION COLLAPSE BREAKPOINT RULES
   What: Collapses absolute dropdown rows into vertical inline stacks on small viewports.
   Where: Mobile screen layout media targets below 768px width.
   Which: Centers mobile text lines and flattens out absolute positioning boxes.
   ========================================================================== */

/*
Do not copy Section 40 from Chunk 3.Chunk 3 is safe to copy only up to Section 39.
 Section 40 in Chunk 3 contains a basic mobile fallback rule that will completely overwrite
  and scramble the advanced drawer-style mobile menu layout you have pasted here.Your pasted block 
  is much better because it implements a professional sliding mobile drawer layout using
   nav.active { display: flex; } alongside the app.js toggle code.
*/

/* ==========================================================================
   SECTION 41: ACCORDION EXPANSION TRANSITION TIMELINES
   What: Drives vertical scaling entry transitions for menu panels.
   Where: Keyframe animation declarations (`@keyframes slideUp`).
   Which: Smoothly slides and fades menus up into place when triggered.
   ========================================================================== */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}



/*----------------------------------*/

/*
*/
/* ==========================================================================
   SECTION 42: MOBILE HAMBURGER TOGGLE BUTTON
   What: Establishes baseline typography rules for the floating menu toggle icon.
   Where: Renders on elements matching `.menu-toggle` injected directly by app.js.
   Which: Controls the sizing, pointer events, and initial visibility of the menu button.
   ========================================================================== */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--neon-cyan);
}

/* ==========================================================================
   SECTION 43: MOBILE HEADER RESPONSIVE DOWNSCALING
   What: Dynamically drops default text sizes down to maximize layout space on screens.
   Where: Modifies structural root heading blocks (`h1`) inside small-width environments.
   Which: Shrinks headers down to 1.4rem below 768px width to eliminate tracking clip flaws.
   ========================================================================== */
@media (max-width: 768px) {
  h1 {
    font-size: 1.4rem;
    margin: 0;
  }

  /* ==========================================================================
     SECTION 44: RESPONSIVE TOGGLE TRIGGER REVEAL
     What: Discovers hidden structural parameters and displays navigation hooks to users.
     Where: Modifies layout selector components (`.menu-toggle`) inside mobile environments.
     Which: Switches the navigation wrapper layout from none to block to reveal mobile controls.
     ========================================================================== */
  .menu-toggle {
    display: block;
  }

  /* ==========================================================================
     SECTION 45: ABSOLUTE POSITIONED FLOATING MENU DRAWER
     What: Converts the regular desktop navbar into an overlay drop-down sheet.
     Where: Controls layout properties for `<nav>` tags inside active mobile headers.
     Which: Positions navigation blocks 100% below target elements with high z-indices.
     ========================================================================== */
  nav {
    display: none;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: #0a0f1c;
    border-bottom: 1px solid var(--neon-cyan);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    padding: 25px;
    margin: 0;
    z-index: 9999;
    box-sizing: border-box;
  }

  /* ==========================================================================
     SECTION 46: DRAWER PANEL EXPANSION STATE
     What: Controls drawer panel layout conditions via functional script interactions.
     Where: Applied natively onto the navbar tracker class (`nav.active`) inside small viewports.
     Which: Switches the main layout context from hidden to visible flex row rendering blocks.
     ========================================================================== */
  nav.active {
    display: flex;
  }

  /* ==========================================================================
     SECTION 47: DRAWER ELEMENT LIST ROW LAYOUT
     What: Flattens round capsule pill buttons into block list elements.
     Where: Action items (`.nav-btn` and `.nav-item`) within mobile navigation drawers.
     Which: Disables border contours, flattens card heights, and balances left/right elements.
     ========================================================================== */
  .nav-btn, .nav-item {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    text-align: left;
    padding: 15px 20px;
    margin: 0 0 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  /* ==========================================================================
     SECTION 48: STICKY MOBILE HOVER OVERRIDE RULES
     What: Prevents layout colors from locking up after user touch releases on tablets.
     Where: Disables desktop-only transitions (`.nav-btn:hover`) inside mobile layers.
     Which: Overrides high-glow border variables down to standard dim backdrop tints.
     ========================================================================== */
  .nav-btn:hover {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.02);
    color: var(--neon-cyan);
  }

  /* ==========================================================================
     SECTION 49: EMBEDDED MOBILE ACCORDION NESTING
     What: Transforms structural sub-menus into nested expansion fields inside the drawer panel.
     Where: Multi-tier links containers (`.dropdown-menu`) within active mobile headers.
     Which: Flattens absolute positions into static inline content rows with dark fills.
     ========================================================================== */
  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    padding: 0;
    display: none;
    width: 100%;
    box-sizing: border-box;
  }

  /* ==========================================================================
     SECTION 50: INLINE ACCORDION LINK INDENTATION
     What: Formats sub-menu navigation links to create visual structure hierarchies.
     Where: Sub-menu destination tags (`.dropdown-menu a`) within expanded mobile menus.
     Which: Applies an internal 40px left-padding indentation shift on tool routing links.
     ========================================================================== */
  .dropdown-menu a {
    padding-left: 40px;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  /* ==========================================================================
     SECTION 51: DYNAMIC MOBILE ACCORDION REVEAL
     What: Inverts layout rendering rules for interactive list targets on mobile devices.
     Where: Tracks active class states (`.nav-item.active .dropdown-menu`) on smaller screens.
     Which: Switches the sub-menu layout from hidden to visible display block configurations.
     ========================================================================== */
  .nav-item.active .dropdown-menu {
    display: block;
  }

  /* ==========================================================================
     SECTION 52: ACCORDION INDICATOR GLYPH ROTATION
     What: Appends a visual downward arrow state indicator to menu headers.
     Where: Pseudo-element descriptors (`.nav-item.active .nav-btn::after`) inside navigation panels.
     Which: Appends a physical triangle font indicator to notify users the view is active.
     ========================================================================== */
  .nav-item.active .nav-btn::after {
    content: "▼";
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   SECTION 53: MOBILE INTERACTION CANVAS EDGE REPAIR
   What: Normalizes default padding bounds across layout boxes to fix page breaks.
   Where: Runs natively on system wide screen layouts (`.container`) below 768px width.
   Which: Enforces box-sizing containment checks to prevent horizontal screen scroll glitches.
   ========================================================================== */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

/* --- MOBILE SAFETY PATCH --- */
/* --- MOBILE MENU SAFETY DRAWER REPAIR --- */
@media (max-width: 768px) {
  /* 1. Fix the Menu Drawer Edges and layout container balance */
  nav {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
  }
  /* 2. Prevent the Pill Buttons from touching the navigation drawer side edges */
  .nav-btn {
    width: 100%;
    margin-bottom: 15px;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   SECTION 54: UNIVERSAL RUNTIME SECURITY TICKER
   What: Establishes a bounded horizontal text track that clips overflow text.
   Where: Runs natively on index.html and tool header modules (.ticker-wrap).
   Which: Standardizes padding lines and dark translucent alpha backdrops.
   ========================================================================== */
.ticker-wrap {
  width: 100%;
  background: rgba(2, 12, 27, 0.8);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 55: INFINITE MARQUEE VELOCITY HOOK
   What: Converts plain text into a single continuous hardware-accelerated timeline block.
   Where: Applied directly to the tracking text container class (.ticker).
   Which: Forces the string loop to march endlessly across the screen without clipping.
   ========================================================================== */
.ticker {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* Pushes text out of view initially to start the track cleanly */
  animation: marquee 30s linear infinite; /* Loops seamlessly forever */
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--neon-cyan);
  letter-spacing: 2px;
}

/* ==========================================================================
   SECTION 56: HARDWARE ACCELERATED TRANSFORMATION ROADMAP
   What: Dictates the precise 2D axis movement coordinates for scrolling elements.
   Where: Applied by browser graphics engines when tracking the 'marquee' selector rule.
   Which: Translates text strings from off-screen right (-100%) to off-screen left.
   ========================================================================== */
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* ==========================================================================
   SECTION 57: ASYNCHRONOUS SCROLL REVEAL CARDS BASE
   What: Implements a hidden base state for content blocks before a user scrolls down.
   Where: Applied to promotional grids and overview layouts (.reveal-card).
   Which: Fades opacity to 0 and pre-shifts elements 40px down to prepare for a slide up.
   ========================================================================== */
.reveal-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   SECTION 58: ACTUATED SCROLL REVEAL TERMINAL STATE
   What: Triggers smooth entry fades and slight upward slide animations.
   Where: Fired dynamically on active scrolled views (.reveal-card.active).
   Which: Restores full opacity and pulls components up to their true layout coordinates.
   ========================================================================== */
.reveal-card.active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SECTION 59: BLOG CONTENT HUB DISPLAY TOPPERS
   What: Controls global text-align matrices and layout margins for main article indexes.
   Where: Runs natively inside the header grouping blocks (.blog-header) in blogs/index.html.
   Which: Centers big bold marketing headers and sets vertical content buffer cushions.
   ========================================================================== */
.blog-header {
  text-align: center;
  padding: 40px 0;
}

/* ==========================================================================
   SECTION 60: RESPONSIVE DIRECTORY TILES GRID
   What: Establishes an automatic grid track framework with minimum layout width limits.
   Where: Controls master layout blocks (.blog-grid) containing cards.
   Which: Fits resource columns side-by-side using minmax parameters, auto-collapsing on mobile.
   ========================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

/* ==========================================================================
   SECTION 61: GLASSMORPHIC INTERACTIVE CONTENT TILES
   What: Formats basic link boxes into separate glowing card surfaces.
   Where: Renders on article block anchors (.blog-card) across directory paths.
   Which: Disables anchor text underlines and enforces flex parameters to equalize heights.
   ========================================================================== */
.blog-card {
  background: rgba(17, 34, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 25px;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 62: CONTENT CARD LIFT & INTERACTIVE SHIFTS
   What: Drives active transitions when users highlight individual items.
   Where: Desktop state shifts on active anchors (.blog-card:hover).
   Which: Pulls cards up by 5px and swaps borders with your cyan tracking token variable.
   ========================================================================== */
.blog-card:hover {
  transform: translateY(-5px);
  border-color: var(--neon-cyan);
  background: rgba(17, 34, 64, 0.9);
}

/* ==========================================================================
   SECTION 63: CATEGORY RESOURCE METADATA BADGES
   What: Renders isolated capsule shape badges with subtle glowing background fills.
   Where: Injected category indicators (.tag) placed inside your article layouts.
   Which: Keeps badges cleanly pinned to the left edge of cards using flex boundaries.
   ========================================================================== */
.blog-card .tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--neon-cyan);
  background: rgba(100, 255, 218, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 15px;
  align-self: flex-start;
  border: 1px solid rgba(100, 255, 218, 0.2);
}

/* ==========================================================================
   SECTION 64: INTER-CARD ARTICLE HEADING TYPE
   What: Standardizes typography layout weight bounds for subheadings inside cards.
   Where: Title headers (.blog-card h3) embedded inside clickable article links.
   Which: Overrides native browser spacing loops and anchors text blocks cleanly.
   ========================================================================== */
.blog-card h3 {
  margin: 0 0 10px 0;
  color: var(--text-main);
  font-size: 1.3rem;
  font-weight: 600;
}

/* ==========================================================================
   SECTION 65: MULTI-LINE CARD TEXT BALANCING ELEMENTS
   What: Forces card text parameters to flex, automatically stretching lines down.
   Where: Paragraph data blocks (.blog-card p) nested inside grid lists.
   Which: Controls baseline line-height and pushes actions down to form level buttons.
   ========================================================================== */
.blog-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 20px;
}

/* ==========================================================================
   SECTION 66: CALL TO ACTION LINK INDICATORS
   What: Formats modern interactive layout links with inline flex layout rules.
   Where: Core link anchors (.read-more) pinned to card footprints.
   Which: Controls font weights, sizes, and maps out arrow alignment values.
   ========================================================================== */
.read-more {
  color: var(--neon-cyan);
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   SECTION 67: INTERACTIVE PSEUDO ELEMENT ARROW TIMELINES
   What: Creates a geometric typographic arrow indicator via pure CSS.
   Where: Appended content blocks (.read-more::after) tied to action containers.
   Which: Animates your arrow to slide 5px to the right when users hover over cards.
   ========================================================================== */
.read-more::after {
  content: "→";
  transition: margin-left 0.2s ease;
}

.blog-card:hover .read-more::after {
  margin-left: 5px;
}

/* ==========================================================================
   SECTION 68: CALCULATOR OVERVIEW CONTENT CONTAINER
   What: Establishes line-height balances and layout widths for educational guides.
   Where: Applied directly to article panels (.seo-content) positioned under calculation engines.
   Which: Controls maximum content widths (800px) and vertical spacing to push layout blocks down.
   ========================================================================== */
.seo-content {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
  color: #b0b8c4;
  line-height: 1.8;
  font-family: sans-serif;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 69: PRIMARY CONTENT BLOCK HEADINGS
   What: Formats section landing tags with bottom separator accent lines.
   Where: Root headings (.seo-content h2) inside the bottom text container.
   Which: Styles fonts to 1.8rem and injects clean, safe translucent glass underlines.
   ========================================================================== */
.seo-content h2 {
  color: var(--text-main);
  font-size: 1.8rem;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  padding-bottom: 10px;
}

/* ==========================================================================
   SECTION 70: SUBHEADING COMPONENT GLOW HIGHLIGHTS
   What: Overrides default text parameters, adding custom cyan text accents.
   Where: Strategy subheadings (.seo-content h3) within calculator user guides.
   Which: Highlights structural milestones like "Tax Rules" or "How the Math Works".
   ========================================================================== */
.seo-content h3 {
  color: var(--neon-cyan);
  font-size: 1.2rem;
  margin-top: 30px;
  margin-bottom: 15px;
}

/* ==========================================================================
   SECTION 71: TEXT PANEL PARAGRAPH DISTRIBUTIONS
   What: Directs spatial layout buffer dimensions for basic copy blocks.
   Where: Runs natively on paragraph tags (.seo-content p) nested under calculators.
   Which: Sets global 1rem typography sizes and standardizes bottom layout gaps.
   ========================================================================== */
.seo-content p {
  margin-bottom: 20px;
  font-size: 1rem;
}

/* ==========================================================================
   SECTION 72: STRATEGY CHECKLIST BULLET ALIGNMENTS
   What: Configures disc bullet shapes and provides adequate horizontal padding margins.
   Where: Bullet matrices (.seo-content ul) inside informational sections.
   Which: Formats lists like prepayment guidelines or risk trade-off parameters cleanly.
   ========================================================================== */
.seo-content ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 30px;
}

/* ==========================================================================
   SECTION 73: BULLET RECORD CONTENT TEXT COLORS
   What: Upgrades text contrast lines on loose list point entries for readability.
   Where: Individual list node markers (.seo-content li) across documentation blocks.
   Which: Enforces highly visible soft white text coloring across child tracking points.
   ========================================================================== */
.seo-content li {
  margin-bottom: 10px;
  color: var(--text-main);
}

/* ==========================================================================
   SECTION 74: INLINE IN-TEXT EMBEDDED AD BANNER
   What: Establishes a centered, dash-bordered ad placeholder framework inside text blocks.
   Where: Content-breaking advertising slots (.text-ad-slot) between text segments.
   Which: Uses modern border dimensions, padding, and subtle translucent grey backgrounds.
   ========================================================================== */
.text-ad-slot {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed #444;
  padding: 20px;
  margin: 30px 0;
  text-align: center;
  color: #666;
  border-radius: 8px;
  box-sizing: border-box;
}



/* ==========================================================================
   SECTION 75: DROP-DOWN OVERFLOW CONTROLLER
   What: Forces hidden absolute navigation blocks to allow elements to leak outward.
   Where: Runs natively on system navigation dropdown panels (.dropdown-menu).
   Which: Allows invisible bridge assets to stick out of parent tracking boxes cleanly.
   ========================================================================== */
.dropdown-menu {
  margin-top: 10px;
  overflow: visible !important;
}

/* ==========================================================================
   SECTION 76: INVISIBLE DROPDOWN MOUSE NAVIGATION BRIDGE
   What: Extends absolute hover interaction spaces up by 20px via pure CSS.
   Where: Appended layout pseudo-elements (.dropdown-menu::after) under navigation blocks.
   Which: Fixes mouse drops by filling the space between buttons and menus with a transparent layout.
   ========================================================================== */
.dropdown-menu::after {
  content: "";
  position: absolute;
  top: -20px;          /* Reaches up 20px to connect with the navbar header line */
  left: 0;
  width: 100%;
  height: 20px;        /* Creates a continuous mouse tracking surface area */
  background: transparent !important;
  border: none !important;
  opacity: 0;
  display: block;
  z-index: 100;        /* Ensures it intercepts cursor coordinates during drops */
}

/* ==========================================================================
   SECTION 77: STICKY ASSET VERTICAL AD STRUCTURE
   What: Sets consistent layout limits, center axes, and custom border values.
   Where: Applied directly to sidebar advertisement layouts (.sticky-ad .ad-slot).
   Which: Implements a 1px dashed frame with an alpha grey fill, matching your look.
   ========================================================================== */
.sticky-ad .ad-slot {
  min-height: 600px;
  border: 1px dashed #8892b0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8892b0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 78: EXTENDED FORM DROP-DOWN SELECT OPTIONS
   What: Overrides native browser themes for inner dropdown list option blocks.
   Where: Selector elements (`.tech-select option`) inside form calculation blocks.
   Which: Enforces a solid #222 background with a sharp white color font line.
   ========================================================================== */
.tech-select option {
  background-color: #222;
  color: #fff;
}

/* ==========================================================================
   SECTION 79: DUAL INLINE FORM ROW HEADER BALANCER
   What: Establishes horizontal flex metrics to distribute text labels away from data inputs.
   Where: Runs natively inside step-up calculators (`.dual-input-header`) like step-up-swp.html.
   Which: Maximizes row spacing width (100%) and squares up alignments along a clean center line.
   ========================================================================== */
.dual-input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ==========================================================================
   SECTION 80: COMPACT DUAL NUMBER INPUT SEGMENTS
   What: Groups multiple adjacent data input boxes closely inside a single horizontal track.
   Where: Embedded user entry zones (`.dual-input-row`) inside calculator card steps.
   Which: Applies an isolated flex layout with a strict 10px item tracking gap.
   ========================================================================== */
.dual-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ==========================================================================
   SECTION 81: RELATIVE BOUNDS FOR FLOATING PREFIX GLYPHS
   What: Locks relative display boundary blocks on dynamic text entry fields.
   Where: Content-wrapping containers (`.input-prefix-wrapper`, `.input-suffix-wrapper`).
   Which: Forces inner currency or percent indicator strings to stick accurately inside fields.
   ========================================================================== */
.input-prefix-wrapper, 
.input-suffix-wrapper {
  position: relative;
  display: inline-block;
}

/* ==========================================================================
   SECTION 82: FLOATING DUAL ELEMENT PLACEMENT SYMBOLS
   What: Positions absolute metadata symbols inside standard text fields.
   Where: Functional tag identifiers (`.prefix-indicator`, `.suffix-indicator`) inside cells.
   Which: Centers indicators vertically, disables mouse pointer capture blocks, and changes text to grey.
   ========================================================================== */
.prefix-indicator {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 0.8rem;
  pointer-events: none;
}

.suffix-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 0.8rem;
  pointer-events: none;
}

/* ==========================================================================
   SECTION 83: REPLACEMENT FORM BOX CORNER CONSTRAINTS
   What: Overrides default input boundaries to enforce compact structural column constraints.
   Where: Data entry cells (`.step-amount-field`, `.step-percent-field`) inside custom tools.
   Which: Adjusts layout widths (70px/60px) and applies inner padding spacing.
   ========================================================================== */
.step-amount-field {
  width: 70px !important;
  padding-left: 20px !important;
}

.step-percent-field {
  width: 60px !important;
  padding-right: 18px !important;
}

/* ==========================================================================
   SECTION 84: AD COMPONENT FRAME EXPLICIT THEME WRAPPERS
   What: Maps variant aesthetic styling treatments to layout placeholder boxes.
   Where: Optional sidebar slot classes (`.ad-slot.ad-gray-border`, `.ad-slot.ad-blue-border`).
   Which: Standardizes fallback display parameters to match the system's aesthetic design.
   ========================================================================== */
.sticky-ad .ad-slot.ad-gray-border {
  min-height: 600px;
  border: 1px dashed #444;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.sticky-ad .ad-slot.ad-blue-border {
  min-height: 600px;
  border: 1px dashed #8892b0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8892b0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   SECTION 85: UNIVERSAL VERTICAL PAGE OFFSET CUSHION
   What: Establishes a strict utility layout buffer class forcing element drops.
   Where: Applied to high-level wrapper grids inside about.html (.page-top-offset).
   Which: Injects a crisp 40px top margin to separate main body content from headers.
   ========================================================================== */
.page-top-offset {
  margin-top: 40px !important;
}

/* ==========================================================================
   SECTION 86: CSP SECURE COMPLIANT DESCRIPTION TYPOGRAPHY
   What: Replaces legacy inline styling strings with an external design system rule.
   Where: Subtitle paragraphs (.blog-subtitle-text) used in your marketing content layouts.
   Which: Sets clean text tracking, balances lines via a 1.6 line-height, and centers layout text blocks.
   ========================================================================== */
.blog-subtitle-text {
  color: var(--text-muted, #8892b0);
  max-width: 600px;
  margin: 10px auto;
  line-height: 1.6;
}




/* ==========================================================================
   V3 HOMEPAGE ARCHITECTURE STYLES (COMPLETELY ISOLATED PREFIXED CLASSES)
   ========================================================================== */

/* 1. V3 Hero Layout Context */
.v3-hero-viewport {
  padding: 100px 0 60px 0;
  background: radial-gradient(circle at top, rgba(100, 255, 218, 0.03) 0%, transparent 65%);
}

.v3-hero-frame {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.v3-badge-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.v3-security-badge {
  background: rgba(100, 255, 218, 0.08);
  border: 1px solid rgba(100, 255, 218, 0.15);
  color: var(--neon-cyan);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-family: monospace;
  font-weight: bold;
}

.v3-main-title {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: #fff;
}

.v3-main-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 35px;
}

.v3-hero-cta {
  display: inline-block;
  padding: 12px 28px;
  background: transparent;
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  text-decoration: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.v3-hero-cta:hover {
  background: var(--neon-cyan);
  color: var(--bg-deep);
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}

/* 2. Infinite Continuous Marquee Ticker */
.v3-ticker-belt {
  width: 100%;
  background: rgba(17, 34, 64, 0.5);
  border-top: var(--border);
  border-bottom: var(--border);
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
  box-sizing: border-box;
}

.v3-ticker-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: v3MarqueeLoop 35s linear infinite;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--neon-cyan);
  letter-spacing: 1px;
}

@keyframes v3MarqueeLoop {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* 3. V3 Split Scrolling Showcase Stage */
.v3-showcase-split-stage {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.v3-split-container {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
}

.v3-split-scroller-left {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.v3-feature-story-card {
  background: linear-gradient(135deg, rgba(4, 73, 56, 0.351) 0%, rgba(2, 27, 64, 0.45) 100%);
  /* 2. Frosted glass blur effect */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 40px;
  /*Soft shadow to give the glass layer depth */
  box-shadow: 0 1px 15px 0 rgba(107, 106, 106, 0.2);
  border-radius: 20px;
  transition: border-color 0.3s ease;
}

.v3-feature-pill {
  font-family: monospace;
  color: var(--neon-cyan);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 12px;
}

.v3-feature-story-card h2 {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 16px;
}

.v3-feature-story-card p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.v3-feature-hook {
  border-left: 2px solid var(--neon-cyan);
  padding-left: 14px;
  margin-top: 20px;
}

/* 4. Right Side Fixed Graphic Panel Frame */
.v3-split-sticky-right {
  position: sticky;
  top: 40px;
  height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.v3-mockup-display-window {
  width: 100%;
  height: 500px;
  background: var(--bg-card);
  border: var(--border);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 30px 60px -15px rgba(2, 12, 27, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.v3-graphic-canvas-inner {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed rgba(100, 255, 218, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  box-sizing: border-box;
}

.v3-mockup-placeholder-text {
  font-size: 0.9rem;
  color: #495670;
  font-family: monospace;
  line-height: 1.5;
}


/* 5. Tool Bento Catalog Grid Layout */
/* Catalog Layout & Small Tile Structure */
.v3-catalog-section {
  padding: 60px 20px;
}

.v3-catalog-container {
  max-width: 1200px;
  margin: 0 auto;
}

.v3-catalog-header {
  margin-bottom: 40px;
  text-align: center;
}

/* 4-Column Auto-Fitting Small Tile Grid Configuration */
.v3-bento-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* Thick Saturated Frosted Glass Bento Card Engine */
.v3-bento-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*background: /* Inherits your thick rgba(4, 17, 40, 0.82) */
  text-decoration: none;
  
  /* Compact layout settings for small tiles */
  padding: 24px;
  border-radius: 16px;
  min-height: 180px; 
  
  /* Thick glass blur and light engine refraction */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.5);
  
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Element Styles Inside Cards */
.v3-bento-card h3 {
  margin: 0 0 10px 0;
  color: var(--text-main);
  font-size: 1.2rem;
  font-weight: 600;
}

.v3-bento-card p {
  margin: 0 0 20px 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  flex-grow: 1; /* Pushes action link to the exact bottom of the small tile */
}

.v3-card-action {
  color: var(--neon-cyan);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Hover Mechanics */
.v3-bento-card:hover {
  transform: translateY(-5px);
  border-top-color: var(--neon-cyan); /* Lights up with your neon-cyan alpha on hover */
  border-left-color: var(--neon-cyan)
}

.v3-bento-card:hover .v3-card-action {
  color: var(--text-main);
}

/* 6. Portfolio micro card banner */
.v3-portfolio-profile-banner {
  max-width: 1200px;
  margin: 60px auto 100px auto;
  padding: 0 20px;
  box-sizing: border-box;
} 

.v3-profile-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: var(--border);
  border-radius: 16px;
  padding: 40px;
}

.v3-profile-card h3 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.v3-profile-card p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* 7. Mobile Presentation Collapsing Breakpoints */
@media (max-width: 992px) {
  .v3-split-container {
    grid-template-columns: 1fr;
  }
  .v3-split-sticky-right {
    display: none; /* Safely strips the fixed visual container view on portable devices */
  }
  .v3-main-title {
    font-size: 2.4rem;
  }
}



/* Reusable Universal Calculator Scroll Down Action Link */
.v3-scroll-down-btn {
  display: block;
  text-align: center;
  margin-top: 20px;
  padding: 12px 20px;
  background: rgba(100, 255, 218, 0.05); /* Extremely subtle neon cyan glaze tint */
  color: var(--neon-cyan);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover and Interactive Feedback States */
.v3-scroll-down-btn:hover {
  background: var(--neon-cyan);
  color: #020525; /* Flips color to your darkest space blue canvas background */
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.4); /* Cyberpunk edge glow projection */
  transform: translateY(2px); /* Simulated tactile click pressure downward directional vector */
}


/* Step 1: Ensure the calculator box can hold an absolute layer */
.tool-card.calc-box {
  position: relative; /* This is mandatory to contain the floating button */
  padding-bottom: 50px; /* Creates extra empty breathing room at the bottom for the button */
}

/* Step 2: Floating Button Matrix Engine */
.v3-scroll-down-btn.absolute-action {
  position: absolute;
  bottom: 12px; /* Floats it just above the bottom edge of the card */
  left: 50%;
  transform: translateX(-50%); /* Perfectly centers the button horizontally */
  z-index: 10; /* Ensures it floats directly over borders or text backgrounds */
  
  /* Layout settings optimized for a compact floating tile */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 14px;
  background: rgba(100, 255, 218, 0.08);
  color: var(--neon-cyan);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid rgba(100, 255, 218, 0.25);
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Hover Micro-Interactions */
.v3-scroll-down-btn.absolute-action:hover {
  background: var(--neon-cyan);
  color: #020c1b;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.5);
  transform: translateX(-50%) translateY(1px); /* Maintains center point while pressing down */
}





/* ==========================================================================
   V3 BLOG ARTICLE DEEP-DIVE STYLES (Scoped Isolation)
   ========================================================================== */

.v3blog-container {
    max-width: 760px;
    margin: 10px auto 0 auto; /* Pushes the article content 80px down past your navbar */
    padding: 4rem 1.5rem;
    box-sizing: border-box;
}

.v3blog-header {
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 2rem;
}

.v3blog-badge {
    display: inline-block;
    background: rgba(0, 255, 170, 0.1);
    color: var(--neon-cyan); /* Assumes your neon accent theme */
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(0, 255, 170, 0.15);
}

/* Change this selector to ensure it catches the h1 tag inside your header */
.v3blog-header h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff; /* FORCE visibility against dark background */
    display: block !important; /* Overrides any accidental hidden states */
}

.v3blog-meta {
    font-family: monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.v3blog-body {
    line-height: 1.7;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
}

.v3blog-lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 2rem;
}

.v3blog-body h3 {
    font-size: 1.45rem;
    color: #ffffff;
    margin: 2.5rem 0 1rem 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.v3blog-body p {
    margin-bottom: 1.5rem;
}

/* Technical Sandbox Callout Box */
.v3blog-callout {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid #00ffaa;
    padding: 1.5rem;
    margin: 2.5rem 0;
    border-radius: 0 8px 8px 0;
}

.v3blog-callout h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
}

.v3blog-callout p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Bottom CTA Loop Section */
.v3blog-footer-cta {
    margin-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 3rem;
}

.v3blog-cta-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
}

.v3blog-cta-card h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    color: #ffffff;
}

.v3blog-cta-card p {
    margin: 0 0 1.75rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.v3blog-btn {
    display: inline-block;
    background: #00ffaa;
    color: #0b0f19; /* Assumes your app's dark background color tint */
    padding: 0.8rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v3blog-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 255, 170, 0.3);
}
/* ==========================================================================
   V3 INLINE ARTICLE HEADER WORKAROUND (Bypasses app.js conflicts)
   ========================================================================== */

.v3inline-header {
    margin-top: 2rem; /* Pushes content down away from your injected navbar */
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 2rem;
    display: block !important;
}

.v3inline-badge {
    display: inline-block;
    background: rgba(0, 255, 170, 0.1);
    color: var(--neon-cyan, #00ffaa); 
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(0, 255, 170, 0.15);
}

.v3inline-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 1rem 0 !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff !important;
}

.v3inline-meta {
    font-family: monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   V3 ERROR 404 
   ========================================================================== */

.v3error-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
}
.v3error-code {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}
.v3error-box h1 {
    font-size: 3rem;
    margin: 0.5rem 0 1rem 0;
    font-weight: 700;
}
.v3error-box p {
    color: rgba(255, 255, 255, 0.6);
    max-width: 420px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}
.v3error-btn {
    display: inline-block;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 0.75rem 1.7rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}