/* ===============================
   Dull Mist Robotics — industrial_modern style.css
   Mobile-first, flexbox-only, dark industrial modern aesthetic
   =============================== */

/* RESET & NORMALIZE */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.6; }
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { margin: 0; padding: 0 0 0 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: transparent; }
:focus-visible { outline: 2px solid #00C2A8; outline-offset: 2px; }

/* THEME TOKENS (with fallbacks) */
:root {
  --dmr-bg: #0A1620; /* dark steel/navy */
  --dmr-surface: #101C26; /* panel */
  --dmr-surface-2: #0F1A24; /* header/footer */
  --dmr-elev: #132330; /* elevated cards */
  --dmr-text: #E6EDF3; /* primary text */
  --dmr-muted: #A9B6C2; /* muted */
  --dmr-primary: #0C2D48; /* brand deep navy */
  --dmr-teal: #00C2A8; /* brand accent teal */
  --dmr-accent: #F2F6F9; /* light accent */
  --dmr-metal: #6E7D88; /* metallic accent */
  --dmr-line: #263543; /* divider */
  --dmr-danger: #E45757;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-1: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 26px rgba(0,0,0,0.45);
  --transition-fast: 160ms ease;
  --transition-med: 260ms ease;
}

/* BASE TYPOGRAPHY */
body {
  background: var(--dmr-bg);
  color: var(--dmr-text);
  font-family: Verdana, "Segoe UI", Roboto, Arial, sans-serif; /* brand body */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", "Franklin Gothic Medium", "Segoe UI", Arial, sans-serif; /* brand display */
  margin: 0 0 10px 0;
  letter-spacing: 0.2px;
  color: #FFFFFF;
}

h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.4; }
.subhead { color: var(--dmr-muted); font-size: 16px; }

p { margin: 0 0 12px 0; color: var(--dmr-text); }
strong { color: #FFFFFF; }

/* GLOBAL LAYOUT CONTAINERS — FLEX ONLY */
.container {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px;
}
.content-wrapper {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}

/* MANDATORY SPACING & ALIGNMENT PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--dmr-elev); border: 1px solid var(--dmr-line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-1); }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: var(--radius); border: 1px solid #D6E1E8; background: var(--dmr-accent); color: #0C2D48; box-shadow: 0 4px 12px rgba(5,12,18,0.08); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* LISTS — INDUSTRIAL BULLETS */
.content-wrapper ul,
.text-section ul,
section ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
section ul li { display: flex; align-items: flex-start; gap: 12px; color: var(--dmr-text); }
section ul li::before { content: ""; display: inline-flex; width: 8px; height: 8px; margin-top: 8px; background: var(--dmr-teal); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }

/* HEADER */
header { background: var(--dmr-surface-2); border-bottom: 1px solid var(--dmr-line); position: relative; z-index: 50; }
header .container { padding-top: 12px; padding-bottom: 12px; }
header .content-wrapper { gap: 14px; }

.logo { display: inline-flex; align-items: center; }
.logo img { height: 32px; width: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }

.main-nav { display: none; align-items: center; gap: 18px; }
.main-nav a { color: var(--dmr-muted); padding: 8px 10px; border-radius: 6px; transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.main-nav a:hover { color: #FFFFFF; background: #0E2231; transform: translateY(-1px); }
.main-nav a:focus-visible { background: #0E2231; color: #FFFFFF; }

.header-ctas { display: none; align-items: center; gap: 12px; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #FFFFFF; background: #0E2231; border: 1px solid var(--dmr-line); border-radius: 8px; transition: background var(--transition-fast), transform var(--transition-fast); }
.mobile-menu-toggle:hover { background: #123043; transform: translateY(-1px); }
.mobile-menu-toggle:active { transform: translateY(0); }

/* MOBILE MENU OVERLAY */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 16px; background: rgba(6,14,20,0.88); backdrop-filter: saturate(120%) blur(2px); transform: translateX(100%); transition: transform var(--transition-med); z-index: 999; }
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }

.mobile-menu .container { width: 100%; max-width: none; padding: 0; }
.mobile-menu .mobile-menu-close { align-self: flex-end; margin: 16px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: #0E2231; border: 1px solid var(--dmr-line); border-radius: 8px; }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; background: var(--dmr-surface); border-top: 1px solid var(--dmr-line); border-left: 1px solid var(--dmr-line); border-right: 1px solid var(--dmr-line); border-bottom: 1px solid var(--dmr-line); border-radius: var(--radius); margin: 0 16px 24px; padding: 12px; box-shadow: var(--shadow-2); }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; color: #E8F0F5; border-radius: 8px; transition: background var(--transition-fast), transform var(--transition-fast); }
.mobile-nav a:hover { background: #142635; transform: translateX(2px); }
.mobile-nav a:active { transform: translateX(0); }

/* HERO SECTION */
.hero { background: #08151E; border-bottom: 1px solid var(--dmr-line); }
.hero .container { padding-top: 36px; padding-bottom: 36px; }
.hero .content-wrapper { gap: 16px; }
.hero h1 { font-size: 28px; }
.hero .subhead { font-size: 16px; color: var(--dmr-muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* TEXT SECTIONS */
.text-section { display: flex; flex-direction: column; gap: 10px; background: var(--dmr-surface); border: 1px solid var(--dmr-line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-1); }
.text-section a { color: var(--dmr-teal); font-weight: 600; }
.text-section a:hover { text-decoration: underline; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; border: 1px solid #2B3A46; text-align: center; line-height: 1; font-weight: 700; letter-spacing: 0.4px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.btn-primary { background: var(--dmr-teal); color: #0B1C26; border-color: #00AF98; box-shadow: 0 6px 14px rgba(0,194,168,0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,194,168,0.35); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary { background: transparent; color: #D7E3EA; border-color: #2E424F; }
.btn-secondary:hover { background: #0E2231; border-color: #365061; transform: translateY(-2px); }

/* GENERIC CARDS (not testimonials) */
.card:hover { border-color: #34505F; box-shadow: 0 10px 22px rgba(0,0,0,0.5); transform: translateY(-2px); }
.card h3 { color: #FFFFFF; }

/* TESTIMONIALS — light background with dark text for readability */
.testimonial-card p { color: #0C2D48; }
.testimonial-card strong { color: #06131B; }

/* LINKS */
a { color: var(--dmr-teal); }
a:hover { opacity: 0.9; }

/* SECTIONS DEFAULT SPACING (in addition to .section class) */
main section { margin-bottom: 48px; padding: 20px 0; }

/* FOOTER */
footer { background: var(--dmr-surface-2); border-top: 1px solid var(--dmr-line); padding: 24px 0; }
footer .content-wrapper { gap: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: var(--dmr-muted); padding: 8px 10px; border-radius: 6px; }
.footer-nav a:hover { color: #FFFFFF; background: #0E2231; }

/* UTILITY RAILS AND DIVIDERS */
hr { border: 0; border-top: 1px solid var(--dmr-line); margin: 20px 0; }

/* IMAGES INSIDE TEXT-IMAGE SECTIONS */
.text-image-section img { border-radius: var(--radius); border: 1px solid var(--dmr-line); box-shadow: var(--shadow-1); }

/* RESPONSIVE TYPOGRAPHY & LAYOUT */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .hero h1 { font-size: 34px; }
}

@media (min-width: 768px) {
  header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
  .main-nav { display: flex; }
  .header-ctas { display: flex; }
  .mobile-menu-toggle { display: none; }

  .hero .container { padding-top: 56px; padding-bottom: 56px; }
  .hero h1 { font-size: 42px; }
  .text-image-section { flex-direction: row; align-items: center; }
  .content-wrapper { gap: 24px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
  .hero h1 { font-size: 52px; }
}

/* ACCESSIBLE STATUS & BADGES */
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: #0E2231; color: var(--dmr-muted); border: 1px solid var(--dmr-line); font-size: 12px; }

/* COOKIE CONSENT — Banner & Modal */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; background: #0D1A23; color: #E5EEF5; border-top: 1px solid #243747; padding: 16px; transform: translateY(110%); transition: transform var(--transition-med); z-index: 998; box-shadow: 0 -8px 20px rgba(0,0,0,0.35); }
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { min-width: 140px; }
.cookie-actions .btn.accept { background: var(--dmr-teal); color: #0B1C26; border-color: #00AF98; }
.cookie-actions .btn.reject { background: transparent; color: #E7F2F6; border-color: #324452; }
.cookie-actions .btn.settings { background: #0E2231; color: #E7F2F6; border-color: #2E4351; }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; background: rgba(4,10,15,0.75); backdrop-filter: blur(2px); z-index: 1000; }
.cookie-modal.is-open { display: flex; }
.cookie-modal .modal-panel { display: flex; flex-direction: column; gap: 16px; width: 92%; max-width: 720px; background: var(--dmr-surface); border: 1px solid var(--dmr-line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-2); color: var(--dmr-text); }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 14px; }
.cookie-modal .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0F1C26; border: 1px solid var(--dmr-line); border-radius: 10px; padding: 12px 14px; }
.cookie-modal .cookie-row .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-modal .cookie-row .hint { color: var(--dmr-muted); font-size: 14px; }

/* Simple CSS Toggle Style (for inputs wired in JS) */
.toggle { position: relative; display: inline-flex; align-items: center; width: 46px; height: 26px; background: #243747; border: 1px solid #2E4351; border-radius: 999px; transition: background var(--transition-fast), border-color var(--transition-fast); }
.toggle::after { content: ""; display: inline-flex; width: 20px; height: 20px; margin-left: 2px; background: #C7D6E0; border-radius: 50%; transition: transform var(--transition-fast), background var(--transition-fast); }
.toggle.is-on { background: #0A6B61; border-color: #108E81; }
.toggle.is-on::after { transform: translateX(20px); background: #FFFFFF; }

.cookie-modal .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.cookie-modal .btn { min-width: 140px; }

/* ACCESSIBILITY HELPERS */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* MICRO-INTERACTIONS */
.hover-raise { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.hover-raise:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* FORM ELEMENTS (for potential future forms) */
.input, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  background: #0F1C26; color: #E6EDF3; border: 1px solid #2E4351; border-radius: 10px; padding: 12px 14px; width: 100%;
}
.input:focus, input:focus, textarea:focus, select:focus { border-color: #3F687A; outline: none; box-shadow: 0 0 0 3px rgba(0,194,168,0.15); }

/* MISC LAYOUT GUARDS */
main .container, footer .container, header .container { gap: 0; }
main .content-wrapper, footer .content-wrapper { width: 100%; }

/* INDUSTRIAL ACCENTS */
.section-title { display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ""; display: inline-flex; width: 18px; height: 2px; background: var(--dmr-teal); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); }

/* PAGE-SPECIFIC TUNING */
/* Hero headings across pages already covered; ensure adequate spacing */
.hero .actions .btn { min-width: 180px; }

/* Ensure adequate spacing between repeated text-section blocks */
.content-wrapper .text-section + .text-section { margin-top: 6px; }

/* Ensure elements never overlap by enforcing consistent gaps */
.content-wrapper > * { margin: 0; }

/* PRINT-FRIENDLY TWEAKS */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  header, footer { border: none; background: #FFFFFF; color: #000000; }
}