/* Primisafe homepage refresh — loaded after the inline styles in index.html */

/* Header: keep the menu button on screen on phones */
.hamburger { background: none; border: 0; padding: 10px; margin-right: -10px; }
.nav-links a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--accent); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 600px) {
  nav { gap: 0.75rem; }
  .logo { font-size: 1.25rem; }
  .nav-actions { gap: 0.5rem; flex-shrink: 0; }
  .nav-cta { padding: 0.55rem 0.75rem; font-size: 0.68rem; letter-spacing: 0.03em; }
  .nav-cta-long { display: none; }
}
@media (max-width: 400px) {
  nav { padding: 0 1rem; }
  .logo { font-size: 1.15rem; }
}
@media (max-width: 359px) {
  .nav-cta { display: none; }
}

/* Hero: darker floor so the headline never sits on the video's own captions */
.hero-bg {
  background:
    linear-gradient(90deg, rgba(3, 6, 15, 0.92) 0%, rgba(3, 6, 15, 0.72) 42%, rgba(3, 6, 15, 0.35) 68%, rgba(3, 6, 15, 0.55) 100%),
    linear-gradient(180deg, rgba(3, 6, 15, 0.25) 0%, transparent 26%, rgba(3, 6, 15, 0.74) 62%, rgba(3, 6, 15, 0.97) 100%);
}
@media (max-width: 960px) {
  .hero-bg {
    background: linear-gradient(180deg, rgba(3, 6, 15, 0.35) 0%, rgba(3, 6, 15, 0.15) 22%, rgba(3, 6, 15, 0.86) 52%, rgba(3, 6, 15, 0.98) 100%);
  }
}

/* Line icons (replace emoji) */
.ico { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; }
.ico--inline { width: 1.05em; height: 1.05em; vertical-align: -0.2em; margin-right: 0.15rem; color: var(--accent); }
.industry-item .icon, .service-icon, .feat-icon, .contact-info-icon, .service-single-icon { color: var(--accent); }
.industry-item .icon { display: flex; justify-content: center; font-size: 2.1rem; }
.industry-item .icon .ico { filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.35)); }
.service-single-icon { font-size: 2rem; }
.form-success-icon { display: flex; justify-content: center; margin-bottom: 1rem; font-size: 3rem; color: #7dffb0; }

/* Trust strip */
.trust-strip {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1.25rem 5vw 1.75rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(6, 14, 28, 0.92), rgba(3, 8, 18, 0.92));
  backdrop-filter: blur(10px);
}
.trust-item { padding: 1.1rem 1.25rem; border-left: 1px solid var(--border); }
.trust-item:first-child { border-left: 0; }
.trust-item b {
  display: block;
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #ffffff 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trust-item span { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { border-left: 0; border-top: 1px solid var(--border); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--border); }
  .trust-item:last-child { grid-column: 1 / -1; }
}

/* Product imagery with a camera HUD */
.panel-media {
  position: relative;
  margin: -1.75rem -1.6rem 1.3rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #02060d;
  border-bottom: 1px solid var(--border);
}
.panel-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.82);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.55));
  mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.55));
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s;
}
.product-panel:hover .panel-media img { transform: scale(1.05); filter: saturate(1) contrast(1.05) brightness(0.95); }
.panel-media::before {
  content: ''; position: absolute; inset: 10px; z-index: 2; pointer-events: none; opacity: 0.8;
  --c: var(--accent);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 14px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 14px no-repeat;
}
.panel-media::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.1) 80%, rgba(0, 229, 255, 0.32) 100%);
  transform: translateY(-100%);
  animation: panel-scan 4.8s linear infinite;
}
.product-panel:nth-child(2) .panel-media::after { animation-delay: -1.6s; }
.product-panel:nth-child(3) .panel-media::after { animation-delay: -3.2s; }
@keyframes panel-scan { to { transform: translateY(334%); } }

.hud-tag {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  font: 600 0.64rem/1 'DM Sans', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #e8f4ff; background: rgba(3, 8, 18, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.35);
}
.hud-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c;
  animation: pulse 1.6s ease-in-out infinite;
}
.hud-box {
  --hud: var(--accent);
  position: absolute; z-index: 2;
  border: 1.5px solid var(--hud);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 18px color-mix(in srgb, var(--hud) 45%, transparent);
  animation: hud-lock 3.2s ease-in-out infinite;
}
.hud-box i {
  position: absolute; left: -1.5px; bottom: 100%;
  padding: 0.25rem 0.4rem;
  font: 700 0.6rem/1 'DM Sans', sans-serif; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: #03101a; background: var(--hud);
}
.hud-box--warn { --hud: #ffb020; }
.hud-box--ok { --hud: #7dffb0; }
@keyframes hud-lock {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}
.hud-alarm {
  position: absolute; right: 18px; bottom: 18px; z-index: 3;
  padding: 0.4rem 0.6rem;
  font: 700 0.64rem/1 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: rgba(255, 59, 92, 0.88);
  box-shadow: 0 0 22px rgba(255, 59, 92, 0.45);
  animation: hud-alarm 2s ease-in-out infinite;
}
.hud-alarm--ok { color: #03101a; background: rgba(125, 255, 176, 0.92); box-shadow: 0 0 22px rgba(125, 255, 176, 0.35); animation: none; }
@keyframes hud-alarm { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.product-panel--wide {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2rem; align-items: stretch;
}
.product-panel--wide .panel-body { align-self: center; }
.product-panel--wide .panel-media {
  margin: -1.75rem -1.6rem -1.5rem 0;
  aspect-ratio: auto; min-height: 280px;
  border-bottom: 0; border-left: 1px solid var(--border);
}
.product-panel--wide .panel-media img {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000 32%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000 32%);
}
.panel-media--assurance { background: linear-gradient(135deg, #003a46, #00224d); }
.panel-media--assurance::before { --c: #7dffb0; }
.panel-media--assurance img { mix-blend-mode: luminosity; filter: contrast(1.1) brightness(1.05); }
.product-panel:hover .panel-media--assurance img { filter: contrast(1.1) brightness(1.2); }
@media (max-width: 900px) {
  .product-panel--wide { grid-template-columns: 1fr; gap: 0; }
  .product-panel--wide .panel-media {
    order: -1;
    margin: -1.75rem -1.6rem 1.3rem;
    aspect-ratio: 3 / 2; min-height: 0;
    border-left: 0; border-bottom: 1px solid var(--border);
  }
  .product-panel--wide .panel-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.55));
    mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.55));
  }
}

/* Cursor-follow glow on cards */
.glow-card:hover {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 255, 0.11), transparent 45%);
  border-color: rgba(0, 229, 255, 0.5);
}

/* Glint on primary calls to action */
.nav-cta, .hero-actions .btn-primary { position: relative; overflow: hidden; }
.nav-cta::after, .hero-actions .btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  animation: cta-glint 6s ease-in-out infinite;
  pointer-events: none;
}
.hero-actions .btn-primary::after { animation-delay: 1.2s; }
@keyframes cta-glint {
  0%, 72% { left: -60%; }
  88%, 100% { left: 130%; }
}

/* Scroll reveal (classes are added by refresh.js, so content stays visible without JS) */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .panel-media::after, .hud-box, .hud-alarm, .hud-tag::before,
  .nav-cta::after, .hero-actions .btn-primary::after { animation: none; }
  .panel-media::after { display: none; }
}