.services{
  position: relative;
  background: #20242b;
  color: #fff;
  overflow: hidden;
}

/* === IRREGULAR LIQUID SMEAR TRANSITION === */
.services::before{
  content:"";
  position:absolute;
  left:-15%;
  right:-15%;
  top:-260px;
  height:520px;
  pointer-events:none;
  z-index:0;

  /* COLOR LAYERS (same palette you liked) */
  background:
    /* soft horizontal spread */
    linear-gradient(
      to bottom,
      rgba(32,36,43,0) 0%,
      rgba(32,36,43,.25) 25%,
      rgba(32,36,43,.65) 55%,
      rgba(32,36,43,1) 85%
    ),

    /* irregular blobs */
    conic-gradient(
      from 120deg at 15% 55%,
      rgba(32,36,43,.9),
      transparent 35%,
      rgba(32,36,43,.95),
      transparent 70%
    ),

    conic-gradient(
      from -40deg at 60% 40%,
      rgba(32,36,43,.85),
      transparent 40%,
      rgba(32,36,43,.9),
      transparent 75%
    ),

    conic-gradient(
      from 210deg at 85% 60%,
      rgba(32,36,43,.9),
      transparent 45%,
      rgba(32,36,43,.95),
      transparent 80%
    );

  /* === ORGANIC MASK (THIS IS THE KEY) === */
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 35%,
      #000 65%,
      transparent 100%
    ),
    radial-gradient(120% 80% at 10% 40%, #000 55%, transparent 75%),
    radial-gradient(140% 90% at 35% 55%, #000 58%, transparent 78%),
    radial-gradient(160% 100% at 60% 45%, #000 60%, transparent 80%),
    radial-gradient(140% 90% at 85% 55%, #000 56%, transparent 76%);
  
  -webkit-mask-composite: source-over;
  mask-composite: intersect;

  filter: blur(34px);
}

/* keeps content above smear */
.services__inner{
  position:relative;
  z-index:1;
}

/* keeps content above smear */
.services__inner{
  position:relative;
  z-index:1;
}

.services__inner{
  max-width:1120px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.services__head{
  max-width: 980px;
  margin: 0 auto clamp(2.2rem,4vw,3rem);
  text-align: left;                 /* nije centrirano */
}

.services__title{
  font-size: clamp(2.4rem, 3.8vw, 3.2rem); 
  font-weight: 400;                   
  margin-top: clamp(2.8rem, 6vw, 4.2rem); 
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); 
}

.services__intro{
  max-width: 78ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem); /* malo veće */
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.services__grid{
  display:grid;
  gap:clamp(1.6rem,3.6vw,2.4rem);
}

.svc{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:clamp(1.6rem,3.6vw,2.6rem);
  align-items:center;

  padding: clamp(1.2rem, 3vw, 2rem) 0; 
  background: transparent;             
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.svc--img-right{
  grid-template-columns:1.25fr 1fr;
}

.svc__media{
  display:flex;
  justify-content:center;
  align-items:center;
}

.svc__media img{
  width:min(360px,100%);
  height:auto;
  filter:drop-shadow(0 20px 48px rgba(0,0,0,.35));
}

.svc__content{ min-width:0; }

.svc__title{
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1.05rem;
}

.svc__desc{
  margin: 0 0 1.35rem;
  line-height: 1.75;
}

.svc__snippets{
  margin: 0 0 1.35rem;
  padding: 1.25rem 1.3rem;
}

.svc__line{
  margin: .65rem 0;             
  line-height: 1.6;
}

.svc__flow{
  margin: 0 0 1.35rem;
  line-height: 1.65
  color: rgba(195, 170, 191, 0.92);
}

.svc__flow-label{
  font-weight:650;
 color: rgba(195, 170, 191, 0.98);
}
.svc__micro-title{
  margin: 0 0 .55rem;
}

.svc__micro-list{
  margin: 0;
  padding-left: 1.2rem;
}

.svc__micro-list li{
  margin: .5rem 0;               
  line-height: 1.6;
}

/* ===== trust ===== */
.services__trust{
  margin-top:clamp(2.2rem,4vw,3rem);
  text-align:center;
}

.services__trust-line{
  max-width:70ch;
  margin:0 auto;
  padding:.85rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
}

/* ===== mobile ===== */
@media (max-width:860px){
  .svc,
  .svc--img-right{
    grid-template-columns:1fr;
  }

  .svc__media img{
    width:min(260px,86%);
  }

  .services__head{
    text-align:left;
  }
}
/* ===== Premium enter-once animation ===== */
@media (prefers-reduced-motion: no-preference){
  .svc{
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
    transition:
      opacity 520ms ease,
      transform 520ms cubic-bezier(.2,.8,.2,1),
      filter 520ms ease;
    will-change: opacity, transform, filter;
  }

  .svc.is-inview{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  /* tiny stagger without JS changes (works if DOM order is stable) */
  .svc:nth-child(1){ transition-delay: 60ms; }
  .svc:nth-child(2){ transition-delay: 120ms; }
  .svc:nth-child(3){ transition-delay: 180ms; }
  .svc:nth-child(4){ transition-delay: 240ms; }
  .svc:nth-child(5){ transition-delay: 300ms; }
}
/* ===== iOS/mobile: prevent text clipping on the left ===== */
.services{
  overflow-x: clip;                 /* ili hidden ako ti treba šira podrška */
}

.services__inner{
  /* normal padding + iOS safe-area */
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ako ti services__head nije unutar services__inner, osiguraj i njemu */
.services__head{
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* sigurnosno: da kartice ne “bježe” iz grid-a */
.svc{
  width: 100%;
  min-width: 0;
}
:root{
  --accent-pink: rgba(195,170,191,.55); /* ista familija kao Make / n8n */
}
/* ===== Highlight key outcome rows ===== */

.svc__snippets{
  position: relative;
  margin-top: 1.2rem;
  padding: 1.15rem 1.25rem;

  /* glass base – tamna, ali izdignuta */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );

  border-radius: 22px;

  /* soft edges */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 12px 34px rgba(0,0,0,.35);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.svc__snippets::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(
      120% 140% at 12% 20%,
      var(--accent-pink),
      transparent 60%
    );

  opacity:.18;
  filter: blur(18px);
}
.svc__line{
  margin: .55rem 0;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

.svc__line strong{
  color: rgba(255,255,255,.95);
  font-weight: 600;
}
@media (max-width: 640px){
  .svc__snippets{
    padding: 1rem 1.05rem;
    border-radius: 18px;
  }
}