/* ============================================
   DMNT Hero Section - Redesigned
   ============================================ */

.dmnt-hs-wrapper{
  --hs-primary:#1e88ff;
  --hs-primary-dark:#1570d9;
  --hs-primary-light:#e8f2ff;
  --hs-teal:#1abc9c;
  --hs-orange:#f5a623;
  --hs-pink:#e91e63;
  --hs-text-dark:#1a1a2e;
  --hs-text-body:#5a6478;
  --hs-text-muted:#8892a6;
  --hs-border:#eaeef5;
  --hs-white:#ffffff;
  position:relative;
  width:100%;
  padding:100px 0;
  background:
    radial-gradient(1100px 600px at -10% -20%, rgba(30,136,255,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(26,188,156,.10), transparent 60%),
    linear-gradient(180deg,#f5f8ff 0%, #eef4ff 100%);
  overflow:hidden;
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
}
.dmnt-hs-wrapper *{box-sizing:border-box}

/* Floating decorative blobs */
.dmnt-hs-wrapper::before,
.dmnt-hs-wrapper::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}
.dmnt-hs-wrapper::before{
  width:420px;height:420px;
  top:-120px;left:-120px;
  background:radial-gradient(circle, rgba(30,136,255,.18), transparent 70%);
}
.dmnt-hs-wrapper::after{
  width:520px;height:520px;
  bottom:-180px;right:-180px;
  background:radial-gradient(circle, rgba(26,188,156,.15), transparent 70%);
}

.dmnt-hs-container{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:80px;
  align-items:center;
}

/* ============ LEFT: COLLAGE ============ */
.dmnt-hs-left{position:relative}
.dmnt-hs-collage{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:22px;
  height:560px;
}
.dmnt-hs-polaroid{
  position:relative;
  background:#fff;
  padding:12px 12px 14px;
  border-radius:18px;
  box-shadow:
    0 1px 3px rgba(15,23,42,.06),
    0 12px 30px rgba(30,136,255,.12),
    0 28px 60px rgba(30,136,255,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  overflow:hidden;
}
.dmnt-hs-polaroid::before{
  content:"";
  position:absolute;inset:0;
  border-radius:18px;
  border:1px solid rgba(30,136,255,.08);
  pointer-events:none;
}
.dmnt-hs-polaroid img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  transition:transform .7s ease;
}
.dmnt-hs-polaroid:hover{
  transform:translateY(-8px) rotate(0deg) scale(1.02) !important;
  box-shadow:
    0 2px 4px rgba(15,23,42,.08),
    0 20px 40px rgba(30,136,255,.18),
    0 40px 80px rgba(30,136,255,.15);
  z-index:5;
}
.dmnt-hs-polaroid:hover img{transform:scale(1.05)}

.dmnt-hs-polaroid-1{grid-column:1;grid-row:1;transform:rotate(-3deg);margin-top:10px}
.dmnt-hs-polaroid-2{grid-column:2;grid-row:1;transform:rotate(2.5deg);margin-top:40px}
.dmnt-hs-polaroid-3{grid-column:1;grid-row:2;transform:rotate(1.5deg);margin-top:-10px}
.dmnt-hs-polaroid-4{grid-column:2;grid-row:2;transform:rotate(-2deg);margin-top:20px}

/* Decorative accent dots behind collage */
.dmnt-hs-left::before{
  content:"";
  position:absolute;
  width:140px;height:140px;
  top:-30px;right:-20px;
  background-image:radial-gradient(circle, rgba(30,136,255,.25) 1.5px, transparent 2px);
  background-size:14px 14px;
  z-index:0;
  opacity:.6;
}

/* ============ RIGHT: CONTENT ============ */
.dmnt-hs-right{position:relative;z-index:2}
.dmnt-hs-content{max-width:560px}

.dmnt-hs-subheadline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--hs-primary);
  text-transform:uppercase;
  margin:0 0 20px;
  padding:8px 16px;
  background:var(--hs-primary-light);
  border-radius:50px;
  border:1px solid rgba(30,136,255,.15);
}
.dmnt-hs-subheadline::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--hs-primary);
  box-shadow:0 0 0 4px rgba(30,136,255,.18);
}

.dmnt-hs-title{
  font-size:clamp(32px, 4.5vw, 54px);
  font-weight:800;
  color:var(--hs-text-dark);
  line-height:1.1;
  letter-spacing:-1px;
  margin:0 0 20px;
  background:linear-gradient(135deg, var(--hs-primary) 0%, var(--hs-primary-dark) 60%, var(--hs-teal) 120%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.dmnt-hs-description{
  font-size:17px;
  color:var(--hs-text-body);
  line-height:1.75;
  margin:0 0 36px;
  max-width:520px;
}

/* Feature cards */
.dmnt-hs-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0 0 40px;
}
.dmnt-hs-feature{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border:1px solid var(--hs-border);
  border-radius:16px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  position:relative;
  overflow:hidden;
}
.dmnt-hs-feature::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(30,136,255,.08), rgba(26,188,156,.06));
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.dmnt-hs-feature:hover{
  border-color:rgba(30,136,255,.35);
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(30,136,255,.14);
}
.dmnt-hs-feature:hover::before{opacity:1}

.dmnt-hs-feature i{
  flex-shrink:0;
  width:46px;height:46px;
  display:grid;
  place-items:center;
  font-size:20px;
  color:var(--hs-primary);
  background:var(--hs-primary-light);
  border-radius:12px;
  transition:all .3s ease;
  position:relative;
  z-index:1;
}
.dmnt-hs-feature:hover i{
  background:var(--hs-primary);
  color:#fff;
  transform:rotate(-6deg) scale(1.08);
}
/* Color variations by position */
.dmnt-hs-feature:nth-child(2) i{background:#e6f7f4;color:var(--hs-teal)}
.dmnt-hs-feature:nth-child(2):hover i{background:var(--hs-teal);color:#fff}
.dmnt-hs-feature:nth-child(3) i{background:#fff4e6;color:var(--hs-orange)}
.dmnt-hs-feature:nth-child(3):hover i{background:var(--hs-orange);color:#fff}
.dmnt-hs-feature:nth-child(4) i{background:#fde7ec;color:var(--hs-pink)}
.dmnt-hs-feature:nth-child(4):hover i{background:var(--hs-pink);color:#fff}

.dmnt-hs-feature-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  position:relative;
  z-index:1;
  min-width:0;
}
.dmnt-hs-feature-title{
  font-size:15px;
  font-weight:700;
  color:var(--hs-text-dark);
  line-height:1.25;
}
.dmnt-hs-feature-desc{
  font-size:13px;
  color:var(--hs-text-muted);
  line-height:1.4;
}

/* Button */
.dmnt-hs-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 34px;
  background:linear-gradient(135deg, var(--hs-primary) 0%, var(--hs-primary-dark) 100%);
  color:#fff;
  text-decoration:none;
  border-radius:50px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.3px;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 8px 20px rgba(30,136,255,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;
  overflow:hidden;
}
.dmnt-hs-button::before{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition:left .6s ease;
}
.dmnt-hs-button:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 32px rgba(30,136,255,.45),
    inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff;
}
.dmnt-hs-button:hover::before{left:100%}
.dmnt-hs-button i{font-size:16px}

/* ============ TABLET (max 1024px) ============ */
@media (max-width:1024px){
  .dmnt-hs-wrapper{padding:80px 0}
  .dmnt-hs-container{gap:50px;padding:0 20px}
  .dmnt-hs-collage{height:480px;gap:18px}
  .dmnt-hs-polaroid img{min-height:180px}
  .dmnt-hs-description{font-size:16px;margin-bottom:30px}
  .dmnt-hs-features{gap:12px;margin-bottom:32px}
  .dmnt-hs-feature{padding:14px 16px}
  .dmnt-hs-feature i{width:40px;height:40px;font-size:18px}
  .dmnt-hs-feature-title{font-size:14px}
  .dmnt-hs-feature-desc{font-size:12px}
}

/* ============ MOBILE (max 768px) ============ */
@media (max-width:768px){
  .dmnt-hs-wrapper{padding:60px 0}
  .dmnt-hs-container{
    grid-template-columns:1fr;
    gap:50px;
    padding:0 20px;
  }
  .dmnt-hs-right{order:1}
  .dmnt-hs-left{order:2}
  .dmnt-hs-content{max-width:100%;text-align:left}
  .dmnt-hs-subheadline{font-size:11px;padding:7px 14px;margin-bottom:16px}
  .dmnt-hs-title{font-size:clamp(28px, 7vw, 40px);margin-bottom:16px}
  .dmnt-hs-description{font-size:15px;margin-bottom:28px;max-width:100%}
  .dmnt-hs-features{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
  .dmnt-hs-feature{padding:14px}
  .dmnt-hs-feature i{width:38px;height:38px;font-size:16px}
  .dmnt-hs-collage{height:420px;gap:14px}
  .dmnt-hs-polaroid{padding:8px 8px 10px;border-radius:14px}
  .dmnt-hs-polaroid img{min-height:160px;border-radius:8px}
  .dmnt-hs-polaroid-1{transform:rotate(-2deg);margin-top:8px}
  .dmnt-hs-polaroid-2{transform:rotate(2deg);margin-top:28px}
  .dmnt-hs-polaroid-3{transform:rotate(1deg);margin-top:-6px}
  .dmnt-hs-polaroid-4{transform:rotate(-1.5deg);margin-top:14px}
  .dmnt-hs-left::before{width:100px;height:100px;top:-20px;right:-10px}
}

/* ============ SMALL MOBILE (max 520px) ============ */
@media (max-width:520px){
  .dmnt-hs-wrapper{padding:50px 0}
  .dmnt-hs-container{padding:0 16px;gap:40px}
  .dmnt-hs-title{font-size:clamp(26px, 8vw, 34px)}
  .dmnt-hs-description{font-size:14.5px}
  .dmnt-hs-features{grid-template-columns:1fr;gap:10px}
  .dmnt-hs-feature{padding:13px 14px;gap:12px}
  .dmnt-hs-feature i{width:36px;height:36px;font-size:15px}
  .dmnt-hs-feature-title{font-size:14px}
  .dmnt-hs-feature-desc{font-size:12px}
  .dmnt-hs-collage{height:360px;gap:12px}
  .dmnt-hs-polaroid{padding:6px 6px 8px}
  .dmnt-hs-polaroid img{min-height:130px}
  .dmnt-hs-button{padding:14px 28px;font-size:14px;width:100%;justify-content:center}
}