/* =========================================================
   HOME PAGE — page-specific styles
   Loaded after css/style.css
   ========================================================= */

/* -------------------- Hero -------------------- */

.hero-p__floating--bottom {
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-p__floating--bottom {
    animation: none;
  }
}

.hero{
  position: relative;
  background: linear-gradient(100deg, var(--baz-blue-dark) 0%, #0e3a8f 55%, #1a4bab 100%);
  color:#fff;
  overflow:hidden;
  padding-top: 72px;
  padding-bottom: 120px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap: 40px;
  min-height: 480px;
}
.hero__content{
  position:relative;
  z-index:3;
  padding: 40px 0;
}
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform:uppercase;
  color: var(--baz-orange);
  margin-bottom: 18px;
}
.hero__title{
  font-size: clamp(34px, 5.2vw, 56px);
  text-transform: uppercase;
  line-height: 1.05;
}
.hero__title span{ color: var(--baz-orange); display:block; }
.hero__text{
  margin-top: 20px;
  max-width: 480px;
  color: #cdd9f4;
  font-size: 16px;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  margin-top: 34px;
}

.hero__media{
  position: relative;
  z-index:2;
  height: 100%;
  min-height: 380px;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}
.hero__media-inner{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,42,99,0.05), rgba(10,42,99,0.45)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="900" height="700" viewBox="0 0 900 700"><rect width="900" height="700" fill="%23163a7a"/><rect x="60" y="120" width="120" height="580" fill="%230c2c66"/><rect x="200" y="60" width="90" height="640" fill="%23133877"/><rect x="310" y="200" width="70" height="500" fill="%230c2c66"/><rect x="400" y="30" width="110" height="670" fill="%23173f86"/><rect x="540" y="160" width="80" height="540" fill="%230c2c66"/><rect x="650" y="90" width="100" height="610" fill="%23133877"/><rect x="780" y="220" width="80" height="480" fill="%230c2c66"/></svg>');
  background-size: cover;
  background-position: center;
}
.hero__media-caption{
  position:absolute;
  bottom: 28px; right: 28px;
  z-index:3;
  background: rgba(10,42,99,0.85);
  backdrop-filter: blur(6px);
  color:#fff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  text-transform:uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Info bar (overlaps hero bottom) */
.info-bar{
  position: relative;
  z-index: 5;
  margin-top: -64px;
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 20px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.info-item{
  display:flex;
  align-items:flex-start;
  gap: 14px;
}
.info-item__icon{
  flex-shrink:0;
  width: 44px; height:44px;
  border-radius:50%;
  background: var(--baz-blue-light);
  color: var(--baz-blue-dark);
  display:flex;align-items:center;justify-content:center;
}
.info-item__icon svg{ width:20px;height:20px; }
.info-item h4{
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform:uppercase;
  color: var(--baz-text-muted);
  font-weight:600;
  margin-bottom: 4px;
}
.info-item p{ font-size: 14.5px; color: var(--baz-text); line-height:1.45; }

/* -------------------- Services -------------------- */
.services{ padding-top: 130px; }
.services-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.service-card{
  background:#fff;
  border: 1px solid var(--baz-line);
  border-radius: var(--radius-md);
  padding: 30px 22px;
  text-align:center;
  transition: var(--transition);
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.service-card__icon{
  width: 56px; height:56px;
  margin: 0 auto 18px;
  border-radius:50%;
  background: var(--baz-blue-light);
  color: var(--baz-blue-dark);
  display:flex;align-items:center;justify-content:center;
  transition: var(--transition);
}
.service-card:hover .service-card__icon{
  background: var(--baz-orange);
  color:#fff;
}
.service-card__icon svg{ width:26px;height:26px; }
.service-card h3{
  font-family: var(--font-display);
  font-size: 18px;
  text-transform:uppercase;
  color: var(--baz-blue-dark);
  margin-bottom: 10px;
  letter-spacing:0.3px;
}
.service-card p{
  font-size: 14px;
  color: var(--baz-text-muted);
}

/* -------------------- About -------------------- */
.about{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items:center;
}
.about__media{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  min-height: 420px;
  background:
    linear-gradient(180deg, rgba(10,42,99,0.1), rgba(10,42,99,0.75)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="700" height="800" viewBox="0 0 700 800"><rect width="700" height="800" fill="%23274b8c"/><g stroke="%23f47b20" stroke-width="6" opacity="0.8"><line x1="60" y1="600" x2="60" y2="200"/><line x1="150" y1="650" x2="150" y2="150"/><line x1="240" y1="600" x2="240" y2="250"/><line x1="330" y1="650" x2="330" y2="180"/><line x1="420" y1="600" x2="420" y2="230"/></g></svg>');
  background-size: cover;
  background-position: center;
}
.about__badge{
  position:absolute;
  left: 24px; bottom: 24px;
  background: var(--baz-blue-dark);
  color:#fff;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  max-width: 220px;
}
.about__badge strong{
  display:block;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--baz-orange);
  line-height:1;
}
.about__badge span{
  font-size: 12px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color: #cdd9f4;
}
.about__text p{
  color: var(--baz-text-muted);
  margin-top: 16px;
  font-size: 15.5px;
}
.about__points{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px;
}
.point{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.point__icon{
  flex-shrink:0;
  width: 40px; height:40px;
  border-radius:50%;
  background: var(--baz-blue-light);
  color: var(--baz-orange);
  display:flex;align-items:center;justify-content:center;
}
.point__icon svg{ width:18px;height:18px; }
.point h4{
  font-family: var(--font-body);
  font-weight:700;
  font-size: 14.5px;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color: var(--baz-blue-dark);
  margin-bottom: 4px;
}
.point p{ font-size: 13.8px; color: var(--baz-text-muted); margin-top:0; }

/* -------------------- Stats -------------------- */
.stats{
  background: var(--baz-blue-dark);
  color:#fff;
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 34px 24px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.stat:last-child{ border-right:none; }
.stat svg{ width:34px; height:34px; color: var(--baz-orange); flex-shrink:0; }
.stat strong{
  display:block;
  font-family: var(--font-display);
  font-size: 30px;
  line-height:1;
}
.stat span{
  font-size: 12.5px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:#b9c6e6;
}

/* -------------------- CTA / Footer top -------------------- */
.cta{
  background: linear-gradient(120deg, var(--baz-blue-dark) 0%, #123a86 100%);
  color:#fff;
  padding: 70px 0 0;
  position:relative;
}
.cta__grid{
  display:grid;
  grid-template-columns: 1.1fr 0.55fr 1fr 0.75fr;
  gap: 32px;
  align-items:center;
  padding-bottom: 54px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cta__title{
  font-size: clamp(26px, 3.6vw, 36px);
  text-transform:uppercase;
}
.cta__title span{ color: var(--baz-orange); }
.cta__text{
  margin-top: 14px;
  color:#b9c6e6;
  font-size: 14.5px;
  max-width: 380px;
}
.cta__qr{
  text-align:center;
  font-size: 12px;
  text-transform:uppercase;
  letter-spacing: 1px;
  color:#b9c6e6;
}
.cta__qr-box{
  width: 108px; height:108px;
  margin: 0 auto 10px;
  background:#fff;
  border-radius: var(--radius-sm);
  padding: 8px;
}
.cta__contact{ font-size: 14.5px; }
.cta__contact li{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
  color:#dbe4f7;
}
.cta__contact svg{ width:16px; height:16px; color: var(--baz-orange); flex-shrink:0; }
.cta__logo{ text-align:center; }
.cta__logo img{
  margin: 0 auto;
  height: 60px;
  width:auto;
  filter: brightness(0) invert(1);
}
.cta__logo p{
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform:uppercase;
  color:#b9c6e6;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 1100px){
  .info-bar{ grid-template-columns: repeat(2,1fr); }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .stat{ border-right:none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .cta__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ display:none; }
  .about{ grid-template-columns: 1fr; }
  .about__media{ min-height: 320px; }
}

@media (max-width: 600px){
  .hero{ padding-bottom: 90px; }
  .info-bar{ grid-template-columns: 1fr; margin-top: -40px; padding: 24px 18px; gap: 20px; }
  .services{ padding-top: 90px; }
  .services-grid{ grid-template-columns: 1fr; }
  .about__points{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr; }
  .stat{ border-bottom: 1px solid rgba(255,255,255,0.12); }
  .cta__grid{ grid-template-columns: 1fr; text-align:center; }
  .cta__text{ margin-left:auto; margin-right:auto; }
  .cta__contact{ text-align:left; display:inline-block; }
  .hero__actions .btn{ width:100%; justify-content:center; }
}