:root{
  --kpn-primary: #0b5ed7;
  --kpn-dark: #0b1220;
  --kpn-muted: #5b6b84;
  --kpn-surface: #0f172a;
}

html { scroll-behavior: smooth; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.navbar{
  backdrop-filter: blur(10px);
}

.kpn-hero{
  position: relative;
  color: #fff;
  background: radial-gradient(1200px 700px at 20% 20%, rgba(11,94,215,.35), transparent 60%),
              radial-gradient(900px 600px at 80% 30%, rgba(34,197,94,.20), transparent 55%),
              linear-gradient(180deg, rgba(11,18,32,.88), rgba(11,18,32,.88));
  overflow: hidden;
}

.kpn-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/img/hero-industrial.jpg");
  background-size: cover;
  background-position: center;
  opacity:.25;
  transform: scale(1.02);
}

.kpn-hero > .container{
  position: relative;
  z-index: 2;
}

.kpn-badge{
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.95);
}

.kpn-card{
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  border-radius: 1.25rem;
}

.kpn-card:hover{
  transform: translateY(-2px);
  transition: transform .2s ease;
}

.kpn-section{
  padding: 4.5rem 0;
}

.kpn-section-title{
  letter-spacing: -0.02em;
}

.kpn-gradient-text{
  background: linear-gradient(90deg, #0b5ed7, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kpn-icon-pill{
  width: 44px; height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(11,94,215,.10);
  color: var(--kpn-primary);
}

.kpn-footer{
  background: linear-gradient(180deg, #0b1220, #050814);
  color: rgba(255,255,255,.85);
}

.kpn-footer a{ color: rgba(255,255,255,.85); }
.kpn-footer a:hover{ color: #fff; }

.kpn-subtle{
  color: var(--kpn-muted);
}

.kpn-divider{
  height: 1px;
  background: rgba(148,163,184,.25);
}

/* image helpers */
.kpn-img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kpn-img-contain{
  object-fit: contain;
  object-position: center;
  background-color: #f8f9fa;
}

/* Override Bootstrap's 4x3 ratio to 1:1 (100%) for product images only (not hero banner) */
/* Target only ratio containers that have kpn-img-contain (product images), not kpn-img-cover (hero) */
.kpn-section .ratio-4x3:has(.kpn-img-contain) {
  --bs-aspect-ratio: 100% !important;
}

/* Fallback for browsers without :has() support - target product card containers in sections */
.kpn-section .kpn-card .ratio-4x3 {
  --bs-aspect-ratio: 100% !important;
}

/* Exclude hero section - keep original ratio for hero images */
.kpn-hero .ratio-4x3,
header .ratio-4x3 {
  --bs-aspect-ratio: 75% !important;
}

/* Ensure ratio containers properly contain images with original aspect ratio */
.ratio .kpn-img-contain {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background-color: #f8f9fa;
  /* Prevent any stretching or squashing */
  image-rendering: auto;
}

.kpn-soft-shadow{
  box-shadow: 0 25px 60px rgba(2,6,23,.20);
}

/* small animation */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: all .6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}