/* ==========
   KoolBreeze Base Styles
   ========== */
:root{
  --kb-bg: #0B1020;          /* deep navy */
  --kb-surface: rgba(255,255,255,0.06);
  --kb-border: rgba(255,255,255,0.14);
  --kb-text: #E7ECF8;
  --kb-muted: #A8B1C9;
  --kb-blue-1:#1F9EFF;
  --kb-blue-2:#52C3FF;
  --kb-blue-3:#7AE1FF;
  --kb-accent: #8CE1FF;
  --kb-shadow: 0 10px 35px rgba(0,0,0,.45);
  --radius-2xl: 1.25rem;
}

* { box-sizing: border-box; }
html { height: 100%; }

/* ----------
   Main Body & Background
   ---------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--kb-text);

  /* --- BACKGROUND IMAGE SETTINGS --- */
  background-color: var(--kb-bg); /* Fallback color */
  
  /* Includes the Dark Overlay (40% opacity) + Your Background Image 
     Make sure 'background.png' is in your assets folder.
  */
  background-image: 
    linear-gradient(rgba(11, 16, 32, 0.40), rgba(11, 16, 32, 0.40)),
    url('assets/background.png'); 
  
  /* Ensures the image covers the whole screen */
  background-size: cover;
  
  /* Keeps the background locked in place while you scroll (Parallax feel) */
  background-attachment: fixed;
  
  /* Centers the image */
  background-position: center;
  
  /* Prevents tiling */
  background-repeat: no-repeat;
}

main { flex: 1 0 auto; display: flex; flex-direction: column;}

/* Container */
.kb-container{
  width: min(1800px, 90vw);
  margin-inline: auto;
}

/* ----------
   Header
   ---------- */
.kb-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(12px); 
  background: rgba(11, 16, 32, 0.75);
  border-bottom: 1px solid var(--kb-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 0;
}
.brand img{ height: 88px; width: auto; display: block; }
@media (max-width: 820px){
  .brand img{ height: 46px; }
}

/* Nav */
.kb-nav{ position: relative; }
.menu{
  display: flex; gap: 1rem; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.nav-link{
  padding: .6rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--kb-text);
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.nav-link:hover{ background: var(--kb-surface); transform: translateY(-1px); }
.btn-ghost{
  border: 1px solid var(--kb-border);
}

/* Highlight active page link */
.kb-nav a[aria-current="page"]{
  background: var(--kb-surface);
  box-shadow: inset 0 0 0 1px var(--kb-border);
}

/* Mobile menu button */
.nav-toggle{
  display: none;
  width: 46px; height: 42px; border-radius: 10px;
  background: var(--kb-surface); border: 1px solid var(--kb-border);
}
.nav-toggle span{
  display: block; height: 2px; background: var(--kb-text); margin: 8px 10px;
  transition: transform .25s ease, opacity .25s ease;
}

/* ----------
   Hero (UPDATED FOR PRODUCT IMAGE)
   ---------- */
.hero{
  position: relative;
  overflow: clip;
  padding: min(12vh, 7rem) 0 4rem;
}

.hero-inner{
  display: grid; gap: 2rem;
  /* Columns for the content row */
  grid-template-columns: 1.3fr .9fr;
  /* Rows: Auto for image, 1fr for content */
  grid-template-rows: auto 1fr;
  align-items: start;
}

/* -- New Styles for Product Family Image -- */
.product-family-hero {
  grid-column: 1 / -1; /* Span across all columns */
  grid-row: 1;         /* Force to top row */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  padding-bottom: 7rem;
}

.product-family-hero img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* Nice shadow to lift the products off the background */
  filter: drop-shadow(0 15px 40px rgba(0,0,0,0.5)); 
}

/* -- Positioning Text & Card BELOW the image -- */
.hero-copy {
  grid-column: 1 / 2;
  grid-row: 2;
  align-self: start;
  padding-top: 2rem;
}

.hero-card {
  grid-column: 2 / 3;
  grid-row: 2;
  align-self: start;
}

/* Hero Text Styling */
.hero-copy h1{
  font-size: clamp(2.2rem, 3.5vw + .5rem, 3.6rem);
  line-height: 1.05; letter-spacing: .2px; margin: 0 0 .8rem;
  
  /* Stronger shadow for legibility on background image */
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.85);
  
  /* Text Gradient */
  background: linear-gradient(180deg, #FFFFFF 60%, #A8B1C9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.accent{ 
  /* Accent Gradient */
  background: linear-gradient(180deg, var(--kb-blue-2), var(--kb-blue-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.hero-copy p{
  color: var(--kb-muted);
  font-size: 1.1rem;
  max-width: 60ch;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.badges{
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none;
}
.badges li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--kb-muted);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.badges li svg {
  width: 18px;
  height: 18px;
  color: var(--kb-blue-2); 
  flex-shrink: 0; 
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.cta{ display: flex; gap: .8rem; margin-top: 1.2rem; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-ghost{
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 1.1rem; border-radius: 999px; text-decoration: none;
  font-weight: 800; letter-spacing: .3px; 
}

/* Primary Button Enhanced */
.btn-primary{ 
  background: linear-gradient(90deg, var(--kb-blue-1), var(--kb-blue-2)); 
  color: #00122a; 
  box-shadow: 0 8px 25px rgba(31,158,255,.2); 
  transform-origin: center;
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .2s ease;
}
.btn-primary:hover{ 
  transform: scale(1.04); 
  box-shadow: 0 12px 30px rgba(82, 195, 255, 0.35); 
}
.btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 4px 15px rgba(31,158,255,.2);
}

/* Secondary Button Enhanced */
.btn-secondary{ 
  color: var(--kb-text); 
  border: 1px solid var(--kb-border); 
  background: var(--kb-surface); 
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color .2s ease, background-color .2s ease;
}
.btn-secondary:hover{ 
  transform: scale(1.04); 
  border-color: color-mix(in srgb, var(--kb-blue-2), var(--kb-border) 60%); 
  background-color: rgba(255,255,255,0.1);
}
.btn-secondary:active {
  transform: scale(0.98);
  background-color: rgba(255,255,255,0.05);
}

.hero-card .card{
  padding: 1.25rem 1.25rem 1rem;
}

/* Darker background for cards for better legibility */
.card{
  background: rgba(11, 16, 32, 0.65);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-2xl);
  box-shadow: var(--kb-shadow);
}
.card h3{ margin: .25rem 0 1rem; }
.spec-list{
  display: grid; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none;
}
.spec-list li{
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .75rem; background: rgba(255,255,255,.03);
  border: 1px solid var(--kb-border); border-radius: .9rem;
}
.spec-list span{ color: var(--kb-muted); }
.card-link{ color: var(--kb-blue-3); text-decoration: none; font-weight: 700; }
.card-link:hover{ text-decoration: underline; }

/* ----------
   Features
   ---------- */
.section-head{ text-align: center; margin: 3.2rem auto 1.6rem; max-width: 70ch; }
.section-head h2{ 
  margin: 0 0 .4rem; 
  font-size: clamp(1.6rem, 2.1vw + .7rem, 2.4rem);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8); 
}
.section-head p{ 
  color: var(--kb-muted); 
  margin: 0; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.feature-grid{
  display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr);
}
.feature{
  padding: 1.1rem; border-radius: var(--radius-2xl); border: 1px solid var(--kb-border);
}
.feature h3{ margin: .6rem 0 .35rem; }
.feature p{ margin: 0; color: var(--kb-muted); }
.icon{ width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(145deg, var(--kb-blue-1), var(--kb-blue-2)); filter: drop-shadow(0 6px 16px rgba(31,158,255,.35)); }
.icon-air{ mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="white"><path d="M4 12h9a3 3 0 0 0 0-6h-.5"/><path d="M4 18h11a4 4 0 0 0 0-8"/><path d="M4 6h7"/></svg>') center/70% no-repeat; }
.icon-louver{ mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18M3 10h18M3 14h18M3 18h18" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') center/82% no-repeat; }
.icon-drop{ mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C9 8 5 10.5 5 14a7 7 0 0 0 14 0c0-3.5-4-6-7-11z" fill="white"/></svg>') center/78% no-repeat; }
.icon-rugged{ mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 7h10v10H7z" fill="white"/><path d="M3 3h4v4H3zM17 3h4v4h-4zM17 17h4v4h-4zM3 17h4v4H3z" fill="white"/></svg>') center/88% no-repeat; }

/* ----------
   Proof cards
   ---------- */
.proof{
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
  margin: 2.5rem auto 2rem;
}
.proof-card{ padding: 1.2rem; border: 1px solid var(--kb-border); border-radius: var(--radius-2xl); }
.proof-card h3 { display: flex; align-items: center; gap: .6rem; }
.proof-card h3 svg { width: 22px; height: 22px; color: var(--kb-blue-2); }

/* ----------
   Hover Glow Effects
   ---------- */
.compare-card, .feature, .proof-card, .hero-card .card, .info-card {
  position: relative; 
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Gradient border pseudo-element */
.compare-card::before, .feature::before, .proof-card::before, .hero-card .card::before, .info-card::before {
  content: "";
  position: absolute;
  inset: -1px; 
  border-radius: var(--radius-2xl); 
  padding: 1px; 
  background: conic-gradient(from 180deg at 50% 50%, rgba(82, 195, 255, 0.8), rgba(31, 158, 255, 0), rgba(82, 195, 255, 0.8));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.compare-card:hover, .feature:hover, .proof-card:hover, .hero-card .card:hover, .info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.compare-card:hover::before, .feature:hover::before, .proof-card:hover::before, .hero-card .card:hover::before, .info-card:hover::before {
  opacity: 1;
}

/* ----------
   Models teaser
   ---------- */
.models-teaser{
  position: relative;
  padding: 1rem 0 4.25rem;
  border-top: 0px solid var(--kb-border);
  border-bottom: 1px solid var(--kb-border);
}
.teaser-content{ text-align: center; }
.teaser-content h2{ margin: 0 0 .5rem; }
.teaser-content p{ color: var(--kb-muted); }
.wave{
  position: absolute; inset: auto 0 0 0; height: 90px; pointer-events: none;
  background: conic-gradient(from 200deg at 50% 120%, transparent, rgba(31,158,255,.18), transparent 70%);
  filter: blur(26px); opacity: .0;
}

/* Louvers vs No Louvers layout */
.louver-section .teaser-content{ margin-bottom: 1.25rem; }

.compare-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 3rem 0 1.5rem;
}

.compare-card{
  padding: 1rem;
  border: 1px solid var(--kb-border);
  border-radius: var(--radius-2xl);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* SCOPE these image rules ONLY to the compare section */
.compare-grid .img-wrap{
  background: radial-gradient(400px 140px at 50% 40%, rgba(31,158,255,.18), transparent 60%);
  border-radius: calc(var(--radius-2xl) - 6px);
  padding: .75rem;
  margin-bottom: .6rem;
  min-height: 220px;                 
  display: grid; place-items: center;
}
.compare-grid .img-wrap img{
  max-width: 100%;
  max-height: 500px;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.compare-card h3{
  margin: .2rem 0 .2rem;
}
.model-line{
  color: var(--kb-muted);
  font-weight: 700;
  letter-spacing: .2px;
}

.center-cta{ justify-content: center; display: flex; gap: .8rem; }

/* Responsive stack */
@media (max-width: 900px){
  .compare-grid{ grid-template-columns: 1fr; }
  .compare-grid .img-wrap{ min-height: 200px; }
}

/* ----------
   Footer
   ---------- */
.kb-footer{
  border-top: 1px solid var(--kb-border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  padding: 1.6rem 0;
}
.footer-inner{
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: 1fr auto auto;
}
.footer-brand img{ height: 88px; }
.small{ color: var(--kb-muted); margin: .4rem 0 0; font-size: .9rem; }
.footer-menu{
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.1rem;
}
.footer-menu a{ color: var(--kb-text); text-decoration: none; opacity: .9; }
.footer-menu a:hover{ text-decoration: underline; }

/* ----------
   Glass helper
   ---------- */
/* Darker glass for generic elements */
.glass {
  background: rgba(11, 16, 32, 0.65);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* =========================================
   ENHANCED ANIMATIONS
   ========================================= */

/* Base State: Invisible and slightly shifted */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 2.7s ease, transform 2.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1. Default (Fade Up) */
[data-animate="up"], 
[data-animate]:not([data-animate="left"]):not([data-animate="right"]):not([data-animate="zoom"]) {
  transform: translateY(40px);
}

/* 2. Slide form Left */
[data-animate="left"] {
  transform: translateX(-60px);
}

/* 3. Slide from Right */
[data-animate="right"] {
  transform: translateX(60px);
}

/* 4. Zoom Out (Good for Heros/Images) */
[data-animate="zoom"] {
  transform: scale(0.92);
}

/* --- THE ACTIVE STATE (Triggered by JS) --- */
[data-animate].in {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* --- STAGGER DELAYS --- 
   This allows items in a grid to pop in one by one 
*/
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }

/* Reduced Motion Requirement */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ----------
   Responsive
   ---------- */
@media (max-width: 1000px){
  /* Stack Hero Elements on mobile: Image -> Text -> Card */
  .hero-inner{ 
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto;
  }
  .product-family-hero {
    grid-column: 1 / -1;
    grid-row: 1; 
    padding-bottom: 1.5rem;
  }
  .hero-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    align-self: center;
  }
  .hero-copy .cta, .hero-copy .badges {
    justify-content: center;
  }
  .hero-card{ 
    grid-column: 1 / -1; 
    grid-row: 3;
    align-self: center;
  }
  
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .proof{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .menu{
    position: absolute; top: 110%; right: 0;
    background: linear-gradient(180deg, rgba(11,16,32,.95), rgba(11,16,32,.88));
    border: 1px solid var(--kb-border); border-radius: 16px;
    padding: .5rem; width: 250px; box-shadow: var(--kb-shadow);
    display: none; flex-direction: column; gap: .25rem;
  }
  .menu.show{ display: flex; }
  .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }
}

/* ==========
   Models page grid + cards (balanced layout)
   ========== */
.model-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch; 
}

/* Equal-height cards with CTA pinned to bottom */
/* Darker background for model cards */
.model-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-2xl);
  background: rgba(11, 16, 32, 0.65);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--kb-shadow);
}

/* Dedicated image wrapper for models page */
.model-card .img-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;                /* uniform image area */
  padding: .5rem;
  margin-bottom: .6rem;
  border-radius: calc(var(--radius-2xl) - 6px);
  background: radial-gradient(400px 140px at 50% 40%, rgba(31,158,255,.18), transparent 60%);
  overflow: hidden;             /* prevent accidental overflow */
}

/* Scale images down, never up beyond the wrapper */
.model-card .img-wrap img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  pointer-events: none;
}

/* Specs spacing */
.model-card .spec-list{ margin-top: .6rem; }

/* CTA aligned at bottom across all cards */
.model-card .btn-primary{
  margin-top: auto;
  width: 100%;
}

/* Responsive columns + slightly shorter image area on small screens */
@media (max-width: 1100px){
  .model-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .model-grid{ grid-template-columns: 1fr; }
  .model-card .img-wrap{ height: 220px; }
}

/* Subtle animated glow behind "KoolBreeze" in the models hero */
.hero .section-head .accent{
  position: relative;
  z-index: 0;                 /* allow pseudo-element behind text */
  isolation: isolate;         /* keep the glow from leaking outside */
}

/* the faint radial halo */
.hero .section-head .accent::after{
  content:"";
  position: absolute;
  inset: -0.2em -0.45em;      /* small halo around the word */
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient( circle at 50% 55%,
      color-mix(in srgb, var(--kb-blue-2), #194892 30%) 0%,
      color-mix(in srgb, var(--kb-blue-2), transparent 70%) 40%,
      transparent 70%);
  filter: blur(12px);
  opacity: .22;               /* keep it barely visible */
  transform: scale(.98);
  animation: kb-breathe 7s ease-in-out infinite;
  pointer-events: none;
}

/* gentle “breathe” animation */
@keyframes kb-breathe{
  0%, 100% { opacity: .18; transform: scale(.96); filter: blur(12px); }
  50%      { opacity: .28; transform: scale(5.02); filter: blur(16px); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero .section-head .accent::after{
    animation: none;
    opacity: .18;
  }
}

/* Center-align the hero heading/subheading on models page */
.hero .section-head {
  text-align: center;
  max-width: 1200px;  
  margin: 0 auto;
}

.hero .section-head h1 {
  margin: 0 0 .4rem;
}

/* Page-local form polish (shared from calculator.html) */
.calc-wrap{ margin: 1rem 0 2.25rem; }

/* When results are visible, tighten the space above the footer */
.results-visible .calc-wrap{ margin-bottom: 1rem; }

/* Stack calculator and results vertically, centered */
.kb-container.calc-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: .2rem;
}

/* Keep the form card a tidy width */
.kb-container.calc-wrap .card{
  max-width: 1200px;
  width: 100%;
}

/* Make results take a full row under the form (centered by the parent) */
#results{
  max-width: 1200px;
  width: 100%;
}

select option {
  color: #000;
  background: #fff;
}