/* =====================================================
   AXIOM OFFSHORE — PREMIUM TECHNICAL DESIGN SYSTEM
   Asset Integrity. Operational Certainty.
   ===================================================== */

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
  /* Deep Ocean Palette */
  --bg-deep: #0a0f12;
  --bg-surface: #0d1418;
  --bg-elevated: #111a1f;
  --bg-panel: #131e24;
  --bg-hover: #1a2830;
  
  /* Text */
  --text-primary: #e8edf2;
  --text-secondary: #7a8a99;
  --text-muted: #4a5a66;
  --text-inverse: #0a0f12;
  
  /* Technical Accents */
  --cyan: #4fc3f7;
  --cyan-dim: rgba(79, 195, 247, 0.15);
  --cyan-glow: rgba(79, 195, 247, 0.4);
  --orange: #ff9800;
  --orange-dim: rgba(255, 152, 0, 0.15);
  --green: #69f0ae;
  --green-dim: rgba(105, 240, 174, 0.15);
  --red: #ff5252;
  --red-dim: rgba(255, 82, 82, 0.15);
  
  /* Borders */
  --border-subtle: #1a2830;
  --border-cyan: rgba(79, 195, 247, 0.25);
  --border-orange: rgba(255, 152, 0, 0.25);
  
  /* Typography */
  --font-display: 'Space Grotesk', 'Rajdhani', sans-serif;
  --font-body: 'Inter', 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Geometry */
  --radius-sm: 2px;
  --radius-md: 4px;
  --corner-cut: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  
  /* Shadows & Glows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --glow-cyan: 0 0 20px var(--cyan-glow);
  --glow-cyan-sm: 0 0 8px var(--cyan-glow);
  
  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--cyan); text-decoration:none; transition:color var(--duration-fast); }
a:hover { color:var(--text-primary); }
::selection { background:var(--cyan-dim); color:var(--cyan); }

/* ---------- TECHNICAL GRID BACKGROUND ---------- */
.tech-grid {
  position:relative;
}
.tech-grid::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.4;
  pointer-events:none;
  z-index:0;
}

/* ---------- SCAN LINES ---------- */
.scan-lines {
  position:relative;
}
.scan-lines::after {
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
  pointer-events:none;
  z-index:2;
}

/* ---------- SKIP LINK ---------- */
.skip-link {
  position:absolute; top:-100%; left:var(--space-4);
  background:var(--cyan); color:var(--text-inverse);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-weight:600; font-size:0.75rem;
  text-transform:uppercase; letter-spacing:0.05em;
  z-index:9999; transition:top var(--duration-fast);
}
.skip-link:focus { top:var(--space-4); }

/* ---------- CONTAINER ---------- */
.container {
  width:100%; max-width:1280px; margin:0 auto; padding:0 var(--space-6);
}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display); font-weight:700; line-height:1.15;
  color:var(--text-primary); letter-spacing:-0.02em;
}
h1 { font-size:clamp(2.5rem, 6vw, 5rem); }
h2 { font-size:clamp(1.75rem, 4vw, 3rem); }
h3 { font-size:clamp(1.25rem, 2.5vw, 1.75rem); }

.text-mono { font-family:var(--font-mono); }
.text-display { font-family:var(--font-display); }
.text-cyan { color:var(--cyan); }
.text-orange { color:var(--orange); }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.text-secondary { color:var(--text-secondary); }
.text-muted { color:var(--text-muted); }

/* ---------- STATUS INDICATORS ---------- */
.status-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:var(--space-2);
}
.status-dot.online { background:var(--green); box-shadow:0 0 6px var(--green); }
.status-dot.alert { background:var(--orange); box-shadow:0 0 6px var(--orange); }
.status-dot.critical { background:var(--red); box-shadow:0 0 6px var(--red); }

/* ---------- LABELS TÉCNICOS ---------- */
.tech-label {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:0.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.12em; color:var(--cyan);
  background:var(--cyan-dim); border:1px solid var(--border-cyan);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm);
}
.tech-label.orange { color:var(--orange); background:var(--orange-dim); border-color:var(--border-orange); }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-6); font-family:var(--font-mono);
  font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:all var(--duration-fast) var(--ease-out); text-decoration:none; white-space:nowrap;
  clip-path:var(--corner-cut);
}
.btn-cyan {
  background:var(--cyan); color:var(--text-inverse); border-color:var(--cyan);
  box-shadow:var(--glow-cyan-sm);
}
.btn-cyan:hover { background:transparent; color:var(--cyan); box-shadow:var(--glow-cyan); }
.btn-outline {
  background:transparent; color:var(--cyan); border-color:var(--border-cyan);
}
.btn-outline:hover { background:var(--cyan-dim); border-color:var(--cyan); box-shadow:var(--glow-cyan-sm); }
.btn-orange {
  background:var(--orange); color:var(--text-inverse); border-color:var(--orange);
}
.btn-orange:hover { background:transparent; color:var(--orange); }

/* ---------- HEADER ---------- */
.header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(10,15,18,0.85); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--duration-base);
}
.header-top-bar {
  background:var(--bg-surface); border-bottom:1px solid var(--border-subtle);
  padding:var(--space-2) 0; font-family:var(--font-mono); font-size:0.625rem;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted);
}
.header-top-bar .container {
  display:flex; justify-content:space-between; align-items:center;
}
.header-top-bar a { color:var(--text-muted); }
.header-top-bar a:hover { color:var(--cyan); }

.navbar { padding:var(--space-3) 0; }
.navbar-content {
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo Technical */
.logo { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; }
.logo-mark {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--cyan-dim); border:1px solid var(--border-cyan);
  clip-path:var(--corner-cut);
}
.logo-mark i { color:var(--cyan); font-size:1rem; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-brand {
  font-family:var(--font-display); font-weight:700; font-size:1.125rem;
  color:var(--text-primary); letter-spacing:0.02em;
}
.logo-tagline {
  font-family:var(--font-mono); font-size:0.5625rem; font-weight:600;
  color:var(--cyan); text-transform:uppercase; letter-spacing:0.15em;
}

/* Nav */
.nav-menu { display:flex; list-style:none; gap:var(--space-8); }
.nav-menu a {
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-secondary);
  padding:var(--space-2) 0; position:relative;
}
.nav-menu a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
  background:var(--cyan); transition:width var(--duration-fast);
}
.nav-menu a:hover, .nav-menu a.active { color:var(--cyan); }
.nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }

.mobile-toggle {
  display:none; flex-direction:column; gap:4px; background:none; border:none;
  cursor:pointer; padding:var(--space-2); z-index:1001;
}
.mobile-toggle span {
  display:block; width:20px; height:1.5px; background:var(--text-primary);
  transition:all var(--duration-fast);
}

/* ---------- HERO COMMAND CENTER ---------- */
.hero-command {
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; padding-top:120px; padding-bottom:var(--space-16);
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg img {
  width:100%; height:100%; object-fit:cover; opacity:0.6;
}
.hero-bg::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,18,0.3) 0%, rgba(10,15,18,0.85) 60%, var(--bg-deep) 100%);
  z-index:1;
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 6px);
  z-index:2; pointer-events:none;
}

.hero-content { position:relative; z-index:3; width:100%; }

/* HUD Panel */
.hud-panel {
  background:rgba(17,26,31,0.7); backdrop-filter:blur(8px);
  border:1px solid var(--border-cyan); border-left:3px solid var(--cyan);
  padding:var(--space-6) var(--space-8); max-width:640px;
  clip-path:var(--corner-cut);
}
.hud-panel .tech-label { margin-bottom:var(--space-4); }
.hud-panel h1 {
  font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.05; margin-bottom:var(--space-4);
}
.hud-panel p {
  font-family:var(--font-body); font-size:1rem; color:var(--text-secondary);
  margin-bottom:var(--space-6); max-width:480px;
}
.hud-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; }

/* HUD Metrics Floating */
.hud-metrics {
  position:absolute; top:140px; right:var(--space-6); z-index:3;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.hud-metric {
  background:rgba(17,26,31,0.8); backdrop-filter:blur(4px);
  border:1px solid var(--border-subtle); padding:var(--space-3) var(--space-4);
  min-width:180px; clip-path:var(--corner-cut);
}
.hud-metric-label {
  font-family:var(--font-mono); font-size:0.5625rem;
  text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted);
  margin-bottom:var(--space-1);
}
.hud-metric-value {
  font-family:var(--font-mono); font-size:1.25rem; font-weight:700; color:var(--cyan);
}
.hud-metric-value.alert { color:var(--orange); }
.hud-metric-value.ok { color:var(--green); }

/* ---------- SECTIONS ---------- */
.section { padding:var(--space-24) 0; position:relative; }
.section-surface { background:var(--bg-surface); }
.section-header { margin-bottom:var(--space-12); }
.section-header.center { text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.section-overline {
  font-family:var(--font-mono); font-size:0.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.15em; color:var(--cyan);
  margin-bottom:var(--space-4); display:flex; align-items:center; gap:var(--space-3);
}
.section-overline::before {
  content:''; display:block; width:24px; height:1px; background:var(--cyan);
}
.section-overline.center { justify-content:center; }
.section-overline.center::before { display:none; }

/* ---------- MODULE CARDS (Technical) ---------- */
.module-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4); }
.module-card {
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  padding:var(--space-6); position:relative; overflow:hidden;
  transition:all var(--duration-base) var(--ease-out);
}
.module-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--cyan), transparent 60%); opacity:0.5;
}
.module-card:hover {
  border-color:var(--border-cyan); background:var(--bg-hover);
  box-shadow:var(--glow-cyan-sm); transform:translateY(-2px);
}
.module-header {
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--space-4);
}
.module-code {
  font-family:var(--font-mono); font-size:0.5625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.15em; color:var(--text-muted);
}
.module-icon {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--cyan-dim); border:1px solid var(--border-cyan); color:var(--cyan);
  font-size:1.25rem; clip-path:var(--corner-cut);
}
.module-title {
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  color:var(--text-primary); margin-bottom:var(--space-3);
}
.module-desc {
  font-size:0.875rem; color:var(--text-secondary); line-height:1.6;
}
.module-specs {
  margin-top:var(--space-4); padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  display:flex; flex-wrap:wrap; gap:var(--space-3);
}
.module-spec {
  font-family:var(--font-mono); font-size:0.625rem;
  text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-muted); background:var(--bg-surface);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-sm);
}

/* ---------- METRICS PANEL ---------- */
.metrics-panel {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  padding:var(--space-6); clip-path:var(--corner-cut);
}
.metric-cell {
  text-align:center; padding:var(--space-4);
  border-right:1px solid var(--border-subtle);
}
.metric-cell:last-child { border-right:none; }
.metric-cell-value {
  font-family:var(--font-mono); font-size:clamp(1.5rem, 3vw, 2.5rem);
  font-weight:700; color:var(--cyan); line-height:1;
  margin-bottom:var(--space-2);
}
.metric-cell-value.alert { color:var(--orange); }
.metric-cell-value.ok { color:var(--green); }
.metric-cell-label {
  font-family:var(--font-mono); font-size:0.5625rem;
  text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted);
}

/* ---------- ENVIRONMENT CARDS ---------- */
.env-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4); }
.env-card {
  position:relative; border:1px solid var(--border-subtle);
  overflow:hidden; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end;
  transition:all var(--duration-base);
}
.env-card:hover { border-color:var(--border-cyan); }
.env-card img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out); opacity:0.5;
}
.env-card:hover img { transform:scale(1.05); opacity:0.7; }
.env-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, var(--bg-deep) 80%);
}
.env-content { position:relative; z-index:2; padding:var(--space-6); }
.env-code {
  font-family:var(--font-mono); font-size:0.5625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.15em; color:var(--cyan);
  margin-bottom:var(--space-2);
}
.env-title {
  font-family:var(--font-display); font-size:1.125rem; font-weight:700;
  color:var(--text-primary); margin-bottom:var(--space-3);
}
.env-desc {
  font-size:0.8125rem; color:var(--text-secondary); line-height:1.5;
}
.env-result {
  margin-top:var(--space-4); padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
  font-family:var(--font-mono); font-size:0.625rem;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--green);
}

/* ---------- CERTIFICATION GRID ---------- */
.cert-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
}
.cert-item {
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  padding:var(--space-6); text-align:center;
  transition:all var(--duration-base);
}
.cert-item:hover { border-color:var(--border-cyan); background:var(--bg-hover); }
.cert-item i { font-size:1.5rem; color:var(--cyan); margin-bottom:var(--space-3); }
.cert-item h4 {
  font-family:var(--font-display); font-size:0.875rem; font-weight:700;
  color:var(--text-primary); margin-bottom:var(--space-1);
}
.cert-item p {
  font-family:var(--font-mono); font-size:0.5625rem;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted);
}

/* ---------- FOOTER ---------- */
.footer {
  background:var(--bg-surface); border-top:1px solid var(--border-subtle);
}
.footer-main { padding:var(--space-16) 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:var(--space-12); }
.footer-brand p { font-size:0.875rem; color:var(--text-secondary); margin:var(--space-4) 0; }
.footer-social { display:flex; gap:var(--space-3); }
.footer-social a {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  color:var(--text-muted); font-size:0.875rem;
  transition:all var(--duration-fast);
}
.footer-social a:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); }
.footer-links h4, .footer-contact h4 {
  font-family:var(--font-mono); font-size:0.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.15em; color:var(--text-primary);
  margin-bottom:var(--space-4);
}
.footer-links ul, .footer-contact ul { list-style:none; }
.footer-links li, .footer-contact li { margin-bottom:var(--space-3); }
.footer-links a {
  font-family:var(--font-body); font-size:0.8125rem; color:var(--text-secondary);
  transition:color var(--duration-fast);
}
.footer-links a:hover { color:var(--cyan); }
.footer-contact li {
  display:flex; gap:var(--space-3); font-size:0.8125rem; color:var(--text-secondary);
}
.footer-contact i { color:var(--cyan); font-size:0.75rem; margin-top:3px; }
.footer-contact a { color:var(--text-secondary); }
.footer-contact a:hover { color:var(--cyan); }
.footer-bottom {
  border-top:1px solid var(--border-subtle); padding:var(--space-4) 0;
}
.footer-bottom-content {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:0.625rem;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted);
}

/* ---------- FLOATING ELEMENTS ---------- */
.back-to-top {
  position:fixed; bottom:var(--space-6); right:var(--space-6);
  width:44px; height:44px; background:var(--bg-elevated);
  border:1px solid var(--border-cyan); color:var(--cyan);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; clip-path:var(--corner-cut);
  opacity:0; visibility:hidden; transition:all var(--duration-fast);
  z-index:999;
}
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--cyan); color:var(--text-inverse); }

.whatsapp-float {
  position:fixed; bottom:var(--space-6); left:var(--space-6);
  width:52px; height:52px; background:#25d366; color:white;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; z-index:999; box-shadow:0 4px 16px rgba(37,211,102,0.3);
  transition:all var(--duration-fast);
}
.whatsapp-float:hover { transform:scale(1.08); box-shadow:0 8px 24px rgba(37,211,102,0.5); color:white; }

/* ---------- PAGE HEADER ---------- */
.page-header {
  padding:140px 0 var(--space-12);
  background:linear-gradient(180deg, var(--bg-surface), var(--bg-deep));
  border-bottom:1px solid var(--border-subtle);
}
.page-header h1 { margin-bottom:var(--space-3); }
.page-header p { max-width:560px; color:var(--text-secondary); font-size:1rem; }

/* ---------- TEAM / CONTACT CARDS ---------- */
.contact-card {
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  padding:var(--space-6); transition:all var(--duration-base);
}
.contact-card:hover { border-color:var(--border-cyan); }
.contact-card-header {
  display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4);
}
.contact-avatar {
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--cyan-dim); border:1px solid var(--border-cyan); color:var(--cyan);
  font-size:1.5rem; clip-path:var(--corner-cut);
}
.contact-name { font-family:var(--font-display); font-size:1.125rem; font-weight:700; }
.contact-role {
  font-family:var(--font-mono); font-size:0.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.12em; color:var(--cyan);
}
.contact-info a {
  display:block; font-size:0.8125rem; color:var(--text-secondary);
  margin-bottom:var(--space-2); transition:color var(--duration-fast);
}
.contact-info a:hover { color:var(--cyan); }
.contact-info i { width:20px; color:var(--text-muted); margin-right:var(--space-2); }

/* ---------- FORM ---------- */
.form-group { margin-bottom:var(--space-4); }
.form-group label {
  display:block; font-family:var(--font-mono); font-size:0.625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:var(--space-3) var(--space-4);
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  color:var(--text-primary); font-family:var(--font-body); font-size:0.875rem;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
  clip-path:var(--corner-cut);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline:none; border-color:var(--cyan); box-shadow:var(--glow-cyan-sm);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-group textarea { min-height:120px; resize:vertical; }

/* ---------- PRELOADER ---------- */
#preloader {
  position:fixed; inset:0; background:var(--bg-deep);
  display:flex; align-items:center; justify-content:center; z-index:10000;
  transition:opacity var(--duration-slow), visibility var(--duration-slow);
}
#preloader.hidden { opacity:0; visibility:hidden; }
.preloader-content { text-align:center; }
.preloader-mark {
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--cyan-dim); border:1px solid var(--border-cyan); margin:0 auto var(--space-4);
  clip-path:var(--corner-cut); animation:pulse-cyan 2s infinite;
}
.preloader-mark i { color:var(--cyan); font-size:1.5rem; }
.preloader-text {
  font-family:var(--font-mono); font-weight:700; font-size:0.875rem;
  color:var(--text-primary); letter-spacing:0.15em; text-transform:uppercase;
  margin-bottom:var(--space-4);
}
.preloader-bar {
  width:160px; height:2px; background:var(--bg-elevated);
  overflow:hidden; margin:0 auto;
}
.preloader-progress {
  height:100%; width:0; background:linear-gradient(90deg, var(--cyan), transparent);
  animation:progress 1.2s ease-out forwards;
}
@keyframes progress { to { width:100%; } }
@keyframes pulse-cyan { 0%,100% { box-shadow:0 0 0 var(--cyan-dim); } 50% { box-shadow:0 0 16px var(--cyan-glow); } }

/* ---------- ANIMATIONS ---------- */
[data-animate] { opacity:0; transform:translateY(24px); transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-animate].animated { opacity:1; transform:translateY(0); }

/* ---------- RESPONSIVE OVERRIDES (inline critical) ---------- */
@media (max-width: 1024px) {
  .module-grid { grid-template-columns:1fr; }
  .env-grid { grid-template-columns:repeat(2, 1fr); }
  .metrics-panel { grid-template-columns:repeat(2, 1fr); }
  .metrics-panel .metric-cell:nth-child(2) { border-right:none; }
  .metrics-panel .metric-cell { border-bottom:1px solid var(--border-subtle); }
  .metrics-panel .metric-cell:nth-child(3), .metrics-panel .metric-cell:nth-child(4) { border-bottom:none; }
  .footer-grid { grid-template-columns:repeat(2, 1fr); gap:var(--space-8); }
  .hud-metrics { display:none; }
}
@media (max-width: 768px) {
  .header-top-bar { display:none; }
  .nav-menu { position:fixed; top:0; right:-100%; width:80%; max-width:300px; height:100vh;
    background:var(--bg-surface); flex-direction:column; padding:5rem var(--space-6) var(--space-6);
    gap:var(--space-4); transition:right var(--duration-base); border-left:1px solid var(--border-subtle);
  }
  .nav-menu.active { right:0; }
  .mobile-toggle { display:flex; }
  .mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(4px, 4px); }
  .mobile-toggle.active span:nth-child(2) { opacity:0; }
  .mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(4px, -4px); }
  .btn-quote { display:none; }
  .hero-command { min-height:auto; padding:100px 0 var(--space-12); }
  .hud-panel { max-width:100%; }
  .hud-actions { flex-direction:column; }
  .hud-actions .btn { width:100%; }
  .env-grid { grid-template-columns:1fr; }
  .cert-grid { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr; gap:var(--space-8); }
  .footer-bottom-content { flex-direction:column; gap:var(--space-3); text-align:center; }
}
@media (max-width: 480px) {
  .container { padding:0 var(--space-4); }
  .section { padding:var(--space-16) 0; }
  .metrics-panel { grid-template-columns:1fr 1fr; }
  .metric-cell { border-right:none !important; border-bottom:1px solid var(--border-subtle) !important; }
  .metric-cell:nth-child(3), .metric-cell:nth-child(4) { border-bottom:none !important; }
  .cert-grid { grid-template-columns:1fr; }
}
.lang-switcher { display:inline-flex; align-items:center; gap:0.35rem; font-family:var(--font-mono); font-size:0.6875rem; font-weight:600; letter-spacing:0.08em; }
.lang-switcher a { color:var(--text-muted); text-decoration:none; padding:0.15rem 0.35rem; border-radius:2px; transition:color var(--duration-fast), background var(--duration-fast); }
.lang-switcher a:hover { color:var(--cyan); }
.lang-switcher a.active { color:var(--cyan); background:rgba(79,195,247,0.12); }
.lang-switcher span { color:var(--border-subtle); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html { scroll-behavior:auto; }
}