/* ARNIO Landing Page Styles - Design System */
:root { 
 /* Colors — Royal Blue (#2563EB) for CTAs */ 
 --blue-600: #2563EB; 
 --blue-500: #3B82F6; 
 --blue-700: #1D4ED8; 
 
 --gray-900: #0F172A; 
 --gray-700: #334155; 
 --gray-400: #CBD5E1; 
 --gray-100: #F1F5F9; 
 --white: #FFFFFF; 
 
 /* Typography */ 
 --font-family: 'Inter', sans-serif; 
 
 --display-xl: 48px; 
 --h1: 32px; 
 --h2: 24px; 
 --h3: 18px; 
 
 --body-l: 18px; 
 --body-m: 16px; 
 --body-s: 14px; 
 
 /* Spacing scale */ 
 --s-4: 4px; 
 --s-8: 8px; 
 --s-12: 12px; 
 --s-16: 16px; 
 --s-20: 20px; 
 --s-24: 24px; 
 --s-32: 32px; 
 --s-40: 40px; 
 --s-48: 48px; 
 --s-64: 64px; 
 
 /* Radius */ 
 --r-xs: 4px; 
 --r-sm: 8px; 
 --r-md: 12px; 
 --r-lg: 20px; 
 --r-full: 999px; 
 
 /* Shadows */ 
 --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); 
 --shadow-md: 0 4px 12px rgba(0,0,0,0.08); 
 --shadow-lg: 0 10px 24px rgba(0,0,0,0.12); 
 
 --max-width: 1200px; 
}

/* Base / Reset */
* { box-sizing: border-box; }

html, body { 
 height: 100%; 
 min-height: 100vh;
}

body { 
 margin: 0; 
 font-family: var(--font-family); 
 color: var(--gray-900); 
 background: var(--white); 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale; 
 text-rendering: optimizeLegibility; 
}

body.layout {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

img { max-width: 100%; display: block; }

a { 
 color: inherit; 
 text-decoration: none; 
}

a:hover { text-decoration: none; }

:focus-visible { 
 outline: 3px solid rgba(37, 99, 235, 0.35); 
 outline-offset: 2px; 
 border-radius: 10px; 
}

/* Layout / Container */
.container { 
 max-width: 1200px; 
 margin: 0 auto; 
 padding-left: 24px; 
 padding-right: 24px; 
}

.layout { 
 min-height: 100vh; 
 display: flex; 
 flex-direction: column; 
}

main { flex: 1; }

.dashboard-container {
 flex: 1;
 display: flex;
 flex-direction: column;
}

/* Header — Unified ARNIO (Linear/Stripe-style) */
.header { 
 position: sticky; 
 top: 0; 
 z-index: 30; 
 height: 64px; 
 min-height: 64px; 
 background: #ffffff; 
 border-bottom: 1px solid #e5e7eb; 
}

.header-inner { 
 max-width: 1200px; 
 margin: 0 auto; 
 height: 100%; 
 padding: 0 24px; 
 display: flex; 
 align-items: center; 
 gap: 16px; 
}

.header-brand { 
 display: flex; 
 align-items: center; 
 gap: 12px; 
}

.logo { 
 font-weight: 700; 
 letter-spacing: -0.025em; 
 color: #111827; 
 text-decoration: none; 
 font-size: 18px;
}

.logo:hover, 
.logo:focus { color: #111827; text-decoration: none; }

.header-sep { 
 color: #d1d5db; 
 font-weight: 400; 
 user-select: none; 
}

.header-module { 
 font-size: 14px; 
 color: #6b7280; 
 font-weight: 500; 
}

.nav { 
 display: flex; 
 gap: 6px; 
 margin-left: 8px; 
 flex: 1; 
 align-items: center; 
}

.nav a { 
 font-size: 14px; 
 color: rgba(51, 65, 85, 0.92); 
 padding: 8px 10px; 
 border-radius: 10px; 
}

.nav a:hover { 
 background: rgba(241, 245, 249, 0.9); 
 color: var(--gray-900); 
}

.nav a.active { 
 background: rgba(241, 245, 249, 0.9); 
 color: var(--gray-900); 
 font-weight: 600; 
}

.header-actions { 
 display: flex; 
 gap: 10px; 
 align-items: center; 
}

/* Buttons */
.btn { 
 display: inline-flex; 
 align-items: center; 
 justify-content: center; 
 gap: 10px; 
 padding: 12px 16px; 
 border-radius: 12px; 
 font-size: 14px; 
 line-height: 1; 
 font-weight: 600; 
 cursor: pointer; 
 border: 1px solid transparent; 
 transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; 
 user-select: none; 
 white-space: nowrap; 
 text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn-primary { 
 background: #2563EB; 
 color: var(--white); 
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
}

.btn-primary:hover { 
 background: #1d4ed8; 
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

.btn-outline { 
 background: rgba(255,255,255,0.7); 
 border-color: rgba(203, 213, 225, 0.9); 
 color: var(--gray-900); 
}

.btn-outline:hover { 
 background: rgba(241, 245, 249, 0.9); 
 border-color: rgba(203, 213, 225, 1); 
}

.btn-block { width: 100%; }

/* Footer — Enterprise dark (Linear/Stripe-style) */
.footer { 
 border-top: 1px solid #e5e7eb; 
 background: #111827; 
 color: #9ca3af; 
 margin-top: auto;
 width: 100%;
 position: relative;
}

.footer-inner { 
 max-width: 1200px; 
 margin: 0 auto; 
 padding: 48px 24px 32px; 
 display: grid; 
 grid-template-columns: repeat(3, minmax(0, 1fr)); 
 gap: 32px 48px; 
}

.footer-column-title { 
 font-weight: 600; 
 font-size: 13px; 
 letter-spacing: 0.02em; 
 text-transform: uppercase; 
 color: #f3f4f6; 
 margin-bottom: 16px; 
}

.footer-links { 
 display: grid; 
 gap: 12px; 
}

.footer-links a { 
 font-size: 14px; 
 color: #9ca3af; 
 transition: color 0.15s ease; 
}

.footer-links a:hover { color: #ffffff; }

.footer-bottom { 
 grid-column: 1 / -1; 
 margin-top: 32px; 
 padding-top: 24px; 
 border-top: 1px solid #1f2937; 
 font-size: 13px; 
 color: #6b7280; 
}

/* Responsive */
@media (max-width: 900px) { 
 .header-inner { padding: 0 16px; } 
 .container { padding-left: 16px; padding-right: 16px; } 
 .footer-inner { padding: 40px 16px 28px; grid-template-columns: 1fr; gap: 28px 0; } 
 .nav { display: none; }
}

/* Mobile-specific fixes for footer */
@media (max-width: 768px) {
 html {
  height: 100%;
  height: -webkit-fill-available; /* iOS Safari fix */
 }
 
 body.layout {
  min-height: 100vh;
  min-height: -webkit-fill-available; /* iOS Safari fix */
  display: flex;
  flex-direction: column;
  position: relative;
 }
 
 .footer {
  margin-top: auto;
  position: relative; /* Not fixed, but at bottom of content */
  width: 100%;
  flex-shrink: 0; /* Don't shrink footer */
 }
 
 /* Ensure dashboard-container takes available space */
 .dashboard-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow flex shrinking */
  overflow-y: auto; /* Allow scrolling if content is too long */
 }
 
 /* Ensure header doesn't shrink */
 .header {
  flex-shrink: 0;
 }
}