:root{
  --brand:#2ecc71; --ink:#111827; --muted:#6b7280; --bg:#f8fafc;
  --ring:rgba(46,204,113,.35); --radius:12px;
}

/* Prevent flash of unstyled content */
html{visibility:hidden;scroll-behavior:smooth}
html.loaded{visibility:visible}
body.page-loaded{animation:fadeIn 0.3s ease-in}

@keyframes fadeIn{
  from{opacity:0.9;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 ui-sans-serif,system-ui;color:var(--ink);background:var(--bg);transition:opacity 0.15s ease-in-out}

/* Smooth page transitions to prevent flashing */
html{scroll-behavior:smooth}
body.page-transition{opacity:0.95}

/* Enhanced tab transition effects */
.tabs a{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:10px;color:#374151;text-decoration:none;transition:all 0.2s ease,transform 0.15s ease}
.tabs a:hover{background:#f3f4f6;transform:translateY(-1px)}
.tabs a.active{background:var(--accent);color:var(--accent-fg);transform:translateY(-1px);box-shadow:0 2px 4px rgba(46,204,113,0.1)}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
header.navbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:20;padding:0;transition:box-shadow 0.2s ease}
.navbar-inner{display:flex;align-items:center;gap:24px;height:64px}

/* Fix spacing issues - ensure content doesn't overlap with sticky navbar */
main{margin-top:20px;opacity:1;transition:opacity 0.2s ease}
.section.page-header{padding-top:80px}

/* Mobile content spacing fixes */
@media (max-width: 768px) {
  main{margin-top:160px}
  .section.page-header{padding-top:20px}
  
  /* Ensure proper spacing after mobile nav */
  body.page-loaded .hero{
    margin-top:0 !important;
  }
}

@media (max-width: 480px) {
  main{margin-top:140px}
  .section.page-header{padding-top:10px}
  
  /* Mobile-specific hero adjustments */
  body.page-loaded .hero{
    padding:20px 0 !important;
    margin-top:0 !important;
  }
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}

.menu-toggle{display:none}
nav.tabs{display:flex;gap:16px;margin-left:24px}
.actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none;cursor:pointer;transition:transform .02s ease,background .2s ease,box-shadow .2s ease;vertical-align:top;line-height:0.9;padding-top:0;padding-bottom:4px}
.btn:hover{background:#f9fafb}
.btn:focus{outline:2px solid var(--ring);outline-offset:4px}
.btn:active{transform:translateY(1px)}
.btn-sm{height:36px;padding:0 12px;border-radius:10px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;border-color:transparent;color:#374151}
.btn-ghost:hover{background:#f3f4f6}

/* Ensure header buttons use the unified system even if pages define their own .btn */
header.navbar .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none;cursor:pointer;transition:transform .02s ease,background .2s ease,box-shadow .2s ease;vertical-align:top;line-height:0.9;padding-top:0;padding-bottom:4px}
header.navbar .btn-sm{height:36px;padding:0 12px;border-radius:10px}
header.navbar .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
header.navbar .btn-primary:hover{filter:brightness(.95)}
header.navbar .btn-ghost{background:transparent;border-color:transparent;color:#374151}
header.navbar .btn-ghost:hover{background:#f3f4f6}
/* 
 * MOBILE NAVIGATION IMPROVEMENTS - Version 2.0
 * 
 * Fixed mobile navigation visibility and button positioning issues:
 * 1. Tab navigation now visible and horizontally scrollable on mobile
 * 2. "Get Started" button properly positioned in actions area 
 * 3. Improved touch targets and responsive layout
 * 4. Better visual hierarchy for mobile user experience
 * 
 * Changes:
 * - Removed hidden nav.tabs on mobile
 * - Added horizontal scrolling for tab overflow
 * - Repositioned action buttons below navigation
 * - Enhanced touch targets and spacing
 * - Improved flexbox layout for better mobile UX
 * 
 * Last Updated: 2025-09-01
 */
@media (max-width:768px){
  .navbar-inner{height:auto;flex-wrap:wrap;padding:8px 0;min-height:56px}
  .menu-toggle{display:none}
  
  /* Mobile tab navigation improvements */
  nav.tabs{
    display:flex;
    flex-direction:row;
    margin:8px 0;
    width:100%;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:0 0 4px 0;
  }
  
  nav.tabs::-webkit-scrollbar{display:none}
  
  nav.tabs a{
    white-space:nowrap;
    flex-shrink:0;
    font-size:13px;
    height:32px;
    padding:0 10px;
    min-width:70px;
  }
  
  /* Mobile actions/buttons styling */
  .actions{
    order:3;
    width:100%;
    margin:4px 0;
    justify-content:center;
    gap:8px;
  }
  
  .actions .btn{
    flex:1;
    max-width:130px;
    height:40px;
    font-size:14px;
  }
  
  /* Ensure brand stays on top row */
  .brand{
    order:1;
    flex-shrink:0;
    margin-bottom:0;
  }
  
  /* Adjust main content spacing for mobile */
  main{
    margin-top:140px;
  }
  
  .section.page-header{
    padding-top:20px;
  }
  
  /* Override any conflicting hero styles */
  .hero{
    padding:30px 0 !important;
    margin-top:0 !important;
  }
}

/* Modern brand logo and text styling */
.brand-logo{width:36px;height:36px;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;border-radius:8px;box-shadow:0 2px 8px rgba(34,197,94,0.15)}
.brand img, .brand-logo{filter:none;mix-blend-mode:normal}
.brand{color:var(--ink);transition:all 0.2s ease;text-decoration:none!important;font-size:20px;font-weight:600;letter-spacing:-0.025em}
.brand:hover{transform:translateY(-1px);color:var(--ink)!important;text-decoration:none!important}
.brand:hover .brand-logo{box-shadow:0 4px 12px rgba(34,197,94,0.25)}
.brand span{color:var(--ink)!important;text-decoration:none!important;border:none!important}