/* ==========================================================================
   ARMORGUARD DEFENSE - TACTICAL STYLING & CUSTOM EFFECTS
   ========================================================================== */

:root {
  --bg-primary: #0a0d14;
  --bg-secondary: #101522;
  --bg-tertiary: #171e30;
  --card-bg: rgba(16, 21, 34, 0.85);
  --card-border: rgba(255, 255, 255, 0.08);
  
  --accent-gold: #e5a93c;
  --accent-gold-glow: rgba(229, 169, 60, 0.35);
  --accent-blue: #00d2ff;
  --accent-blue-glow: rgba(0, 210, 255, 0.3);
  --accent-red: #ff3344;
  --accent-green: #00e676;
  
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  --font-display: 'Chakra Petch', 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Carbon Fiber subtle texture */
.carbon-bg {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 210, 255, 0.05) 0%, transparent 50%),
    linear-gradient(27deg, #0e121d 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #0e121d 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #131927 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #131927 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #0b0f19 10px, transparent 10px),
    linear-gradient(#0c101a 25%, #080b12 25%, #080b12 50%, #0c101a 50%, #0c101a 75%, #080b12 75%, #080b12 100%);
  background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
}

/* Glassmorphism high-end container */
.glass-panel {
  background: rgba(16, 22, 36, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.glass-panel-gold {
  background: rgba(22, 26, 38, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(229, 169, 60, 0.25);
  box-shadow: 0 10px 30px -10px rgba(229, 169, 60, 0.15), inset 0 1px 1px rgba(229, 169, 60, 0.2);
}

.glass-panel-interactive {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(229, 169, 60, 0.4);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(229, 169, 60, 0.15);
}

/* Tactical Crosshairs & Corner brackets */
.tactical-border {
  position: relative;
}

.tactical-border::before,
.tactical-border::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.tactical-border::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--accent-gold);
  border-left: 2px solid var(--accent-gold);
}

.tactical-border::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--accent-gold);
  border-right: 2px solid var(--accent-gold);
}

/* Tactical Scanline effect */
.scanline {
  position: relative;
  overflow: hidden;
}

.scanline::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 2;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
  opacity: 0.6;
}

/* Radar & Pulsing Badges */
@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.radar-sweep {
  animation: radarSweep 4s linear infinite;
  transform-origin: center;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(229, 169, 60, 0.3), inset 0 0 10px rgba(229, 169, 60, 0.2);
    border-color: rgba(229, 169, 60, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgba(229, 169, 60, 0.7), inset 0 0 15px rgba(229, 169, 60, 0.4);
    border-color: rgba(229, 169, 60, 1);
  }
}

.pulse-gold {
  animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pingSmall {
  0% { transform: scale(1); opacity: 0.9; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

.hotspot-ping {
  animation: pingSmall 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Range input styling for configurator */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #1e293b;
  height: 6px;
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-gold);
  cursor: pointer;
  box-shadow: 0 0 12px var(--accent-gold);
  border: 2px solid #000;
  transition: transform 0.15s ease;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #080b12;
}

::-webkit-scrollbar-thumb {
  background: #232b3e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* Ballistic Test Simulation Canvas */
#ballisticCanvas {
  background: radial-gradient(circle at center, #162032 0%, #080d16 100%);
  border: 1px solid rgba(0, 210, 255, 0.25);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 210, 255, 0.1);
}

/* Hologram Grid background */
.holo-grid {
  background-size: 30px 30px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* High-tech Tag */
.badge-tech {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Smooth Accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  transition: max-height 0.4s ease-in-out;
}

.accordion-item.active .accordion-chevron {
  transform: rotate(180deg);
  color: var(--accent-gold);
}

/* Active Nav state */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent-gold);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Ballistic Recoil Camera Shake */
@keyframes simKickShake {
  0% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(-5px, 2px) scale(1.004); }
  30% { transform: translate(4px, -3px) scale(1.002); }
  45% { transform: translate(-3px, 2px); }
  60% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0) scale(1); }
}

.sim-recoil-shake {
  animation: simKickShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Ballistic laboratory */
/* Illustrated service cards */
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.service-card { --service-accent:#e5a93c; display:flex; flex-direction:column; overflow:hidden; border:1px solid #253043; border-radius:18px; background:linear-gradient(145deg,#131c29,#0c121c); box-shadow:0 12px 32px #0002; transition:transform .25s,border-color .25s,box-shadow .25s; }
.service-card--architecture { --service-accent:#28cee6; }
.service-card--values { --service-accent:#f18778; }
.service-card--lightweight { --service-accent:#39d5ad; }
.service-card:hover,.service-card:focus-within { transform:translateY(-5px); border-color:var(--service-accent); box-shadow:0 18px 45px #0005; }
.service-card-media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#172332; }
.service-card-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#03101a33,transparent 40%,#0e1725e6); pointer-events:none; }
.service-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .65s; }
.service-card:hover .service-card-media img { transform:scale(1.045); }
.service-card-number { position:absolute; top:16px; left:18px; z-index:1; padding:6px 9px; border:1px solid #b6c6d42e; border-radius:4px; background:#071019a6; color:#d3dce4; font:9px 'JetBrains Mono',monospace; letter-spacing:1.5px; backdrop-filter:blur(8px); }
.service-card-icon { position:absolute; bottom:17px; left:24px; z-index:1; display:grid; place-items:center; width:43px; height:43px; border:1px solid #b5c7db33; border-radius:11px; color:var(--service-accent); background:#0b1422ce; font-size:19px; backdrop-filter:blur(8px); }
.service-card-body { display:flex; flex-direction:column; flex:1; padding:5px 24px 23px; }
.service-card-label { color:var(--service-accent); font:10px 'JetBrains Mono',monospace; letter-spacing:1.3px; margin-bottom:9px; }
.service-card h3 { color:#f1f5f9; font:700 23px/1.25 'Chakra Petch',sans-serif; margin:0 0 13px; }
.service-card p { color:#aab9cb; font:13px/1.8 'Inter',sans-serif; margin:0 0 24px; }
.service-card ul { margin-top:auto; padding-top:17px; border-top:1px solid #293547; display:grid; gap:11px; color:#c0cddd; font:11px/1.6 'Inter',sans-serif; }
.service-card ul li { align-items:flex-start; }
.service-card ul i { margin-top:4px; font-size:11px; }
.service-card-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid #293547; color:var(--service-accent); font:600 10px 'JetBrains Mono',monospace; letter-spacing:1px; }
.service-card-link i { transition:transform .2s; }
.service-card-link:hover i { transform:translateX(4px); }
.service-card-link:focus-visible { outline:2px solid var(--service-accent); outline-offset:6px; border-radius:2px; }
@media(max-width:1023px) { .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media(max-width:639px) { .services-grid { grid-template-columns:1fr; } .service-card-media { aspect-ratio:16/9; } .service-card-body { padding:6px 22px 22px; } .service-card h3 { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .service-card,.service-card-media img,.service-card-link i { transition:none; } .service-card:hover,.service-card:focus-within,.service-card:hover .service-card-media img { transform:none; } }
#simulador { background: radial-gradient(ellipse at 50% 40%, #102332 0%, #080f18 70%); }
#simulador > div { max-width: 1536px; }
.sim-console { padding: 24px; background: #07121cd9; border-color: #244457; box-shadow: 0 24px 80px #0005; }
.sim-console-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #244457; font:700 22px 'Chakra Petch',sans-serif; letter-spacing:1px; }
.sim-console-heading i { color:#a8c9dd; margin-right:10px; }
.sim-console-heading small { display:block; margin-top:3px; color:#7595ae; font:10px 'JetBrains Mono',monospace; letter-spacing:2px; }
.sim-console-heading > span { font:10px 'JetBrains Mono',monospace; color:#4ee9e7; }
.sim-console-heading b { display:inline-block; width:6px; height:6px; background:#4ee9e7; border-radius:50%; margin-right:7px; box-shadow:0 0 12px #4ee9e7; }
.sim-controls { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:22px; margin-bottom:20px; }
.sim-controls label { color:#b2cce0; font-size:12px; }
.sim-controls select { min-height:57px; padding:12px; background:#050d16; border-color:#345064; font-family:'Inter',sans-serif; font-size:13px; }
.sim-controls button { min-height:57px; font-size:18px; gap:10px; background:linear-gradient(105deg,#e73136,#f2a329 60%,#ef8008); }
.sim-controls button:disabled { opacity:.6; cursor:wait; }
.sim-controls select:disabled { opacity:.65; }
#simViewportContainer { border:1px solid #23839a; border-radius:20px; isolation:isolate; }
#simBaseImage { width:100%; aspect-ratio:1915/821; }
#simThreeCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; background:transparent; }
#ballisticCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; background:transparent; }
.sim-flash-overlay { position:absolute; inset:0; z-index:7; pointer-events:none; opacity:0; background:radial-gradient(circle at 79.2% 44.9%, rgba(255,255,245,0.95) 0%, rgba(255,200,100,0.5) 18%, rgba(0,210,255,0.2) 42%, transparent 68%); mix-blend-mode:screen; }
/* Motion trails are rendered per fragment; keep the laboratory and HUD sharp. */
#simThreeCanvas { z-index:4; }
.sim-hud-top,.sim-hud-bottom,.sim-environment,.sim-stage-label { z-index:8; }
@media(prefers-reduced-motion:reduce) { .sim-recoil-shake { animation:none; } }
.sim-hud-top,.sim-hud-bottom { position:absolute; z-index:2; left:0; right:0; display:flex; justify-content:space-between; gap:12px; padding:14px 22px; background:linear-gradient(#03121beb,transparent); font:10px 'JetBrains Mono',monospace; color:#afcde3; }
.sim-hud-top { top:0; }
.sim-hud-top span:last-child { color:#21e8f2; }
.sim-hud-bottom { bottom:0; background:#04121de6; border-top:1px solid #285063; font-size:9px; }
.sim-hud-bottom span:first-child { color:#26e9cd; }
.sim-environment { position:absolute; z-index:2; top:14%; left:2%; width:215px; padding:12px 14px; border:1px solid #1b7581; border-radius:8px; background:#03111cba; color:#5ce4ec; font:9px 'JetBrains Mono',monospace; }
.sim-environment span { display:flex; justify-content:space-between; gap:10px; color:#a9c8dd; margin-top:7px; }
.sim-environment b { font-weight:400; color:#d4e9f6; }
.sim-stage-label { position:absolute; z-index:2; left:47%; top:26%; color:#53e5e9; font:10px 'JetBrains Mono',monospace; letter-spacing:1px; }
.sim-result { border:1px solid #285063; border-radius:16px; padding:18px 24px; background:#06131d; }
.sim-result.success { border-color:#078b77; background:linear-gradient(110deg,#042321,#04141b); }
.sim-result.danger { border-color:#b55244; background:linear-gradient(110deg,#291416,#10151e); }
.sim-result-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid #25505a77; }
.sim-result-heading strong { font:700 19px 'Chakra Petch',sans-serif; }
.sim-result-heading i { color:#27dabb; margin-right:12px; }
.sim-result.danger .sim-result-heading i { color:#ff9475; }
.sim-result-heading > span { color:#86b0c0; font:9px 'JetBrains Mono',monospace; }
.sim-result-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:20px; gap:20px; }
.sim-result-grid > div { display:flex; gap:15px; padding-right:16px; border-right:1px solid #27525c; }
.sim-result-grid > div:last-child { border:0; }
.sim-result-grid > div > i { color:#5edee9; font-size:25px; padding-top:4px; }
.sim-result-grid h3 { font:700 12px 'Chakra Petch',sans-serif; margin-bottom:7px; }
.sim-result-grid p { font-size:11px; color:#9fbfd4; line-height:1.6; }
.sim-result-grid.is-idle { grid-template-columns:1fr; }
.sim-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:14px; color:#7893a8; font-size:10px; }
.sim-footer button { flex-shrink:0; padding:8px 10px; border:1px solid #335365; border-radius:6px; font:9px 'JetBrains Mono',monospace; color:#c2d9e8; }
#simulador button:focus-visible,#simulador select:focus-visible { outline:2px solid #38e3ef; outline-offset:4px; }
@media(max-width:1000px) { .sim-controls { grid-template-columns:1fr 1fr; } .sim-controls > div:last-child { grid-column:1/-1; } .sim-result-grid { grid-template-columns:1fr 1fr; } .sim-result-grid > div:nth-child(2) { border:0; } .sim-environment { width:175px; font-size:8px; padding:8px; } }
@media(max-width:600px) { .sim-console { padding:12px; border-radius:18px; } .sim-console-heading { font-size:18px; } .sim-console-heading > span { display:none; } .sim-controls { grid-template-columns:1fr; gap:14px; } .sim-controls select { font-size:12px; } .sim-hud-top,.sim-hud-bottom { padding:8px; font-size:7px; } .sim-hud-top > span:first-child,.sim-hud-bottom > span:last-child,.sim-environment { display:none; } .sim-hud-top { justify-content:flex-end; } .sim-stage-label { font-size:6px; left:43%; top:27%; letter-spacing:0; } .sim-result { padding:14px; } .sim-result-heading strong { font-size:15px; } .sim-result-heading > span { display:none; } .sim-result-grid { grid-template-columns:1fr; gap:16px; margin-top:14px; } .sim-result-grid > div { border:0; padding:0; } .sim-footer { align-items:flex-start; } }