/* Colors pulled from the design */
:root{
  --leea-navy: #133b6e;        /* heading/link tone */
  --leea-ink:  #1f2d3d;        /* body text */
  --leea-line: #e7edf5;        /* thin circle stroke */
  --leea-pill: #a7e1df;        /* download button fill (tweak if needed) */
  --leea-pill-text: #0b2e4a;   /* button text */
}

#copsule-intro { color: var(--leea-ink); }
#copsule-intro h2 { color: var(--leea-navy); }

.feature-card .icon-wrap{
  width: 120px; 
  height: 120px;
  display: grid; 
  place-items: center;
}
.feature-card img{
  max-width: 100%;
  height: auto;
}

.feature-card i{
  font-size: 44px; line-height: 1; color: var(--leea-navy);
}
.feature-card .small{
  letter-spacing: .02em;
}

/* CTA pill */
.btn-copsule{
  background: var(--leea-pill);
  color: var(--leea-pill-text);
  border: none;
}
.btn-copsule:hover{
  filter: brightness(0.95);
  color: var(--leea-pill-text);
}

#copsule-intro .pattern-bg {
  position: absolute;
  top: 0;             /* stick it to the top */
  right: 0;               /* on the right */
  width: 100%;
  height: 250px;         /* tweak depending on how much of the pattern you want */
  background: url('patterns/pattern-asset-1.png') no-repeat right bottom;
  background-size: contain;   /* or 'contain' if you don’t want it stretched */
  opacity: 0.6;          /* optional: makes it subtler */
  z-index: 1;            /* put behind the content */
}

#copsule-intro .container {
  position: relative;
  z-index: 2;            /* keep your text/icons on top */
}

#main-section .pattern-bg {
  position: absolute;
  top: 50%;                /* halfway down the section */
  left: 0;                 /* pinned to the left edge */
  width: 600px;            /* control size of the pattern */
  height: 600px;           /* make it square-ish */
  background: url('patterns/pattern-asset-2.png') no-repeat left center;
  background-size: contain;  /* keep proportions of the asset */
  transform: translateY(-70%); /* ensures it's centered vertically */
  opacity: 0.6;           /* faint so it doesn’t overpower */
  z-index: 1;
  pointer-events: none;    /* make sure it never blocks clicks */
}

#main-section .container {
  position: relative;
  z-index: 2; /* ensure text/cards/icons sit above the pattern */
}