/* public/assets/front/css/home-modern.css  (ANA SEHIFE PREMIUM LIGHT) */

.hp-container{max-width:1200px; margin:0 auto; padding:0 16px}

.hp-hero{
  position:relative;
  padding: 54px 0 40px;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.hp-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.28) 100%),
    radial-gradient(900px 520px at 10% 10%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 18%, rgba(34,197,94,.12), transparent 55%);
}

.hp-hero__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 992px){
  .hp-hero{padding:34px 0 28px}
  .hp-hero__grid{grid-template-columns:1fr}
  .hp-hero__overlay{
    background:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.62) 70%, rgba(255,255,255,.28) 100%),
      radial-gradient(900px 520px at 20% 10%, rgba(37,99,235,.14), transparent 60%);
  }
}

/* left card */
.hp-hero__copy{
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 60px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
}

.hp-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
  font-weight:800;
}

.hp-hero__title{
  margin:14px 0 10px;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height:1.08;
  letter-spacing: -0.6px;
  color: rgba(15,23,42,.95);
}
.hp-hero__text{
  margin:0;
  color: rgba(15,23,42,.68);
  font-size: 16px;
  line-height:1.7;
  max-width: 520px;
}

/* buttons */
.hp-hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.hp-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-radius: 999px;
  border:1px solid transparent;
  font-weight:900;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .22s;
}
.hp-btn:active{transform: translateY(1px)}
.hp-btn--primary{
  color:#fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 18px 40px rgba(37,99,235,.18);
}
.hp-btn--primary:hover{transform: translateY(-1px)}
.hp-btn--glass{
  background:#fff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
  color: rgba(15,23,42,.88);
}
.hp-btn--glass:hover{transform: translateY(-1px)}
.hp-btn--full{width:100%; justify-content:center}
.hp-btn--sm{padding:10px 14px; font-weight:900}

/* stats */
.hp-hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
@media (max-width: 992px){
  .hp-hero__stats{grid-template-columns:1fr}
}

.hp-stat{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px;
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
}
.hp-stat i{color:#2563eb; font-size:18px}
.hp-stat b{display:block; font-size:14px}
.hp-stat small{display:block; color: rgba(15,23,42,.62)}

/* right column cards */
.hp-hero__media{display:grid; gap:14px}

.hp-mediaCard,
.hp-slide__inner{
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 60px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  padding: 18px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.hp-mediaCard:hover,
.hp-slide__inner:hover{transform: translateY(-2px)}

.hp-mediaCard__top{
  display:flex; align-items:center; justify-content:space-between;
  color: rgba(15,23,42,.72);
  font-weight:900;
}
.hp-mediaCard__top i{color:#2563eb}
.hp-dot{display:inline-block; width:8px; height:8px; border-radius:99px; background: rgba(15,23,42,.22); margin-right:6px}

/* sections */
.hp-section{padding:70px 0}
.hp-section--alt{background: rgba(255,255,255,.55); border-top:1px solid rgba(15,23,42,.08); border-bottom:1px solid rgba(15,23,42,.08)}
.hp-sectionHead{
  display:flex; align-items:end; justify-content:space-between;
  gap:16px; margin-bottom:22px;
}
.hp-h2{margin:0; font-size: 32px; letter-spacing:-.4px}
.hp-h3{margin:0; font-size: 18px}
.hp-muted{color: rgba(15,23,42,.62)}
.hp-text{color: rgba(15,23,42,.70); line-height:1.8}
.hp-small{font-size: 13px}

.hp-grid{display:grid; gap:16px}
.hp-grid--4{grid-template-columns: repeat(4, minmax(0,1fr))}
.hp-grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 992px){
  .hp-grid--4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .hp-grid--3{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 560px){
  .hp-grid--4,.hp-grid--3{grid-template-columns:1fr}
}

/* cards */
.hp-card{
  border-radius: 24px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  overflow:hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
.hp-card--pad{padding:18px}
.hp-card--hover:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(37,99,235,.14);
}

.hp-card__icon{
  width:56px; height:56px;
  border-radius:18px;
  display:grid; place-items:center;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.16);
  margin-bottom:12px;
  overflow:hidden;
}
.hp-card__icon img{width: 38px; height: 38px; object-fit:contain}

/* service card badge */
.hp-serviceCard{position:relative}
.hp-serviceCard__badge{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.18);
  color: #16a34a;
}

/* about */
.hp-twoCol{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:center;
}
@media (max-width: 992px){ .hp-twoCol{grid-template-columns:1fr} }
.hp-figure{
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 60px rgba(15,23,42,.12);
}
.hp-figure img{width:100%; height:auto}

/* video */
.hp-video{position:relative; background-size:cover; background-position:center}
.hp-video__overlay{position:absolute; inset:0; background: rgba(255,255,255,.72)}
.hp-video .hp-container{position:relative; z-index:2}
.hp-videoBox{
  margin-top:16px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 60px rgba(15,23,42,.12);
  background-image: var(--thumb);
  background-size:cover;
  background-position:center;
  height: 360px;
  position:relative;
  overflow:hidden;
}
@media (max-width: 992px){ .hp-videoBox{height:240px} }
.hp-play{
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.hp-play i{
  width:70px; height:70px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff;
  box-shadow: 0 18px 40px rgba(37,99,235,.22);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.hp-play:hover i{transform: scale(1.06)}

/* portfolio */
.hp-work{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.hp-work__img{width:100%; height:260px; object-fit:cover}
.hp-work__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,.65) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  color:#fff;
}
.hp-work__actions{display:flex; gap:10px; margin-top:10px}
.hp-iconBtn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.hp-iconBtn:hover{transform: translateY(-2px)}

/* blog post */
.hp-post__img img{width:100%; height:220px; object-fit:cover}
.hp-post__body{padding:16px}
.hp-post__meta{
  display:flex; gap:12px; flex-wrap:wrap;
  color: rgba(15,23,42,.58);
  font-size: 13px;
  margin:10px 0;
}
.hp-link{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:10px;
  color:#1d4ed8;
  font-weight:900;
}